diff --git a/UI/JsBasicComponents/README_zh.md b/UI/JsBasicComponents/README_zh.md
index 7838c0e7ec6d1befa05ba4cd820f4d601e75c3e9..c35ab02551e63b2c1cbf3398a3b072499558e80e 100644
--- a/UI/JsBasicComponents/README_zh.md
+++ b/UI/JsBasicComponents/README_zh.md
@@ -6,8 +6,8 @@
 
 ### 使用说明
 
-通过滑动列表，点击组件，查看各组件的视图效果和点击效果，以及与组件交互的是实现方法。
-组件之间相互独立，可以在需求相同的地方重复是使用。
+通过滑动列表，点击组件，查看各组件的视图效果和点击效果，以及与组件交互的实现方法。
+组件之间相互独立，可以在需求相同的地方重复使用。
 
 ### 约束与限制
 
diff --git a/UI/JsBasicComponents/build.gradle b/UI/JsBasicComponents/build.gradle
index b2d91b2309022766cd1f638545369a910c9265fc..544c600aead0fa0716621e5de7795a8d420ec3ea 100644
--- a/UI/JsBasicComponents/build.gradle
+++ b/UI/JsBasicComponents/build.gradle
@@ -1,11 +1,12 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 apply plugin: 'com.huawei.ohos.app'
+
 //For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
 ohos {
-    compileSdkVersion 7
+    compileSdkVersion 8
     supportSystem "standard"
 }
-
+	
 buildscript {
     repositories {
         maven {
@@ -16,7 +17,7 @@ buildscript {
         }
     }
     dependencies {
-        classpath 'com.huawei.ohos:hap:3.0.3.2'
+        classpath 'com.huawei.ohos:hap:3.0.5.2'
     }
 }
 
@@ -28,6 +29,5 @@ allprojects {
         maven {
             url 'https://developer.huawei.com/repo/'
         }
-        jcenter()
     }
 }
diff --git a/UI/JsBasicComponents/entry/build.gradle b/UI/JsBasicComponents/entry/build.gradle
index cb1b043b0ac22c936d09041dc7bfecd617931472..e7ab61a295250d4e5c32d2096a53451cf045bbf3 100644
--- a/UI/JsBasicComponents/entry/build.gradle
+++ b/UI/JsBasicComponents/entry/build.gradle
@@ -1,7 +1,7 @@
 apply plugin: 'com.huawei.ohos.hap'
 //For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
 ohos {
-    compileSdkVersion 7
+    compileSdkVersion 8
     defaultConfig {
         compatibleSdkVersion 7
     }
@@ -13,4 +13,4 @@ ohos {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/UI/JsBasicComponents/entry/src/main/config.json b/UI/JsBasicComponents/entry/src/main/config.json
index 9d4eb918d19d19e2a792f6f1695f6e0f427d77ea..819890c13a2e03a9dee8a0ffea2dafec156114cb 100644
--- a/UI/JsBasicComponents/entry/src/main/config.json
+++ b/UI/JsBasicComponents/entry/src/main/config.json
@@ -1,16 +1,17 @@
 {
   "app": {
-    "bundleName": "ohos.samples.jsbasiccomponent",
+    "bundleName": "ohos.samples.jsbasiccomponents",
+    "vendor": "samples",
     "version": {
       "code": 1000000,
-      "name": "1.0"
+      "name": "1.0.0"
     }
   },
   "deviceConfig": {},
   "module": {
-    "package": "ohos.samples.jsbasiccomponent",
+    "package": "ohos.samples.jsbasiccomponents",
     "name": ".MyApplication",
-    "mainAbility": ".default",
+    "mainAbility": ".MainAbility",
     "deviceType": [
       "phone"
     ],
@@ -32,12 +33,14 @@
             ]
           }
         ],
+        "orientation": "unspecified",
         "visible": true,
-        "name": ".default",
-        "icon": "$media:icon",
-        "srcPath": "default",
+        "srcPath": "MainAbility",
+        "name": ".MainAbility",
         "srcLanguage": "js",
-        "description": "$string:mainability_description",
+        "icon": "$media:icon",
+        "description": "$string:description_mainability",
+        "formsEnabled": false,
         "label": "$string:app_name",
         "type": "page",
         "launchType": "standard"
@@ -48,7 +51,7 @@
         "pages": [
           "pages/index/index"
         ],
-        "name": ".default"
+        "name": ".MainAbility"
       }
     ]
   }
