2026Technology-Competition/docs/plans/2026-08-28-chat-ui-fixes.md

# 聊天前端 UI 修复计划（3 项）

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans to implement task-by-task.

**Goal:** 修复 3 个 UI 问题：(1) 项目管理抽屉内的「+新建项目」入口不可见 → 强化可见性与渲染鲁棒性；(2) 顶栏标题文本迁移到侧边栏品牌名下方；(3) 折叠侧边栏后折叠按钮遮挡 logo。

**Architecture:** 纯前端改动，仅涉及 `src/genesis/server/static/chat.html`（HTML 结构 + 内嵌 CSS + 内嵌 JS）。无后端、无 schema、无新依赖。

**Tech Stack:** 原生 HTML/CSS/JS（内嵌于 chat.html，无构建步骤、无前端测试框架）；校验用 `node --check` + 浏览器手动核对。

## 根因说明（问题 1）

代码层 `renderDrawerList()`（启动与 `openProjectDrawer → loadDrawerForm` 末尾均调用）确实会渲染「+新建项目」首项，且无 CSS 隐藏它、所有 `pf-*` 字段元素齐全。因此「看不到」是**可发现性问题**：该项与普通项目项外观几乎一致、位于左侧窄列易被忽略；同时若将来 `loadDrawerForm` 抛错会跳过 `renderDrawerList`，导致整列空白。

修复策略：**保留设计已有入口、不另增按钮**（遵循用户「不用再新增」的偏好），仅 (a) 给该项专属样式使其醒目，(b) 加固 `openProjectDrawer` 保证列表必现。

---

## File Structure

- Modify: `src/genesis/server/static/chat.html`
  - HTML：删除 header `<h1>`；侧边栏 `.brand-name` 增加副标题；抽屉「+新建项目」项加 `di-create` 类。
  - CSS：新增 `.brand-sub`、`.drawer-item.di-create` 及其 hover；折叠态 `#sidebar-toggle` / `#session-list` 规则。
  - JS：`renderDrawerList` 首项加 `di-create` 类；`openProjectDrawer` 加固。
- Docs: 本计划文档。

---

### Task 1: 让「+新建项目」可见且必现

**Files:** `src/genesis/server/static/chat.html`

**Interfaces:** Consumes `renderDrawerList`、`openProjectDrawer`、`loadDrawerForm`、`guardDrawerDirty`、`drawerSelected`。
**Produces:** 抽屉左侧顶部始终显示一个虚线蓝底、加粗的「＋ 新建项目」项；即使 `loadDrawerForm` 异常也不影响该列表渲染。

- [ ] **Step 1: 写失败验收（手动）**

浏览器打开（scripts/serve.py --fake）→ 顶栏项目下拉 → 点「+ 项目管理（打开抽屉）」→ 抽屉左侧列表**顶部**应有一个明显区别于项目项的「＋ 新建项目」项，点击进入空白新建表单。

- [ ] **Step 2: 实现 — renderDrawerList 首项加 di-create 类**

替换（656-658）：
```javascript
  let html = '<div class="drawer-item' + (drawerSelected === null ? ' active' : '') + '" data-name="">'
    + '<span class="di-new">+</span><span class="di-name">新建项目</span></div>';
```
为：
```javascript
  let html = '<div class="drawer-item di-create' + (drawerSelected === null ? ' active' : '') + '" data-name="">'
    + '<span class="di-new">＋</span><span class="di-name">新建项目</span></div>';
```

- [ ] **Step 3: 实现 — openProjectDrawer 加固**

替换（589-593）：
```javascript
function openProjectDrawer(projectName) {
  drawerOpen = true;
  toggleProjectSwitcher(false);
  drawer.classList.add('open');
  loadDrawerForm(projectName === undefined ? drawerSelected : projectName);
}
```
为：
```javascript
function openProjectDrawer(projectName) {
  drawerOpen = true;
  toggleProjectSwitcher(false);
  drawer.classList.add('open');
  const sel = (projectName === undefined || projectName === null) ? drawerSelected : projectName;
  try { loadDrawerForm(sel); } catch (e) { console.error(e); }
  renderDrawerList();   // 始终渲染左侧列表（含 +新建项目）
}
```

