TUI 间距优化 PR2 — 半行色带与紧凑间距
背景
PR1 通过去除工具组内部多余空行,初步收紧了 TUI 垂直间距。但在实际使用中仍有两个体验问题:
- 用户消息与助手回复之间缺少视觉分界 — 长对话中难以快速定位”我的提问从哪里开始”
- 块间距仍然偏大 — 问答交替处各有一整行空白,浪费屏幕空间
本次改动
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