chore: fix layout style

vben
1 parent bd7b53f1
Showing 14 changed files with 123 additions and 10 deletions
src/components/Application/src/AppLogo.vue
src/components/Menu/src/BasicMenu.vue
src/components/Menu/src/index.less
src/components/Menu/src/props.ts
src/hooks/setting/useMenuSetting.ts
src/layouts/default/index.vue
src/layouts/default/menu/index.tsx
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/handler.ts
src/layouts/default/sider/MixSider.vue
src/locales/lang/en/layout/setting.ts
src/locales/lang/zh_CN/layout/setting.ts
src/settings/projectSetting.ts
src/types/config.d.ts
@@ -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;
     }
@@ -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),
       };
     },
@@ -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: '';
+        }
       }
     }
   }
@@ -9,7 +9,7 @@ export const basicProps = {
     type: Array as PropType<Menu[]>,
     default: () => [],
   },
-
+  collapsedShowTitle: propTypes.bool,
   // 最好是4 倍数
   inlineIndent: propTypes.number.def(20),
   // 菜单组件的mode属性
@@ -45,6 +45,8 @@ const getIsSidebarType = computed(() =&gt; unref(getMenuType) === MenuTypeEnum.SIDE
 const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
+const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
+
 const getShowTopMenu = computed(() => {
   return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
 });
@@ -74,7 +76,8 @@ const getRealWidth = computed(() =&gt; {
 });
 const getMiniWidthNumber = computed(() => {
-  return SIDE_BAR_MINI_WIDTH;
+  const { collapsedShowTitle } = unref(getMenuSetting);
+  return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
 });
 const getCalcContentWidth = computed(() => {
@@ -128,6 +131,7 @@ export function useMenuSetting() {
     getSplit,
     getMenuTheme,
     getCanDrag,
+    getCollapsedShowTitle,
     getIsHorizontal,
     getIsSidebarType,
     getAccordion,
@@ -2,7 +2,11 @@
   <Layout :class="prefixCls">
     <LayoutFeatures />
     <LayoutHeader fixed v-if="getShowFullHeaderRef" />
-    <Layout class="ant-layout-has-sider">
+    <Layout
+      :class="{
+        'ant-layout-has-sider': getIsMixSidebar,
+      }"
+    >
       <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
       <Layout :class="`${prefixCls}__main`">
         <LayoutMultipleHeader />
@@ -45,6 +45,7 @@ export default defineComponent({
       getMenuType,
       getMenuTheme,
       getCollapsed,
+      getCollapsedShowTitle,
       getAccordion,
       getIsHorizontal,
       getIsSidebarType,
@@ -130,6 +131,8 @@ export default defineComponent({
           beforeClickFn={beforeMenuClickFn}
           isHorizontal={props.isHorizontal}
           type={unref(getMenuType)}
+          collapsedShowTitle={unref(getCollapsedShowTitle)}
+          showLogo={unref(getIsShowLogo)}
           mode={unref(getComputedMenuMode)}
           theme={unref(getComputedMenuTheme)}
           items={unref(menusRef)}
@@ -61,6 +61,7 @@ export default defineComponent({
       getShowMenu,
       getMenuType,
       getTrigger,
+      getCollapsedShowTitle,
       getMenuFixed,
       getCollapsed,
       getCanDrag,
@@ -176,6 +177,12 @@ export default defineComponent({
             def={unref(getCollapsed)}
             disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
           />
+          <SwitchItem
+            title={t('layout.setting.collapseMenuDisplayName')}
+            event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
+            def={unref(getCollapsedShowTitle)}
+            disabled={!unref(getShowMenuRef) || !unref(getCollapsed)}
+          />
           <SwitchItem
             title={t('layout.setting.fixedHeader')}
@@ -51,12 +51,16 @@ export function handler(event: HandlerEnum, value: any): DeepPartial&lt;ProjectConf
     case HandlerEnum.MENU_SHOW_SIDEBAR:
       return { menuSetting: { show: value } };
+    case HandlerEnum.MENU_COLLAPSED_SHOW_TITLE:
+      return { menuSetting: { collapsedShowTitle: value } };
+
     case HandlerEnum.MENU_THEME:
       updateSidebarBgColor(value);
       return { menuSetting: { bgColor: value } };
     case HandlerEnum.MENU_SPLIT:
-      return { menuSetting: { split: value } };
+      return { menuSetting: { split: value, collapsedShowTitle: true } };
+
     case HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
       return { menuSetting: { closeMixSidebarOnChange: value } };
@@ -267,15 +267,16 @@
         }
       }
     }
+    @border-color: @sider-dark-lighten-1-bg-color;
     &.dark {
       &.open {
         .@{prefix-cls}-logo {
-          border-bottom: 1px solid rgb(114 114 114);
+          border-bottom: 1px solid @border-color;
         }
         > .scroll-container {
-          border-right: 1px solid rgb(114 114 114);
+          border-right: 1px solid @border-color;
         }
       }
       .@{prefix-cls}-menu-list {
@@ -284,7 +285,7 @@
         &__title {
           color: @white;
           border-bottom: none;
-          border-bottom: 1px solid rgb(114 114 114);
+          border-bottom: 1px solid @border-color;
         }
       }
     }
@@ -45,6 +45,7 @@ export default {
   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',
@@ -44,6 +44,7 @@ export default {
   menuSearch: '菜单搜索',
   menuAccordion: '侧边菜单手风琴模式',
   menuCollapse: '折叠菜单',
+  collapseMenuDisplayName: '折叠菜单显示名称',
   topMenuLayout: '顶部菜单布局',
   menuCollapseButton: '菜单折叠按钮',
   contentMode: '内容区域宽度',
@@ -81,6 +81,8 @@ const setting: ProjectConfig = {
     fixed: true,
     // Menu collapse
     collapsed: false,
+    // Whether to display the menu name when folding the menu
+    collapsedShowTitle: false,
     // Whether it can be dragged
     // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
     canDrag: true,
@@ -19,6 +19,7 @@ export interface MenuSetting {
   trigger: TriggerEnum;
   accordion: boolean;
   closeMixSidebarOnChange: boolean;
+  collapsedShowTitle: boolean;
 }
 export interface MultiTabsSetting {