feat: layout的userCenter改为customHeader

This commit is contained in:
万纯 2021-01-12 17:36:00 +08:00
parent 9eb0704c8e
commit efeee56c8e
7 changed files with 34 additions and 11 deletions

View File

@ -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. 控制最多打开的页面数,减少内存开销,如果能根据内存大小自动判定就更牛逼了
### 面包屑

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

View File

@ -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,

View File

@ -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;

View File

@ -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;

View File

@ -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'
}, { }, {

View File

@ -20,5 +20,5 @@ export const beforeRender = {
}; };
export const layout = { export const layout = {
userCenter: <UserCenter /> customHeader: <UserCenter />
}; };