1. 项目背景与需求分析
作为一名长期被个人财务管理困扰的开发者，我深刻理解现代人在记账这件事上遇到的痛点。市面上大多数记账工具要么功能过于复杂，要么无法满足情侣或家庭共同记账的需求。经过对身边20多位朋友的调研，我发现以下几个普遍存在的问题：
-
功能过载：78%的受访者表示现有记账软件包含太多与核心需求无关的功能（如股票、基金、信用卡管理），导致使用门槛过高。
-
协作缺失：65%的情侣用户反映缺乏有效的共同记账方案，经常因账目不清产生矛盾。
-
分析不足：92%的用户表示虽然记录了消费数据，但无法从中获得有价值的消费洞察。
基于这些发现，我决定开发Money Tracker Pro——一个专注于解决上述三个核心问题的轻量级记账系统。
2. 系统设计与技术选型
2.1 整体架构设计
系统采用典型的前后端分离架构：
code复制前端：React 18 + TypeScript + Vite
后端：Supabase（PostgreSQL数据库 + 认证服务）
AI服务：OpenAI API（消费分析模块）
部署：Vercel（前端） + Supabase（后端）
选择这套技术栈主要基于以下考虑：
-
开发效率：React和Vite的组合可以提供极快的开发体验，TypeScript能有效减少类型错误。
-
成本控制：Supabase提供免费的数据库和认证服务，非常适合个人开发者和小型项目。
-
扩展性：模块化设计使得未来可以轻松替换或增加新的AI服务提供商。
2.2 数据库设计
核心表结构设计如下：
sql复制-- 用户表
CREATE TABLE users (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
email TEXT UNIQUE NOT NULL,
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- 账本表（支持多人共享）
CREATE TABLE ledgers (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
name TEXT NOT NULL,
created_by UUID REFERENCES users(id),
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- 账本成员关联表
CREATE TABLE ledger_members (
ledger_id UUID REFERENCES ledgers(id),
user_id UUID REFERENCES users(id),
PRIMARY KEY (ledger_id, user_id)
);
-- 交易记录表
CREATE TABLE transactions (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
ledger_id UUID REFERENCES ledgers(id),
amount DECIMAL(12,2) NOT NULL,
type VARCHAR(10) CHECK (type IN ('income', 'expense')),
category VARCHAR(50) NOT NULL,
notes TEXT,
created_by UUID REFERENCES users(id),
created_at TIMESTAMPTZ DEFAULT NOW()
);
这个设计实现了：
- 多用户支持
- 账本共享机制
- 完整的交易记录追踪
3. 核心功能实现细节
3.1 极简记账流程
前端实现了一个高度优化的记账表单：
tsx复制function RecordForm() {
const [amount, setAmount] = useState('');
const [type, setType] = useState<'expense'|'income'>('expense');
const [category, setCategory] = useState('food');
const [notes, setNotes] = useState('');
const handleSubmit = async () => {
if (!amount) return;
await supabase.from('transactions').insert({
amount: parseFloat(amount),
type,
category,
notes,
ledger_id: currentLedgerId,
created_by: userId
});
// 重置表单
setAmount('');
setNotes('');
};
return (
<div className="fixed bottom-0 w-full p-4 bg-white shadow-lg">
<div className="flex gap-2">
<input
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="金额"
className="flex-1 p-2 border rounded"
autoFocus
/>
<select
value={type}
onChange={(e) => setType(e.target.value as any)}
className="p-2 border rounded"
>
<option value="expense">支出</option>
<option value="income">收入</option>
</select>
<button
onClick={handleSubmit}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
记录
</button>
</div>
{/* 更多表单字段... */}
</div>
);
}
这个设计实现了：
- 底部固定表单，随时可记录
- 最少字段输入（金额必填，其他可选）
- 即时提交不跳转页面
3.2 实时消费统计
使用Chart.js实现可视化展示：
tsx复制function SpendingChart() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const { data } = await supabase
.from('transactions')
.select('category, sum(amount)')
.eq('type', 'expense')
.group('category');
setData(data);
};
fetchData();
}, []);
return (
<div className="p-4 bg-white rounded-lg shadow">
{data && (
<Pie
data={{
labels: data.map(d => d.category),
datasets: [{
data: data.map(d => d.sum),
backgroundColor: [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'
]
}]
}}
/>
)}
</div>
);
}
3.3 双人账本共享
实现的关键在于：
- 创建账本时指定共享用户
- 所有用户看到相同的交易记录
- 明确标注每笔记录的创建者
共享逻辑实现：
ts复制// 创建共享账本
async function createSharedLedger(name: string, partnerEmail: string) {
// 1. 创建账本
const { data: ledger, error } = await supabase
.from('ledgers')
.insert({ name })
.select()
.single();
if (error) throw error;
// 2. 查找共享用户
const { data: partner } = await supabase
.from('users')
.select('id')
.eq('email', partnerEmail)
.single();
if (!partner) throw new Error('用户不存在');
// 3. 添加共享关系
await supabase.from('ledger_members').insert([
{ ledger_id: ledger.id, user_id: currentUserId },
{ ledger_id: ledger.id, user_id: partner.id }
]);
return ledger;
}
4. AI消费分析模块
4.1 实现原理
AI分析模块的工作流程：
- 每周/每月定时触发分析任务
- 从数据库获取周期内的交易数据
- 发送给OpenAI API进行智能分析
- 将分析结果保存并展示给用户
4.2 核心代码实现
ts复制async function generateSpendingReport(ledgerId: string) {
// 1. 获取交易数据
const { data: transactions } = await supabase
.from('transactions')
.select('*')
.eq('ledger_id', ledgerId)
.gte('created_at', getStartOfMonth())
.lte('created_at', getEndOfMonth());
// 2. 准备AI提示词
const prompt = `
你是一位专业的财务顾问，请分析以下消费数据：
${JSON.stringify(transactions)}
请用中文回答，包含以下内容：
- 本月消费总额和主要支出类别
- 与上月相比的消费趋势变化
- 识别可能的冲动消费项目
- 给出3条具体的省钱建议
`;
// 3. 调用OpenAI API
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }],
temperature: 0.7,
});
// 4. 保存分析结果
await supabase.from('reports').insert({
ledger_id: ledgerId,
content: response.choices[0].message.content,
period: 'monthly'
});
return response.choices[0].message.content;
}
4.3 实际应用效果
AI生成的报告示例：
code复制本月消费分析报告（2023年11月）
1. 消费概况
- 总支出：¥8,456
- 主要支出类别：
• 餐饮：¥3,210 (38%)
• 购物：¥2,150 (25%)
• 交通：¥980 (12%)
2. 趋势分析
相比上月，总支出增加12%，主要增长来自：
- 双11购物消费增加¥650
- 周末外出就餐次数增加
3. 冲动消费识别
- 11月11日：电子产品消费¥1,280（可能受促销影响）
- 每周五晚：平均餐饮消费比平日高40%
4. 优化建议
1) 设置购物冷静期，非必需品加入购物车24小时后再购买
2) 周末外出就餐可考虑提前团购优惠券
3) 交通费较高，建议检查是否有更经济的通勤方案
5. 部署与性能优化
5.1 前端优化策略
- 按需加载：使用React.lazy实现路由级代码分割
- 数据缓存：对频繁访问的数据（如分类列表）使用SWR缓存
- 预加载：在用户空闲时预加载可能需要的资源
5.2 后端优化要点
- 数据库索引：为常用查询字段创建索引
sql复制CREATE INDEX idx_transactions_ledger ON transactions(ledger_id);
CREATE INDEX idx_transactions_created ON transactions(created_at);
- 查询优化：避免全表扫描，使用select限制字段
- 批量操作：对多个插入/更新操作使用事务
5.3 部署流程
- 前端部署到Vercel
bash复制npm install -g vercel
vercel --prod
- Supabase配置
- 启用行级安全（RLS）
- 设置适当的存储过程
- 配置数据库备份
- 环境变量管理
- 使用Vercel的环境变量配置
- 敏感信息（如API密钥）使用加密存储
6. 实际使用反馈与迭代
上线两个月后收集到的用户反馈：
- 正面评价（占比82%）
- "终于找到一个简单到能坚持使用的记账工具"
- "和女朋友一起记账后，关于钱的争执减少了"
- "AI报告指出了我没注意到的消费习惯"
- 改进建议（占比18%）
- 希望增加照片凭证上传功能
- 需要更灵活的时间段统计
- 部分用户反映分类不够细致
基于这些反馈，我们规划了以下迭代：
- 多维度统计：支持自定义时间范围分析
- 智能分类：基于历史数据自动建议分类
- 附件支持：上传消费凭证照片
- 预算功能：设置各类别预算并跟踪
7. 开发经验与教训
在开发过程中积累的几个关键经验：
-
数据一致性：早期没有使用事务导致偶尔出现数据不一致，后来所有写操作都包装在事务中。
-
性能取舍：实时统计图表在数据量大时性能下降，最终实现为：
- 小数据量：实时计算
- 大数据量：使用物化视图+定时刷新
- AI成本控制：
- 缓存AI分析结果避免重复请求
- 设置使用频率限制
- 对长文本进行分段处理
- 错误处理：完善的错误处理机制对用户体验至关重要：
ts复制try {
await recordTransaction(data);
} catch (error) {
if (error instanceof DatabaseError) {
showToast('数据库错误，请稍后重试');
} else if (error instanceof NetworkError) {
showToast('网络连接失败，已保存到本地');
saveToLocalStorage(data);
} else {
showToast('未知错误');
captureException(error);
}
}
8. 项目扩展方向
基于现有架构，可以考虑的扩展方向：
- 多平台支持：
- 开发React Native移动应用
- 提供浏览器插件快速记录
- 高级分析：
- 消费习惯预测
- 个性化省钱建议
- 与银行API对接自动导入交易
- 社交功能：
- 匿名消费对比
- 成就系统鼓励持续记账
- 财务健康评分
- 企业版：
- 团队报销管理
- 多层级审批流程
- 与财务系统集成
这个项目的成功验证了一个重要观点：好的工具不在于功能有多复杂，而在于能否精准解决特定人群的实际问题。通过持续收集用户反馈和迭代优化，Money Tracker Pro已经帮助数千用户建立了健康的记账习惯。