diff --git a/AnimationDemo/README.md b/AnimationDemo/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..60609f9fb1020a976057c2abe0d93b537694d329
--- /dev/null
+++ b/AnimationDemo/README.md
@@ -0,0 +1,4 @@
+# AnimationDemo
+简介
+• 此demo使用的是通用动画样式，我们通过一个简单的样例，实现了平移、旋转、缩放以及透明度变化的效果。
+
diff --git a/AnimationDemo/entry/src/main/config.json b/AnimationDemo/entry/src/main/config.json
index 0e3106cec6b0a40eb2ea7bd1cf28e3acab4d8b19..7c5e5aa2755c8b711f75b41dd167a665960865e8 100644
--- a/AnimationDemo/entry/src/main/config.json
+++ b/AnimationDemo/entry/src/main/config.json
@@ -46,8 +46,7 @@
     "js": [
       {
         "pages": [
-          "pages/index/index",
-          "pages/second/second"
+          "pages/index/index"
         ],
         "name": "default",
         "window": {
diff --git a/AnimationDemo/entry/src/main/js/default/app.js b/AnimationDemo/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..0756bc0e08a6200c936c46e8526c6e5d2733d2cd 100644
--- a/AnimationDemo/entry/src/main/js/default/app.js
+++ b/AnimationDemo/entry/src/main/js/default/app.js
@@ -1,8 +1,8 @@
 export default {
-    onCreate() {
-        console.info("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
 };
diff --git a/AnimationDemo/entry/src/main/js/default/pages/index/index.css b/AnimationDemo/entry/src/main/js/default/pages/index/index.css
index 1bdd23324887c7a53bf512a796910ecb235ff36d..2d3154be6c60766fb8ae85a41de7938f7e02294c 100644
--- a/AnimationDemo/entry/src/main/js/default/pages/index/index.css
+++ b/AnimationDemo/entry/src/main/js/default/pages/index/index.css
@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 .container {
     background-color: #F8FCF5;
     flex-direction: column;
@@ -9,8 +24,8 @@
 
 .img {
     margin-top: 10px;
-    height: 100px;
-    width: 100px;
+    height: 200px;
+    width: 200px;
     animation-timing-function: ease;
     animation-duration: 2s;
     animation-delay: 0s;
@@ -19,7 +34,7 @@
 }
 
 .text {
-    font-size: 20px;
+    font-size: 24px;
 }
 
 .img-translate {
diff --git a/AnimationDemo/entry/src/main/js/default/pages/index/index.hml b/AnimationDemo/entry/src/main/js/default/pages/index/index.hml
index 48aadd9c129ab2f362381b0d08e68d576303ea5a..0cef0f1c9f7af94237fb319af366bafa964465c5 100644
--- a/AnimationDemo/entry/src/main/js/default/pages/index/index.hml
+++ b/AnimationDemo/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,16 @@
+<!--
+ 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="container">
     <image class="img img-translate" src="/common/images/cat.png"></image>
     <text class="text">translate</text>
diff --git a/AnimationDemo/entry/src/main/js/default/pages/index/index.js b/AnimationDemo/entry/src/main/js/default/pages/index/index.js
index b1c6ea436a540020ff61f01dea449d5b39367b27..619037eb140e69966ec1bbe25563fa355e0d7888 100644
--- a/AnimationDemo/entry/src/main/js/default/pages/index/index.js
+++ b/AnimationDemo/entry/src/main/js/default/pages/index/index.js
@@ -1 +1,16 @@
+/*
+ * 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 {}
diff --git a/ClickableJsDemo/README.md b/ClickableJsDemo/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..84a651f04fd7a8d6fddb92320142e8e1918beeba
--- /dev/null
+++ b/ClickableJsDemo/README.md
@@ -0,0 +1,4 @@
+#ClickableJsDemo
+
+简介 • OpenHarmony JSUI提供了常用的布局、组件等页面元素，并且为这些组件提供了很多属性与可监听到的事件（例如动画属性与点击、触碰事件），开发者可以根据实际场景和开发需求，选用不同的组件、事件、属性来实现界面交互效果的设计，本篇CodeLab，我们将一起开启JS UI基础组件与动画的学习之路。本教程主要涉及到的页面元素有有image，image-animator。
+ 在本文中，CodeLab将会通过几个简单的样例，展现图片资源在界面交互中几种常见运用效果。它旨在帮助开发人员快速了解openHarmony JSUI应用的开发。
\ No newline at end of file
diff --git a/ClickableJsDemo/entry/src/main/js/default/app.js b/ClickableJsDemo/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..0fc4e6f06ffe667b2fc9632386e57f75f6f0896f 100644
--- a/ClickableJsDemo/entry/src/main/js/default/app.js
+++ b/ClickableJsDemo/entry/src/main/js/default/app.js
@@ -1,8 +1,22 @@
+/*
+ * 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("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
 };
diff --git a/ClickableJsDemo/entry/src/main/js/default/common/css/style.css b/ClickableJsDemo/entry/src/main/js/default/common/css/style.css
index f2d37897b2724cb05494dd486db31b364893d3a0..bbd98214a04687d68cd27b15f94a7147cc7ce7bd 100644
--- a/ClickableJsDemo/entry/src/main/js/default/common/css/style.css
+++ b/ClickableJsDemo/entry/src/main/js/default/common/css/style.css
@@ -1,3 +1,17 @@
+/*
+ * 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.
+ */
 .margin-left-10{
     margin-left: 10px;
 }
diff --git a/ClickableJsDemo/entry/src/main/js/default/pages/index/index.css b/ClickableJsDemo/entry/src/main/js/default/pages/index/index.css
index 417891157e735ac2eaba8bd47af9310b1d89c87f..e96b9a1b0e2a1020fc183fc43b8b07d73eedaf0f 100644
--- a/ClickableJsDemo/entry/src/main/js/default/pages/index/index.css
+++ b/ClickableJsDemo/entry/src/main/js/default/pages/index/index.css
@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 @import '../../common/css/style.css';
 .container {
     flex-direction: column;
diff --git a/ClickableJsDemo/entry/src/main/js/default/pages/index/index.hml b/ClickableJsDemo/entry/src/main/js/default/pages/index/index.hml
index 44166e87fdd3896d6a24840fcd874a8aa2c4c072..abeab8250fc22e7336a6665bb9c167c1652ca840 100644
--- a/ClickableJsDemo/entry/src/main/js/default/pages/index/index.hml
+++ b/ClickableJsDemo/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,16 @@
+<!--
+ 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="container">
     <div class="container-son-div">
         <div class="line-div">
diff --git a/ClickableJsDemo/entry/src/main/js/default/pages/index/index.js b/ClickableJsDemo/entry/src/main/js/default/pages/index/index.js
index 1c4153a857e9b1ff8d7dcb3a78b04374f0346376..0635ea06f4c07b80a2b2aae06791b9a2e506698d 100644
--- a/ClickableJsDemo/entry/src/main/js/default/pages/index/index.js
+++ b/ClickableJsDemo/entry/src/main/js/default/pages/index/index.js
@@ -1,140 +1,155 @@
+/*
+ * 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 {
-    data: {
-        imageNormal: {
-            classType: 'main-img-unTouch',
-            src: '/common/images/sky_blue.png',
-            title: '点击阴影'
-        },
-        imageSelect: {
-            src: '/common/images/hook.png',
-            title: '点击切换状态',
-            hook: true
-        },
-        frameContainerPhone: {
-            frames: [
-                {src: '/common/images/frames/phone/phone_0.png'},
-                {src: '/common/images/frames/phone/phone_1.png'},
-                {src: '/common/images/frames/phone/phone_2.png'},
-                {src: '/common/images/frames/phone/phone_3.png'},
-                {src: '/common/images/frames/phone/phone_4.png'},
-                {src: '/common/images/frames/phone/phone_5.png'},
-                {src: '/common/images/frames/phone/phone_6.png'},
-                {src: '/common/images/frames/phone/phone_7.png'},
-                {src: '/common/images/frames/phone/phone_8.png'},
-                {src: '/common/images/frames/phone/phone_9.png'},
-                {src: '/common/images/frames/phone/phone_10.png'},
-                {src: '/common/images/frames/phone/phone_11.png'},
-                {src: '/common/images/frames/phone/phone_12.png'},
-                {src: '/common/images/frames/phone/phone_13.png'},
-                {src: '/common/images/frames/phone/phone_14.png'},
-                {src: '/common/images/frames/phone/phone_15.png'},
-                {src: '/common/images/frames/phone/phone_16.png'},
-                {src: '/common/images/frames/phone/phone_17.png'},
-                {src: '/common/images/frames/phone/phone_18.png'},
-                {src: '/common/images/frames/phone/phone_19.png'},
-                {src: '/common/images/frames/phone/phone_20.png'},
-                {src: '/common/images/frames/phone/phone_21.png'},
-                {src: '/common/images/frames/phone/phone_22.png'},
-                {src: '/common/images/frames/phone/phone_23.png'},
-                {src: '/common/images/frames/phone/phone_24.png'},
-                {src: '/common/images/frames/phone/phone_25.png'},
-                {src: '/common/images/frames/phone/phone_26.png'},
-                {src: '/common/images/frames/phone/phone_27.png'},
-                {src: '/common/images/frames/phone/phone_28.png'},
-                {src: '/common/images/frames/phone/phone_29.png'},
-                {src: '/common/images/frames/phone/phone_30.png'},
-                {src: '/common/images/frames/phone/phone_31.png'},
-                {src: '/common/images/frames/phone/phone_32.png'},
-                {src: '/common/images/frames/phone/phone_33.png'},
-                {src: '/common/images/frames/phone/phone_34.png'},
-                {src: '/common/images/frames/phone/phone_35.png'}
-            ],
-            title: '点击动画效果',
-            durationTime: 3600
-        },
-        frameContainerState: {
-            frames: [],
-            title: '点击切换状态动效',
-            durationTime: 0,
-            flag: true
-        },
-        durationTimeArray: [1400, 1400],
-        back: [
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_0.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_1.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_2.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_3.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_4.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_5.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_6.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_7.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_8.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_9.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_10.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_11.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_12.png'},
-            {src: '/common/images/frames/arrowheadBack/arrowhead_back_13.png'}
-        ],
-        collapse: [
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_0.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_1.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_2.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_3.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_4.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_5.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_6.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_7.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_8.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_9.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_10.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_11.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_12.png'},
-            {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_13.png'}
-        ]
+  data: {
+    imageNormal: {
+      classType: 'main-img-unTouch',
+      src: '/common/images/sky_blue.png',
+      title: '点击阴影'
     },
-// 初始化
-    onInit() {
-        this.frameContainerState.frames = this.back;
-        this.frameContainerState.durationTime = 0;
-        this.frameContainerPhone.durationTime = 0;
+    imageSelect: {
+      src: '/common/images/hook.png',
+      title: '点击切换状态',
+      hook: true
     },
-// 触碰阴影方法
-    changeHookState() {
-        if (this.imageSelect.hook) {
-            this.imageSelect.src = '/common/images/fork.png';
-            this.imageSelect.hook = false;
-        } else {
-            this.imageSelect.src = '/common/images/hook.png';
-            this.imageSelect.hook = true;
-        }
+    frameContainerPhone: {
+      frames: [
+        {src: '/common/images/frames/phone/phone_0.png'},
+        {src: '/common/images/frames/phone/phone_1.png'},
+        {src: '/common/images/frames/phone/phone_2.png'},
+        {src: '/common/images/frames/phone/phone_3.png'},
+        {src: '/common/images/frames/phone/phone_4.png'},
+        {src: '/common/images/frames/phone/phone_5.png'},
+        {src: '/common/images/frames/phone/phone_6.png'},
+        {src: '/common/images/frames/phone/phone_7.png'},
+        {src: '/common/images/frames/phone/phone_8.png'},
+        {src: '/common/images/frames/phone/phone_9.png'},
+        {src: '/common/images/frames/phone/phone_10.png'},
+        {src: '/common/images/frames/phone/phone_11.png'},
+        {src: '/common/images/frames/phone/phone_12.png'},
+        {src: '/common/images/frames/phone/phone_13.png'},
+        {src: '/common/images/frames/phone/phone_14.png'},
+        {src: '/common/images/frames/phone/phone_15.png'},
+        {src: '/common/images/frames/phone/phone_16.png'},
+        {src: '/common/images/frames/phone/phone_17.png'},
+        {src: '/common/images/frames/phone/phone_18.png'},
+        {src: '/common/images/frames/phone/phone_19.png'},
+        {src: '/common/images/frames/phone/phone_20.png'},
+        {src: '/common/images/frames/phone/phone_21.png'},
+        {src: '/common/images/frames/phone/phone_22.png'},
+        {src: '/common/images/frames/phone/phone_23.png'},
+        {src: '/common/images/frames/phone/phone_24.png'},
+        {src: '/common/images/frames/phone/phone_25.png'},
+        {src: '/common/images/frames/phone/phone_26.png'},
+        {src: '/common/images/frames/phone/phone_27.png'},
+        {src: '/common/images/frames/phone/phone_28.png'},
+        {src: '/common/images/frames/phone/phone_29.png'},
+        {src: '/common/images/frames/phone/phone_30.png'},
+        {src: '/common/images/frames/phone/phone_31.png'},
+        {src: '/common/images/frames/phone/phone_32.png'},
+        {src: '/common/images/frames/phone/phone_33.png'},
+        {src: '/common/images/frames/phone/phone_34.png'},
+        {src: '/common/images/frames/phone/phone_35.png'}
+      ],
+      title: '点击动画效果',
+      durationTime: 3600
     },
-// 点击切换状态
-    changeShadow(flag) {
-        if (flag) {
-            this.imageNormal.classType = 'main-img-touch';
-        } else {
-            this.imageNormal.classType = 'main-img-unTouch';
-        }
+    frameContainerState: {
+      frames: [],
+      title: '点击切换状态动效',
+      durationTime: 0,
+      flag: true
     },
-// 点击动画效果方法
-    handleStartFrameContainerPhone() {
-        this.frameContainerPhone.durationTime = 3600;
-        this.$refs.frameContainerPhone.start();
-    },
-// 点击切换状态动效方法
-    handleStartFrameContainerState() {
-        if (this.frameContainerState.flag) {
-            this.frameContainerState.frames = this.collapse;
-            this.frameContainerState.durationTime = this.durationTimeArray[0];
-            this.$refs.frameContainerState.start();
-            this.frameContainerState.flag = false;
-            this.$refs.frameContainerState.stop();
-        } else {
-            this.frameContainerState.frames = this.back;
-            this.frameContainerState.durationTime = this.durationTimeArray[1];
-            this.$refs.frameContainerState.start();
-            this.frameContainerState.flag = true;
-            this.$refs.frameContainerState.stop();
-        }
+    durationTimeArray: [1400, 1400],
+    back: [
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_0.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_1.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_2.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_3.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_4.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_5.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_6.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_7.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_8.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_9.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_10.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_11.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_12.png'},
+      {src: '/common/images/frames/arrowheadBack/arrowhead_back_13.png'}
+    ],
+    collapse: [
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_0.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_1.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_2.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_3.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_4.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_5.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_6.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_7.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_8.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_9.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_10.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_11.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_12.png'},
+      {src: '/common/images/frames/arrowheadCollapse/arrowhead_collapse_13.png'}
+    ]
+  },
+  // 初始化
+  onInit() {
+    this.frameContainerState.frames = this.back;
+    this.frameContainerState.durationTime = 0;
+    this.frameContainerPhone.durationTime = 0;
+  },
+  // 触碰阴影方法
+  changeHookState() {
+    if (this.imageSelect.hook) {
+      this.imageSelect.src = '/common/images/fork.png';
+      this.imageSelect.hook = false;
+    } else {
+      this.imageSelect.src = '/common/images/hook.png';
+      this.imageSelect.hook = true;
+    }
+  },
+  // 点击切换状态
+  changeShadow(flag) {
+    if (flag) {
+      this.imageNormal.classType = 'main-img-touch';
+    } else {
+      this.imageNormal.classType = 'main-img-unTouch';
+    }
+  },
+  // 点击动画效果方法
+  handleStartFrameContainerPhone() {
+    this.frameContainerPhone.durationTime = 3600;
+    this.$refs.frameContainerPhone.start();
+  },
+  // 点击切换状态动效方法
+  handleStartFrameContainerState() {
+    if (this.frameContainerState.flag) {
+      this.frameContainerState.frames = this.collapse;
+      this.frameContainerState.durationTime = this.durationTimeArray[0];
+      this.$refs.frameContainerState.start();
+      this.frameContainerState.flag = false;
+      this.$refs.frameContainerState.stop();
+    } else {
+      this.frameContainerState.frames = this.back;
+      this.frameContainerState.durationTime = this.durationTimeArray[1];
+      this.$refs.frameContainerState.start();
+      this.frameContainerState.flag = true;
+      this.$refs.frameContainerState.stop();
     }
+  }
 };
diff --git a/Database/.idea/code-check/countInfo.json b/Database/.idea/code-check/countInfo.json
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/Database/README.md b/Database/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e12613c597b8ae02ff68662c00742eae4c374a43
--- /dev/null
+++ b/Database/README.md
@@ -0,0 +1,4 @@
+#Database
+
+简介 • JSUI轻量级存储为应用提供key-value键值型的文件数据处理能力，支持应用对数据进行轻量级存储及查询。数据存储形式为键值对，
+键的类型为字符串型，本示例用于展示轻量级存储的实现。
\ No newline at end of file
diff --git a/JSCleanCalculator/build.gradle b/Database/build.gradle
similarity index 84%
rename from JSCleanCalculator/build.gradle
rename to Database/build.gradle
index 19fd4e71e7050e25a3169376f72cf3c810dadf92..9cf74c205fc884ae2c6796ce2298ecbe3f40672d 100644
--- a/JSCleanCalculator/build.gradle
+++ b/Database/build.gradle
@@ -4,9 +4,6 @@ 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 6
-    defaultConfig {
-        compatibleSdkVersion 6
-    }
 }
 	
 buildscript {
@@ -17,10 +14,10 @@ buildscript {
         maven {
             url 'https://developer.huawei.com/repo/'
         }
-        jcenter()
     }
     dependencies {
-        classpath 'com.huawei.ohos:hap:2.4.4.3-RC'
+        classpath 'com.huawei.ohos:hap:2.4.5.5'
+        classpath 'com.huawei.ohos:decctest:1.2.5.1'
     }
 }
 
@@ -32,6 +29,5 @@ allprojects {
         maven {
             url 'https://developer.huawei.com/repo/'
         }
-        jcenter()
     }
 }
diff --git a/JSCleanCalculator/entry/.gitignore b/Database/entry/.gitignore
similarity index 33%
rename from JSCleanCalculator/entry/.gitignore
rename to Database/entry/.gitignore
index 796b96d1c402326528b4ba3c12ee9d92d0e212e9..7d5b7a94f4dcf381f03ff21f28f8a2494b58023f 100644
--- a/JSCleanCalculator/entry/.gitignore
+++ b/Database/entry/.gitignore
@@ -1 +1,2 @@
 /build
+/node_modules
diff --git a/JSCleanCalculator/entry/build.gradle b/Database/entry/build.gradle
similarity index 52%
rename from JSCleanCalculator/entry/build.gradle
rename to Database/entry/build.gradle
index 0c41d1ed0625f1808130ea36646467d8ddf49145..6c2dca308825d3d38937c45c03918e1628bbfb75 100644
--- a/JSCleanCalculator/entry/build.gradle
+++ b/Database/entry/build.gradle
@@ -1,4 +1,5 @@
 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 6
     defaultConfig {
@@ -15,3 +16,8 @@ ohos {
     
     supportSystem "standard"
 }
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/JSCleanCalculator/entry/package.json b/Database/entry/package.json
similarity index 100%
rename from JSCleanCalculator/entry/package.json
rename to Database/entry/package.json
diff --git a/JSCleanCalculator/entry/proguard-rules.pro b/Database/entry/proguard-rules.pro
similarity index 100%
rename from JSCleanCalculator/entry/proguard-rules.pro
rename to Database/entry/proguard-rules.pro
diff --git a/JSCleanCalculator/entry/src/main/config.json b/Database/entry/src/main/config.json
similarity index 78%
rename from JSCleanCalculator/entry/src/main/config.json
rename to Database/entry/src/main/config.json
index 979298495b60e35aea0950915f570ed22be7f6dd..4241213dcef71d77a8fafe6c8d5c2595351cc4e1 100644
--- a/JSCleanCalculator/entry/src/main/config.json
+++ b/Database/entry/src/main/config.json
@@ -1,7 +1,7 @@
 {
   "app": {
     "bundleName": "com.huawei.cookbook",
-    "vendor": "example",
+    "vendor": "huawei",
     "version": {
       "code": 1000000,
       "name": "1.0.0"
@@ -9,9 +9,9 @@
   },
   "deviceConfig": {},
   "module": {
-    "package": "com.example.cleancalculatorbeta",
+    "package": "com.huawei.database",
     "name": ".MyApplication",
-    "mainAbility": "com.example.cleancalculatorbeta.MainAbility",
+    "mainAbility": "com.huawei.database.MainAbility",
     "deviceType": [
       "phone"
     ],
@@ -33,9 +33,11 @@
             ]
           }
         ],
-        "name": "com.example.cleancalculatorbeta.MainAbility",
+        "orientation": "unspecified",
+        "name": "com.huawei.database.MainAbility",
         "icon": "$media:icon",
         "description": "$string:mainability_description",
+        "formsEnabled": false,
         "label": "$string:entry_MainAbility",
         "type": "page",
         "launchType": "standard"
@@ -49,7 +51,7 @@
         "name": "default",
         "window": {
           "designWidth": 720,
-          "autoDesignWidth": true
+          "autoDesignWidth": false
         }
       }
     ]
diff --git a/Database/entry/src/main/js/default/app.js b/Database/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..40ab2bd1818c2cefaf2b65b19ff5dc4f20314ac2
--- /dev/null
+++ b/Database/entry/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * 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('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
+};
diff --git a/Database/entry/src/main/js/default/common/css/style.css b/Database/entry/src/main/js/default/common/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..2f8ea3c872a8866aeae31a8a4a83a2a5f100a7fe
--- /dev/null
+++ b/Database/entry/src/main/js/default/common/css/style.css
@@ -0,0 +1,127 @@
+/*
+ * 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.
+ */
+.margin-left-10{
+    margin-left: 10px;
+}
+.margin-left-20{
+    margin-left: 20px;
+}
+.margin-left-30{
+    margin-left: 30px;
+}
+.margin-left-40{
+    margin-left: 40px;
+}
+.margin-left-50{
+    margin-left: 50px;
+}
+.margin-right-10{
+    margin-right: 10px;
+}
+.margin-right-20{
+    margin-right: 20px;
+}
+.margin-right-30{
+    margin-right: 30px;
+}
+.margin-right-40{
+    margin-right: 40px;
+}
+.margin-right-50{
+    margin-right: 50px;
+}
+
+.margin-top-10{
+    margin-top: 10px;
+}
+.margin-top-20{
+    margin-top: 20px;
+}
+.margin-top-30{
+    margin-top: 30px;
+}
+.margin-top-40{
+    margin-top: 40px;
+}
+.margin-top-50{
+    margin-top: 50px;
+}
+
+.margin-bottom-10{
+    margin-bottom: 10px;
+}
+.margin-bottom-20{
+    margin-bottom: 20px;
+}
+.margin-bottom-30{
+    margin-bottom: 30px;
+}
+.margin-bottom-40{
+    margin-bottom: 40px;
+}
+.margin-bottom-50{
+    margin-bottom: 50px;
+}
+
+
+
+.font-size-2{
+    font-size: 2fp;
+}
+.font-size-4{
+    font-size: 4fp;
+}
+.font-size-6{
+    font-size: 6fp;
+}
+.font-size-8{
+    font-size: 8fp;
+}
+.font-size-10{
+    font-size: 10fp;
+}
+.font-size-12{
+    font-size: 12fp;
+}
+.font-size-14{
+    font-size: 14fp;
+}
+.font-size-16{
+    font-size: 16fp;
+}
+.font-size-18{
+    font-size: 18fp;
+}
+.font-size-20{
+    font-size: 20fp;
+}
+.font-size-22{
+    font-size: 22fp;
+}
+.font-size-24{
+    font-size: 24fp;
+}
+.font-size-26{
+    font-size: 26fp;
+}
+.font-size-28{
+    font-size: 28fp;
+}
+.font-size-30{
+    font-size: 30fp;
+}
+
+
+
diff --git a/Database/entry/src/main/js/default/i18n/en-US.json b/Database/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..08e34eac912bf2651eefc20e26aa479b5e4e7ec2
--- /dev/null
+++ b/Database/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/Database/entry/src/main/js/default/i18n/zh-CN.json b/Database/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dd53b3a8b808aec9396fa663cb00ef22ba61e0a
--- /dev/null
+++ b/Database/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/Database/entry/src/main/js/default/pages/index/index.css b/Database/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..5c4de4bc9ac2fae0a63c2665f09da5b3044c8d69
--- /dev/null
+++ b/Database/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,225 @@
+/*
+ * 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.
+ */
+.container {
+    flex-direction: column;
+    align-items: center;
+}
+
+.div_row {
+    width: 100%;
+    flex-direction: row;
+}
+
+.div_title {
+    width: 100%;
+    justify-content: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.text_title {
+    font-size: 30px;
+    color: #000000;
+}
+
+.row {
+    width: 98%;
+    margin-top: 5px;
+    flex-direction: row;
+}
+
+.input-block {
+    width: 100%;
+}
+
+.label {
+    font-size: 20px;
+    width: 120px;
+    text-align: right;
+}
+
+.input {
+    width: 90%;
+    font-size: 15px;
+}
+
+.button {
+    margin-top: 70px;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 150px;
+    background-color: #17A98E;
+}
+
+
+.button-delete {
+    margin-top: 70px;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 150px;
+    background-color: #DE1A33;
+}
+
+.title {
+    font-size: 40px;
+    color: #000000;
+    opacity: 0.9;
+}
+
+.tag-list {
+    width: 100%;
+}
+.todo-list-item {
+    width: 100%;
+    justify-content: center;
+    flex-direction: row;
+}
+
+.todo-item {
+    height: 120px;
+    width: 100%;
+    border-radius: 5px;
+    align-items: center;
+    flex-direction: row;
+}
+
+.flex-row {
+    flex-direction: row;
+    align-item: center;
+}
+
+.todo-name {
+    font-size: 32px;
+    color: white;
+    height: 100px;
+    margin-right: 5px;
+    max-lines: 1;
+    text-overflow: ellipsis;
+}
+
+.div_list_title {
+    width: 100%;
+    flex-direction: row;
+}
+
+.div_list_title_ROW {
+    width: 50%;
+    align-items: center;
+}
+
+.text_list_title {
+    width: 100%;
+    text-align: center;
+}
+
+.list-item-block {
+    width: 98%;
+    margin-top: 2px;
+    border-radius: 5px;
+    background-color: white;
+    flex-direction: row; /* 子元素横向排列 */
+    display: flex;
+}
+
+.describe {
+    flex-direction: column;
+    align-items: flex-start; /* 元素位于容器开头 */
+    margin-left: 5px;
+    width: 210px;
+}
+.describe-text {
+    margin-top: 5px;
+    font-size: 20px;}
+
+.text-default {
+    color: white;
+}
+
+.text-gray {
+    color: gray;
+}
+
+.todo-mark {
+    width: 18px;
+    height: 30%;
+    margin-left: 16px;
+    border-radius: 50px;
+    background-color: lightslategrey;
+}
+.todo-text-wrapper {
+    height: 100%;
+    flex-grow: 1;
+    margin: 0px 32px;
+    flex-direction: column;
+}
+.todo-name-mark {
+    width: 100%;
+    height: 100%;
+    align-items: center;
+}
+@media screen and (device-type: tablet) and (orientation: landscape) {
+    .title {
+        font-size: 100px;
+    }
+}
+
+@media screen and (device-type: wearable) {
+    .title {
+        font-size: 28px;
+        color: #FFFFFF;
+    }
+}
+
+@media screen and (device-type: tv) {
+    .container {
+        background-image: url("../../common/images/Wallpaper.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .title {
+        font-size: 100px;
+        color: #FFFFFF;
+    }
+}
+
+@media screen and (device-type: phone) and (orientation: landscape) {
+    .title {
+        font-size: 60px;
+    }
+}
+
+#table {
+    width: 100%;
+    height: 500px;
+/*    border: 1px solid #000;*/
+}
+.row1 {
+    display: flex ;
+    flex-direction:row;
+}
+.col1 {
+    width: 100%;
+    height: 40px;
+    border: 0.5px solid #000;
+}
+.col-content {
+    width: 100%;
+    height: 40px;
+    border-left: 0.5px solid #000;
+    border-right: 0.5px solid #000;
+    border-bottom: 0.5px solid #000;
+}
\ No newline at end of file
diff --git a/Database/entry/src/main/js/default/pages/index/index.hml b/Database/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..93637bf6d8d75fd71c8ba711dc4b7ee68c8f7738
--- /dev/null
+++ b/Database/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,79 @@
+<!--
+ 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="container">
+    <div class="div_title">
+        <text class="text_title" >DataBase</text>
+    </div>
+    <list scrollbar="on" style="height: 200px;width: 80%;">
+        <list-item>
+            <div id="table" style="height: 100%">
+                <list id="table-row" style="flex-direction: column;">
+                    <list-item style="width: 30%;">
+                        <div class="row1">
+                            <div class="col1">
+                                <div class="col1">
+                                    <text style="width: 100%;text-align: center;">
+                                        <span style="font-weight:800">KEY</span>
+                                    </text>
+                                </div>
+                                <div class="col1">
+                                    <text style="width: 100%;text-align: center;">
+                                        <span style="font-weight:800">VALUE</span>
+                                    </text>
+                                </div>
+                            </div>
+                        </div>
+                    </list-item>
+
+                    <list-item for="obj in tableData" id="{{obj.KEY}}" style="width: 30%;">
+                        <div class="row1">
+                            <div class="col-content">
+                                <div class="col1">
+                                    <text style="width: 100%;text-align: center;">
+                                        <span style="font-size: 26px;">{{ obj.KEY}}</span>
+                                    </text>
+                                </div>
+                                <div class="col1">
+                                    <text style="width: 100%;text-align: center;">
+                                        <span style="font-size: 26px;">{{ obj.VALUE}}</span>
+                                    </text>
+                                </div>
+                            </div>
+                        </div>
+                    </list-item>
+                </list>
+            </div>
+        </list-item>
+    </list>
+
+    <div class="row">
+        <label class="label">KEY： </label>
+        <div class="input-block">
+            <input id="key" class="input" type="text" maxlength="80" placeholder="请输入Key，类型为string" headericon="{{require}}" onchange="change" ontranslate="translate"/>
+        </div>
+    </div>
+
+    <div class="row">
+        <label class="label">VALUE： </label>
+        <div class="input-block">
+            <input id="value" class="input" type="text" maxlength="80" placeholder="请输入Value，类型为string，Number，bool" headericon="{{require}}" onchange="change" ontranslate="translate"/>
+        </div>
+    </div>
+
+    <div class="div_row">
+        <input class="button" type="button" value="Add" onclick="buttonClickAdd" />
+        <input class="button" type="button" value="Query" onclick="buttonClickQuery" />
+        <input class="button" type="button" value="Del" onclick="buttonClickDel" />
+        <input class="button-delete" type="button" value="Del Database" onclick="buttonClickDelDatabase" />
+    </div>
+</div>
diff --git a/Database/entry/src/main/js/default/pages/index/index.js b/Database/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8dc939c4d26bd571fc4dba9e743f8fa3a6877d62
--- /dev/null
+++ b/Database/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,101 @@
+/*
+ * 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.
+ */
+
+import prompt from '@system.prompt';
+import data_storage from '@ohos.data.storage';
+
+export default {
+  data: {
+    title: '',
+    key: '',
+    value: '',
+    tableData: [
+    ],
+    defaultResult: 'Not found',
+    path: '/data/accounts/account_0/appdata/com.huawei.cookbook/pdb'
+  },
+  onInit() {
+    data_storage.deleteStorageSync(this.path);
+  },
+
+  // 文本框内容发生变化
+  change(e) {
+    const idName = e.target.id;
+    if (idName === 'key') {
+      this.key = e.value;
+    } else if (idName === 'value') {
+      this.value = e.value;
+    }
+  },
+
+  // 提交
+  buttonClickAdd() {
+    if (this.key !== '' && this.value !== '') {
+      const store = data_storage.getStorageSync(this.path);
+      const ret = store.getSync(this.key, this.defaultResult);
+      const data = store.putSync(this.key, this.value);
+      store.flushSync();
+      if (ret === this.defaultResult) {
+        this.showPrompt('Add Success!');
+        this.tableData.push({KEY: this.key, VALUE: this.value});
+      } else {
+        this.tableData = this.tableData.filter(item => item.KEY !== this.key);
+        this.tableData.push({KEY: this.key, VALUE: this.value});
+        this.showPrompt('Update!');
+      }
+    } else {
+      this.showPrompt('Key or value is Empty!');
+    }
+  },
+
+  buttonClickQuery() {
+    if (this.key !== '') {
+      const store = data_storage.getStorageSync(this.path);
+      const ret = store.getSync(this.key, this.defaultResult);
+      this.showPrompt(ret);
+    } else {
+      this.showPrompt('Key is Empty!');
+    }
+  },
+
+  buttonClickDel() {
+    if (this.key !== '') {
+      const store = data_storage.getStorageSync(this.path);
+      const ret = store.hasSync(this.key);
+      if (ret) {
+        store.deleteSync(this.key);
+        this.tableData = this.tableData.filter(item => item.KEY !== this.key);
+        this.showPrompt('Del Sucess');
+      } else {
+        this.showPrompt('Error, The KEY is not exist');
+      }
+    } else {
+      this.showPrompt('Error, The KEY is Empty!');
+    }
+  },
+  buttonClickDelDatabase() {
+    data_storage.deleteStorageSync(this.path);
+    this.tableData = [];
+    this.showPrompt('database is delete!');
+  },
+  // 弹框
+  showPrompt(msg) {
+    prompt.showToast({
+      message: msg,
+      duration: 3000
+    });
+  }
+};
+
diff --git a/JSCleanCalculator/entry/src/main/resources/base/element/string.json b/Database/entry/src/main/resources/base/element/string.json
similarity index 81%
rename from JSCleanCalculator/entry/src/main/resources/base/element/string.json
rename to Database/entry/src/main/resources/base/element/string.json
index b085a598a0493bffaba3b2d797f4fab4646b0076..0bae6bd40f7360d5d818998221b199d3ec0f69c0 100644
--- a/JSCleanCalculator/entry/src/main/resources/base/element/string.json
+++ b/Database/entry/src/main/resources/base/element/string.json
@@ -2,7 +2,7 @@
   "string": [
     {
       "name": "entry_MainAbility",
-      "value": "简易计算器"
+      "value": "entry_MainAbility"
     },
     {
       "name": "mainability_description",
diff --git a/JSCleanCalculator/entry/src/main/resources/base/media/icon.png b/Database/entry/src/main/resources/base/media/icon.png
similarity index 100%
rename from JSCleanCalculator/entry/src/main/resources/base/media/icon.png
rename to Database/entry/src/main/resources/base/media/icon.png
diff --git a/JSCleanCalculator/gradle/wrapper/gradle-wrapper.jar b/Database/gradle/wrapper/gradle-wrapper.jar
similarity index 100%
rename from JSCleanCalculator/gradle/wrapper/gradle-wrapper.jar
rename to Database/gradle/wrapper/gradle-wrapper.jar
diff --git a/JSCleanCalculator/gradle/wrapper/gradle-wrapper.properties b/Database/gradle/wrapper/gradle-wrapper.properties
similarity index 100%
rename from JSCleanCalculator/gradle/wrapper/gradle-wrapper.properties
rename to Database/gradle/wrapper/gradle-wrapper.properties
diff --git a/JSCleanCalculator/settings.gradle b/Database/settings.gradle
similarity index 100%
rename from JSCleanCalculator/settings.gradle
rename to Database/settings.gradle
diff --git a/DialogDemo/README.md b/DialogDemo/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b2935b913c4718bd923c30c5494e2511d0f56351
--- /dev/null
+++ b/DialogDemo/README.md
@@ -0,0 +1,3 @@
+# DialogDemo
+简介
+• 此Demo使用JS UI中的dialog组件，实现了dialog的几种常用的效果，点击界面上不同的button呈现不同样式的dialog。
diff --git a/DialogDemo/build.gradle b/DialogDemo/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..9cf74c205fc884ae2c6796ce2298ecbe3f40672d
--- /dev/null
+++ b/DialogDemo/build.gradle
@@ -0,0 +1,33 @@
+// 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 6
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.5.5'
+        classpath 'com.huawei.ohos:decctest:1.2.5.1'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/DialogDemo/entry/.gitignore b/DialogDemo/entry/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..7d5b7a94f4dcf381f03ff21f28f8a2494b58023f
--- /dev/null
+++ b/DialogDemo/entry/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/DialogDemo/entry/build.gradle b/DialogDemo/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..cccb71cae91018743841ab76aeb19c595f4ed847
--- /dev/null
+++ b/DialogDemo/entry/build.gradle
@@ -0,0 +1,23 @@
+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 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+
+    supportSystem "standard"
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/NewsClientOpenHarmony/package.json b/DialogDemo/entry/package.json
similarity index 100%
rename from NewsClientOpenHarmony/package.json
rename to DialogDemo/entry/package.json
diff --git a/DialogDemo/entry/proguard-rules.pro b/DialogDemo/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/DialogDemo/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/DialogDemo/entry/src/main/config.json b/DialogDemo/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..ce0fac4a4a80eb3fc0cc020d740eb79f07886427
--- /dev/null
+++ b/DialogDemo/entry/src/main/config.json
@@ -0,0 +1,59 @@
+{
+  "app": {
+    "bundleName": "com.huawei.cookbook",
+    "vendor": "huawei",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.huawei.dialogdemo",
+    "name": ".MyApplication",
+    "mainAbility": "com.huawei.dialogdemo.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "name": "com.huawei.dialogdemo.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/JSCleanCalculator/entry/src/main/js/default/app.js b/DialogDemo/entry/src/main/js/default/app.js
similarity index 40%
rename from JSCleanCalculator/entry/src/main/js/default/app.js
rename to DialogDemo/entry/src/main/js/default/app.js
index aedcefe0054c6e16c40491f4d1abc20a4dc1c6ef..6d060ffe5682c19fc83e2274a9e62cbc40a655f8 100644
--- a/JSCleanCalculator/entry/src/main/js/default/app.js
+++ b/DialogDemo/entry/src/main/js/default/app.js
@@ -1,8 +1,8 @@
 export default {
     onCreate() {
-        console.info('AceApplication onCreate');
+        console.info("Application onCreate");
     },
     onDestroy() {
-        console.info('AceApplication onDestroy');
+        console.info("Application onDestroy");
     }
 };
diff --git a/DialogDemo/entry/src/main/js/default/common/images/loading.svg b/DialogDemo/entry/src/main/js/default/common/images/loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0e4ff20df418870172b0a4b3a09bf96d6fb3c1ea
--- /dev/null
+++ b/DialogDemo/entry/src/main/js/default/common/images/loading.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280.03 280.03"><defs><style>.cls-1{fill:#b7b6b6;}.cls-2{fill:#bbb;}.cls-3{fill:#c2c2c2;}.cls-4{fill:#c8c8c8;}.cls-5{fill:#cdcdcd;}.cls-6{fill:#d1d1d1;}.cls-7{fill:#949494;}.cls-8{fill:#999;}.cls-9{fill:#9d9d9d;}.cls-10{fill:#a3a3a3;}.cls-11{fill:#a9a9a9;}.cls-12{fill:#afafaf;}</style></defs><title>loading</title><g id="图层_2" data-name="图层 2"><rect class="cls-1" x="219.71" y="133.7" width="54" height="12.63"/><circle class="cls-1" cx="273.71" cy="140.01" r="6.32"/><circle class="cls-1" cx="219.71" cy="140.01" r="6.32"/><rect class="cls-2" x="215.1" y="91.8" width="54" height="12.63" transform="translate(-26.31 122.74) rotate(-30)"/><circle class="cls-2" cx="255.8" cy="73.16" r="6.32"/><circle class="cls-2" cx="209.03" cy="100.16" r="6.32"/><rect class="cls-3" x="176.04" y="52.75" width="54" height="12.63" transform="translate(40.69 193.92) rotate(-60)"/><circle class="cls-3" cx="206.86" cy="24.23" r="6.32"/><circle class="cls-3" cx="179.86" cy="70.99" r="6.32"/><rect class="cls-4" x="122.69" y="38.45" width="54" height="12.63" transform="translate(95.24 183.01) rotate(-90)"/><circle class="cls-4" cx="140.01" cy="6.32" r="6.32"/><circle class="cls-4" cx="140.01" cy="60.32" r="6.32"/><rect class="cls-5" x="69.35" y="52.75" width="54" height="12.63" transform="translate(83.69 160.58) rotate(-120)"/><circle class="cls-5" cx="73.16" cy="24.23" r="6.32"/><circle class="cls-5" cx="100.16" cy="70.99" r="6.32"/><rect class="cls-6" x="30.29" y="91.8" width="54" height="12.63" transform="translate(48.17 200.28) rotate(-150)"/><circle class="cls-6" cx="24.23" cy="73.16" r="6.32"/><circle class="cls-6" cx="70.99" cy="100.16" r="6.32"/><rect class="cls-7" x="16" y="145.15" width="54" height="12.63" transform="translate(76.31 291.48) rotate(-180)"/><circle class="cls-7" cx="6.32" cy="140.01" r="6.32"/><circle class="cls-7" cx="60.32" cy="140.01" r="6.32"/><rect class="cls-8" x="30.29" y="198.5" width="54" height="12.63" transform="translate(199.64 342.09) rotate(150)"/><circle class="cls-8" cx="24.23" cy="206.86" r="6.32"/><circle class="cls-8" cx="70.99" cy="179.86" r="6.32"/><rect class="cls-9" x="69.35" y="237.55" width="54" height="12.63" transform="matrix(-0.5, 0.87, -0.87, -0.5, 346.03, 270.91)"/><circle class="cls-9" cx="73.16" cy="255.8" r="6.32"/><circle class="cls-9" cx="100.16" cy="209.03" r="6.32"/><rect class="cls-10" x="122.69" y="251.85" width="54" height="12.63" transform="translate(398.18 97.02) rotate(90)"/><circle class="cls-10" cx="140.01" cy="273.71" r="6.32"/><circle class="cls-10" cx="140.01" cy="219.71" r="6.32"/><rect class="cls-11" x="176.04" y="237.55" width="54" height="12.63" transform="translate(303.04 -65.36) rotate(60)"/><circle class="cls-11" cx="206.86" cy="255.8" r="6.32"/><circle class="cls-11" cx="179.86" cy="209.03" r="6.32"/><rect class="cls-12" x="215.1" y="198.5" width="54" height="12.63" transform="translate(125.16 -105.06) rotate(30)"/><circle class="cls-12" cx="255.8" cy="206.86" r="6.32"/><circle class="cls-12" cx="209.03" cy="179.86" r="6.32"/></g></svg>
\ No newline at end of file
diff --git a/DialogDemo/entry/src/main/js/default/i18n/en-US.json b/DialogDemo/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..08e34eac912bf2651eefc20e26aa479b5e4e7ec2
--- /dev/null
+++ b/DialogDemo/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/DialogDemo/entry/src/main/js/default/i18n/zh-CN.json b/DialogDemo/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dd53b3a8b808aec9396fa663cb00ef22ba61e0a
--- /dev/null
+++ b/DialogDemo/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/DialogDemo/entry/src/main/js/default/pages/index/index.css b/DialogDemo/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..3bd3534d2acc27b21397653bae0e507bbdd861d3
--- /dev/null
+++ b/DialogDemo/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+.doc-page {
+    height: 100%;
+    flex-direction: column;
+    background-color: #E3f8F9;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn-div {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn {
+    background-color: #17A98E;
+    margin-top: 15px;
+    width: 80%;
+    font-weight: bold;
+}
+
+.btn-text {
+    color: #000000;
+    font-weight: bold;
+    font-size: 39px;
+}
+
+.dialog-main {
+    width: 80%;
+    margin-bottom: 40%;
+}
+
+.dialog-div {
+    flex-direction: column;
+    align-items: center;
+}
+
+.inner-txt {
+    height: 120px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.inner-btn {
+    height: 80px;
+    justify-content: center;
+    align-items: center;
+}
+
+.alert-inner-txt {
+    height: 120px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.alert-inner-btn {
+    height: 80px;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.alert-dialog {
+    width: 80%;
+    margin-bottom: 40%;
+}
diff --git a/DialogDemo/entry/src/main/js/default/pages/index/index.hml b/DialogDemo/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..f07476dbb07a08dc7797dedb68317c19d4362872
--- /dev/null
+++ b/DialogDemo/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,88 @@
+<!--
+ 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="doc-page">
+    <div class="btn-div">
+        <button type="capsule" value="AlertDialog" class="btn" onclick="showAlert"></button>
+        <button type="capsule" value="ConfirmDialog" class="btn" onclick="showConfirm"></button>
+        <button type="capsule" value="LoadingDialog" class="btn" onclick="showLoading"></button>
+        <button type="capsule" value="PromptDialog" class="btn" onclick="showPrompt"></button>
+        <button type="capsule" value="ProgressDialog" class="btn" onclick="showProgress"></button>
+    </div>
+
+    <dialog id="alertDialog" class="alert-dialog">
+        <div class="dialog-div">
+            <div class="alert-inner-txt">
+                <text class="txt">AlertDialog</text>
+            </div>
+            <div class="alert-inner-btn">
+                <button type="capsule" value="Confirm" onclick="confirmClick('alertDialog')" style="width : 80%;">
+                </button>
+            </div>
+        </div>
+    </dialog>
+
+    <dialog id="confirmDialog" class="dialog-main">
+        <div class="dialog-div">
+            <div class="inner-txt">
+                <text class="txt">ConfirmDialog</text>
+            </div>
+            <div class="inner-btn">
+                <button type="capsule" value="Cancel" style="width : 40%; margin-right : 10px;"
+                        class="btn-txt" onclick="cancelClick('confirmDialog')">
+                </button>
+                <button type="capsule" value="Confirm" style="width : 40%;" class="btn-txt"
+                        onclick="confirmClick('confirmDialog')">
+                </button>
+            </div>
+        </div>
+    </dialog>
+
+    <dialog id="loadingDialog" style="width : 120px; height : 120px; margin-bottom : 40%;">
+        <div class="dialog-div">
+            <image class="loading-img img-rotate" id="loading-img" src="/common/images/loading.svg"
+                   style="height : 60px; width : 60px;"></image>
+            <text style="font-size : 16px; color : #999999;">loading...</text>
+        </div>
+    </dialog>
+
+    <dialog id="promptDialog" class="dialog-main">
+        <div class="dialog-div">
+            <div class="inner-txt">
+                <text class="txt">PromptDialog</text>
+            </div>
+            <input type="password" placeholder="please enter password" style="margin-left : 20px; margin-right : 20px;">
+            </input>
+            <div class="inner-btn">
+                <button type="capsule" value="Cancel" style="width : 40%; margin-right : 10px;"
+                        class="btn-txt" onclick="cancelClick('promptDialog')">
+                </button>
+                <button type="capsule" value="Confirm" style="width : 40%;" class="btn-txt"
+                        onclick="confirmClick('promptDialog')">
+                </button>
+            </div>
+        </div>
+    </dialog>
+
+    <dialog id="progressDialog" style="width : 80%; height : 200px; margin-bottom : 40%;" oncancel="onCancel">
+        <div style="flex-direction : column; align-items : center;">
+            <text style="font-size : 25px; color : black; font-weight : bold;">Downloading...</text>
+            <div style="width : 80%; margin-top : 40px; margin-bottom : 10px;">
+                <progress class="min-progress" style="height : 10px;" type="horizontal" percent="{{ percent }}"
+                          secondarypercent="50"></progress>
+            </div>
+            <text style="font-size : 18px; color : #666666;">Image {{ percent / 10 }} of 10</text>
+        </div>
+    </dialog>
+
+</div>
\ No newline at end of file
diff --git a/DialogDemo/entry/src/main/js/default/pages/index/index.js b/DialogDemo/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..07c361cd3e933ac0e5fc0deba71c76f4deda29a7
--- /dev/null
+++ b/DialogDemo/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+  data: {
+    percent: 0,
+    interval: ''
+  },
+  showAlert() {
+    this.$element('alertDialog').show();
+  },
+  showConfirm() {
+    this.$element('confirmDialog').show();
+  },
+  showLoading() {
+    const options = {
+      duration: 800,
+      easing: 'linear',
+      iterations: 'Infinity'
+    };
+    const frames = [
+      {
+        transform: {
+          rotate: '0deg'
+        }
+      },
+      {
+        transform: {
+          rotate: '360deg'
+        }
+      }
+    ];
+    this.animation = this.$element('loading-img').animate(frames, options);
+    this.$element('loadingDialog').show();
+    this.animation.play();
+  },
+  showPrompt() {
+    this.$element('promptDialog').show();
+  },
+  showProgress() {
+    const that = this;
+    that.percent = 0;
+    this.$element('progressDialog').show();
+    this.interval = setInterval(function() {
+      that.percent += 10;
+      if (that.percent >= 100) {
+        clearInterval(that.interval);
+      }
+    }, 500);
+  },
+  confirmClick(id) {
+    this.$element(id).close();
+    prompt.showToast({
+      message: 'confirm clicked'
+    });
+  },
+  cancelClick(id) {
+    this.$element(id).close();
+    prompt.showToast({
+      message: 'cancel clicked'
+    });
+  },
+  onCancel(){
+    clearInterval(this.interval);
+  }
+};
diff --git a/DialogDemo/entry/src/main/resources/base/element/string.json b/DialogDemo/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..0bae6bd40f7360d5d818998221b199d3ec0f69c0
--- /dev/null
+++ b/DialogDemo/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "entry_MainAbility"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/JSCleanCalculator/entry/src/ohosTest/resources/base/media/icon.png b/DialogDemo/entry/src/main/resources/base/media/icon.png
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/resources/base/media/icon.png
rename to DialogDemo/entry/src/main/resources/base/media/icon.png
diff --git a/NewsClientOpenHarmony/gradle/wrapper/gradle-wrapper.jar b/DialogDemo/gradle/wrapper/gradle-wrapper.jar
similarity index 100%
rename from NewsClientOpenHarmony/gradle/wrapper/gradle-wrapper.jar
rename to DialogDemo/gradle/wrapper/gradle-wrapper.jar
diff --git a/NewsClientOpenHarmony/gradle/wrapper/gradle-wrapper.properties b/DialogDemo/gradle/wrapper/gradle-wrapper.properties
similarity index 100%
rename from NewsClientOpenHarmony/gradle/wrapper/gradle-wrapper.properties
rename to DialogDemo/gradle/wrapper/gradle-wrapper.properties
diff --git a/DialogDemo/settings.gradle b/DialogDemo/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/DialogDemo/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/ImageEditorTemplate/build.gradle b/ImageEditorTemplate/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..a068266dbdeb268d9147b2feddd9ef248f1ec944
--- /dev/null
+++ b/ImageEditorTemplate/build.gradle
@@ -0,0 +1,33 @@
+// 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 6
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.1.3'
+        classpath 'com.huawei.ohos:decctest:3.0.1.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+}
diff --git a/ImageEditorTemplate/entry/.gitignore b/ImageEditorTemplate/entry/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..7d5b7a94f4dcf381f03ff21f28f8a2494b58023f
--- /dev/null
+++ b/ImageEditorTemplate/entry/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/ImageEditorTemplate/entry/build.gradle b/ImageEditorTemplate/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..ea49d23d75df2f5635e2a12bf0569aa97506a103
--- /dev/null
+++ b/ImageEditorTemplate/entry/build.gradle
@@ -0,0 +1,25 @@
+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 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+
+    supportSystem "standard"
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+    ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'
+}
+
diff --git a/ImageEditorTemplate/entry/package.json b/ImageEditorTemplate/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/ImageEditorTemplate/entry/package.json
@@ -0,0 +1 @@
+{}
diff --git a/ImageEditorTemplate/entry/proguard-rules.pro b/ImageEditorTemplate/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/ImageEditorTemplate/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/config.json b/ImageEditorTemplate/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..9c46e1057e777ec7799c4bddf145c2567fbc4b71
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/config.json
@@ -0,0 +1,59 @@
+{
+  "app": {
+    "bundleName": "com.huawei.cookbook",
+    "vendor": "huawei",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.huawei.imageeditortemplate",
+    "name": ".MyApplication",
+    "mainAbility": "com.huawei.imageeditortemplate.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "visible": true,
+        "name": "com.huawei.imageeditortemplate.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard",
+        "orientation": "portrait"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/java/com/huawei/imageeditortemplate/MainAbility.java b/ImageEditorTemplate/entry/src/main/java/com/huawei/imageeditortemplate/MainAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..b6f542a1bbcd75366d0f4bac2ceb5eba1bb04c56
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/java/com/huawei/imageeditortemplate/MainAbility.java
@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+package com.huawei.imageeditortemplate;
+
+import ohos.aafwk.content.Intent;
+import ohos.ace.ability.AceAbility;
+
+/**
+ * MainAbility
+ *
+ * @since 2021-09-15
+ */
+public class MainAbility extends AceAbility {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+    }
+
+    @Override
+    public void onStop() {
+        super.onStop();
+    }
+}
diff --git a/ImageEditorTemplate/entry/src/main/java/com/huawei/imageeditortemplate/MyApplication.java b/ImageEditorTemplate/entry/src/main/java/com/huawei/imageeditortemplate/MyApplication.java
new file mode 100644
index 0000000000000000000000000000000000000000..7c8d96ea82e3beba76a892adc982e123520f7fff
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/java/com/huawei/imageeditortemplate/MyApplication.java
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+package com.huawei.imageeditortemplate;
+
+import ohos.aafwk.ability.AbilityPackage;
+
+/**
+ * MyApplication
+ *
+ * @since 2021-09-15
+ */
+public class MyApplication extends AbilityPackage {
+    @Override
+    public void onInitialize() {
+        super.onInitialize();
+    }
+}
diff --git a/ImageEditorTemplate/entry/src/main/js/default/app.js b/ImageEditorTemplate/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb885bb5eddc48644dc7b2ebdf1e9d000f089ea1
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/app.js
@@ -0,0 +1,6 @@
+export default {
+  onCreate() {
+  },
+  onDestroy() {
+  }
+};
diff --git a/JSCleanCalculator/entry/src/main/js/default/common/images/Wallpaper.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/Wallpaper.png
similarity index 100%
rename from JSCleanCalculator/entry/src/main/js/default/common/images/Wallpaper.png
rename to ImageEditorTemplate/entry/src/main/js/default/common/images/Wallpaper.png
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/adjust_blue.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/adjust_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e08ca4c697f021deeee824a4f1a13312c6d70710
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/adjust_blue.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-2{fill:none;stroke:#3070b8;stroke-miterlimit:10;stroke-width:3px;}.cls-2{stroke-linecap:round;}</style></defs><title>画板 1</title><circle class="cls-1" cx="50.14" cy="25" r="5"/><line class="cls-2" x1="55.14" y1="25" x2="65" y2="25"/><line class="cls-2" x1="5" y1="25" x2="45.14" y2="25"/><circle class="cls-1" cx="19.84" cy="45" r="5"/><line class="cls-2" x1="14.84" y1="45" x2="4.98" y2="45"/><line class="cls-2" x1="64.98" y1="45" x2="24.84" y2="45"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/adjust_white.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/adjust_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6b8e74d597d9f7513d6798e73fc6367e31f0422a
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/adjust_white.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}.cls-2{stroke-linecap:round;}</style></defs><title>画板 1</title><circle class="cls-1" cx="50.14" cy="25" r="5"/><line class="cls-2" x1="55.14" y1="25" x2="65" y2="25"/><line class="cls-2" x1="5" y1="25" x2="45.14" y2="25"/><circle class="cls-1" cx="19.84" cy="45" r="5"/><line class="cls-2" x1="14.84" y1="45" x2="4.98" y2="45"/><line class="cls-2" x1="64.98" y1="45" x2="24.84" y2="45"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/advance.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/advance.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f20f71bca6db131419c86baf26e5dc4e18baf061
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/advance.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-3{fill:none;}.cls-1{stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}.cls-2{fill:#fff;}</style></defs><title>画板 1</title><path class="cls-1" d="M65,20H20A15,15,0,0,0,5,35H5A15,15,0,0,0,20,50H58"/><polyline class="cls-2" points="65 18.94 58 18.94 58 15.44"/><line class="cls-3" x1="65" y1="20" x2="58" y2="16.5"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/back.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2b534039d1a59673311412b22b50d7209caec72b
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/back.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>画板 1</title><line class="cls-1" x1="5" y1="35" x2="65" y2="35"/><line class="cls-1" x1="5" y1="35" x2="26.21" y2="13.79"/><line class="cls-1" x1="5.26" y1="35.26" x2="26.48" y2="56.48"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/bg-tv.jpg b/ImageEditorTemplate/entry/src/main/js/default/common/images/bg-tv.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e2c07b9700afb5683696f5793e865efd7744e0e0
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/bg-tv.jpg differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/contrast_blue.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/contrast_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36df00071d8d4e0263b63ff7931336dcc54c6a9a
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/contrast_blue.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#3070b8;}.cls-2,.cls-3{fill:none;stroke:#3070b8;stroke-miterlimit:10;stroke-width:3px;}.cls-3{stroke-linecap:round;}</style></defs><title>画板 1</title><path class="cls-1" d="M27.92,28A10,10,0,0,0,42.07,42.09"/><circle class="cls-2" cx="35.03" cy="34.93" r="16"/><line class="cls-3" x1="50.53" y1="50.5" x2="19.42" y2="19.38"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/contrast_white.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/contrast_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4066a25830364872b3ddbc84dfa0459f8ad78948
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/contrast_white.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}</style></defs><title>画板 1</title><path class="cls-1" d="M27.92,28A10,10,0,0,0,42.07,42.09"/><circle class="cls-1" cx="35.03" cy="34.93" r="16"/><line class="cls-1" x1="50.53" y1="50.5" x2="19.42" y2="19.38"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/cut_blue.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/cut_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..22cf1f9c0d7d152b8694657ace1f6a9d53f6b028
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/cut_blue.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#3070b8;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}.cls-2{fill:#3070b8;}</style></defs><title>画板 1</title><line class="cls-1" x1="20" y1="15" x2="20" y2="50"/><line class="cls-1" x1="55" y1="50" x2="20" y2="50"/><line class="cls-1" x1="49.97" y1="55" x2="49.97" y2="20"/><line id="_直线_" data-name="&lt;直线&gt;" class="cls-1" x1="14.97" y1="20" x2="49.97" y2="20"/><path class="cls-1" d="M6.94,51.19A32.55,32.55,0,0,0,18.79,63.05"/><path class="cls-1" d="M63,18.81A32.55,32.55,0,0,0,51.18,7"/><polyline class="cls-2" points="5.25 45.32 8.21 50.45 3.8 53"/><polyline class="cls-2" points="64.72 24.68 61.76 19.55 66.17 17"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/cut_white.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/cut_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..114666fa147f764d8b802e4b492eda4b7c2b0db7
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/cut_white.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}.cls-2{fill:#fff;}</style></defs><title>画板 1</title><line class="cls-1" x1="20" y1="15" x2="20" y2="50"/><line class="cls-1" x1="55" y1="50" x2="20" y2="50"/><line class="cls-2" x1="49.97" y1="55" x2="49.97" y2="20"/><line id="_直线_" data-name="&lt;直线&gt;" class="cls-2" x1="14.97" y1="20" x2="49.97" y2="20"/><path class="cls-1" d="M6.94,51.19A32.55,32.55,0,0,0,18.79,63.05"/><path class="cls-2" d="M63,18.81A32.55,32.55,0,0,0,51.18,7"/><polyline class="cls-2" points="5.25 45.32 8.21 50.45 3.8 53"/><polyline class="cls-2" points="64.72 24.68 61.76 19.55 66.17 17"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/image.jpg b/ImageEditorTemplate/entry/src/main/js/default/common/images/image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..907966897d75758937f7caa92265fcbc9e3cb840
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/image.jpg differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/luminance_blue.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/luminance_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..40c3e8233b6ec8cb80ce043610280310a5d39f14
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/luminance_blue.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#3070b8;}.cls-2,.cls-3{fill:none;stroke:#3070b8;stroke-miterlimit:10;stroke-width:3px;}.cls-3{stroke-linecap:round;}</style></defs><title>画板 1</title><path class="cls-1" d="M35,25a10,10,0,0,0,0,20"/><circle class="cls-2" cx="35" cy="35" r="16"/><line class="cls-3" x1="35" y1="12.99" x2="35" y2="18.99"/><line class="cls-3" x1="19.43" y1="19.43" x2="23.68" y2="23.68"/><line class="cls-3" x1="12.99" y1="35" x2="18.99" y2="35"/><line class="cls-3" x1="19.43" y1="50.57" x2="23.68" y2="46.32"/><line class="cls-3" x1="35" y1="57.01" x2="35" y2="51.01"/><line class="cls-3" x1="50.57" y1="50.57" x2="46.32" y2="46.32"/><line class="cls-3" x1="57.01" y1="35" x2="51.01" y2="35"/><line class="cls-3" x1="50.57" y1="19.43" x2="46.32" y2="23.68"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/luminance_white.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/luminance_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..21c8cfb6185e63e9e239313db25ff519efbd5d8e
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/luminance_white.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}</style></defs><title>画板 1</title><path class="cls-1" d="M35,25a10,10,0,0,0,0,20"/><circle class="cls-1" cx="35" cy="35" r="16"/><line class="cls-1" x1="19.43" y1="19.43" x2="23.68" y2="23.68"/><line class="cls-1" x1="12.99" y1="35" x2="18.99" y2="35"/><line class="cls-1" x1="19.43" y1="50.57" x2="23.68" y2="46.32"/><line class="cls-1" x1="35" y1="57.01" x2="35" y2="51.01"/><line class="cls-1" x1="50.57" y1="50.57" x2="46.32" y2="46.32"/><line class="cls-1" x1="57.01" y1="35" x2="51.01" y2="35"/><line class="cls-1" x1="50.57" y1="19.43" x2="46.32" y2="23.68"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/picture_frame_white.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/picture_frame_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d0cc5e68db8de02c07f864481b7eab411a9b90cc
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/picture_frame_white.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}.cls-2{stroke-linecap:round;}</style></defs><title>画板 1</title><rect class="cls-1" x="13.83" y="17" width="42.33" height="36" rx="3" ry="3"/><line class="cls-2" x1="49.5" y1="5.58" x2="64.5" y2="5.58"/><line class="cls-2" x1="64.5" y1="20.58" x2="64.5" y2="5.58"/><line class="cls-2" x1="5.58" y1="20.5" x2="5.58" y2="5.5"/><line class="cls-2" x1="20.58" y1="5.5" x2="5.58" y2="5.5"/><line class="cls-2" x1="20.5" y1="64.42" x2="5.5" y2="64.42"/><line class="cls-2" x1="5.5" y1="49.42" x2="5.5" y2="64.42"/><line class="cls-2" x1="64.42" y1="49.5" x2="64.42" y2="64.5"/><line class="cls-2" x1="49.42" y1="64.5" x2="64.42" y2="64.5"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/picture_frame_white_blue.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/picture_frame_white_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..45a92f0728817ee0fd91f7c4146287d501e17005
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/picture_frame_white_blue.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-2{fill:none;stroke:#3070b8;stroke-miterlimit:10;stroke-width:3px;}.cls-2{stroke-linecap:round;}</style></defs><title>画板 1</title><rect class="cls-1" x="13.83" y="17" width="42.33" height="36" rx="3" ry="3"/><line class="cls-2" x1="49.5" y1="5.58" x2="64.5" y2="5.58"/><line class="cls-2" x1="64.5" y1="20.58" x2="64.5" y2="5.58"/><line class="cls-2" x1="5.58" y1="20.5" x2="5.58" y2="5.5"/><line class="cls-2" x1="20.58" y1="5.5" x2="5.58" y2="5.5"/><line class="cls-2" x1="20.5" y1="64.42" x2="5.5" y2="64.42"/><line class="cls-2" x1="5.5" y1="49.42" x2="5.5" y2="64.42"/><line class="cls-2" x1="64.42" y1="49.5" x2="64.42" y2="64.5"/><line class="cls-2" x1="49.42" y1="64.5" x2="64.42" y2="64.5"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_1-1_blue.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_1-1_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d7a7423d56492390f3da47b83d83a6d944e74ff
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_1-1_blue.png differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_1-1_white.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_1-1_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe9031fabc0733c5071660111118dbfe159d9b00
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_1-1_white.png differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_16-9_blue.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_16-9_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..80724a54dccc746840f0f0b60180ec992a3e9ca1
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_16-9_blue.png differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_16-9_white.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_16-9_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..88f1417440f2b3b2c2f76aca930cd960f2db43de
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_16-9_white.png differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_9-16_blue.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_9-16_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff52b1c1bda2658f3fdfee815175f73d959725eb
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_9-16_blue.png differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_9-16_white.png b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_9-16_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..67d5dc5b0579389aa5d8adfd90d41a0ff6814345
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/js/default/common/images/proportions_9-16_white.png differ
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/rewind.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/rewind.svg
new file mode 100644
index 0000000000000000000000000000000000000000..84a9de921f60a173d6354e0b960f8acc54776f9d
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/rewind.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}.cls-2{fill:#fff;}</style></defs><title>画板 1</title><path class="cls-1" d="M5,20H50A15,15,0,0,1,65,35h0A15,15,0,0,1,50,50H12"/><polyline class="cls-2" points="5 18.97 12 18.97 12 15.47"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/saturation_blue.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/saturation_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dc17c10358c9f21c4228208f526140ab2b818db4
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/saturation_blue.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-2{fill:none;stroke:#3070b8;stroke-miterlimit:10;stroke-width:3px;}.cls-2{stroke-linecap:round;}.cls-3{fill:#3070b8;}</style></defs><title>画板 1</title><path class="cls-1" d="M19,34.93a16,16,0,1,0,32,0"/><path class="cls-1" d="M51,35A30,30,0,0,0,35,8.44"/><path class="cls-2" d="M19,35A30,30,0,0,1,35,8.46"/><path class="cls-3" d="M27.93,42.07A10,10,0,0,0,42.07,27.93"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/saturation_white.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/saturation_white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..29f54844609d5508bf58c5dc0df78036929eaa3a
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/saturation_white.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}.cls-2{stroke-linecap:round;}.cls-3{fill:#fff;}</style></defs><title>画板 1</title><path class="cls-1" d="M19,34.93a16,16,0,1,0,32,0"/><path class="cls-1" d="M51,35A30,30,0,0,0,35,8.44"/><path class="cls-2" d="M19,35A30,30,0,0,1,35,8.46"/><path class="cls-3" d="M27.93,42.07A10,10,0,0,0,42.07,27.93"/></svg>
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/common/images/save.svg b/ImageEditorTemplate/entry/src/main/js/default/common/images/save.svg
new file mode 100644
index 0000000000000000000000000000000000000000..038ca9affad386588d3afc3c6c196b957ed4d311
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/common/images/save.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>画板 1</title><rect class="cls-1" x="5" y="5" width="60" height="60" rx="5" ry="5"/><path class="cls-1" d="M25,5.34H45a0,0,0,0,1,0,0v17.5a2.5,2.5,0,0,1-2.5,2.5h-15a2.5,2.5,0,0,1-2.5-2.5V5.34A0,0,0,0,1,25,5.34Z"/></svg>
\ No newline at end of file
diff --git a/JSCleanCalculator/entry/src/main/js/default/i18n/en-US.json b/ImageEditorTemplate/entry/src/main/js/default/i18n/en-US.json
similarity index 100%
rename from JSCleanCalculator/entry/src/main/js/default/i18n/en-US.json
rename to ImageEditorTemplate/entry/src/main/js/default/i18n/en-US.json
diff --git a/ImageEditorTemplate/entry/src/main/js/default/i18n/zh-CN.json b/ImageEditorTemplate/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..0ebda4546ead27ac45bc3c7655173038ee1b2a52
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,20 @@
+{
+  "strings": {
+    "title": "是否放弃当前修改?",
+    "titleAppBar": "编辑",
+    "picFrame": "画幅",
+    "cropping": "裁剪",
+    "adjust": "调节",
+    "luminance": "亮度",
+    "contrast": "对比度",
+    "saturation": "饱和度",
+    "picFraImgSrc": "common/images/picture_frame_white_blue.svg",
+    "conBotFirImgSrc": "common/images/picture_frame_white.svg",
+    "conBotSecImgSrc": "common/images/proportions_1-1_white.png",
+    "conBotThrImgSrc": "common/images/proportions_16-9_white.png",
+    "conBotFouImgSrc": "common/images/proportions_9-16_white.png",
+    "luminanceImgSrc": "common/images/luminance_white.svg",
+    "contrastImgSrc": "common/images/contrast_white.svg",
+    "saturationImgSrc": "common/images/saturation_white.svg"
+  }
+}
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.css b/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..54d4f14b6811cc68a3f2b4a8a25547e2ad6229a2
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,214 @@
+.container {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    align-content: center;
+    align-items: center;
+    background-color: #000000;
+}
+/* 顶部显示 */
+.container-top {
+    width: 100%;
+    position: absolute;
+    margin-top: 20px;
+}
+.container-appBar-left {
+    margin-left: 30px;
+    width: 80px;
+}
+.container-image-left {
+    height: 24px;
+    width: 24px;
+}
+.container-txt {
+    font-size: 16px;
+    margin-left: 16px;
+    color: #ffffff;
+}
+.container-appBar-right {
+    margin-left: 240px;
+}
+.container-image-right {
+    height: 24px;
+    width: 24px;
+    margin-left: 10px;
+}
+/* 弹窗退出应用 */
+.dialog-main {
+    width: 80%;
+    height: 16%;
+    margin-bottom: 30px;
+}
+.dialog-div {
+    flex-direction: column;
+    align-items: center;
+}
+.inner-txt {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 16px;
+}
+.txt {
+    font-size: 16px;
+}
+.inner-btn {
+    height: 60px;
+    justify-content: space-around;
+    align-items: center;
+}
+.btn-cancel {
+    margin-left: 10px;
+}
+.btn-stop {
+    margin-left: 50px;
+}
+/* 裁剪部分 */
+#crop_image_content {
+    width: 100%;
+    position: absolute;
+    text-align: center;
+    margin-top: 130px;
+    margin-left: 75px;
+}
+#cropBox {
+    width: 100%;
+    position: absolute;
+}
+#crop_image_content #canvasOne {
+    position: absolute;
+    height: 300px;
+    width: 300px;
+    margin-left: 30px;
+    margin-right: 30px;
+    margin-bottom: 30px;
+}
+/* 裁剪框 */
+#crop_image_content #mainBox {
+    width: 100%;
+    border: 3px solid white;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.minBox {
+    position: absolute;
+    height: 15px;
+    width: 3px;
+    background-color: #FF0000;
+}
+.left-up-top {
+    top: -3px;
+    left: -3px;
+    height: 3px;
+    width: 15px;
+}
+.left-up {
+    top: -3px;
+    left: -3px;
+}
+.right-up-top {
+    right: -3px;
+    top: -3px;
+    height: 3px;
+    width: 15px;
+}
+.right-up {
+    right: -3px;
+    top: -3px;
+}
+.left-down-bot {
+    bottom: -3px;
+    left: -3px;
+    height: 3px;
+    width: 15px;
+}
+.left-down {
+    bottom: -3px;
+    left: -3px;
+}
+.right-down-bot {
+    right: -3px;
+    bottom: -3px;
+    height: 3px;
+    width: 15px;
+}
+.right-down {
+    bottom: -3px;
+    right: -3px;
+}
+/* 裁剪比例 */
+.container-bottom-first {
+    width: 100%;
+    flex-direction: column;
+    position: absolute;
+    margin-top: 210px;
+}
+.container-bottom-one-first {
+    flex-direction: row;
+    margin-left: 40px;
+    margin-top: 250px;
+}
+.container-bottom-image {
+    height: 30px;
+    width: 30px;
+    margin-left: 100px;
+}
+.container-bottom-two-first {
+    flex-direction: column;
+    position: relative;
+    margin-left: 230px;
+    margin-top: 50px;
+}
+.container-bottom-three-first {
+    flex-direction: row;
+    margin-top: 70px;
+    margin-left: 120px;
+}
+.container-bottom-four-first {
+    flex-direction: row;
+    position: relative;
+    margin-left: 120px;
+    margin-bottom: 20px;
+}
+/* 调节比例 */
+.container-bottom-second {
+    flex-direction: column;
+    position: absolute;
+    margin-top: 210px;
+}
+.container-bottom-two-second {
+    flex-direction: row;
+}
+.container-bottom-three-second {
+    flex-direction: row;
+}
+.luminanceTxt {
+    font-size: 14px;
+    margin-left: 98px;
+}
+.contrastTxt {
+    font-size: 14px;
+    margin-left: 80px;
+}
+.saturationTxt {
+    font-size: 14px;
+    margin-left: 75px;
+}
+.container-bottom-four-second {
+    width: 100%;
+    margin-top: 60px;
+    flex-direction: row;
+    margin-left: 120px;
+}
+.container-bottom-five-second {
+    flex-direction: row;
+    position: relative;
+    margin-left: 120px;
+    margin-bottom: 20px;
+}
+
+.container-bottom-second-one{
+    flex-direction: column;
+    position: relative;
+    margin-top: 50px;
+}
diff --git a/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.hml b/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..4c7f4d92834417c78d11b1a2763aa7260056f9a2
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,111 @@
+<div class="container">
+
+    <!-- 顶部 -->
+    <div class="container-top">
+        <div class="container-appBar-left">
+            <image src="common/images/back.svg" class="container-image-left" onclick="showDialog"></image>
+            <text class="container-txt">{{ titleAppBar }}</text>
+        </div>
+        <div class="container-appBar-right">
+            <image src="common/images/rewind.svg" class="container-image-right" onclick="rewind"></image>
+            <image src="common/images/advance.svg" class="container-image-right" onclick="advance"></image>
+            <image src="common/images/save.svg" class="container-image-right" onclick="save"></image>
+        </div>
+    </div>
+
+<!-- 裁剪区 -->
+    <div id="crop_image_content">
+
+    <!-- 裁剪部分 -->
+        <div id="cropBox">
+            <canvas id="canvasOne"></canvas>
+        <!-- 裁剪框 -->
+            <div id="mainBox"
+                 style="width : {{ cropWidth }}; height : {{ cropHeight }}; top : {{ cropTop }}; left : {{ cropLeft }}"
+                 show="{{ showFlag1 }}">
+                <div id="left-up-top" class="minBox left-up-top"></div>
+                <div id="left-up" class="minBox left-up"></div>
+                <div id="right-up-top" class="minBox right-up-top"></div>
+                <div id="right-up" class="minBox right-up"></div>
+                <div id="left-down-bot" class="minBox left-down-bot"></div>
+                <div id="left-down" class="minBox left-down"></div>
+                <div id="right-down-bot" class="minBox right-down-bot"></div>
+                <div id="right-down" class="minBox right-down"></div>
+            </div>
+        </div>
+    </div>
+
+<!-- 裁剪比例 -->
+    <div class="container-bottom-first" show="{{ showFlag1 }}">
+        <div class="container-bottom-one-first">
+            <image src="{{ conBotFirImgSrc }}" style="width : 30px; height : 30px;" onclick="conBotFirImage"></image>
+            <image src="{{ conBotSecImgSrc }}" class="container-bottom-image" onclick="conBotSecImage"></image>
+            <image src="{{ conBotThrImgSrc }}" class="container-bottom-image" onclick="conBotThrImage"></image>
+            <image src="{{ conBotFouImgSrc }}" class="container-bottom-image" onclick="conBotFouImage"></image>
+        </div>
+        <div class="container-bottom-two-first">
+            <image src="{{ picFraImgSrc }}" style="width : 24px; height : 24px;"></image>
+            <text style="font-size : 14px; color : #2788B9;">{{ picFrame }}</text>
+        </div>
+        <div class="container-bottom-three-first">
+            <image src="common/images/cut_blue.svg" style="width : 24px; height : 24px;"></image>
+            <image src="common/images/adjust_white.svg" style="width : 24px; height : 24px; margin-left : 170px;"
+                   onclick="showAdjustPage"></image>
+        </div>
+        <div class="container-bottom-four-first">
+            <text style="font-size : 16px; color : #2788B9;">{{ cropping }}</text>
+            <text style="font-size : 16px; color : #FFFFFF; margin-left : 160px;" onclick="showAdjustPage">{{ adjust }}</text>
+        </div>
+    </div>
+
+<!-- 调节区域 -->
+    <div class="container-bottom-second" show="{{ showFlag2 }}">
+        <div class="container-bottom-one-first">
+            <slider min="1" max="10" value="{{ brightnessValue }}" onchange="setBrightnessValue" show="{{ showBrightness }}"
+                    style="color : #808080;"/>
+            <slider min="1" max="10" value="{{ contrastValue }}" onchange="setContrastValue" show="{{ showContrast }}"
+                    style="color : #808080;"/>
+            <slider min="1" max="10" value="{{ saturationValue }}" onchange="setSaturationValue" show="{{ showSaturation }}"
+                    style="color : #808080;"/>
+        </div>
+        <div class="container-bottom-second-one">
+            <div class="container-bottom-two-second">
+                <image src="{{ luminanceImgSrc }}"
+                       style="width : 24px; height : 24px; margin-left : 100px;"
+                       onclick="luminanceAdj"></image>
+                <image src="{{ contrastImgSrc }}"
+                       style="width : 24px; height : 24px; margin-left : 90px;"
+                       onclick="contrastAdj"></image>
+                <image src="{{ saturationImgSrc }}" style="width : 24px; height : 24px; margin-left : 90px;"
+                       onclick="saturationAdj"></image>
+            </div>
+            <div class="container-bottom-three-second">
+                <text class="luminanceTxt" style="color : {{ luminanceColor }};" onclick="luminanceAdj">{{ luminance }}</text>
+                <text class="contrastTxt" style="color : {{ contrastColor }};" onclick="contrastAdj">{{ contrast }}</text>
+                <text class="saturationTxt" style="color : {{ saturationColor }};" onclick="saturationAdj">{{ saturation}}</text>
+            </div>
+        </div>
+          
+        <div class="container-bottom-four-second">
+            <image src="common/images/cut_white.svg" style="width : 24px; height : 24px;" onclick="showCropPage"/>
+            <image src="common/images/adjust_blue.svg" style="width : 24px; height : 24px; margin-left : 170px;"/>
+        </div>
+        <div class="container-bottom-five-second">
+            <text style="font-size : 16px; color : #FFFFFF;" onclick="showCropPage">{{ cropping }}</text>
+            <text style="font-size : 16px; color : #2788B9; margin-left : 160px;">{{ adjust }}</text>
+        </div>
+    </div>
+
+<!-- 退出弹窗 -->
+    <dialog id="simpleDialog" class="dialog-main" oncancel="cancelDialog">
+        <div class="dialog-div">
+            <div class="inner-txt">
+                <text class="txt">{{ title }}</text>
+            </div>
+            <div class="inner-btn">
+                <button type="text" value="取消" onclick="cancelSchedule" class="btn-cancel"></button>
+                <button type="text" value="放弃" onclick="setSchedule" class="btn-stop"></button>
+            </div>
+        </div>
+    </dialog>
+</div>
diff --git a/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.js b/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5bb6118585f9d8726c8e724f38c4cc639897adb5
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,646 @@
+import app from '@system.app';
+import prompt from '@system.prompt';
+export default {
+  data: {
+    title: '',
+    titleAppBar: '',
+    picFrame: '',
+    cropping: '',
+    adjust: '',
+    picFraImgSrc: '',
+    conBotFirImgSrc: '',
+    conBotSecImgSrc: '',
+    conBotThrImgSrc: '',
+    conBotFouImgSrc: '',
+    luminance: '',
+    luminanceImgSrc: '',
+    luminanceColor: '',
+    contrast: '',
+    contrastImgSrc: '',
+    contrastColor: '',
+    saturation: '',
+    saturationImgSrc: '',
+    saturationColor: '',
+    cropWidth: 0,
+    cropHeight: 0,
+    cropTop: 38,
+    cropLeft: 0,
+    cropBoxLeftOne: 0,
+    cropBoxLeftTwo: 0,
+    cropBoxLeftThr: 0,
+    cropBoxLeftFou: 0,
+    cropOpWidth: 0,
+    cropOpHeight: 0,
+    brightnessValue: 10,
+    oldBrightnessValue: 10,
+    contrastValue: 10,
+    oldContrastValue: 10,
+    saturationValue: 10,
+    oldSaturationValue: 10,
+    brightnessImgData: null,
+    contrastImgData: null,
+    saturationImgData: null,
+    dWidth: 0,
+    dHeight: 0,
+    proport: 0,
+    sx: 0,
+    sy: 0,
+    dx: 0,
+    dy: 0,
+    offset: 30,
+    showFlag1: true,
+    showFlag2: false,
+    showBrightness: true,
+    showContrast: false,
+    showSaturation: false
+  },
+  onInit() {
+    this.cropWidth = 300;
+    this.cropHeight = 224;
+    this.cropLeft = this.offset;
+    this.title = this.$t('strings.title');
+    this.titleAppBar = this.$t('strings.titleAppBar');
+    this.picFrame = this.$t('strings.picFrame');
+    this.cropping = this.$t('strings.cropping');
+    this.adjust = this.$t('strings.adjust');
+    this.luminance = this.$t('strings.luminance');
+    this.contrast = this.$t('strings.contrast');
+    this.saturation = this.$t('strings.saturation');
+    this.picFraImgSrc = this.$t('strings.picFraImgSrc');
+    this.conBotFirImgSrc = 'common/images/picture_frame_white_blue.svg';
+    this.conBotSecImgSrc = this.$t('strings.conBotSecImgSrc');
+    this.conBotThrImgSrc = this.$t('strings.conBotThrImgSrc');
+    this.conBotFouImgSrc = this.$t('strings.conBotFouImgSrc');
+    this.luminanceImgSrc = 'common/images/luminance_blue.svg';
+    this.contrastImgSrc = this.$t('strings.contrastImgSrc');
+    this.saturationImgSrc = this.$t('strings.saturationImgSrc');
+  },
+  // 画布canvas初始化图片
+  onShow() {
+    const img = new Image();
+    img.src = 'common/images/image.jpg';
+    const el = this.$element('canvasOne');
+
+    const ctx = el.getContext('2d');
+    // 绘制原始图片
+    this.dWidth = 300;
+    this.dHeight = 224;
+    ctx.drawImage(img, 0, 38, 300, 224);
+    // 保存图片
+    this.brightnessImgData = ctx.getImageData(0, 0, 300, 300);
+    this.contrastImgData = ctx.getImageData(0, 0, 300, 300);
+    this.saturationImgData = ctx.getImageData(0, 0, 300, 300);
+    ctx.save();
+    // 绘制完成,赋值裁剪框宽、高
+    this.cropOpWidth = this.dWidth;
+    this.cropOpHeight = this.dHeight;
+    // 裁剪框左边距(原图)
+    this.cropBoxLeftOne = (this.dWidth - this.cropOpWidth) / 2 + this.offset;
+    // 裁剪框左边距(1:1)
+    this.cropBoxLeftTwo = (this.dWidth - this.dHeight) / 2 + this.offset;
+    // 裁剪框左边距(16:9)
+    this.cropBoxLeftThr = (this.dWidth - this.cropOpWidth) / 2 + this.offset;
+    // 裁剪框左边距(9:16)
+    this.cropBoxLeftFou = (this.dWidth - this.dHeight * 9 / 16) / 2 + this.offset;
+    // 裁剪框上边距(原图;图片相对于画布)
+    this.cropBoxTopOne = 38;
+    // 裁剪框上边距(1:1;图片相对于画布)
+    this.cropBoxTopTwo = 38;
+    // 裁剪框上边距(16:9;图片相对于画布)
+    this.cropBoxTopThr = (300 - this.dWidth * 9 / 16) / 2;
+    // 裁剪框上边距(9:16;图片相对于画布)
+    this.cropBoxTopFou = 38;
+  },
+  // 裁剪页面
+  showCropPage() {
+    this.showFlag1 = true;
+    this.showFlag2 = false;
+    // proport:裁剪比例(0:原图、1:1比1、16/9:16比9、9/16:9:16)
+    switch (this.proport) {
+      case 0:
+        this.conBotFirImage();
+        break;
+      case 1:
+        this.conBotSecImage();
+        break;
+      case 16 / 9:
+        this.conBotThrImage();
+        break;
+      case 9 / 16:
+        this.conBotFouImage();
+        break;
+      default:
+        break;
+    }
+  },
+  // 调节页面
+  showAdjustPage() {
+    this.showFlag1 = false;
+    this.showFlag2 = true;
+    this.showBrightness = true;
+    this.showContrast = false;
+    this.showSaturation = false;
+    this.luminanceColor = '#2788B9';
+    this.contrastColor = '#ffffff';
+    this.saturationColor = '#ffffff';
+    switch (this.proport) {
+      case 0:
+        break;
+      case 1:
+        this.cropOne();
+        break;
+      case 16 / 9:
+        this.cropThr();
+        break;
+      case 9 / 16:
+        this.cropFour();
+        break;
+      default:
+        break;
+    }
+  },
+  // 1:1比例裁剪
+  cropOne() {
+    const el = this.$element('canvasOne');
+    const ctx = el.getContext('2d');
+    this.sx = (this.dWidth - this.cropWidth) / 2;
+    // 300:裁剪后图片的宽度(最大值设置300)
+    this.sy = (300 - this.cropHeight) / 2;
+    let imageData;
+    if (this.dHeight === 300) {
+      // 9:16后宽度按比例变大
+      imageData = ctx.getImageData(this.sx, this.sy, this.cropWidth + (300 - 224 * 9 / 16) / 2, this.cropWidth);
+    } else {
+      imageData = ctx.getImageData(this.sx, this.sy, this.cropWidth, this.cropWidth);
+    }
+    ctx.clearRect(0, 0, 500, 500);
+    ctx.scale(this.cropOpWidth / this.cropWidth, this.cropOpHeight / this.cropHeight);
+    this.dx = -(this.cropOpWidth - this.dWidth) / 2;
+    this.dy = 0;
+    ctx.putImageData(imageData, this.dx, this.dy);
+    ctx.scale(this.cropWidth / 300, this.cropHeight / 300);
+    // 保存图片
+    this.brightnessImgData = ctx.getImageData(0, 0, 300, 300);
+    this.contrastImgData = ctx.getImageData(0, 0, 300, 300);
+    this.saturationImgData = ctx.getImageData(0, 0, 300, 300);
+    ctx.save();
+    // 裁剪后裁剪框距离左边距离(9:16)
+    this.cropBoxLeftFou = (this.cropOpWidth - this.cropOpHeight * 9 / 16) / 2 + this.offset;
+    // 裁剪后裁剪框距离左边距离(16:9)
+    this.cropBoxLeftThr = this.offset;
+    // 裁剪后裁剪框距离左边距离(1:1)
+    this.cropBoxLeftTwo = this.offset;
+    // 裁剪后裁剪框距离左边距离(原图)
+    this.cropBoxLeftOne = this.offset;
+    // 裁剪后裁剪框距离上边距离
+    this.cropBoxTopOne = (this.cropOpHeight - this.cropOpWidth) / 2;
+    this.cropBoxTopTwo = (this.cropOpHeight - this.cropOpWidth) / 2;
+    this.cropBoxTopThr = (this.cropOpHeight - this.cropOpWidth * 9 / 16) / 2;
+    this.cropBoxTopFou = (this.cropOpHeight - this.cropOpWidth) / 2;
+    this.dWidth = this.cropOpWidth;
+    this.dHeight = this.cropOpHeight;
+  },
+  // 16:9比例裁剪
+  cropThr() {
+    const el = this.$element('canvasOne');
+    const ctx = el.getContext('2d');
+    this.sx = (300 - this.dWidth) / 2;
+    this.sy = (300 - this.cropHeight) / 2;
+
+    const imageData = ctx.getImageData(this.sx, this.sy, this.cropWidth, this.cropHeight);
+    ctx.clearRect(0, 0, 500, 500);
+    if (this.dHeight === 300) {
+      ctx.scale(300 / this.cropWidth, 300 / this.cropWidth);
+      this.cropOpWidth = this.cropWidth * (300 / this.cropWidth);
+      this.cropOpHeight = this.cropHeight * (300 / this.cropWidth);
+    }
+    this.dy = (300 - this.cropHeight * (300 / this.cropWidth)) / (2 * (300 / this.cropWidth));
+    ctx.putImageData(imageData, 0, this.dy);
+    if (this.dHeight === 300) {
+      ctx.scale(this.cropWidth / 300, this.cropWidth / 300);
+    }
+    // 保存图片
+    this.brightnessImgData = ctx.getImageData(0, 0, 300, 300);
+    this.contrastImgData = ctx.getImageData(0, 0, 300, 300);
+    this.saturationImgData = ctx.getImageData(0, 0, 300, 300);
+    ctx.save();
+    this.cropBoxLeftFou = (this.cropOpWidth - this.cropOpHeight * 9 / 16) / 2 + this.offset;
+    this.cropBoxLeftThr = this.offset;
+    this.cropBoxLeftTwo = (this.cropOpWidth - this.cropOpHeight * 1 / 1) / 2 + this.offset;
+    this.cropBoxLeftOne = this.offset;
+    this.cropBoxTopOne = (300 - this.cropOpHeight) / 2;
+    this.cropBoxTopTwo = (300 - this.cropOpHeight) / 2;
+    this.cropBoxTopThr = (300 - this.cropOpHeight) / 2;
+    this.cropBoxTopFou = (300 - this.cropOpHeight) / 2;
+    // 裁剪完图片宽高等于裁剪比例缩放后宽高
+    this.dWidth = this.cropOpWidth;
+    this.dHeight = this.cropOpHeight;
+    // 裁剪框宽高等于裁剪比例缩放后宽高
+    this.cropWidth = this.cropOpWidth;
+    this.cropHeight = this.cropOpHeight;
+  },
+  // 9:16比例裁剪
+  cropFour() {
+    const el = this.$element('canvasOne');
+    const ctx = el.getContext('2d');
+
+    this.sx = (this.dWidth - this.cropWidth) / 2;
+    this.sy = (300 - this.cropHeight) / 2;
+    let imageData;
+    if (this.dHeight === 300 && this.dWidth !== 300) {
+      imageData = ctx.getImageData(this.sx, this.sy, this.cropWidth + (300 - 224 * 9 / 16) / 2, this.cropHeight);
+    } else {
+      imageData = ctx.getImageData(this.sx, this.sy, this.cropWidth, this.cropHeight);
+    }
+    ctx.clearRect(0, 0, 500, 500);
+    if (this.dWidth === 300) {
+      ctx.scale(300 / this.cropHeight, 300 / this.cropHeight);
+      this.cropOpHeight = this.cropHeight * (300 / this.cropHeight);
+      this.cropOpWidth = this.cropWidth * (300 / this.cropHeight);
+    }
+    if (this.dHeight === 300 && this.dWidth !== 300) {
+      this.dx = 0;
+    } else {
+      this.dx = (300 - this.cropWidth * (300 / this.cropHeight)) / (2 * (300 / this.cropHeight));
+    }
+    this.dy = 0;
+    ctx.putImageData(imageData, this.dx, this.dy);
+    if (this.dWidth === 300) {
+      ctx.scale(this.cropHeight / 300, this.cropHeight / 300);
+    }
+    // 保存图片
+    this.brightnessImgData = ctx.getImageData(0, 0, 300, 300);
+    this.contrastImgData = ctx.getImageData(0, 0, 300, 300);
+    this.saturationImgData = ctx.getImageData(0, 0, 300, 300);
+    ctx.save();
+    // 裁剪后裁剪框距离左边距离(9:16)
+    this.cropBoxLeftFou = (300 - this.cropOpWidth) / 2 + this.offset;
+    // 裁剪后裁剪框距离左边距离(16:9)
+    this.cropBoxLeftThr = (300 - this.cropOpWidth) / 2 + this.offset;
+    // 裁剪后裁剪框距离左边距离(1:1)
+    this.cropBoxLeftTwo = (300 - this.cropOpWidth) / 2 + this.offset;
+    // 裁剪后裁剪框距离左边距离(原图)
+    this.cropBoxLeftOne = (300 - this.cropOpWidth) / 2 + this.offset;
+    // 裁剪后裁剪框相对于画布y坐标
+    this.cropBoxTopOne = (this.cropOpHeight - this.cropOpWidth * 16 / 9) / 2;
+    this.cropBoxTopTwo = (this.cropOpHeight - this.cropOpWidth) / 2;
+    this.cropBoxTopThr = (this.cropOpHeight - this.cropOpWidth * 9 / 16) / 2;
+    this.cropBoxTopFou = (this.cropOpHeight - this.cropOpWidth * 16 / 9) / 2;
+    this.dWidth = this.cropOpWidth;
+    this.dHeight = this.cropOpHeight;
+  },
+
+  // 原图尺寸
+  conBotFirImage() {
+    this.conBotFirImgSrc = 'common/images/picture_frame_white_blue.svg';
+    this.conBotSecImgSrc = this.$t('strings.conBotSecImgSrc');
+    this.conBotThrImgSrc = this.$t('strings.conBotThrImgSrc');
+    this.conBotFouImgSrc = this.$t('strings.conBotFouImgSrc');
+    this.cropTop = this.cropBoxTopOne;
+    // 裁剪后图片宽高
+    this.cropOpWidth = this.dWidth;
+    this.cropOpHeight = this.dHeight;
+    // 裁剪框的宽高
+    this.cropWidth = this.dWidth;
+    this.cropHeight = this.dHeight;
+    this.cropLeft = this.cropBoxLeftOne;
+    this.proport = 0;
+  },
+  // 1:1
+  conBotSecImage() {
+    this.conBotFirImgSrc = this.$t('strings.conBotFirImgSrc');
+    this.conBotSecImgSrc = 'common/images/proportions_1-1_blue.png';
+    this.conBotThrImgSrc = this.$t('strings.conBotThrImgSrc');
+    this.conBotFouImgSrc = this.$t('strings.conBotFouImgSrc');
+    this.cropLeft = this.cropBoxLeftTwo;
+    if (this.dWidth < this.dHeight) {
+      this.cropTop = (this.dHeight - this.dWidth) / 2;
+      this.cropWidth = this.dWidth;
+      this.cropHeight = this.dWidth;
+    } else {
+      this.cropTop = this.cropBoxTopTwo;
+      this.cropWidth = this.dHeight;
+      this.cropHeight = this.dHeight;
+    }
+    // 放到最大300
+    this.cropOpWidth = 300;
+    this.cropOpHeight = 300;
+    this.proport = 1;
+  },
+  // 16:9
+  conBotThrImage() {
+    this.conBotFirImgSrc = this.$t('strings.conBotFirImgSrc');
+    this.conBotSecImgSrc = this.$t('strings.conBotSecImgSrc');
+    this.conBotThrImgSrc = 'common/images/proportions_16-9_blue.png';
+    this.conBotFouImgSrc = this.$t('strings.conBotFouImgSrc');
+    this.cropTop = this.cropBoxTopThr;
+    this.cropWidth = this.dWidth;
+    this.cropHeight = this.cropWidth * 9 / 16;
+    this.cropOpWidth = 300;
+    this.cropOpHeight = this.cropOpWidth * 9 / 16;
+    this.cropLeft = this.cropBoxLeftThr;
+    this.proport = 16 / 9;
+  },
+  // 9:16
+  conBotFouImage() {
+    this.conBotFirImgSrc = this.$t('strings.conBotFirImgSrc');
+    this.conBotSecImgSrc = this.$t('strings.conBotSecImgSrc');
+    this.conBotThrImgSrc = this.$t('strings.conBotThrImgSrc');
+    this.conBotFouImgSrc = 'common/images/proportions_9-16_blue.png';
+    this.cropTop = this.cropBoxTopFou;
+    this.cropLeft = this.cropBoxLeftFou;
+    this.cropWidth = this.dHeight * 9 / 16;
+    this.cropHeight = this.dHeight;
+    this.cropOpHeight = 300;
+    this.cropOpWidth = this.cropOpHeight * 9 / 16;
+    this.proport = 9 / 16;
+  },
+  // 亮度
+  luminanceAdj() {
+    this.luminanceColor = '#2788B9';
+    this.contrastColor = '#ffffff';
+    this.saturationColor = '#ffffff';
+    this.luminanceImgSrc = 'common/images/luminance_blue.svg';
+    this.contrastImgSrc = this.$t('strings.contrastImgSrc');
+    this.saturationImgSrc = this.$t('strings.saturationImgSrc');
+    this.showBrightness = true;
+    this.showContrast = false;
+    this.showSaturation = false;
+    // 还原成裁剪后的图片
+    const test = this.$element('canvasOne');
+    const ctx = test.getContext('2d');
+    ctx.restore();
+    ctx.putImageData(this.brightnessImgData, 0, 0);
+    // 将slider值设置成10(最大为10)
+    this.brightnessValue = 10;
+    this.contrastValue = 10;
+    this.saturationValue = 10;
+  },
+  // 对比度
+  contrastAdj() {
+    this.luminanceColor = '#ffffff';
+    this.contrastColor = '#2788B9';
+    this.saturationColor = '#ffffff';
+    this.luminanceImgSrc = this.$t('strings.luminanceImgSrc');
+    this.contrastImgSrc = 'common/images/contrast_blue.svg';
+    this.saturationImgSrc = this.$t('strings.saturationImgSrc');
+    this.showBrightness = false;
+    this.showContrast = true;
+    this.showSaturation = false;
+    // 还原成裁剪后的图片
+    const test = this.$element('canvasOne');
+    const ctx = test.getContext('2d');
+    ctx.restore();
+    ctx.putImageData(this.contrastImgData, 0, 0);
+    // 将slider值设置成10(最大为10)
+    this.brightnessValue = 10;
+    this.contrastValue = 10;
+    this.saturationValue = 10;
+  },
+  // 饱和度
+  saturationAdj() {
+    this.luminanceColor = '#ffffff';
+    this.contrastColor = '#ffffff';
+    this.saturationColor = '#2788B9';
+    this.luminanceImgSrc = this.$t('strings.luminanceImgSrc');
+    this.contrastImgSrc = this.$t('strings.contrastImgSrc');
+    this.saturationImgSrc = 'common/images/saturation_blue.svg';
+    this.showBrightness = false;
+    this.showContrast = false;
+    this.showSaturation = true;
+    // 还原成裁剪后的图片
+    const test = this.$element('canvasOne');
+    const ctx = test.getContext('2d');
+    ctx.restore();
+    ctx.putImageData(this.saturationImgData, 0, 0);
+    // 将slider值设置成10(最大为10)
+    this.brightnessValue = 10;
+    this.contrastValue = 10;
+    this.saturationValue = 10;
+  },
+  // 亮度调节
+  setBrightnessValue(e) {
+    if (e.mode === 'start') {
+      this.oldBrightnessValue = e.value;
+    } else if (e.mode === 'end') {
+      this.brightnessValue = e.value;
+      if (e.value === 10) {
+        const test = this.$element('canvasOne');
+        const ctx = test.getContext('2d');
+        ctx.restore();
+        ctx.putImageData(this.brightnessImgData, 0, 0);
+      } else {
+        const adjustValue = e.value / this.oldBrightnessValue;
+        this.adjustBrightness(adjustValue);
+        this.oldBrightnessValue = e.value;
+      }
+    }
+  },
+  adjustBrightness(value) {
+    const test = this.$element('canvasOne');
+    const ctx = test.getContext('2d');
+    const imgData = ctx.getImageData(0, 0, 300, 300);
+
+    ctx.putImageData(this.changeBrightness(imgData, value), 0, 0);
+  },
+  changeBrightness(imgdata, value) {
+    const data = imgdata.data;
+    for (let i = 0; i < data.length; i += 4) {
+      const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
+      hsv[2] *= value;
+      const rgb = this.hsv2rgb([...hsv]);
+      data[i] = rgb[0];
+      data[i + 1] = rgb[1];
+      data[i + 2] = rgb[2];
+    }
+    return imgdata;
+  },
+  // 对比度调节
+  setContrastValue(e) {
+    if (e.mode === 'start') {
+      this.oldContrastValue = e.value;
+    } else if (e.mode === 'end') {
+      this.contrastValue = e.value;
+      if (e.value === 10) {
+        const test = this.$element('canvasOne');
+        const ctx = test.getContext('2d');
+        ctx.restore();
+        ctx.putImageData(this.contrastImgData, 0, 0);
+      } else {
+        const adjustValue = e.value / this.oldContrastValue;
+        this.adjustContrast(adjustValue);
+        this.oldContrastValue = e.value;
+      }
+    }
+  },
+  adjustContrast(value) {
+    const test = this.$element('canvasOne');
+    const ctx = test.getContext('2d');
+    const imgData = ctx.getImageData(0, 0, 300, 300);
+    ctx.putImageData(this.changeContrast(imgData, value), 0, 0);
+  },
+  changeContrast(imgdata, value) {
+    const data = imgdata.data;
+    for (let i = 0; i < data.length; i += 4) {
+      const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
+      hsv[0] *= value;
+      const rgb = this.hsv2rgb([...hsv]);
+      data[i] = rgb[0];
+      data[i + 1] = rgb[1];
+      data[i + 2] = rgb[2];
+    }
+    return imgdata;
+  },
+  // 饱和度调节
+  setSaturationValue(e) {
+    if (e.mode === 'start') {
+      this.oldSaturationValue = e.value;
+    } else if (e.mode === 'end') {
+      this.saturationValue = e.value;
+      if (e.value === 10) {
+        const test = this.$element('canvasOne');
+        const ctx = test.getContext('2d');
+        ctx.restore();
+        ctx.putImageData(this.saturationImgData, 0, 0);
+      } else {
+        const adjustValue = e.value / this.oldSaturationValue;
+        this.adjustSaturation(adjustValue);
+        this.oldSaturationValue = e.value;
+      }
+    }
+  },
+  adjustSaturation(value) {
+    const test = this.$element('canvasOne');
+    const ctx = test.getContext('2d');
+
+    const imgData = ctx.getImageData(0, 0, 300, 300);
+    ctx.putImageData(this.changeSaturation(imgData, value), 0, 0);
+  },
+  changeSaturation(imgdata, value) {
+    const data = imgdata.data;
+    for (let i = 0; i < data.length; i += 4) {
+      const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
+      hsv[1] *= value;
+      const rgb = this.hsv2rgb([...hsv]);
+      data[i] = rgb[0];
+      data[i + 1] = rgb[1];
+      data[i + 2] = rgb[2];
+    }
+    return imgdata;
+  },
+  // RGB转HSV
+  rgb2hsv(arr) {
+    let rr;
+    let gg;
+    let bb;
+    const r = arr[0] / 255;
+    const g = arr[1] / 255;
+    const b = arr[2] / 255;
+    let h;
+    let s;
+    const v = Math.max(r, g, b);
+    const diff = v - Math.min(r, g, b);
+    const diffc = function(c) {
+      return (v - c) / 6 / diff + 1 / 2;
+    };
+
+    if (diff === 0) {
+      h = s = 0;
+    } else {
+      s = diff / v;
+      rr = diffc(r);
+      gg = diffc(g);
+      bb = diffc(b);
+
+      if (r === v) {
+        h = bb - gg;
+      } else if (g === v) {
+        h = 1 / 3 + rr - bb;
+      } else if (b === v) {
+        h = 2 / 3 + gg - rr;
+      }
+      if (h < 0) {
+        h += 1;
+      } else if (h > 1) {
+        h -= 1;
+      }
+    }
+    return [Math.round(h * 360), Math.round(s * 100), Math.round(v * 100)];
+  },
+  // HSV转RGB
+  hsv2rgb(hsv) {
+    let _l = hsv[0];
+    let _m = hsv[1];
+    let _n = hsv[2];
+    let newR;
+    let newG;
+    let newB;
+    if (_m === 0) {
+      _l = _m = _n = Math.round(255 * _n / 100);
+      newR = _l;
+      newG = _m;
+      newB = _n;
+    } else {
+      _m = _m / 100;
+      _n = _n / 100;
+      const p = Math.floor(_l / 60) % 6;
+      const f = _l / 60 - p;
+      const a = _n * (1 - _m);
+      const b = _n * (1 - _m * f);
+      const c = _n * (1 - _m * (1 - f));
+      switch (p) {
+        case 0:
+          newR = _n; newG = c; newB = a;
+          break;
+        case 1:
+          newR = b; newG = _n; newB = a;
+          break;
+        case 2:
+          newR = a; newG = _n; newB = c;
+          break;
+        case 3:
+          newR = a; newG = b; newB = _n;
+          break;
+        case 4:
+          newR = c; newG = a; newB = _n;
+          break;
+        case 5:
+          newR = _n; newG = a; newB = b;
+          break;
+      }
+      newR = Math.round(255 * newR);
+      newG = Math.round(255 * newG);
+      newB = Math.round(255 * newB);
+    }
+    return [newR, newG, newB];
+  },
+  // 回退
+  rewind() {
+    prompt.showToast({
+      message: 'Please implement your rewind function'
+    });
+  },
+  // 前进
+  advance() {
+    prompt.showToast({
+      message: 'Please implement your advance function'
+    });
+  },
+  // 保存
+  save() {
+    prompt.showToast({
+      message: 'Please implement your save function'
+    });
+  },
+  // 退出弹窗
+  showDialog(e) {
+    this.$element('simpleDialog').show();
+  },
+  cancelSchedule(e) {
+    this.$element('simpleDialog').close();
+  },
+  setSchedule(e) {
+    this.$element('simpleDialog').close();
+    app.terminate();
+  }
+};
diff --git a/ImageEditorTemplate/entry/src/main/resources/base/element/string.json b/ImageEditorTemplate/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..0bae6bd40f7360d5d818998221b199d3ec0f69c0
--- /dev/null
+++ b/ImageEditorTemplate/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "entry_MainAbility"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ImageEditorTemplate/entry/src/main/resources/base/media/icon.png b/ImageEditorTemplate/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/ImageEditorTemplate/entry/src/main/resources/base/media/icon.png differ
diff --git a/JSCleanCalculator/entry/src/ohosTest/java/com/example/cleancalculatorbeta/ExampleOhosTest.java b/ImageEditorTemplate/entry/src/ohosTest/java/com/huawei/imageeditortemplate/ExampleOhosTest.java
similarity index 73%
rename from JSCleanCalculator/entry/src/ohosTest/java/com/example/cleancalculatorbeta/ExampleOhosTest.java
rename to ImageEditorTemplate/entry/src/ohosTest/java/com/huawei/imageeditortemplate/ExampleOhosTest.java
index f637dfee3e715ba6f2b702aea4253362c7356db7..c29e8af0f7f48b226e98dbbbcd2e8ef9e684e18d 100644
--- a/JSCleanCalculator/entry/src/ohosTest/java/com/example/cleancalculatorbeta/ExampleOhosTest.java
+++ b/ImageEditorTemplate/entry/src/ohosTest/java/com/huawei/imageeditortemplate/ExampleOhosTest.java
@@ -1,4 +1,4 @@
-package com.example.cleancalculatorbeta;
+package com.huawei.imageeditortemplate;
 
 import ohos.aafwk.ability.delegation.AbilityDelegatorRegistry;
 import org.junit.Test;
@@ -9,6 +9,6 @@ public class ExampleOhosTest {
     @Test
     public void testBundleName() {
         final String actualBundleName = AbilityDelegatorRegistry.getArguments().getTestBundleName();
-        assertEquals("com.example.cleancalculatorbeta", actualBundleName);
+        assertEquals("com.huawei.imageeditortemplate", actualBundleName);
     }
 }
\ No newline at end of file
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/default/app.js b/ImageEditorTemplate/entry/src/ohosTest/js/default/app.js
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/default/app.js
rename to ImageEditorTemplate/entry/src/ohosTest/js/default/app.js
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/default/i18n/en-US.json b/ImageEditorTemplate/entry/src/ohosTest/js/default/i18n/en-US.json
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/default/i18n/en-US.json
rename to ImageEditorTemplate/entry/src/ohosTest/js/default/i18n/en-US.json
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/default/i18n/zh-CN.json b/ImageEditorTemplate/entry/src/ohosTest/js/default/i18n/zh-CN.json
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/default/i18n/zh-CN.json
rename to ImageEditorTemplate/entry/src/ohosTest/js/default/i18n/zh-CN.json
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/default/pages/index/index.css b/ImageEditorTemplate/entry/src/ohosTest/js/default/pages/index/index.css
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/default/pages/index/index.css
rename to ImageEditorTemplate/entry/src/ohosTest/js/default/pages/index/index.css
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/default/pages/index/index.hml b/ImageEditorTemplate/entry/src/ohosTest/js/default/pages/index/index.hml
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/default/pages/index/index.hml
rename to ImageEditorTemplate/entry/src/ohosTest/js/default/pages/index/index.hml
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/default/pages/index/index.js b/ImageEditorTemplate/entry/src/ohosTest/js/default/pages/index/index.js
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/default/pages/index/index.js
rename to ImageEditorTemplate/entry/src/ohosTest/js/default/pages/index/index.js
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/test/ExampleJsunit.test.js b/ImageEditorTemplate/entry/src/ohosTest/js/test/ExampleJsunit.test.js
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/test/ExampleJsunit.test.js
rename to ImageEditorTemplate/entry/src/ohosTest/js/test/ExampleJsunit.test.js
diff --git a/JSCleanCalculator/entry/src/ohosTest/js/test/List.test.js b/ImageEditorTemplate/entry/src/ohosTest/js/test/List.test.js
similarity index 100%
rename from JSCleanCalculator/entry/src/ohosTest/js/test/List.test.js
rename to ImageEditorTemplate/entry/src/ohosTest/js/test/List.test.js
diff --git a/JSCleanCalculator/entry/src/ohosTest/resources/base/element/string.json b/ImageEditorTemplate/entry/src/ohosTest/resources/base/element/string.json
similarity index 80%
rename from JSCleanCalculator/entry/src/ohosTest/resources/base/element/string.json
rename to ImageEditorTemplate/entry/src/ohosTest/resources/base/element/string.json
index ebab015692df3d2f9381f296572edb059f873c6f..7d85af44df9cbbc5d8c7953f66743b14b99624b3 100644
--- a/JSCleanCalculator/entry/src/ohosTest/resources/base/element/string.json
+++ b/ImageEditorTemplate/entry/src/ohosTest/resources/base/element/string.json
@@ -2,7 +2,7 @@
   "string": [
     {
       "name": "app_name",
-      "value": "CleanCalculatorBeta"
+      "value": "ImageEditorTemplate"
     },
     {
       "name": "mainability_description",
diff --git a/ImageEditorTemplate/entry/src/ohosTest/resources/base/media/icon.png b/ImageEditorTemplate/entry/src/ohosTest/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/ImageEditorTemplate/entry/src/ohosTest/resources/base/media/icon.png differ
diff --git a/ImageEditorTemplate/gradle/wrapper/gradle-wrapper.jar b/ImageEditorTemplate/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000000000000000000000000000000000000..490fda8577df6c95960ba7077c43220e5bb2c0d9
Binary files /dev/null and b/ImageEditorTemplate/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/ImageEditorTemplate/gradle/wrapper/gradle-wrapper.properties b/ImageEditorTemplate/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000000000000000000000000000000000000..f59159e865d4b59feb1b8c44b001f62fc5d58df4
--- /dev/null
+++ b/ImageEditorTemplate/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://repo.huaweicloud.com/gradle/gradle-6.3-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/ImageEditorTemplate/settings.gradle b/ImageEditorTemplate/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/ImageEditorTemplate/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/ImageJsDemo/README.md b/ImageJsDemo/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..636a619605e06e4fa665ae7a95b1959c831f07e9
--- /dev/null
+++ b/ImageJsDemo/README.md
@@ -0,0 +1,3 @@
+# ImageJsDemo
+简介
+• 此Demo使用JS UI中的Image组件，利用CSS实现图片的旋转，剪裁，缩放，镜像效果
diff --git a/ImageJsDemo/entry/src/main/js/default/app.js b/ImageJsDemo/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..0fc4e6f06ffe667b2fc9632386e57f75f6f0896f 100644
--- a/ImageJsDemo/entry/src/main/js/default/app.js
+++ b/ImageJsDemo/entry/src/main/js/default/app.js
@@ -1,8 +1,22 @@
+/*
+ * 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("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
 };
diff --git a/ImageJsDemo/entry/src/main/js/default/pages/index/index.css b/ImageJsDemo/entry/src/main/js/default/pages/index/index.css
index 824ce5bb8e4dfd41378ece37d7e78050cd5d0a5b..8d99db22b8e722900cfa587422129dd5162a1066 100644
--- a/ImageJsDemo/entry/src/main/js/default/pages/index/index.css
+++ b/ImageJsDemo/entry/src/main/js/default/pages/index/index.css
@@ -1,3 +1,17 @@
+/*
+ * 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.
+ */
 .container {
     justify-content: flex-start;
     left: 0px;
diff --git a/ImageJsDemo/entry/src/main/js/default/pages/index/index.hml b/ImageJsDemo/entry/src/main/js/default/pages/index/index.hml
index 5b76f7400c024bcc3fcd801ab0ab6440f8f675c5..d1bfd7fa23696d948dbe57c178e8e3896f8f8db8 100644
--- a/ImageJsDemo/entry/src/main/js/default/pages/index/index.hml
+++ b/ImageJsDemo/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,15 @@
+<!--
+ 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="container">
     <div class="title-div"  >
         <text class="title">
diff --git a/ImageJsDemo/entry/src/main/js/default/pages/index/index.js b/ImageJsDemo/entry/src/main/js/default/pages/index/index.js
index 772d252af64eebf47f35327cfea885fc4593f39a..9da77c787cac20ff36ec562304657f88b3434ac7 100644
--- a/ImageJsDemo/entry/src/main/js/default/pages/index/index.js
+++ b/ImageJsDemo/entry/src/main/js/default/pages/index/index.js
@@ -1,86 +1,99 @@
+/*
+ * 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.
+ */
 // @ts-nocheck
 export default {
-    data: {
-        title: "图像开发",
-        imageUrl: "/common/images/shanghai.jpg",
-        isRevolve: true,
-        isCut: false,
-        isScale: false,
-        isMirror: false,
-        scaleState: false,
-        degrees: 0,
-        xDegrees: 0,
-        yDegrees: 0,
-        rotateIndex: 0,
-        width: 576,
-        height: 488,
-        clipArray:[0, 0, 0, 0]
-    },
-    // 旋转
-    imageRotate() {
-        if (!this.isRevolve) {
-            this.isRevolve = true
-            this.isCut =  false
-            this.isScale = false
-            this.isMirror = false
-            this.rotateIndex = 0
-        }
-        if (this.rotateIndex <3) {
-            this.rotateIndex++
-        } else{
-            this.rotateIndex = 0
-        }
-        this.degrees = this.rotateIndex * 90
-    },
-    // 剪裁
-    imageCut() {
-        if (!this.isCut) {
-            this.isRevolve = false
-            this.isCut =  true
-            this.isScale = false
-            this.isMirror = false
-
-        }
-        if (this.clipArray[2] === 0) {
-            // 值指的是 top, right, bottom, left 四个点
-            this.clipArray = [0, 0, this.height/2,0]
-        } else {
-            this.clipArray = [0, 0, 0, 0]
-        }
-    },
-    // 缩放
-    imageScale() {
-        if (!this.isScale) {
-            this.isRevolve = false
-            this.isCut =  false
-            this.isScale = true
-            this.isMirror = false
-            if (this.width === 576) {
-                this.width = this.width/2
-                this.height = this.height/2
-            }
-        } else {
-            if (this.width === 576) {
-                this.width = this.width/2
-                this.height = this.height/2
-            } else {
-                this.width = this.width*2
-                this.height = this.height*2
-            }
-        }
-    },
-    imageMirror() {
-        if (!this.isMirror) {
-            this.isRevolve = false
-            this.isCut =  false
-            this.isScale = false
-            this.isMirror = true
-            this.yDegrees = 0
-        }
-        if (this.yDegrees === 0) {
-            this.yDegrees = 180
-        } else{
-            this.yDegrees = 0
-        }
+  data: {
+    title: '图像开发',
+    imageUrl: '/common/images/shanghai.jpg',
+    isRevolve: true,
+    isCut: false,
+    isScale: false,
+    isMirror: false,
+    scaleState: false,
+    degrees: 0,
+    xDegrees: 0,
+    yDegrees: 0,
+    rotateIndex: 0,
+    width: 576,
+    height: 488,
+    clipArray: [0, 0, 0, 0]
+  },
+  // 旋转
+  imageRotate() {
+    if (!this.isRevolve) {
+      this.isRevolve = true;
+      this.isCut = false;
+      this.isScale = false;
+      this.isMirror = false;
+      this.rotateIndex = 0;
     }
-}
\ No newline at end of file
+    if (this.rotateIndex < 3) {
+      this.rotateIndex++;
+    } else {
+      this.rotateIndex = 0;
+    }
+    this.degrees = this.rotateIndex * 90;
+  },
+  // 剪裁
+  imageCut() {
+    if (!this.isCut) {
+      this.isRevolve = false;
+      this.isCut = true;
+      this.isScale = false;
+      this.isMirror = false;
+    }
+    if (this.clipArray[2] === 0) {
+      // 值指的是 top, right, bottom, left 四个点
+      this.clipArray = [0, 0, this.height / 2, 0];
+    } else {
+      this.clipArray = [0, 0, 0, 0];
+    }
+  },
+  // 缩放
+  imageScale() {
+    if (!this.isScale) {
+      this.isRevolve = false;
+      this.isCut = false;
+      this.isScale = true;
+      this.isMirror = false;
+      if (this.width === 576) {
+        this.width = this.width / 2;
+        this.height = this.height / 2;
+      }
+    } else {
+      if (this.width === 576) {
+        this.width = this.width / 2;
+        this.height = this.height / 2;
+      } else {
+        this.width = this.width * 2;
+        this.height = this.height * 2;
+      }
+    }
+  },
+  imageMirror() {
+    if (!this.isMirror) {
+      this.isRevolve = false;
+      this.isCut = false;
+      this.isScale = false;
+      this.isMirror = true;
+      this.yDegrees = 0;
+    }
+    if (this.yDegrees === 0) {
+      this.yDegrees = 180;
+    } else {
+      this.yDegrees = 0;
+    }
+  }
+};
diff --git a/InputApplication/README.md b/InputApplication/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..505640dbfe350a9b8ec332bcc327f370e5dc9c64
--- /dev/null
+++ b/InputApplication/README.md
@@ -0,0 +1,3 @@
+# InputApplication
+简介
+• 此Demo使用JS UI中的input组件，实现输入框和表单提交。您可以在input输入框输入内容，长按input输入框对输入内容进行翻译、分享、查找等操作，点击提交按钮时对必填项进行校验。
\ No newline at end of file
diff --git a/InputApplication/build.gradle b/InputApplication/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..9cf74c205fc884ae2c6796ce2298ecbe3f40672d
--- /dev/null
+++ b/InputApplication/build.gradle
@@ -0,0 +1,33 @@
+// 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 6
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.5.5'
+        classpath 'com.huawei.ohos:decctest:1.2.5.1'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/InputApplication/entry/.gitignore b/InputApplication/entry/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..7d5b7a94f4dcf381f03ff21f28f8a2494b58023f
--- /dev/null
+++ b/InputApplication/entry/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/InputApplication/entry/build.gradle b/InputApplication/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..cccb71cae91018743841ab76aeb19c595f4ed847
--- /dev/null
+++ b/InputApplication/entry/build.gradle
@@ -0,0 +1,23 @@
+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 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+
+    supportSystem "standard"
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/InputApplication/entry/package.json b/InputApplication/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/InputApplication/entry/package.json
@@ -0,0 +1 @@
+{}
diff --git a/InputApplication/entry/proguard-rules.pro b/InputApplication/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/InputApplication/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/InputApplication/entry/src/main/config.json b/InputApplication/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..0aba403d7c78d96e1043d52a2fcdf40ab1fde36f
--- /dev/null
+++ b/InputApplication/entry/src/main/config.json
@@ -0,0 +1,59 @@
+{
+  "app": {
+    "bundleName": "com.huawei.cookbook",
+    "vendor": "huawei",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.huawei.inputapplication",
+    "name": ".MyApplication",
+    "mainAbility": "com.huawei.inputapplication.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "name": "com.huawei.inputapplication.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/InputApplication/entry/src/main/js/default/app.js b/InputApplication/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/InputApplication/entry/src/main/js/default/app.js
@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/InputApplication/entry/src/main/js/default/common/images/Wallpaper.png b/InputApplication/entry/src/main/js/default/common/images/Wallpaper.png
new file mode 100644
index 0000000000000000000000000000000000000000..60d4841a80eb20c63de74306cb7f8350d6a85c48
Binary files /dev/null and b/InputApplication/entry/src/main/js/default/common/images/Wallpaper.png differ
diff --git a/JSCleanCalculator/entry/src/main/js/default/common/images/bg-tv.jpg b/InputApplication/entry/src/main/js/default/common/images/bg-tv.jpg
similarity index 100%
rename from JSCleanCalculator/entry/src/main/js/default/common/images/bg-tv.jpg
rename to InputApplication/entry/src/main/js/default/common/images/bg-tv.jpg
diff --git a/InputApplication/entry/src/main/js/default/common/images/require.png b/InputApplication/entry/src/main/js/default/common/images/require.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0860084482180c79e480fcfa151202bf26fdafa
Binary files /dev/null and b/InputApplication/entry/src/main/js/default/common/images/require.png differ
diff --git a/InputApplication/entry/src/main/js/default/i18n/en-US.json b/InputApplication/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..08e34eac912bf2651eefc20e26aa479b5e4e7ec2
--- /dev/null
+++ b/InputApplication/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/InputApplication/entry/src/main/js/default/i18n/zh-CN.json b/InputApplication/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dd53b3a8b808aec9396fa663cb00ef22ba61e0a
--- /dev/null
+++ b/InputApplication/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/InputApplication/entry/src/main/js/default/pages/index/index.css b/InputApplication/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1dfd40f0cf046d46020e7c867a4cce65bf0b108c
--- /dev/null
+++ b/InputApplication/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+.container {
+    flex-direction: column;
+    align-items: center;
+}
+.input-form {
+    width: 100%;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.form-text {
+    font-size: 20px;
+}
+.row {
+    width: 98%;
+    margin-top: 5px;
+    flex-direction: row;
+}
+.label {
+    font-size: 13px;
+    width: 120px;
+    text-align: right;
+}
+.input-block {
+    width: 100%;
+}
+.input {
+    width: 90%;
+    font-size: 12px;
+}
+.password-tip {
+    font-size: 10px;
+}
+.sex {
+    font-size: 10px;
+    margin-right: 10px;
+}
+.favorite {
+    font-size: 10px;
+}
+.button {
+    margin-top: 70px;
+    width: 150px;
+    background-color: #17A98E;
+}
diff --git a/InputApplication/entry/src/main/js/default/pages/index/index.hml b/InputApplication/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..a70303baf42c724834b3628fe67b4e4fe69e36fe
--- /dev/null
+++ b/InputApplication/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,78 @@
+<!--
+ 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="container">
+    <div class="input-form">
+        <text class="form-text">input 表单</text>
+    </div>
+    <div class="row">
+        <label class="label">用户名：</label>
+        <div class="input-block">
+            <input id="username" class="input" type="text" maxlength="10" placeholder="请输入内容用户名" headericon="{{require}}" onchange="change" ontranslate="translate"/>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">请设置密码：</label>
+        <div class="input-block">
+            <input id="password" class="input" type="password" maxlength="10" placeholder="请输入密码" headericon="{{require}}" onchange="change"/>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">请确认密码：</label>
+        <div class="input-block">
+            <input id="password2"class="input" type="password" maxlength="10" placeholder="请再次确认密码" headericon="{{require}}" onchange="change"/>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">电子邮箱：</label>
+        <div class="input-block">
+            <input id="email" class="input" type="email" maxlength="20" placeholder="请输入电子邮箱" headericon="{{require}}" onchange="change" onshare="share"/>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">出生日期：</label>
+        <div class="input-block">
+            <input id="date" class="input" type="date" maxlength="20" placeholder="请选输入生年月" onchange="change" onsearch="search"/>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">身高（cm）：</label>
+        <div class="input-block">
+            <input id="height" class="input" type="number" maxlength="3" placeholder="请选输入身高" onchange="change" menuoptions="{{list}}" onoptionselect="optionselect"/>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">性别：</label>
+        <div class="input-block">
+            <input name="radio" type="radio" checked='true' value="0"></input>
+            <text class="sex">男</text>
+            <input name="radio" type="radio" value="1">女</input>
+            <text class="sex">女</text>
+        </div>
+    </div>
+    <div class="row">
+        <label class="label">爱好：</label>
+        <div class="input-block">
+            <input onchange="checkboxOnChange" checked="false" type="checkbox" value="0"></input>
+            <text class="favorite">游泳</text>
+            <input onchange="checkboxOnChange" checked="false" type="checkbox" value="1"></input>
+            <text class="favorite">健身</text>
+            <input onchange="checkboxOnChange" checked="false" type="checkbox" value="2"></input>
+            <text class="favorite">足球</text>
+            <input onchange="checkboxOnChange" checked="false" type="checkbox" value="3"></input>
+            <text class="favorite">篮球</text>
+        </div>
+    </div>
+
+    <input class="button" type="button" value="提交" onclick="buttonClick" />
+
+</div>
diff --git a/InputApplication/entry/src/main/js/default/pages/index/index.js b/InputApplication/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c99f9aa0fda2fc671407f6071782afe5ec02868f
--- /dev/null
+++ b/InputApplication/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,95 @@
+/*
+ * 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.
+ */
+import prompt from '@system.prompt';
+
+export default {
+  data: {
+    require: '/common/images/require.png',
+    username: '',
+    password: '',
+    password2: '',
+    email: '',
+    date: '',
+    height: '',
+    favorite: [],
+    list: [{icon: '/common/images/require.png', content: '选项0'},
+      {icon: '/common/images/require.png', content: '选项1'}]
+  },
+  // 文本框内容发生变化
+  change(e) {
+    const idName = e.target.id;
+    if (idName === 'username') {
+      this.username = e.value;
+    } else if (idName === 'password') {
+      this.password = e.value;
+    } else if (idName === 'password2') {
+      this.password2 = e.value;
+    } else if (idName === 'email') {
+      this.email = e.value;
+    } else if (idName === 'date') {
+      this.date = e.value;
+    } else if (idName === 'height') {
+      this.height = e.value;
+    }
+  },
+  // 复选框修改
+  checkboxOnChange(e) {
+    const value = e.target.attr.value;
+    if (e.checked) {
+      this.favorite.push(value);
+    } else {
+      this.favorite.splice(this.favorite.findIndex(e => e === value), 1);
+    }
+  },
+  // 提交
+  buttonClick() {
+    if (this.username === '') {
+      this.showPrompt('用户名不能为空');
+    } else if (this.password === '') {
+      this.showPrompt('密码不能为空');
+    } else if (this.password !== '' && this.password !== this.password2) {
+      this.showPrompt('两次密码输入不一致');
+    } else if (this.email === '') {
+      this.showPrompt('邮箱不能为空');
+    } else if (this.favorite.length === 0) {
+      this.showPrompt('请至少选择一个爱好');
+    } else {
+      this.showPrompt('提交成功');
+    }
+  },
+  // 弹框
+  showPrompt(msg) {
+    prompt.showToast({
+      message: msg,
+      duration: 3000
+    });
+  },
+  // 进行文本选择操作后文本选择弹窗会出现翻译按钮
+  translate(e) {
+    this.showPrompt(e.value);
+  },
+  // 进行文本选择操作后文本选择弹窗会出现分享按钮
+  share(e) {
+    this.showPrompt(e.value);
+  },
+  // 进行文本选择操作后文本选择弹窗会出现查找按钮
+  search(e) {
+    this.showPrompt(e.value);
+  },
+  // 用户在文本选择操作后，点击菜单项后触发该回调
+  optionselect(e) {
+    this.showPrompt('选项' + e.index + ': ' + e.value);
+  }
+};
diff --git a/InputApplication/entry/src/main/resources/base/element/string.json b/InputApplication/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..0bae6bd40f7360d5d818998221b199d3ec0f69c0
--- /dev/null
+++ b/InputApplication/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "entry_MainAbility"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/InputApplication/entry/src/main/resources/base/media/icon.png b/InputApplication/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/InputApplication/entry/src/main/resources/base/media/icon.png differ
diff --git a/InputApplication/gradle/wrapper/gradle-wrapper.jar b/InputApplication/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000000000000000000000000000000000000..490fda8577df6c95960ba7077c43220e5bb2c0d9
Binary files /dev/null and b/InputApplication/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/InputApplication/gradle/wrapper/gradle-wrapper.properties b/InputApplication/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000000000000000000000000000000000000..f59159e865d4b59feb1b8c44b001f62fc5d58df4
--- /dev/null
+++ b/InputApplication/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://repo.huaweicloud.com/gradle/gradle-6.3-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/InputApplication/settings.gradle b/InputApplication/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/InputApplication/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/JSCanvasComponet/build.gradle b/JSCanvasComponet/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..770633bb805e37da7ad46e918a6cca758a2b8a84
--- /dev/null
+++ b/JSCanvasComponet/build.gradle
@@ -0,0 +1,33 @@
+// 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 6
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.1.3'
+        classpath 'com.huawei.ohos:decctest:3.0.1.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+}
diff --git a/JSCanvasComponet/entry/build.gradle b/JSCanvasComponet/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..cccb71cae91018743841ab76aeb19c595f4ed847
--- /dev/null
+++ b/JSCanvasComponet/entry/build.gradle
@@ -0,0 +1,23 @@
+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 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+
+    supportSystem "standard"
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/JSCanvasComponet/entry/package.json b/JSCanvasComponet/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/JSCanvasComponet/entry/package.json
@@ -0,0 +1 @@
+{}
diff --git a/JSCanvasComponet/entry/proguard-rules.pro b/JSCanvasComponet/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/JSCanvasComponet/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/JSCanvasComponet/entry/src/main/config.json b/JSCanvasComponet/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..a56132f4f3791a9e6f6b4577361d86a6f155ae2b
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/config.json
@@ -0,0 +1,60 @@
+{
+  "app": {
+    "bundleName": "com.huawei.cookbook",
+    "vendor": "huawei",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.huawei.myapplication",
+    "name": ".MyApplication",
+    "mainAbility": "com.huawei.myapplication.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "name": "com.huawei.myapplication.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/JSCanvasComponet/entry/src/main/js/default/app.js b/JSCanvasComponet/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/js/default/app.js
@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/Wallpaper.png b/JSCanvasComponet/entry/src/main/js/default/common/images/Wallpaper.png
new file mode 100644
index 0000000000000000000000000000000000000000..60d4841a80eb20c63de74306cb7f8350d6a85c48
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/Wallpaper.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/bg-tv.jpg b/JSCanvasComponet/entry/src/main/js/default/common/images/bg-tv.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..86fc07358eea5c1474bc833fca07c6d4d8698a89
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/bg-tv.jpg differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/headset.png b/JSCanvasComponet/entry/src/main/js/default/common/images/headset.png
new file mode 100644
index 0000000000000000000000000000000000000000..af25a93674391a5fca45fa9d9f5eaa71817c0e56
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/headset.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/phone.png b/JSCanvasComponet/entry/src/main/js/default/common/images/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f2405530d318ef13c4c424b155593bb1f05d54c
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/phone.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/start.png b/JSCanvasComponet/entry/src/main/js/default/common/images/start.png
new file mode 100644
index 0000000000000000000000000000000000000000..beea8630c54e2a631a7a5b4a9796e62f4fe3567d
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/start.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/tablet.png b/JSCanvasComponet/entry/src/main/js/default/common/images/tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..2474efb4b298c720e1126fa7e5be2f21a6344d5a
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/tablet.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/thanks.png b/JSCanvasComponet/entry/src/main/js/default/common/images/thanks.png
new file mode 100644
index 0000000000000000000000000000000000000000..048a74bb18c54d43f74a7eed322668c481e8eb76
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/thanks.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/common/images/watch.png b/JSCanvasComponet/entry/src/main/js/default/common/images/watch.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ba3f93e24b1a751b41ff6cc764877015aa4b12e
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/js/default/common/images/watch.png differ
diff --git a/JSCanvasComponet/entry/src/main/js/default/i18n/en-US.json b/JSCanvasComponet/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..08e34eac912bf2651eefc20e26aa479b5e4e7ec2
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/JSCanvasComponet/entry/src/main/js/default/i18n/zh-CN.json b/JSCanvasComponet/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dd53b3a8b808aec9396fa663cb00ef22ba61e0a
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/JSCanvasComponet/entry/src/main/js/default/pages/index/index.css b/JSCanvasComponet/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..c1aaeffea042dc9072e335d204013b9a7dc852c1
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+.container {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+@media screen and (device-type: tv) {
+    .container {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .title {
+        font-size: 100px;
+        color: #FFFFFF;
+    }
+}
+
+.canvasBox {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+}
+
+.canvasBox1 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.simpleAnimation{
+    animation-name: luckyCircle;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-timing-function: ease;
+}
+
+@keyframes luckyCircle {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(1800deg); }
+}
+
diff --git a/JSCanvasComponet/entry/src/main/js/default/pages/index/index.hml b/JSCanvasComponet/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d068596d099a82922c55f0cf2a058bc2cf700d2c
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+<stack class="container">
+    <canvas id="{{id}}" class="canvasBox simpleAnimation"
+            style="transform: rotate({{rotateDegree}});animation-iteration-count: {{infinite}};animation-play-state: {{playState}}; ">
+    </canvas>
+    <canvas id="center" class="canvasBox1" ontouchstart="touchStart" focusable="true">
+    </canvas>
+</stack>
diff --git a/JSCanvasComponet/entry/src/main/js/default/pages/index/index.js b/JSCanvasComponet/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..46382baf0709d67c4ea28b106069763b895b42fd
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,322 @@
+/*
+ * 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.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+  data: {
+    id: 'canvas',
+    img: null,
+    plane: null,
+    ctx: null,
+    screenDensity: 3,
+    centerX: 192 * 1.8,
+    centerY: 350 * 1.8,
+    circle: 360,
+    count: 6,
+    padding: 50,
+    startAngle: 0.0,
+    avgAngle: 0.0,
+    colors: ['#FFA3AE', '#FFDE4E', '#76E2DB', '#FFA3AE', '#FFDE4E', '#76E2DB'], // 颜色集合
+    playState: 'paused',
+    rotateDegree: 0,
+    infinite: 0
+  },
+
+  // 页面显示时触发
+  onShow() {
+    if (this.ctx !== null) {
+      return;
+    }
+    this.ctx = this.$element(this.id).getContext('2d');
+    //        this.ctx.fillStyle = 'rgb(255,255,255)';
+    //        this.ctx.fillRect(0,0,1000,1500);
+    this.avgAngle = this.circle / this.count;
+    this.draw();
+  },
+
+  // 开始画
+  draw() {
+    // 将画布沿X、Y轴平移指定距离
+    this.ctx.translate(this.centerX + 10, this.centerY);
+    // 画外部圆盘的花瓣
+    this.drawFlower();
+    // 画外部圆盘、小圈圈、五角星
+    this.drawOutCircleAndFive();
+    // 画内部扇形抽奖区域
+    this.drawInnerArc();
+    // 画内部扇形区域文字
+    this.drawArcText();
+    // 画内部扇形区域奖品对应的图片
+    this.drawImage();
+    // 画中心圆盘和指针
+    this.drawCenter();
+  },
+
+  // 画外部圆盘的花瓣
+  drawFlower() {
+    let beginAngle = this.startAngle + this.avgAngle;
+    const radius = this.centerX - this.padding;
+    for (let i = 0; i < this.count; i++) {
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.fillStyle = '#F3B468';
+      this.ctx.rotate(beginAngle * Math.PI / 180);
+      this.ctx.arc(-radius / 2, radius / 2, radius / 2, 0, Math.PI * 2);
+      this.ctx.fill();
+
+      this.ctx.beginPath();
+      this.ctx.fillStyle = '#E588B9';
+      this.ctx.arc(-radius / 2, radius / 2, (radius - this.padding) / 2, 0, Math.PI * 2);
+      beginAngle += this.avgAngle;
+      this.ctx.fill();
+      this.ctx.restore();
+    }
+  },
+
+  // 画外部圆盘、小圈圈、五角星
+  drawOutCircleAndFive() {
+    this.ctx.beginPath();
+    this.ctx.fillStyle = '#ED6D56';
+    this.ctx.arc(0, 0, this.centerX - this.padding, 0, Math.PI * 2);
+    this.ctx.fill();
+    let beginAngle = this.startAngle + this.avgAngle;
+    for (let i = 0; i < this.count * 3; i++) {
+      this.ctx.save();
+      if (0 === i % 2) {
+        // 画小圆圈
+        this.ctx.beginPath();
+        this.ctx.rotate(beginAngle * Math.PI / 180);
+        this.ctx.fillStyle = '#FFFFFF';
+        this.ctx.arc(this.centerX - this.padding - this.padding / 2, 0, 5, 0, Math.PI * 2);
+        this.ctx.fill();
+      } else {
+        // 画五角星
+        this.paintFiveStart(beginAngle);
+      }
+      beginAngle = beginAngle + this.avgAngle / 3;
+      this.ctx.restore();
+    }
+  },
+
+  // 画五角星
+  paintFiveStart(beginAngle) {
+    // 画五角星的path
+    this.ctx.beginPath();
+    this.ctx.rotate(beginAngle * Math.PI / 180);
+    this.ctx.fillStyle = '#FFFF00';
+    const points = this.fivePoints(this.centerX - this.padding - this.padding / 2, 0, this.padding / 2);
+    for (let i = 0; i < points.length - 1; i = i + 2) {
+      this.ctx.lineTo(points[i], points[i + 1]);
+    }
+    this.ctx.closePath();
+    this.ctx.fill();
+  },
+
+  // 获取五角星的五个顶点
+  fivePoints(pointXa, pointYa, sideLength) {
+    const radian = 18 * Math.PI / 180;
+    const pointXb = pointXa + sideLength / 2;
+    const num = sideLength * Math.sin(radian);
+    const pointXc = pointXa + num;
+    const pointXd = pointXa - num;
+    const pointXe = pointXa - sideLength / 2;
+    const pointYb = pointYa + Math.sqrt(Math.pow(pointXc - pointXd, 2) - Math.pow(sideLength / 2, 2));
+    const pointYc = pointYa + Math.cos(radian) * sideLength;
+    const pointYd = pointYc;
+    const pointYe = pointYb;
+    const points = [pointXa, pointYa, pointXd, pointYd, pointXb, pointYb,
+      pointXe, pointYe, pointXc, pointYc, pointXa, pointYa];
+    return points;
+  },
+
+  // 画内部扇形抽奖区域
+  drawInnerArc() {
+    const radius = this.centerX - this.padding * 2;
+    for (let i = 0; i < this.count; i++) {
+      this.ctx.beginPath();
+      this.ctx.fillStyle = this.colors[i];
+      this.ctx.arc(0, 0, radius, this.startAngle * Math.PI / 180, (this.startAngle + this.avgAngle) * Math.PI / 180);
+      this.ctx.lineTo(0, 0);
+      this.ctx.fill();
+      this.startAngle += this.avgAngle;
+    }
+  },
+
+  // 画内部扇形区域文字
+  drawArcText() {
+    this.ctx.textAlign = 'center';
+    this.ctx.textBaseLine = 'middle';
+    this.ctx.fillStyle = '#EA86A4';
+    this.ctx.font = this.padding + 'px sans-serif';
+    const textArrays = ['恭喜发财', '华为耳机', '华为手机', '恭喜发财', '华为平板', '华为手表'];
+    for (let i = 0; i < this.count; i++) {
+      this.drawCircularText(textArrays[i], (this.startAngle + this.avgAngle * 3 / 4) * Math.PI / 180, (this.startAngle + this.avgAngle / 4) * Math.PI / 180);
+      this.startAngle += this.avgAngle;
+    }
+  },
+
+  // 绘制圆弧文本
+  drawCircularText(textString, startAngle, endAngle) {
+    const circleText = {
+      x: 0,
+      y: 0,
+      radius: this.centerX - this.padding * 2
+    };
+    // 圆的半径
+    const radius = circleText.radius - circleText.radius / 5;
+    // 每个字母占的弧度
+    const angleDecrement = (startAngle - endAngle) / (textString.length - 1);
+    let angle = parseFloat(startAngle);
+    let index = 0;
+    let character;
+
+    while (index < textString.length) {
+      character = textString.charAt(index);
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.translate(circleText.x + Math.cos(angle) * radius, circleText.y - Math.sin(angle) * radius);
+      this.ctx.rotate(Math.PI / 2 - angle);
+      this.ctx.fillText(character, 0, 0);
+      angle -= angleDecrement;
+      index++;
+      this.ctx.restore();
+    }
+  },
+
+  // 画内部扇形区域奖品对应的图片
+  drawImage() {
+    let beginAngle = this.startAngle + this.avgAngle / 2;
+    const imageSrc = ['common/images/watch.png', 'common/images/tablet.png', 'common/images/thanks.png',
+      'common/images/phone.png', 'common/images/headset.png', 'common/images/thanks.png'];
+    const img = new Image();
+    for (let i = 0; i < this.count; i++) {
+      img.src = imageSrc[i];
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.rotate(beginAngle * Math.PI / 180);
+      this.ctx.drawImage(img, this.centerX / 3, -48 / 2);
+      beginAngle += this.avgAngle;
+      this.ctx.restore();
+    }
+  },
+
+  touchStart(event) {
+    // 获取屏幕上点击的坐标
+    const floatX = event.touches[0].globalX;
+    const floatY = event.touches[0].globalY;
+    const radius = this.centerX / 7 + this.padding / 2;
+    const isScopeX = this.centerX - radius < floatX && this.centerX + radius > floatX;
+    const isScopeY = this.centerY - radius < floatY && this.centerY + radius > floatY;
+    if (isScopeX && isScopeY && this.playState !== 'running') {
+      this.startAnimator();
+    }
+  },
+
+  // 画中心圆盘和指针
+  drawCenter() {
+    const nine = 10;
+    const centerCtx = this.$element('center').getContext('2d');
+    centerCtx.translate(this.centerX, this.centerY);
+
+    // 画大指针
+    centerCtx.beginPath();
+    centerCtx.fillStyle = '#F6C8D8';
+    centerCtx.moveTo(-this.centerX / nine, 0);
+    centerCtx.lineTo(this.centerX / nine, 0);
+    centerCtx.lineTo(0, -this.centerX / 3);
+    centerCtx.closePath();
+    centerCtx.fill();
+
+    // 画内部大圆
+    centerCtx.beginPath();
+    centerCtx.fillStyle = '#F6C8D8';
+    centerCtx.arc(0, 0, this.centerX / 7 + this.padding / 2, 0, Math.PI * 2);
+    centerCtx.fill();
+    // 画内部小圆
+    centerCtx.beginPath();
+    centerCtx.fillStyle = '#FFFFFF';
+    centerCtx.arc(0, 0, this.centerX / 7, 0, Math.PI * 2);
+    centerCtx.fill();
+
+    // 画小指针
+    centerCtx.beginPath();
+    centerCtx.fillStyle = '#FFFFFF';
+    centerCtx.moveTo(-this.centerX / 18, 0);
+    centerCtx.lineTo(this.centerX / 18, 0);
+    centerCtx.lineTo(0, -this.centerX / 3 + this.padding / 2);
+    centerCtx.closePath();
+    centerCtx.fill();
+
+    // 画中心圆弧文字
+    const text = '开始';
+    centerCtx.textAlign = 'center';
+    centerCtx.fillStyle = '#EA86A4';
+    centerCtx.font = this.padding - 10 + 'px sans-serif';
+    centerCtx.beginPath();
+    centerCtx.fillText(text, 0, this.ctx.measureText(text).width / 5);
+  },
+
+  startAnimator() {
+    const angle = 270;
+    const randomAngle = Math.random() * this.circle;
+    this.startAngle = this.circle * 5 - randomAngle + angle;
+    if (this.infinite === 0) {
+      this.infinite = -1; // 永久旋转
+    }
+    setTimeout(() => {
+      this.infinite = 0;
+      this.playState = 'pause';
+      this.showPrizeMessage(randomAngle);
+    }, 4000);
+
+    this.rotateDegree = this.startAngle;
+    this.playState = 'running';
+  },
+
+  showPrizeMessage(randomAngle) {
+    if (randomAngle >= 0 && randomAngle < this.avgAngle) {
+      prompt.showToast({
+        message: '恭喜您中了一块华为手表',
+        duration: 3000
+      });
+    } else if (randomAngle >= this.avgAngle && randomAngle < 2 * this.avgAngle) {
+      prompt.showToast({
+        message: '恭喜您中了一台华为平板',
+        duration: 3000
+      });
+    } else if (randomAngle >= 2 * this.avgAngle && randomAngle < 3 * this.avgAngle) {
+      prompt.showToast({
+        message: 'sorry，您没有中奖',
+        duration: 3000
+      });
+    } else if (randomAngle >= 3 * this.avgAngle && randomAngle < 4 * this.avgAngle) {
+      prompt.showToast({
+        message: '恭喜您中了一部华为手机',
+        duration: 3000
+      });
+    } else if (randomAngle >= 4 * this.avgAngle && randomAngle < 5 * this.avgAngle) {
+      prompt.showToast({
+        message: '恭喜您中了一副华为耳机',
+        duration: 3000
+      });
+    } else if (randomAngle >= 5 * this.avgAngle && randomAngle < 6 * this.avgAngle) {
+      prompt.showToast({
+        message: 'sorry，您没有中奖',
+        duration: 3000
+      });
+    }
+  }
+};
diff --git a/JSCanvasComponet/entry/src/main/resources/base/element/string.json b/JSCanvasComponet/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..0bae6bd40f7360d5d818998221b199d3ec0f69c0
--- /dev/null
+++ b/JSCanvasComponet/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "entry_MainAbility"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/JSCanvasComponet/entry/src/main/resources/base/media/icon.png b/JSCanvasComponet/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/JSCanvasComponet/entry/src/main/resources/base/media/icon.png differ
diff --git a/JSCanvasComponet/gradle/wrapper/gradle-wrapper.jar b/JSCanvasComponet/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000000000000000000000000000000000000..490fda8577df6c95960ba7077c43220e5bb2c0d9
Binary files /dev/null and b/JSCanvasComponet/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/JSCanvasComponet/gradle/wrapper/gradle-wrapper.properties b/JSCanvasComponet/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000000000000000000000000000000000000..f59159e865d4b59feb1b8c44b001f62fc5d58df4
--- /dev/null
+++ b/JSCanvasComponet/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://repo.huaweicloud.com/gradle/gradle-6.3-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/JSCanvasComponet/package.json b/JSCanvasComponet/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/JSCanvasComponet/package.json
@@ -0,0 +1 @@
+{}
diff --git a/JSCanvasComponet/settings.gradle b/JSCanvasComponet/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/JSCanvasComponet/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/JSCleanCalculator/README.md b/JSCleanCalculator/README.md
deleted file mode 100644
index 8fd2d13d99a1edefd7640450d4d76dc82e09c167..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# JSCleanCalculatorBeta
diff --git a/JSCleanCalculator/entry/src/main/java/com/example/cleancalculatorbeta/MainAbility.java b/JSCleanCalculator/entry/src/main/java/com/example/cleancalculatorbeta/MainAbility.java
deleted file mode 100644
index e62ea8da6c74db48f189f2b87eab761954a4629a..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/java/com/example/cleancalculatorbeta/MainAbility.java
+++ /dev/null
@@ -1,16 +0,0 @@
-package com.example.cleancalculatorbeta;
-
-import ohos.ace.ability.AceAbility;
-import ohos.aafwk.content.Intent;
-
-public class MainAbility extends AceAbility {
-    @Override
-    public void onStart(Intent intent) {
-        super.onStart(intent);
-    }
-
-    @Override
-    public void onStop() {
-        super.onStop();
-    }
-}
diff --git a/JSCleanCalculator/entry/src/main/java/com/example/cleancalculatorbeta/MyApplication.java b/JSCleanCalculator/entry/src/main/java/com/example/cleancalculatorbeta/MyApplication.java
deleted file mode 100644
index 47bac3babec4c80fa224371dee082e582d8dbea4..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/java/com/example/cleancalculatorbeta/MyApplication.java
+++ /dev/null
@@ -1,10 +0,0 @@
-package com.example.cleancalculatorbeta;
-
-import ohos.aafwk.ability.AbilityPackage;
-
-public class MyApplication extends AbilityPackage {
-    @Override
-    public void onInitialize() {
-        super.onInitialize();
-    }
-}
diff --git a/JSCleanCalculator/entry/src/main/js/default/common/utils/utils.js b/JSCleanCalculator/entry/src/main/js/default/common/utils/utils.js
deleted file mode 100644
index 3f4694b63b1eeb56731a7251b9fd4476fc2fd669..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/js/default/common/utils/utils.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
-* 加法
-* 计算方式：1.先将所有的小数乘为整数；
-          2.待加减运算执行完之后再除去对应的 m 的值，将其变为小数输出;
-* */
-function accAdd(arg1, arg2) {
-  let r1, r2;
-  try {
-    r1 = arg1.toString().split('.')[1].length;
-  } catch (e) {
-    r1 = 0;
-  }
-  try {
-    r2 = arg2.toString().split('.')[1].length;
-  } catch (e) {
-    r2 = 0;
-  }
-  const m = Math.pow(10, Math.max(r1, r2));
-  return (arg1 * m + arg2 * m) / m;
-}
-
-/**
-* 减法
-**/
-function accSub(arg1, arg2) {
-  return accAdd(arg1, -arg2);
-}
-/**
-* 乘法
-* */
-function accMul(arg1, arg2) {
-  let m = 0; const s1 = arg1.toString(); const s2 = arg2.toString();
-  try {
-    m += s1.split('.')[1].length;
-  } catch (e) {
-    m += 0;
-  }
-  try {
-    m += s2.split('.')[1].length;
-  } catch (e) {
-    m += 0;
-  }
-  return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m);
-}
-
-/**
-* 除法
-* */
-function accDiv(arg1, arg2) {
-  let t1 = 0; let t2 = 0;
-  try {
-    t1 = arg1.toString().split('.')[1].length;
-  } catch (e) {
-    t1 = 0;
-  }
-  try {
-    t2 = arg2.toString().split('.')[1].length;
-  } catch (e) {
-    t2 = 0;
-  }
-  const r1 = Number(arg1.toString().replace('.', ''));
-  const r2 = Number(arg2.toString().replace('.', ''));
-  return r1 / r2 * Math.pow(10, t2 - t1);
-}
-
-export {accAdd, accSub, accMul, accDiv};
-
diff --git a/JSCleanCalculator/entry/src/main/js/default/i18n/zh-CN.json b/JSCleanCalculator/entry/src/main/js/default/i18n/zh-CN.json
deleted file mode 100644
index de6ee5748322f44942c1b003319d8e66c837675f..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/js/default/i18n/zh-CN.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "strings": {
-    "hello": "您好",
-    "world": "世界"
-  }
-}
\ No newline at end of file
diff --git a/JSCleanCalculator/entry/src/main/js/default/pages/index/index.css b/JSCleanCalculator/entry/src/main/js/default/pages/index/index.css
deleted file mode 100644
index 721d71220de65b5a48f3427dc67af7dcf0d08762..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/js/default/pages/index/index.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: #000000;
-    position: relative;
-}
-.result_container {
-    flex-grow:1;
-    display: flex;
-    align-items: flex-end;
-    position: absolute;
-}
-.result_console{
-    width: 100%;
-    padding: 0 8px;
-    height: 40%;
-    text-align: right;
-    color: #FFFFFF;
-    font-size: 40px;
-}
-.calculate_keyboard_container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    padding: 0 8px;
-    flex-wrap: wrap;
-    position: absolute;
-    bottom: 1%;
-}
-.calculate_keyboard_horizontal {
-    width: 100%;
-    display: flex;
-}
-.calculate_keyboard{
-    align-items: center;
-    justify-content: center;
-}
-.calculate_keyboard_text{
-    width: 25%;
-    aspect-ratio:1;
-    border: .2px solid #000;
-    font-size: 20px;
-    font-weight: bold;
-    color: #FFFFFF;
-    text-align: center;
-}
-.calculate_keyboard_text_special{
-    width: 50%;
-    aspect-ratio: 2;
-}
-
-.blackText{
-    color: #000000;
-}
-.whiteText{
-    color: #FFFFFF;
-}
-.orangeBg{
-    background-color: #FFF67105;
-}
-.orangeBg:hover{
-    opacity: .5;
-}
-.blackBg {
-    background-color: #dd322e2e;
-}
-.blackBg:hover {
-    background-color: #666666;
-}
-.greyBg {
-    background-color: #cccccc;
-}
diff --git a/JSCleanCalculator/entry/src/main/js/default/pages/index/index.hml b/JSCleanCalculator/entry/src/main/js/default/pages/index/index.hml
deleted file mode 100644
index f55e096ebfa900696c3f120cbc061fa35286b619..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/js/default/pages/index/index.hml
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="container">
-    <div class="result_container" >
-        <text class="result_console">{{CalDisplay}}</text>
-    </div>
-    <div class="calculate_keyboard_container" >
-        <div class="calculate_keyboard_horizontal">
-            <div class="calculate_keyboard">
-                <text class="calculate_keyboard_text blackText greyBg" @touchstart="touchstartfunc">AC</text>
-                <text class="calculate_keyboard_text blackText greyBg" @touchstart="touchstartfunc">÷</text>
-                <text class="calculate_keyboard_text blackText greyBg" @touchstart="touchstartfunc">%</text>
-                <text class="calculate_keyboard_text whiteText orangeBg" @touchstart="touchstartfunc">CE</text>
-            </div>
-        </div>
-        <div class="calculate_keyboard_horizontal">
-            <div class="calculate_keyboard">
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">7</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">8</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">9</text>
-                <text class="calculate_keyboard_text whiteText orangeBg" @touchstart="touchstartfunc">×</text>
-            </div>
-        </div>
-        <div class="calculate_keyboard_horizontal">
-            <div class="calculate_keyboard" >
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">4</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">5</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">6</text>
-                <text class="calculate_keyboard_text whiteText orangeBg" @touchstart="touchstartfunc">-</text>
-            </div>
-        </div>
-        <div class="calculate_keyboard_horizontal">
-            <div class="calculate_keyboard">
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">1</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">2</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">3</text>
-                <text class="calculate_keyboard_text whiteText orangeBg" @touchstart="touchstartfunc">+</text>
-            </div>
-        </div>
-        <div class="calculate_keyboard_horizontal">
-            <div class="calculate_keyboard">
-                <text class="calculate_keyboard_text calculate_keyboard_text_special whiteText blackBg" @touchstart="touchstartfunc">0</text>
-                <text class="calculate_keyboard_text whiteText blackBg" @touchstart="touchstartfunc">.</text>
-                <text class="calculate_keyboard_text whiteText orangeBg" @touchstart="touchstartfunc">=</text>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/JSCleanCalculator/entry/src/main/js/default/pages/index/index.js b/JSCleanCalculator/entry/src/main/js/default/pages/index/index.js
deleted file mode 100644
index 557c38c8af5ca494e668eacd29411639f91d70be..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/entry/src/main/js/default/pages/index/index.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import * as cal from '../../common/utils/utils.js'
-export default {
-  data: {
-    CalDisplay: '0',
-    pseudoStack: [],
-    isResult: false,
-    maxSize: 14
-  },
-  onInit() {
-  },
-  touchstartfunc(touches) {
-    const currentVal = touches.currentTarget.attr.value;
-    switch (currentVal) {
-      case '1':
-      case '2':
-      case '3':
-      case '4':
-      case '5':
-      case '6':
-      case '7':
-      case '8':
-      case '9':
-      case '0':
-        this.numberhandle(currentVal);
-        break;
-      case '+':
-      case '÷':
-      case '%':
-      case '×':
-      case '-':
-        this.calculatehandle(currentVal);
-        break;
-      case '.':
-        this.pointhandle(currentVal);
-        break;
-      case 'AC':
-      case 'CE':
-        this.deletehandle(currentVal);
-        break;
-      case '=':
-        this.resulthandle();
-        break;
-    }
-  },
-  numberhandle(param) {
-    if (this.CalDisplay === '错误') {
-      this.dataInit()
-    }
-    if (param === '0' && this.CalDisplay === '0') return
-    const temp = this.pseudoStack.pop();
-    if (this.isResult) {
-      this.CalDisplay = param;
-      this.pseudoStack.push(this.CalDisplay);
-      this.isResult = false;
-    } else {
-      if (temp && this.isOperator(temp)) {
-        this.pseudoStack.push(temp);
-        this.CalDisplay = param;
-        this.pseudoStack.push(this.CalDisplay);
-      } else {
-        if (this.CalDisplay.length > this.maxSize){
-          this.pseudoStack.push(temp);
-          return
-        }
-        this.CalDisplay = this.CalDisplay === '0' ? param : this.CalDisplay + param;
-        this.pseudoStack.push(this.CalDisplay);
-      }
-    }
-  },
-  calculatehandle(param) {
-    if (this.CalDisplay === '错误') return
-    const temp = this.pseudoStack.pop();
-    if (temp && this.isOperator(temp)) {
-      this.pseudoStack.push(param);
-    } else {
-      this.pseudoStack.push(temp);
-      this.pseudoStack.push(param);
-    }
-    this.isResult = false;
-  },
-  pointhandle(param) {
-    if (this.CalDisplay === '错误') {
-      this.dataInit()
-    }
-    if (this.isResult) {
-      this.CalDisplay = '0' + param;
-      this.pseudoStack.push(this.CalDisplay);
-      this.isResult = false;
-      return;
-    }
-    if (this.pseudoStack.length === 0) {
-      this.CalDisplay = '0' + param;
-      this.pseudoStack.push(this.CalDisplay);
-    } else {
-      const temp = this.pseudoStack.pop();
-      if (temp && this.isOperator(temp)) {
-        this.pseudoStack.push(temp);
-        this.CalDisplay = '0' + param;
-        this.pseudoStack.push(this.CalDisplay);
-      } else {
-        if (this.CalDisplay.indexOf(param) !== -1) {
-          return;
-        }
-        this.CalDisplay = this.CalDisplay === '0' ? '0' + param : this.CalDisplay + param;
-        this.pseudoStack.push(this.CalDisplay);
-      }
-    }
-  },
-  deletehandle(param) {
-    if (this.isResult || this.CalDisplay === '错误') {
-      this.dataInit();
-    }
-    if (param === 'AC') {
-      this.dataInit();
-    } else {
-      if (this.pseudoStack.length === 0) {
-        return;
-      }
-      const temp = this.pseudoStack.pop();
-      if (temp && this.isOperator(temp)) {
-        return;
-      }
-      const result = temp.substring(0, temp.length - 1);
-      if (result.length === 0) {
-        this.CalDisplay = '0';
-        return;
-      }
-      this.CalDisplay = result;
-      this.pseudoStack.push(result);
-    }
-  },
-  resulthandle() {
-    if (this.CalDisplay === '错误') return
-    const pseudoStackLength = this.pseudoStack.length;
-    if (pseudoStackLength < 3) {
-      return;
-    }
-    const secondParameter = Number(this.pseudoStack.pop());
-    const operator = this.pseudoStack.pop();
-    const firstParameter = Number(this.pseudoStack.pop());
-    let result;
-    switch (operator) {
-      case '+':
-        result = cal.accAdd(firstParameter, secondParameter);
-        break;
-      case '÷':
-        result = cal.accDiv(firstParameter, secondParameter);
-        break;
-      case '%':
-        result = firstParameter % secondParameter;
-        break;
-      case '×':
-        result = cal.accMul(firstParameter, secondParameter);
-        break;
-      case '-':
-        result = cal.accSub(firstParameter, secondParameter);
-        break;
-    }
-    if (Math.abs(result) === Infinity || isNaN(result)) {
-        result = '错误'
-    }
-    if (result.toString().length > 14) {
-        result = Number(result).toExponential([6])
-    }
-    result = result.toString();
-    this.CalDisplay = result;
-    this.pseudoStack.push(result);
-    this.isResult = true;
-  },
-  isNumber(param) {
-    const numEnums = '1234567890';
-    return numEnums.indexOf(param) !== -1;
-  },
-  isOperator(param) {
-    const operator = '+÷%×-';
-    return operator.indexOf(param) !== -1;
-  },
-  dataInit() {
-    this.CalDisplay = '0';
-    this.pseudoStack = [];
-    this.isResult = false;
-  }
-};
diff --git a/JSCleanCalculator/gradle.properties b/JSCleanCalculator/gradle.properties
deleted file mode 100644
index be492496f9a20ac2d980ef4fc30061f4184c1c40..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/gradle.properties
+++ /dev/null
@@ -1,13 +0,0 @@
-# Project-wide Gradle settings.
-# IDE (e.g. DevEco Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-# If the Chinese output is garbled, please configure the following parameter.
-# This function is enabled by default when the DevEco Studio builds the hap/app,if you need disable gradle parallel,you should set org.gradle.parallel false.
-# more information see https://docs.gradle.org/current/userguide/performance.html
-# org.gradle.parallel=false
-# org.gradle.jvmargs=-Dfile.encoding=GBK
\ No newline at end of file
diff --git a/JSCleanCalculator/gradlew b/JSCleanCalculator/gradlew
deleted file mode 100644
index 2fe81a7d95e4f9ad2c9b2a046707d36ceb3980b3..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/gradlew
+++ /dev/null
@@ -1,183 +0,0 @@
-#!/usr/bin/env sh
-
-#
-# Copyright 2015 the original author or authors.
-#
-# 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
-#
-#      https://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.
-#
-
-##############################################################################
-##
-##  Gradle start up script for UN*X
-##
-##############################################################################
-
-# Attempt to set APP_HOME
-# Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
-done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn () {
-    echo "$*"
-}
-
-die () {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
-esac
-
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
-
-# Determine the Java command to use to start the JVM.
-if [ -n "$JAVA_HOME" ] ; then
-    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
-        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
-    else
-        JAVACMD="$JAVA_HOME/bin/java"
-    fi
-    if [ ! -x "$JAVACMD" ] ; then
-        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-else
-    JAVACMD="java"
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-fi
-
-# Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=`expr $i + 1`
-    done
-    case $i in
-        0) set -- ;;
-        1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
-    esac
-fi
-
-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
-}
-APP_ARGS=`save "$@"`
-
-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-
-exec "$JAVACMD" "$@"
diff --git a/JSCleanCalculator/gradlew.bat b/JSCleanCalculator/gradlew.bat
deleted file mode 100644
index 62bd9b9ccefea2b65ae41e5d9a545e2021b90a1d..0000000000000000000000000000000000000000
--- a/JSCleanCalculator/gradlew.bat
+++ /dev/null
@@ -1,103 +0,0 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto init
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega
diff --git a/NewsClientOpenHarmony/.gitignore b/NewsClientOpenHarmony/.gitignore
deleted file mode 100644
index fdc0c4a65db238be4186f16e1e0911b1d61fbf31..0000000000000000000000000000000000000000
--- a/NewsClientOpenHarmony/.gitignore
+++ /dev/null
@@ -1,16 +0,0 @@
-*.iml
-.gradle
-/local.properties
-/.idea/caches
-/.idea/libraries
-/.idea/modules.xml
-/.idea/workspace.xml
-/.idea/navEditor.xml
-/.idea/assetWizardSettings.xml
-.DS_Store
-/build
-/captures
-.externalNativeBuild
-/entry/.preview
-.cxx
-/node_modules
diff --git a/NewsClientOpenHarmony/README.md b/NewsClientOpenHarmony/README.md
index 9d91a7b2baac914c9af86ab2d3a00c9a784dbc82..f9328b762eb74b7cf4ed9d6f681117d607ced307 100644
--- a/NewsClientOpenHarmony/README.md
+++ b/NewsClientOpenHarmony/README.md
@@ -1,3 +1,13 @@
 # NewsDemoOpenHarmony
 
-NewsDemoOpenHarmony
\ No newline at end of file
+NewsDemoOpenHarmony
+
+本篇Codelab是在HarmonyOS 分布式新闻客户端（JAVA）的设计基础上，用JS编程语言重写了一个布局一模一样的新闻客户端，并对OpenHarmony开发板进行了适配。
+
+Java版本的新闻客户端教会了大家如何使用Java UI中的常用控件、布局编写、页面跳转以及FA的跨设备协同。
+
+本篇Codelab将使用JS语言进行开发，做一个功能、布局和Java版本完全一样的分布式新闻客户端，大家可以通过这两篇Codelab学习两种编程语言的编码风格和实现区别。
+
+案例最终效果如下图所示：
+
+![](screenshots/device/NewsClientDemo.PNG)
\ No newline at end of file
diff --git a/NewsClientOpenHarmony/build.gradle b/NewsClientOpenHarmony/build.gradle
index 8799f5699f310d9eae610495af273881cd62fc35..6d094a769b4734bd4c9bd3fdf84a0d7bcd0054b5 100644
--- a/NewsClientOpenHarmony/build.gradle
+++ b/NewsClientOpenHarmony/build.gradle
@@ -3,17 +3,6 @@ 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 {
-    signingConfigs {
-        debug {
-            storeFile file('D:\\OpenHarmony\\openHos\\openhos.p12')
-            storePassword '0000001878FE3D655ADCE56B5F8BEB1E5381269D2682B4FEEF6C1C12BBE4A517743D0CCF94B4BE9D'
-            keyAlias = 'hw'
-            keyPassword '00000018E7EE50B0F8E10923DDEE2CF8C32C9BEBCA59F6C89B01B81C796F03F1AC9B147C649321A2'
-            signAlg = 'SHA256withECDSA'
-            profile file('D:\\OpenHarmony\\openHos\\openHos.p7b')
-            certpath file('D:\\OpenHarmony\\openHos\\openHos.cer')
-        }
-    }
     compileSdkVersion 6
 }
 
diff --git a/NewsClientOpenHarmony/entry/src/main/config.json b/NewsClientOpenHarmony/entry/src/main/config.json
index 4e873c33132ac3e04e99c1cb5bde9181a70052d7..203c03346e40ab369a0e8ea50c1aeda450e4ec24 100644
--- a/NewsClientOpenHarmony/entry/src/main/config.json
+++ b/NewsClientOpenHarmony/entry/src/main/config.json
@@ -56,12 +56,6 @@
           "autoDesignWidth": false
         }
       }
-    ],
-    "distroFilter": {
-      "apiVersion": {
-        "policy": "include",
-        "value": []
-      }
-    }
+    ]
   }
 }
\ No newline at end of file
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/i18n/en-US.json b/NewsClientOpenHarmony/entry/src/main/js/default/i18n/en-US.json
index d808fd090e5e46bf11894d14e4bcb17cffbe45fd..02536fd164b9f0b11aab483ab81ed82ae4ae9c59 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/i18n/en-US.json
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/i18n/en-US.json
@@ -4,7 +4,8 @@
     "world": "Hello",
     "page": "Second Page",
     "next": "Next Page",
-    "back": "Back"
+    "back": "Back",
+    "localhost": "This device"
   },
   "Files": {
   }
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json b/NewsClientOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json
index e689085f9498b52dc05fe973a4c0e68d8539a7ef..d80a8bb61500ee734a54b5c4002f15ed38654308 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json
@@ -4,7 +4,8 @@
     "world": "世界",
     "page": "第二页",
     "next": "下一页",
-    "back": "返回"
+    "back": "返回",
+    "localhost": "本机"
   },
   "Files": {
   }
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.css b/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.css
index a1467d665a06c8c681a547de0c3b7c860d2500fa..7df9aeb6bcfbe2fea7bde7b28a5755580bc8a80b 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.css
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.css
@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 .container {
     padding: 20px;
     margin-bottom: 160px;
@@ -52,58 +67,51 @@
 }
 
 
-.select-device-dialog {
-    width: 90%;
-    height: 33%;
+.dialog-main {
+    width: 500px;
 }
 
-.select-device-wrapper {
-    margin: 5%;
-    width: 90%;
-    height: 90%;
+.dialog-div {
     flex-direction: column;
+    align-items: center;
 }
 
-.select-device-title {
-    width: 100%;
-    height: 20%;
-    text-align: left;
-    font-size: 40px;
+.dialog_title_text {
+    width: 434px;
+    height: 80px;
+    font-size: 32px;
+    font-weight: 600;
 }
 
-.select-device-list {
-    width: 100%;
-    height: 60%;
-    text-align: left;
-    font-size: 30px;
+.inner-btn {
+    width: 400px;
+    height: 120px;
+    justify-content: space-around;
+    align-items: center;
 }
 
-.select-device-item {
+.dialog_cancel_button {
     width: 100%;
-    height: 33%;
-}
-
-.select-device-item-left {
-    width: 90%;
-    height: 100%;
-    text-align: left;
     font-size: 32px;
 }
 
-.select-device-item-right {
-    width: 10%;
-    height: 100%;
+.dialog_device_list {
+    width: 434px;
+    max-height: 150px;
 }
 
-.choose-ok-or-not {
-    height: 20%;
-    width: 100%;
+.device_list_item {
+    width: 434px;
+    height: 80px;
+    flex-direction: row;
+    align-items: center;
 }
 
-.select-device-btn {
-    text-align: center;
-    color: #0000ff;
-    font-size: 32px;
-    width: 100%;
+.device_item_radio {
 }
 
+.device_item_title {
+    width: 80%;
+    height: 80px;
+    text-align: start;
+}
\ No newline at end of file
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.hml b/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.hml
index 929f7d322b76ff499e80006966e02f3697d2f6eb..d0992c27de16cf83cc5163fe665c179a90149f50 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.hml
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.hml
@@ -1,3 +1,18 @@
+<!--
+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="container">
 
     <text class="text-title">{{ title }}</text>
@@ -12,25 +27,24 @@
         <image class="image-bottom" src="/common/images/icon_message.png"></image>
         <image class="image-bottom" src="/common/images/icon_star.png"></image>
         <image class="image-bottom" src="/common/images/icon_good.png"></image>
-        <image class="image-bottom" src="/common/images/icon_share.png" onclick="toShare"></image>
+        <image class="image-bottom" src="/common/images/icon_share.png" onclick="onContinueAbilityClick"></image>
     </div>
 
 
-    <dialog id="showDialog" class="select-device-dialog">
-        <div class="select-device-wrapper">
-            <text class="select-device-title">选择设备</text>
-            <list class="select-device-list">
-                <list-item class="select-device-item" for="{{ deviceList }}" id="list">
-                    <text class="select-device-item-left">{{ $item.deviceName }}
-                    </text>
-                    <input class="select-device-item-right" type="checkbox" name="Device" value="{{$idx}}"
-                           @change="selectDevice({{$idx}})" checked="{{$item.checked}}">
-                    </input>
+    <dialog id="continueAbilityDialog" class="dialog-main" oncancel="cancelDialog">
+        <div class="dialog-div">
+            <text class="dialog_title_text">选择设备</text>
+            <list class="dialog_device_list" divider="true">
+                <list-item for="{{ deviceList }}" class="device_list_item">
+                    <label class="device_item_title" target="{{ $item.id }}">{{ $item.name }}</label>
+                    <input class="device_item_radio" type="radio" checked="{{ $item.id === 'localhost' }}"
+                           id="{{ $item.id }}"
+                           name="radioSample" value="{{ $item.id }}"
+                           onchange="onRadioChange({{ $item.id }})"></input>
                 </list-item>
             </list>
-            <div class="choose-ok-or-not">
-                <text class="select-device-btn" @click="chooseComform">确定</text>
-                <text class="select-device-btn" @click="chooseCancel">取消</text>
+            <div class="inner-btn">
+                <button class="dialog_cancel_button" type="text" value="取消" onclick="onDismissDialogClicked"></button>
             </div>
         </div>
     </dialog>
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.js b/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.js
index 9c68d6b6077bc6ebb089970d5afab6b775ca636a..b262bdf0c17b25440855e81b9cc400a8ed75441f 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.js
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/pages/detail/detail.js
@@ -1,5 +1,25 @@
-import prompt from '@system.prompt';
+/*
+ * 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.
+ */
+
+import app from '@system.app'
+
 import featureAbility from '@ohos.ability.featureAbility';
+import RemoteDeviceModel from '../../../model/RemoteDeviceModel.js';
+
+const REMOTE_ABILITY_STARTED = 'remoteAbilityStarted';
+var DEVICE_LIST_LOCALHOST;
 
 export default {
     data: {
@@ -10,72 +30,131 @@ export default {
         likes: "",
         content: "",
         deviceList: [],
+        remoteDeviceModel: new RemoteDeviceModel(),
+    },
+    onInit() {
+        console.info('onInit begin');
+        DEVICE_LIST_LOCALHOST = {
+            name: this.$t('strings.localhost'),
+            id: 'localhost',
+        };
+        this.deviceList = [DEVICE_LIST_LOCALHOST];
+        console.info('onInit end');
     },
-    async toShare() {
 
-//        prompt.showToast({
-//            message: "开启分布式能力"
-//        });
+    onContinueAbilityClick() {
+        console.info('onContinueAbilityClick begin');
+        let self = this;
+        this.remoteDeviceModel.registerDeviceListCallback(() => {
+            console.info('registerDeviceListCallback, callback entered');
+            var list = [];
+            list[0] = DEVICE_LIST_LOCALHOST;
+            var deviceList;
+            if (self.remoteDeviceModel.discoverList.length > 0) {
+                deviceList = self.remoteDeviceModel.discoverList;
+            } else {
+                deviceList = self.remoteDeviceModel.deviceList;
+            }
+            console.info('on remote device updated, count=' + deviceList.length);
+            for (var i = 0; i < deviceList.length; i++) {
+                console.info('device ' + i + '/' + deviceList.length + ' deviceId='
+                + deviceList[i].deviceId + ' deviceName=' + deviceList[i].deviceName + ' deviceType='
+                + deviceList[i].deviceType);
+                list[i + 1] = {
+                    name: deviceList[i].deviceName,
+                    id: deviceList[i].deviceId,
+                };
+            }
+            self.deviceList = list;
+        });
+        this.$element('continueAbilityDialog').show();
+        this.isDialogShowing = true;
+        console.info('onContinueAbilityClick end');
+    },
 
-//
-//        var ret = await FeatureAbility.getDeviceList(0);
+    startAbilityContinuation(deviceId, deviceName) {
+        this.$element('continueAbilityDialog').close();
 
-        this.deviceList = new Array();
-        this.deviceList[0] = {
-            deviceName: "本机",
-            networkId: "0",
-            checked: false
-        }
-//        if (ret.code === 0) {
-//            for (var i = 0; i < ret.data.length; i++) {
-//                console.info('[DeviceLog] getDeviceList ' + JSON.stringify(ret.data[i]));
-//                this.deviceList[i] = {
-//                    deviceName: ret.data[i].deviceName,
-//                    networkId: ret.data[i].networkId,
-//                    checked: false
-//                }
-//            }
-//        }
-        this.$element('showDialog').show();
-    },
-    chooseCancel() {
-        console.log("[DeviceLog] chooseCancel")
-        this.$element('showDialog').close();
+        console.info('featureAbility.startAbility deviceId=' + deviceId
+        + ' deviceName=' + deviceName);
+
+        var params;
+        params = {
+            remote: "come_from_remote",
+            title: this.title,
+            type: this.type,
+            imgUrl: this.imgUrl,
+            reads: this.reads,
+            likes: this.likes,
+            content: this.content,
+        };
+
+        var wantValue = {
+            bundleName: 'com.huawei.newsdemo',
+            abilityName: 'com.huawei.newsdemo.MainAbility',
+            url: "pages/detail/detail",
+            deviceId: deviceId,
+            parameters: params
+        };
+
+        featureAbility.startAbility({
+            want: wantValue
+        }).then((data) => {
+            console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+        });
+        console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+        console.info('featureAbility.startAbility end');
     },
-    async chooseComform() {
-        this.$element('showDialog').close();
+    onRadioChange(inputValue, e) {
+        console.info('onRadioChange ' + inputValue + ', ' + e.value);
+        if (inputValue === e.value) {
+            if (e.value === 'localhost') {
+                this.$element('continueAbilityDialog').close();
+                return;
+            }
+            if (this.remoteDeviceModel.discoverList.length > 0) {
+                console.info('continue to unauthed device');
+                var name = null;
+                for (var i = 0; i < this.remoteDeviceModel.discoverList.length; i++) {
+                    if (this.remoteDeviceModel.discoverList[i].deviceId === e.value) {
+                        name = this.remoteDeviceModel.discoverList[i].deviceName;
+                        break;
+                    }
+                }
+                if (name == null) {
+                    console.error('onRadioChange failed, can not get name from discoverList');
+                    return;
+                }
+                console.info('onRadioChange name=' + name);
 
-//        for (var i = 0; i < this.deviceList.length; i++) {
-//            if (this.deviceList[i].checked) {
-//
-//                let actionData = {
-//                    title: this.title,
-//                    type: this.type,
-//                    imgUrl: this.imgUrl,
-//                    reads: this.reads,
-//                    likes: this.likes,
-//                    content: this.content
-//                };
-//
-//                let target = {
-//                    bundleName: "com.huawei.codedemo",
-//                    abilityName: "com.huawei.codedemo.MainAbility",
-//                    url: "pages/detail/detail",
-//                    networkId: this.deviceList[i].networkId,
-//                    data: actionData
-//                };
-//
-//                let result = await FeatureAbility.startAbility(target);
-//                let ret = JSON.parse(result);
-//                if (ret.code == 0) {
-//                    console.log('success');
-//                } else {
-//                    console.log('cannot start browing service, reason: ' + ret.data);
-//                }
-//            }
-//        }
+                let self = this;
+                this.remoteDeviceModel.authDevice(e.value, () => {
+                    console.info('auth and online finished');
+                    for (i = 0; i < self.remoteDeviceModel.deviceList.length; i++) {
+                        if (self.remoteDeviceModel.deviceList[i].deviceName === name) {
+                            this.startAbilityContinuation(self.remoteDeviceModel.deviceList[i].deviceId, self.remoteDeviceModel.deviceList[i].deviceName);
+                        }
+                    }
+                });
+            } else {
+                console.info('continue to authed device');
+                for (i = 0; i < this.remoteDeviceModel.deviceList.length; i++) {
+                    if (this.remoteDeviceModel.deviceList[i].deviceId === e.value) {
+                        this.startAbilityContinuation(this.remoteDeviceModel.deviceList[i].deviceId, this.remoteDeviceModel.deviceList[i].deviceName);
+                    }
+                }
+            }
+        }
+    },
+    onDismissDialogClicked(e) {
+        this.dismissDialog();
     },
-    selectDevice(index, e) {
-        this.deviceList[index].checked = e.checked
+    touchMove(e) {
+        if (e.direction == "right") {
+            this.appExit();
+        }
     },
+    appExit() {
+        app.terminate()
+    }
 }
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.css b/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.css
index 8dad16f736c991268c28533aa5338ba5137ab80b..41db1be1fdd843c2b289f3c44f8b2547554aa574 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.css
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.css
@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 .container {
     flex-direction: column;
     justify-content: flex-start;
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.hml b/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.hml
index 24390995b8fa00a6d87568b941c35e2e8c59afa4..75c5dcf10ce66c2e64734a408f381e49df9e5898 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.hml
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,18 @@
+<!--
+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="container">
     <tabs index="0" vertical="false" onchange="changeNewsType">
         <tab-bar class="tab-bar" mode="scrollable">
diff --git a/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.js b/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.js
index 3c36976eeb60c2b54477663d4076dd2c4a26a5c8..40d90e542a3a244af192c843c1e992a8f4a9126f 100644
--- a/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.js
+++ b/NewsClientOpenHarmony/entry/src/main/js/default/pages/index/index.js
@@ -1,10 +1,65 @@
+/*
+ * 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.
+ */
+
 import {titles, newsData} from '../../../default/common/data/data.js';
 import router from '@system.router';
+import prompt from '@system.prompt';
+import featureAbility from '@ohos.ability.featureAbility';
+import RemoteDeviceModel from '../../../model/RemoteDeviceModel.js';
 
 export default {
     data: {
+        title: "",
+        type: "",
+        imgUrl: "",
+        reads: "",
+        likes: "",
+        content: "",
         titleList: titles,
-        newsList: newsData
+        newsList: newsData,
+        isJump: false,
+    },
+    onReady() {
+        this.restoreFromWant();
+    },
+    restoreFromWant() {
+        featureAbility.getWant((error, want) => {
+            console.info('MusicPlayer[IndexPage] featureAbility.getWant=' + JSON.stringify(want));
+            var status = want.parameters;
+            this.title = status.title
+            this.type = status.type,
+            this.imgUrl = status.imgUrl,
+            this.reads = status.reads,
+            this.likes = status.likes,
+            this.content = status.content
+
+            if (status.remote == "come_from_remote" && !this.isJump) {
+                this.isJump = true
+                router.push({
+                    uri: "pages/detail/detail",
+                    params: {
+                        "title": this.title,
+                        "type": this.type,
+                        "imgUrl": this.imgUrl,
+                        "reads": this.reads,
+                        "likes": this.likes,
+                        "content": this.content,
+                    }
+                });
+            }
+        });
     },
     changeNewsType: function (e) {
         var type = titles[e.index].name;
@@ -33,6 +88,5 @@ export default {
                 "content": news.content,
             }
         });
-
     }
 }
diff --git a/NewsClientOpenHarmony/entry/src/main/js/model/RemoteDeviceModel.js b/NewsClientOpenHarmony/entry/src/main/js/model/RemoteDeviceModel.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e91a1a1e68e38ca7b909546aae92b3c78361b37
--- /dev/null
+++ b/NewsClientOpenHarmony/entry/src/main/js/model/RemoteDeviceModel.js
@@ -0,0 +1,184 @@
+/*
+ * 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.
+ */
+
+import deviceManager from '@ohos.distributedHardware.deviceManager';
+
+var SUBSCRIBE_ID = 100;
+
+export default class RemoteDeviceModel {
+    deviceList = [];
+    discoverList = [];
+    callback;
+    authCallback = null;
+    #deviceManager;
+
+    constructor() {
+    }
+
+    registerDeviceListCallback(callback) {
+        if (typeof (this.#deviceManager) === 'undefined') {
+            console.log('MusicPlayer[RemoteDeviceModel] deviceManager.createDeviceManager begin');
+            let self = this;
+            deviceManager.createDeviceManager('com.ohos.distributedmusicplayer', (error, value) => {
+                if (error) {
+                    console.error('createDeviceManager failed.');
+                    return;
+                }
+                self.#deviceManager = value;
+                self.registerDeviceListCallback_(callback);
+                console.log('MusicPlayer[RemoteDeviceModel] createDeviceManager callback returned, error=' + error + ' value=' + value);
+            });
+            console.log('MusicPlayer[RemoteDeviceModel] deviceManager.createDeviceManager end');
+        } else {
+            this.registerDeviceListCallback_(callback);
+        }
+    }
+
+    registerDeviceListCallback_(callback) {
+        console.info('MusicPlayer[RemoteDeviceModel] registerDeviceListCallback');
+        this.callback = callback;
+        if (this.#deviceManager == undefined) {
+            console.error('MusicPlayer[RemoteDeviceModel] deviceManager has not initialized');
+            this.callback();
+            return;
+        }
+
+        console.info('MusicPlayer[RemoteDeviceModel] getTrustedDeviceListSync begin');
+        var list = this.#deviceManager.getTrustedDeviceListSync();
+        console.info('MusicPlayer[RemoteDeviceModel] getTrustedDeviceListSync end, deviceList=' + JSON.stringify(list));
+        if (typeof (list) != 'undefined' && typeof (list.length) != 'undefined') {
+            this.deviceList = list;
+        }
+        this.callback();
+        console.info('MusicPlayer[RemoteDeviceModel] callback finished');
+
+        let self = this;
+        this.#deviceManager.on('deviceStateChange', (data) => {
+            console.info('MusicPlayer[RemoteDeviceModel] deviceStateChange data=' + JSON.stringify(data));
+            switch (data.action) {
+                case 0:
+                self.deviceList[self.deviceList.length] = data.device;
+                console.info('MusicPlayer[RemoteDeviceModel] online, updated device list=' + JSON.stringify(self.deviceList));
+                self.callback();
+                if (self.authCallback != null) {
+                    self.authCallback();
+                    self.authCallback = null;
+                }
+                break;
+                case 2:
+                if (self.deviceList.length > 0) {
+                    for (var i = 0; i < self.deviceList.length; i++) {
+                        if (self.deviceList[i].deviceId === data.device.deviceId) {
+                            self.deviceList[i] = data.device;
+                            break;
+                        }
+                    }
+                }
+                console.info('MusicPlayer[RemoteDeviceModel] change, updated device list=' + JSON.stringify(self.deviceList));
+                self.callback();
+                break;
+                case 1:
+                if (self.deviceList.length > 0) {
+                    var list = [];
+                    for (var i = 0; i < self.deviceList.length; i++) {
+                        if (self.deviceList[i].deviceId != data.device.deviceId) {
+                            list[i] = data.device;
+                        }
+                    }
+                    self.deviceList = list;
+                }
+                console.info('MusicPlayer[RemoteDeviceModel] offline, updated device list=' + JSON.stringify(data.device));
+                self.callback();
+                break;
+                default:
+                    break;
+            }
+        });
+        this.#deviceManager.on('deviceFound', (data) => {
+            console.info('MusicPlayer[RemoteDeviceModel] deviceFound data=' + JSON.stringify(data));
+            console.info('MusicPlayer[RemoteDeviceModel] deviceFound self.deviceList=' + self.deviceList);
+            console.info('MusicPlayer[RemoteDeviceModel] deviceFound self.deviceList.length=' + self.deviceList.length);
+            for (var i = 0; i < self.discoverList.length; i++) {
+                if (self.discoverList[i].deviceId === data.device.deviceId) {
+                    console.info('MusicPlayer[RemoteDeviceModel] device founded, ignored');
+                    return;
+                }
+            }
+            self.discoverList[self.discoverList.length] = data.device;
+            self.callback();
+        });
+        this.#deviceManager.on('discoverFail', (data) => {
+            console.info('MusicPlayer[RemoteDeviceModel] discoverFail data=' + JSON.stringify(data));
+        });
+        this.#deviceManager.on('serviceDie', () => {
+            console.error('MusicPlayer[RemoteDeviceModel] serviceDie');
+        });
+
+        SUBSCRIBE_ID = Math.floor(65536 * Math.random());
+        var info = {
+            subscribeId: SUBSCRIBE_ID,
+            mode: 0xAA,
+            medium: 2,
+            freq: 2,
+            isSameAccount: false,
+            isWakeRemote: true,
+            capability: 0
+        };
+        console.info('MusicPlayer[RemoteDeviceModel] startDeviceDiscovery ' + SUBSCRIBE_ID);
+        this.#deviceManager.startDeviceDiscovery(info);
+    }
+
+    authDevice(deviceId, callback) {
+        console.info('MusicPlayer[RemoteDeviceModel] authDevice ' + deviceId);
+        for (var i = 0; i < this.discoverList.length; i++) {
+            if (this.discoverList[i].deviceId === deviceId) {
+                console.info('MusicPlayer[RemoteDeviceModel] device founded, ignored');
+                let extraInfo = {
+                    "targetPkgName": 'com.ohos.distributedmusicplayer',
+                    "appName": 'Music',
+                    "appDescription": 'Music player application',
+                    "business": '0'
+                };
+                let authParam = {
+                    "authType": 1,
+                    "appIcon": '',
+                    "appThumbnail": '',
+                    "extraInfo": extraInfo
+                };
+                console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice ' + JSON.stringify(this.discoverList[i]));
+                let self = this;
+                this.#deviceManager.authenticateDevice(this.discoverList[i], authParam, (err, data) => {
+                    if (err) {
+                        console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice failed, err=' + JSON.stringify(err));
+                        self.authCallback = null;
+                    } else {
+                        console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice succeed, data=' + JSON.stringify(data));
+                        self.authCallback = callback;
+                    }
+                });
+            }
+        }
+    }
+
+    unregisterDeviceListCallback() {
+        console.info('MusicPlayer[RemoteDeviceModel] stopDeviceDiscovery ' + SUBSCRIBE_ID);
+        this.#deviceManager.stopDeviceDiscovery(SUBSCRIBE_ID);
+        this.#deviceManager.off('deviceStateChange');
+        this.#deviceManager.off('deviceFound');
+        this.#deviceManager.off('discoverFail');
+        this.#deviceManager.off('serviceDie');
+        this.deviceList = [];
+    }
+}
\ No newline at end of file
diff --git a/NewsClientOpenHarmony/gradle.properties b/NewsClientOpenHarmony/gradle.properties
deleted file mode 100644
index be492496f9a20ac2d980ef4fc30061f4184c1c40..0000000000000000000000000000000000000000
--- a/NewsClientOpenHarmony/gradle.properties
+++ /dev/null
@@ -1,13 +0,0 @@
-# Project-wide Gradle settings.
-# IDE (e.g. DevEco Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-# If the Chinese output is garbled, please configure the following parameter.
-# This function is enabled by default when the DevEco Studio builds the hap/app,if you need disable gradle parallel,you should set org.gradle.parallel false.
-# more information see https://docs.gradle.org/current/userguide/performance.html
-# org.gradle.parallel=false
-# org.gradle.jvmargs=-Dfile.encoding=GBK
\ No newline at end of file
diff --git a/NewsClientOpenHarmony/gradlew b/NewsClientOpenHarmony/gradlew
deleted file mode 100644
index 2fe81a7d95e4f9ad2c9b2a046707d36ceb3980b3..0000000000000000000000000000000000000000
--- a/NewsClientOpenHarmony/gradlew
+++ /dev/null
@@ -1,183 +0,0 @@
-#!/usr/bin/env sh
-
-#
-# Copyright 2015 the original author or authors.
-#
-# 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
-#
-#      https://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.
-#
-
-##############################################################################
-##
-##  Gradle start up script for UN*X
-##
-##############################################################################
-
-# Attempt to set APP_HOME
-# Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
-done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn () {
-    echo "$*"
-}
-
-die () {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
-esac
-
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
-
-# Determine the Java command to use to start the JVM.
-if [ -n "$JAVA_HOME" ] ; then
-    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
-        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
-    else
-        JAVACMD="$JAVA_HOME/bin/java"
-    fi
-    if [ ! -x "$JAVACMD" ] ; then
-        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-else
-    JAVACMD="java"
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-fi
-
-# Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=`expr $i + 1`
-    done
-    case $i in
-        0) set -- ;;
-        1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
-    esac
-fi
-
-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
-}
-APP_ARGS=`save "$@"`
-
-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-
-exec "$JAVACMD" "$@"
diff --git a/NewsClientOpenHarmony/gradlew.bat b/NewsClientOpenHarmony/gradlew.bat
deleted file mode 100644
index 62bd9b9ccefea2b65ae41e5d9a545e2021b90a1d..0000000000000000000000000000000000000000
--- a/NewsClientOpenHarmony/gradlew.bat
+++ /dev/null
@@ -1,103 +0,0 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto init
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega
diff --git a/NewsClientOpenHarmony/screenshots/device/NewsClientDemo.PNG b/NewsClientOpenHarmony/screenshots/device/NewsClientDemo.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..4925c3f91ddabf825d50cc5f5a1f65e2f208ed84
Binary files /dev/null and b/NewsClientOpenHarmony/screenshots/device/NewsClientDemo.PNG differ
diff --git a/NewsDemo/README.md b/NewsDemo/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..f9328b762eb74b7cf4ed9d6f681117d607ced307
--- /dev/null
+++ b/NewsDemo/README.md
@@ -0,0 +1,13 @@
+# NewsDemoOpenHarmony
+
+NewsDemoOpenHarmony
+
+本篇Codelab是在HarmonyOS 分布式新闻客户端（JAVA）的设计基础上，用JS编程语言重写了一个布局一模一样的新闻客户端，并对OpenHarmony开发板进行了适配。
+
+Java版本的新闻客户端教会了大家如何使用Java UI中的常用控件、布局编写、页面跳转以及FA的跨设备协同。
+
+本篇Codelab将使用JS语言进行开发，做一个功能、布局和Java版本完全一样的分布式新闻客户端，大家可以通过这两篇Codelab学习两种编程语言的编码风格和实现区别。
+
+案例最终效果如下图所示：
+
+![](screenshots/device/NewsClientDemo.PNG)
\ No newline at end of file
diff --git a/NewsDemo/build.gradle b/NewsDemo/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..0c34fbc0a390a81fdd7c4c98ba1fd97bef4a7fe3
--- /dev/null
+++ b/NewsDemo/build.gradle
@@ -0,0 +1,34 @@
+// 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
+    supportSystem "standard"
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.3.1'
+        classpath 'com.huawei.ohos:decctest:1.2.6.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+}
diff --git a/NewsDemo/entry/.gitignore b/NewsDemo/entry/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..7d5b7a94f4dcf381f03ff21f28f8a2494b58023f
--- /dev/null
+++ b/NewsDemo/entry/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/app.js b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..f03b98f424deab9e9412e6c41863d1d90c60dfb6
--- /dev/null
+++ b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/app.js
@@ -0,0 +1,128 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\preset-env&plugins[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!./lib/manifest-loader.js?path=D:\\MY\\Hi3516D\\CodeLab\\20210929\\NewsDemo\\entry\\src\\main\\js\\MainAbility\\app.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/app.js":
+/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\preset-env&plugins[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!./lib/manifest-loader.js?path=D:\MY\Hi3516D\CodeLab\20210929\NewsDemo\entry\src\main\js\MainAbility\app.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/app.js ***!
+  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = function(module, exports, $app_require$){"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  onCreate: function onCreate() {
+    console.info("Application onCreate");
+  },
+  onDestroy: function onDestroy() {
+    console.info("Application onDestroy");
+  }
+};
+exports["default"] = _default;
+;
+(exports["default"] || module.exports).manifest = __webpack_require__(/*! !!../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/manifest-plugin.js!../../../../.preview/jsManifest/MainAbility/manifest.json */ "./lib/manifest-plugin.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/.preview/jsManifest/MainAbility/manifest.json");
+
+function requireModule(moduleName) {
+  const systemList = ['system.router', 'system.app', 'system.prompt', 'system.configuration',
+  'system.image', 'system.device', 'system.mediaquery', 'ohos.animator', 'system.grid', 'system.resource']
+  var target = ''
+  if (systemList.includes(moduleName.replace('@', ''))) {
+    target = $app_require$('@app-module/' + moduleName.substring(1));
+    return target;
+  }
+  var shortName = moduleName.replace(/@[^.]+.([^.]+)/, '$1');
+  if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
+    target = ohosplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  if (typeof systemplugin !== 'undefined') {
+    target = systemplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  target = requireNapi(shortName);
+  return target;
+}
+}
+/* generated by ace-loader */
+
+
+/***/ }),
+
+/***/ "./lib/manifest-plugin.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/.preview/jsManifest/MainAbility/manifest.json":
+/*!***********************************************************************************************************************************!*\
+  !*** ./lib/manifest-plugin.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/.preview/jsManifest/MainAbility/manifest.json ***!
+  \***********************************************************************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = JSON.parse('{"appID":"com.huawei.newsdemo","appName":"$string:entry_MainAbility","versionName":"1.0.0","versionCode":1000000,"minPlatformVersion":7,"pages":["pages/index/index","pages/second/second"],"deviceType":["phone"],"window":{"autoDesignWidth":false,"designWidth":720}}');
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+/*!*************************************************************************************************!*\
+  !*** ../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/app.js?entry ***!
+  \*************************************************************************************************/
+var $app_script$ = __webpack_require__(/*! !!../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/script.js!../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/node_modules/babel-loader?presets[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\preset-env&plugins[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\plugin-transform-modules-commonjs&comments=false!../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/resource-reference-script.js!../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/manifest-loader.js?path=D:\MY\Hi3516D\CodeLab\20210929\NewsDemo\entry\src\main\js\MainAbility\app.js!./app.js */ "./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\preset-env&plugins[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!./lib/manifest-loader.js?path=D:\\MY\\Hi3516D\\CodeLab\\20210929\\NewsDemo\\entry\\src\\main\\js\\MainAbility\\app.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/app.js")
+
+      $app_define$('@app-application/app', [], function($app_require$, $app_exports$, $app_module$) {
+      
+      $app_script$($app_module$, $app_exports$, $app_require$)
+      if ($app_exports$.__esModule && $app_exports$.default) {
+        $app_module$.exports = $app_exports$.default
+      }
+      
+      })
+      $app_bootstrap$('@app-application/app',undefined,undefined)
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_good.png b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_good.png
new file mode 100644
index 0000000000000000000000000000000000000000..e306e705fe96f10576fa393c3390ea63f26408dd
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_good.png differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_message.png b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..b81007d64cbe5265df414a6dab58cd103cd5a521
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_message.png differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_share.png b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_share.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fb1cae93ea21b0712abc939b828ea92ffcb07f4
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_share.png differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_star.png b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_star.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ace4c20d2f949b567fc960d205c345273fadee2
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/icon_star.png differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image1.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bfe2ae5849d6b022c2eab195f0fc0c04721db285
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image1.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image10.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..781936afc0354e0f22d1b77339968927c29ffb36
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image10.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image11.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image11.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f2862e308f284c5cc87d06c5316d5edec86028f3
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image11.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image12.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image12.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0425178705c4e56888d7df2b308efdfcd7ac8640
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image12.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image13.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image13.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b349d81e1dce2d2a553baaf26a5b7fde58d8beac
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image13.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image14.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image14.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3d1ca269b529e890a3e154ac081e93487f5743b
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image14.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image15.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image15.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..54775977a85c165759a22b8c8e956ecc59603ff8
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image15.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image16.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image16.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17780bfc6f7f014b1920fa5159cb1a4699a5de49
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image16.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image17.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image17.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a34dcd88e1507fd07d509fcffe024dfe7a59ab39
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image17.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image18.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image18.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ad79353b9bcfb2cd5b05ef6296f29e3ac826d3ca
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image18.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image19.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image19.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5e8c9267e9632b829492f6d93bfebfcb9c0dc114
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image19.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image2.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2322f158e6a108b8a4f2bbcb20204bd7974c12d9
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image2.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image3.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6da8be18ed043a9fc815689e7482e9fe04969f1a
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image3.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image4.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..78bfe6f367b9534e1236725b50a2b98934a76827
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image4.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image5.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bda3780f9779e2169cea6b3cd0aae77bc6e6cc95
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image5.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image6.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..60ebfaa4bd05ca32c40b99f247a9d2998d85dd69
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image6.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image7.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bfc4fb58e7a5ca3062dc775721f9106d333adaec
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image7.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image8.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e58a289f7d136043766f33f168a87af367c370f3
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image8.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image9.jpg b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e7de107a86d8a741fa4112c3df79c60a1ac086e5
Binary files /dev/null and b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/common/images/news_image9.jpg differ
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/i18n/en-US.json b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..08e34eac912bf2651eefc20e26aa479b5e4e7ec2
--- /dev/null
+++ b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/i18n/en-US.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/i18n/zh-CN.json b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dd53b3a8b808aec9396fa663cb00ef22ba61e0a
--- /dev/null
+++ b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/i18n/zh-CN.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/manifest.json b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..9c28780bfb981944bc50679f81a3279130fb3188
--- /dev/null
+++ b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/manifest.json
@@ -0,0 +1,18 @@
+{
+    "appID": "com.huawei.newsdemo",
+    "appName": "$string:entry_MainAbility",
+    "versionName": "1.0.0",
+    "versionCode": 1000000,
+    "minPlatformVersion": 7,
+    "pages": [
+        "pages/index/index",
+        "pages/second/second"
+    ],
+    "deviceType": [
+        "phone"
+    ],
+    "window": {
+        "autoDesignWidth": false,
+        "designWidth": 720
+    }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/pages/index/index.js b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..355d0ba65d983c31c0ad7fbf189c99f86088815f
--- /dev/null
+++ b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/pages/index/index.js
@@ -0,0 +1,711 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./lib/json.js!./lib/style.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.css":
+/*!***************************************************************************************************************************************!*\
+  !*** ./lib/json.js!./lib/style.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.css ***!
+  \***************************************************************************************************************************************/
+/***/ ((module) => {
+
+module.exports = {
+  ".container": {
+    "flexDirection": "column",
+    "justifyContent": "flex-start",
+    "alignItems": "center"
+  },
+  ".tab-bar": {
+    "height": "80px"
+  },
+  ".tab-text": {
+    "fontSize": "46px",
+    "textAlign": "center"
+  },
+  ".tab-content": {
+    "width": "100%",
+    "height": "100%",
+    "justifyContent": "center"
+  },
+  ".item-content": {
+    "height": "100%",
+    "justifyContent": "center"
+  },
+  ".list": {
+    "width": "100%",
+    "paddingTop": "20px",
+    "paddingRight": "20px",
+    "paddingBottom": "20px",
+    "paddingLeft": "20px"
+  },
+  ".text": {
+    "fontSize": "36px",
+    "marginTop": "10px",
+    "marginRight": "10px",
+    "marginBottom": "10px",
+    "marginLeft": "10px",
+    "height": "180px",
+    "maxLines": "4",
+    "flexWeight": 3
+  },
+  ".image": {
+    "marginTop": "10px",
+    "marginRight": "10px",
+    "marginBottom": "10px",
+    "marginLeft": "10px",
+    "height": "180px",
+    "flexWeight": 2
+  }
+}
+
+/***/ }),
+
+/***/ "./lib/json.js!./lib/template.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml":
+/*!******************************************************************************************************************************************!*\
+  !*** ./lib/json.js!./lib/template.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml ***!
+  \******************************************************************************************************************************************/
+/***/ ((module) => {
+
+module.exports = {
+  "attr": {
+    "debugLine": "pages/index/index:1",
+    "className": "container"
+  },
+  "type": "div",
+  "classList": [
+    "container"
+  ],
+  "children": [
+    {
+      "attr": {
+        "debugLine": "pages/index/index:2",
+        "index": "0",
+        "vertical": "false"
+      },
+      "type": "tabs",
+      "events": {
+        "change": "changeNewsType"
+      },
+      "children": [
+        {
+          "attr": {
+            "debugLine": "pages/index/index:3",
+            "className": "tab-bar",
+            "mode": "scrollable"
+          },
+          "type": "tab-bar",
+          "classList": [
+            "tab-bar"
+          ],
+          "children": [
+            {
+              "attr": {
+                "debugLine": "pages/index/index:4",
+                "className": "tab-text",
+                "value": function () {return this.title.name}
+              },
+              "type": "text",
+              "classList": [
+                "tab-text"
+              ],
+              "repeat": {
+                "exp": function () {return this.titleList},
+                "value": "title"
+              }
+            }
+          ]
+        },
+        {
+          "attr": {
+            "debugLine": "pages/index/index:7",
+            "className": "tab-content",
+            "scrollable": "true"
+          },
+          "type": "tab-content",
+          "classList": [
+            "tab-content"
+          ],
+          "children": [
+            {
+              "attr": {
+                "debugLine": "pages/index/index:8",
+                "className": "item-content"
+              },
+              "type": "div",
+              "classList": [
+                "item-content"
+              ],
+              "repeat": {
+                "exp": function () {return this.titleList},
+                "value": "title"
+              },
+              "children": [
+                {
+                  "attr": {
+                    "debugLine": "pages/index/index:9",
+                    "className": "list"
+                  },
+                  "type": "list",
+                  "classList": [
+                    "list"
+                  ],
+                  "children": [
+                    {
+                      "attr": {
+                        "debugLine": "pages/index/index:10"
+                      },
+                      "type": "list-item",
+                      "repeat": {
+                        "exp": function () {return this.newsList},
+                        "value": "news"
+                      },
+                      "onBubbleEvents": {
+                        "click": function (evt) {this.startAbilityContinuation(this.news,evt)}
+                      },
+                      "children": [
+                        {
+                          "attr": {
+                            "debugLine": "pages/index/index:11"
+                          },
+                          "type": "div",
+                          "style": {
+                            "flexDirection": "column"
+                          },
+                          "children": [
+                            {
+                              "attr": {
+                                "debugLine": "pages/index/index:13"
+                              },
+                              "type": "div",
+                              "style": {
+                                "flexDirection": "row"
+                              },
+                              "children": [
+                                {
+                                  "attr": {
+                                    "debugLine": "pages/index/index:14",
+                                    "className": "text",
+                                    "value": function () {return this.news.title}
+                                  },
+                                  "type": "text",
+                                  "classList": [
+                                    "text"
+                                  ]
+                                },
+                                {
+                                  "attr": {
+                                    "debugLine": "pages/index/index:17",
+                                    "className": "image",
+                                    "src": function () {return this.news.imgUrl}
+                                  },
+                                  "type": "image",
+                                  "classList": [
+                                    "image"
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "attr": {
+                                "debugLine": "pages/index/index:21"
+                              },
+                              "type": "div",
+                              "style": {
+                                "height": "2px",
+                                "width": "100%",
+                                "backgroundColor": "#97d2d4d4"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/interopRequireDefault.js ***!
+  \**********************************************************************/
+/***/ ((module) => {
+
+"use strict";
+
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+
+module.exports = _interopRequireDefault;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+function requireModule(moduleName) {
+  const systemList = ['system.router', 'system.app', 'system.prompt', 'system.configuration',
+  'system.image', 'system.device', 'system.mediaquery', 'ohos.animator', 'system.grid', 'system.resource']
+  var target = ''
+  if (systemList.includes(moduleName.replace('@', ''))) {
+    target = $app_require$('@app-module/' + moduleName.substring(1));
+    return target;
+  }
+  var shortName = moduleName.replace(/@[^.]+.([^.]+)/, '$1');
+  if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
+    target = ohosplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  if (typeof systemplugin !== 'undefined') {
+    target = systemplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  target = requireNapi(shortName);
+  return target;
+}
+
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/newArrowCheck.js":
+/*!**************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/newArrowCheck.js ***!
+  \**************************************************************/
+/***/ ((module) => {
+
+"use strict";
+
+
+function _newArrowCheck(innerThis, boundThis) {
+  if (innerThis !== boundThis) {
+    throw new TypeError("Cannot instantiate an arrow function");
+  }
+}
+
+module.exports = _newArrowCheck;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+function requireModule(moduleName) {
+  const systemList = ['system.router', 'system.app', 'system.prompt', 'system.configuration',
+  'system.image', 'system.device', 'system.mediaquery', 'ohos.animator', 'system.grid', 'system.resource']
+  var target = ''
+  if (systemList.includes(moduleName.replace('@', ''))) {
+    target = $app_require$('@app-module/' + moduleName.substring(1));
+    return target;
+  }
+  var shortName = moduleName.replace(/@[^.]+.([^.]+)/, '$1');
+  if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
+    target = ohosplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  if (typeof systemplugin !== 'undefined') {
+    target = systemplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  target = requireNapi(shortName);
+  return target;
+}
+
+
+/***/ }),
+
+/***/ "./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\preset-env&plugins[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.js":
+/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\preset-env&plugins[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.js ***!
+  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = function(module, exports, $app_require$){"use strict";
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/newArrowCheck */ "./node_modules/@babel/runtime/helpers/newArrowCheck.js"));
+
+var _ohosAbility = _interopRequireDefault(requireModule("@ohos.ability.featureAbility"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var titles = [{
+  "name": "All"
+}, {
+  "name": "Health"
+}, {
+  "name": "Finance"
+}, {
+  "name": "Technology"
+}, {
+  "name": "Sport"
+}, {
+  "name": "Internet"
+}, {
+  "name": "Game"
+}];
+var newsData = [{
+  "title": "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
+  "type": "Health",
+  "imgUrl": "/common/images/news_image1.jpg",
+  "reads": "54",
+  "likes": "81",
+  "content": "Recently, at the Wireless Broadband Alliance (WBA), an international industry organization, Huawei's AirEngine Wi-Fi 6 Solution Helps Factory Digital Transformation WBA 2020 Wi-Fi Industry Best Enterprise Wi-Fi Network Award. This is the first time that a Chinese Wi-Fi 6 vendor has won this award, which reflects the full recognition of Huawei AirEngine Wi-Fi 6 by global enterprise users."
+}, {
+  "title": "Latest technology and industry weather vane",
+  "type": "Health",
+  "imgUrl": "/common/images/news_image2.jpg",
+  "reads": "100",
+  "likes": "354",
+  "content": "With the large-scale commercial use of new technologies such as 5G, IoT, cloud computing, and AI, industry digital transformation has entered deep water. In addition, the sudden epidemic and carbon-neutral targets accelerate the transformation of society towards intelligence. When energy technologies are combined with power electronics and digital technologies, what direction will site energy develop?"
+}, {
+  "title": "Openness and Cooperation Facilitate Industry Upgrade",
+  "type": "Finance",
+  "imgUrl": "/common/images/news_image3.jpg",
+  "reads": "74",
+  "likes": "91",
+  "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+}, {
+  "title": "High-voltage super-fast charging is an inevitable trend",
+  "type": "Finance",
+  "imgUrl": "/common/images/news_image4.jpg",
+  "reads": "44",
+  "likes": "82",
+  "content": "Consumers have a lot of doubts about buying electric cars, compared to fuel cars. Wang Chao pointed out that among the factors affecting the purchase of electric vehicles, charging problems account for 80 percent, with a small number of charging piles (currently, the ratio of piles is 3.2:1) and a long charging time being the first to bear the brunt. As a result, many players in the charging infrastructure sector are looking for a break. To alleviate consumers' pain points of poor charging experience, we need to improve the pile ratio and shorten the charging time to meet consumers' requirements for fast charging."
+}, {
+  "title": "Huawei Releases the New Trend of Modular Power Supply, Facilitating Industry Upgrade Through Open Cooperation",
+  "type": "Technology",
+  "imgUrl": "/common/images/news_image5.jpg",
+  "reads": "73",
+  "likes": "888",
+  "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh. There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+}, {
+  "title": "Ten Future Trends of Digital Energy",
+  "type": "Technology",
+  "imgUrl": "/common/images/news_image6.jpg",
+  "reads": "100",
+  "likes": "354",
+  "content": "Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency.\nGreen power will benefit thousands of industries and households in the future. Green power, represented by PV, will become the main energy source. The era of price-effective PV is coming, and the integration of distributed power generation and solar storage will become an inevitable trend. Green Power will also help the ICT industry reduce its carbon footprint. In the future, we will build a \"zero-carbon network\" and \"zero-carbon\" data center. In addition, Huawei proposed the trend of full-link efficiency for the first time and implemented global optimization in terms of architecture and system."
+}, {
+  "title": "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
+  "type": "Sport",
+  "imgUrl": "/common/images/news_image7.jpg",
+  "reads": "123",
+  "likes": "911",
+  "content": "The holding of the National AI Contest further fulfilled the requirements of the Ministry of Science and Technology and the Ministry of Industry and Information Technology for Shenzhen to build the national new-generation AI innovation and development trial zone and the AI innovation and application pilot zone. It also promoted the integration and development of innovation elements such as industry, academia, capital, and talent, create an AI innovation atmosphere. Huawei has co-hosted two National AI Competitions in a row, aiming to promote technological progress, industrial upgrade, economic transformation, and social progress, and jointly promote the implementation of AI technologies. This is the most practical point for Huawei and the National AI Competition."
+}, {
+  "title": "Enterprise data centers are moving towards autonomous driving network",
+  "type": "Sport",
+  "imgUrl": "/common/images/news_image8.jpg",
+  "reads": "754",
+  "likes": "149",
+  "content": "More than 90% of enterprises say that fully autonomous driving data center network is their goal to achieve business agility, flexibility, and cost-effectiveness. This is a key research result in the data center network Autonomous Driving Index Report released by Huawei and IDC. Autonomous driving data center network helps enterprises restructure network architectures and operation models and enhance business resilience and continuity. In addition, regardless of the current level of data center network automation, IDC offers some guidance on how enterprises can move forward and move towards full automation."
+}, {
+  "title": "One optical fiber lights up a green smart room",
+  "type": "Internet",
+  "imgUrl": "/common/images/news_image9.jpg",
+  "reads": "631",
+  "likes": "714",
+  "content": "At the 2020 China Real Estate Development Summit held in Guangzhou, Jin Yuzhi, President of Huawei's Transmission and Access Product Line, delivered a keynote speech entitled \"One Fiber Lights Green Smart Rooms\" to discuss the convergence development trend of optical networks and real estate industries, proposes that optical fibers are the standard configuration of F5G smart real estate, and shares seven reasons for choosing Fiber to the Room (FTTR) all-optical home networking, we call on industry partners to work together to build an F5G real gigabit all-optical room ecosystem."
+}, {
+  "title": "BWS2020: Accelerate Network Autonomy and Enable Agile Business",
+  "type": "Internet",
+  "imgUrl": "/common/images/news_image10.jpg",
+  "reads": "53",
+  "likes": "824",
+  "content": "Currently, millions of enterprises embrace changes and accelerate their cloudification. SaaS traffic surges. Enterprise cloudification and multi-cloud collaboration become the new focus of cloud-network synergy . To address this challenge, Guo Dazheng, president of Huawei's data communications field, said: \"In cloud-network scenarios, iMaster NCE implements network as a service to help carriers provide cloud-network integration services and meet enterprise cloud access requirements.\" In 5G transport scenarios, improve the automation capability of the entire process of planning, construction, maintenance, and optimization to meet the requirements of large-scale 5G network construction and cloud network cost reduction and efficiency improvement."
+}, {
+  "title": "Trust technology, embrace openness, and share the world prosperity brought by technology",
+  "type": "Game",
+  "imgUrl": "/common/images/news_image11.jpg",
+  "reads": "1500",
+  "likes": "3542",
+  "content": "Huawei successfully held the TrustInTech 2020 online summit today. Ryan Ding, Executive Director of Huawei, President of the Carrier BG, and Jim Rogers, a senior Wall Street investor, GSMA Chief Marketing Officer Stephanie Lynch-Habib and other ICT industry experts and economists from around the world attended the summit. The summit pointed out that ICT has become a digital foundation for economic development and people's livelihood. In an era of accelerated commercial use of 5G, the world needs to embrace openness and cooperation to eliminate unnecessary resistance and fears about new technologies and transnational cooperation, thereby sharing the world prosperity brought by technology."
+}, {
+  "title": "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
+  "type": "Game",
+  "imgUrl": "/common/images/news_image12.jpg",
+  "reads": "7451",
+  "likes": "9511",
+  "content": "Today, the Leading Technology Award was unveiled at the 7th World Internet Conference. As the industry's first systematic technical reference architecture for government and enterprise intelligence upgrade, intelligent virtual appliances have been recognized by experts and judges and won the Leading Scientific Achievement Award for their exploration and practice in various industries. This is the fifth time Huawei has won this award since 2016. The World Internet Leading Science and Technology Award showcases the latest technologies in the global ICT field and focuses on the best practices of innovative technologies in the fields of science and technology fight against epidemics, recovery of work, and promotion of digital economic development and cooperation."
+}, {
+  "title": "4G/5G FWA, New Engine for Revenue Growth",
+  "type": "Health",
+  "imgUrl": "/common/images/news_image13.jpg",
+  "reads": "445",
+  "likes": "872",
+  "content": "The reason why FWA is growing so fast is that it provides new opportunities for carriers in the consumer market. For example, a Philippine operator used 4G FWA to rapidly develop home broadband users. According to its third quarter financial report, the operator has successfully developed 2.78 million new users this year, accounting for 80% of the total broadband users. The percentage of broadband revenue increased from 12.3% in 2017 to 17.9%. With the development of wireless technologies, 5G FWA can provide gigabit home access experience similar to that of optical fibers, meeting services such as 4K/8K HD video and AR/VR interactive experience."
+}, {
+  "title": "Down! CPI released in November! These things are cheap",
+  "type": "Finance",
+  "imgUrl": "/common/images/news_image14.jpg",
+  "reads": "734",
+  "likes": "8788",
+  "content": "Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap."
+}, {
+  "title": "Comedy movie \"Big Red Envelope\" is set to celebrate the New Year",
+  "type": "Technology",
+  "imgUrl": "/common/images/news_image15.jpg",
+  "reads": "1010",
+  "likes": "3534",
+  "content": "Comedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New Year"
+}, {
+  "title": "Three living things are smart",
+  "type": "Sport",
+  "imgUrl": "/common/images/news_image16.jpg",
+  "reads": "1243",
+  "likes": "9141",
+  "content": "Lifan said at the press conference: \"Retrospective on the journey, we have always adhered to the spirit of initiative, innovation and science. Build core capabilities in terms of networks, technologies, and platforms, and deliver excellent services, technologies, and quality. Internal maintenance, optimization, and sharing are in place. Carriers, equipment vendors, and partners are working together to build an end-to-end network capability and win-win ecosystem to provide users with the best 5G experience and services.\""
+}, {
+  "title": "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G",
+  "type": "Internet",
+  "imgUrl": "/common/images/news_image17.jpg",
+  "reads": "7574",
+  "likes": "1439",
+  "content": "The 5G industry is developing faster than the previous standards. Currently, there are more than 100 5G commercial networks around the world, and the price of entry-level 5G mobile phones has fallen to CNY1,000, which has led to the rapid growth of 5G users worldwide. Thanks to this, leading operators have enjoyed the data dividend brought by 5G. The multi-dimensional package design and 5G message and 5G new communication services are upgraded to increase the ARPU of 5G users to different degrees.\nTo promote the further development of 5G networks and encourage more users to choose and prefer 5G networks, operators need to build 5G top-quality networks for individual users to achieve full-scenario coverage in densely populated urban areas, suburban areas, and indoor areas, allowing mobile phone users to access 5G services anytime, anywhere. In addition, 5G connection experience is optimized to ensure consistent user experience."
+}, {
+  "title": "Technology Helps Art, Leads a New Era",
+  "type": "Game",
+  "imgUrl": "/common/images/news_image18.jpg",
+  "reads": "6311",
+  "likes": "7114",
+  "content": "Zhang Wenlin spoke highly of the \"Dance Storm\". He believes that since the second season's premiere, the show has brought the contestants' exquisite dance moves, the wonderful host of Mr Ho Kung, the excellent comments of the judges' tutors, and the exquisite design of the staff to the audience, dedicate a beautiful visual feast! To help achieve fantastic visual effects, Hunan Radio and TV set up a joint team with Huawei to develop a spatio-temporal condensation system for Dance Storm 2. The system supports AI algorithms such as intelligent fast focusing, butterfly shooting, zoom-in, and multi-focus, with the help of the video 3.0+ platform of device-cloud synergy, the program team has made several industry-leading achievements, such as the three-dimensional storm moment with fantastic visual changes, free-view Dance Storm program with interactive control and rotation, and dance Storm with 360-degree panoramic view. VR programs."
+}, {
+  "title": "Open Intelligent Twin Ecosystem Is the Key to All-Scenario Intelligence",
+  "type": "Health",
+  "imgUrl": "/common/images/news_image19.jpg",
+  "reads": "6341",
+  "likes": "7164",
+  "content": "Intelligent upgrade will build core competitiveness in various industries. Huawei works with partners to integrate 5G, cloud, AI, intelligent edge, and industry applications to form an integrated intelligent system and create industry-leading smart experience. In the transportation industry, the abolition of highway toll stations at the provincial boundary enables fast and insensitive traffic, greatly improving traffic efficiency and reducing logistics transportation costs. Intelligent cameras are deployed on highway portals to collect vehicle traffic data 24 hours a day and send the data to the cloud in real time over the high-speed network for real-time charging. In addition, AI models trained on the cloud can be pushed to the edge so that cameras can have capabilities such as license plate recognition and vehicle feature extraction, and the capabilities can be continuously evolved. For example, in extreme weather conditions such as rain and snow, one-click upgrade can be performed on the cloud."
+}];
+var _default = {
+  data: function data() {
+    return {
+      titleList: titles,
+      newsList: newsData
+    };
+  },
+  onInit: function onInit() {
+    console.log("onInit::" + titles);
+  },
+  changeNewsType: function changeNewsType(e) {
+    var type = titles[e.index].name;
+    this.newsList = [];
+
+    if (type === "All") {
+      this.newsList = newsData;
+    } else {
+      var newsArray = [];
+
+      var _iterator = _createForOfIteratorHelper(newsData),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var news = _step.value;
+
+          if (news.type === type) {
+            newsArray.push(news);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      this.newsList = newsArray;
+    }
+  },
+  startAbilityContinuation: function startAbilityContinuation(news) {
+    var _this = this;
+
+    var params;
+    params = {
+      title: news.title,
+      type: news.type,
+      imgUrl: news.imgUrl,
+      reads: news.reads,
+      likes: news.likes,
+      content: news.content
+    };
+    var wantValue = {
+      bundleName: 'com.example.newsclientopenharmony',
+      abilityName: 'com.example.newsclientopenharmony.MainAbility2',
+      deviceId: '',
+      parameters: params
+    };
+
+    _ohosAbility["default"].startAbility({
+      want: wantValue
+    }).then(function (data) {
+      (0, _newArrowCheck2["default"])(this, _this);
+      console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+    }.bind(this));
+
+    console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+    console.info('featureAbility.startAbility end');
+  }
+};
+exports["default"] = _default;
+
+function requireModule(moduleName) {
+  const systemList = ['system.router', 'system.app', 'system.prompt', 'system.configuration',
+  'system.image', 'system.device', 'system.mediaquery', 'ohos.animator', 'system.grid', 'system.resource']
+  var target = ''
+  if (systemList.includes(moduleName.replace('@', ''))) {
+    target = $app_require$('@app-module/' + moduleName.substring(1));
+    return target;
+  }
+  var shortName = moduleName.replace(/@[^.]+.([^.]+)/, '$1');
+  if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
+    target = ohosplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  if (typeof systemplugin !== 'undefined') {
+    target = systemplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  target = requireNapi(shortName);
+  return target;
+}
+
+var moduleOwn = exports.default || module.exports;
+var accessors = ['public', 'protected', 'private'];
+if (moduleOwn.data && accessors.some(function (acc) {
+    return moduleOwn[acc];
+  })) {
+  throw new Error('For VM objects, attribute data must not coexist with public, protected, or private. Please replace data with public.');
+} else if (!moduleOwn.data) {
+  moduleOwn.data = {};
+  moduleOwn._descriptor = {};
+  accessors.forEach(function(acc) {
+    var accType = typeof moduleOwn[acc];
+    if (accType === 'object') {
+      moduleOwn.data = Object.assign(moduleOwn.data, moduleOwn[acc]);
+      for (var name in moduleOwn[acc]) {
+        moduleOwn._descriptor[name] = {access : acc};
+      }
+    } else if (accType === 'function') {
+      console.warn('For VM objects, attribute ' + acc + ' value must not be a function. Change the value to an object.');
+    }
+  });
+}}
+/* generated by ace-loader */
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+/*!****************************************************************************************************************!*\
+  !*** ../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml?entry ***!
+  \****************************************************************************************************************/
+var $app_template$ = __webpack_require__(/*! !!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/json.js!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/template.js!./index.hml */ "./lib/json.js!./lib/template.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml")
+var $app_style$ = __webpack_require__(/*! !!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/json.js!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/style.js!./index.css */ "./lib/json.js!./lib/style.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.css")
+var $app_script$ = __webpack_require__(/*! !!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/script.js!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/node_modules/babel-loader?presets[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\preset-env&plugins[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\plugin-transform-modules-commonjs&comments=false!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/resource-reference-script.js!./index.js */ "./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\preset-env&plugins[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.js")
+
+$app_define$('@app-component/index', [], function($app_require$, $app_exports$, $app_module$) {
+
+$app_script$($app_module$, $app_exports$, $app_require$)
+if ($app_exports$.__esModule && $app_exports$.default) {
+$app_module$.exports = $app_exports$.default
+}
+
+$app_module$.exports.template = $app_template$
+
+$app_module$.exports.style = $app_style$
+
+})
+$app_bootstrap$('@app-component/index',undefined,undefined)
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/pages/second/second.js b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/pages/second/second.js
new file mode 100644
index 0000000000000000000000000000000000000000..518590594b4152231782bc5a83b5841131470c4a
--- /dev/null
+++ b/NewsDemo/entry/.preview/intermediates/res/debug/rich/assets/js/MainAbility/pages/second/second.js
@@ -0,0 +1,290 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./lib/json.js!./lib/style.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.css":
+/*!*****************************************************************************************************************************************!*\
+  !*** ./lib/json.js!./lib/style.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.css ***!
+  \*****************************************************************************************************************************************/
+/***/ ((module) => {
+
+module.exports = {
+  ".container": {
+    "display": "flex",
+    "flexDirection": "column",
+    "justifyContent": "center",
+    "alignItems": "center",
+    "left": "0px",
+    "top": "0px",
+    "width": "100%",
+    "height": "100%"
+  },
+  ".title": {
+    "fontSize": "60px",
+    "textAlign": "center",
+    "width": "100%",
+    "height": "40%",
+    "marginTop": "10px",
+    "marginRight": "10px",
+    "marginBottom": "10px",
+    "marginLeft": "10px"
+  },
+  ".btn": {
+    "width": "50%",
+    "height": "100px",
+    "fontSize": "40px"
+  }
+}
+
+/***/ }),
+
+/***/ "./lib/json.js!./lib/template.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.hml":
+/*!********************************************************************************************************************************************!*\
+  !*** ./lib/json.js!./lib/template.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.hml ***!
+  \********************************************************************************************************************************************/
+/***/ ((module) => {
+
+module.exports = {
+  "attr": {
+    "debugLine": "pages/second/second:1",
+    "className": "container"
+  },
+  "type": "div",
+  "classList": [
+    "container"
+  ],
+  "children": [
+    {
+      "attr": {
+        "debugLine": "pages/second/second:2",
+        "className": "title",
+        "value": function () {return this.$t('strings.page')}
+      },
+      "type": "text",
+      "classList": [
+        "title"
+      ]
+    },
+    {
+      "attr": {
+        "debugLine": "pages/second/second:5",
+        "className": "btn",
+        "type": "button",
+        "value": function () {return this.$t('strings.back')}
+      },
+      "type": "input",
+      "classList": [
+        "btn"
+      ],
+      "onBubbleEvents": {
+        "click": "onclick"
+      }
+    }
+  ]
+}
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/interopRequireDefault.js ***!
+  \**********************************************************************/
+/***/ ((module) => {
+
+"use strict";
+
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+
+module.exports = _interopRequireDefault;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+function requireModule(moduleName) {
+  const systemList = ['system.router', 'system.app', 'system.prompt', 'system.configuration',
+  'system.image', 'system.device', 'system.mediaquery', 'ohos.animator', 'system.grid', 'system.resource']
+  var target = ''
+  if (systemList.includes(moduleName.replace('@', ''))) {
+    target = $app_require$('@app-module/' + moduleName.substring(1));
+    return target;
+  }
+  var shortName = moduleName.replace(/@[^.]+.([^.]+)/, '$1');
+  if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
+    target = ohosplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  if (typeof systemplugin !== 'undefined') {
+    target = systemplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  target = requireNapi(shortName);
+  return target;
+}
+
+
+/***/ }),
+
+/***/ "./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\preset-env&plugins[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.js":
+/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\preset-env&plugins[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.js ***!
+  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = function(module, exports, $app_require$){"use strict";
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _system = _interopRequireDefault(requireModule("@system.router"));
+
+var _default = {
+  data: {
+    title: 'World'
+  },
+  onclick: function onclick() {
+    _system["default"].replace({
+      uri: "pages/index/index"
+    });
+  }
+};
+exports["default"] = _default;
+
+function requireModule(moduleName) {
+  const systemList = ['system.router', 'system.app', 'system.prompt', 'system.configuration',
+  'system.image', 'system.device', 'system.mediaquery', 'ohos.animator', 'system.grid', 'system.resource']
+  var target = ''
+  if (systemList.includes(moduleName.replace('@', ''))) {
+    target = $app_require$('@app-module/' + moduleName.substring(1));
+    return target;
+  }
+  var shortName = moduleName.replace(/@[^.]+.([^.]+)/, '$1');
+  if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
+    target = ohosplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  if (typeof systemplugin !== 'undefined') {
+    target = systemplugin;
+    for (let key of shortName.split('.')) {
+      target = target[key];
+      if(!target) {
+        break;
+      }
+    }
+    if (typeof target !== 'undefined') {
+      return target;
+    }
+  }
+  target = requireNapi(shortName);
+  return target;
+}
+
+var moduleOwn = exports.default || module.exports;
+var accessors = ['public', 'protected', 'private'];
+if (moduleOwn.data && accessors.some(function (acc) {
+    return moduleOwn[acc];
+  })) {
+  throw new Error('For VM objects, attribute data must not coexist with public, protected, or private. Please replace data with public.');
+} else if (!moduleOwn.data) {
+  moduleOwn.data = {};
+  moduleOwn._descriptor = {};
+  accessors.forEach(function(acc) {
+    var accType = typeof moduleOwn[acc];
+    if (accType === 'object') {
+      moduleOwn.data = Object.assign(moduleOwn.data, moduleOwn[acc]);
+      for (var name in moduleOwn[acc]) {
+        moduleOwn._descriptor[name] = {access : acc};
+      }
+    } else if (accType === 'function') {
+      console.warn('For VM objects, attribute ' + acc + ' value must not be a function. Change the value to an object.');
+    }
+  });
+}}
+/* generated by ace-loader */
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+/*!******************************************************************************************************************!*\
+  !*** ../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.hml?entry ***!
+  \******************************************************************************************************************/
+var $app_template$ = __webpack_require__(/*! !!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/json.js!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/template.js!./second.hml */ "./lib/json.js!./lib/template.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.hml")
+var $app_style$ = __webpack_require__(/*! !!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/json.js!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/style.js!./second.css */ "./lib/json.js!./lib/style.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.css")
+var $app_script$ = __webpack_require__(/*! !!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/script.js!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/node_modules/babel-loader?presets[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\preset-env&plugins[]=D:\MY\Hi3516D\SDK\version-Daily_Version-20210926_102043-ohos-sdk-LTS\windows\js\3.0.0.0\build-tools\ace-loader\node_modules\@babel\plugin-transform-modules-commonjs&comments=false!../../../../../../../../../../SDK/version-Daily_Version-20210926_102043-ohos-sdk-LTS/windows/js/3.0.0.0/build-tools/ace-loader/lib/resource-reference-script.js!./second.js */ "./lib/script.js!./node_modules/babel-loader/lib/index.js?presets[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\preset-env&plugins[]=D:\\MY\\Hi3516D\\SDK\\version-Daily_Version-20210926_102043-ohos-sdk-LTS\\windows\\js\\3.0.0.0\\build-tools\\ace-loader\\node_modules\\@babel\\plugin-transform-modules-commonjs&comments=false!./lib/resource-reference-script.js!../../../../../../../CodeLab/20210929/NewsDemo/entry/src/main/js/MainAbility/pages/second/second.js")
+
+$app_define$('@app-component/second', [], function($app_require$, $app_exports$, $app_module$) {
+
+$app_script$($app_module$, $app_exports$, $app_require$)
+if ($app_exports$.__esModule && $app_exports$.default) {
+$app_module$.exports = $app_exports$.default
+}
+
+$app_module$.exports.template = $app_template$
+
+$app_module$.exports.style = $app_style$
+
+})
+$app_bootstrap$('@app-component/second',undefined,undefined)
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/jsManifest/MainAbility/manifest.json b/NewsDemo/entry/.preview/jsManifest/MainAbility/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..9c28780bfb981944bc50679f81a3279130fb3188
--- /dev/null
+++ b/NewsDemo/entry/.preview/jsManifest/MainAbility/manifest.json
@@ -0,0 +1,18 @@
+{
+    "appID": "com.huawei.newsdemo",
+    "appName": "$string:entry_MainAbility",
+    "versionName": "1.0.0",
+    "versionCode": 1000000,
+    "minPlatformVersion": 7,
+    "pages": [
+        "pages/index/index",
+        "pages/second/second"
+    ],
+    "deviceType": [
+        "phone"
+    ],
+    "window": {
+        "autoDesignWidth": false,
+        "designWidth": 720
+    }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/.preview/merge_js_src/liteWearable/default/pages/index/index.js b/NewsDemo/entry/.preview/merge_js_src/liteWearable/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a9d8d96cdc0c51dedc0d6d5f530c7b2a8716a0d
--- /dev/null
+++ b/NewsDemo/entry/.preview/merge_js_src/liteWearable/default/pages/index/index.js
@@ -0,0 +1,264 @@
+//import {titles, newsData} from '../../../MainAbility/common/data/data.js';
+
+import featureAbility from '@ohos.ability.featureAbility';
+
+ const titles= [
+    {
+        "name": "All"
+    },
+    {
+        "name": "Health"
+    },
+    {
+        "name": "Finance"
+    },
+    {
+        "name": "Technology"
+    },
+    {
+        "name": "Sport"
+    },
+    {
+        "name": "Internet"
+    },
+    {
+        "name": "Game"
+    }
+]
+
+ const newsData = [
+    {
+        "title": "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image1.jpg",
+        "reads": "54",
+        "likes": "81",
+        "content": "Recently, at the Wireless Broadband Alliance (WBA), an international industry organization, Huawei's AirEngine Wi-Fi 6 Solution Helps Factory Digital Transformation WBA 2020 Wi-Fi Industry Best Enterprise Wi-Fi Network Award. This is the first time that a Chinese Wi-Fi 6 vendor has won this award, which reflects the full recognition of Huawei AirEngine Wi-Fi 6 by global enterprise users."
+    },
+    {
+        "title": "Latest technology and industry weather vane",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image2.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "With the large-scale commercial use of new technologies such as 5G, IoT, cloud computing, and AI, industry digital transformation has entered deep water. In addition, the sudden epidemic and carbon-neutral targets accelerate the transformation of society towards intelligence. When energy technologies are combined with power electronics and digital technologies, what direction will site energy develop?"
+    },
+    {
+        "title": "Openness and Cooperation Facilitate Industry Upgrade",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image3.jpg",
+        "reads": "74",
+        "likes": "91",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "High-voltage super-fast charging is an inevitable trend",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image4.jpg",
+        "reads": "44",
+        "likes": "82",
+        "content": "Consumers have a lot of doubts about buying electric cars, compared to fuel cars. Wang Chao pointed out that among the factors affecting the purchase of electric vehicles, charging problems account for 80 percent, with a small number of charging piles (currently, the ratio of piles is 3.2:1) and a long charging time being the first to bear the brunt. As a result, many players in the charging infrastructure sector are looking for a break. To alleviate consumers' pain points of poor charging experience, we need to improve the pile ratio and shorten the charging time to meet consumers' requirements for fast charging."
+    },
+    {
+        "title": "Huawei Releases the New Trend of Modular Power Supply, Facilitating Industry Upgrade Through Open Cooperation",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image5.jpg",
+        "reads": "73",
+        "likes": "888",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh. There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "Ten Future Trends of Digital Energy",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image6.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency.\nGreen power will benefit thousands of industries and households in the future. Green power, represented by PV, will become the main energy source. The era of price-effective PV is coming, and the integration of distributed power generation and solar storage will become an inevitable trend. Green Power will also help the ICT industry reduce its carbon footprint. In the future, we will build a \"zero-carbon network\" and \"zero-carbon\" data center. In addition, Huawei proposed the trend of full-link efficiency for the first time and implemented global optimization in terms of architecture and system."
+    },
+    {
+        "title": "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image7.jpg",
+        "reads": "123",
+        "likes": "911",
+        "content": "The holding of the National AI Contest further fulfilled the requirements of the Ministry of Science and Technology and the Ministry of Industry and Information Technology for Shenzhen to build the national new-generation AI innovation and development trial zone and the AI innovation and application pilot zone. It also promoted the integration and development of innovation elements such as industry, academia, capital, and talent, create an AI innovation atmosphere. Huawei has co-hosted two National AI Competitions in a row, aiming to promote technological progress, industrial upgrade, economic transformation, and social progress, and jointly promote the implementation of AI technologies. This is the most practical point for Huawei and the National AI Competition."
+    },
+    {
+        "title": "Enterprise data centers are moving towards autonomous driving network",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image8.jpg",
+        "reads": "754",
+        "likes": "149",
+        "content": "More than 90% of enterprises say that fully autonomous driving data center network is their goal to achieve business agility, flexibility, and cost-effectiveness. This is a key research result in the data center network Autonomous Driving Index Report released by Huawei and IDC. Autonomous driving data center network helps enterprises restructure network architectures and operation models and enhance business resilience and continuity. In addition, regardless of the current level of data center network automation, IDC offers some guidance on how enterprises can move forward and move towards full automation."
+    },
+    {
+        "title": "One optical fiber lights up a green smart room",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image9.jpg",
+        "reads": "631",
+        "likes": "714",
+        "content": "At the 2020 China Real Estate Development Summit held in Guangzhou, Jin Yuzhi, President of Huawei's Transmission and Access Product Line, delivered a keynote speech entitled \"One Fiber Lights Green Smart Rooms\" to discuss the convergence development trend of optical networks and real estate industries, proposes that optical fibers are the standard configuration of F5G smart real estate, and shares seven reasons for choosing Fiber to the Room (FTTR) all-optical home networking, we call on industry partners to work together to build an F5G real gigabit all-optical room ecosystem."
+    },
+    {
+        "title": "BWS2020: Accelerate Network Autonomy and Enable Agile Business",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image10.jpg",
+        "reads": "53",
+        "likes": "824",
+        "content": "Currently, millions of enterprises embrace changes and accelerate their cloudification. SaaS traffic surges. Enterprise cloudification and multi-cloud collaboration become the new focus of cloud-network synergy . To address this challenge, Guo Dazheng, president of Huawei's data communications field, said: \"In cloud-network scenarios, iMaster NCE implements network as a service to help carriers provide cloud-network integration services and meet enterprise cloud access requirements.\" In 5G transport scenarios, improve the automation capability of the entire process of planning, construction, maintenance, and optimization to meet the requirements of large-scale 5G network construction and cloud network cost reduction and efficiency improvement."
+    },
+    {
+        "title": "Trust technology, embrace openness, and share the world prosperity brought by technology",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image11.jpg",
+        "reads": "1500",
+        "likes": "3542",
+        "content": "Huawei successfully held the TrustInTech 2020 online summit today. Ryan Ding, Executive Director of Huawei, President of the Carrier BG, and Jim Rogers, a senior Wall Street investor, GSMA Chief Marketing Officer Stephanie Lynch-Habib and other ICT industry experts and economists from around the world attended the summit. The summit pointed out that ICT has become a digital foundation for economic development and people's livelihood. In an era of accelerated commercial use of 5G, the world needs to embrace openness and cooperation to eliminate unnecessary resistance and fears about new technologies and transnational cooperation, thereby sharing the world prosperity brought by technology."
+    },
+    {
+        "title": "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image12.jpg",
+        "reads": "7451",
+        "likes": "9511",
+        "content": "Today, the Leading Technology Award was unveiled at the 7th World Internet Conference. As the industry's first systematic technical reference architecture for government and enterprise intelligence upgrade, intelligent virtual appliances have been recognized by experts and judges and won the Leading Scientific Achievement Award for their exploration and practice in various industries. This is the fifth time Huawei has won this award since 2016. The World Internet Leading Science and Technology Award showcases the latest technologies in the global ICT field and focuses on the best practices of innovative technologies in the fields of science and technology fight against epidemics, recovery of work, and promotion of digital economic development and cooperation."
+    },
+    {
+        "title": "4G/5G FWA, New Engine for Revenue Growth",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image13.jpg",
+        "reads": "445",
+        "likes": "872",
+        "content": "The reason why FWA is growing so fast is that it provides new opportunities for carriers in the consumer market. For example, a Philippine operator used 4G FWA to rapidly develop home broadband users. According to its third quarter financial report, the operator has successfully developed 2.78 million new users this year, accounting for 80% of the total broadband users. The percentage of broadband revenue increased from 12.3% in 2017 to 17.9%. With the development of wireless technologies, 5G FWA can provide gigabit home access experience similar to that of optical fibers, meeting services such as 4K/8K HD video and AR/VR interactive experience."
+    },
+    {
+        "title": "Down! CPI released in November! These things are cheap",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image14.jpg",
+        "reads": "734",
+        "likes": "8788",
+        "content": "Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap."
+    },
+    {
+        "title": "Comedy movie \"Big Red Envelope\" is set to celebrate the New Year",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image15.jpg",
+        "reads": "1010",
+        "likes": "3534",
+        "content": "Comedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New Year"
+    },
+    {
+        "title": "Three living things are smart",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image16.jpg",
+        "reads": "1243",
+        "likes": "9141",
+        "content": "Lifan said at the press conference: \"Retrospective on the journey, we have always adhered to the spirit of initiative, innovation and science. Build core capabilities in terms of networks, technologies, and platforms, and deliver excellent services, technologies, and quality. Internal maintenance, optimization, and sharing are in place. Carriers, equipment vendors, and partners are working together to build an end-to-end network capability and win-win ecosystem to provide users with the best 5G experience and services.\""
+    },
+    {
+        "title": "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image17.jpg",
+        "reads": "7574",
+        "likes": "1439",
+        "content": "The 5G industry is developing faster than the previous standards. Currently, there are more than 100 5G commercial networks around the world, and the price of entry-level 5G mobile phones has fallen to CNY1,000, which has led to the rapid growth of 5G users worldwide. Thanks to this, leading operators have enjoyed the data dividend brought by 5G. The multi-dimensional package design and 5G message and 5G new communication services are upgraded to increase the ARPU of 5G users to different degrees.\nTo promote the further development of 5G networks and encourage more users to choose and prefer 5G networks, operators need to build 5G top-quality networks for individual users to achieve full-scenario coverage in densely populated urban areas, suburban areas, and indoor areas, allowing mobile phone users to access 5G services anytime, anywhere. In addition, 5G connection experience is optimized to ensure consistent user experience."
+    },
+    {
+        "title": "Technology Helps Art, Leads a New Era",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image18.jpg",
+        "reads": "6311",
+        "likes": "7114",
+        "content": "Zhang Wenlin spoke highly of the \"Dance Storm\". He believes that since the second season's premiere, the show has brought the contestants' exquisite dance moves, the wonderful host of Mr Ho Kung, the excellent comments of the judges' tutors, and the exquisite design of the staff to the audience, dedicate a beautiful visual feast! To help achieve fantastic visual effects, Hunan Radio and TV set up a joint team with Huawei to develop a spatio-temporal condensation system for Dance Storm 2. The system supports AI algorithms such as intelligent fast focusing, butterfly shooting, zoom-in, and multi-focus, with the help of the video 3.0+ platform of device-cloud synergy, the program team has made several industry-leading achievements, such as the three-dimensional storm moment with fantastic visual changes, free-view Dance Storm program with interactive control and rotation, and dance Storm with 360-degree panoramic view. VR programs."
+    },
+    {
+        "title": "Open Intelligent Twin Ecosystem Is the Key to All-Scenario Intelligence",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image19.jpg",
+        "reads": "6341",
+        "likes": "7164",
+        "content": "Intelligent upgrade will build core competitiveness in various industries. Huawei works with partners to integrate 5G, cloud, AI, intelligent edge, and industry applications to form an integrated intelligent system and create industry-leading smart experience. In the transportation industry, the abolition of highway toll stations at the provincial boundary enables fast and insensitive traffic, greatly improving traffic efficiency and reducing logistics transportation costs. Intelligent cameras are deployed on highway portals to collect vehicle traffic data 24 hours a day and send the data to the cloud in real time over the high-speed network for real-time charging. In addition, AI models trained on the cloud can be pushed to the edge so that cameras can have capabilities such as license plate recognition and vehicle feature extraction, and the capabilities can be continuously evolved. For example, in extreme weather conditions such as rain and snow, one-click upgrade can be performed on the cloud."
+    }
+]
+
+
+
+
+export default {
+    data() {
+        return {
+            titleList: titles,
+            newsList: newsData
+        }
+    },
+    onInit() {
+        console.log("onInit::" + titles)
+    },
+    changeNewsType: function (e) {
+        var type = titles[e.index].name;
+        this.newsList = [];
+        if (type === "All") {
+            this.newsList = newsData;
+        } else {
+            var newsArray = [];
+            for (var news of newsData) {
+                if (news.type === type) {
+                    newsArray.push(news);
+                }
+            }
+            this.newsList = newsArray;
+        }
+    },
+    startAbilityContinuation(news) {
+        // this.$element('continueAbilityDialog').close();
+
+        //   console.info('featureAbility.startAbility deviceId=' + deviceId
+        //  + ' deviceName=' + deviceName);
+        var params;
+        params = {
+            title: news.title,
+            type: news.type,
+            imgUrl: news.imgUrl,
+            reads: news.reads,
+            likes: news.likes,
+            content: news.content,
+        };
+        var wantValue = {
+            bundleName: 'com.example.newsclientopenharmony',
+            abilityName: 'com.example.newsclientopenharmony.MainAbility2',
+            deviceId: '',
+            parameters: params
+            //            //params: {
+            //                "title": news.title,
+            //                "type": news.type,
+            //                "imgUrl": news.imgUrl,
+            //                "reads": news.reads,
+            //                "likes": news.likes,
+            //                "content": news.content,
+            //            //}
+        };
+
+        featureAbility.startAbility({
+            want: wantValue
+        }).then((data) => {
+            console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+        });
+        console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+        console.info('featureAbility.startAbility end');
+    },
+
+    //    itemClick(news) {
+    //        router.push({
+    //            uri: "MainAbility2/pages/index/index",
+    //            params: {
+    //                "title": news.title,
+    //                "type": news.type,
+    //                "imgUrl": news.imgUrl,
+    //                "reads": news.reads,
+    //                "likes": news.likes,
+    //                "content": news.content,
+    //            }
+    //        });
+    //
+    //    }
+}
diff --git a/NewsDemo/entry/.preview/merge_js_src/wearable/default/pages/index/index.js b/NewsDemo/entry/.preview/merge_js_src/wearable/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a9d8d96cdc0c51dedc0d6d5f530c7b2a8716a0d
--- /dev/null
+++ b/NewsDemo/entry/.preview/merge_js_src/wearable/default/pages/index/index.js
@@ -0,0 +1,264 @@
+//import {titles, newsData} from '../../../MainAbility/common/data/data.js';
+
+import featureAbility from '@ohos.ability.featureAbility';
+
+ const titles= [
+    {
+        "name": "All"
+    },
+    {
+        "name": "Health"
+    },
+    {
+        "name": "Finance"
+    },
+    {
+        "name": "Technology"
+    },
+    {
+        "name": "Sport"
+    },
+    {
+        "name": "Internet"
+    },
+    {
+        "name": "Game"
+    }
+]
+
+ const newsData = [
+    {
+        "title": "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image1.jpg",
+        "reads": "54",
+        "likes": "81",
+        "content": "Recently, at the Wireless Broadband Alliance (WBA), an international industry organization, Huawei's AirEngine Wi-Fi 6 Solution Helps Factory Digital Transformation WBA 2020 Wi-Fi Industry Best Enterprise Wi-Fi Network Award. This is the first time that a Chinese Wi-Fi 6 vendor has won this award, which reflects the full recognition of Huawei AirEngine Wi-Fi 6 by global enterprise users."
+    },
+    {
+        "title": "Latest technology and industry weather vane",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image2.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "With the large-scale commercial use of new technologies such as 5G, IoT, cloud computing, and AI, industry digital transformation has entered deep water. In addition, the sudden epidemic and carbon-neutral targets accelerate the transformation of society towards intelligence. When energy technologies are combined with power electronics and digital technologies, what direction will site energy develop?"
+    },
+    {
+        "title": "Openness and Cooperation Facilitate Industry Upgrade",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image3.jpg",
+        "reads": "74",
+        "likes": "91",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "High-voltage super-fast charging is an inevitable trend",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image4.jpg",
+        "reads": "44",
+        "likes": "82",
+        "content": "Consumers have a lot of doubts about buying electric cars, compared to fuel cars. Wang Chao pointed out that among the factors affecting the purchase of electric vehicles, charging problems account for 80 percent, with a small number of charging piles (currently, the ratio of piles is 3.2:1) and a long charging time being the first to bear the brunt. As a result, many players in the charging infrastructure sector are looking for a break. To alleviate consumers' pain points of poor charging experience, we need to improve the pile ratio and shorten the charging time to meet consumers' requirements for fast charging."
+    },
+    {
+        "title": "Huawei Releases the New Trend of Modular Power Supply, Facilitating Industry Upgrade Through Open Cooperation",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image5.jpg",
+        "reads": "73",
+        "likes": "888",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh. There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "Ten Future Trends of Digital Energy",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image6.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency.\nGreen power will benefit thousands of industries and households in the future. Green power, represented by PV, will become the main energy source. The era of price-effective PV is coming, and the integration of distributed power generation and solar storage will become an inevitable trend. Green Power will also help the ICT industry reduce its carbon footprint. In the future, we will build a \"zero-carbon network\" and \"zero-carbon\" data center. In addition, Huawei proposed the trend of full-link efficiency for the first time and implemented global optimization in terms of architecture and system."
+    },
+    {
+        "title": "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image7.jpg",
+        "reads": "123",
+        "likes": "911",
+        "content": "The holding of the National AI Contest further fulfilled the requirements of the Ministry of Science and Technology and the Ministry of Industry and Information Technology for Shenzhen to build the national new-generation AI innovation and development trial zone and the AI innovation and application pilot zone. It also promoted the integration and development of innovation elements such as industry, academia, capital, and talent, create an AI innovation atmosphere. Huawei has co-hosted two National AI Competitions in a row, aiming to promote technological progress, industrial upgrade, economic transformation, and social progress, and jointly promote the implementation of AI technologies. This is the most practical point for Huawei and the National AI Competition."
+    },
+    {
+        "title": "Enterprise data centers are moving towards autonomous driving network",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image8.jpg",
+        "reads": "754",
+        "likes": "149",
+        "content": "More than 90% of enterprises say that fully autonomous driving data center network is their goal to achieve business agility, flexibility, and cost-effectiveness. This is a key research result in the data center network Autonomous Driving Index Report released by Huawei and IDC. Autonomous driving data center network helps enterprises restructure network architectures and operation models and enhance business resilience and continuity. In addition, regardless of the current level of data center network automation, IDC offers some guidance on how enterprises can move forward and move towards full automation."
+    },
+    {
+        "title": "One optical fiber lights up a green smart room",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image9.jpg",
+        "reads": "631",
+        "likes": "714",
+        "content": "At the 2020 China Real Estate Development Summit held in Guangzhou, Jin Yuzhi, President of Huawei's Transmission and Access Product Line, delivered a keynote speech entitled \"One Fiber Lights Green Smart Rooms\" to discuss the convergence development trend of optical networks and real estate industries, proposes that optical fibers are the standard configuration of F5G smart real estate, and shares seven reasons for choosing Fiber to the Room (FTTR) all-optical home networking, we call on industry partners to work together to build an F5G real gigabit all-optical room ecosystem."
+    },
+    {
+        "title": "BWS2020: Accelerate Network Autonomy and Enable Agile Business",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image10.jpg",
+        "reads": "53",
+        "likes": "824",
+        "content": "Currently, millions of enterprises embrace changes and accelerate their cloudification. SaaS traffic surges. Enterprise cloudification and multi-cloud collaboration become the new focus of cloud-network synergy . To address this challenge, Guo Dazheng, president of Huawei's data communications field, said: \"In cloud-network scenarios, iMaster NCE implements network as a service to help carriers provide cloud-network integration services and meet enterprise cloud access requirements.\" In 5G transport scenarios, improve the automation capability of the entire process of planning, construction, maintenance, and optimization to meet the requirements of large-scale 5G network construction and cloud network cost reduction and efficiency improvement."
+    },
+    {
+        "title": "Trust technology, embrace openness, and share the world prosperity brought by technology",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image11.jpg",
+        "reads": "1500",
+        "likes": "3542",
+        "content": "Huawei successfully held the TrustInTech 2020 online summit today. Ryan Ding, Executive Director of Huawei, President of the Carrier BG, and Jim Rogers, a senior Wall Street investor, GSMA Chief Marketing Officer Stephanie Lynch-Habib and other ICT industry experts and economists from around the world attended the summit. The summit pointed out that ICT has become a digital foundation for economic development and people's livelihood. In an era of accelerated commercial use of 5G, the world needs to embrace openness and cooperation to eliminate unnecessary resistance and fears about new technologies and transnational cooperation, thereby sharing the world prosperity brought by technology."
+    },
+    {
+        "title": "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image12.jpg",
+        "reads": "7451",
+        "likes": "9511",
+        "content": "Today, the Leading Technology Award was unveiled at the 7th World Internet Conference. As the industry's first systematic technical reference architecture for government and enterprise intelligence upgrade, intelligent virtual appliances have been recognized by experts and judges and won the Leading Scientific Achievement Award for their exploration and practice in various industries. This is the fifth time Huawei has won this award since 2016. The World Internet Leading Science and Technology Award showcases the latest technologies in the global ICT field and focuses on the best practices of innovative technologies in the fields of science and technology fight against epidemics, recovery of work, and promotion of digital economic development and cooperation."
+    },
+    {
+        "title": "4G/5G FWA, New Engine for Revenue Growth",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image13.jpg",
+        "reads": "445",
+        "likes": "872",
+        "content": "The reason why FWA is growing so fast is that it provides new opportunities for carriers in the consumer market. For example, a Philippine operator used 4G FWA to rapidly develop home broadband users. According to its third quarter financial report, the operator has successfully developed 2.78 million new users this year, accounting for 80% of the total broadband users. The percentage of broadband revenue increased from 12.3% in 2017 to 17.9%. With the development of wireless technologies, 5G FWA can provide gigabit home access experience similar to that of optical fibers, meeting services such as 4K/8K HD video and AR/VR interactive experience."
+    },
+    {
+        "title": "Down! CPI released in November! These things are cheap",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image14.jpg",
+        "reads": "734",
+        "likes": "8788",
+        "content": "Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap."
+    },
+    {
+        "title": "Comedy movie \"Big Red Envelope\" is set to celebrate the New Year",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image15.jpg",
+        "reads": "1010",
+        "likes": "3534",
+        "content": "Comedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New Year"
+    },
+    {
+        "title": "Three living things are smart",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image16.jpg",
+        "reads": "1243",
+        "likes": "9141",
+        "content": "Lifan said at the press conference: \"Retrospective on the journey, we have always adhered to the spirit of initiative, innovation and science. Build core capabilities in terms of networks, technologies, and platforms, and deliver excellent services, technologies, and quality. Internal maintenance, optimization, and sharing are in place. Carriers, equipment vendors, and partners are working together to build an end-to-end network capability and win-win ecosystem to provide users with the best 5G experience and services.\""
+    },
+    {
+        "title": "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image17.jpg",
+        "reads": "7574",
+        "likes": "1439",
+        "content": "The 5G industry is developing faster than the previous standards. Currently, there are more than 100 5G commercial networks around the world, and the price of entry-level 5G mobile phones has fallen to CNY1,000, which has led to the rapid growth of 5G users worldwide. Thanks to this, leading operators have enjoyed the data dividend brought by 5G. The multi-dimensional package design and 5G message and 5G new communication services are upgraded to increase the ARPU of 5G users to different degrees.\nTo promote the further development of 5G networks and encourage more users to choose and prefer 5G networks, operators need to build 5G top-quality networks for individual users to achieve full-scenario coverage in densely populated urban areas, suburban areas, and indoor areas, allowing mobile phone users to access 5G services anytime, anywhere. In addition, 5G connection experience is optimized to ensure consistent user experience."
+    },
+    {
+        "title": "Technology Helps Art, Leads a New Era",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image18.jpg",
+        "reads": "6311",
+        "likes": "7114",
+        "content": "Zhang Wenlin spoke highly of the \"Dance Storm\". He believes that since the second season's premiere, the show has brought the contestants' exquisite dance moves, the wonderful host of Mr Ho Kung, the excellent comments of the judges' tutors, and the exquisite design of the staff to the audience, dedicate a beautiful visual feast! To help achieve fantastic visual effects, Hunan Radio and TV set up a joint team with Huawei to develop a spatio-temporal condensation system for Dance Storm 2. The system supports AI algorithms such as intelligent fast focusing, butterfly shooting, zoom-in, and multi-focus, with the help of the video 3.0+ platform of device-cloud synergy, the program team has made several industry-leading achievements, such as the three-dimensional storm moment with fantastic visual changes, free-view Dance Storm program with interactive control and rotation, and dance Storm with 360-degree panoramic view. VR programs."
+    },
+    {
+        "title": "Open Intelligent Twin Ecosystem Is the Key to All-Scenario Intelligence",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image19.jpg",
+        "reads": "6341",
+        "likes": "7164",
+        "content": "Intelligent upgrade will build core competitiveness in various industries. Huawei works with partners to integrate 5G, cloud, AI, intelligent edge, and industry applications to form an integrated intelligent system and create industry-leading smart experience. In the transportation industry, the abolition of highway toll stations at the provincial boundary enables fast and insensitive traffic, greatly improving traffic efficiency and reducing logistics transportation costs. Intelligent cameras are deployed on highway portals to collect vehicle traffic data 24 hours a day and send the data to the cloud in real time over the high-speed network for real-time charging. In addition, AI models trained on the cloud can be pushed to the edge so that cameras can have capabilities such as license plate recognition and vehicle feature extraction, and the capabilities can be continuously evolved. For example, in extreme weather conditions such as rain and snow, one-click upgrade can be performed on the cloud."
+    }
+]
+
+
+
+
+export default {
+    data() {
+        return {
+            titleList: titles,
+            newsList: newsData
+        }
+    },
+    onInit() {
+        console.log("onInit::" + titles)
+    },
+    changeNewsType: function (e) {
+        var type = titles[e.index].name;
+        this.newsList = [];
+        if (type === "All") {
+            this.newsList = newsData;
+        } else {
+            var newsArray = [];
+            for (var news of newsData) {
+                if (news.type === type) {
+                    newsArray.push(news);
+                }
+            }
+            this.newsList = newsArray;
+        }
+    },
+    startAbilityContinuation(news) {
+        // this.$element('continueAbilityDialog').close();
+
+        //   console.info('featureAbility.startAbility deviceId=' + deviceId
+        //  + ' deviceName=' + deviceName);
+        var params;
+        params = {
+            title: news.title,
+            type: news.type,
+            imgUrl: news.imgUrl,
+            reads: news.reads,
+            likes: news.likes,
+            content: news.content,
+        };
+        var wantValue = {
+            bundleName: 'com.example.newsclientopenharmony',
+            abilityName: 'com.example.newsclientopenharmony.MainAbility2',
+            deviceId: '',
+            parameters: params
+            //            //params: {
+            //                "title": news.title,
+            //                "type": news.type,
+            //                "imgUrl": news.imgUrl,
+            //                "reads": news.reads,
+            //                "likes": news.likes,
+            //                "content": news.content,
+            //            //}
+        };
+
+        featureAbility.startAbility({
+            want: wantValue
+        }).then((data) => {
+            console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+        });
+        console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+        console.info('featureAbility.startAbility end');
+    },
+
+    //    itemClick(news) {
+    //        router.push({
+    //            uri: "MainAbility2/pages/index/index",
+    //            params: {
+    //                "title": news.title,
+    //                "type": news.type,
+    //                "imgUrl": news.imgUrl,
+    //                "reads": news.reads,
+    //                "likes": news.likes,
+    //                "content": news.content,
+    //            }
+    //        });
+    //
+    //    }
+}
diff --git a/NewsDemo/entry/build.gradle b/NewsDemo/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..a87f60fc966c1b5426ffbb7a268c005d768687a1
--- /dev/null
+++ b/NewsDemo/entry/build.gradle
@@ -0,0 +1,21 @@
+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
+    defaultConfig {
+        compatibleSdkVersion 7
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/NewsDemo/entry/package.json b/NewsDemo/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/NewsDemo/entry/package.json
@@ -0,0 +1 @@
+{}
diff --git a/NewsDemo/entry/proguard-rules.pro b/NewsDemo/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/NewsDemo/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/config.json b/NewsDemo/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..d3ed04fb3427352b7c7938ee91f6389a1ab2190e
--- /dev/null
+++ b/NewsDemo/entry/src/main/config.json
@@ -0,0 +1,85 @@
+{
+  "app": {
+    "bundleName": "com.huawei.newsdemooh",
+    "vendor": "huawei",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.huawei.newsdemooh",
+    "name": ".MyApplication",
+    "mainAbility": ".MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "srcPath": "MainAbility",
+        "name": ".MainAbility",
+        "srcLanguage": "js",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      },
+      {
+        "orientation": "unspecified",
+        "visible": true,
+        "srcPath": "MainAbility2",
+        "name": ".MainAbility2",
+        "srcLanguage": "js",
+        "icon": "$media:icon",
+        "description": "$string:mainability2_description",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": ".MainAbility",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": ".MainAbility2",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility/app.js b/NewsDemo/entry/src/main/js/MainAbility/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/NewsDemo/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/NewsDemo/entry/src/main/js/MainAbility/common/data/data.js b/NewsDemo/entry/src/main/js/MainAbility/common/data/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..f76137341d300fd7566c565a5190f2f7ed39d4ab
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility/common/data/data.js
@@ -0,0 +1,184 @@
+
+const titles= [
+    {
+        "name": "All"
+    },
+    {
+        "name": "Health"
+    },
+    {
+        "name": "Finance"
+    },
+    {
+        "name": "Technology"
+    },
+    {
+        "name": "Sport"
+    },
+    {
+        "name": "Internet"
+    },
+    {
+        "name": "Game"
+    }
+]
+
+const newsData = [
+    {
+        "title": "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image1.jpg",
+        "reads": "54",
+        "likes": "81",
+        "content": "Recently, at the Wireless Broadband Alliance (WBA), an international industry organization, Huawei's AirEngine Wi-Fi 6 Solution Helps Factory Digital Transformation WBA 2020 Wi-Fi Industry Best Enterprise Wi-Fi Network Award. This is the first time that a Chinese Wi-Fi 6 vendor has won this award, which reflects the full recognition of Huawei AirEngine Wi-Fi 6 by global enterprise users."
+    },
+    {
+        "title": "Latest technology and industry weather vane",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image2.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "With the large-scale commercial use of new technologies such as 5G, IoT, cloud computing, and AI, industry digital transformation has entered deep water. In addition, the sudden epidemic and carbon-neutral targets accelerate the transformation of society towards intelligence. When energy technologies are combined with power electronics and digital technologies, what direction will site energy develop?"
+    },
+    {
+        "title": "Openness and Cooperation Facilitate Industry Upgrade",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image3.jpg",
+        "reads": "74",
+        "likes": "91",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "High-voltage super-fast charging is an inevitable trend",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image4.jpg",
+        "reads": "44",
+        "likes": "82",
+        "content": "Consumers have a lot of doubts about buying electric cars, compared to fuel cars. Wang Chao pointed out that among the factors affecting the purchase of electric vehicles, charging problems account for 80 percent, with a small number of charging piles (currently, the ratio of piles is 3.2:1) and a long charging time being the first to bear the brunt. As a result, many players in the charging infrastructure sector are looking for a break. To alleviate consumers' pain points of poor charging experience, we need to improve the pile ratio and shorten the charging time to meet consumers' requirements for fast charging."
+    },
+    {
+        "title": "Huawei Releases the New Trend of Modular Power Supply, Facilitating Industry Upgrade Through Open Cooperation",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image5.jpg",
+        "reads": "73",
+        "likes": "888",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh. There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "Ten Future Trends of Digital Energy",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image6.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency.\nGreen power will benefit thousands of industries and households in the future. Green power, represented by PV, will become the main energy source. The era of price-effective PV is coming, and the integration of distributed power generation and solar storage will become an inevitable trend. Green Power will also help the ICT industry reduce its carbon footprint. In the future, we will build a \"zero-carbon network\" and \"zero-carbon\" data center. In addition, Huawei proposed the trend of full-link efficiency for the first time and implemented global optimization in terms of architecture and system."
+    },
+    {
+        "title": "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image7.jpg",
+        "reads": "123",
+        "likes": "911",
+        "content": "The holding of the National AI Contest further fulfilled the requirements of the Ministry of Science and Technology and the Ministry of Industry and Information Technology for Shenzhen to build the national new-generation AI innovation and development trial zone and the AI innovation and application pilot zone. It also promoted the integration and development of innovation elements such as industry, academia, capital, and talent, create an AI innovation atmosphere. Huawei has co-hosted two National AI Competitions in a row, aiming to promote technological progress, industrial upgrade, economic transformation, and social progress, and jointly promote the implementation of AI technologies. This is the most practical point for Huawei and the National AI Competition."
+    },
+    {
+        "title": "Enterprise data centers are moving towards autonomous driving network",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image8.jpg",
+        "reads": "754",
+        "likes": "149",
+        "content": "More than 90% of enterprises say that fully autonomous driving data center network is their goal to achieve business agility, flexibility, and cost-effectiveness. This is a key research result in the data center network Autonomous Driving Index Report released by Huawei and IDC. Autonomous driving data center network helps enterprises restructure network architectures and operation models and enhance business resilience and continuity. In addition, regardless of the current level of data center network automation, IDC offers some guidance on how enterprises can move forward and move towards full automation."
+    },
+    {
+        "title": "One optical fiber lights up a green smart room",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image9.jpg",
+        "reads": "631",
+        "likes": "714",
+        "content": "At the 2020 China Real Estate Development Summit held in Guangzhou, Jin Yuzhi, President of Huawei's Transmission and Access Product Line, delivered a keynote speech entitled \"One Fiber Lights Green Smart Rooms\" to discuss the convergence development trend of optical networks and real estate industries, proposes that optical fibers are the standard configuration of F5G smart real estate, and shares seven reasons for choosing Fiber to the Room (FTTR) all-optical home networking, we call on industry partners to work together to build an F5G real gigabit all-optical room ecosystem."
+    },
+    {
+        "title": "BWS2020: Accelerate Network Autonomy and Enable Agile Business",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image10.jpg",
+        "reads": "53",
+        "likes": "824",
+        "content": "Currently, millions of enterprises embrace changes and accelerate their cloudification. SaaS traffic surges. Enterprise cloudification and multi-cloud collaboration become the new focus of cloud-network synergy . To address this challenge, Guo Dazheng, president of Huawei's data communications field, said: \"In cloud-network scenarios, iMaster NCE implements network as a service to help carriers provide cloud-network integration services and meet enterprise cloud access requirements.\" In 5G transport scenarios, improve the automation capability of the entire process of planning, construction, maintenance, and optimization to meet the requirements of large-scale 5G network construction and cloud network cost reduction and efficiency improvement."
+    },
+    {
+        "title": "Trust technology, embrace openness, and share the world prosperity brought by technology",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image11.jpg",
+        "reads": "1500",
+        "likes": "3542",
+        "content": "Huawei successfully held the TrustInTech 2020 online summit today. Ryan Ding, Executive Director of Huawei, President of the Carrier BG, and Jim Rogers, a senior Wall Street investor, GSMA Chief Marketing Officer Stephanie Lynch-Habib and other ICT industry experts and economists from around the world attended the summit. The summit pointed out that ICT has become a digital foundation for economic development and people's livelihood. In an era of accelerated commercial use of 5G, the world needs to embrace openness and cooperation to eliminate unnecessary resistance and fears about new technologies and transnational cooperation, thereby sharing the world prosperity brought by technology."
+    },
+    {
+        "title": "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image12.jpg",
+        "reads": "7451",
+        "likes": "9511",
+        "content": "Today, the Leading Technology Award was unveiled at the 7th World Internet Conference. As the industry's first systematic technical reference architecture for government and enterprise intelligence upgrade, intelligent virtual appliances have been recognized by experts and judges and won the Leading Scientific Achievement Award for their exploration and practice in various industries. This is the fifth time Huawei has won this award since 2016. The World Internet Leading Science and Technology Award showcases the latest technologies in the global ICT field and focuses on the best practices of innovative technologies in the fields of science and technology fight against epidemics, recovery of work, and promotion of digital economic development and cooperation."
+    },
+    {
+        "title": "4G/5G FWA, New Engine for Revenue Growth",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image13.jpg",
+        "reads": "445",
+        "likes": "872",
+        "content": "The reason why FWA is growing so fast is that it provides new opportunities for carriers in the consumer market. For example, a Philippine operator used 4G FWA to rapidly develop home broadband users. According to its third quarter financial report, the operator has successfully developed 2.78 million new users this year, accounting for 80% of the total broadband users. The percentage of broadband revenue increased from 12.3% in 2017 to 17.9%. With the development of wireless technologies, 5G FWA can provide gigabit home access experience similar to that of optical fibers, meeting services such as 4K/8K HD video and AR/VR interactive experience."
+    },
+    {
+        "title": "Down! CPI released in November! These things are cheap",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image14.jpg",
+        "reads": "734",
+        "likes": "8788",
+        "content": "Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap."
+    },
+    {
+        "title": "Comedy movie \"Big Red Envelope\" is set to celebrate the New Year",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image15.jpg",
+        "reads": "1010",
+        "likes": "3534",
+        "content": "Comedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New Year"
+    },
+    {
+        "title": "Three living things are smart",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image16.jpg",
+        "reads": "1243",
+        "likes": "9141",
+        "content": "Lifan said at the press conference: \"Retrospective on the journey, we have always adhered to the spirit of initiative, innovation and science. Build core capabilities in terms of networks, technologies, and platforms, and deliver excellent services, technologies, and quality. Internal maintenance, optimization, and sharing are in place. Carriers, equipment vendors, and partners are working together to build an end-to-end network capability and win-win ecosystem to provide users with the best 5G experience and services.\""
+    },
+    {
+        "title": "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image17.jpg",
+        "reads": "7574",
+        "likes": "1439",
+        "content": "The 5G industry is developing faster than the previous standards. Currently, there are more than 100 5G commercial networks around the world, and the price of entry-level 5G mobile phones has fallen to CNY1,000, which has led to the rapid growth of 5G users worldwide. Thanks to this, leading operators have enjoyed the data dividend brought by 5G. The multi-dimensional package design and 5G message and 5G new communication services are upgraded to increase the ARPU of 5G users to different degrees.\nTo promote the further development of 5G networks and encourage more users to choose and prefer 5G networks, operators need to build 5G top-quality networks for individual users to achieve full-scenario coverage in densely populated urban areas, suburban areas, and indoor areas, allowing mobile phone users to access 5G services anytime, anywhere. In addition, 5G connection experience is optimized to ensure consistent user experience."
+    },
+    {
+        "title": "Technology Helps Art, Leads a New Era",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image18.jpg",
+        "reads": "6311",
+        "likes": "7114",
+        "content": "Zhang Wenlin spoke highly of the \"Dance Storm\". He believes that since the second season's premiere, the show has brought the contestants' exquisite dance moves, the wonderful host of Mr Ho Kung, the excellent comments of the judges' tutors, and the exquisite design of the staff to the audience, dedicate a beautiful visual feast! To help achieve fantastic visual effects, Hunan Radio and TV set up a joint team with Huawei to develop a spatio-temporal condensation system for Dance Storm 2. The system supports AI algorithms such as intelligent fast focusing, butterfly shooting, zoom-in, and multi-focus, with the help of the video 3.0+ platform of device-cloud synergy, the program team has made several industry-leading achievements, such as the three-dimensional storm moment with fantastic visual changes, free-view Dance Storm program with interactive control and rotation, and dance Storm with 360-degree panoramic view. VR programs."
+    },
+    {
+        "title": "Open Intelligent Twin Ecosystem Is the Key to All-Scenario Intelligence",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image19.jpg",
+        "reads": "6341",
+        "likes": "7164",
+        "content": "Intelligent upgrade will build core competitiveness in various industries. Huawei works with partners to integrate 5G, cloud, AI, intelligent edge, and industry applications to form an integrated intelligent system and create industry-leading smart experience. In the transportation industry, the abolition of highway toll stations at the provincial boundary enables fast and insensitive traffic, greatly improving traffic efficiency and reducing logistics transportation costs. Intelligent cameras are deployed on highway portals to collect vehicle traffic data 24 hours a day and send the data to the cloud in real time over the high-speed network for real-time charging. In addition, AI models trained on the cloud can be pushed to the edge so that cameras can have capabilities such as license plate recognition and vehicle feature extraction, and the capabilities can be continuously evolved. For example, in extreme weather conditions such as rain and snow, one-click upgrade can be performed on the cloud."
+    }
+]
+
+export {titles, newsData}
+
+
+
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_good.png b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_good.png
new file mode 100644
index 0000000000000000000000000000000000000000..e306e705fe96f10576fa393c3390ea63f26408dd
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_good.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_message.png b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..b81007d64cbe5265df414a6dab58cd103cd5a521
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_message.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_share.png b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_share.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fb1cae93ea21b0712abc939b828ea92ffcb07f4
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_share.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_star.png b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_star.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ace4c20d2f949b567fc960d205c345273fadee2
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/icon_star.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image1.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bfe2ae5849d6b022c2eab195f0fc0c04721db285
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image1.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image10.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..781936afc0354e0f22d1b77339968927c29ffb36
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image10.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image11.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image11.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f2862e308f284c5cc87d06c5316d5edec86028f3
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image11.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image12.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image12.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0425178705c4e56888d7df2b308efdfcd7ac8640
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image12.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image13.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image13.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b349d81e1dce2d2a553baaf26a5b7fde58d8beac
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image13.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image14.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image14.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3d1ca269b529e890a3e154ac081e93487f5743b
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image14.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image15.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image15.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..54775977a85c165759a22b8c8e956ecc59603ff8
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image15.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image16.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image16.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17780bfc6f7f014b1920fa5159cb1a4699a5de49
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image16.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image17.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image17.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a34dcd88e1507fd07d509fcffe024dfe7a59ab39
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image17.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image18.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image18.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ad79353b9bcfb2cd5b05ef6296f29e3ac826d3ca
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image18.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image19.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image19.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5e8c9267e9632b829492f6d93bfebfcb9c0dc114
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image19.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image2.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2322f158e6a108b8a4f2bbcb20204bd7974c12d9
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image2.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image3.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6da8be18ed043a9fc815689e7482e9fe04969f1a
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image3.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image4.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..78bfe6f367b9534e1236725b50a2b98934a76827
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image4.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image5.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bda3780f9779e2169cea6b3cd0aae77bc6e6cc95
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image5.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image6.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..60ebfaa4bd05ca32c40b99f247a9d2998d85dd69
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image6.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image7.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bfc4fb58e7a5ca3062dc775721f9106d333adaec
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image7.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image8.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e58a289f7d136043766f33f168a87af367c370f3
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image8.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image9.jpg b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e7de107a86d8a741fa4112c3df79c60a1ac086e5
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility/common/images/news_image9.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility/i18n/en-US.json b/NewsDemo/entry/src/main/js/MainAbility/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..547e7e13afae9b28f836a4d857e576413ea82bc5
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility/i18n/en-US.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back",
+    "localhost": "This device"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility/i18n/zh-CN.json b/NewsDemo/entry/src/main/js/MainAbility/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..38de361bd7bac39682ded8a4839f9cf7822fbdf0
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility/i18n/zh-CN.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回",
+    "localhost": "本机"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.css b/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..41db1be1fdd843c2b289f3c44f8b2547554aa574
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.css
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.tab-bar {
+    height: 80px;
+}
+
+.tab-text {
+    font-size: 46px;
+    text-align: center;
+}
+
+.tab-content {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}
+
+.item-content {
+    height: 100%;
+    justify-content: center;
+}
+
+.list {
+    width: 100%;
+    padding: 20px
+}
+
+.text {
+    font-size: 36px;
+    margin: 10px;
+    height: 180px;
+    max-lines: 4;
+    flex-weight: 3
+}
+
+.image {
+    margin: 10px;
+    height: 180px;
+    flex-weight: 2
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml b/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..ade9032307a08c4dea65526bc83ba53c6cec50d6
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.hml
@@ -0,0 +1,45 @@
+<!--
+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="container">
+    <tabs index="0" vertical="false" onchange="changeNewsType">
+        <tab-bar class="tab-bar" mode="scrollable">
+            <text class="tab-text" for="{{ title in titleList }}">{{ title.name }} </text>
+        </tab-bar>
+
+        <tab-content class="tab-content" scrollable="true">
+            <div class="item-content" for="{{ title in titleList }}">
+                <list class="list">
+                    <list-item for="{{ news in newsList }}" onclick="startAbilityContinuation(news)">
+                        <div style="flex-direction : column">
+
+                            <div style="flex-direction : row">
+                                <text class="text">
+                                    {{ news.title }}
+                                </text>
+                                <image class="image" src="{{ news.imgUrl }}">
+                                </image>
+                            </div>
+
+                            <div style="height : 2px; width : 100%; background-color : #97d2d4d4;">
+                            </div>
+                        </div>
+                    </list-item>
+                </list>
+            </div>
+        </tab-content>
+    </tabs>
+
+</div>
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.js b/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5745b3df993cdda59a8dbcab1f5f11a640731c24
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility/pages/index/index.js
@@ -0,0 +1,248 @@
+/*
+ * 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.
+ */
+
+import featureAbility from '@ohos.ability.featureAbility';
+
+const titles = [
+    {
+        "name": "All"
+    },
+    {
+        "name": "Health"
+    },
+    {
+        "name": "Finance"
+    },
+    {
+        "name": "Technology"
+    },
+    {
+        "name": "Sport"
+    },
+    {
+        "name": "Internet"
+    },
+    {
+        "name": "Game"
+    }
+]
+
+const newsData = [
+    {
+        "title": "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image1.jpg",
+        "reads": "54",
+        "likes": "81",
+        "content": "Recently, at the Wireless Broadband Alliance (WBA), an international industry organization, Huawei's AirEngine Wi-Fi 6 Solution Helps Factory Digital Transformation WBA 2020 Wi-Fi Industry Best Enterprise Wi-Fi Network Award. This is the first time that a Chinese Wi-Fi 6 vendor has won this award, which reflects the full recognition of Huawei AirEngine Wi-Fi 6 by global enterprise users."
+    },
+    {
+        "title": "Latest technology and industry weather vane",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image2.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "With the large-scale commercial use of new technologies such as 5G, IoT, cloud computing, and AI, industry digital transformation has entered deep water. In addition, the sudden epidemic and carbon-neutral targets accelerate the transformation of society towards intelligence. When energy technologies are combined with power electronics and digital technologies, what direction will site energy develop?"
+    },
+    {
+        "title": "Openness and Cooperation Facilitate Industry Upgrade",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image3.jpg",
+        "reads": "74",
+        "likes": "91",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "High-voltage super-fast charging is an inevitable trend",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image4.jpg",
+        "reads": "44",
+        "likes": "82",
+        "content": "Consumers have a lot of doubts about buying electric cars, compared to fuel cars. Wang Chao pointed out that among the factors affecting the purchase of electric vehicles, charging problems account for 80 percent, with a small number of charging piles (currently, the ratio of piles is 3.2:1) and a long charging time being the first to bear the brunt. As a result, many players in the charging infrastructure sector are looking for a break. To alleviate consumers' pain points of poor charging experience, we need to improve the pile ratio and shorten the charging time to meet consumers' requirements for fast charging."
+    },
+    {
+        "title": "Huawei Releases the New Trend of Modular Power Supply, Facilitating Industry Upgrade Through Open Cooperation",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image5.jpg",
+        "reads": "73",
+        "likes": "888",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh. There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "Ten Future Trends of Digital Energy",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image6.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency.\nGreen power will benefit thousands of industries and households in the future. Green power, represented by PV, will become the main energy source. The era of price-effective PV is coming, and the integration of distributed power generation and solar storage will become an inevitable trend. Green Power will also help the ICT industry reduce its carbon footprint. In the future, we will build a \"zero-carbon network\" and \"zero-carbon\" data center. In addition, Huawei proposed the trend of full-link efficiency for the first time and implemented global optimization in terms of architecture and system."
+    },
+    {
+        "title": "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image7.jpg",
+        "reads": "123",
+        "likes": "911",
+        "content": "The holding of the National AI Contest further fulfilled the requirements of the Ministry of Science and Technology and the Ministry of Industry and Information Technology for Shenzhen to build the national new-generation AI innovation and development trial zone and the AI innovation and application pilot zone. It also promoted the integration and development of innovation elements such as industry, academia, capital, and talent, create an AI innovation atmosphere. Huawei has co-hosted two National AI Competitions in a row, aiming to promote technological progress, industrial upgrade, economic transformation, and social progress, and jointly promote the implementation of AI technologies. This is the most practical point for Huawei and the National AI Competition."
+    },
+    {
+        "title": "Enterprise data centers are moving towards autonomous driving network",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image8.jpg",
+        "reads": "754",
+        "likes": "149",
+        "content": "More than 90% of enterprises say that fully autonomous driving data center network is their goal to achieve business agility, flexibility, and cost-effectiveness. This is a key research result in the data center network Autonomous Driving Index Report released by Huawei and IDC. Autonomous driving data center network helps enterprises restructure network architectures and operation models and enhance business resilience and continuity. In addition, regardless of the current level of data center network automation, IDC offers some guidance on how enterprises can move forward and move towards full automation."
+    },
+    {
+        "title": "One optical fiber lights up a green smart room",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image9.jpg",
+        "reads": "631",
+        "likes": "714",
+        "content": "At the 2020 China Real Estate Development Summit held in Guangzhou, Jin Yuzhi, President of Huawei's Transmission and Access Product Line, delivered a keynote speech entitled \"One Fiber Lights Green Smart Rooms\" to discuss the convergence development trend of optical networks and real estate industries, proposes that optical fibers are the standard configuration of F5G smart real estate, and shares seven reasons for choosing Fiber to the Room (FTTR) all-optical home networking, we call on industry partners to work together to build an F5G real gigabit all-optical room ecosystem."
+    },
+    {
+        "title": "BWS2020: Accelerate Network Autonomy and Enable Agile Business",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image10.jpg",
+        "reads": "53",
+        "likes": "824",
+        "content": "Currently, millions of enterprises embrace changes and accelerate their cloudification. SaaS traffic surges. Enterprise cloudification and multi-cloud collaboration become the new focus of cloud-network synergy . To address this challenge, Guo Dazheng, president of Huawei's data communications field, said: \"In cloud-network scenarios, iMaster NCE implements network as a service to help carriers provide cloud-network integration services and meet enterprise cloud access requirements.\" In 5G transport scenarios, improve the automation capability of the entire process of planning, construction, maintenance, and optimization to meet the requirements of large-scale 5G network construction and cloud network cost reduction and efficiency improvement."
+    },
+    {
+        "title": "Trust technology, embrace openness, and share the world prosperity brought by technology",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image11.jpg",
+        "reads": "1500",
+        "likes": "3542",
+        "content": "Huawei successfully held the TrustInTech 2020 online summit today. Ryan Ding, Executive Director of Huawei, President of the Carrier BG, and Jim Rogers, a senior Wall Street investor, GSMA Chief Marketing Officer Stephanie Lynch-Habib and other ICT industry experts and economists from around the world attended the summit. The summit pointed out that ICT has become a digital foundation for economic development and people's livelihood. In an era of accelerated commercial use of 5G, the world needs to embrace openness and cooperation to eliminate unnecessary resistance and fears about new technologies and transnational cooperation, thereby sharing the world prosperity brought by technology."
+    },
+    {
+        "title": "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image12.jpg",
+        "reads": "7451",
+        "likes": "9511",
+        "content": "Today, the Leading Technology Award was unveiled at the 7th World Internet Conference. As the industry's first systematic technical reference architecture for government and enterprise intelligence upgrade, intelligent virtual appliances have been recognized by experts and judges and won the Leading Scientific Achievement Award for their exploration and practice in various industries. This is the fifth time Huawei has won this award since 2016. The World Internet Leading Science and Technology Award showcases the latest technologies in the global ICT field and focuses on the best practices of innovative technologies in the fields of science and technology fight against epidemics, recovery of work, and promotion of digital economic development and cooperation."
+    },
+    {
+        "title": "4G/5G FWA, New Engine for Revenue Growth",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image13.jpg",
+        "reads": "445",
+        "likes": "872",
+        "content": "The reason why FWA is growing so fast is that it provides new opportunities for carriers in the consumer market. For example, a Philippine operator used 4G FWA to rapidly develop home broadband users. According to its third quarter financial report, the operator has successfully developed 2.78 million new users this year, accounting for 80% of the total broadband users. The percentage of broadband revenue increased from 12.3% in 2017 to 17.9%. With the development of wireless technologies, 5G FWA can provide gigabit home access experience similar to that of optical fibers, meeting services such as 4K/8K HD video and AR/VR interactive experience."
+    },
+    {
+        "title": "Down! CPI released in November! These things are cheap",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image14.jpg",
+        "reads": "734",
+        "likes": "8788",
+        "content": "Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap."
+    },
+    {
+        "title": "Comedy movie \"Big Red Envelope\" is set to celebrate the New Year",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image15.jpg",
+        "reads": "1010",
+        "likes": "3534",
+        "content": "Comedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New Year"
+    },
+    {
+        "title": "Three living things are smart",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image16.jpg",
+        "reads": "1243",
+        "likes": "9141",
+        "content": "Lifan said at the press conference: \"Retrospective on the journey, we have always adhered to the spirit of initiative, innovation and science. Build core capabilities in terms of networks, technologies, and platforms, and deliver excellent services, technologies, and quality. Internal maintenance, optimization, and sharing are in place. Carriers, equipment vendors, and partners are working together to build an end-to-end network capability and win-win ecosystem to provide users with the best 5G experience and services.\""
+    },
+    {
+        "title": "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image17.jpg",
+        "reads": "7574",
+        "likes": "1439",
+        "content": "The 5G industry is developing faster than the previous standards. Currently, there are more than 100 5G commercial networks around the world, and the price of entry-level 5G mobile phones has fallen to CNY1,000, which has led to the rapid growth of 5G users worldwide. Thanks to this, leading operators have enjoyed the data dividend brought by 5G. The multi-dimensional package design and 5G message and 5G new communication services are upgraded to increase the ARPU of 5G users to different degrees.\nTo promote the further development of 5G networks and encourage more users to choose and prefer 5G networks, operators need to build 5G top-quality networks for individual users to achieve full-scenario coverage in densely populated urban areas, suburban areas, and indoor areas, allowing mobile phone users to access 5G services anytime, anywhere. In addition, 5G connection experience is optimized to ensure consistent user experience."
+    },
+    {
+        "title": "Technology Helps Art, Leads a New Era",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image18.jpg",
+        "reads": "6311",
+        "likes": "7114",
+        "content": "Zhang Wenlin spoke highly of the \"Dance Storm\". He believes that since the second season's premiere, the show has brought the contestants' exquisite dance moves, the wonderful host of Mr Ho Kung, the excellent comments of the judges' tutors, and the exquisite design of the staff to the audience, dedicate a beautiful visual feast! To help achieve fantastic visual effects, Hunan Radio and TV set up a joint team with Huawei to develop a spatio-temporal condensation system for Dance Storm 2. The system supports AI algorithms such as intelligent fast focusing, butterfly shooting, zoom-in, and multi-focus, with the help of the video 3.0+ platform of device-cloud synergy, the program team has made several industry-leading achievements, such as the three-dimensional storm moment with fantastic visual changes, free-view Dance Storm program with interactive control and rotation, and dance Storm with 360-degree panoramic view. VR programs."
+    },
+    {
+        "title": "Open Intelligent Twin Ecosystem Is the Key to All-Scenario Intelligence",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image19.jpg",
+        "reads": "6341",
+        "likes": "7164",
+        "content": "Intelligent upgrade will build core competitiveness in various industries. Huawei works with partners to integrate 5G, cloud, AI, intelligent edge, and industry applications to form an integrated intelligent system and create industry-leading smart experience. In the transportation industry, the abolition of highway toll stations at the provincial boundary enables fast and insensitive traffic, greatly improving traffic efficiency and reducing logistics transportation costs. Intelligent cameras are deployed on highway portals to collect vehicle traffic data 24 hours a day and send the data to the cloud in real time over the high-speed network for real-time charging. In addition, AI models trained on the cloud can be pushed to the edge so that cameras can have capabilities such as license plate recognition and vehicle feature extraction, and the capabilities can be continuously evolved. For example, in extreme weather conditions such as rain and snow, one-click upgrade can be performed on the cloud."
+    }
+]
+
+
+export default {
+    data() {
+        return {
+            titleList: titles,
+            newsList: newsData
+        }
+    },
+    onInit() {
+        console.log("onInit::" + titles)
+    },
+    changeNewsType: function (e) {
+        var type = titles[e.index].name;
+        this.newsList = [];
+        if (type === "All") {
+            this.newsList = newsData;
+        } else {
+            var newsArray = [];
+            for (var news of newsData) {
+                if (news.type === type) {
+                    newsArray.push(news);
+                }
+            }
+            this.newsList = newsArray;
+        }
+    },
+    startAbilityContinuation(news) {
+        var params;
+        params = {
+            title: news.title,
+            type: news.type,
+            imgUrl: news.imgUrl,
+            reads: news.reads,
+            likes: news.likes,
+            content: news.content,
+        };
+        var wantValue = {
+            bundleName: 'com.huawei.newsdemooh',
+            abilityName: 'com.huawei.newsdemooh.MainAbility2',
+            deviceId: '',
+            parameters: params
+        };
+
+        featureAbility.startAbility({
+            want: wantValue
+        }).then((data) => {
+            console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+        });
+        console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+        console.info('featureAbility.startAbility end');
+    },
+}
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/app.js b/NewsDemo/entry/src/main/js/MainAbility2/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/app.js
@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/data/data.js b/NewsDemo/entry/src/main/js/MainAbility2/common/data/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..60214269a91ee63c70573ac503af5868c3afa08a
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/common/data/data.js
@@ -0,0 +1,182 @@
+
+export const titles= [
+    {
+        "name": "All"
+    },
+    {
+        "name": "Health"
+    },
+    {
+        "name": "Finance"
+    },
+    {
+        "name": "Technology"
+    },
+    {
+        "name": "Sport"
+    },
+    {
+        "name": "Internet"
+    },
+    {
+        "name": "Game"
+    }
+]
+
+export const newsData = [
+    {
+        "title": "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image1.jpg",
+        "reads": "54",
+        "likes": "81",
+        "content": "Recently, at the Wireless Broadband Alliance (WBA), an international industry organization, Huawei's AirEngine Wi-Fi 6 Solution Helps Factory Digital Transformation WBA 2020 Wi-Fi Industry Best Enterprise Wi-Fi Network Award. This is the first time that a Chinese Wi-Fi 6 vendor has won this award, which reflects the full recognition of Huawei AirEngine Wi-Fi 6 by global enterprise users."
+    },
+    {
+        "title": "Latest technology and industry weather vane",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image2.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "With the large-scale commercial use of new technologies such as 5G, IoT, cloud computing, and AI, industry digital transformation has entered deep water. In addition, the sudden epidemic and carbon-neutral targets accelerate the transformation of society towards intelligence. When energy technologies are combined with power electronics and digital technologies, what direction will site energy develop?"
+    },
+    {
+        "title": "Openness and Cooperation Facilitate Industry Upgrade",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image3.jpg",
+        "reads": "74",
+        "likes": "91",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "High-voltage super-fast charging is an inevitable trend",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image4.jpg",
+        "reads": "44",
+        "likes": "82",
+        "content": "Consumers have a lot of doubts about buying electric cars, compared to fuel cars. Wang Chao pointed out that among the factors affecting the purchase of electric vehicles, charging problems account for 80 percent, with a small number of charging piles (currently, the ratio of piles is 3.2:1) and a long charging time being the first to bear the brunt. As a result, many players in the charging infrastructure sector are looking for a break. To alleviate consumers' pain points of poor charging experience, we need to improve the pile ratio and shorten the charging time to meet consumers' requirements for fast charging."
+    },
+    {
+        "title": "Huawei Releases the New Trend of Modular Power Supply, Facilitating Industry Upgrade Through Open Cooperation",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image5.jpg",
+        "reads": "73",
+        "likes": "888",
+        "content": "Under the background of new infrastructure construction, digital transformation will face great pressure in power consumption. According to analysis data, it is estimated that the number of communication sites will increase to 70 million by 2025, and the annual power consumption will exceed 660 billion kWh. The data center will increase to 24 million racks, and the annual power consumption will exceed 950 billion kWh. In pan-industrial scenarios, the annual power consumption of rail transportation and industrial manufacturing alone will exceed 16 trillion kWh. There are 40 billion smart terminals, and the annual power consumption will reach 210 billion kWh. The 40 billion mobile terminals under the 21 billion kWh power are driven by the transformation of social media and digital life."
+    },
+    {
+        "title": "Ten Future Trends of Digital Energy",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image6.jpg",
+        "reads": "100",
+        "likes": "354",
+        "content": "Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency.\nGreen power will benefit thousands of industries and households in the future. Green power, represented by PV, will become the main energy source. The era of price-effective PV is coming, and the integration of distributed power generation and solar storage will become an inevitable trend. Green Power will also help the ICT industry reduce its carbon footprint. In the future, we will build a \"zero-carbon network\" and \"zero-carbon\" data center. In addition, Huawei proposed the trend of full-link efficiency for the first time and implemented global optimization in terms of architecture and system."
+    },
+    {
+        "title": "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image7.jpg",
+        "reads": "123",
+        "likes": "911",
+        "content": "The holding of the National AI Contest further fulfilled the requirements of the Ministry of Science and Technology and the Ministry of Industry and Information Technology for Shenzhen to build the national new-generation AI innovation and development trial zone and the AI innovation and application pilot zone. It also promoted the integration and development of innovation elements such as industry, academia, capital, and talent, create an AI innovation atmosphere. Huawei has co-hosted two National AI Competitions in a row, aiming to promote technological progress, industrial upgrade, economic transformation, and social progress, and jointly promote the implementation of AI technologies. This is the most practical point for Huawei and the National AI Competition."
+    },
+    {
+        "title": "Enterprise data centers are moving towards autonomous driving network",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image8.jpg",
+        "reads": "754",
+        "likes": "149",
+        "content": "More than 90% of enterprises say that fully autonomous driving data center network is their goal to achieve business agility, flexibility, and cost-effectiveness. This is a key research result in the data center network Autonomous Driving Index Report released by Huawei and IDC. Autonomous driving data center network helps enterprises restructure network architectures and operation models and enhance business resilience and continuity. In addition, regardless of the current level of data center network automation, IDC offers some guidance on how enterprises can move forward and move towards full automation."
+    },
+    {
+        "title": "One optical fiber lights up a green smart room",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image9.jpg",
+        "reads": "631",
+        "likes": "714",
+        "content": "At the 2020 China Real Estate Development Summit held in Guangzhou, Jin Yuzhi, President of Huawei's Transmission and Access Product Line, delivered a keynote speech entitled \"One Fiber Lights Green Smart Rooms\" to discuss the convergence development trend of optical networks and real estate industries, proposes that optical fibers are the standard configuration of F5G smart real estate, and shares seven reasons for choosing Fiber to the Room (FTTR) all-optical home networking, we call on industry partners to work together to build an F5G real gigabit all-optical room ecosystem."
+    },
+    {
+        "title": "BWS2020: Accelerate Network Autonomy and Enable Agile Business",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image10.jpg",
+        "reads": "53",
+        "likes": "824",
+        "content": "Currently, millions of enterprises embrace changes and accelerate their cloudification. SaaS traffic surges. Enterprise cloudification and multi-cloud collaboration become the new focus of cloud-network synergy . To address this challenge, Guo Dazheng, president of Huawei's data communications field, said: \"In cloud-network scenarios, iMaster NCE implements network as a service to help carriers provide cloud-network integration services and meet enterprise cloud access requirements.\" In 5G transport scenarios, improve the automation capability of the entire process of planning, construction, maintenance, and optimization to meet the requirements of large-scale 5G network construction and cloud network cost reduction and efficiency improvement."
+    },
+    {
+        "title": "Trust technology, embrace openness, and share the world prosperity brought by technology",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image11.jpg",
+        "reads": "1500",
+        "likes": "3542",
+        "content": "Huawei successfully held the TrustInTech 2020 online summit today. Ryan Ding, Executive Director of Huawei, President of the Carrier BG, and Jim Rogers, a senior Wall Street investor, GSMA Chief Marketing Officer Stephanie Lynch-Habib and other ICT industry experts and economists from around the world attended the summit. The summit pointed out that ICT has become a digital foundation for economic development and people's livelihood. In an era of accelerated commercial use of 5G, the world needs to embrace openness and cooperation to eliminate unnecessary resistance and fears about new technologies and transnational cooperation, thereby sharing the world prosperity brought by technology."
+    },
+    {
+        "title": "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image12.jpg",
+        "reads": "7451",
+        "likes": "9511",
+        "content": "Today, the Leading Technology Award was unveiled at the 7th World Internet Conference. As the industry's first systematic technical reference architecture for government and enterprise intelligence upgrade, intelligent virtual appliances have been recognized by experts and judges and won the Leading Scientific Achievement Award for their exploration and practice in various industries. This is the fifth time Huawei has won this award since 2016. The World Internet Leading Science and Technology Award showcases the latest technologies in the global ICT field and focuses on the best practices of innovative technologies in the fields of science and technology fight against epidemics, recovery of work, and promotion of digital economic development and cooperation."
+    },
+    {
+        "title": "4G/5G FWA, New Engine for Revenue Growth",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image13.jpg",
+        "reads": "445",
+        "likes": "872",
+        "content": "The reason why FWA is growing so fast is that it provides new opportunities for carriers in the consumer market. For example, a Philippine operator used 4G FWA to rapidly develop home broadband users. According to its third quarter financial report, the operator has successfully developed 2.78 million new users this year, accounting for 80% of the total broadband users. The percentage of broadband revenue increased from 12.3% in 2017 to 17.9%. With the development of wireless technologies, 5G FWA can provide gigabit home access experience similar to that of optical fibers, meeting services such as 4K/8K HD video and AR/VR interactive experience."
+    },
+    {
+        "title": "Down! CPI released in November! These things are cheap",
+        "type": "Finance",
+        "imgUrl": "/common/images/news_image14.jpg",
+        "reads": "734",
+        "likes": "8788",
+        "content": "Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap.Down! CPI released in November! These things are cheap."
+    },
+    {
+        "title": "Comedy movie \"Big Red Envelope\" is set to celebrate the New Year",
+        "type": "Technology",
+        "imgUrl": "/common/images/news_image15.jpg",
+        "reads": "1010",
+        "likes": "3534",
+        "content": "Comedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New YearComedy movie \"Big Red Envelope\" is set to celebrate the New Year"
+    },
+    {
+        "title": "Three living things are smart",
+        "type": "Sport",
+        "imgUrl": "/common/images/news_image16.jpg",
+        "reads": "1243",
+        "likes": "9141",
+        "content": "Lifan said at the press conference: \"Retrospective on the journey, we have always adhered to the spirit of initiative, innovation and science. Build core capabilities in terms of networks, technologies, and platforms, and deliver excellent services, technologies, and quality. Internal maintenance, optimization, and sharing are in place. Carriers, equipment vendors, and partners are working together to build an end-to-end network capability and win-win ecosystem to provide users with the best 5G experience and services.\""
+    },
+    {
+        "title": "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G",
+        "type": "Internet",
+        "imgUrl": "/common/images/news_image17.jpg",
+        "reads": "7574",
+        "likes": "1439",
+        "content": "The 5G industry is developing faster than the previous standards. Currently, there are more than 100 5G commercial networks around the world, and the price of entry-level 5G mobile phones has fallen to CNY1,000, which has led to the rapid growth of 5G users worldwide. Thanks to this, leading operators have enjoyed the data dividend brought by 5G. The multi-dimensional package design and 5G message and 5G new communication services are upgraded to increase the ARPU of 5G users to different degrees.\nTo promote the further development of 5G networks and encourage more users to choose and prefer 5G networks, operators need to build 5G top-quality networks for individual users to achieve full-scenario coverage in densely populated urban areas, suburban areas, and indoor areas, allowing mobile phone users to access 5G services anytime, anywhere. In addition, 5G connection experience is optimized to ensure consistent user experience."
+    },
+    {
+        "title": "Technology Helps Art, Leads a New Era",
+        "type": "Game",
+        "imgUrl": "/common/images/news_image18.jpg",
+        "reads": "6311",
+        "likes": "7114",
+        "content": "Zhang Wenlin spoke highly of the \"Dance Storm\". He believes that since the second season's premiere, the show has brought the contestants' exquisite dance moves, the wonderful host of Mr Ho Kung, the excellent comments of the judges' tutors, and the exquisite design of the staff to the audience, dedicate a beautiful visual feast! To help achieve fantastic visual effects, Hunan Radio and TV set up a joint team with Huawei to develop a spatio-temporal condensation system for Dance Storm 2. The system supports AI algorithms such as intelligent fast focusing, butterfly shooting, zoom-in, and multi-focus, with the help of the video 3.0+ platform of device-cloud synergy, the program team has made several industry-leading achievements, such as the three-dimensional storm moment with fantastic visual changes, free-view Dance Storm program with interactive control and rotation, and dance Storm with 360-degree panoramic view. VR programs."
+    },
+    {
+        "title": "Open Intelligent Twin Ecosystem Is the Key to All-Scenario Intelligence",
+        "type": "Health",
+        "imgUrl": "/common/images/news_image19.jpg",
+        "reads": "6341",
+        "likes": "7164",
+        "content": "Intelligent upgrade will build core competitiveness in various industries. Huawei works with partners to integrate 5G, cloud, AI, intelligent edge, and industry applications to form an integrated intelligent system and create industry-leading smart experience. In the transportation industry, the abolition of highway toll stations at the provincial boundary enables fast and insensitive traffic, greatly improving traffic efficiency and reducing logistics transportation costs. Intelligent cameras are deployed on highway portals to collect vehicle traffic data 24 hours a day and send the data to the cloud in real time over the high-speed network for real-time charging. In addition, AI models trained on the cloud can be pushed to the edge so that cameras can have capabilities such as license plate recognition and vehicle feature extraction, and the capabilities can be continuously evolved. For example, in extreme weather conditions such as rain and snow, one-click upgrade can be performed on the cloud."
+    }
+]
+
+
+
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_good.png b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_good.png
new file mode 100644
index 0000000000000000000000000000000000000000..e306e705fe96f10576fa393c3390ea63f26408dd
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_good.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_message.png b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..b81007d64cbe5265df414a6dab58cd103cd5a521
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_message.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_share.png b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_share.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fb1cae93ea21b0712abc939b828ea92ffcb07f4
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_share.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_star.png b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_star.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ace4c20d2f949b567fc960d205c345273fadee2
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/icon_star.png differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image1.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bfe2ae5849d6b022c2eab195f0fc0c04721db285
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image1.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image10.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..781936afc0354e0f22d1b77339968927c29ffb36
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image10.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image11.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image11.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f2862e308f284c5cc87d06c5316d5edec86028f3
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image11.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image12.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image12.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0425178705c4e56888d7df2b308efdfcd7ac8640
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image12.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image13.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image13.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b349d81e1dce2d2a553baaf26a5b7fde58d8beac
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image13.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image14.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image14.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3d1ca269b529e890a3e154ac081e93487f5743b
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image14.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image15.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image15.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..54775977a85c165759a22b8c8e956ecc59603ff8
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image15.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image16.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image16.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17780bfc6f7f014b1920fa5159cb1a4699a5de49
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image16.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image17.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image17.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a34dcd88e1507fd07d509fcffe024dfe7a59ab39
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image17.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image18.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image18.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ad79353b9bcfb2cd5b05ef6296f29e3ac826d3ca
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image18.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image19.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image19.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5e8c9267e9632b829492f6d93bfebfcb9c0dc114
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image19.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image2.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2322f158e6a108b8a4f2bbcb20204bd7974c12d9
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image2.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image3.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6da8be18ed043a9fc815689e7482e9fe04969f1a
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image3.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image4.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..78bfe6f367b9534e1236725b50a2b98934a76827
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image4.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image5.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bda3780f9779e2169cea6b3cd0aae77bc6e6cc95
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image5.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image6.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image6.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..60ebfaa4bd05ca32c40b99f247a9d2998d85dd69
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image6.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image7.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image7.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bfc4fb58e7a5ca3062dc775721f9106d333adaec
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image7.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image8.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e58a289f7d136043766f33f168a87af367c370f3
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image8.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image9.jpg b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image9.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e7de107a86d8a741fa4112c3df79c60a1ac086e5
Binary files /dev/null and b/NewsDemo/entry/src/main/js/MainAbility2/common/images/news_image9.jpg differ
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/i18n/en-US.json b/NewsDemo/entry/src/main/js/MainAbility2/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..547e7e13afae9b28f836a4d857e576413ea82bc5
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/i18n/en-US.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back",
+    "localhost": "This device"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/i18n/zh-CN.json b/NewsDemo/entry/src/main/js/MainAbility2/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..38de361bd7bac39682ded8a4839f9cf7822fbdf0
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/i18n/zh-CN.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回",
+    "localhost": "本机"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.css b/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..afa1298e53d0db8458cd7856a575e68417b3e4d7
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.css
@@ -0,0 +1,296 @@
+/*
+ * 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.
+ */
+
+.container {
+    padding: 20px;
+    margin-bottom: 160px;
+    flex-direction: column;
+}
+
+.text-title {
+    margin: 20px;
+    font-size: 50px;
+}
+
+.text-reads {
+    font-size: 32px;
+    text-color: #666666;
+    margin: 20px;
+}
+
+.image {
+    margin: 20px;
+}
+
+.text-content {
+    margin: 30px;
+    font-size: 36px;
+    text-color: #666666;
+}
+
+.bottom {
+    padding-left: 24px;
+    padding-right: 24px;
+    justify-content: center;
+    align-items: center;
+    border-top-width: 1px;
+    border-color: #cccccc;
+    background-color: #eeeeee;
+    height: 120px;
+    width: 100%;
+    background-color: white;
+    position: fixed;
+    bottom: 0px;
+}
+
+.textarea {
+    height: 80px;
+}
+
+.image-bottom {
+    object-fit: contain;
+    margin-left: 20px;
+    height: 80px;
+    width: 80px;
+}
+
+
+.select-device-dialog {
+    width: 90%;
+    height: 33%;
+}
+
+.select-device-wrapper {
+    margin: 5%;
+    width: 90%;
+    height: 90%;
+    flex-direction: column;
+}
+
+.select-device-title {
+    width: 100%;
+    height: 20%;
+    text-align: left;
+    font-size: 40px;
+}
+
+.select-device-list {
+    width: 100%;
+    height: 60%;
+    text-align: left;
+    font-size: 30px;
+}
+
+.select-device-item {
+    width: 100%;
+    height: 33%;
+}
+
+.select-device-item-left {
+    width: 90%;
+    height: 100%;
+    text-align: left;
+    font-size: 32px;
+}
+
+.select-device-item-right {
+    width: 10%;
+    height: 100%;
+}
+
+.choose-ok-or-not {
+    height: 20%;
+    width: 100%;
+}
+
+.select-device-btn {
+    text-align: center;
+    color: #0000ff;
+    font-size: 32px;
+    width: 100%;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.btn {
+    width: 100%;
+    height: 100px;
+    font-size: 40px;
+    background-color: blue;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background-image: url(common/media/bg_blurry.png);
+    background-size: cover;
+    background-position: center center;
+}
+
+.title_section {
+    margin-top: 150px;
+    margin-bottom: 10px;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.title {
+    height: 64px;
+    font-size: 48px;
+    color: #FFF;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.album_section {
+    width: 100%;
+    aspect-ratio: 1;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+.album_image {
+    align-items: center;
+    object-fit: contain;
+}
+
+.progress_section {
+    margin-bottom: 100px;
+    flex-direction: column;
+}
+
+.timer {
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.progress_time {
+    height: 32px;
+    color: #FFF;
+    text-align: center;
+    font-size: 24px;
+}
+
+.total_time {
+    height: 32px;
+    color: #FFF;
+    text-align: center;
+    font-size: 24px;
+}
+
+.music_slider {
+    width: 100%;
+    color: #64CCE7FF;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.control_section {
+    width: 100%;
+    justify-content: space-between;
+    flex-direction: row;
+}
+
+.control_button {
+    height: 96px;
+    width: 96px;
+}
+
+.txt {
+    color: #000;
+    font-weight: bold;
+    font-size: 39px;
+}
+
+.dialog-main {
+    width: 500px;
+}
+
+.dialog-div {
+    flex-direction: column;
+    align-items: center;
+}
+
+.dialog_title_text {
+    width: 434px;
+    height: 80px;
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.inner-btn {
+    width: 400px;
+    height: 120px;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.dialog_cancel_button {
+    width: 100%;
+    font-size: 32px;
+}
+
+.dialog_device_list {
+    width: 434px;
+    max-height: 150px;
+}
+
+.device_list_item {
+    width: 434px;
+    height: 80px;
+    flex-direction: row;
+    align-items: center;
+}
+
+.device_item_radio {
+}
+
+.device_item_title {
+    width: 80%;
+    height: 80px;
+    text-align: start;
+}
+
+@media screen and (device-type: tablet) and (orientation: landscape) {
+
+}
+
+@media screen and (device-type: wearable) {
+
+}
+
+@media screen and (device-type: tv) {
+
+}
+
+@media screen and (device-type: phone) and (orientation: landscape) {
+
+}
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.hml b/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d0992c27de16cf83cc5163fe665c179a90149f50
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.hml
@@ -0,0 +1,52 @@
+<!--
+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="container">
+
+    <text class="text-title">{{ title }}</text>
+    <text class="text-reads">reads:{{ reads }}   likes:{{ likes }}</text>
+    <image class="image" src="{{ imgUrl }}"></image>
+    <text class="text-content">
+        {{ content }}
+    </text>
+
+    <div class="bottom">
+        <textarea class="textarea" placeholder="Enter a comment."></textarea>
+        <image class="image-bottom" src="/common/images/icon_message.png"></image>
+        <image class="image-bottom" src="/common/images/icon_star.png"></image>
+        <image class="image-bottom" src="/common/images/icon_good.png"></image>
+        <image class="image-bottom" src="/common/images/icon_share.png" onclick="onContinueAbilityClick"></image>
+    </div>
+
+
+    <dialog id="continueAbilityDialog" class="dialog-main" oncancel="cancelDialog">
+        <div class="dialog-div">
+            <text class="dialog_title_text">选择设备</text>
+            <list class="dialog_device_list" divider="true">
+                <list-item for="{{ deviceList }}" class="device_list_item">
+                    <label class="device_item_title" target="{{ $item.id }}">{{ $item.name }}</label>
+                    <input class="device_item_radio" type="radio" checked="{{ $item.id === 'localhost' }}"
+                           id="{{ $item.id }}"
+                           name="radioSample" value="{{ $item.id }}"
+                           onchange="onRadioChange({{ $item.id }})"></input>
+                </list-item>
+            </list>
+            <div class="inner-btn">
+                <button class="dialog_cancel_button" type="text" value="取消" onclick="onDismissDialogClicked"></button>
+            </div>
+        </div>
+    </dialog>
+
+</div>
diff --git a/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.js b/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b0549627b830b1e0f030ed8b5b553c1c871dad4
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/MainAbility2/pages/index/index.js
@@ -0,0 +1,182 @@
+/*
+ * 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.
+ */
+
+import router from '@system.router'
+import featureAbility from '@ohos.ability.featureAbility';
+import RemoteDeviceModel from '../../../model/RemoteDeviceModel.js';
+
+const REMOTE_ABILITY_STARTED = 'remoteAbilityStarted';
+var DEVICE_LIST_LOCALHOST;
+
+export default {
+    data: {
+        title: "",
+        type: "",
+        imgUrl: "",
+        reads: "",
+        likes: "",
+        content: "",
+        deviceList: [],
+        remoteDeviceModel: new RemoteDeviceModel(),
+    },
+    onInit() {
+        console.info('onInit begin');
+        DEVICE_LIST_LOCALHOST = {
+            name: this.$t('strings.localhost'),
+            id: 'localhost',
+        };
+        this.deviceList = [DEVICE_LIST_LOCALHOST];
+        this.restoreFromWant();
+        console.info('onInit end');
+    },
+
+    restoreFromWant() {
+        let self = this;
+        featureAbility.getWant((error, want) => {
+            console.info('MusicPlayer[IndexPage] featureAbility.getWant=' + JSON.stringify(want));
+            var status = want.parameters;
+            this.title = status.title
+            this.type = status.type,
+            this.imgUrl = status.imgUrl,
+            this.reads = status.reads,
+            this.likes = status.likes,
+            this.content = status.content
+        });
+    },
+
+    onContinueAbilityClick() {
+        console.info('onContinueAbilityClick begin');
+        let self = this;
+        this.remoteDeviceModel.registerDeviceListCallback(() => {
+            console.info('registerDeviceListCallback, callback entered');
+            var list = [];
+            list[0] = DEVICE_LIST_LOCALHOST;
+            var deviceList;
+            if (self.remoteDeviceModel.discoverList.length > 0) {
+                deviceList = self.remoteDeviceModel.discoverList;
+            } else {
+                deviceList = self.remoteDeviceModel.deviceList;
+            }
+            console.info('on remote device updated, count=' + deviceList.length);
+            for (var i = 0; i < deviceList.length; i++) {
+                console.info('device ' + i + '/' + deviceList.length + ' deviceId='
+                + deviceList[i].deviceId + ' deviceName=' + deviceList[i].deviceName + ' deviceType='
+                + deviceList[i].deviceType);
+                list[i + 1] = {
+                    name: deviceList[i].deviceName,
+                    id: deviceList[i].deviceId,
+                };
+            }
+            self.deviceList = list;
+        });
+        this.$element('continueAbilityDialog').show();
+        this.isDialogShowing = true;
+        console.info('onContinueAbilityClick end');
+    },
+    startAbilityContinuation(deviceId, deviceName) {
+
+        var params;
+        params = {
+            title: this.title,
+            type: this.type,
+            imgUrl: this.imgUrl,
+            reads: this.reads,
+            likes: this.likes,
+            content: this.content,
+        };
+
+        var wantValue = {
+            bundleName: 'com.huawei.newsdemooh',
+            abilityName: 'com.huawei.newsdemooh.MainAbility2',
+            deviceId: deviceId,
+            parameters: params
+        };
+
+        featureAbility.startAbility({
+            want: wantValue
+        }).then((data) => {
+            console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+        });
+        console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+        console.info('featureAbility.startAbility end');
+    },
+    onRadioChange(inputValue, e) {
+        console.info('onRadioChange ' + inputValue + ', ' + e.value);
+        if (inputValue === e.value) {
+            if (e.value === 'localhost') {
+                this.$element('continueAbilityDialog').close();
+                return;
+            }
+            if (this.remoteDeviceModel.discoverList.length > 0) {
+                console.info('continue to unauthed device');
+                var name = null;
+                for (var i = 0; i < this.remoteDeviceModel.discoverList.length; i++) {
+                    if (this.remoteDeviceModel.discoverList[i].deviceId === e.value) {
+                        name = this.remoteDeviceModel.discoverList[i].deviceName;
+                        break;
+                    }
+                }
+                if (name == null) {
+                    console.error('onRadioChange failed, can not get name from discoverList');
+                    return;
+                }
+                console.info('onRadioChange name=' + name);
+
+                let self = this;
+                this.remoteDeviceModel.authDevice(e.value, () => {
+                    console.info('auth and online finished');
+                    for (i = 0; i < self.remoteDeviceModel.deviceList.length; i++) {
+                        if (self.remoteDeviceModel.deviceList[i].deviceName === name) {
+                            this.startAbilityContinuation(self.remoteDeviceModel.deviceList[i].deviceId, self.remoteDeviceModel.deviceList[i].deviceName);
+                        }
+                    }
+                });
+            } else {
+                console.info('continue to authed device');
+                for (i = 0; i < this.remoteDeviceModel.deviceList.length; i++) {
+                    if (this.remoteDeviceModel.deviceList[i].deviceId === e.value) {
+                        this.startAbilityContinuation(this.remoteDeviceModel.deviceList[i].deviceId, this.remoteDeviceModel.deviceList[i].deviceName);
+                    }
+                }
+            }
+        }
+    },
+    onDestroy() {
+        console.info('onDestroy begin');
+        this.remoteDeviceModel.unregisterDeviceListCallback();
+        console.info('onDestroy end');
+    },
+    cancelDialog(e) {
+        this.remoteDeviceModel.unregisterDeviceListCallback();
+    },
+    onDismissDialogClicked(e) {
+        this.dismissDialog();
+    },
+    dismissDialog() {
+        this.$element('continueAbilityDialog').close();
+        this.remoteDeviceModel.unregisterDeviceListCallback();
+    },
+    touchMove(e) {
+        if (e.direction == "right") {
+            this.appExit();
+        }
+    },
+    appExit() {
+        app.terminate()
+    }
+}
+
+
+
diff --git a/NewsDemo/entry/src/main/js/model/RemoteDeviceModel.js b/NewsDemo/entry/src/main/js/model/RemoteDeviceModel.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e91a1a1e68e38ca7b909546aae92b3c78361b37
--- /dev/null
+++ b/NewsDemo/entry/src/main/js/model/RemoteDeviceModel.js
@@ -0,0 +1,184 @@
+/*
+ * 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.
+ */
+
+import deviceManager from '@ohos.distributedHardware.deviceManager';
+
+var SUBSCRIBE_ID = 100;
+
+export default class RemoteDeviceModel {
+    deviceList = [];
+    discoverList = [];
+    callback;
+    authCallback = null;
+    #deviceManager;
+
+    constructor() {
+    }
+
+    registerDeviceListCallback(callback) {
+        if (typeof (this.#deviceManager) === 'undefined') {
+            console.log('MusicPlayer[RemoteDeviceModel] deviceManager.createDeviceManager begin');
+            let self = this;
+            deviceManager.createDeviceManager('com.ohos.distributedmusicplayer', (error, value) => {
+                if (error) {
+                    console.error('createDeviceManager failed.');
+                    return;
+                }
+                self.#deviceManager = value;
+                self.registerDeviceListCallback_(callback);
+                console.log('MusicPlayer[RemoteDeviceModel] createDeviceManager callback returned, error=' + error + ' value=' + value);
+            });
+            console.log('MusicPlayer[RemoteDeviceModel] deviceManager.createDeviceManager end');
+        } else {
+            this.registerDeviceListCallback_(callback);
+        }
+    }
+
+    registerDeviceListCallback_(callback) {
+        console.info('MusicPlayer[RemoteDeviceModel] registerDeviceListCallback');
+        this.callback = callback;
+        if (this.#deviceManager == undefined) {
+            console.error('MusicPlayer[RemoteDeviceModel] deviceManager has not initialized');
+            this.callback();
+            return;
+        }
+
+        console.info('MusicPlayer[RemoteDeviceModel] getTrustedDeviceListSync begin');
+        var list = this.#deviceManager.getTrustedDeviceListSync();
+        console.info('MusicPlayer[RemoteDeviceModel] getTrustedDeviceListSync end, deviceList=' + JSON.stringify(list));
+        if (typeof (list) != 'undefined' && typeof (list.length) != 'undefined') {
+            this.deviceList = list;
+        }
+        this.callback();
+        console.info('MusicPlayer[RemoteDeviceModel] callback finished');
+
+        let self = this;
+        this.#deviceManager.on('deviceStateChange', (data) => {
+            console.info('MusicPlayer[RemoteDeviceModel] deviceStateChange data=' + JSON.stringify(data));
+            switch (data.action) {
+                case 0:
+                self.deviceList[self.deviceList.length] = data.device;
+                console.info('MusicPlayer[RemoteDeviceModel] online, updated device list=' + JSON.stringify(self.deviceList));
+                self.callback();
+                if (self.authCallback != null) {
+                    self.authCallback();
+                    self.authCallback = null;
+                }
+                break;
+                case 2:
+                if (self.deviceList.length > 0) {
+                    for (var i = 0; i < self.deviceList.length; i++) {
+                        if (self.deviceList[i].deviceId === data.device.deviceId) {
+                            self.deviceList[i] = data.device;
+                            break;
+                        }
+                    }
+                }
+                console.info('MusicPlayer[RemoteDeviceModel] change, updated device list=' + JSON.stringify(self.deviceList));
+                self.callback();
+                break;
+                case 1:
+                if (self.deviceList.length > 0) {
+                    var list = [];
+                    for (var i = 0; i < self.deviceList.length; i++) {
+                        if (self.deviceList[i].deviceId != data.device.deviceId) {
+                            list[i] = data.device;
+                        }
+                    }
+                    self.deviceList = list;
+                }
+                console.info('MusicPlayer[RemoteDeviceModel] offline, updated device list=' + JSON.stringify(data.device));
+                self.callback();
+                break;
+                default:
+                    break;
+            }
+        });
+        this.#deviceManager.on('deviceFound', (data) => {
+            console.info('MusicPlayer[RemoteDeviceModel] deviceFound data=' + JSON.stringify(data));
+            console.info('MusicPlayer[RemoteDeviceModel] deviceFound self.deviceList=' + self.deviceList);
+            console.info('MusicPlayer[RemoteDeviceModel] deviceFound self.deviceList.length=' + self.deviceList.length);
+            for (var i = 0; i < self.discoverList.length; i++) {
+                if (self.discoverList[i].deviceId === data.device.deviceId) {
+                    console.info('MusicPlayer[RemoteDeviceModel] device founded, ignored');
+                    return;
+                }
+            }
+            self.discoverList[self.discoverList.length] = data.device;
+            self.callback();
+        });
+        this.#deviceManager.on('discoverFail', (data) => {
+            console.info('MusicPlayer[RemoteDeviceModel] discoverFail data=' + JSON.stringify(data));
+        });
+        this.#deviceManager.on('serviceDie', () => {
+            console.error('MusicPlayer[RemoteDeviceModel] serviceDie');
+        });
+
+        SUBSCRIBE_ID = Math.floor(65536 * Math.random());
+        var info = {
+            subscribeId: SUBSCRIBE_ID,
+            mode: 0xAA,
+            medium: 2,
+            freq: 2,
+            isSameAccount: false,
+            isWakeRemote: true,
+            capability: 0
+        };
+        console.info('MusicPlayer[RemoteDeviceModel] startDeviceDiscovery ' + SUBSCRIBE_ID);
+        this.#deviceManager.startDeviceDiscovery(info);
+    }
+
+    authDevice(deviceId, callback) {
+        console.info('MusicPlayer[RemoteDeviceModel] authDevice ' + deviceId);
+        for (var i = 0; i < this.discoverList.length; i++) {
+            if (this.discoverList[i].deviceId === deviceId) {
+                console.info('MusicPlayer[RemoteDeviceModel] device founded, ignored');
+                let extraInfo = {
+                    "targetPkgName": 'com.ohos.distributedmusicplayer',
+                    "appName": 'Music',
+                    "appDescription": 'Music player application',
+                    "business": '0'
+                };
+                let authParam = {
+                    "authType": 1,
+                    "appIcon": '',
+                    "appThumbnail": '',
+                    "extraInfo": extraInfo
+                };
+                console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice ' + JSON.stringify(this.discoverList[i]));
+                let self = this;
+                this.#deviceManager.authenticateDevice(this.discoverList[i], authParam, (err, data) => {
+                    if (err) {
+                        console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice failed, err=' + JSON.stringify(err));
+                        self.authCallback = null;
+                    } else {
+                        console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice succeed, data=' + JSON.stringify(data));
+                        self.authCallback = callback;
+                    }
+                });
+            }
+        }
+    }
+
+    unregisterDeviceListCallback() {
+        console.info('MusicPlayer[RemoteDeviceModel] stopDeviceDiscovery ' + SUBSCRIBE_ID);
+        this.#deviceManager.stopDeviceDiscovery(SUBSCRIBE_ID);
+        this.#deviceManager.off('deviceStateChange');
+        this.#deviceManager.off('deviceFound');
+        this.#deviceManager.off('discoverFail');
+        this.#deviceManager.off('serviceDie');
+        this.deviceList = [];
+    }
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/resources/base/element/string.json b/NewsDemo/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..ad5f27c848ccb4d7bdbec708831b88ef83c72cdb
--- /dev/null
+++ b/NewsDemo/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,20 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "新闻"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    },
+    {
+      "name": "mainability2_description",
+      "value": "JS_Empty Ability"
+    },
+    {
+      "name": "entry_MainAbility2",
+      "value": "新闻"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/NewsDemo/entry/src/main/resources/base/media/icon.png b/NewsDemo/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/NewsDemo/entry/src/main/resources/base/media/icon.png differ
diff --git a/NewsDemo/screenshots/device/NewsClientDemo.PNG b/NewsDemo/screenshots/device/NewsClientDemo.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..4925c3f91ddabf825d50cc5f5a1f65e2f208ed84
Binary files /dev/null and b/NewsDemo/screenshots/device/NewsClientDemo.PNG differ
diff --git a/NewsDemo/settings.gradle b/NewsDemo/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/NewsDemo/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/PictureGameOpenHarmony/README.md b/PictureGameOpenHarmony/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6b1709d9a433a05a881874bd014e5e32fd544cb2
--- /dev/null
+++ b/PictureGameOpenHarmony/README.md
@@ -0,0 +1,10 @@
+# PictureGameOpenHarmony
+
+本篇Codelab是在HarmonyOS 分布式亲子早教系统中益智拼图游戏（Java）的设计基础上，用JS编程语言重写了一个布局一模一样的益智拼图游戏，
+
+并对OpenHarmony开发板进行了适配，大家可以通过这两篇Codelab学习两种编程语言的编码风格和实现区别。
+
+
+案例最终效果如下图所示：
+
+![](screenshots/device/PictureGame.PNG)
diff --git a/PictureGameOpenHarmony/build.gradle b/PictureGameOpenHarmony/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..fa230b707f071d544736902167fda519b343d087
--- /dev/null
+++ b/PictureGameOpenHarmony/build.gradle
@@ -0,0 +1,33 @@
+// 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 6
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.1.5'
+        classpath 'com.huawei.ohos:decctest:3.0.1.1'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'http://repo.ark.tools.huawei.com/artifactory/maven-public/'
+        }
+        maven {
+            url 'http://mirrors.tools.huawei.com/maven/'
+        }
+    }
+}
diff --git a/PictureGameOpenHarmony/entry/.gitignore b/PictureGameOpenHarmony/entry/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..7d5b7a94f4dcf381f03ff21f28f8a2494b58023f
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/PictureGameOpenHarmony/entry/build.gradle b/PictureGameOpenHarmony/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..6c2dca308825d3d38937c45c03918e1628bbfb75
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/build.gradle
@@ -0,0 +1,23 @@
+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 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+    
+    supportSystem "standard"
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13'
+}
diff --git a/PictureGameOpenHarmony/entry/package.json b/PictureGameOpenHarmony/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/package.json
@@ -0,0 +1 @@
+{}
diff --git a/PictureGameOpenHarmony/entry/proguard-rules.pro b/PictureGameOpenHarmony/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/PictureGameOpenHarmony/entry/src/main/config.json b/PictureGameOpenHarmony/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..9a4b8b1b1031d48a3735b9e6777ffe53652c7acc
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/config.json
@@ -0,0 +1,66 @@
+{
+  "app": {
+    "bundleName": "com.huawei.picturegame",
+    "vendor": "demo",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.huawei.picturegame",
+    "name": ".MyApplication",
+    "mainAbility": "com.huawei.picturegame.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "name": "com.huawei.picturegame.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:PictureGame",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ],
+    "distroFilter": {
+      "apiVersion": {
+        "policy": "include",
+        "value": []
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/app.js b/PictureGameOpenHarmony/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/js/default/app.js
@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/bg-tv.jpg b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/bg-tv.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..86fc07358eea5c1474bc833fca07c6d4d8698a89
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/bg-tv.jpg differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/device.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/device.png
new file mode 100644
index 0000000000000000000000000000000000000000..5100a32ade3589466166e57b1f6f0944c321294e
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/device.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture.jpg b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4a06044f4f1fe2f10d9769f51625cb3d2f68d833
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture.jpg differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_01.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_01.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c01205b0a5be8cf564a9569baf69449eea7a378
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_01.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_02.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_02.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9d75f08c87a7538f66baba6468eb421db3fc485
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_02.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_03.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_03.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a176e662bdeeadc4bb83462d52b0f6983c40f54
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_03.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_04.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_04.png
new file mode 100644
index 0000000000000000000000000000000000000000..959f764fa712c162a3bfecb3ce48e88523404668
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_04.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_05.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_05.png
new file mode 100644
index 0000000000000000000000000000000000000000..aee1f9bcb4d0eeca8cb6f5b8ae6d217eaaa034a7
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_05.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_06.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_06.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c54b2336a5c8c7a2d4d7f2ffde4623561a105d6
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_06.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_07.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_07.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2b03f8832ae7c01cdab0818f0e34435ce3c76ca
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_07.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_08.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_08.png
new file mode 100644
index 0000000000000000000000000000000000000000..180c1aedda3a5dae43319d1001db0f40466dd255
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_08.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_09.png b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_09.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa99620777e299d8dd62c7a6f2b44e5f2ae3a618
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/js/default/common/images/picture_09.png differ
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/i18n/en-US.json b/PictureGameOpenHarmony/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..08e34eac912bf2651eefc20e26aa479b5e4e7ec2
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "page": "Second Page",
+    "next": "Next Page",
+    "back": "Back"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json b/PictureGameOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..3dd53b3a8b808aec9396fa663cb00ef22ba61e0a
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,11 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "page": "第二页",
+    "next": "下一页",
+    "back": "返回"
+  },
+  "Files": {
+  }
+}
\ No newline at end of file
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.css b/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ef7bb143c489d2e26e577c1e9e534ad9ce693dd9
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,61 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+}
+
+.title {
+    font-size: 40px;
+    color: #000000;
+    opacity: 0.9;
+}
+
+.picture_game {
+    width: 450px;
+    height: 450px;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.small_picture {
+    width: 150px;
+    height: 150px
+}
+
+.picture_row {
+    justify-content: center
+}
+
+#title {
+    font-size: 50px;
+    margin: 20px;
+}
+
+.button {
+    font-size: 40px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-top: 40px;
+}
+
+#final_picture {
+    margin-top: 40px;
+    width: 450px;
+    height: 450px
+}
\ No newline at end of file
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.hml b/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..6736b45d95671f29bdc31e38ba1ea7da7df4bd3f
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,31 @@
+<!--
+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="container">
+    <text id="title">益智拼图游戏</text>
+
+    <div class="picture_game">
+         <image for="pictureList" class="small_picture" src="{{$item}}" @click="onChange({{$idx}})"></image>
+    </div>
+
+    <div class="picture_row">
+        <button class="button" @click="onRandom" style="margin-right : 20px;">重新开始</button>
+        <button class="button">亲子协同</button>
+    </div>
+
+    <div id="final_picture">
+        <image src="common/images/picture.jpg"></image>
+    </div>
+</div>
diff --git a/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.js b/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ffcb167e347b221ba0e50ce861dd176e340b97e5
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,109 @@
+/*
+ * 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.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+    data: {
+        title: "",
+        image00: "",
+        pictureList: [],
+        imageIndexForPosition: []
+    },
+    onInit() {
+        this.onRandom();
+    },
+    onChange(index) {
+        let menu = {
+            "1": [2, 4],
+            "2": [1, 3, 5],
+            "3": [2, 6],
+            "4": [1, 5, 7],
+            "5": [2, 4, 6, 8],
+            "6": [3, 5, 9],
+            "7": [4, 8],
+            "8": [5, 7, 9],
+            "9": [6, 8]
+        }
+        let clickImage = index + 1;
+        let invisibleImage = this.imageIndexForPosition.indexOf(9) + 1;
+        let arr = menu[invisibleImage];
+        if (!arr.includes(clickImage)) {
+            prompt.showToast({
+                message: "不相邻"
+            });
+        } else {
+            let temp = this.imageIndexForPosition[invisibleImage - 1];
+            this.imageIndexForPosition[invisibleImage - 1] = this.imageIndexForPosition[clickImage - 1];
+            this.imageIndexForPosition[clickImage - 1] = temp;
+
+            this.pictureList = [];
+            this.imageIndexForPosition.forEach(value => {
+                if (value == 9) {
+                    this.pictureList.push("--")
+                } else {
+                    this.pictureList.push("/common/images/picture_0" + value + ".png")
+                }
+            });
+        }
+        this.onFinish();
+    },
+    onFinish() {
+        let finalList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+        if (this.equarList(this.imageIndexForPosition, finalList)) {
+
+            this.pictureList = [];
+            this.imageIndexForPosition.forEach(value => {
+                this.pictureList.push("/common/images/picture_0" + value + ".png")
+            });
+            prompt.showToast({
+                message: "完成拼接"
+            });
+        }
+    },
+    equarList(a, b) {
+        // 判断数组的长度
+        if (a.length !== b.length) {
+            return false
+        } else {
+            // 循环遍历数组的值进行比较
+            for (let i = 0; i < a.length; i++) {
+                if (a[i] !== b[i]) {
+                    return false
+                }
+            }
+            return true;
+        }
+    },
+    onRandom() {
+        this.setupRandomPosition();
+        this.pictureList = []
+        this.imageIndexForPosition.forEach(value => {
+            if (value == 9) {
+                this.pictureList.push("--")
+            } else {
+                this.pictureList.push("/common/images/picture_0" + value + ".png")
+            }
+        });
+    },
+    setupRandomPosition() {
+        let list1 = [5, 4, 3, 9, 1, 8, 6, 7, 2];
+        let list2 = [3, 1, 6, 7, 9, 8, 4, 2, 5];
+        let list3 = [4, 8, 3, 5, 2, 7, 9, 1, 6];
+        let list4 = [4, 3, 5, 2, 8, 7, 6, 1, 9];
+        let lists = [list1, list2, list3, list4];
+        this.imageIndexForPosition = lists[parseInt(Math.random() * 4)];
+    }
+}
diff --git a/PictureGameOpenHarmony/entry/src/main/resources/base/element/string.json b/PictureGameOpenHarmony/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..de7a0e17da3ea773ffc4514a66ab32d858e58b72
--- /dev/null
+++ b/PictureGameOpenHarmony/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "PictureGame",
+      "value": "拼图游戏"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/PictureGameOpenHarmony/entry/src/main/resources/base/media/icon.png b/PictureGameOpenHarmony/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/PictureGameOpenHarmony/entry/src/main/resources/base/media/icon.png differ
diff --git a/PictureGameOpenHarmony/screenshots/device/PictureGame.PNG b/PictureGameOpenHarmony/screenshots/device/PictureGame.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2e58858dd155add46dee97c37d075bf869281bef
Binary files /dev/null and b/PictureGameOpenHarmony/screenshots/device/PictureGame.PNG differ
diff --git a/PictureGameOpenHarmony/settings.gradle b/PictureGameOpenHarmony/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/PictureGameOpenHarmony/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/RatingApplication/README.md b/RatingApplication/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..5b97fd2e22c03ae1d42ff5331ad8931f4b993cb6
--- /dev/null
+++ b/RatingApplication/README.md
@@ -0,0 +1,3 @@
+# RatingApplication
+简介
+• 此Demo使用JS UI中的rating组件，我们将会通过一个简单的样例，实现一个星级打分的效果
diff --git a/RatingApplication/entry/src/main/js/default/app.js b/RatingApplication/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..1b0a5ab191669263aedcba5c53283638e7d3e8c1 100644
--- a/RatingApplication/entry/src/main/js/default/app.js
+++ b/RatingApplication/entry/src/main/js/default/app.js
@@ -1,3 +1,17 @@
+/*
+ * 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("Application onCreate");
diff --git a/RatingApplication/entry/src/main/js/default/pages/index/index.css b/RatingApplication/entry/src/main/js/default/pages/index/index.css
index b07361cb184b2c47eff6d69b130330df6da7a268..09653655bdf13f07ef69eef5d89e6b82d5937b25 100644
--- a/RatingApplication/entry/src/main/js/default/pages/index/index.css
+++ b/RatingApplication/entry/src/main/js/default/pages/index/index.css
@@ -1,8 +1,24 @@
+/*
+ * 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.
+ */
 /* 页面整体纵向布局 */
 .container {
     flex-direction: column;/*    justify-content: center;*/
     align-items: center;
     padding-top: 30px;
+    height: 100%;
+    width: 100%;
 
 }
 
diff --git a/RatingApplication/entry/src/main/js/default/pages/index/index.hml b/RatingApplication/entry/src/main/js/default/pages/index/index.hml
index 9595b11d6facc371befed705c31e5043e341be72..ca48f4ba7bc73c19548e67aa9eb33f596202759a 100644
--- a/RatingApplication/entry/src/main/js/default/pages/index/index.hml
+++ b/RatingApplication/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,15 @@
+<!--
+ 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="container">
     <text class="avgText" maxlength="20">自定义星级打分</text>
     <rating onchange="rateBlue" class="rateBlue" rating="3"></rating>
diff --git a/RatingApplication/entry/src/main/js/default/pages/index/index.js b/RatingApplication/entry/src/main/js/default/pages/index/index.js
index bfd21718c625b4f9b7e679c416a3ea0820dad01e..30cbcf0fd82f1b4dc2baa64c494dc64ef4d606fa 100644
--- a/RatingApplication/entry/src/main/js/default/pages/index/index.js
+++ b/RatingApplication/entry/src/main/js/default/pages/index/index.js
@@ -1,3 +1,17 @@
+/*
+ * 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.
+ */
 import prompt from '@system.prompt';
 
 export default {
diff --git a/RemoteStartFA/README.md b/RemoteStartFA/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..9815ca4317344882b0cce041f5c708785cbac947
--- /dev/null
+++ b/RemoteStartFA/README.md
@@ -0,0 +1,3 @@
+# RemoteStartFA
+简介
+• 此Demo使用openHarmony的分布式拉起能力，我们将会通过一个简单的样例，实现简单拉起分布式设备中应用的FA的效果
diff --git a/RemoteStartFA/entry/build.gradle b/RemoteStartFA/entry/build.gradle
index 6c2dca308825d3d38937c45c03918e1628bbfb75..cccb71cae91018743841ab76aeb19c595f4ed847 100644
--- a/RemoteStartFA/entry/build.gradle
+++ b/RemoteStartFA/entry/build.gradle
@@ -13,7 +13,7 @@ ohos {
             }
         }
     }
-    
+
     supportSystem "standard"
 }
 
diff --git a/RemoteStartFA/entry/src/main/config.json b/RemoteStartFA/entry/src/main/config.json
index ff55109de3362635f8c08ce54a2ec21e8e5316a6..8040d75c7fb8b260d34567d00a851334bb1be427 100644
--- a/RemoteStartFA/entry/src/main/config.json
+++ b/RemoteStartFA/entry/src/main/config.json
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.myapplication",
+    "bundleName": "com.huawei.cookbook",
     "vendor": "example",
     "version": {
       "code": 1000000,
@@ -9,9 +9,9 @@
   },
   "deviceConfig": {},
   "module": {
-    "package": "com.example.myapplication",
+    "package": "com.huawei.cookbook",
     "name": ".MyApplication",
-    "mainAbility": "com.example.myapplication.MainAbility",
+    "mainAbility": "com.huawei.cookbook.MainAbility",
     "deviceType": [
       "phone"
     ],
@@ -35,7 +35,7 @@
         ],
         "orientation": "unspecified",
         "visible": true,
-        "name": "com.example.myapplication.MainAbility",
+        "name": "com.huawei.cookbook.MainAbility",
         "icon": "$media:icon",
         "description": "$string:mainability_description",
         "formsEnabled": false,
diff --git a/RemoteStartFA/entry/src/main/js/default/app.js b/RemoteStartFA/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..5041528b0f5ac1c38749cb1b173835fcba17cfe7 100644
--- a/RemoteStartFA/entry/src/main/js/default/app.js
+++ b/RemoteStartFA/entry/src/main/js/default/app.js
@@ -1,8 +1,22 @@
+/*
+ * 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("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
+  onCreate() {
+        console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
 };
diff --git a/RemoteStartFA/entry/src/main/js/default/pages/index/index.css b/RemoteStartFA/entry/src/main/js/default/pages/index/index.css
index 6cfa4a3eb27b676f7ef8741539a0195b5003ab20..fc226534fda4b5911790930129ccce368f9fe87f 100644
--- a/RemoteStartFA/entry/src/main/js/default/pages/index/index.css
+++ b/RemoteStartFA/entry/src/main/js/default/pages/index/index.css
@@ -1,8 +1,23 @@
+/*
+ * 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.
+ */
 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    align-content: center;
     left: 0px;
     top: 0px;
     width: 100%;
@@ -10,10 +25,12 @@
 }
 
 .btn {
-    width: 100%;
+    margin-top: 40%;
+    width: 70%;
     height: 100px;
     font-size: 40px;
-    background-color: blue;
+    background-color: #2788D9;
+
 }
 
 .container {
diff --git a/RemoteStartFA/entry/src/main/js/default/pages/index/index.hml b/RemoteStartFA/entry/src/main/js/default/pages/index/index.hml
index 95842761381b34210d786746b57835111eca0fd0..f0e3501ca82019b6f9005ab82e326429532ff142 100644
--- a/RemoteStartFA/entry/src/main/js/default/pages/index/index.hml
+++ b/RemoteStartFA/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,16 @@
+<!--
+ 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="container" onswipe="touchMove">
     <input class="btn" type="button" value="{{ $t('strings.next') }}" onclick="onContinueAbilityClick"></input>
 
diff --git a/RemoteStartFA/entry/src/main/js/default/pages/index/index.js b/RemoteStartFA/entry/src/main/js/default/pages/index/index.js
index 6573be4398aa23d39aff0900eea9eab99057b373..f105a4da23dd2b3bc5fe3900134b212b6a7ff983 100644
--- a/RemoteStartFA/entry/src/main/js/default/pages/index/index.js
+++ b/RemoteStartFA/entry/src/main/js/default/pages/index/index.js
@@ -1,140 +1,148 @@
-import app from '@system.app'
+/*
+ * 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.
+ */
+import app from '@system.app';
 
 import featureAbility from '@ohos.ability.featureAbility';
 import RemoteDeviceModel from '../../../model/RemoteDeviceModel.js';
 
-const REMOTE_ABILITY_STARTED = 'remoteAbilityStarted';
-var DEVICE_LIST_LOCALHOST;
+let DEVICE_LIST_LOCALHOST;
 
 export default {
-    data: {
-        title: '',
-        deviceList: [],
-        remoteDeviceModel: new RemoteDeviceModel(),
-    },
-    onInit() {
-        console.info('onInit begin');
-        DEVICE_LIST_LOCALHOST = {
-            name: this.$t('strings.localhost'),
-            id: 'localhost',
-        };
-        this.deviceList = [DEVICE_LIST_LOCALHOST];
-        console.info('onInit end');
-    },
+  data: {
+    title: '',
+    deviceList: [],
+    remoteDeviceModel: new RemoteDeviceModel()
+  },
+  onInit() {
+    console.info('onInit begin');
+    DEVICE_LIST_LOCALHOST = {
+      name: this.$t('strings.localhost'),
+      id: 'localhost'
+    };
+    this.deviceList = [DEVICE_LIST_LOCALHOST];
+    console.info('onInit end');
+  },
 
-    onContinueAbilityClick() {
-        console.info('onContinueAbilityClick begin');
-        let self = this;
-        this.remoteDeviceModel.registerDeviceListCallback(() => {
-            console.info('registerDeviceListCallback, callback entered');
-            var list = [];
-            list[0] = DEVICE_LIST_LOCALHOST;
-            var deviceList;
-            if (self.remoteDeviceModel.discoverList.length > 0) {
-                deviceList = self.remoteDeviceModel.discoverList;
-            } else {
-                deviceList = self.remoteDeviceModel.deviceList;
-            }
-            console.info('on remote device updated, count=' + deviceList.length);
-            for (var i = 0; i < deviceList.length; i++) {
-                console.info('device ' + i + '/' + deviceList.length + ' deviceId='
+  onContinueAbilityClick() {
+    console.info('onContinueAbilityClick begin');
+    const self = this;
+    this.remoteDeviceModel.registerDeviceListCallback(() => {
+      console.info('registerDeviceListCallback, callback entered');
+      const list = [];
+      list[0] = DEVICE_LIST_LOCALHOST;
+      let deviceList;
+      if (self.remoteDeviceModel.discoverList.length > 0) {
+        deviceList = self.remoteDeviceModel.discoverList;
+      } else {
+        deviceList = self.remoteDeviceModel.deviceList;
+      }
+      console.info('on remote device updated, count=' + deviceList.length);
+      for (let i = 0; i < deviceList.length; i++) {
+        console.info('device ' + i + '/' + deviceList.length + ' deviceId='
                 + deviceList[i].deviceId + ' deviceName=' + deviceList[i].deviceName + ' deviceType='
                 + deviceList[i].deviceType);
-                list[i + 1] = {
-                    name: deviceList[i].deviceName,
-                    id: deviceList[i].deviceId,
-                };
-            }
-            self.deviceList = list;
-        });
-        this.$element('continueAbilityDialog').show();
-        this.isDialogShowing = true;
-        console.info('onContinueAbilityClick end');
-    },
-    startAbilityContinuation(deviceId, deviceName) {
-        this.$element('continueAbilityDialog').close();
-
-        console.info('featureAbility.startAbility deviceId=' + deviceId
-        + ' deviceName=' + deviceName);
-        var wantValue = {
-            bundleName: 'com.example.myapplication',
-            abilityName: 'com.example.myapplication.MainAbility',
-            deviceId: deviceId,
+        list[i + 1] = {
+          name: deviceList[i].deviceName,
+          id: deviceList[i].deviceId
         };
+      }
+      self.deviceList = list;
+    });
+    this.$element('continueAbilityDialog').show();
+    console.info('onContinueAbilityClick end');
+  },
+  startAbilityContinuation(deviceId, deviceName) {
+    this.$element('continueAbilityDialog').close();
+    console.info('featureAbility.startAbility deviceId=' + deviceId
+        + ' deviceName=' + deviceName);
+    const wantValue = {
+      bundleName: 'com.huawei.cookbook',
+      abilityName: 'com.huawei.cookbook.MainAbility',
+      deviceId: deviceId
+    };
 
-        featureAbility.startAbility({
-            want: wantValue
-        }).then((data) => {
-            console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
-        });
-        console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
-        console.info('featureAbility.startAbility end');
-    },
-    onRadioChange(inputValue, e) {
-        console.info('onRadioChange ' + inputValue + ', ' + e.value);
-        if (inputValue === e.value) {
-            if (e.value === 'localhost') {
-                this.$element('continueAbilityDialog').close();
-                return;
-            }
-            if (this.remoteDeviceModel.discoverList.length > 0) {
-                console.info('continue to unauthed device');
-                var name = null;
-                for (var i = 0; i < this.remoteDeviceModel.discoverList.length; i++) {
-                    if (this.remoteDeviceModel.discoverList[i].deviceId === e.value) {
-                        name = this.remoteDeviceModel.discoverList[i].deviceName;
-                        break;
-                    }
-                }
-                if (name == null) {
-                    console.error('onRadioChange failed, can not get name from discoverList');
-                    return;
-                }
-                console.info('onRadioChange name=' + name);
+    featureAbility.startAbility({
+      want: wantValue
+    }).then((data) => {
+      console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
+    });
+    console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
+    console.info('featureAbility.startAbility end');
+  },
+  onRadioChange(inputValue, e) {
+    console.info('onRadioChange ' + inputValue + ', ' + e.value);
+    if (inputValue === e.value) {
+      if (e.value === 'localhost') {
+        this.$element('continueAbilityDialog').close();
+        return;
+      }
+      if (this.remoteDeviceModel.discoverList.length > 0) {
+        console.info('continue to unauthed device');
+        let name = null;
+        for (let i = 0; i < this.remoteDeviceModel.discoverList.length; i++) {
+          if (this.remoteDeviceModel.discoverList[i].deviceId === e.value) {
+            name = this.remoteDeviceModel.discoverList[i].deviceName;
+            break;
+          }
+        }
+        if (name === null) {
+          console.error('onRadioChange failed, can not get name from discoverList');
+          return;
+        }
+        console.info('onRadioChange name=' + name);
 
-                let self = this;
-                this.remoteDeviceModel.authDevice(e.value, () => {
-                    console.info('auth and online finished');
-                    for (i = 0; i < self.remoteDeviceModel.deviceList.length; i++) {
-                        if (self.remoteDeviceModel.deviceList[i].deviceName === name) {
-                            this.startAbilityContinuation(self.remoteDeviceModel.deviceList[i].deviceId, self.remoteDeviceModel.deviceList[i].deviceName);
-                        }
-                    }
-                });
-            } else {
-                console.info('continue to authed device');
-                for (i = 0; i < this.remoteDeviceModel.deviceList.length; i++) {
-                    if (this.remoteDeviceModel.deviceList[i].deviceId === e.value) {
-                        this.startAbilityContinuation(this.remoteDeviceModel.deviceList[i].deviceId, this.remoteDeviceModel.deviceList[i].deviceName);
-                    }
-                }
+        const self = this;
+        this.remoteDeviceModel.authDevice(e.value, () => {
+          console.info('auth and online finished');
+          for (let i = 0; i < self.remoteDeviceModel.deviceList.length; i++) {
+            if (self.remoteDeviceModel.deviceList[i].deviceName === name) {
+              this.startAbilityContinuation(self.remoteDeviceModel.deviceList[i].deviceId, self.remoteDeviceModel.deviceList[i].deviceName);
             }
+          }
+        });
+      } else {
+        console.info('continue to authed device');
+        for (let i = 0; i < this.remoteDeviceModel.deviceList.length; i++) {
+          if (this.remoteDeviceModel.deviceList[i].deviceId === e.value) {
+            this.startAbilityContinuation(this.remoteDeviceModel.deviceList[i].deviceId, this.remoteDeviceModel.deviceList[i].deviceName);
+          }
         }
-    },
-    onDestroy() {
-        console.info('onDestroy begin');
-        this.remoteDeviceModel.unregisterDeviceListCallback();
-        console.info('onDestroy end');
-    },
-    cancelDialog(e) {
-        this.remoteDeviceModel.unregisterDeviceListCallback();
-    },
-    onDismissDialogClicked(e) {
-        this.dismissDialog();
-    },
-    dismissDialog() {
-        this.$element('continueAbilityDialog').close();
-        this.remoteDeviceModel.unregisterDeviceListCallback();
-    },
-    touchMove(e) {
-        if (e.direction == "right") {
-            this.appExit();
-        }
-    },
-    appExit() {
-        app.terminate()
+      }
     }
-}
-
-
-
+  },
+  onDestroy() {
+    console.info('onDestroy begin');
+    this.remoteDeviceModel.unregisterDeviceListCallback();
+    console.info('onDestroy end');
+  },
+  cancelDialog() {
+    this.remoteDeviceModel.unregisterDeviceListCallback();
+  },
+  onDismissDialogClicked() {
+    this.dismissDialog();
+  },
+  dismissDialog() {
+    this.$element('continueAbilityDialog').close();
+    this.remoteDeviceModel.unregisterDeviceListCallback();
+  },
+  touchMove(e) {
+    if (e.direction === 'right') {
+      this.appExit();
+    }
+  },
+  appExit() {
+    app.terminate();
+  }
+};
diff --git a/RemoteStartFA/entry/src/main/js/model/RemoteDeviceModel.js b/RemoteStartFA/entry/src/main/js/model/RemoteDeviceModel.js
index 6e91a1a1e68e38ca7b909546aae92b3c78361b37..51ffe396d0ab6912bd38f6573e6c935a6e4abf30 100644
--- a/RemoteStartFA/entry/src/main/js/model/RemoteDeviceModel.js
+++ b/RemoteStartFA/entry/src/main/js/model/RemoteDeviceModel.js
@@ -29,48 +29,48 @@ export default class RemoteDeviceModel {
 
     registerDeviceListCallback(callback) {
         if (typeof (this.#deviceManager) === 'undefined') {
-            console.log('MusicPlayer[RemoteDeviceModel] deviceManager.createDeviceManager begin');
+            console.log('CookBook[RemoteDeviceModel] deviceManager.createDeviceManager begin');
             let self = this;
-            deviceManager.createDeviceManager('com.ohos.distributedmusicplayer', (error, value) => {
+            deviceManager.createDeviceManager('com.ohos.distributedRemoteStartFA', (error, value) => {
                 if (error) {
                     console.error('createDeviceManager failed.');
                     return;
                 }
                 self.#deviceManager = value;
                 self.registerDeviceListCallback_(callback);
-                console.log('MusicPlayer[RemoteDeviceModel] createDeviceManager callback returned, error=' + error + ' value=' + value);
+                console.log('CookBook[RemoteDeviceModel] createDeviceManager callback returned, error=' + error + ' value=' + value);
             });
-            console.log('MusicPlayer[RemoteDeviceModel] deviceManager.createDeviceManager end');
+            console.log('CookBook[RemoteDeviceModel] deviceManager.createDeviceManager end');
         } else {
             this.registerDeviceListCallback_(callback);
         }
     }
 
     registerDeviceListCallback_(callback) {
-        console.info('MusicPlayer[RemoteDeviceModel] registerDeviceListCallback');
+        console.info('CookBook[RemoteDeviceModel] registerDeviceListCallback');
         this.callback = callback;
         if (this.#deviceManager == undefined) {
-            console.error('MusicPlayer[RemoteDeviceModel] deviceManager has not initialized');
+            console.error('CookBook[RemoteDeviceModel] deviceManager has not initialized');
             this.callback();
             return;
         }
 
-        console.info('MusicPlayer[RemoteDeviceModel] getTrustedDeviceListSync begin');
+        console.info('CookBook[RemoteDeviceModel] getTrustedDeviceListSync begin');
         var list = this.#deviceManager.getTrustedDeviceListSync();
-        console.info('MusicPlayer[RemoteDeviceModel] getTrustedDeviceListSync end, deviceList=' + JSON.stringify(list));
+        console.info('CookBook[RemoteDeviceModel] getTrustedDeviceListSync end, deviceList=' + JSON.stringify(list));
         if (typeof (list) != 'undefined' && typeof (list.length) != 'undefined') {
             this.deviceList = list;
         }
         this.callback();
-        console.info('MusicPlayer[RemoteDeviceModel] callback finished');
+        console.info('CookBook[RemoteDeviceModel] callback finished');
 
         let self = this;
         this.#deviceManager.on('deviceStateChange', (data) => {
-            console.info('MusicPlayer[RemoteDeviceModel] deviceStateChange data=' + JSON.stringify(data));
+            console.info('CookBook[RemoteDeviceModel] deviceStateChange data=' + JSON.stringify(data));
             switch (data.action) {
                 case 0:
                 self.deviceList[self.deviceList.length] = data.device;
-                console.info('MusicPlayer[RemoteDeviceModel] online, updated device list=' + JSON.stringify(self.deviceList));
+                console.info('CookBook[RemoteDeviceModel] online, updated device list=' + JSON.stringify(self.deviceList));
                 self.callback();
                 if (self.authCallback != null) {
                     self.authCallback();
@@ -86,7 +86,7 @@ export default class RemoteDeviceModel {
                         }
                     }
                 }
-                console.info('MusicPlayer[RemoteDeviceModel] change, updated device list=' + JSON.stringify(self.deviceList));
+                console.info('CookBook[RemoteDeviceModel] change, updated device list=' + JSON.stringify(self.deviceList));
                 self.callback();
                 break;
                 case 1:
@@ -99,7 +99,7 @@ export default class RemoteDeviceModel {
                     }
                     self.deviceList = list;
                 }
-                console.info('MusicPlayer[RemoteDeviceModel] offline, updated device list=' + JSON.stringify(data.device));
+                console.info('CookBook[RemoteDeviceModel] offline, updated device list=' + JSON.stringify(data.device));
                 self.callback();
                 break;
                 default:
@@ -107,12 +107,12 @@ export default class RemoteDeviceModel {
             }
         });
         this.#deviceManager.on('deviceFound', (data) => {
-            console.info('MusicPlayer[RemoteDeviceModel] deviceFound data=' + JSON.stringify(data));
-            console.info('MusicPlayer[RemoteDeviceModel] deviceFound self.deviceList=' + self.deviceList);
-            console.info('MusicPlayer[RemoteDeviceModel] deviceFound self.deviceList.length=' + self.deviceList.length);
+            console.info('CookBook[RemoteDeviceModel] deviceFound data=' + JSON.stringify(data));
+            console.info('CookBook[RemoteDeviceModel] deviceFound self.deviceList=' + self.deviceList);
+            console.info('CookBook[RemoteDeviceModel] deviceFound self.deviceList.length=' + self.deviceList.length);
             for (var i = 0; i < self.discoverList.length; i++) {
                 if (self.discoverList[i].deviceId === data.device.deviceId) {
-                    console.info('MusicPlayer[RemoteDeviceModel] device founded, ignored');
+                    console.info('CookBook[RemoteDeviceModel] device founded, ignored');
                     return;
                 }
             }
@@ -120,10 +120,10 @@ export default class RemoteDeviceModel {
             self.callback();
         });
         this.#deviceManager.on('discoverFail', (data) => {
-            console.info('MusicPlayer[RemoteDeviceModel] discoverFail data=' + JSON.stringify(data));
+            console.info('CookBook[RemoteDeviceModel] discoverFail data=' + JSON.stringify(data));
         });
         this.#deviceManager.on('serviceDie', () => {
-            console.error('MusicPlayer[RemoteDeviceModel] serviceDie');
+            console.error('CookBook[RemoteDeviceModel] serviceDie');
         });
 
         SUBSCRIBE_ID = Math.floor(65536 * Math.random());
@@ -136,19 +136,19 @@ export default class RemoteDeviceModel {
             isWakeRemote: true,
             capability: 0
         };
-        console.info('MusicPlayer[RemoteDeviceModel] startDeviceDiscovery ' + SUBSCRIBE_ID);
+        console.info('CookBook[RemoteDeviceModel] startDeviceDiscovery ' + SUBSCRIBE_ID);
         this.#deviceManager.startDeviceDiscovery(info);
     }
 
     authDevice(deviceId, callback) {
-        console.info('MusicPlayer[RemoteDeviceModel] authDevice ' + deviceId);
+        console.info('CookBook[RemoteDeviceModel] authDevice ' + deviceId);
         for (var i = 0; i < this.discoverList.length; i++) {
             if (this.discoverList[i].deviceId === deviceId) {
-                console.info('MusicPlayer[RemoteDeviceModel] device founded, ignored');
+                console.info('CookBook[RemoteDeviceModel] device founded, ignored');
                 let extraInfo = {
-                    "targetPkgName": 'com.ohos.distributedmusicplayer',
-                    "appName": 'Music',
-                    "appDescription": 'Music player application',
+                    "targetPkgName": 'com.ohos.distributedRemoteStartFA',
+                    "appName": 'demo',
+                    "appDescription": 'demo application',
                     "business": '0'
                 };
                 let authParam = {
@@ -157,14 +157,14 @@ export default class RemoteDeviceModel {
                     "appThumbnail": '',
                     "extraInfo": extraInfo
                 };
-                console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice ' + JSON.stringify(this.discoverList[i]));
+                console.info('CookBook[RemoteDeviceModel] authenticateDevice ' + JSON.stringify(this.discoverList[i]));
                 let self = this;
                 this.#deviceManager.authenticateDevice(this.discoverList[i], authParam, (err, data) => {
                     if (err) {
-                        console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice failed, err=' + JSON.stringify(err));
+                        console.info('CookBook[RemoteDeviceModel] authenticateDevice failed, err=' + JSON.stringify(err));
                         self.authCallback = null;
                     } else {
-                        console.info('MusicPlayer[RemoteDeviceModel] authenticateDevice succeed, data=' + JSON.stringify(data));
+                        console.info('CookBook[RemoteDeviceModel] authenticateDevice succeed, data=' + JSON.stringify(data));
                         self.authCallback = callback;
                     }
                 });
@@ -173,7 +173,7 @@ export default class RemoteDeviceModel {
     }
 
     unregisterDeviceListCallback() {
-        console.info('MusicPlayer[RemoteDeviceModel] stopDeviceDiscovery ' + SUBSCRIBE_ID);
+        console.info('CookBook[RemoteDeviceModel] stopDeviceDiscovery ' + SUBSCRIBE_ID);
         this.#deviceManager.stopDeviceDiscovery(SUBSCRIBE_ID);
         this.#deviceManager.off('deviceStateChange');
         this.#deviceManager.off('deviceFound');
diff --git a/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.css b/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.css
index 2ddc9d8e549aeaee52441c2959e55ee9746bc35a..c09c28e2c538ccad98671068ebf6f4cf35903fc7 100644
--- a/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.css
+++ b/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.css
@@ -16,6 +16,7 @@
 .container {
     flex-direction: column;
     align-items: center;
+    width: 100%;
 }
 
 .title {
@@ -41,6 +42,7 @@
 }
 
 .item-content {
+    width: 100%;
     height: 100%;
     justify-content: center;
 }
@@ -50,6 +52,7 @@
 }
 
 .tab-bar {
+    width: 100%;
     height: 60px;
     border-color: #30a9e4f0;
     background-color: #007DFF;
@@ -231,6 +234,7 @@
 }
 
 .container-my-top {
+    width : 100%;
     height: 150px;
 }
 
@@ -275,6 +279,7 @@
 .container-my-title {
     flex-direction: row;
     height: 70px;
+    width : 100%;
     justify-content: space-around;
 }
 
@@ -289,6 +294,7 @@
 
 .container-my-deals {
     flex-direction: column;
+    width : 100%;
     height: 140px;
 }
 
@@ -302,12 +308,14 @@
 .container-my-deals-div {
     justify-content: space-around;
     font-weight: 700;
+    width : 100%;
     height: 100px;
 }
 
 .container-my-deals-div-div {
     flex-direction: column;
     justify-content: center;
+    width : 100%;
     align-items: center;
 }
 
@@ -322,6 +330,7 @@
 }
 
 .container-my-more {
+    width : 100%;
     flex-direction: column;
     margin-bottom: 65px;
 }
@@ -338,6 +347,7 @@
 }
 
 .container-my-more-divs {
+    width : 100%;
     justify-content: space-around;
 }
 
@@ -345,6 +355,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width : 100%;
     height: 110px;
 }
 
diff --git a/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.hml b/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.hml
index 3b79c2b8199cda44a38d175e7efd5d238c196215..0022b5d2b56fcb7c09bc667713433d507f48ad6d 100644
--- a/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.hml
+++ b/ShoppingOpenHarmony/entry/src/main/js/default/pages/homepage/homepage.hml
@@ -14,38 +14,38 @@
  */-->
 
 <div class="container">
-    <div class="container" id="target" show="{{flag === oneFlag}}">
-        <search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" focusable="true"
+    <div class="container" id="target" show="{{ flag === oneFlag }}">
+        <search hint="{{ pageWord.searchKeyWord }}" value="{{ pageWord.searchValue }}" focusable="true"
                 @submit="submitColumn">
         </search>
         <tabs class="tabs" index="0" vertical="false" onchange="change">
             <tab-bar class="tab-bar" mode="fixed">
-                <text class="tab-text" for="{{ item in titileList}}">{{ item }}
+                <text class="tab-text" for="{{ item in titileList }}">{{ item }}
                 </text>
             </tab-bar>
             <tab-content class="tabcontent" scrollable="true">
-                <div class="item-content" for="{{ item in contentList}}">
+                <div class="item-content" for="{{ item in contentList }}">
                     <list class="todo-wraper">
-                        <list-item for="{{allList}}">
+                        <list-item for="{{ allList }}">
                             <div class="margin-comm" @click="detailPage">
                                 <div class="todo-total">
                                     <text class="todo-title">
-                                        {{$item.title}}
+                                        {{ $item.title }}
                                     </text>
                                     <text class="todo-content">
-                                        {{$item.content}}
+                                        {{ $item.content }}
                                     </text>
                                     <text class="todo-price">
                                         <span>
                                             ￥
                                         </span>
                                         <span>
-                                            {{$item.price}}
+                                            {{ $item.price }}
                                         </span>
                                     </text>
                                 </div>
                                 <div class="width-comm">
-                                    <image src="{{$item.imgSrc}}" class="container-home-image">
+                                    <image src="{{ $item.imgSrc }}" class="container-home-image">
                                     </image>
                                 </div>
                             </div>
@@ -55,30 +55,30 @@
             </tab-content>
         </tabs>
     </div>
-    <div class="container-home-pinned" show="{{flag === oneFlag}}">
+    <div class="container-home-pinned" show="{{ flag === oneFlag }}">
         <image src="/common/computer/icon-pinn.png" @click="stickFloat">
         </image>
     </div>
-    <div class="container-shopping-title" show="{{flag === threeFlag}}">
+    <div class="container-shopping-title" show="{{ flag === threeFlag }}">
         <text>
-            {{pageWord.shopingCart}}
+            {{ pageWord.shopingCart }}
         </text>
     </div>
-    <div class="container" show="{{flag === threeFlag}}">
+    <div class="container" show="{{ flag === threeFlag }}">
         <div class="top-comm flex-direction-column">
             <div for="{{ latestList }}" class="flex-direction-column">
                 <div class="container-shopping-list">
-                    <input type="checkbox" value="{{$item.price}}" @change="addShopping">
+                    <input type="checkbox" value="{{ $item.price }}" @change="addShopping">
                     </input>
-                    <image src="{{$item.imgSrc}}" class="container-shopping-list-image">
+                    <image src="{{ $item.imgSrc }}" class="container-shopping-list-image">
                     </image>
                     <div class="container-shopping-list-div">
                         <text class="container-shopping-list-div-text">
-                            {{$item.title}}
+                            {{ $item.title }}
                         </text>
                         <text class="container-shopping-list-div-texts">
                             <span>
-                                {{$item.price}}
+                                {{ $item.price }}
                             </span>
                             <span>
                                 元
@@ -91,14 +91,14 @@
             </div>
         </div>
     </div>
-    <div class="container-shopping-bottom" show="{{flag === threeFlag}}">
+    <div class="container-shopping-bottom" show="{{ flag === threeFlag }}">
         <div class="container-shopping-bottom-div">
             <text class="container-shopping-bottom-div-text">
                 <span>
                     合计：
                 </span>
                 <span>
-                    {{priceTotal}}
+                    {{ priceTotal }}
                 </span>
                 <span>
                     元
@@ -107,11 +107,11 @@
         </div>
         <div class="container-shopping-bottom-divs">
             <text class="container-shopping-bottom-divs-texts" @click="clickSettlement">
-                {{pageWord.settlement}}
+                {{ pageWord.settlement }}
             </text>
         </div>
     </div>
-    <div class="container" show="{{flag === fourFlag}}">
+    <div class="container" show="{{ flag === fourFlag }}">
         <div class="container-my-top">
             <div class="container-my-top-div">
                 <image src="/common/nav/icon-user.png" class="container-my-top-div-image">
@@ -119,10 +119,10 @@
             </div>
             <div class="container-my-top-divs">
                 <text class="container-my-top-divs-text">
-                    {{pageWord.nickname}}
+                    {{ pageWord.nickname }}
                 </text>
                 <text class="container-my-top-divs-texts">
-                    {{pageWord.memberName}}{{pageWord.nickname}}
+                    {{ pageWord.memberName }}{{ pageWord.nickname }}
                 </text>
             </div>
             <div class="container-my-top-divss">
@@ -131,25 +131,25 @@
             </div>
         </div>
         <div class="container-my-title">
-            <div class="flex-direction-column" for="{{item in menu}}">
+            <div class="flex-direction-column" for="{{ item in menu }}">
                 <text class="container-my-title-text">
-                    {{item.title}}
+                    {{ item.title }}
                 </text>
                 <text class="container-my-title-texts">
-                    {{item.num}}
+                    {{ item.num }}
                 </text>
             </div>
         </div>
         <div class="container-my-deals">
             <text class="container-my-deals-text">
-                {{pageWord.myDeals}}
+                {{ pageWord.myDeals }}
             </text>
             <div class="container-my-deals-div">
-                <div class="container-my-deals-div-div" for="{{transaction}}">
-                    <image src="{{$item.src}}" class="container-my-image">
+                <div class="container-my-deals-div-div" for="{{ transaction }}">
+                    <image src="{{ $item.src }}" class="container-my-image">
                     </image>
                     <text class="container-my-text">
-                        {{$item.title}}{{$item.num}}
+                        {{ $item.title }}{{ $item.num }}
                     </text>
                 </div>
             </div>
@@ -157,26 +157,26 @@
         <div class="container-my-more">
             <div class="container-my-more-div">
                 <text class="container-my-more-div-text">
-                    {{pageWord.more}}
+                    {{ pageWord.more }}
                 </text>
             </div>
-            <div class="container-my-more-divs" for="{{item in more}}">
-                <div class="container-my-more-divs-div" for="{{child in item}}">
-                    <image src="{{child.src}}" class="container-my-image">
+            <div class="container-my-more-divs" for="{{ item in more }}">
+                <div class="container-my-more-divs-div" for="{{ child in item }}">
+                    <image src="{{ child.src }}" class="container-my-image">
                     </image>
                     <text class="container-my-text">
-                        {{child.title}}
+                        {{ child.title }}
                     </text>
                 </div>
             </div>
         </div>
     </div>
-    <div class="container-bottom-div" @click="clickBuy">
-        <image src="{{icon.buys}}" class="container-bottom-div-image" @click="clickBuy">
+    <div class="container-bottom-div">
+        <image src="{{ icon.buys }}" class="container-bottom-div-image" @click="clickBuy">
         </image>
-        <image src="{{icon.shoppingCarts}}" class="container-bottom-div-image" @click="clickShoppingCart">
+        <image src="{{ icon.shoppingCarts }}" class="container-bottom-div-image" @click="clickShoppingCart">
         </image>
-        <image src="{{icon.mys}}" class="container-bottom-div-image" @click="clickMy">
+        <image src="{{ icon.mys }}" class="container-bottom-div-image" @click="clickMy">
         </image>
     </div>
 </div>
\ No newline at end of file
diff --git a/ShoppingOpenHarmony/entry/src/main/js/default/pages/viewsChart/viewsChart.css b/ShoppingOpenHarmony/entry/src/main/js/default/pages/viewsChart/viewsChart.css
index 89cc11d7bd3890c704289a325bea9218c019e5fd..1519177da8ae15c5c4c27b2025b48c717240095a 100644
--- a/ShoppingOpenHarmony/entry/src/main/js/default/pages/viewsChart/viewsChart.css
+++ b/ShoppingOpenHarmony/entry/src/main/js/default/pages/viewsChart/viewsChart.css
@@ -17,6 +17,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100%;
 }
 
 .chart-region {
diff --git a/SliderApplication/README.MD b/SliderApplication/README.MD
new file mode 100644
index 0000000000000000000000000000000000000000..dc308eb80a6ba71c09ff6243b6d8d81f9047727d
--- /dev/null
+++ b/SliderApplication/README.MD
@@ -0,0 +1,3 @@
+# SliderApplication
+简介
+• 此Demo使用JS UI中的slider、image组件和动画样式，实现拖拽slider控制风车图片的转速和大小。您可以通过设置slider的值改变image的转速和图片大小。
diff --git a/SliderApplication/entry/src/main/js/default/app.js b/SliderApplication/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..40ab2bd1818c2cefaf2b65b19ff5dc4f20314ac2 100644
--- a/SliderApplication/entry/src/main/js/default/app.js
+++ b/SliderApplication/entry/src/main/js/default/app.js
@@ -1,8 +1,23 @@
+/*
+ * 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("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
 };
diff --git a/SliderApplication/entry/src/main/js/default/pages/index/index.css b/SliderApplication/entry/src/main/js/default/pages/index/index.css
index 29c0dd95d61bb8644fd61a2e5fa10640332bf8a0..35db1d6fdd0514f4300555651f035357aada71dd 100644
--- a/SliderApplication/entry/src/main/js/default/pages/index/index.css
+++ b/SliderApplication/entry/src/main/js/default/pages/index/index.css
@@ -1,3 +1,17 @@
+/*
+ * 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.
+ */
 /* 页面整体纵向布局 */
 .container {
     flex-direction: column;
diff --git a/SliderApplication/entry/src/main/js/default/pages/index/index.hml b/SliderApplication/entry/src/main/js/default/pages/index/index.hml
index 439b7602de6c3fea01e12967d9d1e27099a7e9ad..50c08cdf55f17497d4ee730a05a9f1f7a22507fd 100644
--- a/SliderApplication/entry/src/main/js/default/pages/index/index.hml
+++ b/SliderApplication/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,16 @@
+<!--
+ 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="container">
     <div class="image-block">
         <image id="image" src="{{imgUrl}}" style="transform: scale({{imageSize}}); animation-duration: {{animationDuration}};"/>
diff --git a/SliderApplication/entry/src/main/js/default/pages/index/index.js b/SliderApplication/entry/src/main/js/default/pages/index/index.js
index 84e13d6ba9e6771871bd6fd34d927bd64a4d473f..09d7f73d7fca11aec9ad0d1e8baa6cbb11b7bbce 100644
--- a/SliderApplication/entry/src/main/js/default/pages/index/index.js
+++ b/SliderApplication/entry/src/main/js/default/pages/index/index.js
@@ -1,3 +1,17 @@
+/*
+ * 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 {
   data: {
     imgUrl: '/common/images/windmill.png',
diff --git a/SwitchApplication/README.md b/SwitchApplication/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..7481e729f14165d29966bebb24340944ea81318a
--- /dev/null
+++ b/SwitchApplication/README.md
@@ -0,0 +1,3 @@
+# SwitchApplication
+简介
+• 此Demo使用了JS UI中的switch、chart组件。 您可以通过切换switch开关设置chart图表数据静态或动态显示。
diff --git a/SwitchApplication/entry/src/main/js/default/app.js b/SwitchApplication/entry/src/main/js/default/app.js
index 6d060ffe5682c19fc83e2274a9e62cbc40a655f8..40ab2bd1818c2cefaf2b65b19ff5dc4f20314ac2 100644
--- a/SwitchApplication/entry/src/main/js/default/app.js
+++ b/SwitchApplication/entry/src/main/js/default/app.js
@@ -1,8 +1,23 @@
+/*
+ * 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("Application onCreate");
-    },
-    onDestroy() {
-        console.info("Application onDestroy");
-    }
+  onCreate() {
+    console.info('Application onCreate');
+  },
+  onDestroy() {
+    console.info('Application onDestroy');
+  }
 };
diff --git a/SwitchApplication/entry/src/main/js/default/pages/index/index.css b/SwitchApplication/entry/src/main/js/default/pages/index/index.css
index c7293bf849f207afac7b97f31a03fe358768fb8d..dea4258eb15894777eb6babe0691ded0eb238b1a 100644
--- a/SwitchApplication/entry/src/main/js/default/pages/index/index.css
+++ b/SwitchApplication/entry/src/main/js/default/pages/index/index.css
@@ -1,3 +1,17 @@
+/*
+ * 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.
+ */
 .container {
     flex-direction: column;
     align-items: center;
diff --git a/SwitchApplication/entry/src/main/js/default/pages/index/index.hml b/SwitchApplication/entry/src/main/js/default/pages/index/index.hml
index ebfc11a58b20dca2d063a8efbf35bce2ae9cdd57..f004a367a31b00a98d77aab20dbc9a2625ac2785 100644
--- a/SwitchApplication/entry/src/main/js/default/pages/index/index.hml
+++ b/SwitchApplication/entry/src/main/js/default/pages/index/index.hml
@@ -1,3 +1,16 @@
+<!--
+ 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="container">
     <div class="switch-block">
         <switch class="switch"
diff --git a/SwitchApplication/entry/src/main/js/default/pages/index/index.js b/SwitchApplication/entry/src/main/js/default/pages/index/index.js
index 2f5d8d0b57f156d018e4844315f25fb802cd1e31..75b6aeea3f8df4976f2aef1b22b9c1fd6424cb9c 100644
--- a/SwitchApplication/entry/src/main/js/default/pages/index/index.js
+++ b/SwitchApplication/entry/src/main/js/default/pages/index/index.js
@@ -1,3 +1,17 @@
+/*
+ * 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 {
   data: {
     interval: null, // 定时器对象
diff --git a/VideoOpenHarmony/entry/src/main/config.json b/VideoOpenHarmony/entry/src/main/config.json
index 787d04a51c18ac67f41c39b2e9eebe8d23a4d788..b4effbbe452b9b20cd21cb373b9c3ff0b5dffc97 100644
--- a/VideoOpenHarmony/entry/src/main/config.json
+++ b/VideoOpenHarmony/entry/src/main/config.json
@@ -56,6 +56,12 @@
           "autoDesignWidth": true
         }
       }
-    ]
+    ],
+    "distroFilter": {
+      "apiVersion": {
+        "policy": "include",
+        "value": []
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.css b/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.css
index 1fa6d8321534687aec6bdd630cb733db2f3cc63e..d0c0438da826efc136401136da26208b4939315c 100644
--- a/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.css
+++ b/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.css
@@ -27,6 +27,6 @@
 }
 
 #videoId {
-    height: 90%;
+    height: 100%;
     width: 100%;
 }
diff --git a/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.hml b/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.hml
index bacdc839754ceebeedd138d8d9ac50aed61a7273..0383fe3542b551893477040e2233940dce5bd479 100644
--- a/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.hml
+++ b/VideoOpenHarmony/entry/src/main/js/default/pages/videopage/videopage.hml
@@ -14,10 +14,6 @@ limitations under the License.
 -->
 
 <div class="container">
-    <div>
-        <text class="title">视频准备播放中，如未自动播放，请点击下侧播放按键</text>
-    </div>
-
     <video id='videoId' src='/common/TestVideo.mp4' muted='false' autoplay='true'
            poster='/common/images/video_list1.png' controls="true" onprepared='preparedCallback'
            onstart='startCallback' onpause='pauseCallback' onfinish='finishCallback'