# EpeeKit — 前端信息层级与导航流程

> 本文档描述产品**最终形态**的前端信息架构。
> 标注 `[Phase 0]` 的部分表示当前已实现或即将实现；
> 标注 `[Phase 1]`、`[Phase 2]`、`[Phase 3]` 的部分对应方案文档的阶段路线。

---

## 1. 全局导航结构

```
┌─────────────────────────────────────────────────────────────────┐
│  TopNav                                                         │
│  ┌──────┐  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐      │
│  │ Logo │  │ 工作台  │  │ 资源库  │  │ 风格库  │  │ 训练中心│ ... │
│  └──────┘  └────────┘  └────────┘  └────────┘  └────────┘      │
│                                                    ┌──────────┐ │
│                                                    │ 用户菜单  │ │
│                                                    └──────────┘ │
└─────────────────────────────────────────────────────────────────┘
```

### 顶部导航（TopNav）

| 元素 | 说明 |
|------|------|
| Logo / 品牌名 | 点击回到当前项目的工作台 |
| **工作台** | 对话 + 任务 + 高级控制的主工作区域（`/`） |
| **资源库** | 项目级资产浏览、搜索、管理（`/gallery`） |
| **风格库** | 风格集 + 角色库的管理入口（`/styles`）`[Phase 1]` |
| **训练中心** | LoRA 训练任务的管理入口（`/training`）`[Phase 2]` |
| 项目切换器 | 当前项目名 + 下拉切换/新建项目 `[Phase 1]` |
| 用户菜单 | 头像 → 个人信息、记忆查看、设置、退出 |

### 路由总览

| 路由 | 页面 | 阶段 |
|------|------|------|
| `/login` | 登录页 | Phase 0 |
| `/` | 工作台（对话 + 任务 + 控制面板） | Phase 0 |
| `/gallery` | 资源库 | Phase 0 |
| `/styles` | 风格库 | Phase 1 |
| `/styles/[id]` | 风格详情 / 编辑 | Phase 1 |
| `/characters` | 角色库 | Phase 1 |
| `/characters/[id]` | 角色详情 / 编辑 | Phase 1 |
| `/training` | 训练中心（任务列表） | Phase 2 |
| `/training/[id]` | 训练任务详情 | Phase 2 |
| `/settings` | 项目设置 | Phase 1 |

---

## 2. 登录页 `/login`

### 信息内容

- 品牌 Logo + 产品名称
- 用户名输入框
- 密码输入框
- 登录按钮
- 错误提示（用户名/密码错误、网络异常）

### 功能

- 提交登录 → `POST /api/auth/login` → 成功后跳转 `/`
- 已登录状态自动重定向至 `/`
- Token 存 `localStorage`，后续请求带 `Bearer`

### 跳转

| 操作 | 目标 |
|------|------|
| 登录成功 | → `/`（工作台） |
| 已登录访问 | → `/`（自动重定向） |

---

## 3. 工作台 `/`（核心页面）

工作台是产品最核心的界面，采用**三栏布局**。

### 3.1 整体布局

```
┌──────────┬──────────────────────────────┬──────────────┐
│          │                              │              │
│  侧栏     │        对话 + 任务区          │  上下文面板    │
│  Sidebar │        Main Area             │  Context     │
│          │                              │  Panel       │
│          │                              │              │
│          │                              │              │
│          │  ┌────────────────────────┐   │              │
│          │  │      输入区             │   │              │
│          │  └────────────────────────┘   │              │
└──────────┴──────────────────────────────┴──────────────┘
```

---

### 3.2 左侧栏（Sidebar）

#### 3.2.1 会话列表区

| 信息 / 功能 | 说明 |
|-------------|------|
| 新建会话按钮 | 创建空白对话会话 |
| 会话条目 | 缩略图 + 标题 + 最后活动时间 |
| 会话标签 | 每个会话可绑定多标签，标签色块显示 |
| 标签筛选栏 | 顶部标签多选过滤器，只显示匹配会话 |
| 会话三点菜单 | 重命名 / 删除 / LLM 模型切换 / 管理标签 |

