fix: 修复登录表单验证错误显示重叠问题
- 重构登录表单结构,使用 fieldWrapper 包裹输入框和错误信息 - 修复验证错误消息与输入框重叠的布局问题 - 更新依赖版本 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
ef5e9aec3f
commit
1296bd607c
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
{/* 忘记密码链接 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue