blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

feat(plugin-layout): 支持配置 403、404 的 navigation

Browse Source
This commit is contained in:
yqllin 2024-01-11 16:28:17 +08:00
parent 2bb6903bb3
commit 426cc13d7c
3 changed files with 132 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<f-layout class="main-layout"> <FLayout class="main-layout">
<template v-if="currentNavigation === 'side'"> <template v-if="currentNavigation === 'side'">
<f-aside <FAside
v-model:collapsed="collapsedRef" v-model:collapsed="collapsedRef"
:fixed="isFixedSidebar" :fixed="isFixedSidebar"
:width="`${sideWidth}px`" :width="`${sideWidth}px`"
@ -10,41 +10,43 @@
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
> >
<div class="layout-logo"> <div class="layout-logo">
<img v-if="logo" :src="logo" class="logo-img" /> <img v-if="logo" :src="logo" class="logo-img">
<div v-if="title" class="logo-name">{{ title }}</div> <div v-if="title" class="logo-name">
{{ title }}
</div>
</div> </div>
<Menu <LayoutMenu
class="layout-menu" class="layout-menu"
:menus="menus" :menus="menus"
:collapsed="collapsedRef" :collapsed="collapsedRef"
mode="vertical" mode="vertical"
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
:expandedKeys="menuProps?.expandedKeys" :expanded-keys="menuProps?.expandedKeys"
:defaultExpandAll="menuProps?.defaultExpandAll" :default-expand-all="menuProps?.defaultExpandAll"
:accordion="menuProps?.accordion" :accordion="menuProps?.accordion"
/> />
</f-aside> </FAside>
<f-layout :fixed="isFixedSidebar" :style="sideStyleRef"> <FLayout :fixed="isFixedSidebar" :style="sideStyleRef">
<f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef"> <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
<div class="layout-header-custom"> <div class="layout-header-custom">
<slot name="renderCustom" :menus="menus"></slot> <slot name="renderCustom" :menus="menus" />
</div> </div>
<template v-if="locale"> <template v-if="locale">
<slot name="locale"></slot> <slot name="locale" />
</template> </template>
</f-header> </FHeader>
<f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef"> <FLayout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
<f-main class="layout-main"> <FMain class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" /> <MultiTabProvider :multi-tabs="multiTabs" />
</f-main> </FMain>
<f-footer v-if="footer" class="layout-footer"> <FFooter v-if="footer" class="layout-footer">
{{ footer }} {{ footer }}
</f-footer> </FFooter>
</f-layout> </FLayout>
</f-layout> </FLayout>
</template> </template>
<template v-else-if="currentNavigation === 'left-right'"> <template v-else-if="currentNavigation === 'left-right'">
<f-aside <FAside
v-model:collapsed="collapsedRef" v-model:collapsed="collapsedRef"
:fixed="isFixedSidebar" :fixed="isFixedSidebar"
:width="`${sideWidth}px`" :width="`${sideWidth}px`"
@ -55,121 +57,127 @@
<div class="flex-between"> <div class="flex-between">
<div> <div>
<div class="layout-logo"> <div class="layout-logo">
<img v-if="logo" :src="logo" class="logo-img" /> <img v-if="logo" :src="logo" class="logo-img">
<div v-if="title" class="logo-name">{{ title }}</div> <div v-if="title" class="logo-name">
{{ title }}
</div>
</div> </div>
<Menu <LayoutMenu
class="layout-menu" class="layout-menu"
:menus="menus" :menus="menus"
:collapsed="collapsedRef" :collapsed="collapsedRef"
mode="vertical" mode="vertical"
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
:expandedKeys="menuProps?.expandedKeys" :expanded-keys="menuProps?.expandedKeys"
:defaultExpandAll="menuProps?.defaultExpandAll" :default-expand-all="menuProps?.defaultExpandAll"
:accordion="menuProps?.accordion" :accordion="menuProps?.accordion"
/> />
</div> </div>
<div> <div>
<div class="layout-aside-custom"> <div class="layout-aside-custom">
<slot name="renderCustom" :menus="menus"></slot> <slot name="renderCustom" :menus="menus" />
</div> </div>
<div v-if="locale" class="layout-aside-locale"> <div v-if="locale" class="layout-aside-locale">
<slot name="locale"></slot> <slot name="locale" />
</div> </div>
</div> </div>
</div> </div>
</f-aside> </FAside>
<f-layout :fixed="isFixedSidebar" :style="sideStyleRef"> <FLayout :fixed="isFixedSidebar" :style="sideStyleRef">
<f-layout :embedded="!multiTabs"> <FLayout :embedded="!multiTabs">
<f-main class="layout-main"> <FMain class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" /> <MultiTabProvider :multi-tabs="multiTabs" />
</f-main> </FMain>
<f-footer v-if="footer" class="layout-footer"> <FFooter v-if="footer" class="layout-footer">
{{ footer }} {{ footer }}
</f-footer> </FFooter>
</f-layout> </FLayout>
</f-layout> </FLayout>
</template> </template>
<template v-else-if="currentNavigation === 'top'"> <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"> <div class="layout-logo">
<img v-if="logo" :src="logo" class="logo-img" /> <img v-if="logo" :src="logo" class="logo-img">
<div v-if="title" class="logo-name">{{ title }}</div> <div v-if="title" class="logo-name">
{{ title }}
</div>
</div> </div>
<Menu <LayoutMenu
class="layout-menu" class="layout-menu"
:menus="menus" :menus="menus"
mode="horizontal" mode="horizontal"
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
:expandedKeys="menuProps?.expandedKeys" :expanded-keys="menuProps?.expandedKeys"
:defaultExpandAll="menuProps?.defaultExpandAll" :default-expand-all="menuProps?.defaultExpandAll"
:accordion="menuProps?.accordion" :accordion="menuProps?.accordion"
/> />
<div class="layout-header-custom"> <div class="layout-header-custom">
<slot name="renderCustom" :menus="menus"></slot> <slot name="renderCustom" :menus="menus" />
</div> </div>
<template v-if="locale"> <template v-if="locale">
<slot name="locale"></slot> <slot name="locale" />
</template> </template>
</f-header> </FHeader>
<f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef"> <FLayout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
<f-main class="layout-main"> <FMain class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" /> <MultiTabProvider :multi-tabs="multiTabs" />
</f-main> </FMain>
<f-footer v-if="footer" class="layout-footer"> <FFooter v-if="footer" class="layout-footer">
{{ footer }} {{ footer }}
</f-footer> </FFooter>
</f-layout> </FLayout>
</template> </template>
<template v-else-if="currentNavigation === 'mixin'"> <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"> <div class="layout-logo">
<img v-if="logo" :src="logo" class="logo-img" /> <img v-if="logo" :src="logo" class="logo-img">
<div v-if="title" class="logo-name">{{ title }}</div> <div v-if="title" class="logo-name">
{{ title }}
</div>
</div> </div>
<div class="layout-header-custom"> <div class="layout-header-custom">
<slot name="renderCustom" :menus="menus"></slot> <slot name="renderCustom" :menus="menus" />
</div> </div>
<template v-if="locale"> <template v-if="locale">
<slot name="locale"></slot> <slot name="locale" />
</template> </template>
</f-header> </FHeader>
<f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef"> <FLayout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
<f-aside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside"> <FAside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
<Menu <LayoutMenu
class="layout-menu" class="layout-menu"
:menus="menus" :menus="menus"
:collapsed="collapsedRef" :collapsed="collapsedRef"
mode="vertical" mode="vertical"
:expandedKeys="menuProps?.expandedKeys" :expanded-keys="menuProps?.expandedKeys"
:defaultExpandAll="menuProps?.defaultExpandAll" :default-expand-all="menuProps?.defaultExpandAll"
:accordion="menuProps?.accordion" :accordion="menuProps?.accordion"
/> />
</f-aside> </FAside>
<f-layout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef"> <FLayout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
<f-main class="layout-main"> <FMain class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" /> <MultiTabProvider :multi-tabs="multiTabs" />
</f-main> </FMain>
<f-footer v-if="footer" class="layout-footer"> <FFooter v-if="footer" class="layout-footer">
{{ footer }} {{ footer }}
</f-footer> </FFooter>
</f-layout> </FLayout>
</f-layout> </FLayout>
</template> </template>
<template v-else> <template v-else>
<f-main class="layout-main"> <FMain class="layout-main">
<router-view></router-view> <router-view />
</f-main> </FMain>
</template> </template>
</f-layout> </FLayout>
</template> </template>
<script> <script>
import { ref, computed, watch, nextTick } from 'vue';
import { useRoute, useRouter } from '@@/core/coreExports'; 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 defaultLogo from '../assets/logo.png';
import Menu from './Menu.vue'; import LayoutMenu from './Menu.vue';
import MultiTabProvider from './MultiTabProvider.vue'; import MultiTabProvider from './MultiTabProvider.vue';
export default { export default {
@ -179,7 +187,7 @@ export default {
FMain, FMain,
FFooter, FFooter,
FHeader, FHeader,
Menu, LayoutMenu,
MultiTabProvider, MultiTabProvider,
}, },
props: { props: {
@ -209,6 +217,9 @@ export default {
type: String, type: String,
default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右） default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
}, },
navigationOnError: {
type: String, // 403, 404 时的 navigation
},
isFixedHeader: { isFixedHeader: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -241,6 +252,12 @@ export default {
if (route.meta.layout && route.meta.layout.navigation !== undefined) { if (route.meta.layout && route.meta.layout.navigation !== undefined) {
return route.meta.layout.navigation; 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; return props.navigation;
}); });
@ -278,6 +295,7 @@ export default {
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main-layout { .main-layout {
height: 100vh; height: 100vh;

11
packages/fes-plugin-layout/src/runtime/views/index.jsx
View File

@ -1,9 +1,9 @@
import { unref, defineComponent, computed } from 'vue';
import { plugin } from '@@/core/coreExports'; import { plugin } from '@@/core/coreExports';
import { getRoutes } from '@@/core/routes/routes'; import { getRoutes } from '@@/core/routes/routes';
// eslint-disable-next-line import/extensions import { computed, defineComponent, unref } from 'vue';
import getConfig from '../helpers/getConfig';
import fillMenu from '../helpers/fillMenu'; import fillMenu from '../helpers/fillMenu';
import getConfig from '../helpers/getConfig';
import BaseLayout from './BaseLayout.vue'; import BaseLayout from './BaseLayout.vue';
const Layout = defineComponent({ const Layout = defineComponent({
@ -33,11 +33,12 @@ const Layout = defineComponent({
return ( return (
<BaseLayout <BaseLayout
menus={filledMenuRef.value} menus={filledMenuRef.value}
locale={localeShared ? true : false} locale={!!localeShared}
title={config.title} title={config.title}
logo={config.logo} logo={config.logo}
theme={config.theme} theme={config.theme}
navigation={config.navigation} navigation={config.navigation}
navigationOnError={config.navigationOnError}
isFixedHeader={config.isFixedHeader} isFixedHeader={config.isFixedHeader}
isFixedSidebar={config.isFixedSidebar} isFixedSidebar={config.isFixedSidebar}
multiTabs={config.multiTabs} multiTabs={config.multiTabs}
@ -45,7 +46,7 @@ const Layout = defineComponent({
footer={config.footer} footer={config.footer}
menuProps={config.menuProps} menuProps={config.menuProps}
v-slots={slots} v-slots={slots}
></BaseLayout> />
); );
}; };
}, },

46
packages/fes-plugin-layout/types.d.ts vendored
View File

@ -1,6 +1,6 @@
import { Component, VNode, Ref } from 'vue'; import type { MenuOption } from '@fesjs/fes-design/es/menu/interface';
import { Router, RouteLocationNormalized, NavigationGuardNext, NavigationGuard } from 'vue-router'; import type { Component, Ref, VNode } from 'vue';
import { MenuOption } from '@fesjs/fes-design/es/menu/interface'; import type { NavigationGuard, NavigationGuardNext, RouteLocationNormalized, Router } from 'vue-router';
interface CustomNavigationGuardOption { interface CustomNavigationGuardOption {
router: Router; router: Router;
@ -22,6 +22,8 @@ interface Menu {
children?: Menu[]; children?: Menu[];
} }
type Navigation = 'side' | 'mixin' | 'top' | 'left-right';
export const Page: Component; export const Page: Component;
export function useTabTitle(title: string | Ref<string>): void; export function useTabTitle(title: string | Ref<string>): void;
@ -29,7 +31,8 @@ export function useTabTitle(title: string | Ref<string>): void;
interface LayoutRuntimeConfig { interface LayoutRuntimeConfig {
footer?: string; footer?: string;
theme?: 'dark' | 'light'; theme?: 'dark' | 'light';
navigation?: 'side' | 'top' | 'mixin' | 'left-right'; navigation?: Navigation;
navigationOnError?: Navigation | ((route: RouteLocationNormalized) => Navigation | null);
title?: string; title?: string;
isFixedHeader?: boolean; isFixedHeader?: boolean;
isFixedSidebar?: boolean; isFixedSidebar?: boolean;
@ -51,28 +54,29 @@ declare module '@fesjs/fes' {
interface RouteMeta { interface RouteMeta {
'keep-alive'?: boolean; 'keep-alive'?: boolean;
layout?: { layout?: {
navigation?: 'side' | 'mixin' | 'top' | 'left-right' | null; navigation?: Navigation | null;
}; };
} }
interface PluginBuildConfig { interface PluginBuildConfig {
layout?: layout?:
| { | {
footer: string; footer: string;
theme: 'dark' | 'light'; theme: 'dark' | 'light';
navigation: 'side' | 'top' | 'mixin' | 'left-right'; navigation: Navigation;
title: string; navigationOnError: Navigation;
isFixedHeader: boolean; title: string;
isFixedSidebar: boolean; isFixedHeader: boolean;
logo: string; isFixedSidebar: boolean;
multiTabs: boolean; logo: string;
sideWidth: number; multiTabs: boolean;
menus: Menu[]; sideWidth: number;
menuProps: { menus: Menu[];
expandedKeys: string[]; menuProps: {
defaultExpandAll: boolean; expandedKeys: string[];
accordion: boolean; defaultExpandAll: boolean;
}; accordion: boolean;
} };
}
| false; | false;
} }
interface PluginRuntimeConfig { interface PluginRuntimeConfig {