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