Browse Source
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点击事件的控制台日志
pull/5770/head
Jin Mao
11 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with
21 additions and
3 deletions
-
packages/effects/layouts/src/authentication/authentication.vue
-
packages/effects/layouts/src/basic/layout.vue
-
playground/src/layouts/auth.vue
-
playground/src/layouts/basic.vue
|
|
|
@ -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" |
|
|
|
> |
|
|
|
|
|
|
|
@ -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> |
|
|
|
<!-- 头部区域 --> |
|
|
|
|
|
|
|
@ -8,6 +8,7 @@ import { $t } from '#/locales'; |
|
|
|
|
|
|
|
const appName = computed(() => preferences.app.name); |
|
|
|
const logo = computed(() => preferences.logo.source); |
|
|
|
const clickLogo = () => {}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
@ -16,6 +17,7 @@ const logo = computed(() => preferences.logo.source); |
|
|
|
:logo="logo" |
|
|
|
:page-description="$t('authentication.pageDesc')" |
|
|
|
:page-title="$t('authentication.pageTitle')" |
|
|
|
:click-logo="clickLogo" |
|
|
|
> |
|
|
|
<!-- 自定义工具栏 --> |
|
|
|
<!-- <template #toolbar></template> --> |
|
|
|
|
|
|
|
@ -106,6 +106,8 @@ function handleMakeAll() { |
|
|
|
notifications.value.forEach((item) => (item.isRead = true)); |
|
|
|
} |
|
|
|
|
|
|
|
function handleClickLogo() {} |
|
|
|
|
|
|
|
watch( |
|
|
|
() => preferences.app.watermark, |
|
|
|
async (enable) => { |
|
|
|
@ -124,7 +126,10 @@ watch( |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<BasicLayout @clear-preferences-and-logout="handleLogout"> |
|
|
|
<BasicLayout |
|
|
|
@clear-preferences-and-logout="handleLogout" |
|
|
|
@click-logo="handleClickLogo" |
|
|
|
> |
|
|
|
<template #user-dropdown> |
|
|
|
<UserDropdown |
|
|
|
:avatar |
|
|
|
|