Skip to Content
DesignTUI 间距优化 PR2 — 半行色带与紧凑间距

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 不变
Last updated on