fix: 修复登录表单验证错误显示重叠问题

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hailin 2025-11-26 02:19:58 -08:00
parent ef5e9aec3f
commit 1296bd607c
4 changed files with 52 additions and 48 deletions

View File

@ -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": {

View File

@ -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"
}
}

View File

@ -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;

View File

@ -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>
{/* 忘记密码链接 */}