所有独立作品

独立构建 · 产品与实验

公开仓库

Token Wallet

分散的 AI 用量,一个清楚的视图。

本地优先的浏览器扩展,将多平台余额、额度和预算放在一起。

我的工作
产品设计 · Chrome 扩展 · 数据适配
项目阶段
Independent build
项目类型
浏览器扩展Chrome / Local-first / JavaScript
产品界面预览。

先解释每个数字是什么,再把它们放到一起。

这次工作留下了什么
  • Popup 操作入口与 Dashboard 分析视图
  • 多平台数据适配与明确的状态语义
  • 本地快照、趋势和预算相关测试
阅读目录 · 7 个章节
01 / Token Wallet

多个平台,一个预算问题。

当 AI 使用分散在多个平台,理解自己的消费就成了另一项工作。Token Wallet 尝试提供统一视图,同时保留各平台能力的真实差异。

02 / Token Wallet

本地优先,也要说清楚存储边界。

余额、额度与手动预算并不是同一种数据。有的平台没有查询接口,统一界面不能把缺失的数据伪装成精确数字。

03 / Token Wallet

余额、额度、预算,不能混为一谈。

01

先说明数据是什么

区分平台返回、预算设置与不可获取状态,使界面中的数字有清楚的来源。

02

趋势比孤立数字更有用

以快照、趋势和提醒帮助发现变化,同时标注这不是官方账单。

03

把本地优先做得具体

不要求云端账号或自建后台,同时清楚说明扩展本地存储和密钥保护边界。

04 / Token Wallet

统一的第一步,是承认数字的含义不相同。

问题与场景处理方式取舍与依据
余额 / 额度按供应商真实接口与权限返回管理密钥不等于普通推理密钥
手动预算由用户定义并明确标注不能伪装成供应商精确余额
仅控制台入口直接跳转平台控制台没有合适接口时,不展示猜测的数字
05 / Token Wallet

轻量扩展,分开处理操作与分析。

MV3 扩展使用原生 HTML、CSS 与 JavaScript,不依赖构建步骤。Popup 聚焦账户状态、刷新与去控制台处理问题;Dashboard 承担账户比较和趋势观察。供应商数据适配保留在公共核心层,避免两个界面各自解释同一数据。

项目文档中的 Popup 实际界面示例。账户余额为演示数据,不是供应商账单。
06 / Token Wallet

趋势来自本地观察,不是补出来的历史账单。

使用快照形成趋势意味着安装前的数据不会自动出现,采样也可能不连续。项目把这些图表保留为本地估算,而非正式账单。密钥保存在扩展本地存储,不把“本地优先”包装成加密保险箱。

07 / Token Wallet

交付与复盘

交付物

可以查看的交付

扩展代码、Popup、明暗看板与文档演示截图可以相互核对。交付重点是状态可信和可采取行动,而非所有厂商功能完全一致。

查看对应材料
项目记录

已有验证记录

测试文件覆盖解析、额度、预算、JSON 路径和每日序列等情况。本轮核查了这些材料,没有重跑扩展测试,也没有对所有真实供应商逐个联调。

可信的统一体验,不是把差异抹平,而是让差异更容易理解。