From 4f6b65b8a1b7e694718b4aa42aced1e59e90ec9e Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Fri, 6 Nov 2020 22:41:00 +0800
Subject: [PATCH] feat(trigger): add trigger config

---
 CHANGELOG.zh_CN.md                            |  8 +++
 package.json                                  |  1 +
 src/App.vue                                   |  2 +-
 src/components/Menu/src/BasicMenu.tsx         |  2 +-
 src/components/Menu/src/MenuContent.tsx       |  2 +-
 src/components/Menu/src/index.less            | 11 +++-
 src/enums/menuEnum.ts                         | 10 ++++
 src/layouts/Logo.vue                          |  8 ++-
 src/layouts/default/LayoutContent.tsx         |  8 +--
 src/layouts/default/LayoutHeader.tsx          | 27 +++++++--
 src/layouts/default/LayoutMenu.tsx            | 18 ++++--
 src/layouts/default/LayoutSideBar.tsx         | 40 ++++++++++++-
 src/layouts/default/LayoutTrigger.tsx         | 43 ++++++++++++++
 src/layouts/default/SideBarTrigger.tsx        | 12 ----
 src/layouts/default/index.less                | 39 ++++++++++--
 src/layouts/default/index.tsx                 |  8 +--
 src/layouts/default/setting/SettingDrawer.tsx | 59 +++++++++++++++----
 src/settings/projectSetting.ts                | 11 +++-
 src/types/config.d.ts                         |  4 +-
 src/utils/helper/routeHelper.ts               |  1 +
 vite.config.ts                                |  7 +--
 yarn.lock                                     |  2 +-
 22 files changed, 255 insertions(+), 68 deletions(-)
 create mode 100644 src/layouts/default/LayoutTrigger.tsx
 delete mode 100644 src/layouts/default/SideBarTrigger.tsx

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index d2bc7dc1..39661227 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,9 +1,17 @@
 ## Wip
 
+### ✨ Features
+
+- 菜单 trigger 可以选择位置
+- 增加富文本嵌入表单的示例
+- 表单组件 schema 增加 `required`属性。简化配置
+- openModal 和 openDrawer 第二个参数可以代替`transferModalData`传参到内部
+
 ### ⚡ Performance Improvements
 
 - 菜单性能继续优化,更流畅
 - 优化懒加载组件及示例
+- layout 样式微调
 
 ### 🎫 Chores
 
diff --git a/package.json b/package.json
index cc0e54d2..8c838729 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "echarts": "^4.9.0",
     "lodash-es": "^4.17.15",
     "mockjs": "^1.1.0",
+    "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
diff --git a/src/App.vue b/src/App.vue
index 15bb4577..bf11fc70 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
 
   import zhCN from 'ant-design-vue/es/locale/zh_CN';
   import moment from 'moment';
-  import 'moment/locale/zh-cn';
+  import 'moment/dist/locale/zh-cn';
 
   import { useConfigProvider, useInitAppConfigStore, useListenerNetWork } from './useApp';
   import { useLockPage } from '/@/hooks/web/useLockPage';
diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx
index 68abf4e6..2c38ca4c 100644
--- a/src/components/Menu/src/BasicMenu.tsx
+++ b/src/components/Menu/src/BasicMenu.tsx
@@ -73,7 +73,7 @@ export default defineComponent({
         offset += 46;
       }
       return {
-        height: `calc(100% - ${offset - 10}px)`,
+        height: `calc(100% - ${offset - 12}px)`,
         position: 'relative',
         overflowY: 'auto',
       };
diff --git a/src/components/Menu/src/MenuContent.tsx b/src/components/Menu/src/MenuContent.tsx
index 6f907ab6..79fe3e55 100644
--- a/src/components/Menu/src/MenuContent.tsx
+++ b/src/components/Menu/src/MenuContent.tsx
@@ -32,7 +32,7 @@ export default defineComponent({
      * @description: 渲染图标
      */
     function renderIcon(icon: string) {
-      return icon ? <Icon icon={icon} size={18} class="mr-1 menu-item-icon" /> : null;
+      return icon ? <Icon icon={icon} size={18} class="menu-item-icon" /> : null;
     }
 
     return () => {
diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
index 54e50193..fb8c95a7 100644
--- a/src/components/Menu/src/index.less
+++ b/src/components/Menu/src/index.less
@@ -41,6 +41,7 @@
       font-size: 12px;
       flex-direction: column;
       align-items: center;
+      line-height: 24px;
     }
 
     & > li > .ant-menu-submenu-title {
@@ -183,9 +184,17 @@
     transition: unset;
   }
 
+  &:not(.basic-menu__sidebar-hor).ant-menu-inline-collapsed {
+    .basic-menu-item__level1 {
+      > div {
+        align-items: center;
+      }
+    }
+  }
+
   &.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) {
     // Reset menu item row height
-    .ant-menu-item,
+    .ant-menu-item:not(.basic-menu-item__level1),
     .ant-menu-sub.ant-menu-inline > .ant-menu-item,
     .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
       height: @app-menu-item-height;
diff --git a/src/enums/menuEnum.ts b/src/enums/menuEnum.ts
index 2c2234bb..47f4c186 100644
--- a/src/enums/menuEnum.ts
+++ b/src/enums/menuEnum.ts
@@ -17,6 +17,16 @@ export enum MenuThemeEnum {
   LIGHT = 'light',
 }
 
+// 折叠触发器位置
+export enum TriggerEnum {
+  // 不显示
+  NONE = 'NONE',
+  // 菜单底部
+  FOOTER = 'FOOTER',
+  // 头部
+  HEADER = 'HEADER',
+}
+
 export type Mode = 'vertical' | 'vertical-right' | 'horizontal' | 'inline';
 
 // menu mode
diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue
index a3f71e41..ac06ccb5 100644
--- a/src/layouts/Logo.vue
+++ b/src/layouts/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-logo anticon" @click="handleGoHome" :style="wrapStyle">
+  <div class="app-logo anticon" :class="theme" @click="handleGoHome" :style="wrapStyle">
     <img :src="logo" />
     <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
   </div>
@@ -26,6 +26,9 @@
         type: Boolean as PropType<boolean>,
         default: true,
       },
+      theme: {
+        type: String,
+      },
     },
     setup(props) {
       const showRef = ref<boolean>(!!props.showTitle);
@@ -80,6 +83,9 @@
     padding-left: 16px;
     cursor: pointer;
     // justify-content: center;
+    &.light {
+      border-bottom: 1px solid @border-color-base;
+    }
 
     .logo-title {
       font-size: 18px;
diff --git a/src/layouts/default/LayoutContent.tsx b/src/layouts/default/LayoutContent.tsx
index 36f26173..47bd8607 100644
--- a/src/layouts/default/LayoutContent.tsx
+++ b/src/layouts/default/LayoutContent.tsx
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { Layout } from 'ant-design-vue';
+// import { Layout } from 'ant-design-vue';
 // hooks
 
 import { ContentEnum } from '/@/enums/appEnum';
@@ -13,9 +13,9 @@ export default defineComponent({
       const { contentMode } = getProjectConfig;
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
-        <Layout.Content class={`layout-content ${wrapClass} `}>
-          {() => <PageLayout />}
-        </Layout.Content>
+        // <Layout.Content class={`layout-content ${wrapClass} `}>
+        <PageLayout class={`layout-content ${wrapClass} `} />
+        // </Layout.Content>
       );
     };
   },
diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/LayoutHeader.tsx
index 7a9f3b2b..98bf8e04 100644
--- a/src/layouts/default/LayoutHeader.tsx
+++ b/src/layouts/default/LayoutHeader.tsx
@@ -6,6 +6,7 @@ import UserDropdown from './UserDropdown';
 import LayoutMenu from './LayoutMenu';
 import LayoutBreadcrumb from './LayoutBreadcrumb';
 import LockAction from './actions/LockActionItem';
+import LayoutTrigger from './LayoutTrigger';
 import NoticeAction from './actions/notice/NoticeActionItem.vue';
 import {
   RedoOutlined,
@@ -25,7 +26,7 @@ import { useModal } from '/@/components/Modal/index';
 import { appStore } from '/@/store/modules/app';
 import { errorStore } from '/@/store/modules/error';
 
-import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { GITHUB_URL } from '/@/settings/siteSetting';
 export default defineComponent({
   name: 'DefaultLayoutHeader',
@@ -75,6 +76,13 @@ export default defineComponent({
       return theme ? `layout-header__header--${theme}` : '';
     });
 
+    const showHeaderTrigger = computed(() => {
+      const { show, trigger, hidden } = unref(getProjectConfigRef).menuSetting;
+
+      if (!show || !hidden) return false;
+      return trigger === TriggerEnum.HEADER;
+    });
+
     function handleToErrorList() {
       errorStore.commitErrorListCountState(0);
       push('/exception/error-log');
@@ -92,6 +100,7 @@ export default defineComponent({
       const {
         useErrorHandle,
         showLogo,
+        multiTabsSetting: { show: showTab },
         headerSetting: {
           theme: headerTheme,
           useLockPage,
@@ -114,11 +123,17 @@ export default defineComponent({
           {() => (
             <>
               <div class="layout-header__content ">
-                {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
-
-                {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
-                  <LayoutBreadcrumb showIcon={showBreadCrumbIcon} />
+                {showLogo && !isSidebarType && (
+                  <Logo class={`layout-header__logo`} theme={headerTheme} />
                 )}
+
+                <div class="layout-header__left">
+                  {unref(showHeaderTrigger) && <LayoutTrigger theme={headerTheme} sider={false} />}
+                  {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
+                    <LayoutBreadcrumb showIcon={showBreadCrumbIcon} />
+                  )}
+                </div>
+
                 {unref(showTopMenu) && (
                   <div
                     class={[`layout-header__menu `]}
@@ -193,7 +208,7 @@ export default defineComponent({
                     </Tooltip>
                   </div>
                 )}
-                {showRedo && (
+                {showRedo && showTab && (
                   <Tooltip>
                     {{
                       title: () => '刷新',
diff --git a/src/layouts/default/LayoutMenu.tsx b/src/layouts/default/LayoutMenu.tsx
index 383a99c4..2ce75abe 100644
--- a/src/layouts/default/LayoutMenu.tsx
+++ b/src/layouts/default/LayoutMenu.tsx
@@ -68,9 +68,6 @@ export default defineComponent({
       return unref(getProjectConfigRef).menuSetting.mode === MenuModeEnum.HORIZONTAL;
     });
 
-    onMounted(() => {
-      genMenus();
-    });
     const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50);
 
     // watch(
@@ -90,6 +87,7 @@ export default defineComponent({
         immediate: true,
       }
     );
+
     watch(
       [() => permissionStore.getLastBuildMenuTimeState, permissionStore.getBackMenuListState],
       () => {
@@ -112,7 +110,7 @@ export default defineComponent({
         if (!children) {
           appStore.commitProjectConfigState({
             menuSetting: {
-              show: false,
+              hidden: false,
             },
           });
           flatMenusRef.value = [];
@@ -122,7 +120,7 @@ export default defineComponent({
         const flatChildren = await getFlatChildrenMenus(children);
         appStore.commitProjectConfigState({
           menuSetting: {
-            show: true,
+            hidden: true,
           },
         });
         flatMenusRef.value = flatChildren;
@@ -193,6 +191,10 @@ export default defineComponent({
       );
     });
 
+    onMounted(() => {
+      genMenus();
+    });
+
     return () => {
       const {
         showLogo,
@@ -229,7 +231,11 @@ export default defineComponent({
           {{
             header: () =>
               isShowLogo && (
-                <Logo showTitle={!collapsed} class={[`layout-menu__logo`, themeData]} />
+                <Logo
+                  showTitle={!collapsed}
+                  class={[`layout-menu__logo`, themeData]}
+                  theme={themeData}
+                />
               ),
           }}
         </BasicMenu>
diff --git a/src/layouts/default/LayoutSideBar.tsx b/src/layouts/default/LayoutSideBar.tsx
index cbef7556..9367a35e 100644
--- a/src/layouts/default/LayoutSideBar.tsx
+++ b/src/layouts/default/LayoutSideBar.tsx
@@ -1,14 +1,14 @@
 import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue';
 
 import { Layout } from 'ant-design-vue';
-import SideBarTrigger from './SideBarTrigger';
+import LayoutTrigger from './LayoutTrigger';
 import { menuStore } from '/@/store/modules/menu';
 
 // import darkMiniIMg from '/@/assets/images/sidebar/dark-mini.png';
 // import lightMiniImg from '/@/assets/images/sidebar/light-mini.png';
 // import lightImg from '/@/assets/images/sidebar/light.png';
 import { appStore } from '/@/store/modules/app';
-import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
 import { useDebounce } from '/@/hooks/core/useDebounce';
 import LayoutMenu from './LayoutMenu';
@@ -133,6 +133,25 @@ export default defineComponent({
       return unref(brokenRef) ? 0 : unref(getMiniWidth);
     });
 
+    const showTrigger = computed(() => {
+      const {
+        menuSetting: { trigger },
+      } = unref(getProjectConfigRef);
+      return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
+    });
+
+    function handleSiderClick(e: ChangeEvent) {
+      if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
+
+      const { collapsed, show } = appStore.getProjectConfig.menuSetting;
+      if (!collapsed || !show) return;
+      appStore.commitProjectConfigState({
+        menuSetting: {
+          collapsed: false,
+        },
+      });
+    }
+
     function renderDragLine() {
       const { menuSetting: { hasDrag = true } = {} } = unref(getProjectConfigRef);
       return (
@@ -149,8 +168,22 @@ export default defineComponent({
         menuSetting: { theme, split: splitMenu },
       } = unref(getProjectConfigRef);
       const { getCollapsedState, getMenuWidthState } = menuStore;
+
+      const triggerDom = unref(showTrigger)
+        ? {
+            trigger: () => <LayoutTrigger />,
+          }
+        : {};
+
+      const triggerAttr = unref(showTrigger)
+        ? {}
+        : {
+            trigger: null,
+          };
+
       return (
         <Layout.Sider
+          onClick={handleSiderClick}
           onCollapse={onCollapseChange}
           breakpoint="md"
           width={getMenuWidthState}
@@ -161,9 +194,10 @@ export default defineComponent({
           class="layout-sidebar"
           ref={sideRef}
           onBreakpoint={handleBreakpoint}
+          {...triggerAttr}
         >
           {{
-            trigger: () => <SideBarTrigger />,
+            ...triggerDom,
             default: () => (
               <>
                 <LayoutMenu
diff --git a/src/layouts/default/LayoutTrigger.tsx b/src/layouts/default/LayoutTrigger.tsx
new file mode 100644
index 00000000..65a4d9a2
--- /dev/null
+++ b/src/layouts/default/LayoutTrigger.tsx
@@ -0,0 +1,43 @@
+import {
+  DoubleRightOutlined,
+  DoubleLeftOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+} from '@ant-design/icons-vue';
+import { defineComponent } from 'vue';
+
+// store
+import { menuStore } from '/@/store/modules/menu';
+
+export default defineComponent({
+  name: 'LayoutTrigger',
+  props: {
+    sider: {
+      type: Boolean,
+      default: true,
+    },
+    theme: {
+      type: String,
+    },
+  },
+  setup(props) {
+    function toggleMenu() {
+      menuStore.commitCollapsedState(!menuStore.getCollapsedState);
+    }
+
+    return () => {
+      const siderTrigger = menuStore.getCollapsedState ? (
+        <DoubleRightOutlined />
+      ) : (
+        <DoubleLeftOutlined />
+      );
+      if (props.sider) return siderTrigger;
+
+      return (
+        <span class={['layout-trigger', props.theme]} onClick={toggleMenu}>
+          {menuStore.getCollapsedState ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </span>
+      );
+    };
+  },
+});
diff --git a/src/layouts/default/SideBarTrigger.tsx b/src/layouts/default/SideBarTrigger.tsx
deleted file mode 100644
index c04303d9..00000000
--- a/src/layouts/default/SideBarTrigger.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
-import { defineComponent } from 'vue';
-
-// store
-import { menuStore } from '/@/store/modules/menu';
-
-export default defineComponent({
-  name: 'SideBarTrigger',
-  setup() {
-    return () => (menuStore.getCollapsedState ? <DoubleRightOutlined /> : <DoubleLeftOutlined />);
-  },
-});
diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less
index 6264a90b..e8da7437 100644
--- a/src/layouts/default/index.less
+++ b/src/layouts/default/index.less
@@ -17,11 +17,10 @@
   &__main {
     position: relative;
     height: 100%;
-    // overflow: hidden;
-    // overflow: auto;
 
     &.fixed {
-      overflow: auto;
+      overflow-x: hidden;
+      overflow-y: auto;
     }
 
     &.fixed.lock {
@@ -373,9 +372,39 @@
   }
 }
 
-.layout-breadcrumb {
-  padding: 0 16px;
+.layout-header__left {
   flex-grow: 1;
+  display: flex;
+  align-items: center;
+
+  .layout-trigger {
+    padding: 4px 10px 0 16px;
+    cursor: pointer;
+
+    .anticon {
+      font-size: 17px;
+    }
+
+    &.light {
+      &:hover {
+        background: @header-light-bg-hover-color;
+      }
+
+      svg {
+        fill: #000;
+      }
+    }
+
+    &.dark {
+      &:hover {
+        background: @header-dark-bg-hover-color;
+      }
+    }
+  }
+
+  .layout-breadcrumb {
+    padding: 0 8px;
+  }
 }
 
 .ant-layout-sider-trigger {
diff --git a/src/layouts/default/index.tsx b/src/layouts/default/index.tsx
index acfa3f4c..a4b11262 100644
--- a/src/layouts/default/index.tsx
+++ b/src/layouts/default/index.tsx
@@ -73,7 +73,7 @@ export default defineComponent({
         showSettingButton,
         multiTabsSetting: { show: showTabs },
         headerSetting: { fixed },
-        menuSetting: { split, show },
+        menuSetting: { split, hidden },
       } = unref(getProjectConfigRef);
 
       const fixedHeaderCls = fixed
@@ -82,7 +82,7 @@ export default defineComponent({
 
       const { isLock } = getLockInfo;
 
-      const showSideBar = split ? show : true;
+      const showSideBar = split ? hidden : true;
       return (
         <Layout class="default-layout relative">
           {() => (
@@ -107,9 +107,7 @@ export default defineComponent({
                             unref(showHeaderRef) && <LayoutHeader />}
 
                           {showTabs && !unref(getFullContent) && (
-                            <Layout.Header class={`default-layout__tabs`}>
-                              {() => <MultipleTabs />}
-                            </Layout.Header>
+                            <MultipleTabs class={`default-layout__tabs`} />
                           )}
 
                           {useOpenBackTop && <BackTop target={getTarget} />}
diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
index ad880b8e..0054425e 100644
--- a/src/layouts/default/setting/SettingDrawer.tsx
+++ b/src/layouts/default/setting/SettingDrawer.tsx
@@ -2,7 +2,13 @@ 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 } from '/@/enums/menuEnum';
+import {
+  MenuModeEnum,
+  MenuTypeEnum,
+  MenuThemeEnum,
+  TopMenuAlignEnum,
+  TriggerEnum,
+} from '/@/enums/menuEnum';
 import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { CopyOutlined, RedoOutlined, CheckOutlined } from '@ant-design/icons-vue';
 import { appStore } from '/@/store/modules/app';
@@ -23,41 +29,49 @@ const themeOptions = [
   {
     value: MenuThemeEnum.LIGHT,
     label: '亮色',
-    key: MenuThemeEnum.LIGHT,
   },
   {
     value: MenuThemeEnum.DARK,
     label: '暗色',
-    key: MenuThemeEnum.DARK,
   },
 ];
 const contentModeOptions = [
   {
     value: ContentEnum.FULL,
     label: '流式',
-    key: ContentEnum.FULL,
   },
   {
     value: ContentEnum.FIXED,
     label: '定宽',
-    key: ContentEnum.FIXED,
   },
 ];
 const topMenuAlignOptions = [
   {
     value: TopMenuAlignEnum.CENTER,
     label: '居中',
-    key: TopMenuAlignEnum.CENTER,
   },
   {
     value: TopMenuAlignEnum.START,
     label: '居左',
-    key: TopMenuAlignEnum.START,
   },
   {
     value: TopMenuAlignEnum.END,
     label: '居右',
-    key: TopMenuAlignEnum.END,
+  },
+];
+
+const menuTriggerOptions = [
+  {
+    value: TriggerEnum.NONE,
+    label: '不显示',
+  },
+  {
+    value: TriggerEnum.FOOTER,
+    label: '底部',
+  },
+  {
+    value: TriggerEnum.HEADER,
+    label: '顶部',
   },
 ];
 
@@ -181,7 +195,7 @@ export default defineComponent({
             baseHandler('splitMenu', e);
           },
           def: split,
-          disabled: !unref(getShowMenuRef),
+          disabled: !unref(getShowMenuRef) || type !== MenuTypeEnum.MIX,
         }),
         renderSelectItem('顶栏主题', {
           handler: (e) => {
@@ -215,6 +229,7 @@ export default defineComponent({
           menuWidth,
           topMenuAlign,
           collapsedShowTitle,
+          trigger,
         } = {},
       } = appStore.getProjectConfig;
       return [
@@ -262,6 +277,13 @@ export default defineComponent({
           options: topMenuAlignOptions,
           disabled: !unref(getShowHeaderRef),
         }),
+        renderSelectItem('菜单折叠按钮', {
+          handler: (e) => {
+            baseHandler('menuTrigger', e);
+          },
+          def: trigger,
+          options: menuTriggerOptions,
+        }),
         renderSelectItem('内容区域宽度', {
           handler: (e) => {
             baseHandler('contentMode', e);
@@ -298,7 +320,7 @@ export default defineComponent({
             disabled={!unref(getShowMenuRef)}
             defaultValue={menuWidth}
             formatter={(value: string) => `${parseInt(value)}px`}
-            onChange={(e) => {
+            onChange={(e: any) => {
               baseHandler('menuWidth', e);
             }}
           />
@@ -424,13 +446,21 @@ export default defineComponent({
       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') {
@@ -440,6 +470,13 @@ export default defineComponent({
           },
         };
       }
+      if (event === 'menuTrigger') {
+        config = {
+          menuSetting: {
+            trigger: value,
+          },
+        };
+      }
       if (event === 'openPageLoading') {
         config = {
           openPageLoading: value,
@@ -647,7 +684,7 @@ export default defineComponent({
           <Switch
             {...opt}
             disabled={disabled}
-            onChange={(e) => {
+            onChange={(e: any) => {
               handler && handler(e);
             }}
             checkedChildren="开"
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index c7ac8257..ff08bb3f 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -1,6 +1,6 @@
 import type { ProjectConfig } from '/@/types/config';
 
-import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { primaryColor } from '../../build/config/lessModifyVars';
 import { isProdMode } from '/@/utils/env';
@@ -23,6 +23,7 @@ const setting: ProjectConfig = {
   // 是否显示logo
   showLogo: true,
 
+  // 头部配置
   headerSetting: {
     fixed: true,
     // 是否显示顶部
@@ -50,8 +51,10 @@ const setting: ProjectConfig = {
     collapsedShowTitle: false,
     // 是否可拖拽
     hasDrag: false,
-    // 是否显示
+    // 是否显示 没有dom
     show: true,
+    // 是否显示 有dom
+    hidden: false,
     // 是否显示搜索框
     showSearch: true,
     // 菜单宽度
@@ -67,7 +70,9 @@ const setting: ProjectConfig = {
     // 顶部菜单布局
     topMenuAlign: 'center',
     // 折叠菜单时候隐藏搜索框
-    collapsedShowSearch: true,
+    collapsedShowSearch: false,
+    // 折叠触发器的位置
+    trigger: TriggerEnum.HEADER,
   },
   // 消息配置
   messageSetting: {
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index 6c354906..b2d14543 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -1,5 +1,5 @@
 // 左侧菜单, 顶部菜单
-import { MenuTypeEnum, MenuModeEnum, MenuThemeEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, MenuModeEnum, MenuThemeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 
 export interface MessageSetting {
@@ -15,6 +15,7 @@ export interface MenuSetting {
   hasDrag: boolean;
   showSearch: boolean;
   show: boolean;
+  hidden: boolean;
   split: boolean;
   menuWidth: number;
   mode: MenuModeEnum;
@@ -22,6 +23,7 @@ export interface MenuSetting {
   theme: MenuThemeEnum;
   topMenuAlign: 'start' | 'center' | 'end';
   collapsedShowSearch: boolean;
+  trigger: TriggerEnum;
 }
 
 export interface MultiTabsSetting {
diff --git a/src/utils/helper/routeHelper.ts b/src/utils/helper/routeHelper.ts
index 4bfc9e7c..eab722a1 100644
--- a/src/utils/helper/routeHelper.ts
+++ b/src/utils/helper/routeHelper.ts
@@ -42,6 +42,7 @@ export function genRouteModule(moduleList: AppRouteModule[]) {
 }
 
 // 动态引入
+// TODO  错误写法
 function asyncImportRoute(routes: AppRouteRecordRaw[]) {
   routes.forEach((item) => {
     let { component } = item;
diff --git a/vite.config.ts b/vite.config.ts
index e410d585..679c90ae 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -119,12 +119,7 @@ const viteConfig: UserConfig = {
   },
   // The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
   optimizeDeps: {
-    include: [
-      'echarts/map/js/china',
-      'ant-design-vue/es/locale/zh_CN',
-      '@ant-design/icons-vue',
-      'moment/locale/zh-cn',
-    ],
+    include: ['echarts/map/js/china', 'ant-design-vue/es/locale/zh_CN', '@ant-design/icons-vue'],
   },
 
   // Local cross-domain proxy
diff --git a/yarn.lock b/yarn.lock
index 9e565c7b..bf5df935 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5513,7 +5513,7 @@ modify-values@^1.0.0:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@^2.27.0:
+moment@^2.27.0, moment@^2.29.1:
   version "2.29.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-- 
GitLab