From 426cc13d7c485a916bee5a8de0f08aab8826422b Mon Sep 17 00:00:00 2001
From: yqllin <524123601@qq.com>
Date: Thu, 11 Jan 2024 16:28:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugin-layout):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=20403=E3=80=81404=20=20=E7=9A=84=20navigatio?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/runtime/views/BaseLayout.vue          | 184 ++++++++++--------
 .../src/runtime/views/index.jsx               |  11 +-
 packages/fes-plugin-layout/types.d.ts         |  46 +++--
 3 files changed, 132 insertions(+), 109 deletions(-)

diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index 513fc52e..0a7d9e5a 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -1,7 +1,7 @@
 <template>
-    <f-layout class="main-layout">
+    <FLayout class="main-layout">
         <template v-if="currentNavigation === 'side'">
-            <f-aside
+            <FAside
                 v-model:collapsed="collapsedRef"
                 :fixed="isFixedSidebar"
                 :width="`${sideWidth}px`"
@@ -10,41 +10,43 @@
                 :inverted="theme === 'dark'"
             >
                 <div class="layout-logo">
-                    <img v-if="logo" :src="logo" class="logo-img" />
-                    <div v-if="title" class="logo-name">{{ title }}</div>
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
                 </div>
-                <Menu
+                <LayoutMenu
                     class="layout-menu"
                     :menus="menus"
                     :collapsed="collapsedRef"
                     mode="vertical"
                     :inverted="theme === 'dark'"
-                    :expandedKeys="menuProps?.expandedKeys"
-                    :defaultExpandAll="menuProps?.defaultExpandAll"
+                    :expanded-keys="menuProps?.expandedKeys"
+                    :default-expand-all="menuProps?.defaultExpandAll"
                     :accordion="menuProps?.accordion"
                 />
-            </f-aside>
-            <f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
-                <f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
+            </FAside>
+            <FLayout :fixed="isFixedSidebar" :style="sideStyleRef">
+                <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
                     <div class="layout-header-custom">
-                        <slot name="renderCustom" :menus="menus"></slot>
+                        <slot name="renderCustom" :menus="menus" />
                     </div>
                     <template v-if="locale">
-                        <slot name="locale"></slot>
+                        <slot name="locale" />
                     </template>
-                </f-header>
-                <f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                    <f-main class="layout-main">
-                        <MultiTabProvider :multiTabs="multiTabs" />
-                    </f-main>
-                    <f-footer v-if="footer" class="layout-footer">
+                </FHeader>
+                <FLayout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
                         {{ footer }}
-                    </f-footer>
-                </f-layout>
-            </f-layout>
+                    </FFooter>
+                </FLayout>
+            </FLayout>
         </template>
         <template v-else-if="currentNavigation === 'left-right'">
-            <f-aside
+            <FAside
                 v-model:collapsed="collapsedRef"
                 :fixed="isFixedSidebar"
                 :width="`${sideWidth}px`"
@@ -55,121 +57,127 @@
                 <div class="flex-between">
                     <div>
                         <div class="layout-logo">
-                            <img v-if="logo" :src="logo" class="logo-img" />
-                            <div v-if="title" class="logo-name">{{ title }}</div>
+                            <img v-if="logo" :src="logo" class="logo-img">
+                            <div v-if="title" class="logo-name">
+                                {{ title }}
+                            </div>
                         </div>
-                        <Menu
+                        <LayoutMenu
                             class="layout-menu"
                             :menus="menus"
                             :collapsed="collapsedRef"
                             mode="vertical"
                             :inverted="theme === 'dark'"
-                            :expandedKeys="menuProps?.expandedKeys"
-                            :defaultExpandAll="menuProps?.defaultExpandAll"
+                            :expanded-keys="menuProps?.expandedKeys"
+                            :default-expand-all="menuProps?.defaultExpandAll"
                             :accordion="menuProps?.accordion"
                         />
                     </div>
                     <div>
                         <div class="layout-aside-custom">
-                            <slot name="renderCustom" :menus="menus"></slot>
+                            <slot name="renderCustom" :menus="menus" />
                         </div>
                         <div v-if="locale" class="layout-aside-locale">
-                            <slot name="locale"></slot>
+                            <slot name="locale" />
                         </div>
                     </div>
                 </div>
-            </f-aside>
-            <f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
-                <f-layout :embedded="!multiTabs">
-                    <f-main class="layout-main">
-                        <MultiTabProvider :multiTabs="multiTabs" />
-                    </f-main>
-                    <f-footer v-if="footer" class="layout-footer">
+            </FAside>
+            <FLayout :fixed="isFixedSidebar" :style="sideStyleRef">
+                <FLayout :embedded="!multiTabs">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
                         {{ footer }}
-                    </f-footer>
-                </f-layout>
-            </f-layout>
+                    </FFooter>
+                </FLayout>
+            </FLayout>
         </template>
         <template v-else-if="currentNavigation === 'top'">
