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

docs/art-agent/INFOLAYER.md

@@ -0,0 +1,614 @@
+# 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 / 动画 / 音频的任务类型和资产类型 | 工作台支持新任务类型，资源库支持新资产类型，训练中心支持新模型类型 |

docs/art-agent/UX-STYLE-GUIDE.md

@@ -0,0 +1,417 @@
+# EPEEKit 交互体验指南
+
+> 设计语言：**青绿山水 · 科技幽谷**
+> 核心意境：深山幽谷中的科技圣地 — 自然的宁静与数字的精密共存
+> 更新日期：2026-04-16
+
+## 实现状态说明
+
+每个特性标注实现状态：
+- ✅ **已实现** — 代码完整落地，与文档描述一致
+- 🔶 **基本实现** — 核心功能已落地，细节有微小偏差（不影响体验）
+- ⬜ **未实现** — 仅有文档描述，无对应代码
+
+---
+
+## 1. 设计哲学
+
+每一次交互都是一次"与山水对话"：
+
+| 操作 | 意象 | 动效语言 | 状态 |
+|------|------|----------|------|
+| 发送消息 | 投石入水 | 按钮弹缩 → 气泡飞入 → 涟漪扩散 | ✅ |
+| AI 回复 | 云雾凝聚 | 模糊→清晰 → 文字逐行显现 | ✅ |
+| 收藏图片 | 萤火点亮 | 星标亮起 → 金色粒子飘散 | ✅ |
+| 滚动浏览 | 穿行雾中 | 内容在雾气边缘隐现 | ✅ |
+| 等待加载 | 溪水潺潺 | 石青流光 + 水波纹脉冲 | ✅ |
+| 图片揭示 | 水墨晕染 | clip-path 圆形从中心扩展 | ✅ |
+| 会话切换 | 翻山越岭 | 内容滑出/滑入 | ✅ |
+
+科技感不通过赛博朋克的锐利线条传递，而是通过"精密点阵 × 自然粒子"的融合 —
+就像在深山中发现了一座用水晶和苔藓构建的数据中心。
+
+---
+
+## 2. 色彩体系 ✅
+
+### 主色调
+
+| 语义 | 变量名 | 色值 | 色彩隐喻 | 状态 |
+|------|--------|------|---------|------|
+| 背景主色 | `--bg-primary` | `#0C1210` | 深山暗处 | ✅ |
+| 背景次级 | `--bg-secondary` | `#131E1A` | 苔藓暗绿 / 山石基底 | ✅ |
+| 背景三级 | `--bg-tertiary` | `#1C2A24` | 松烟绿 / 远山中层 | ✅ |
+| 卡片表面 | `--bg-card` | `rgba(16, 30, 24, 0.65)` | 半透明山岩 | ✅ |
+| 主高亮色 | `--accent` | `#4DB8A4` | 石青绿 — 千里江山图的石青 | ✅ |
+| 高亮 hover | `--accent-hover` | `#6CD4BE` | 石青亮态 | ✅ |
+| 辅助高亮 | `--accent-secondary` | `#3A8FB7` | 石绿蓝 — 千里江山图的石绿 | ✅ |
+| 热门/警告 | `--hot` | `#C4654A` | 赭石红 — 点景人物/宫殿暖色 | ✅ |
+| 文字主色 | `--text-primary` | `#E0E8E2` | 微泛绿的月白 | ✅ |
+| 文字次级 | `--text-secondary` | `#7A9485` | 青灰绿 | ✅ |
+| 边框色 | `--border` | `rgba(77, 184, 164, 0.12)` | 石青半透明 | ✅ |
+| 发光边框 | `--border-glow` | `rgba(77, 184, 164, 0.25)` | 石青发光态 | ✅ |
+| 雾气基础 | `--mist` | `rgba(77, 184, 164, 0.06)` | 云雾底色 | ✅ |
+| 赭金点缀 | `--gold` | `#B8935A` | 收藏星标等极少量暖色 | ✅ |
+
+### 色彩来源
+
+石青（`#4DB8A4`）和石绿蓝（`#3A8FB7`）取自《千里江山图》中使用的矿物质颜料色，
+经现代演绎降低饱和度，在深色 UI 中不过于刺眼。
+赭石红（`#C4654A`）来源于画中点景人物和宫殿使用的暖色颜料。
+
+**实现文件**: `globals.css` `:root` 第 4-18 行
+
+---
+
+## 3. 信息层级体系
+
+### 3.1 排版重量体系（7 级） ✅
+
+| 层级 | CSS 类 | 大小 | 字重 | 字间距 | 视觉手段 | 状态 |
+|------|--------|------|------|--------|----------|------|
+| Display | `.typo-display` | 32px | 300 | -0.02em | 石青→石绿蓝渐变填色 | ✅ |
+| H1 | `.typo-h1` | 24px | 700 | -0.01em | 底部石青细线装饰 | ✅ |
+| H2 | `.typo-h2` | 18px | 600 | 0 | 左侧 3px 石青竖线标记 | ✅ |
+| Body | 默认 | 14px | 400 | 0.01em | 标准 | ✅ |
+| Body Strong | `.typo-strong` | 14px | 600 | 0 | 石青色 | ✅ |
+| Caption | `.typo-caption` | 12px | 400 | 0.02em | text-secondary | ✅ |
+| Micro | `.typo-micro` | 11px | 600 | 0.04em | 大写 + 加宽字间距 | ✅ |
+
+关键区分手段：Display 使用渐变文字而非纯色，H1 与 H2 各有独立视觉标记（底线 vs 竖线），
+不仅靠字号大小区分层级。
+
+**实现文件**: `globals.css` 第 33-102 行
+**使用位置**: `typo-display`（欢迎页/登录页）、`typo-h1`（ProfileModal 用户名）、`typo-h2`（Gallery 详情标题）、`typo-strong`（侧栏/Gallery 区域标题、ProfileModal 记忆标题）、`typo-caption`（时间戳/记忆条数）、`typo-micro`（标签/分组标签/New 标记）
+
+### 3.2 表面层级系统（Surface Elevation） ✅
+
+4 级表面，每升一级 backdrop-blur +8px、border 亮度 +0.06、box-shadow 扩展 +4px：
+
+| 层级 | CSS 类 | 用途 | 隐喻 | 状态 |
+|------|--------|------|------|------|
+| Surface-0 | — | 页面背景 `#0C1210` | 深渊 | ✅ |
+| Surface-1 | `.surface-1` | 侧栏/主区域 | 山脚（bg-secondary + 微弱内发光） | ✅ |
+| Surface-2 | `.surface-2` | 卡片/消息气泡 | 山腰（glass-panel + 更强模糊 + 微上移阴影） | ✅ |
+| Surface-3 | `.surface-3` | 弹窗/下拉/tooltip | 山顶（强模糊 + 明显阴影 + 更亮边框） | ✅ |
+
+**实现文件**: `globals.css` 第 106-133 行
+**使用位置**: 侧栏（surface-1）、消息气泡/回到底部按钮（surface-2）、下拉菜单/弹窗（surface-3）
+
+> 注：文档定义的 `.glass-panel` 与 `.surface-2` 视觉上等价，实际组件统一使用 surface-* 系列。`glass-panel` 保留为兼容。
+
+### 3.3 用户消息 vs 助手消息 ✅
+
+| 维度 | 用户消息 | 助手消息 | 状态 |
+|------|----------|----------|------|
+| 对齐 | 右对齐 | 左对齐 | ✅ |
+| 背景 | 石青渐变（accent/8 → accent/15） | glass-panel（Surface-2） | ✅ |
+| 圆角 | 左上方切角（几何感） | 标准圆角 | ✅ |
+| 边框 | 无 | 左侧 2px 石青竖线（山泉流水） | ✅ |
+| 入场动画 | 投石入水（从下方飞入） | 云雾凝聚（blur 消散） | ✅ |
+
+**实现文件**: `chat-messages.tsx` 第 69-74 行、`globals.css` `.user-bubble` 类
+
+---
+
+## 4. 科技质感
+
+### 4.1 环境粒子（Ambient Particles） ✅
+
+背景云雾之上叠加"深山萤火"粒子层：
+
+- 数量：15-20 个小光点
+- 颜色：石青色，opacity 0.15-0.3
+- 行为：缓慢随机漂浮 + 偶尔闪烁（opacity 脉冲）
+- 实现：React 组件 + useMemo 随机化 + CSS animation
+- 空态时粒子增多至 ~28 个，营造"未探索的深山"感
+
+**实现文件**: `components/ui/ambient-particles.tsx`
+**接入位置**: `page.tsx`（首页，count 根据空态切换）、`login/page.tsx`、`gallery/page.tsx`
+
+### 4.2 网格底纹（Subtle Grid） ✅
+
+Surface-0 背景叠加极淡的点阵网格（opacity: 0.03），
+几乎不可见但传递"精密、数字化"的潜意识感知，与云雾层形成"自然 × 科技"张力。
+
+**实现文件**: `globals.css` `body::before` 第 136-145 行
+
+### 4.3 数据流光（Data Stream） ✅
+
+AI 思考/生成时，输入栏上方出现一条横向流光：
+
+- 石青色光带从左向右流动，高度 2px
+- 思考时慢速、生成图片时加速
+- 意象：山间溪流 / 数据脉搏
+
+**实现文件**: `components/ui/data-stream.tsx`、`globals.css` `.data-stream` / `-slow` / `-fast`
+**接入位置**: `chat-input.tsx` 第 202 行
+
+---
+
+## 5. 微交互图鉴
+
+所有微交互使用 framer-motion 实现，统一动画参数定义在 `motion-presets.ts` 中。
+
+### 5.1 发送消息 — "投石入水" ✅
+
+1. 发送按钮 `scale(0.85)` → spring 弹回（`sendBounce`）
+2. 消息气泡从输入栏位置飞入对话区（translateY + opacity）
+3. 到达目标位置时涟漪扩散（`RippleLayer` 石青色圆环 scale + fade out）
+4. 输入栏清空后边框发光脉冲一次（水面恢复平静）
+
+**实现文件**: `chat-input.tsx`（sendBounce + useRipple）、`ripple-effect.tsx`、`motion-presets.ts`
+
+### 5.2 AI 回复 — "云雾凝聚" ✅
+
+1. 消息气泡 `blur(8px)` → `blur(0)` 凝聚显现
+2. 文字逐行显示时 opacity 阶梯（新行更亮，旧行渐稳）
+3. 图片结果：石青色模糊占位 → blur 消散 + scale 1.02→1.0（拨开云雾）
+
+**实现文件**: `motion-presets.ts` `assistantEnter`、`chat-messages.tsx` `StreamingLines` 组件
+
+### 5.3 收藏图片 — "萤火点亮" ✅
+
+1. 星标 outline → filled，赭金色
+2. 点击瞬间散出 5-7 个微小金色粒子（萤火被惊起）
+3. 粒子向四周飘散并淡出（stagger + random 偏移）
+
+**实现文件**: `components/ui/firefly-burst.tsx`、`image-grid.tsx` `FavoriteButton`
+
+### 5.4 图片加载 — "水墨晕染" ✅
+
+1. 占位：石青渐变块 + 呼吸脉冲（`.stone-placeholder`）
+2. 加载完成：`clip-path: circle()` 从中心扩展到全图（水墨滴入纸面）
+
+**实现文件**: `globals.css` `.stone-placeholder`、`motion-presets.ts` `inkReveal`、`image-grid.tsx` `ImageReveal`
+
+### 5.5 输入框 — "水面感应" ✅
+
+- 空态：底部淡石青线
+- 获焦：边框从中心向两端扩展点亮（水面波纹展开）
+- 输入时：边框亮度随文字长度微增（蓄力）
+- 可发送态：发送按钮缓慢脉冲发光（准备就绪）
+
+**实现文件**: `globals.css` `.water-focus-line` / `.water-focus-active`、`chat-input.tsx` boxShadow 联动
+
+### 5.6 Hover 状态 ✅
+
+- 按钮：`translateY(-1px)` + shadow 加深（浮起感）
+- 卡片：border-glow + 底部向上内发光渐变
+- 侧栏会话项：左侧 2px 石青竖线 slide-in
+
+**实现文件**: `globals.css` `.btn-hover-lift`（第 466-472 行）、`.neon-border`（第 195-204 行）、`.session-hover-line`（第 474-493 行）
+
+### 5.7 滚动到底部 — "落叶归根" ✅
+
+- 形状：水滴形（椭圆切割 border-radius）
+- 出现：spring 从下方弹入
+- 石青半透明背景 + 雾气边框
+
+**实现文件**: `page.tsx` scroll-btn、`motion-presets.ts` `scrollBtnEnter`
+
+### 5.8 会话切换 — "翻山越岭" ✅
+
+- 当前对话向上/向下滑出
+- 新对话从对应方向滑入
+- 过渡 250ms ease-out
+- 使用 `AnimatePresence mode="wait"` + `sessionSlide` 变体
+
+**实现文件**: `page.tsx` AnimatePresence 包裹聊天内容区、`motion-presets.ts` `sessionSlide`
+
+---
+
+## 6. 状态与反馈
+
+### 6.1 Loading 体系 ✅
+
+| 场景 | 表现 | 状态 |
+|------|------|------|
+| 骨架屏 | shimmer 渐变（bg-tertiary → bg-secondary），左→右扫描 | ✅ |
+| 内联加载 | 三个石青圆点"水波纹"式依次涌起（scale Y 变化） | ✅ |
+| 全屏加载 | 中心放射状云雾凝聚（涟漪环 + 核心光点 + 呼吸脉冲） | ✅ |
+| AI 生成中 | 数据流光（输入栏上方 2px 流动光带） | ✅ |
+
+**实现文件**: `globals.css` `.skeleton-shimmer`、`.wave-dot`、`.mist-loader`、`.data-stream`
+**接入位置**: `image-grid.tsx`、`chat-messages.tsx`、`app-context.tsx`、`chat-input.tsx`
+
+### 6.2 空态设计 ✅
+
+- Display 级渐变文字欢迎语
+- "快速开始"建议卡片（stagger 入场）
+- 萤火粒子增多营造氛围
+
+**实现文件**: `page.tsx` isEmptyState 分支
+
+### 6.3 Error 状态 ✅
+
+- 赭石红色调但保持优雅（非大红色块）
+- 微弱横向震动（translateX ±2px，2 次）
+- 自动消失时向上飘散淡出（`errorFloat` 变体 + 4s 定时清除）
+
+**实现文件**: `globals.css` `.error-shake`、`motion-presets.ts` `errorFloat`、`login/page.tsx`
+
+---
+
+## 7. 动效语言
+
+### 7.1 时序原则 ✅
+
+| 类别 | 时长 | 缓动 |
+|------|------|------|
+| 即时反馈（hover/press） | 150-200ms | ease |
+| 状态过渡（展开/折叠） | 250ms | ease-in-out |
+| 云烟效果（淡入/淡出） | 400-600ms | ease |
+| 环境动效（背景漂移） | 45-60s | ease-in-out infinite |
+| Spring 物理（弹缩） | stiffness: 400, damping: 25 | spring |
+
+### 7.2 编排原则 ✅
+
+- **先快后慢**：触发瞬间最快，收尾最慢（模拟自然物理）
+- **层次递进**：多元素入场使用 stagger（50-80ms 间隔），从近到远
+- **克制优先**：微交互幅度小（1-3px 位移、0.95-1.05 缩放），避免分散注意力
+- **自然衰减**：所有粒子效果都应以 opacity → 0 结束，不突兀消失
+
+### 7.3 统一动画参数（motion-presets.ts） ✅
+
+```typescript
+// Spring 物理参数
+spring: { stiffness: 400, damping: 25 }
+springGentle: { stiffness: 200, damping: 20 }
+
+// 入场动画
+fadeIn: { opacity: [0, 1], transition: { duration: 0.2 } }
+slideUp: { opacity: [0, 1], y: [8, 0], transition: { duration: 0.2 } }
+mistReveal: { filter: ["blur(8px)", "blur(0px)"], opacity: [0, 1], duration: 0.4 }
+
+// 按钮反馈
+buttonTap: { scale: 0.85 }
+sendBounce: { scale: [1, 0.85, 1.05, 1], transition: { duration: 0.3 } }
+
+// 涟漪/粒子
+ripple: { scale: [0, 2.5], opacity: [0.4, 0], duration: 0.6 }
+sparkle: { scale: [0, 1, 0], opacity: [0, 1, 0], duration: 0.8 }
+
+// 会话切换
+sessionSlide: { enter → center → exit, y ±30, duration: 0.25 }
+
+// Error 飘散
+errorFloat: { exit → opacity: 0, y: -12, duration: 0.5 }
+```
+
+**实现文件**: `components/ui/motion-presets.ts`
+
+---
+
+## 8. 视觉效果
+
+### 8.1 山雾玻璃面板 ✅
+
+```css
+.glass-panel {
+  background:
+    linear-gradient(165deg, rgba(16, 30, 24, 0.15) 0%, transparent 50%),
+    rgba(16, 30, 24, 0.55);
+  backdrop-filter: blur(24px) saturate(1.1);
+  border: 1px solid var(--border);
+}
+```
+
+**实现文件**: `globals.css` 第 185-192 行（定义）
+> 注：组件统一使用 `.surface-2`（等价视觉），`.glass-panel` 保留为兼容别名。
+
+### 8.2 云烟缭绕边框 ✅
+
+选中态组件的动态边框：
+- 常态：石青微弱均匀静态发光
+- hover：conic-gradient 6s 缓慢旋转（40-50% 宽弧段），模拟云烟缭绕
+- 移开：opacity 600ms 平滑淡散
+
+**实现文件**: `globals.css` `.glow-border` + `@property --glow-angle` + `mistSpin`（第 206-285 行）
+**使用位置**: `top-nav.tsx` 活跃 Tab、`session-list.tsx` 当前会话
+
+### 8.3 山雾背景 ✅
+
+多层缓慢漂移云雾（远景层 60s / 近景层 45s），
+两层不同速率和方向模拟远山/近山视差。
+
+**实现文件**: `globals.css` `.fog-layer-far` / `.fog-layer-near`（第 162-182 行）
+**挂载位置**: `ambient-particles.tsx` 组件内渲染两个雾层 div
+
+### 8.4 雾气滚动边缘 ✅
+
+主要滚动区域顶底渐变遮罩（36px 渐变区域），内容消失在云雾中。
+
+**实现文件**: `globals.css` `.fog-scroll`（第 288-303 行）
+**使用位置**: `page.tsx` 对话滚动区、`session-list.tsx` 会话列表
+
+---
+
+## 9. 布局架构
+
+### 整体结构 ✅
+
+```
+┌───────────────────────────────────────────────────────┐
+│  Top Nav (56px) — Surface-1 + 毛玻璃                    │
+├──────────┬────────────────────────────────────────────┤
+│  侧边栏    │  主内容区（对话 / 资源库）                    │
+│  (280px)  │  (flex-1)                                  │
+│  Surface-1 │  ┌──────────────────────────────────────┐ │
+│  会话列表   │  │ 对话消息 / 图片网格                     │ │
+│  标签筛选   │  │ (fog-scroll 雾气边缘)                  │ │
+│           │  └──────────────────────────────────────┘ │
+│           │  数据流光条（AI 活动时可见）                   │
+│           │  输入区 — 水面感应                           │
+└──────────┴────────────────────────────────────────────┘
+```
+
+**实现文件**: `page.tsx`（首页布局）
+
+### 间距系统 ✅
+
+- 面板间间距：0（紧贴，用边框分隔）
+- 卡片网格间距：16px
+- 内容区内边距：20px
+- 面板内边距：16px
+
+### 响应式断点 ✅
+
+| 断点 | 布局 |
+|------|------|
+| ≥768px (md) | 双栏：侧边栏(280px) + 主内容区(flex-1) |
+| <768px | 单栏：侧边栏为固定抽屉 + 主内容区全宽 |
+
+**实现文件**: `sidebar.tsx`（md 断点切换固定/内联）、`app-context.tsx`（`window.innerWidth < 768` 初始折叠）
+
+---
+
+## 10. 技术实现
+
+### 依赖
+
+- `framer-motion`：微交互动画引擎（spring 物理、stagger、AnimatePresence）
+- `tailwindcss v4`：工具类样式
+- CSS 自定义属性：设计 token
+- CSS `@property`：可动画角度属性（云烟边框）
+
+### 文件结构
+
+```
+src/
+├── components/ui/
+│   ├── ambient-particles.tsx  — 环境萤火粒子 ✅
+│   ├── data-stream.tsx        — 数据流光条 ✅
+│   ├── ripple-effect.tsx      — 涟漪效果 ✅
+│   ├── firefly-burst.tsx      — 萤火粒子爆发 ✅
+│   └── motion-presets.ts      — 统一动画参数 ✅
+├── app/globals.css            — 设计 token + 工具类 ✅
+└── ...existing components     — 集成微交互
+```
+
+### 性能约束
+
+- 环境粒子使用 React + CSS animation，不引入 Canvas
+- 所有动画使用 transform/opacity，避免触发 layout
+- 粒子总数不超过 30 个
+- 背景动效使用 `will-change: transform` 提示 GPU 加速
+- framer-motion 使用 `layout` 动画时限制在必要组件

