refactor: 重构路由目录

mock/demo/route.ts

@@ -78,20 +78,6 @@ const power = [
       },
     ],
   },
-  {
-    path: '/system',
-    name: 'RtSystem',
-    children: [
-      {
-        path: 'power',
-        name: 'RtPower',
-      },
-      {
-        path: 'guide',
-        name: 'RtGuide',
-      },
-    ],
-  },
 ];
 
 const adminRoute = [
@@ -147,6 +133,20 @@ const adminRoute = [
       },
     ],
   },
+  {
+    path: '/system',
+    name: 'RtSystem',
+    children: [
+      {
+        path: 'power',
+        name: 'RtPower',
+      },
+      {
+        path: 'guide',
+        name: 'RtGuide',
+      },
+    ],
+  },
   {
     path: '/external-link',
     name: 'RtExternal',

src/layouts/pageLayouts/components/Breadcrumb/index.vue

@@ -64,7 +64,7 @@
 
     matched.push(item);
     levelList.value = matched.filter(
-      (item) => item.meta && item.meta.title && !item.meta.breadcrumb,
+      (item) => item && item.meta && item.meta.title && !item.meta.breadcrumb,
     );
   };
 

src/layouts/redirect/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+  import { unref } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  const { currentRoute, replace } = useRouter();
+
+  const { params, query } = unref(currentRoute);
+  const { path } = params;
+
+  const _path = Array.isArray(path) ? path.join('/') : path;
+
+  replace({
+    path: '/' + _path,
+    query,
+  });
+</script>

src/router/modules/about/index.ts

@@ -0,0 +1,22 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const about: AppRouteRecordRaw[] = [
+  {
+    path: '/about',
+    redirect: '/about/index',
+    name: 'RtAdminInfo',
+    alwaysShow: false,
+    meta: { title: t('route.pathName.about'), icon: 'about', position: 10 },
+    children: [
+      {
+        path: 'index',
+        name: 'RtAbout',
+        component: () => import('@/views/about/index.vue'),
+        meta: { title: t('route.pathName.about') },
+      },
+    ],
+  },
+];
+
+export default about;

src/router/modules/components/index.ts