- [ ] **Step 4: 实现 — CSS 强化 di-create**

在 `.drawer-item .di-new { color: var(--blue); }` 之后插入：
```css
  .drawer-item.di-create {
    border: 1px dashed var(--blue-100); background: var(--blue-50);
    color: var(--blue-dark); font-weight: 700; justify-content: center; gap: 4px;
  }
  .drawer-item.di-create:hover { background: var(--blue-100); border-color: var(--blue); }
```

- [ ] **Step 5: 校验**

Run: `node --check`（抽取 <script> 校验语法）
浏览器核对 Step 1 验收点。

- [ ] **Step 6: 提交**

```bash
git add src/genesis/server/static/chat.html
git commit -m 'fix(chat): 抽屉 +新建项目 入口强化可见性并加固渲染'
```

---

### Task 2: 标题文本迁移

**Files:** `src/genesis/server/static/chat.html`

**Interfaces:** 纯展示层。
**Produces:** header 不再显示「Genesis 概要设计书 Agent」；侧边栏 logo 右侧「Genesis」下方显示「概要设计书做成Agent」。

- [ ] **Step 1: 写失败验收（手动）**

顶栏左侧不再出现旧标题；侧边栏顶部 logo 下方出现两行文字「Genesis」与「概要设计书做成Agent」。

- [ ] **Step 2: 实现 — 删除 header h1**

删除（362）：
```html
    <h1>Genesis 概要设计书 Agent</h1>
```

- [ ] **Step 3: 实现 — 品牌名副标题**

替换（353）：
```html
    <div class="brand-name">Genesis</div>
```
为：
```html
    <div class="brand-name">Genesis<span class="brand-sub">概要设计书做成Agent</span></div>
```

- [ ] **Step 4: 实现 — CSS .brand-sub**

在 `#sidebar.collapsed .brand-name { display: none; }` 之后插入：
```css
  .brand-sub { display: block; font-size: 11px; font-weight: 600; color: var(--gray-500); margin-top: 2px; letter-spacing: 0; }
```

- [ ] **Step 5: 校验**

`node --check` + 浏览器核对 Step 1。

- [ ] **Step 6: 提交**

```bash
git add src/genesis/server/static/chat.html
git commit -m 'fix(chat): 标题文本从顶栏迁移至侧边栏品牌名下方'
```

---

### Task 3: 折叠按钮不再遮挡 logo

**Files:** `src/genesis/server/static/chat.html`

**Interfaces:** 纯 CSS。
**Produces:** 侧边栏折叠态下，折叠按钮移至左下角，与顶部居中的 logo 分离；会话列表底部留白避免压住末项。

- [ ] **Step 1: 写失败验收（手动）**

折叠侧边栏：顶部 logo 完整可见，不被折叠按钮遮挡；展开态外观不变。

- [ ] **Step 2: 实现 — 折叠态定位**

在 `#sidebar.collapsed { width: 56px; }` 之后插入：
```css
  #sidebar.collapsed #sidebar-toggle { top: auto; bottom: 14px; right: auto; left: 14px; }
  #sidebar.collapsed #session-list { padding-bottom: 52px; }
```

- [ ] **Step 3: 校验**

`node --check` + 浏览器核对 Step 1。

- [ ] **Step 4: 提交**

```bash
git add src/genesis/server/static/chat.html
git commit -m 'fix(chat): 折叠态将切换按钮移至左下角避免遮挡 logo'
```

---

## Self-Review

- 问题 1 保留设计已有「+新建项目」入口（不新增按钮），仅做可见性强化 + 渲染加固，符合用户偏好。
- 问题 2 删除 header h1 并在侧边栏品牌名加副标题；折叠态 `.brand-name{display:none}` 已自动隐藏副标题。
- 问题 3 仅改折叠态 CSS，展开态 `right:-14px; top:18px` 不变，logo 在左、按钮在右本不重叠。
- 三项均为展示层改动，不影响后端与既有交互逻辑；`node --check` 通过即语法安全。