From a15930c57a569131ad1458d6b256f8d88f5c0fae Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 17 Jun 2026 02:44:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E5=9B=BE=E7=89=87=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E8=88=9E=E5=8F=B0=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

抽出画布工作区视觉树为 ImageCanvasStageView

保留拖拽缩放历史上传生成等状态机在主视图

更新图片画布拆分计划和 TRACKING 回归记录
---
 TRACKING.md                                   |    2 +
 ...��构】图片画布编辑器前端拆分计划-2026-06-17.md |   10 +-
 .../image-editor/ImageCanvasEditorView.tsx    | 1047 +++-------------
 .../image-editor/ImageCanvasStageView.tsx     | 1091 +++++++++++++++++
 4 files changed, 1270 insertions(+), 880 deletions(-)
 create mode 100644 src/components/image-editor/ImageCanvasStageView.tsx

diff --git a/TRACKING.md b/TRACKING.md
index 09adb9bd..b3698a2b 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -114,3 +114,5 @@
 - 2026-06-17 浏览器回归：`http://127.0.0.1:10003/editor/canvas` 未登录打开工程和未登录上传均弹出 `账号入口`；关闭登录后点击 `画布背景色` 打开 `画布背景设置` 面板，点击 `暖灰` 后画布背景为 `rgb(243, 240, 234)`；登录开发账号后上传图片成功进入 `项目素材`，`AI画布工具栏` 保持可见。
 - 2026-06-17 前端拆分第二阶段：新增 `ImageCanvasSidebarView`，把素材 / 图层共用左侧整合面板从主视图抽出；上传链路、登录弹窗、素材拖到画布、持久化、图层历史和右键菜单状态机仍保留在主视图，避免过度拆分。验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx`、`npm run typecheck`。
 - 2026-06-17 侧栏拆分浏览器回归：`http://127.0.0.1:10003/editor/canvas` 未登录刷新弹出 `账号入口`；`画布背景色` 打开 `画布背景设置` dialog，包含预设、自定义颜色、HEX 和恢复默认；使用临时开发账号登录后上传图片成功进入 `项目素材`，点击素材可添加到画布，切换 `图层` 侧栏后能看到同一图片图层，`AI画布工具栏` 保持可见。
