perf: 优化演示页面

src/router/modules/able.ts

@@ -10,30 +10,6 @@ export default {
     rank: able
   },
   children: [
-    {
-      path: "/able/videoFrame",
-      name: "VideoFrame",
-      component: () => import("@/views/able/video-frame/index.vue"),
-      meta: {
-        title: $t("menus.hsVideoFrame")
-      }
-    },
-    {
-      path: "/able/wavesurfer",
-      name: "Wavesurfer",
-      component: () => import("@/views/able/wavesurfer/index.vue"),
-      meta: {
-        title: $t("menus.hsWavesurfer")
-      }
-    },
-    {
-      path: "/able/directives",
-      name: "Directives",
-      component: () => import("@/views/able/directives.vue"),
-      meta: {
-        title: $t("menus.hsOptimize")
-      }
-    },
     {
       path: "/able/watermark",
       name: "WaterMark",
@@ -59,35 +35,11 @@ export default {
       }
     },
     {
-      path: "/able/iconSelect",
-      name: "IconSelect",
-      component: () => import("@/views/able/icon-select.vue"),
+      path: "/able/excel",
+      name: "Excel",
+      component: () => import("@/views/able/excel.vue"),
       meta: {
-        title: $t("menus.hsIconSelect")
-      }
-    },
-    {
-      path: "/able/timeline",
-      name: "TimeLine",
-      component: () => import("@/views/able/timeline.vue"),
-      meta: {
-        title: $t("menus.hsTimeline")
-      }
-    },
-    {
-      path: "/able/menuTree",
-      name: "MenuTree",
-      component: () => import("@/views/able/menu-tree.vue"),
-      meta: {
-        title: $t("menus.hsMenuTree")
-      }
-    },
-    {
-      path: "/able/lineTree",
-      name: "LineTree",
-      component: () => import("@/views/able/line-tree.vue"),
-      meta: {
-        title: $t("menus.hsLineTree")
+        title: $t("menus.hsExcel")
       }
     },
     {
@@ -98,6 +50,34 @@ export default {
         title: $t("menus.hsDebounce")
       }
     },
+    {
+      path: "/able/directives",
+      name: "Directives",
+      component: () => import("@/views/able/directives.vue"),
+      meta: {
+        title: $t("menus.hsOptimize")
+      }
+    },
+    {
+      path: "/able/draggable",
+      name: "Draggable",
+      component: () => import("@/views/able/draggable.vue"),
+      meta: {
+        title: $t("menus.hsdraggable"),
+        transition: {
+          enterTransition: "animate__zoomIn",
+          leaveTransition: "animate__zoomOut"
+        }
+      }
+    },
+    {
+      path: "/able/pdf",
+      name: "Pdf",
+      component: () => import("@/views/able/pdf.vue"),
+      meta: {
+        title: $t("menus.hsPdf")
+      }
+    },
     {
       path: "/able/barcode",
       name: "BarCode",
@@ -115,43 +95,47 @@ export default {
       }
     },
     {
-      path: "/able/cascader",
-      name: "Cascader",
-      component: () => import("@/views/able/cascader.vue"),
+      path: "/able/map",
+      name: "MapPage",
+      component: () => import("@/views/able/map.vue"),
       meta: {
-        title: $t("menus.hsCascader")
+        title: $t("menus.hsmap"),
+        keepAlive: true,
+        transition: {
+          name: "fade"
+        }
       }
     },
     {
-      path: "/able/swiper",
-      name: "Swiper",
-      component: () => import("@/views/able/swiper.vue"),
+      path: "/able/wavesurfer",
+      name: "Wavesurfer",
+      component: () => import("@/views/able/wavesurfer/index.vue"),
       meta: {
-        title: $t("menus.hsSwiper")
+        title: $t("menus.hsWavesurfer")
       }
     },
     {
-      path: "/able/virtualList",
-      name: "VirtualList",
-      component: () => import("@/views/able/virtual-list/index.vue"),
+      path: "/able/video",
+      name: "VideoPage",
+      component: () => import("@/views/able/video.vue"),
       meta: {
-        title: $t("menus.hsVirtualList")
+        title: $t("menus.hsvideo")
       }
     },
     {
-      path: "/able/pdf",
-      name: "Pdf",
-      component: () => import("@/views/able/pdf.vue"),
+      path: "/able/videoFrame",
+      name: "VideoFrame",
+      component: () => import("@/views/able/video-frame/index.vue"),
       meta: {
-        title: $t("menus.hsPdf")
+        title: $t("menus.hsVideoFrame")
       }
     },
     {
-      path: "/able/excel",
-      name: "Excel",
-      component: () => import("@/views/able/excel.vue"),
+      path: "/able/danmaku",
+      name: "Danmaku",
+      component: () => import("@/views/able/danmaku/index.vue"),
       meta: {
-        title: $t("menus.hsExcel")
+        title: $t("menus.hsdanmaku")
       }
     },
     {
@@ -162,6 +146,30 @@ export default {
         title: $t("menus.hsInfiniteScroll")
       }
     },
+    {
+      path: "/able/menuTree",
+      name: "MenuTree",
+      component: () => import("@/views/able/menu-tree.vue"),
+      meta: {
+        title: $t("menus.hsMenuTree")
+      }
+    },
+    {
+      path: "/able/lineTree",
+      name: "LineTree",
+      component: () => import("@/views/able/line-tree.vue"),
+      meta: {
+        title: $t("menus.hsLineTree")
+      }
+    },
+    {
+      path: "/able/typeit",
+      name: "Typeit",
+      component: () => import("@/views/able/typeit.vue"),
+      meta: {
+        title: $t("menus.hstypeit")
+      }
+    },
     {
       path: "/able/sensitive",
       name: "Sensitive",

src/router/modules/components.ts

@@ -16,84 +16,31 @@ export default {
       component: () => import("@/views/components/dialog/index.vue"),
       meta: {
         title: $t("menus.hsdialog"),
-        extraIcon: "IF-pure-iconfont-new svg",
-        transition: {
-          enterTransition: "animate__fadeInLeft",
-          leaveTransition: "animate__fadeOutRight"
-        }
+        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
       path: "/components/message",
       name: "Message",
-      component: () => import("@/views/components/message/index.vue"),
+      component: () => import("@/views/components/message.vue"),
       meta: {
         title: $t("menus.hsmessage")
       }
     },
     {
-      path: "/components/segmented",
-      name: "Segmented",
-      component: () => import("@/views/components/segmented/index.vue"),
+      path: "/components/iconSelect",
+      name: "IconSelect",
+      component: () => import("@/views/components/icon-select.vue"),
       meta: {
-        title: $t("menus.hssegmented"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.hsIconSelect")
       }
     },
     {
-      path: "/components/waterfall",
-      name: "Waterfall",
-      component: () => import("@/views/components/waterfall/index.vue"),
+      path: "/components/animatecss",
+      name: "AnimateCss",
+      component: () => import("@/views/components/animatecss.vue"),
       meta: {
-        title: $t("menus.hswaterfall")
-      }
-    },
-    {
-      path: "/components/video",
-      name: "VideoPage",
-      component: () => import("@/views/components/video/index.vue"),
-      meta: {
-        title: $t("menus.hsvideo")
-      }
-    },
-    {
-      path: "/components/map",
-      name: "MapPage",
-      component: () => import("@/views/components/map/index.vue"),
-      meta: {
-        title: $t("menus.hsmap"),
-        keepAlive: true,
-        transition: {
-          name: "fade"
-        }
-      }
-    },
-    {
-      path: "/components/draggable",
-      name: "Draggable",
-      component: () => import("@/views/components/draggable/index.vue"),
-      meta: {
-        title: $t("menus.hsdraggable"),
-        transition: {
-          enterTransition: "animate__zoomIn",
-          leaveTransition: "animate__zoomOut"
-        }
-      }
-    },
-    {
-      path: "/components/splitPane",
-      name: "SplitPane",
-      component: () => import("@/views/components/split-pane/index.vue"),
-      meta: {
-        title: $t("menus.hssplitPane")
-      }
-    },
-    {
-      path: "/components/button",
-      name: "ButtonPage",
-      component: () => import("@/views/components/button/index.vue"),
-      meta: {
-        title: $t("menus.hsbutton")
+        title: $t("menus.hsanimatecss")
       }
     },
     {
@@ -105,35 +52,68 @@ export default {
       }
     },
     {
-      path: "/components/animatecss",
-      name: "AnimateCss",
-      component: () => import("@/views/components/animatecss/index.vue"),
+      path: "/components/segmented",
+      name: "Segmented",
+      component: () => import("@/views/components/segmented.vue"),
       meta: {
-        title: $t("menus.hsanimatecss")
+        title: $t("menus.hssegmented"),
+        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
-      path: "/components/countTo",
-      name: "CountTo",
-      component: () => import("@/views/components/count-to/index.vue"),
+      path: "/components/cascader",
+      name: "Cascader",
+      component: () => import("@/views/components/cascader.vue"),
       meta: {
-        title: $t("menus.hscountTo")
+        title: $t("menus.hsCascader")
       }
     },
     {
       path: "/components/selector",
       name: "Selector",
-      component: () => import("@/views/components/selector/index.vue"),
+      component: () => import("@/views/components/selector.vue"),
       meta: {
         title: $t("menus.hsselector")
       }
     },
     {
-      path: "/components/seamlessScroll",
-      name: "SeamlessScroll",
-      component: () => import("@/views/components/seamless-scroll/index.vue"),
+      path: "/components/waterfall",
+      name: "Waterfall",
+      component: () => import("@/views/components/waterfall/index.vue"),
       meta: {
-        title: $t("menus.hsseamless")
+        title: $t("menus.hswaterfall")
+      }
+    },
+    {
+      path: "/components/splitPane",
+      name: "SplitPane",
+      component: () => import("@/views/components/split-pane.vue"),
+      meta: {
+        title: $t("menus.hssplitPane")
+      }
+    },
+    {
+      path: "/components/swiper",
+      name: "Swiper",
+      component: () => import("@/views/components/swiper.vue"),
+      meta: {
+        title: $t("menus.hsSwiper")
+      }
+    },
+    {
+      path: "/components/timeline",
+      name: "TimeLine",
+      component: () => import("@/views/components/timeline.vue"),
+      meta: {
+        title: $t("menus.hsTimeline")
+      }
+    },
+    {
+      path: "/components/countTo",
+      name: "CountTo",
+      component: () => import("@/views/components/count-to.vue"),
+      meta: {
+        title: $t("menus.hscountTo")
       }
     },
     {
@@ -144,28 +124,36 @@ export default {
         title: $t("menus.hscontextmenu")
       }
     },
-    {
-      path: "/components/typeit",
-      name: "Typeit",
-      component: () => import("@/views/components/typeit/index.vue"),
-      meta: {
-        title: $t("menus.hstypeit")
-      }
-    },
     {
       path: "/components/json-editor",
       name: "JsonEditor",
-      component: () => import("@/views/components/json-editor/index.vue"),
+      component: () => import("@/views/components/json-editor.vue"),
       meta: {
         title: $t("menus.hsjsoneditor")
       }
     },
     {
-      path: "/components/danmaku",
-      name: "Danmaku",
-      component: () => import("@/views/components/danmaku/index.vue"),
+      path: "/components/seamlessScroll",
+      name: "SeamlessScroll",
+      component: () => import("@/views/components/seamless-scroll.vue"),
       meta: {
-        title: $t("menus.hsdanmaku")
+        title: $t("menus.hsseamless")
+      }
+    },
+    {
+      path: "/components/virtualList",
+      name: "VirtualList",
+      component: () => import("@/views/components/virtual-list/index.vue"),
+      meta: {
+        title: $t("menus.hsVirtualList")
+      }
+    },
+    {
+      path: "/components/button",
+      name: "ButtonPage",
+      component: () => import("@/views/components/button.vue"),
+      meta: {
+        title: $t("menus.hsbutton")
       }
     }
   ]