#### 3.2.2 项目信息卡 `[Phase 1]`

| 信息 / 功能 | 说明 |
|-------------|------|
| 当前项目名 | 显示当前工作项目 |
| 项目风格缩略图 | 当前绑定的风格集代表图 |
| 快捷入口 | → 风格库 / → 角色库 / → 项目设置 |

#### 3.2.3 侧栏折叠

- 汉堡菜单切换折叠/展开
- 移动端默认折叠，点击展开 + 遮罩覆盖

---

### 3.3 中间区：对话 + 任务区（Main Area）

#### 3.3.1 对话消息流

| 信息 / 功能 | 说明 |
|-------------|------|
| **用户消息气泡** | 文本 + 参考图缩略图（多图） |
| **助手消息气泡** | Markdown 文本 + 生成图片网格 |
| 流式文本 | SSE 流式渲染，逐字显示 |
| 图片网格（ImageGrid） | 候选图缩略图阵列，每张可：点击查看详情 / 下载 / 收藏 |
| 任务说明卡 `[Phase 1]` | Agent 理解到的结构化信息卡，显示：任务类型、风格、角色、输出规格、使用模板 |
| 工具执行状态 | 生图进行中的 Loading 状态、模型名称、进度 |
| 错误提示 | 工具调用失败时的错误信息展示 |
| 复制按钮 | 助手消息 hover 显示复制文本按钮 |
| 回到底部按钮 | 不在底部时浮动箭头，点击平滑滚动 |

#### 3.3.2 任务说明卡（Task Card）`[Phase 1]`

Agent 执行生图前，在对话流中插入一张结构化卡片，展示系统对用户意图的理解：

```
┌─────────────────────────────────────────┐
│  📋 任务说明                              │
│                                         │
│  任务类型：角色立绘（全身）                  │
│  风格：anime_dark_fantasy_v1              │
│  角色：剑士·艾丽卡                         │
│  输出规格：1024×1536 · 透明背景可选          │
│  模板：character_consistent_v1            │
│  候选数：4                                │
│                                         │
│  [ ✏️ 调整参数 ]    [ ▶ 确认生成 ]          │
│                                         │
└─────────────────────────────────────────┘
```

| 功能 | 说明 |
|------|------|
| 调整参数 | 展开编辑各字段，或打开右侧上下文面板的高级控制 |
| 确认生成 | 按当前参数执行生成 |
| 自动执行 | 模式 A 下用户不需要确认，Agent 自动执行 |

#### 3.3.3 输入区（ChatInput）

| 信息 / 功能 | 说明 |
|-------------|------|
| 文本输入框 | 多行输入，Enter 发送，Shift+Enter 换行 |
| 参考图上传 | 点击按钮选图 / 拖拽到整个对话区域 / 粘贴图片 |
| 参考图预览 | 已上传参考图缩略图列表（多图），可单独删除 |
| 参考图沿用提示 | 上次发送的参考图可沿用，显示提示条 + 可清除 |
| 生图模型选择器 | 下拉选择当前生图模型（Flux / SDXL / GPT Image 等） |
| 风格快选 `[Phase 1]` | 快捷选取当前风格，不用打字描述 |
| 角色快选 `[Phase 1]` | 快捷选取当前角色 |
| 资产规格快选 `[Phase 2]` | 选择输出类型（Icon / 立绘 / 场景等），自动套用规格 |
| 发送按钮 | 涟漪动画反馈 |

---

### 3.4 右侧栏：上下文面板（Context Panel）

右侧面板**默认收起**，用户可通过以下方式唤出：

- 点击图片网格中的某张图 → 打开**图片详情**
- 点击任务说明卡的"调整参数" → 打开**高级控制**
- 手动点击展开按钮

#### 3.4.1 图片详情模式（Image Detail）