+- 2026-06-17 前端拆分第三阶段：新增 `ImageCanvasStageView`，把画布工作区视觉树、图层渲染、生成占位框、右键菜单、左下 dock、小地图和底部 AI 工具栏从主视图抽出；拖拽 / 缩放、历史、上传、登录、生成提交、素材持久化和右键命令仍保留在主视图，避免拆散状态机。
+- 2026-06-17 舞台拆分浏览器回归：`http://127.0.0.1:10003/editor/canvas` 未登录刷新弹出 `账号入口`；关闭登录后点击 `画布背景色` 打开完整 `画布背景设置` dialog，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)`；使用临时开发账号密码登录后上传 `smoke.png` 成功进入 `项目素材`，点击素材添加到画布，切换 `图层` 后显示同一图层，图片浮动工具栏、小地图和 `AI画布工具栏` 保持可见。
diff --git a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
index 9acf73d7..b246398d 100644
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -41,11 +41,17 @@
   - 继续通过 props 调用主视图状态机，不接管上传、登录弹窗、持久化、拖到画布的坐标换算和图层历史记录。
   - 保持“素材”和“图层”同一侧栏切换的 Lovart 式布局，不恢复右侧独立图层栏或左侧竖向工具栏。
 
-第二阶段以后，主视图仍是画布编排入口。继续拆分前应优先选择能形成稳定边界的深模块，避免把上传链路、DataTransfer、画布坐标和历史快照拆成互相回调的小碎片。
+## 第三阶段模块
+
+- `ImageCanvasStageView.tsx`
+  - 承载中央画布工作区的视觉树：viewport / world DOM、图层渲染、生成占位框、选中图片浮动工具栏、空白和图片右键菜单、左下 dock、缩放菜单、背景设置面板、小地图和底部 AI 工具栏。
+  - 继续通过 props 调用主视图状态机，不接管拖拽 / 平移 / 缩放、画布坐标换算、历史 undo / redo、上传、登录、生成提交、素材持久化和右键命令实现。
+  - 保持 `canvasViewportRef` 由主视图传入，确保 pointer capture、drop 坐标、滚轮缩放和小地图拖拽仍使用同一套坐标源。
+
+第三阶段以后，主视图仍是画布编排入口。继续拆分前应优先选择能形成稳定边界的深模块，避免把上传链路、DataTransfer、画布坐标和历史快照拆成互相回调的小碎片。
 
 ## 后续阶段
 
-- `ImageCanvasStageView`：画布 viewport、图层渲染、右键菜单和生成占位框，等交互回归覆盖更强后再拆。
 - `ImageCanvasGenerationDock`：底部 AI 工具栏和生成面板族，等生成对象状态机进一步收口后再拆。
 
 ## 验证计划
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 75f6d1ad..1ce17e8a 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1,37 +1,19 @@
 import {
-  Braces,
   Check,
   ChevronDown,
   ChevronLeft,
-  ChevronRight,
   ClipboardList,
-  Copy,
-  Crop,
   Download,
-  Folder,
-  Hand,
   ImageIcon,
   ImagePlus,
-  Info,
-  Layers,
-  Map as MapIcon,
-  MousePointer2,
   Pencil,
-  Redo2,
-  RotateCcw,
-  Shapes,
-  SlidersHorizontal,
-  Sparkles,
-  Trash2,
-  Type,
-  Undo2,
-  WandSparkles,
   X,
 } from 'lucide-react';
 import JSZip from 'jszip';
 import {
   type CSSProperties,
   type DragEvent as ReactDragEvent,
+  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
   useCallback,
@@ -74,7 +56,6 @@ import {
 } from '../common/PlatformFloatingMenu';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
-import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import {
   PlatformSelectField,
@@ -84,10 +65,9 @@ import { UnifiedModal } from '../common/UnifiedModal';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
+import { ImageCanvasStageView } from './ImageCanvasStageView';
 import {
   ASSET_DRAG_MIME_TYPE,
-  CANVAS_BACKGROUND_OPTIONS,
-  CANVAS_WORLD_SIZE,
   DEFAULT_CANVAS_BACKGROUND_COLOR,
   DEFAULT_CANVAS_SIZE,
   EDITOR_ASSET_FOLDERS,
@@ -103,7 +83,6 @@ import {
   createLayerFromAsset,
   escapeCssIdentifier,
   formatImageSizeValue,
-  formatPercent,
   getDraggedAssetId,
   getLayerBounds,
   hasDataTransferType,
@@ -3570,6 +3549,24 @@ export function ImageCanvasEditorView() {
     });
   };
 
+  const handleCanvasContextMenu = (
+    event: ReactMouseEvent<HTMLDivElement>,
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const position = resolveContextMenuPosition(
+      event.clientX,
+      event.clientY,
+      'blank',
+    );
+    setImageContextMenu(null);
+    setContextMenu({
+      kind: 'blank',
+      ...position,
+      canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
+    });
+  };
+
   const handleLayerPointerDown = (
     event: ReactPointerEvent<HTMLButtonElement>,
     layer: CanvasLayer,
@@ -3657,6 +3654,61 @@ export function ImageCanvasEditorView() {
     };
   };
 
+  const handleLayerClick = (
+    event: ReactMouseEvent<HTMLButtonElement>,
+    layer: CanvasLayer,
+  ) => {
+    // 测试环境和辅助技术可能只触发 click；
+    // 用 click 兜底选中，真实拖拽仍由 pointerDown 负责。
+    event.stopPropagation();
+    if (isPickingCharacterSpecFromCanvas) {
+      return;
+    }
+    if (isPickingIconSpecFromCanvas) {
+      return;
+    }
+    if (event.shiftKey || isShiftPressedRef.current) {
+      return;
+    }
+    selectSingleLayer(layer.id);
+    setImageContextMenu(null);
+  };
+
+  const handleLayerContextMenu = (
+    event: ReactMouseEvent<HTMLButtonElement>,
+    layer: CanvasLayer,
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!selectedLayerIds.includes(layer.id)) {
+      selectSingleLayer(layer.id);
+    }
+    const position = resolveContextMenuPosition(
+      event.clientX,
+      event.clientY,
+      'layer',
+    );
+    setContextMenu({
+      kind: 'layer',
+      layerId: layer.id,
+      ...position,
+      canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
+    });
+    setImageContextMenu({
+      layerId: layer.id,
+      ...position,
+    });
+  };
+
+  const handleCanvasBackgroundHexChange = (nextValue: string) => {
+    setCanvasBackgroundHexValue(nextValue);
+    const normalizedColor = normalizeCanvasBackgroundHex(nextValue);
+    if (normalizedColor) {
+      setCanvasBackgroundColor(normalizedColor);
+      setCanvasBackgroundHexValue(normalizedColor);
+    }
+  };
+
   const handleGenerationFramePointerDown = (
     event: ReactPointerEvent<HTMLDivElement>,
     dialog: CanvasGenerationDialogState,
@@ -3988,30 +4040,6 @@ export function ImageCanvasEditorView() {
     );
   };
 
-  const toolButtons = [
-    { label: '裁剪', icon: Crop },
-    { label: '重绘', icon: Sparkles },
-    { label: '调整', icon: SlidersHorizontal },
-    { label: '复制', icon: Copy },
-  ];
-
-  const canvasTools: Array<{
-    id: CanvasTool;
-    label: string;
-    icon: typeof MousePointer2;
-  }> = [
-    { id: 'select', label: '选择工具', icon: MousePointer2 },
-    { id: 'hand', label: '抓手工具', icon: Hand },
-    { id: 'upload', label: '上传工具', icon: ImagePlus },
-    { id: 'generate', label: '生成工具', icon: WandSparkles },
-    { id: 'spec', label: '生成规范', icon: ClipboardList },
-    { id: 'character', label: '生成角色形象', icon: Sparkles },
-    { id: 'icon', label: '生成图标素材', icon: ImageIcon },
-    { id: 'text', label: '文字工具', icon: Type },
-    { id: 'shape', label: '形状标注工具', icon: Shapes },
-    { id: 'export', label: '导出工具', icon: Download },
-  ];
-
   const updateSpecFormValue = (key: keyof SpecFormValues, value: string) => {
     setGenerateDialog((currentDialog) => {
       if (currentDialog?.mode !== 'spec') {
@@ -4301,9 +4329,9 @@ export function ImageCanvasEditorView() {
                   onClick={startProjectRename}
                 />
               </div>
-	            )}
-	            <span>画布</span>
-	          </div>
+            )}
+            <span>画布</span>
+          </div>
           <div className="image-canvas-editor__topbar-actions">
             <EditorIconButton
               label="下载画布素材"
@@ -4326,789 +4354,98 @@ export function ImageCanvasEditorView() {
               </PlatformStatusMessage>
             ) : null}
           </div>
-	        </div>
+        </div>
 
-        <div
-          ref={canvasViewportRef}
-          className={`image-canvas-editor__viewport ${isPanning ? 'image-canvas-editor__viewport--panning' : ''} image-canvas-editor__viewport--tool-${effectiveTool}`}
-          style={{ backgroundColor: canvasBackgroundColor }}
-          aria-label="画布工作区"
-          onPointerDown={handleCanvasPointerDown}
-          onPointerMove={handlePointerMove}
-          onPointerUp={finishDrag}
-          onPointerCancel={finishDrag}
-          onWheel={handleWheel}
-          onDragOver={handleCanvasDragOver}
-          onDragLeave={handleCanvasDragLeave}
-          onDrop={handleCanvasDrop}
-          onContextMenu={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            const position = resolveContextMenuPosition(
-              event.clientX,
-              event.clientY,
-              'blank',
-            );
-            setImageContextMenu(null);
-            setContextMenu({
-              kind: 'blank',
-              ...position,
-              canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
-            });
+        <ImageCanvasStageView
+          canvasViewportRef={canvasViewportRef}
+          specToolWrapRef={specToolWrapRef}
+          isPanning={isPanning}
+          effectiveTool={effectiveTool}
+          canvasBackgroundColor={canvasBackgroundColor}
+          canvasBackgroundHexValue={canvasBackgroundHexValue}
+          viewport={viewport}
+          snapGuide={snapGuide}
+          layers={layers}
+          selectedLayer={selectedLayer}
+          selectedLayerIds={selectedLayerIds}
+          hoveredLayerId={hoveredLayerId}
+          canvasMarquee={canvasMarquee}
+          canvasGenerationDialogs={canvasGenerationDialogs}
+          generateDialog={generateDialog}
+          quickEditPanel={quickEditPanel}
+          generationComposerStyle={generationComposerStyle}
+          selectedToolbarStyle={selectedToolbarStyle}
+          uploadDropTarget={uploadDropTarget}
+          contextMenu={contextMenu}
+          canvasClipboard={canvasClipboard}
+          imageContextMenu={imageContextMenu}
+          imageContextMenuLayer={imageContextMenuLayer}
+          contextShouldShowLayer={contextShouldShowLayer}
+          contextShouldUnlockLayer={contextShouldUnlockLayer}
+          canUndo={canUndo}
+          canRedo={canRedo}
+          isZoomMenuOpen={isZoomMenuOpen}
+          isBackgroundSettingsOpen={isBackgroundSettingsOpen}
+          activeSidebarPanel={activeSidebarPanel}
+          isMinimapOpen={isMinimapOpen}
+          minimapModel={minimapModel}
+          onCanvasPointerDown={handleCanvasPointerDown}
+          onCanvasPointerMove={handlePointerMove}
+          onCanvasPointerUp={finishDrag}
+          onCanvasWheel={handleWheel}
+          onCanvasDragOver={handleCanvasDragOver}
+          onCanvasDragLeave={handleCanvasDragLeave}
+          onCanvasDrop={handleCanvasDrop}
+          onCanvasContextMenu={handleCanvasContextMenu}
+          onLayerPointerDown={handleLayerPointerDown}
+          onLayerClick={handleLayerClick}
+          onLayerContextMenu={handleLayerContextMenu}
+          onLayerMouseEnter={setHoveredLayerId}
+          onLayerMouseLeave={(layerId) =>
+            setHoveredLayerId((currentId) =>
+              currentId === layerId ? null : currentId,
+            )
+          }
+          onOpenLayerMetadata={(layer) => {
+            setMetadataLayer(layer);
+            selectSingleLayer(layer.id);
           }}
+          onGenerationFramePointerDown={handleGenerationFramePointerDown}
+          onActivateGenerationDialog={activateCanvasGenerationDialog}
+          onDeleteSelectedLayer={deleteSelectedLayer}
+          onOpenQuickEditPanel={openQuickEditPanel}
+          onOpenEditDialog={openEditDialog}
+          onOpenCharacterAnimationPanel={openCharacterAnimationPanel}
+          onPasteCanvasClipboard={pasteCanvasClipboard}
+          onCopyContextLayers={copyContextLayers}
+          onDuplicateContextLayers={duplicateContextLayers}
+          onMoveContextLayers={moveContextLayers}
+          onGroupContextLayers={groupContextLayers}
+          onUngroupContextLayers={ungroupContextLayers}
+          onToggleContextLayerVisibility={toggleContextLayerVisibility}
+          onToggleContextLayerLock={toggleContextLayerLock}
+          onFlipContextLayers={flipContextLayers}
+          onExportContextLayer={exportContextLayer}
+          onDeleteContextLayers={deleteContextLayers}
+          onDeleteLayerById={deleteLayerById}
+          onCloseContextMenu={() => setContextMenu(null)}
+          onCloseImageContextMenu={() => setImageContextMenu(null)}
+          onUpdateScaleFromCenter={updateScaleFromCenter}
+          onFitLayers={fitLayers}
+          onUndoCanvasChange={undoCanvasChange}
+          onRedoCanvasChange={redoCanvasChange}
+          onToggleZoomMenu={() => setIsZoomMenuOpen((open) => !open)}
+          onCloseZoomMenu={() => setIsZoomMenuOpen(false)}
+          onToggleBackgroundSettings={() =>
+            setIsBackgroundSettingsOpen((isOpen) => !isOpen)
+          }
+          onApplyCanvasBackgroundColor={applyCanvasBackgroundColor}
+          onCanvasBackgroundHexChange={handleCanvasBackgroundHexChange}
+          onToggleSidebarPanel={toggleSidebarPanel}
+          onToggleMinimap={() => setIsMinimapOpen((open) => !open)}
+          onMinimapPointerDown={handleMinimapPointerDown}
+          onSwitchTool={switchTool}
         >
-          {uploadDropTarget === 'canvas' ? (
-            <div
-              className="image-canvas-editor__upload-drop-overlay image-canvas-editor__upload-drop-overlay--canvas"
-              role="status"
-            >
-              <span>添加到画布</span>
-              <strong>松开即可添加</strong>
-            </div>
-          ) : null}
-          <div
-            className="image-canvas-editor__world"
-            style={{
-              width: CANVAS_WORLD_SIZE,
-              height: CANVAS_WORLD_SIZE,
-              transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.scale})`,
-            }}
-          >
-            {snapGuide?.vertical !== undefined ? (
-              <div
-                className="image-canvas-editor__snap-guide image-canvas-editor__snap-guide--vertical"
-                data-testid="image-canvas-editor-snap-guide-vertical"
-                style={{ left: snapGuide.vertical }}
-              />
-            ) : null}
-            {snapGuide?.horizontal !== undefined ? (
-              <div
-                className="image-canvas-editor__snap-guide image-canvas-editor__snap-guide--horizontal"
-                data-testid="image-canvas-editor-snap-guide-horizontal"
-                style={{ top: snapGuide.horizontal }}
-              />
-            ) : null}
-
-            {layers
-              .slice()
-              .filter((layer) => !layer.hidden)
-              .sort((left, right) => left.zIndex - right.zIndex)
-              .map((layer) => {
-                const isSelected = selectedLayerIds.includes(layer.id);
-                const isHovered = hoveredLayerId === layer.id;
-                const kindLabel = getLayerKindLabel(layer);
-                const layerGeneratingLabel =
-                  generateDialog?.mode === 'edit' &&
-                  generateDialog.status === 'generating' &&
-                  generateDialog.sourceLayerId === layer.id
-                    ? '修改中'
-                    : quickEditPanel?.status === 'generating' &&
-                        quickEditPanel.sourceLayerId === layer.id
-                      ? '生成中'
-                      : null;
-                return (
-                  <button
-                    key={layer.id}
-                    type="button"
-                    className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layerGeneratingLabel ? 'image-canvas-editor__layer--generating' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
-                    style={{
-                      left: layer.x,
-                      top: layer.y,
-                      width: layer.width,
-                      height: layer.height,
-                      zIndex: layer.zIndex,
-                      display: layer.hidden ? 'none' : undefined,
-                    }}
-                    onPointerDown={(event) =>
-                      handleLayerPointerDown(event, layer)
-                    }
-                    onClick={(event) => {
-                      // 测试环境和辅助技术可能只触发 click；
-                      // 用 click 兜底选中，真实拖拽仍由 pointerDown 负责。
-                      event.stopPropagation();
-                      if (isPickingCharacterSpecFromCanvas) {
-                        return;
-                      }
-                      if (isPickingIconSpecFromCanvas) {
-                        return;
-                      }
-                      if (event.shiftKey || isShiftPressedRef.current) {
-                        return;
-                      }
-                      selectSingleLayer(layer.id);
-                      setImageContextMenu(null);
-                    }}
-                    onContextMenu={(event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      if (!selectedLayerIds.includes(layer.id)) {
-                        selectSingleLayer(layer.id);
-                      }
-                      const position = resolveContextMenuPosition(
-                        event.clientX,
-                        event.clientY,
-                        'layer',
-                      );
-                      setContextMenu({
-                        kind: 'layer',
-                        layerId: layer.id,
-                        ...position,
-                        canvasPoint: getCanvasPointFromClient(
-                          event.clientX,
-                          event.clientY,
-                        ),
-                      });
-                      setImageContextMenu({
-                        layerId: layer.id,
-                        ...position,
-                      });
-                    }}
-                    onMouseEnter={() => setHoveredLayerId(layer.id)}
-                    onMouseLeave={() =>
-                      setHoveredLayerId((currentId) =>
-                        currentId === layer.id ? null : currentId,
-                      )
-                    }
-                    aria-label={`选择${layer.title}`}
-                  >
-                    <img
-                      src={layer.src}
-                      alt={`画布图片：${layer.title}`}
-                      style={{
-                        transform:
-                          layer.flipX || layer.flipY
-                            ? `scale(${layer.flipX ? -1 : 1}, ${
-                                layer.flipY ? -1 : 1
-                              })`
-                            : undefined,
-                      }}
-                    />
-                    {kindLabel ? (
-                      <span
-                        className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind}`}
-                      >
-                        {kindLabel}
-                      </span>
-                    ) : null}
-                    <PlatformIconButton
-                      asChild="spanButton"
-                      variant="darkMini"
-                      className={`image-canvas-editor__metadata-corner ${
-                        kindLabel
-                          ? 'image-canvas-editor__metadata-corner--beside-kind'
-                          : ''
-                      }`}
-                      label={`查看${layer.title}图片信息`}
-                      icon={<Braces className="h-3 w-3" />}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        setMetadataLayer(layer);
-                        selectSingleLayer(layer.id);
-                      }}
-                      onPointerDown={(event) => event.stopPropagation()}
-                    />
-                    {isHovered ? (
-                      <PlatformPillBadge
-                        tone="lightOverlay"
-                        size="xs"
-                        className="image-canvas-editor__size-badge"
-                      >
-                        {Math.round(layer.originalWidth)} x{' '}
-                        {Math.round(layer.originalHeight)} px
-                      </PlatformPillBadge>
-                    ) : null}
-                    {layerGeneratingLabel ? (
-                      <span
-                        className="image-canvas-editor__generation-frame-progress image-canvas-editor__layer-generating-progress"
-                        role="status"
-                      >
-                        {layerGeneratingLabel}
-                      </span>
-                    ) : null}
-                  </button>
-                );
-              })}
-            {canvasMarquee ? (
-              <div
-                className="image-canvas-editor__canvas-marquee"
-                aria-hidden="true"
-                style={{
-                  left:
-                    (Math.min(canvasMarquee.startX, canvasMarquee.currentX) -
-                      viewport.x) /
-                    viewport.scale,
-                  top:
-                    (Math.min(canvasMarquee.startY, canvasMarquee.currentY) -
-                      viewport.y) /
-                    viewport.scale,
-                  width:
-                    Math.abs(canvasMarquee.currentX - canvasMarquee.startX) /
-                    viewport.scale,
-                  height:
-                    Math.abs(canvasMarquee.currentY - canvasMarquee.startY) /
-                    viewport.scale,
-                }}
-              />
-            ) : null}
-            {canvasGenerationDialogs.map((dialog) =>
-              dialog.placeholder ? (
-                <div
-                  key={dialog.id}
-                  className={`image-canvas-editor__generation-frame ${
-                    dialog.mode === 'icon'
-                      ? 'image-canvas-editor__generation-frame--icon'
-                      : ''
-                  } ${
-                    dialog.status === 'generating'
-                      ? 'image-canvas-editor__generation-frame--generating'
-                      : ''
-                  }`}
-                  role="button"
-                  tabIndex={0}
-                  style={{
-                    left: dialog.placeholder.x,
-                    top: dialog.placeholder.y,
-                    width: dialog.placeholder.width,
-                    height: dialog.placeholder.height,
-                  }}
-                  aria-label={getGenerationFrameAriaLabel(dialog)}
-                  onPointerDown={(event) =>
-                    handleGenerationFramePointerDown(event, dialog)
-                  }
-                  onDoubleClick={() => activateCanvasGenerationDialog(dialog)}
-                >
-                  <span className="image-canvas-editor__generation-frame-label">
-                    <ImageIcon className="h-4 w-4" />
-                    {getGenerationFrameLabel(dialog)}
-                  </span>
-                  {dialog.mode === 'character' ? (
-                    <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--character">
-                      角色
-                    </span>
-                  ) : null}
-                  {dialog.mode === 'spec' ? (
-                    <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--spec">
-                      规范
-                    </span>
-                  ) : null}
-                  {dialog.mode === 'icon' ? (
-                    <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--icon">
-                      图标
-                    </span>
-                  ) : null}
-                  <span className="image-canvas-editor__generation-frame-size">
-                    {dialog.placeholder.originalWidth} x{' '}
-                    {dialog.placeholder.originalHeight}
-                  </span>
-                  <span className="image-canvas-editor__generation-frame-icon">
-                    <ImageIcon className="h-8 w-8" />
-                  </span>
-                  {dialog.status === 'generating' ? (
-                    <span
-                      className="image-canvas-editor__generation-frame-progress"
-                      role="status"
-                    >
-                      生成中
-                    </span>
-                  ) : null}
-                </div>
-              ) : null,
-            )}
-            {(generateDialog?.mode === 'generate' ||
-              generateDialog?.mode === 'spec' ||
-              generateDialog?.mode === 'character' ||
-              generateDialog?.mode === 'icon') &&
-            generateDialog.status === 'generating' &&
-            generationComposerStyle ? (
-              <PlatformStatusMessage
-                tone="info"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status image-canvas-editor__generate-status--floating"
-                role="status"
-                style={generationComposerStyle}
-              >
-                生成中
-              </PlatformStatusMessage>
-            ) : null}
-          </div>
-
-          {selectedLayer && selectedToolbarStyle ? (
-            <div
-              className="image-canvas-editor__floating-toolbar"
-              style={selectedToolbarStyle}
-              role="toolbar"
-              aria-label="图片工具栏"
-              onPointerDown={(event) => event.stopPropagation()}
-            >
-              {toolButtons.map(({ label, icon: Icon }) => (
-                <EditorIconButton
-                  key={label}
-                  label={`${label}占位`}
-                  title={`${label}占位`}
-                  icon={Icon}
-                  onClick={() => triggerPlaceholderAction(label)}
-                />
-              ))}
-              <EditorIconButton
-                label="删除图片"
-                title="删除图片"
-                icon={Trash2}
-                onClick={deleteSelectedLayer}
-              />
-              <EditorIconButton
-                label="快速编辑"
-                title="快速编辑"
-                icon={Sparkles}
-                onClick={() => openQuickEditPanel(selectedLayer)}
-              />
-              {isGeneratedLayer(selectedLayer) ? (
-                <>
-                  <EditorIconButton
-                    label={`查看${selectedLayer.title}图片信息`}
-                    title={`查看${selectedLayer.title}图片信息`}
-                    icon={Info}
-                    onClick={() => setMetadataLayer(selectedLayer)}
-                  />
-                  <EditorIconButton
-                    label="修改图片"
-                    title="修改图片"
-                    icon={WandSparkles}
-                    onClick={() => openEditDialog(selectedLayer)}
-                  />
-                </>
-              ) : null}
-              {selectedLayer.assetKind === 'character' ? (
-                <EditorIconButton
-                  label="生成动画"
-                  title="生成动画"
-                  icon={Sparkles}
-                  onClick={() => openCharacterAnimationPanel(selectedLayer)}
-                />
-              ) : null}
-            </div>
-          ) : null}
-
-          {contextMenu ? (
-            <div
-              className="image-canvas-editor__context-menu"
-              role="menu"
-              aria-label={
-                contextMenu.kind === 'blank' ? '画布右键菜单' : '图片功能面板'
-              }
-              style={{
-                left: contextMenu.x,
-                top: contextMenu.y,
-              }}
-              onContextMenu={(event) => event.preventDefault()}
-              onPointerDown={(event) => event.stopPropagation()}
-            >
-              {contextMenu.kind === 'blank' ? (
-                <>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    disabled={!canvasClipboard?.layers.length}
-                    onClick={() => pasteCanvasClipboard(contextMenu.canvasPoint)}
-                  >
-                    粘贴
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 1.16);
-                      setContextMenu(null);
-                    }}
-                  >
-                    放大
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 0.86);
-                      setContextMenu(null);
-                    }}
-                  >
-                    缩小
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    onClick={() => {
-                      fitLayers();
-                      setContextMenu(null);
-                    }}
-                  >
-                    显示画布所有元素
-                  </button>
-                </>
-              ) : (
-                <>
-                  <button type="button" role="menuitem" onClick={() => copyContextLayers()}>
-                    复制
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    onClick={() => copyContextLayers({ cut: true })}
-                  >
-                    剪切
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    disabled={!canvasClipboard?.layers.length}
-                    onClick={() => pasteCanvasClipboard(contextMenu.canvasPoint)}
-                  >
-                    粘贴
-                  </button>
-                  <button type="button" role="menuitem" onClick={duplicateContextLayers}>
-                    创建副本
-                  </button>
-                  <hr />
-                  <button type="button" role="menuitem" onClick={() => moveContextLayers('up')}>
-                    上移一层
-                  </button>
-                  <button type="button" role="menuitem" onClick={() => moveContextLayers('down')}>
-                    下移一层
-                  </button>
-                  <button type="button" role="menuitem" onClick={() => moveContextLayers('top')}>
-                    置于顶层
-                  </button>
-                  <button type="button" role="menuitem" onClick={() => moveContextLayers('bottom')}>
-                    移动至底层
-                  </button>
-                  <hr />
-                  <button type="button" role="menuitem" onClick={groupContextLayers}>
-                    创建组
-                  </button>
-                  <button type="button" role="menuitem" onClick={ungroupContextLayers}>
-                    解除组
-                  </button>
-                  <button type="button" role="menuitem" onClick={toggleContextLayerVisibility}>
-                    {contextShouldShowLayer ? '显示' : '隐藏'}
-                  </button>
-                  <button type="button" role="menuitem" onClick={toggleContextLayerLock}>
-                    {contextShouldUnlockLayer ? '解锁' : '锁定'}
-                  </button>
-                  <hr />
-                  <button type="button" role="menuitem" onClick={() => flipContextLayers('x')}>
-                    水平翻转
-                  </button>
-                  <button type="button" role="menuitem" onClick={() => flipContextLayers('y')}>
-                    垂直翻转
-                  </button>
-                  <button type="button" role="menuitem" onClick={exportContextLayer}>
-                    导出为
-                  </button>
-                  <hr />
-                  {imageContextMenuLayer ? (
-                    <>
-                      <button
-                        type="button"
-                        role="menuitem"
-                        onClick={() => openQuickEditPanel(imageContextMenuLayer)}
-                      >
-                        快速编辑
-                      </button>
-                      <button
-                        type="button"
-                        role="menuitem"
-                        onClick={() => {
-                          setMetadataLayer(imageContextMenuLayer);
-                          setContextMenu(null);
-                          setImageContextMenu(null);
-                        }}
-                      >
-                        查看图片信息
-                      </button>
-                      {imageContextMenuLayer.assetKind === 'character' ? (
-                        <button
-                          type="button"
-                          role="menuitem"
-                          onClick={() =>
-                            openCharacterAnimationPanel(imageContextMenuLayer)
-                          }
-                        >
-                          生成动画
-                        </button>
-                      ) : null}
-                      <hr />
-                    </>
-                  ) : null}
-                  <button
-                    type="button"
-                    role="menuitem"
-                    className="image-canvas-editor__context-menu-danger"
-                    onClick={deleteContextLayers}
-                  >
-                    删除
-                  </button>
-                </>
-              )}
-            </div>
-          ) : null}
-
-          <EditorIconButton
-            className="image-canvas-editor__reset-button"
-            label="重置画布视图"
-            title="重置画布视图"
-            icon={RotateCcw}
-            onClick={() => fitLayers()}
-          />
-
-          <div
-            className="image-canvas-editor__panel-dock"
-            role="toolbar"
-            aria-label="画布面板入口"
-            onPointerDown={(event) => event.stopPropagation()}
-          >
-            <EditorIconButton
-              label="撤销"
-              title="撤销"
-              icon={Undo2}
-              disabled={!canUndo}
-              onClick={undoCanvasChange}
-            />
-            <EditorIconButton
-              label="重做"
-              title="重做"
-              icon={Redo2}
-              disabled={!canRedo}
-              onClick={redoCanvasChange}
-            />
-            <div className="image-canvas-editor__zoom-menu-wrap">
-              <PlatformInlineOptionButton
-                className="image-canvas-editor__zoom-trigger"
-                aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
-                aria-haspopup="menu"
-                aria-expanded={isZoomMenuOpen}
-                onClick={() => setIsZoomMenuOpen((open) => !open)}
-              >
-                {formatPercent(viewport.scale)}
-              </PlatformInlineOptionButton>
-              {isZoomMenuOpen ? (
-                <PlatformFloatingMenu label="缩放菜单" placement="top-start">
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 1.16);
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    放大
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 0.86);
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    缩小
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      fitLayers();
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    显示画布所有元素
-                  </PlatformFloatingMenuItem>
-                  {[0.5, 1, 2].map((scale) => (
-                    <PlatformFloatingMenuItem
-                      key={scale}
-                      className="image-canvas-editor__zoom-menu-item"
-                      onClick={() => {
-                        updateScaleFromCenter(scale);
-                        setIsZoomMenuOpen(false);
-                      }}
-                    >
-                      缩放至{Math.round(scale * 100)}%
-                    </PlatformFloatingMenuItem>
-                  ))}
-                </PlatformFloatingMenu>
-              ) : null}
-            </div>
-            <div className="image-canvas-editor__background-control">
-              <PlatformIconButton
-                label="画布背景色"
-                title="画布背景色"
-                aria-expanded={isBackgroundSettingsOpen}
-                onClick={() =>
-                  setIsBackgroundSettingsOpen((isOpen) => !isOpen)
-                }
-                icon={
-                  <span
-                    className="image-canvas-editor__background-swatch-current"
-                    style={{ backgroundColor: canvasBackgroundColor }}
-                  />
-                }
-              />
-              {isBackgroundSettingsOpen ? (
-                <div
-                  className="image-canvas-editor__background-panel"
-                  role="dialog"
-                  aria-label="画布背景设置"
-                >
-                  <div className="image-canvas-editor__background-panel-head">
-                    <span>画布背景</span>
-                    <span
-                      className="image-canvas-editor__background-preview"
-                      aria-label={`当前画布背景色 ${canvasBackgroundColor}`}
-                      style={{ backgroundColor: canvasBackgroundColor }}
-                    />
-                  </div>
-                  <div
-                    className="image-canvas-editor__background-presets"
-                    aria-label="画布背景预设色"
-                  >
-                    {CANVAS_BACKGROUND_OPTIONS.map((option) => (
-                      <button
-                        key={option.value}
-                        type="button"
-                        className="image-canvas-editor__background-preset"
-                        aria-label={option.label}
-                        aria-pressed={canvasBackgroundColor === option.value}
-                        onClick={() => applyCanvasBackgroundColor(option.value)}
-                      >
-                        <span
-                          className="image-canvas-editor__background-swatch"
-                          style={{ backgroundColor: option.value }}
-                        />
-                        <span>{option.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                  <label className="image-canvas-editor__background-field">
-                    <span>自定义</span>
-                    <input
-                      type="color"
-                      aria-label="自定义画布背景色"
-                      value={canvasBackgroundColor}
-                      onChange={(event) =>
-                        applyCanvasBackgroundColor(event.currentTarget.value)
-                      }
-                    />
-                  </label>
-                  <label className="image-canvas-editor__background-field image-canvas-editor__background-field--hex">
-                    <span>HEX</span>
-                    <PlatformTextField
-                      aria-label="画布背景十六进制颜色"
-                      value={canvasBackgroundHexValue}
-                      density="compact"
-                      size="xs"
-                      spellCheck={false}
-                      onChange={(event) => {
-                        const nextValue = event.currentTarget.value;
-                        setCanvasBackgroundHexValue(nextValue);
-                        const normalizedColor =
-                          normalizeCanvasBackgroundHex(nextValue);
-                        if (normalizedColor) {
-                          setCanvasBackgroundColor(normalizedColor);
-                          setCanvasBackgroundHexValue(normalizedColor);
-                        }
-                      }}
-                    />
-                  </label>
-                  <PlatformActionButton
-                    tone="secondary"
-                    size="xs"
-                    className="image-canvas-editor__background-reset"
-                    onClick={() =>
-                      applyCanvasBackgroundColor(DEFAULT_CANVAS_BACKGROUND_COLOR)
-                    }
-                  >
-                    <RotateCcw className="h-3.5 w-3.5" aria-hidden="true" />
-                    恢复默认
-                  </PlatformActionButton>
-                </div>
-              ) : null}
-            </div>
-            <EditorIconButton
-              label="打开素材"
-              title="素材"
-              icon={ImagePlus}
-              pressed={activeSidebarPanel === 'assets'}
-              onClick={() => toggleSidebarPanel('assets')}
-            />
-            <EditorIconButton
-              label="打开图层"
-              title="图层"
-              icon={Layers}
-              pressed={activeSidebarPanel === 'layers'}
-              onClick={() => toggleSidebarPanel('layers')}
-            />
-            <EditorIconButton
-              label="切换小地图"
-              title="小地图"
-              icon={MapIcon}
-              pressed={isMinimapOpen}
-              onClick={() => setIsMinimapOpen((open) => !open)}
-            />
-          </div>
-
-          {isMinimapOpen && minimapModel ? (
-            <button
-              type="button"
-              className="image-canvas-editor__minimap"
-              aria-label="画布小地图"
-              title="拖拽移动视图"
-              onPointerDown={handleMinimapPointerDown}
-            >
-              <span className="image-canvas-editor__minimap-stage">
-                {minimapModel.layers.map((layer) => (
-                  <span
-                    key={layer.id}
-                    className="image-canvas-editor__minimap-layer"
-                    title={layer.title}
-                    style={layer.rect}
-                  />
-                ))}
-                <span
-                  className="image-canvas-editor__minimap-viewport"
-                  style={minimapModel.viewport}
-                />
-              </span>
-            </button>
-          ) : null}
-
-          <div
-            className="image-canvas-editor__bottom-toolbar"
-            role="toolbar"
-            aria-label="AI画布工具栏"
-            onPointerDown={(event) => event.stopPropagation()}
-          >
-            {canvasTools.map(({ id, label, icon: Icon }) =>
-              id === 'spec' ? (
-                <span
-                  key={id}
-                  ref={specToolWrapRef}
-                  className="image-canvas-editor__spec-tool-wrap"
-                >
-                  <EditorIconButton
-                    label={label}
-                    title={label}
-                    icon={Icon}
-                    pressed={effectiveTool === id}
-                    onClick={() => switchTool(id)}
-                  />
-                </span>
-              ) : (
-                <EditorIconButton
-                  key={id}
-                  label={label}
-                  title={label}
-                  icon={Icon}
-                  pressed={effectiveTool === id}
-                  onClick={() => switchTool(id)}
-                />
-              ),
-            )}
-          </div>
 
           {isSpecMenuOpen
             ? renderEditorPortal(
@@ -6020,53 +5357,7 @@ export function ImageCanvasEditorView() {
             </form>
           ) : null}
 
-          {imageContextMenu && imageContextMenuLayer && !contextMenu ? (
-            <div
-              className="image-canvas-editor__context-menu"
-              style={{
-                left: imageContextMenu.x,
-                top: imageContextMenu.y,
-              }}
-              onPointerDown={(event) => event.stopPropagation()}
-            >
-              <PlatformFloatingMenu
-                label="图片功能面板"
-                placement="bottom-start"
-              >
-                <PlatformFloatingMenuItem
-                  className="image-canvas-editor__context-menu-item"
-                  onClick={() => openQuickEditPanel(imageContextMenuLayer)}
-                >
-                  快速编辑
-                </PlatformFloatingMenuItem>
-                <PlatformFloatingMenuItem
-                  className="image-canvas-editor__context-menu-item"
-                  onClick={() => {
-                    setMetadataLayer(imageContextMenuLayer);
-                    setImageContextMenu(null);
-                  }}
-                >
-                  查看图片信息
-                </PlatformFloatingMenuItem>
-                {imageContextMenuLayer.assetKind === 'character' ? (
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__context-menu-item"
-                    onClick={() =>
-                      openCharacterAnimationPanel(imageContextMenuLayer)
-                    }
-                  >
-                    生成动画
-                  </PlatformFloatingMenuItem>
-                ) : null}
-                <PlatformFloatingMenuItem
-                  className="image-canvas-editor__context-menu-item"
-                  onClick={() => deleteLayerById(imageContextMenuLayer.id)}
-                >
-                  删除图片
-                </PlatformFloatingMenuItem>
-              </PlatformFloatingMenu>
-            </div>
-          ) : null}
+
 
           {characterAnimationPanel &&
           characterAnimationSourceLayer &&
@@ -6277,7 +5568,7 @@ export function ImageCanvasEditorView() {
               </PlatformActionButton>
             </form>
           ) : null}
-        </div>
+        </ImageCanvasStageView>
       </div>
 
       <UnifiedModal
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
new file mode 100644
index 00000000..ee1a26e3
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -0,0 +1,1091 @@
+import {
+  Braces,
+  ChevronDown,
+  ClipboardList,
+  Copy,
+  Crop,
+  Download,
+  Hand,
+  ImageIcon,
+  ImagePlus,
+  Info,
+  Layers,
+  Map as MapIcon,
+  MousePointer2,
+  Redo2,
+  RotateCcw,
+  Shapes,
+  SlidersHorizontal,
+  Sparkles,
+  Trash2,
+  Type,
+  Undo2,
+  WandSparkles,
+} from 'lucide-react';
+import type {
+  CSSProperties,
+  DragEvent as ReactDragEvent,
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+  RefObject,
+  WheelEvent as ReactWheelEvent,
+} from 'react';
+
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
+import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
+import { PlatformPillBadge } from '../common/PlatformPillBadge';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformTextField } from '../common/PlatformTextField';
+import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import {
+  CANVAS_BACKGROUND_OPTIONS,
+  CANVAS_WORLD_SIZE,
+  DEFAULT_CANVAS_BACKGROUND_COLOR,
+  formatPercent,
+  isGeneratedLayer,
+} from './ImageCanvasEditorModel';
+import {
+  getGenerationFrameAriaLabel,
+  getGenerationFrameLabel,
+  getLayerKindLabel,
+} from './ImageCanvasGenerationModel';
+import type {
+  CanvasClipboard,
+  CanvasContextMenuState,
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasMarqueeState,
+  CanvasTool,
+  CanvasViewport,
+  GenerateDialogState,
+  ImageContextMenuState,
+  QuickEditPanelState,
+  SidebarPanel,
+  SnapGuide,
+} from './ImageCanvasEditorTypes';
+
+type StageMinimapModel = {
+  layers: Array<{
+    id: string;
+    title: string;
+    rect: CSSProperties;
+  }>;
+  viewport: CSSProperties;
+};
+
+type ImageCanvasStageViewProps = {
+  canvasViewportRef: RefObject<HTMLDivElement | null>;
+  specToolWrapRef: RefObject<HTMLSpanElement | null>;
+  isPanning: boolean;
+  effectiveTool: CanvasTool;
+  canvasBackgroundColor: string;
+  canvasBackgroundHexValue: string;
+  viewport: CanvasViewport;
+  snapGuide: SnapGuide | null;
+  layers: CanvasLayer[];
+  selectedLayer: CanvasLayer | null;
+  selectedLayerIds: string[];
+  hoveredLayerId: string | null;
+  canvasMarquee: CanvasMarqueeState | null;
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
+  generateDialog: GenerateDialogState | null;
+  quickEditPanel: QuickEditPanelState | null;
+  generationComposerStyle: CSSProperties | null;
+  selectedToolbarStyle: CSSProperties | null;
+  uploadDropTarget: 'canvas' | 'assets' | null;
+  contextMenu: CanvasContextMenuState | null;
+  canvasClipboard: CanvasClipboard | null;
+  imageContextMenu: ImageContextMenuState | null;
+  imageContextMenuLayer: CanvasLayer | null;
+  contextShouldShowLayer: boolean;
+  contextShouldUnlockLayer: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  isZoomMenuOpen: boolean;
+  isBackgroundSettingsOpen: boolean;
+  activeSidebarPanel: SidebarPanel | null;
+  isMinimapOpen: boolean;
+  minimapModel: StageMinimapModel | null;
+  children?: ReactNode;
+  onCanvasPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onCanvasPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onCanvasPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onCanvasWheel: (event: ReactWheelEvent<HTMLDivElement>) => void;
+  onCanvasDragOver: (event: ReactDragEvent<HTMLDivElement>) => void;
+  onCanvasDragLeave: (event: ReactDragEvent<HTMLDivElement>) => void;
+  onCanvasDrop: (event: ReactDragEvent<HTMLDivElement>) => void;
+  onCanvasContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
+  onLayerPointerDown: (
+    event: ReactPointerEvent<HTMLButtonElement>,
+    layer: CanvasLayer,
+  ) => void;
+  onLayerClick: (
+    event: ReactMouseEvent<HTMLButtonElement>,
+    layer: CanvasLayer,
+  ) => void;
+  onLayerContextMenu: (
+    event: ReactMouseEvent<HTMLButtonElement>,
+    layer: CanvasLayer,
+  ) => void;
+  onLayerMouseEnter: (layerId: string) => void;
+  onLayerMouseLeave: (layerId: string) => void;
+  onOpenLayerMetadata: (layer: CanvasLayer) => void;
+  onGenerationFramePointerDown: (
+    event: ReactPointerEvent<HTMLDivElement>,
+    dialog: CanvasGenerationDialogState,
+  ) => void;
+  onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
+  onDeleteSelectedLayer: () => void;
+  onOpenQuickEditPanel: (layer: CanvasLayer) => void;
+  onOpenEditDialog: (layer: CanvasLayer) => void;
+  onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
+  onPasteCanvasClipboard: (canvasPoint?: { x: number; y: number }) => void;
+  onCopyContextLayers: (options?: { cut?: boolean }) => void;
+  onDuplicateContextLayers: () => void;
+  onMoveContextLayers: (mode: 'up' | 'down' | 'top' | 'bottom') => void;
+  onGroupContextLayers: () => void;
+  onUngroupContextLayers: () => void;
+  onToggleContextLayerVisibility: () => void;
+  onToggleContextLayerLock: () => void;
+  onFlipContextLayers: (axis: 'x' | 'y') => void;
+  onExportContextLayer: () => void;
+  onDeleteContextLayers: () => void;
+  onDeleteLayerById: (layerId: string | null) => void;
+  onCloseContextMenu: () => void;
+  onCloseImageContextMenu: () => void;
+  onUpdateScaleFromCenter: (nextScale: number) => void;
+  onFitLayers: () => void;
+  onUndoCanvasChange: () => void;
+  onRedoCanvasChange: () => void;
+  onToggleZoomMenu: () => void;
+  onCloseZoomMenu: () => void;
+  onToggleBackgroundSettings: () => void;
+  onApplyCanvasBackgroundColor: (color: string) => void;
+  onCanvasBackgroundHexChange: (value: string) => void;
+  onToggleSidebarPanel: (panel: SidebarPanel) => void;
+  onToggleMinimap: () => void;
+  onMinimapPointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onSwitchTool: (tool: CanvasTool) => void;
+};
+
+const layerToolButtons = [
+  { label: '裁剪', icon: Crop },
+  { label: '重绘', icon: Sparkles },
+  { label: '调整', icon: SlidersHorizontal },
+  { label: '复制', icon: Copy },
+];
+
+const canvasTools: Array<{
+  id: CanvasTool;
+  label: string;
+  icon: typeof MousePointer2;
+}> = [
+  { id: 'select', label: '选择工具', icon: MousePointer2 },
+  { id: 'hand', label: '抓手工具', icon: Hand },
+  { id: 'upload', label: '上传工具', icon: ImagePlus },
+  { id: 'generate', label: '生成工具', icon: WandSparkles },
+  { id: 'spec', label: '生成规范', icon: ClipboardList },
+  { id: 'character', label: '生成角色形象', icon: Sparkles },
+  { id: 'icon', label: '生成图标素材', icon: ImageIcon },
+  { id: 'text', label: '文字工具', icon: Type },
+  { id: 'shape', label: '形状标注工具', icon: Shapes },
+  { id: 'export', label: '导出工具', icon: Download },
+];
+
+function triggerPlaceholderAction(label: string) {
+  window.alert(`${label}功能建设中`);
+}
+
+export function ImageCanvasStageView({
+  canvasViewportRef,
+  specToolWrapRef,
+  isPanning,
+  effectiveTool,
+  canvasBackgroundColor,
+  canvasBackgroundHexValue,
+  viewport,
+  snapGuide,
+  layers,
+  selectedLayer,
+  selectedLayerIds,
+  hoveredLayerId,
+  canvasMarquee,
+  canvasGenerationDialogs,
+  generateDialog,
+  quickEditPanel,
+  generationComposerStyle,
+  selectedToolbarStyle,
+  uploadDropTarget,
+  contextMenu,
+  canvasClipboard,
+  imageContextMenu,
+  imageContextMenuLayer,
+  contextShouldShowLayer,
+  contextShouldUnlockLayer,
+  canUndo,
+  canRedo,
+  isZoomMenuOpen,
+  isBackgroundSettingsOpen,
+  activeSidebarPanel,
+  isMinimapOpen,
+  minimapModel,
+  children,
+  onCanvasPointerDown,
+  onCanvasPointerMove,
+  onCanvasPointerUp,
+  onCanvasWheel,
+  onCanvasDragOver,
+  onCanvasDragLeave,
+  onCanvasDrop,
+  onCanvasContextMenu,
+  onLayerPointerDown,
+  onLayerClick,
+  onLayerContextMenu,
+  onLayerMouseEnter,
+  onLayerMouseLeave,
+  onOpenLayerMetadata,
+  onGenerationFramePointerDown,
+  onActivateGenerationDialog,
+  onDeleteSelectedLayer,
+  onOpenQuickEditPanel,
+  onOpenEditDialog,
+  onOpenCharacterAnimationPanel,
+  onPasteCanvasClipboard,
+  onCopyContextLayers,
+  onDuplicateContextLayers,
+  onMoveContextLayers,
+  onGroupContextLayers,
+  onUngroupContextLayers,
+  onToggleContextLayerVisibility,
+  onToggleContextLayerLock,
+  onFlipContextLayers,
+  onExportContextLayer,
+  onDeleteContextLayers,
+  onDeleteLayerById,
+  onCloseContextMenu,
+  onCloseImageContextMenu,
+  onUpdateScaleFromCenter,
+  onFitLayers,
+  onUndoCanvasChange,
+  onRedoCanvasChange,
+  onToggleZoomMenu,
+  onCloseZoomMenu,
+  onToggleBackgroundSettings,
+  onApplyCanvasBackgroundColor,
+  onCanvasBackgroundHexChange,
+  onToggleSidebarPanel,
+  onToggleMinimap,
+  onMinimapPointerDown,
+  onSwitchTool,
+}: ImageCanvasStageViewProps) {
+  return (
+    <div
+      ref={canvasViewportRef}
+      className={`image-canvas-editor__viewport ${isPanning ? 'image-canvas-editor__viewport--panning' : ''} image-canvas-editor__viewport--tool-${effectiveTool}`}
+      style={{ backgroundColor: canvasBackgroundColor }}
+      aria-label="画布工作区"
+      onPointerDown={onCanvasPointerDown}
+      onPointerMove={onCanvasPointerMove}
+      onPointerUp={onCanvasPointerUp}
+      onPointerCancel={onCanvasPointerUp}
+      onWheel={onCanvasWheel}
+      onDragOver={onCanvasDragOver}
+      onDragLeave={onCanvasDragLeave}
+      onDrop={onCanvasDrop}
+      onContextMenu={onCanvasContextMenu}
+    >
+      {uploadDropTarget === 'canvas' ? (
+        <div
+          className="image-canvas-editor__upload-drop-overlay image-canvas-editor__upload-drop-overlay--canvas"
+          role="status"
+        >
+          <span>添加到画布</span>
+          <strong>松开即可添加</strong>
+        </div>
+      ) : null}
+      <div
+        className="image-canvas-editor__world"
+        style={{
+          width: CANVAS_WORLD_SIZE,
+          height: CANVAS_WORLD_SIZE,
+          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.scale})`,
+        }}
+      >
+        {snapGuide?.vertical !== undefined ? (
+          <div
+            className="image-canvas-editor__snap-guide image-canvas-editor__snap-guide--vertical"
+            data-testid="image-canvas-editor-snap-guide-vertical"
+            style={{ left: snapGuide.vertical }}
+          />
+        ) : null}
+        {snapGuide?.horizontal !== undefined ? (
+          <div
+            className="image-canvas-editor__snap-guide image-canvas-editor__snap-guide--horizontal"
+            data-testid="image-canvas-editor-snap-guide-horizontal"
+            style={{ top: snapGuide.horizontal }}
+          />
+        ) : null}
+
+        {layers
+          .slice()
+          .filter((layer) => !layer.hidden)
+          .sort((left, right) => left.zIndex - right.zIndex)
+          .map((layer) => {
+            const isSelected = selectedLayerIds.includes(layer.id);
+            const isHovered = hoveredLayerId === layer.id;
+            const kindLabel = getLayerKindLabel(layer);
+            const layerGeneratingLabel =
+              generateDialog?.mode === 'edit' &&
+              generateDialog.status === 'generating' &&
+              generateDialog.sourceLayerId === layer.id
+                ? '修改中'
+                : quickEditPanel?.status === 'generating' &&
+                    quickEditPanel.sourceLayerId === layer.id
+                  ? '生成中'
+                  : null;
+            return (
+              <button
+                key={layer.id}
+                type="button"
+                className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layerGeneratingLabel ? 'image-canvas-editor__layer--generating' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
+                style={{
+                  left: layer.x,
+                  top: layer.y,
+                  width: layer.width,
+                  height: layer.height,
+                  zIndex: layer.zIndex,
+                  display: layer.hidden ? 'none' : undefined,
+                }}
+                onPointerDown={(event) => onLayerPointerDown(event, layer)}
+                onClick={(event) => onLayerClick(event, layer)}
+                onContextMenu={(event) => onLayerContextMenu(event, layer)}
+                onMouseEnter={() => onLayerMouseEnter(layer.id)}
+                onMouseLeave={() => onLayerMouseLeave(layer.id)}
+                aria-label={`选择${layer.title}`}
+              >
+                <img
+                  src={layer.src}
+                  alt={`画布图片：${layer.title}`}
+                  style={{
+                    transform:
+                      layer.flipX || layer.flipY
+                        ? `scale(${layer.flipX ? -1 : 1}, ${
+                            layer.flipY ? -1 : 1
+                          })`
+                        : undefined,
+                  }}
+                />
+                {kindLabel ? (
+                  <span
+                    className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind}`}
+                  >
+                    {kindLabel}
+                  </span>
+                ) : null}
+                <PlatformIconButton
+                  asChild="spanButton"
+                  variant="darkMini"
+                  className={`image-canvas-editor__metadata-corner ${
+                    kindLabel
+                      ? 'image-canvas-editor__metadata-corner--beside-kind'
+                      : ''
+                  }`}
+                  label={`查看${layer.title}图片信息`}
+                  icon={<Braces className="h-3 w-3" />}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onOpenLayerMetadata(layer);
+                  }}
+                  onPointerDown={(event) => event.stopPropagation()}
+                />
+                {isHovered ? (
+                  <PlatformPillBadge
+                    tone="lightOverlay"
+                    size="xs"
+                    className="image-canvas-editor__size-badge"
+                  >
+                    {Math.round(layer.originalWidth)} x{' '}
+                    {Math.round(layer.originalHeight)} px
+                  </PlatformPillBadge>
+                ) : null}
+                {layerGeneratingLabel ? (
+                  <span
+                    className="image-canvas-editor__generation-frame-progress image-canvas-editor__layer-generating-progress"
+                    role="status"
+                  >
+                    {layerGeneratingLabel}
+                  </span>
+                ) : null}
+              </button>
+            );
+          })}
+        {canvasMarquee ? (
+          <div
+            className="image-canvas-editor__canvas-marquee"
+            aria-hidden="true"
+            style={{
+              left:
+                (Math.min(canvasMarquee.startX, canvasMarquee.currentX) -
+                  viewport.x) /
+                viewport.scale,
+              top:
+                (Math.min(canvasMarquee.startY, canvasMarquee.currentY) -
+                  viewport.y) /
+                viewport.scale,
+              width:
+                Math.abs(canvasMarquee.currentX - canvasMarquee.startX) /
+                viewport.scale,
+              height:
+                Math.abs(canvasMarquee.currentY - canvasMarquee.startY) /
+                viewport.scale,
+            }}
+          />
+        ) : null}
+        {canvasGenerationDialogs.map((dialog) =>
+          dialog.placeholder ? (
+            <div
+              key={dialog.id}
+              className={`image-canvas-editor__generation-frame ${
+                dialog.mode === 'icon'
+                  ? 'image-canvas-editor__generation-frame--icon'
+                  : ''
+              } ${
+                dialog.status === 'generating'
+                  ? 'image-canvas-editor__generation-frame--generating'
+                  : ''
+              }`}
+              role="button"
+              tabIndex={0}
+              style={{
+                left: dialog.placeholder.x,
+                top: dialog.placeholder.y,
+                width: dialog.placeholder.width,
+                height: dialog.placeholder.height,
+              }}
+              aria-label={getGenerationFrameAriaLabel(dialog)}
+              onPointerDown={(event) =>
+                onGenerationFramePointerDown(event, dialog)
+              }
+              onDoubleClick={() => onActivateGenerationDialog(dialog)}
+            >
+              <span className="image-canvas-editor__generation-frame-label">
+                <ImageIcon className="h-4 w-4" />
+                {getGenerationFrameLabel(dialog)}
+              </span>
+              {dialog.mode === 'character' ? (
+                <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--character">
+                  角色
+                </span>
+              ) : null}
+              {dialog.mode === 'spec' ? (
+                <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--spec">
+                  规范
+                </span>
+              ) : null}
+              {dialog.mode === 'icon' ? (
+                <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--icon">
+                  图标
+                </span>
+              ) : null}
+              <span className="image-canvas-editor__generation-frame-size">
+                {dialog.placeholder.originalWidth} x{' '}
+                {dialog.placeholder.originalHeight}
+              </span>
+              <span className="image-canvas-editor__generation-frame-icon">
+                <ImageIcon className="h-8 w-8" />
+              </span>
+              {dialog.status === 'generating' ? (
+                <span
+                  className="image-canvas-editor__generation-frame-progress"
+                  role="status"
+                >
+                  生成中
+                </span>
+              ) : null}
+            </div>
+          ) : null,
+        )}
+        {(generateDialog?.mode === 'generate' ||
+          generateDialog?.mode === 'spec' ||
+          generateDialog?.mode === 'character' ||
+          generateDialog?.mode === 'icon') &&
+        generateDialog.status === 'generating' &&
+        generationComposerStyle ? (
+          <PlatformStatusMessage
+            tone="info"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status image-canvas-editor__generate-status--floating"
+            role="status"
+            style={generationComposerStyle}
+          >
+            生成中
+          </PlatformStatusMessage>
+        ) : null}
+      </div>
+
+      {selectedLayer && selectedToolbarStyle ? (
+        <div
+          className="image-canvas-editor__floating-toolbar"
+          style={selectedToolbarStyle}
+          role="toolbar"
+          aria-label="图片工具栏"
+          onPointerDown={(event) => event.stopPropagation()}
+        >
+          {layerToolButtons.map(({ label, icon: Icon }) => (
+            <EditorIconButton
+              key={label}
+              label={`${label}占位`}
+              title={`${label}占位`}
+              icon={Icon}
+              onClick={() => triggerPlaceholderAction(label)}
+            />
+          ))}
+          <EditorIconButton
+            label="删除图片"
+            title="删除图片"
+            icon={Trash2}
+            onClick={onDeleteSelectedLayer}
+          />
+          <EditorIconButton
+            label="快速编辑"
+            title="快速编辑"
+            icon={Sparkles}
+            onClick={() => onOpenQuickEditPanel(selectedLayer)}
+          />
+          {isGeneratedLayer(selectedLayer) ? (
+            <>
+              <EditorIconButton
+                label={`查看${selectedLayer.title}图片信息`}
+                title={`查看${selectedLayer.title}图片信息`}
+                icon={Info}
+                onClick={() => onOpenLayerMetadata(selectedLayer)}
+              />
+              <EditorIconButton
+                label="修改图片"
+                title="修改图片"
+                icon={WandSparkles}
+                onClick={() => onOpenEditDialog(selectedLayer)}
+              />
+            </>
+          ) : null}
+          {selectedLayer.assetKind === 'character' ? (
+            <EditorIconButton
+              label="生成动画"
+              title="生成动画"
+              icon={Sparkles}
+              onClick={() => onOpenCharacterAnimationPanel(selectedLayer)}
+            />
+          ) : null}
+        </div>
+      ) : null}
+
+      {contextMenu ? (
+        <div
+          className="image-canvas-editor__context-menu"
+          role="menu"
+          aria-label={
+            contextMenu.kind === 'blank' ? '画布右键菜单' : '图片功能面板'
+          }
+          style={{
+            left: contextMenu.x,
+            top: contextMenu.y,
+          }}
+          onContextMenu={(event) => event.preventDefault()}
+          onPointerDown={(event) => event.stopPropagation()}
+        >
+          {contextMenu.kind === 'blank' ? (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                disabled={!canvasClipboard?.layers.length}
+                onClick={() => onPasteCanvasClipboard(contextMenu.canvasPoint)}
+              >
+                粘贴
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  onUpdateScaleFromCenter(viewport.scale * 1.16);
+                  onCloseContextMenu();
+                }}
+              >
+                放大
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  onUpdateScaleFromCenter(viewport.scale * 0.86);
+                  onCloseContextMenu();
+                }}
+              >
+                缩小
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  onFitLayers();
+                  onCloseContextMenu();
+                }}
+              >
+                显示画布所有元素
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onCopyContextLayers()}
+              >
+                复制
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onCopyContextLayers({ cut: true })}
+              >
+                剪切
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                disabled={!canvasClipboard?.layers.length}
+                onClick={() => onPasteCanvasClipboard(contextMenu.canvasPoint)}
+              >
+                粘贴
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={onDuplicateContextLayers}
+              >
+                创建副本
+              </button>
+              <hr />
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onMoveContextLayers('up')}
+              >
+                上移一层
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onMoveContextLayers('down')}
+              >
+                下移一层
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onMoveContextLayers('top')}
+              >
+                置于顶层
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onMoveContextLayers('bottom')}
+              >
+                移动至底层
+              </button>
+              <hr />
+              <button type="button" role="menuitem" onClick={onGroupContextLayers}>
+                创建组
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={onUngroupContextLayers}
+              >
+                解除组
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={onToggleContextLayerVisibility}
+              >
+                {contextShouldShowLayer ? '显示' : '隐藏'}
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={onToggleContextLayerLock}
+              >
+                {contextShouldUnlockLayer ? '解锁' : '锁定'}
+              </button>
+              <hr />
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onFlipContextLayers('x')}
+              >
+                水平翻转
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => onFlipContextLayers('y')}
+              >
+                垂直翻转
+              </button>
+              <button type="button" role="menuitem" onClick={onExportContextLayer}>
+                导出为
+              </button>
+              <hr />
+              {imageContextMenuLayer ? (
+                <>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => onOpenQuickEditPanel(imageContextMenuLayer)}
+                  >
+                    快速编辑
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      onOpenLayerMetadata(imageContextMenuLayer);
+                      onCloseContextMenu();
+                      onCloseImageContextMenu();
+                    }}
+                  >
+                    查看图片信息
+                  </button>
+                  {imageContextMenuLayer.assetKind === 'character' ? (
+                    <button
+                      type="button"
+                      role="menuitem"
+                      onClick={() =>
+                        onOpenCharacterAnimationPanel(imageContextMenuLayer)
+                      }
+                    >
+                      生成动画
+                    </button>
+                  ) : null}
+                  <hr />
+                </>
+              ) : null}
+              <button
+                type="button"
+                role="menuitem"
+                className="image-canvas-editor__context-menu-danger"
+                onClick={onDeleteContextLayers}
+              >
+                删除
+              </button>
+            </>
+          )}
+        </div>
+      ) : null}
+
+      <EditorIconButton
+        className="image-canvas-editor__reset-button"
+        label="重置画布视图"
+        title="重置画布视图"
+        icon={RotateCcw}
+        onClick={onFitLayers}
+      />
+
+      <div
+        className="image-canvas-editor__panel-dock"
+        role="toolbar"
+        aria-label="画布面板入口"
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <EditorIconButton
+          label="撤销"
+          title="撤销"
+          icon={Undo2}
+          disabled={!canUndo}
+          onClick={onUndoCanvasChange}
+        />
+        <EditorIconButton
+          label="重做"
+          title="重做"
+          icon={Redo2}
+          disabled={!canRedo}
+          onClick={onRedoCanvasChange}
+        />
+        <div className="image-canvas-editor__zoom-menu-wrap">
+          <PlatformInlineOptionButton
+            className="image-canvas-editor__zoom-trigger"
+            aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
+            aria-haspopup="menu"
+            aria-expanded={isZoomMenuOpen}
+            onClick={onToggleZoomMenu}
+          >
+            {formatPercent(viewport.scale)}
+          </PlatformInlineOptionButton>
+          {isZoomMenuOpen ? (
+            <PlatformFloatingMenu label="缩放菜单" placement="top-start">
+              <PlatformFloatingMenuItem
+                className="image-canvas-editor__zoom-menu-item"
+                onClick={() => {
+                  onUpdateScaleFromCenter(viewport.scale * 1.16);
+                  onCloseZoomMenu();
+                }}
+              >
+                放大
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                className="image-canvas-editor__zoom-menu-item"
+                onClick={() => {
+                  onUpdateScaleFromCenter(viewport.scale * 0.86);
+                  onCloseZoomMenu();
+                }}
+              >
+                缩小
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                className="image-canvas-editor__zoom-menu-item"
+                onClick={() => {
+                  onFitLayers();
+                  onCloseZoomMenu();
+                }}
+              >
+                显示画布所有元素
+              </PlatformFloatingMenuItem>
+              {[0.5, 1, 2].map((scale) => (
+                <PlatformFloatingMenuItem
+                  key={scale}
+                  className="image-canvas-editor__zoom-menu-item"
+                  onClick={() => {
+                    onUpdateScaleFromCenter(scale);
+                    onCloseZoomMenu();
+                  }}
+                >
+                  缩放至{Math.round(scale * 100)}%
+                </PlatformFloatingMenuItem>
+              ))}
+            </PlatformFloatingMenu>
+          ) : null}
+        </div>
+        <div className="image-canvas-editor__background-control">
+          <PlatformIconButton
+            label="画布背景色"
+            title="画布背景色"
+            aria-expanded={isBackgroundSettingsOpen}
+            onClick={onToggleBackgroundSettings}
+            icon={
+              <span
+                className="image-canvas-editor__background-swatch-current"
+                style={{ backgroundColor: canvasBackgroundColor }}
+              />
+            }
+          />
+          {isBackgroundSettingsOpen ? (
+            <div
+              className="image-canvas-editor__background-panel"
+              role="dialog"
+              aria-label="画布背景设置"
+            >
+              <div className="image-canvas-editor__background-panel-head">
+                <span>画布背景</span>
+                <span
+                  className="image-canvas-editor__background-preview"
+                  aria-label={`当前画布背景色 ${canvasBackgroundColor}`}
+                  style={{ backgroundColor: canvasBackgroundColor }}
+                />
+              </div>
+              <div
+                className="image-canvas-editor__background-presets"
+                aria-label="画布背景预设色"
+              >
+                {CANVAS_BACKGROUND_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    className="image-canvas-editor__background-preset"
+                    aria-label={option.label}
+                    aria-pressed={canvasBackgroundColor === option.value}
+                    onClick={() => onApplyCanvasBackgroundColor(option.value)}
+                  >
+                    <span
+                      className="image-canvas-editor__background-swatch"
+                      style={{ backgroundColor: option.value }}
+                    />
+                    <span>{option.label}</span>
+                  </button>
+                ))}
+              </div>
+              <label className="image-canvas-editor__background-field">
+                <span>自定义</span>
+                <input
+                  type="color"
+                  aria-label="自定义画布背景色"
+                  value={canvasBackgroundColor}
+                  onChange={(event) =>
+                    onApplyCanvasBackgroundColor(event.currentTarget.value)
+                  }
+                />
+              </label>
+              <label className="image-canvas-editor__background-field image-canvas-editor__background-field--hex">
+                <span>HEX</span>
+                <PlatformTextField
+                  aria-label="画布背景十六进制颜色"
+                  value={canvasBackgroundHexValue}
+                  density="compact"
+                  size="xs"
+                  spellCheck={false}
+                  onChange={(event) =>
+                    onCanvasBackgroundHexChange(event.currentTarget.value)
+                  }
+                />
+              </label>
+              <PlatformActionButton
+                tone="secondary"
+                size="xs"
+                className="image-canvas-editor__background-reset"
+                onClick={() =>
+                  onApplyCanvasBackgroundColor(DEFAULT_CANVAS_BACKGROUND_COLOR)
+                }
+              >
+                <RotateCcw className="h-3.5 w-3.5" aria-hidden="true" />
+                恢复默认
+              </PlatformActionButton>
+            </div>
+          ) : null}
+        </div>
+        <EditorIconButton
+          label="打开素材"
+          title="素材"
+          icon={ImagePlus}
+          pressed={activeSidebarPanel === 'assets'}
+          onClick={() => onToggleSidebarPanel('assets')}
+        />
+        <EditorIconButton
+          label="打开图层"
+          title="图层"
+          icon={Layers}
+          pressed={activeSidebarPanel === 'layers'}
+          onClick={() => onToggleSidebarPanel('layers')}
+        />
+        <EditorIconButton
+          label="切换小地图"
+          title="小地图"
+          icon={MapIcon}
+          pressed={isMinimapOpen}
+          onClick={onToggleMinimap}
+        />
+      </div>
+
+      {isMinimapOpen && minimapModel ? (
+        <button
+          type="button"
+          className="image-canvas-editor__minimap"
+          aria-label="画布小地图"
+          title="拖拽移动视图"
+          onPointerDown={onMinimapPointerDown}
+        >
+          <span className="image-canvas-editor__minimap-stage">
+            {minimapModel.layers.map((layer) => (
+              <span
+                key={layer.id}
+                className="image-canvas-editor__minimap-layer"
+                title={layer.title}
+                style={layer.rect}
+              />
+            ))}
+            <span
+              className="image-canvas-editor__minimap-viewport"
+              style={minimapModel.viewport}
+            />
+          </span>
+        </button>
+      ) : null}
+
+      <div
+        className="image-canvas-editor__bottom-toolbar"
+        role="toolbar"
+        aria-label="AI画布工具栏"
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        {canvasTools.map(({ id, label, icon: Icon }) =>
+          id === 'spec' ? (
+            <span
+              key={id}
+              ref={specToolWrapRef}
+              className="image-canvas-editor__spec-tool-wrap"
+            >
+              <EditorIconButton
+                label={label}
+                title={label}
+                icon={Icon}
+                pressed={effectiveTool === id}
+                onClick={() => onSwitchTool(id)}
+              />
+            </span>
+          ) : (
+            <EditorIconButton
+              key={id}
+              label={label}
+              title={label}
+              icon={Icon}
+              pressed={effectiveTool === id}
+              onClick={() => onSwitchTool(id)}
+            />
+          ),
+        )}
+      </div>
+
+      {imageContextMenu && imageContextMenuLayer && !contextMenu ? (
+        <div
+          className="image-canvas-editor__context-menu"
+          style={{
+            left: imageContextMenu.x,
+            top: imageContextMenu.y,
+          }}
+          onPointerDown={(event) => event.stopPropagation()}
+        >
+          <PlatformFloatingMenu label="图片功能面板" placement="bottom-start">
+            <PlatformFloatingMenuItem
+              className="image-canvas-editor__context-menu-item"
+              onClick={() => onOpenQuickEditPanel(imageContextMenuLayer)}
+            >
+              快速编辑
+            </PlatformFloatingMenuItem>
+            <PlatformFloatingMenuItem
+              className="image-canvas-editor__context-menu-item"
+              onClick={() => {
+                onOpenLayerMetadata(imageContextMenuLayer);
+                onCloseImageContextMenu();
+              }}
+            >
+              查看图片信息
+            </PlatformFloatingMenuItem>
+            {imageContextMenuLayer.assetKind === 'character' ? (
+              <PlatformFloatingMenuItem
+                className="image-canvas-editor__context-menu-item"
+                onClick={() => onOpenCharacterAnimationPanel(imageContextMenuLayer)}
+              >
+                生成动画
+              </PlatformFloatingMenuItem>
+            ) : null}
+            <PlatformFloatingMenuItem
+              className="image-canvas-editor__context-menu-item"
+              onClick={() => onDeleteLayerById(imageContextMenuLayer.id)}
+            >
+              删除图片
+            </PlatformFloatingMenuItem>
+          </PlatformFloatingMenu>
+        </div>
+      ) : null}
+
+      {children}
+    </div>
+  );
+}