fix (1.33.0 -> 1.33.1): 修复反复切换曝光体位时DCM图右侧不显示问题 (#172)

- 在 StackViewer 组件的 useEffect 中添加清理函数
- 确保组件卸载时调用 disableElement 正确清理 viewport
- 添加错误处理和日志输出以便调试
- 解决因 viewport 未正确清理导致的显示问题

改动文件：
- src/pages/view/components/viewers/stack.image.viewer.tsx
- CHANGELOG.md
- package.json (版本更新: 1.33.0 -> 1.33.1)

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.33.1] - 2025-12-29 12:59
+
+### 修复 (Fixed)
+- **修复反复切换曝光体位时DCM图右侧不显示问题 (#172)** - 在 StackViewer 组件中添加清理函数确保 viewport 正确清理
+  - 在 StackViewer 组件的 useEffect 中添加清理函数
+  - 确保组件卸载时调用 disableElement 正确清理 viewport
+  - 添加错误处理和日志输出以便调试
+  - 解决因 viewport 未正确清理导致的显示问题
+
+**核心改进:**
+- 资源管理优化：组件卸载时自动清理 viewport，避免资源泄漏
+- 稳定性提升：防止反复切换体位时出现图像显示异常
+- 调试增强：添加清理日志，便于问题排查
+- 用户体验：确保在处理流程中反复切换体位时图像始终正常显示
+
+**技术实现:**
+- 在 useEffect 中添加 return 清理函数
+- 使用 cornerstone.getRenderingEngine 获取渲染引擎实例
+- 调用 renderingEngine.disableElement(viewportId) 清理 viewport
+- 添加 try-catch 错误处理和 console.log 日志输出
+- 确保清理函数在组件卸载时正确执行
+
+**改动文件:**
+- src/pages/view/components/viewers/stack.image.viewer.tsx
+- CHANGELOG.md
+- package.json (版本更新: 1.33.0 -> 1.33.1)
+
+---
+
 ## [1.33.0] - 2025-12-29 12:31
 
 ### 新增 (Added)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

src/pages/view/components/viewers/stack.image.viewer.tsx

@@ -1950,6 +1950,19 @@ const StackViewer = ({
     };
 
     setup();
+
+    // ✅ 添加清理函数：确保组件卸载时正确清理 viewport
+    return () => {
+      try {
+        const renderingEngine = cornerstone.getRenderingEngine(renderingEngineId);
+        if (renderingEngine) {
+          console.log(`[StackViewer] Cleaning up viewport: ${viewportId}`);
+          renderingEngine.disableElement(viewportId);
+        }
+      } catch (error) {
+        console.warn(`[StackViewer] Error disabling element ${viewportId}:`, error);
+      }
+    };
   }, [elementRef, imageIndex, viewportId, renderingEngineId, imageUrls[0]]);
 
   // 监听容器大小变化，自动保持宽高比