From 0419a070413be34ea5455ed955fa51d8c522da86 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Fri, 1 Jan 2021 23:03:40 +0800
Subject: [PATCH] feat(menu): add mixSideTrigger setting

---
 CHANGELOG.zh_CN.md                     |  6 +++++
 src/hooks/setting/useMenuSetting.ts    |  3 +++
 src/layouts/default/sider/MixSider.vue | 33 +++++++++++++++++++++++---
 src/settings/projectSetting.ts         |  2 ++
 src/types/config.d.ts                  |  1 +
 5 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 1ee59e8a..1ebcd97b 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,9 @@
+## Wip
+
+### ✨ Features
+
+- 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
+
 ## 2.0.0-rc.15 (2020-12-31)
 
 ### ✨ 表格破坏性更新
diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
index ae393ce6..566b6a22 100644
--- a/src/hooks/setting/useMenuSetting.ts
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -33,6 +33,8 @@ const getSplit = computed(() => unref(getMenuSetting).split);
 
 const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
 
+const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);
+
 const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
 
 const getAccordion = computed(() => unref(getMenuSetting).accordion);
@@ -145,5 +147,6 @@ export function useMenuSetting() {
     getIsMixMode,
     getIsMixSidebar,
     getCloseMixSidebarOnChange,
+    getMixSideTrigger,
   };
 }
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 3f656d29..96608f94 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -10,6 +10,7 @@
         open: openMenu,
       },
     ]"
+    v-bind="getMenuEvents"
   >
     <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
     <ScrollContainer>
@@ -23,7 +24,7 @@
           ]"
           v-for="item in menuModules"
           :key="item.path"
-          @click="hanldeModuleClick(item.path)"
+          v-bind="getItemEvents(item)"
         >
           <MenuTag :item="item" :showTitle="false" :isHorizontal="false" />
           <g-icon
@@ -112,6 +113,7 @@
         getCanDrag,
         getCloseMixSidebarOnChange,
         getMenuTheme,
+        getMixSideTrigger,
       } = useMenuSetting();
       const { title } = useGlobSetting();
 
@@ -125,6 +127,16 @@
         }
       );
 
+      const getMenuEvents = computed(() => {
+        return unref(getMixSideTrigger) === 'hover'
+          ? {
+              onMouseleave: () => {
+                openMenu.value = false;
+              },
+            }
+          : {};
+      });
+
       const getShowDragBar = computed(() => unref(getCanDrag));
 
       onMounted(async () => {
@@ -139,11 +151,13 @@
         }
       });
 
-      async function hanldeModuleClick(path: string) {
+      async function hanldeModuleClick(path: string, hover = false) {
         const children = await getChildrenMenus(path);
 
         if (unref(activePath) === path) {
-          openMenu.value = !unref(openMenu);
+          if (!hover) {
+            openMenu.value = !unref(openMenu);
+          }
           if (!unref(openMenu)) {
             setActive();
           }
@@ -178,6 +192,17 @@
         setActive();
       }
 
+      function getItemEvents(item: Menu) {
+        if (unref(getMixSideTrigger) === 'hover') {
+          return {
+            onMouseenter: () => hanldeModuleClick(item.path, true),
+          };
+        }
+        return {
+          onClick: () => hanldeModuleClick(item.path),
+        };
+      }
+
       return {
         t,
         prefixCls,
@@ -194,6 +219,8 @@
         title,
         openMenu,
         getMenuTheme,
+        getItemEvents,
+        getMenuEvents,
       };
     },
   });
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 567e87d8..0038332a 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -108,6 +108,8 @@ const setting: ProjectConfig = {
     accordion: true,
     // Switch page to close menu
     closeMixSidebarOnChange: false,
+    // Module opening method ‘click’ |'hover'
+    mixSideTrigger: 'hover',
   },
 
   // Multi-label
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index b578a695..15cbb558 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -20,6 +20,7 @@ export interface MenuSetting {
   accordion: boolean;
   closeMixSidebarOnChange: boolean;
   collapsedShowTitle: boolean;
+  mixSideTrigger: 'click' | 'hover';
 }
 
 export interface MultiTabsSetting {
-- 
GitLab