| 信息 / 功能 | 说明 |
|-------------|------|
| 大图预览 | 缩放、平移查看 |
| Prompt 信息 | 生成时使用的提示词，可复制 |
| 模型信息 | 生成该图使用的模型名称 |
| 元数据 | 分辨率、生成时间、风格 ID、角色 ID |
| 下载 | 原图下载 |
| 收藏 | 收藏/取消收藏 |
| 删除 | 从资源库移除 |
| 标注（Annotation） | 进入标注画布：矩形 / 箭头 / 自由画笔 / 文字 |
| 标注回流 | 标注完成后将标注数据和截图回流到对话输入，辅助修改描述 |
| 以此为基础修改 | 将此图设为下一轮对话的参考图 |
| 局部编辑（Inpaint）`[Phase 1]` | 框选区域 + 描述修改意图，局部重绘 |

#### 3.4.2 高级控制模式（Advanced Control）`[Phase 1]`

| 信息 / 功能 | 说明 |
|-------------|------|
| Task IR 预览 | 当前任务的结构化 JSON 预览（只读或可编辑） |
| 模板选择器 | 从 Pipeline Registry 中选择/切换工作流模板 |
| 参数面板 | 模板暴露的可调参数（分辨率、候选数、一致性级别、控制类型等） |
| 结构控制图输入 | 上传 Pose / Canny / Depth 控制图 |
| 风格约束 | 当前绑定的风格集，可临时覆盖 |
| 角色约束 | 当前绑定的角色参考组，可临时覆盖 |
| 成本预估 | 当前参数下的预估成本/时间 |
| 应用 | 将调整后的参数应用到当前任务 |

#### 3.4.3 候选评估面板 `[Phase 2]`

| 信息 / 功能 | 说明 |
|-------------|------|
| 候选图排列 | 所有候选图并排对比 |
| 评分信息 | 语义匹配 / 风格相似度 / 角色一致性 / 规则检查 各项评分 |
| 自动推荐 | 系统推荐的最佳候选高亮 |
| 人工确认 | 用户选择采纳哪张，或全部重试 |
| 局部修补入口 | 对候选图做局部修补后再确认 |

---

## 4. 资源库 `/gallery`

### 4.1 整体布局

```
┌─────────────────────────────────────────────────────────┐
│  TopNav                                                 │
├──────────┬──────────────────────────────────────────────┤
│  筛选栏   │                                              │
│          │          资产网格 / 列表                       │
│  Filter  │          Asset Grid                          │
│  Panel   │                                              │
│          │                                              │
│          ├──────────────────────────────────────────────┤
│          │          资产详情（选中时）                      │
│          │          Asset Detail                        │
└──────────┴──────────────────────────────────────────────┘
```

### 4.2 筛选栏（Filter Panel）

| 筛选维度 | 说明 |
|----------|------|
| 搜索框 | 按 Prompt 文本 / 语义搜索 `[Phase 2: 语义搜索]` |
| 标签筛选 | 多标签 AND/OR 过滤 |
| 资产类型 | 角色立绘 / 道具 / 场景 / Icon / 参考图 / 控制图 等 |
| 收藏过滤 | 只看已收藏 |
| 模型筛选 | 按生成模型过滤 |
| 风格筛选 `[Phase 1]` | 按风格集过滤 |
| 角色筛选 `[Phase 1]` | 按角色过滤 |
| 日期范围 | 按生成时间过滤 |
| 来源会话 | 按生成时所在会话过滤 |

### 4.3 资产网格

| 信息 / 功能 | 说明 |
|-------------|------|
| 缩略图 | 预览图，hover 显示基本信息 |
| 网格/列表切换 | 视图模式切换 |
| 排序 | 按时间 / 名称 / 收藏 排序 |
| 多选 | Checkbox 多选 → 批量下载 / 批量删除 / 批量打标签 |
| 拖拽选区 `[Phase 1]` | 框选多张资产 |

### 4.4 资产详情（选中某张图时）

复用工作台的图片详情组件，额外增加：

