Back to Qwen Code

TUI 间距优化 PR2 — 半行色带与紧凑间距

.qwen/design/tui-user-message-half-line-pr2.md

0.18.03.0 KB
Original Source

TUI 间距优化 PR2 — 半行色带与紧凑间距

背景

PR1 通过去除工具组内部多余空行,初步收紧了 TUI 垂直间距。但在实际使用中仍有两个体验问题:

  1. 用户消息与助手回复之间缺少视觉分界 — 长对话中难以快速定位"我的提问从哪里开始"
  2. 块间距仍然偏大 — 问答交替处各有一整行空白,浪费屏幕空间

本次改动

1. 用户消息半行色带

在用户消息上下各添加一条半高的淡色线条,内容区域设置同色 backgroundColor,形成三层无缝色带:

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄   ← foreground = bandColor(底半格着色)
> 用户的提问内容              ← backgroundColor = bandColor(整行背景)
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀   ← foreground = bandColor(顶半格着色)
  • 颜色通过 subtleBandColor() 计算:在背景色基础上做 6% 纯亮度偏移(暗色终端 → 稍亮,浅色终端 → 稍暗),不引入色相变化
  • 不支持 24 位色的终端 / 屏幕阅读器 / NO_COLOR 环境自动降级为普通显示(marginTop=1)
  • 负宽度/零宽度安全保护

2. 收紧问答间距

位置改动前改动后
用户消息上方1 行空白0(由色带提供视觉分隔;降级时保留 marginTop=1)
模型输出上方1 行空白1 行空白(保留,区分思考过程和最终输出)
工具调用/状态消息上方1 行空白0
思考文本末尾可能有多余换行trimEnd() 避免双空行

同一轮对话内的"回复 → 工具调用 → 回复"序列不再有多余空行,信息更紧凑连贯。

效果对比

改动前:

(1 行空白)
> 帮我读取 package.json
(1 行空白)
✦ 好的,我来读取文件。
(1 行空白)
┌ Read package.json ─────────┐
│ ✓ Read  package.json       │
└────────────────────────────┘
(1 行空白)
✦ 文件内容如下:...

(1 行空白)
┌─ 输入框 ──────────────────┐

改动后:

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
> 帮我读取 package.json
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
✦ 好的,我来读取文件。
┌ Read package.json ─────────┐
│ ✓ Read  package.json       │
└────────────────────────────┘
(1 行空白)
✦ 文件内容如下:...

(1 行空白)
┌─ 输入框 ──────────────────┐

未改动

  • 工具调用边框样式保持不变
  • Markdown 正文段落间距保持不变(1 行已是终端最小单位)
  • 深色/浅色主题色值不变
  • 输入区域(Composer)间距保持 marginTop=1 不变