From 5737e478f671e7f1c60f7db08a0007f154b6f4b8 Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 19 Oct 2020 22:47:44 +0800 Subject: [PATCH] feat: add collapsedShowTitle setting --- src/components/Menu/src/BasicMenu.tsx | 18 +++++++++++---- src/components/Menu/src/index.less | 9 ++++++++ src/components/Menu/src/props.ts | 4 ++++ src/components/Modal/src/BasicModal.tsx | 1 + src/layouts/default/LayoutMenu.tsx | 3 ++- src/layouts/default/setting/SettingDrawer.tsx | 23 ++++++++++++++++++- src/settings/projectSetting.ts | 2 ++ src/types/config.d.ts | 1 + 8 files changed, 55 insertions(+), 6 deletions(-) diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx index e656da46a..f02ab07be 100644 --- a/src/components/Menu/src/BasicMenu.tsx +++ b/src/components/Menu/src/BasicMenu.tsx @@ -152,7 +152,13 @@ export default defineComponent({ const { appendClass } = props; const levelCls = `basic-menu-item__level${index} ${menuState.theme} `; - const showTitle = props.isAppMenu ? !menuStore.getCollapsedState : true; + const showTitle = computed(() => { + if (!props.isAppMenu) return true; + if (!props.collapsedShowTitle) { + return !menuStore.getCollapsedState; + } + return true; + }); return menuList.map((menu) => { if (!menu) { return null; @@ -172,7 +178,7 @@ export default defineComponent({ , ]} @@ -184,7 +190,7 @@ export default defineComponent({ {{ title: () => [ {{ diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less index 0118169c9..ec91da08e 100644 --- a/src/components/Menu/src/index.less +++ b/src/components/Menu/src/index.less @@ -14,6 +14,15 @@ } .basic-menu { + &.collapsed-show-title.ant-menu-inline-collapsed { + & > li > .ant-menu-submenu-title { + display: flex; + margin-top: 12px; + font-size: 12px; + flex-direction: column; + } + } + &__wrap { /* 滚动槽 */ &::-webkit-scrollbar { diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts index 510f504e8..6436c0f9d 100644 --- a/src/components/Menu/src/props.ts +++ b/src/components/Menu/src/props.ts @@ -11,6 +11,10 @@ export const basicProps = { type: Boolean as PropType, default: false, }, + collapsedShowTitle: { + type: Boolean as PropType, + default: false, + }, flatItems: { type: Array as PropType, default: () => [], diff --git a/src/components/Modal/src/BasicModal.tsx b/src/components/Modal/src/BasicModal.tsx index 155380979..1deb95fef 100644 --- a/src/components/Modal/src/BasicModal.tsx +++ b/src/components/Modal/src/BasicModal.tsx @@ -199,6 +199,7 @@ export default defineComponent({ } } } + /** * @description: 设置modal参数 */ diff --git a/src/layouts/default/LayoutMenu.tsx b/src/layouts/default/LayoutMenu.tsx index d64cb2bda..310f4290d 100644 --- a/src/layouts/default/LayoutMenu.tsx +++ b/src/layouts/default/LayoutMenu.tsx @@ -177,7 +177,7 @@ export default defineComponent({ return () => { const { showLogo, - menuSetting: { type: menuType, mode, theme, collapsed }, + menuSetting: { type: menuType, mode, theme, collapsed, collapsedShowTitle }, } = unref(getProjectConfigRef); const isSidebarType = menuType === MenuTypeEnum.SIDEBAR; @@ -190,6 +190,7 @@ export default defineComponent({ type={menuType} mode={props.menuMode || mode} class="layout-menu" + collapsedShowTitle={collapsedShowTitle} theme={themeData} showLogo={isShowLogo} search={unref(showSearchRef) && !collapsed} diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx index 1902cc35c..c522381a0 100644 --- a/src/layouts/default/setting/SettingDrawer.tsx +++ b/src/layouts/default/setting/SettingDrawer.tsx @@ -208,7 +208,14 @@ export default defineComponent({ const { contentMode, headerSetting: { fixed }, - menuSetting: { hasDrag, collapsed, showSearch, menuWidth, topMenuAlign } = {}, + menuSetting: { + hasDrag, + collapsed, + showSearch, + menuWidth, + topMenuAlign, + collapsedShowTitle, + } = {}, } = appStore.getProjectConfig; return [ renderSwitchItem('侧边菜单拖拽', { @@ -232,6 +239,13 @@ export default defineComponent({ def: collapsed, disabled: !unref(getShowMenuRef), }), + renderSwitchItem('折叠菜单显示名称', { + handler: (e) => { + baseHandler('collapsedShowTitle', e); + }, + def: collapsedShowTitle, + disabled: !unref(getShowMenuRef) || !collapsed, + }), renderSwitchItem('固定header', { handler: (e) => { @@ -449,6 +463,13 @@ export default defineComponent({ }, }; } + if (event === 'collapsedShowTitle') { + config = { + menuSetting: { + collapsedShowTitle: value, + }, + }; + } if (event === 'lockTime') { config = { lockTime: value, diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index 7c8b94e53..bcd48f0b1 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -44,6 +44,8 @@ const setting: ProjectConfig = { menuSetting: { // 菜单折叠 collapsed: false, + // 折叠菜单时候是否显示菜单名 + collapsedShowTitle: false, // 是否可拖拽 hasDrag: true, // 是否显示 diff --git a/src/types/config.d.ts b/src/types/config.d.ts index 2d3d55cf8..a5d40a99b 100644 --- a/src/types/config.d.ts +++ b/src/types/config.d.ts @@ -11,6 +11,7 @@ export interface MessageSetting { } export interface MenuSetting { collapsed: boolean; + collapsedShowTitle: boolean; hasDrag: boolean; showSearch: boolean; show: boolean;