feat: add collapsedShowTitle setting

vben
1 parent a3b7a653
Showing 8 changed files with 55 additions and 6 deletions
src/components/Menu/src/BasicMenu.tsx
src/components/Menu/src/index.less
src/components/Menu/src/props.ts
src/components/Modal/src/BasicModal.tsx
src/layouts/default/LayoutMenu.tsx
src/layouts/default/setting/SettingDrawer.tsx
src/settings/projectSetting.ts
src/types/config.d.ts
@@ -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({
                 <MenuContent
                   item={menu}
                   level={index}
-                  showTitle={showTitle}
+                  showTitle={unref(showTitle)}
                   searchValue={menuState.searchValue}
                 />,
               ]}
@@ -184,7 +190,7 @@ export default defineComponent({
             {{
               title: () => [
                 <MenuContent
-                  showTitle={showTitle}
+                  showTitle={unref(showTitle)}
                   item={menu}
                   level={index}
                   searchValue={menuState.searchValue}
@@ -218,7 +224,11 @@ export default defineComponent({
           inlineIndent={props.inlineIndent}
           theme={unref(theme)}
           onOpenChange={handleOpenChange}
-          class={['basic-menu', unref(transparentMenuClass)]}
+          class={[
+            'basic-menu',
+            props.collapsedShowTitle && 'collapsed-show-title',
+            unref(transparentMenuClass),
+          ]}
           {...inlineCollapsedObj}
         >
           {{
@@ -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 {
@@ -11,6 +11,10 @@ export const basicProps = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  collapsedShowTitle: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
   flatItems: {
     type: Array as PropType<Menu[]>,
     default: () => [],
@@ -199,6 +199,7 @@ export default defineComponent({
         }
       }
     }
+
     /**
      * @description: 设置modal参数
      */
@@ -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}
@@ -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,
@@ -44,6 +44,8 @@ const setting: ProjectConfig = {
   menuSetting: {
     // 菜单折叠
     collapsed: false,
+    // 折叠菜单时候是否显示菜单名
+    collapsedShowTitle: false,
     // 是否可拖拽
     hasDrag: true,
     // 是否显示
@@ -11,6 +11,7 @@ export interface MessageSetting {
 }
 export interface MenuSetting {
   collapsed: boolean;
+  collapsedShowTitle: boolean;
   hasDrag: boolean;
   showSearch: boolean;
   show: boolean;