shiyong.qin/EPEEAIKit

Fork 0

Files

Nostars Developer 10f9c0061a 小优化，产品愿景，视觉规范，交互和导航大版本

2026-04-16 18:11:35 +08:00

31 KiB

Raw Permalink Blame History

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、切换模板、上传控制图

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

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

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

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

31 KiB Raw Permalink Blame History Unescape Escape