615 lines
31 KiB
Markdown
615 lines
31 KiB
Markdown
# 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 / 动画 / 音频的任务类型和资产类型 | 工作台支持新任务类型，资源库支持新资产类型，训练中心支持新模型类型 |
|