新增示例demo

src/enums/pageEnum.ts

@@ -1,10 +1,10 @@
 export enum PageEnum {
-  // basic login path
+  // 登录
   BASE_LOGIN = '/login',
-  // basic home path
+  //重定向
+  REDIRECT = '/Redirect',
+  // 首页
   BASE_HOME = '/dashboard',
-  // error page path
+  // 错误
   ERROR_PAGE = '/exception',
-  // error log page path
-  ERROR_LOG_PAGE = '/error-log/list',
 }

src/layout/components/TagsView/index.vue

@@ -22,7 +22,10 @@
           <div ref="navRef" class="tabs-card-nav" :style="getNavStyle">
             <Draggable :list="tabsList" animation="300" item-key="fullPath">
               <template #item="{element}">
-                <div class="tabs-card-scroll-item" @click.stop="goPage(element)" @contextmenu="handleContextMenu">
+                <div class="tabs-card-scroll-item"
+                     :class="{'active-item':activeKey === element.path }"
+                     @click.stop="goPage(element)"
+                     @contextmenu="handleContextMenu">
                   <span>{{ element.meta.title }}</span>
                   <n-icon size="14" @click.stop="closeTabItem(element)">
                     <CloseOutlined/>
@@ -59,6 +62,7 @@ import { RouteItem } from '@/store/modules/tabsView'
 import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
 import { useMessage } from 'naive-ui'
 import Draggable from 'vuedraggable/src/vuedraggable'
+import { PageEnum } from '@/enums/pageEnum'
 import {
   DownOutlined,
   ReloadOutlined,
@@ -199,8 +203,7 @@ export default defineComponent({
 
     // 标签页列表
     const tabsList: any = computed(() => tabsViewStore.tabsList)
-
-    const whiteList = ['Redirect', 'login']
+    const whiteList = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN]
 
     watch(
       () => route.fullPath,
@@ -516,6 +519,9 @@ export default defineComponent({
             }
           }
         }
+        .active-item{
+          color: #2d8cf0
+        }
       }
     }
 

src/router/constant.ts

@@ -1,24 +1,6 @@
-import { MainView } from '@/layout/components/Main'
-
 export const RedirectName = 'Redirect';
 
-export const ParentLayout = 'ParentLayout';
-
 export const ErrorPage = () => import('@/views/exception/404.vue');
 
-/**
- * @description: default layout
- */
 export const Layout = () => import('@/layout/index.vue');
 
-/**
- * @description: parent-layout
- */
-export const getParentLayout = (_name?: string) => {
-  return () =>
-    new Promise((resolve) => {
-      resolve({
-        name: PARENT_LAYOUT_NAME,
-      });
-    });
-};

src/router/modules/exception.ts

@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { ExclamationCircleOutlined } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/exception',
+        name: 'Exception',
+        redirect: '/exception/403',
+        component: Layout,
+        meta: {
+            title: '异常页面',
+            icon: renderIcon(ExclamationCircleOutlined),
+            sort: 3
+        },
+        children: [
+            {
+                path: '403',
+                name: 'exception-403',
+                meta: {
+                    title: '403',
+                },
+                component: () => import('@/views/exception/403.vue')
+            },
+            {
+                path: '404',
+                name: 'exception-404',
+                meta: {
+                    title: '404',
+                },
+                component: () => import('@/views/exception/404.vue')
+            },
+            {
+                path: '500',
+                name: 'exception-500',
+                meta: {
+                    title: '500',
+                },
+                component: () => import('@/views/exception/500.vue')
+            },
+        ],
+    }
+]
+
+export default routes

src/router/modules/result.ts

@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { CheckCircleOutlined  } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/result',
+        name: 'Result',
+        redirect: '/result/success',
+        component: Layout,
+        meta: {
+            title: '结果页面',
+            icon: renderIcon(CheckCircleOutlined),
+            sort: 4
+        },
+        children: [
+            {
+                path: 'success',
+                name: 'result-success',
+                meta: {
+                    title: '成功页',
+                },
+                component: () => import('@/views/result/success.vue')
+            },
+            {
+                path: 'fail',
+                name: 'result-fail',
+                meta: {
+                    title: '失败页',
+                },
+                component: () => import('@/views/result/fail.vue')
+            },
+            {
+                path: 'info',
+                name: 'result-info',
+                meta: {
+                    title: '信息页',
+                },
+                component: () => import('@/views/result/info.vue')
+            },
+        ],
+    }
+]
+
+export default routes

