fix https://github.com/d2-projects/d2-admin/issues/198

Former-commit-id: 20a4c0f64172d14da9e3e58142f1560ffae46db2

src/layout/header-aside/components/header-size/index.vue

@@ -4,17 +4,8 @@
       <d2-icon name="font" style="font-size: 16px;"/>
     </el-button>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="default">
-        <d2-icon :name="iconName('default')" class="d2-mr-5"/>默认
-      </el-dropdown-item>
-      <el-dropdown-item command="medium">
-        <d2-icon :name="iconName('medium')" class="d2-mr-5"/>中
-      </el-dropdown-item>
-      <el-dropdown-item command="small">
-        <d2-icon :name="iconName('small')" class="d2-mr-5"/>小
-      </el-dropdown-item>
-      <el-dropdown-item command="mini">
-        <d2-icon :name="iconName('mini')" class="d2-mr-5"/>最小
+      <el-dropdown-item v-for="item in options" :key="item.value" :command="item.value">
+        <d2-icon :name="iconName(item.value)" class="d2-mr-5"/>{{item.label}}
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -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'

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)
   // 更改标题

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 从持久化数据载入标签页列表

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()
       })