From 1296bd607c64567bd5378531ad505f3f18cef0e0 Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Wed, 26 Nov 2025 02:19:58 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81=E9=94=99=E8=AF=AF=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=87=8D=E5=8F=A0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构登录表单结构，使用 fieldWrapper 包裹输入框和错误信息
- 修复验证错误消息与输入框重叠的布局问题
- 更新依赖版本

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/admin-web/package-lock.json          |  2 +-
 frontend/admin-web/package.json               |  2 +-
 .../src/app/(auth)/login/login.module.scss    | 22 +++---
 .../admin-web/src/app/(auth)/login/page.tsx   | 74 ++++++++++---------
 4 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/frontend/admin-web/package-lock.json b/frontend/admin-web/package-lock.json
index eaf08cd6..4aeedd41 100644
--- a/frontend/admin-web/package-lock.json
+++ b/frontend/admin-web/package-lock.json
@@ -29,7 +29,7 @@
         "eslint-config-next": "^15.1.6",
         "prettier": "^3.4.2",
         "sass": "^1.83.4",
-        "typescript": "^5.7.3"
+        "typescript": "5.9.3"
       }
     },
     "node_modules/@babel/runtime": {
diff --git a/frontend/admin-web/package.json b/frontend/admin-web/package.json
index 4bcb7c4d..8c97c8ed 100644
--- a/frontend/admin-web/package.json
+++ b/frontend/admin-web/package.json
@@ -35,6 +35,6 @@
     "eslint-config-next": "^15.1.6",
     "prettier": "^3.4.2",
     "sass": "^1.83.4",
-    "typescript": "^5.7.3"
+    "typescript": "5.9.3"
   }
 }
diff --git a/frontend/admin-web/src/app/(auth)/login/login.module.scss b/frontend/admin-web/src/app/(auth)/login/login.module.scss
index 47414952..56ee5ffe 100644
--- a/frontend/admin-web/src/app/(auth)/login/login.module.scss
+++ b/frontend/admin-web/src/app/(auth)/login/login.module.scss
@@ -92,33 +92,31 @@
 
   &__inputGroup {
     align-self: stretch;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    border-radius: 6px;
-    background-color: transparent;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    gap: 16px;
+  }
+
+  &__fieldWrapper {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
   }
 
   &__inputWrapper {
     align-self: stretch;
     background-color: $white;
     border: 1px solid #cbd5e1;
+    border-radius: 6px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     padding: 12px;
-
-    &:first-child {
-      border-radius: 6px 6px 0 0;
-      border-bottom: none;
-    }
-
-    &:last-child {
-      border-radius: 0 0 6px 6px;
-    }
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
     &--error {
       border-color: $error-color;
diff --git a/frontend/admin-web/src/app/(auth)/login/page.tsx b/frontend/admin-web/src/app/(auth)/login/page.tsx
index 6ae19393..01eb3677 100644
--- a/frontend/admin-web/src/app/(auth)/login/page.tsx
+++ b/frontend/admin-web/src/app/(auth)/login/page.tsx
@@ -125,43 +125,49 @@ export default function LoginPage() {
         <form className={styles.login__form} onSubmit={handleSubmit}>
           {/* 输入框组 */}
           <div className={styles.login__inputGroup}>
-            <div
-              className={`${styles.login__inputWrapper} ${
-                errors.email ? styles['login__inputWrapper--error'] : ''
-              }`}
-            >
-              <input
-                className={styles.login__input}
-                placeholder="电子邮件"
-                type="email"
-                value={formData.email}
-                onChange={handleInputChange('email')}
-                aria-label="电子邮件"
-                autoComplete="email"
-              />
+            {/* 邮箱输入字段 */}
+            <div className={styles.login__fieldWrapper}>
+              <div
+                className={`${styles.login__inputWrapper} ${
+                  errors.email ? styles['login__inputWrapper--error'] : ''
+                }`}
+              >
+                <input
+                  className={styles.login__input}
+                  placeholder="电子邮件"
+                  type="email"
+                  value={formData.email}
+                  onChange={handleInputChange('email')}
+                  aria-label="电子邮件"
+                  autoComplete="email"
+                />
+              </div>
+              {errors.email && (
+                <span className={styles.login__error}>{errors.email}</span>
+              )}
             </div>
-            {errors.email && (
-              <span className={styles.login__error}>{errors.email}</span>
-            )}
 
-            <div
-              className={`${styles.login__inputWrapper} ${
-                errors.password ? styles['login__inputWrapper--error'] : ''
-              }`}
-            >
-              <input
-                className={styles.login__input}
-                placeholder="密码"
-                type="password"
-                value={formData.password}
-                onChange={handleInputChange('password')}
-                aria-label="密码"
-                autoComplete="current-password"
-              />
+            {/* 密码输入字段 */}
+            <div className={styles.login__fieldWrapper}>
+              <div
+                className={`${styles.login__inputWrapper} ${
+                  errors.password ? styles['login__inputWrapper--error'] : ''
+                }`}
+              >
+                <input
+                  className={styles.login__input}
+                  placeholder="密码"
+                  type="password"
+                  value={formData.password}
+                  onChange={handleInputChange('password')}
+                  aria-label="密码"
+                  autoComplete="current-password"
+                />
+              </div>
+              {errors.password && (
+                <span className={styles.login__error}>{errors.password}</span>
+              )}
             </div>
-            {errors.password && (
-              <span className={styles.login__error}>{errors.password}</span>
-            )}
           </div>
 
           {/* 忘记密码链接 */}