[{"data":1,"prerenderedAt":612},["ShallowReactive",2],{"project-tokenwise-ai-token-monitor":3},{"id":4,"title":5,"body":6,"date":601,"description":602,"extension":603,"meta":604,"navigation":605,"path":606,"seo":607,"stem":608,"summary":609,"tech_stack":610,"__hash__":611},"projects\u002Fprojects\u002Ftokenwise-ai-token-monitor.md","TokenWise - AI编码助手Token监控",{"type":7,"value":8,"toc":578},"minimark",[9,14,19,32,50,72,75,79,83,97,100,138,140,144,147,291,294,354,357,367,369,373,377,416,420,446,450,469,473,490,494,512,514,518,532,534,538,576],[10,11,13],"h1",{"id":12},"tokenwise-ai-编码助手-token-使用监控桌面应用","TokenWise — AI 编码助手 Token 使用监控桌面应用",[15,16,18],"h2",{"id":17},"一项目概述","一、项目概述",[20,21,22,23,27,28,31],"p",{},"随着 AI 编码助手（Claude Code、OpenCode 等）在日常开发中的深度使用，Token 消耗与 API 余额逐渐成为开发者关注的核心成本指标。然而，目前缺乏一款轻量、隐私友好的桌面工具，能帮助开发者",[24,25,26],"strong",{},"实时掌握 Token 用量","并",[24,29,30],{},"按模型\u002F来源精细分析","。",[20,33,34,37,38,41,42,45,46,49],{},[24,35,36],{},"TokenWise"," 是一款基于 ",[24,39,40],{},"Tauri 2 + Vue 3 + Rust"," 构建的桌面应用，通过",[24,43,44],{},"离线日志文件解析","与",[24,47,48],{},"实时 HTTP 代理拦截","两种方式采集数据，配合 Chart.js 可视化仪表盘与系统托盘集成，让开发者在编码过程中对 Token 消耗\"一目了然\"。",[51,52,53,60,66],"ul",{},[54,55,56,59],"li",{},[24,57,58],{},"项目形态","：macOS 桌面应用（Tauri 2 原生窗口）",[54,61,62,65],{},[24,63,64],{},"核心能力","：双源数据采集、按模型分布可视化、API 余额查询、系统托盘实时显示、HTTP 代理实时监控",[54,67,68,71],{},[24,69,70],{},"适用场景","：重度使用 Claude Code \u002F OpenCode 的开发者，需要追踪每日 Token 消耗与成本",[73,74],"hr",{},[15,76,78],{"id":77},"二业务痛点与目标","二、业务痛点与目标",[80,81,82],"h3",{"id":82},"痛点",[51,84,85,88,91,94],{},[54,86,87],{},"AI 编码助手的 Token 消耗分散在不同平台和日志中，难以汇总统计",[54,89,90],{},"多个模型（DeepSeek、Kimi、Claude、Qwen 等）同时使用时，无法按模型维度分析用量",[54,92,93],{},"API 账户余额查询需手动登录各平台，操作繁琐",[54,95,96],{},"缺乏实时监控手段，只能事后查看消耗",[80,98,99],{"id":99},"目标",[51,101,102,111,118,125,132],{},[54,103,104,105,27,108],{},"将 Claude Code \u002F OpenCode 的 Token 数据",[24,106,107],{},"自动采集",[24,109,110],{},"统一展示",[54,112,113,114,117],{},"按",[24,115,116],{},"模型维度","展示 Token 分布，帮助优化模型选择策略",[54,119,120,121,124],{},"支持",[24,122,123],{},"API 余额一键查询","（DeepSeek、Kimi）",[54,126,127,128,131],{},"提供",[24,129,130],{},"系统托盘常驻","，无需打开窗口即可查看今日用量",[54,133,120,134,137],{},[24,135,136],{},"实时代理监控","，在 API 调用时即捕获 Token 数据",[73,139],{},[15,141,143],{"id":142},"三技术方案与架构","三、技术方案与架构",[80,145,146],{"id":146},"技术栈",[148,149,150,166],"table",{},[151,152,153],"thead",{},[154,155,156,160,163],"tr",{},[157,158,159],"th",{},"层级",[157,161,162],{},"技术",[157,164,165],{},"说明",[167,168,169,183,200,213,226,239,252,265,278],"tbody",{},[154,170,171,177,180],{},[172,173,174],"td",{},[24,175,176],{},"桌面框架",[172,178,179],{},"Tauri 2",[172,181,182],{},"Rust 后端 + WebView 前端，轻量原生",[154,184,185,190,193],{},[172,186,187],{},[24,188,189],{},"前端框架",[172,191,192],{},"Vue 3（Composition API）",[172,194,195,199],{},[196,197,198],"code",{},"\u003Cscript setup>"," + TypeScript strict",[154,201,202,207,210],{},[172,203,204],{},[24,205,206],{},"样式方案",[172,208,209],{},"TailwindCSS 4.x",[172,211,212],{},"PostCSS 插件集成，支持明暗主题",[154,214,215,220,223],{},[172,216,217],{},[24,218,219],{},"图表库",[172,221,222],{},"Chart.js 4.x",[172,224,225],{},"环形图 + 折线图，自定义 HTML tooltip",[154,227,228,233,236],{},[172,229,230],{},[24,231,232],{},"后端语言",[172,234,235],{},"Rust（edition 2021）",[172,237,238],{},"高性能数据处理与系统交互",[154,240,241,246,249],{},[172,242,243],{},[24,244,245],{},"HTTP 代理",[172,247,248],{},"hyper 1.0",[172,250,251],{},"内置代理服务器，SSE 流解析",[154,253,254,259,262],{},[172,255,256],{},[24,257,258],{},"本地数据库",[172,260,261],{},"rusqlite（bundled SQLite）",[172,263,264],{},"代理监控数据持久化",[154,266,267,272,275],{},[172,268,269],{},[24,270,271],{},"异步运行时",[172,273,274],{},"tokio 1（多线程）",[172,276,277],{},"Rust 异步任务调度",[154,279,280,285,288],{},[172,281,282],{},[24,283,284],{},"本地存储",[172,286,287],{},"tauri-plugin-store 2",[172,289,290],{},"API Key 等配置安全存储",[80,292,293],{"id":293},"双源数据采集架构",[51,295,296,320],{},[54,297,298,301],{},[24,299,300],{},"来源 1 — 离线日志解析（被动）",[51,302,303,310,317],{},[54,304,305,306,309],{},"OpenCode：直接查询本地 SQLite 数据库（",[196,307,308],{},"~\u002F.local\u002Fshare\u002Fopencode\u002Fopencode.db","），SQL 聚合统计",[54,311,312,313,316],{},"Claude Code：遍历 ",[196,314,315],{},"~\u002F.claude\u002Fprojects\u002F*\u002Fconversations\u002F*.jsonl"," 日志文件，JSONL 逐行解析、去重统计",[54,318,319],{},"自动推断 API 提供商（阿里云百炼、火山引擎、Anthropic、DeepSeek、Kimi 等）",[54,321,322,325],{},[24,323,324],{},"来源 2 — HTTP 代理监控（主动\u002F实时）",[51,326,327,334,337,340,351],{},[54,328,329,330,333],{},"在 ",[196,331,332],{},"127.0.0.1:7890"," 启动内置 hyper HTTP 代理",[54,335,336],{},"自动修改 Claude 配置文件将 API 请求路由至代理",[54,338,339],{},"识别 Claude CLI\u002FCode 请求（User-Agent 过滤），仅拦截相关流量",[54,341,342,343,346,347,350],{},"解析 SSE 响应流，从 ",[196,344,345],{},"message_start"," \u002F ",[196,348,349],{},"message_delta"," 事件中提取 usage 数据",[54,352,353],{},"代理停止时自动恢复原始配置，不破坏用户设置",[80,355,356],{"id":356},"项目组织",[358,359,364],"pre",{"className":360,"code":362,"language":363},[361],"language-text","tauri2-jiankong\u002Fmac\u002F\n├── src\u002F                          # Vue 3 前端\n│   ├── App.vue                   # 根组件（数据加载、页面路由）\n│   ├── components\u002F\n│   │   ├── UsageCard.vue         # Token 使用卡片（环形图 + 指标）\n│   │   ├── BalanceCard.vue       # API 余额卡片\n│   │   ├── DonutChart.vue        # Chart.js 环形图\n│   │   ├── LineChart.vue         # Chart.js 折线图\n│   │   ├── DetailPage.vue        # 详情页（表格 + 趋势）\n│   │   └── Settings.vue          # 设置页（API Key + 代理开关）\n│   └── types\u002F                    # TypeScript 类型定义\n├── src-tauri\u002F                    # Rust 后端\n│   └── src\u002F\n│       ├── lib.rs                # Tauri 命令注册、托盘、插件\n│       ├── claude_query_token.rs # Claude JSONL 日志解析\n│       ├── opencode_query_token.rs # OpenCode SQLite 查询\n│       ├── proxy\u002F                # HTTP 代理模块\n│       │   ├── server.rs         # Hyper 代理服务器\n│       │   ├── handler.rs        # SSE 流解析与 Token 提取\n│       │   ├── config.rs         # Claude 配置备份\u002F修改\u002F恢复\n│       │   └── state.rs          # 代理运行状态\n│       └── storage\u002F              # SQLite 持久化\n│           └── token_db.rs       # 数据库操作（建表、插入、查询）\n","text",[196,365,362],{"__ignoreMap":366},"",[73,368],{},[15,370,372],{"id":371},"四核心功能实现","四、核心功能实现",[80,374,376],{"id":375},"_1双源-token-数据采集","1）双源 Token 数据采集",[51,378,379,385,407],{},[54,380,381,384],{},[24,382,383],{},"OpenCode 数据源","：通过 rusqlite 直接查询本地 SQLite 数据库，SQL 聚合统计今日 input_tokens、output_tokens、cache_creation、cache_read 等指标",[54,386,387,390,391,394,395,398,399,402,403,406],{},[24,388,389],{},"Claude Code 数据源","：使用 walkdir 遍历 JSONL 日志文件，逐行解析后按 ",[196,392,393],{},"message_id"," 去重，",[196,396,397],{},"stop_reason"," 过滤（仅统计 ",[196,400,401],{},"end_turn"," 和 ",[196,404,405],{},"tool_use","），UTC 时间戳自动转换为本地时间",[54,408,409,412,413,415],{},[24,410,411],{},"HTTP 代理源","：基于 hyper 1.0 构建正向代理，对 SSE 响应流进行实时解析，从 ",[196,414,349],{}," 事件提取 usage 写入 SQLite",[80,417,419],{"id":418},"_2可视化仪表盘","2）可视化仪表盘",[51,421,422,428,434,440],{},[54,423,424,427],{},[24,425,426],{},"使用卡片（UsageCard）","：Chart.js 环形图按模型分布展示 Token 消耗，指标行展示输入\u002F输出\u002F缓存写入\u002F缓存读取\u002F调用次数",[54,429,430,433],{},[24,431,432],{},"余额卡片（BalanceCard）","：DeepSeek 和 Kimi 账户余额实时展示，含自定义渐变配色",[54,435,436,439],{},[24,437,438],{},"详情页（DetailPage）","：折线趋势图 + 数据表格，按模型分类的数据集，自定义 HTML tooltip 展示完整指标",[54,441,442,445],{},[24,443,444],{},"模型配色方案","：DeepSeek V4 Flash（天蓝）、DeepSeek V4 Pro（蓝色）、Kimi（紫色）、GLM（绿色）、Claude（橙色）、Qwen（靛蓝）",[80,447,449],{"id":448},"_3api-余额查询","3）API 余额查询",[51,451,452,459,466],{},[54,453,454,455,458],{},"调用 DeepSeek 余额 API（",[196,456,457],{},"\u002Fuser\u002Fbalance","）提取 CNY 余额",[54,460,461,462,465],{},"调用 Kimi 余额 API（",[196,463,464],{},"\u002Fv1\u002Fusers\u002Fme\u002Fbalance","）提取可用余额",[54,467,468],{},"API Key 通过 tauri-plugin-store 安全存储在本地配置文件中",[80,470,472],{"id":471},"_4系统托盘集成","4）系统托盘集成",[51,474,475,481,484,487],{},[54,476,477,478],{},"菜单栏托盘图标实时显示今日 Token 总数：",[196,479,480],{},"{Claude total} | {OpenCode total}",[54,482,483],{},"数字自动格式化（≥1M 显示 \"X.XXM\"，≥1K 显示 \"X.XK\"）",[54,485,486],{},"窗口关闭时隐藏到托盘而非退出，保持统计持续运行",[54,488,489],{},"点击托盘图标显示\u002F聚焦应用窗口",[80,491,493],{"id":492},"_5http-代理实时监控","5）HTTP 代理实时监控",[51,495,496,499,506,509],{},[54,497,498],{},"一键启动\u002F停止代理，实时状态指示（绿色\u002F灰色圆点）",[54,500,501,502,505],{},"代理自动修改 ",[196,503,504],{},"~\u002F.claude\u002Fsettings.json"," 将 API 请求路由至本地代理",[54,507,508],{},"代理停止时自动恢复原始配置，确保用户设置不被破坏",[54,510,511],{},"支持 Android 12+ 精确闹钟权限检查",[73,513],{},[15,515,517],{"id":516},"五项目效果","五、项目效果",[51,519,520,523,526,529],{},[54,521,522],{},"将\"登录各平台后台查余额\"的流程改为\"桌面一键查看\"，大幅提升查询效率",[54,524,525],{},"通过双源数据采集，实现从历史统计到实时监控的全链路覆盖",[54,527,528],{},"按模型维度的可视化分析帮助开发者优化模型选择、降低成本",[54,530,531],{},"系统托盘常驻显示，编码过程中随时掌握消耗动态",[73,533],{},[15,535,537],{"id":536},"六可扩展与复盘","六、可扩展与复盘",[51,539,540,546,552,558,564,570],{},[54,541,542,545],{},[24,543,544],{},"更多 AI 工具支持","：扩展至 Cursor、Windsurf 等 AI 编码助手的日志解析",[54,547,548,551],{},[24,549,550],{},"成本估算","：根据各模型单价自动计算每日\u002F每月 API 花费",[54,553,554,557],{},[24,555,556],{},"历史趋势","：增加周\u002F月维度的时间趋势分析",[54,559,560,563],{},[24,561,562],{},"告警机制","：Token 日消耗或 API 余额低于阈值时推送系统通知",[54,565,566,569],{},[24,567,568],{},"多代理协同","：支持同时监控多个代理端口，适配不同工具的并发使用",[54,571,572,575],{},[24,573,574],{},"Windows\u002FLinux 支持","：当前仅 macOS，可基于 Tauri 2 跨平台能力扩展",[73,577],{},{"title":366,"searchDepth":579,"depth":579,"links":580},3,[581,583,587,592,599,600],{"id":17,"depth":582,"text":18},2,{"id":77,"depth":582,"text":78,"children":584},[585,586],{"id":82,"depth":579,"text":82},{"id":99,"depth":579,"text":99},{"id":142,"depth":582,"text":143,"children":588},[589,590,591],{"id":146,"depth":579,"text":146},{"id":293,"depth":579,"text":293},{"id":356,"depth":579,"text":356},{"id":371,"depth":582,"text":372,"children":593},[594,595,596,597,598],{"id":375,"depth":579,"text":376},{"id":418,"depth":579,"text":419},{"id":448,"depth":579,"text":449},{"id":471,"depth":579,"text":472},{"id":492,"depth":579,"text":493},{"id":516,"depth":582,"text":517},{"id":536,"depth":582,"text":537},"2025-06","基于 Tauri 2 的桌面端 AI 编码助手 Token 使用监控工具","md",{},true,"\u002Fprojects\u002Ftokenwise-ai-token-monitor",{"title":5,"description":602},"projects\u002Ftokenwise-ai-token-monitor","针对 AI 编码助手（Claude Code \u002F OpenCode）Token 消耗难以追踪的痛点，构建基于 Tauri 2 的桌面监控应用。支持离线日志解析与实时 HTTP 代理双重数据采集，提供可视化仪表盘、API 余额查询与系统托盘集成。","Tauri 2, Vue 3, TypeScript, Rust, Chart.js, TailwindCSS","Ojb-cMqCIz-Ipfbbm34g6R-RnQzCW8TPhhu2zG9nqJY",1780651451869]