优化

Former-commit-id: 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 95caeef047c0671c5888416269f14b02f1901efe [formerly b07d79ab403f2d54110a4f2b0517f84f31a3e626]]]]]
Former-commit-id: 0bdb267c08ca3fa5724ac191da95e328780f9631
Former-commit-id: a55782f9bd52e1db4add37c141fd8aee863cf436
Former-commit-id: f9f1180a18246208a8c268689f7b3316dcb1cc54 [formerly b5c2f9ae7d07b86e84d87f13ec40dfa37d5e876c]
Former-commit-id: b1b9ecb9d12c8520c02f2ce10a0a7feb30a10f04
Former-commit-id: 5c344f906ccdc1bb33537959621a6f7e864b3ea4
Former-commit-id: 19bb1c83218a59143ab0563bd427bda85d7aede9
Former-commit-id: e75d98106a692cb9926921abeae6e424a2a6cef7
Former-commit-id: 718eb8c888c8c2518dee4ed6c909d1928c2217f4

src/layout/header-aside/components/menu-side/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d2-layout-header-aside-menu-side">
     <el-menu
-      :collapse="collapse"
+      :collapse="isMenuAsideCollapse"
       :unique-opened="true"
       :default-active="active"
       ref="menu"
@@ -11,7 +11,7 @@
         <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
       </template>
     </el-menu>
-    <div v-if="menusAside.length === 0 && !collapse" class="d2-layout-header-aside-menu-empty">
+    <div v-if="menusAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
       <d2-icon name="hdd-o"/>
       <span>当前目录没有菜单</span>
     </div>
@@ -33,13 +33,6 @@ export default {
     'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
     'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
   },
-  props: {
-    collapse: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
   data () {
     return {
       active: '',
@@ -49,12 +42,13 @@ export default {
   },
   computed: {
     ...mapState({
-      menusAside: state => state.d2admin.menusAside
+      menusAside: state => state.d2admin.menusAside,
+      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
     })
   },
   watch: {
     // 折叠和展开菜单的时候销毁 better scroll
-    collapse (val) {
+    isMenuAsideCollapse (val) {
       this.scrollDestroy()
       setTimeout(() => {
         this.scrollInit()

src/layout/header-aside/layout.vue

@@ -9,11 +9,11 @@
     <div class="d2-layout-header-aside-content">
       <!-- 顶栏 -->
       <div class="d2-theme-header">
-        <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <img v-if="collapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
+        <div class="logo-group" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
+          <img v-if="isMenuAsideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </div>
-        <div class="toggle-aside-btn" @click="collapse = !collapse">
+        <div class="toggle-aside-btn" @click="handleToggleAside">
           <d2-icon name="bars"/>
         </div>
         <d2-menu-header/>
@@ -28,8 +28,8 @@
       <!-- 下面 主体 -->
       <div class="d2-theme-container">
         <!-- 主体 侧边栏 -->
-        <div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <d2-menu-side :collapse="collapse"/>
+        <div ref="aside" class="d2-theme-container-aside" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
+          <d2-menu-side/>
         </div>
         <!-- 主体 -->
         <div class="d2-theme-container-main">
@@ -38,7 +38,7 @@
           </div>
           <div class="d2-theme-container-main-body">
             <transition name="fade-transverse">
-              <keep-alive :include="keepAliveList">
+              <keep-alive :include="d2adminKeepAliveList">
                 <router-view/>
               </keep-alive>
             </transition>
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 
 import menuSide from './components/menu-side'
 import menuHeader from './components/menu-header'
@@ -73,7 +73,6 @@ export default {
   },
   data () {
     return {
-      collapse: false,
       // [侧边栏宽度] 正常状态
       asideWidth: '200px',
       // [侧边栏宽度] 折叠状态
@@ -83,17 +82,13 @@ export default {
   computed: {
     ...mapState({
       isGrayMode: state => state.d2admin.isGrayMode,
-      pageOpenedList: state => state.d2admin.pageOpenedList
+      pageOpenedList: state => state.d2admin.pageOpenedList,
+      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
     }),
     ...mapGetters([
-      'themeActiveSetting'
+      'themeActiveSetting',
+      'd2adminKeepAliveList'
     ]),
-    /**
-     * @description 返回现在需要缓存的页面 name 数组
-     */
-    keepAliveList () {
-      return this.pageOpenedList.filter(item => !(item.meta && item.meta.notCache)).map(e => e.name)
-    },
     /**
      * @description 最外层容器的背景图片样式
      */
@@ -104,6 +99,17 @@ export default {
         } : {}
       }
     }
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminMenuAsideCollapseToggle'
+    ]),
+    /**
+     * 接收点击切换侧边栏的按钮
+     */
+    handleToggleAside () {
+      this.d2adminMenuAsideCollapseToggle()
+    }
   }
 }
 </script>