97 lines
6.0 KiB
Markdown
97 lines
6.0 KiB
Markdown
# Genesis 前端「豆包式」布局重构 — 设计文档
|
||
|
||
日期：2026-09-12
|
||
范围：`src/genesis/server/static/`（chat.html / chat.css / chat.js / chat_state.js）+ 后端会话重命名端点
|
||
主题：参考豆包工作台布局，**保留现有深色指挥中心主题**，仅调整布局与交互。
|
||
|
||
## 1. 背景与目标
|
||
|
||
现有布局为「顶栏标题 + 顶栏项目下拉 + RAG 条 + 上传条 + 输入框」。本次参考豆包工作台重构为：
|
||
|
||
1. **项目创建/配置下移到聊天框下部**，图标+文字形式（`▤ 项目` / `＋ 新建项目`）。
|
||
2. **页面顶部显示会话名**（只读）。
|
||
3. **新建会话空态显示「有什么可以帮到你的？」** + 建议卡。
|
||
4. **上传资料与「影响调查(RAG)」开关一并收进底部工具栏**。
|
||
5. **会话重命名入口**：左侧历史项 hover 显示的「⋯」→ 菜单「重命名」（图标+文字）。
|
||
|
||
## 2. 已确认决策
|
||
|
||
- D1 保留现有深色主题与设计令牌，仅改布局。
|
||
- D2 上传/RAG 收进底部工具栏；**新建项目改为用户设置项目目录**；**移除「既有系统 zip」上传选项**。
|
||
- D3 空态建议卡点击 → 提示词**填入输入框**（用户可编辑后自行发送）；**暂不做输入框上方 chips**。
|
||
- D4 会话重命名入口仅 `⋯` 菜单；顶栏会话名只读，暂不设其他入口。
|
||
- D5 **RAG 取材改造（从项目目录建索引）留作下一轮独立子项目**，本轮不动后端 RAG。
|
||
|
||
## 3. 目标布局
|
||
|
||
```
|
||
┌─ 顶栏 ────────────────────────────────────────┐
|
||
│ 会话名（只读；rec.name / 未创建会话） │
|
||
├───────────────────────────────────────────────┤
|
||
│ (新会话空态) │
|
||
│ [G] 有什么可以帮到你的？ │
|
||
│ （副提示：buildWelcome 文案） │
|
||
│ [生成概要设计书] [影响调查] [用中文生成] [状态] │ ← 建议卡（点击填入输入框）
|
||
│ (有消息 → 聊天气泡) │
|
||
├───────────────────────────────────────────────┤
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ 输入框 [发送] │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ [▤ 项目▾] [＋ 新建项目] [📎 上传资料] [◎ 影响调查] │ ← 底部工具栏（图标+文字）
|
||
└───────────────────────────────────────────────┘
|
||
```
|
||
侧边栏（品牌 / 新会话 / 会话历史）与右侧项目抽屉保留；抽屉新增/编辑项目的目录字段提升为常规字段。
|
||
|
||
## 4. 组件映射
|
||
|
||
| 现状 | 改为 |
|
||
|---|---|
|
||
| 顶栏 `<h1>` | `#session-title` 会话名（只读） |
|
||
| 顶栏项目下拉 `ps-current`/`ps-menu` | 底部「▤ 项目」按钮 + 向上弹出 `ps-menu` |
|
||
| 顶栏 `#rag-bar` | 底部「◎ 影响调查」（RAG 开关+统计+触发） |
|
||
| `#upload-bar` | 底部「📎 上传资料」按钮（点击展开现有上传控件） |
|
||
| 空态 assistant 气泡（buildWelcome） | `#empty-state`：图标 + 「有什么可以帮到你的？」 + buildWelcome 副提示 + 建议卡 |
|
||
| 历史项「× 删除」 | 增加 hover 显示的「⋯」→ 菜单「重命名」 |
|
||
|
||
## 5. 后端：会话重命名
|
||
|
||
- 新增端点 `PATCH /api/sessions/{sid}`，请求体 `{ "name": "<非空>" }`。
|
||
- `service.rename_session(sid, name)` → `store.update_session(sid, name=name)`（`update_session` 已支持任意 to_dict 字段）。
|
||
- 校验：`name` 去空白后为空 → 400 `INVALID_NAME`；会话不存在 → 404 `SESSION_NOT_FOUND`。
|
||
- 返回 `{ "session_id", "name" }`。
|
||
- 这是本轮**唯一**的后端改动。
|
||
|
||
## 6. 文案调整
|
||
|
||
- `buildWelcome` 方向词「请先在上方📎上传」→「请先在**下方**📎上传」（仍满足现有 node 断言：含 `要件定义`、`项目「A」`；无项目时含 `请新建项目|选择项目`）。
|
||
- 项目不匹配提示条「当前**顶栏**项目」→「当前**项目**」。
|
||
- RAG 空态提示「请上传既有系统 zip」→「请在项目配置中设置既有系统代码库目录」。
|
||
|
||
## 7. 状态函数（chat_state.js）
|
||
|
||
新增纯函数（UMD 导出，Node 可测）：
|
||
- `emptyHeadline()` → `'有什么可以帮到你的？'`
|
||
- `quickPrompts()` → `['生成概要设计书', '影响调查', '用中文生成', '现在什么状态？']`
|
||
|
||
`buildWelcome` / `autoBindProject` / `computeDrawerSnapshot` / `isDrawerDirty` / `shouldHideUploadSelect` / `resolveUploadType` 语义与签名不变。
|
||
|
||
## 8. 验收标准
|
||
|
||
1. 顶栏仅显示会话名；`loadSession`/首条消息建会话/上传后均正确更新。
|
||
2. 空态显示「有什么可以帮到你的？」+ 建议卡；点卡片把提示词填入输入框（不自动发送）。
|
||
3. 底部工具栏四项（项目/新建项目/上传资料/影响调查）图标+文字，功能正常；项目菜单向上弹出。
|
||
4. 上传类型下拉不再含「既有系统 zip」；项目抽屉目录字段为常规字段。
|
||
5. 历史项 hover 显示「⋯」→「重命名」→ 行内编辑保存后列表与顶栏同步；`PATCH` 生效。
|
||
6. 深色主题视觉一致；响应式（≤860px）无溢出破坏。
|
||
|
||
## 9. 非目标（Out of Scope）
|
||
|
||
- RAG 从项目目录建索引（下一轮）。
|
||
- 输入框上方快捷 chips（后续按需添加）。
|
||
- 主题浅色化。
|
||
|
||
## 10. 风险
|
||
|
||
- 移除 zip 上传后，本轮 RAG 无来源，「◎ 影响调查」将显示 0 片段并禁用（符合 D5）。
|
||
- 新增重命名端点需补 pytest；前端 DOM 重构须保持 `tests/test_frontend_audit_fixes.py`（仅测后端）与 `tests/test_chat_state.js` 通过。
|