diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx
index 8ec753d09..26203c35a 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx
@@ -10,6 +10,7 @@ import {
   moveViewportFromPan,
   resolveViewportFromWheel,
   scaleViewportFromScreenPoint,
+  viewportScaleToCanvasDisplayScale,
 } from '@genarrative/image-canvas-core';
 import {
   CanvasViewport as SharedCanvasViewport,
@@ -162,28 +163,8 @@ export function PreviewWorkspace({
 
   useEffect(() => {
     if (!activeImageId || !logicalSize) return;
-    const element = viewportElementRef.current;
-    setViewport(
-      fitViewportToBounds({
-        bounds: {
-          x: 0,
-          y: 0,
-          width: logicalSize.width,
-          height: logicalSize.height,
-        },
-        canvasSize: {
-          width: element?.clientWidth || canvasSizeRef.current.width,
-          height: element?.clientHeight || canvasSizeRef.current.height,
-        },
-      }),
-    );
-  }, [
-    activeImageId,
-    canvasSize.height,
-    canvasSize.width,
-    logicalSize,
-    setViewport,
-  ]);
+    fitToCanvas();
+  }, [activeImageId, fitToCanvas, logicalSize]);
 
   const scaleViewportFromCenter = useCallback(
     (nextScale: number) => {
@@ -560,7 +541,9 @@ export function PreviewWorkspace({
               min={25}
               max={200}
               step={5}
-              value={Math.round(Number.parseInt(displayPercent, 10))}
+              value={Math.round(
+                viewportScaleToCanvasDisplayScale(viewport.scale) * 100,
+              )}
               aria-label="画布缩放"
               className="h-1 w-28 accent-orange-500"
               onChange={(event) =>