From 3e71d77e7809a709ca2015306ab7ef7935dc82d7 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期一, 24 八月 2026 17:03:50 +0800
Subject: [PATCH] style(auth): 优化认证页面样式和登录组件
---
src/views/_core/authentication/login.vue | 74 ++++++------------------------------
src/packages/effects/common-ui/src/ui/authentication/login.vue | 8 ++--
src/packages/effects/layouts/src/authentication/authentication.vue | 26 +++++--------
3 files changed, 27 insertions(+), 81 deletions(-)
diff --git a/src/packages/effects/common-ui/src/ui/authentication/login.vue b/src/packages/effects/common-ui/src/ui/authentication/login.vue
index 3402dac..7aec52a 100644
--- a/src/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/src/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -45,7 +45,7 @@
});
const emit = defineEmits<{
- submit: [Recordable<any>];
+ submit: [Recordable<unknown>];
thirdLogin: [type: number];
}>();
@@ -108,7 +108,7 @@
<slot name="title">
<Title>
<slot name="title">
- {{ title || `${$t('authentication.welcomeBack')} 馃憢馃徎` }}
+ {{ title || $t('authentication.welcomeBack') }}
</slot>
<template #desc>
<span class="text-muted-foreground">
@@ -124,7 +124,7 @@
<div
v-if="showRememberMe || showForgetPassword"
- class="mb-6 flex justify-between"
+ class="mb-7 flex items-center justify-between"
>
<div class="flex-center">
<VbenCheckbox
@@ -150,7 +150,7 @@
}"
:loading="loading"
aria-label="login"
- class="w-full"
+ class="h-11 w-full rounded-xl text-base font-semibold shadow-sm transition-shadow duration-200 hover:shadow-md focus-visible:ring-2 focus-visible:ring-primary/40"
@click="handleSubmit"
>
{{ submitButtonText || $t('common.login') }}
diff --git a/src/packages/effects/layouts/src/authentication/authentication.vue b/src/packages/effects/layouts/src/authentication/authentication.vue
index 89299ae..3410935 100644
--- a/src/packages/effects/layouts/src/authentication/authentication.vue
+++ b/src/packages/effects/layouts/src/authentication/authentication.vue
@@ -111,7 +111,7 @@
<div class="login-background absolute top-0 left-0 size-full"></div>
<div
:key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
- class="mr-20 flex-col-center h-full"
+ class="mr-20 flex-col-center h-full px-8 text-center"
:class="{
'enter-x': authPanelLeft,
'-enter-x': authPanelRight,
@@ -139,7 +139,7 @@
<div v-if="authPanelCenter" class="relative flex-center w-full">
<div class="login-background absolute top-0 left-0 size-full"></div>
<AuthenticationFormView
- class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
+ class="w-full rounded-3xl border border-border/60 pb-20 shadow-float shadow-primary/10 md:w-2/3 md:bg-background/95 lg:w-1/2 xl:w-[36%]"
data-side="bottom"
>
<template v-if="copyright" #copyright>
@@ -173,24 +173,18 @@
<style scoped>
.login-background {
- background: linear-gradient(
- 154deg,
- #07070915 30%,
- hsl(var(--primary) / 30%) 48%,
- #07070915 64%
- );
- filter: blur(100px);
+ background:
+ radial-gradient(circle at 72% 38%, hsl(var(--primary) / 24%), transparent 42%),
+ linear-gradient(145deg, hsl(var(--background-deep)) 0%, hsl(var(--background)) 100%);
+ filter: blur(70px);
}
.dark {
.login-background {
- background: linear-gradient(
- 154deg,
- #07070915 30%,
- hsl(var(--primary) / 20%) 48%,
- #07070915 64%
- );
- filter: blur(100px);
+ background:
+ radial-gradient(circle at 72% 38%, hsl(var(--primary) / 18%), transparent 42%),
+ linear-gradient(145deg, hsl(var(--background-deep)) 0%, hsl(var(--background)) 100%);
+ filter: blur(70px);
}
}
</style>
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index 16e9f68..819eb4b 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -3,26 +3,18 @@
import type { AuthApi } from '#/api/core/auth';
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
-import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
+import { isCaptchaEnable } from '@vben/hooks';
import { $t } from '@vben/locales';
-import { useAccessStore } from '@vben/stores';
-import {
- checkCaptcha,
- getCaptcha,
- getTenantByWebsite,
- getTenantSimpleList,
-} from '#/api/core/auth';
+import { checkCaptcha, getCaptcha } from '#/api/core/auth';
import { useAuthStore } from '#/store';
defineOptions({ name: 'Login' });
const authStore = useAuthStore();
-const accessStore = useAccessStore();
-const tenantEnable = isTenantEnable();
const captchaEnable = isCaptchaEnable();
const loginRef = ref();
@@ -30,69 +22,29 @@
const captchaType = 'blockPuzzle'; // 楠岃瘉鐮佺被鍨嬶細'blockPuzzle' | 'clickWord'
-/** 鑾峰彇绉熸埛鍒楄〃 */
-const tenantList = ref<AuthApi.TenantResult[]>([]); // 绉熸埛鍒楄〃
-async function fetchTenantList() {
- if (!tenantEnable) {
- return;
- }
- try {
- // 鑾峰彇绉熸埛鍒楄〃
- tenantList.value = await getTenantSimpleList();
- } catch (error) {
- console.error('鑾峰彇绉熸埛鍒楄〃澶辫触:', error);
- }
-}
-
/** 澶勭悊鐧诲綍 */
-async function handleLogin(values: any) {
- // 濡傛灉寮�鍚獙璇佺爜锛屽垯鍏堥獙璇侀獙璇佺爜
+async function handleLogin(values: AuthApi.LoginParams) {
if (captchaEnable) {
verifyRef.value.show();
return;
}
- // 鏃犻獙璇佺爜锛岀洿鎺ョ櫥褰�
await authStore.authLogin('username', values);
}
/** 楠岃瘉鐮侀�氳繃锛屾墽琛岀櫥褰� */
-async function handleVerifySuccess({ captchaVerification }: any) {
- try {
- await authStore.authLogin('username', {
- ...(await loginRef.value.getFormApi().getValues()),
- captchaVerification,
- });
- } catch (error) {
- console.error('Error in handleLogin:', error);
- }
+async function handleVerifySuccess({
+ captchaVerification,
+}: {
+ captchaVerification: string;
+}) {
+ await authStore.authLogin('username', {
+ ...(await loginRef.value.getFormApi().getValues()),
+ captchaVerification,
+ });
}
-
-/** 缁勪欢鎸傝浇鏃惰幏鍙栫鎴蜂俊鎭� */
-onMounted(() => {
- fetchTenantList();
-});
const formSchema = computed((): VbenFormSchema[] => {
return [
- // {
- // component: 'VbenSelect',
- // componentProps: {
- // options: tenantList.value.map((item) => ({
- // label: item.name,
- // value: item.id.toString(),
- // })),
- // placeholder: $t('authentication.tenantTip'),
- // },
- // fieldName: 'tenantId',
- // label: $t('authentication.tenant'),
- // dependencies: {
- // triggerFields: ['tenantId'],
- // if: tenantEnable,
- // trigger(values) {
- // accessStore.setTenantId(values.tenantId ? Number(values.tenantId) : null);
- // },
- // },
- // },
{
component: 'VbenInput',
componentProps: {
--
Gitblit v1.9.3