【中秋国庆 VibeCoding】AA记账 —— 当场记一笔，自动算清谁该转谁多少
这是什么
一个给「多人 AA」用的记账小工具：当场三下记一笔，最后一键算清每个人该收多少、该付多少，并给出转账笔数最少的方案。同一套东西做了两个版本：网页版（单文件，浏览器打开）和微信小程序版（暂时没搞定）。
灵感来自哪
中秋出去玩。说好 AA，结果乱七八糟的，钱也不太好意思算：
- 民宿是我垫的、油费是老周垫的、门票是小满垫的；
- 服务区那顿简餐老周没吃，不该摊；
- 泡温泉小满带了娃，说好算两份；
- 给家里带的牦牛肉干是我和位朋友自己分的，不走公摊。
微信群刷了三十多条截图，最后谁也算不清，有人还因为「除不尽」少给了一块多。我要的就是：当场记、算得准、别扯皮。
它解决了什么假期问题
假期多人花钱有三个绕不过去的坎：
- 分摊方式不止「均摊」 —— 有人没参加、有人算两份、有人单独买给自己的东西；
- 除不尽 —— 一桌 326 元四个人分，谁多出那两分钱？
- 欠来欠去 —— 五个人互相垫付，真要转账要转十几笔。
对应三件事：四种分摊方式、金额一律按「分」做整数运算（最大余额法，保证分摊之和 = 总金额，永远不差 1 分）、最少转账算法（贪心两两抵消，笔数 ≤ 人数 - 1）。
功能清单
- 四种分摊：均摊 / 只算参与的人 / 按份数（带娃算两份那种）/ 自定金额
- 最少转账：结算页直接给方案「小满 → 老周 ¥162、小满 → 阿哲 ¥92」，逐笔勾选「已转」
- 结算关系图：谁转给谁用箭头画出来，箭头逐条揭示
- 11 类花销：餐饮/住宿/交通/油费/电费/采购/门票/礼物/娱乐/其他 + 自定义分类（可填名字）
- 4 套双节主题：中秋月夜 / 国庆红 / 月白 / 暗色，一键切换
- 9 种外币，汇率可改（出国玩也能记）
- 结算海报：canvas 生成一张长图，直接存相册发群里，不用一个个念数字
- 只读快照链接：整个账本压进 URL，发给同伴打开就能看，不用注册、不用登录、数据不上传
- 单文件版 192KB 零依赖：一个 HTML 双击就打开，断网也能用
作品截图
【图 1｜主页：总支出 / 人均 / 笔数 三张统计卡 + 「花在哪了」分类占比 + 按日流水】
【图 2｜结算页：各人净额 + 最少转账关系图（箭头 + 金额）+ 转账清单】
【图 3｜结算海报：canvas 生成的长图，可直接存相册发群】
【图 4｜主题与设置：4 套配色 + 成员管理 + 汇率】
【图 5｜微信小程序版四屏：明细 / 结算 / 设置 / 海报】
【图 6｜小程序图标】
用 TraeCode 的创作过程
1. 先让它出规格，不急着写代码：把「四种分摊 + 最少转账 + 除不尽」讲清楚，让它先给数据模型和功能清单，确认后再动手。
2. 先写结算引擎并跑单测：金额全部用「分」的整数，分摊用最大余额法。这一步定了之后，界面怎么改都不会算错钱。
3. 一次做完四套主题，然后逐个主题扫对比度（浅色主题有 3 处白底白字是真看不出来，改掉了）。
4. 用无头浏览器反复自测：让 TraeCode 截图 + 断言 DOM，修掉滚动条粗细、元素互相遮挡、中文截断这类只有看图才发现的问题。
5. 再要一个「单文件版」：把所有 CSS/JS 内联进一个 HTML，方便直接发给朋友（原来用多文件版，单独打开 index.html 是白屏，这个坑就是自测时发现的）。
6. 最后移植成微信小程序：同一套设计令牌（4 套主题的颜色值）、同一套文案、同一个结算算法搬进 Taro 项目，换成原生 tabBar、原生 Storage、canvas 2d 出海报。视觉上和网页版基本一致。
过程中踩的坑（都靠自测抓出来）：微信预览一开始整屏发白 —— 排查发现是氛围层 z-index 盖住了内容；小程序画布里 createRadialGradient 不存在 —— 加了一层兼容兜底，海报才出得来。
体验链接
-
网页版：
AA记账.html (192.7 KB) -
微信小程序：（暂未发布）
写在最后：这个工具解决的事情很小，但假期里真的会碰到。祝大家双节快乐，账都算得清清楚楚 
；微信小程序待补充；