diff --git a/UI/JsList/README_zh.md b/UI/JsList/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..0e2f77c2a575ed83d78107dd0f1103efa61dd3b3
--- /dev/null
+++ b/UI/JsList/README_zh.md
@@ -0,0 +1,15 @@
+# **JSList商品列表**
+
+### **简介**
+
+本示例展示了list控件在商品分类列表中的应用，在listGroup里采用两个list-item分别展示了Group收缩和Group展开的两种列表形态，点击后会弹出相应的list列表。
+
+### **使用说明**
+
+1.本应用以收缩后的列表页面作为初始界面，此界面采用<list-item>作为<list>子组件展示了手机、平板、智慧办公三个品类，实现了点击其中一种商品品类，展示出对应品类的商品列表的功能。再次点击某个展开后的列表，将收缩展开列表。
+
+2.可通过增删改zh-cn.json文件中各类栏目商品的数据，查看购物界面的变化。
+
+### **约束与限制**
+
+本示例支持标准系统上运行
diff --git a/UI/JsList/build.gradle b/UI/JsList/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..c77bab38c2570c8f95a758447658491c6f8d1a1f
--- /dev/null
+++ b/UI/JsList/build.gradle
@@ -0,0 +1,32 @@
+apply plugin: 'com.huawei.ohos.app'
+
+ohos {
+    compileSdkVersion 7
+    supportSystem "standard"
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.3.2'
+        classpath 'com.huawei.ohos:decctest:1.2.6.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/UI/JsList/entry/build.gradle b/UI/JsList/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..1587dd1948941f3eaaf092ae6cae7969cb6895ff
--- /dev/null
+++ b/UI/JsList/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.1'
+}
diff --git a/UI/JsList/entry/src/main/config.json b/UI/JsList/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..913cc10eba4ce9cdcc731ee46a55e04e151824bc
--- /dev/null
+++ b/UI/JsList/entry/src/main/config.json
@@ -0,0 +1,62 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.jslist",
+    "vendor": "samples",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.jslist",
+    "name": ".default",
+    "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,
+        "name": ".default",
+        "srcPath": "default",
+        "srcLanguage": "js",
+        "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/UI/JsList/entry/src/main/js/default/app.js b/UI/JsList/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/UI/JsList/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/UI/JsList/entry/src/main/js/default/common/image/freebudsfour.png b/UI/JsList/entry/src/main/js/default/common/image/freebudsfour.png
new file mode 100644
index 0000000000000000000000000000000000000000..f55015847a77f82af32fbac029bc620b48a292fb
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/freebudsfour.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/freebudspro.png b/UI/JsList/entry/src/main/js/default/common/image/freebudspro.png
new file mode 100644
index 0000000000000000000000000000000000000000..72293ea73e9587199faaa931682400116ff6f0e9
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/freebudspro.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/freebudstudio.png b/UI/JsList/entry/src/main/js/default/common/image/freebudstudio.png
new file mode 100644
index 0000000000000000000000000000000000000000..d022609b41dd7b01ca64a48b7f952e2fc0b519cd
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/freebudstudio.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/freelacepro.png b/UI/JsList/entry/src/main/js/default/common/image/freelacepro.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f76b952003ba8d015c84b28e9ff59f7574d5dbd
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/freelacepro.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/mate.jpg b/UI/JsList/entry/src/main/js/default/common/image/mate.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0494228beace9691aeb8164552ce77ac4543eef3
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/mate.jpg differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/matebook.png b/UI/JsList/entry/src/main/js/default/common/image/matebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..298a92aaf9700f9d03a0e6baf75d9e0485c6af7f
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/matebook.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/matepad.png b/UI/JsList/entry/src/main/js/default/common/image/matepad.png
new file mode 100644
index 0000000000000000000000000000000000000000..fad71021f1eedf19ade402a6b6aedde113d506bd
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/matepad.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/matepadone.jpg b/UI/JsList/entry/src/main/js/default/common/image/matepadone.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c4ed4a8b8bfbc31cf80198cf5f173a152213ac7b
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/matepadone.jpg differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/maters.png b/UI/JsList/entry/src/main/js/default/common/image/maters.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c6dee8ba49bf6df7fac74bb1168d0d06fde146b
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/maters.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/matestations.png b/UI/JsList/entry/src/main/js/default/common/image/matestations.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6e1ce4f9e380964fbf8734399801212e0ce52bc
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/matestations.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/matestationx.png b/UI/JsList/entry/src/main/js/default/common/image/matestationx.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb809650191a4b273ec0e749f946223eea2a0473
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/matestationx.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/mateview.png b/UI/JsList/entry/src/main/js/default/common/image/mateview.png
new file mode 100644
index 0000000000000000000000000000000000000000..b03bc87df512a86a141c4bfd6dd2d7ac334d54d4
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/mateview.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/matex.jpg b/UI/JsList/entry/src/main/js/default/common/image/matex.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..09b5672a764519316c3dd8dc4b2a9cce63e2a46d
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/matex.jpg differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/pfif.jpg b/UI/JsList/entry/src/main/js/default/common/image/pfif.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7925e783d84e8f84182620937bc0d78a92755b42
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/pfif.jpg differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/pixlab.jpg b/UI/JsList/entry/src/main/js/default/common/image/pixlab.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ad69bd95905fe967db7b621fd770297c2733f6e7
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/pixlab.jpg differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/seres.png b/UI/JsList/entry/src/main/js/default/common/image/seres.png
new file mode 100644
index 0000000000000000000000000000000000000000..355138c6c53606ba59caf544bd5bc3c50900b5b2
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/seres.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/soundx.png b/UI/JsList/entry/src/main/js/default/common/image/soundx.png
new file mode 100644
index 0000000000000000000000000000000000000000..6045087c5b03e62cd8c9797e7eb9d110622ab2ba
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/soundx.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/tv.png b/UI/JsList/entry/src/main/js/default/common/image/tv.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4b30386f0ff5b40170a0504c7505925e95aa0ff
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/tv.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/watchfit.png b/UI/JsList/entry/src/main/js/default/common/image/watchfit.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4b33353f6aeff15512312b485f624e678d193a4
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/watchfit.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/watchgt.png b/UI/JsList/entry/src/main/js/default/common/image/watchgt.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cd5a177ccc493fdb762e007eae2fc15f42d8a8b
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/watchgt.png differ
diff --git a/UI/JsList/entry/src/main/js/default/common/image/watchpro.png b/UI/JsList/entry/src/main/js/default/common/image/watchpro.png
new file mode 100644
index 0000000000000000000000000000000000000000..3095479b7a5535cfd7927813f7e78c56ab857812
Binary files /dev/null and b/UI/JsList/entry/src/main/js/default/common/image/watchpro.png differ
diff --git a/UI/JsList/entry/src/main/js/default/i18n/en-US.json b/UI/JsList/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..41661b51ec63dc9a9fac111addd134981ebb41b6
--- /dev/null
+++ b/UI/JsList/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,88 @@
+{
+  "strings": {
+    "productList":"ProductList",
+    "categorylist": [
+      {
+        "cate": "Phone",
+        "product":[
+          {
+            "img":"common/image/mate.jpg",
+            "model": "Mate40Pro+",
+            "type": "Phone",
+            "info": "Kirin9000+HarmonyOS2.0，5nm Flagship chip"
+          },
+          {
+            "img":"common/image/maters.png",
+            "model": "Mate40RS PorshceDesign",
+            "type": "Phone",
+            "info": "Supercar gene, salute The Times"
+          },
+          {
+            "img":"common/image/matex.jpg",
+            "model": "Mate X2",
+            "type": "Phone",
+            "info": "Imagine a lot"
+          },
+          {
+            "img":"common/image/pfif.jpg",
+            "model":"P50Pro",
+            "type":"Phone",
+            "info":"Qualcomm dragon888+HarmonyOS2.0，New computational optics"
+          }
+        ]
+      },
+      {
+        "cate": "Pad",
+        "product": [
+          {
+            "img":"common/image/matepad.png",
+            "model":"MatePadPro12.6",
+            "type":"Pad",
+            "info":"Kirin9000+HarmonyOS2.0，Large screen productivity"
+          },
+          {
+            "img":"common/image/matepadone.jpg",
+            "model":"MatePad 11",
+            "type":"Pad",
+            "info":"HarmonyOS2.0，120HZrefresh rate"
+          }
+        ]
+      },
+      {
+        "cate": "Wisdom office",
+        "product": [
+          {
+            "img":"common/image/matebook.png",
+            "model":"MateBook X Pro",
+            "type":"Laptop",
+            "info":"Multi-screen collaboration, intelligent office"
+          },
+          {
+            "img":"common/image/mateview.png",
+            "model":"MateView",
+            "type":"Display",
+            "info":"Multi-screen collaboration, intelligent office"
+          },
+          {
+            "img":"common/image/matestations.png",
+            "model":"MateStation S",
+            "type":"Desktop computer",
+            "info":"Multi-screen collaboration, intelligent office"
+          },
+          {
+            "img":"common/image/matestationx.png",
+            "model":"MateStation X",
+            "type":"All-in-one computer",
+            "info":"Multi-screen collaboration, intelligent office"
+          },
+          {
+            "img":"common/image/pixlab.jpg",
+            "model":"PixLab",
+            "type":"Printer",
+            "info":"HarmonyOS2.0，Touch it and it will connect"
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/JsList/entry/src/main/js/default/i18n/zh-CN.json b/UI/JsList/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..d2d57de14988ba82f636fd1cf887b164f731d389
--- /dev/null
+++ b/UI/JsList/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,88 @@
+{
+  "strings": {
+    "productList":"产品列表",
+    "categorylist": [
+      {
+        "cate": "手机",
+        "product":[
+          {
+            "img":"common/image/mate.jpg",
+            "model": "Mate40Pro+",
+            "type": "手机",
+            "info": "麒麟9000+鸿蒙2.0，5nm旗舰芯片"
+          },
+          {
+            "img":"common/image/maters.png",
+            "model": "Mate40RS保时捷设计",
+            "type": "手机",
+            "info": "超跑基因，致敬时代"
+          },
+          {
+            "img":"common/image/matex.jpg",
+            "model": "Mate X2",
+            "type": "手机",
+            "info": "大展想象"
+          },
+          {
+            "img":"common/image/pfif.jpg",
+            "model":"P50Pro",
+            "type":"手机",
+            "info":"骁龙888+鸿蒙2.0，全新计算光学"
+          }
+        ]
+      },
+      {
+        "cate": "平板",
+        "product": [
+          {
+            "img":"common/image/matepad.png",
+            "model":"MatePadPro12.6",
+            "type":"平板",
+            "info":"麒麟9000+鸿蒙2.0，大屏生产力"
+          },
+          {
+            "img":"common/image/matepadone.jpg",
+            "model":"MatePad 11",
+            "type":"平板",
+            "info":"HarmonyOS2.0，120HZ刷新率"
+          }
+        ]
+      },
+      {
+        "cate": "智慧办公",
+        "product": [
+          {
+            "img":"common/image/matebook.png",
+            "model":"MateBook X Pro",
+            "type":"笔记本",
+            "info":"多屏协同，智慧办公"
+          },
+          {
+            "img":"common/image/mateview.png",
+            "model":"MateView",
+            "type":"显示器",
+            "info":"多屏协同，智慧办公"
+          },
+          {
+            "img":"common/image/matestations.png",
+            "model":"MateStation S",
+            "type":"台式机",
+            "info":"多屏协同，智慧办公"
+          },
+          {
+            "img":"common/image/matestationx.png",
+            "model":"MateStation X",
+            "type":"一体机",
+            "info":"多屏协同，智慧办公"
+          },
+          {
+            "img":"common/image/pixlab.jpg",
+            "model":"PixLab",
+            "type":"打印机",
+            "info":"HarmonyOS2.0，一碰智联"
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/JsList/entry/src/main/js/default/pages/index/index.css b/UI/JsList/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ee87df09bee69c6e5f3425962e60e3fd0eb6720f
--- /dev/null
+++ b/UI/JsList/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,97 @@
+/*
+ * 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;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    width: 100%;
+    height: 90px;
+    font-size: 40px;
+    background-color: #0225ff;
+    text-color: black;
+    text-align: left;
+    padding-left: 20px;
+}
+
+.list-wrapper {
+    width: 100%;
+    divider-color: gray;
+    divider-height: 10px;
+    display: flex;
+}
+
+.list-item {
+    width: 100%;
+    flex-direction: row;
+    margin-left: 25px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    align-items: flex-start;
+    height: 145px;
+}
+
+.list-left {
+    width: 20%;
+    radius: 10px;
+}
+
+.list-img {
+    margin: 20px;
+    width: 100%;
+    height: 130px;
+}
+
+
+.list-right {
+    width: 70%;
+    flex-direction: column;
+    display: flex;
+    margin-left: 10px;
+}
+
+.list-model {
+    width: 100%;
+    height: 50px;
+    font-size: 45px;
+    text-color: royalblue;
+    margin-top: 5px;
+}
+
+.list-type {
+    width: 100%;
+    height: 35px;
+    font-size: 25px;
+    text-color: red;
+}
+
+.list-info {
+    width: 100%;
+    height: 40px;
+    font-size: 35px;
+}
+
+.item-group-child {
+    justify-content: center;
+    width: 100%;
+}
diff --git a/UI/JsList/entry/src/main/js/default/pages/index/index.hml b/UI/JsList/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..070256879608ebac009c5a9f3e4a0fb6335cf3a6
--- /dev/null
+++ b/UI/JsList/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,48 @@
+<!--
+ 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">
+    <text class="title">{{ $t('strings.productList') }}</text>
+    <div>
+        <list divider="true"  style="divider-color : #000000">
+            <list-item-group for="{{ category in categorylist }}" ongroupcollapse="collapse" ongroupexpand="expand">
+            <!--展开后-->
+                <list-item type="item" >
+                    <div class="item-group-child">
+                        <list scrollbar="auto" class="list-wrapper" scrollbaroffset="spring" scrollpage="true"
+                              divider="true" shapemode="rect" updateeffect="true" chainanimation="false">
+                            <list-item class="list-item" for="{{ category.product }}" onclick="onClick">
+                                <div class="list-left">
+                                    <image class="list-img" src="{{ $item.img }}"></image>
+                                </div>
+                                <div class="list-right">
+                                    <text class="list-model">{{ $item.model }}</text>
+                                    <text class="list-type">{{ $item.type }}</text>
+                                    <text class="list-info">{{ $item.info }}</text>
+                                </div>
+                            </list-item>
+                        </list>
+                    </div>
+                </list-item>
+            <!--收拢后-->
+                <list-item type="item" style="background-color : #87CEFA; height : 145px;" primary="true">
+                    <div class="item-group-child">
+                        <text style="margin-left: 20px;" class="list-info">{{ category.cate }}</text>
+                    </div>
+                </list-item>
+            </list-item-group>
+        </list>
+    </div>
+</div>
diff --git a/UI/JsList/entry/src/main/js/default/pages/index/index.js b/UI/JsList/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc0424756c61d33732368819c083b22825d01ef3
--- /dev/null
+++ b/UI/JsList/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,26 @@
+/*
+ * 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: {
+        categorylist: [],
+    },
+    onInit() {
+        this.categorylist = this.$t('strings.categorylist')
+    },
+}
+
+
+
diff --git a/UI/JsList/entry/src/main/resources/base/element/string.json b/UI/JsList/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..9eb11391e23df592d5ba2004325e286a93bd91d7
--- /dev/null
+++ b/UI/JsList/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "JsList"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/JsList/entry/src/main/resources/base/media/icon.png b/UI/JsList/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/UI/JsList/entry/src/main/resources/base/media/icon.png differ
diff --git a/UI/JsList/screenshots/devices/closed.png b/UI/JsList/screenshots/devices/closed.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb52412121ca7a3de8199cdb3c9c15d4060ac127
Binary files /dev/null and b/UI/JsList/screenshots/devices/closed.png differ
diff --git a/UI/JsList/screenshots/devices/pad.png b/UI/JsList/screenshots/devices/pad.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb06d46c355f6e1acd2009f2e2cd77e9e333a566
Binary files /dev/null and b/UI/JsList/screenshots/devices/pad.png differ
diff --git a/UI/JsList/screenshots/devices/pc.png b/UI/JsList/screenshots/devices/pc.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff18b8691da0e240bc48cf3c8aa88c774bdb7a1a
Binary files /dev/null and b/UI/JsList/screenshots/devices/pc.png differ
diff --git a/UI/JsList/screenshots/devices/phone.png b/UI/JsList/screenshots/devices/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..e742062c5bf511aa887cf828226c710d1a8129b8
Binary files /dev/null and b/UI/JsList/screenshots/devices/phone.png differ