feat: 左上Logo与文案允许通过props传入; 适配场景:多应用or多项目,不同项目从后台或者其他形式设置各自独立的logo与名称

feat: 左上Logo与文案允许通过props传入;
适配场景:多应用or多项目,不同项目从后台或者其他形式设置各自独立的logo与名称
This commit is contained in:
xueyitt
2026-08-25 18:01:43 +08:00
committed by GitHub
parent dbac4e4c30
commit e9e387d602
+25 -5
View File
@@ -38,7 +38,10 @@ import { useLayoutScroll } from './use-layout-scroll';
defineOptions({ name: 'BasicLayout' });
withDefaults(defineProps<Props>(), {
const props = withDefaults(defineProps<Props>(), {
logoSrc: '',
logoSrcDark: '',
logoText: '',
avatar: '',
text: '',
});
@@ -50,10 +53,27 @@ const emit = defineEmits<{
}>();
interface Props {
/** 自定义 Logo 图片地址,不传则使用偏好设置默认值 */
logoSrc?: string;
/** 自定义暗色主题 Logo 图片地址 */
logoSrcDark?: string;
/** 自定义 Logo 文本,不传则使用偏好设置默认值 */
logoText?: string;
/** 用户头像图片地址 */
avatar?: string;
/** 用户文本(如用户名) */
text?: string;
}
/** 最终使用的 Logo 图片地址(自定义优先,否则使用默认) */
const finalLogoSrc = computed(() => props.logoSrc || preferences.logo.source);
/** 最终使用的暗色 Logo 图片地址 */
const finalLogoSrcDark = computed(
() => props.logoSrcDark || preferences.logo.sourceDark,
);
/** 最终使用的 Logo 文本(自定义优先,否则使用默认应用名称) */
const finalLogoText = computed(() => props.logoText || preferences.app.name);
const {
isDark,
isHeaderNav,
@@ -323,9 +343,9 @@ const headerSlots = computed(() => {
:fit="preferences.logo.fit"
:class="logoClass"
:collapsed="logoCollapsed"
:src="preferences.logo.source"
:src-dark="preferences.logo.sourceDark"
:text="preferences.app.name"
:src="finalLogoSrc"
:src-dark="finalLogoSrcDark"
:text="finalLogoText"
:show-text="preferences.logo.showText"
:logo-mode="preferences.logo.logoMode"
:full-logo-height="preferences.logo.fullLogoHeight"
@@ -419,8 +439,8 @@ const headerSlots = computed(() => {
<VbenLogo
v-if="preferences.logo.enable"
:fit="preferences.logo.fit"
:text="finalLogoText"
:show-text="preferences.logo.showText"
:text="preferences.app.name"
:theme="sidebarThemeSub"
>
<template v-if="$slots['logo-text']" #text>