refactor(projects): 重构路由类型和路由元数据类型，重构多级菜单路由写法

src/router/modules/about.ts

@@ -1,4 +1,4 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BasicLayout } from '@/layouts';
 import About from '@/views/about/index.vue';
@@ -6,19 +6,21 @@ import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('about');
 
-const ABOUT: CustomRoute = setSingleRoute({
+const ABOUT: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
     component: About,
     meta: {
-      requiresAuth: true,
       title,
+      requiresAuth: true,
+      keepAlive: true,
       icon: 'fluent:book-information-24-regular'
     }
   },
   container: BasicLayout,
-  meta: {
+  containerMeta: {
+    title,
     order: 7
   },
   notFoundName: routeName('not-found')

src/router/modules/component.ts

@@ -1,5 +1,5 @@
-import type { CustomRoute } from '@/interface';
-import { BasicLayout, RouterViewLayout } from '@/layouts';
+import type { RouteRecordRaw } from 'vue-router';
+import { BasicLayout } from '@/layouts';
 import ComponentMap from '@/views/component/map/index.vue';
 import ComponentVideo from '@/views/component/video/index.vue';
 import EditorQuill from '@/views/component/editor/quill/index.vue';
@@ -7,7 +7,7 @@ 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: CustomRoute = {
+const COMPONENT: RouteRecordRaw = {
   name: routeName('component'),
   path: routePath('component'),
   component: BasicLayout,
@@ -42,12 +42,9 @@ const COMPONENT: CustomRoute = {
     {
       name: routeName('component_editor'),
       path: routePath('component_editor'),
-      component: RouterViewLayout,
       redirect: { name: routeName('component_editor_quill') },
       meta: {
-        requiresAuth: true,
-        title: routeTitle('component_editor'),
-        fullPage: true
+        title: routeTitle('component_editor')
       },
       children: [
         {

src/router/modules/dashboard.ts

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

src/router/modules/document.ts

@@ -1,11 +1,11 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
 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 { routeName, routePath, routeTitle } from '../constant';
 
-const DOCUMENT: CustomRoute = {
+const DOCUMENT: RouteRecordRaw = {
   name: routeName('document'),
   path: routePath('document'),
   component: BasicLayout,

src/router/modules/exception.ts

@@ -1,11 +1,11 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
 import Exception403 from '@/views/system/exception/403.vue';
 import Exception404 from '@/views/system/exception/404.vue';
 import Exception500 from '@/views/system/exception/500.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const EXCEPTION: CustomRoute = {
+const EXCEPTION: RouteRecordRaw = {
   name: routeName('exception'),
   path: routePath('exception'),
   component: BasicLayout,

src/router/modules/feat.ts

@@ -1,11 +1,11 @@
-import type { CustomRoute } from '@/interface';
+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: CustomRoute = {
+const FEAT: RouteRecordRaw = {
   name: routeName('feat'),
   path: routePath('feat'),
   component: BasicLayout,

src/router/modules/multi-menu.ts

@@ -1,9 +1,9 @@
-import type { CustomRoute } from '@/interface';
-import { BasicLayout, RouterViewLayout } from '@/layouts';
+import type { RouteRecordRaw } from 'vue-router';
+import { BasicLayout } from '@/layouts';
 import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const MULTI_MENU: CustomRoute = {
+const MULTI_MENU: RouteRecordRaw = {
   name: routeName('multi-menu'),
   path: routePath('multi-menu'),
   component: BasicLayout,
@@ -17,12 +17,9 @@ const MULTI_MENU: CustomRoute = {
     {
       name: routeName('multi-menu_first'),
       path: routePath('multi-menu_first'),
-      component: RouterViewLayout,
       redirect: { name: routeName('multi-menu_first_second') },
       meta: {
-        keepAlive: true,
-        requiresAuth: true,
-        title: routeTitle('multi-menu_first_second')
+        title: routeTitle('multi-menu_first')
       },
       children: [
         {
@@ -30,9 +27,9 @@ const MULTI_MENU: CustomRoute = {
           path: routePath('multi-menu_first_second'),
           component: MultiMenuFirstSecond,
           meta: {
-            keepAlive: true,
-            requiresAuth: true,
             title: routeTitle('multi-menu_first_second'),
+            requiresAuth: true,
+            keepAlive: true,
             fullPage: true
           }
         }

src/router/modules/website.ts

@@ -1,4 +1,4 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BlankLayout } from '@/layouts';
 import Website from '@/views/website/index.vue';
@@ -6,7 +6,7 @@ import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('website');
 
-const WEBSITE: CustomRoute = setSingleRoute({
+const WEBSITE: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
@@ -14,11 +14,12 @@ const WEBSITE: CustomRoute = setSingleRoute({
     meta: {
       title,
       icon: 'codicon:remote-explorer',
-      isNotMenu: true
+      notAsMenu: true
     }
   },
   container: BlankLayout,
-  meta: {
+  containerMeta: {
+    title,
     order: 8
   },
   notFoundName: routeName('not-found')

src/router/routes/constant-routes.ts

@@ -19,12 +19,13 @@ const constantRoutes: RouteRecordRaw[] = [
     redirect: { name: ROUTE_HOME_NAME }
   },
   {
-    // 名称、路由随意，不在路由声明里面，只是为各个页面充当传递BlankLayout的桥梁，因此访问该路由时重定向到404
+    // 名称、路径随意，不在路由声明里面，只是为各个子路由充当应用BlankLayout布局的桥梁，因此访问该路由时重定向到404
     name: 'constant-single_',
     path: '/constant-single_',
     component: BlankLayout,
     redirect: { name: routeName('not-found') },
     meta: {
+      title: 'constant-single_',
       keepAlive: true
     },
     children: [

src/router/routes/index.ts

@@ -1,8 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
+import { transformMultiDegreeRoutes } from '@/utils';
 import customRoutes from '../modules';
 import constantRoutes from './constant-routes';
 
+const transformRoutes = transformMultiDegreeRoutes(customRoutes);
+
 /** 所有路由 */
-export const routes: RouteRecordRaw[] = [...customRoutes, ...constantRoutes];
+export const routes: RouteRecordRaw[] = [...transformRoutes, ...constantRoutes];
 
 export { ROUTE_HOME } from './route-home';