Skip to content

E
evm-store
Commit 5237c65e authored by wanli's avatar wanli
Browse files
Options

🐞 fix(前端布局bug): 修复前端布局bug

parent 7807af36
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 183 deletions
tools/frontend/src/components/SettingDrawer/index.js
View file @ 5237c65e
......@@ -50,7 +50,7 @@ const SettingDrawer = {
nextState.config = true;
this.$store.commit('global/UpdateDefaultSettings', this.settings);
this.$store.commit('global/UpdateDefaultSettings', nextState);
message.loading("正在编译主题！", 3);
message.loading("正在编译主题！", 1.5);
this.$store.dispatch("global/defaultSettings", true);
},
......@@ -63,7 +63,8 @@ const SettingDrawer = {
},
render() {
const { collapse } = this;
const { primaryColor, layout, navTheme } = this.settings;
const { primaryColor, layout, navTheme, contentWidth, fixedHeader, fixSiderbar, autoHideHeader } = this.settings;
return (
<Drawer
title="界面设置"
......@@ -135,7 +136,7 @@ const SettingDrawer = {
<h3 class="setting-title">其它设置</h3>
<div class="setting-item">
<p>内容区域宽度</p>
<a-radio-group size="small" default-value="Fluid" button-style="solid" onChange={(e) => {
<a-radio-group value={contentWidth} size="small" default-value="Fluid" button-style="solid" onChange={(e) => {
this.changeSetting("contentWidth", e.target.value);
}}>
<a-radio-button value="Fluid">
......@@ -148,19 +149,19 @@ const SettingDrawer = {
</div>
<div class="setting-item">
<p>固定HEADER</p>
<a-switch size="small" default-checked onChange={(e) => {
<a-switch checked={fixedHeader} size="small" onChange={(e) => {
this.changeSetting("fixedHeader", e);
}} />
</div>
<div class="setting-item">
<p>自动隐藏HEADER</p>
<a-switch size="small" default-checked onChange={(e) => {
<a-switch checked={autoHideHeader} size="small" onChange={(e) => {
this.changeSetting("autoHideHeader", e);
}} />
</div>
<div class="setting-item">
<p>固定侧边栏</p>
<a-switch size="small" default-checked onChange={(e) => {
<a-switch checked={fixSiderbar} size="small" onChange={(e) => {
this.changeSetting("fixSiderbar", e);
}} />
</div>
......
tools/frontend/src/components/SiderMenu/SiderMenu.vue
View file @ 5237c65e
<template>
<a-layout-sider v-model="collapsed" width="256" :class="`ai-sider-menu sider ${fixSiderbar?'fixSiderbar':'',settings.navTheme==='light'?'light':'dark'}`" :theme="settings.navTheme">
<a-layout-sider
v-model="collapsed"
width="256"
:class="[
'ai-sider-menu sider',
fixSiderbar ? 'fixSiderbar' : '',
settings.navTheme === 'light' ? 'light' : 'dark',
]"
:theme="settings.navTheme"
>
<div class="logo" key="logo" id="logo">
<router-link to="/">
<img :src="logo" alt="logo" />
<h1>{{ settings.leftMenuTitle }}</h1>
</router-link>
</div>
<a-base-menu :collapsed="collapsed" :menuData="menuData" :theme="settings.navTheme" :layout="settings.layout" styles="padding: '16px 0'; width: '100%'"/>
<a-base-menu
:collapsed="collapsed"
:menuData="menuData"
:theme="settings.navTheme"
:layout="settings.layout"
styles="padding: '16px 0'; width: '100%'"
/>
</a-layout-sider>
</template>
......@@ -18,26 +33,32 @@ export default {
props: {
collapsed: {
default: false,
type: Boolean
type: Boolean,
},
fixSiderbar: {
default: false,
type: Boolean
type: Boolean,
},
menuData: {
default: () => [],
type: Array
type: Array,
},
logo: { type: String }
logo: { type: String },
},
computed: {
...mapGetters({
settings: "global/settings"
})
settings: "global/settings",
}),
siderStyle() {
let width = 256;
if (this.collapsed) width = 80;
return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;transition: all 0.2s;background: #001529;`;
},
},
components: {
ALayoutSider: Layout.Sider,
ABaseMenu
ABaseMenu,
},
};
</script>
tools/frontend/src/components/SiderMenu/index.less
View file @ 5237c65e
......@@ -35,6 +35,10 @@
z-index: 10;
&.fixSiderbar {
position: fixed;
height: 100vh;
min-width: 100vh;
max-height: 100vh;
overflow-y: auto;
top: 0;
left: 0;
}
......
tools/frontend/src/defaultSettings.js
View file @ 5237c65e
/*
* @Author: your name
* @Date: 2021-07-15 09:33:39
* @LastEditTime: 2021-07-23 10:58:39
* @LastEditTime: 2021-07-23 15:56:21
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \evm-store\tools\frontend\src\defaultSettings.js
......@@ -9,7 +9,7 @@
export default {
navTheme: 'dark', // theme for nav menu
primaryColor: '#1890FF', // primary color of ant design
layout: 'topmenu', // nav menu position: sidemenu or topmenu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: true, // sticky header
autoHideHeader: false, // auto hide header
......
tools/frontend/src/layouts/BasicLayout.js
View file @ 5237c65e
import './BasicLayout.less'
import "./BasicLayout.less";
import { Layout } from "ant-design-vue";
import pathToRegexp from 'path-to-regexp';
import pathToRegexp from "path-to-regexp";
import SiderMenu from "@/components/SiderMenu";
import Header from './Header';
import Footer from './Footer';
import eventBus from '@/utils/eventBus.js'
import Header from "./Header";
import Footer from "./Footer";
import eventBus from "@/utils/eventBus.js";
import logo from "@/assets/app-store.svg";
import { mapGetters } from "vuex";
const BasicLayout = {
data: () => ({
layout: 'topmenu',
logo
}),
methods: {
formatter(data, parentPath = '', parentName) {
return data.map(item => {
let locale = 'menu';
if (parentName && item.name) {
locale = `${parentName}.${item.name}`;
} else if (item.name) {
locale = `menu.${item.name}`;
} else if (parentName) {
locale = parentName;
}
const result = {
...item,
locale
};
if (!item.leaf) {
const menus = this.formatter(item.children, `${parentPath}${item.path}/`, locale);
// Reduce memory usage
result.menus = menus;
}
delete result.children;
return result;
});
},
getMenuData() {
return this.formatter(this.menuNav.data);
},
/**
* 获取面包屑映射
* @param {Object} menuData 菜单配置
*/
getBreadcrumbNameMap() {
const routerMap = {};
const mergeMenuAndRouter = data => {
data.forEach(menuItem => {
if (menuItem.menus) {
mergeMenuAndRouter(menuItem.menus);
}
// Reduce memory usage
routerMap[menuItem.path] = menuItem;
});
};
mergeMenuAndRouter(this.getMenuData());
return routerMap;
},
matchParamsPath(pathname) {
const breadcrumbNameMap = this.getBreadcrumbNameMap()
const pathKey = Object.keys(breadcrumbNameMap).find(key =>
pathToRegexp(key).test(pathname)
);
return breadcrumbNameMap[pathKey];
},
data: () => ({
layout: "topmenu",
logo,
}),
methods: {
formatter(data, parentPath = "", parentName) {
return data.map((item) => {
let locale = "menu";
if (parentName && item.name) {
locale = `${parentName}.${item.name}`;
} else if (item.name) {
locale = `menu.${item.name}`;
} else if (parentName) {
locale = parentName;
}
const result = {
...item,
locale,
};
getPageTitle(pathname) {
const currRouterData = this.matchParamsPath(pathname);
if (!currRouterData) {
return this.settings.leftMenuTitle;
}
const message = this.$t(currRouterData.locale || currRouterData.name)
return `${message} - ${this.settings.leftMenuTitle}`;
},
onResizeCollapsed() {
if (window.innerWidth <= 900) {
this.$store.commit('global/UpdateChangeLayoutCollapsed', true)
} else {
this.$store.commit('global/UpdateChangeLayoutCollapsed', false)
}
if (!item.leaf) {
const menus = this.formatter(
item.children,
`${parentPath}${item.path}/`,
locale
);
// Reduce memory usage
result.menus = menus;
}
delete result.children;
return result;
});
},
computed: {
...mapGetters({
collapsed: "global/getChangeLayoutCollapsed",
settings: "global/settings",
menuNav: "global/nav/getMenuNav"
}),
getContentStyle() {
return {
margin: '24px 24px 0',
paddingTop: this.settings.fixedHeader ? 64 : 0,
}
},
getMenuData() {
return this.formatter(this.menuNav.data);
},
beforeRouteEnter(to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
document.title = vm.getPageTitle(to.path)
})
/**
* 获取面包屑映射
* @param {Object} menuData 菜单配置
*/
getBreadcrumbNameMap() {
const routerMap = {};
const mergeMenuAndRouter = (data) => {
data.forEach((menuItem) => {
if (menuItem.menus) {
mergeMenuAndRouter(menuItem.menus);
}
// Reduce memory usage
routerMap[menuItem.path] = menuItem;
});
};
mergeMenuAndRouter(this.getMenuData());
return routerMap;
},
beforeRouteUpdate(to, from, next) {
this.$store.commit('global/UpdateBasicLayoutSpinning', true)
document.title = this.getPageTitle(to.path)
this.$nextTick(() => {
next();
})
matchParamsPath(pathname) {
const breadcrumbNameMap = this.getBreadcrumbNameMap();
const pathKey = Object.keys(breadcrumbNameMap).find((key) =>
pathToRegexp(key).test(pathname)
);
return breadcrumbNameMap[pathKey];
},
mounted() {
this.$store.dispatch('global/nav/getMenuNav');
this.onResizeCollapsed()
getPageTitle(pathname) {
const currRouterData = this.matchParamsPath(pathname);
if (!currRouterData) {
return this.settings.leftMenuTitle;
}
const message = this.$t(currRouterData.locale || currRouterData.name);
return `${message} - ${this.settings.leftMenuTitle}`;
},
onResizeCollapsed() {
if (window.innerWidth <= 900) {
this.$store.commit("global/UpdateChangeLayoutCollapsed", true);
} else {
this.$store.commit("global/UpdateChangeLayoutCollapsed", false);
}
},
},
computed: {
...mapGetters({
collapsed: "global/getChangeLayoutCollapsed",
settings: "global/settings",
menuNav: "global/nav/getMenuNav",
}),
getContentStyle() {
return {
margin: "24px 24px 0",
paddingTop: this.settings.fixedHeader ? 64 : 0,
};
},
getSiderShadow() {
let width = 256;
if (this.collapsed) width = 80;
window.onresize = () => {
// 通过捕获系统的onresize事件触发我们需要执行的事件
this.onResizeCollapsed()
}
return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;transition: all 0.2s;background: #001529;`;
},
render() {
const { collapsed, getContentStyle, logo } = this;
const { layout } = this.settings;
const isTop = layout === 'topmenu';
const isMobile = false;
const menuData = this.getMenuData();
eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap()
return (
<Layout class="ai-basic-layout-container">
{isTop && !isMobile ? null : (
<SiderMenu collapsed={collapsed} menuData={menuData} logo={logo}/>
)}
},
beforeRouteEnter(to, from, next) {
next((vm) => {
// 通过 `vm` 访问组件实例
document.title = vm.getPageTitle(to.path);
});
},
beforeRouteUpdate(to, from, next) {
this.$store.commit("global/UpdateBasicLayoutSpinning", true);
document.title = this.getPageTitle(to.path);
this.$nextTick(() => {
next();
});
},
mounted() {
this.$store.dispatch("global/nav/getMenuNav");
this.onResizeCollapsed();
<Layout>
<Header menuData={menuData} logo={logo}/>
<Layout.Content style={getContentStyle}>
<router-view />
</Layout.Content>
<Footer />
</Layout>
</Layout>
)
}
}
export default BasicLayout
\ No newline at end of file
window.onresize = () => {
// 通过捕获系统的onresize事件触发我们需要执行的事件
this.onResizeCollapsed();
};
},
render() {
const { collapsed, getContentStyle, logo } = this;
const { layout, fixedHeader, fixSiderbar } = this.settings;
const isTop = layout === "topmenu";
const isMobile = false;
const menuData = this.getMenuData();
eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap();
return (
<Layout class="ai-basic-layout-container">
{isTop && !isMobile ? null : (
<SiderMenu
collapsed={collapsed}
fixSiderbar={fixSiderbar}
menuData={menuData}
logo={logo}
/>
)}
{fixSiderbar ? <div style={this.getSiderShadow}></div> : null}
<Layout>
<Header menuData={menuData} logo={logo} />
<div v-show={fixedHeader} style={{ width: "100%", height: "64px" }} />
<Layout.Content style={getContentStyle}>
<router-view />
</Layout.Content>
<Footer />
</Layout>
</Layout>
);
},
};
export default BasicLayout;
tools/frontend/src/layouts/Header.js
View file @ 5237c65e
......@@ -27,45 +27,42 @@ const HeaderView = {
},
render() {
const { menuData, logo } = this;
const { layout, navTheme, fixedHeader, leftMenuTitle } = this.settings;
const { layout, navTheme, leftMenuTitle } = this.settings;
const isTop = layout === "topmenu";
const isMobile = false;
return (
<div>
<Header style={this.headerStyle}>
{isTop && !isMobile ? (
// <TopNavHeader
// theme={navTheme}
// mode="horizontal"
// Authorized={Authorized}
// onCollapse={handleMenuCollapse}
// onNoticeClear={this.handleNoticeClear}
// onMenuClick={this.handleMenuClick}
// onNoticeVisibleChange={this.handleNoticeVisibleChange}
// {...this.props}
// />
<TopNavHeader
theme={navTheme}
layout={layout}
mode="horizontal"
menuData={menuData}
logo={logo}
title={leftMenuTitle}
/>
) : (
// <GlobalHeader
// onCollapse={handleMenuCollapse}
// onNoticeClear={this.handleNoticeClear}
// onMenuClick={this.handleMenuClick}
// onNoticeVisibleChange={this.handleNoticeVisibleChange}
// {...this.props}
// />
<GlobalHeader theme={navTheme} layout={layout} />
)}
</Header>
<div v-show={fixedHeader} class="placeholder-element" />
</div>
<Header style={this.headerStyle}>
{isTop && !isMobile ? (
// <TopNavHeader
// theme={navTheme}
// mode="horizontal"
// Authorized={Authorized}
// onCollapse={handleMenuCollapse}
// onNoticeClear={this.handleNoticeClear}
// onMenuClick={this.handleMenuClick}
// onNoticeVisibleChange={this.handleNoticeVisibleChange}
// {...this.props}
// />
<TopNavHeader
theme={navTheme}
layout={layout}
mode="horizontal"
menuData={menuData}
logo={logo}
title={leftMenuTitle}
/>
) : (
// <GlobalHeader
// onCollapse={handleMenuCollapse}
// onNoticeClear={this.handleNoticeClear}
// onMenuClick={this.handleMenuClick}
// onNoticeVisibleChange={this.handleNoticeVisibleChange}
// {...this.props}
// />
<GlobalHeader theme={navTheme} layout={layout} />
)}
</Header>
);
},
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment