2026Technology-Competition/docs/superpowers/plans/2026-09-12-doubao-layout.md

Genesis「豆包式」布局重构 — 实施计划

配套设计：docs/superpowers/specs/2026-09-12-doubao-layout-design.md 目标文件：src/genesis/server/static/{chat.html,chat.css,chat.js,chat_state.js}、src/genesis/server/{app.py,service.py}

全局约束

• 保留现有深色主题与 chat.css 设计令牌；不新增依赖；不引入构建步骤。
• 现有测试须继续通过（tests/test_chat_state.js、tests/test_chat_ws.js、tests/test_frontend_audit_fixes.py、python -m pytest 覆盖率 ≥99%）。
• 前端无自动化 DOM 测试：前端任务以 node --check + 手动验收为准；纯状态函数须补 node 断言。

---

Task 1：后端会话重命名（TDD）

• 测试（RED）：tests/test_server_api.py 新增
  • 建会话 → PATCH /api/sessions/{sid} body {name: "股票系统需求"} → 200 且返回 name；GET 复核。
  • 空名 → 400 INVALID_NAME。
  • 不存在 → 404 SESSION_NOT_FOUND。
• 实现（GREEN）：service.rename_session；app.py PATCH /api/sessions/{sid} + 请求模型（name 非空校验）。
• 提交。

Task 2：chat_state.js 纯函数 + node 测试

• 新增 emptyHeadline()、quickPrompts()；buildWelcome 方向词「上方」→「下方」。
• tests/test_chat_state.js 增加断言：emptyHeadline() 含「有什么可以帮到你的」；quickPrompts() 含「影响调查」且长度为 4。
• 运行 node --test tests/test_chat_state.js。

Task 3：chat.html 结构重构

• header：仅 #session-title（移除 h1 / proj-switcher 顶栏位 / rag-bar 顶栏位 / sid-badge）。
• #chat 内新增 #empty-state（图标 + 主标题 + 副提示 + #suggests 建议卡）。
• #composer 下新增 #composer-toolbar：▤ 项目(打开 ps-menu)、＋ 新建项目、📎 上传资料(触发展开上传控件)、◎ 影响调查(RAG 开关+stats+触发)。
• 上传类型下拉移除 existing_system 选项。
• 抽屉目录字段移出 <details class="advanced">，改文案。
• 历史项模板（JS 渲染）加 ⋯ 与重命名菜单（DOM 由 JS 生成）。

Task 4：chat.css 样式

• #empty-state（居中、图标、主标题、副提示）、建议卡 .suggests/.suggest-card。
• #composer-toolbar 图标+文字按钮 .tb-btn、.tb-menu（项目列表向上弹出）。
• .sess .kebab 与 .rename-menu（hover 显示）。
• .ps-menu 改 bottom: calc(100% + 6px); top: auto; 向上。
• 响应式：底部工具栏换行。

Task 5：chat.js 行为

• badge → #session-title；各更新点（newSession/loadSession/send/上传后）写会话名。
• renderEmptyOrWelcome() 改写为空态渲染；建议卡点击 insertPrompt(text)（写入 #input + focus，不发送）。
• insertPrompt 新增。
• 底部按钮绑定：#tb-project→toggleProjectSwitcher；#tb-newproject→openProjectDrawer(null)；#tb-upload→触发展开上传控件；#impact-btn 逻辑复用。
• 历史项 ⋯ → 重命名菜单 → 行内编辑（Enter 保存/Esc 取消）→ PATCH /api/sessions/{sid} → 刷新列表与顶栏。
• 文案：「顶栏项目」→「当前项目」；RAG 空态提示语更新。

Task 6：验证与提交

• node --check（抽取 chat.js）。
• node --test tests/test_chat_state.js tests/test_chat_ws.js。
• python -m pytest（≥99%）。
• 手动验收（设计 §8）。
• 提交 + 更新 _AI_USAGE_LOG.md。

Self-Review 覆盖

• 设计 §4 组件映射 → Task 3/5。
• 设计 §5 后端 rename → Task 1。
• 设计 §6 文案 → Task 2/5。
• 设计 §7 状态函数 → Task 2。
• 设计 §8 验收 → Task 6。
• 非目标（RAG 取材/chips/浅色）本轮不做。