Skip to content

fix(query): 修复确认弹窗长 SQL 折行及相关界面的宽度对齐问题 - #21

Merged
zavier merged 2 commits into
mainfrom
fix/mutate-confirm-wrap
Aug 8, 2026
Merged

fix(query): 修复确认弹窗长 SQL 折行及相关界面的宽度对齐问题#21
zavier merged 2 commits into
mainfrom
fix/mutate-confirm-wrap

Conversation

@zavier

@zavier zavier commented Aug 8, 2026

Copy link
Copy Markdown
Owner

变更内容与原因

1. 变更确认弹窗长 SQL 折行(根因修复)

db_mutate 确认弹窗的 SQL 框宽度在构造期写死(上限 78 列),但 pi-tui overlay 默认渲染宽度为 min(80, termWidth)Text 组件按 w-4 硬折行——SQL 最长行 ≥71 字符时框内容行超宽,右框线掉到下一行、框体崩坏。

  • 框宽改为 render(w) 时按真实宽度自适应(内容预算 w-10),宽度变化(含 resize)时重建容器
  • 长 SQL 在框内按显示宽度软换行(新增纯函数 wrapToDisplayWidth,按码点迭代不劈开 emoji 代理对),完整 SQL 可见、不再截断 WHERE 条件;物理行超 12 行折叠为省略提示
  • 框宽计算改用 visibleWidth,修复中文/emoji SQL 框宽低估导致的过度截断;顺带消除双重省略号

2. 全部界面交互的同类问题排查与修复

对照上述 bug 类型审计了全部 14 个 UI 相关模块:

  • related-browserbuild() 以初始宽度 80 布局,首帧 render(w) 不重建——窄终端(<86 列)首屏表格折行断裂,按键后自愈。改为 render 时宽度变化即重建
  • history / favorites / relations:列表列对齐从码元(.length/slice/padEnd)改为显示宽度(truncateToDisplayWidth/padToDisplayWidth),修复中文 SQL/中文名导致的列错位、右侧列被 SelectList 截掉
  • 审计确认安全的路径:SelectList / renderers / TruncatedMultiline 均有逐行截断防线,schema/tables 走 markdown 自然折行,result-table 内部码元截断均被下游显示宽度函数兜底——全仓无触发 TUI 超宽断言崩溃的路径

验证方式

  • npm run check / npm test(287 通过,含 9 个新增 wrapToDisplayWidth 与中文对齐回归用例)/ npm run lint(0 errors)/ npm run fmt:check 全绿
  • 真实 pi-tui Container/Text 渲染回归:80/60/100/40 列 × 长 UPDATE/中文/emoji/多行折叠共 20 场景,确认弹窗无任何超宽行、框线宽度全一致(修复前 ≥71 字符即折行)

zavier added 2 commits August 8, 2026 20:40
确认弹窗 SQL 框宽度在构造期写死(上限 78 列),但 pi-tui overlay
默认渲染宽度为 min(80, termWidth),Text 组件按 w-4 折行,SQL 最长行
≥71 字符时框内容行超宽被硬折行,右框线掉到下一行、框体崩坏。

- 框宽改为 render(w) 时按真实宽度自适应(内容预算 w-10),宽度
  变化(含 resize)时重建容器,任意终端宽度下框线对齐
- 长 SQL 在框内按显示宽度软换行(新增纯函数 wrapToDisplayWidth,
  按码点迭代不劈开代理对),完整 SQL 可见、不再截断 WHERE 条件;
  物理行数超 12 行时折叠为省略提示
- 框宽计算改用 visibleWidth,修复中文/emoji SQL 框宽被低估导致的
  过度截断;顺带消除截断路径的双重省略号

验证:tsc/vitest(285)/oxlint/oxfmt 全绿;真实 pi-tui 渲染回归覆盖
80/60/100/40 列 × 长 SQL/中文/emoji/折叠共 20 场景,无超宽行。
全面排查 UI 交互的宽度安全(继确认弹窗修复后):

- related-browser:build() 在构造期以 lastWidth=80 计算布局,首帧
  render(w) 只更新宽度不重建——窄终端(<86 列)首屏表格行/分隔线
  按过期宽度截断后被 Text 折行、表格断裂,按键后才自愈。改为
  render 时宽度变化即重建(与 mutate-confirm 同一模式)。
- history/favorites/relations:列表列对齐从码元(.length/slice/
  padEnd)改为显示宽度(truncateToDisplayWidth/padToDisplayWidth),
  修复中文 SQL/中文名导致的列错位、右侧行数耗时列被 SelectList
  截掉的问题;省略号统一为 …。

其余路径审计结论安全:SelectList/renderers/TruncatedMultiline 均有
逐行截断防线,schema/tables 走 markdown 自然折行,result-table 内部
码元截断均被下游显示宽度函数兜底,无触发 TUI 超宽断言的路径。

验证:tsc/vitest(287)/oxlint/oxfmt 全绿;新增中文对齐回归用例。
@zavier
zavier merged commit af2fec1 into main Aug 8, 2026
1 check passed
@zavier
zavier deleted the fix/mutate-confirm-wrap branch August 8, 2026 14:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant