refactor(projects): 优化路由导入页面写法，页面路由调整

src/interface/common/route.ts

@@ -18,17 +18,19 @@ export type RouteKey =
   | 'document_vue'
   | 'document_vite'
   | 'document_naive'
+  | 'plugin'
+  | 'plugin_map'
+  | 'plugin_video'
+  | 'plugin_editor'
+  | 'plugin_editor_quill'
+  | 'plugin_editor_markdown'
+  | 'plugin_copy'
+  | 'plugin_icon'
+  | 'plugin_print'
+  | 'plugin_swiper'
   | 'component'
-  | 'component_map'
+  | 'component_button'
-  | 'component_video'
+  | 'component_card'
-  | 'component_editor'
-  | 'component_editor_quill'
-  | 'component_editor_markdown'
-  | 'component_swiper'
-  | 'feat'
-  | 'feat_copy'
-  | 'feat_icon'
-  | 'feat_print'
   | 'multi-menu'
   | 'multi-menu_first'
   | 'multi-menu_first_second'

src/layouts/common/GlobalMenu/index.vue

@@ -32,16 +32,22 @@ const activeKey = computed(() => route.name as string);
 const expandedKeys = ref<string[]>(getExpendedKeys());
 
 function getExpendedKeys() {
-  const keys: string[] = [];
+  const keys = menus.map(menu => getActiveKeysInMenus(menu)).flat();
-  route.matched.forEach(item => {
-    if (item.children && item.children.length) {
-      keys.push(item.name as string);
-    }
-  });
   return keys;
 }
 
-function handleUpdateMenu(key: string, item: MenuOption) {
+function getActiveKeysInMenus(menu: GlobalMenuOption) {
+  const keys: string[] = [];
+  if (activeKey.value.includes(menu.routeName)) {
+    keys.push(menu.routeName);
+  }
+  if (menu.children) {
+    keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat());
+  }
+  return keys;
+}
+
+function handleUpdateMenu(_key: string, item: MenuOption) {
   const menuItem = item as GlobalMenuOption;
   router.push(menuItem.routePath);
 }

src/router/constant/index.ts

@@ -108,93 +108,109 @@ const routeConstMap = new Map<RouteKey, RouteConst>([
     }
   ],
   [
-    'component',
+    'plugin',
     {
-      name: 'component',
+      name: 'plugin',
-      path: '/component',
+      path: '/plugins',
-      title: '组件插件'
+      title: '插件示例'
     }
   ],
   [
-    'component_map',
+    'plugin_map',
     {
-      name: 'component_map',
+      name: 'plugin_map',
-      path: '/component/map',
+      path: '/plugin/map',
-      title: '地图插件'
+      title: '地图'
     }
   ],
   [
-    'component_video',
+    'plugin_video',
     {
-      name: 'component_video',
+      name: 'plugin_video',
-      path: '/component/video',
+      path: '/plugin/video',
-      title: '视频插件'
+      title: '视频'
     }
   ],
   [
-    'component_editor',
+    'plugin_editor',
     {
-      name: 'component_editor',
+      name: 'plugin_editor',
-      path: '/component/editor',
+      path: '/plugin/editor',
       title: '编辑器'
     }
   ],
   [
-    'component_editor_quill',
+    'plugin_editor_quill',
     {
-      name: 'component_editor_quill',
+      name: 'plugin_editor_quill',
-      path: '/component/editor/quill',
+      path: '/plugin/editor/quill',
       title: '富文本编辑器'
     }
   ],
   [
-    'component_editor_markdown',
+    'plugin_editor_markdown',
     {
-      name: 'component_editor_markdown',
+      name: 'plugin_editor_markdown',
-      path: '/component/editor/markdown',
+      path: '/plugin/editor/markdown',
       title: 'markdown编辑器'
     }
   ],
   [
-    'component_swiper',
+    'plugin_swiper',
     {
-      name: 'component_swiper',
+      name: 'plugin_swiper',
-      path: '/component/swiper',
+      path: '/plugin/swiper',
       title: 'Swiper插件'
     }
   ],
   [
-    'feat',
+    'plugin_copy',
     {
-      name: 'feat',
+      name: 'plugin_copy',
-      path: '/feat',
+      path: '/plugin/copy',
-      title: '功能示例'
-    }
-  ],
-  [
-    'feat_copy',
-    {
-      name: 'feat_copy',
-      path: '/feat/copy',
       title: '剪贴板'
     }
   ],
   [
-    'feat_icon',
+    'plugin_icon',
     {
-      name: 'feat_icon',
+      name: 'plugin_icon',
-      path: '/feat/icon',
+      path: '/plugin/icon',
       title: '图标'
     }
   ],
   [
-    'feat_print',
+    'plugin_print',
     {
-      name: 'feat_print',
+      name: 'plugin_print',
-      path: '/feat/print',
+      path: '/plugin/print',
       title: '打印'
     }
   ],
