mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-09-06 15:29:47 +08:00
feat: layout的userCenter改为customHeader
This commit is contained in:
parent
9eb0704c8e
commit
efeee56c8e
@ -1,5 +1,19 @@
|
|||||||
主题: light/dark
|
主题: light/dark/blue
|
||||||
布局: 左右(上/下)、上/下、上/下(左/右)
|
布局: side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
||||||
固定Header: 是/否
|
固定Header: 是/否
|
||||||
固定sidebar: 是/否
|
固定sidebar: 是/否
|
||||||
multi tabs: 是/否
|
multi tabs: 是/否
|
||||||
|
|
||||||
|
## todo-list
|
||||||
|
|
||||||
|
### theme
|
||||||
|
1. 主题light-白色
|
||||||
|
2. 主题blue-蓝色
|
||||||
|
|
||||||
|
### multiTabs
|
||||||
|
1. 刷新tab动画:从点击开始到页面重新渲染完onMounted事件触发,期间刷新按钮旋转
|
||||||
|
2. 控制最多打开的页面数,减少内存开销,如果能根据内存大小自动判定就更牛逼了
|
||||||
|
|
||||||
|
### 面包屑
|
||||||
|
|
||||||
|
|
||||||
|
BIN
packages/fes-plugin-layout/src/assets/logo.png
Normal file
BIN
packages/fes-plugin-layout/src/assets/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 55 KiB |
@ -24,8 +24,13 @@ export default (api) => {
|
|||||||
const absFilePath = join(namespace, 'index.js');
|
const absFilePath = join(namespace, 'index.js');
|
||||||
|
|
||||||
api.onGenerateFiles(() => {
|
api.onGenerateFiles(() => {
|
||||||
// 文件写出
|
const { name } = api.pkg;
|
||||||
const userConfig = api.config.layout || {};
|
|
||||||
|
// .fes配置
|
||||||
|
const userConfig = {
|
||||||
|
title: name,
|
||||||
|
...(api.config.layout || {})
|
||||||
|
};
|
||||||
|
|
||||||
api.writeTmpFile({
|
api.writeTmpFile({
|
||||||
path: absFilePath,
|
path: absFilePath,
|
||||||
|
@ -18,10 +18,10 @@ const Layout = defineComponent({
|
|||||||
userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
|
userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
|
||||||
return () => {
|
return () => {
|
||||||
const slots = {
|
const slots = {
|
||||||
userCenter: () => {
|
customHeader: () => {
|
||||||
if (runtimeConfig.userCenter) {
|
if (runtimeConfig.customHeader) {
|
||||||
return (
|
return (
|
||||||
<runtimeConfig.userCenter></runtimeConfig.userCenter>
|
<runtimeConfig.customHeader></runtimeConfig.customHeader>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
@ -45,7 +45,7 @@
|
|||||||
<Menu :menus="menus" :theme="theme" class="layout-menu" mode="horizontal" />
|
<Menu :menus="menus" :theme="theme" class="layout-menu" mode="horizontal" />
|
||||||
</template>
|
</template>
|
||||||
<div class="layout-header-custom">
|
<div class="layout-header-custom">
|
||||||
<slot name="userCenter"></slot>
|
<slot name="customHeader"></slot>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="locale">
|
<template v-if="locale">
|
||||||
<slot name="locale"></slot>
|
<slot name="locale"></slot>
|
||||||
@ -109,7 +109,7 @@ export default {
|
|||||||
},
|
},
|
||||||
navigation: {
|
navigation: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'mixin' // side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
default: 'side' // side 左右(上/下)、 top 上/下、 mixin 上/下(左/右)
|
||||||
},
|
},
|
||||||
fixedHeader: {
|
fixedHeader: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -207,6 +207,10 @@ export default {
|
|||||||
&.main-layout-navigation-mixin {
|
&.main-layout-navigation-mixin {
|
||||||
.layout-sider {
|
.layout-sider {
|
||||||
padding: 48px 0 0;
|
padding: 48px 0 0;
|
||||||
|
box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
|
||||||
|
.ant-layout-sider-trigger {
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.layout-header {
|
.layout-header {
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
|
@ -15,7 +15,7 @@ export default {
|
|||||||
layout: {
|
layout: {
|
||||||
title: "Fes.js",
|
title: "Fes.js",
|
||||||
logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
|
logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
|
||||||
multiTabs: true,
|
multiTabs: false,
|
||||||
menus: [{
|
menus: [{
|
||||||
name: 'index'
|
name: 'index'
|
||||||
}, {
|
}, {
|
||||||
|
@ -20,5 +20,5 @@ export const beforeRender = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const layout = {
|
export const layout = {
|
||||||
userCenter: <UserCenter />
|
customHeader: <UserCenter />
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user