diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 98df0cbf5..d78d97e04 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -68,6 +68,8 @@ const defaultPreferences: Preferences = { enable: true, fit: 'contain', source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp', + showText: true, + logoMode: 'icon', }, navigation: { accordion: true, diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 759d78934..5834c34c0 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -228,6 +228,12 @@ interface LogoPreferences { enable: boolean; /** logo图片适应方式 */ fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; + /** logo高度, 只在 logoMode=full时生效 */ + fullLogoHeight?: number | string; + /** logo 展示类型,icon 图标模式, full 铺满logo区域 */ + logoMode: 'full' | 'icon'; + /** logo text是否展示 */ + showText: boolean; /** logo地址 */ source: string; /** 暗色主题logo地址 (可选,若不设置则使用 source) */ diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue index fba07d4e6..0f980b389 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue +++ b/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(), {}); +const props = withDefaults(defineProps(), { + 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" > -
+
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue index 11e4081c4..b7e2fab61 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue +++ b/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(), { 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)`, }; }); diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/packages/@core/ui-kit/layout-ui/src/vben-layout.ts index b6b413751..6cbe54f5b 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts +++ b/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 diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index d8a2c422c..b6bfcca20 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/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)" > -