@@ -0,0 +1,67 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const component: AppRouteRecordRaw[] = [
+  {
+    path: '/components',
+    // component: Layout,
+    redirect: '/components/form',
+    name: 'RtComponents',
+    meta: { title: t('route.pathName.components'), icon: 'components', position: 2 },
+    children: [
+      {
+        path: '/components/form',
+        name: 'RtForm',
+        component: () => import('@/views/components/form/index.vue'),
+        meta: { title: t('route.pathName.form') },
+      },
+      {
+        path: 'table',
+        name: 'RtTable',
+        component: () => import('@/views/components/TablePage/index.vue'),
+        meta: { title: t('route.pathName.table') },
+      },
+      {
+        path: 'drag',
+        name: 'RtDrag',
+        component: () => import('@/views/components/drag/index.vue'),
+        meta: { title: t('route.pathName.dragCpts') },
+      },
+      {
+        path: 'count-to',
+        name: 'RtCountTo',
+        component: () => import('@/views/components/count-to/index.vue'),
+        meta: { title: t('route.pathName.countTo') },
+      },
+      {
+        path: 'seamless-scroll',
+        name: 'RtSeamlessScroll',
+        component: () => import('@/views/components/seamless-scroll/index.vue'),
+        meta: { title: t('route.pathName.seamlessScroll') },
+      },
+      {
+        path: 'date-time',
+        // Parent router-view
+        name: 'DateTime',
+        redirect: '/components/date-time/date',
+        meta: { title: t('route.pathName.date') },
+        children: [
+          {
+            path: '/components/date-time/date-select',
+            name: 'RtDate',
+            component: () => import('@/views/components/date/index.vue'),
+            meta: { title: t('route.pathName.dateSelect'), keepAlive: true },
+          },
+          {
+            path: 'calendar',
+            name: 'RtCalendar',
+            component: () => import('@/views/components/calendar/index.vue'),
+            meta: { title: t('route.pathName.calendar') },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default component;

src/router/modules/echarts/index.ts

@@ -0,0 +1,27 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const echarts: AppRouteRecordRaw[] = [
+  {
+    path: '/echarts',
+    redirect: '/echarts/bar',
+    name: 'RtEcharts',
+    meta: { title: t('route.pathName.echarts'), icon: 'echarts', position: 3 },
+    children: [
+      {
+        path: 'bar',
+        name: 'RtBar',
+        component: () => import('@/views/echarts/bar/index.vue'),
+        meta: { title: t('route.pathName.echarts_bar') },
+      },
+      {
+        path: 'map',
+        name: 'RtMap',
+        component: () => import('@/views/echarts/map/index.vue'),
+        meta: { title: t('route.pathName.echarts_map') },
+      },
+    ],
+  },
+];
+
+export default echarts;

src/router/modules/editor/index.ts

@@ -0,0 +1,33 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const editor: AppRouteRecordRaw[] = [
+  {
+    path: '/editor',
+    redirect: '/editor/logic-flow',
+    name: 'RtEditor',
+    meta: { title: t('route.pathName.editor'), icon: 'editor', position: 4 },
+    children: [
+      {
+        path: 'rich-text',
+        name: 'RtRichText',
+        component: () => import('@/views/editor/richText/index.vue'),
+        meta: { title: t('route.pathName.editor_richText') },
+      },
+      {
+        path: 'markdown',
+        name: 'RtMarkdown',
+        component: () => import('@/views/editor/markdown/index.vue'),
+        meta: { title: t('route.pathName.editor_markdown') },
+      },
+      {
+        path: 'logic-flow',
+        name: 'RtLogicFlow',
+        component: () => import('@/views/editor/logicFlow/index.vue'),
+        meta: { title: t('route.pathName.editor_logicFlow') },
+      },
+    ],
+  },
+];
+
+export default editor;

src/router/modules/error/index.ts

@@ -0,0 +1,26 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const error: AppRouteRecordRaw[] = [
+  {
+    path: '/error',
+    redirect: '/error/404',
+    name: 'error',
+    meta: {
+      title: 'route.pathName.error',
+      icon: 'iEL-remove-filled',
+      whiteList: true,
+      position: 8,
+    },
+    children: [
+      {
+        path: '404',
+        name: '404',
+        component: () => import('@/views/error/404.vue'),
+        meta: { title: t('route.pathName.error404') },
+      },
+    ],
+  },
+];
+
+export default error;

src/router/modules/externalLink/index.ts

@@ -0,0 +1,20 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const externalLink: AppRouteRecordRaw[] = [
+  {
+    path: '/external-link',
+    // component: Layout,
+    name: 'RtExternal',
+    meta: { title: t('route.pathName.thirdParty'), icon: 'link', position: 9 },
+    children: [
+      {
+        path: 'https://github.com/SuperCuteXiaoSi/xiaosiAdmin',
+        name: 'RtGitLink',
+        meta: { title: t('route.pathName.thirdParty'), icon: 'link' },
+      },
+    ],
+  },
+];
+
+export default externalLink;

src/router/modules/home/index.ts

@@ -0,0 +1,16 @@
+/* Layout */
+// import Layout from '@/layouts/index.vue'
+// import AppMain from '@/layouts/components/AppMain/index.vue'
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const safeManagerRoutes: Array<AppRouteRecordRaw> = [
+  {
+    path: '/welcome',
+    name: 'RtWelcome',
+    component: () => import('@/views/index/index.vue'),
+    meta: { title: t('route.pathName.index'), icon: 'iEL-home-filled', position: 1 },
+  },
+];
+
+export default safeManagerRoutes;

src/router/modules/nested/index.ts

@@ -0,0 +1,65 @@
+import { AppRouteRecordRaw } from '#/route';
+import { t } from '@/hooks/web/useI18n';
+
+const nested: AppRouteRecordRaw[] = [
+  {
+    path: '/nested',
+    redirect: '/nested/menu1',
+    name: 'RtNested',
+    meta: {
+      title: t('route.pathName.nested'),
+      icon: 'iEL-grid',
+      position: 6,
+    },
+    children: [
+      {
+        path: 'menu1',
+        name: 'RtMenu1',
+        redirect: '/nested/menu1/menu1-1',
+        meta: { title: t('route.pathName.nested1') },
+        children: [
+          {
+            path: 'menu1-1',
+            component: () => import('@/views/nested/menu1/menu1-1/index.vue'),
+            name: 'RtMenu1-1',
+            meta: { title: t('route.pathName.nested1_1') },
+          },
+          {
+            path: 'menu1-2',
+            name: 'RtMenu1-2',
+            redirect: '/nested/menu1/menu1-2/menu1-2-1',
+            meta: { title: t('route.pathName.nested1_2') },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index.vue'),
+                name: 'RtMenu1-2-1',
+                meta: { title: t('route.pathName.nested1_2_1') },
+              },
+              {
+                path: 'menu1-2-2',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index.vue'),
+                name: 'RtMenu1-2-2',
+                meta: { title: t('route.pathName.nested1_2_2') },
+              },
+            ],
+          },
+          {
+            path: 'menu1-3',
+            component: () => import('@/views/nested/menu1/menu1-3/index.vue'),
+            name: 'RtMenu1-3',
+            meta: { title: t('route.pathName.nested1_3') },
+          },
+        ],
+      },
+      {
+        path: 'menu2',
+        component: () => import('@/views/nested/menu2/index.vue'),
+        name: 'RtMenu2',
+        meta: { title: t('route.pathName.nested2') },
+      },
+    ],
+  },
+];
+
+export default nested;