【生活娱乐】家庭资产记账APP - Demo作品帖

TRAE AI 创造力大赛 【大赛初赛专区】
1

【生活娱乐赛道】家庭资产记账APP - Demo作品帖

1. Demo 简介

是什么：一款专为家庭理财打造的移动端网页记账应用（PWA），支持存款管理、支出记录、资产统计、数据导出导入等完整功能。

面向谁：普通家庭用户、理财小白、想要轻松管理家庭财务的夫妻/个人。

主要功能：

:bank: 存款管理

  • 支持活期/定期存款记录，自动计算利息收益

  • 按银行分类，饼图直观展示资产分布

  • 区分"历史累计收益"和"预计总收益"，一目了然

:money_bag: 支出记账

  • 快捷记录日常支出，支持自定义标签分类

  • 按月/按标签筛选，轻松追踪消费去向

  • 支出饼图、月度趋势图可视化分析

:bar_chart: 资产统计

  • 年度对比曲线，看清资产增长趋势

  • 存款期限分布，合理规划资金

:globe_with_meridians: 市场资讯

  • 大盘指数实时行情

  • 黄金价格实时更新（支持API Key配置，数据本地存储更安全）

  • 财经资讯速递

:floppy_disk: 数据安全

  • 所有数据本地存储（LocalStorage），不上传服务器

  • 一键导出/导入JSON备份，换机无忧

  • API Key仅存在本地浏览器，保护隐私

2. Demo 创作思路

灵感来源： 自己平时管理家庭存款，银行多、产品杂，到期了经常忘。市面上的记账APP要么太复杂，要么广告多，要么需要登录上传数据，总觉得不安全。于是想做一个纯本地、无广告、手机友好的家庭记账工具。

想解决的问题：

  1. 存款到期记不住，利息算不清 —— 自动计算收益，到期提醒

  2. 钱花在哪了不知道 —— 支出分类+标签筛选

  3. 换手机数据迁移麻烦 —— 一键导出/导入JSON

  4. 担心隐私泄露 —— 纯本地存储，数据不上传

  5. 想看看市场行情 —— 集成黄金价格、股票指数资讯

为什么做这个方向：

  • 真实痛点：自己和身边朋友都有这个需求

  • 技术可行：纯前端就能做，不需要后端，TRAE可以快速落地

  • 用户价值：帮人管好钱，提升生活幸福感，符合"生活娱乐"赛道

3. Demo 体验地址

在线体验：https://shutan2.github.io/family-assets/

GitHub 源码：https://github.com/ShuTan2/family-assets

（推荐用手机浏览器打开，体验更佳；首次打开后可添加到桌面像APP一样使用）

4. TRAE 实践过程

整个项目完全用 TRAE IDE 开发，从0到1只用了几天时间。下面是我的开发过程：

第一步：项目初始化与核心功能搭建

  • 用 TRAE 创建 React + TypeScript + Vite 项目

  • 搭建路由、底部导航栏、存款列表页面

  • 实现存款的增删改查和利息计算

  • Session ID ：2825082999421864:f930787355b54c8f2d040d36adaeca80_6a2fcec0b1771aaf92e0ed88.6a2fcec0b1771aaf92e0ed8b.6a2fcec0b1771aaf92e0ed89:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/15 18:06:56)

  • image
    image1920×1099 186 KB

第二步：支出记账与数据可视化

  • 新增支出模块，支持标签分类

  • 接入 recharts 图表库，做饼图、折线图

  • 实现按年月、按标签筛选支出

  • Session ID ：2825082999421864:5a63e186ee0417bc0a9a53feecc1932a_6a2fcec0b1771aaf92e0ed88.6a30877418f4742aeba45290.6a30877418f4742aeba4528e:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/16 07:15:00)

  • image
    image2226×1622 470 KB

第三步：数据导出导入与体验优化

  • 完整数据导出（存款+支出+标签），JSON格式

  • 大额数字紧凑显示（万/亿单位），避免手机端溢出

  • 累计收益显示bug修复（区分历史收益vs预计收益）

第四步：资讯模块与黄金价格

  • 新增资讯模块，展示大盘指数和财经资讯

  • 接入聚合数据API，实现黄金价格实时更新

  • API Key 本地存储方案，保护用户隐私

  • Session ID：2825082999421864:eec1d4c9cceb37518a6d1de903a689a1_6a2fcec0b1771aaf92e0ed88.6a4b074818f4742aeba45d15.6a4b074818f4742aeba45d13:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/7/6 09:39:20)

  • image
    image2284×1620 494 KB

5. 关键 Session ID

（1）Session ID ：2825082999421864:f930787355b54c8f2d040d36adaeca80_6a2fcec0b1771aaf92e0ed88.6a2fcec0b1771aaf92e0ed8b.6a2fcec0b1771aaf92e0ed89:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/15 18:06:56)

（2）Session ID ：2825082999421864:5a63e186ee0417bc0a9a53feecc1932a_6a2fcec0b1771aaf92e0ed88.6a30877418f4742aeba45290.6a30877418f4742aeba4528e:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/16 07:15:00)

（3）Session ID：2825082999421864:eec1d4c9cceb37518a6d1de903a689a1_6a2fcec0b1771aaf92e0ed88.6a4b074818f4742aeba45d15.6a4b074818f4742aeba45d13:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/7/6 09:39:20)

6.报名帖链接

1 个赞