---
id: {UI_ID}
title: {UI 流程名称}
status: draft
version: {v1}
related_features: []
---

# {UI_ID}: {UI 流程名称}

<!-- 本模板是插件 starter 指导，项目本地模板可完全覆盖 -->
<!-- 插件模板是入门指导，项目本地模板是权威 -->

## 概述

{描述这个 UI 流程的用途、目标用户和核心交互}

## 基础信息

- **版本**：{version}
- **适用平台**：Web / Desktop / Mobile
- **页面/组件**：{页面或组件名称}
- **入口**：{用户如何进入此流程}

## 用户流程

### 主流程

```
用户操作 → 系统响应 → 下一步
    ↓
[步骤 1] {操作描述}
    ↓
[步骤 2] {系统响应}
    ↓
[步骤 3] {后续操作}
    ↓
[完成] {最终状态}
```

### 分支流程

| 条件 | 分支路径 | 说明 |
|------|---------|------|
| {条件描述} | {分支路径} | {说明} |

## 状态转换

### 状态列表

| 状态 | 描述 | 可转换到 |
|------|------|---------|
| initial | 初始状态 | loading, ready |
| loading | 加载中 | ready, error |
| ready | 就绪状态 | loading, completed |
| error | 错误状态 | loading, ready |
| completed | 完成状态 | - |

### 状态转换图

```
[initial] → [loading] → [ready] → [completed]
                ↓            ↓
            [error] ←--------
```

## 交互元素

### 表单元素

| 元素 | 类型 | 必填 | 验证规则 | 错误提示 |
|------|------|------|---------|---------|
| {字段名} | {input/select/checkbox} | {yes/no} | {验证规则} | {错误提示} |

### 按钮和操作

| 按钮 | 位置 | 行为 | 禁用条件 |
|------|------|------|---------|
| {按钮名} | {位置} | {点击后行为} | {何时禁用} |

### 快捷键

| 快捷键 | 功能 | 适用场景 |
|--------|------|---------|
| {快捷键} | {功能} | {场景} |

## 错误处理

### 错误类型

| 错误类型 | 触发条件 | 用户提示 | 恢复方式 |
|---------|---------|---------|---------|
| 网络错误 | 网络请求失败 | "网络连接失败，请重试" | 重试按钮 |
| 验证错误 | 输入不符合规则 | {字段级错误提示} | 修正输入 |
| 权限错误 | 无操作权限 | "无权限执行此操作" | 联系管理员 |
| 服务器错误 | 后端返回错误 | "服务暂时不可用" | 重试或稍后再试 |

### 错误展示

- **字段级错误**：在对应字段下方显示红色提示
- **页面级错误**：顶部 Toast 或 Alert 组件
- **阻断级错误**：模态对话框，需用户确认

## 可访问性

### ARIA 标签

| 元素 | aria-label | aria-describedby |
|------|-----------|------------------|
| {元素} | {标签} | {描述元素 ID} |

### 键盘导航

- Tab 顺序：{说明 Tab 键导航顺序}
- 焦点管理：{说明焦点如何移动}
- 屏幕阅读器：{说明屏幕阅读器如何播报}

### 视觉设计

- 颜色对比度：符合 WCAG 2.1 AA 标准
- 字体大小：最小 14px
- 点击区域：最小 44x44px

## 响应式设计

| 断点 | 布局调整 | 元素变化 |
|------|---------|---------|
| Desktop (>1200px) | {布局描述} | {元素变化} |
| Tablet (768-1200px) | {布局描述} | {元素变化} |
| Mobile (<768px) | {布局描述} | {元素变化} |

## 性能要求

| 指标 | 目标值 | 测量方式 |
|------|-------|---------|
| 首屏加载 | < {X} 秒 | Lighthouse |
| 交互响应 | < {X} 毫秒 | 用户感知 |
| 动画流畅 | 60fps | DevTools |

## 关联制品

- 功能特性：{related_features}
- 设计文档：{related_designs}
- API 契约：{related_api_contracts}

## 变更日志

| 日期 | 版本 | 变更 | 作者 |
|------|------|------|------|
| {YYYY-MM-DD} | v1 | 初始版本 | {作者} |