-
导航模式
-
+
导航模式
+
-
导航栏设置
-
- 主题风格
-
-
-
-
-
+
顶栏设置
+
+ 主题风格
+
+
+
+
+
-
侧边栏设置
-
- 主题风格
-
-
-
-
-
-
- 汉堡包位置
-
-
-
-
-
-
- 手风琴效果
-
-
-
- 折叠
-
-
-
- 折叠时显示上级
-
-
-
- 自动隐藏
-
-
-
- 显示搜索框
-
-
+
侧边栏设置
+
+ 主题风格
+
+
+
+
+
+
+ 手风琴效果
+
+
+
+ 折叠
+
+
+
+ 折叠时显示上级
+
+
+
+ 自动隐藏
+
+
-
页面设置
-
- 分层结构
-
-
-
-
-
-
- 显示logo
-
-
-
- 显示页头
-
-
-
- 显示页脚
-
-
-
- 显示返回顶部按钮
-
-
+
页面设置
+
+ 分层结构
+
+
+
+
+
+
+ 显示logo
+
+
+
+ 显示页头
+
+
+
+ 显示页脚
+
+
-
多页签设置
-
- 启用
-
-
-
- 启用缓存
-
-
-
- 启用快捷键切换
-
-
-
- 持久化
-
-
+
多页签设置
+
+ 启用
+
+
+
+ 启用缓存
+
+
+
+ 启用快捷键切换
+
+
+ 持久化
+
+
+
+
+
+ 清除设置缓存并刷新
+
@@ -133,24 +153,21 @@ import tagsViewShortcutMixin from "./mixin/tagsViewShortcut"
import CheckboxGroup from "./component/checkbox/Group"
import ColorCheckbox from "./component/checkbox/ColorCheckbox"
import ImgCheckbox from "./component/checkbox/ImgCheckbox"
-import {appMutations, asideMutations, navbarMutations, pageMutations, tagsViewMutations} from "el-admin-layout"
-import {mergeObj} from "@/util"
-import {getLocalPersonalSettings, setLocalPersonalSettings} from "@/util/storage"
+import {setLocalPersonalSettings} from "@/util/storage"
export default {
name: "SettingDrawer",
mixins: [tagsViewPersistentMixin, tagsViewShortcutMixin],
+ //让el-select的size为mini
+ provide: () => ({elFormItem: {elFormItemSize: 'mini'}}),
+
components: {CheckboxGroup, ColorCheckbox, ImgCheckbox},
data() {
return {
- //外部传入的获取vue根实例的函数
- getRoot: () => undefined,
-
visible: false,
-
navModes: [
{
label: '侧边栏导航',
@@ -166,111 +183,28 @@ export default {
label: '混合导航',
value: 'mix',
img: 'https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg'
- },
- {
- label: '双层侧边栏导航',
- value: 'aside-two-part',
- img: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg'
}
- ],
+ ]
+ }
+ },
- setting: {
- app: {
- navMode: 'mix'
- },
- page: {
- position: 'left-right',
- showLogo: true,
- showHeader: true,
- showFooter: true,
- showBackToTop: true
- },
- aside: {
- theme: 'dark',
- hamburgerPosition: 'aside',
- uniqueOpen: true,
- collapse: false,
- showParentOnCollapse: false,
- autoHide: false,
- search: true
- },
- navbar: {
- theme: 'dark'
- },
- tagsView: {
- enabled: true,
- enableCache: true,
- shortcut: true,
- persistent: true
- }
- }
+ computed: {
+ setting() {
+ return this.$store.state.setting
}
},
methods: {
- close() {
- this.visible = false
- },
-
- getMutationsByType(type) {
- switch (type) {
- case 'app':
- return appMutations
- case 'aside':
- return asideMutations
- case 'navbar':
- return navbarMutations
- case 'page':
- return pageMutations
- case 'tagsView':
- return tagsViewMutations
- }
+ //表单数据发生改变时，修改vuex的数据
+ onChange(type, val) {
+ this.$store.commit(`setting/${type}`, val)
},
- //将此处的设置项数据同步到layout中的store
- syncLayoutStore() {
- const {app, page, aside, navbar, tagsView} = this.setting
-
- 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(navbar).forEach(([k, v]) => navbarMutations[k](v))
- tagsViewMutations.enabled(tagsView.enabled)
- tagsViewMutations.enableCache(tagsView.enableCache)
+ //设置抽屉的数据结构与本地存储不一致时，可能导致layout渲染异常，所以加了这个功能
+ clearCacheAndReload() {
+ setLocalPersonalSettings()
+ window.location.reload()
}
- },
-
- created() {
- //将本地存储的数据合并到此处
- mergeObj(this.setting, getLocalPersonalSettings())
-
- //由于数据结构可能发生变化，所以在合并后覆盖本地数据
- setLocalPersonalSettings(this.setting)
-
- this.syncLayoutStore()
-
- //监听设置数据的变化
- const noop = () => undefined
- Object.entries(this.setting).forEach(([type, v]) => {
- const mutations = this.getMutationsByType(type)
-
- Object.keys(v).forEach(key => {
- const mutation = (() => {
- const fun = mutations[key]
-
- //像tagsView中就有两项是没有对应的修改方法的
- return fun ? newVal => fun(newVal) : noop
- })()
-
- this.$watch(
- `setting.${type}.${key}`,
- v => {
- mutation(v)
- setLocalPersonalSettings(this.setting)
- }
- )
- })
- })
}
}
diff --git a/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewPersistent.js b/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewPersistent.js
index 90fcb4f..bb1ec16 100644
--- a/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewPersistent.js
+++ b/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewPersistent.js
@@ -45,7 +45,7 @@ export default {
const tags = getTagsView()
Array.isArray(tags) && tags.forEach(({fullPath, meta}) => {
- const {route} = this.getRoot().$router.resolve(fullPath)
+ const {route} = this.$router.resolve(fullPath)
route && tagsViewMutations.addTagOnly({...route, meta: {...route.meta, ...meta}})
})
}
diff --git a/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewShortcut.js b/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewShortcut.js
index 3eca32d..8a877a1 100644
--- a/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewShortcut.js
+++ b/vue/full/src/layout/component/SettingDrawer/mixin/tagsViewShortcut.js
@@ -22,13 +22,10 @@ export default {
methods: {
gotoViewByDirection(direction) {
- const root = this.getRoot()
- if (!root) return
-
const views = tagsViewGetters.visitedViews
if (views.length <= 1) return
- const key = getRouterKey(root.$route)
+ const key = getRouterKey(this.$route)
let index = views.findIndex(view => view.key === key)
if (index < 0) return
@@ -41,7 +38,7 @@ export default {
index = index > views.length - 2 ? 0 : index + 1
}
- return root.$router.push(views[index])
+ return this.$router.push(views[index])
},
//快捷键监听
diff --git a/vue/full/src/layout/component/SettingDrawer/style.scss b/vue/full/src/layout/component/SettingDrawer/style.scss
index 70eef94..8081edd 100644
--- a/vue/full/src/layout/component/SettingDrawer/style.scss
+++ b/vue/full/src/layout/component/SettingDrawer/style.scss
@@ -1,17 +1,26 @@
@import "~@/asset/style/var";
@import "./component/checkbox/style";
-.drawer-container {
- padding: 24px;
- font-size: 14px;
- line-height: 1.5;
- word-wrap: break-word;
+.setting-drawer {
+ overflow-y: auto;
- .drawer-item {
+ .el-drawer__body {
+ padding: $--dialog-padding-primary;
+ }
+
+ &-item {
display: flex;
justify-content: space-between;
color: $--color-text-regular;
font-size: 14px;
padding: 12px 0;
}
+
+ .el-select {
+ width: 80px;
+ }
+
+ .el-button {
+ width: 100%;
+ }
}
diff --git a/vue/full/src/layout/index.vue b/vue/full/src/layout/index.vue
index f9c1c23..64dc06c 100644
--- a/vue/full/src/layout/index.vue
+++ b/vue/full/src/layout/index.vue
@@ -1,13 +1,34 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue/full/src/store/module/setting.js b/vue/full/src/store/module/setting.js
new file mode 100644
index 0000000..3d7fd2c
--- /dev/null
+++ b/vue/full/src/store/module/setting.js
@@ -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
+}