opencodex 配额用量 UI 重构：PR139 中 QuotaBars 行模型、窗口排序与重置文案的实现解析

【免费下载链接】opencodexUniversal provider proxy for OpenAI Codex Claude Code — use any LLM (Claude, Gemini, Grok, DeepSeek, Ollama…) with Codex CLI, App, SDK, and Claude Code项目地址https://gitcode.com/gh_mirrors/ope/opencodex点击查看免费下载本文基于 opencodex 仓库 devlog 中WP070PR #139 quota rows and usage UI的实现规划结合gui/src/components/QuotaBars.tsx、gui/src/codex-quota-utils.ts、gui/src/styles/provider-quota.css与tests/gui/quota-bars-rows.test.ts等源码完整讲解配额条组件从单条模糊进度条重构为带来源与重置元数据的有界行模型的过程包括基于 RAW 窗口标识的排序、计划归一化、未来导向的本地化重置文案以及对应的测试与验证方法。读者读完可获得该功能模块完整的实现原理与可复现的验证命令。背景WP020 配额合约与旧 QuotaBars 的缺陷WP070 是 PR139 栈式改造中的一个子任务其上级工作项WP020为配额数据定义了归一化后的AccountQuota合约见 codex-quota-utils.ts其中新增了fiveHourPercent/fiveHourResetAt字段Codex 账户 API 与本地快照对同一五小时突发窗口的别名short*被合并。当时这两个字段没有消费者——WP070 的buildQuotaRows正是这个迟到的消费者与 WP020 审计时的预测一致。旧版 QuotaBars 仅 76 行渲染单条横条与含义模糊的重置信息WP070 将其重写为约 300 行的组件遵循既定决策渲染 WP020 归一化合约提供的内容UI 层不做业务判断。改造的前后对比是Before单条 bar / 歧义的重置时间After有界的行模型bounded row model每行携带窗口来源windowKey / customLabel与重置元数据resetAt。文档中还记录了一个工程约束本次提交P-amendment2026-07-17直接落在devdaa4669b上且本次改动的关注范围Ledger scope严格限定为QuotaBars.tsx 配额重置/信用测试Providers.tsx中配额抓取相关代码归属 WP040/WP090本子任务不触碰。buildQuotaRows先按 RAW 标识排序再做本地化重写后的核心是buildQuotaRowsQuotaBars.tsx。它把归一化后的配额拆解为一组有排名的QuotaBarRow再按排名输出QuotaBarRow定义如下export type QuotaWindowKey fiveHour | weekly | monthly; export type QuotaBarRow { windowKey?: QuotaWindowKey; customLabel?: string; label: string; // 本地化后的展示标签 limitLabel: string; // 本地化后的限额标签 percent: number; resetAt?: number; };A-audit 修正Rank BEFORE localization初版源码存在一个易碎的缺陷quotaWindowRank对翻译后的标签做字符串匹配例如猜测 5-stunden、자사、官方 这类译文一旦某个 locale 改文案就会失效。审计claude-fable-5要求修正为两步流程用 RAW 窗口身份计算排名——五小时/周/月三个标准槽位拥有内在排名自定义窗口按其 RAW 线上标签排名5h→0、First-party models→2、API usage→3、Total subscription credits→4.5其余→5再对展示标签做本地化——彻底丢弃基于已翻译字符串的启发式判断。源码中的rawCustomWindowRankQuotaBars.tsx与localizeCustomQuotaLabelL55-L66正是这一决策的直接体现。排序逻辑上窗口越短越靠前因此典型顺序为5 小时 → 每周 → cursor 一方模型 → cursor API → 每月 → 订阅信用额度 → 其余自定义窗口。五大行来源与去重buildQuotaRows依次处理五类来源fiveHour 行rank 0当fiveHourPercent为 number 时输出标签来自codexAuth.fiveHour限额来自quota.fiveHourLimitweekly 行rank 1weeklyPercent存在时输出monthly 行rank 4monthlyPercent存在时输出customWindows 行遍历归一化合约中的customWindowscanonicalCustomWindowLabel把 TOTAL SUBSCRIPTION CREDITS 这类带空白/大小写差异的原始标签规整为规范身份Total subscription creditscreditsUsd 行当存在creditsUsd.percent且自定义窗口没有包含规范化的订阅信用额度标签时补充渲染订阅信用额度行rank 4.5位于 monthly 之后、其余自定义窗口之前resetAt取creditsUsd.expiresAt。订阅信用的规范化身份SUBSCRIPTION_CREDITS_LABEL还用于两处覆盖判定isCustomQuotaWindowIncompleteL43-L53让 overview 视图的部分覆盖徽标quota-window-partial能跨原始标签匹配maxQuotaUtilisation则保证直接信用与自定义窗口不重复计入。计划归一化normalizeQuotaForPlanbuildQuotaRows第一步调用normalizeQuotaForPlancodex-quota-utils.ts普通计划把shortPercent/shortResetAt别名折叠为fiveHourPercent/fiveHourResetAt后原样返回五小时行正常渲染30 天计划plan为go或free见isThirtyDayOnlyPlan有意剥离五小时与周窗口仅保留monthlyPercent/monthlyResetAt、creditsUsd、resetCredits与updatedAt——因此三十天计划不显示五小时行是正确的预期行为测试 quota-bars-rows.test.ts 验证了go/free下仅输出 monthly 与订阅信用两行。maxQuotaUtilisation跨窗口最大利用率maxQuotaUtilisationQuotaBars.tsx供 WP090 的提供商排序消费取 fiveHour/weekly/monthly 与全部自定义窗口以及未重复的creditsUsd.percent的最大值用于按紧迫程度给提供商排序。混合/缺省值语义配额为null或空对象 → 返回-1表示不可用订阅信用窗口已以自定义窗口形式出现时直接creditsUsd不计入重复值测试见 L200-L208。展示层细节最小可见宽度、告警与耗尽阈值三个展示级函数均只影响显示、不涉及路由属审计中明确记录的有依据判断 TAKEs函数行为阈值/边界设计意图barWidth钳制在 0–1000返回 0否则最低 41% → 4%最小可见宽度0–2% 的微小用量不至于隐形但 0 保持 0isQuotaExhaustedpercent 99.5判定耗尽99.5展示层边界四舍五入后 100% 不代表真耗尽取 99.5 折衷isQuotaWarnthreshold 0 percent threshold阈值传 0 即完全禁用告警由调用方决定告警阈值quotaBarTone组合二者warn 或 exhausted 都映射为bar-warn琥珀色否则bar-green。测试 quota-bars-rows.test.ts 用边界用例锁定了这些规则barWidth(1)4、barWidth(0)0、isQuotaExhausted(99.4)false、isQuotaExhausted(99.5)true、isQuotaWarn(100,0)false、quotaBarTone(99.5,0)bar-warn。此外QuotaBars支持pending占位模式配额仍为 null 时先保留行槽位避免数据填充后页面下移并区分compact经典单行与stackedoverview 卡片两种布局——stacked 布局的骨架屏与完整行分别由quota-stacked-row--skeleton与quota-stacked-row驱动。本地化bcp47 映射与未来导向的重置文案语言环境与键面bcp47QuotaBars.tsx把内部Localeen/de/fr/ko/zh/zh-TW/ru/ja/tr/vi映射为Intl可用的区域标签如zh-TW、ja-JP。重写消费的新quota.*键见 en.ts包括限额标签quota.fiveHourLimit5-hour limit、quota.weeklyLimitWeekly limit、quota.monthlyLimit30-day limit、quota.cursorFirstPartyFirst-party models、quota.cursorApiUsageAPI usage、quota.totalSubscriptionCredits用量与状态quota.usedPercent{pct}% used、quota.limitReachedLimit reached重置文案quota.resetsToday、quota.resetsTomorrow、quota.resetsAt、quota.resetsRelativeMinutes、quota.resetsRelativeHours。这些键同时维护在 en/de/fr/ja/ko/ru/tr/vi/zh/zh-TW 等多语言文件中如 de.ts 的 5-Stunden-Limit、Wochenlimit、Zurücksetzung heute um {time}文档也要求codexAuth.fiveHour等基础键同步到位。formatResetFuture面向未来的重置文案formatResetFutureQuotaBars.tsx是重置文案的核心采用未来导向措辞分支如下明天dayDiff 1→quota.resetsTomorrowResets tomorrow at {time}分钟级minutes 60→quota.resetsRelativeMinutesResets in {n} min小时级hours 12且同一天→quota.resetsRelativeHoursResets in {n} h今天同一天但已过 12 小时相对窗口→quota.resetsToday绝对日期更远→quota.resetsAt跨年时自动附上年份date.getFullYear() ! nowDate.getFullYear()时在Intl.DateTimeFormat中加入year: numeric已过去的时间戳回退到绝对形式无效输入undefined、NaN、超出 Date 范围返回空串。配套的formatObservedAgeL222-L229按分钟/小时/天分桶输出数据已观测多久低于一分钟或未观测时不渲染用于被动观测的配额数据是真实请求的副产物、无刷新机制时避免把几天前的读数表现得像实时数据。两个函数都先用resetDateL442-L448把秒级或毫秒级的 epoch 归一化并拒绝超出 JS Date 范围的值。测试 quota-bars-rows.test.ts 以固定时间 2026-07-17 12:00 为基准锁定了全部分支30 分钟→minutes、3 小时→hours、当天 23:59→today、次日→tomorrow、下周→绝对日期、次年→带 2027 年份以及秒级 epoch 自动归一化。样式provider-quota.css新增样式文件 provider-quota.css 只添加配额/用量相关的选择器不重复已有的 compact 类bar-warn扁平琥珀色非渐变——数据条用渐变色被视为AI 味并违反平面语法 FE-GRADIENT-02warn 与琥珀色标签/数值色调一致quota-row--warn/quota-val--warn/quota-stacked-used--warn告警态文字与数值quota-stacked*系列overview 卡片布局、骨架屏、quota-window-partial部分覆盖徽标、quota-stacked-limit-reached耗尽提示container quota-compact (max-width: 440px)窄卡片内长订阅标签换行为独立行避免溢出。测试与验证覆盖所有条件激活分支文档要求新增独立的tests/gui/quota-bars-rows.test.ts而不是塞进provider-quota.test.ts用例清单与实现一一对应five-hour-only / weekly-only各渲染单行L24-L29双窗口排序5h → weekly → cursor 池 → monthly 的顺序断言L31-L48Anthropic 原始 5h 自定义窗口即使与标准 weekly 并存也排第一L50-L56不可用配额null/ 空对象 →[]L169-L181自定义窗口本地化映射First-party models→quota.cursorFirstParty、API usage→quota.cursorApiUsage未知标签保留原文并排最后maxQuotaUtilisation混合/缺省值、订阅信用去重、null → -1formatResetFuture 分支today/tomorrow/minutes/hours/dateyear/past/invalid 全分支边界补充按审计要求percent 0 → barWidth 0、percent 1 → min 4、99.5边界、threshold 0禁用 warn、混合自定义标准窗口排序、过去日期分支。同时扩展tests/gui/rate-limit-reset-credits.test.ts与tests/gui/provider-quota.test.ts覆盖缺省与双窗口用例若 bar JSX 断言漂移同步校验源码读取。验证命令、GUI QA 与回滚WP070 的完整验证流程在仓库根目录执行bun test tests/gui/rate-limit-reset-credits.test.ts tests/gui/provider-quota.test.ts tests/gui/quota-bars-rows.test.ts bun run --cwd gui lint bun run --cwd gui build git diff --checkGUI 运行时 QA 按006_gui_qa_protocol.md执行设置WP_ID070 ROUTE#providers覆盖 five-hour / weekly / dual-window / unavailable 四个状态并在evidence/WP070/state.md保存结果与截图 JSON运行时 GUI QA 在 WP100 统一收口属既定裁决。回滚策略配额 UI 可整体回退而 WP020 的线上合约保持向后兼容——即数据层不受影响UI 层独立可逆这是栈式改造中显示层与合约解耦的关键保障。小结WP070 展示了 opencodex 在 GUI 侧处理多供应商配额的一个完整范式以 WP020 归一化合约AccountQuota为唯一数据源UI 只负责渲染合约提供的内容排序基于 RAW 线上标识而非翻译文本从而在新增 locale 或文案变更时保持稳定重置文案采用未来导向且 bcp47 感知的措辞告警/耗尽阈值作为显式、有记录依据的展示层判断与路由完全解耦。相关实现均可继续在 QuotaBars.tsx、codex-quota-utils.ts、provider-quota.css 与 quota-bars-rows.test.ts 中追踪。赞分享【免费下载链接】opencodexUniversal provider proxy for OpenAI Codex Claude Code — use any LLM (Claude, Gemini, Grok, DeepSeek, Ollama…) with Codex CLI, App, SDK, and Claude Code项目地址https://gitcode.com/gh_mirrors/ope/opencodex点击查看免费下载相关推荐Appium Session Settings 完全指南会话内动态调整测试行为的扩展 APIAppium Session Settings 完全指南会话内动态调整测试行为的扩展 API 导读 Appium 提供了一套名为 Settings设置 的在 Xinference 中使用 minicpm-reranker 模型进行文档重排序在 Xinference 中使用 minicpm reranker 模型进行文档重排序 本篇技术指南聚焦开源推理框架 Xinference 中内置的 minic模型推理服务人工智能大模型本地部署多模态语音Genkit Python 环境搭建与项目初始化实战基于 uv 的完整配置指南Genkit Python 环境搭建与项目初始化实战基于 uv 的完整配置指南 本篇指南以 Genkit Python Setup https://link.上一篇ONNX Runtime ORTModule ModuleWithLoss 包装器在 ORT 内计算损失并启用标签稀疏优化下一篇Opik 隔离子进程执行器IsolatedSubprocessExecutor完全指南环境隔离、并发安全与日志流式收集创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考