feat(projects): 添加固定路由

src/enum/index.ts

@@ -1,3 +1,4 @@
 export { ContentType, EnumDataType } from './common';
 export { EnumAnimate } from './animate';
 export { EnumNavMode, EnumNavTheme } from './theme';
+export { EnumRoutePaths } from './route';

src/enum/route.ts

@@ -1 +1,6 @@
-export enum EnumRoutes {}
+export enum EnumRoutePaths {
+  'login' = '/login',
+  'not-found' = '/404',
+  'no-permission' = '/403',
+  'service-error' = '/500'
+}

src/layouts/BlankLayout/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <n-scrollbar class="h-full" :x-scrollable="true">
+    <div class="inline-block w-full min-h-100vh">
+      <router-view />
+    </div>
+  </n-scrollbar>
+</template>
+
+<script lang="ts" setup>
+import { NScrollbar } from 'naive-ui';
+</script>
+<style scoped></style>

src/layouts/index.ts

@@ -1,3 +1,4 @@
 import BasicLayout from './BasicLayout/index.vue';
+import BlankLayout from './BlankLayout/index.vue';
 
-export { BasicLayout };
+export { BasicLayout, BlankLayout };

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import AppProvider from './AppProvider.vue';
 import { setupStore } from './store';
-import { router, setupRouter } from './router';
+import { setupRouter } from './router';
 import { setupSmoothScroll, setupWindicssDarkMode } from './plugins';
 import 'virtual:windi.css';
 import './styles/css/global.css';
@@ -18,11 +18,9 @@ async function setupApp() {
   appProvider.mount('#appProvider', true);
 
   // 挂载路由
-  setupRouter(app);
+  await setupRouter(app);
 
   // 路由准备就绪后挂载APP实例
-  await router.isReady();
-
   app.mount('#app', true);
 
   // 配置windicss暗黑主题

src/router/index.ts

@@ -1,19 +1,21 @@
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
 import type { App } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
-import { customRoutes } from './routes';
+import { constantRoutes, customRoutes } from './routes';
 import createRouterGuide from './permission';
 
-const routes: Array<RouteRecordRaw> = [...customRoutes];
+const routes: Array<RouteRecordRaw> = [...customRoutes, ...constantRoutes];
 
+/** 用于部署vercel托管服务 */
 const isVercel = import.meta.env.VITE_HTTP_ENV === 'VERCEL';
 
-export const router = createRouter({
+const router = createRouter({
   history: isVercel ? createWebHashHistory() : createWebHistory(),
   routes
 });
 
-export function setupRouter(app: App) {
+export async function setupRouter(app: App) {
   app.use(router);
   createRouterGuide(router);
+  await router.isReady();
 }

src/router/routes.ts

@@ -1,5 +1,55 @@
 import type { RouteRecordRaw } from 'vue-router';
-import { BasicLayout } from '@/layouts';
+import { BasicLayout, BlankLayout } from '@/layouts';
+import { EnumRoutePaths } from '@/enum';
+
+type RouteKey = keyof typeof EnumRoutePaths;
+
+/** 路由名称 */
+export const RouteNameMap = new Map<RouteKey, RouteKey>((Object.keys(EnumRoutePaths) as RouteKey[]).map(v => [v, v]));
+
+/**
+ * 固定不变的路由
+ * @description !最后一项重定向未找到的路由须放置路由的最后一项
+ */
+export const constantRoutes: Array<RouteRecordRaw> = [
+  {
+    name: 'system',
+    path: '/system',
+    component: BlankLayout,
+    redirect: { name: 'not-found' },
+    children: [
+      // 登录
+      {
+        name: RouteNameMap.get('login'),
+        path: EnumRoutePaths.login,
+        component: () => import('@/views/system/login/index.vue')
+      },
+      // 404
+      {
+        name: RouteNameMap.get('not-found'),
+        path: EnumRoutePaths['not-found'],
+        component: () => import('@/views/system/exception/404.vue')
+      },
+      // 403
+      {
+        name: RouteNameMap.get('no-permission'),
+        path: EnumRoutePaths['no-permission'],
+        component: () => import('@/views/system/exception/403.vue')
+      },
+      // 500
+      {
+        name: RouteNameMap.get('service-error'),
+        path: EnumRoutePaths['service-error'],
+        component: () => import('@/views/system/exception/500.vue')
+      }
+    ]
+  },
+  // 匹配无效的路径重定向404
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: { name: 'not-found' }
+  }
+];
 
 /**
  * 自定义路由
@@ -15,11 +65,6 @@ export const customRoutes: Array<RouteRecordRaw> = [
         name: 'home',
         path: '/home',
         component: () => import('@/views/home/index.vue')
-      },
-      {
-        name: 'system',
-        path: '/system',
-        component: () => import('@/views/system/index.vue')
       }
     ]
   }

src/views/system/exception/403.vue

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

src/views/system/exception/404.vue

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

src/views/system/exception/500.vue

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

src/views/system/login/index.vue

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