From 162e57e80d72a3b2a77e4c76d4415d4a2a01242d Mon Sep 17 00:00:00 2001
From: old burden <hejianbin1995@gmail.com>
Date: Fri, 17 Apr 2026 14:14:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E9=A3=8E=E6=A0=BC?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 portal-ui/src/layout/components/Login.vue | 436 ++++++++++++++--------
 1 file changed, 274 insertions(+), 162 deletions(-)

diff --git a/portal-ui/src/layout/components/Login.vue b/portal-ui/src/layout/components/Login.vue
index 04a6beb..510eff5 100644
--- a/portal-ui/src/layout/components/Login.vue
+++ b/portal-ui/src/layout/components/Login.vue
@@ -14,57 +14,64 @@
 					value="icon-close"
 					@click="cancel" />
 			</div>
-			<div class="login-title">
-				{{ $t('common.loginAccount') }}
-				<!-- <div class="login-title-lang">
-					<div
-						:class="`login-title-lang-item ${
-							lang == 'zh_HK' ? 'active' : ''
-						}`"
-						@click="changeLang('zh_HK')">
-						繁中
-					</div>
-					<div class="login-title-lang-divider"></div>
-					<div
-						:class="`login-title-lang-item ${
-							lang == 'en_US' ? 'active' : ''
-						}`"
-						@click="changeLang('en_US')">
-						English
-					</div>
-				</div> -->
-			</div>
-			<mf-input
-				v-model="username"
-				class="login-input"
-				:placeholder="`${$t('common.userEmailPlaceholder')}`" />
-			<mf-input
-				v-model="password"
-				class="login-input"
-				inputType="password"
-				:placeholder="`${$t('common.passwordPlaceholder')}`" />
+			<div class="login-card">
+				<header class="login-header">
+					<h2 class="login-title">
+						{{ $t('common.loginAccount') }}
+					</h2>
+					<p class="login-desc">
+						{{ $t('common.loginSubtitle') }}
+					</p>
+				</header>
 
-			<div class="login-link">
-				<mf-button
-					class="grey"
-					type="text"
-					@click="showForgot">
-					{{ $t('common.forgotPassword') }}？
-				</mf-button>
-			</div>
-			<div class="login-submit">
-				<mf-button
-					size="large"
-					@click="showRegister">
-					{{ $t('common.register') }}
-				</mf-button>
-				<mf-button
-					size="large"
-					type="primary"
-					@click="login"
-					:loading="loading">
-					{{ $t('common.login') }}
-				</mf-button>
+				<div class="login-field">
+					<label class="login-label" for="login-field-username">
+						{{ $t('common.loginLabelAccount') }}
+					</label>
+					<mf-input
+						id="login-field-username"
+						v-model="username"
+						class="login-input"
+						:placeholder="$t('common.userEmailPlaceholder')" />
+				</div>
+				<div class="login-field">
+					<label class="login-label" for="login-field-password">
+						{{ $t('common.loginLabelPassword') }}
+					</label>
+					<mf-input
+						id="login-field-password"
+						v-model="password"
+						class="login-input"
+						inputType="password"
+						:placeholder="$t('common.passwordPlaceholder')" />
+				</div>
+
+				<div class="login-link">
+					<mf-button
+						class="login-link-btn"
+						type="text"
+						@click="showForgot">
+						{{ $t('common.forgotPassword') }}？
+					</mf-button>
+				</div>
+				<div class="login-submit">
+					<mf-button
+						class="login-btn-primary"
+						size="large"
+						type="primary"
+						@click="login"
+						:loading="loading">
+						{{ $t('common.login') }}
+					</mf-button>
+				</div>
+				<div class="login-register">
+					<mf-button
+						class="login-register-btn"
+						type="text"
+						@click="showRegister">
+						{{ $t('common.register') }}
+					</mf-button>
+				</div>
 			</div>
 		</mf-dialog>
 		<Forgot
@@ -86,8 +93,6 @@
 <script>
 import Forgot from './Forgot.vue'
 import Register from './Register.vue'
-import { mapGetters } from 'vuex'
-import i18n from '@/lang/i18n'
 
 export default {
 	data() {
@@ -109,9 +114,6 @@ export default {
 		Forgot,
 		Register
 	},
-	computed: {
-		...mapGetters(['lang'])
-	},
 	mounted() {
 		// let loginInfo = this.$auth.getLogin()
 		// if (loginInfo) {
@@ -136,12 +138,6 @@ export default {
 			this.registerVisible = true
 			this.$emit('cancel')
 		},
-		changeLang(value) {
-			if (value != this.lang) {
-				this.$store.dispatch('main/setLanguage', value)
-				i18n.global.locale = value
-			}
-		},
 		back() {
 			this.forgotVisible = false
 			this.$emit('open')
@@ -201,158 +197,262 @@ export default {
 </script>
 
 <style lang="less">
+/* 与 portal-ui 深色壳层一致；表单项带标签，输入区为内嵌深色非白底 */
 .login-dialog {
 	border-radius: 20px;
-	overflow: hidden;
-	background: linear-gradient(
-		0deg,
-		rgba(39, 20, 51, 0.7) 0%,
-		rgba(230, 33, 122, 0.7) 49%
-	);
-	border-radius: 20px;
-	border: 2px solid #e6217a;
+	overflow: visible;
+	background: var(--portal-bg-deep);
+	border: 1px solid rgba(148, 163, 184, 0.12);
 	width: 500px;
-	height: 320px;
+	min-height: auto;
 	top: 45% !important;
 	transform: translateY(-45%) !important;
+	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
 
 	&-wrapper {
 		.arco-modal-mask {
-			/* 背景高斯模糊关键属性 */
 			backdrop-filter: blur(10px);
-			background-color: rgba(0, 0, 0, 0.7);
+			background-color: rgba(6, 8, 13, 0.72);
 		}
 	}
 
 	.arco-modal-body {
-		padding: 24px 30px 30px 30px;
+		padding: 20px 24px 28px;
+		background: transparent;
 	}
 
 	.login-close {
 		position: absolute;
-		right: 12px;
-		top: 6px;
+		right: 14px;
+		top: 10px;
+		z-index: 2;
 		cursor: pointer;
-		color: #fff;
+		color: var(--portal-text-muted);
+
+		&:hover {
+			color: var(--portal-text-strong);
+		}
 
 		.mf-icon {
-			font-size: 14px;
+			font-size: 16px;
 		}
 	}
 
+	.login-card {
+		background: linear-gradient(
+			165deg,
+			rgba(20, 27, 38, 0.97) 0%,
+			rgba(15, 20, 28, 0.99) 100%
+		);
+		border-radius: 24px;
+		border: 1px solid rgba(148, 163, 184, 0.1);
+		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+		padding: 36px 32px 32px;
+	}
+
+	.login-header {
+		margin-bottom: 28px;
+	}
+
 	.login-title {
-		font-size: 20px;
-		color: #ffffff;
-		margin-bottom: 10px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		&-lang {
-			display: flex;
-			align-items: center;
-			height: 24px;
-			background: rgba(0, 0, 0, 0.3);
-			border-radius: 5px;
+		margin: 0;
+		font-size: 26px;
+		line-height: 1.3;
+		font-weight: 600;
+		color: var(--portal-text-strong);
+		letter-spacing: -0.02em;
+	}
 
-			&-divider {
-				height: 8px;
-				width: 1px;
-				background-color: rgba(#fff, 0.2);
-			}
+	.login-desc {
+		margin: 10px 0 0;
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--portal-text-muted);
+	}
 
-			&-item {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0 16px;
-				font-size: 12px;
-				color: rgba(#ffffff, 0.3);
-				cursor: pointer;
-
-				&.active {
-					color: #fff;
-				}
-			}
+	.login-field {
+		& + .login-field {
+			margin-top: 22px;
 		}
 	}
 
+	.login-label {
+		display: block;
+		font-size: 13px;
+		font-weight: 600;
+		color: rgba(226, 232, 240, 0.92);
+		margin-bottom: 8px;
+		letter-spacing: 0.01em;
+	}
+
 	.login-input {
-		display: flex;
-		align-items: center;
-		border-radius: 10px;
-		justify-content: center;
-		border-radius: 10px;
-		border: 1px solid rgba(#ffffff, 0.3);
-		height: 40px;
-		margin-top: 20px;
-		padding: 0 16px;
-		font-size: 14px;
-		color: #ffffff;
-		position: relative;
-		cursor: pointer;
-		background-color: transparent !important;
-		cursor: text;
-		font-size: 14px;
+		display: block;
+		width: 100%;
 
-		::placeholder {
-			color: rgba(#fff, 0.5);
+		/* mf-input 根节点本身就是 arco-input-wrapper，需要直接覆盖 */
+		&.arco-input-wrapper {
+			height: 48px;
+			min-height: 48px;
+			border-radius: 12px;
+			border: 1px solid rgba(148, 163, 184, 0.2) !important;
+			background: rgba(51, 65, 85, 0.55) !important;
+			background-color: rgba(51, 65, 85, 0.55) !important;
+			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
+			--color-fill-2: rgba(51, 65, 85, 0.55);
+		}
+
+		&.arco-input-wrapper:hover {
+			border-color: rgba(148, 163, 184, 0.3) !important;
+			background-color: rgba(51, 65, 85, 0.68) !important;
 		}
 
 		&.arco-input-wrapper:focus-within {
-			background-color: transparent;
+			border-color: rgba(148, 163, 184, 0.45) !important;
+			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.28);
+			background-color: rgba(51, 65, 85, 0.75) !important;
 		}
 
-		&:hover {
-			background-color: transparent;
-			border-color: #fff;
+		&.arco-input-wrapper :deep(.arco-input),
+		&.arco-input-wrapper :deep(input.arco-input) {
+			height: 46px;
+			font-size: 15px;
+			line-height: 46px;
+			color: var(--portal-text-strong) !important;
+			background: transparent !important;
+			background-color: transparent !important;
+			-webkit-text-fill-color: var(--portal-text-strong);
 		}
 
-		.arco-image {
-			position: absolute;
-			left: 16px;
-			&-img {
-				width: 100%;
-				height: 100%;
-				vertical-align: unset;
-			}
+		&.arco-input-wrapper :deep(.arco-input::placeholder),
+		&.arco-input-wrapper :deep(input.arco-input::placeholder) {
+			color: rgba(203, 213, 225, 0.88) !important;
+			-webkit-text-fill-color: rgba(203, 213, 225, 0.88);
+			opacity: 1 !important;
 		}
-	}
 
-	.login-submit {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-top: 30px;
-		.mf-button {
-			width: 160px;
-			border-radius: 10px;
-			margin: 0 14px;
+		/* 密码组件：按钮在右侧一行内，不要纵向堆叠 */
+		:deep(.arco-input-password) {
+			display: block;
+			width: 100%;
+		}
 
-			&:first-child {
-				color: #ffffff;
-				background-color: #1a1a1a;
-				&:hover {
-					background-color: #262626;
-				}
-				&:active {
-					background-color: #0d0d0d;
-				}
-			}
+		:deep(.arco-input-password .arco-input-wrapper) {
+			display: inline-flex;
+			align-items: center;
+			width: 100%;
+		}
+
+		:deep(.arco-input-wrapper) {
+			height: 48px;
+			min-height: 48px;
+			border-radius: 12px;
+			border: 1px solid rgba(148, 163, 184, 0.2) !important;
+			background-color: rgba(51, 65, 85, 0.55) !important;
+			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
+			transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+			/* 盖住 Arco 默认浅色填充，避免白底 */
+			--color-fill-2: rgba(51, 65, 85, 0.55);
+		}
+
+		:deep(.arco-input-wrapper:hover) {
+			border-color: rgba(148, 163, 184, 0.3) !important;
+			background-color: rgba(51, 65, 85, 0.68) !important;
+		}
+
+		:deep(.arco-input-wrapper:focus-within) {
+			border-color: rgba(148, 163, 184, 0.45) !important;
+			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.28);
+			background-color: rgba(51, 65, 85, 0.75) !important;
+		}
+
+		:deep(.arco-input) {
+			height: 46px;
+			font-size: 15px;
+			line-height: 46px;
+			color: var(--portal-text-strong) !important;
+			background: transparent !important;
+			background-color: transparent !important;
+			-webkit-text-fill-color: var(--portal-text-strong);
+		}
+
+		/* 占位符提亮，保证在深色底上可读 */
+		:deep(.arco-input::placeholder),
+		:deep(input.arco-input::placeholder) {
+			color: rgba(203, 213, 225, 0.88) !important;
+			-webkit-text-fill-color: rgba(203, 213, 225, 0.88);
+			opacity: 1 !important;
+		}
+
+		:deep(.arco-icon-hover) {
+			color: rgba(203, 213, 225, 0.85);
+		}
+
+		:deep(.arco-input-clear-btn) {
+			color: rgba(203, 213, 225, 0.75);
+		}
+
+		/* 明文切换在 suffix 最右侧 */
+		:deep(.arco-input-suffix) {
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			padding-right: 4px;
+		}
+
+		:deep(.arco-input-suffix .arco-icon),
+		:deep(.arco-input-suffix svg) {
+			color: rgba(203, 213, 225, 0.8);
 		}
 	}
 
 	.login-link {
 		display: flex;
 		justify-content: flex-end;
-		color: #999;
-		margin-top: 10px;
-		.mf-button {
+		margin-top: 12px;
+
+		.login-link-btn,
+		.login-link-btn.arco-btn {
 			padding: 0;
+			height: auto;
+			font-size: 14px;
 			color: #fff;
-			font-size: 12px;
+			background: transparent !important;
 
 			&:hover {
-				background-color: transparent;
+				color: #fff;
+				background: transparent !important;
+			}
+		}
+	}
+
+	.login-submit {
+		margin-top: 24px;
+		width: 100%;
+
+		.login-btn-primary {
+			width: 100%;
+			height: 48px;
+			border-radius: 40px !important;
+			font-size: 16px;
+			font-weight: 600;
+		}
+	}
+
+	.login-register {
+		margin-top: 16px;
+		text-align: center;
+
+		.login-register-btn,
+		.login-register-btn.arco-btn {
+			padding: 4px 12px;
+			height: auto;
+			font-size: 15px;
+			color: #fff;
+			background: transparent !important;
+
+			&:hover {
+				color: #fff;
+				background: transparent !important;
 			}
 		}
 	}
@@ -361,6 +461,18 @@ export default {
 @media (max-width: 576px) {
 	.login-dialog {
 		width: calc(100% - 16px) !important;
+
+		.login-card {
+			padding: 28px 20px 26px;
+		}
+
+		.login-title {
+			font-size: 22px;
+		}
+
+		.login-header {
+			margin-bottom: 24px;
+		}
 	}
 }
 </style>