perf: optimize settingDrawer code

src/layouts/default/setting/SettingDrawer.tsx

@@ -2,14 +2,7 @@ import { defineComponent, computed, unref, ref } from 'vue';
 import { BasicDrawer } from '/@/components/Drawer/index';
 import { Divider, Switch, Tooltip, InputNumber, Select } from 'ant-design-vue';
 import Button from '/@/components/Button/index.vue';
-import {
-  MenuModeEnum,
-  MenuTypeEnum,
-  MenuThemeEnum,
-  TopMenuAlignEnum,
-  TriggerEnum,
-} from '/@/enums/menuEnum';
-import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 import { CopyOutlined, RedoOutlined, CheckOutlined } from '@ant-design/icons-vue';
 import { appStore } from '/@/store/modules/app';
 import { userStore } from '/@/store/modules/user';
@@ -24,70 +17,15 @@ import mixImg from '/@/assets/images/layout/menu-mix.svg';
 import sidebarImg from '/@/assets/images/layout/menu-sidebar.svg';
 import menuTopImg from '/@/assets/images/layout/menu-top.svg';
 import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
-
-const themeOptions = [
-  {
-    value: MenuThemeEnum.LIGHT,
-    label: '亮色',
-  },
-  {
-    value: MenuThemeEnum.DARK,
-    label: '暗色',
-  },
-];
-const contentModeOptions = [
-  {
-    value: ContentEnum.FULL,
-    label: '流式',
-  },
-  {
-    value: ContentEnum.FIXED,
-    label: '定宽',
-  },
-];
-const topMenuAlignOptions = [
-  {
-    value: TopMenuAlignEnum.CENTER,
-    label: '居中',
-  },
-  {
-    value: TopMenuAlignEnum.START,
-    label: '居左',
-  },
-  {
-    value: TopMenuAlignEnum.END,
-    label: '居右',
-  },
-];
-
-const menuTriggerOptions = [
-  {
-    value: TriggerEnum.NONE,
-    label: '不显示',
-  },
-  {
-    value: TriggerEnum.FOOTER,
-    label: '底部',
-  },
-  {
-    value: TriggerEnum.HEADER,
-    label: '顶部',
-  },
-];
-
-const routerTransitionOptions = [
-  RouterTransitionEnum.ZOOM_FADE,
-  RouterTransitionEnum.FADE,
-  RouterTransitionEnum.ZOOM_OUT,
-  RouterTransitionEnum.FADE_SIDE,
-  RouterTransitionEnum.FADE_BOTTOM,
-].map((item) => {
-  return {
-    label: item,
-    value: item,
-    key: item,
-  };
-});
+import { baseHandler } from './handler';
+import {
+  HandlerEnum,
+  themeOptions,
+  contentModeOptions,
+  topMenuAlignOptions,
+  menuTriggerOptions,
+  routerTransitionOptions,
+} from './const';
 
 interface SwitchOptions {
   config?: DeepPartial<ProjectConfig>;
@@ -139,6 +77,25 @@ export default defineComponent({
         });
     }
 
