mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 03:05:07 +08:00
feat: plugin-layout 支持顶部导航栏父菜单没有配置跳转链接的情况 (#244)
* feat: plugin-layout 兼容顶部导航栏父菜单没有配置跳转链接的情况 * feat(plugin-layout): 代码逻辑优化
This commit is contained in:
ocean_gao
GitHub
parent
4ed0366cd6
commit
d87baedac0
BIN
docs/public/top-left-right.png
Normal file
BIN
docs/public/top-left-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@ -9,7 +9,7 @@ import { withBase } from 'vitepress'
|
||||
为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
|
||||
|
||||
- 侧边栏菜单数据根据路由中的配置自动生成。
|
||||
- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
|
||||
- 布局，提供 `side`、 `top`、`mixin`、`left-right`、`top-left-right` 五种布局。
|
||||
- 主题，提供 `light`、`dark` 两种主题。
|
||||
- 默认实现对路由的 404、403 处理。
|
||||
- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
|
||||
@ -34,7 +34,7 @@ import { withBase } from 'vitepress'
|
||||
|
||||
## 布局类型
|
||||
|
||||
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 、`top` 和 `left-right`， 默认是 `side`。
|
||||
配置参数是 `navigation`, 布局有五种类型 `side`、`mixin` 、`top` 、`left-right`、`top-left-right`， 默认是 `side`。
|
||||
|
||||
### side
|
||||
|
||||
@ -53,9 +53,12 @@ import { withBase } from 'vitepress'
|
||||
|
||||
### left-right
|
||||
|
||||
<!--  -->
|
||||
<!--  -->
|
||||
<img :src="withBase('left-right.png')" alt="left-right">
|
||||
|
||||
<!--  -->
|
||||
<img :src="withBase('top-left-right.png')" alt="top-left-right">
|
||||
|
||||
### 页面个性化
|
||||
|
||||
可以为页面单独设置布局类型：
|
||||
@ -258,6 +261,10 @@ export const layout = {
|
||||
|
||||
- **path**：菜单的路径，可配置第三方地址。
|
||||
|
||||
- **query**：同 vue-router 的 query 参数。
|
||||
|
||||
- **params**：同 vue-router 的 params 参数。
|
||||
|
||||
- **match (v4.0.0+）**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。
|
||||
|
||||
```
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
</FFooter>
|
||||
</FLayout>
|
||||
</template>
|
||||
<template v-else-if="currentNavigation === 'top-left'">
|
||||
<template v-else-if="currentNavigation === 'top-left-right'">
|
||||
<FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
|
||||
<div class="layout-logo">
|
||||
<img v-if="logo" :src="logo" class="logo-img">
|
||||
@ -149,7 +149,7 @@
|
||||
</template>
|
||||
</FHeader>
|
||||
<FLayout v-if="activeSubMenus.length" :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
|
||||
<FAside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
|
||||
<FAside v-model:collapsed="collapsedRef" :inverted="theme === 'dark'" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
|
||||
<LayoutMenu
|
||||
class="layout-menu"
|
||||
:menus="activeSubMenus"
|
||||
@ -158,6 +158,7 @@
|
||||
:expanded-keys="menuProps?.expandedKeys"
|
||||
:default-expand-all="menuProps?.defaultExpandAll"
|
||||
:accordion="menuProps?.accordion"
|
||||
:inverted="theme === 'dark'"
|
||||
/>
|
||||
</FAside>
|
||||
|
||||
@ -229,6 +230,7 @@ import { useRoute, useRouter } from '@@/core/coreExports';
|
||||
import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import defaultLogo from '../assets/logo.png';
|
||||
import { flatNodes } from '../helpers/utils';
|
||||
import LayoutMenu from './Menu.vue';
|
||||
import MultiTabProvider from './MultiTabProvider.vue';
|
||||
|
||||
@ -267,7 +269,7 @@ export default {
|
||||
},
|
||||
navigation: {
|
||||
type: String,
|
||||
default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
|
||||
default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）、top-left-right 上/下（左/右）
|
||||
},
|
||||
navigationOnError: {
|
||||
type: [String, Function], // 403, 404 时的 navigation
|
||||
@ -335,12 +337,28 @@ export default {
|
||||
);
|
||||
|
||||
const rootMenus = computed(() => {
|
||||
return props.menus.filter((menu) => {
|
||||
return menu.path;
|
||||
}).map((menu) => {
|
||||
const { children, ...others } = menu;
|
||||
return props.menus.map((menu) => {
|
||||
const { children, match, ...others } = menu;
|
||||
let { path, query, params } = menu;
|
||||
const flatChildren = flatNodes(children || []);
|
||||
if (!menu.path) {
|
||||
const firstChild = flatChildren.find(item => item.path);
|
||||
if (firstChild) {
|
||||
path = firstChild.path;
|
||||
query = firstChild.query;
|
||||
params = firstChild.params;
|
||||
}
|
||||
}
|
||||
return {
|
||||
...others,
|
||||
path,
|
||||
query,
|
||||
params,
|
||||
match: (match || [])
|
||||
.concat(...flatChildren.map(item => []
|
||||
.concat(item.match || [])
|
||||
.concat(item.path)),
|
||||
),
|
||||
_children: children,
|
||||
};
|
||||
});
|
||||
|
||||
@ -125,11 +125,17 @@ export default {
|
||||
|
||||
const onMenuClick = (e) => {
|
||||
const path = e.value;
|
||||
const currentMenu = menuArray.value.find(item => item.value === path);
|
||||
|
||||
if (/^https?:\/\//.test(path)) {
|
||||
window.open(path, '_blank');
|
||||
}
|
||||
else if (/^\//.test(path)) {
|
||||
router.push(path);
|
||||
router.push({
|
||||
path,
|
||||
query: currentMenu?.query || {},
|
||||
params: currentMenu?.params || {},
|
||||
});
|
||||
}
|
||||
else {
|
||||
console.warn('[plugin-layout]: 菜单的path只能是以http(s)开头的网址或者路由地址');
|
||||
|
||||
@ -54,6 +54,7 @@ export default defineBuildConfig({
|
||||
{
|
||||
title: '子菜单',
|
||||
path: '/menuTest',
|
||||
query: { id: 1 },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -23,8 +23,9 @@ export const beforeRender = {
|
||||
};
|
||||
|
||||
export const layout = {
|
||||
logo: `${process.env.BASE_URL}wine-outline.svg`,
|
||||
renderCustom: (props) => {
|
||||
// eslint-disable-next-line node/prefer-global/process
|
||||
logo: `${process.env.BASE_URL}logo.png`,
|
||||
renderCustom: () => {
|
||||
return <UserCenter />;
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user