# 前端美化与交互改造设计（2026-08-30）
## 背景与目标
当前前端（`src/genesis/server/static/chat.html`，单文件 1215 行内联 CSS+JS）沿用 Material/Google 风
（`#1a73e8` 蓝、Inter、胶囊按钮、扁平阴影），功能完整但视觉同质化严重，与"概要设计书自动生成
Agent"的项目定位缺少记忆点。
本次迭代在**保持现有功能、API 协议、localStorage 键、所有 DOM id 完全不变**的前提下，对整套前端
做视觉重塑 + 8 项交互改善，达成：
1. 视觉差异化（深色指挥中心 + 文档工作台混合风格，单一青绿强调色）
2. 体感现代化（拖拽、多行输入、消息气泡操作、骨架屏、空状态快捷指令）
3. 架构可维护（chat.html 拆为 chat.html + chat.css + chat.js，chat_state.js / chat_ws.js 不动）
## 用户决策（brainstorming 已确认）
| # | 决策项 | 选定 |
|---|---|---|
| 1 | 视觉风格 | 深色指挥中心 + 文档工作台混合 |
| 2 | 强调色 | 青绿 `#5EEAD4` |
| 3 | 字体策略 | 系统字体栈（不引入 Google Fonts / JetBrains Mono） |
| 4 | 抽屉遮罩 | `backdrop-filter: blur(8px)` |
| 5 | 文件拆分 | B2：chat.html 拆为 chat.html + chat.css + chat.js |
| 6 | 交互改造 | 本轮做 8 项（详见 §四） |
| 7 | 快捷键 | 只做 Esc + Cmd/Ctrl+K |
| 8 | 移动端改造 | **不做**（留到下个迭代） |
| 9 | 消息气泡"重新生成" | **不做**（避免触发后端协议变更） |
| 10 | 主题切换 | 单主题（无 dark/light 切换） |
## 范围
### 做
- 视觉重塑（六大区域，颜色 / 字体 / 间距 / 圆角 / 动效）
- chat.html 拆分为 chat.html + chat.css + chat.js
- 8 项交互改善（见 §四）
- 同步 `docs/design.md` 增加"前端 UI 设计规范"一节
- 追加 `_AI_USAGE_LOG.md` 三条记录（设计 / 实现 / 文档同步）
### 不做
- 移动端侧边栏抽屉化（断点 < 768px 的改造）
- 快捷键 `Cmd+Shift+O` / `Cmd+Shift+S`
- 消息气泡"重新生成"按钮
- 主题切换（dark/light）
- 后端 API 协议变更
- localStorage / sessionStorage 键重命名
- DOM id 变更
## 架构
### 文件结构（B2 拆分后）
```
src/genesis/server/static/
├── chat.html # 仅 DOM 结构
├── chat.css # 新增：所有视觉样式
├── chat.js # 新增：原 chat.html 中 ` 整段
- 末尾：新增 ``
- 末尾：保留 `