用量观测控制台

场景模板控制台用量费用观测浅色数据表筛选指标趋势中性色

适用任务

先看同一时间范围的用量与趋势，再按项目进入记录和详情。紧凑筛选、同构指标卡与清晰的数据表，适合费用、请求和资源使用观测。

适合: 用量与请求观测控制台；示例展示总览、项目下钻、记录筛选和详情。业务指标及统计口径由目标项目提供。
主要风险: 数据口径与主题由项目覆盖；没有时间序列时不添加趋势。

体验意图

未标注意图；可按模板正文判断是否适用。

单独使用这个子页面

属于用量与调用观测工作台。本页应用与审核 Prompt 只针对当前子项。

页面衔接

仅在本次采用范围与目标已有关系中使用以下规则。

总览 → 对象详情 → 记录探索 → 请求详情使用目标项目真实的对象与请求标识，保留适用的时间范围、筛选和返回位置。独立借用一个页面时只对接目标已有入口。
请求详情先给结论摘要，再给尝试链、用量费用和原始证据；路由诊断在该详情内解释历史尝试与候选证据，当前配置不能代替历史事实。
账号额度按各自 Provider 与窗口表达；调用费用、订阅额度及临时预算分别保持来源、时间和单位，不能互相推算。预算规划卡片可嵌入已有总览，不要求建立真实预算账本。

这个模板提供什么

复用方式: 按场景调整信息结构与交互；可直接采用默认设计，视觉风格按需另选。
结构与交互: 提供布局与组件说明。
视觉设计: 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
应用后检查: 提供本场景的操作检查。

交互预览

1 个

示例适用范围

用量与请求观测控制台；示例展示总览、项目下钻、记录筛选和详情。业务指标及统计口径由目标项目提供。

参照页面

Vercel AI Gateway · 总览
直接参照 · 真实界面 · 观察于 2026-10-06
指标与趋势布局
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → Overview。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。
Vercel AI Gateway · 预算与费用
直接参照 · 真实界面 · 观察于 2026-10-07
费用分组与时间筛选
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → Budgets & Spend（团队路径 /~/ai-gateway/budgets）。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。

按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。

应用前了解

会改变什么: 将同一范围的指标数值与真实趋势放在同一组卡片中，项目归因紧随指标。
从项目汇总下钻到记录与详情并保留查询；管理操作收进次要入口。
按读者任务选择图表/表格切换、并排或低频展开，使用同一数据集，不将这种布局行为强加给全站风格。
数据条件与适用限制: 需要有明确时间范围和口径的用量汇总；项目下钻需要可传递的项目身份与筛选接口。
趋势需要真实时间序列；没有时采用摘要卡。只有静态展示内容、没有用量或记录的页面不适合此场景。
可在任务授权范围内补充缺失接口或字段；补齐前说明能力缺口，不以示例数据代替产品统计。

应用后的页面

主题

三个控制台场景共享的视觉默认与交互规则；视觉风格仅替换视觉部分，品牌与业务约束由项目保留。；可选：采用控制台基线并保留项目品牌、按项目明确的设计约束调整

布局 · 总览

公共筛选后接随宽度重排的同构指标卡，有序列的指标呈现趋势；项目汇总紧随主要指标，项目链接进入保留筛选上下文的记录页。

布局 · 记录与详情

紧凑筛选与当前范围摘要之后紧接记录视图；次要查询入口放在工具区。主要数据列可扫读，长表局部滚动；详情先回答结果、费用和耗时，再展开技术字段。

组件 · 筛选栏

高频筛选常显，高级筛选折叠；当前选择可见且可清除，加载时保持上下文。

组件 · 指标趋势卡

同一张卡放指标名称、数值、口径和时间趋势；没有时间序列时使用摘要卡，不编造趋势。

组件 · 项目汇总表

项目、费用、请求量与用量沿固定列扫描；整表同一统计范围，行内提供明细入口。

组件 · 记录表与详情

明确区分请求与尝试；行点击或具名按钮打开详情，关闭后回到原记录与筛选位置。

组件 · 同数据图表与表格

趋势或分布需要概览比较与精确查阅时，可在同一卡片用具名分段控件切换图表/表格，两视图共用数据、统计范围、筛选和排序语义。图表突出分布，表格保留完整身份、数值、单位及缺失说明；切换不触发不同口径查询。需要同时对照可并排，低频查阅可展开；不强制所有图表增加切换。窄屏默认保留身份可读与主要读数，宽表局部滚动，切换按钮与当前视图状态可经键盘操作。

组件 · 横向条形排名

需要比较分类贡献时，使用共享零起点和带单位数值刻度的横向柱状图，分类沿纵轴排列，精确数值紧随各自柱末，按所示指标排序。保留具名下钻或详情入口及查询上下文，完整标签与精确读数可在同数据明细中查阅。未知项不冒充零，也不因没有柱长而消失。

组件 · 可折叠日期组

记录适合按日浏览时，标明依据哪个时间字段、哪个时区分组；组标题保留日期、记录数与该组关键总量，未知部分明确标注。收起只隐藏组内记录，不改变统计范围或移除组摘要；展开后仍能打开原记录详情。

项目覆盖

保留项目品牌、技术栈、权限、指标口径和按需加载策略；本次可调整布局、字号、间距与密度。按读者任务采用设计规则，明确记录项目覆盖及理由。

共同设计规则

默认视觉

中性色画布与表面，以轻边线区分层级，阴影用于浮层。主操作有清楚的视觉重点，状态色同时配文字；保留项目品牌色、键盘焦点和可读对比度。
文字按职责分层：页标题24px、区块标题16px、正文及控件14px、辅助信息12px、指标28px；数值等宽对齐。间距、控件和表格采用同一组 tokens；这些是默认值，不是所有网页的合格阈值。
同一项目各页共享字体、间距和控件外观。显式选择其他风格时只替换视觉表达，保持场景的信息优先级、交互和业务语义。

