refactor(projects): 重构路由页面组件的导入

src/utils/router/component.ts

@@ -1,32 +1,7 @@
 import type { Component } from 'vue';
 import { EnumLayoutComponentName } from '@/enum';
 import { BasicLayout, BlankLayout } from '@/layouts';
-import {
+import { views } from '@/views';
-  Login,
-  NoPermission,
-  NotFound,
-  ServiceError,
-  DashboardAnalysis,
-  DashboardWorkbench,
-  DocumentVue,
-  DocumentVueNew,
-  DocumentVite,
-  DocumentNaive,
-  ComponentButton,
-  ComponentCard,
-  ComponentTable,
-  PluginMap,
-  PluginVideo,
-  PluginEditorQuill,
-  PluginEditorMarkdown,
-  PluginSwiper,
-  PluginCopy,
-  PluginIcon,
-  PluginPrint,
-  MultiMenuFirstSecond,
-  MultiMenuFirstSecondNewThird,
-  About
-} from '@/views';
 import type { LayoutComponentName } from '@/interface';
 
 type LayoutComponent = Record<LayoutComponentName, () => Promise<Component>>;
@@ -43,94 +18,12 @@ export function getLayoutComponent(layoutType: LayoutComponentName) {
   return () => setViewComponentName(layoutComponent[layoutType], EnumLayoutComponentName[layoutType]);
 }
 
-/** 需要用到自身vue组件的页面 */
-type ViewComponentKey = Exclude<
-  AuthRoute.RouteKey,
-  | 'root'
-  | 'dashboard'
-  | 'document'
-  | 'document_project'
-  | 'component'
-  | 'plugin'
-  | 'plugin_editor'
-  | 'multi-menu'
-  | 'multi-menu_first'
-  | 'multi-menu_first_second-new'
-  | 'exception'
->;
-
-type ViewComponent = Record<ViewComponentKey, () => Promise<Component>>;
-
 /**
  * 获取页面导入的vue文件(懒加载的方式)
  * @param routeKey - 路由key
  */
 export function getViewComponent(routeKey: AuthRoute.RouteKey) {
-  const keys: ViewComponentKey[] = [
+  return () => setViewComponentName(views[routeKey], routeKey) as Promise<Component>;
-    'login',
-    'no-permission',
-    'not-found',
-    'service-error',
-    'dashboard_analysis',
-    'dashboard_workbench',
-    'document_vue',
-    'document_vue-new',
-    'document_vite',
-    'document_naive',
-    'component_button',
-    'component_card',
-    'component_table',
-    'plugin_map',
-    'plugin_video',
-    'plugin_editor_quill',
-    'plugin_editor_markdown',
-    'plugin_copy',
-    'plugin_icon',
-    'plugin_print',
-    'plugin_swiper',
-    'exception_403',
-    'exception_404',
-    'exception_500',
-    'multi-menu_first_second',
-    'multi-menu_first_second-new_third',
-    'about',
-    'not-found-page'
-  ];
-
-  const key = keys.includes(routeKey as ViewComponentKey) ? (routeKey as ViewComponentKey) : 'not-found';
-
-  const viewComponent: ViewComponent = {
-    login: Login,
-    'no-permission': NoPermission,
-    'not-found': NotFound,
-    'service-error': ServiceError,
-    dashboard_analysis: DashboardAnalysis,
-    dashboard_workbench: DashboardWorkbench,
-    document_vue: DocumentVue,
-    'document_vue-new': DocumentVueNew,
-    document_vite: DocumentVite,
-    document_naive: DocumentNaive,
-    component_button: ComponentButton,
-    component_card: ComponentCard,
-    component_table: ComponentTable,
-    plugin_map: PluginMap,
-    plugin_video: PluginVideo,
-    plugin_editor_quill: PluginEditorQuill,
-    plugin_editor_markdown: PluginEditorMarkdown,
-    plugin_copy: PluginCopy,
-    plugin_icon: PluginIcon,
-    plugin_print: PluginPrint,
-    plugin_swiper: PluginSwiper,
-    exception_403: NoPermission,
-    exception_404: NotFound,
-    exception_500: ServiceError,
-    'multi-menu_first_second': MultiMenuFirstSecond,
-    'multi-menu_first_second-new_third': MultiMenuFirstSecondNewThird,
-    about: About,
-    'not-found-page': NotFound
-  };
-
-  return () => setViewComponentName(viewComponent[key], key) as Promise<Component>;
 }
 
 /** 给页面组件设置名称 */

