feat: 删除亲情卡分类并优化搜索功能

- 移除亲情卡支出分类(前端+后端)
- 搜索结果添加点击编辑功能
- 提取 RecordModal 组件复用(index.js/search.js)
- 添加 useMemo 优化计算性能
- 优化类别查找为 O(1) 映射
- 添加删除分类接口输入验证

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Developer
2026-03-17 11:19:26 +08:00
co-authored by Claude Opus 4.6
parent 3347a256b2
commit b5f9a238bb
8 changed files with 457 additions and 218 deletions
+30 -72
View File
@@ -74,80 +74,38 @@ export default function Settings() {
};
return (
<AppShell title="设置" subtitle="数据账号与应用信息" compactHeader>
<section className="card settings-section settings-section--refresh">
<div className="section-heading section-heading--compact">
<div>
<p className="eyebrow">数据管理</p>
<h2>导入与导出</h2>
</div>
</div>
<div className="settings-item">
<div className="settings-info">
<div className="settings-title">导出数据</div>
<div className="settings-desc">将所有账目导出为 JSON 文件方便备份</div>
</div>
<button type="button" className="btn btn-primary btn-inline" onClick={handleExport} disabled={exporting || importing}>
<span className="button-content">
<Icon name="download" size={16} />
{exporting ? '导出中...' : '导出'}
</span>
</button>
</div>
<div className="settings-item">
<div className="settings-info">
<div className="settings-title">导入数据</div>
<div className="settings-desc"> JSON 文件恢复账目数据</div>
</div>
<button type="button" className="btn btn-secondary btn-inline" onClick={() => fileInputRef.current?.click()} disabled={exporting || importing}>
<span className="button-content">
<Icon name="upload" size={16} />
{importing ? '导入中...' : '导入'}
</span>
</button>
<input
type="file"
ref={fileInputRef}
onChange={handleImport}
accept=".json"
style={{ display: 'none' }}
/>
</div>
</section>
<AppShell title="设置" subtitle="管理您的数据账号" compactHeader>
<div className="settings-list">
<button type="button" className="settings-link" onClick={handleExport} disabled={exporting || importing}>
<Icon name="download" size={18} />
<span>导出数据</span>
<Icon name="chevronRight" size={16} className="chevron" />
</button>
<button type="button" className="settings-link" onClick={() => fileInputRef.current?.click()} disabled={exporting || importing}>
<Icon name="upload" size={18} />
<span>导入数据</span>
<Icon name="chevronRight" size={16} className="chevron" />
</button>
<input
type="file"
ref={fileInputRef}
onChange={handleImport}
accept=".json"
style={{ display: 'none' }}
/>
</div>
<section className="card settings-section settings-section--refresh">
<div className="section-heading section-heading--compact">
<div>
<p className="eyebrow">账号</p>
<h2>登录状态</h2>
</div>
</div>
<div className="settings-item settings-item--stacked">
<div className="settings-info">
<div className="settings-title">退出登录</div>
<div className="settings-desc">从当前设备安全退出并返回登录页</div>
</div>
<button type="button" className="btn btn-danger btn-inline" onClick={handleLogout} disabled={loggingOut}>
<span className="button-content">
<Icon name="logout" size={16} />
{loggingOut ? '退出中...' : '退出登录'}
</span>
</button>
</div>
</section>
<div className="settings-list">
<button type="button" className="settings-link settings-link--danger" onClick={handleLogout} disabled={loggingOut}>
<Icon name="logout" size={18} />
<span>{loggingOut ? '退出中...' : '退出登录'}</span>
<Icon name="chevronRight" size={16} className="chevron" />
</button>
</div>
<section className="card settings-section settings-section--refresh">
<div className="section-heading section-heading--compact">
<div>
<p className="eyebrow">关于</p>
<h2>应用信息</h2>
</div>
</div>
<div className="about-info">
<p>简易记账本 v1.0</p>
<p className="sub">基于 React + Next.js 开发</p>
</div>
</section>
<div className="settings-footer">
<p>简易记账本 v1.0</p>
</div>
</AppShell>
);
}