【中秋国庆 VibeCoding】家宴账本·一统江湖 —— 一个网页终结全家中秋算账大乱斗

随机挑选评论,根据需求,我开发完成了网页

一、我做了什么

一个打开就能用的家庭聚餐记账 & 自动分摊小网页,专为中秋国庆家庭聚会设计:

  • :mobile_phone: 手机浏览器打开直接用,不用注册、不用登录、不用装 App,数据只存在本机浏览器
  • :family_man_woman_girl_boy: 家庭成员自定义(爸爸、妈妈、舅舅、我、表姐……),大头像大字体,长辈看得清
  • :memo: 每笔开销一键录入:谁垫付、多少钱、分类(:pot_of_food:食材 / :bento_box:外卖订餐 / :moon_cake:酒水月饼 / :video_game:娱乐消费)
  • :abacus: 自动算清每个人该出多少、谁该补钱给谁,用大白话讲明白:“爸爸多付了 ¥288,应该收回来”“我给爸爸 ¥212,就算清啦!”
  • :speech_balloon: 一键复制结算文案,直接粘贴到微信群,全家照着小作文转账就行
  • :full_moon::red_paper_lantern: 带点中秋+国庆的小氛围(月亮还能点一下变:sparkles:),温暖但不花哨

二、灵感来源

灵感来自活动里一位需求者的评论,一下子戳中了我:

“中秋国庆一大家子聚会,有人买菜、有人订餐、有人买酒水零食,最后线下对账混乱,口头算账容易记漏,长辈又嫌复杂不愿用复杂记账。”

这太真实了——我家每年聚餐结束都是"等等,上次那个买菜钱谁出的?""月饼钱算了吗?"围着茶几对半天账。所以我决定把这个想法做出来。
根据评论区姜金雷提出的想法:【中秋国庆VibeCoding】你出题,我来做,用 TraeCode 做个节日小应用 - #35,来自 姜金雷

三、它解决了什么假期问题

聚会痛点 现在
口头算账,转头就忘 谁垫付当场记一笔,10秒搞定
复杂记账 App 长辈不愿学 无需注册登录,打开网页就会用
平摊算不明白,分币对不上 自动按分精确计算,除不尽的零头自动分配,账目严格守恒
群里催钱不好意思开口 复制一段喜庆的结算小作文发群里,大家照着转钱,谁也不尴尬

四、作品截图 / 体验

  • 截图1:首页整体 —— 节日 Header + 家庭成员 + 记一笔按钮

  • 截图2:记账表单 —— 大金额输入、垫付人选择、分类

  • 截图3:结算页 —— 每人"应收/还要补/刚刚好"卡片 + 大白话说明

  • 截图4:复制出来的微信群文案效果

体验方式:作品是一个单文件网页,双击 index.html 即可运行;也可以部署到任意静态托管生成链接,手机扫码即用。
双节家庭聚餐记账.html (39.7 KB)

五、用 TraeCode 创作的过程

整个项目从需求文档到可运行成品,三次对话完成:
1.我把需求者的想法整理成 31 节需求文档,先理清逻辑,然后开发
2.随机压力测试 500 轮
3. 关键算法自动抽离+自测 结算逻辑独立成 calculateSettlement() 纯函数,金额全程用"分"计算避免浮点误差;更让我意外的是,它自己调用隔离 JS 运行时跑了 8 组测试:

这个真不错,长辈看得清这点太懂了,每次教我妈用记账App都费劲 :joy:

1 个赞

可以下载试试,

喜欢的人多,我可以开发成微信小程序