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 {
-  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 { views } 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[] = [
-    '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>;
+  return () => setViewComponentName(views[routeKey], routeKey) as Promise<Component>;
 }
 
 /** 给页面组件设置名称 */

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';
-export * from './dashboard';
-export * from './document';
-export * from './component';
-export * from './plugin';
-export * from './multi-menu';
-export * from './about';
+import type { Component } from 'vue';
+
+type ViewComponent = Record<string, () => Promise<Component>>;
+
+const importViews = import.meta.glob('./**/index.vue');
+
+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/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>