feat: 添加了暂无权限页面和敬请期待页面

src/components/Nav.vue

@@ -71,7 +71,8 @@
 
   const handleNavClick = (item: { name: string; path: string }) => {
     if (!item.path) {
-      ElMessage.warning({ message: `${item.name}功能建设中，暂无法访问`, offset: 100, grouping: true });
+      router.replace({ name: 'StayTune' });
+      // ElMessage.warning({ message: `${item.name}功能建设中，暂无法访问`, offset: 100, grouping: true });
       return;
     }
     activeNav.value = item.name;

src/router/constant.ts

@@ -1,6 +1,7 @@
 export const RedirectName = 'Redirect';
 
-export const ErrorPage = () => import('@/views/exception/404.vue');
+export const ErrorPage = () => import('@/views/exception/403.vue');
+export const StayTunedPage = () => import('@/views/exception/stay-tune.vue');
 
 export const Layout = () => import('@/layout/index.vue');
 

src/router/full-routes.ts

@@ -610,6 +610,15 @@ export const exceptionRouters =
           title: '500',
         },
       },
+      {
+        path: 'stay-tune',
+        name: 'StayTune',
+        component: '/exception/stay-tune',
+        meta: {
+          icon: '',
+          title: '敬请期待',
+        },
+      },
     ],
   };
 

src/store/modules/tabsView.ts

@@ -5,7 +5,7 @@ import { storage } from '@/utils/Storage';
 import { TABS_ROUTES } from '@/store/mutation-types';
 
 // 不需要出现在标签页中的路由
-const whiteList = ['Redirect', 'Login'];
+const whiteList = ['Redirect', 'Login', 'StayTune'];
 
 export type RouteItem = Partial<RouteLocationNormalized> & {
   fullPath: string;
@@ -40,9 +40,7 @@ function filterNewTabs(sliceTabs: any[], tabsList: any[], activeKey = '') {
       pathList.push(item.fullPath);
     }
   }
-  return tabsList.filter(
-    (item) => item.fullPath === activeKey || !pathList.includes(item.fullPath),
-  );
+  return tabsList.filter((item) => item.fullPath === activeKey || !pathList.includes(item.fullPath));
 }
 
 export const useTabsViewStore = defineStore({
@@ -112,8 +110,7 @@ export const useTabsViewStore = defineStore({
     // 关闭其他
     closeOtherTabs(route, activeKey) {
       const newTabsList = this.tabsList.filter(
-        (item) =>
-          ([route.value.fullPath, activeKey].includes(item.fullPath) || item?.meta?.affix) ?? false,
+        (item) => ([route.value.fullPath, activeKey].includes(item.fullPath) || item?.meta?.affix) ?? false,
       );
       this.delKeepAliveNames(newTabsList);
       this.tabsList = newTabsList;

src/views/exception/403.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="flex flex-col justify-center page-container">
+  <div class="page-container">
     <div class="text-center">
-      <img src="~@/assets/images/exception/403.svg" alt="" />
+      <img src="~@/assets/images/exception/no-auth.png" alt="" />
     </div>
-    <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
+    <div class="text-center" style="margin-top: -20px; margin-bottom: 30px">
+      <h1>抱歉，您无权访问该页面</h1>
+    </div>
+    <div>
       <el-button type="primary" @click="goHome">回到首页</el-button>
     </div>
   </div>
@@ -23,6 +25,8 @@
     width: 100%;
     border-radius: 4px;
     padding-top: 100px;
+    text-align: center;
+    // flex-direction: column;
 
     .text-center {
       h1 {

src/views/exception/stay-tune.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/stay-tune.png" alt="" />
+    </div>
+    <div class="text-center" style="margin-top: -100px; margin-bottom: 30px">
+      <h1>敬请期待!</h1>
+    </div>
+    <div>
+      <el-button type="primary" @click="goHome">回到首页</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
+</script>
+
+<style lang="scss" scoped>
+  .page-container {
+    width: 100%;
+    border-radius: 4px;
+    padding-top: 100px;
+    text-align: center;
+    // flex-direction: column;
+
+    .text-center {
+      h1 {
+        color: var(--el-color-info);
+        padding: 20px 0;
+      }
+    }
+
+    img {
+      width: 350px;
+      margin: 0 auto;
+    }
+  }
+</style>