src/views/about/index.ts

@@ -1,3 +0,0 @@
-const About = () => import('./index.vue');
-
-export { About };

src/views/component/index.ts

@@ -1,5 +0,0 @@
-const ComponentButton = () => import('./button/index.vue');
-const ComponentCard = () => import('./card/index.vue');
-const ComponentTable = () => import('./table/index.vue');
-
-export { ComponentButton, ComponentCard, ComponentTable };

src/views/dashboard/index.ts

@@ -1,4 +0,0 @@
-const DashboardAnalysis = () => import('./analysis/index.vue');
-const DashboardWorkbench = () => import('./workbench/index.vue');
-
-export { DashboardAnalysis, DashboardWorkbench };

src/views/document/index.ts

@@ -1,6 +0,0 @@
-const DocumentVue = () => import('./vue/index.vue');
-const DocumentVueNew = () => import('./vue-new/index.vue');
-const DocumentVite = () => import('./vite/index.vue');
-const DocumentNaive = () => import('./naive/index.vue');
-
-export { DocumentVue, DocumentVueNew, DocumentVite, DocumentNaive };

src/views/exception/403/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="403" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../../system-view/components';
+</script>
+<style scoped></style>

src/views/exception/404/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="404" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../../system-view/components';
+</script>
+<style scoped></style>

src/views/exception/500/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="500" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../../system-view/components';
+</script>
+<style scoped></style>

src/views/index.ts

@@ -1,7 +1,31 @@
-export * from './system';
+import type { Component } from 'vue';
-export * from './dashboard';
+
-export * from './document';
+type ViewComponent = Record<string, () => Promise<Component>>;
-export * from './component';
+
-export * from './plugin';
+const importViews = import.meta.glob('./**/index.vue');
-export * from './multi-menu';
+
-export * from './about';
+const COMPONENTS_KEY = 'components';
+const PREFIX = './';
+const SUFFIX = '/index.vue';
+const PATH_SPLIT_MARK = '/';
+const ROUTE_KEY_SPLIT_MARK = '_';
+/** 系统的内置路由，该文件夹名称不作为RouteKey */
+const SYSTEM_VIEW = 'system-view_';
+
+/** 过滤掉组件文件 */
+const viewKeys = Object.keys(importViews).filter(key => !key.includes(COMPONENTS_KEY));
+
+function getViewComponent() {
+  const components: ViewComponent = {};
+  viewKeys.forEach(key => {
+    const routeKey = key
+      .replace(PREFIX, '')
+      .replace(SUFFIX, '')
+      .replaceAll(PATH_SPLIT_MARK, ROUTE_KEY_SPLIT_MARK)
+      .replace(SYSTEM_VIEW, '');
+    components[routeKey] = importViews[key];
+  });
+  return components;
+}
+
+export const views = getViewComponent();

src/views/multi-menu/index.ts

@@ -1,4 +0,0 @@
-const MultiMenuFirstSecond = () => import('./first/second/index.vue');
-const MultiMenuFirstSecondNewThird = () => import('./first/second-new/third/index.vue');
-
-export { MultiMenuFirstSecond, MultiMenuFirstSecondNewThird };

src/views/plugin/index.ts

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

src/views/system-view/not-found/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="404" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>

src/views/system/index.ts

@@ -1,6 +0,0 @@
-const Login = () => import('./login/index.vue');
-const NoPermission = () => import('./exception/no-permission/index.vue');
-const NotFound = () => import('./exception/not-found/index.vue');
-const ServiceError = () => import('./exception/service-error/index.vue');
-
-export { Login, NoPermission, NotFound, ServiceError };