feat: add theme-aware logo support via optional sourceDark configuration (#6866)
* Initial plan * Initial exploration and setup Co-authored-by: aonoa <32682251+aonoa@users.noreply.github.com> * Add support for separate light and dark theme logos Co-authored-by: aonoa <32682251+aonoa@users.noreply.github.com> * Update documentation with dark theme logo configuration Co-authored-by: aonoa <32682251+aonoa@users.noreply.github.com> * feat: Add theme-aware logo support for authentication/login page Co-authored-by: aonoa <32682251+aonoa@users.noreply.github.com> * revert: .npmrc Signed-off-by: aonoa <1991849113@qq.com> --------- Signed-off-by: aonoa <1991849113@qq.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: aonoa <32682251+aonoa@users.noreply.github.com> Co-authored-by: Li Kui <90845831+likui628@users.noreply.github.com> Co-authored-by: aonoa <1991849113@qq.com>
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { VbenAvatar } from '../avatar';
|
||||
|
||||
interface Props {
|
||||
@@ -22,6 +24,10 @@ interface Props {
|
||||
* @zh_CN Logo 图标
|
||||
*/
|
||||
src?: string;
|
||||
/**
|
||||
* @zh_CN 暗色主题 Logo 图标 (可选,若不设置则使用 src)
|
||||
*/
|
||||
srcDark?: string;
|
||||
/**
|
||||
* @zh_CN Logo 文本
|
||||
*/
|
||||
@@ -36,14 +42,27 @@ defineOptions({
|
||||
name: 'VbenLogo',
|
||||
});
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
collapsed: false,
|
||||
href: 'javascript:void 0',
|
||||
logoSize: 32,
|
||||
src: '',
|
||||
srcDark: '',
|
||||
theme: 'light',
|
||||
fit: 'cover',
|
||||
});
|
||||
|
||||
/**
|
||||
* @zh_CN 根据主题选择合适的 logo 图标
|
||||
*/
|
||||
const logoSrc = computed(() => {
|
||||
// 如果是暗色主题且提供了 srcDark,则使用暗色主题的 logo
|
||||
if (props.theme === 'dark' && props.srcDark) {
|
||||
return props.srcDark;
|
||||
}
|
||||
// 否则使用默认的 src
|
||||
return props.src;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -54,9 +73,9 @@ withDefaults(defineProps<Props>(), {
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
|
||||
>
|
||||
<VbenAvatar
|
||||
v-if="src"
|
||||
v-if="logoSrc"
|
||||
:alt="text"
|
||||
:src="src"
|
||||
:src="logoSrc"
|
||||
:size="logoSize"
|
||||
:fit="fit"
|
||||
class="relative rounded-none bg-transparent"
|
||||
|
||||
Reference in New Issue
Block a user