refactor: 将示例页面的 route 收拢到 /demo 下

src/common/assets/icons/level.svg

@@ -1 +0,0 @@
-<svg t="1651750906395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9162" width="200" height="200"><path d="M904 158H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 582H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 794H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 370H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" p-id="9163"></path></svg>

src/common/assets/icons/link.svg

@@ -1 +0,0 @@
-<svg t="1651118878747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8461" width="200" height="200"><path d="M574 665.4c-3.1-3.1-8.2-3.1-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8c-3.1-3.1-8.2-3.1-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zM832.6 191.4c-84.6-84.6-221.5-84.6-306 0L410.3 307.6c-3.1 3.1-3.1 8.2 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6c-3.1 3.1-3.1 8.2 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1z" p-id="8462"></path><path d="M610.1 372.3c-3.1-3.1-8.2-3.1-11.3 0L372.3 598.7c-3.1 3.1-3.1 8.2 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z" p-id="8463"></path></svg>

src/common/assets/icons/lock.svg

@@ -1 +0,0 @@
-<svg t="1651119007904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8741" width="200" height="200"><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240z m460 600H232V536h560v304z" p-id="8742"></path><path d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53c12.1-8.7 20-22.9 20-39 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 16.1 7.9 30.3 20 39z" p-id="8743"></path></svg>

src/common/assets/icons/unocss.svg

@@ -1,5 +0,0 @@
-<svg width="220" height="220" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
-<path d="M117.444 167.888C117.444 140.273 139.83 117.888 167.444 117.888V117.888C195.058 117.888 217.444 140.273 217.444 167.888V167.888C217.444 195.502 195.058 217.888 167.444 217.888V217.888C139.83 217.888 117.444 195.502 117.444 167.888V167.888Z"/>
-<path d="M117.444 53C117.444 25.3858 139.83 3 167.444 3V3C195.058 3 217.444 25.3858 217.444 53V98C217.444 100.761 215.205 103 212.444 103H122.444C119.683 103 117.444 100.761 117.444 98V53Z"/>
-<path d="M102 167.888C102 195.502 79.6142 217.888 52 217.888V217.888C24.3858 217.888 2 195.502 2 167.888L2.00001 122.888C2.00001 120.126 4.23859 117.888 7.00001 117.888L97 117.888C99.7614 117.888 102 120.126 102 122.888L102 167.888Z"/>
-</svg>

src/router/index.ts

