diff --git a/src/layout/header-aside/components/header-size/index.vue b/src/layout/header-aside/components/header-size/index.vue
index 2139767..a9025b5 100644
--- a/src/layout/header-aside/components/header-size/index.vue
+++ b/src/layout/header-aside/components/header-size/index.vue
@@ -4,17 +4,8 @@
-
- 默认
-
-
- 中
-
-
- 小
-
-
- 最小
+
+ {{item.label}}
@@ -27,27 +18,14 @@ export default {
computed: {
...mapState('d2admin/size', [
'value'
- ])
- },
- watch: {
- // 注意 这里是关键
- // 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
- value: {
- handler (val, oldVal) {
- // https://github.com/d2-projects/d2-admin/pull/129
- if (oldVal) {
- // 这个情况在已经加载完页面 用户改变了尺寸时触发
- this.$ELEMENT.size = val
- // 由于已经加载过设置 需要清空缓存设置
- this.pageKeepAliveClean()
- // 由于已经加载过设置 需要刷新此页面
- this.$router.replace('/refresh')
- } else {
- // 这个情况在刷新页面时触发
- this.$ELEMENT.size = val
- }
- },
- immediate: true
+ ]),
+ options () {
+ return [
+ { label: this.$t('layout.header-aside.header-size.options.default'), value: 'default' },
+ { label: this.$t('layout.header-aside.header-size.options.medium'), value: 'medium' },
+ { label: this.$t('layout.header-aside.header-size.options.small'), value: 'small' },
+ { label: this.$t('layout.header-aside.header-size.options.mini'), value: 'mini' }
+ ]
}
},
methods: {
@@ -59,6 +37,12 @@ export default {
}),
handleChange (value) {
this.sizeSet(value)
+ this.$notify({
+ title: this.$t('public.notify.special.component-size.changed.title'),
+ dangerouslyUseHTMLString: true,
+ message: this.$t('public.notify.special.component-size.changed.message'),
+ type: 'success'
+ })
},
iconName (name) {
return name === this.value ? 'dot-circle-o' : 'circle-o'
diff --git a/src/router/index.js b/src/router/index.js
index be69996..5b49b93 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,7 +23,11 @@ const router = new VueRouter({
* 路由拦截
* 权限验证
*/
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+ // 确认已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
+ await store.dispatch('d2admin/page/isLoaded')
+ // 确认已经加载组件尺寸设置 https://github.com/d2-projects/d2-admin/issues/198
+ await store.dispatch('d2admin/size/isLoaded')
// 进度条
NProgress.start()
// 关闭搜索面板
@@ -53,17 +57,9 @@ router.beforeEach((to, from, next) => {
}
})
-router.afterEach(async to => {
+router.afterEach(to => {
// 进度条
NProgress.done()
- // 等待数据加载 https://github.com/d2-projects/d2-admin/issues/201
- await new Promise (resolve => {
- const timer = setInterval(() => {
- if (store.state.d2admin.page.openedLoaded) {
- resolve(clearInterval(timer))
- }
- }, 10)
- })
// 多页控制 打开新的页面
store.dispatch('d2admin/page/open', to)
// 更改标题
diff --git a/src/store/modules/d2admin/modules/page.js b/src/store/modules/d2admin/modules/page.js
index 9497ec4..f6db6b6 100644
--- a/src/store/modules/d2admin/modules/page.js
+++ b/src/store/modules/d2admin/modules/page.js
@@ -12,7 +12,7 @@ export default {
pool: [],
// 当前显示的多页面列表
opened: setting.page.opened,
- // 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
+ // 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
openedLoaded: false,
// 当前页面
current: '',
@@ -20,6 +20,19 @@ export default {
keepAlive: []
},
actions: {
+ /**
+ * @description 确认已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
+ */
+ isLoaded ({ state }) {
+ if (state.value) return Promise.resolve()
+ return new Promise(resolve => {
+ const timer = setInterval(() => {
+ if (state.openedLoaded) {
+ resolve(clearInterval(timer))
+ }
+ }, 10)
+ })
+ },
/**
* @class opened
* @description 从持久化数据载入标签页列表
diff --git a/src/store/modules/d2admin/modules/size.js b/src/store/modules/d2admin/modules/size.js
index a7d3416..e5bdb4a 100644
--- a/src/store/modules/d2admin/modules/size.js
+++ b/src/store/modules/d2admin/modules/size.js
@@ -1,3 +1,6 @@
+import Vue from 'vue'
+import router from '@/router'
+
export default {
namespaced: true,
state: {
@@ -5,6 +8,30 @@ export default {
value: '' // medium small mini
},
actions: {
+ /**
+ * @description 将当前的设置应用到 element
+ * @param {Boolean} refresh 是否在设置之后刷新页面
+ */
+ apply ({ state, commit }, refresh) {
+ Vue.prototype.$ELEMENT.size = state.value
+ if (refresh) {
+ commit('d2admin/page/keepAliveClean', null, { root: true })
+ router.replace('/refresh')
+ }
+ },
+ /**
+ * @description 确认已经加载组件尺寸设置 https://github.com/d2-projects/d2-admin/issues/198
+ */
+ isLoaded ({ state }) {
+ if (state.value) return Promise.resolve()
+ return new Promise(resolve => {
+ const timer = setInterval(() => {
+ if (state.value) {
+ resolve(clearInterval(timer))
+ }
+ }, 10)
+ })
+ },
/**
* @description 设置尺寸
* @param {Object} state vuex state
@@ -14,6 +41,8 @@ export default {
return new Promise(async resolve => {
// store 赋值
state.value = size
+ // 应用
+ dispatch('apply', true)
// 持久化
await dispatch('d2admin/db/set', {
dbName: 'sys',
@@ -38,6 +67,8 @@ export default {
defaultValue: 'default',
user: true
}, { root: true })
+ // 应用
+ dispatch('apply')
// end
resolve()
})