style: 设置密码弹窗标题与输入框改为同行布局

- 标签左对齐(60px 宽度),输入框右侧自适应
- 错误提示也跟随缩进对齐
This commit is contained in:
小鱼开发
2026-06-10 09:26:22 +08:00
parent 66749b7653
commit 57cf32ac18
@@ -95,12 +95,24 @@ export default function SetPasswordModal({
marginBottom: '16px',
};
const labelStyle: React.CSSProperties = {
display: 'block',
const rowStyle: React.CSSProperties = {
display: 'flex',
alignItems: 'center',
gap: '12px',
};
const rowLabelStyle: React.CSSProperties = {
fontSize: '13px',
fontWeight: 500,
color: 'var(--text-secondary)',
marginBottom: '6px',
width: '60px',
flexShrink: 0,
textAlign: 'right',
};
const rowInputWrapStyle: React.CSSProperties = {
flex: 1,
position: 'relative',
};
const errorStyle: React.CSSProperties = {
@@ -153,8 +165,9 @@ export default function SetPasswordModal({
<div>
{hasPassword && (
<div style={fieldStyle}>
<label style={labelStyle}></label>
<div style={{ position: 'relative' }}>
<div style={rowStyle}>
<label style={rowLabelStyle}></label>
<div style={rowInputWrapStyle}>
<input
type={showOld ? 'text' : 'password'}
placeholder="请输入旧密码"
@@ -192,13 +205,15 @@ export default function SetPasswordModal({
)}
</button>
</div>
<div style={errorStyle} />
</div>
<div style={{ ...errorStyle, paddingLeft: '72px' }} />
</div>
)}
<div style={fieldStyle}>
<label style={labelStyle}></label>
<div style={{ position: 'relative' }}>
<div style={rowStyle}>
<label style={rowLabelStyle}></label>
<div style={rowInputWrapStyle}>
<input
type={showNew ? 'text' : 'password'}
placeholder="至少6位字符"
@@ -236,12 +251,14 @@ export default function SetPasswordModal({
)}
</button>
</div>
<div style={errorStyle}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
</div>
<div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
</div>
<div style={fieldStyle}>
<label style={labelStyle}></label>
<div style={{ position: 'relative' }}>
<div style={rowStyle}>
<label style={rowLabelStyle}></label>
<div style={rowInputWrapStyle}>
<input
type={showConfirm ? 'text' : 'password'}
placeholder="再次输入新密码"
@@ -279,7 +296,8 @@ export default function SetPasswordModal({
)}
</button>
</div>
<div style={errorStyle}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
</div>
<div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
</div>
</div>