docs/art-agent/VISUAL-STYLE-GUIDE.md

@@ -1,22 +1,24 @@
 # EPEEKit 视觉风格指南
 
-> 设计语言：**青绿山水 · 现代演绎**（灵感来源于《千里江山图》）
-> 更新日期：2026-04-15
+> 设计语言：**白底青绿 · 绢本山水**（灵感来源于《千里江山图》）
+> 更新日期：2026-04-16
 
 ## 1. 设计语言总结
 
 ### 核心风格关键词
 
-- **墨绿深底** — 深山暗处般的底色，取代冷蓝黑
-- **石青石绿** — 千里江山图中的矿物质颜料色，作为主高亮
+- **绢本白底** — 画卷绢纸的微暖白色，取代暗色系背景
+- **石青石绿** — 千里江山图中的矿物质颜料色，用于框体边框和高亮
 - **云烟雾气** — 所有发光和动画效果模拟山间云烟缓慢飘散
-- **山雾玻璃** — 毛玻璃面板带微弱绿底色，如透过薄雾看山
+- **白纱玻璃** — 白色半透明毛玻璃面板，如薄纱覆于绢面
 - **赭金点缀** — 点景人物宫殿的暖色调，用于收藏星标等少量强调
+- **墨色文字** — 正文使用接近墨黑色，清晰可读
 
 ### 视觉感受
 
-> 整体氛围应该是：深夜远眺层峦叠嶂，薄雾在山间缓缓流动，
-> 石青石绿的山色在暗底上若隐若现，偶有赭金灯火点缀其间。
+> 整体氛围应该是：白色绢底铺展，青绿山色点缀于框体和光效之中，
+> 文字如墨书于纸上，偶有赭金灯火点缀其间。
+> 像在白昼中远眺千里江山，青绿分明而不压迫。
 
 ---
 
@@ -26,27 +28,34 @@
 
 | 语义 | 变量名 | 色值 | 色彩隐喻 |
 |------|--------|------|---------|
-| 背景主色 | `--bg-primary` | `#0C1210` | 深山暗处 |
-| 背景次级 | `--bg-secondary` | `#131E1A` | 苔藓暗绿 / 山石基底 |
-| 背景三级 | `--bg-tertiary` | `#1C2A24` | 松烟绿 / 远山中层 |
-| 卡片表面 | `--bg-card` | `rgba(16, 30, 24, 0.65)` | 半透明山岩 |
-| 主高亮色 | `--accent` | `#4DB8A4` | 石青绿 — 千里江山图的石青 |
-| 高亮 hover | `--accent-hover` | `#6CD4BE` | 石青亮态 |
-| 辅助高亮 | `--accent-secondary` | `#3A8FB7` | 石绿蓝 — 千里江山图的石绿 |
+| 背景主色 | `--bg-primary` | `#FAFAF7` | 绢本微暖白 |
+| 背景次级 | `--bg-secondary` | `#F2F1EC` | 绢纸淡米色 |
+| 背景三级 | `--bg-tertiary` | `#E8E6DF` | 染旧的纸色 |
+| 卡片表面 | `--bg-card` | `rgba(255, 255, 255, 0.8)` | 白纱覆面 |
+| 主高亮色 | `--accent` | `#2E8B7A` | 石青 — 千里江山图的石青 |
+| 高亮 hover | `--accent-hover` | `#3AA38E` | 石青亮态 |
+| 辅助高亮 | `--accent-secondary` | `#3A7FB8` | 石绿蓝 — 千里江山图的石绿 |
 | 热门/警告 | `--hot` | `#C4654A` | 赭石红 — 点景人物/宫殿暖色 |
