我用TaoToken AI做一套「合租开支分摊」网页：从记账到自动提醒的完整实操

1. 合租分摊网页到底要解决什么问题合租这件事最麻烦的从来不是「算钱」而是「算清楚之后没人记得交」。我见过太多合租群里的经典场景月初有人垫付了水电月中另一个人买了纸巾和清洁剂月底房租又要到期结果谁欠谁多少全靠一张模糊的截图最后不了了之。市面上的记账 App 要么强制注册、要么把数据传到云端、要么高级功能要付费解锁对于只想安安静静记个账的合租小团体来说反而增加了负担。所以这套「合租开支分摊网页」的核心目标很明确本地存储、自动分摊、到期提醒。它不需要服务器不需要数据库账号打开浏览器就能用数据全部存在你自己的电脑里。而 AI 在这里扮演的角色是帮你把「写页面、算公式、配提醒」这些原本要折腾半天的活儿用自然语言描述需求就能落地。具体来说这个网页要能完成四件事。第一录入账单日期、项目、金额、垫付人四个字段就够。第二自动分摊根据合租人数和分摊规则算出每个人应该承担多少、谁该补谁多少。第三本地持久化刷新页面数据不丢关掉浏览器再打开还在。第四到期提醒房租、水电这类周期性支出到了约定日期能触发提醒避免遗忘。适合谁用合租 2 到 6 人的小团体、情侣合住、朋友拼租都合适。你不需要会写代码只要能把自己的需求说清楚剩下的交给 AI 通道来完成。下面我会把整套流程拆成可复制的步骤包括 API 配置、页面代码结构、提醒触发条件的测试方法以及我实际踩过的坑。2. 用 TaoToken 统一 Key 接入 AI 能力的前置准备在动手写页面之前先要把 AI 通道打通。这一步很多人会卡住因为不同模型的接口地址、鉴权方式、参数格式都不一样来回切换非常折腾。我的做法是用 TaoToken 作为统一的 API 通道一个 Key 就能调用多种模型省去反复配置的麻烦。TaoToken 的定位是 AI 能力聚合入口它把模型对话、代码生成、长文本处理等能力统一到一套接口规范下。对于这个合租分摊项目来说我需要 AI 帮我做两件事一是生成和迭代网页代码二是后续可能用到的账单文本解析。这两类任务对模型的要求不同代码类需要逻辑严谨文本类需要理解准确统一通道的好处就是可以按任务切换模型而不用改代码里的请求地址。前置准备分三步。第一步注册并获取 API Key。访问官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 完成账号注册然后进入控制台创建 API Key。这个 Key 是你调用所有模型的凭证务必保存好不要直接写在前端代码里明文暴露。第二步确认 API 基础地址。TaoToken 的 API 入口是 https://taotoken.net/api所有请求都基于这个地址拼接具体路径。注意这里不要加 UTM 参数保持接口地址干净。第三步选定模型 ID。不同任务用不同模型代码生成建议选逻辑能力强的文本解析选理解能力好的。你可以在模型对话页面先测试一下效果确认哪个模型适合你的场景。模型对话入口https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content这里要提醒一点API Key 属于敏感信息前端页面直接调用会暴露在浏览器里。更稳妥的做法是本地起一个轻量代理或者只在开发调试阶段用正式使用时把 Key 放在后端环境变量里。如果你只是自己本地用风险相对可控但仍然不建议把 Key 提交到公开仓库。配置完成后你可以先用一个最简单的请求验证通道是否通畅。下面这段是 curl 示例把 YOUR_API_KEY 替换成你自己的 Keycurl -X POST https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer YOUR_API_KEY \ -d { model: your-model-id, messages: [ {role: user, content: 用一句话说明合租分摊的核心逻辑} ] }如果返回正常的 JSON 结构说明通道已经打通。这一步看起来简单但它是后面所有 AI 能力的基础值得花几分钟确认清楚。3. 可复制的页面配置与 API 调用参数这一节是整篇的核心我会给出可以直接复制使用的配置片段。整个项目结构很简单三个文件index.html 负责页面骨架style.css 负责样式app.js 负责逻辑和 API 调用。所有文件放在同一个目录下比如 D:\合租账本。先看 API 配置部分。在 app.js 顶部定义一个配置对象把 Base URL、Key、Model ID 三件套写清楚。这是调用任何模型都必须的三要素缺一不可const AI_CONFIG { baseUrl: https://taotoken.net/api, apiKey: YOUR_API_KEY, modelId: your-model-id, endpoint: /v1/chat/completions };然后是账单数据结构。每条账单包含四个字段用 JSON 表示如下{ id: bill_001, date: 2026-01-05, item: 房租, amount: 3600, payer: 张三, splitType: equal }splitType 表示分摊方式equal 是均摊也可以扩展成按比例分摊。合租人数和成员列表单独存一份配置{ roommates: [张三, 李四, 王五], rentDueDay: 5, utilityDueDay: 25 }本地持久化用 localStorage读写逻辑封装成两个函数function saveBills(bills) { localStorage.setItem(rent_bills, JSON.stringify(bills)); } function loadBills() { const raw localStorage.getItem(rent_bills); return raw ? JSON.parse(raw) : []; }分摊计算的核心逻辑是总支出除以人数得到每人应承担金额再根据每个人实际垫付的金额算出差额。差额为正表示该收钱为负表示该补钱。这段逻辑用 reduce 实现function calculateSettlement(bills, roommates) { const total bills.reduce((sum, b) sum b.amount, 0); const perPerson total / roommates.length; const paid {}; roommates.forEach(r paid[r] 0); bills.forEach(b { if (paid[b.payer] ! undefined) paid[b.payer] b.amount; }); return roommates.map(r ({ name: r, shouldPay: perPerson, actualPay: paid[r], balance: paid[r] - perPerson })); }提醒触发条件用日期比对实现。假设房租每月 5 号到期当前日期距离到期日小于等于 3 天时触发提醒function checkReminder(dueDay) { const today new Date(); const due new Date(today.getFullYear(), today.getMonth(), dueDay); const diffDays Math.ceil((due - today) / (1000 * 60 * 60 * 24)); return diffDays 0 diffDays 3; }如果你需要 AI 帮忙解析历史账单文本调用参数这样写async function parseBillText(text) { const res await fetch(AI_CONFIG.baseUrl AI_CONFIG.endpoint, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer AI_CONFIG.apiKey }, body: JSON.stringify({ model: AI_CONFIG.modelId, messages: [ { role: system, content: 你是账单解析助手把用户输入解析成JSON数组字段为date,item,amount,payer }, { role: user, content: text } ] }) }); const data await res.json(); return data.choices[0].message.content; }这些配置片段可以直接复制到你的项目里改掉 Key 和模型 ID 就能跑。页面样式部分不展开重点是逻辑能通。如果你用 Cline 或 Claude Code 这类工具辅助开发记得把 Base URL、Key、Model ID 三件套配全缺一个都会报鉴权错误。4. 本地验证请求与成功结果确认配置写完之后必须做本地验证确认整条链路是通的。验证分两层先验证 API 通道再验证页面功能。API 通道验证用前面给的 curl 命令或者直接在浏览器控制台里跑一段 fetch。成功返回的 JSON 结构里会有 choices 数组第一个元素的 message.content 就是模型输出。如果返回 401说明 Key 有问题如果返回 404说明路径拼错了如果返回 200 但 choices 为空说明模型 ID 不对。页面功能验证更直观。双击 index.html 在浏览器打开按顺序测这几项。第一新增一条账单填日期、项目、金额、垫付人点保存看列表里是否出现这条记录。第二刷新页面看数据是否还在验证 localStorage 是否生效。第三切换到结算中心看每个人的应收应付金额是否计算正确。第四手动把系统日期改到房租到期前 3 天看提醒是否触发。我实测下来最容易出问题的是日期计算。JavaScript 的 Date 对象月份从 0 开始如果直接拿 getMonth() 去比对会差一个月。正确做法是用 getMonth() 1或者在构造 Date 时注意参数顺序。另一个坑是 localStorage 的容量限制虽然 5MB 对账单数据来说绰绰有余但如果你的历史账单特别多建议定期导出备份。成功的结果应该是这样的页面顶部显示总支出、账单数量、合租人数、统计时间跨度四个卡片中间是账单明细列表按日期倒序排列底部是结算中心每个人一行显示应承担、已垫付、差额三个数值差额为正的标绿色为负的标红色。提醒区域在到期前 3 天显示黄色横幅提示「房租即将到期请及时缴纳」。如果你想让 AI 帮你检查代码逻辑可以把 app.js 的内容贴到模型对话里让它帮你找 bug。模型对话入口https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content5. 本篇常见错误排查这一节列出我实际遇到过的报错和排查方法按出现频率排序。401 Unauthorized。这是最常见的错误原因通常是 Key 没填、Key 填错、或者 Key 前面多了空格。检查 Authorization 头是不是Bearer YOUR_API_KEY的格式Bearer 和 Key 之间有一个空格。另外确认 Key 没有过期如果控制台里重新生成过 Key旧 Key 会失效。local proxy failed。这个报错通常出现在你用了本地代理工具的情况下。如果你在浏览器里直接请求 API可能会被跨域策略拦截。解决办法是在本地起一个简单的代理服务或者用浏览器插件临时关闭跨域限制仅限开发调试。更稳妥的做法是把 API 调用放到后端前端只请求自己的后端接口。reading choices。这个报错说明返回的 JSON 结构里没有 choices 字段通常是请求失败但没抛异常。打印完整的 response 看看可能是模型 ID 写错了或者请求体格式不对。确认 messages 是数组每个元素有 role 和 content 两个字段。OAuth 相关报错。如果你用的是 Claude Code 或类似工具可能会遇到 OAuth 鉴权失败。这类工具通常需要单独配置 auth.json 文件把 Base URL、Key、Model ID 写进去。文件路径一般在用户目录下的 .config 文件夹里具体位置看工具文档。配置格式参考{ baseUrl: https://taotoken.net/api, apiKey: YOUR_API_KEY, model: your-model-id }页面数据不更新。改了代码但页面没变化先强制刷新Ctrl F5再检查 localStorage 里是不是有旧数据。可以在控制台执行localStorage.clear()清空后重新测试。分摊金额算错。检查合租人数是否和成员列表一致如果成员列表里有重复名字会导致计算错误。另外确认金额字段是数字类型如果是字符串reduce 会变成字符串拼接而不是数值相加。提醒不触发。检查 dueDay 是否在当前月份的有效日期范围内比如 2 月没有 30 号。另外确认时区设置如果系统时区和代码里的日期计算不一致会导致偏差一天。排障的核心思路是先确认 API 通道通不通再确认数据读写对不对最后确认计算逻辑准不准。每一步都用最小可复现的用例去测不要一上来就测完整流程。6. 后续迭代与长期使用建议页面跑通之后你可以继续用自然语言让 AI 帮你迭代功能。比如增加「按比例分摊」支持让房租按房间面积分、水电按人头分或者增加「导出 CSV」按钮方便备份和分享再或者接入消息推送到期自动发提醒到合租群。如果你打算长期用这套系统建议把 API Key 的管理规范化。开发阶段可以用明文正式使用时放到环境变量里或者用后端代理转发请求。TaoToken 的控制台可以管理 Key 的权限和额度定期检查用量避免意外超支。控制台入口https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content对于需要长期编码和 Agent 类任务的场景可以考虑 Coding Plan它更适合持续性的开发需求。入口https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content最后说一个实用技巧把合租规则、成员名单、分摊方式写成一个 README 文件放在项目目录里每次让 AI 迭代功能时先让它读这个文件这样不用反复复述背景信息。这个习惯能省下大量沟通成本尤其是隔了几周再回来改代码的时候。