共同交互

页面先回答当前任务：总览给状态与归因，列表给结果，详情给对象结论。管理与采集说明按需展开，影响结论的缺失、过期和错误保持可见。
同一工作区跨页保留产品导航的结构、身份和当前位置；局部筛选属于页面内容区。窄屏沿用产品统一导航方式，列表图表使用可用宽度，表格局部滚动，主要动作仍可达。
常用筛选直接可见，其余放入具名高级筛选。已选条件可见、可单独清除；下钻和返回保留范围。昂贵统计沿项目既有策略按需加载。
表格优先展示对象、结果和可比较数值，长技术标识在详情中完整查看。详情先展示结果与时间摘要；请求诊断按摘要、尝试链、用量费用明细、原始证据递进，摘要可保留已有总耗时与总费用；关闭恢复查询和焦点。
金额保留币种与统计范围，未知、已知零和小额正值可辨。没有数据不生成虚假趋势；真实错误不能作为辅助说明隐藏。
加载时先呈现 URL 中的当前查询与已选条件，选项名称未就绪时保留条件身份；条件可清除、导航可用。已知结果明确所属范围，迟到响应不能覆盖新查询；空结果可清除条件，失败提供适用的恢复入口。按实际改动验证相关状态。

应用后检查

总览先显示指标与趋势，项目或模型归因位于主阅读路径；账号管理不会将它们挤到长操作区之后。
各指标明确自己的时间范围与口径；没有时间序列不画趋势，未知费用不显示为零。
从项目汇总进入记录时保留项目及时间范围，查看详情后能返回同一查询。
采用图表/表格切换时，两视图项目集合、完整数值、单位、未知标记与筛选上下文一致；窄屏和键盘操作可以切换并继续下钻。
排名按所示指标排序，使用共享数值轴、单位刻度与柱末精确读数；分类身份和未知部分可辨，可进入保留条件的记录或详情。
使用日期分组时，收起与展开的组总量一致；分组时间字段及其时区可见，展开后详情与返回可用。

Prompt 模板

1 条

中文默认

## 执行方式

本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

使用 `web-ui-workflows apply-ui-template`，按“用量观测控制台”模板优化目标 Web UI。

本次范围：只采用“用量与调用观测工作台”中的“用量观测控制台”子页面。读取该定义内的 suite_context，共同规则仅在本次目标有对应关系时适用；不因此新增整套页面。

模板：usage-observability-console
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/usage-observability-workspace/sections/usage-observability-console.json
目标仓库：[填写仓库路径]
目标页面：[填写页面 URL 或路由]
读者任务：[填写需要完成的事，可由项目上下文补全]
可选视觉风格：[可留空；指定时填写风格模板 URL]

读取当前定义、设计基线、数据条件和 acceptance，无需访问来源商业网站。按 skill 的合并规则形成或复用本次有效设计，让实现与审核依据同一份规则；另选风格只覆盖视觉表达。保留项目品牌、真实业务口径和已确认约束，将缺少的数据或能力明确处理。

完成适配和实现，已有符合项保留。在目标页面实际阅读和操作本次路径，核验宽窄屏及相关状态，分别报告业务正确、模板符合和视觉交互结果。在目标项目现有记录中保存模板来源及内容摘要、有效规则、调整理由、验证结果及用户反馈；未取得的反馈和未核实项明确标注。

采用图表/表格可选模式时，两视图共享数据与筛选；完整数值、未知含义和下钻上下文保持一致，默认视图由读者任务决定。

采用分类排名时，用带单位刻度的共享数值轴、横向柱和柱末精确读数直接比较，保留排序、完整身份及下钻；采用日期分组时，说明时间字段与时区，收起仍可读出记录数、已知总量及未知部分，展开可继续查看详情。

审核现有页面

只审核，不修改

## 执行方式

本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

使用 `web-ui-workflows review-ui`，按“用量观测控制台”模板审核目标 Web UI。

本次范围：只采用“用量与调用观测工作台”中的“用量观测控制台”子页面。读取该定义内的 suite_context，共同规则仅在本次目标有对应关系时适用；不因此新增整套页面。

模板：usage-observability-console
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/usage-observability-workspace/sections/usage-observability-console.json
目标仓库：[填写仓库路径]
目标页面：[填写页面 URL 或路由]
读者任务：[填写需要完成的事，可由项目上下文补全]
可选视觉风格：[可留空；指定时填写风格模板 URL]

读取当前定义、设计基线、数据条件和 acceptance，无需访问来源商业网站。按 skill 的合并规则形成或复用本次有效设计，让实现与审核依据同一份规则；另选风格只覆盖视觉表达。保留项目品牌、真实业务口径和已确认约束，将缺少的数据或能力明确处理。

本次只审核，不修改。在目标页面实际阅读和操作本次路径，核验宽窄屏及相关状态，分别报告业务正确、模板符合和视觉交互结果。在报告中注明模板来源及内容摘要、有效规则、调整理由、验证结果及用户反馈；未取得的反馈和未核实项明确标注。

采用图表/表格可选模式时，两视图共享数据与筛选；完整数值、未知含义和下钻上下文保持一致，默认视图由读者任务决定。

对采用的分类排名，核对共享数值轴及单位刻度、柱末精确值、排序、完整身份与钻取上下文；对采用的日期分组，核对分组时间字段、时区，以及展开前后仍一致可读的记录数、已知总量与未知部分。