| 信息 / 功能 | 说明 |
|-------------|------|
| 来源信息 | 来自哪个会话、哪次对话 |
| 所属项目 `[Phase 1]` | 归属项目 |
| 标签编辑 | 添加/移除标签 |
| 版本历史 `[Phase 1]` | 该资产的编辑/修改版本链 |
| 导出 | 按规格导出（多尺寸 @1x @2x @3x）`[Phase 2]` |
| 发送到工作台 | 将此图作为参考图发送回对话输入 |

### 4.5 跳转关系

| 操作 | 目标 |
|------|------|
| 点击缩略图 | → 展开资产详情（右侧面板或 Modal） |
| "发送到工作台" | → `/`（工作台），自动填充为参考图 |
| 点击"来源会话" | → `/`（工作台），切换到对应会话 |
| 资产详情中"标注" | → 进入标注画布 |

---

## 5. 风格库 `/styles` `[Phase 1]`

### 5.1 风格库列表页

```
┌─────────────────────────────────────────────────────────┐
│  TopNav                                                 │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐   │
│  │ 风格卡片  │  │ 风格卡片  │  │ 风格卡片  │  │ + 新建   │   │
│  │         │  │         │  │         │  │         │   │
│  │ 代表图   │  │ 代表图   │  │ 代表图   │  │         │   │
│  │ 名称    │  │ 名称    │  │ 名称    │  │         │   │
│  │ 标签    │  │ 标签    │  │ 标签    │  │         │   │
│  │ 使用次数 │  │ 使用次数 │  │ 使用次数 │  │         │   │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘   │
│                                                         │
└─────────────────────────────────────────────────────────┘
```

| 信息 / 功能 | 说明 |
|-------------|------|
| 风格卡片 | 代表图（风格参考集首图） + 名称 + 标签 + 使用计数 |
| 分类筛选 | 按标签分类（写实 / 二次元 / 像素 / 水墨 / 赛博 等） |
| 来源筛选 | 平台预设 / 项目自建 / 社区共享 |
| 新建风格 | → 进入风格编辑页 |
| 搜索 | 按名称/标签搜索 |

### 5.2 风格详情/编辑页 `/styles/[id]`

| 信息 / 功能 | 说明 |
|-------------|------|
| 风格名称 | 可编辑 |
| 风格描述 | 文字描述 + 关键词标签 |
| **风格参考集** | 3-10 张代表该风格核心特征的参考图，可增删替换 |
| 风格 LoRA | 绑定的 LoRA 模型（如有）`[Phase 2]` |
| 风格 Embedding | 自动计算的风格向量表示 `[Phase 2]` |
| Prompt 模板 | 该风格关联的正向/负向 Prompt 模板 |
| 预览效果 | 使用该风格生成的历史图片（从资源库自动聚合） |
| 使用统计 | 被多少会话/任务引用过 |
| Fork 来源 | 如果是从官方模板 Fork 的，显示来源 |
| 操作 | 应用到当前会话 / 复制 / Fork / 删除 |

### 5.3 跳转关系

| 操作 | 目标 |
|------|------|
| 点击风格卡片 | → `/styles/[id]`（风格详情） |
| "应用到当前会话" | → `/`（工作台），注入该风格到当前会话上下文 |
| "新建风格" | → `/styles/new`（风格编辑页） |
| "训练风格 LoRA" | → `/training/new?type=style&source=[id]` `[Phase 2]` |

---

## 6. 角色库 `/characters` `[Phase 1]`

### 6.1 角色库列表页

与风格库类似的卡片式布局。

| 信息 / 功能 | 说明 |
|-------------|------|
| 角色卡片 | 头像图 + 名称 + 简要描述 + 所属项目 |
| 分类 | 按项目分组，或自定义标签分类 |
| 新建角色 | → 进入角色编辑页 |
| 搜索 | 按名称/描述搜索 |

### 6.2 角色详情/编辑页 `/characters/[id]`

