From 191e809b6d696d6e0b72c67ba1c7e89c721f2642 Mon Sep 17 00:00:00 2001
From: xachary <179740385@qq.com>
Date: Thu, 9 Nov 2023 11:24:27 +0800
Subject: [PATCH] feat(MultipleTab): add tabs auto collapse interaction in fold
 mode and setting  (#3256)

* fix: validateFields await missing

* feat(MultipleTab): add tabs auto collapse interaction and setting

* chore(locales): update  setting name to better reflect its purpose

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>
---
 src/hooks/setting/useMultipleTabSetting.ts    |   3 +
 src/layouts/default/header/MultipleHeader.vue |  38 ++--
 src/layouts/default/index.vue                 |  20 +-
 src/layouts/default/setting/SettingDrawer.tsx |   9 +-
 src/layouts/default/setting/enum.ts           |   1 +
 src/layouts/default/setting/handler.ts        |   3 +
 src/layouts/default/tabs/index.less           |  20 ++
 src/layouts/default/tabs/index.vue            |   6 +
 src/locales/lang/en/layout.json               | 171 +++++++++---------
 src/locales/lang/zh-CN/layout.json            | 171 +++++++++---------
 src/settings/designSetting.ts                 |   2 +
 src/settings/projectSetting.ts                |   2 +
 types/config.d.ts                             |   1 +
 13 files changed, 262 insertions(+), 185 deletions(-)

diff --git a/src/hooks/setting/useMultipleTabSetting.ts b/src/hooks/setting/useMultipleTabSetting.ts
index 7caa75378..5908b9c20 100644
--- a/src/hooks/setting/useMultipleTabSetting.ts
+++ b/src/hooks/setting/useMultipleTabSetting.ts
@@ -15,6 +15,8 @@ export function useMultipleTabSetting() {
 
   const getShowFold = computed(() => appStore.getMultiTabsSetting.showFold);
 
+  const getAutoCollapse = computed(() => appStore.getMultiTabsSetting.autoCollapse);
+
   function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
     appStore.setProjectConfig({ multiTabsSetting });
   }
@@ -24,5 +26,6 @@ export function useMultipleTabSetting() {
     getShowQuick,
     getShowRedo,
     getShowFold,
+    getAutoCollapse,
   };
 }
diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue
index bca048975..2ca05cd2e 100644
--- a/src/layouts/default/header/MultipleHeader.vue
+++ b/src/layouts/default/header/MultipleHeader.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
+  <div
+    :class="[`${prefixCls}__placeholder`]"
+    :style="getPlaceholderDomStyle"
+    v-if="getIsShowPlaceholderDom"
+  ></div>
   <div :style="getWrapStyle" :class="getClass">
     <LayoutHeader v-if="getShowInsetHeaderRef" />
     <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
@@ -31,7 +35,7 @@
       const tabStore = useMultipleTabStore();
       const { prefixCls } = useDesign('layout-multiple-header');
 