-            <f-header ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
+            <FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
                 <div class="layout-logo">
-                    <img v-if="logo" :src="logo" class="logo-img" />
-                    <div v-if="title" class="logo-name">{{ title }}</div>
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
                 </div>
-                <Menu
+                <LayoutMenu
                     class="layout-menu"
                     :menus="menus"
                     mode="horizontal"
                     :inverted="theme === 'dark'"
-                    :expandedKeys="menuProps?.expandedKeys"
-                    :defaultExpandAll="menuProps?.defaultExpandAll"
+                    :expanded-keys="menuProps?.expandedKeys"
+                    :default-expand-all="menuProps?.defaultExpandAll"
                     :accordion="menuProps?.accordion"
                 />
                 <div class="layout-header-custom">
-                    <slot name="renderCustom" :menus="menus"></slot>
+                    <slot name="renderCustom" :menus="menus" />
                 </div>
                 <template v-if="locale">
-                    <slot name="locale"></slot>
+                    <slot name="locale" />
                 </template>
-            </f-header>
-            <f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                <f-main class="layout-main">
-                    <MultiTabProvider :multiTabs="multiTabs" />
-                </f-main>
-                <f-footer v-if="footer" class="layout-footer">
+            </FHeader>
+            <FLayout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FMain class="layout-main">
+                    <MultiTabProvider :multi-tabs="multiTabs" />
+                </FMain>
+                <FFooter v-if="footer" class="layout-footer">
                     {{ footer }}
-                </f-footer>
-            </f-layout>
+                </FFooter>
+            </FLayout>
         </template>
         <template v-else-if="currentNavigation === 'mixin'">
-            <f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
+            <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
                 <div class="layout-logo">
-                    <img v-if="logo" :src="logo" class="logo-img" />
-                    <div v-if="title" class="logo-name">{{ title }}</div>
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
                 </div>
                 <div class="layout-header-custom">
-                    <slot name="renderCustom" :menus="menus"></slot>
+                    <slot name="renderCustom" :menus="menus" />
                 </div>
                 <template v-if="locale">
-                    <slot name="locale"></slot>
+                    <slot name="locale" />
                 </template>
-            </f-header>
-            <f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                <f-aside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
-                    <Menu
+            </FHeader>
+            <FLayout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FAside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
+                    <LayoutMenu
                         class="layout-menu"
                         :menus="menus"
                         :collapsed="collapsedRef"
                         mode="vertical"
-                        :expandedKeys="menuProps?.expandedKeys"
-                        :defaultExpandAll="menuProps?.defaultExpandAll"
+                        :expanded-keys="menuProps?.expandedKeys"
+                        :default-expand-all="menuProps?.defaultExpandAll"
                         :accordion="menuProps?.accordion"
                     />
-                </f-aside>
-                <f-layout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
-                    <f-main class="layout-main">
-                        <MultiTabProvider :multiTabs="multiTabs" />
-                    </f-main>
-                    <f-footer v-if="footer" class="layout-footer">
+                </FAside>
+                <FLayout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
                         {{ footer }}
-                    </f-footer>
-                </f-layout>
-            </f-layout>
+                    </FFooter>
+                </FLayout>
+            </FLayout>
         </template>
         <template v-else>
-            <f-main class="layout-main">
-                <router-view></router-view>
-            </f-main>
+            <FMain class="layout-main">
+                <router-view />
+            </FMain>
         </template>
-    </f-layout>
+    </FLayout>
 </template>
 
 <script>
