命名修改以及菜单控制演示页面

Former-commit-id: 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 76944a9d40ab38c17539c3e04fa1b32821254495 [formerly 26802a8e2a1b4092bf2d19e341dde2fbe6761dc2 [formerly 041aaa709feee4a170f5b9b55403b5316e5a70d3]]]]]
Former-commit-id: c0ff8f0aa986769fc2e9957d5ff90d55ac191ec8
Former-commit-id: 9169398f65367c84e9d61fd28bdb1eeb0e22945c
Former-commit-id: 25066fd9231ffe2f3beaf335a333196a901f3d02 [formerly fe4024c634332eccd5a3c7ae11e692f8bae2d081]
Former-commit-id: 1eb48f78ae708f37ef9b9b5abbf5ac0cc6d855ad
Former-commit-id: c02929a32cd82760dff684d022456a9e0da28f8c
Former-commit-id: 46aa87ff0f2bcc71de6d8956b8d5a439b7dd19ae
Former-commit-id: 0a89d86ff625e9981444022a0d731352c71bedd0
Former-commit-id: 4e7fc917398365a853edebdd19f94bad9e67dbc8

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

@@ -1,6 +1,6 @@
 <template>
   <el-menu mode="horizontal" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in menusHeader">
+    <template v-for="(menu, menuIndex) in menuHeader">
       <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
       <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
     </template>
@@ -23,7 +23,7 @@ export default {
   },
   computed: {
     ...mapState({
-      menusHeader: state => state.d2admin.menusHeader
+      menuHeader: state => state.d2admin.menuHeader
     })
   }
 }

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

@@ -6,12 +6,12 @@
       :default-active="active"
       ref="menu"
       @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in menusAside">
+      <template v-for="(menu, menuIndex) in menuAside">
         <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
         <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
       </template>
     </el-menu>
-    <div v-if="menusAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
+    <div v-if="menuAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
       <d2-icon name="inbox"/>
       <span>没有侧栏菜单</span>
     </div>
@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     ...mapState({
-      menusAside: state => state.d2admin.menusAside,
+      menuAside: state => state.d2admin.menuAside,
       isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
     })
   },
