diff --git a/index.html b/index.html
index f7f6135..9e1ab79 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,10 @@
     />
     <title>pure-admin-thin</title>
     <link rel="icon" href="/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/c/font_4406593_6x8qubg8wo.css"
+    />
     <script>
       window.process = {};
     </script>
diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index da7ec1f..80b1228 100644
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -2,46 +2,31 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 14:35:28
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-12 17:25:12
+ * @LastEditTime: 2024-01-15 13:38:56
  * @FilePath: \general-work-web\General-AI-Platform-Web-Client\mock\asyncRoutes.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 // 模拟后端动态生成路由
 import { MockMethod } from "vite-plugin-mock";
+// import { useI18n } from "vue-i18n";
 
+// const { t } = useI18n();
 /**
  * roles：页面级别权限，这里模拟二种 "admin"、"common"
  * admin：管理员角色
  * common：普通角色
  */
 
-// const permissionRouter = {
-//   path: "/permission",
-//   meta: {
-//     title: "menus.permission",
-//     icon: "lollipop",
-//     rank: 10
-//   },
-//   children: [
-//     {
-//       path: "/permission/page/index",
-//       name: "PermissionPage",
-//       meta: {
-//         title: "menus.permissionPage",
-//         roles: ["admin", "common"]
-//       }
-//     },
-//     {
-//       path: "/permission/button/index",
-//       name: "PermissionButton",
-//       meta: {
-//         title: "menus.permissionButton",
-//         roles: ["admin", "common"],
-//         auths: ["btn_add", "btn_edit", "btn_delete"]
-//       }
-//     }
-//   ]
-// };
+const demoRouter = {
+  path: "/demo/leftTree",
+  name: "DemoLeftTree",
+  meta: {
+    title: "测试",
+    icon: "lollipop",
+    roles: ["admin", "common"],
+    rank: 101
+  }
+};
 
 export default [
   {
@@ -50,7 +35,7 @@ export default [
     response: () => {
       return {
         success: true,
-        data: []
+        data: [demoRouter]
       };
     }
   }
diff --git a/package.json b/package.json
index 9e8d645..2c4b3ef 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "echarts-gl": "^2.0.9",
     "element-plus": "2.3.6",
     "js-cookie": "^3.0.5",
+    "lottie-web": "^5.12.2",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb1b9d2..b76b062 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ dependencies:
   js-cookie:
     specifier: ^3.0.5
     version: 3.0.5
+  lottie-web:
+    specifier: ^5.12.2
+    version: 5.12.2
   mitt:
     specifier: ^3.0.0
     version: 3.0.0
@@ -5524,6 +5527,7 @@ packages:
       {
         integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
       }
+    requiresBuild: true
 
   /jsonfile@6.1.0:
     resolution:
@@ -5808,6 +5812,14 @@ packages:
       wrap-ansi: 6.2.0
     dev: true
 
+  /lottie-web@5.12.2:
+    resolution:
+      {
+        integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==,
+        tarball: https://registry.npmmirror.com/lottie-web/-/lottie-web-5.12.2.tgz
+      }
+    dev: false
+
   /lru-cache@5.1.1:
     resolution:
       {
@@ -6696,6 +6708,7 @@ packages:
       {
         integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==
       }
+    requiresBuild: true
     dependencies:
       jsonc-parser: 3.2.0
       mlly: 1.4.0
@@ -9155,6 +9168,7 @@ packages:
       {
         integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==
       }
+    requiresBuild: true
 
   /unctx@2.3.1:
     resolution:
diff --git a/public/favicon.ico b/public/favicon.ico
index bef93d4..da979d7 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/animate/device/01.json b/src/assets/animate/device/01.json
new file mode 100644
index 0000000..ea93985
--- /dev/null
+++ b/src/assets/animate/device/01.json
@@ -0,0 +1,1062 @@
+{
+  "nm": "scene1",
+  "ddd": 0,
+  "h": 500,
+  "w": 500,
+  "meta": { "g": "@lottiefiles/creator 0.48.0" },
+  "layers": [
+    {
+      "ty": 0,
+      "nm": " scene1",
+      "sr": 1,
+      "st": 0,
+      "op": 210,
+      "ip": 0,
+      "hd": false,
+      "ddd": 0,
+      "bm": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [226.99806213378906, 251] },
+        "s": { "a": 0, "k": [100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [226.99806213378906, 251] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "w": 500,
+      "h": 500,
+      "refId": "Scene 1",
+      "ind": 1
+    },
+    {
+      "ty": 0,
+      "nm": " scene1",
+      "sr": 1,
+      "st": 0,
+      "op": 210,
+      "ip": 0,
+      "hd": false,
+      "ddd": 0,
+      "bm": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [226.99806213378906, 251] },
+        "s": { "a": 0, "k": [100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [226.99806213378906, 251] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "w": 500,
+      "h": 500,
+      "refId": "Scene 1",
+      "ind": 2
+    }
+  ],
+  "v": "5.7.0",
+  "fr": 30,
+  "op": 210,
+  "ip": 0,
+  "assets": [
+    {
+      "nm": "scene1",
+      "id": "Scene 1",
+      "layers": [
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 207.89999999999998,
+          "ip": 146.99999999999997,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32.00000000000001, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [347, 251],
+                  "t": 148
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [433, 251],
+                  "t": 159
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [433, 251],
+                  "t": 188
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [433, 233],
+                  "t": 191
+                },
+                { "s": [433, 251], "t": 194 }
+              ]
+            },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.1137, 0.6392, 0.2235],
+                        "t": 184
+                      },
+                      { "s": [0.6392, 0.1137, 0.6157], "t": 191 }
+                    ]
+                  },
+                  "r": 2,
+                  "o": { "a": 0, "k": 100 }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [32, 33] },
+                  "s": { "a": 0, "k": [25, 25] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [32, 33] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 1
+        },
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 207.89999999999998,
+          "ip": 132.3,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32.00000000000001, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [261, 251],
+                  "t": 133.3
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [347, 251],
+                  "t": 142.3
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [347, 251],
+                  "t": 184
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [347, 237],
+                  "t": 186
+                },
+                { "s": [347, 251], "t": 189 }
+              ]
+            },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.1137, 0.6392, 0.2235],
+                        "t": 178
+                      },
+                      { "s": [0.6392, 0.1137, 0.6157], "t": 185 }
+                    ]
+                  },
+                  "r": 2,
+                  "o": { "a": 0, "k": 100 }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [32, 33] },
+                  "s": { "a": 0, "k": [25, 25] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [32, 33] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 2
+        },
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 206.99999999999997,
+          "ip": 117.00000000000001,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [174, 251],
+                  "t": 118
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [261, 251],
+                  "t": 128
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [261, 251],
+                  "t": 178
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [261, 233],
+                  "t": 181
+                },
+                { "s": [261, 251], "t": 185 }
+              ]
+            },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.1137, 0.6392, 0.2235],
+                        "t": 173
+                      },
+                      { "s": [0.6392, 0.1137, 0.6157], "t": 179 }
+                    ]
+                  },
+                  "r": 2,
+                  "o": { "a": 0, "k": 100 }
+                },
+                {
+                  "ty": "tr",
+                  "a": {
+                    "a": 0,
+                    "k": [101.60000000000001, 18.599999999999994]
+                  },
+                  "s": { "a": 0, "k": [25, 25] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [49.400000000000006, 29.4] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 3
+        },
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 206.99999999999997,
+          "ip": 105,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32.00000000000001, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [91.49612426757818, 251],
+                  "t": 106
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [174.00000000000003, 251],
+                  "t": 116
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [174.00000000000003, 251],
+                  "t": 173
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [174.00000000000003, 233],
+                  "t": 176
+                },
+                { "s": [174.00000000000003, 251], "t": 179 }
+              ]
+            },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.1137, 0.6392, 0.2235],
+                        "t": 168
+                      },
+                      { "s": [0.6392, 0.1137, 0.6157], "t": 174 }
+                    ]
+                  },
+                  "r": 2,
+                  "o": { "a": 0, "k": 100 }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [32, 33] },
+                  "s": { "a": 0, "k": [25, 25] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [32, 33] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 4
+        },
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 207.89999999999998,
+          "ip": 86.1,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [250, 251],
+                  "t": 98.1
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [91.49612426757815, 251],
+                  "t": 103.1
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [91.49612426757815, 251],
+                  "t": 166
+                },
+                {
+                  "o": { "x": 0.167, "y": 0.167 },
+                  "i": { "x": 0.833, "y": 0.833 },
+                  "s": [91.49612426757815, 232],
+                  "t": 170
+                },
+                { "s": [91.49612426757815, 251], "t": 174 }
+              ]
+            },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0, 0, 0],
+                        "t": 80
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.2078, 0.4039, 0.8941],
+                        "t": 86.1
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.1137, 0.6392, 0.2235],
+                        "t": 96.1
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.1137, 0.6392, 0.2235],
+                        "t": 164
+                      },
+                      { "s": [0.6392, 0.1137, 0.6157], "t": 169 }
+                    ]
+                  },
+                  "r": 2,
+                  "o": { "a": 0, "k": 100 }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [32, 33] },
+                  "s": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [100, 100],
+                        "t": 86.1
+                      },
+                      { "s": [25, 25], "t": 98.1 }
+                    ]
+                  },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [32, 33] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 5
+        },
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 105,
+          "ip": 46.5,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": { "a": 0, "k": [250, 251] },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [0.8941, 0.2078, 0.2078],
+                        "t": 47
+                      },
+                      { "s": [0.2078, 0.4039, 0.8941], "t": 60 }
+                    ]
+                  },
+                  "r": 2,
+                  "o": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [100],
+                        "t": 82
+                      },
+                      { "s": [0], "t": 95 }
+                    ]
+                  }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [32, 33] },
+                  "s": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [100, 100],
+                        "t": 46.5
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [120, 120],
+                        "t": 65.5
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [90, 90],
+                        "t": 67.5
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [110, 110],
+                        "t": 73.5
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [97, 97],
+                        "t": 78.5
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [102, 102],
+                        "t": 82.5
+                      },
+                      { "s": [100, 100], "t": 86.5 }
+                    ]
+                  },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [32, 33] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 6
+        },
+        {
+          "ty": 4,
+          "nm": "Shape Layer 1",
+          "sr": 1,
+          "st": 0,
+          "op": 58.50000000000001,
+          "ip": 0,
+          "hd": false,
+          "ddd": 0,
+          "bm": 0,
+          "hasMask": false,
+          "ao": 0,
+          "ks": {
+            "a": { "a": 0, "k": [32, 33] },
+            "s": { "a": 0, "k": [500, 500] },
+            "sk": { "a": 0, "k": 0 },
+            "p": { "a": 0, "k": [250, 251] },
+            "r": { "a": 0, "k": 0 },
+            "sa": { "a": 0, "k": 0 },
+            "o": { "a": 0, "k": 100 }
+          },
+          "ef": [],
+          "shapes": [
+            {
+              "ty": "gr",
+              "bm": 0,
+              "hd": false,
+              "nm": "Group 5",
+              "it": [
+                {
+                  "ty": "sh",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Path 5",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -11.3888407],
+                        [-4.3333333, 0],
+                        [0, 11.388840700000003],
+                        [9.388840700000003, 0],
+                        [3.1184307999999987, -3.696753659999999],
+                        [5.215011799999999, 0]
+                      ],
+                      "o": [
+                        [-9.38884075, 0],
+                        [0, 11.388840700000003],
+                        [4.3333333, 0],
+                        [0, -11.3888407],
+                        [-5.215011799999999, 0],
+                        [-3.1184307999999987, -3.696753659999999],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [19, 6],
+                        [2, 23],
+                        [32, 60],
+                        [62, 23],
+                        [45, 6],
+                        [32, 12.0449665],
+                        [19, 6]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "fl",
+                  "bm": 0,
+                  "hd": false,
+                  "nm": "Fill",
+                  "c": { "a": 0, "k": [0.8941, 0.2078, 0.2078] },
+                  "r": 2,
+                  "o": { "a": 0, "k": 100 }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [32, 33] },
+                  "s": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [100, 100],
+                        "t": 0
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [120, 120],
+                        "t": 19
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [90, 90],
+                        "t": 27
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [110, 110],
+                        "t": 33
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [97, 97],
+                        "t": 38
+                      },
+                      {
+                        "o": { "x": 0.167, "y": 0.167 },
+                        "i": { "x": 0.833, "y": 0.833 },
+                        "s": [102, 102],
+                        "t": 42
+                      },
+                      { "s": [100, 100], "t": 46 }
+                    ]
+                  },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [32, 33] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            }
+          ],
+          "ind": 7
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/assets/svg/menu/welcome.svg b/src/assets/svg/menu/welcome.svg
new file mode 100644
index 0000000..d5bb5b8
--- /dev/null
+++ b/src/assets/svg/menu/welcome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/menu/workbench.svg b/src/assets/svg/menu/workbench.svg
new file mode 100644
index 0000000..bb01465
--- /dev/null
+++ b/src/assets/svg/menu/workbench.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>
\ No newline at end of file
diff --git a/src/components/CustomTree/index.ts b/src/components/CustomTree/index.ts
new file mode 100644
index 0000000..5580aee
--- /dev/null
+++ b/src/components/CustomTree/index.ts
@@ -0,0 +1,5 @@
+import collapseTree from "./src/collapseTree";
+
+const CollapseTree = collapseTree;
+
+export { CollapseTree };
diff --git a/src/components/CustomTree/src/collapseTree.tsx b/src/components/CustomTree/src/collapseTree.tsx
new file mode 100644
index 0000000..7187381
--- /dev/null
+++ b/src/components/CustomTree/src/collapseTree.tsx
@@ -0,0 +1,27 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-15 14:34:20
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-15 15:21:52
+ * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\components\CustomTree\src\collapseTree.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "CollapseTree",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup() {
+    const count = ref<number>(1);
+
+    return () => {
+      return <div>123{count}</div>;
+    };
+  }
+});
diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index cc6bca4..c7cbba1 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { useGlobal } from "@pureadmin/utils";
-import backTop from "@/assets/svg/back_top.svg?component";
-import { h, computed, Transition, defineComponent } from "vue";
-import { usePermissionStoreHook } from "@/store/modules/permission";
+// import { useGlobal } from "@pureadmin/utils";
+// import backTop from "@/assets/svg/back_top.svg?component";
+// import { h, computed, Transition, defineComponent } from "vue";
+// import { usePermissionStoreHook } from "@/store/modules/permission";
 
 const props = defineProps({
   fixedHeader: Boolean
 });
 
