fix(query): 修复确认弹窗长 SQL 折行及相关界面的宽度对齐问题 - #21
Merged
Conversation
确认弹窗 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 全绿;新增中文对齐回归用例。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
变更内容与原因
1. 变更确认弹窗长 SQL 折行(根因修复)
db_mutate确认弹窗的 SQL 框宽度在构造期写死(上限 78 列),但 pi-tui overlay 默认渲染宽度为min(80, termWidth),Text组件按w-4硬折行——SQL 最长行 ≥71 字符时框内容行超宽,右框线掉到下一行、框体崩坏。render(w)时按真实宽度自适应(内容预算w-10),宽度变化(含 resize)时重建容器wrapToDisplayWidth,按码点迭代不劈开 emoji 代理对),完整 SQL 可见、不再截断 WHERE 条件;物理行超 12 行折叠为省略提示visibleWidth,修复中文/emoji SQL 框宽低估导致的过度截断;顺带消除双重省略号2. 全部界面交互的同类问题排查与修复
对照上述 bug 类型审计了全部 14 个 UI 相关模块:
build()以初始宽度 80 布局,首帧render(w)不重建——窄终端(<86 列)首屏表格折行断裂,按键后自愈。改为 render 时宽度变化即重建.length/slice/padEnd)改为显示宽度(truncateToDisplayWidth/padToDisplayWidth),修复中文 SQL/中文名导致的列错位、右侧列被 SelectList 截掉验证方式
npm run check/npm test(287 通过,含 9 个新增wrapToDisplayWidth与中文对齐回归用例)/npm run lint(0 errors)/npm run fmt:check全绿Container/Text渲染回归:80/60/100/40 列 × 长 UPDATE/中文/emoji/多行折叠共 20 场景,确认弹窗无任何超宽行、框线宽度全一致(修复前 ≥71 字符即折行)