-| 文字主色 | `--text-primary` | `#E0E8E2` | 微泛绿的月白 |
-| 文字次级 | `--text-secondary` | `#7A9485` | 青灰绿 |
-| 边框色 | `--border` | `rgba(77, 184, 164, 0.12)` | 石青半透明 |
-| 发光边框 | `--border-glow` | `rgba(77, 184, 164, 0.25)` | 石青发光态 |
-| 雾气基础 | `--mist` | `rgba(77, 184, 164, 0.06)` | 云雾底色 |
+| 文字主色 | `--text-primary` | `#1A1A1A` | 墨黑 |
+| 文字次级 | `--text-secondary` | `#6B7B8A` | 灰蓝 |
+| 边框色 | `--border` | `rgba(46, 139, 122, 0.15)` | 石青半透明 |
+| 发光边框 | `--border-glow` | `rgba(46, 139, 122, 0.30)` | 石青发光态 |
+| 雾气基础 | `--mist` | `rgba(46, 139, 122, 0.04)` | 淡雅云雾 |
 | 赭金点缀 | `--gold` | `#B8935A` | 用于收藏星标等极少量暖色 |
 
 ### 色彩来源说明
 
-石青（`#4DB8A4`）和石绿蓝（`#3A8FB7`）取自《千里江山图》中使用的矿物质颜料色，
-经过现代演绎降低饱和度，使其在深色 UI 中不会过于刺眼。
+石青（`#2E8B7A`）和石绿蓝（`#3A7FB8`）取自《千里江山图》中使用的矿物质颜料色，
+经过适度加深以确保在白底 UI 上对比度足够、清晰可辨。
 赭石红（`#C4654A`）来源于画中点景人物和宫殿使用的暖色颜料。
 