| 信息 / 功能 | 说明 |
|-------------|------|
| 角色名称 | 可编辑 |
| 角色描述元数据 | 性别、年龄范围、体型、性格关键词、背景故事摘要 |
| **角色参考组** | 多角度参考图集合：正面 / 半侧面 / 半身 / 表情变化 / 关键服饰细节 |
| 关键视觉要素 | 标注角色的识别性特征（发色、瞳色、标志性饰品、武器等） |
| 角色 LoRA | 绑定的 LoRA 模型（如有）`[Phase 2]` |
| 生成历史 | 使用该角色生成的所有图片（从资源库自动聚合） |
| 一致性级别 | 默认一致性要求（高/中/低） |
| 操作 | 应用到当前会话 / 复制 / 删除 |

### 6.3 跳转关系

| 操作 | 目标 |
|------|------|
| 点击角色卡片 | → `/characters/[id]`（角色详情） |
| "应用到当前会话" | → `/`（工作台），注入该角色到当前会话上下文 |
| "新建角色" | → `/characters/new`（角色编辑页） |
| "训练角色 LoRA" | → `/training/new?type=character&source=[id]` `[Phase 2]` |
| 参考图中某张图 | → 图片详情面板 |

---

## 7. 训练中心 `/training` `[Phase 2]`

### 7.1 训练任务列表页

```
┌─────────────────────────────────────────────────────────┐
│  TopNav                                                 │
├─────────────────────────────────────────────────────────┤
│  [ + 新建训练任务 ]                                       │
│                                                         │
│  ┌───────────────────────────────────────────────────┐  │
│  │ 任务名称        类型      状态      进度   创建时间  │  │
│  ├───────────────────────────────────────────────────┤  │
│  │ 暗黑幻想风格v2   风格LoRA  训练中    67%   04-16   │  │
│  │ 剑士·艾丽卡v1   角色LoRA  已完成    100%  04-15   │  │
│  │ 水墨武侠v1      风格LoRA  排队中    —     04-16   │  │
│  │ 枪手·马克v1     角色LoRA  已失败    —     04-14   │  │
│  └───────────────────────────────────────────────────┘  │
│                                                         │
└─────────────────────────────────────────────────────────┘
```

| 信息 / 功能 | 说明 |
|-------------|------|
| 任务列表 | 名称 + 类型 + 状态（排队/训练中/已完成/已失败/已弃用）+ 进度 + 时间 |
| 状态筛选 | 按状态过滤 |
| 新建训练任务 | → 训练向导流程 |
| 点击某任务 | → 训练任务详情页 |

### 7.2 新建训练任务（向导流程）

分步引导，降低用户门槛：

| 步骤 | 内容 |
|------|------|
| **Step 1: 选择类型** | 风格 LoRA / 角色 LoRA |
| **Step 2: 选择来源** | 从风格库/角色库中选择（自动带入参考组），或从资源库批量选图 |
| **Step 3: 审核训练集** | 展示所有候选图，自动质量检查（模糊 / 低分辨率 / 重复标记），用户确认/剔除 |
| **Step 4: 选择模板** | 选择训练模板（SDXL LoRA / Flux LoRA 等），显示推荐参数 |
| **Step 5: 确认并提交** | 汇总信息 + 成本预估 → 提交训练 |

### 7.3 训练任务详情页 `/training/[id]`

| 信息 / 功能 | 说明 |
|-------------|------|
| 基本信息 | 名称、类型、来源风格/角色、创建时间 |
| 训练状态 | 进度条 + 当前 Step / Epoch |
| 训练日志 | 实时日志输出（可折叠） |
| 训练集预览 | 使用的图片缩略图列表 |
| **训练结果对比** | 训练前后的效果对比（同一 Prompt 下的生成对比图） |
| 模型版本 | 版本号 + 可设为当前使用版本 |
| 操作 | 使用该模型 / 回滚到上一版本 / 弃用 / 重新训练 |

### 7.4 跳转关系

| 操作 | 目标 |
|------|------|
| "使用该模型" | → `/`（工作台），自动绑定该 LoRA 到当前会话 |
| "查看来源风格" | → `/styles/[id]` |
| "查看来源角色" | → `/characters/[id]` |
| 训练集中某张图 | → 图片详情面板 |

