From c2e8526f8f857be5e3a8c6f2b39c5efd424de33e Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期四, 15 十月 2026 11:50:24 +0800
Subject: [PATCH] refactor(auth): 优化认证逻辑和界面组件结构
---
src/views/_core/authentication/login.vue | 36 ++++++++++++++++++++++++++++++++++--
1 files changed, 34 insertions(+), 2 deletions(-)
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index 16e9f68..4e46c22 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -97,6 +97,8 @@
component: 'VbenInput',
componentProps: {
placeholder: $t('authentication.usernameTip'),
+ autocomplete: 'username',
+ 'aria-label': $t('authentication.username'),
},
fieldName: 'username',
label: $t('authentication.username'),
@@ -109,6 +111,8 @@
component: 'VbenInputPassword',
componentProps: {
placeholder: $t('authentication.passwordTip'),
+ autocomplete: 'current-password',
+ 'aria-label': $t('authentication.password'),
},
fieldName: 'password',
label: $t('authentication.password'),
@@ -122,7 +126,7 @@
</script>
<template>
- <div>
+ <div class="herbal-login">
<AuthenticationLogin
ref="loginRef"
:form-schema="formSchema"
@@ -134,7 +138,14 @@
:show-forget-password="false"
:show-doc-link="false"
@submit="handleLogin"
- />
+ >
+ <template #title>
+ <div class="herbal-login__heading">
+ <h1>{{ $t('authentication.welcomeBack') }}<svg class="herbal-login__seal" viewBox="0 0 20 30" aria-hidden="true"><rect x="1" y="1" width="18" height="28" rx="2"/><path d="M5 5h10v8H5V5Zm0 12h10v8H5v-8Zm5-12v8m0 4v8"/></svg></h1>
+ <p>{{ $t('authentication.loginSubtitle') }}</p>
+ </div>
+ </template>
+ </AuthenticationLogin>
<Verification
ref="verifyRef"
v-if="captchaEnable"
@@ -147,3 +158,24 @@
/>
</div>
</template>
+
+<style scoped>
+.herbal-login__heading{margin-bottom:32px}
+.herbal-login__heading h1{font-size:clamp(28px,2.4vw,36px);font-weight:700;line-height:1.4;letter-spacing:-.02em;margin:0 0 12px;color:#29251f;display:flex;align-items:center;gap:14px}
+.herbal-login__heading p{font-size:15px;line-height:1.7;color:#756d63;margin:0}
+.herbal-login__seal{width:20px;height:30px;flex-shrink:0;color:#a51d24;fill:none;stroke:currentColor;stroke-width:1.2}
+.herbal-login :deep(input:not([type='checkbox'])){min-height:56px;border-radius:9px;border:1px solid #ddd6cc;background:rgba(255,255,255,.82);padding:12px 16px;font-size:16px;color:#30281f}
+.herbal-login :deep(input::placeholder){color:#7a7167;opacity:1}
+.herbal-login :deep(input:focus-visible){outline:2px solid #a51d24;outline-offset:3px}
+.herbal-login :deep(input[autocomplete='current-password']){padding-right:44px}
+.herbal-login :deep(button[aria-label='login']){min-height:58px;margin-top:8px;border-radius:9px;background:#a51d24;color:#fff;font-size:19px;font-weight:600;letter-spacing:.12em;box-shadow:0 5px 12px rgba(137,24,30,.12)}
+.herbal-login :deep(button[aria-label='login']:hover){background:#87171d}
+.herbal-login :deep(button[aria-label='login']:focus-visible){outline:2px solid #a51d24;outline-offset:4px}
+.herbal-login :deep(button[aria-label='login']:disabled){opacity:.65;cursor:wait}
+:global(.dark .herbal-login__heading h1){color:#f5eee4}
+:global(.dark .herbal-login__heading p){color:#d1c1ae}
+:global(.dark .herbal-login__seal){color:#eea5a4}
+:global(.dark .herbal-login input:not([type='checkbox'])){background:#302720;border-color:#6f5b48;color:#f5eee4}
+:global(.dark .herbal-login input::placeholder){color:#c2b29e}
+@media(max-width:540px){.herbal-login__heading h1{font-size:28px}.herbal-login__heading p{font-size:14px}.herbal-login :deep(input:not([type='checkbox'])){min-height:52px}}
+</style>
--
Gitblit v1.9.3