github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 02:00:25 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(MultipleTab): add tabs auto collapse interaction in fold mode and setting (#3256)

Browse Source 
* 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>
This commit is contained in:
xachary 2023-11-09 11:24:27 +08:00 committed by GitHub
parent b976933766
commit 191e809b6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 262 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/hooks/setting/useMultipleTabSetting.ts
View File

@ -15,6 +15,8 @@ export function useMultipleTabSetting() {
const getShowFold = computed(() => appStore.getMultiTabsSetting.showFold); const getShowFold = computed(() => appStore.getMultiTabsSetting.showFold);
const getAutoCollapse = computed(() => appStore.getMultiTabsSetting.autoCollapse);
function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) { function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
appStore.setProjectConfig({ multiTabsSetting }); appStore.setProjectConfig({ multiTabsSetting });
} }
@ -24,5 +26,6 @@ export function useMultipleTabSetting() {
getShowQuick, getShowQuick,
getShowRedo, getShowRedo,
getShowFold, getShowFold,
getAutoCollapse,
}; };
} }

38
src/layouts/default/header/MultipleHeader.vue
View File

@ -1,5 +1,9 @@
<template> <template>
<div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div> <div
:class="[`${prefixCls}__placeholder`]"
:style="getPlaceholderDomStyle"
v-if="getIsShowPlaceholderDom"
></div>
<div :style="getWrapStyle" :class="getClass"> <div :style="getWrapStyle" :class="getClass">
<LayoutHeader v-if="getShowInsetHeaderRef" /> <LayoutHeader v-if="getShowInsetHeaderRef" />
<MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" /> <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
@ -31,7 +35,7 @@
const tabStore = useMultipleTabStore(); const tabStore = useMultipleTabStore();
const { prefixCls } = useDesign('layout-multiple-header'); const { prefixCls } = useDesign('layout-multiple-header');
const { getCalcContentWidth, getSplit } = useMenuSetting(); const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
const { const {
getFixed, getFixed,
@ -43,7 +47,7 @@
const { getFullContent } = useFullContent(); const { getFullContent } = useFullContent();
const { getShowMultipleTab } = useMultipleTabSetting(); const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
const getShowTabs = computed(() => { const getShowTabs = computed(() => {
return unref(getShowMultipleTab) && !unref(getFullContent); return unref(getShowMultipleTab) && !unref(getFullContent);
@ -68,19 +72,23 @@
return unref(getFixed) || unref(getShowFullHeaderRef); return unref(getFixed) || unref(getShowFullHeaderRef);
}); });
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
const getPlaceholderDomStyle = computed((): CSSProperties => { const getPlaceholderDomStyle = computed((): CSSProperties => {
let height = 0; let height = 0;
if ( if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
(unref(getShowFullHeaderRef) || !unref(getSplit)) && if (
unref(getShowHeader) && (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
!unref(getFullContent) unref(getShowHeader) &&
) { !unref(getFullContent)
height += HEADER_HEIGHT; ) {
height += HEADER_HEIGHT;
}
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
height += TABS_HEIGHT;
}
setHeaderHeight(height);
} }
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
height += TABS_HEIGHT;
}
setHeaderHeight(height);
return { return {
height: `${height}px`, height: `${height}px`,
}; };
@ -125,5 +133,9 @@
top: 0; top: 0;
width: 100%; width: 100%;
} }
&__placeholder {
transition: height 0.6s ease-in-out;
}
} }
</style> </style>

20
src/layouts/default/index.vue
View File

