perf(menu): mixSideTrigger setting (#155)

vbenjs · Jan 2, 2021 · e821f4c · e821f4c
1 parent af55511
commit e821f4c
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 5 deletions.
diff --git a/src/enums/menuEnum.ts b/src/enums/menuEnum.ts
@@ -43,3 +43,8 @@ export enum TopMenuAlignEnum {
   START = 'start',
   END = 'end',
 }
+
+export enum MixSidebarTriggerEnum {
+  HOVER = 'hover',
+  CLICK = 'click',
+}
diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
@@ -28,6 +28,7 @@ import {
   getMenuTriggerOptions,
   routerTransitionOptions,
   menuTypeList,
+  mixSidebarTriggerOptions,
 } from './enum';
 
 import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/colorSetting';
@@ -73,6 +74,7 @@ export default defineComponent({
       getSplit,
       getIsMixSidebar,
       getCloseMixSidebarOnChange,
+      getMixSideTrigger,
     } = useMenuSetting();
 
     const {
@@ -115,6 +117,14 @@ export default defineComponent({
             def={unref(getCloseMixSidebarOnChange)}
             disabled={!unref(getIsMixSidebar)}
           />
+
+          <SelectItem
+            title={t('layout.setting.mixSidebarTrigger')}
+            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
+            def={unref(getMixSideTrigger)}
+            options={mixSidebarTriggerOptions}
+            disabled={!unref(getIsMixSidebar)}
+          />
         </>
       );
     }

diff --git a/src/layouts/default/setting/enum.ts b/src/layouts/default/setting/enum.ts
@@ -1,5 +1,11 @@
 import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
-import { MenuModeEnum, MenuTypeEnum, TopMenuAlignEnum, TriggerEnum } from '/@/enums/menuEnum';
+import {
+  MenuModeEnum,
+  MenuTypeEnum,
+  TopMenuAlignEnum,
+  TriggerEnum,
+  MixSidebarTriggerEnum,
+} from '/@/enums/menuEnum';
 
 import { useI18n } from '/@/hooks/web/useI18n';
 
@@ -20,6 +26,7 @@ export enum HandlerEnum {
   MENU_SPLIT,
   MENU_FIXED,
   MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,
+  MENU_TRIGGER_MIX_SIDEBAR,
 
   // header
   HEADER_SHOW,
@@ -132,3 +139,14 @@ export const menuTypeList = [
     type: MenuTypeEnum.MIX_SIDEBAR,
   },
 ];
+
+export const mixSidebarTriggerOptions = [
+  {
+    value: MixSidebarTriggerEnum.HOVER,
+    label: t('layout.setting.triggerHover'),
+  },
+  {
+    value: MixSidebarTriggerEnum.CLICK,
+    label: t('layout.setting.triggerClick'),
+  },
+];
diff --git a/src/layouts/default/setting/handler.ts b/src/layouts/default/setting/handler.ts
@@ -67,6 +67,9 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
     case HandlerEnum.MENU_FIXED:
       return { menuSetting: { fixed: value } };
 
+    case HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR:
+      return { menuSetting: { mixSideTrigger: value } };
+
     // ============transition==================
     case HandlerEnum.OPEN_PAGE_LOADING:
       appStore.commitPageLoadingState(false);

diff --git a/src/locales/lang/en/layout/setting.ts b/src/locales/lang/en/layout/setting.ts
@@ -73,4 +73,8 @@ export default {
 
   fixedHeader: 'Fixed header',
   fixedSideBar: 'Fixed Sidebar',
+
+  mixSidebarTrigger: 'Mixed menu Trigger',
+  triggerHover: 'Hover',
+  triggerClick: 'Click',
 };
diff --git a/src/locales/lang/zh_CN/layout/setting.ts b/src/locales/lang/zh_CN/layout/setting.ts
@@ -72,4 +72,8 @@ export default {
 
   fixedHeader: '固定header',
   fixedSideBar: '固定Sidebar',
+
+  mixSidebarTrigger: '混合菜单触发方式',
+  triggerHover: '悬停',
+  triggerClick: '点击',
 };
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
@@ -1,6 +1,6 @@
 import type { ProjectConfig } from '/@/types/config';
 
-import { MenuTypeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
 import { CacheTypeEnum } from '/@/enums/cacheEnum';
 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { primaryColor } from '../../build/config/lessModifyVars';
@@ -109,7 +109,7 @@ const setting: ProjectConfig = {
     // Switch page to close menu
     closeMixSidebarOnChange: false,
     // Module opening method ‘click’ |'hover'
-    mixSideTrigger: 'click',
+    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
   },
 
   // Multi-label

diff --git a/src/types/config.d.ts b/src/types/config.d.ts
@@ -1,4 +1,4 @@
-import { MenuTypeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { CacheTypeEnum } from '/@/enums/cacheEnum';
 import type { LocaleType } from '/@/locales/types';
@@ -20,7 +20,7 @@ export interface MenuSetting {
   accordion: boolean;
   closeMixSidebarOnChange: boolean;
   collapsedShowTitle: boolean;
-  mixSideTrigger: 'click' | 'hover';
+  mixSideTrigger: MixSidebarTriggerEnum;
 }
 
 export interface MultiTabsSetting {