仪表盘

仪表盘是 Claude Code Hub 的主页面，为管理员和普通用户提供系统运行状态的全面概览。页面分为三个主要区域：实时指标面板、统计图表和快速概览卡片。

实时指标面板（仅管理员可见）

页面顶部的实时指标面板展示四个核心运营指标，每 5 秒自动刷新一次：

指标卡片

指标数值变化时会有平滑的动画过渡效果，帮助你直观感知数据变化趋势。

活跃会话列表

指标卡片右侧显示当前活跃的 Session 列表，包括：

• Session 标识
• 使用的用户和 Key
• 当前使用的供应商
• Session 持续时间

点击「查看详情」可跳转至 Session 管理页面查看完整信息。

统计图表

统计图表区域以可视化方式展示用户消费和调用数据的时间分布。

时间范围选择

图表顶部提供四个时间范围选项：

指标切换

图表下方显示两个汇总指标，点击可切换图表显示内容：

• 总成本：选定时间范围内的累计消费金额
• 总调用：选定时间范围内的累计请求次数

图表交互

图表模式切换（多用户时可用）：

• 叠加模式：各用户数据线叠加显示，便于对比
• 堆叠模式：各用户数据堆叠显示，便于查看总量构成

用户筛选（管理员模式）：

• 图例区域支持点击选择/取消选择特定用户
• 「全选」和「清空」按钮快速操作
• 图例按当前指标（成本或调用）的总量降序排列

工具提示：

• 鼠标悬停在图表上可查看具体时间点的详细数据
• 显示每个用户在该时间点的具体数值

数据聚合模式

根据用户角色，图表有三种聚合模式：

快速概览卡片

页面底部显示一组概览卡片，提供快速入口和关键信息摘要。

用户/Key 统计卡片

• 管理员视角：显示系统总用户数和活跃 Key 数量
• 普通用户视角：显示自己拥有的 Key 总数和活跃数量
• 点击可跳转至用户管理页面

今日使用卡片

显示今日的使用统计：

• 今日消费金额
• 今日调用次数
• 点击可跳转至日志页面

最近活动卡片

显示最近使用的 API Key 信息：

• Key 名称
• 最后使用时间（相对时间格式）
• 使用的供应商名称
• 点击可跳转至活跃会话页面

热门模型卡片

显示调用次数最多的前三个模型：

• 模型名称
• 调用次数

热门供应商卡片

显示使用频率最高的前三个供应商：

• 供应商名称
• 使用次数

数据刷新机制

仪表盘采用自动刷新机制确保数据时效性：

所有数据刷新在后台静默进行，不会打断当前操作。

加载体验

仪表盘采用分区加载策略，各区块独立加载，互不阻塞，提供流畅的用户体验。

骨架屏加载

页面首次加载或刷新时，各区块会显示对应的骨架屏，模拟真实内容的布局结构：

骨架屏的布局与真实内容完全一致，避免内容加载完成后的布局抖动。

分区独立加载

仪表盘使用 React Suspense 边界将页面划分为三个独立加载区域：

1. 概览区域（仅管理员）：实时指标和活跃会话
2. 统计区域：时间范围图表和数据可视化
3. 排行榜区域：快速概览卡片

这种设计带来以下优势：

• 渐进式呈现：先加载完成的区块会立即显示，无需等待全部数据
• 错误隔离：单个区块加载失败不影响其他区块正常展示
• 感知性能提升：用户可以更快看到页面框架和部分内容

首次访问提示

如果系统尚未配置模型价格表，首次访问仪表盘时会自动跳转至价格表设置页面。这是因为成本计算依赖价格表数据，请先完成价格表配置后再返回仪表盘。

权限说明