diff --git a/UI/JsBasicComponents/entry/src/main/js/MainAbility/app.js b/UI/JsBasicComponents/entry/src/main/js/MainAbility/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/UI/JsBasicComponents/entry/src/main/js/MainAbility/app.js
@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/common/images/Wallpaper.png b/UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/Wallpaper.png
similarity index 100%
rename from UI/JsBasicComponents/entry/src/main/js/default/common/images/Wallpaper.png
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/Wallpaper.png
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/common/images/bg-tv.jpg b/UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/bg-tv.jpg
similarity index 100%
rename from UI/JsBasicComponents/entry/src/main/js/default/common/images/bg-tv.jpg
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/bg-tv.jpg
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/common/images/like_space.png b/UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/like_space.png
similarity index 100%
rename from UI/JsBasicComponents/entry/src/main/js/default/common/images/like_space.png
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/like_space.png
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/common/images/like_yellow.png b/UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/like_yellow.png
similarity index 100%
rename from UI/JsBasicComponents/entry/src/main/js/default/common/images/like_yellow.png
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/common/images/like_yellow.png
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/i18n/en-US.json b/UI/JsBasicComponents/entry/src/main/js/MainAbility/i18n/en-US.json
similarity index 93%
rename from UI/JsBasicComponents/entry/src/main/js/default/i18n/en-US.json
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/i18n/en-US.json
index b80fa99cafdacf77d4c156b4eacd0869cf7ee269..2a03ef877b7325768a382978de614e66a835800d 100644
--- a/UI/JsBasicComponents/entry/src/main/js/default/i18n/en-US.json
+++ b/UI/JsBasicComponents/entry/src/main/js/MainAbility/i18n/en-US.json
@@ -1,15 +1,15 @@
 {
   "strings": {
-    "title_case1":"Case 1：Button",
+    "title_case1":"Case 1:Button",
     "title_case2": "Case 2:Image And Text",
     "title_case3": "Case 3:Marquee",
     "title_case4": "Case 4:Input",
     "title_case5": "Case 5:Progress",
     "title_case6": "Case 6:Select",
     "title_case7": "Case 7:Piece",
-    "title_case8": "Case 8: Qrcode",
+    "title_case8": "Case 8:Qrcode",
     "title_case9": "Case 9:Toggle",
-    "title_case10": "Case 10 Switch",
+    "title_case10": "Case 10:Switch",
     "title_case11": "Case 11:Rating",
 
     "content_case1_t1":"Primary button",
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/i18n/zh-CN.json b/UI/JsBasicComponents/entry/src/main/js/MainAbility/i18n/zh-CN.json
similarity index 93%
rename from UI/JsBasicComponents/entry/src/main/js/default/i18n/zh-CN.json
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/i18n/zh-CN.json
index ce267275d5400bfb5390ea38ec6631c6df0565b1..0e350f80ade14e9a64b07ced09ab9aad110a2a5c 100644
--- a/UI/JsBasicComponents/entry/src/main/js/default/i18n/zh-CN.json
+++ b/UI/JsBasicComponents/entry/src/main/js/MainAbility/i18n/zh-CN.json
@@ -1,15 +1,15 @@
 {
   "strings": {
-    "title_case1":"Case 1：Button",
+    "title_case1":"Case 1:Button",
     "title_case2": "Case 2:Image And Text",
     "title_case3": "Case 3:Marquee",
     "title_case4": "Case 4:Input",
     "title_case5": "Case 5:Progress",
     "title_case6": "Case 6:Select",
     "title_case7": "Case 7:Piece",
-    "title_case8": "Case 8: Qrcode",
+    "title_case8": "Case 8:Qrcode",
     "title_case9": "Case 9:Toggle",
-    "title_case10": "Case 10 Switch",
+    "title_case10": "Case 10:Switch",
     "title_case11": "Case 11:Rating",
 
     "content_case1_t1":"基本按钮",
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.css b/UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.css
similarity index 99%
rename from UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.css
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.css
index aea3139a3f06fa9808f33f0406bd2edfc9052562..85aaf6132dff688e293733d5faa1d19f8bfde03b 100644
--- a/UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.css
@@ -30,12 +30,12 @@
     margin-right : 24px;
 }
 
-.item-class {
+.item-div{
     flex-direction: column;
 }
 
 .case-title {
-    font-size: 40px;
+    font-size: 30px;
     color: black;
     font-weight: 900;
     margin-top: 40px;
@@ -350,7 +350,7 @@
     align-items : center;
     width : 100%;
     margin-top : 20px;
-    padding-bottom : 400px;
+    padding-bottom : 300px;
 }
 
 .btn-input {
diff --git a/UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.hml b/UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..99f11ef4ec504f8fe7c32ba6a74913c9d5eacc0a
--- /dev/null
+++ b/UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.hml
@@ -0,0 +1,314 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+<div class="div-main">
+    <list class="list-main">
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case1') }}</text>
+                </div>
+                <div class="div-content">
+                    <text class="txt-case1-t1">{{ $t('strings.content_case1_t1') }}</text>
+                    <div class="div-button-case1">
+                        <button class="button-emphasize" value="{{ $t('strings.btn_emphasize') }}"></button>
+                        <button class="button-capsule" type="capsule" value="{{ $t('strings.btn_capsule') }}"></button>
+                        <button class="button-loading" type="capsule" waiting="true"
+                                value="{{ $t('strings.btn_load') }}"></button>
+                    </div>
+
+                    <div class="div-button-case1">
+                        <button class="button-border" value="{{ $t('strings.btn_border') }}"></button>
+                        <button class="button-normal" value="{{ $t('strings.btn_normal') }}"></button>
+                        <button class="button-text" type="text" value="{{ $t('strings.btn_text') }}"></button>
+                        <button class="button-circle" type="circle"></button>
+                    </div>
+
+                    <text class="txt-case1-t2">{{ $t('strings.content_case1_t2') }}</text>
+
+                    <div class="div-button-case1">
+                        <button class="button-emphasize-click" value="{{ $t('strings.btn_click') }} "
+                                on:click="clickBtn"></button>
+                        <button class="button-emphasize-long-click" value="{{ $t('strings.btn_long_click') }} "
+                                on:longpress="clickBtnLong"></button>
+                        <button class="button-border-click" value="{{ $t('strings.btn_click') }}" on:click="clickBtn">
+                        </button>
+                        <button class="button-loading" type="capsule" waiting="{{ waiting }} "
+                                value="{{ $t('strings.btn_click') }}" on:click="clickBtnLoading"></button>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case2') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div class="div-column-top20">
+                        <image class="img" src="{{ imgPath }}"></image>
+                        <text class="title-text">{{ headTitle }}</text>
+                        <text class="paragraph-text">{{ paragraphFirst }}</text>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case3') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div class="div-column-top20">
+                        <marquee id="customMarquee" class="custom-marquee" scrollamount="{{ scrollAmount }}"
+                                 loop="{{ loop }}" direction="{{ marqueeDir }}">{{ $t('strings.marqueeCustomData') }}
+                        </marquee>
+                        <div class="marquee-btn-content">
+                            <button class="control-button" onclick="onStartClick"
+                                    value="{{ $t('strings.btn_marquee_start') }}"></button>
+                            <button class="control-button" onclick="onStopClick"
+                                    value="{{ $t('strings.btn_marquee_stop') }}"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case4') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div class="div-column-top20">
+                        <div class="div-input-content" if="{{ ! commentText }}">
+                            <text class="comment-text2" focusable="true"></text>
+                            <div>
+                                <input class="comment" value="{{ inputValue }}" onchange="updateValue()"
+                                       placeholder="{{ $t('strings.input_tip') }}"></input>
+                                <text class="comment-key" onclick="update" focusable="true">{{ $t('strings.input_sure')
+                                    }}</text>
+                            </div>
+                        </div>
+
+                        <div class="div-input-content" if="{{ commentText }}">
+                            <text class="comment-text2" focusable="true">{{ showValue }}</text>
+                            <div>
+                                <input class="comment" value="{{ inputValue }}" onchange="updateValue()"
+                                       placeholder="{{ $t('strings.input_tip') }}"></input>
+                                <text class="comment-key" onclick="update" focusable="true">{{ $t('strings.input_clean')
+                                    }}</text>
+                            </div>
+                        </div>
+
+                        <div>
+                            <text class="txt-input-desc">{{ $t('strings.multi_select_button') }}</text>
+                        </div>
+
+                        <div class="div-select">
+                            <input type="checkbox" class="btn-input"></input>
+                            <input type="checkbox" class="btn-input"></input>
+                            <input type="checkbox" class="btn-input"></input>
+                            <input type="checkbox" class="btn-input"></input>
+                            <input type="checkbox" class="btn-input"></input>
+                        </div>
+
+                        <div>
+                            <text class="txt-input-desc">{{ $t('strings.single_choice_button') }}</text>
+                        </div>
+
+                        <div class="div-select">
+                            <input type="radio" class="btn-input" name="radio1"></input>
+                            <input type="radio" class="btn-input" name="radio1"></input>
+                            <input type="radio" class="btn-input" name="radio1"></input>
+                            <input type="radio" class="btn-input" name="radio1"></input>
+                            <input type="radio" class="btn-input" name="radio1"></input>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case5') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div class="div-column-top20">
+                        <div class="div-progress-row">
+                            <div class="div-progress">
+                                <progress class="min-progress" type="scale-ring" percent="10" secondarypercent="50">
+                                </progress>
+                                <text class="txt-progress-name">{{ $t('strings.progress_scale_ring') }}</text>
+                            </div>
+                            <div class="div-progress">
+                                <progress class="min-progress" type="circular"></progress>
+                                <text class="txt-progress-name">{{ $t('strings.progress_circular') }}</text>
+                            </div>
+                        </div>
+
+                        <div class="div-progress-row">
+                            <div class="div-progress">
+                                <progress class="min-progress" type="arc" percent="10" secondarypercent="50"></progress>
+                                <text class="txt-progress-name">{{ $t('strings.progress_arc') }}</text>
+                            </div>
+                            <div class="div-progress">
+                                <progress class="min-progress" type="ring" percent="10" secondarypercent="50">
+                                </progress>
+                                <text class="txt-progress-name">{{ $t('strings.progress_ring') }}</text>
+                            </div>
+                        </div>
+
+                        <progress class="div-horizontal-progress" type="horizontal" percent="10" secondarypercent="50">
+                        </progress>
+                        <text class="txt-progress-name">{{ $t('strings.progress_horizontal') }}</text>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case6') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div class="div-select-content">
+                        <select id="orderTimeDataSel" class="select">
+                            <option value="value1" class="option-style"> {{ $t('strings.user1') }}</option>
+                            <option value="value2" class="option-style"> {{ $t('strings.user2') }}</option>
+                            <option value="value3" class="option-style"> {{ $t('strings.user3') }}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case7') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div>
+                        <piece class="piece-class" if="{{ first }}" content="{{ $t('strings.piece_user') }}"></piece>
+                        <piece class="piece-class" if="{{ second }}" content="{{ $t('strings.piece_user') }}"
+                               on:click="pieceClicked" closable="true" on:close="closeSecond"></piece>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case8') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <qrcode class="cass-qrcode" value="https://huawei.com" on:longpress="longPressQrcode"></qrcode>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case9') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <text class="margin">{{ $t('strings.toggle_multiple') }}</text>
+                    <div class="div-toggle">
+                        <toggle class="margin" for="{{ toggles }}" value="{{ $item }}"></toggle>
+                    </div>
+                    <text class="margin">{{ $t('strings.toggle_single') }}</text>
+                    <div class="div-toggle">
+                        <toggle class="margin" for="{{ toggle_list }}" id="{{ $item.id }}" checked="{{ $item.checked }}"
+                                value="{{ $item.name }}" on:change="allChange"
+                                on:click="allClick({{ $item.id }},{{ $item.name }})"></toggle>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case10') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <div class="div-switch-row">
+                        <div class="div-switch">
+                            <switch class="css-switch"></switch>
+                            <text class="txt-switch-name">{{ $t('strings.switch_default') }}</text>
+                        </div>
+
+                        <div class="div-switch">
+                            <switch class="css-switch" showtext="true"></switch>
+                            <text class="txt-switch-name">{{ $t('strings.switch_text') }}</text>
+                        </div>
+                    </div>
+
+                    <div class="div-switch-row">
+                        <div class="div-switch">
+                            <switch class="css-switch" showtext="true" on:change="switchChanged" checked="true">
+                            </switch>
+                            <text class="txt-switch-name">{{ $t('strings.switch_changed_status') }}</text>
+                        </div>
+
+                        <div class="div-switch">
+                            <switch class="css-switch-custom" showtext="true" texton="open" textoff="close"></switch>
+                            <text class="txt-switch-name">{{ $t('strings.switch_custom_text') }}</text>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </list-item>
+
+        <list-item clickeffect="false">
+            <div class="item-div">
+                <div>
+                    <text class="case-title">{{ $t('strings.title_case11') }}</text>
+                </div>
+
+                <div class="div-content">
+                    <text class="txt-rating">{{ $t('strings.rating_txt1') }}</text>
+                    <rating class="class-rating" numstars="5" rating="2" indicator="false" on:change="ratingChanged">
+                    </rating>
+                </div>
+
+                <div class="div-content-rating2">
+                    <text class="txt-rating">{{ $t('strings.rating_txt2') }}</text>
+                    <rating class="class-rating" numstars="5" rating="4" indicator="true"></rating>
+                </div>
+
+                <div class="div-content-rating2">
+                    <text class="txt-rating">{{ $t('strings.rating_txt3') }}</text>
+                    <rating class="class-rating-custom" numstars="5" rating="1" indicator="false"></rating>
+                </div>
+            </div>
+        </list-item>
+    </list>
+</div>
\ No newline at end of file
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.js b/UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.js
similarity index 100%
rename from UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.js
rename to UI/JsBasicComponents/entry/src/main/js/MainAbility/pages/index/index.js
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/app.js b/UI/JsBasicComponents/entry/src/main/js/default/app.js
deleted file mode 100644
index c158442201abb1888ae8fb1d57f150c5ec26c36b..0000000000000000000000000000000000000000
--- a/UI/JsBasicComponents/entry/src/main/js/default/app.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export default {
-    onCreate() {
-        console.info('AceApplication onCreate');
-    },
-    onDestroy() {
-        console.info('AceApplication onDestroy');
-    }
-};
diff --git a/UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.hml b/UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.hml
deleted file mode 100644
index 7d1d6ff5285bc507cd64e59edffd964a8b0f74e8..0000000000000000000000000000000000000000
--- a/UI/JsBasicComponents/entry/src/main/js/default/pages/index/index.hml
+++ /dev/null
@@ -1,274 +0,0 @@
-<!--
- Copyright (c) 2021 Huawei Device Co., Ltd.
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- -->
-<div class="div-main">
-    <list class="list-main">
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{$t('strings.title_case1')}}</text>
-            </div>
-            <div class="div-content">
-                <text class="txt-case1-t1">{{$t('strings.content_case1_t1')}}</text>
-                <div class="div-button-case1">
-                    <button class="button-emphasize" value="{{$t('strings.btn_emphasize')}}"></button>
-                    <button class="button-capsule" type="capsule" value="{{$t('strings.btn_capsule')}}"></button>
-                    <button class="button-loading" type="capsule" waiting="true" value="{{$t('strings.btn_load')}}"></button>
-                </div>
-
-                <div class="div-button-case1">
-                    <button class="button-border" value="{{$t('strings.btn_border')}}"></button>
-                    <button class="button-normal" value="{{$t('strings.btn_normal')}}"></button>
-                    <button class="button-text" type="text" value="{{$t('strings.btn_text')}}"></button>
-                    <button class="button-circle" type="circle"></button>
-                </div>
-
-                <text class="txt-case1-t2">{{$t('strings.content_case1_t2')}}</text>
-
-                <div class="div-button-case1">
-                    <button class="button-emphasize-click" value="{{$t('strings.btn_click')}} " on:click="clickBtn"></button>
-                    <button class="button-emphasize-long-click" value="{{$t('strings.btn_long_click')}} "on:longpress="clickBtnLong"></button>
-                    <button class="button-border-click" value="{{$t('strings.btn_click')}}" on:click="clickBtn"></button>
-                    <button class="button-loading" type="capsule" waiting="{{ waiting }} "value="{{$t('strings.btn_click')}}" on:click="clickBtnLoading"></button>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case2') }}</text>
-            </div>
-
-            <div class="div-content">
-                <div class="div-column-top20">
-                    <image class="img" src="{{ imgPath }}"></image>
-                    <text class="title-text">{{ headTitle }}</text>
-                    <text class="paragraph-text">{{ paragraphFirst }}</text>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case3') }}</text>
-            </div>
-
-            <div class="div-content">
-                <div class="div-column-top20">
-                    <marquee id="customMarquee" class="custom-marquee" scrollamount="{{ scrollAmount }}"
-                             loop="{{ loop }}" direction="{{ marqueeDir }}">{{ $t('strings.marqueeCustomData') }}
-                    </marquee>
-                    <div class="marquee-btn-content">
-                        <button class="control-button" onclick="onStartClick" value="{{ $t('strings.btn_marquee_start') }}"></button>
-                        <button class="control-button" onclick="onStopClick" value="{{ $t('strings.btn_marquee_stop') }}"></button>
-                    </div>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{$t('strings.title_case4')}}</text>
-            </div>
-
-            <div class="div-content">
-                <div class="div-column-top20">
-                    <div class="div-input-content" if="{{ ! commentText }}">
-                        <text class="comment-text2" focusable="true"></text>
-                        <div>
-                            <input class="comment" value="{{ inputValue }}" onchange="updateValue()" placeholder="{{$t('strings.input_tip')}}" ></input>
-                            <text class="comment-key" onclick="update" focusable="true">{{$t('strings.input_sure')}}</text>
-                        </div>
-                    </div>
-
-                    <div class="div-input-content" if="{{ commentText }}">
-                        <text class="comment-text2" focusable="true">{{showValue}}</text>
-                        <div>
-                            <input class="comment" value="{{inputValue}}" onchange="updateValue()" placeholder="{{$t('strings.input_tip')}}"></input>
-                            <text class="comment-key" onclick="update" focusable="true">{{$t('strings.input_clean')}}</text>
-                        </div>
-                    </div>
-
-                    <div>
-                        <text class="txt-input-desc">{{$t('strings.multi_select_button')}}</text>
-                    </div>
-
-                    <div class="div-select">
-                        <input type="checkbox" class="btn-input"></input>
-                        <input type="checkbox" class="btn-input"></input>
-                        <input type="checkbox" class="btn-input"></input>
-                        <input type="checkbox" class="btn-input"></input>
-                        <input type="checkbox" class="btn-input"></input>
-                    </div>
-
-                    <div>
-                        <text class="txt-input-desc">{{$t('strings.single_choice_button')}}</text>
-                    </div>
-
-                    <div class="div-select">
-                        <input type="radio" class="btn-input" name="radio1"></input>
-                        <input type="radio" class="btn-input" name="radio1"></input>
-                        <input type="radio" class="btn-input" name="radio1"></input>
-                        <input type="radio" class="btn-input" name="radio1"></input>
-                        <input type="radio" class="btn-input" name="radio1"></input>
-                    </div>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{$t('strings.title_case5')}}</text>
-            </div>
-
-            <div class="div-content">
-                <div class="div-column-top20">
-                    <div class="div-progress-row">
-                        <div class="div-progress">
-                            <progress class="min-progress" type="scale-ring" percent="10" secondarypercent="50"></progress>
-                            <text class="txt-progress-name">{{$t('strings.progress_scale_ring')}}</text>
-                        </div>
-                        <div class="div-progress">
-                            <progress class="min-progress" type="circular"></progress>
-                            <text class="txt-progress-name">{{$t('strings.progress_circular')}}</text>
-                        </div>
-                    </div>
-
-                    <div class="div-progress-row">
-                        <div class="div-progress">
-                            <progress class="min-progress" type="arc" percent="10" secondarypercent="50"></progress>
-                            <text class="txt-progress-name">{{$t('strings.progress_arc')}}</text>
-                        </div>
-                        <div class="div-progress">
-                            <progress class="min-progress" type="ring" percent="10" secondarypercent="50"></progress>
-                            <text class="txt-progress-name">{{ $t('strings.progress_ring') }}</text>
-                        </div>
-                    </div>
-
-                    <progress class="div-horizontal-progress" type="horizontal"percent="10" secondarypercent="50"></progress>
-                    <text class="txt-progress-name">{{$t('strings.progress_horizontal')}}</text>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case6') }}</text>
-            </div>
-
-            <div class="div-content">
-                <div class="div-select-content">
-                    <select id="orderTimeDataSel" class="select">
-                        <option value="value1" class="option-style"> {{ $t('strings.user1') }}</option>
-                        <option value="value2" class="option-style"> {{ $t('strings.user2') }}</option>
-                        <option value="value3" class="option-style"> {{ $t('strings.user3') }}</option>
-                    </select>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case7') }}</text>
-            </div>
-
-            <div class="div-content">
-                <div>
-                    <piece class="piece-class" if="{{first}}" content="{{$t('strings.piece_user')}}"></piece>
-                    <piece class="piece-class"if="{{second}}" content="{{$t('strings.piece_user')}}" on:click="pieceClicked" closable="true" on:close="closeSecond"></piece>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case8')}}</text>
-            </div>
-
-            <div class="div-content">
-                <qrcode class="cass-qrcode" value="https://huawei.com" on:longpress="longPressQrcode" ></qrcode>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case9')}}</text>
-            </div>
-
-            <div class="div-content">
-                <text class="margin">{{ $t('strings.toggle_multiple')}}</text>
-                <div class="div-toggle">
-                    <toggle class="margin" for="{{toggles}}" value="{{$item}}"></toggle>
-                </div>
-                <text class="margin">{{ $t('strings.toggle_single')}}</text>
-                <div class="div-toggle">
-                    <toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}"
-                        value="{{$item.name}}" on:change="allChange" on:click="allClick({{$item.id}},{{$item.name}})"></toggle>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case10') }}</text>
-            </div>
-
-            <div class="div-content">
-                <div class="div-switch-row">
-                    <div class="div-switch">
-                        <switch class="css-switch" ></switch>
-                        <text class="txt-switch-name">{{$t('strings.switch_default')}}</text>
-                    </div>
-
-                    <div class="div-switch">
-                        <switch class="css-switch" showtext="true" ></switch>
-                        <text class="txt-switch-name">{{$t('strings.switch_text')}}</text>
-                    </div>
-                </div>
-
-                <div class="div-switch-row">
-                    <div class="div-switch">
-                        <switch class="css-switch" showtext="true" on:change="switchChanged" checked="true" ></switch>
-                        <text class="txt-switch-name">{{$t('strings.switch_changed_status')}}</text>
-                    </div>
-
-                    <div class="div-switch">
-                        <switch class="css-switch-custom" showtext="true"texton="open" textoff="close"></switch>
-                        <text class="txt-switch-name">{{$t('strings.switch_custom_text')}}</text>
-                    </div>
-                </div>
-            </div>
-        </list-item>
-
-        <list-item class="item-class" clickeffect="false">
-            <div>
-                <text class="case-title">{{ $t('strings.title_case11') }}</text>
-            </div>
-
-            <div class="div-content">
-                <text class="txt-rating">{{ $t('strings.rating_txt1') }}</text>
-                <rating class="class-rating" numstars="5" rating="2" indicator="false" on:change="ratingChanged" ></rating>
-            </div>
-
-            <div class="div-content-rating2">
-                <text class="txt-rating">{{ $t('strings.rating_txt2') }}</text>
-                <rating class="class-rating" numstars="5" rating="4" indicator="true"></rating>
-            </div>
-
-            <div class="div-content-rating2">
-                <text class="txt-rating">{{ $t('strings.rating_txt3') }}</text>
-                <rating class="class-rating-custom" numstars="5" rating="1" indicator="false"></rating>
-            </div>
-        </list-item>
-    </list>
-</div>
\ No newline at end of file
diff --git a/UI/JsBasicComponents/entry/src/main/resources/base/element/string.json b/UI/JsBasicComponents/entry/src/main/resources/base/element/string.json
index f61504dbb4a8e3d48e138fdaed2f265a7b8a4eea..57b71e36cf5010a835cef12147277757d5872879 100644
--- a/UI/JsBasicComponents/entry/src/main/resources/base/element/string.json
+++ b/UI/JsBasicComponents/entry/src/main/resources/base/element/string.json
@@ -5,7 +5,7 @@
       "value": "JsBasicComponents"
     },
     {
-      "name": "mainability_description",
+      "name": "description_mainability",
       "value": "JS_Empty Ability"
     }
   ]