+    function handleResetSetting() {
+      try {
+        appStore.commitProjectConfigState(defaultSetting);
+        const { colorWeak, grayMode } = defaultSetting;
+        // updateTheme(themeColor);
+        updateColorWeak(colorWeak);
+        updateGrayMode(grayMode);
+        createMessage.success('重置成功！');
+      } catch (error) {
+        createMessage.error(error);
+      }
+    }
+
+    function handleClearAndRedo() {
+      localStorage.clear();
+      userStore.resumeAllState();
+      location.reload();
+    }
+
     function renderSidebar() {
       const {
         headerSetting: { theme: headerTheme },
@@ -175,7 +132,7 @@ export default defineComponent({
                 {{
                   default: () => (
                     <div
-                      onClick={baseHandler.bind(null, 'layout', {
+                      onClick={baseHandler.bind(null, HandlerEnum.CHANGE_LAYOUT, {
                         mode: mode,
                         type: ItemType,
                         split: unref(getIsHorizontalRef) ? false : undefined,
@@ -192,14 +149,14 @@ export default defineComponent({
         </div>,
         renderSwitchItem('分割菜单', {
           handler: (e) => {
-            baseHandler('splitMenu', e);
+            baseHandler(HandlerEnum.MENU_SPLIT, e);
           },
           def: split,
           disabled: !unref(getShowMenuRef) || type !== MenuTypeEnum.MIX,
         }),
         renderSelectItem('顶栏主题', {
           handler: (e) => {
-            baseHandler('headerMenu', e);
+            baseHandler(HandlerEnum.HEADER_THEME, e);
           },
           def: headerTheme,
           options: themeOptions,
@@ -207,7 +164,7 @@ export default defineComponent({
         }),
         renderSelectItem('菜单主题', {
           handler: (e) => {
-            baseHandler('menuTheme', e);
+            baseHandler(HandlerEnum.MENU_THEME, e);
           },
           def: menuTheme,
           options: themeOptions,
@@ -230,48 +187,49 @@ export default defineComponent({
           topMenuAlign,
           collapsedShowTitle,
           trigger,
+          accordion,
         } = {},
       } = appStore.getProjectConfig;
       return [
         renderSwitchItem('侧边菜单拖拽', {
           handler: (e) => {
-            baseHandler('hasDrag', e);
+            baseHandler(HandlerEnum.MENU_HAS_DRAG, e);
           },
           def: hasDrag,
           disabled: !unref(getShowMenuRef),
         }),
         renderSwitchItem('侧边菜单搜索', {
           handler: (e) => {
-            baseHandler('showSearch', e);
+            baseHandler(HandlerEnum.MENU_SHOW_SEARCH, e);
           },
           def: showSearch,
           disabled: !unref(getShowMenuRef),
         }),
+        renderSwitchItem('侧边菜单手风琴模式', {
+          handler: (e) => {
+            baseHandler(HandlerEnum.MENU_ACCORDION, e);
+          },
+          def: accordion,
+          disabled: !unref(getShowMenuRef),
+        }),
         renderSwitchItem('折叠菜单', {
           handler: (e) => {
-            baseHandler('collapsed', e);
+            baseHandler(HandlerEnum.MENU_COLLAPSED, e);
           },
           def: collapsed,
           disabled: !unref(getShowMenuRef),
         }),
         renderSwitchItem('折叠菜单显示名称', {
           handler: (e) => {
-            baseHandler('collapsedShowTitle', e);
+            baseHandler(HandlerEnum.MENU_COLLAPSED_SHOW_TITLE, e);
           },
           def: collapsedShowTitle,
           disabled: !unref(getShowMenuRef) || !collapsed,
         }),
 
-        renderSwitchItem('固定header', {
-          handler: (e) => {
-            baseHandler('headerFixed', e);
-          },
-          def: fixed,
-          disabled: !unref(getShowHeaderRef),
-        }),
         renderSelectItem('顶部菜单布局', {
           handler: (e) => {
-            baseHandler('topMenuAlign', e);
+            baseHandler(HandlerEnum.MENU_TOP_ALIGN, e);
           },
           def: topMenuAlign,
           options: topMenuAlignOptions,
@@ -279,14 +237,21 @@ export default defineComponent({
         }),
         renderSelectItem('菜单折叠按钮', {
           handler: (e) => {
-            baseHandler('menuTrigger', e);
+            baseHandler(HandlerEnum.MENU_TRIGGER, e);
           },
           def: trigger,
           options: menuTriggerOptions,
         }),
+        renderSwitchItem('固定header', {
+          handler: (e) => {
+            baseHandler(HandlerEnum.HEADER_FIXED, e);
+          },
+          def: fixed,
+          disabled: !unref(getShowHeaderRef),
+        }),
         renderSelectItem('内容区域宽度', {
           handler: (e) => {
-            baseHandler('contentMode', e);
+            baseHandler(HandlerEnum.CONTENT_MODE, e);
           },
           def: contentMode,
           options: contentModeOptions,
@@ -297,8 +262,8 @@ export default defineComponent({
             style="width:120px"
             size="small"
             min={0}
-            onChange={(e) => {
-              baseHandler('lockTime', e);
+            onChange={(e: any) => {
+              baseHandler(HandlerEnum.LOCK_TIME, e);
             }}
             defaultValue={appStore.getProjectConfig.lockTime}
             formatter={(value: string) => {
@@ -321,7 +286,7 @@ export default defineComponent({
             defaultValue={menuWidth}
             formatter={(value: string) => `${parseInt(value)}px`}
             onChange={(e: any) => {
-              baseHandler('menuWidth', e);
+              baseHandler(HandlerEnum.MENU_WIDTH, e);
             }}
           />
         </div>,
@@ -334,19 +299,19 @@ export default defineComponent({
         <>
           {renderSwitchItem('页面切换loading', {
             handler: (e) => {
-              baseHandler('openPageLoading', e);
+              baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
             },
             def: openPageLoading,
           })}
           {renderSwitchItem('切换动画', {
             handler: (e) => {
-              baseHandler('openRouterTransition', e);
+              baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
             },
             def: openRouterTransition,
           })}
           {renderSelectItem('路由动画', {
             handler: (e) => {
-              baseHandler('routerTransition', e);
+              baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
             },
             def: routerTransition,
             options: routerTransitionOptions,
@@ -370,289 +335,77 @@ export default defineComponent({
       return [
         renderSwitchItem('面包屑', {
           handler: (e) => {
-            baseHandler('showBreadCrumb', e);
+            baseHandler(HandlerEnum.SHOW_BREADCRUMB, e);
           },
           def: showBreadCrumb,
           disabled: !unref(getShowHeaderRef),
         }),
         renderSwitchItem('面包屑图标', {
           handler: (e) => {
-            baseHandler('showBreadCrumbIcon', e);
+            baseHandler(HandlerEnum.SHOW_BREADCRUMB_ICON, e);
           },
           def: showBreadCrumbIcon,
           disabled: !unref(getShowHeaderRef),
         }),
         renderSwitchItem('标签页', {
           handler: (e) => {
-            baseHandler('showMultiple', e);
+            baseHandler(HandlerEnum.TABS_SHOW, e);
           },
           def: showMultiple,
         }),
         renderSwitchItem('标签页快捷按钮', {
           handler: (e) => {
-            baseHandler('showQuick', e);
+            baseHandler(HandlerEnum.TABS_SHOW_QUICK, e);
           },
           def: showQuick,
           disabled: !unref(getShowTabsRef),
         }),
         renderSwitchItem('标签页图标', {
           handler: (e) => {
-            baseHandler('showTabIcon', e);
+            baseHandler(HandlerEnum.TABS_SHOW_ICON, e);
           },
           def: showTabIcon,
           disabled: !unref(getShowTabsRef),
         }),
         renderSwitchItem('左侧菜单', {
           handler: (e) => {
-            baseHandler('showSidebar', e);
+            baseHandler(HandlerEnum.MENU_SHOW_SIDEBAR, e);
           },
           def: showMenu,
           disabled: unref(getIsHorizontalRef),
         }),
         renderSwitchItem('顶栏', {
           handler: (e) => {
-            baseHandler('showHeader', e);
+            baseHandler(HandlerEnum.HEADER_SHOW, e);
           },
           def: showHeader,
         }),
         renderSwitchItem('Logo', {
           handler: (e) => {
-            baseHandler('showLogo', e);
+            baseHandler(HandlerEnum.SHOW_LOGO, e);
           },
           def: showLogo,
         }),
         renderSwitchItem('全屏内容', {
           handler: (e) => {
-            baseHandler('fullContent', e);
+            baseHandler(HandlerEnum.FULL_CONTENT, e);
           },
           def: fullContent,
         }),
         renderSwitchItem('灰色模式', {
           handler: (e) => {
-            baseHandler('grayMode', e);
+            baseHandler(HandlerEnum.GRAY_MODE, e);
           },
           def: grayMode,
         }),
         renderSwitchItem('色弱模式', {
           handler: (e) => {
-            baseHandler('colorWeak', e);
+            baseHandler(HandlerEnum.COLOR_WEAK, e);
           },
           def: colorWeak,
         }),
       ];
     }
-    function baseHandler(event: string, value: any) {
-      let config: DeepPartial<ProjectConfig> = {};
-      if (event === 'layout') {
-        const { mode, type, split } = value;
-        const splitOpt = split === undefined ? { split } : {};
-        let headerSetting = {};
-        if (type === MenuTypeEnum.TOP_MENU) {
-          headerSetting = {
-            theme: MenuThemeEnum.DARK,
-          };
-        }
-        config = {
-          menuSetting: {
-            mode,
-            type,
-            collapsed: false,
-            show: true,
-            ...splitOpt,
-          },
-          headerSetting,
-        };
-      }
-      if (event === 'hasDrag') {
-        config = {
-          menuSetting: {
-            hasDrag: value,
-          },
-        };
-      }
-      if (event === 'menuTrigger') {
-        config = {
-          menuSetting: {
-            trigger: value,
-          },
-        };
-      }
-      if (event === 'openPageLoading') {
-        config = {
-          openPageLoading: value,
-        };
-      }
-      if (event === 'topMenuAlign') {
-        config = {
-          menuSetting: {
-            topMenuAlign: value,
-          },
-        };
-      }
-      if (event === 'showBreadCrumb') {
-        config = {
-          showBreadCrumb: value,
-        };
-      }
-      if (event === 'showBreadCrumbIcon') {
-        config = {
-          showBreadCrumbIcon: value,
-        };
-      }
-      if (event === 'collapsed') {
-        config = {
-          menuSetting: {
-            collapsed: value,
-          },
-        };
-      }
-      if (event === 'menuWidth') {
-        config = {
-          menuSetting: {
-            menuWidth: value,
-          },
-        };
-      }
-      if (event === 'collapsedShowTitle') {
-        config = {
-          menuSetting: {
-            collapsedShowTitle: value,
-          },
-        };
-      }
-      if (event === 'lockTime') {
-        config = {
-          lockTime: value,
-        };
-      }
-      if (event === 'showQuick') {
-        config = {
-          multiTabsSetting: {
-            showQuick: value,
-          },
-        };
-      }
-      if (event === 'showTabIcon') {
-        config = {
-          multiTabsSetting: {
-            showIcon: value,
-          },
-        };
-      }
-      if (event === 'contentMode') {
-        config = {
-          contentMode: value,
-        };
-      }
-      if (event === 'menuTheme') {
-        config = {
-          menuSetting: {
-            theme: value,
-          },
-        };
-      }
-      if (event === 'splitMenu') {
-        config = {
-          menuSetting: {
-            split: value,
-          },
-        };
-      }
-      if (event === 'showMultiple') {
-        config = {
-          multiTabsSetting: {
-            show: value,
-          },
-        };
-      }
-      if (event === 'headerMenu') {
-        config = {
-          headerSetting: {
-            theme: value,
-          },
-        };
-      }
-      if (event === 'grayMode') {
-        config = {
-          grayMode: value,
-        };
-        updateGrayMode(value);
-      }
-      if (event === 'colorWeak') {
-        config = {
-          colorWeak: value,
-        };
-        updateColorWeak(value);
-      }
-      if (event === 'showLogo') {
-        config = {
-          showLogo: value,
-        };
-      }
-      if (event === 'showSearch') {
-        config = {
-          menuSetting: {
-            showSearch: value,
-          },
-        };
-      }
-      if (event === 'showSidebar') {
-        config = {
-          menuSetting: {
-            show: value,
-          },
-        };
-      }
-      if (event === 'openRouterTransition') {
-        config = {
-          openRouterTransition: value,
-        };
-      }
-      if (event === 'routerTransition') {
-        config = {
-          routerTransition: value,
-        };
-      }
-      if (event === 'headerFixed') {
-        config = {
-          headerSetting: {
-            fixed: value,
-          },
-        };
-      }
-      if (event === 'fullContent') {
-        config = {
-          fullContent: value,
-        };
-      }
-      if (event === 'showHeader') {
-        config = {
-          headerSetting: {
-            show: value,
-          },
-        };
-      }
-      appStore.commitProjectConfigState(config);
-    }
-
-    function handleResetSetting() {
-      try {
-        appStore.commitProjectConfigState(defaultSetting);
-        const { colorWeak, grayMode } = defaultSetting;
-        // updateTheme(themeColor);
-        updateColorWeak(colorWeak);
-        updateGrayMode(grayMode);
-        createMessage.success('重置成功！');
-      } catch (error) {
-        createMessage.error(error);
-      }
-    }
-
-    function handleClearAndRedo() {
-      localStorage.clear();
-      userStore.resumeAllState();
-      location.reload();
-    }
 
     function renderSelectItem(text: string, config?: SelectConfig) {
       const { handler, def, disabled = false, options } = config || {};
@@ -693,6 +446,7 @@ export default defineComponent({
         </div>
       );
     }
+
     return () => (
       <BasicDrawer {...attrs} title="项目配置" width={300} wrapClassName="setting-drawer">
         {{