fix: 密码弹窗错误提示区域固定高度,避免显示/隐藏时窗口跳动

- SetPasswordModal: errorStyle 从 minHeight 改为固定 height,错误文本条件渲染改为占位渲染
- ResetPasswordModal: 同上
This commit is contained in:
小鱼开发
2026-06-10 07:46:20 +08:00
parent 923ff63a3d
commit d83080b628
2 changed files with 10 additions and 6 deletions
@@ -112,7 +112,9 @@ export default function ResetPasswordModal({ open, onClose }: ResetPasswordModal
fontSize: '12px',
color: '#e74c3c',
marginTop: '4px',
minHeight: '18px',
height: '18px',
lineHeight: '18px',
overflow: 'hidden',
};
const pwdMismatch = confirmPassword.length > 0 && !pwdMatch;
@@ -243,7 +245,7 @@ export default function ResetPasswordModal({ open, onClose }: ResetPasswordModal
)}
</button>
</div>
{pwdTooShort && <div style={errorStyle}>6</div>}
<div style={errorStyle}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
</div>
{/* 确认密码 */}
@@ -286,7 +288,7 @@ export default function ResetPasswordModal({ open, onClose }: ResetPasswordModal
)}
</button>
</div>
{pwdMismatch && <div style={errorStyle}></div>}
<div style={errorStyle}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
</div>
</div>
@@ -107,7 +107,9 @@ export default function SetPasswordModal({
fontSize: '12px',
color: '#e74c3c',
marginTop: '4px',
minHeight: '18px',
height: '18px',
lineHeight: '18px',
overflow: 'hidden',
};
const pwdMismatch = confirmPassword.length > 0 && newPassword !== confirmPassword;
@@ -233,7 +235,7 @@ export default function SetPasswordModal({
)}
</button>
</div>
{pwdTooShort && <div style={errorStyle}>6</div>}
<div style={errorStyle}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
</div>
<div style={fieldStyle}>
@@ -276,7 +278,7 @@ export default function SetPasswordModal({
)}
</button>
</div>
{pwdMismatch && <div style={errorStyle}></div>}
<div style={errorStyle}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
</div>
</div>