现象
点击聊天消息里的图片附件打开图片查看器后,查看器整体是黑框,图片内容不渲染。工具栏、缩放百分比等 UI 正常,信息面板能显示正确的图片尺寸,仅图片本体不可见。
根因
#448 将图片查看器从自绘 modal 迁移到 base-ui Dialog 后,视口测量逻辑保留了旧实现的假设:
- 测量 effect 依赖
[open],在 open 翻转时同步读 viewportRef.current;
- 旧 modal 挂载即渲染,
open=true 的提交帧里 ref 已就绪;
- base-ui Dialog 的 Popup/Viewport 经
transitionStatus/mounted 状态机延迟挂载,open 翻转的那一帧 viewport DOM 尚未存在,effect 拿到 null 直接 return;
- 此后没有任何依赖变化能再次触发该 effect,
viewportSize 停在 0×0,fitImageViewerSize 输出 0×0,图片容器宽高为 0 —— 黑框。
实测(MCP bridge DOM 探针):viewport 1119x715 / natural 2100x1200 / complete: true / rendered: 0x0。
修法
viewport 引用改为 callback ref + state(viewportElement),测量 effect 依赖 [open, viewportElement]——节点真正挂载时 callback ref 触发 state 更新,effect 在 DOM 就绪后重跑。viewportRef 保留,供拖拽/滚轮锚点等事件路径同步读取。imagePreviewModel.ts 纯函数层不动。
现象
点击聊天消息里的图片附件打开图片查看器后,查看器整体是黑框,图片内容不渲染。工具栏、缩放百分比等 UI 正常,信息面板能显示正确的图片尺寸,仅图片本体不可见。
根因
#448 将图片查看器从自绘 modal 迁移到 base-ui Dialog 后,视口测量逻辑保留了旧实现的假设:
[open],在open翻转时同步读viewportRef.current;open=true的提交帧里 ref 已就绪;transitionStatus/mounted状态机延迟挂载,open翻转的那一帧 viewport DOM 尚未存在,effect 拿到 null 直接 return;viewportSize停在 0×0,fitImageViewerSize输出 0×0,图片容器宽高为 0 —— 黑框。实测(MCP bridge DOM 探针):
viewport 1119x715 / natural 2100x1200 / complete: true / rendered: 0x0。修法
viewport 引用改为 callback ref + state(
viewportElement),测量 effect 依赖[open, viewportElement]——节点真正挂载时 callback ref 触发 state 更新,effect 在 DOM 就绪后重跑。viewportRef保留,供拖拽/滚轮锚点等事件路径同步读取。imagePreviewModel.ts纯函数层不动。