2.3 KiB
2.3 KiB
发现与决策
需求
- 参考桌面
codexorbit-1.2.3的功能开发 Vue 版本。 - 使用前端技术和 JavaScript。
- 样式重新设计,不使用原项目图片。
- 最终可构建为 Windows EXE。
原项目发现
- 原项目为 C#、WPF、.NET Framework 4.8、x64 WinExe。
- 读取
%USERPROFILE%\.codex\sessions下的rollout-*.jsonl。 - 从
event_msg/token_count/rate_limits记录提取 primary 与 secondary 时间窗口。 - 5 小时窗口为 300 分钟,周窗口为 10080 分钟。
- 使用文件监听器更新额度;窗口位置写入本地配置文件。
- 不需要服务器或数据库。
组件地图
| 模块 | 单一职责 | 数据契约 |
|---|---|---|
App.vue |
组合应用外壳与额度面板 | 使用 useUsage,向面板传入快照 |
QuotaTile.vue |
以悬浮标签展示单个周期百分比和垂直刻度 | props: value, label, tone |
UsagePanel.vue |
展示双窗口额度、状态与重置时间 | props: snapshot; emit: refresh |
useUsage.js |
管理 IPC 订阅、刷新和演示数据 | 返回只读快照、连接状态和刷新动作 |
| Electron main | 窗口、托盘、日志解析和文件监听 | 通过 usage:snapshot IPC 推送快照 |
| Electron preload | 仅暴露受限桌面 API | getUsage, refreshUsage, onUsage |
视觉方向(第二版)
- “瑞士编辑排版 × 工业仪表”:奶油纸张色、炭黑信息块、朱红和酸绿色功能色。
- 去掉发光圆环,改为大数字、分段刻度和两种材质并置,提升扫读效率。
- 使用纯 CSS 几何元素,不使用图片;保留非对称圆角作为识别特征。
视觉方向(最终精简版)
- 去掉外层卡片、阴影、边框、标题、状态、重置时间与刷新按钮。
- 只保留圆形额度表盘、百分比和
5h/7d标签。 - 5 小时快照已经过期时视为不存在,界面只显示周额度。
- Electron 窗口根据一枚或两枚表盘自动调整宽度,避免透明区域拦截桌面操作。
视觉方向(独立原创版)
- 放弃圆环参考,改为无边框、无阴影的悬浮额度标签。
- 以大号百分比、单色信号点和右侧垂直刻度表达额度,不增加业务文案。
- 周额度使用酸绿色,5小时额度使用珊瑚红;两者存在时并列,不存在时自动收缩。