-      const { getCalcContentWidth, getSplit } = useMenuSetting();
+      const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
       const { getIsMobile } = useAppInject();
       const {
         getFixed,
@@ -43,7 +47,7 @@
 
       const { getFullContent } = useFullContent();
 
-      const { getShowMultipleTab } = useMultipleTabSetting();
+      const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
 
       const getShowTabs = computed(() => {
         return unref(getShowMultipleTab) && !unref(getFullContent);
@@ -68,19 +72,23 @@
         return unref(getFixed) || unref(getShowFullHeaderRef);
       });
 
+      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
       const getPlaceholderDomStyle = computed((): CSSProperties => {
         let height = 0;
-        if (
-          (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
-          unref(getShowHeader) &&
-          !unref(getFullContent)
-        ) {
-          height += HEADER_HEIGHT;
+        if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
+          if (
+            (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
+            unref(getShowHeader) &&
+            !unref(getFullContent)
+          ) {
+            height += HEADER_HEIGHT;
+          }
+          if (unref(getShowMultipleTab) && !unref(getFullContent)) {
+            height += TABS_HEIGHT;
+          }
+          setHeaderHeight(height);
         }
-        if (unref(getShowMultipleTab) && !unref(getFullContent)) {
-          height += TABS_HEIGHT;
-        }
-        setHeaderHeight(height);
         return {
           height: `${height}px`,
         };
@@ -125,5 +133,9 @@
       top: 0;
       width: 100%;
     }
+
+    &__placeholder {
+      transition: height 0.6s ease-in-out;
+    }
   }
 </style>
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
index de7fcaec5..226f0102c 100644
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -2,7 +2,7 @@
   <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader fixed v-if="getShowFullHeaderRef" />
-    <Layout :class="[layoutClass]">
+    <Layout :class="[layoutClass, `${prefixCls}-out`]">
       <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
       <Layout :class="`${prefixCls}-main`">
         <LayoutMultipleHeader />
@@ -30,6 +30,8 @@
 
   import { useAppInject } from '/@/hooks/web/useAppInject';
 
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
   export default defineComponent({
     name: 'DefaultLayout',
     components: {
@@ -46,6 +48,7 @@
       const { getIsMobile } = useAppInject();
       const { getShowFullHeaderRef } = useHeaderSetting();
       const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
+      const { getAutoCollapse } = useMultipleTabSetting();
 
       // Create a lock screen monitor
       const lockEvents = useLockPage();
@@ -55,6 +58,11 @@
         if (unref(getIsMixSidebar) || unref(getShowMenu)) {
           cls.push('ant-layout-has-sider');
         }
+
+        if (!unref(getShowMenu) && unref(getAutoCollapse)) {
+          cls.push('ant-layout-auto-collapse-tabs');
+        }
+
         return cls;
       });
 
@@ -89,4 +97,14 @@
       margin-left: 1px;
     }
   }
+
+  .@{prefix-cls}-out {
+    &.ant-layout-has-sider {
+      .@{prefix-cls} {
+        &-main {
+          margin-left: 1px;
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
index 1375463cb..38e0f9116 100644
--- a/src/layouts/default/setting/SettingDrawer.tsx
+++ b/src/layouts/default/setting/SettingDrawer.tsx
@@ -89,7 +89,8 @@ export default defineComponent({
       getShowSearch,
     } = useHeaderSetting();
 
-    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
+    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold, getAutoCollapse } =
+      useMultipleTabSetting();
 
     const getShowMenuRef = computed(() => {
       return unref(getShowMenu) && !unref(getIsHorizontal);
@@ -221,6 +222,12 @@ export default defineComponent({
             def={unref(getMenuFixed)}
             disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
           />
+          <SwitchItem
+            title={t('layout.setting.autoCollapseTabsInFold')}
+            event={HandlerEnum.TABS_AUTO_COLLAPSE}
+            def={unref(getAutoCollapse)}
+            disabled={!unref(getShowMultipleTab)}
+          />
           <SelectItem
             title={t('layout.setting.mixSidebarTrigger')}
             event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
diff --git a/src/layouts/default/setting/enum.ts b/src/layouts/default/setting/enum.ts
index 1e9633a7a..1daec1363 100644
--- a/src/layouts/default/setting/enum.ts
+++ b/src/layouts/default/setting/enum.ts
@@ -42,6 +42,7 @@ export enum HandlerEnum {
   TABS_SHOW_REDO,
   TABS_SHOW,
   TABS_SHOW_FOLD,
+  TABS_AUTO_COLLAPSE,
 
   LOCK_TIME,
   FULL_CONTENT,
diff --git a/src/layouts/default/setting/handler.ts b/src/layouts/default/setting/handler.ts
index e54108162..3a815d58f 100644
--- a/src/layouts/default/setting/handler.ts
+++ b/src/layouts/default/setting/handler.ts
@@ -153,6 +153,9 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
     case HandlerEnum.TABS_SHOW_FOLD:
       return { multiTabsSetting: { showFold: value } };
 
+    case HandlerEnum.TABS_AUTO_COLLAPSE:
+      return { multiTabsSetting: { autoCollapse: value } };
+
     // ============header==================
     case HandlerEnum.HEADER_THEME:
       updateHeaderBgColor(value);
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index dbe58ee0a..ac9463e10 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -1,4 +1,5 @@
 @prefix-cls: ~'@{namespace}-multiple-tabs';
+@prefix-cls-default-layout: ~'@{namespace}-default-layout';
 
 html[data-theme='light'] {
   .@{prefix-cls} {
@@ -8,6 +9,25 @@ html[data-theme='light'] {
   }
 }
 
+.@{prefix-cls-default-layout}-out {
+  &.ant-layout-auto-collapse-tabs {
+    .@{prefix-cls} {
+      margin-top: -(@multiple-height + 2);
+      opacity: 0.1;
+
+      &:hover,
+      &--hover {
+        margin-top: 0;
+        transition-delay: 0s;
+        opacity: 1;
+      }
+    }
+  }
+  .@{prefix-cls} {
+    transition: margin 0.2s ease-in-out 0.6s, opacity 0.2s ease-in-out 0.6s;
+  }
+}
+
 .@{prefix-cls} {
   z-index: 10;
   height: @multiple-height + 2;
diff --git a/src/layouts/default/tabs/index.vue b/src/layouts/default/tabs/index.vue
index a5195cd6b..4d3df4281 100644
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@@ -50,6 +50,9 @@
 
   import { useRouter } from 'vue-router';
 
+  import { useMouse } from '@vueuse/core';
+  import { multipleTabHeight } from '/@/settings/designSetting';
+
   export default defineComponent({
     name: 'MultipleTabs',
     components: {
@@ -78,11 +81,14 @@
 
       const unClose = computed(() => unref(getTabsState).length === 1);
 
+      const { y: mouseY } = useMouse();
+
       const getWrapClass = computed(() => {
         return [
           prefixCls,
           {
             [`${prefixCls}--hide-close`]: unref(unClose),
+            [`${prefixCls}--hover`]: unref(mouseY) < multipleTabHeight,
           },
         ];
       });
diff --git a/src/locales/lang/en/layout.json b/src/locales/lang/en/layout.json
index 1a1228564..36f734dac 100644
--- a/src/locales/lang/en/layout.json
+++ b/src/locales/lang/en/layout.json
@@ -1,95 +1,96 @@
 {
   "footer": {
-    "onlinePreview": "Preview", 
+    "onlinePreview": "Preview",
     "onlineDocument": "Document"
-  }, 
+  },
   "header": {
-    "dropdownChangeApi": "Change Api", 
-    "dropdownItemDoc": "Document", 
-    "dropdownItemLoginOut": "Log Out", 
-    "tooltipErrorLog": "Error log", 
-    "tooltipLock": "Lock screen", 
-    "tooltipNotify": "Notification", 
-    "tooltipEntryFull": "Full Screen", 
-    "tooltipExitFull": "Exit Full Screen", 
-    "lockScreenPassword": "Lock screen password", 
-    "lockScreen": "Lock screen", 
-    "lockScreenBtn": "Locking", 
+    "dropdownChangeApi": "Change Api",
+    "dropdownItemDoc": "Document",
+    "dropdownItemLoginOut": "Log Out",
+    "tooltipErrorLog": "Error log",
+    "tooltipLock": "Lock screen",
+    "tooltipNotify": "Notification",
+    "tooltipEntryFull": "Full Screen",
+    "tooltipExitFull": "Exit Full Screen",
+    "lockScreenPassword": "Lock screen password",
+    "lockScreen": "Lock screen",
+    "lockScreenBtn": "Locking",
     "home": "Home"
-  }, 
+  },
   "multipleTab": {
-    "reload": "Refresh current", 
-    "close": "Close current", 
-    "closeLeft": "Close Left", 
-    "closeRight": "Close Right", 
-    "closeOther": "Close Other", 
+    "reload": "Refresh current",
+    "close": "Close current",
+    "closeLeft": "Close Left",
+    "closeRight": "Close Right",
+    "closeOther": "Close Other",
     "closeAll": "Close All"
-  }, 
+  },
   "setting": {
-    "contentModeFull": "Full", 
-    "contentModeFixed": "Fixed width", 
-    "topMenuAlignLeft": "Left", 
-    "topMenuAlignRight": "Center", 
-    "topMenuAlignCenter": "Right", 
-    "menuTriggerNone": "Not Show", 
-    "menuTriggerBottom": "Bottom", 
-    "menuTriggerTop": "Top", 
-    "menuTypeSidebar": "Left menu mode", 
-    "menuTypeMixSidebar": "Left menu mixed mode", 
-    "menuTypeMix": "Top Menu Mix mode", 
-    "menuTypeTopMenu": "Top menu mode", 
-    "on": "On", 
-    "off": "Off", 
-    "minute": "Minute", 
-    "operatingTitle": "Successful!", 
-    "operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!", 
-    "resetSuccess": "Successfully reset!", 
-    "copyBtn": "Copy", 
-    "clearBtn": "Clear cache and to the login page", 
-    "drawerTitle": "Configuration", 
-    "darkMode": "Dark mode", 
-    "navMode": "Navigation mode", 
-    "interfaceFunction": "Interface function", 
-    "interfaceDisplay": "Interface display", 
-    "animation": "Animation", 
-    "splitMenu": "Split menu", 
-    "closeMixSidebarOnChange": "Switch page to close menu", 
-    "sysTheme": "System theme", 
-    "headerTheme": "Header theme", 
-    "sidebarTheme": "Menu theme", 
-    "menuDrag": "Drag Sidebar", 
-    "menuSearch": "Menu search", 
-    "menuAccordion": "Sidebar accordion", 
-    "menuCollapse": "Collapse menu", 
-    "collapseMenuDisplayName": "Collapse menu display name", 
-    "topMenuLayout": "Top menu layout", 
-    "menuCollapseButton": "Menu collapse button", 
-    "contentMode": "Content area width", 
-    "expandedMenuWidth": "Expanded menu width", 
-    "breadcrumb": "Breadcrumbs", 
-    "breadcrumbIcon": "Breadcrumbs Icon", 
-    "tabs": "Tabs", 
-    "tabDetail": "Tab Detail", 
-    "tabsQuickBtn": "Tabs quick button", 
-    "tabsRedoBtn": "Tabs redo button", 
-    "tabsFoldBtn": "Tabs flod button", 
-    "sidebar": "Sidebar", 
-    "header": "Header", 
-    "footer": "Footer", 
-    "fullContent": "Full content", 
-    "grayMode": "Gray mode", 
-    "colorWeak": "Color Weak Mode", 
-    "progress": "Progress", 
-    "switchLoading": "Switch Loading", 
-    "switchAnimation": "Switch animation", 
-    "animationType": "Animation type", 
-    "autoScreenLock": "Auto screen lock", 
-    "notAutoScreenLock": "Not auto lock", 
-    "fixedHeader": "Fixed header", 
-    "fixedSideBar": "Fixed Sidebar", 
-    "mixSidebarTrigger": "Mixed menu Trigger", 
-    "triggerHover": "Hover", 
-    "triggerClick": "Click", 
-    "mixSidebarFixed": "Fixed expanded menu"
+    "contentModeFull": "Full",
+    "contentModeFixed": "Fixed width",
+    "topMenuAlignLeft": "Left",
+    "topMenuAlignRight": "Center",
+    "topMenuAlignCenter": "Right",
+    "menuTriggerNone": "Not Show",
+    "menuTriggerBottom": "Bottom",
+    "menuTriggerTop": "Top",
+    "menuTypeSidebar": "Left menu mode",
+    "menuTypeMixSidebar": "Left menu mixed mode",
+    "menuTypeMix": "Top Menu Mix mode",
+    "menuTypeTopMenu": "Top menu mode",
+    "on": "On",
+    "off": "Off",
+    "minute": "Minute",
+    "operatingTitle": "Successful!",
+    "operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!",
+    "resetSuccess": "Successfully reset!",
+    "copyBtn": "Copy",
+    "clearBtn": "Clear cache and to the login page",
+    "drawerTitle": "Configuration",
+    "darkMode": "Dark mode",
+    "navMode": "Navigation mode",
+    "interfaceFunction": "Interface function",
+    "interfaceDisplay": "Interface display",
+    "animation": "Animation",
+    "splitMenu": "Split menu",
+    "closeMixSidebarOnChange": "Switch page to close menu",
+    "sysTheme": "System theme",
+    "headerTheme": "Header theme",
+    "sidebarTheme": "Menu theme",
+    "menuDrag": "Drag Sidebar",
+    "menuSearch": "Menu search",
+    "menuAccordion": "Sidebar accordion",
+    "menuCollapse": "Collapse menu",
+    "collapseMenuDisplayName": "Collapse menu display name",
+    "topMenuLayout": "Top menu layout",
+    "menuCollapseButton": "Menu collapse button",
+    "contentMode": "Content area width",
+    "expandedMenuWidth": "Expanded menu width",
+    "breadcrumb": "Breadcrumbs",
+    "breadcrumbIcon": "Breadcrumbs Icon",
+    "tabs": "Tabs",
+    "tabDetail": "Tab Detail",
+    "tabsQuickBtn": "Tabs quick button",
+    "tabsRedoBtn": "Tabs redo button",
+    "tabsFoldBtn": "Tabs flod button",
+    "sidebar": "Sidebar",
+    "header": "Header",
+    "footer": "Footer",
+    "fullContent": "Full content",
+    "grayMode": "Gray mode",
+    "colorWeak": "Color Weak Mode",
+    "progress": "Progress",
+    "switchLoading": "Switch Loading",
+    "switchAnimation": "Switch animation",
+    "animationType": "Animation type",
+    "autoScreenLock": "Auto screen lock",
+    "notAutoScreenLock": "Not auto lock",
+    "fixedHeader": "Fixed header",
+    "fixedSideBar": "Fixed Sidebar",
+    "mixSidebarTrigger": "Mixed menu Trigger",
+    "triggerHover": "Hover",
+    "triggerClick": "Click",
+    "mixSidebarFixed": "Fixed expanded menu",
+    "autoCollapseTabsInFold": "Auto collapse tabs in fold"
   }
 }
\ No newline at end of file
diff --git a/src/locales/lang/zh-CN/layout.json b/src/locales/lang/zh-CN/layout.json
index d6a894eb1..a15022131 100644
--- a/src/locales/lang/zh-CN/layout.json
+++ b/src/locales/lang/zh-CN/layout.json
@@ -1,95 +1,96 @@
 {
   "footer": {
-    "onlinePreview": "在线预览", 
+    "onlinePreview": "在线预览",
     "onlineDocument": "在线文档"
-  }, 
+  },
   "header": {
-    "dropdownChangeApi": "切换API", 
-    "dropdownItemDoc": "文档", 
-    "dropdownItemLoginOut": "退出系统", 
-    "tooltipErrorLog": "错误日志", 
-    "tooltipLock": "锁定屏幕", 
-    "tooltipNotify": "消息通知", 
-    "tooltipEntryFull": "全屏", 
-    "tooltipExitFull": "退出全屏", 
-    "lockScreenPassword": "锁屏密码", 
-    "lockScreen": "锁定屏幕", 
-    "lockScreenBtn": "锁定", 
+    "dropdownChangeApi": "切换API",
+    "dropdownItemDoc": "文档",
+    "dropdownItemLoginOut": "退出系统",
+    "tooltipErrorLog": "错误日志",
+    "tooltipLock": "锁定屏幕",
+    "tooltipNotify": "消息通知",
+    "tooltipEntryFull": "全屏",
+    "tooltipExitFull": "退出全屏",
+    "lockScreenPassword": "锁屏密码",
+    "lockScreen": "锁定屏幕",
+    "lockScreenBtn": "锁定",
     "home": "首页"
-  }, 
+  },
   "multipleTab": {
-    "reload": "重新加载", 
-    "close": "关闭标签页", 
-    "closeLeft": "关闭左侧标签页", 
-    "closeRight": "关闭右侧标签页", 
-    "closeOther": "关闭其它标签页", 
+    "reload": "重新加载",
+    "close": "关闭标签页",
+    "closeLeft": "关闭左侧标签页",
+    "closeRight": "关闭右侧标签页",
+    "closeOther": "关闭其它标签页",
     "closeAll": "关闭全部标签页"
-  }, 
+  },
   "setting": {
-    "contentModeFull": "流式", 
-    "contentModeFixed": "定宽", 
-    "topMenuAlignLeft": "居左", 
-    "topMenuAlignRight": "居中", 
-    "topMenuAlignCenter": "居右", 
-    "menuTriggerNone": "不显示", 
-    "menuTriggerBottom": "底部", 
-    "menuTriggerTop": "顶部", 
-    "menuTypeSidebar": "左侧菜单模式", 
-    "menuTypeMixSidebar": "左侧菜单混合模式", 
-    "menuTypeMix": "顶部菜单混合模式", 
-    "menuTypeTopMenu": "顶部菜单模式", 
-    "on": "开", 
-    "off": "关", 
-    "minute": "分钟", 
-    "operatingTitle": "操作成功", 
-    "operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！", 
-    "resetSuccess": "重置成功！", 
-    "copyBtn": "拷贝", 
-    "clearBtn": "清空缓存并返回登录页", 
-    "drawerTitle": "项目配置", 
-    "darkMode": "主题", 
-    "navMode": "导航栏模式", 
-    "interfaceFunction": "界面功能", 
-    "interfaceDisplay": "界面显示", 
-    "animation": "动画", 
-    "splitMenu": "分割菜单", 
-    "closeMixSidebarOnChange": "切换页面关闭菜单", 
-    "sysTheme": "系统主题", 
-    "headerTheme": "顶栏主题", 
-    "sidebarTheme": "菜单主题", 
-    "menuDrag": "侧边菜单拖拽", 
-    "menuSearch": "菜单搜索", 
-    "menuAccordion": "侧边菜单手风琴模式", 
-    "menuCollapse": "折叠菜单", 
-    "collapseMenuDisplayName": "折叠菜单显示名称", 
-    "topMenuLayout": "顶部菜单布局", 
-    "menuCollapseButton": "菜单折叠按钮", 
-    "contentMode": "内容区域宽度", 
-    "expandedMenuWidth": "菜单展开宽度", 
-    "breadcrumb": "面包屑", 
-    "breadcrumbIcon": "面包屑图标", 
-    "tabs": "标签页", 
-    "tabDetail": "标签详情页", 
-    "tabsQuickBtn": "标签页快捷按钮", 
-    "tabsRedoBtn": "标签页刷新按钮", 
-    "tabsFoldBtn": "标签页折叠按钮", 
-    "sidebar": "左侧菜单", 
-    "header": "顶栏", 
-    "footer": "页脚", 
-    "fullContent": "全屏内容", 
-    "grayMode": "灰色模式", 
-    "colorWeak": "色弱模式", 
-    "progress": "顶部进度条", 
-    "switchLoading": "切换loading", 
-    "switchAnimation": "切换动画", 
-    "animationType": "动画类型", 
-    "autoScreenLock": "自动锁屏", 
-    "notAutoScreenLock": "不自动锁屏", 
-    "fixedHeader": "固定header", 
-    "fixedSideBar": "固定Sidebar", 
-    "mixSidebarTrigger": "混合菜单触发方式", 
-    "triggerHover": "悬停", 
-    "triggerClick": "点击", 
-    "mixSidebarFixed": "固定展开菜单"
+    "contentModeFull": "流式",
+    "contentModeFixed": "定宽",
+    "topMenuAlignLeft": "居左",
+    "topMenuAlignRight": "居中",
+    "topMenuAlignCenter": "居右",
+    "menuTriggerNone": "不显示",
+    "menuTriggerBottom": "底部",
+    "menuTriggerTop": "顶部",
+    "menuTypeSidebar": "左侧菜单模式",
+    "menuTypeMixSidebar": "左侧菜单混合模式",
+    "menuTypeMix": "顶部菜单混合模式",
+    "menuTypeTopMenu": "顶部菜单模式",
+    "on": "开",
+    "off": "关",
+    "minute": "分钟",
+    "operatingTitle": "操作成功",
+    "operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！",
+    "resetSuccess": "重置成功！",
+    "copyBtn": "拷贝",
+    "clearBtn": "清空缓存并返回登录页",
+    "drawerTitle": "项目配置",
+    "darkMode": "主题",
+    "navMode": "导航栏模式",
+    "interfaceFunction": "界面功能",
+    "interfaceDisplay": "界面显示",
+    "animation": "动画",
+    "splitMenu": "分割菜单",
+    "closeMixSidebarOnChange": "切换页面关闭菜单",
+    "sysTheme": "系统主题",
+    "headerTheme": "顶栏主题",
+    "sidebarTheme": "菜单主题",
+    "menuDrag": "侧边菜单拖拽",
+    "menuSearch": "菜单搜索",
+    "menuAccordion": "侧边菜单手风琴模式",
+    "menuCollapse": "折叠菜单",
+    "collapseMenuDisplayName": "折叠菜单显示名称",
+    "topMenuLayout": "顶部菜单布局",
+    "menuCollapseButton": "菜单折叠按钮",
+    "contentMode": "内容区域宽度",
+    "expandedMenuWidth": "菜单展开宽度",
+    "breadcrumb": "面包屑",
+    "breadcrumbIcon": "面包屑图标",
+    "tabs": "标签页",
+    "tabDetail": "标签详情页",
+    "tabsQuickBtn": "标签页快捷按钮",
+    "tabsRedoBtn": "标签页刷新按钮",
+    "tabsFoldBtn": "标签页折叠按钮",
+    "sidebar": "左侧菜单",
+    "header": "顶栏",
+    "footer": "页脚",
+    "fullContent": "全屏内容",
+    "grayMode": "灰色模式",
+    "colorWeak": "色弱模式",
+    "progress": "顶部进度条",
+    "switchLoading": "切换loading",
+    "switchAnimation": "切换动画",
+    "animationType": "动画类型",
+    "autoScreenLock": "自动锁屏",
+    "notAutoScreenLock": "不自动锁屏",
+    "fixedHeader": "固定header",
+    "fixedSideBar": "固定Sidebar",
+    "mixSidebarTrigger": "混合菜单触发方式",
+    "triggerHover": "悬停",
+    "triggerClick": "点击",
+    "mixSidebarFixed": "固定展开菜单",
+    "autoCollapseTabsInFold": "fold模式下自动收起标签页"
   }
 }
\ No newline at end of file
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
index a81b5767b..8f02ff855 100644
--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@@ -2,6 +2,8 @@ import { ThemeEnum } from '../enums/appEnum';
 
 export const prefixCls = 'vben';
 
+export const multipleTabHeight = 30;
+
 export const darkMode = ThemeEnum.LIGHT;
 
 // app theme preset color
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 26e70fa1c..0428871a4 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -135,6 +135,8 @@ const setting: ProjectConfig = {
     showRedo: true,
     // Whether to show the collapse button
     showFold: true,
+    // Auto collapsed
+    autoCollapse: false,
   },
 
   // Transition Setting
diff --git a/types/config.d.ts b/types/config.d.ts
index 959c55e8b..e6ef3d672 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -41,6 +41,7 @@ export interface MultiTabsSetting {
   canDrag: boolean;
   showRedo: boolean;
   showFold: boolean;
+  autoCollapse: boolean;
 }
 
 export interface HeaderSetting {