主题色
-
-
-
+
+
+
-
其他设置
-
-
{{ name }}
-
+
导航模式
+
+
+
+ {{ title }}
+
+ {{ title }}
+
+
+
@@ -21,43 +36,77 @@
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
import {isDev} from '@/config'
-import ColorCheckBox from "@/component/ColorCheckBox"
-import ColorCheckboxGroup from "@/component/ColorCheckBox/group"
+import CheckboxGroup from "@/component/checkbox/Group"
+import ColorCheckbox from "@/component/checkbox/ColorCheckbox"
+import ImgCheckbox from "@/component/checkbox/ImgCheckbox"
import {getters, mutations} from "@/layout/store/setting"
-const settings = [
- {name: '显示logo', key: 'showLogo'},
- {name: '显示面包屑', key: 'showBreadcrumb'},
- {name: '使用多页签', key: 'useTagsView'},
- {name: '侧边栏手风琴效果', key: 'sidebarUniqueOpen'},
- {name: '侧边栏折叠', key: 'sidebarCollapse'},
- {name: '折叠菜单显示上级', key: 'sidebarShowParent'},
- {name: '侧边栏自动隐藏', key: 'sidebarAutoHidden'},
- {name: '头部自动隐藏', key: 'headerAutoHidden'},
- {name: '显示返回顶部按钮', key: 'showBackToTop'}
-]
-const colors = ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96']
-
export default {
name: "SettingDrawer",
- components: {ColorCheckBox, ColorCheckboxGroup},
+ components: {CheckboxGroup, ColorCheckbox, ImgCheckbox},
props: {value: Boolean},
data() {
return {
- settings,
- colors,
- color: '#1890ff'
+ colors: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
+ navModes: [
+ {
+ title: '侧边栏导航',
+ value: 'aside',
+ img: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg'
+ },
+ {
+ title: '顶部导航',
+ value: 'head',
+ img: 'https://gw.alipayobjects.com/zos/antfincdn/URETY8%24STp/KDNDBbriJhLwuqMoxcAr.svg'
+ },
+ {
+ title: '混合导航',
+ value: 'mix',
+ img: 'https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg'
+ },
+ ],
+ settings: [
+ {
+ title: '页面设置',
+ children: [
+ {title: '显示logo', key: 'showLogo'},
+ {title: '显示页头', key: 'showPageHeader'},
+ {title: '使用多页签', key: 'useTagsView'}
+ ]
+ },
+ {
+ title: '侧边栏设置',
+ children: [
+ {title: '手风琴效果', key: 'sidebarUniqueOpen'},
+ {title: '折叠', key: 'sidebarCollapse'},
+ {title: '折叠状态下显示上级', key: 'sidebarShowParent'},
+ {title: '自动隐藏', key: 'sidebarAutoHidden'},
+ ]
+ },
+ {
+ title: '其他设置',
+ children: [
+ {title: '显示返回顶部按钮', key: 'showBackToTop'}
+ ]
+ }
+ ]
}
},
+ computed: {
+ color: () => getters.themeColor,
+ navMode: () => getters.navMode,
+ },
+
methods: {
changeColor(color) {
- this.color = color
+ this.setValue(color,'themeColor')
isDev && client.changer.changeColor({newColors: forElementUI.getElementUISeries(color)})
},
+
getValue(key) {
return getters[key]
},
diff --git a/vue/src/layout/component/Header/component/Navbar/index.vue b/vue/src/layout/component/Header/component/Navbar/index.vue
index 9eb8c26..1c9c3f9 100644
--- a/vue/src/layout/component/Header/component/Navbar/index.vue
+++ b/vue/src/layout/component/Header/component/Navbar/index.vue
@@ -1,59 +1,13 @@
-
-
-
-
-
diff --git a/vue/src/layout/component/Header/component/Navbar/style.scss b/vue/src/layout/component/Header/component/Navbar/style.scss
index 56b0a6f..42783f8 100644
--- a/vue/src/layout/component/Header/component/Navbar/style.scss
+++ b/vue/src/layout/component/Header/component/Navbar/style.scss
@@ -15,6 +15,7 @@
> div {
display: flex;
+ flex-wrap: nowrap;
height: 100%;
}
@@ -45,3 +46,51 @@
}
}
}
+
+//顶部水平菜单
+.el-menu--horizontal .el-menu,
+.el-menu--horizontal.el-menu {
+ font-size: 14px;
+
+ .icon {
+ font-size: 14px;
+ }
+
+ //图标和文字的间隔
+ .icon + .menu-item-content {
+ margin-left: $menu-icon-text-gap;
+ }
+
+ //菜单的文字以及hover颜色
+ .el-menu-item,
+ .el-submenu__title {
+ color: $head-menu-item-color;
+
+ &:hover {
+ color: $head-menu-item-hover-color;
+ }
+
+ > span {
+ max-width: 100px;
+ }
+ }
+}
+
+//顶部菜单的顶级节点
+.el-menu--horizontal.el-menu {
+ //不显示折叠展开按钮
+ > .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
+ display: none;
+ }
+
+ //顶级节点的高度以及hover颜色
+ > .el-menu-item,
+ > .el-submenu > .el-submenu__title {
+ height: $nav-height;
+ line-height: $nav-height;
+
+ &:hover {
+ border-bottom: 2px solid $head-menu-item-hover-color;
+ }
+ }
+}
diff --git a/vue/src/layout/component/Header/component/TagsView/index.vue b/vue/src/layout/component/Header/component/TagsView/index.vue
index d953937..8e45ca9 100644
--- a/vue/src/layout/component/Header/component/TagsView/index.vue
+++ b/vue/src/layout/component/Header/component/TagsView/index.vue
@@ -4,14 +4,14 @@ import decideRouterTransitionMixin from '@/layout/mixin/decideRouterTransition'
import {route as routeConfig} from '@/config'
import {getters as mainGetters} from "@/layout/store/main"
import {getters as tagsViewGetters, mutations as tagsViewMutations} from "@/layout/store/tagsView"
-import ContextMenu from "@/component/ContextMenu"
-import ContextMenuItem from "@/component/ContextMenu/item"
+import Contextmenu from "@/component/menu/Contextmenu"
+import ContextmenuItem from "@/component/menu/ContextmenuItem"
import ScrollPane from './ScrollPane'
export default {
mixins: [shortcutMixin, decideRouterTransitionMixin],
- components: {ContextMenu, ContextMenuItem, ScrollPane},
+ components: {Contextmenu, ContextmenuItem, ScrollPane},
data() {
return {
@@ -36,9 +36,6 @@ export default {
this.decideRouteTransition && this.decideRouteTransition(to, from)
this.addTags(to)
this.moveToCurrentTag()
- },
- 'contextmenu.show'(v) {
- this.$emit('menu-show', v)
}
},
@@ -172,15 +169,15 @@ export default {
renderContextmenu(h) {
const menu = this.contextmenu
return (
-
- 刷新
+
+ 刷新
{!this.isAffix(this.selectedTag) &&
- this.closeSelectedTag(this.selectedTag)}>
+ this.closeSelectedTag(this.selectedTag)}>
关闭
- }
- 关闭其他
- 关闭全部
-
+ }
+
关闭其他
+
关闭全部
+
)
}
},
diff --git a/vue/src/layout/component/Header/index.vue b/vue/src/layout/component/Header/index.vue
index 39c529e..e60c76a 100644
--- a/vue/src/layout/component/Header/index.vue
+++ b/vue/src/layout/component/Header/index.vue
@@ -1,5 +1,4 @@
-
-
diff --git a/vue/src/layout/component/Main/component/PageHeader.vue b/vue/src/layout/component/Main/component/PageHeader.vue
new file mode 100644
index 0000000..42affa9
--- /dev/null
+++ b/vue/src/layout/component/Main/component/PageHeader.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
diff --git a/vue/src/layout/component/Main/index.vue b/vue/src/layout/component/Main/index.vue
index a2b6299..3bfc09d 100644
--- a/vue/src/layout/component/Main/index.vue
+++ b/vue/src/layout/component/Main/index.vue
@@ -1,45 +1,21 @@
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/vue/src/layout/component/Main/style.scss b/vue/src/layout/component/Main/style.scss
index ffa658b..f7d4db5 100644
--- a/vue/src/layout/component/Main/style.scss
+++ b/vue/src/layout/component/Main/style.scss
@@ -1,19 +1,19 @@
@import "~@/asset/style/variables.scss";
-.app-main {
+.router-main {
position: relative;
flex: 1;
overflow: hidden;
background-color: #f0f2f5;
- .scroll-container {
+ > .scroll-container {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: overlay;
overflow-x: inherit;
- .page-view {
+ > .page-view {
margin: $page-view-margin;
flex: 1;
}
diff --git a/vue/src/layout/index.vue b/vue/src/layout/index.vue
index 4ef27b6..142a2fd 100644
--- a/vue/src/layout/index.vue
+++ b/vue/src/layout/index.vue
@@ -16,14 +16,10 @@ export default {
components: {VAside, VHeader, VMain},
computed: {
- hasNav: () => mainGetters.hasNav,
- useTagsView: () => settingGetters.useTagsView,
containerClass() {
- return {
- 'main-container': true,
- 'has-nav': this.hasNav,
- 'has-tags-view': this.useTagsView
- }
+ const arr = ['main-container', 'has-nav', `nav-mode-${settingGetters.navMode}`]
+ settingGetters.useTagsView && arr.push('has-tags-view')
+ return arr
}
},
@@ -48,9 +44,10 @@ export default {
},
render() {
+ const renderAide = mainGetters.device === 'mobile' || settingGetters.navMode !== 'head'
return (
-
+ {renderAide && }
@@ -69,7 +66,7 @@ export default {
height: 100%;
width: 100%;
- .main-container {
+ > .main-container {
display: flex;
flex: 1;
overflow: hidden;
diff --git a/vue/src/layout/mixin/actionOnSelectMenu.js b/vue/src/layout/mixin/menu.js
similarity index 63%
rename from vue/src/layout/mixin/actionOnSelectMenu.js
rename to vue/src/layout/mixin/menu.js
index cfa4547..5332f21 100644
--- a/vue/src/layout/mixin/actionOnSelectMenu.js
+++ b/vue/src/layout/mixin/menu.js
@@ -1,13 +1,24 @@
+/**
+ * 顶部菜单和侧边栏菜单的公共混入
+ */
import {mutations as tagsViewMutations} from "@/layout/store/tagsView"
import {isExternal} from "@/util/validate"
export default {
+ data() {
+ return {
+ //当前激活的菜单的fullPath
+ activeMenu: ''
+ }
+ },
+
methods: {
+ //点击菜单后的动作
actionOnSelectMenu(fullPath, refreshWhenSame = true) {
//外部链接时打开新窗口
if (isExternal(fullPath)) {
window.open(fullPath)
- //当是从侧边栏打开时，重置高亮菜单
+ //重置高亮菜单
const menu = this.$refs.menu
if (menu && menu.updateActiveIndex) {
menu.updateActiveIndex(this.activeMenu)
@@ -22,6 +33,13 @@ export default {
this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
}
else this.$router.push(fullPath)
+ },
+
+ resetActiveMenu() {
+ //由于侧边栏菜单数组更新后，el-menu不一定会更新（当数组中不存在单级菜单时）
+ //所以手动更新el-menu的当前高亮菜单
+ const menu = this.$refs.menu
+ menu && menu.updateActiveIndex()
}
}
}
diff --git a/vue/src/layout/store/main.js b/vue/src/layout/store/main.js
index 60137f1..e2833e3 100644
--- a/vue/src/layout/store/main.js
+++ b/vue/src/layout/store/main.js
@@ -2,22 +2,16 @@ import Vue from 'vue'
import {isEmpty} from "@/util"
import {isMobile} from "@/util/browser"
import {createGetters, createMutations} from "@/util/observable"
-import {getLocalPersonalSettings} from "@/util/storage"
-
-const localSettings = getLocalPersonalSettings()
const state = {
//区分pc和移动端（mobile）
device: isMobile() ? 'mobile' : 'pc',
- //右侧块是否含有导航栏，这里初始值是为了转为boolean类型
- hasNav: !!!localSettings.headerAutoHidden,
-
//当前激活的顶部菜单的fullPath
activeRootMenu: '',
//所有的树形菜单，每个元素为顶部菜单，顶部菜单的子级（如果有）为侧边栏菜单
- menus: [],
+ menus: []
}
const store = Vue.observable(state)
diff --git a/vue/src/layout/store/setting.js b/vue/src/layout/store/setting.js
index 8b53297..1a60b24 100644
--- a/vue/src/layout/store/setting.js
+++ b/vue/src/layout/store/setting.js
@@ -4,30 +4,27 @@ import {createGetters} from "@/util/observable"
import {getLocalPersonalSettings, setLocalPersonalSettings} from "@/util/storage"
const state = {
+ //主题色
+ themeColor: '#1890ff',
+ //导航模式
+ navMode: 'mix',
+
//是否显示logo
showLogo: true,
-
- //是否显示面包屑
- showBreadcrumb: true,
-
+ //是否显示页头
+ showPageHeader: true,
//是否使用多页签
useTagsView: true,
- //左侧菜单手风琴效果
+ //侧边栏菜单手风琴效果
sidebarUniqueOpen: true,
-
- //左侧菜单是否折叠
+ //侧边栏菜单是否折叠
sidebarCollapse: false,
-
- //左侧菜单折叠时，弹出菜单是否显示上级
+ //侧边栏菜单折叠时，弹出菜单是否显示上级
sidebarShowParent: false,
-
- //是否自动隐藏左侧菜单
+ //是否自动隐藏侧边栏菜单
sidebarAutoHidden: false,
- //是否自动隐藏头部
- headerAutoHidden: false,
-
//是否显示返回顶部按钮
showBackToTop: true,
}
diff --git a/vue/src/layout/util.js b/vue/src/layout/util.js
new file mode 100644
index 0000000..c63a0eb
--- /dev/null
+++ b/vue/src/layout/util.js
@@ -0,0 +1,27 @@
+import {getters as mainGetters} from "@/layout/store/main"
+import {getters as settingGetters} from "@/layout/store/setting"
+
+//获取侧边栏的菜单
+export function getSidebarMenus() {
+ const menus = mainGetters.menus
+ if (!Array.isArray(menus)) {
+ return []
+ }
+ if (mainGetters.device === 'mobile') {
+ return menus
+ }
+ switch (settingGetters.navMode) {
+ case 'aside':
+ return menus
+ case 'head':
+ return []
+ case 'mix':
+ const root = menus.find(i => i.path === mainGetters.activeRootMenu)
+ return root ? root.children || [] : []
+ }
+}
+
+//根据路由获取当前激活的菜单
+export function getActiveMenuByRoute({path, meta}) {
+ return meta.activeMenu || path
+}
diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index 769f991..ae58d31 100644
--- a/vue/src/router/index.js
+++ b/vue/src/router/index.js
@@ -5,7 +5,7 @@
* 左侧菜单显示：name && !meta.hidden && meta.title
* 左侧菜单排序：能在左侧菜单中显示 && meta.sort，升序排列
* 左侧菜单不折叠只有一个children的路由：meta.alwaysShow
-* 面包屑显示：meta.breadcrumb !== false && (meta.title || meta.dynamicTitle)
+* 页头显示：meta.pageHeader !== false && (meta.title || meta.dynamicTitle)
* tab栏显示：meta.title || meta.dynamicTitle
* tab栏固定显示：meta.title && meta.affix
* 页面不缓存：!name && !meta.usePathKey && !meta.useFullPathKey || meta.noCache
diff --git a/vue/src/router/module/defaultRoot/child/app.js b/vue/src/router/module/defaultRoot/child/app.js
index 7e2dbca..ff5820b 100644
--- a/vue/src/router/module/defaultRoot/child/app.js
+++ b/vue/src/router/module/defaultRoot/child/app.js
@@ -5,13 +5,13 @@ const router = [
path: 'index',
component: 'index/',
name: 'index',
- meta: {title: '首页', affix: true, icon: 'svg-home', noAuth: true, breadcrumb: false, sort: 0}
+ meta: {title: '首页', affix: true, icon: 'svg-home', noAuth: true, pageHeader: false, sort: 0}
},
{
path: 'user',
name: 'userCenter',
component: 'userCenter/',
- meta: {title: '个人中心', noCache: true, icon: 'svg-user', noAuth: true, breadcrumb: false, hidden: true},
+ meta: {title: '个人中心', noCache: true, icon: 'svg-user', noAuth: true, pageHeader: false, hidden: true},
}
]
diff --git a/vue/src/router/module/defaultRoot/child/purchase.js b/vue/src/router/module/defaultRoot/child/purchase.js
index 639f7ba..257e72c 100644
--- a/vue/src/router/module/defaultRoot/child/purchase.js
+++ b/vue/src/router/module/defaultRoot/child/purchase.js
@@ -16,7 +16,7 @@ const router = {
meta: {
title: '采购订单详情页',
hidden: true,
- breadcrumb: false,
+ pageHeader: false,
dynamicTitle(to) {
const {type, id} = to.params
switch (type) {
@@ -45,7 +45,7 @@ const router = {
meta: {
title: '采购入库详情页',
hidden: true,
- breadcrumb: false,
+ pageHeader: false,
dynamicTitle(to) {
const {type, id} = to.params
switch (type) {
diff --git a/vue/src/router/module/defaultRoot/child/sell.js b/vue/src/router/module/defaultRoot/child/sell.js
index e1d9419..6b9a28d 100644
--- a/vue/src/router/module/defaultRoot/child/sell.js
+++ b/vue/src/router/module/defaultRoot/child/sell.js
@@ -16,7 +16,7 @@ const router = {
meta: {
title: '销售订单详情页',
hidden: true,
- breadcrumb: false,
+ pageHeader: false,
dynamicTitle(to) {
const {type, id} = to.params
switch (type) {
@@ -45,7 +45,7 @@ const router = {
meta: {
title: '销售出库详情页',
hidden: true,
- breadcrumb: false,
+ pageHeader: false,
dynamicTitle(to) {
const {type, id} = to.params
switch (type) {
diff --git a/vue/src/util/browser.js b/vue/src/util/browser.js
index 3f0d410..7b3f335 100644
--- a/vue/src/util/browser.js
+++ b/vue/src/util/browser.js
@@ -1,9 +1,9 @@
const {body} = document
-const WIDTH = 768
+const MAX_MOBILE_WIDTH = 500
export function isMobile() {
const rect = body.getBoundingClientRect()
- return rect.width - 1 < WIDTH
+ return rect.width - 1 < MAX_MOBILE_WIDTH
}
//获取元素的内宽度
@@ -14,7 +14,6 @@ export function getElementInnerWidth(ele) {
return parseFloat(style.width) - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight))
}
-//获取元素的高度
export function getElementHeight(ele, style) {
if (!ele) return 0
diff --git a/vue/src/view/app/common/DetailPage/style.scss b/vue/src/view/app/common/DetailPage/style.scss
index 6207528..0371dde 100644
--- a/vue/src/view/app/common/DetailPage/style.scss
+++ b/vue/src/view/app/common/DetailPage/style.scss
@@ -24,7 +24,7 @@
width: 100%;
margin-bottom: 12px;
- @media (max-width: 768px) {
+ @include mobile {
display: block;
}
}
diff --git a/vue/src/view/app/common/ExceptionPage/index.vue b/vue/src/view/app/common/ExceptionPage/index.vue
index 7d66329..b102e6d 100644
--- a/vue/src/view/app/common/ExceptionPage/index.vue
+++ b/vue/src/view/app/common/ExceptionPage/index.vue
@@ -1,22 +1,21 @@