refactor(projects): 路由组件导入拆分

src/enum/route.ts

@@ -14,13 +14,17 @@ export enum EnumRoutePath {
   'document_vue' = '/document/vue',
   'document_vite' = '/document/vite',
   'document_naive' = '/document/naive',
+  'component' = '/component',
+  'component_map' = '/component/map',
+  'component_video' = '/component/video',
   'multi-menu' = '/multi-menu',
   'multi-menu_first' = '/multi-menu/first',
   'multi-menu_first_second' = '/multi-menu/first/second',
   'exception' = '/exception',
   'exception_403' = '/exception/403',
   'exception_404' = '/exception/404',
-  'exception_500' = '/exception/500'
+  'exception_500' = '/exception/500',
+  'about' = '/about'
 }
 
 export enum EnumRouteTitle {
@@ -39,11 +43,15 @@ export enum EnumRouteTitle {
   'document_vue' = 'vue文档',
   'document_vite' = 'vite文档',
   'document_naive' = 'naive文档',
+  'component' = '组件插件',
+  'component_map' = '地图插件',
+  'component_video' = '视频插件',
   'multi-menu' = '多级菜单',
   'multi-menu_first' = '一级菜单',
   'multi-menu_first_second' = '二级菜单',
   'exception' = '异常页',
   'exception_403' = '异常页-403',
   'exception_404' = '异常页-404',
-  'exception_500' = '异常页-500'
+  'exception_500' = '异常页-500',
+  'about' = '关于'
 }

src/layouts/BasicLayout/components/GlobalContent/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex-1 flex-col-stretch p-10px bg-[#f5f7f9] dark:bg-black"
+    class="flex-1 flex-col-stretch p-10px bg-[#F6F9F8] dark:bg-black"
     :class="{ 'overflow-hidden': routeProps.fullPage }"
   >
     <router-view v-slot="{ Component, route }">

src/layouts/BasicLayout/components/GlobalFooter/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout-footer>
-    <div class="flex-center h-48px text-[#333639] dark:text-[#ffffffd1]">Copyright ©2021 Soybean Admin</div>
+    <div class="flex-center h-48px bg-white text-[#333639] dark:text-[#ffffffd1]">Copyright ©2021 Soybean Admin</div>
   </n-layout-footer>
 </template>
 

src/layouts/BlankLayout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
-    <div class="inline-block w-full h-full">
+    <div class="inline-block w-full h-full bg-[#F6F9F8]">
       <router-view v-slot="{ Component, route: itemRoute }">
         <transition :name="theme.pageStyle.animateType" mode="out-in" appear>
           <keep-alive :include="cacheRoutes">

src/router/components/about.ts

@@ -0,0 +1,6 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+import About from '@/views/about/index.vue';
+
+setCacheName(About, RouteNameMap.get('about'));
+
+export { About };

src/router/components/component.ts

@@ -0,0 +1,9 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+
+import ComponentMap from '@/views/component/map/index.vue';
+import ComponentVideo from '@/views/component/video/index.vue';
+
+setCacheName(ComponentMap, RouteNameMap.get('component_map'));
+setCacheName(ComponentVideo, RouteNameMap.get('component_video'));
+
+export { ComponentMap, ComponentVideo };

src/router/components/dashboard.ts

@@ -0,0 +1,8 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
+import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
+
+setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard_analysis'));
+setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard_workbench'));
+
+export { DashboardAnalysis, DashboardWorkbench };

src/router/components/document.ts

@@ -0,0 +1,10 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+import DocumentVue from '@/views/document/vue/index.vue';
+import DocumentVite from '@/views/document/vite/index.vue';
+import DocumentNaive from '@/views/document/naive/index.vue';
+
+setCacheName(DocumentVue, RouteNameMap.get('document_vue'));
+setCacheName(DocumentVite, RouteNameMap.get('document_vite'));
+setCacheName(DocumentNaive, RouteNameMap.get('document_naive'));
+
+export { DocumentVue, DocumentVite, DocumentNaive };

src/router/components/exception.ts

@@ -0,0 +1,10 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+import Exception403 from '@/views/system/exception/403.vue';
+import Exception404 from '@/views/system/exception/404.vue';
+import Exception500 from '@/views/system/exception/500.vue';
+
+setCacheName(Exception404, RouteNameMap.get('exception_404'));
+setCacheName(Exception403, RouteNameMap.get('exception_403'));
+setCacheName(Exception500, RouteNameMap.get('exception_500'));
+
+export { Exception403, Exception404, Exception500 };

src/router/components/index.ts

@@ -1,45 +1,7 @@
-import { RouteNameMap, setCacheName } from '../helpers';
+export { Login, NoPermission, NotFound, ServiceError } from './system';
-import Login from '@/views/system/login/index.vue';
+export { DashboardAnalysis, DashboardWorkbench } from './dashboard';
-import NoPermission from '@/views/system/exception/403.vue';
+export { DocumentVue, DocumentVite, DocumentNaive } from './document';
-import NotFound from '@/views/system/exception/404.vue';
+export { ComponentMap, ComponentVideo } from './component';
-import ServiceError from '@/views/system/exception/500.vue';
+export { Exception403, Exception404, Exception500 } from './exception';
-import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
+export { MultiMenuFirstSecond } from './multiMenu';
-import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
+export { About } from './about';
-import DocumentVue from '@/views/document/vue/index.vue';
-import DocumentVite from '@/views/document/vite/index.vue';
-import DocumentNaive from '@/views/document/naive/index.vue';
-import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
-
-const Exception403 = { ...NoPermission };
-const Exception404 = { ...NotFound };
-const Exception500 = { ...ServiceError };
-
-setCacheName(Login, RouteNameMap.get('login'));
-setCacheName(NoPermission, RouteNameMap.get('no-permission'));
-setCacheName(NotFound, RouteNameMap.get('not-found'));
-setCacheName(ServiceError, RouteNameMap.get('service-error'));
-setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard_analysis'));
-setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard_workbench'));
-setCacheName(DocumentVue, RouteNameMap.get('document_vue'));
-setCacheName(DocumentVite, RouteNameMap.get('document_vite'));
-setCacheName(DocumentNaive, RouteNameMap.get('document_naive'));
-setCacheName(MultiMenuFirstSecond, RouteNameMap.get('multi-menu_first_second'));
-setCacheName(Exception404, RouteNameMap.get('exception_404'));
-setCacheName(Exception403, RouteNameMap.get('exception_403'));
-setCacheName(Exception500, RouteNameMap.get('exception_500'));
-
-export {
-  Login,
-  NoPermission,
-  NotFound,
-  ServiceError,
-  DashboardAnalysis,
-  DashboardWorkbench,
-  DocumentVue,
-  DocumentVite,
-  DocumentNaive,
-  Exception403,
-  Exception404,
-  Exception500,
-  MultiMenuFirstSecond
-};

src/router/components/multiMenu.ts

@@ -0,0 +1,6 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
+
+setCacheName(MultiMenuFirstSecond, RouteNameMap.get('multi-menu_first_second'));
+
+export { MultiMenuFirstSecond };

src/router/components/system.ts

@@ -0,0 +1,12 @@
+import { RouteNameMap, setCacheName } from '../helpers';
+import Login from '@/views/system/login/index.vue';
+import NoPermission from '@/views/system/exception/403.vue';
+import NotFound from '@/views/system/exception/404.vue';
+import ServiceError from '@/views/system/exception/500.vue';
+
+setCacheName(Login, RouteNameMap.get('login'));
+setCacheName(NoPermission, RouteNameMap.get('no-permission'));
+setCacheName(NotFound, RouteNameMap.get('not-found'));
+setCacheName(ServiceError, RouteNameMap.get('service-error'));
+
+export { Login, NoPermission, NotFound, ServiceError };

src/router/modules/_single.ts

@@ -0,0 +1,19 @@
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath } from '@/enum';
+import { BasicLayout } from '@/layouts';
+import { RouteNameMap } from '../helpers';
+import { ROUTE_HOME } from '../routes';
+import ABOUT from './about';
+
+const SINGLE: CustomRoute = {
+  name: RouteNameMap.get('root'),
+  path: EnumRoutePath.root,
+  component: BasicLayout,
+  redirect: { name: ROUTE_HOME.name },
+  meta: {
+    isNotMenu: true
+  },
+  children: [ABOUT]
+};
+
+export default SINGLE;

src/router/modules/about.ts

@@ -0,0 +1,18 @@
+import { BookInformation24Regular } from '@vicons/fluent';
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { RouteNameMap } from '../helpers';
+import { About } from '../components';
+
+const ABOUT: CustomRoute = {
+  name: RouteNameMap.get('about'),
+  path: EnumRoutePath.about,
+  component: About,
+  meta: {
+    requiresAuth: true,
+    title: EnumRouteTitle.about,
+    icon: BookInformation24Regular
+  }
+};
+
+export default ABOUT;

src/router/modules/component.ts

@@ -0,0 +1,42 @@
+import { AppStore24Regular } from '@vicons/fluent';
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { BasicLayout } from '@/layouts';
+import { RouteNameMap } from '../helpers';
+import { ComponentMap, ComponentVideo } from '../components';
+
+const COMPONENT: CustomRoute = {
+  name: RouteNameMap.get('component'),
+  path: EnumRoutePath.component,
+  component: BasicLayout,
+  redirect: { name: RouteNameMap.get('component_map') },
+  meta: {
+    requiresAuth: true,
+    title: EnumRouteTitle.component,
+    icon: AppStore24Regular
+  },
+  children: [
+    {
+      name: RouteNameMap.get('component_map'),
+      path: EnumRoutePath.component_map,
+      component: ComponentMap,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.component_map,
+        fullPage: true
+      }
+    },
+    {
+      name: RouteNameMap.get('component_video'),
+      path: EnumRoutePath.component_video,
+      component: ComponentVideo,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.component_video,
+        fullPage: true
+      }
+    }
+  ]
+};
+
+export default COMPONENT;

src/router/modules/document.ts

@@ -9,7 +9,7 @@ const DOCUMENT: CustomRoute = {
   name: RouteNameMap.get('document'),
   path: EnumRoutePath.document,
   component: BasicLayout,
-  redirect: { name: RouteNameMap.get('document') },
+  redirect: { name: RouteNameMap.get('document_vue') },
   meta: {
     requiresAuth: true,
     title: EnumRouteTitle.document,

src/router/modules/index.ts

@@ -1,7 +1,9 @@
-import ROOT from './root';
+import SIGNLE from './_single'; // 没有子菜单的单独页面
 import DASHBOARD from './dashboard';
 import DOCUMENT from './document';
+import COMPONENT from './component';
 import EXCEPTION from './exception';
 import MULTI_MENU from './multiMenu';
+import ABOUT from './about';
 
-export default [ROOT, DASHBOARD, DOCUMENT, EXCEPTION, MULTI_MENU];
+export default [SIGNLE, DASHBOARD, DOCUMENT, COMPONENT, EXCEPTION, MULTI_MENU, ABOUT];

src/service/request/errorHandler.ts

@@ -1,73 +0,0 @@
-const ERROR_STATUS = {
-  400: '400: 请求出现语法错误',
-  401: '401: 用户未授权~',
-  403: '403: 服务器拒绝访问~',
-  404: '404: 请求的资源不存在~',
-  405: '405: 请求方法未允许~',
-  408: '408: 网络请求超时~',
-  500: '500: 服务器内部错误~',
-  501: '501: 服务器未实现请求功能~',
-  502: '502: 错误网关~',
-  503: '503: 服务不可用~',
-  504: '504: 网关超时~',
-  505: '505: http版本不支持该请求~'
-};
-type ErrorStatus = keyof typeof ERROR_STATUS;
-
-/**
- * 网络请求错误状态处理
- * @param error - 错误
- */
-export function errorHandler(error: any): void {
-  const { $message: Message } = window;
-  if (error.response) {
-    const status = error.response.status as ErrorStatus;
-    Message?.error(ERROR_STATUS[status]);
-    return;
-  }
-  if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
-    Message?.error('网络连接超时~');
-    return;
-  }
-  if (!window.navigator.onLine || error.message === 'Network Error') {
-    Message?.error('网络不可用~');
-    return;
-  }
-  Message?.error('请求错误~');
-}
-
-/**
- * 连续的请求错误依此显示
- * @param duration - 上一次弹出错误消息到下一次的时间(ms)
- */
-export function continuousErrorHandler(duration: number) {
-  let errorStacks: string[] = [];
-  function pushError(id: string) {
-    errorStacks.push(id);
-  }
-  function removeError(id: string) {
-    errorStacks = errorStacks.filter(item => item !== id);
-  }
-  function handleError(id: string, callback: Function) {
-    callback();
-    setTimeout(() => {
-      removeError(id);
-    }, duration);
-  }
-
-  function handleContinuousError(callback: Function) {
-    const id = Date.now().toString(36);
-    const { length } = errorStacks;
-    if (length > 0) {
-      pushError(id);
-      setTimeout(() => {
-        handleError(id, callback);
-      }, duration * length);
-    } else {
-      pushError(id);
-      handleError(id, callback);
-    }
-  }
-
-  return handleContinuousError;
-}

src/service/request/instance.ts

@@ -3,8 +3,7 @@ import qs from 'qs';
 import type { AxiosRequestConfig, AxiosInstance } from 'axios';
 import { ContentType } from '@/enum';
 import { getToken } from '@/utils';
-import { errorHandler } from './errorHandler';
+import { transformFile, errorHandler } from '../utils';
-import { transformFile } from '../utils';
 
 export interface StatusConfig {
   /** 表明请求状态的属性key */

src/service/utils/index.ts

@@ -45,3 +45,77 @@ export async function transformFile(file: File[] | File, key: string) {
   }
   return formData;
 }
+
+const ERROR_STATUS = {
+  400: '400: 请求出现语法错误',
+  401: '401: 用户未授权~',
+  403: '403: 服务器拒绝访问~',
+  404: '404: 请求的资源不存在~',
+  405: '405: 请求方法未允许~',
+  408: '408: 网络请求超时~',
+  500: '500: 服务器内部错误~',
+  501: '501: 服务器未实现请求功能~',
+  502: '502: 错误网关~',
+  503: '503: 服务不可用~',
+  504: '504: 网关超时~',
+  505: '505: http版本不支持该请求~'
+};
+type ErrorStatus = keyof typeof ERROR_STATUS;
+
+/**
+ * 网络请求错误状态处理
+ * @param error - 错误
+ */
+export function errorHandler(error: any): void {
+  const { $message: Message } = window;
+  if (error.response) {
+    const status = error.response.status as ErrorStatus;
+    Message?.error(ERROR_STATUS[status]);
+    return;
+  }
+  if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
+    Message?.error('网络连接超时~');
+    return;
+  }
+  if (!window.navigator.onLine || error.message === 'Network Error') {
+    Message?.error('网络不可用~');
+    return;
+  }
+  Message?.error('请求错误~');
+}
+
+/**
+ * 连续的请求错误依此显示
+ * @param duration - 上一次弹出错误消息到下一次的时间(ms)
+ */
+export function continuousErrorHandler(duration: number) {
+  let errorStacks: string[] = [];
+  function pushError(id: string) {
+    errorStacks.push(id);
+  }
+  function removeError(id: string) {
+    errorStacks = errorStacks.filter(item => item !== id);
+  }
+  function handleError(id: string, callback: Function) {
+    callback();
+    setTimeout(() => {
+      removeError(id);
+    }, duration);
+  }
+
+  function handleContinuousError(callback: Function) {
+    const id = Date.now().toString(36);
+    const { length } = errorStacks;
+    if (length > 0) {
+      pushError(id);
+      setTimeout(() => {
+        handleError(id, callback);
+      }, duration * length);
+    } else {
+      pushError(id);
+      handleError(id, callback);
+    }
+  }
+
+  return handleContinuousError;
+}

src/views/about/index.vue

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

src/views/component/map/index.vue

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

src/views/component/video/index.vue

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

src/views/dashboard/workbench/index.vue

@@ -1,73 +1,15 @@
 <template>
-  <div>
+  <div class="p-6px">
-    <n-spin :show="loading">
+    <div class="flex justify-between h-360px">
-      <n-space :vertical="true">
+      <div class="flex-1 min-w-360px h-full bg-white rounded-16px"></div>
-        <div>
+      <div class="w-16px"></div>
-          <n-gradient-text type="primary" size="32">GradientText</n-gradient-text>
+      <div class="w-360px h-full bg-white rounded-16px"></div>
-          <n-space>
+    </div>
-            <n-gradient-text>Default</n-gradient-text>
-            <n-gradient-text type="primary">Primary</n-gradient-text>
-            <n-gradient-text type="info">Info</n-gradient-text>
-            <n-gradient-text type="success">Success</n-gradient-text>
-            <n-gradient-text type="warning">Warning</n-gradient-text>
-            <n-gradient-text type="error">Error</n-gradient-text>
-          </n-space>
-        </div>
-        <div>
-          <n-gradient-text type="primary" size="32">Button</n-gradient-text>
-          <n-space>
-            <n-button>Default</n-button>
-            <n-button type="primary">Primary</n-button>
-            <n-button type="info">Info</n-button>
-            <n-button type="success">Success</n-button>
-            <n-button type="warning">Warning</n-button>
-            <n-button type="error">Error</n-button>
-          </n-space>
-        </div>
-        <n-gradient-text type="primary" size="32">Tag</n-gradient-text>
-        <n-space>
-          <n-tag>Tag</n-tag>
-          <n-tag type="primary">Primary</n-tag>
-          <n-tag type="info">Info</n-tag>
-          <n-tag type="success">Success</n-tag>
-          <n-tag type="warning">Warning</n-tag>
-          <n-tag type="error">Error</n-tag>
-        </n-space>
-        <div>
-          <n-gradient-text type="primary" size="32">Switch | Checkbox | Radio</n-gradient-text>
-          <n-space>
-            <n-switch :default-value="true" />
-            <n-checkbox :default-checked="true" />
-            <n-radio :default-checked="true" />
-          </n-space>
-        </div>
-        <n-space>
-          <n-button type="primary" @click="handleDialog">Dialog</n-button>
-        </n-space>
-      </n-space>
-    </n-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+// import { ref } from 'vue';
-import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
+// import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
-
-const dialog = useDialog();
-
-const loading = ref(true);
-
-setTimeout(() => {
-  loading.value = false;
-}, 1500);
-
-function handleDialog() {
-  dialog.info({
-    title: '提示',
-    content: '您确定要退出登录吗？',
-    positiveText: '确定',
-    negativeText: '取消'
-  });
-}
 </script>
 <style scoped></style>