@@ -8,7 +8,7 @@ const Layouts = () => import("@/layouts/index.vue")
 
 /**
  * @name 常驻路由
- * @description 除了 redirect/403/404/login 等隐藏页面，其他页面建议设置 Name 属性
+ * @description 除了 redirect/403/404/login 等隐藏页面，其他页面建议设置唯一的 Name 属性
  */
 export const constantRoutes: RouteRecordRaw[] = [
   {
@@ -64,18 +64,95 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: "/unocss",
+    path: "/demo",
     component: Layouts,
-    redirect: "/unocss/index",
+    redirect: "/demo/unocss",
+    name: "Demo",
+    meta: {
+      title: "示例",
+      elIcon: "DataBoard"
+    },
     children: [
       {
-        path: "index",
+        path: "unocss",
         component: () => import("@/pages/demo/unocss/index.vue"),
         name: "UnoCSS",
         meta: {
-          title: "UnoCSS",
-          svgIcon: "unocss"
+          title: "UnoCSS"
         }
+      },
+      {
+        path: "element-plus",
+        component: () => import("@/pages/demo/element-plus/index.vue"),
+        name: "ElementPlus",
+        meta: {
+          title: "Element Plus",
+          keepAlive: true
+        }
+      },
+      {
+        path: "vxe-table",
+        component: () => import("@/pages/demo/vxe-table/index.vue"),
+        name: "VxeTable",
+        meta: {
+          title: "Vxe Table",
+          keepAlive: true
+        }
+      },
+      {
+        path: "level2",
+        component: () => import("@/pages/demo/level2/index.vue"),
+        redirect: "/demo/level2/level3",
+        name: "Level2",
+        meta: {
+          title: "二级路由",
+          alwaysShow: true
+        },
+        children: [
+          {
+            path: "level3",
+            component: () => import("@/pages/demo/level2/level3/index.vue"),
+            name: "Level3",
+            meta: {
+              title: "三级路由",
+              keepAlive: true
+            }
+          }
+        ]
+      },
+      {
+        path: "composable-demo",
+        redirect: "/demo/composable-demo/use-fetch-select",
+        name: "ComposableDemo",
+        meta: {
+          title: "组合式函数"
+        },
+        children: [
+          {
+            path: "use-fetch-select",
+            component: () => import("@/pages/demo/composable-demo/use-fetch-select.vue"),
+            name: "UseFetchSelect",
+            meta: {
+              title: "useFetchSelect"
+            }
+          },
+          {
+            path: "use-fullscreen-loading",
+            component: () => import("@/pages/demo/composable-demo/use-fullscreen-loading.vue"),
+            name: "UseFullscreenLoading",
+            meta: {
+              title: "useFullscreenLoading"
+            }
+          },
+          {
+            path: "use-watermark",
+            component: () => import("@/pages/demo/composable-demo/use-watermark.vue"),
+            name: "UseWatermark",
+            meta: {
+              title: "useWatermark"
+            }
+          }
+        ]
       }
     ]
   },
@@ -83,7 +160,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     path: "/link",
     meta: {
       title: "外链",
-      svgIcon: "link"
+      elIcon: "link"
     },
     children: [
       {
@@ -103,112 +180,13 @@ export const constantRoutes: RouteRecordRaw[] = [
         }
       }
     ]
-  },
-  {
-    path: "/table",
-    component: Layouts,
-    redirect: "/table/element-plus",
-    name: "Table",
-    meta: {
-      title: "表格",
-      elIcon: "Grid"
-    },
-    children: [
-      {
-        path: "element-plus",
-        component: () => import("@/pages/demo/table/element-plus/index.vue"),
-        name: "ElementPlus",
-        meta: {
-          title: "Element Plus",
-          keepAlive: true
-        }
-      },
-      {
-        path: "vxe-table",
-        component: () => import("@/pages/demo/table/vxe-table/index.vue"),
-        name: "VxeTable",
-        meta: {
-          title: "Vxe Table",
-          keepAlive: true
-        }
-      }
-    ]
-  },
-  {
-    path: "/level1",
-    component: Layouts,
-    redirect: "/level1/level2",
-    name: "Level1",
-    meta: {
-      title: "一级路由",
-      svgIcon: "level"
-    },
-    children: [
-      {
-        path: "level2",
-        component: () => import("@/pages/demo/level1/level2/index.vue"),
-        redirect: "/level1/level2/level3",
-        name: "Level2",
-        meta: {
-          title: "二级路由",
-          alwaysShow: true
-        },
-        children: [
-          {
-            path: "level3",
-            component: () => import("@/pages/demo/level1/level2/level3/index.vue"),
-            name: "Level3",
-            meta: {
-              title: "三级路由",
-              keepAlive: true
-            }
-          }
-        ]
-      }
-    ]
-  },
-  {
-    path: "/composable-demo",
-    component: Layouts,
-    redirect: "/composable-demo/use-fetch-select",
-    name: "ComposableDemo",
-    meta: {
-      title: "组合式函数",
-      elIcon: "Menu"
-    },
-    children: [
-      {
-        path: "use-fetch-select",
-        component: () => import("@/pages/demo/composable-demo/use-fetch-select.vue"),
-        name: "UseFetchSelect",
-        meta: {
-          title: "useFetchSelect"
-        }
-      },
-      {
-        path: "use-fullscreen-loading",
-        component: () => import("@/pages/demo/composable-demo/use-fullscreen-loading.vue"),
-        name: "UseFullscreenLoading",
-        meta: {
-          title: "useFullscreenLoading"
-        }
-      },
-      {
-        path: "use-watermark",
-        component: () => import("@/pages/demo/composable-demo/use-watermark.vue"),
-        name: "UseWatermark",
-        meta: {
-          title: "useWatermark"
-        }
-      }
-    ]
   }
 ]
 
 /**
  * @name 动态路由
  * @description 用来放置有权限 (Roles 属性) 的路由
- * @description 必须带有 Name 属性
+ * @description 必须带有唯一的 Name 属性
  */
 export const dynamicRoutes: RouteRecordRaw[] = [
   {
@@ -218,7 +196,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
     name: "Permission",
     meta: {
       title: "权限",
-      svgIcon: "lock",
+      elIcon: "lock",
       roles: ["admin", "editor"], // 可以在根路由中设置角色
       alwaysShow: true
     },