style: 设置密码弹窗标题与输入框改为同行布局
- 标签左对齐（60px 宽度），输入框右侧自适应 - 错误提示也跟随缩进对齐
This commit is contained in:
小鱼开发
@@ -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,18 +165,65 @@ 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="请输入旧密码"
|
||||
value={oldPassword}
|
||||
onChange={e => setOldPassword(e.target.value)}
|
||||
style={inputStyle}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowOld(!showOld)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{showOld ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...errorStyle, paddingLeft: '72px' }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={fieldStyle}>
|
||||
<div style={rowStyle}>
|
||||
<label style={rowLabelStyle}>新密码</label>
|
||||
<div style={rowInputWrapStyle}>
|
||||
<input
|
||||
type={showOld ? 'text' : 'password'}
|
||||
placeholder="请输入旧密码"
|
||||
value={oldPassword}
|
||||
onChange={e => setOldPassword(e.target.value)}
|
||||
type={showNew ? 'text' : 'password'}
|
||||
placeholder="至少6位字符"
|
||||
value={newPassword}
|
||||
onChange={e => setNewPassword(e.target.value)}
|
||||
style={inputStyle}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowOld(!showOld)}
|
||||
onClick={() => setShowNew(!showNew)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
@@ -179,7 +238,7 @@ export default function SetPasswordModal({
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{showOld ? (
|
||||
{showNew ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
@@ -192,94 +251,53 @@ export default function SetPasswordModal({
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div style={errorStyle} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={fieldStyle}>
|
||||
<label style={labelStyle}>新密码</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
type={showNew ? 'text' : 'password'}
|
||||
placeholder="至少6位字符"
|
||||
value={newPassword}
|
||||
onChange={e => setNewPassword(e.target.value)}
|
||||
style={inputStyle}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowNew(!showNew)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{showNew ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div style={errorStyle}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
|
||||
<div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
|
||||
</div>
|
||||
|
||||
<div style={fieldStyle}>
|
||||
<label style={labelStyle}>确认密码</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
placeholder="再次输入新密码"
|
||||
value={confirmPassword}
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
style={inputStyle}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowConfirm(!showConfirm)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{showConfirm ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<div style={rowStyle}>
|
||||
<label style={rowLabelStyle}>确认密码</label>
|
||||
<div style={rowInputWrapStyle}>
|
||||
<input
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
placeholder="再次输入新密码"
|
||||
value={confirmPassword}
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
style={inputStyle}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowConfirm(!showConfirm)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--text-tertiary)',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{showConfirm ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
|
||||
<div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user