---

## 8. 项目设置 `/settings` `[Phase 1]`

| 信息 / 功能 | 说明 |
|-------------|------|
| 项目名称 | 可编辑 |
| 项目描述 | 项目简介、类型（2D RPG / 横版动作 / 卡牌 等） |
| 默认风格 | 项目级默认风格集绑定 |
| 默认输出规格 | 项目级默认分辨率、背景要求等 |
| 约束规则 | 项目级约束（如：只能使用指定风格、候选数上限、成本限制等） |
| 成员管理 `[Phase 3]` | 团队成员和权限 |
| 导出设置 | 默认导出格式、命名规则 |
| 危险区 | 归档项目 / 删除项目 |

---

## 9. 用户菜单（全局右上角下拉）

| 信息 / 功能 | 说明 |
|-------------|------|
| 用户名 + 头像 | 当前登录用户 |
| 个人信息 | 打开个人信息弹窗 |
| 记忆查看 | 打开 Mem0 记忆列表弹窗（按时间分组，只读） |
| 全局设置 `[Phase 2]` | API Key 配置、界面偏好、通知设置 |
| 退出登录 | 清除 Token，跳转 `/login` |

---

## 10. 完整导航流程图

```
                              ┌──────────┐
                              │  /login  │
                              └────┬─────┘
                                   │ 登录成功
                                   ▼
                    ┌──────────────────────────────┐
                    │         /  (工作台)            │
                    │                              │
                    │  ┌────────┐ ┌──────────────┐ │
                    │  │ 侧栏    │ │ 对话 + 任务区  │ │
                    │  │        │ │              │ │
                    │  │ 会话列表 │ │  消息流       │──── 点击生成图 ──→ 右侧面板：图片详情
                    │  │        │ │              │              │
                    │  │ 项目卡片 │ │  任务说明卡   │──── 调整参数 ──→ 右侧面板：高级控制
                    │  │        │ │              │              │
                    │  │        │ │  输入区       │              │
                    │  │        │ │  · 风格快选  ─┼──── 更多风格 ──→ /styles
                    │  │        │ │  · 角色快选  ─┼──── 更多角色 ──→ /characters
                    │  └────────┘ └──────────────┘              │
                    └──────────────┬───────────────────────────-┘
                                   │
                     ┌─────────────┼──────────────────┐
                     │             │                  │
                     ▼             ▼                  ▼
              ┌────────────┐ ┌──────────┐     ┌──────────────┐
              │  /gallery   │ │  /styles  │     │ /characters  │
              │  资源库      │ │  风格库   │     │  角色库       │
              │             │ │          │     │              │
              │  筛选+网格   │ │  卡片列表  │     │  卡片列表     │
              │             │ │          │     │              │
              │ 发送到工作台 ─┼→│ 应用到会话─┼→    │ 应用到会话 ──┼→ 回到 /
              │ 查看来源会话 ─┼→│ 训练LoRA ─┼→    │ 训练LoRA ───┼→ /training/new
              └──────┬─────┘ └─────┬────┘     └──────┬───────┘
                     │             │                  │
                     │             ▼                  ▼
                     │      ┌─────────────┐   ┌─────────────────┐
                     │      │/styles/[id]  │   │/characters/[id] │
                     │      │ 风格详情/编辑 │   │ 角色详情/编辑    │
                     │      └─────────────┘   └─────────────────┘
                     │
                     ▼
              ┌──────────────┐
              │  /training    │
              │  训练中心      │
              │               │
              │  任务列表      │
              │  新建→向导流程  │
              │               │
              └──────┬───────┘
                     │
                     ▼
              ┌──────────────────┐
              │ /training/[id]   │
              │ 训练任务详情      │
              │                  │
              │ 使用该模型 → 回到 / │
              └──────────────────┘
```

---

## 11. 跨页面数据流转总结

以下是各页面之间的数据流转关系，说明资产和上下文如何在页面间传递：

