From 2e37402940f9656d7240e7449302b2f80201a523 Mon Sep 17 00:00:00 2001
From: chengqian <wuchengqian5@163.com>
Date: Tue, 4 Aug 2026 16:15:58 +0800
Subject: [PATCH] =?UTF-8?q?improve(ui):=E4=BC=98=E5=8C=96=E7=A7=9F?=
 =?UTF-8?q?=E6=88=B7=E7=AB=AF=E7=9A=84=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/tenant/src/views/auth/LoginPage.vue | 63 ++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/web/tenant/src/views/auth/LoginPage.vue b/web/tenant/src/views/auth/LoginPage.vue
index bb97c2f..cf550b6 100644
--- a/web/tenant/src/views/auth/LoginPage.vue
+++ b/web/tenant/src/views/auth/LoginPage.vue
@@ -291,19 +291,26 @@ async function handleOAuthLogin(provider: string) {
 			</div>
 
 			<!-- Login Mode Tabs -->
-			<div class="tabs mb-6">
+			<div class="tabs login-mode-tabs mb-6" role="group" aria-label="登录方式">
+				<span
+					class="login-mode-indicator"
+					:class="{ 'login-mode-indicator-ram': mode === 'ram' }"
+					aria-hidden="true"
+				></span>
 				<button
 					type="button"
-					class="tab flex-1"
-					:class="{ 'tab-active': mode === 'admin' }"
+					class="tab login-mode-tab flex-1"
+					:class="{ 'login-mode-tab-active': mode === 'admin' }"
+					:aria-pressed="mode === 'admin'"
 					@click="switchMode('admin')"
 				>
 					管理员登录
 				</button>
 				<button
 					type="button"
-					class="tab flex-1"
-					:class="{ 'tab-active': mode === 'ram' }"
+					class="tab login-mode-tab flex-1"
+					:class="{ 'login-mode-tab-active': mode === 'ram' }"
+					:aria-pressed="mode === 'ram'"
 					@click="switchMode('ram')"
 				>
 					RAM 账号登录
@@ -353,6 +360,7 @@ async function handleOAuthLogin(provider: string) {
 						/>
 						<button
 							type="button"
+							tabindex="-1"
 							@click="showPassword = !showPassword"
 							class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors"
 							:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@@ -451,6 +459,7 @@ async function handleOAuthLogin(provider: string) {
 						/>
 						<button
 							type="button"
+							tabindex="-1"
 							@click="showPassword = !showPassword"
 							class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors"
 							:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@@ -540,7 +549,7 @@ async function handleOAuthLogin(provider: string) {
 
 		<template v-if="settings.register_enabled" #footer>
 			<p class="text-gray-500">
-				还没有组织？
+					还没有账号？
 				<router-link to="/tenant/register" class="text-primary-600 font-medium hover:text-primary-700 transition-colors">
 					立即创建
 				</router-link>
@@ -562,6 +571,48 @@ async function handleOAuthLogin(provider: string) {
 </template>
 
 <style scoped>
+.login-mode-tabs {
+	position: relative;
+	isolation: isolate;
+	overflow: hidden;
+}
+
+.login-mode-indicator {
+	position: absolute;
+	z-index: 0;
+	top: 0.25rem;
+	bottom: 0.25rem;
+	left: 0.25rem;
+	width: calc((100% - 0.75rem) / 2);
+	border-radius: 0.5rem;
+	background: #fff;
+	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+	pointer-events: none;
+	will-change: transform;
+	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.login-mode-indicator-ram {
+	transform: translateX(calc(100% + 0.25rem));
+}
+
+.login-mode-tab {
+	position: relative;
+	z-index: 1;
+	background: transparent;
+	transition: color 200ms ease;
+}
+
+.login-mode-tab-active {
+	color: #111827;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.login-mode-indicator {
+		transition: none;
+	}
+}
+
 .slide-fade-enter-active {
 	transition: all 0.25s ease-out;
 }