feat: 403 404 页面文案可配置 (#253)

WeBankFinTech · Oct 12, 2024 · 314dc21 · 314dc21
1 parent cfa522a
commit 314dc21
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 30 deletions.
diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
@@ -130,7 +130,14 @@ export default {
         }, {
             name: 'simpleList'
         }],
-
+        // 403 页面配置
+        403: {
+            title: '没有访问权限，请联系管理人员',
+        },
+        // 404 页面配置
+        404: {
+            title: '哎呀！这个页面找不到了',
+        }
     },
 };
 ```

diff --git a/packages/fes-plugin-layout/src/runtime/views/403.vue b/packages/fes-plugin-layout/src/runtime/views/403.vue
@@ -1,8 +1,10 @@
 <template>
-    <Wrapper :iconSrc="img403" title="没有访问权限，请联系管理人员" subTitle="" />
+    <Wrapper :icon-src="img403" :title="title" sub-title="" />
 </template>
+
 <script>
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
+import getConfig from '../helpers/getConfig';
 import img403 from '../assets/403.png';
 import Wrapper from './components/Wrapper.vue';
 
@@ -11,8 +13,13 @@ export default defineComponent({
         Wrapper,
     },
     setup() {
+        const config = getConfig();
+        const title = computed(() => {
+            return config['403']?.title || '没有访问权限，请联系管理人员';
+        });
         return {
             img403,
+            title,
         };
     },
 });

diff --git a/packages/fes-plugin-layout/src/runtime/views/404.vue b/packages/fes-plugin-layout/src/runtime/views/404.vue
@@ -1,18 +1,26 @@
 <template>
-    <Wrapper :iconSrc="img404" title="哎呀！这个页面找不到了" subTitle="" />
+    <Wrapper :icon-src="img404" :title="title" sub-title="" />
 </template>
+
 <script>
 import { defineComponent } from 'vue';
 import img404 from '../assets/404.png';
+import getConfig from '../helpers/getConfig';
 import Wrapper from './components/Wrapper.vue';
 
 export default defineComponent({
     components: {
         Wrapper,
     },
     setup() {
+        const config = getConfig();
+        const title = computed(() => {
+            return config['404']?.title || '哎呀！这个页面找不到了';
+        });
+
         return {
             img404,
+            title,
         };
     },
 });

diff --git a/packages/fes-runtime/types.d.ts b/packages/fes-runtime/types.d.ts
@@ -1,4 +1,4 @@
-export { Plugin } from './es/index' 
+export { Plugin } from './es/index';
 
 export {
     useRoute,
@@ -15,7 +15,7 @@ export {
 } from 'vue-router';
 
 export interface ApplyPluginsType {
-    compose: 'compose',
-    event: 'event',
-    modify: 'modify'
+    compose: 'compose';
+    event: 'event';
+    modify: 'modify';
 };
diff --git a/packages/fes-template/src/app.jsx b/packages/fes-template/src/app.jsx
@@ -9,7 +9,7 @@ export const beforeRender = {
         const { setRole, getRole } = accessApi;
         return new Promise((resolve) => {
             setTimeout(() => {
-                setRole('admin');
+                setRole('menuTest');
                 resolve({
                     userName: '李雷',
                 });
@@ -20,24 +20,29 @@ export const beforeRender = {
     },
 };
 
-export const layout = (layoutConfig, { initialState }) => ({
-    ...layoutConfig,
-    renderCustom: (props) => {
-        console.log(props);
-        return <UserCenter />;
-    },
-    menus: () => {
-        const menusRef = ref(layoutConfig.menus);
-        watch(
-            () => initialState.userName,
-            () => {
-                menusRef.value = [
-                    {
-                        name: 'store',
-                    },
-                ];
-            },
-        );
-        return menusRef;
-    },
-});
+export function layout(layoutConfig, { initialState }) {
+    return {
+        ...layoutConfig,
+        403: {
+            title: 'hello word',
+        },
+        renderCustom: (props) => {
+            console.log(props);
+            return <UserCenter />;
+        },
+        menus: () => {
+            const menusRef = ref(layoutConfig.menus);
+            watch(
+                () => initialState.userName,
+                () => {
+                    menusRef.value = [
+                        {
+                            name: 'store',
+                        },
+                    ];
+                },
+            );
+            return menusRef;
+        },
+    };
+}