| 起点 | 动作 | 终点 | 携带数据 |
|------|------|------|----------|
| 工作台 | 生成图片并沉淀 | 资源库 | `ImageAsset` 自动入库 |
| 资源库 | "发送到工作台" | 工作台 | 图片 URL 填入参考图输入 |
| 资源库 | "查看来源会话" | 工作台 | 切换到对应 `sessionId` |
| 工作台输入区 | "更多风格" | 风格库 | 当前项目 ID 作为筛选条件 |
| 风格库 | "应用到当前会话" | 工作台 | `styleId` + Prompt 模板 + 参考集注入会话上下文 |
| 风格库 | "训练风格 LoRA" | 训练中心 | 风格 ID + 参考集作为训练源 |
| 角色库 | "应用到当前会话" | 工作台 | `characterId` + 参考组注入会话上下文 |
| 角色库 | "训练角色 LoRA" | 训练中心 | 角色 ID + 参考组作为训练源 |
| 训练中心 | "使用该模型" | 工作台 | LoRA 模型 ID 绑定到当前会话 |
| 训练中心 | "查看来源" | 风格库/角色库 | 跳转到对应风格/角色详情 |
| 工作台（标注） | 标注完成 | 工作台输入区 | `AnnotationData` + snapshot 回流到 Prompt |
| 工作台（高级控制） | 调整 Task IR 参数 | 工作台对话流 | 更新后的 Task IR → 执行生成 |

---

## 12. 响应式策略

| 设备 | 布局适配 |
|------|----------|
| **桌面（≥1280px）** | 三栏布局完整展开：侧栏 + 对话区 + 右侧面板 |
| **平板（768-1279px）** | 侧栏可折叠，右侧面板改为 Overlay 浮层 |
| **手机（<768px）** | 侧栏抽屉式，右侧面板改为全屏 Modal，底部 Tab 导航替代顶部导航 |

### 手机端底部 Tab 导航

```
┌────────┬────────┬────────┬────────┐
│  对话   │ 资源库  │ 风格库  │  更多   │
└────────┴────────┴────────┴────────┘
```

"更多"展开：训练中心 / 项目设置 / 个人信息

---

## 13. 三层交互模式对照

方案文档定义了三层使用模式，对应到 UI 的映射：

| 模式 | 用户类型 | UI 表现 |
|------|---------|---------|
| **模式 A：自然语言驱动** | 普通用户 | 只看到对话区和输入框，Agent 自动处理一切，任务说明卡自动确认 |
| **模式 B：引导式修订** | 中级用户 | 对话区 + 任务说明卡可展开查看，自然语言修改后 Agent 自动映射参数 |
| **模式 C：高级控制** | 专业用户 | 右侧面板展开高级控制，可直接编辑 Task IR、切换模板、上传控制图 |

用户不需要显式"切换模式"——三层是**渐进式暴露**的：

1. 默认只看到对话框 → 模式 A
2. 想了解 Agent 在做什么 → 点开任务说明卡 → 模式 B
3. 想精细控制 → 点开高级控制面板 → 模式 C

---

## 14. Phase 0 → 最终形态的演进路径

| 阶段 | 新增页面 / 模块 | 关键变化 |
|------|----------------|----------|
| **Phase 0** | `/login`、`/`（对话+图片详情+标注）、`/gallery` | 当前状态：对话生图 + 资源库 + 用户系统 |
| **Phase 1** | `/styles`、`/characters`、`/settings`；工作台增加任务说明卡 + 高级控制面板 + 输入区快选 | 引入项目概念、风格系统、角色系统、Task IR 可视化 |
| **Phase 2** | `/training`；资源库增加语义搜索和多尺寸导出；工作台增加候选评估面板 | 训练能力产品化、评估层可视化、资产规格系统 |
| **Phase 3** | 扩展 3D / 动画 / 音频的任务类型和资产类型 | 工作台支持新任务类型，资源库支持新资产类型，训练中心支持新模型类型 |