Merge pull request #2 from midfar/demo/left-menu

新增配置项：左侧菜单子目录气泡显示

Author: midfar

src/layout/components/Settings/index.vue

@@ -23,6 +23,11 @@
         <el-switch v-model="sidebarLogo" class="drawer-switch" />
       </div>
 
+      <div class="drawer-item">
+        <span>左侧菜单子目录气泡显示</span>
+        <el-switch v-model="secondMenuPopup" class="drawer-switch" />
+      </div>
+
     </div>
   </div>
 </template>
@@ -72,6 +77,17 @@ export default defineComponent({
           value: val
         });
       }
+    },
+    secondMenuPopup: {
+      get() {
+        return store.settings().secondMenuPopup;
+      },
+      set(val) {
+        store.settings().changeSetting({
+          key: 'secondMenuPopup',
+          value: val
+        });
+      }
     }
   },
   methods: {

src/layout/components/Sidebar/SidebarItem.vue

@@ -8,8 +8,10 @@
 
           <!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
           <template v-if="get2MetaIconPath(onlyOneChild, item)">
-            <svg-icon v-if="typeof get2MetaIconPath(onlyOneChild, item) === 'string'"
-              :icon-class="get2MetaIconPath(onlyOneChild, item)" />
+            <template v-if="typeof get2MetaIconPath(onlyOneChild, item) === 'string'">
+              <svg-icon :icon-class="get2MetaIconPath(onlyOneChild, item)" />
+              <span v-if="secondMenuPopup && isTopRoute" class="text text-one text-one-added">{{ onlyOneChild.meta.title }}</span>
+            </template>
             <component v-else :is="get2MetaIconPath(onlyOneChild, item)" class="svg-icon el-svg-icon" />
           </template>
           <template #title>
@@ -26,7 +28,7 @@
           <svg-icon v-if="typeof getMetaIconPath(item) === 'string'" :icon-class="getMetaIconPath(item)" />
           <component v-else :is="getMetaIconPath(item)" class="svg-icon el-svg-icon" />
         </template>
-        <svg-icon v-else icon-class="sub-el-icon" />
+        <!-- <svg-icon v-else icon-class="list" /> -->
         <span class="text text-two">{{ item.meta.title }}</span>
       </template>
       <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
@@ -42,6 +44,8 @@ import { isExternal } from '@/utils/validate';
 // import Item from './Item';
 import AppLink from './Link';
 import FixiOSBug from './FixiOSBug';
+import { mapState } from 'pinia';
+import store from '@/store';
 
 export default defineComponent({
   name: 'SidebarItem',
@@ -63,6 +67,10 @@ export default defineComponent({
     basePath: {
       type: String,
       default: ''
+    },
+    isTopRoute: { // 是否为顶层路由
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -72,6 +80,9 @@ export default defineComponent({
     return {};
   },
   computed: {
+    ...mapState(store.settings, {
+      secondMenuPopup: 'secondMenuPopup'
+    }),
     isItemHidden() {
       if (this.item.meta && this.item.meta.hidden) {
         return true;
@@ -125,6 +136,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .link :deep(.el-menu-tooltip__trigger) {
+  position: relative;
   padding: 0;
 }
 

src/layout/components/Sidebar/index.vue

@@ -5,7 +5,7 @@
       <el-menu class="left-menu" :default-active="activeMenu" :collapse="isCollapse"
         :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="false"
         :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" :is-top-route="true" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -39,6 +39,9 @@ export default defineComponent({
     ...mapState(store.permission, {
       permission_routes: 'routes'
     }),
+    ...mapState(store.settings, {
+      secondMenuPopup: 'secondMenuPopup'
+    }),
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
@@ -52,6 +55,9 @@ export default defineComponent({
       return store.settings().sidebarLogo;
     },
     isCollapse() {
+      if (this.secondMenuPopup) {
+        return true;
+      }
       return !this.sidebar.opened;
     }
   }

src/settings.ts

@@ -4,6 +4,7 @@ interface ISettings {
   tagsView: boolean;
   fixedHeader: boolean;
   sidebarLogo: boolean;
+  secondMenuPopup: boolean;
   errorLog: string | string[];
 }
 
@@ -34,6 +35,12 @@ const settings:ISettings = {
    */
   sidebarLogo: false,
 
+  /**
+   * @type {boolean} true | false
+   * @description 左侧菜单子目录气泡显示
+   */
+  secondMenuPopup: false,
+
   /**
    * @type {string | array} 'production' | ['production', 'development']
    * @description Need show err logs component.

src/store/modules/settings.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import defaultSettings from '@/settings';
 
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings;
+const { showSettings, tagsView, fixedHeader, sidebarLogo, secondMenuPopup } = defaultSettings;
 
 export default defineStore({
   id: 'settings',
@@ -10,7 +10,8 @@ export default defineStore({
     showSettings: showSettings,
     tagsView: tagsView,
     fixedHeader: fixedHeader,
-    sidebarLogo: sidebarLogo
+    sidebarLogo: sidebarLogo,
+    secondMenuPopup: secondMenuPopup
   }),
   getters: {},
   actions: {

src/styles/sidebar.scss

@@ -59,6 +59,7 @@
     }
 
     .svg-icon {
+      flex-shrink: 0;
       margin-right: 16px;
     }
 
@@ -108,6 +109,9 @@
     .submenu-title-noDropdown {
       padding: 0 !important;
       position: relative;
+      .text-one-added {
+        display: none;
+      }
 
       .el-tooltip {
         padding: 0 !important;
@@ -205,6 +209,10 @@
 
   .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
+    .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     &:hover {
       // you can use var(--sub-menu-hover)
       background-color: var(--menu-hover) !important;

src/views/dashboard/admin/components/RaddarChart.vue

@@ -69,12 +69,12 @@ export default defineComponent({
             }
           },
           indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Technology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
+            { name: 'Sales' },
+            { name: 'Administration' },
+            { name: 'Information Technology' },
+            { name: 'Customer Support' },
+            { name: 'Development' },
+            { name: 'Marketing' }
           ]
         },
         legend: {