read the shell prompt again and stop the reconnect loop
The terminal was the last surface in the chat tool panel still wearing someone else's design system, and it had two defects underneath that. The font stack named no Nerd Font, so the private-use glyphs a default zsh prompt draws its separators and branch marks from rendered as notdef boxes. The ~ and the path after it drew fine, which is what made it read as a font bug rather than a missing-glyph one. Both components also carried their own copy of the palette -- four themes in one, fifteen in the other, drifting, defaulting to a near-black that appears nowhere in the token set. Changing --code-bg did nothing to the terminal because the terminal never read a token. They now share one module built from the tokens, so an error in the terminal is the same red as an error anywhere else. TerminalView reconnected on a bare setTimeout with no attempt cap and no error surface, retrying invisibly every three seconds forever against an unreachable backend. It now shares the panel's cap of three and renders the same retry affordance, counting down again once a session is created. Also drops a dead ws.onopen assignment and a 21px padding that was on no spacing scale, and records what the chat page still owes the prototype.
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
# 对话页面待开发事项
|
||||
|
||||
对话台（ChatView）是全项目离 CYBER 原型最远的一页。设置页那套骨架已经落地，
|
||||
但对话台没有套上 —— 全仓库只有 `SettingsView.vue` 在用 `cy-*` 骨架类。
|
||||
|
||||
本文记录已核实的差距和推进顺序。所有条目均已对照
|
||||
`prototype_reference/hermes-ui-cyber-chat.html` 与真实组件确认，不是推测。
|
||||
|
||||
## 为什么对话台排在最前面
|
||||
|
||||
对话台是结构最复杂的一页：一个页面里有会话列表、气泡流、审批卡、输入区、
|
||||
右侧两个面板，六种结构各自的视觉规则都不同。骨架层没套上来，意味着这六块
|
||||
各自沿用迁移前的样子，霓虹暗色的辨识度出不来。
|
||||
|
||||
令牌层和控件层已经达标 —— `styles/global.scss` 里的 `neon-sheen`、
|
||||
`neon-pulse`、各处 `text-shadow` 都在。**缺的是页面骨架层和组件级语义配色**，
|
||||
也就是原型第 3、7、9 三节。
|
||||
|
||||
## 现状：骨架类使用情况
|
||||
|
||||
`cy-view` / `cy-panel` / `cy-tabs` / `cy-sec-t` 的全仓库使用点：
|
||||
|
||||
| 文件 | 位置 |
|
||||
| --- | --- |
|
||||
| `views/hermes/SettingsView.vue` | `cy-tabs`、`cy-panel`、`cy-panel-b` |
|
||||
| `styles/global.scss` | 定义处 |
|
||||
|
||||
对话台相关组件 —— `ChatPanel.vue`、`MessageList.vue`、`MessageItem.vue`、
|
||||
`ChatInput.vue`、`SessionListItem.vue` —— **一个都没用**。
|
||||
|
||||
## 任务清单
|
||||
|
||||
### P0 · 修 rainbow-glow（违反三色语义规则）
|
||||
|
||||
一次动画里四种语义色同时在闪，直接违反「同屏内每种颜色只承担一种含义」。
|
||||
硬编码值，未走令牌。
|
||||
|
||||
三处重复定义，需要收敛成一处：
|
||||
|
||||
| 文件 | 行 |
|
||||
| --- | --- |
|
||||
| `components/hermes/chat/MessageItem.vue` | `1523`（定义）、`1451`（调用） |
|
||||
| `components/hermes/chat/SessionListItem.vue` | `409`（定义）、`395`（调用） |
|
||||
| `components/hermes/group-chat/GroupMessageItem.vue` | `1051`（定义）、`1114`（调用） |
|
||||
|
||||
当前色值循环：`#ff6b6b` → `#feca57` → `#48dbfb` → `#ff9ff3` → 回环。
|
||||
|
||||
处理方向：按调用场景收敛到单色。`.speech-playing` 是语音播放态，
|
||||
语义上属于「机器在动」，应改用 `--success`，去掉循环。
|
||||
|
||||
### P1 · 组件级语义配色
|
||||
|
||||
| 项 | 原型 | 真实实现 | 差距 |
|
||||
| --- | --- | --- | --- |
|
||||
| 发送键扫光 | 原型 133-140：28×26，青管壁 + `sheen` 每 3.4s 扫过 | `ChatInput.vue:1765-1783`：30×30，`border: 0 !important` + `box-shadow: none !important`，禁用态 `#9f9f9f` 纯灰 | **未实现**，且被 `!important` 显式压制 |
|
||||
| 气泡 role 配色 | 原型 216-227：用户=青、助手=绿，助手气泡左缘一道 `lime-line` | `MessageItem.vue` 无 role 配色规则 | **未实现** |
|
||||
| LED 指示灯 | 原型 151-156：7px 圆点 + 发光 + 呼吸动画 | 全局无 `.led` 类 | **未实现** |
|
||||
| 会话列表当前项 | 原型 190-192：青软底 + 左侧 2px 发光条 | `SessionListItem.vue:288`：`box-shadow: 0 0 0 3px` 描边 | 形似，神韵不同 |
|
||||
| 顶栏青色微光 | 原型 200-201：`radial-gradient` 压顶 | 无 | **未实现** |
|
||||
| 审批卡橙区 | 原型 264-267：橙边 + 内发光 | `MessageList.vue:942` 有 `approval-pulse`，非原型那套橙语义区 | 部分 |
|
||||
| 上下文余量条 | 原型 273-278：绿→橙→红三段 | `ChatInput.vue` 有 context meter | 已有，分段配色待确认 |
|
||||
|
||||
### P2 · 响应式
|
||||
|
||||
原型 166-177 定义了两档断点：
|
||||
|
||||
- `≤1180px`：Outline 从挤压主区改为浮层覆盖（`position: absolute`）
|
||||
- `≤900px`：会话侧栏整体隐藏，顶栏 `.ws-tag` 隐藏
|
||||
|
||||
对话台真实实现是否已有等价断点，未核实。
|
||||
|
||||
## 已知原型侧问题（不是待开发项）
|
||||
|
||||
以下原型自身与真实实现不符，接入时以真实实现为准，不要照抄原型：
|
||||
|
||||
- **会话来源标签**：原型列了 8 种，真实只有 4 种
|
||||
（`api_server` / `cli` / `global_agent` / `workflow`，见
|
||||
`stores/hermes/chat.ts`）。原型里的 `cron` / `channel` / `group_chat` /
|
||||
`terminal` / `file` / `kanban` 不存在。
|
||||
- **`moa` 作为气泡 role**：原型写进「role 全集」，但真实 `Message.role` 是
|
||||
5 元联合类型（`stores/hermes/chat.ts:47`）。`moa` 是 `display_role`，
|
||||
渲染时被映射成 `system`（同文件 `:483`）。原型的 `.bubble-row.moa` 和
|
||||
`AV.moa = '◇'` 都应删。
|
||||
- **Outline 的「附件」区块**：原型 578-580 有，真实 `OutlinePanel.vue:82-111`
|
||||
只产出「用户提问 + h1/h2/h3 标题」两类条目，没有附件概念。
|
||||
- **会话列表 `⌕` 搜索按钮**：原型 498 有，全项目无会话搜索功能。
|
||||
- **顶栏副标题 `01JQ8F2K · default profile`**：原型 618 有，真实 header 只有
|
||||
单个 `headerTitle` 字符串（`ChatPanel.vue:307-311`），无第二行。
|
||||
- **`m.reasoning` 作为消息字段**：原型当作字段，实际是
|
||||
`utils/thinking-parser.ts:51` 从 `content` 里正则摘 `<think>` 标签得到。
|
||||
折叠交互是真的，数据结构是假的。
|
||||
- **`⇤` 语义错位**：原型 615 画成「返回」，真实同位置是切换会话侧栏显隐。
|
||||
- **`~/work/hermes-ui` 完整路径**：真实 `workspace-badge` 只显示 basename
|
||||
（`ChatPanel.vue:1599`）。
|
||||
- **顶栏常驻 `streaming` tag**：真实 streaming 标记在会话列表项上
|
||||
（`ChatPanel.vue:1209`），不在 header。
|
||||
|
||||
## 执行顺序建议
|
||||
|
||||
1. **P0 rainbow-glow** —— 范围明确、风险低、3 处收敛成 1 处。
|
||||
2. **P1 骨架 + 语义色** —— 工作量最大。`ChatPanel.vue` 2300+ 行、
|
||||
`MessageItem.vue` 2100+ 行，套骨架要动结构不只是样式，建议逐块推进，
|
||||
每块单独验证。
|
||||
3. **P2 响应式** —— 等 P1 的布局稳定后再做，否则要返工。
|
||||
|
||||
## 验证基线
|
||||
|
||||
改动前后都应跑：
|
||||
|
||||
```bash
|
||||
npm run harness:check
|
||||
npm run test # 当前 277 文件 / 2049 通过
|
||||
npm run test:e2e # 当前 35 通过
|
||||
npm run build
|
||||
```
|
||||
|
||||
`chat/` 属聊天链，改动需要 `docs/chat-chain-changes/<date>-<slug>.md` 片段，
|
||||
`harness:check` 会强制校验。
|
||||
Reference in New Issue
Block a user