+  [
+    'component',
+    {
+      name: 'component',
+      path: '/component',
+      title: '组件示例'
+    }
+  ],
+  [
+    'component_button',
+    {
+      name: 'component_button',
+      path: '/component/button',
+      title: '按钮'
+    }
+  ],
+  [
+    'component_card',
+    {
+      name: 'component_card',
+      path: '/component/card',
+      title: '卡片'
+    }
+  ],
   [
     'multi-menu',
     {

src/router/modules/about.ts

@@ -1,12 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BasicLayout } from '@/layouts';
-import About from '@/views/about/index.vue';
+import { About } from '@/views';
 import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('about');
 
-const ABOUT: RouteRecordRaw = setSingleRoute({
+const about: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
@@ -26,4 +26,4 @@ const ABOUT: RouteRecordRaw = setSingleRoute({
   notFoundName: routeName('not-found')
 });
 
-export default ABOUT;
+export default about;

src/router/modules/component.ts

@@ -1,84 +1,40 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import ComponentMap from '@/views/component/map/index.vue';
+import { ComponentButton, ComponentCard } from '@/views';
-import ComponentVideo from '@/views/component/video/index.vue';
-import EditorQuill from '@/views/component/editor/quill/index.vue';
-import EditorMarkdown from '@/views/component/editor/markdown/index.vue';
-import ComponentSwiper from '@/views/component/swiper/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const COMPONENT: RouteRecordRaw = {
+const component: RouteRecordRaw = {
   name: routeName('component'),
   path: routePath('component'),
   component: BasicLayout,
-  redirect: { name: routeName('component_map') },
+  redirect: { name: routeName('component_button') },
   meta: {
-    requiresAuth: true,
     title: routeTitle('component'),
     icon: 'fluent:app-store-24-regular',
-    order: 3
+    order: 4
   },
   children: [
     {
-      name: routeName('component_map'),
+      name: routeName('component_button'),
-      path: routePath('component_map'),
+      path: routePath('component_button'),
-      component: ComponentMap,
+      component: ComponentButton,
       meta: {
+        title: routeTitle('component_button'),
         requiresAuth: true,
-        title: routeTitle('component_map'),
+        keepAlive: true
-        fullPage: true
       }
     },
     {
-      name: routeName('component_video'),
+      name: routeName('component_card'),
-      path: routePath('component_video'),
+      path: routePath('component_card'),
-      component: ComponentVideo,
+      component: ComponentCard,
       meta: {
+        title: routeTitle('component_card'),
         requiresAuth: true,
-        title: routeTitle('component_video'),
+        keepAlive: true
-        fullPage: true
-      }
-    },
-    {
-      name: routeName('component_editor'),
-      path: routePath('component_editor'),
-      redirect: { name: routeName('component_editor_quill') },
-      meta: {
-        title: routeTitle('component_editor')
-      },
-      children: [
-        {
-          name: routeName('component_editor_quill'),
-          path: routePath('component_editor_quill'),
-          component: EditorQuill,
-          meta: {
-            requiresAuth: true,
-            title: routeTitle('component_editor_quill'),
-            fullPage: true
-          }
-        },
-        {
-          name: routeName('component_editor_markdown'),
-          path: routePath('component_editor_markdown'),
-          component: EditorMarkdown,
-          meta: {
-            requiresAuth: true,
-            title: routeTitle('component_editor_markdown'),
-            fullPage: true
-          }
-        }
-      ]
-    },
-    {
-      name: routeName('component_swiper'),
-      path: routePath('component_swiper'),
-      component: ComponentSwiper,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('component_swiper')
       }
     }
   ]
 };
 
-export default COMPONENT;
+export default component;

src/router/modules/dashboard.ts

@@ -1,10 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
+import { DashboardAnalysis, DashboardWorkbench } from '@/views';
-import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const DASHBOARD: RouteRecordRaw = {
+const dashboard: RouteRecordRaw = {
   name: routeName('dashboard'),
   path: routePath('dashboard'),
   component: BasicLayout,
@@ -38,4 +37,4 @@ const DASHBOARD: RouteRecordRaw = {
   ]
 };
 
-export default DASHBOARD;
+export default dashboard;

src/router/modules/document.ts

@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import DocumentVue from '@/views/document/vue/index.vue';
+import { DocumentVue, DocumentVite, DocumentNaive } from '@/views';
-import DocumentVite from '@/views/document/vite/index.vue';
-import DocumentNaive from '@/views/document/naive/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const DOCUMENT: RouteRecordRaw = {
+const document: RouteRecordRaw = {
   name: routeName('document'),
   path: routePath('document'),
   component: BasicLayout,
@@ -51,4 +49,4 @@ const DOCUMENT: RouteRecordRaw = {
   ]
 };
 
-export default DOCUMENT;
+export default document;

src/router/modules/exception.ts

@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import Exception403 from '@/views/system/exception/403.vue';
+import { NoPermission, NotFound, ServiceError } from '@/views';
-import Exception404 from '@/views/system/exception/404.vue';
-import Exception500 from '@/views/system/exception/500.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const EXCEPTION: RouteRecordRaw = {
+const exception: RouteRecordRaw = {
   name: routeName('exception'),
   path: routePath('exception'),
   component: BasicLayout,
@@ -20,7 +18,7 @@ const EXCEPTION: RouteRecordRaw = {
     {
       name: routeName('exception_403'),
       path: routePath('exception_403'),
-      component: Exception403,
+      component: NoPermission,
       meta: {
         requiresAuth: true,
         title: routeTitle('exception_403'),
@@ -30,7 +28,7 @@ const EXCEPTION: RouteRecordRaw = {
     {
       name: routeName('exception_404'),
       path: routePath('exception_404'),
-      component: Exception404,
+      component: NotFound,
       meta: {
         requiresAuth: true,
         title: routeTitle('exception_404'),
@@ -40,7 +38,7 @@ const EXCEPTION: RouteRecordRaw = {
     {
       name: routeName('exception_500'),
       path: routePath('exception_500'),
-      component: Exception500,
+      component: ServiceError,
       meta: {
         requiresAuth: true,
         title: routeTitle('exception_500'),
@@ -50,4 +48,4 @@ const EXCEPTION: RouteRecordRaw = {
   ]
 };
 
-export default EXCEPTION;
+export default exception;

src/router/modules/feat.ts

@@ -1,51 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-import { BasicLayout } from '@/layouts';
-import FeatCopy from '@/views/feat/copy/index.vue';
-import FeatIcon from '@/views/feat/icon/index.vue';
-import FeatPrint from '@/views/feat/print/index.vue';
-import { routeName, routePath, routeTitle } from '../constant';
-
-const FEAT: RouteRecordRaw = {
-  name: routeName('feat'),
-  path: routePath('feat'),
-  component: BasicLayout,
-  redirect: { name: routeName('feat_copy') },
-  meta: {
-    requiresAuth: true,
-    title: routeTitle('feat'),
-    icon: 'ic:round-repeat',
-    order: 4
-  },
-  children: [
-    {
-      name: routeName('feat_copy'),
-      path: routePath('feat_copy'),
-      component: FeatCopy,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('feat_copy'),
-        fullPage: true
-      }
-    },
-    {
-      name: routeName('feat_icon'),
-      path: routePath('feat_icon'),
-      component: FeatIcon,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('feat_icon')
-      }
-    },
-    {
-      name: routeName('feat_print'),
-      path: routePath('feat_print'),
-      component: FeatPrint,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('feat_print')
-      }
-    }
-  ]
-};
-
-export default FEAT;

src/router/modules/multi-menu.ts

@@ -3,7 +3,7 @@ import { BasicLayout } from '@/layouts';
 import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const MULTI_MENU: RouteRecordRaw = {
+const multiMenu: RouteRecordRaw = {
   name: routeName('multi-menu'),
   path: routePath('multi-menu'),
   component: BasicLayout,
@@ -38,4 +38,4 @@ const MULTI_MENU: RouteRecordRaw = {
   ]
 };
 
-export default MULTI_MENU;
+export default multiMenu;

src/router/modules/plugin.ts

@@ -0,0 +1,118 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { BasicLayout } from '@/layouts';
+import {
+  PluginMap,
+  PluginVideo,
+  PluginEditorQuill,
+  PluginEditorMarkdown,
+  PluginSwiper,
+  PluginCopy,
+  PluginIcon,
+  PluginPrint
+} from '@/views';
+
+import { routeName, routePath, routeTitle } from '../constant';
+
+const plugin: RouteRecordRaw = {
+  name: routeName('plugin'),
+  path: routePath('plugin'),
+  component: BasicLayout,
+  redirect: { name: routeName('plugin_map') },
+  meta: {
+    requiresAuth: true,
+    title: routeTitle('plugin'),
+    icon: 'clarity:plugin-line',
+    order: 3
+  },
+  children: [
+    {
+      name: routeName('plugin_map'),
+      path: routePath('plugin_map'),
+      component: PluginMap,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_map'),
+        fullPage: true
+      }
+    },
+    {
+      name: routeName('plugin_video'),
+      path: routePath('plugin_video'),
+      component: PluginVideo,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_video'),
+        fullPage: true
+      }
+    },
+    {
+      name: routeName('plugin_editor'),
+      path: routePath('plugin_editor'),
+      redirect: { name: routeName('plugin_editor_quill') },
+      meta: {
+        title: routeTitle('plugin_editor')
+      },
+      children: [
+        {
+          name: routeName('plugin_editor_quill'),
+          path: routePath('plugin_editor_quill'),
+          component: PluginEditorQuill,
+          meta: {
+            requiresAuth: true,
+            title: routeTitle('plugin_editor_quill'),
+            fullPage: true
+          }
+        },
+        {
+          name: routeName('plugin_editor_markdown'),
+          path: routePath('plugin_editor_markdown'),
+          component: PluginEditorMarkdown,
+          meta: {
+            requiresAuth: true,
+            title: routeTitle('plugin_editor_markdown'),
+            fullPage: true
+          }
+        }
+      ]
+    },
+    {
+      name: routeName('plugin_swiper'),
+      path: routePath('plugin_swiper'),
+      component: PluginSwiper,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_swiper')
+      }
+    },
+    {
+      name: routeName('plugin_copy'),
+      path: routePath('plugin_copy'),
+      component: PluginCopy,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_copy'),
+        fullPage: true
+      }
+    },
+    {
+      name: routeName('plugin_icon'),
+      path: routePath('plugin_icon'),
+      component: PluginIcon,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_icon')
+      }
+    },
+    {
+      name: routeName('plugin_print'),
+      path: routePath('plugin_print'),
+      component: PluginPrint,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_print')
+      }
+    }
+  ]
+};
+
+export default plugin;

src/router/modules/website.ts

@@ -1,12 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BlankLayout } from '@/layouts';
-import Website from '@/views/website/index.vue';
+import { Website } from '@/views';
 import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('website');
 
-const WEBSITE: RouteRecordRaw = setSingleRoute({
+const website: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
@@ -25,4 +25,4 @@ const WEBSITE: RouteRecordRaw = setSingleRoute({
   notFoundName: routeName('not-found')
 });
 
-export default WEBSITE;
+export default website;

src/router/routes/constant-routes.ts

@@ -1,10 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BlankLayout } from '@/layouts';
 import type { LoginModuleType } from '@/interface';
-import Login from '@/views/system/login/index.vue';
+import { Login, NoPermission, NotFound, ServiceError } from '@/views';
-import NoPermission from '@/views/system/exception/403.vue';
-import NotFound from '@/views/system/exception/404.vue';
-import ServiceError from '@/views/system/exception/500.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 import { ROUTE_HOME_NAME } from './route-home';
 

src/views/about/index.ts

@@ -0,0 +1,3 @@
+import About from './index.vue';
+
+export { About };

src/views/component/button/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/component/card/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/component/index.ts

@@ -0,0 +1,4 @@
+import ComponentButton from './button/index.vue';
+import ComponentCard from './card/index.vue';
+
+export { ComponentButton, ComponentCard };

src/views/dashboard/index.ts

@@ -0,0 +1,4 @@
+import DashboardAnalysis from './analysis/index.vue';
+import DashboardWorkbench from './workbench/index.vue';
+
+export { DashboardAnalysis, DashboardWorkbench };

src/views/document/index.ts

@@ -0,0 +1,5 @@
+import DocumentVue from './vue/index.vue';
+import DocumentVite from './vite/index.vue';
+import DocumentNaive from './naive/index.vue';
+
+export { DocumentVue, DocumentVite, DocumentNaive };

src/views/index.ts

@@ -0,0 +1,8 @@
+export * from './system';
+export * from './dashboard';
+export * from './document';
+export * from './plugin';
+export * from './component';
+export * from './multi-menu';
+export * from './about';
+export * from './website';

src/views/multi-menu/index.ts

@@ -0,0 +1,3 @@
+import MultiMenuFirstSecond from './first/second/index.vue';
+
+export { MultiMenuFirstSecond };

src/views/plugin/index.ts

@@ -0,0 +1,19 @@
+import PluginMap from './map/index.vue';
+import PluginVideo from './video/index.vue';
+import PluginEditorQuill from './editor/quill/index.vue';
+import PluginEditorMarkdown from './editor/markdown/index.vue';
+import PluginSwiper from './swiper/index.vue';
+import PluginCopy from './copy/index.vue';
+import PluginIcon from './icon/index.vue';
+import PluginPrint from './print/index.vue';
+
+export {
+  PluginMap,
+  PluginVideo,
+  PluginEditorQuill,
+  PluginEditorMarkdown,
+  PluginSwiper,
+  PluginCopy,
+  PluginIcon,
+  PluginPrint
+};

src/views/system/index.ts

@@ -0,0 +1,6 @@
+import Login from './login/index.vue';
+import NoPermission from './exception/403.vue';
+import NotFound from './exception/404.vue';
+import ServiceError from './exception/500.vue';
+
+export { Login, NoPermission, NotFound, ServiceError };

src/views/website/index.ts

@@ -0,0 +1,3 @@
+import Website from './index.vue';
+
+export { Website };