refactor(ui): 统一编辑图标为铅笔 SVG
- Account 页面昵称编辑:修改文字 → 铅笔图标 - 移除保存/取消按钮,统一为 Enter 保存、Esc/失焦取消
This commit is contained in:
@@ -88,44 +88,54 @@ export default function Account() {
|
||||
<span className="settings-row-label">昵称</span>
|
||||
<span className="settings-row-value" style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
|
||||
{editing ? (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
maxLength={20}
|
||||
autoFocus
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid var(--border-color)',
|
||||
fontSize: 'var(--font-sm)',
|
||||
outline: 'none',
|
||||
width: '160px',
|
||||
}}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') handleSaveNickname(); }}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={handleSaveNickname}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? '保存中' : '保存'}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => { setEditing(false); setNickname(displayName); setError(''); }}
|
||||
disabled={saving}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</>
|
||||
<input
|
||||
type="text"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
maxLength={20}
|
||||
autoFocus
|
||||
disabled={saving}
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid var(--border-color)',
|
||||
fontSize: 'var(--font-sm)',
|
||||
outline: 'none',
|
||||
width: '160px',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSaveNickname();
|
||||
if (e.key === 'Escape') {
|
||||
setEditing(false);
|
||||
setNickname(displayName);
|
||||
setError('');
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
setEditing(false);
|
||||
setNickname(displayName);
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<span>{displayName}</span>
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => setEditing(true)}>
|
||||
修改
|
||||
</button>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#36b26a"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ cursor: 'pointer', flexShrink: 0 }}
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
<title>修改昵称</title>
|
||||
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user