Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: plugin-layout 支持顶部导航栏父菜单没有配置跳转链接的情况 #244

Merged
merged 2 commits into from
May 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/public/top-left-right.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 10 additions & 3 deletions docs/reference/plugin/plugins/layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) 插件使用,可以完成对路由的权限控制。
Expand All @@ -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

Expand All @@ -53,9 +53,12 @@ import { withBase } from 'vitepress'

### left-right

<!-- ![mixin](/mixin.png) -->
<!-- ![mixin](/left-right.png) -->
<img :src="withBase('left-right.png')" alt="left-right">

<!-- ![mixin](/top-left-right.png) -->
<img :src="withBase('top-left-right.png')" alt="top-left-right">

### 页面个性化

可以为页面单独设置布局类型:
Expand Down Expand Up @@ -258,6 +261,10 @@ export const layout = {

- **path**:菜单的路径,可配置第三方地址。

- **query**:同 vue-router 的 query 参数。

- **params**:同 vue-router 的 params 参数。

- **match (v4.0.0+)**:额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。

```
Expand Down
32 changes: 25 additions & 7 deletions packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand All @@ -158,6 +158,7 @@
:expanded-keys="menuProps?.expandedKeys"
:default-expand-all="menuProps?.defaultExpandAll"
:accordion="menuProps?.accordion"
:inverted="theme === 'dark'"
/>
</FAside>

Expand Down Expand Up @@ -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';

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
};
});
Expand Down
8 changes: 7 additions & 1 deletion packages/fes-plugin-layout/src/runtime/views/Menu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)开头的网址或者路由地址');
Expand Down
1 change: 1 addition & 0 deletions packages/fes-template-vite/.fes.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default defineBuildConfig({
{
title: '子菜单',
path: '/menuTest',
query: { id: 1 },
},
],
},
Expand Down
5 changes: 3 additions & 2 deletions packages/fes-template-vite/src/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />;
},
};