0. 先和大家打个招呼吧 
我是一名独立开发者，平时喜欢用代码折腾一些解决日常痛点的小工具。
说实话，这个 Demo 从想法到成品，TRAE 帮我跨过了好几道坎。最直观的感受是：我把脑子里「一个能自动规划预算的记账 App」这个模糊想法一句句讲给它听，它就能帮我从零搭起整个前端框架、调通 AI 接口、甚至帮我做了一轮完整的业务逻辑审查。
印象最深的一步是我说「背景深色有点影响阅读」，TRAE 直接给了我三套浅色主题方案让我选，选完之后一口气把 CSS 变量、ECharts 配色、PWA 配置全部迁移完毕——这种「说一句话就能看到完整效果」的体验，是我之前用传统开发方式很难想象的。
1. Demo 简介
是什么： 计余账单是一款 AI 驱动的智能记账 + 预算规划应用，目前是单文件 HTML 部署，支持 PWA 离线使用，后续想做成APP或小程序。
面向谁： 有固定收入但总觉得「钱不知道花哪了」的上班族——想记账但嫌麻烦，想做预算但不知道怎么分配。
主要功能：
① AI 预算规划
输入月收入后，系统自动识别固定支出（房租、话费等），扣除储蓄和储备金后，将剩余可支配金额智能分配到餐饮、交通、娱乐等弹性消费类别。接入 DeepSeek API 生成个性化建议和风险提示。
② 快捷记账
底部弹出式记账面板，支持计算器键盘输入、分类选择、标签备注。记账后自动关联当月预算，实时显示各类别使用进度条，超支时弹窗提醒。
③ 数据统计
支持月/季/年三个时间维度，用饼图展示分类支出占比、折线图展示每日支出趋势、柱状图对比预算与实际支出。明细页支持按类型（支出/收入/不计收支）筛选。
2. Demo 创作思路
灵感来源： 自己就是目标用户。每个月工资到账后，交完房租和固定账单，剩下的钱总是稀里糊涂就花完了。试过好几个记账 App，要么太复杂不想打开，要么只记账不规划——记完一周就放弃。
想解决的问题： 记账 + 预算这两件事一直是割裂的。多数人记完账并不知道「这个月还能花多少」，更没有人帮他们想过「工资到账后该怎么分配」。计余账单试图把这两步连起来：先规划，再记账，过程中实时对比。
为什么做这个方向： 个人理财类工具看似红海，但「AI 辅助预算分配」这个切入点还没有人做好。传统预算工具要求用户自己设限额，而计余账单的做法是——你只需要输入收入和固定支出，AI 帮你算出每个类别该花多少，还告诉你哪些类别有超支风险。这个体验差异，是值得做下去的理由。
3. Demo 体验地址
计余账单.zip (32.8 KB)
下载附件解压后，用浏览器打开 index.html 即可体验完整功能。
提示：AI 预算规划功能需要联网调用 DeepSeek API，通过本地代理服务器转发。如需体验 AI 功能，建议在部署了代理服务的环境中运行。
4. TRAE 实践过程
4.1 技术选型与项目搭建
计余账单采用 Vue 3（CDN 模式）+ ECharts 图表库 + DeepSeek API 的技术方案，整个项目是单 HTML 文件，无需构建工具，部署即用。
向 TRAE 描述了产品需求后，它直接生成了完整的页面结构：首页（账单概览 + 预算进度）、明细页（收支列表 + 类型筛选）、AI 规划页（收入输入 → 固定支出确认 → 弹性分配 → 方案预览 → 生效追踪）、统计页（三图表 + 时段切换），以及底部记账面板和顶部导航。
4.2 AI 预算规划核心流程
这是整个产品最核心的闭环，向 TRAE 描述了三步规划逻辑：
- 固定支出确认 — 用户输入月收入，系统列出常见固定项（房租、话费、储蓄），可编辑可增删
- 弹性消费分配 — 系统根据历史记账数据识别高频消费类别，用户勾选后，自动按比例分配可支配余额，同时预留 5%-10% 储备金
- AI 生成建议 — 调用 DeepSeek API，传入收入、支出结构、历史数据，返回预算摘要、个性化建议（数组）和风险提示
TRAE 帮我处理了几个关键细节：DeepSeek API 的调用封装（含降级策略）、AI 返回格式的标准化处理（advice 字段统一转数组）、以及预算方案生效后的数据结构设计（储蓄独立存储、固定支出与弹性消费分层追踪）。
4.3 UI 主题迁移
开发中途发现深色背景影响阅读，向 TRAE 反馈后，它提供了三套浅色方案（纯白简洁 / 暖米色 / 浅蓝灰），选定方案一后，TRAE 完成了 CSS 变量、字体（Inter + Noto Sans SC）、阴影系统、ECharts 配色、PWA manifest 的全量迁移。同时将所有 Emoji 图标替换为 28 个主题定制 SVG 图标，统一了视觉风格。
4.4 业务逻辑审查与修复
这是 TRAE 最让我惊喜的一步。我让它从产品角度审查整个应用的业务逻辑漏洞，它并行分析了三条线（记账数据流、预算规划闭环、统计展示），找出了 19 个问题，按 P0/P1/P2 三级分类：
- P0 级：固定支出未被追踪导致「剩余」金额虚高、储蓄逻辑矛盾、统计页季度筛选上界 bug、ECharts 实例未释放导致内存泄漏
- P1 级：「重置规划」不清旧方案、支出统计口径不一致、非预算支出不可见
- P2 级：图表数据源过时、跨月孤儿方案、明细页缺类型筛选
每个问题都给出了具体修复方案，我用选择题形式确认了 4 个关键架构决策（储蓄独立展示、统一追踪、动态类别映射、统计页完整修复），然后一口气完成了全部修复。
4.5 关键对话 Session ID
以下为开发过程中关键任务的对话 Session ID：
| Session ID | 对应任务 |
|---|---|
| 3974070956201875:73e7cf964fe18d175592636775e13704_6a505032d4e2c89656578fa4.6a5337f452264c51d80bc99c.6a5337f44be2d6e0427ea16a:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/12 14:50:09) | 项目搭建 + 首页/明细页/统计页/记账面板开发 |
| 3974070956201875:24c6fbc6e0d3c2cf799449b8f127dc24_6a505032d4e2c89656578fa4.6a56f2697c965d42c91431c2.6a56f268635b7ff6732e088b:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 10:38:10) | AI 预算规划流程实现 + DeepSeek API 接入 |
| 3974070956201875:3ae75e8f4b4c8959bb40a8fe156de9f0_6a505032d4e2c89656578fa4.6a57353591cb5654c35f0ef8.6a5735344dece37e3e4e720e:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 15:28:24)、3974070956201875:780fc2e35e6f2012d89ab4eb02ca895e_6a505032d4e2c89656578fa4.6a5740f591cb5654c35f10f9.6a5740f4bea230f561fc8302:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 16:20:17) | 业务逻辑审查 + 19 项漏洞修复 + SVG 图标系统 |