优化交互

src/components/CanvasLabelImage.tsx

@@ -35,6 +35,10 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
 
   const elementsKey = useMemo(() => JSON.stringify(elements), [elements]);
   const rowDataKey = useMemo(() => JSON.stringify(rowData), [rowData]);
+  const variableDefaultsKey = useMemo(
+    () => JSON.stringify(variableDefaults),
+    [variableDefaults]
+  );
 
   useEffect(() => {
     let active = true;
@@ -52,10 +56,18 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
       scale: renderScale,
     })
       .then((url) => {
-        if (active) {
-          setDataUrl(url);
-          setInitialLoading(false);
-        }
+        if (!active) return;
+        const img = new Image();
+        img.onload = () => {
+          if (active) {
+            setDataUrl(url);
+            setInitialLoading(false);
+          }
+        };
+        img.onerror = () => {
+          if (active) setInitialLoading(false);
+        };
+        img.src = url;
       })
       .catch((err) => {
         console.error('Label graphics rendering error:', err);
@@ -65,7 +77,18 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
     return () => {
       active = false;
     };
-  }, [widthMm, heightMm, elementsKey, rowDataKey, rowIndex, showBorder, transparentBackground, mode, renderScale, elements, variableDefaults]);
+  }, [
+    widthMm,
+    heightMm,
+    elementsKey,
+    rowDataKey,
+    variableDefaultsKey,
+    rowIndex,
+    showBorder,
+    transparentBackground,
+    mode,
+    renderScale,
+  ]);
 
   if (initialLoading && !dataUrl) {
     return (