# {模块名称} - UI 交互规范

> **module**: {模块名}
> **doc_type**: UISpec
> **status**: Draft / Review / Active
> **owner**: {负责人}
> **upstream_docs**: 01-prd.md, 02-user-journey.md, 04-state-machine.md
> **last_verified**: YYYY-MM-DD
>
> **参考标准**: [设计系统（权威）](../../frontend-main/references/design-system-standards.md)

---

## 页面清单

| 页面 | 路由 | 说明 | 权限 |
|------|------|------|------|
| {页面名} | `/{module}/{path}` | {说明} | {角色} |

---

## 国际化与文案规范

- 所有用户可见文案必须使用 i18n key，不允许硬编码
- 动态内容使用插值，不拼接字符串
- 日期/数字必须本地化格式化

---

## 页面详情

### {N}. {页面名}（`/{module}/{path}`）

**功能描述**: {一句话说明}

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| {元素名} | {类型} | {说明} |

**状态依赖显示模式**（如页面行为随业务状态变化）:

> 当页面在不同业务阶段有不同行为时，用此表格明确。引用 04-state-machine.md 的阶段定义。

| 业务状态 | 显示模式 | 说明 |
|---------|---------|------|
| {如 GOAL_SETTING} | {如 editable} | {如"可编辑 KPI"} |
| {如 COMPLETED} | {如 readonly} | {如"仅查看历史结果"} |

**API 调用**:

> API 调用必须标注状态约束，明确哪个阶段可执行。防止 UI 层绕过状态机。

| 交互 | API | 状态约束 |
|------|-----|---------|
| {操作} | `{apiMethod}` | {如"仅 CALIBRATING 可执行"，或"—"表示无限制} |

---

## 页面状态规范

> 所有页面必须处理以下 4 种状态，不得只实现正常态。

### 加载态

- {加载策略，如"表格使用行级 Skeleton，卡片使用块级 Skeleton"}

### 空数据态

| 页面 | 空数据条件 | 展示内容 |
|------|-----------|---------|
| {页面名} | {条件} | {引导文案 + 操作按钮} |

### 无权限态

| 场景 | 展示方式 |
|------|---------|
| {场景} | {如"菜单不显示"或"403 提示"} |

### 错误态

| 错误类型 | 展示方式 |
|---------|---------|
| {如 API 400} | {如"表单字段级错误提示"} |

### 输入验证规则

| 字段 | 验证规则 |
|------|---------|
| {字段名} | {如"必填，最长 100 字符"} |