toesbieya
5 years ago
parent
9ba53f7dbe
commit
21f31cfed1
@ -0,0 +1,25 @@ |
|||||||
|
<script> |
||||||
|
import NotifyBell from '../NotifyBell' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "HeaderRight", |
||||||
|
|
||||||
|
functional: true, |
||||||
|
|
||||||
|
props: {default: Array}, |
||||||
|
|
||||||
|
render(h, context) { |
||||||
|
const custom = [ |
||||||
|
<NotifyBell class="header-item"/>, |
||||||
|
<div |
||||||
|
class="setting-btn header-item" |
||||||
|
title="个性设置" |
||||||
|
on-click={context.parent.openSettingDrawer} |
||||||
|
> |
||||||
|
<i class="el-icon-s-operation header-icon"/> |
||||||
|
</div> |
||||||
|
] |
||||||
|
return custom.concat(context.props.default) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -1,17 +1,26 @@ |
|||||||
@import "~@/asset/style/var"; |
@import "~@/asset/style/var"; |
||||||
@import "./component/checkbox/style"; |
@import "./component/checkbox/style"; |
||||||
|
|
||||||
.drawer-container { |
.setting-drawer { |
||||||
padding: 24px; |
overflow-y: auto; |
||||||
font-size: 14px; |
|
||||||
line-height: 1.5; |
.el-drawer__body { |
||||||
word-wrap: break-word; |
padding: $--dialog-padding-primary; |
||||||
|
} |
||||||
|
|
||||||
.drawer-item { |
&-item { |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
color: $--color-text-regular; |
color: $--color-text-regular; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
padding: 12px 0; |
padding: 12px 0; |
||||||
} |
} |
||||||
|
|
||||||
|
.el-select { |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-button { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,117 @@ |
|||||||
|
import {mergeObj} from "@/util" |
||||||
|
import {getLocalPersonalSettings, setLocalPersonalSettings} from '@/util/storage' |
||||||
|
import { |
||||||
|
appMutations, |
||||||
|
asideMutations, |
||||||
|
headerMutations, |
||||||
|
pageMutations, |
||||||
|
tagsViewMutations |
||||||
|
} from "el-admin-layout" |
||||||
|
|
||||||
|
const noop = () => undefined |
||||||
|
|
||||||
|
function getLayoutMutationsByType(type) { |
||||||
|
switch (type) { |
||||||
|
case 'app': |
||||||
|
return appMutations |
||||||
|
case 'aside': |
||||||
|
return asideMutations |
||||||
|
case 'header': |
||||||
|
return headerMutations |
||||||
|
case 'page': |
||||||
|
return pageMutations |
||||||
|
case 'tagsView': |
||||||
|
return tagsViewMutations |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//app.navMode -> commit('setting/app/navMode')
|
||||||
|
function createMutations(state, mutations = Object.create(null), parentType = '') { |
||||||
|
Object.entries(state).forEach(([k, v]) => { |
||||||
|
const type = parentType ? `${parentType}/${k}` : k |
||||||
|
|
||||||
|
if (v !== null && typeof v === 'object') { |
||||||
|
return createMutations(v, mutations, type) |
||||||
|
} |
||||||
|
|
||||||
|
//反正只有两项，偷个懒
|
||||||
|
const [mutationType, mutationProp] = type.split('/') |
||||||
|
const layoutMutation = (() => { |
||||||
|
const fun = getLayoutMutationsByType(mutationType)[mutationProp] |
||||||
|
|
||||||
|
//像tagsView中就有两项是没有对应的修改方法的
|
||||||
|
return fun ? newVal => fun(newVal) : noop |
||||||
|
})() |
||||||
|
|
||||||
|
mutations[type] = (s, v) => { |
||||||
|
const val = s[mutationType] |
||||||
|
|
||||||
|
if (val[mutationProp] === v) return |
||||||
|
|
||||||
|
val[mutationProp] = v |
||||||
|
layoutMutation(v) |
||||||
|
setLocalPersonalSettings(s) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
return mutations |
||||||
|
} |
||||||
|
|
||||||
|
//将此处的设置项数据同步到layout中的store
|
||||||
|
function syncLayoutStore(state) { |
||||||
|
const {app, page, aside, header, tagsView} = state |
||||||
|
|
||||||
|
Object.entries(app).forEach(([k, v]) => appMutations[k](v)) |
||||||
|
|
||||||
|
Object.entries(page).forEach(([k, v]) => pageMutations[k](v)) |
||||||
|
|
||||||
|
Object.entries(aside).forEach(([k, v]) => asideMutations[k](v)) |
||||||
|
|
||||||
|
Object.entries(header).forEach(([k, v]) => headerMutations[k](v)) |
||||||
|
|
||||||
|
tagsViewMutations.enabled(tagsView.enabled) |
||||||
|
tagsViewMutations.enableCache(tagsView.enableCache) |
||||||
|
} |
||||||
|
|
||||||
|
const state = { |
||||||
|
app: { |
||||||
|
showLogo: true, |
||||||
|
struct: 'left-right', |
||||||
|
navMode: 'mix' |
||||||
|
}, |
||||||
|
page: { |
||||||
|
showHeader: true, |
||||||
|
showFooter: true |
||||||
|
}, |
||||||
|
aside: { |
||||||
|
theme: 'dark', |
||||||
|
uniqueOpen: true, |
||||||
|
collapse: false, |
||||||
|
showParentOnCollapse: false, |
||||||
|
autoHide: false |
||||||
|
}, |
||||||
|
header: { |
||||||
|
theme: 'dark' |
||||||
|
}, |
||||||
|
tagsView: { |
||||||
|
enabled: true, |
||||||
|
enableCache: true, |
||||||
|
shortcut: true, |
||||||
|
persistent: true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mutations = createMutations(state) |
||||||
|
|
||||||
|
//将本地存储的数据合并到此处
|
||||||
|
mergeObj(state, getLocalPersonalSettings()) |
||||||
|
//由于数据结构可能发生变化，所以在合并后覆盖本地数据
|
||||||
|
setLocalPersonalSettings(state) |
||||||
|
|
||||||
|
syncLayoutStore(state) |
||||||
|
|
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state, |
||||||
|
mutations |
||||||
|
} |
||||||
Loading…
Reference in new issue