Skip to content

fix(frontend): 修复终端面板高度适配与拖拽回弹 - #1001

Open
2379278408 wants to merge 3 commits into
chaitin:mainfrom
2379278408:260805-fix-terminal-panel-resize
Open

fix(frontend): 修复终端面板高度适配与拖拽回弹#1001
2379278408 wants to merge 3 commits into
chaitin:mainfrom
2379278408:260805-fix-terminal-panel-resize

Conversation

@2379278408

@2379278408 2379278408 commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

修改说明

  • 将任务详情页的面板默认尺寸和最小尺寸改为 react-resizable-panels v4 支持的显式百分比
  • 将底部终端高度限制在 20%70%,保持拖拽过程连续并为上方内容保留可用空间
  • 浏览器容器通过 ResizeObserverFitAddon.fit() 统一决定 xterm 行列数
  • 将连续容器变化合并到下一 animation frame,并只向 PTY 上报发生变化的最新行列数
  • 新增面板尺寸和终端尺寸所有权回归测试

问题原因

该问题包含两层原因:

  1. react-resizable-panels v4 将数字尺寸解释为像素,任务详情页传入的 752530 等旧版百分比数值使面板约束退化为固定像素。
  2. Web 终端完成本地 fit() 后,服务端异步返回的 resize 帧会再次用旧行列数覆盖 xterm。容器尺寸此时保持稳定,页面缺少后续观察事件来触发第二次 fit(),从而留下空白区域。

修复后,浏览器容器成为 xterm 行列数的唯一来源;服务端继续接收浏览器上报的最新尺寸以调整 PTY。

验证结果

  • Prettier 检查通过
  • ESLint 检查通过
  • 任务详情相关测试 21/21 通过
  • online 代理配置测试 15/15 通过
  • TypeScript 与 online 构建通过
  • SaaS API 代理健康检查通过
  • 第二阶段终端尺寸所有权测试 2/2 通过
  • 第一、二阶段聚焦回归测试 4/4 通过
  • 更新后的 SaaS 预览首页返回 HTTP 200
  • 实际终端长输出与反复拖拽等待预览复验

预览地址

https://11180-44fb865d4a1f81e6.monkeycode-ai.online

效果展示

终端面板高度适配与拖拽效果

Closes #950

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.

[BUG]控制台页面内“终端”窗口UI未自动适配显示高度,存在显示问题(附参考视频)

1 participant