feat: add exception demo (#270)

packages/locale/src/lang/en/routes.ts

@@ -58,5 +58,11 @@ export default {
       ripple: 'Ripple',
       clickOutSide: 'ClickOutSide',
     },
+    page: {
+      page: 'Page',
+      exception: 'Exception',
+      netWorkError: 'Network Error',
+      notData: 'No data',
+    },
   },
 }

packages/locale/src/lang/zh-CN/routes.ts

@@ -59,5 +59,11 @@ export default {
       ripple: '水波纹',
       clickOutSide: 'ClickOutSide组件',
     },
+    page: {
+      page: '页面',
+      exception: '异常页',
+      netWorkError: '网络错误',
+      notData: '无数据',
+    },
   },
 }

packages/router/src/helper/route.ts

@@ -2,7 +2,7 @@ import type { RouteMeta, Router, RouteRecordNormalized } from 'vue-router'
 import { Exception, FrameBlank } from '../page'
 import { omit, cloneDeep, filterTree } from '@vben/utils'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { LAYOUT, PARENT_LAYOUT } from '../routes'
+import { LAYOUT, getParentLayout } from '../routes'
 
 export type LayoutMapKey = 'LAYOUT'
 
@@ -39,7 +39,7 @@ function asyncImportRoute(routes: RouteRecordItem[] | undefined) {
         item.component = dynamicImport(dynamicViewsModules, component as string)
       }
     } else if (name) {
-      item.component = PARENT_LAYOUT()
+      item.component = getParentLayout()
     }
     children && asyncImportRoute(children)
   })

packages/router/src/page/exception/index.vue

@@ -11,7 +11,7 @@ import netWorkSvg from '@/assets/svg/net-error.svg'
 /**
  * Exception related enumeration
  */
-enum ExceptionEnum {
+export enum ExceptionEnum {
   // page not access
   PAGE_NOT_ACCESS = 403,
 
@@ -143,7 +143,7 @@ export default defineComponent({
                   {() => btnText}
                 </VbenButton>
               ),
-            icon: () => (icon ? <img src={icon} /> : null),
+            icon: icon ? () => <img src={icon} /> : null,
           }}
         </VbenResult>
       )
@@ -157,7 +157,7 @@ export default defineComponent({
   align-items: center;
   flex-direction: column;
 
-  .ant-result-icon {
+  .n-result-icon {
     img {
       max-width: 400px;
       max-height: 300px;

packages/router/src/page/index.ts

@@ -1,3 +1,3 @@
-export { default as Exception } from './exception/index.vue'
+export { default as Exception, ExceptionEnum } from './exception/index.vue'
 export { default as FrameBlank } from './iframe/FrameBlank.vue'
 export { default as Redirect } from './redirect/index.vue'

packages/router/src/routes/basic.ts

@@ -8,33 +8,42 @@ import { t } from '@vben/locale'
 
 const LAYOUT = () => import('@/layout/index.vue')
 
-const PARENT_LAYOUT = () => () =>
-  new Promise((resolve) => {
-    resolve({ name: 'ParentLayout' })
-  })
+/**
+ * @description: parent-layout
+ */
+export const getParentLayout = (_name?: string) => {
+  return () =>
+    new Promise((resolve) => {
+      resolve({
+        name: _name || 'ParentLayout',
+      })
+    })
+}
 
+// 404 on a page
 const PAGE_NOT_FOUND_ROUTE: RouteRecordItem = {
   path: '/:path(.*)*',
   name: PAGE_NOT_FOUND_NAME,
   component: LAYOUT,
   meta: {
     title: 'ErrorPage',
-    key: 333,
+    hideBreadcrumb: true,
+    hideMenu: true,
   },
   children: [
     {
       path: '/:path(.*)*',
       name: PAGE_NOT_FOUND_NAME,
-      component: () => Exception,
+      component: Exception,
       meta: {
         title: 'ErrorPage',
-        key: 3333,
+        hideBreadcrumb: true,
+        hideMenu: true,
       },
     },
   ],
 }
 
-// 404 on a page
 const REDIRECT_ROUTE: RouteRecordItem = {
   path: '/redirect',
   component: LAYOUT,
@@ -46,7 +55,7 @@ const REDIRECT_ROUTE: RouteRecordItem = {
   },
   children: [
     {
-      path: '/redirect/:path(.*)',
+      path: '/redirect/:path(.*)/:_redirect_type(.*)/:_origin_params(.*)?',
       name: REDIRECT_NAME,
       component: Redirect,
       meta: {
@@ -86,7 +95,6 @@ const LOCK_SCREEN_ROUTE: RouteRecordItem = {
 
 export {
   LAYOUT,
-  PARENT_LAYOUT,
   PAGE_NOT_FOUND_ROUTE,
   REDIRECT_ROUTE,
   ROOT_ROUTE,

packages/router/src/routes/modules/demo/pages.ts

@@ -1,17 +1,87 @@
-import { LAYOUT } from '../../basic'
+import { LAYOUT, getParentLayout } from '../../basic'
+import { Exception, ExceptionEnum } from '../../../page'
 
 const pages: RouteRecordItem = {
   path: '/pages',
   name: 'Pages',
   component: LAYOUT,
-  redirect: '/pages/index',
+  redirect: '/pages/exception/403',
   meta: {
     orderNo: 5,
-    title: '页面',
+    title: 'routes.demo.page.page',
     icon: 'iconoir:multiple-pages-empty',
-    root: true
+    root: true,
   },
-  children: []
+  children: [
+    // =============================exception start=============================
+    {
+      path: 'exception',
+      name: 'ExceptionPage',
+      component: getParentLayout('ExceptionPage'),
+      redirect: '/pages/exception/403',
+      meta: {
+        title: 'routes.demo.page.exception',
+      },
+      children: [
+        {
+          path: '403',
+          name: 'PageNotAccess403',
+          component: Exception,
+          props: {
+            status: ExceptionEnum.PAGE_NOT_ACCESS,
+          },
+          meta: {
+            title: '403',
+          },
+        },
+        {
+          path: '404',
+          name: 'PageNotFound404',
+          component: Exception,
+          props: {
+            status: ExceptionEnum.PAGE_NOT_FOUND,
+          },
+          meta: {
+            title: '404',
+          },
+        },
+        {
+          path: '500',
+          name: 'ServiceError500',
+          component: Exception,
+          props: {
+            status: ExceptionEnum.ERROR,
+          },
+          meta: {
+            title: '500',
+          },
+        },
+        {
+          path: 'net-work-error',
+          name: 'NetWorkError',
+          component: Exception,
+          props: {
+            status: ExceptionEnum.NET_WORK_ERROR,
+          },
+          meta: {
+            title: 'routes.demo.page.netWorkError',
+          },
+        },
+        {
+          path: 'not-data',
+          name: 'NotData',
+          component: Exception,
+          props: {
+            status: ExceptionEnum.PAGE_NOT_DATA,
+          },
+          meta: {
+            title: 'routes.demo.page.notData',
+          },
+        },
+      ],
+    },
+    // =============================exception end=============================
+  ],
 }
 
-export default pages;
+export default pages