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

docs/reference/plugin/plugins/layout.md

@@ -130,7 +130,14 @@ export default {
         }, {
             name: 'simpleList'
         }],
-
+        // 403 页面配置
+        403: {
+            title: '没有访问权限，请联系管理人员',
+        },
+        // 404 页面配置
+        404: {
+            title: '哎呀！这个页面找不到了',
+        }
     },
 };
 ```

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,
         };
     },
 });

packages/fes-plugin-layout/src/runtime/views/404.vue

@@ -1,9 +1,11 @@
 <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({
@@ -11,8 +13,14 @@ export default defineComponent({
         Wrapper,
     },
     setup() {
+        const config = getConfig();
+        const title = computed(() => {
+            return config['404']?.title || '哎呀！这个页面找不到了';
+        });
+
         return {
             img404,
+            title,
         };
     },
 });

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',
+    compose: 'compose';
-    event: 'event',
+    event: 'event';
-    modify: 'modify'
+    modify: 'modify';
 };

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 }) => ({
+export function layout(layoutConfig, { initialState }) {
-    ...layoutConfig,
+    return {
-    renderCustom: (props) => {
+        ...layoutConfig,
-        console.log(props);
+        403: {
-        return <UserCenter />;
+            title: 'hello word',
-    },
+        },
-    menus: () => {
+        renderCustom: (props) => {
-        const menusRef = ref(layoutConfig.menus);
+            console.log(props);
-        watch(
+            return <UserCenter />;
-            () => initialState.userName,
+        },
-            () => {
+        menus: () => {
-                menusRef.value = [
+            const menusRef = ref(layoutConfig.menus);
-                    {
+            watch(
-                        name: 'store',
+                () => initialState.userName,
-                    },
+                () => {
-                ];
+                    menusRef.value = [
-            },
+                        {
-        );
+                            name: 'store',
-        return menusRef;
+                        },
-    },
+                    ];
-});
+                },
+            );
+            return menusRef;
+        },
+    };
+}