|
|
@@ -31,6 +31,7 @@ const ViewportContainer = ({ imageId, className }: ViewportContainerProps) => {
|
|
|
const viewportRef = useRef(null);
|
|
|
const [renderingEngine, setRenderingEngine] = useState<any>(null);
|
|
|
const [stackViewport, setStackViewport] = useState<any>(null);
|
|
|
+ const [hasImage, setHasImage] = useState<boolean>(false); // 跟踪是否已加载图像
|
|
|
// ✅ 用 useMemo 保证 id 只生成一次
|
|
|
const viewportId = useMemo(() => `stackViewport-${imageId}-${uuidv4()}`, []);
|
|
|
|
|
|
@@ -139,6 +140,8 @@ const ViewportContainer = ({ imageId, className }: ViewportContainerProps) => {
|
|
|
await stackViewport.setStack([imageIds],0);
|
|
|
// 4. 渲染图像
|
|
|
stackViewport.render();
|
|
|
+ // 5. 成功加载后隐藏提示
|
|
|
+ setHasImage(true);
|
|
|
} catch (error) {
|
|
|
console.error('加载图像失败:', error);
|
|
|
}
|
|
|
@@ -164,16 +167,19 @@ const ViewportContainer = ({ imageId, className }: ViewportContainerProps) => {
|
|
|
{/* Cornerstone 渲染挂载点 */}
|
|
|
<div ref={viewportRef} style={{ width: '100%', height: '100%' }} />
|
|
|
|
|
|
- {/* 拖拽提示文字 */}
|
|
|
- <div style={{
|
|
|
- position: 'absolute',
|
|
|
- top: '50%',
|
|
|
- left: '50%',
|
|
|
- transform: 'translate(-50%, -50%)',
|
|
|
- color: '#999'
|
|
|
- }}>
|
|
|
- 拖拽序列到此处显示
|
|
|
- </div>
|
|
|
+ {/* 拖拽提示文字 - 只在没有图像时显示 */}
|
|
|
+ {!hasImage && (
|
|
|
+ <div style={{
|
|
|
+ position: 'absolute',
|
|
|
+ top: '50%',
|
|
|
+ left: '50%',
|
|
|
+ transform: 'translate(-50%, -50%)',
|
|
|
+ color: '#999',
|
|
|
+ pointerEvents: 'none' // 防止遮挡鼠标事件
|
|
|
+ }}>
|
|
|
+ 拖拽序列到此处显示
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
);
|
|
|
};
|