refactor(projects): 单独路由逻辑重构、路由转换函数优化

src/views/system/exception/403.vue

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

src/views/system/exception/404.vue

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

src/views/system/exception/500.vue

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

src/views/system/exception/components/ExceptionBase.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex-col-center wh-full">
+    <div class="w-400px h-400px text-primary">
+      <component :is="active" />
+    </div>
+    <router-link :to="{ name: routeHomePath }">
+      <n-button type="primary">回到首页</n-button>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { NButton } from 'naive-ui';
+import { SvgNoPermission, SvgNotFound, SvgServiceError } from '@/components';
+import { routeName } from '@/router';
+
+type ExceptionType = '403' | '404' | '500';
+
+interface Props {
+  /** 异常类型 403 404 500 */
+  type: ExceptionType;
+}
+
+type ExceptionComponent = {
+  [key in ExceptionType]: Component;
+};
+
+const props = defineProps<Props>();
+
+const routeHomePath = routeName('root');
+
+const exceptions: ExceptionComponent = {
+  '403': SvgNoPermission,
+  '404': SvgNotFound,
+  '500': SvgServiceError
+};
+
+const active = computed(() => exceptions[props.type]);
+</script>
+<style scoped></style>

src/views/system/exception/components/index.ts

@@ -0,0 +1,3 @@
+import ExceptionBase from './ExceptionBase.vue';
+
+export { ExceptionBase };

src/views/system/exception/no-permission/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="403" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>

src/views/system/exception/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>

src/views/system/exception/service-error/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="500" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>

src/views/system/index.ts

@@ -1,6 +1,6 @@
 const Login = () => import('./login/index.vue');
-const NoPermission = () => import('./exception/403.vue');
-const NotFound = () => import('./exception/404.vue');
-const ServiceError = () => import('./exception/500.vue');
+const NoPermission = () => import('./exception/no-permission/index.vue');
+const NotFound = () => import('./exception/not-found/index.vue');
+const ServiceError = () => import('./exception/service-error/index.vue');
 
 export { Login, NoPermission, NotFound, ServiceError };

src/views/system/login/components/CodeLogin/index.vue

@@ -18,7 +18,7 @@
         <image-verify v-model:code="imgCode" />
       </div>
     </n-form-item>
-    <n-space :vertical="true" size="large">
+    <n-space :vertical="true" :size="18">
       <n-button
         type="primary"
         size="large"

src/views/system/login/components/Register/index.vue

@@ -18,7 +18,7 @@
     <n-form-item path="confirmPwd">
       <n-input v-model:value="model.confirmPwd" placeholder="确认密码" />
     </n-form-item>
-    <n-space :vertical="true" size="large">
+    <n-space :vertical="true" :size="18">
       <login-agreement v-model:value="agreement" />
       <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
       <n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>