-import { ref, computed, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from '@@/core/coreExports';
-import { FLayout, FAside, FMain, FFooter, FHeader } from '@fesjs/fes-design';
+import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
+import { computed, nextTick, ref, watch } from 'vue';
 import defaultLogo from '../assets/logo.png';
-import Menu from './Menu.vue';
+import LayoutMenu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';
 
 export default {
@@ -179,7 +187,7 @@ export default {
         FMain,
         FFooter,
         FHeader,
-        Menu,
+        LayoutMenu,
         MultiTabProvider,
     },
     props: {
@@ -209,6 +217,9 @@ export default {
             type: String,
             default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
         },
+        navigationOnError: {
+            type: String, // 403, 404 时的 navigation
+        },
         isFixedHeader: {
             type: Boolean,
             default: false,
@@ -241,6 +252,12 @@ export default {
             if (route.meta.layout && route.meta.layout.navigation !== undefined) {
                 return route.meta.layout.navigation;
             }
+            if (props.navigationOnError !== undefined && ['/403', '/404'].includes(route.path)) {
+                if (typeof props.navigationOnError === 'function') {
+                    return props.navigationOnError(route);
+                }
+                return props.navigationOnError;
+            }
             return props.navigation;
         });
 
@@ -278,6 +295,7 @@ export default {
     },
 };
 </script>
+
 <style lang="less" scoped>
 .main-layout {
     height: 100vh;
diff --git a/packages/fes-plugin-layout/src/runtime/views/index.jsx b/packages/fes-plugin-layout/src/runtime/views/index.jsx
index 03ec2029..aa667d3a 100644
--- a/packages/fes-plugin-layout/src/runtime/views/index.jsx
+++ b/packages/fes-plugin-layout/src/runtime/views/index.jsx
@@ -1,9 +1,9 @@
-import { unref, defineComponent, computed } from 'vue';
 import { plugin } from '@@/core/coreExports';
 import { getRoutes } from '@@/core/routes/routes';
-// eslint-disable-next-line import/extensions
-import getConfig from '../helpers/getConfig';
+import { computed, defineComponent, unref } from 'vue';
+
 import fillMenu from '../helpers/fillMenu';
+import getConfig from '../helpers/getConfig';
 import BaseLayout from './BaseLayout.vue';
 
 const Layout = defineComponent({
@@ -33,11 +33,12 @@ const Layout = defineComponent({
             return (
                 <BaseLayout
                     menus={filledMenuRef.value}
-                    locale={localeShared ? true : false}
+                    locale={!!localeShared}
                     title={config.title}
                     logo={config.logo}
                     theme={config.theme}
                     navigation={config.navigation}
+                    navigationOnError={config.navigationOnError}
                     isFixedHeader={config.isFixedHeader}
                     isFixedSidebar={config.isFixedSidebar}
                     multiTabs={config.multiTabs}
@@ -45,7 +46,7 @@ const Layout = defineComponent({
                     footer={config.footer}
                     menuProps={config.menuProps}
                     v-slots={slots}
-                ></BaseLayout>
+                />
             );
         };
     },
diff --git a/packages/fes-plugin-layout/types.d.ts b/packages/fes-plugin-layout/types.d.ts
index cefee502..2ce1c828 100644
--- a/packages/fes-plugin-layout/types.d.ts
+++ b/packages/fes-plugin-layout/types.d.ts
@@ -1,6 +1,6 @@
-import { Component, VNode, Ref } from 'vue';
-import { Router, RouteLocationNormalized, NavigationGuardNext, NavigationGuard } from 'vue-router';
-import { MenuOption } from '@fesjs/fes-design/es/menu/interface';
+import type { MenuOption } from '@fesjs/fes-design/es/menu/interface';
+import type { Component, Ref, VNode } from 'vue';
+import type { NavigationGuard, NavigationGuardNext, RouteLocationNormalized, Router } from 'vue-router';
 
 interface CustomNavigationGuardOption {
     router: Router;
@@ -22,6 +22,8 @@ interface Menu {
     children?: Menu[];
 }
 
+type Navigation = 'side' | 'mixin' | 'top' | 'left-right';
+
 export const Page: Component;
 
 export function useTabTitle(title: string | Ref<string>): void;
@@ -29,7 +31,8 @@ export function useTabTitle(title: string | Ref<string>): void;
 interface LayoutRuntimeConfig {
     footer?: string;
     theme?: 'dark' | 'light';
-    navigation?: 'side' | 'top' | 'mixin' | 'left-right';
+    navigation?: Navigation;
+    navigationOnError?: Navigation | ((route: RouteLocationNormalized) => Navigation | null);
     title?: string;
     isFixedHeader?: boolean;
     isFixedSidebar?: boolean;
@@ -51,28 +54,29 @@ declare module '@fesjs/fes' {
     interface RouteMeta {
         'keep-alive'?: boolean;
         layout?: {
-            navigation?: 'side' | 'mixin' | 'top' | 'left-right' | null;
+            navigation?: Navigation | null;
         };
     }
     interface PluginBuildConfig {
         layout?:
             | {
-                  footer: string;
-                  theme: 'dark' | 'light';
-                  navigation: 'side' | 'top' | 'mixin' | 'left-right';
-                  title: string;
-                  isFixedHeader: boolean;
-                  isFixedSidebar: boolean;
-                  logo: string;
-                  multiTabs: boolean;
-                  sideWidth: number;
-                  menus: Menu[];
-                  menuProps: {
-                      expandedKeys: string[];
-                      defaultExpandAll: boolean;
-                      accordion: boolean;
-                  };
-              }
+                footer: string;
+                theme: 'dark' | 'light';
+                navigation: Navigation;
+                navigationOnError: Navigation;
+                title: string;
+                isFixedHeader: boolean;
+                isFixedSidebar: boolean;
+                logo: string;
+                multiTabs: boolean;
+                sideWidth: number;
+                menus: Menu[];
+                menuProps: {
+                    expandedKeys: string[];
+                    defaultExpandAll: boolean;
+                    accordion: boolean;
+                };
+            }
             | false;
     }
     interface PluginRuntimeConfig {