+### 与旧版（暗绿底）的关键差异
+
+真正的千里江山图是**青绿设色于绢本白底之上**——山体的石青石绿占据画面，
+但大面积留白（云、水、天际）给了青绿色块呼吸感。旧版将背景设为墨绿深色，
+导致全屏绿色信息量过载，层次反而被压扁。新版回归绢本白底，让青绿色作为
+框体和高亮的点缀，更贴近原画精髓。
+
 ---
 
 ## 3. 排版
@@ -75,7 +84,7 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
 
 ```
 ┌─────────────────────────────────────────────────────┐
-│  Top Nav (56px) — 山雾玻璃面板                        │
+│  Top Nav (56px) — 白纱玻璃面板                        │
 ├──────────┬──────────────────────────────────────────┤
 │  侧边栏    │  主内容区（对话 / 资源库）                  │
 │  (280px)  │  (flex-1)                                │
@@ -100,23 +109,23 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
 
 ### 5.1 导航栏
 
-- 高度 56px，背景 `--bg-secondary`/80 + 毛玻璃
-- Logo 方块使用 `--accent` 背景 + 石青发光阴影
+- 高度 56px，背景 `--bg-secondary` + 毛玻璃
+- Logo 方块使用 `--accent` 背景 + 白色文字 + 石青发光阴影
 - 导航项带图标 + 文字
 - 活动项使用 `.glow-border`（云烟边框）
 - 非活动项 hover 时只显示静态边框，不触发动画
 
 ### 5.2 侧边栏
 
-- 山雾玻璃背景：`bg-[var(--bg-secondary)]/80 backdrop-blur-xl`
+- 白纱玻璃背景：`bg-[var(--bg-secondary)] backdrop-blur-xl`
 - 对话图标带石青色 drop-shadow 微光
 - 会话列表使用 `.fog-scroll` 实现顶底雾气渐隐
 - 活动会话使用 `.glow-border`
 
 ### 5.3 聊天消息区
 
-- 用户消息：`--accent/15` 背景 + 石青边框
-- 助手消息：`.glass-panel`（山雾玻璃）
+- 用户消息：`--accent/8` ~ `--accent/15` 渐变背景，左上切角，墨色文字
+- 助手消息：`.surface-2`（白纱玻璃）+ 石青左边框
 - 加载动画：石青色脉冲圆点
 - 滚动区域使用 `.fog-scroll`
 
@@ -129,39 +138,36 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
 
 ### 5.5 图片详情面板
 
-- 山雾玻璃背景：`--bg-secondary/90 backdrop-blur-xl`
+- 白纱玻璃背景：`--bg-secondary/90 backdrop-blur-xl`
 - 操作按钮区：石青主色 + 三级背景辅助色
 
 ---
 
 ## 6. 视觉效果
 
-### 6.1 山雾玻璃面板
+### 6.1 白纱玻璃面板
 
 ```css
 .glass-panel {
-  background:
-    linear-gradient(165deg, rgba(16, 30, 24, 0.15) 0%, transparent 50%),
-    rgba(16, 30, 24, 0.55);
-  backdrop-filter: blur(24px) saturate(1.1);
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(20px) saturate(1.1);
   border: 1px solid var(--border);
 }
 ```
 
-相比传统 Glassmorphism，增加了微弱绿底色渐变层，
-模拟透过薄雾看山石的质感。blur 增加到 24px 以加强朦胧感。
+白色半透明底 + 毛玻璃模糊，模拟薄纱覆于绢面的质感。
 
 ### 6.2 静态发光边框
 
 ```css
 .neon-border {
-  border: 1px solid var(--border);          /* rgba(77, 184, 164, 0.12) */
+  border: 1px solid var(--border);          /* rgba(46, 139, 122, 0.15) */
   transition: border-color 200ms ease, box-shadow 200ms ease;
 }
 .neon-border:hover {
-  border-color: var(--border-glow);         /* rgba(77, 184, 164, 0.25) */
-  box-shadow: 0 0 18px rgba(77, 184, 164, 0.08),
-              inset 0 0 12px rgba(77, 184, 164, 0.03);
+  border-color: var(--border-glow);         /* rgba(46, 139, 122, 0.30) */
+  box-shadow: 0 0 18px rgba(46, 139, 122, 0.08),
+              inset 0 0 12px rgba(46, 139, 122, 0.03);
 }
 ```
 
@@ -178,16 +184,16 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
 
 **技术实现**：
 - `@property --glow-angle` 注册可动画角度属性
-- `conic-gradient` 使用 40-50% 的宽弧段（比之前的 20% 更宽），更柔和
-- 旋转周期 6s（比之前的 3s 更慢），模拟云烟的悠缓
+- `conic-gradient` 使用 40-50% 的宽弧段，更柔和
+- 旋转周期 6s，模拟云烟的悠缓
 - `::before` — 云烟边框层，mask-composite 裁出 1.5px 边框
-- `::after` — 雾气扩散层，`blur(12px)`（比之前的 6px 更大），范围 `inset: -6px`
+- `::after` — 雾气扩散层，`blur(12px)`
 - 两层伪元素默认 `opacity: 0`，hover 时 `opacity: 1`，transition 600ms
 
 ```css
 .glow-border {
-  border: 1px solid rgba(77, 184, 164, 0.18);
-  box-shadow: 0 0 10px rgba(77, 184, 164, 0.05);
+  border: 1px solid rgba(46, 139, 122, 0.20);
+  box-shadow: 0 0 10px rgba(46, 139, 122, 0.06);
 }
 .glow-border::before,
 .glow-border::after {
@@ -203,31 +209,31 @@ font-family: 'Inter', system-ui, -apple-system, sans-serif;
 
 ### 6.3 山雾背景
 
-背景不再使用静态光斑，改为多层缓慢漂移的云雾：
+背景使用多层缓慢漂移的淡雅云雾（极低透明度，在白底上若隐若现）：
 
 ```css
 /* 远景雾 — 60s 缓慢漂移 */
-body::before {
+.fog-layer-far {
   inset: -10%;
   background:
-    radial-gradient(ellipse 80% 50% at 15% 75%, rgba(77, 184, 164, 0.07) ...),
-    radial-gradient(ellipse 60% 40% at 75% 25%, rgba(58, 143, 183, 0.05) ...),
-    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(77, 184, 164, 0.03) ...);
+    radial-gradient(ellipse 80% 50% at 15% 75%, rgba(46, 139, 122, 0.04) ...),
+    radial-gradient(ellipse 60% 40% at 75% 25%, rgba(58, 127, 184, 0.03) ...),
+    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(46, 139, 122, 0.02) ...);
   animation: fogDriftFar 60s ease-in-out infinite;
 }
 
 /* 近景雾 — 45s 不同速率漂移 */
-body::after {
+.fog-layer-near {
   inset: -15%;
   background:
-    radial-gradient(ellipse 70% 45% at 80% 70%, rgba(77, 184, 164, 0.06) ...),
-    radial-gradient(ellipse 50% 60% at 25% 30%, rgba(58, 143, 183, 0.04) ...);
+    radial-gradient(ellipse 70% 45% at 80% 70%, rgba(46, 139, 122, 0.03) ...),
+    radial-gradient(ellipse 50% 60% at 25% 30%, rgba(58, 127, 184, 0.025) ...);
   animation: fogDriftNear 45s ease-in-out infinite;
 }
 ```
 
 两层雾使用不同的漂移速率和方向，模拟远山和近山的视差效果。
-`inset` 使用负值以避免雾气漂移时在屏幕边缘露出空白。
+透明度远低于暗色版本，在白底上呈现为淡淡的青绿色氤氲。
 
 ### 6.4 雾气滚动边缘
 
@@ -258,20 +264,18 @@ body::after {
 
 ---
 
-## 7. 与原版 Cyberpunk 风格的对比
+## 7. 与旧版（暗绿底 Cyberpunk 风格）的对比
 
-| 维度 | Cyberpunk | 青绿山水 |
-|------|-----------|---------|
-| 底色 | 冷蓝黑 `#0B0E14` | 墨绿黑 `#0C1210` |
-| 高亮色 | 霓虹绿 `#00E5A0` | 石青绿 `#4DB8A4` |
-| 发光效果 | 锐利霓虹光线旋转 | 柔和云烟缓慢缭绕 |
-| 旋转速度 | 3s/圈 | 6s/圈 |
-| 光晕模糊 | blur(6px) | blur(12px) |
-| 渐变弧段 | 20%（锐利光束） | 40-50%（弥漫雾团） |
-| 背景 | 静态双色光斑 | 多层漂移云雾 |
-| 面板质感 | 标准毛玻璃 | 山雾玻璃（绿底渐变） |
-| 滚动边缘 | 无 | 雾气渐隐 |
-| 警告色 | 霓虹红 `#FF3B5C` | 赭石红 `#C4654A` |
+| 维度 | 旧版暗绿 | 新版白底青绿 |
+|------|----------|------------|
+| 底色 | 墨绿黑 `#0C1210` | 绢本白 `#FAFAF7` |
+| 高亮色 | 石青 `#4DB8A4` | 石青 `#2E8B7A`（加深适配白底） |
+| 文字色 | 微绿月白 `#E0E8E2` | 墨黑 `#1A1A1A` |
+| 面板质感 | 绿底毛玻璃 | 白色毛玻璃 |
+| 背景雾气 | 中等透明度（暗底上可见） | 极低透明度（白底上若隐若现） |
+| 发光效果 | 柔和云烟缓慢缭绕 | 保持，但阴影更轻柔 |
+| 整体感受 | 深夜远山 | 白昼绢本 |
+| 可读性 | 浅色字暗底，OK | 墨色字白底，更佳 |
 
 ---
 
@@ -286,8 +290,9 @@ body::after {
 
 ## 9. 设计哲学
 
-本风格将中国传统青绿山水画的色彩语言与现代暗色 UI 设计融合：
-- **沉浸感**：深墨底色营造夜间远山的静谧氛围，适合创意工具
+本风格将中国传统青绿山水画的色彩语言与现代白色 UI 设计融合：
+- **绢本留白**：白底如绢纸铺展，给青绿色块留出呼吸空间
+- **青绿设色**：石青石绿只用于框体边框、高亮和交互反馈，克制而鲜明
 - **自然动效**：所有动画模拟自然现象（云烟飘动），而非机械闪烁
-- **克制用色**：石青石绿只用于高亮和交互反馈，不滥用；赭金极少量点缀
+- **墨色可读**：正文使用接近纯黑的墨色，在白底上对比度极佳
 - **雾气意境**：从边框云烟到背景漂移到滚动渐隐，统一的"雾"意象贯穿全站