Skip to content

Commit

Permalink
feat(plugin-layout): 代码逻辑优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@ocean-gao
ocean-gao committed May 24, 2024
1 parent 380bffe commit 791bdbb
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 30 deletions.
Binary file added docs/public/top-left-right.png
View file
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
View file
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
20 changes: 16 additions & 4 deletions packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
View file
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 @@ -140,7 +140,6 @@
:menus="rootMenus"
mode="horizontal"
:inverted="theme === 'dark'"
:navigation="currentNavigation"
/>
<div class="layout-header-custom">
<slot name="renderCustom" :menus="menus" />
Expand All @@ -150,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 @@ -159,6 +158,7 @@
:expanded-keys="menuProps?.expandedKeys"
:default-expand-all="menuProps?.defaultExpandAll"
:accordion="menuProps?.accordion"
:inverted="theme === 'dark'"
/>
</FAside>
Expand Down Expand Up @@ -269,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 @@ -339,9 +339,21 @@ export default {
const rootMenus = computed(() => {
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 || [])
Expand Down
26 changes: 5 additions & 21 deletions packages/fes-plugin-layout/src/runtime/views/Menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ export default {
type: Boolean,
default: false,
},
navigation: String,
},
setup(props) {
const route = useRoute();
Expand All @@ -94,13 +93,7 @@ export default {
if (matchMenus.length === 0) {
return route.path;
}
// 兼容 top-left 布局情况下，匹配菜单可能没有 path 的情况
if (props.navigation === 'top-left') {
return matchMenus[0].value;
}
else {
return matchMenus[0].path;
}
return matchMenus[0].path;
});
const expandedKeysRef = ref(props.expandedKeys);
Expand Down Expand Up @@ -131,26 +124,17 @@ export default {
);
const onMenuClick = (e) => {
let path = e.value;
let currentMenu = menuArray.value.find(item => item.value === path);
// 兼容 top-left 顶部导航没有链接的情况
if (props.navigation === 'top-left' && currentMenu && !currentMenu.path) {
// 判断当前菜单是否有子菜单
if (currentMenu._children && currentMenu._children.length > 0) {
path = currentMenu._children[0].path;
currentMenu = currentMenu._children[0];
}
}
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,
query: currentMenu.query || {},
params: currentMenu.params || {},
query: currentMenu?.query || {},
params: currentMenu?.params || {},
});
}
else {
Expand Down
1 change: 1 addition & 0 deletions packages/fes-template-vite/.fes.js
View file
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
View file
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 />;
},
};

0 comments on commit 791bdbb

Please sign in to comment.