feat(components): 增加错误页组件，美化原有错误页

Author: chansee97

src/assets/svg/error-403.svg

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex-col-center h-800px">
+    <img v-if="type === '403'" src="@/assets/svg/error-403.svg" alt="" class="w-1/3" />
+    <img v-if="type === '404'" src="@/assets/svg/error-404.svg" alt="" class="w-1/3" />
+    <img v-if="type === '500'" src="@/assets/svg/error-500.svg" alt="" class="w-1/3" />
+    <n-button type="primary" @click="toRoot">回到首页</n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppRouter } from '@/hook';
+
+type TipType = '403' | '404' | '500';
+defineProps<{
+  /** 异常类型 403 404 500 */
+  type: TipType;
+}>();
+const { toRoot } = useAppRouter();
+</script>
+
+<style lang="scss" scoped></style>

src/assets/svg/error-404.svg

@@ -8,8 +8,8 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store';
 import { useAppRouter } from '@/hook';
-const appStore = useAppStore();
 const { toRoot } = useAppRouter();
+const appStore = useAppStore();
 </script>
 
 <style scoped></style>

src/assets/svg/error-500.svg

@@ -14,7 +14,7 @@ export const constantRoutes = [
     name: 'no-permission',
     component: () => import('@/views/error/not-permission/index.vue'),
     meta: {
-      title: '无权限',
+      title: '用户无权限',
       icon: 'icon-park-outline:error',
     },
   },

src/components/common/ErrorTip.vue

@@ -53,7 +53,7 @@ export const useAppStore = defineStore('app-store', {
      * @param {number} delay - 延迟毫秒数
      * @return {*}
      */
-    async reloadPage(delay = 100) {
+    async reloadPage(delay = 600) {
       this.loadFlag = false;
       await nextTick();
       if (delay) {

src/layouts/components/sider/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>404</div>
+  <ErrorTip type="404" />
 </template>
 
 <script setup lang="ts"></script>

src/router/routes/index.ts

@@ -1,5 +1,5 @@
 <template>
-  <div>403</div>
+  <ErrorTip type="403" />
 </template>
 
 <script setup lang="ts"></script>

src/store/modules/app.ts

@@ -1,5 +1,5 @@
 <template>
-  <div>500</div>
+  <ErrorTip type="500" />
 </template>
 
 <script setup lang="ts"></script>