-const {
-  // $storage,
-  $config
-} = useGlobal<GlobalPropertiesApi>();
+// const {
+//   // $storage,
+//   $config
+// } = useGlobal<GlobalPropertiesApi>();
 
-const keepAlive = computed(() => {
-  return $config?.KeepAlive;
-});
+// const keepAlive = computed(() => {
+//   return $config?.KeepAlive;
+// });
 
-const transitions = computed(() => {
-  return route => {
-    return route.meta.transition;
-  };
-});
+// const transitions = computed(() => {
+//   return route => {
+//     return route.meta.transition;
+//   };
+// });
 
 // const hideTabs = computed(() => {
 //   return $storage?.configure.hideTabs;
@@ -41,92 +41,48 @@ const transitions = computed(() => {
 //   ];
 // });
 
-const transitionMain = defineComponent({
-  render() {
-    return h(
-      Transition,
-      {
-        name:
-          transitions.value(this.route) &&
-          this.route.meta.transition.enterTransition
-            ? "pure-classes-transition"
-            : (transitions.value(this.route) &&
-                this.route.meta.transition.name) ||
-              "fade-transform",
-        enterActiveClass:
-          transitions.value(this.route) &&
-          `animate__animated ${this.route.meta.transition.enterTransition}`,
-        leaveActiveClass:
-          transitions.value(this.route) &&
-          `animate__animated ${this.route.meta.transition.leaveTransition}`,
-        mode: "out-in",
-        appear: true
-      },
-      {
-        default: () => [this.$slots.default()]
-      }
-    );
-  },
-  props: {
-    route: {
-      type: undefined,
-      required: true
-    }
-  }
-});
+// const transitionMain = defineComponent({
+//   render() {
+//     return h(
+//       Transition,
+//       {
+//         name:
+//           transitions.value(this.route) &&
+//           this.route.meta.transition.enterTransition
+//             ? "pure-classes-transition"
+//             : (transitions.value(this.route) &&
+//                 this.route.meta.transition.name) ||
+//               "fade-transform",
+//         enterActiveClass:
+//           transitions.value(this.route) &&
+//           `animate__animated ${this.route.meta.transition.enterTransition}`,
+//         leaveActiveClass:
+//           transitions.value(this.route) &&
+//           `animate__animated ${this.route.meta.transition.leaveTransition}`,
+//         mode: "out-in",
+//         appear: true
+//       },
+//       {
+//         default: () => [this.$slots.default()]
+//       }
+//     );
+//   },
+//   props: {
+//     route: {
+//       type: undefined,
+//       required: true
+//     }
+//   }
+// });
 </script>
 
 <template>
   <section
     :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
   >
-    <router-view>
-      <template #default="{ Component, route }">
-        <el-scrollbar v-if="props.fixedHeader">
-          <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
-            <backTop />
-          </el-backtop>
-          <transitionMain :route="route" style="margin: 0">
-            <keep-alive
-              v-if="keepAlive"
-              :include="usePermissionStoreHook().cachePageList"
-            >
-              <component
-                :is="Component"
-                :key="route.fullPath"
-                class="main-content"
-              />
-            </keep-alive>
-            <component
-              v-else
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
-        </el-scrollbar>
-        <div v-else>
-          <transitionMain :route="route">
-            <keep-alive
-              v-if="keepAlive"
-              :include="usePermissionStoreHook().cachePageList"
-            >
-              <component
-                :is="Component"
-                :key="route.fullPath"
-                class="main-content"
-              />
-            </keep-alive>
-            <component
-              v-else
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
-        </div>
-      </template>
-    </router-view>
+    <!-- TODO 使用keepAlive，解决路由切换页面不展示问题 -->
+
+    <router-view />
   </section>
 </template>
 
diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue
index 8420b47..37efdc5 100644
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -1,9 +1,8 @@
-<!-- TODO_welcome 左侧菜单栏 -->
 <script setup lang="ts">
 import Logo from "./logo.vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { emitter } from "@/utils/mitt";
-import SidebarItem from "./sidebarItem.vue";
+// import SidebarItem from "./sidebarItem.vue";
 // import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { responsiveStorageNameSpace } from "@/config";
@@ -13,6 +12,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 
 const route = useRoute();
+const router = useRouter();
 const showLogo = ref(
   storageLocal().getItem<StorageConfigs>(
     `${responsiveStorageNameSpace()}configure`
@@ -43,6 +43,8 @@ const defaultActive = computed(() =>
   !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
 );
 
+const activeName = ref(route.name || "Home");
+
 function getSubMenuData() {
   let path = "";
   path = defaultActive.value;
@@ -61,6 +63,17 @@ function getSubMenuData() {
   subMenuData.value = parenetRoute?.children;
 }
 
+// 改变路由
+function changeRoute(routes) {
+  console.log("changeRoute_routes", routes);
+  router.push({ path: routes.path });
+  activeName.value = routes.name;
+}
+
+// const fetchMenuIcon = routes => {
+//   return workbenchIcon;
+// };
+
 watch(
   () => [route.path, usePermissionStoreHook().wholeMenus],
   () => {
@@ -91,7 +104,7 @@ onBeforeUnmount(() => {
       wrap-class="scrollbar-wrapper"
       :class="[device === 'mobile' ? 'mobile' : 'pc']"
     >
-      <el-menu
+      <!-- <el-menu
         router
         unique-opened
         mode="vertical"
@@ -107,19 +120,25 @@ onBeforeUnmount(() => {
           :base-path="routes.path"
           class="select-none outer-most"
         />
-      </el-menu>
+      </el-menu> -->
 
-      <!-- <ul class="menu_box">
-        <li v-for="routes in menuData"  :key="routes.path" >
-          <p>{{routes.meta.title}}</p>
+      <ul class="menu_box">
+        <li
+          class="text-center"
+          :class="[activeName === routes.name ? 'active' : '']"
+          v-for="routes in menuData"
+          :key="routes.path"
+          @click="changeRoute(routes)"
+        >
+          <div class="flex justify-center">
+            <!-- TODO 使用真实图标 -->
+            <i style="width: 24px; height: 24px" class="iconfont icon-shouye" />
+            <!-- <img style="width: 24px;" src="/logo.svg" alt=""> -->
+          </div>
+          <p>{{ routes.meta.title }}</p>
         </li>
-      </ul> -->
+      </ul>
     </el-scrollbar>
-    <!-- <leftCollapse
-      v-if="device !== 'mobile'"
-      :is-active="pureApp.sidebar.opened"
-      @toggleClick="toggleSideBar"
-    /> -->
   </div>
 </template>
 
@@ -145,7 +164,25 @@ onBeforeUnmount(() => {
 
     /* z-index: 10001; */
     & > li {
-      background-color: red;
+      /* height: 60px; */
+
+      /* background-color: red; */
+      padding-top: 16px;
+
+      & > p {
+        padding-top: 6px;
+      }
+
+      &.active {
+        /* inset: 0 8px;
+        margin: 4px 0; */
+        clear: both;
+        content: "";
+        background: var(--el-color-primary) !important;
+        border-radius: 3px;
+
+        /* background-color: #155bd4; */
+      }
     }
   }
 }
diff --git a/src/router/modules/device.ts b/src/router/modules/device.ts
index 13bccc3..e984392 100644
--- a/src/router/modules/device.ts
+++ b/src/router/modules/device.ts
@@ -4,17 +4,9 @@ export default {
     title: "设备列表",
     icon: "homeFilled",
     // showLink: false,
-    rank: 2
+    rank: 2,
+    roles: ["admin", "common"]
   },
-  children: [
-    {
-      path: "/device",
-      name: "DeviceList",
-      component: () => import("@/views/device/index.vue"),
-      meta: {
-        title: "设备列表",
-        roles: ["admin", "common"]
-      }
-    }
-  ]
+  component: () => import("@/views/device/index.vue"),
+  name: "DeviceList"
 } as RouteConfigsTable;
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index bbb596e..bc12070 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -1,5 +1,8 @@
 /* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
 // $bodyMargin: 24px;
+.el-scrollbar {
+  height: auto !important;
+}
 
 @mixin merge-style($sideBarWidth) {
   $menuActiveText: #7a80b4;
@@ -102,18 +105,14 @@
       right: 0;
     }
 
-    .el-scrollbar {
-      height: calc(100% - 44px);
-    }
-
     &.has-logo {
       .el-scrollbar.pc {
         /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
-        height: calc(100% - 92px);
+        // height: calc(100% - 92px);
       }
 
       .el-scrollbar.mobile {
-        height: 100%;
+        // height: 100%;
       }
     }
 
diff --git a/src/views/demo/animateDevice.vue b/src/views/demo/animateDevice.vue
new file mode 100644
index 0000000..15d667c
--- /dev/null
+++ b/src/views/demo/animateDevice.vue
@@ -0,0 +1,38 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-15 11:06:34
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-15 11:07:03
+ * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\animateDevice.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script setup lang="ts">
+import { ref, onMounted } from "vue"; //引入相关api
+import lottie from "lottie-web"; //引入动效库
+import json01 from "@/assets/animate/device/01.json"; //引入下载的动效json
+
+defineOptions({
+  name: "animateDeviceDemo"
+});
+
+const animation1 = ref(null); //获取dom
+function initAnimate() {
+  console.log(lottie, "lottie");
+  lottie.loadAnimation({
+    container: animation1.value, //选择渲染dom
+    renderer: "svg", //渲染格式
+    loop: true, //循环播放
+    autoplay: true, //是否i自动播放,
+    animationData: json01 //渲染动效json
+  });
+}
+onMounted(() => {
+  initAnimate();
+});
+</script>
+
+<template>
+  <div>
+    <div ref="animation1" />
+  </div>
+</template>
diff --git a/src/views/demo/leftTree.vue b/src/views/demo/leftTree.vue
new file mode 100644
index 0000000..03f8017
--- /dev/null
+++ b/src/views/demo/leftTree.vue
@@ -0,0 +1,20 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-15 11:22:10
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-15 15:23:07
+ * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\leftTree\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script setup lang="ts">
+import { CollapseTree } from "@/components/CustomTree";
+defineOptions({
+  name: "DemoLeftTree"
+});
+</script>
+
+<template>
+  <div>
+    <CollapseTree />
+  </div>
+</template>