@ -2,7 +2,7 @@
<Layout :class="prefixCls" v-bind="lockEvents"> <Layout :class="prefixCls" v-bind="lockEvents">
<LayoutFeatures /> <LayoutFeatures />
<LayoutHeader fixed v-if="getShowFullHeaderRef" /> <LayoutHeader fixed v-if="getShowFullHeaderRef" />
<Layout :class="[layoutClass]"> <Layout :class="[layoutClass, `${prefixCls}-out`]">
<LayoutSideBar v-if="getShowSidebar || getIsMobile" /> <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
<Layout :class="`${prefixCls}-main`"> <Layout :class="`${prefixCls}-main`">
<LayoutMultipleHeader /> <LayoutMultipleHeader />
@ -30,6 +30,8 @@
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '/@/hooks/web/useAppInject';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
export default defineComponent({ export default defineComponent({
name: 'DefaultLayout', name: 'DefaultLayout',
components: { components: {
@ -46,6 +48,7 @@
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
const { getShowFullHeaderRef } = useHeaderSetting(); const { getShowFullHeaderRef } = useHeaderSetting();
const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting(); const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
const { getAutoCollapse } = useMultipleTabSetting();
// Create a lock screen monitor // Create a lock screen monitor
const lockEvents = useLockPage(); const lockEvents = useLockPage();
@ -55,6 +58,11 @@
if (unref(getIsMixSidebar) || unref(getShowMenu)) { if (unref(getIsMixSidebar) || unref(getShowMenu)) {
cls.push('ant-layout-has-sider'); cls.push('ant-layout-has-sider');
} }
if (!unref(getShowMenu) && unref(getAutoCollapse)) {
cls.push('ant-layout-auto-collapse-tabs');
}
return cls; return cls;
}); });
@ -89,4 +97,14 @@
margin-left: 1px; margin-left: 1px;
} }
} }
.@{prefix-cls}-out {
&.ant-layout-has-sider {
.@{prefix-cls} {
&-main {
margin-left: 1px;
}
}
}
}
</style> </style>

9
src/layouts/default/setting/SettingDrawer.tsx
View File

