设计一个页面,展示每个服务的成功率,如果有clusters,则可以点击,点击后展开各个集群的成功率,其中参数为
我来为你创建一个类似 OpenAI 状态页面的服务成功率展示页面。这个页面会展示每个服务的成功率,如果有集群数据则可以点击展开查看。
我已经为你创建了一个服务状态监控页面,参考了 OpenAI 状态页面的设计风格。页面主要功能包括: 1. **顶部状态横幅** - 根据平均成功率显示系统整体状态(正常/部分异常/故障) 2. **服务列表** - 按请求量排序展示所有服务,每个服务显示名称、类型标签、成功率和状态条 3. **可展开的集群详情** - 如果服务有集群数据,会显示"X 个集群"按钮,点击后展开显示每个集群的详细成功率 4. **底部统计卡片** - 展示服务总数、平均成功率、总请求数和失败请求数 颜色编码规则:绿色表示成功率 ≥99%,黄色表示 95-99%,橙色表示 90-95%,红色表示 <90%。点击任意有集群的服务行即可展开查看集群详情。
页面取消订阅更新和查看历史记录,项目名称展示moduleNameZh,
现在我需要更新三个文件:1) mock-data.ts 添加 moduleNameZh 字段,2) page.tsx 移除订阅和历史按钮,3) service-status-card.tsx 使用 moduleNameZh 显示服务名称。
已完成所有修改:
moduleNameZh 和 moduleNameEn 字段,并更新了类型定义Button、Bell、History 导入service.module 改为 service.moduleNameZh,现在会显示中文名称如"任务服务"、"推理服务"等