From f0117caa65078e815cca97d9dcd2d70510a293bf Mon Sep 17 00:00:00 2001 From: huangxiaomin <1219549841@qq.com> Date: Mon, 13 Nov 2023 10:46:43 +0800 Subject: [PATCH] feat: add exception demo --- packages/locale/src/lang/en/routes.ts | 6 ++ packages/locale/src/lang/zh-CN/routes.ts | 6 ++ packages/router/src/helper/route.ts | 4 +- packages/router/src/page/exception/index.vue | 6 +- packages/router/src/page/index.ts | 2 +- packages/router/src/routes/basic.ts | 28 ++++--- .../router/src/routes/modules/demo/pages.ts | 82 +++++++++++++++++-- pnpm-lock.yaml | 3 - 8 files changed, 112 insertions(+), 25 deletions(-) diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts index 5affcb2c..9b5e5248 100644 --- a/packages/locale/src/lang/en/routes.ts +++ b/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', + }, }, } diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts index 4964c84e..ce4cd4f7 100644 --- a/packages/locale/src/lang/zh-CN/routes.ts +++ b/packages/locale/src/lang/zh-CN/routes.ts @@ -59,5 +59,11 @@ export default { ripple: '水波纹', clickOutSide: 'ClickOutSide组件', }, + page: { + page: '页面', + exception: '异常页', + netWorkError: '网络错误', + notData: '无数据', + }, }, } diff --git a/packages/router/src/helper/route.ts b/packages/router/src/helper/route.ts index bd07d51c..f8ad6b70 100644 --- a/packages/router/src/helper/route.ts +++ b/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) }) diff --git a/packages/router/src/page/exception/index.vue b/packages/router/src/page/exception/index.vue index 8085eb6c..a20d771f 100644 --- a/packages/router/src/page/exception/index.vue +++ b/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} ), - icon: () => (icon ? : null), + icon: icon ? () => : null, }} ) @@ -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; diff --git a/packages/router/src/page/index.ts b/packages/router/src/page/index.ts index 28f9ea58..cee4cb1c 100644 --- a/packages/router/src/page/index.ts +++ b/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' diff --git a/packages/router/src/routes/basic.ts b/packages/router/src/routes/basic.ts index fe301491..42c7dc33 100644 --- a/packages/router/src/routes/basic.ts +++ b/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, diff --git a/packages/router/src/routes/modules/demo/pages.ts b/packages/router/src/routes/modules/demo/pages.ts index d185d16c..a01073b2 100644 --- a/packages/router/src/routes/modules/demo/pages.ts +++ b/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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ef87368..80793f6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -698,9 +698,6 @@ importers: packages/vbenComponents: dependencies: - '@ant-design/colors': - specifier: ^7.0.0 - version: 7.0.0 '@iconify/iconify': specifier: ^3.0.0 version: 3.1.1