# IT 运营 - UI 交互规范

> **版本**: v0.1  
> **最后更新**: 2026-03-10  
> **维护者**: 前端团队

> **参考标准**: [设计系统（权威）](../../../.agents/skills/frontend-main/references/design-system-standards.md)

---

## ✅ 机器读取区（必填）

### 页面清单

| 页面 | 路由 | 说明 | 状态 |
|------|------|------|------|
| IT 运营首页 | `/it-operations` | 展示 IT 运营可用子能力入口，首期默认进入云费用 | ✅ |
| 云费用总览页 | `/it-operations/cloud-costs` | 展示总费用、厂商卡片、趋势、异常、AI 摘要 | ✅ |
| 云费用分析页 | `/it-operations/cloud-costs/analysis` | 展示维度分析、Top N、对比视图 | ✅ |
| 云费用明细页 | `/it-operations/cloud-costs/bills` | 展示标准化账单明细和导出 | ✅ |
| 云费用 AI 月报页 | `/it-operations/cloud-costs/ai-reports` | 展示 AI 月报和历史版本 | ✅ |
| 云费用预算设置页 | `/it-operations/cloud-costs/budgets` | 展示预算配置和告警阈值 | 🚧 |

### 元素清单（最小）

| 元素 | 类型 | 说明 |
|------|------|------|
| 子能力导航 | 导航卡片/侧边栏 | 展示云费用等 IT 运营能力入口 |
| 账期切换器 | 筛选器 | 选择本月、上月、自定义月份 |
| 总费用卡片 | 指标卡 | 展示本月、上月、环比 |
| 厂商费用卡片 | 指标卡 | 展示各云厂商费用和占比 |
| 趋势图 | 图表 | 展示月度总费用和厂商趋势 |
| 构成图 | 图表 | 展示按产品/项目/账号的分布 |
| 异常列表 | 列表 | 展示异常上涨项和涨幅 |
| AI 摘要卡片 | 文本卡片 | 展示 3-5 条 AI 结论 |
| 明细表格 | 原生表格 | 展示账单明细和筛选结果 |
| 导出按钮 | 按钮 | 导出明细和月报 |

### 交互清单（最小）

| 交互 | 触发 | API | 结果 |
|------|------|-----|------|
| 首页加载 | 进入 IT 运营首页 | GET `/it-operations/capabilities` | 渲染子能力入口 |
| 总览加载 | 进入云费用总览页 | GET `/it-operations/cloud-costs/overview` | 渲染指标卡、趋势图、异常卡片 |
| 账期切换 | 切换月份 | GET `/it-operations/cloud-costs/overview` + GET `/it-operations/cloud-costs/trends` | 刷新整页数据 |
| 维度切换 | 切换厂商/项目/产品 | GET `/it-operations/cloud-costs/breakdowns` | 更新分析图表和排行 |
| 查看明细 | 点击图表/异常项 | GET `/it-operations/cloud-costs/bills` | 跳转明细页并带筛选条件 |
| 生成 AI 月报 | 点击生成 | POST `/it-operations/cloud-costs/ai-reports/generate` | 生成新报告并提示状态 |
| 查看历史月报 | 进入 AI 月报页 | GET `/it-operations/cloud-costs/ai-reports` | 展示历史报告列表 |
| 导出明细 | 点击导出 | POST `/it-operations/cloud-costs/exports/bills` | 生成导出任务或文件 |

### 国际化与文案规范

- 所有用户可见文案必须使用 i18n key，不允许硬编码。
- 金额必须同时支持货币格式化和小数精度控制。
- 时间字段统一显示“数据更新时间”和“账单周期”。
- AI 输出正文可为动态内容，但模块标题、卡片标题、按钮文本必须国际化。

---

## 🧭 人类阅读区（可选）

### 首页与总览布局建议

- IT 运营首页：展示能力导航卡，首期突出“云费用”，其他能力展示“规划中”状态
- 云费用总览页顶部：页面标题、账期选择、数据更新时间、手动同步按钮

- 第一屏：总费用卡片 + 四个厂商卡片
- 第二屏：总趋势图 + 厂商占比图
- 第三屏：异常上涨项 + AI 摘要
- 第四屏：Top N 服务 / 项目排行

### 关键交互原则

- 首页点击“云费用”必须进入总览页。
- 图表点击必须可下钻到明细页。
- 指标卡需要展示本月值、上月值、环比和单位。
- 异常项需提供“为什么被识别为异常”的说明。
- AI 报告页面需展示分析所覆盖的账期和数据范围。
- 明细页必须允许从“总览点击跳转”后自动带入筛选条件。

### 空状态与异常状态

- 未接入任何云账号：展示接入引导和必备权限说明。
- 数据同步中：展示进度状态和最近一次同步时间。
- 账单延迟：展示“账单可能未完全出齐”的提示。
- AI 生成失败：保留上次成功报告，显示失败原因和重试按钮。