chore: abnormal page adjustment

CHANGELOG.zh_CN.md

@@ -10,6 +10,7 @@
 - 删除菜单背景图
 - 更新`ant-design-vue`版本为`beta13`
 - 更新`vite`版本为`rc.9`
+- 异常页调整
 
 ### 🐛 Bug Fixes
 

build/config/lessModifyVars.ts

@@ -17,8 +17,8 @@ const modifyVars = {
   'background-color-base': '#F0F2F5', // background color
   'font-size-base': '14px', //  Main font size
   'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
-  'border-color-base': '#cececd', //  Border color,
-  'border-color-split': '#cececd', //  Border color,
+  'border-color-base': '#F0F0F0', //  Border color,
+  'border-color-split': '#F0F0F0', //  Border color,
   'border-radius-base': '2px', //  Component/float fillet
 };
 //}

src/components/Form/src/FormItem.tsx

@@ -193,18 +193,6 @@ export default defineComponent({
       const bindValue = {
         [isCheck ? 'checked' : 'value']: (props.formModel as any)[field],
       };
-      // TODO先兼容antd的警告，后面官方修复后删除
-      if (component === 'Select') {
-        if (Reflect.has(propsData, 'options')) {
-          propsData.options = propsData.options.map((item: any) => {
-            return {
-              key: item.value,
-              ...item,
-            };
-          });
-        }
-      }
-
       if (!renderComponentContent) {
         return <Comp {...propsData} {...on} {...bindValue} />;
       }

src/enums/exceptionEnum.ts

@@ -2,6 +2,9 @@
  * @description: Exception related enumeration
  */
 export enum ExceptionEnum {
+  // page not access
+  PAGE_NOT_ACCESS = 403,
+
   // page not found
   PAGE_NOT_FOUND = 404,
 
@@ -11,17 +14,8 @@ export enum ExceptionEnum {
   // net work error
   NET_WORK_ERROR = 10000,
 
-  // net work timeout
-  NET_WORK_TIMEOUT = 10100,
-
-  // not data
-  NOT_DATA = 10200,
-
-  // The page loads too long and timeout
-  PAGE_TIMEOUT = 10300,
-
   // No data on the page. In fact, it is not an exception page
-  PAGE_NOT_DATA = 10400,
+  PAGE_NOT_DATA = 10100,
 }
 
 export enum ErrorTypeEnum {

src/layouts/Logo.vue

@@ -83,7 +83,7 @@
 
     .logo-title {
       font-size: 18px;
-      font-weight: 400;
+      font-weight: 700;
       opacity: 0;
       transition: all 0.5s;
       .respond-to(medium,{

src/router/menus/modules/demo/exception.ts

@@ -5,6 +5,10 @@ const menu: MenuModule = {
     name: '异常页',
     path: '/exception',
     children: [
+      {
+        path: '403',
+        name: '403',
+      },
       {
         path: '404',
         name: '404',

src/router/routes/modules/demo/exception.ts

@@ -18,6 +18,18 @@ export default {
   },
 
   routes: [
+    {
+      path: '/403',
+      name: 'PageNotAccess',
+      component: ExceptionPage,
+      props: {
+        status: ExceptionEnum.PAGE_NOT_ACCESS,
+      },
+      meta: {
+        title: '403',
+        afterCloseLoading: true,
+      },
+    },
     {
       path: '/404',
       name: 'PageNotFound',
@@ -54,18 +66,6 @@ export default {
         afterCloseLoading: true,
       },
     },
-    {
-      path: '/page-time-out',
-      name: 'PageTimeOut',
-      component: ExceptionPage,
-      props: {
-        status: ExceptionEnum.PAGE_TIMEOUT,
-      },
-      meta: {
-        title: '页面超时',
-        afterCloseLoading: true,
-      },
-    },
     {
       path: '/not-data',
       name: 'NotData',

src/settings/projectSetting.ts

@@ -4,7 +4,7 @@ import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum } from '/@/enums/menuEnum';
 import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { primaryColor } from '../../build/config/lessModifyVars';
 import { isProdMode } from '/@/utils/env';
-// ! 改动后需要清空浏览器缓存
+// ! You need to clear the browser cache after the change
 const setting: ProjectConfig = {
   // Whether to show the configuration button
   showSettingButton: true,

src/views/sys/exception/Exception.tsx

@@ -6,8 +6,6 @@ import { defineComponent, ref, computed, unref } from 'vue';
 import { ExceptionEnum } from '/@/enums/exceptionEnum';
 
 import netWorkImg from '/@/assets/images/exception/net-work.png';
-import error404 from '/@/assets/images/exception/404.png';
-import error500 from '/@/assets/images/exception/500.png';
 import notDataImg from '/@/assets/images/no-data.png';
 
 import { useRoute } from 'vue-router';
@@ -22,6 +20,7 @@ interface MapValue {
   btnText?: string;
   icon?: string;
   handler?: Fn;
+  status?: string;
 }
 
 export default defineComponent({
@@ -63,50 +62,52 @@ export default defineComponent({
       }
     );
 
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
+      title: '403',
+      status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
+      subTitle: `Sorry, you don't have access to this page.!`,
+      btnText: props.full ? 'Back Login' : 'Back Home',
+      handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
+    });
+
     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
       title: '404',
-      subTitle: '抱歉，您访问的页面不存在!',
-      btnText: props.full ? '返回登录' : '返回首页',
+      status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
+      subTitle: `Sorry, the page you visited does not exist.`,
+      btnText: props.full ? 'Back Login' : 'Back Home',
       handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
-      icon: error404,
     });
 
     unref(statusMapRef).set(ExceptionEnum.ERROR, {
       title: '500',
-      subTitle: '抱歉，服务器出现异常!',
-      btnText: '返回首页',
+      status: `${ExceptionEnum.ERROR}`,
+      subTitle: `Sorry, the server is reporting an error.`,
+      btnText: 'Back Home',
       handler: () => go(),
-      icon: error500,
     });
 
     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
-      title: '当前页面无数据',
+      title: 'No data on the current page',
       subTitle: '',
-      btnText: '刷新',
+      btnText: 'Refresh',
       handler: () => redo(),
       icon: notDataImg,
     });
 
     unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
-      title: '网络错误',
-      subTitle: '抱歉，您的网络连接已断开,请检查您的网络!',
-      btnText: '刷新',
+      title: 'Network Error',
+      subTitle: 'Sorry，Your network connection has been disconnected, please check your network!',
+      btnText: 'Refresh',
       handler: () => redo(),
       icon: netWorkImg,
     });
 
-    unref(statusMapRef).set(ExceptionEnum.PAGE_TIMEOUT, {
-      title: '页面加载失败',
-      subTitle: '抱歉，您的页面加载出错或者过久未响应,请检查您的网络!',
-      btnText: '刷新',
-      handler: () => redo(),
-      icon: netWorkImg,
-    });
     return () => {
-      const { title, subTitle, btnText, icon, handler } = unref(getMapValue) || {};
+      const { title, subTitle, btnText, icon, handler, status } = unref(getMapValue) || {};
       return (
         <Result
           class="exception "
+          status={status as any}
           title={props.title || title}
           sub-title={props.subTitle || subTitle}
         >
@@ -117,7 +118,7 @@ export default defineComponent({
                   {() => btnText}
                 </Button>
               ),
-            icon: () => icon && <img src={icon} />,
+            icon: () => (icon ? <img src={icon} /> : null),
           }}
         </Result>
       );

src/views/sys/exception/LoadTimeOut.vue

-<template>
-  <Exception :status="ExceptionEnum.PAGE_TIMEOUT" />
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Exception } from '/@/views/sys/exception';
-
-  import { ExceptionEnum } from '/@/enums/exceptionEnum';
-
-  export default defineComponent({
-    name: 'LoadTimeout',
-    components: { Exception },
-    setup() {
-      return { ExceptionEnum };
-    },
-  });
-</script>

src/views/sys/exception/index.ts

 export { default as Exception } from './Exception';
-export { default as LoadTimeOut } from './LoadTimeOut.vue';