@ -89,7 +89,8 @@ export default defineComponent({
getShowSearch, getShowSearch,
} = useHeaderSetting(); } = useHeaderSetting();
const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting(); const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold, getAutoCollapse } =
useMultipleTabSetting();
const getShowMenuRef = computed(() => { const getShowMenuRef = computed(() => {
return unref(getShowMenu) && !unref(getIsHorizontal); return unref(getShowMenu) && !unref(getIsHorizontal);
@ -221,6 +222,12 @@ export default defineComponent({
def={unref(getMenuFixed)} def={unref(getMenuFixed)}
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)} disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
/> />
<SwitchItem
title={t('layout.setting.autoCollapseTabsInFold')}
event={HandlerEnum.TABS_AUTO_COLLAPSE}
def={unref(getAutoCollapse)}
disabled={!unref(getShowMultipleTab)}
/>
<SelectItem <SelectItem
title={t('layout.setting.mixSidebarTrigger')} title={t('layout.setting.mixSidebarTrigger')}
event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR} event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}

1
src/layouts/default/setting/enum.ts
View File

@ -42,6 +42,7 @@ export enum HandlerEnum {
TABS_SHOW_REDO, TABS_SHOW_REDO,
TABS_SHOW, TABS_SHOW,
TABS_SHOW_FOLD, TABS_SHOW_FOLD,
TABS_AUTO_COLLAPSE,
LOCK_TIME, LOCK_TIME,
FULL_CONTENT, FULL_CONTENT,

3
src/layouts/default/setting/handler.ts
View File

@ -153,6 +153,9 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case HandlerEnum.TABS_SHOW_FOLD: case HandlerEnum.TABS_SHOW_FOLD:
return { multiTabsSetting: { showFold: value } }; return { multiTabsSetting: { showFold: value } };
case HandlerEnum.TABS_AUTO_COLLAPSE:
return { multiTabsSetting: { autoCollapse: value } };
// ============header================== // ============header==================
case HandlerEnum.HEADER_THEME: case HandlerEnum.HEADER_THEME:
updateHeaderBgColor(value); updateHeaderBgColor(value);

20
src/layouts/default/tabs/index.less
View File

@ -1,4 +1,5 @@
@prefix-cls: ~'@{namespace}-multiple-tabs'; @prefix-cls: ~'@{namespace}-multiple-tabs';
@prefix-cls-default-layout: ~'@{namespace}-default-layout';
html[data-theme='light'] { html[data-theme='light'] {
.@{prefix-cls} { .@{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} { .@{prefix-cls} {
z-index: 10; z-index: 10;
height: @multiple-height + 2; height: @multiple-height + 2;

6
src/layouts/default/tabs/index.vue
View File

@ -50,6 +50,9 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useMouse } from '@vueuse/core';
import { multipleTabHeight } from '/@/settings/designSetting';
export default defineComponent({ export default defineComponent({
name: 'MultipleTabs', name: 'MultipleTabs',
components: { components: {
@ -78,11 +81,14 @@
const unClose = computed(() => unref(getTabsState).length === 1); const unClose = computed(() => unref(getTabsState).length === 1);
const { y: mouseY } = useMouse();
const getWrapClass = computed(() => { const getWrapClass = computed(() => {
return [ return [
prefixCls, prefixCls,
{ {
[`${prefixCls}--hide-close`]: unref(unClose), [`${prefixCls}--hide-close`]: unref(unClose),
[`${prefixCls}--hover`]: unref(mouseY) < multipleTabHeight,
}, },
]; ];
}); });

171
src/locales/lang/en/layout.json
View File

@ -1,95 +1,96 @@
{ {
"footer": { "footer": {
"onlinePreview": "Preview", "onlinePreview": "Preview",
"onlineDocument": "Document" "onlineDocument": "Document"
}, },
"header": { "header": {
"dropdownChangeApi": "Change Api", "dropdownChangeApi": "Change Api",
"dropdownItemDoc": "Document", "dropdownItemDoc": "Document",
"dropdownItemLoginOut": "Log Out", "dropdownItemLoginOut": "Log Out",
"tooltipErrorLog": "Error log", "tooltipErrorLog": "Error log",
"tooltipLock": "Lock screen", "tooltipLock": "Lock screen",
"tooltipNotify": "Notification", "tooltipNotify": "Notification",
"tooltipEntryFull": "Full Screen", "tooltipEntryFull": "Full Screen",
"tooltipExitFull": "Exit Full Screen", "tooltipExitFull": "Exit Full Screen",
"lockScreenPassword": "Lock screen password", "lockScreenPassword": "Lock screen password",
"lockScreen": "Lock screen", "lockScreen": "Lock screen",
"lockScreenBtn": "Locking", "lockScreenBtn": "Locking",
"home": "Home" "home": "Home"
}, },
"multipleTab": { "multipleTab": {
"reload": "Refresh current", "reload": "Refresh current",
"close": "Close current", "close": "Close current",
"closeLeft": "Close Left", "closeLeft": "Close Left",
"closeRight": "Close Right", "closeRight": "Close Right",
"closeOther": "Close Other", "closeOther": "Close Other",
"closeAll": "Close All" "closeAll": "Close All"
}, },
"setting": { "setting": {
"contentModeFull": "Full", "contentModeFull": "Full",
"contentModeFixed": "Fixed width", "contentModeFixed": "Fixed width",
"topMenuAlignLeft": "Left", "topMenuAlignLeft": "Left",
"topMenuAlignRight": "Center", "topMenuAlignRight": "Center",
"topMenuAlignCenter": "Right", "topMenuAlignCenter": "Right",
"menuTriggerNone": "Not Show", "menuTriggerNone": "Not Show",
"menuTriggerBottom": "Bottom", "menuTriggerBottom": "Bottom",
"menuTriggerTop": "Top", "menuTriggerTop": "Top",
"menuTypeSidebar": "Left menu mode", "menuTypeSidebar": "Left menu mode",
"menuTypeMixSidebar": "Left menu mixed mode", "menuTypeMixSidebar": "Left menu mixed mode",
"menuTypeMix": "Top Menu Mix mode", "menuTypeMix": "Top Menu Mix mode",
"menuTypeTopMenu": "Top menu mode", "menuTypeTopMenu": "Top menu mode",
"on": "On", "on": "On",
"off": "Off", "off": "Off",
"minute": "Minute", "minute": "Minute",
"operatingTitle": "Successful!", "operatingTitle": "Successful!",
"operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!", "operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!",
"resetSuccess": "Successfully reset!", "resetSuccess": "Successfully reset!",
"copyBtn": "Copy", "copyBtn": "Copy",
"clearBtn": "Clear cache and to the login page", "clearBtn": "Clear cache and to the login page",
"drawerTitle": "Configuration", "drawerTitle": "Configuration",
"darkMode": "Dark mode", "darkMode": "Dark mode",
"navMode": "Navigation mode", "navMode": "Navigation mode",
"interfaceFunction": "Interface function", "interfaceFunction": "Interface function",
"interfaceDisplay": "Interface display", "interfaceDisplay": "Interface display",
"animation": "Animation", "animation": "Animation",
"splitMenu": "Split menu", "splitMenu": "Split menu",
"closeMixSidebarOnChange": "Switch page to close menu", "closeMixSidebarOnChange": "Switch page to close menu",
"sysTheme": "System theme", "sysTheme": "System theme",
"headerTheme": "Header theme", "headerTheme": "Header theme",
"sidebarTheme": "Menu theme", "sidebarTheme": "Menu theme",
"menuDrag": "Drag Sidebar", "menuDrag": "Drag Sidebar",
"menuSearch": "Menu search", "menuSearch": "Menu search",
"menuAccordion": "Sidebar accordion", "menuAccordion": "Sidebar accordion",
"menuCollapse": "Collapse menu", "menuCollapse": "Collapse menu",
"collapseMenuDisplayName": "Collapse menu display name", "collapseMenuDisplayName": "Collapse menu display name",
"topMenuLayout": "Top menu layout", "topMenuLayout": "Top menu layout",
"menuCollapseButton": "Menu collapse button", "menuCollapseButton": "Menu collapse button",
"contentMode": "Content area width", "contentMode": "Content area width",
"expandedMenuWidth": "Expanded menu width", "expandedMenuWidth": "Expanded menu width",
"breadcrumb": "Breadcrumbs", "breadcrumb": "Breadcrumbs",
"breadcrumbIcon": "Breadcrumbs Icon", "breadcrumbIcon": "Breadcrumbs Icon",
"tabs": "Tabs", "tabs": "Tabs",
"tabDetail": "Tab Detail", "tabDetail": "Tab Detail",
"tabsQuickBtn": "Tabs quick button", "tabsQuickBtn": "Tabs quick button",
"tabsRedoBtn": "Tabs redo button", "tabsRedoBtn": "Tabs redo button",
"tabsFoldBtn": "Tabs flod button", "tabsFoldBtn": "Tabs flod button",
"sidebar": "Sidebar", "sidebar": "Sidebar",
"header": "Header", "header": "Header",
"footer": "Footer", "footer": "Footer",
"fullContent": "Full content", "fullContent": "Full content",
"grayMode": "Gray mode", "grayMode": "Gray mode",
"colorWeak": "Color Weak Mode", "colorWeak": "Color Weak Mode",
"progress": "Progress", "progress": "Progress",
"switchLoading": "Switch Loading", "switchLoading": "Switch Loading",
"switchAnimation": "Switch animation", "switchAnimation": "Switch animation",
"animationType": "Animation type", "animationType": "Animation type",
"autoScreenLock": "Auto screen lock", "autoScreenLock": "Auto screen lock",
"notAutoScreenLock": "Not auto lock", "notAutoScreenLock": "Not auto lock",
"fixedHeader": "Fixed header", "fixedHeader": "Fixed header",
"fixedSideBar": "Fixed Sidebar", "fixedSideBar": "Fixed Sidebar",
"mixSidebarTrigger": "Mixed menu Trigger", "mixSidebarTrigger": "Mixed menu Trigger",
"triggerHover": "Hover", "triggerHover": "Hover",
"triggerClick": "Click", "triggerClick": "Click",
"mixSidebarFixed": "Fixed expanded menu" "mixSidebarFixed": "Fixed expanded menu",
"autoCollapseTabsInFold": "Auto collapse tabs in fold"
} }
} }

171
src/locales/lang/zh-CN/layout.json
View File

@ -1,95 +1,96 @@
{ {
"footer": { "footer": {
"onlinePreview": "在线预览", "onlinePreview": "在线预览",
"onlineDocument": "在线文档" "onlineDocument": "在线文档"
}, },
"header": { "header": {
"dropdownChangeApi": "切换API", "dropdownChangeApi": "切换API",
"dropdownItemDoc": "文档", "dropdownItemDoc": "文档",
"dropdownItemLoginOut": "退出系统", "dropdownItemLoginOut": "退出系统",
"tooltipErrorLog": "错误日志", "tooltipErrorLog": "错误日志",
"tooltipLock": "锁定屏幕", "tooltipLock": "锁定屏幕",
"tooltipNotify": "消息通知", "tooltipNotify": "消息通知",
"tooltipEntryFull": "全屏", "tooltipEntryFull": "全屏",
"tooltipExitFull": "退出全屏", "tooltipExitFull": "退出全屏",
"lockScreenPassword": "锁屏密码", "lockScreenPassword": "锁屏密码",
"lockScreen": "锁定屏幕", "lockScreen": "锁定屏幕",
"lockScreenBtn": "锁定", "lockScreenBtn": "锁定",
"home": "首页" "home": "首页"
}, },
"multipleTab": { "multipleTab": {
"reload": "重新加载", "reload": "重新加载",
"close": "关闭标签页", "close": "关闭标签页",
"closeLeft": "关闭左侧标签页", "closeLeft": "关闭左侧标签页",
"closeRight": "关闭右侧标签页", "closeRight": "关闭右侧标签页",
"closeOther": "关闭其它标签页", "closeOther": "关闭其它标签页",
"closeAll": "关闭全部标签页" "closeAll": "关闭全部标签页"
}, },
"setting": { "setting": {
"contentModeFull": "流式", "contentModeFull": "流式",
"contentModeFixed": "定宽", "contentModeFixed": "定宽",
"topMenuAlignLeft": "居左", "topMenuAlignLeft": "居左",
"topMenuAlignRight": "居中", "topMenuAlignRight": "居中",
"topMenuAlignCenter": "居右", "topMenuAlignCenter": "居右",
"menuTriggerNone": "不显示", "menuTriggerNone": "不显示",
"menuTriggerBottom": "底部", "menuTriggerBottom": "底部",
"menuTriggerTop": "顶部", "menuTriggerTop": "顶部",
"menuTypeSidebar": "左侧菜单模式", "menuTypeSidebar": "左侧菜单模式",
"menuTypeMixSidebar": "左侧菜单混合模式", "menuTypeMixSidebar": "左侧菜单混合模式",
"menuTypeMix": "顶部菜单混合模式", "menuTypeMix": "顶部菜单混合模式",
"menuTypeTopMenu": "顶部菜单模式", "menuTypeTopMenu": "顶部菜单模式",
"on": "开", "on": "开",
"off": "关", "off": "关",
"minute": "分钟", "minute": "分钟",
"operatingTitle": "操作成功", "operatingTitle": "操作成功",
"operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！", "operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！",
"resetSuccess": "重置成功！", "resetSuccess": "重置成功！",
"copyBtn": "拷贝", "copyBtn": "拷贝",
"clearBtn": "清空缓存并返回登录页", "clearBtn": "清空缓存并返回登录页",
"drawerTitle": "项目配置", "drawerTitle": "项目配置",
"darkMode": "主题", "darkMode": "主题",
"navMode": "导航栏模式", "navMode": "导航栏模式",
"interfaceFunction": "界面功能", "interfaceFunction": "界面功能",
"interfaceDisplay": "界面显示", "interfaceDisplay": "界面显示",
"animation": "动画", "animation": "动画",
"splitMenu": "分割菜单", "splitMenu": "分割菜单",
"closeMixSidebarOnChange": "切换页面关闭菜单", "closeMixSidebarOnChange": "切换页面关闭菜单",
"sysTheme": "系统主题", "sysTheme": "系统主题",
"headerTheme": "顶栏主题", "headerTheme": "顶栏主题",
"sidebarTheme": "菜单主题", "sidebarTheme": "菜单主题",
"menuDrag": "侧边菜单拖拽", "menuDrag": "侧边菜单拖拽",
"menuSearch": "菜单搜索", "menuSearch": "菜单搜索",
"menuAccordion": "侧边菜单手风琴模式", "menuAccordion": "侧边菜单手风琴模式",
"menuCollapse": "折叠菜单", "menuCollapse": "折叠菜单",
"collapseMenuDisplayName": "折叠菜单显示名称", "collapseMenuDisplayName": "折叠菜单显示名称",
"topMenuLayout": "顶部菜单布局", "topMenuLayout": "顶部菜单布局",
"menuCollapseButton": "菜单折叠按钮", "menuCollapseButton": "菜单折叠按钮",
"contentMode": "内容区域宽度", "contentMode": "内容区域宽度",
"expandedMenuWidth": "菜单展开宽度", "expandedMenuWidth": "菜单展开宽度",
"breadcrumb": "面包屑", "breadcrumb": "面包屑",
"breadcrumbIcon": "面包屑图标", "breadcrumbIcon": "面包屑图标",
"tabs": "标签页", "tabs": "标签页",
"tabDetail": "标签详情页", "tabDetail": "标签详情页",
"tabsQuickBtn": "标签页快捷按钮", "tabsQuickBtn": "标签页快捷按钮",
"tabsRedoBtn": "标签页刷新按钮", "tabsRedoBtn": "标签页刷新按钮",
"tabsFoldBtn": "标签页折叠按钮", "tabsFoldBtn": "标签页折叠按钮",
"sidebar": "左侧菜单", "sidebar": "左侧菜单",
"header": "顶栏", "header": "顶栏",
"footer": "页脚", "footer": "页脚",
"fullContent": "全屏内容", "fullContent": "全屏内容",
"grayMode": "灰色模式", "grayMode": "灰色模式",
"colorWeak": "色弱模式", "colorWeak": "色弱模式",
"progress": "顶部进度条", "progress": "顶部进度条",
"switchLoading": "切换loading", "switchLoading": "切换loading",
"switchAnimation": "切换动画", "switchAnimation": "切换动画",
"animationType": "动画类型", "animationType": "动画类型",
"autoScreenLock": "自动锁屏", "autoScreenLock": "自动锁屏",
"notAutoScreenLock": "不自动锁屏", "notAutoScreenLock": "不自动锁屏",
"fixedHeader": "固定header", "fixedHeader": "固定header",
"fixedSideBar": "固定Sidebar", "fixedSideBar": "固定Sidebar",
"mixSidebarTrigger": "混合菜单触发方式", "mixSidebarTrigger": "混合菜单触发方式",
"triggerHover": "悬停", "triggerHover": "悬停",
"triggerClick": "点击", "triggerClick": "点击",
"mixSidebarFixed": "固定展开菜单" "mixSidebarFixed": "固定展开菜单",
"autoCollapseTabsInFold": "fold模式下自动收起标签页"
} }
} }

2
src/settings/designSetting.ts
View File

@ -2,6 +2,8 @@ import { ThemeEnum } from '../enums/appEnum';
export const prefixCls = 'vben'; export const prefixCls = 'vben';
export const multipleTabHeight = 30;
export const darkMode = ThemeEnum.LIGHT; export const darkMode = ThemeEnum.LIGHT;
// app theme preset color // app theme preset color

2
src/settings/projectSetting.ts
View File

@ -135,6 +135,8 @@ const setting: ProjectConfig = {
showRedo: true, showRedo: true,
// Whether to show the collapse button // Whether to show the collapse button
showFold: true, showFold: true,
// Auto collapsed
autoCollapse: false,
}, },
// Transition Setting // Transition Setting

1
types/config.d.ts vendored
View File

@ -41,6 +41,7 @@ export interface MultiTabsSetting {
canDrag: boolean; canDrag: boolean;
showRedo: boolean; showRedo: boolean;
showFold: boolean; showFold: boolean;
autoCollapse: boolean;
} }
export interface HeaderSetting { export interface HeaderSetting {