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/62/head
							parent
							
								
									17f156de89
								
							
						
					
					
						commit
						2162ddb34b
					
				|  | @ -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 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 Jin Mao
						Jin Mao