@@ -59,7 +59,7 @@ export default {
       handler (val) {
         this.active = val[val.length - 1].path
         this.$nextTick(() => {
-          if (this.menusAside.length > 0) {
+          if (this.menuAside.length > 0) {
             this.$refs.menu.activeIndex = this.active
           }
         })

src/main.js

@@ -14,7 +14,7 @@ import i18n from './i18n'
 import util from '@/libs/util'
 import store from '@/store/index'
 import { frameInRoutes } from '@/router/routes'
-import { menusAside, menusHeader } from '@/menu'
+import { menuAside, menuHeader } from '@/menu'
 import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
 import '@/assets/library/highlight/styles/atom-one-light.css'
 import '@/assets/svg-icons'
@@ -48,7 +48,7 @@ new Vue({
     // 处理路由 得到每一级的路由设置
     this.getAllTagFromRoutes()
     // 设置顶栏菜单
-    this.$store.commit('d2adminMenusHeaderSet', menusHeader)
+    this.$store.commit('d2adminMenuHeaderSet', menuHeader)
   },
   mounted () {
     // D2Admin 开发环境检查更新
@@ -65,8 +65,8 @@ new Vue({
   watch: {
     // 监听路由 控制侧边栏显示
     '$route.matched' (val) {
-      const _side = menusAside.filter(menu => menu.path === val[0].path)
+      const _side = menuAside.filter(menu => menu.path === val[0].path)
-      this.$store.commit('d2adminMenusAsideSet', _side.length > 0 ? _side[0].children : [])
+      this.$store.commit('d2adminMenuAsideSet', _side.length > 0 ? _side[0].children : [])
     }
   },
   methods: {

src/menu/index.js

@@ -10,7 +10,7 @@ import demoElement from './modules/demo-element'
 import demoPlayground from './modules/demo-playground'
 
 // 菜单 侧边栏
-export const menusAside = [
+export const menuAside = [
   demoPlugins,
   demoComponents,
   demoCharts,
@@ -19,7 +19,7 @@ export const menusAside = [
 ]
 
 // 菜单 顶栏
-export const menusHeader = [
+export const menuHeader = [
   {
     path: '/index',
     title: '首页',

src/menu/modules/demo-playground.js

@@ -28,6 +28,7 @@ export default {
       icon: 'bolt',
       children: [
         { path: `${pre}store/sys`, title: '系统状态', icon: 'microchip' },
+        { path: `${pre}store/menu`, title: '菜单控制', icon: 'bars' },
         { path: `${pre}store/ua`, title: '浏览器信息', icon: 'info-circle' },
         { path: `${pre}store/gray`, title: '灰度模式', icon: 'eye' },
         { path: `${pre}store/fullscreen`, title: '全屏', icon: 'arrows-alt' },

src/pages/demo/playground/store/menu/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <d2-container type="ghost">
+    <el-row :gutter="20" class="d2-mt d2-mr-10 d2-mb">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template slot="header">顶栏菜单</template>
+          <el-button-group class="d2-mb">
+            <el-button @click="handleMenuHeaderSet">设置空菜单</el-button>
+            <el-button @click="menuHeaderReset">恢复</el-button>
+          </el-button-group>
+          <div style="height: 400px; overflow: auto;">
+            <tree-view
+              class="tree-view-small"
+              :data="menuHeader"
+              :options="{
+                rootObjectKey: 'menuHeader',
+                maxDepth: 1
+              }"/>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template slot="header">侧栏菜单</template>
+          <el-button-group class="d2-mb">
+            <el-button @click="handleMenuAsideSet">设置空菜单</el-button>
+            <el-button @click="menuAsideReset">恢复</el-button>
+          </el-button-group>
+          <div style="height: 400px; overflow: auto;">
+            <tree-view
+              class="tree-view-small"
+              :data="menuAside"
+              :options="{
+                rootObjectKey: 'menuAside',
+                maxDepth: 1
+              }"/>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+import clonedeep from 'lodash.clonedeep'
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      menuEmpty: [
+        {
+          title: '空菜单演示',
+          icon: 'folder-o',
+          children: [
+            {
+              title: '空菜单 1',
+              children: [
+                { title: '空菜单 1-1' },
+                { title: '空菜单 1-2' }
+              ]
+            },
+            { title: '空菜单 2' },
+            { title: '空菜单 3' }
+          ]
+        }
+      ],
+      menuHeaderChanged: false,
+      menuAsideChanged: false,
+      menuHeaderBak: [],
+      menuAsideBak: []
+    }
+  },
+  computed: {
+    ...mapState({
+      menuHeader: state => state.d2admin.menuHeader,
+      menuAside: state => state.d2admin.menuAside
+    })
+  },
+  created () {
+    this.menuHeaderBak = clonedeep(this.menuHeader)
+    this.menuAsideBak = clonedeep(this.menuAside)
+  },
+  beforeDestroy () {
+    if (this.menuHeaderChanged && this.menuAsideChanged) {
+      this.menuHeaderReset()
+      this.menuAsideReset()
+      this.$notify({
+        title: '菜单恢复',
+        message: '对侧边栏和顶栏菜单的修改已经复原',
+        type: 'success'
+      })
+      return
+    }
+    if (this.menuHeaderChanged) {
+      this.menuHeaderReset()
+      this.$notify({
+        title: '菜单恢复',
+        message: '对顶栏菜单的修改已经复原',
+        type: 'success'
+      })
+      return
+    }
+    if (this.menuAsideChanged) {
+      this.menuAsideReset()
+      this.$notify({
+        title: '菜单恢复',
+        message: '对侧边栏菜单的修改已经复原',
+        type: 'success'
+      })
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminMenuHeaderSet',
+      'd2adminMenuAsideSet'
+    ]),
+    /**
+     * 修改顶栏菜单
+     */
+    handleMenuHeaderSet () {
+      this.menuHeaderChanged = true
+      this.d2adminMenuHeaderSet(this.menuEmpty)
+    },
+    /**
+     * 修改侧边栏菜单
+     */
+    handleMenuAsideSet () {
+      this.menuAsideChanged = true
+      this.d2adminMenuAsideSet(this.menuEmpty)
+    },
+    /**
+     * 恢复顶栏菜单
+     */
+    menuHeaderReset () {
+      this.d2adminMenuHeaderSet(this.menuHeaderBak)
+    },
+    /**
+     * 恢复侧边栏菜单
+     */
+    menuAsideReset () {
+      this.d2adminMenuAsideSet(this.menuAsideBak)
+    }
+  }
+}
+</script>

src/pages/demo/playground/store/sys/index.vue

@@ -7,7 +7,7 @@
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">顶栏菜单数据</template>
             <div style="height: 300px; overflow: auto;">
-              <tree-view class="tree-view-small" :data="menusHeader" :options="{ rootObjectKey: 'menusHeader', maxDepth: 2 }"/>
+              <tree-view class="tree-view-small" :data="menuHeader" :options="{ rootObjectKey: 'menuHeader', maxDepth: 2 }"/>
             </div>
           </el-card>
         </el-col>
@@ -15,7 +15,7 @@
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">侧边栏菜单数据</template>
             <div style="height: 300px; overflow: auto;">
-              <tree-view class="tree-view-small" :data="menusAside" :options="{ rootObjectKey: 'menusAside', maxDepth: 1 }"/>
+              <tree-view class="tree-view-small" :data="menuAside" :options="{ rootObjectKey: 'menuAside', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -113,8 +113,8 @@ export default {
       version: state => state.d2admin.version,
       releasesLatest: state => state.d2admin.releasesLatest,
       releasesUpdate: state => state.d2admin.releasesUpdate,
-      menusHeader: state => state.d2admin.menusHeader,
+      menuHeader: state => state.d2admin.menuHeader,
-      menusAside: state => state.d2admin.menusAside,
+      menuAside: state => state.d2admin.menuAside,
       isFullScreen: state => state.d2admin.isFullScreen,
       isGrayMode: state => state.d2admin.isGrayMode,
       isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse,

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-22470549b36a73bc9a0ff2a817ed9c1f162d0108
+c908393a42fbdbb90006fb0e0678b5136c78908a

src/store/modules/d2admin.js.REMOVED.git-id

@@ -1 +1 @@
-a90ea1c26136a74ab078f2212cd396b2dfe12c13
+2372f09c3e06b1cc538901de0bb6cd6c3c21b8f2