公司给 AI 功能定了预算，财务月底来对账，产品想知道哪个功能费 token。这些需求最后都压到前端：把 token 用量实时、直观地展示出来。我做了大半个月，从一个简单数字做到一套用量看板，这篇讲讲前端这块怎么搭、踩了哪些坑。
先说清楚：token 这数从哪来
很多人卡在第一步——前端怎么知道用掉多少 token。两个来源：
- 流式返回的 usage 字段：一次回答结束，响应里带
prompt_tokens / completion_tokens，这是最准的，模型那头算好的。 - 前端预估：回答还没结束、要实时显示进度时，拿字符数粗估（中文大致 1 字 ≈ 1.x token），先顶着，结束了再用真实值校正。
我的做法是"预估打底 + 结算校正"：吐字过程中用预估值让进度条动起来，回答完拿真实 usage 覆盖。用户体感是实时的，账目又是准的。
三个层级的展示，对应三种人
我做了三档，因为看的人不一样：
单次对话级——气泡角落一个小标，"本次约 1.2k tokens"。开发和较真的用户爱看。默认折叠，不打扰人。
用户/会话级——一个预算条。比如这个月该用户配额 100k，用了 63k，条子走到 63%，过 80% 变黄，过 95% 变红并提示。这条上线后，"为啥不让我发了"的疑问少了大半——用户自己看得到快满了。
团队/功能级——给管理员的看板，按功能、按天聚合。哪个入口费 token 一目了然。我们靠它砍掉过一个偷偷重复打模型的 bug，那功能 token 量是同类的三倍，看板上凸得很明显。
容易翻车的两个点
别拿预估值当账。 我早期偷懒全用字符预估，月底跟后端的真实计费一对，差了快 8%。后来一律以服务端 usage 结算为准，预估只用来"让进度条别卡着不动"。
币种和单位要统一。 团队迁过一次结算口径，token 单价、币种都变了。我把"token→费用"的换算抽成一个配置，集中改一处，没散落在各组件里——不然那次迁移够我改一天。
一个我没做到完美的地方
多模型场景下，不同模型单价不同，我现在是按调用时的模型 ID 查价格表算的，但价格表更新有延迟，偶尔会和实际账单差几分钱。对内看趋势够用，要做到分毫不差还得后端在结算时回传精确费用。目前够用，但不够漂亮。
补一句模型这头：我没自建推理、也没维护一堆模型的算力，直接走的讯飞 MaaS，用量和计费它按 token 给得明明白白，前端拿这数做展示就很顺，不用自己去对账一堆 GPU。
把"AI 花了多少钱"做得透明，比偷偷烧钱后月底被财务追着问舒服多了。你们的 AI 用量是怎么对用户/老板展示的？有没有更准的实时估法？评论区交流 👇
