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>
2025-01-23 17:50:25 +08:00 · 2023-11-09 11:24:27 +08:00 · 2023-11-09 11:24:27 +08:00 · 191e809b6d
commit 191e809b6d
parent b976933766
13 changed files with 262 additions and 185 deletions
--- 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,
  };
 }
--- 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>
--- 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>
--- 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}
--- 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,
--- 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);
--- 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;
--- 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,
          },
        ];
      });
--- 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"
  }
 }
--- 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模式下自动收起标签页"
  }
 }
--- 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
--- 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
--- 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 {