feat(ui): logo icon support click events (#5725)

* feat(ui): 扩展auth页面添加点击 Logo 的事件处理

在 `authentication.vue` 中新增 `clickLogo` 属性,允许在点击 Logo 时执行自定义操作。在 `auth.vue` 中实现了一个示例的点击事件处理函数,用于测试该功能。

* feat(layout): 添加点击 logo 的事件处理函数

在 BasicLayout 组件中添加了 clickLogo 事件处理函数,并通过 emit 方法触发 clickLogo 事件。同时,在 basic.vue 中实现了 handleClickLogo 函数,用于处理 logo 点击事件。

* fix(ui): 移除logo点击事件的控制台日志
This commit is contained in:
Jin Mao
2025-03-23 10:02:22 +08:00
committed by GitHub
parent 03ceb2aac5
commit 66c1d390b9
4 changed files with 21 additions and 3 deletions

View File

@@ -17,6 +17,7 @@ interface Props {
toolbar?: boolean;
copyright?: boolean;
toolbarList?: ToolbarType[];
clickLogo?: () => void;
}
withDefaults(defineProps<Props>(), {
@@ -28,6 +29,7 @@ withDefaults(defineProps<Props>(), {
sloganImage: '',
toolbar: true,
toolbarList: () => ['color', 'language', 'layout', 'theme'],
clickLogo: () => {},
});
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
@@ -61,7 +63,11 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
</AuthenticationFormView>
<!-- 头部 Logo 和应用名称 -->
<div v-if="logo || appName" class="absolute left-0 top-0 z-10 flex flex-1">
<div
v-if="logo || appName"
class="absolute left-0 top-0 z-10 flex flex-1"
@click="clickLogo"
>
<div
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
>

View File

@@ -34,7 +34,7 @@ import { LayoutTabbar } from './tabbar';
defineOptions({ name: 'BasicLayout' });
const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
const emit = defineEmits<{ clearPreferencesAndLogout: []; clickLogo: [] }>();
const {
isDark,
@@ -149,6 +149,10 @@ function clearPreferencesAndLogout() {
emit('clearPreferencesAndLogout');
}
function clickLogo() {
emit('clickLogo');
}
watch(
() => preferences.app.layout,
async (val) => {
@@ -221,6 +225,7 @@ const headerSlots = computed(() => {
:src="preferences.logo.source"
:text="preferences.app.name"
:theme="showHeaderNav ? headerTheme : theme"
@click="clickLogo"
/>
</template>
<!-- 头部区域 -->