Browse Source

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

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

+ 7 - 1
packages/effects/layouts/src/authentication/authentication.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"
       >

+ 4 - 0
playground/src/layouts/auth.vue

@@ -8,6 +8,9 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const clickLogo = () => {
+  console.log('click logo');
+};
 </script>
 
 <template>
@@ -16,6 +19,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> -->