feat: 新增logo铺满显示和是否显示text配置 (#8102)

* feat: 新增logo铺满显示和是否显示text配置

* feat: logo.enable=false时隐藏logo区域占位；设置logoMode、showText为必填。

* style: 修复注释问题

* fix: 删除多余属性

packages/@core/ui-kit/layout-ui/src/components/layout-header.vue

@@ -16,6 +16,10 @@ interface Props {
    * 是否移动端
    */
   isMobile: boolean;
+  /**
+   * logo是否显示
+   */
+  logoVisible?: boolean;
   /**
    * 是否显示
    */
@@ -38,7 +42,9 @@ interface Props {
   zIndex: number;
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+  logoVisible: true,
+});
 
 const slots = useSlots();
 
@@ -54,6 +60,12 @@ const style = computed((): CSSProperties => {
 });
 
 const logoStyle = computed((): CSSProperties => {
+  if (!props.logoVisible) {
+    return {
+      minWidth: '12px',
+    };
+  }
+
   return {
     minWidth: `${props.isMobile ? 40 : props.sidebarWidth}px`,
   };
@@ -66,7 +78,7 @@ const logoStyle = computed((): CSSProperties => {
     :style="style"
     class="top-0 flex w-full flex-[0_0_auto] items-center border-b border-border bg-header pl-2 transition-[margin-top] duration-200"
   >
-    <div v-if="slots.logo" :style="logoStyle">
+    <div v-if="slots.logo || (!logoVisible && !isMobile)" :style="logoStyle">
       <slot name="logo"></slot>
     </div>
 

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -26,6 +26,10 @@ interface Props {
    * @default true
    */
   domVisible?: boolean;
+  /**
+   * 扩展区域extra-title的高度
+   */
+  extraTitleHeight?: number;
   /**
    * 扩展区域宽度
    */
@@ -97,6 +101,7 @@ const props = withDefaults(defineProps<Props>(), {
   collapseHeight: 42,
   collapseWidth: 48,
   domVisible: true,
+  extraTitleHeight: undefined,
   fixedExtra: false,
   isSidebarMixed: false,
   marginTop: 0,
@@ -149,10 +154,10 @@ const extraStyle = computed((): CSSProperties => {
 });
 
 const extraTitleStyle = computed((): CSSProperties => {
-  const { headerHeight } = props;
+  const { extraTitleHeight, headerHeight } = props;
 
   return {
-    height: `${headerHeight - 1}px`,
+    height: `${extraTitleHeight ?? headerHeight - 1}px`,
   };
 });
 
@@ -185,9 +190,10 @@ const headerStyle = computed((): CSSProperties => {
 });
 
 const extraContentStyle = computed((): CSSProperties => {
-  const { collapseHeight, headerHeight } = props;
+  const { collapseHeight, extraTitleHeight, headerHeight } = props;
+  const titleHeight = extraTitleHeight ?? headerHeight;
   return {
-    height: `calc(100% - ${headerHeight + collapseHeight}px)`,
+    height: `calc(100% - ${titleHeight + collapseHeight}px)`,
   };
 });
 

packages/@core/ui-kit/layout-ui/src/vben-layout.ts

@@ -126,6 +126,10 @@ interface VbenLayoutProps {
    * @default 48
    */
   sidebarExtraCollapsedWidth?: number;
+  /**
+   * 扩展区域extra-title的高度
+   */
+  sidebarExtraTitleHeight?: number;
   /**
    * 侧边菜单折叠按钮是否固定
    * @default true
@@ -136,6 +140,10 @@ interface VbenLayoutProps {
    * @default false
    */
   sidebarHidden?: boolean;
+  /**
+   * 侧边栏 Logo 区域是否显示
+   */
+  sidebarLogoVisible: boolean;
   /**
    * 混合侧边栏宽度
    * @default 80

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -368,6 +368,17 @@ const maskStyle = computed((): CSSProperties => {
   return { zIndex: props.zIndex };
 });
 
+/**
+ * 侧边栏 Logo 区域是否显示
+ */
+const sidebarHeaderHeight = computed(() => {
+  if (isMixedNav.value || !props.sidebarLogoVisible) {
+    return 0;
+  }
+
+  return props.headerHeight;
+});
+
 const showHeaderToggleButton = computed(() => {
   return (
     props.isMobile ||
@@ -510,7 +521,10 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       :dom-visible="!isMobile"
       :extra-width="sidebarExtraWidth"
       :fixed-extra="sidebarExpandOnHover"
-      :header-height="isMixedNav ? 0 : headerHeight"
+      :header-height="sidebarHeaderHeight"
+      :extra-title-height="
+        isSidebarMixedNav || isHeaderMixedNav ? sidebarExtraTitleHeight : 0
+      "
       :is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav"
       :margin-top="sidebarMarginTop"
       :mixed-width="sidebarMixedWidth"
@@ -522,7 +536,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       @leave="() => emit('sideMouseLeave')"
       @update:width="(val) => emit('update:sidebarWidth', val)"
     >
-      <template v-if="isSideMode && !isMixedNav" #logo>
+      <template v-if="isSideMode && !isMixedNav && sidebarLogoVisible" #logo>
         <slot name="logo"></slot>
       </template>
 
@@ -565,6 +579,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
           :theme="headerTheme"
           :width="mainStyle.width"
           :z-index="headerZIndex"
+          :logo-visible="sidebarLogoVisible"
         >
           <template v-if="showHeaderLogo" #logo>
             <slot name="logo"></slot>