refactor(ui): 统一编辑图标为铅笔 SVG

- Account 页面昵称编辑:修改文字 → 铅笔图标
- 移除保存/取消按钮,统一为 Enter 保存、Esc/失焦取消
This commit is contained in:
小鱼开发
2026-05-10 20:56:36 +08:00
parent 5706042254
commit 4e2a0ea3b3
+45 -35
View File
@@ -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>