chore: fix layout style

src/components/Application/src/AppLogo.vue

@@ -3,7 +3,11 @@
  * @Description: logo component
 -->
 <template>
-  <div class="anticon" :class="[prefixCls, theme]" @click="handleGoHome">
+  <div
+    class="anticon"
+    :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
+    @click="handleGoHome"
+  >
     <img src="/@/assets/images/logo.png" />
     <div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
       {{ title }}
@@ -35,6 +39,7 @@
     },
     setup() {
       const { prefixCls } = useDesign('app-logo');
+      const { getCollapsedShowTitle } = useMenuSetting();
 
       const { title } = useGlobSetting();
 
@@ -48,6 +53,7 @@
         handleGoHome,
         title,
         prefixCls,
+        getCollapsedShowTitle,
       };
     },
   });
@@ -67,6 +73,10 @@
       border-bottom: 1px solid @border-color-base;
     }
 
+    &.collapsed-show-title {
+      padding-left: 20px;
+    }
+
     &.light &__title {
       color: @primary-color;
     }

src/components/Menu/src/BasicMenu.vue

@@ -17,7 +17,7 @@
         :item="item"
         :theme="theme"
         :level="1"
-        :showTitle="!getCollapsed"
+        :showTitle="showTitle"
         :isHorizontal="isHorizontal"
       />
     </template>
@@ -95,12 +95,16 @@
           prefixCls,
           `justify-${align}`,
           {
+            [`${prefixCls}--hide-title`]: !unref(showTitle),
+            [`${prefixCls}--collapsed-show-title`]: props.collapsedShowTitle,
             [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
             [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
           },
         ];
       });
 
+      const showTitle = computed(() => props.collapsedShowTitle && unref(getCollapsed));
+
       const getInlineCollapseOptions = computed(() => {
         const isInline = props.mode === MenuModeEnum.INLINE;
 
@@ -164,7 +168,7 @@
         getMenuClass,
         handleOpenChange,
         getOpenKeys,
-        getCollapsed,
+        showTitle,
         ...toRefs(menuState),
       };
     },

src/components/Menu/src/index.less

@@ -48,6 +48,63 @@
     opacity: 1 !important;
   }
 
+  &--hide-title {
+    &.ant-menu-inline-collapsed > .ant-menu-item,
+    &.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
+    &.ant-menu-inline-collapsed
+      > .ant-menu-item-group
+      > .ant-menu-item-group-list
+      > .ant-menu-submenu
+      > .ant-menu-submenu-title,
+    &.ant-menu-inline-collapsed .ant-menu-submenu-title {
+      padding-right: 16px !important;
+      padding-left: 16px !important;
+    }
+  }
+
+  &--collapsed-show-title.ant-menu-inline-collapsed {
+    .@{basic-menu-prefix-cls}-item__level1 {
+      padding: 2px 0;
+      justify-content: center !important;
+
+      &.ant-menu-item {
+        display: flex;
+        align-items: center;
+        height: 60px !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        line-height: 60px !important;
+
+        > span {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    & > li[role='menuitem']:not(.ant-menu-submenu),
+    & > li > .ant-menu-submenu-title {
+      display: flex;
+      margin-top: 10px;
+      font-size: 12px;
+      flex-direction: column;
+      align-items: center;
+      line-height: 24px;
+    }
+
+    & > li > .ant-menu-submenu-title {
+      line-height: 24px;
+    }
+    .@{basic-menu-content-prefix-cls}-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      .@{basic-menu-content-prefix-cls}--show-title {
+        line-height: 30px;
+      }
+    }
+  }
+
   &.ant-menu-inline-collapsed > .ant-menu-item,
   &.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
   &.ant-menu-inline-collapsed
@@ -62,6 +119,7 @@
 
   .@{basic-menu-content-prefix-cls}-wrapper {
     width: 100%;
+    margin-top: 4px;
 
     &__icon {
       vertical-align: text-top;
@@ -181,7 +239,20 @@
     &.ant-menu-inline-collapsed {
       .ant-menu-submenu-selected,
       .ant-menu-item-selected {
+        position: relative;
+        font-weight: 500;
+        color: @white;
         background: @sider-dark-darken-bg-color !important;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 3px;
+          height: 100%;
+          background: @primary-color;
+          content: '';
+        }
       }
     }
   }

src/components/Menu/src/props.ts

@@ -9,7 +9,7 @@ export const basicProps = {
     type: Array as PropType<Menu[]>,
     default: () => [],
   },
-
+  collapsedShowTitle: propTypes.bool,
   // 最好是4 倍数
   inlineIndent: propTypes.number.def(20),
   // 菜单组件的mode属性