chore：优化了路由写法，修改了错误页面的展示，新增未发布提示页面

src/enums/pageEnum.ts

@@ -20,10 +20,15 @@ export enum PageEnum {
   //重定向
   REDIRECT = '/redirect',
   REDIRECT_NAME = 'Redirect',
+
+  // 未发布
+  REDIRECT_UN_PUBLISH = '/redirect/unPublish',
+  REDIRECT_UN_PUBLISH_NAME = 'redirect-un-publish',
+
+  // 重载
   RELOAD = '/reload',
   RELOAD_NAME = 'Reload',
 
-
   // 首页
   BASE_HOME = '/project',
   BASE_HOME_NAME = 'Project',

src/router/base.ts

@@ -1,13 +1,13 @@
 import { RouteRecordRaw } from 'vue-router'
 import type { AppRouteRecordRaw } from '@/router/types';
-import { ErrorPage404, ErrorPage403, ErrorPage500, Layout } from '@/router/constant';
+import { ErrorPage404, ErrorPage403, ErrorPage500, Layout, RedirectHome, RedirectUnPublish } from '@/router/constant';
 import { PageEnum } from '@/enums/pageEnum'
 import { GoReload } from '@/components/GoReload'
 
 
 export const LoginRoute: RouteRecordRaw = {
-  path: '/login',
+  path: PageEnum.BASE_LOGIN,
-  name: 'Login',
+  name: PageEnum.BASE_LOGIN_NAME,
   component: () => import('@/views/login/index.vue'),
   meta: {
     title: '登录',
@@ -60,22 +60,21 @@ export const ReloadRoute: AppRouteRecordRaw = {
   },
 }
 
-export const RedirectRoute: AppRouteRecordRaw = {
+export const RedirectRoute: RouteRecordRaw[] = [
-  path: PageEnum.REDIRECT,
+  {
-  name: PageEnum.REDIRECT_NAME,
+    path: PageEnum.REDIRECT,
-  component: Layout,
+    name: PageEnum.REDIRECT_NAME,
-  meta: {
+    component: RedirectHome,
-    title: PageEnum.REDIRECT_NAME,
+    meta: {
-  },
+      title: PageEnum.REDIRECT_NAME,
-  children: [
-    {
-      path: '/redirect/:path(.*)',
-      name: PageEnum.REDIRECT_NAME,
-      component: () => import('@/views/redirect/index.vue'),
-      meta: {
-        title: PageEnum.REDIRECT_NAME,
-        hideBreadcrumb: true,
-      },
     },
-  ],
+  },
-};
+  {
+    path: PageEnum.REDIRECT_UN_PUBLISH,
+    name: PageEnum.REDIRECT_UN_PUBLISH_NAME,
+    component: RedirectUnPublish,
+    meta: {
+      title: PageEnum.REDIRECT_UN_PUBLISH_NAME,
+    },
+  },
+]

src/router/constant.ts

@@ -4,6 +4,10 @@ export const ErrorPage403 = () => import('@/views/exception/403.vue');
 
 export const ErrorPage500 = () => import('@/views/exception/500.vue');
 
+export const RedirectHome = () => import('@/views/redirect/index.vue');
+
+export const RedirectUnPublish = () => import('@/views/redirect/UnPublish.vue');
+
 export const Layout = () => import('@/layout/index.vue');
 
 export const ParentLayout = () => import('@/layout/parentLayout.vue');

src/router/index.ts

@@ -1,9 +1,8 @@
 import type { App } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import { RedirectRoute } from '@/router/base'
 import { createRouterGuards } from './router-guards'
 import { PageEnum } from '@/enums/pageEnum'
-import { HttpErrorPage, LoginRoute, ReloadRoute } from '@/router/base'
+import { HttpErrorPage, LoginRoute, ReloadRoute, RedirectRoute } from '@/router/base'
 import { Layout } from '@/router/constant'
 
 import modules from '@/router/modules'
@@ -19,6 +18,7 @@ const RootRoute: Array<RouteRecordRaw> = [
     },
     children: [
       ...HttpErrorPage,
+      ...RedirectRoute,
       modules.projectRoutes,
       modules.chartRoutes,
       modules.previewRoutes
@@ -27,7 +27,7 @@ const RootRoute: Array<RouteRecordRaw> = [
 ]
 
 
-export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute, ReloadRoute];
+export const constantRouter: any[] = [LoginRoute, ...RootRoute, ReloadRoute];
 
 const router = createRouter({
   history: createWebHashHistory(''),

src/utils/router.ts

@@ -185,7 +185,7 @@ export const goHome = () => {
 }
 
 /**
- * * 判断是否登录（现阶段是有 login 数据即可）
+ * * 判断是否登录
  * @return boolean
  */
 export const loginCheck = () => {

src/views/exception/403.vue

@@ -4,7 +4,7 @@
       <img src="~@/assets/images/exception/403.svg" alt="" />
     </div>
     <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
+      <h1>抱歉，你无权访问该页面</h1>
     </div>
     <n-button type="primary" @click="goHome">回到首页</n-button>
   </div>

src/views/exception/404.vue

@@ -4,7 +4,7 @@
       <img src="~@/assets/images/exception/404.svg" alt="" />
     </div>
     <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
+      <h1>抱歉，你访问的页面不存在</h1>
     </div>
     <n-button type="primary" @click="goHome">回到首页</n-button>
   </div>

src/views/exception/500.vue

@@ -4,7 +4,7 @@
       <img src="~@/assets/images/exception/500.svg" alt="" />
     </div>
     <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
+      <h1>抱歉，服务器出错了</h1>
     </div>
     <n-button type="primary" secondary @click="goHome">回到首页</n-button>
   </div>

src/views/redirect/UnPublish.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="go-redirect-un-publish">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/nodata.svg" alt="" />
+    </div>
+    <div class="text-center">
+      <h1>当前项目暂未发布</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@include go(redirect-un-publish) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  padding: 100px 0;
+  @include background-image('background-image');
+  .text-center {
+    h1 {
+      color: #666;
+      padding: 20px 0;
+    }
+  }
+
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/redirect/index.vue

@@ -1,9 +1,11 @@
 <template>
-  <n-empty description="你什么也找不到">
+  <div class="go-redirect">
-    <template #extra>
+    <n-empty description="你什么也找不到">
-      <n-button size="small" @click="goHome">看看别的</n-button>
+      <template #extra>
-    </template>
+        <n-button size="small" @click="goHome">看看别的</n-button>
-  </n-empty>
+      </template>
+    </n-empty>
+  </div>
 </template>
 <script lang="ts" setup>
 import { onBeforeMount } from 'vue'
@@ -14,3 +16,16 @@ const goHome = () => {
   router.replace({ path: '/' })
 }
 </script>
+<style lang="scss" scoped>
+@include go(redirect) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  padding: 100px 0;
+  @include background-image('background-image');
+}
+</style>