6.0 KiB
6.0 KiB
Genesis 前端「豆包式」布局重构 — 设计文档
日期:2026-09-12
范围:src/genesis/server/static/(chat.html / chat.css / chat.js / chat_state.js)+ 后端会话重命名端点
主题:参考豆包工作台布局,保留现有深色指挥中心主题,仅调整布局与交互。
1. 背景与目标
现有布局为「顶栏标题 + 顶栏项目下拉 + RAG 条 + 上传条 + 输入框」。本次参考豆包工作台重构为:
- 项目创建/配置下移到聊天框下部,图标+文字形式(
▤ 项目/+ 新建项目)。 - 页面顶部显示会话名(只读)。
- 新建会话空态显示「有什么可以帮到你的?」 + 建议卡。
- 上传资料与「影响调查(RAG)」开关一并收进底部工具栏。
- 会话重命名入口:左侧历史项 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去空白后为空 → 400INVALID_NAME;会话不存在 → 404SESSION_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. 验收标准
- 顶栏仅显示会话名;
loadSession/首条消息建会话/上传后均正确更新。 - 空态显示「有什么可以帮到你的?」+ 建议卡;点卡片把提示词填入输入框(不自动发送)。
- 底部工具栏四项(项目/新建项目/上传资料/影响调查)图标+文字,功能正常;项目菜单向上弹出。
- 上传类型下拉不再含「既有系统 zip」;项目抽屉目录字段为常规字段。
- 历史项 hover 显示「⋯」→「重命名」→ 行内编辑保存后列表与顶栏同步;
PATCH生效。 - 深色主题视觉一致;响应式(≤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通过。