src/styles/common.less

@@ -94,6 +94,10 @@ body .n-card {
   transition: all .2s ease-in-out;
 }
 
+body .n-icon{
+  vertical-align:middle;
+}
+
 body .proCard {
   border-radius: 4px;
 

src/views/exception/403.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/403.svg" alt=""/>
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    return {
+      goHome(){
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.page-container {
+  width: 100%;
+  background-color: white;
+  border-radius: 4px;
+  padding: 50px 0;
+  .text-center{
+    h1{ color: #666;padding: 20px 0}
+  }
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/exception/404.vue

@@ -1,31 +1,40 @@
 <template>
-  <div class="flex flex-col align-center justify-center page-container">
+  <div class="flex flex-col justify-center page-container">
     <div class="text-center">
-      <h1 class="text-base text-gray-500">哎哟喂，您好像走丢了...</h1>
-      <router-link to="/" class="n-btn n-btn-primary">回到首页</router-link>
+      <img src="~@/assets/images/exception/404.svg" alt=""/>
     </div>
     <div class="text-center">
-      <img src="~@/assets/images/Error.svg" alt=""/>
+      <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { routes } from '@/router'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
-  name: '404'
+  setup() {
+    const router = useRouter()
+    return {
+      goHome(){
+        router.push('/')
+      }
+    }
+  }
 })
 </script>
 
 <style lang="less" scoped>
 .page-container {
   width: 100%;
-  height: 100vh;
   background-color: white;
   border-radius: 4px;
-
+  padding: 50px 0;
+  .text-center{
+    h1{ color: #666;padding: 20px 0}
+  }
   img {
     width: 350px;
     margin: 0 auto;

src/views/exception/500.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/500.svg" alt=""/>
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    return {
+      goHome(){
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.page-container {
+  width: 100%;
+  background-color: white;
+  border-radius: 4px;
+  padding: 50px 0;
+  .text-center{
+    h1{ color: #666;padding: 20px 0}
+  }
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/result/fail.vue

@@ -0,0 +1,69 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="error" title="操作失败" description="请核对并修改以下信息后，再重新提交。">
+        <div class="result-box-extra">
+          <p>您提交的内容有如下错误：</p>
+          <p class="mt-3">
+            <n-space align="center">
+              <n-icon size="20" color="#f0a020">
+                <InfoCircleOutlined  />
+              </n-icon>
+              <span>认证照片不够清晰</span>
+              <n-button type="info" text>立即修改</n-button>
+            </n-space>
+          </p>
+          <p class="mt-3">
+            <n-space>
+              <n-icon size="20" color="#f0a020">
+                <InfoCircleOutlined  />
+              </n-icon>
+              <span>备注包含敏感字符，并且不能包含政治相关</span>
+              <n-button type="info" text>立即修改</n-button>
+            </n-space>
+          </p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>打印</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+import { InfoCircleOutlined } from '@vicons/antd'
+
+export default defineComponent({
+  components:{ InfoCircleOutlined },
+  setup() {
+    const router = useRouter()
+    return {
+      goHome() {
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+}
+</style>

src/views/result/info.vue

@@ -0,0 +1,69 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="info" title="提示" description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回">
+        <div class="result-box-extra">
+          <p>您提交的内容如下：</p>
+          <p class="mt-3">
+            <n-space align="center">
+              <n-icon size="20" color="#18a058">
+                <CheckCircleOutlined />
+              </n-icon>
+              <span>转入支付宝账户（189****5426）：￥1980元</span>
+              <n-button type="info" text>立即撤回</n-button>
+            </n-space>
+          </p>
+          <p class="mt-3">
+            <n-space>
+              <n-icon size="20" color="#18a058">
+                <CheckCircleOutlined  />
+              </n-icon>
+              <span>转入支付宝账户（187****5426）：￥2980元</span>
+              <n-button type="info" text>立即撤回</n-button>
+            </n-space>
+          </p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>全部撤回</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+import { CheckCircleOutlined } from '@vicons/antd'
+
+export default defineComponent({
+  components:{ CheckCircleOutlined },
+  setup() {
+    const router = useRouter()
+    return {
+      goHome() {
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+}
+</style>

src/views/result/success.vue

@@ -0,0 +1,49 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="success" title="操作成功" description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。">
+        <div class="result-box-extra">
+          <p>已提交申请，等待财务部门审核。</p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>打印</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    return {
+      goHome() {
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+}
+</style>