393 lines
22 KiB
Markdown
393 lines
22 KiB
Markdown
# Fischer AgentKit — 聊天主区 VI 重梳与新功能适配 (Requirements)
|
||
|
||
**Date:** 2026-06-18
|
||
**Status:** Draft
|
||
**Scope:** 聊天主区布局 + 右屏可收起 Tab 面板 + @team / @board 消息适配
|
||
**Out of scope:** 侧边栏 (ChatSidebar)、顶部 (TopNav)、抽屉 (右抽屉)、移动端布局
|
||
|
||
---
|
||
|
||
## 1. Context & Problem
|
||
|
||
### 1.1 现状
|
||
|
||
- 主色 `#6366f1` (indigo) —— Notion 风格暖灰基底，但品牌感弱，与「Fischer」德系工业严谨感的名字不匹配
|
||
- 聊天主区是简单的气泡 + 流式步骤，缺少对**复杂 AI 响应**（@team 计划、@board 多轮讨论、工具调用链、错误恢复）的精细化表达
|
||
- 新功能（@board 私董会、@team 专家团）已有后端事件流（`board_started` / `expert_speech` / `round_summary` / `team_formed` / `plan_update` / `phase_started` ...），但前端在 `ChatMessage.vue` 中只是把它们当成普通消息流式渲染，**没有专属视觉表达**
|
||
- 私董会当前色 `#8E44AD` 偏沉，与整体调性割裂
|
||
|
||
### 1.2 目标
|
||
|
||
- 形成 **「克制中性 + 强调色做语义信号」** 的 VI 体系 —— 文本是主体，色彩是信号
|
||
- 重新设计聊天主区布局：常规气泡 + 复杂事件拆为 card（Cursor / Trae 范式）
|
||
- 为 @team / @board / 工具调用 / 错误四类复杂事件提供专属 card 视觉语言
|
||
- 保留右屏可收起 Tab 面板（监控 / 技能 / 系统 / 知识库），但样式与新 VI 一致
|
||
- 产出一份**静态高保真 mockup**（独立 preview 路由），供 review 后再进入实施
|
||
|
||
### 1.3 设计哲学
|
||
|
||
> **Notion 的留白 + Cursor 的复杂事件 card + Trae 的可收起右屏 + 我们自己的中性克制**
|
||
|
||
- **Notion**：暖灰基底 (`#fbfbfa` / `#ededec`)，柔和阴影 (low-opacity, more spread)，暖色代码高亮 (Catppuccin Mocha)
|
||
- **Cursor**：复杂事件（agent 计划、工具调用、错误）拆为独立 card，不挤在普通消息流中
|
||
- **Trae**：右屏 Tab 面板可收起，主区最大化
|
||
- **我们自己的**：**主色由 indigo 改为近黑 + 中性灰**，强调色 (accent) 仅用于语义信号
|
||
|
||
---
|
||
|
||
## 2. Design Language Specification
|
||
|
||
### 2.1 Color System (Light Theme)
|
||
|
||
| Token | Value | 用途 |
|
||
|---|---|---|
|
||
| `--bg-primary` | `#ffffff` | 主背景 (消息区、card) |
|
||
| `--bg-secondary` | `#fbfbfa` | 次背景 (整体 app shell、输入框) |
|
||
| `--bg-tertiary` | `#f7f7f5` | 三级背景 (hover、嵌套 card) |
|
||
| `--bg-code` | `#1e1e2e` | 代码块背景 (Catppuccin Mocha) |
|
||
| `--text-primary` | `#1a1a1a` | 主文字 (95% 文本) |
|
||
| `--text-secondary` | `#4a4a4a` | 次文字 (元数据、辅助) |
|
||
| `--text-tertiary` | `#6b6b6a` | 三级文字 (时间戳、状态) |
|
||
| `--text-placeholder` | `#9b9b9a` | 占位符 |
|
||
| `--border-color` | `#ededec` | 默认边框 |
|
||
| `--border-color-hover` | `#dfdfde` | hover 边框 |
|
||
|
||
**强调色 (新增)：**
|
||
|
||
| Token | Value | 语义 | 使用场景 |
|
||
|---|---|---|---|
|
||
| `--accent-team` | `#3b82f6` | 专家团协作 (中性蓝) | @team plan card、expert avatar、team 状态条 |
|
||
| `--accent-board` | `#a855f7` | 私董会讨论 (琥珀/紫) | @board banner、moderator 头像、board round 进度 |
|
||
| `--accent-team-soft` | `#dbeafe` | 蓝轻量背景 | @team card 顶条、chip |
|
||
| `--accent-board-soft` | `#f3e8ff` | 紫轻量背景 | @board card 顶条、moderator chip |
|
||
|
||
**语义色 (保留)：**
|
||
|
||
| Token | Value | 语义 |
|
||
|---|---|---|
|
||
| `--color-success` | `#22c55e` | 工具调用成功、阶段 completed |
|
||
| `--color-warning` | `#f59e0b` | 主持人小结 (round summary) |
|
||
| `--color-error` | `#ef4444` | 错误、阶段 failed |
|
||
| `--color-info` | `#3b82f6` | 普通信息 |
|
||
|
||
> 关键变化：**移除 `--color-primary` (indigo) 作为通用主色**，改用 `--accent-team` / `--accent-board` 作为功能语义色。Ant Design 的 `colorPrimary` token 改为 `#1a1a1a` (近黑)，让通用 UI (按钮、菜单选中) 都是中性。
|
||
|
||
### 2.2 Color System (Dark Theme)
|
||
|
||
| Token | Value |
|
||
|---|---|
|
||
| `--bg-primary` | `#1a1a1a` |
|
||
| `--bg-secondary` | `#1f1f1f` |
|
||
| `--bg-tertiary` | `#2a2a2a` |
|
||
| `--text-primary` | `#fbfbfa` |
|
||
| `--text-secondary` | `#cececd` |
|
||
| `--accent-team` | `#60a5fa` (亮蓝) |
|
||
| `--accent-team-soft` | `rgba(59, 130, 246, 0.15)` |
|
||
| `--accent-board` | `#c084fc` (亮紫) |
|
||
| `--accent-board-soft` | `rgba(168, 85, 247, 0.15)` |
|
||
|
||
### 2.3 Typography
|
||
|
||
- 主字体：现有 `font-family` 不变（系统字体栈）
|
||
- 字体大小：保留现有 token (`--font-xs` ~ `--font-xl`)
|
||
- **新增**：`--font-mono` (代码字体, SF Mono / Monaco / Consolas)
|
||
- **新增**：`--leading-message: 1.65` —— 消息正文行高（比现有 `--leading-normal: 1.5` 更松，提升长文阅读体验）
|
||
|
||
### 2.4 Spacing & Layout
|
||
|
||
- 间距：保留现有 4/8/12/16/20/24/32 scale
|
||
- 圆角：保留现有 4/6/10/14 scale
|
||
- **新增**：`--radius-card: 12px` (复杂 card 圆角，比 chat bubble 的 `--radius-lg: 10px` 略大)
|
||
- **新增**：`--space-message-gap: 24px` (消息之间间距)
|
||
|
||
### 2.5 Shadow
|
||
|
||
- 保留现有 4 档 shadow (sm/md/lg/xl)
|
||
- **新增**：`--shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04)` (复杂 card 边框+微阴影组合，Notion 风格)
|
||
|
||
---
|
||
|
||
## 3. Chat Main Area — Layout & Message Architecture
|
||
|
||
### 3.1 整体布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ TopNav (48px) │
|
||
├──────────┬──────────────────────────────────┬───────────┤
|
||
│ │ │ │
|
||
│ Sidebar │ Chat Main Area │ Right │
|
||
│ 280px │ (resizable) │ Panel │
|
||
│ │ │ (320px) │
|
||
│ │ ┌────────────────────────────┐ │ Tab: │
|
||
│ │ │ BoardStatusView (顶部状态) │ │ - 监控 │
|
||
│ │ ├────────────────────────────┤ │ - 技能 │
|
||
│ │ │ │ │ - 系统 │
|
||
│ │ │ Message List │ │ - 知识库 │
|
||
│ │ │ (user / assistant 气泡) │ │ │
|
||
│ │ │ + TeamPlanCard │ │ 可收起 → │
|
||
│ │ │ + BoardRoundCard │ │ │
|
||
│ │ │ + ToolCallCard │ │ │
|
||
│ │ │ + ThinkingBlock │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ ├────────────────────────────┤ │ │
|
||
│ │ │ ChatInput (输入框) │ │ │
|
||
│ │ └────────────────────────────┘ │ │
|
||
└──────────┴──────────────────────────────────┴───────────┘
|
||
```
|
||
|
||
- 主区最大宽度 `max-width: 860px` 居中（防止超宽屏阅读疲劳），左右侧贴边留白用 `--space-4`
|
||
- 右屏默认展开 320px，可收起至 0（折叠按钮在主区右上角，IconNav 同步）
|
||
- 消息垂直节奏：消息之间 `--space-message-gap: 24px`；气泡内部 padding `--space-3 var(--space-4)`
|
||
|
||
### 3.2 Message Types & Visual Treatment
|
||
|
||
| Type | Trigger | 视觉范式 | 颜色信号 | 关键元素 |
|
||
|---|---|---|---|---|
|
||
| **user** | `role: 'user'` | 60% 宽右对齐气泡 | 中性灰背景 `--bg-tertiary` | 文本 + 附件 pill + hover 显示「编辑/复制」 |
|
||
| **assistant (text)** | `role: 'assistant'`, `message_type: 'chat'` | 90% 宽左对齐 flat (无气泡) | 无 | Markdown 渲染 + 代码高亮 + 引用块 |
|
||
| **assistant (thinking)** | `thinking` 字段非空 | 折叠块 (Cursor 风格) | 灰色 `--text-tertiary` | 「已思考 N 秒」可点击展开 |
|
||
| **tool call** | `tool_calls[]` 非空 | 嵌套 card (边框 + 阴影) | 中性 + 成功绿 / 错误红 | 工具名 + 状态点 (●) + 折叠参数/结果 |
|
||
| **team plan** | `team_formed` / `plan_update` | 跨整行大 card | **蓝色顶条** (`--accent-team`) | Lead expert 头像 + 阶段时间线 + 状态图标 |
|
||
| **team expert step** | `expert_step` | 内嵌 plan card 的子项 | 蓝 | expert 头像 + 当前步骤描述 |
|
||
| **team expert result** | `expert_result` | 内嵌 plan card 的子项 | 蓝 | 折叠结果块 (类似 tool call) |
|
||
| **team synthesis** | `team_synthesis` | 跨整行结论 card | 蓝 | 渐变顶条 + 总结文本 |
|
||
| **board started** | `board_started` | 跨整行 banner card | **紫色顶条** (`--accent-board`) | 主题 + 专家 chips + 主持人标签 |
|
||
| **board expert speech** | `expert_speech` | 90% 宽左对齐，带 expert 头像 chip | 紫 | 头像 + 第 N 轮 + 角色标签 (主持/专家) |
|
||
| **board round summary** | `round_summary` | 主持人头像 + 总结文本 | 紫轻背景 `--accent-board-soft` | 折叠块 (默认收起避免噪声) |
|
||
| **board conclusion** | `board_concluded` + `final_answer` | 跨整行结论 card | 紫渐变顶条 | 共识 + 分歧 + 决策建议 |
|
||
| **error** | `error` | 跨整行 alert 样式 | 红色 `--color-error` | 错误信息 + 「重试」按钮 |
|
||
|
||
### 3.3 关键交互细节
|
||
|
||
**气泡 (常规)：**
|
||
- user 气泡 hover：显示「编辑」「复制」图标
|
||
- assistant 文本 hover：底部浮现操作条「复制」「重新生成」「反馈 👍👎」
|
||
- 流式光标：文本末尾 2px 宽闪烁竖线 (Cursor 风格) 或 8x8 圆点 (Claude 风格) —— **选竖线，更克制**
|
||
- Markdown 实时渲染：流式过程中不渲染重型 syntax highlight，避免闪烁
|
||
|
||
**Thinking Block (新增)：**
|
||
- 默认收起，显示「已思考 N 秒」+ chevron
|
||
- 展开后显示 thinking 文本 (灰色)
|
||
- 动画：展开时 height transition 200ms
|
||
|
||
**Tool Call Card：**
|
||
- 默认收起 (只显示工具名 + 状态点)
|
||
- 点击展开：参数 (折叠) + 结果 (折叠)
|
||
- 错误：状态点变红 + 行内错误信息
|
||
- 成功：状态点变绿
|
||
- 嵌套调用：缩进 16px，最多嵌套 3 层
|
||
|
||
**Team Plan Card (新增)：**
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ ▌ Lead: Sarah Chen (技术负责人) [In Progress] │ ← 蓝色顶条 4px
|
||
├──────────────────────────────────────────────────────┤
|
||
│ 阶段 1: 数据模型设计 ● running │
|
||
│ ├─ 张三 (后端) 正在分析 schema... │
|
||
│ └─ 完成时间: ~2 min │
|
||
│ │
|
||
│ 阶段 2: API 实现 ○ pending (依赖 阶段1) │
|
||
│ 阶段 3: 测试 ○ pending (依赖 阶段2) │
|
||
├──────────────────────────────────────────────────────┤
|
||
│ 进度: ████████░░░░░░ 45% 当前: 阶段 1 / 3 │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Board Banner (新增)：**
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ ▌ 🏛️ 私董会 — 主题：「是否应投入资源做这个功能」 │ ← 紫色顶条 4px
|
||
├──────────────────────────────────────────────────────┤
|
||
│ 专家: 🚀 Elon 🛒 Jeff 🧠 Charlie 💻 Paul │
|
||
│ [主持人] Elion Musk │
|
||
│ 轮次: 第 2 / 5 [████████░░░░] 40% │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Board Round Card (单轮发言)：**
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ 🚀 Elon Musk · 第 2 轮 · 主持人 │ ← 紫色边 1px 左侧
|
||
│ │
|
||
│ 我认为第一性原理是... │
|
||
│ [长文本...] │
|
||
│ 09:32 │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 4. Right Panel (Tab Panel)
|
||
|
||
### 4.1 行为
|
||
|
||
- 位置：主区右侧，初始 320px 宽
|
||
- Tab：监控 / 技能 / 系统 / 知识库 (4 个，对应附件图)
|
||
- 折叠按钮：主区右上角 (ChatView 顶部) 一个 chevron 按钮，折叠后宽度 0，折叠按钮变为「展开」chevron
|
||
- 折叠状态记忆：localStorage 持久化
|
||
- 拖拽：可选 (后续迭代，本期不做)
|
||
|
||
### 4.2 样式
|
||
|
||
- 背景：`--bg-secondary` (与主区背景区分但不抢戏)
|
||
- 顶部 Tab bar：48px 高，左对齐文字 Tab，激活 Tab 下方 2px 蓝色 (或当前 Tab 主题色) 指示条
|
||
- 内边距：`var(--space-3) var(--space-4)`
|
||
- 卡片：与主区 card 一致 (12px 圆角 + 1px 边框)
|
||
|
||
### 4.3 Tab 内容 (沿用现有数据)
|
||
|
||
- **监控**：4 个 metric card (服务可用性 / 平均响应时间 / 请求总数 / 错误率) + 资源使用列表 + 服务状态列表 + 错误趋势图
|
||
- **技能**：技能列表 (来自 `useSkillsStore`)，点击展开详情
|
||
- **系统**：系统信息 (CPU / 内存 / 磁盘)
|
||
- **知识库**：知识库源列表 + 检索测试入口
|
||
|
||
---
|
||
|
||
## 5. Input Area
|
||
|
||
### 5.1 现状
|
||
|
||
- 输入框 + 发送按钮 + 模型选择 + (新增) 私董会按钮
|
||
|
||
### 5.2 改造
|
||
|
||
- **私董会按钮 → 重命名为「专家团」** 按钮，紫色 `--accent-board` 高亮
|
||
- 新增「**@team** 团队」按钮 (蓝色 `--accent-team`)，与私董会按钮并列
|
||
- 两个按钮都点击打开对应 Modal (已有的 `BoardMeetingModal.vue` + 新建 `TeamMeetingModal.vue`)
|
||
- 拖拽附件：拖入文件到输入框显示「拖放以附加」浮层
|
||
- @mention 自动补全：现有 `MentionDropdown` 保留
|
||
|
||
### 5.3 入口设计
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────┐
|
||
│ [📎 附件] [👥 专家团] [🏛️ 私董会] │
|
||
├──────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 输入消息... │
|
||
│ │
|
||
├──────────────────────────────────────────────────┤
|
||
│ [模型: Claude 4 Sonnet ▾] [清空] [发送 →] │
|
||
└──────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 6. Components to Build / Modify
|
||
|
||
### 6.1 修改现有
|
||
|
||
| 文件 | 改动 |
|
||
|---|---|
|
||
| `src/agentkit/server/frontend/src/styles/tokens.css` | 新增 `--accent-team*` / `--accent-board*` / `--shadow-card` 等 token；移除 `--color-primary` 作为主色 (保留作为渐变背景) |
|
||
| `src/agentkit/server/frontend/src/styles/theme.ts` | `colorPrimary` 改为近黑；新增 accent 主题组件配置 |
|
||
| `src/agentkit/server/frontend/src/views/ChatView.vue` | 主区 max-width 居中 + 右屏折叠按钮 + 整体留白节奏调整 |
|
||
| `src/agentkit/server/frontend/src/components/chat/ChatMessage.vue` | 重构分发：按 `message_type` 路由到对应子组件 |
|
||
| `src/agentkit/server/frontend/src/components/chat/ExpertMessage.vue` | 适配新 VI |
|
||
| `src/agentkit/server/frontend/src/components/chat/ToolCallCard.vue` | 已有，确认样式对齐新 token |
|
||
| `src/agentkit/server/frontend/src/components/chat/ThinkingBlock.vue` | 已有，新增折叠动画 |
|
||
| `src/agentkit/server/frontend/src/components/chat/BoardStatusView.vue` | 用 `--accent-board` 替换 `#8E44AD` |
|
||
| `src/agentkit/server/frontend/src/components/chat/ExpertTeamView.vue` | 用 `--accent-team` 替换默认色 |
|
||
| `src/agentkit/server/frontend/src/components/chat/ChatInput.vue` | 新增「专家团」按钮 (蓝色) + 重命名「私董会」按钮为紫色 |
|
||
| `src/agentkit/server/frontend/src/components/chat/BoardMeetingModal.vue` | 适配新 VI |
|
||
|
||
### 6.2 新增组件
|
||
|
||
| 文件 | 用途 |
|
||
|---|---|
|
||
| `src/agentkit/server/frontend/src/components/chat/TeamPlanCard.vue` | @team 计划可视化 (时间线 + 阶段 + 进度) |
|
||
| `src/agentkit/server/frontend/src/components/chat/BoardRoundCard.vue` | @board 单轮发言 (专家头像 + 轮次 + 文本) |
|
||
| `src/agentkit/server/frontend/src/components/chat/BoardConclusionCard.vue` | @board 最终结论 (共识 + 分歧 + 建议) |
|
||
| `src/agentkit/server/frontend/src/components/chat/ErrorCard.vue` | 错误提示 card (含重试按钮) |
|
||
| `src/agentkit/server/frontend/src/components/chat/UserBubble.vue` | user 消息气泡 (提取自 ChatMessage) |
|
||
| `src/agentkit/server/frontend/src/components/chat/AssistantBubble.vue` | assistant 消息 flat 块 (提取自 ChatMessage) |
|
||
| `src/agentkit/server/frontend/src/components/chat/TeamMeetingModal.vue` | @team 专家团选择 Modal (对标 BoardMeetingModal) |
|
||
| `src/agentkit/server/frontend/src/components/layout/RightPanel.vue` | 可折叠右屏 Tab 面板 |
|
||
| `src/agentkit/server/frontend/src/views/ChatPreviewView.vue` | 静态高保真 mockup 页面 (供 review) |
|
||
|
||
### 6.3 Mockup 页面 (Preview View)
|
||
|
||
6 个静态场景，**全部用假数据**：
|
||
|
||
1. **欢迎页** —— 居中 logo + 4 个能力提示 + 输入框预填「@team:tech_lead,frontend_engineer,backend_engineer 设计一个用户认证系统」
|
||
2. **User 消息 + Assistant 文本 + 代码块** —— user 提问，assistant 流式响应含 markdown + 代码
|
||
3. **@team 计划 + 阶段进行中** —— TeamPlanCard 显示 3 阶段，第 1 阶段 running，专家子项展开
|
||
4. **@board 多轮讨论** —— BoardBanner + 3 轮不同专家发言 + 1 个主持人小结 + 1 个最终结论
|
||
5. **工具调用链** —— 嵌套 2 层 tool call，状态点变化
|
||
6. **错误态** —— ErrorCard + 「重试」按钮
|
||
|
||
---
|
||
|
||
## 7. Dependencies & Assumptions
|
||
|
||
### 7.1 Assumptions
|
||
|
||
- A1: 用户已确认主色方向为「近黑 + 强调色」
|
||
- A2: 用户已确认中等改造范围 (聊天主区 + 右屏)，不碰侧边栏/顶部/抽屉
|
||
- A3: 用户已确认混合消息范式 (气泡 + card)
|
||
- A4: 现有后端事件 (team_formed / expert_step / board_started / expert_speech / round_summary / board_concluded) 的 payload 字段不变
|
||
- A5: 现有 WebSocket 协议不变，只改前端渲染
|
||
- A6: 暗色模式 token 一并提供 (本需求重点是浅色，深色保持 token 同步)
|
||
- A7: 不实现 message editing / branch conversation (Trae 独有)
|
||
- A8: 不实现图片/文件 inline 渲染优化 (现有 `FilePreview.vue` 够用)
|
||
|
||
### 7.2 Risks
|
||
|
||
- **R1 (高)**: ChatMessage.vue 重构可能影响现有 unit test —— 需检查测试覆盖
|
||
- **R2 (中)**: 大量组件修改可能引入回归 —— 建议每组件单独 PR
|
||
- **R3 (中)**: mockup 评审 → 实施可能有偏差 —— mockup 应在 PR 之前完成
|
||
|
||
### 7.3 Out of Scope (Explicit)
|
||
|
||
- 侧边栏 (ChatSidebar.vue) 重构
|
||
- 顶部导航 (TopNav.vue) 重构
|
||
- 移动端响应式优化
|
||
- 实际 WebSocket 数据流对接 (mockup 阶段)
|
||
- 可访问性 (a11y) 审计
|
||
- 性能优化 (虚拟滚动、消息懒加载) —— 独立 PR
|
||
|
||
---
|
||
|
||
## 8. Success Criteria
|
||
|
||
### 8.1 完成定义
|
||
|
||
- [ ] 静态 mockup 页面 (`/agent/preview`) 6 个场景全部可看可交互
|
||
- [ ] `tokens.css` + `theme.ts` 全部新 token 已就位且通过 lint
|
||
- [ ] 所有改动组件 `vue-tsc --noEmit` 通过
|
||
- [ ] 所有改动组件 `ruff check` 通过 (Python 端)
|
||
- [ ] 现有 unit test 不回归 (`pytest tests/unit/ -x -q`)
|
||
- [ ] 暗色模式 token 同步更新
|
||
- [ ] 视觉 review 通过 (用户签字)
|
||
|
||
### 8.2 验收检查点
|
||
|
||
1. **Mockup review** (核心验收)：用户看 `/agent/preview`，对 6 个场景逐一 review，决定是否进入实施
|
||
2. **Token review**：对照本规范 §2 确认 token 命名和值
|
||
3. **组件 review**：每个新组件单独 PR 走 code review
|
||
|
||
---
|
||
|
||
## 9. Open Questions
|
||
|
||
- Q1: @team 蓝 (`#3b82f6`) vs @board 紫 (`#a855f7`) 的分配是否调换？当前：蓝=协作，紫=深度
|
||
- Q2: 流式光标样式：竖线 vs 圆点？提议：竖线 (更克制)
|
||
- Q3: 私董会按钮文字：是「私董会」还是「@board 讨论」？提议：「私董会」(短)
|
||
- Q4: 专家团按钮文字：是「专家团」「@team」「召唤专家」？提议：「专家团」
|
||
- Q5: 是否需要「消息引用」功能 (Trae 的 <#file> 引用)？提议：本期不做
|
||
|
||
---
|
||
|
||
## 10. Reference
|
||
|
||
- 参考设计语言：Notion (留白 / 暖灰 / 柔和阴影), Cursor (复杂事件 card), Trae (可收起右屏 + Side Chat)
|
||
- 行业共识 (setproduct 2026-05-29)：
|
||
- Full-width is current best practice for serious AI chat. Bubbles signal "messenger" and undermine the tool framing.
|
||
- Use subtle background shading or alignment to separate user and assistant messages instead.
|
||
- Streaming cursor must exist; dropping it is a common mistake.
|
||
- Markdown rendering during stream: don't render heavy syntax highlight during streaming to avoid flickering.
|
||
- 来源：[Designing AI chat interfaces: Anatomy, patterns, pitfalls](https://www.setproduct.com/blog/ai-chat-interface-ui-design)
|
||
- 来源：[Trae CN 2026 完全指南](https://blog.csdn.net/the_finals/article/details/161893557)
|
||
- 来源：[Claude Code vs Cursor 2026](https://www.aidesigner.ai/blog/claude-code-vs-cursor)
|