From 66c1d390b948a673cdf1207f2a6bab456b1ad269 Mon Sep 17 00:00:00 2001 From: Jin Mao <50581550+jinmao88@users.noreply.github.com> Date: Sun, 23 Mar 2025 10:02:22 +0800 Subject: [PATCH 1/2] feat(ui): logo icon support click events (#5725) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(ui): 扩展auth页面添加点击 Logo 的事件处理 在 `authentication.vue` 中新增 `clickLogo` 属性,允许在点击 Logo 时执行自定义操作。在 `auth.vue` 中实现了一个示例的点击事件处理函数,用于测试该功能。 * feat(layout): 添加点击 logo 的事件处理函数 在 BasicLayout 组件中添加了 clickLogo 事件处理函数,并通过 emit 方法触发 clickLogo 事件。同时,在 basic.vue 中实现了 handleClickLogo 函数,用于处理 logo 点击事件。 * fix(ui): 移除logo点击事件的控制台日志 --- .../effects/layouts/src/authentication/authentication.vue | 8 +++++++- packages/effects/layouts/src/basic/layout.vue | 7 ++++++- playground/src/layouts/auth.vue | 2 ++ playground/src/layouts/basic.vue | 7 ++++++- 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/effects/layouts/src/authentication/authentication.vue b/packages/effects/layouts/src/authentication/authentication.vue index 0c79591e..40115458 100644 --- a/packages/effects/layouts/src/authentication/authentication.vue +++ b/packages/effects/layouts/src/authentication/authentication.vue @@ -17,6 +17,7 @@ interface Props { toolbar?: boolean; copyright?: boolean; toolbarList?: ToolbarType[]; + clickLogo?: () => void; } withDefaults(defineProps(), { @@ -28,6 +29,7 @@ withDefaults(defineProps(), { sloganImage: '', toolbar: true, toolbarList: () => ['color', 'language', 'layout', 'theme'], + clickLogo: () => {}, }); const { authPanelCenter, authPanelLeft, authPanelRight, isDark } = @@ -61,7 +63,11 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } = -
+
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue index 1fb90448..4a8e963a 100644 --- a/packages/effects/layouts/src/basic/layout.vue +++ b/packages/effects/layouts/src/basic/layout.vue @@ -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" /> diff --git a/playground/src/layouts/auth.vue b/playground/src/layouts/auth.vue index 18d415bc..c33a632a 100644 --- a/playground/src/layouts/auth.vue +++ b/playground/src/layouts/auth.vue @@ -8,6 +8,7 @@ import { $t } from '#/locales'; const appName = computed(() => preferences.app.name); const logo = computed(() => preferences.logo.source); +const clickLogo = () => {};