diff --git a/TRACKING.md b/TRACKING.md
index b3698a2b..173f757f 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -116,3 +116,5 @@
 - 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画布工具栏` 保持可见。
+- 2026-06-17 前端拆分第四阶段：新增 `ImageCanvasGenerationComposerView`，把生成图片、生成规范、生成角色形象、生成图标素材、快速编辑、角色动画和修改图片弹窗从主视图抽出；生成提交、上传 input、引用选择、占位框拖拽、结果回写、历史和画布状态机仍保留在主视图。验证命令：`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` 清空浏览器数据后未登录刷新弹出 `账号入口`；关闭登录后 `画布背景色` 打开 `画布背景设置`，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)`；点击 `生成工具` 后画布显示 `Image Generator` 占位框和 `生成图片` 跟随对话框，`AI画布工具栏` 保持可见；使用临时开发账号密码登录后上传素材成功，点击素材可添加到画布，切换 `图层` 面板可看到对应图层。
diff --git a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
index b246398d..478a7274 100644
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -50,9 +50,17 @@
 
 第三阶段以后，主视图仍是画布编排入口。继续拆分前应优先选择能形成稳定边界的深模块，避免把上传链路、DataTransfer、画布坐标和历史快照拆成互相回调的小碎片。
 
+## 第四阶段模块
+
+- `ImageCanvasGenerationComposerView.tsx`
+  - 承载生成图片、生成规范、生成角色形象、生成图标素材、快速编辑图片、角色动画和修改图片弹窗的视觉表单。
+  - 保留生成对象状态机、提交 API、上传文件 input、引用选择、生成结果回写、图层历史和坐标锚定在主视图内，避免把 Lovart 式生成对象拆成不可追踪的远程状态。
+  - 该组件可以管理局部字段输入和菜单展示，但所有会影响画布事实的动作都通过主视图回调落回原有状态机。
+
 ## 后续阶段
 
-- `ImageCanvasGenerationDock`：底部 AI 工具栏和生成面板族，等生成对象状态机进一步收口后再拆。
+- 生成状态机模型：等生成对象归档、占位框拖拽、生成完成回写、失败恢复和 undo / redo 规则进一步稳定后，再从主视图抽出深层状态模型。
+- 画布命令模型：右键菜单、图层层级、分组、锁定和隐藏命令可在保持历史快照一致后继续收口。
 
 ## 验证计划
 
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 1ce17e8a..525d7aae 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1,11 +1,7 @@
 import {
   Check,
-  ChevronDown,
   ChevronLeft,
-  ClipboardList,
   Download,
-  ImageIcon,
-  ImagePlus,
   Pencil,
   X,
 } from 'lucide-react';
@@ -15,7 +11,6 @@ import {
   type DragEvent as ReactDragEvent,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
-  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -23,7 +18,6 @@ import {
   useState,
   type WheelEvent as ReactWheelEvent,
 } from 'react';
-import { createPortal } from 'react-dom';
 
 import { ApiClientError } from '../../services/apiClient';
 import { resolveEditorImageReferenceDataUrl } from '../../services/image-editor/editorImageReference';
@@ -48,22 +42,12 @@ import {
   updateEditorAsset,
   updateEditorAssetFolder,
 } from '../../services/image-editor/editorProjectClient';
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
-import {
-  PlatformFloatingMenu,
-  PlatformFloatingMenuItem,
-} from '../common/PlatformFloatingMenu';
-import { PlatformIconButton } from '../common/PlatformIconButton';
-import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import {
-  PlatformSelectField,
-  PlatformTextField,
-} from '../common/PlatformTextField';
+import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
 import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
 import { ImageCanvasStageView } from './ImageCanvasStageView';
 import {
@@ -106,13 +90,10 @@ import {
   sanitizeExportFilePart,
 } from './ImageCanvasExportModel';
 import {
-  CHARACTER_ANIMATION_ACTION_PROMPTS,
   CHARACTER_ANIMATION_DURATION_OPTIONS,
   CHARACTER_ANIMATION_MODEL,
-  CHARACTER_ANIMATION_RATIO_OPTIONS,
   CHARACTER_FRAME_DISPLAY_SIZE,
   CHARACTER_FRAME_ORIGINAL_SIZE,
-  CHARACTER_SPEC_VIEW_OPTIONS,
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_IMAGE_MODEL,
   DEFAULT_SPEC_FORM_VALUES,
@@ -124,7 +105,6 @@ import {
   ICON_FRAME_ORIGINAL_SIZE,
   SPEC_FRAME_DISPLAY_SIZE,
   SPEC_FRAME_ORIGINAL_SIZE,
-  SPEC_GENERATION_COST,
   SPEC_GENERATION_SIZE,
   SPEC_TYPE_LABEL,
   buildCharacterGenerationInputs,
@@ -173,48 +153,6 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 
-function triggerPlaceholderAction(label: string) {
-  window.alert(`${label}功能建设中`);
-}
-
-function buildPortalMenuStyle(
-  anchor: HTMLElement | null,
-  placement: 'above' | 'below',
-): CSSProperties {
-  const rect = anchor?.getBoundingClientRect();
-  if (!rect) {
-    return {
-      position: 'fixed',
-      left: 0,
-      top: 0,
-      right: 'auto',
-      bottom: 'auto',
-      zIndex: 70,
-    };
-  }
-
-  return {
-    position: 'fixed',
-    left: Math.round(rect.left),
-    top:
-      placement === 'above'
-        ? Math.round(rect.top)
-        : Math.round(rect.bottom + 8),
-    right: 'auto',
-    bottom: 'auto',
-    zIndex: 70,
-    transform:
-      placement === 'above' ? 'translateY(calc(-100% - 0.45rem))' : undefined,
-  };
-}
-
-function renderEditorPortal(node: ReactNode) {
-  if (typeof document === 'undefined') {
-    return node;
-  }
-  return createPortal(node, document.body);
-}
-
 function isImageFile(file: File) {
   return file.type.startsWith('image/');
 }
@@ -4446,1128 +4384,62 @@ export function ImageCanvasEditorView() {
           onMinimapPointerDown={handleMinimapPointerDown}
           onSwitchTool={switchTool}
         >
-
-          {isSpecMenuOpen
-            ? renderEditorPortal(
-                <PlatformFloatingMenu
-                  className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-                  label="生成规范类型"
-                  placement="top-start"
-                  style={buildPortalMenuStyle(specToolWrapRef.current, 'above')}
-                >
-                  {(['character', 'ui', 'custom'] as const).map((specType) => (
-                    <PlatformFloatingMenuItem
-                      key={specType}
-                      className="image-canvas-editor__spec-menu-item"
-                      onClick={() => openSpecDialog(specType)}
-                    >
-                      {SPEC_TYPE_LABEL[specType]}
-                    </PlatformFloatingMenuItem>
-                  ))}
-                </PlatformFloatingMenu>,
-              )
-            : null}
-
-          {generateDialog?.mode === 'generate' &&
-          generateDialog.composerOpen !== false &&
-          generationComposerStyle ? (
-            <form
-              className="image-canvas-editor__generation-composer"
-              style={generationComposerStyle}
-              role="dialog"
-              aria-label="生成图片"
-              onPointerDown={(event) => event.stopPropagation()}
-              onSubmit={(event) => {
-                event.preventDefault();
-                if (generateDialog.status !== 'generating') {
-                  void submitImageGeneration(generateDialog);
-                }
-              }}
-            >
-              <PlatformIconButton
-                variant="surfaceFloating"
-                className="image-canvas-editor__generation-ref"
-                label="添加参考图"
-                disabled={generateDialog.status === 'generating'}
-                onClick={() => {
-                  setUploadTarget('asset');
-                  uploadInputRef.current?.click();
-                }}
-                icon={<ImageIcon className="h-4 w-4" />}
-              >
-                <span>参考图</span>
-              </PlatformIconButton>
-              <PlatformTextField
-                variant="textarea"
-                aria-label="生成提示词"
-                value={generateDialog.prompt}
-                disabled={generateDialog.status === 'generating'}
-                placeholder="今天我们要创作什么"
-                size="sm"
-                density="compact"
-                className="image-canvas-editor__generation-prompt"
-                onChange={(event) =>
-                  setGenerateDialog((currentDialog) =>
-                    currentDialog
-                      ? {
-                          ...currentDialog,
-                          prompt: event.target.value,
-                          status:
-                            currentDialog.status === 'failed'
-                              ? 'idle'
-                              : currentDialog.status,
-                          errorMessage:
-                            currentDialog.status === 'failed'
-                              ? undefined
-                              : currentDialog.errorMessage,
-                        }
-                      : currentDialog,
-                  )
-                }
-              />
-              <div className="image-canvas-editor__generation-composer-footer">
-                <PlatformInlineOptionButton
-                  className="image-canvas-editor__generation-ratio"
-                  aria-label="生成比例 1:1 2k 1张"
-                  disabled={generateDialog.status === 'generating'}
-                  onClick={() => triggerPlaceholderAction('生成参数')}
-                  trailingIcon={<ChevronDown className="h-3 w-3" />}
-                >
-                  中 · 1:1(2k) · 1张
-                </PlatformInlineOptionButton>
-                <PlatformInlineOptionButton
-                  className="image-canvas-editor__generation-model"
-                  aria-label="生成模型 GPT Image"
-                  disabled={generateDialog.status === 'generating'}
-                  onClick={() => triggerPlaceholderAction('模型选择')}
-                  trailingIcon={<ChevronDown className="h-3 w-3" />}
-                >
-                  GPT Im...
-                </PlatformInlineOptionButton>
-                <PlatformActionButton
-                  type="submit"
-                  tone="secondary"
-                  size="xs"
-                  shape="pill"
-                  className="image-canvas-editor__generation-submit"
-                  disabled={generateDialog.status === 'generating'}
-                  aria-label="生成"
-                >
-                  {generateDialog.status === 'generating' ? '生成中' : '12'}
-                </PlatformActionButton>
-              </div>
-              {generateDialog.status === 'generating' ? (
-                <PlatformStatusMessage
-                  tone="info"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="status"
-                >
-                  生成中
-                </PlatformStatusMessage>
-              ) : null}
-              {generateDialog.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="alert"
-                >
-                  {generateDialog.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <EditorIconButton
-                className="image-canvas-editor__generation-close"
-                label="关闭生成图片"
-                icon={X}
-                variant="surfaceFloating"
-                disabled={generateDialog.status === 'generating'}
-                onClick={() => {
-                  setGenerateDialog((currentDialog) =>
-                    currentDialog?.mode === 'generate'
-                      ? {
-                          ...currentDialog,
-                          composerOpen: false,
-                        }
-                      : currentDialog,
-                  );
-                  setActiveTool('select');
-                }}
-              />
-            </form>
-          ) : null}
-
-          {generateDialog?.mode === 'spec' &&
-          generateDialog.composerOpen !== false &&
-          generationComposerStyle ? (
-            <form
-              className="image-canvas-editor__generation-composer image-canvas-editor__spec-composer"
-              style={generationComposerStyle}
-              role="dialog"
-              aria-label="生成规范"
-              onPointerDown={(event) => event.stopPropagation()}
-              onSubmit={(event) => {
-                event.preventDefault();
-                if (generateDialog.status !== 'generating') {
-                  void submitImageGeneration(generateDialog);
-                }
-              }}
-            >
-              <div className="image-canvas-editor__spec-fields">
-                {generateDialog.specType === 'custom' ? (
-                  <label className="image-canvas-editor__field-block">
-                    <PlatformFieldLabel
-                      variant="form"
-                      className="image-canvas-editor__field-title"
-                    >
-                      自定义规范提示词
-                    </PlatformFieldLabel>
-                    <PlatformTextField
-                      variant="textarea"
-                      aria-label="自定义规范提示词"
-                      value={generateDialog.specValues?.customPrompt ?? ''}
-                      disabled={generateDialog.status === 'generating'}
-                      size="sm"
-                      density="compact"
-                      className="image-canvas-editor__spec-textarea"
-                      onChange={(event) =>
-                        updateSpecFormValue('customPrompt', event.target.value)
-                      }
-                    />
-                  </label>
-                ) : (
-                  <>
-                    <label className="image-canvas-editor__field-block">
-                      <PlatformFieldLabel
-                        variant="form"
-                        className="image-canvas-editor__field-title"
-                      >
-                        玩法设定
-                      </PlatformFieldLabel>
-                      <PlatformTextField
-                        aria-label="玩法设定"
-                        value={generateDialog.specValues?.playSetting ?? ''}
-                        disabled={generateDialog.status === 'generating'}
-                        size="sm"
-                        density="compact"
-                        className="image-canvas-editor__spec-input"
-                        onChange={(event) =>
-                          updateSpecFormValue('playSetting', event.target.value)
-                        }
-                      />
-                    </label>
-                    <label className="image-canvas-editor__field-block">
-                      <PlatformFieldLabel
-                        variant="form"
-                        className="image-canvas-editor__field-title"
-                      >
-                        美术风格
-                      </PlatformFieldLabel>
-                      <PlatformTextField
-                        aria-label="美术风格"
-                        value={generateDialog.specValues?.artStyle ?? ''}
-                        disabled={generateDialog.status === 'generating'}
-                        size="sm"
-                        density="compact"
-                        className="image-canvas-editor__spec-input"
-                        onChange={(event) =>
-                          updateSpecFormValue('artStyle', event.target.value)
-                        }
-                      />
-                    </label>
-                    {generateDialog.specType === 'character' ? (
-                      <>
-                        <label className="image-canvas-editor__field-block">
-                          <PlatformFieldLabel
-                            variant="form"
-                            className="image-canvas-editor__field-title"
-                          >
-                            头身比
-                          </PlatformFieldLabel>
-                          <PlatformSelectField
-                            aria-label="头身比"
-                            value={generateDialog.specValues?.bodyRatio ?? '3'}
-                            disabled={generateDialog.status === 'generating'}
-                            size="sm"
-                            density="compact"
-                            className="image-canvas-editor__spec-input"
-                            onChange={(event) =>
-                              updateSpecFormValue(
-                                'bodyRatio',
-                                event.target.value,
-                              )
-                            }
-                          >
-                            {['2', '3', '4', '5', '6'].map((value) => (
-                              <option key={value} value={value}>
-                                {value}
-                              </option>
-                            ))}
-                          </PlatformSelectField>
-                        </label>
-                        <label className="image-canvas-editor__field-block">
-                          <PlatformFieldLabel
-                            variant="form"
-                            className="image-canvas-editor__field-title"
-                          >
-                            角色视角
-                          </PlatformFieldLabel>
-                          <PlatformSelectField
-                            aria-label="角色视角"
-                            value={
-                              generateDialog.specValues?.characterView ?? ''
-                            }
-                            disabled={generateDialog.status === 'generating'}
-                            size="sm"
-                            density="compact"
-                            className="image-canvas-editor__spec-input"
-                            onChange={(event) =>
-                              updateSpecFormValue(
-                                'characterView',
-                                event.target.value,
-                              )
-                            }
-                          >
-                            {CHARACTER_SPEC_VIEW_OPTIONS.map((value) => (
-                              <option key={value} value={value}>
-                                {value}
-                              </option>
-                            ))}
-                          </PlatformSelectField>
-                        </label>
-                      </>
-                    ) : null}
-                  </>
-                )}
-              </div>
-              {generateDialog.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="alert"
-                >
-                  {generateDialog.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <div className="image-canvas-editor__spec-footer">
-                <PlatformActionButton
-                  type="submit"
-                  tone="secondary"
-                  size="sm"
-                  className="image-canvas-editor__spec-submit"
-                  disabled={generateDialog.status === 'generating'}
-                  aria-label="提交生成规范"
-                >
-                  {generateDialog.status === 'generating'
-                    ? '生成中'
-                    : `消耗${SPEC_GENERATION_COST}泥点 · 生成`}
-                </PlatformActionButton>
-              </div>
-            </form>
-          ) : null}
-
-          {generateDialog?.mode === 'character' && generationComposerStyle ? (
-            <form
-              className="image-canvas-editor__character-composer"
-              style={generationComposerStyle}
-              role="dialog"
-              aria-label="生成角色形象"
-              onPointerDown={(event) => event.stopPropagation()}
-              onSubmit={(event) => {
-                event.preventDefault();
-                if (generateDialog.status !== 'generating') {
-                  void submitImageGeneration(generateDialog);
-                }
-              }}
-            >
-              <div className="image-canvas-editor__character-reference-row">
-                <div className="image-canvas-editor__field-block image-canvas-editor__character-reference-field image-canvas-editor__character-reference-field--spec">
-                  <PlatformFieldLabel
-                    variant="field"
-                    className="image-canvas-editor__field-title"
-                  >
-                    角色形象规范
-                  </PlatformFieldLabel>
-                  <span className="image-canvas-editor__character-spec-wrap">
-                    <button
-                      ref={characterSpecButtonRef}
-                      type="button"
-                      className="image-canvas-editor__character-spec-ref image-canvas-editor__reference-tile image-canvas-editor__reference-tile--spec"
-                      disabled={generateDialog.status === 'generating'}
-                      onClick={() =>
-                        setIsCharacterSpecMenuOpen((open) => !open)
-                      }
-                    >
-                      <span className="image-canvas-editor__reference-tile-visual">
-                        {generateDialog.characterSpecReference ? (
-                          <img
-                            src={generateDialog.characterSpecReference.src}
-                            alt=""
-                            aria-hidden="true"
-                          />
-                        ) : (
-                          <ClipboardList
-                            className="h-4 w-4"
-                            aria-hidden="true"
-                          />
-                        )}
-                      </span>
-                      <span className="image-canvas-editor__reference-tile-copy">
-                        {generateDialog.characterSpecReference?.label ??
-                          '角色形象规范'}
-                      </span>
-                    </button>
-                  </span>
-                </div>
-                {isCharacterSpecMenuOpen
-                  ? renderEditorPortal(
-                      <PlatformFloatingMenu
-                        className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
-                        label="角色形象规范来源"
-                        placement="bottom-start"
-                        style={buildPortalMenuStyle(
-                          characterSpecButtonRef.current,
-                          'below',
-                        )}
-                      >
-                        <PlatformFloatingMenuItem
-                          className="image-canvas-editor__context-menu-item"
-                          onClick={() => {
-                            setIsPickingCharacterSpecFromCanvas(true);
-                            setIsCharacterSpecMenuOpen(false);
-                          }}
-                        >
-                          从画布中选择
-                        </PlatformFloatingMenuItem>
-                        <PlatformFloatingMenuItem
-                          className="image-canvas-editor__context-menu-item"
-                          onClick={() => {
-                            setIsCharacterSpecMenuOpen(false);
-                            openSpecDialog('character');
-                          }}
-                        >
-                          新建角色形象规范
-                        </PlatformFloatingMenuItem>
-                        <PlatformFloatingMenuItem
-                          className="image-canvas-editor__context-menu-item"
-                          onClick={() => {
-                            setUploadTarget('character-spec');
-                            setIsCharacterSpecMenuOpen(false);
-                            uploadInputRef.current?.click();
-                          }}
-                        >
-                          上传图片
-                        </PlatformFloatingMenuItem>
-                      </PlatformFloatingMenu>,
-                    )
-                  : null}
-                <div className="image-canvas-editor__field-block image-canvas-editor__character-reference-field image-canvas-editor__character-reference-field--regular">
-                  <PlatformFieldLabel
-                    variant="field"
-                    className="image-canvas-editor__field-title"
-                  >
-                    常规参考图
-                  </PlatformFieldLabel>
-                  <div className="image-canvas-editor__character-reference-list">
-                    {(generateDialog.characterReferences ?? []).map(
-                      (reference, index) => (
-                        <span
-                          key={reference.id}
-                          className="image-canvas-editor__character-ref-thumb"
-                          title={reference.label}
-                        >
-                          <img src={reference.src} alt={reference.label} />
-                          <span className="image-canvas-editor__character-ref-index">
-                            {index + 1}
-                          </span>
-                        </span>
-                      ),
-                    )}
-                    <button
-                      type="button"
-                      className="image-canvas-editor__character-reference-add image-canvas-editor__reference-tile image-canvas-editor__reference-tile--upload"
-                      disabled={generateDialog.status === 'generating'}
-                      onClick={() => {
-                        setUploadTarget('character-reference');
-                        uploadInputRef.current?.click();
-                      }}
-                    >
-                      <span className="image-canvas-editor__reference-tile-visual">
-                        <ImagePlus className="h-4 w-4" aria-hidden="true" />
-                      </span>
-                      <span className="image-canvas-editor__reference-tile-copy">
-                        上传常规参考图
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <label className="image-canvas-editor__field-block">
-                <PlatformFieldLabel
-                  variant="field"
-                  className="image-canvas-editor__field-title"
-                >
-                  角色设定
-                </PlatformFieldLabel>
-                <PlatformTextField
-                  variant="textarea"
-                  aria-label="角色设定"
-                  value={generateDialog.prompt}
-                  disabled={generateDialog.status === 'generating'}
-                  size="sm"
-                  density="compact"
-                  className="image-canvas-editor__generation-prompt"
-                  onChange={(event) =>
-                    setGenerateDialog((currentDialog) =>
-                      currentDialog?.mode === 'character'
-                        ? {
-                            ...currentDialog,
-                            prompt: event.target.value,
-                            status:
-                              currentDialog.status === 'failed'
-                                ? 'idle'
-                                : currentDialog.status,
-                            errorMessage:
-                              currentDialog.status === 'failed'
-                                ? undefined
-                                : currentDialog.errorMessage,
-                          }
-                        : currentDialog,
-                    )
-                  }
-                />
-              </label>
-              {generateDialog.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="alert"
-                >
-                  {generateDialog.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <div className="image-canvas-editor__generation-composer-footer">
-                <div className="image-canvas-editor__option-field">
-                  <PlatformFieldLabel
-                    variant="field"
-                    className="image-canvas-editor__field-title"
-                  >
-                    画面比例
-                  </PlatformFieldLabel>
-                  <PlatformInlineOptionButton
-                    className="image-canvas-editor__generation-ratio"
-                    disabled={generateDialog.status === 'generating'}
-                    onClick={() => triggerPlaceholderAction('角色比例')}
-                  >
-                    1:1
-                  </PlatformInlineOptionButton>
-                </div>
-                <div className="image-canvas-editor__option-field">
-                  <PlatformFieldLabel
-                    variant="field"
-                    className="image-canvas-editor__field-title"
-                  >
-                    模型
-                  </PlatformFieldLabel>
-                  <PlatformInlineOptionButton
-                    className="image-canvas-editor__generation-model"
-                    disabled={generateDialog.status === 'generating'}
-                    onClick={() => triggerPlaceholderAction('角色模型')}
-                  >
-                    GPT Image
-                  </PlatformInlineOptionButton>
-                </div>
-                <PlatformActionButton
-                  type="submit"
-                  tone="secondary"
-                  size="xs"
-                  shape="pill"
-                  className="image-canvas-editor__generation-submit"
-                  disabled={generateDialog.status === 'generating'}
-                >
-                  {generateDialog.status === 'generating' ? '生成中' : '生成'}
-                </PlatformActionButton>
-              </div>
-            </form>
-          ) : null}
-
-          {generateDialog?.mode === 'icon' &&
-          generateDialog.composerOpen !== false &&
-          iconComposerStyle ? (
-            <form
-              className="image-canvas-editor__icon-composer"
-              style={iconComposerStyle}
-              role="dialog"
-              aria-label="生成图标素材"
-              onPointerDown={(event) => event.stopPropagation()}
-              onSubmit={(event) => {
-                event.preventDefault();
-                if (generateDialog.status !== 'generating') {
-                  void submitIconSpritesheetGeneration(generateDialog);
-                }
-              }}
-            >
-              <div className="image-canvas-editor__field-block">
-                <PlatformFieldLabel
-                  variant="field"
-                  className="image-canvas-editor__field-title"
-                >
-                  图标素材规范
-                </PlatformFieldLabel>
-                <div className="image-canvas-editor__icon-spec-row">
-                  <span className="image-canvas-editor__character-spec-wrap">
-                    <button
-                      ref={iconSpecButtonRef}
-                      type="button"
-                      className="image-canvas-editor__icon-spec-card"
-                      disabled={generateDialog.status === 'generating'}
-                      aria-label={
-                        generateDialog.iconSpecReference?.label ??
-                        '图标素材规范'
-                      }
-                      onClick={() => setIsIconSpecMenuOpen((open) => !open)}
-                    >
-                      <span
-                        className="image-canvas-editor__icon-spec-preview"
-                        aria-hidden="true"
-                      >
-                        {generateDialog.iconSpecReference?.src ? (
-                          <img
-                            src={generateDialog.iconSpecReference.src}
-                            alt=""
-                          />
-                        ) : (
-                          <ImageIcon className="h-5 w-5" />
-                        )}
-                      </span>
-                      <span className="image-canvas-editor__icon-spec-copy">
-                        <span className="image-canvas-editor__icon-spec-eyebrow">
-                          图标素材规范
-                        </span>
-                        <span className="image-canvas-editor__icon-spec-title">
-                          {generateDialog.iconSpecReference?.label ?? '待选择'}
-                        </span>
-                      </span>
-                      <span className="image-canvas-editor__icon-spec-state">
-                        {generateDialog.iconSpecReference ? '已绑定' : '待绑定'}
-                      </span>
-                    </button>
-                  </span>
-                  {isIconSpecMenuOpen
-                  ? renderEditorPortal(
-                      <PlatformFloatingMenu
-                        className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
-                        label="图标素材规范来源"
-                        placement="bottom-start"
-                        style={buildPortalMenuStyle(
-                          iconSpecButtonRef.current,
-                          'below',
-                        )}
-                      >
-                        <PlatformFloatingMenuItem
-                          className="image-canvas-editor__context-menu-item"
-                          onClick={() => {
-                            setIsPickingIconSpecFromCanvas(true);
-                            setIsIconSpecMenuOpen(false);
-                          }}
-                        >
-                          从画布中选择
-                        </PlatformFloatingMenuItem>
-                        <PlatformFloatingMenuItem
-                          className="image-canvas-editor__context-menu-item"
-                          onClick={() => {
-                            setIsIconSpecMenuOpen(false);
-                            openSpecDialog('icon');
-                          }}
-                        >
-                          新建图标素材规范
-                        </PlatformFloatingMenuItem>
-                        <PlatformFloatingMenuItem
-                          className="image-canvas-editor__context-menu-item"
-                          onClick={() => {
-                            setUploadTarget('icon-spec');
-                            setIsIconSpecMenuOpen(false);
-                            uploadInputRef.current?.click();
-                          }}
-                        >
-                          上传图片
-                        </PlatformFloatingMenuItem>
-                      </PlatformFloatingMenu>,
-                    )
-                  : null}
-                  <div
-                    className="image-canvas-editor__icon-spec-actions"
-                    aria-label="图标素材规范操作"
-                  >
-                    <button
-                      type="button"
-                      disabled={generateDialog.status === 'generating'}
-                      onClick={() => {
-                        setIsPickingIconSpecFromCanvas(true);
-                        setIsIconSpecMenuOpen(false);
-                      }}
-                    >
-                      画布
-                    </button>
-                    <button
-                      type="button"
-                      disabled={generateDialog.status === 'generating'}
-                      onClick={() => {
-                        setIsIconSpecMenuOpen(false);
-                        openSpecDialog('icon');
-                      }}
-                    >
-                      新建
-                    </button>
-                    <button
-                      type="button"
-                      disabled={generateDialog.status === 'generating'}
-                      onClick={() => {
-                        setUploadTarget('icon-spec');
-                        setIsIconSpecMenuOpen(false);
-                        uploadInputRef.current?.click();
-                      }}
-                    >
-                      上传
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div className="image-canvas-editor__field-block">
-                <PlatformFieldLabel
-                  variant="field"
-                  className="image-canvas-editor__field-title"
-                >
-                  素材描述
-                </PlatformFieldLabel>
-                <div className="image-canvas-editor__icon-description-list">
-                  {iconDescriptionValues.map((description, index) => (
-                    <label
-                      key={index}
-                      className="image-canvas-editor__icon-description-card"
-                    >
-                      <span className="image-canvas-editor__icon-description-index">
-                        {String(index + 1).padStart(2, '0')}
-                      </span>
-                      <span className="image-canvas-editor__icon-description-title">
-                        素材描述 {index + 1}
-                      </span>
-                      <PlatformTextField
-                        aria-label={`素材描述${index + 1}`}
-                        value={description}
-                        disabled={generateDialog.status === 'generating'}
-                        size="sm"
-                        density="compact"
-                        className="image-canvas-editor__icon-description-input"
-                        onChange={(event) =>
-                          updateIconDescription(index, event.target.value)
-                        }
-                      />
-                    </label>
-                  ))}
-                </div>
-              </div>
-              {generateDialog.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="alert"
-                >
-                  {generateDialog.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <div className="image-canvas-editor__icon-footer">
-                <button
-                  type="button"
-                  className="image-canvas-editor__character-reference-add"
-                  disabled={
-                    generateDialog.status === 'generating' ||
-                    (
-                      generateDialog.iconDescriptions ??
-                      DEFAULT_ICON_DESCRIPTIONS
-                    ).length >= ICON_DESCRIPTION_LIMIT
-                  }
-                  onClick={addIconDescription}
-                >
-                  添加素材描述
-                </button>
-                <div className="image-canvas-editor__option-field">
-                  <PlatformFieldLabel
-                    variant="field"
-                    className="image-canvas-editor__field-title"
-                  >
-                    模型
-                  </PlatformFieldLabel>
-                  <PlatformInlineOptionButton
-                    className="image-canvas-editor__generation-model"
-                    disabled={generateDialog.status === 'generating'}
-                    onClick={() => triggerPlaceholderAction('图标模型')}
-                  >
-                    nanobanana2
-                  </PlatformInlineOptionButton>
-                </div>
-                <PlatformActionButton
-                  type="submit"
-                  tone="secondary"
-                  size="xs"
-                  shape="pill"
-                  className="image-canvas-editor__generation-submit"
-                  disabled={generateDialog.status === 'generating'}
-                  aria-label="生成"
-                >
-                  {generateDialog.status === 'generating' ? '生成中' : '生成'}
-                </PlatformActionButton>
-              </div>
-            </form>
-          ) : null}
-
-          {isPickingCharacterSpecFromCanvas ? (
-            <div className="image-canvas-editor__canvas-pick-hint">
-              请选择画布中的图片作为角色形象规范，按 Esc 退出
-            </div>
-          ) : null}
-          {isPickingIconSpecFromCanvas ? (
-            <div className="image-canvas-editor__canvas-pick-hint">
-              请选择画布中的图标素材规范，按 Esc 退出
-            </div>
-          ) : null}
-
-          {quickEditPanel &&
-          quickEditPanel.status !== 'generating' &&
-          quickEditSourceLayer &&
-          quickEditPanelStyle ? (
-            <form
-              className="image-canvas-editor__quick-edit-panel"
-              style={quickEditPanelStyle}
-              role="dialog"
-              aria-label="快速编辑图片"
-              onPointerDown={(event) => event.stopPropagation()}
-              onSubmit={(event) => {
-                event.preventDefault();
-                void submitQuickEdit();
-              }}
-            >
-              <div className="image-canvas-editor__quick-edit-head">
-                <div className="image-canvas-editor__quick-edit-reference">
-                  <img
-                    src={quickEditSourceLayer.src}
-                    alt={`${quickEditSourceLayer.title}参考图`}
-                  />
-                  <span>{quickEditSourceLayer.title}</span>
-                </div>
-                <EditorIconButton
-                  label="关闭快速编辑图片"
-                  title="关闭"
-                  icon={X}
-                  onClick={() => setQuickEditPanel(null)}
-                />
-              </div>
-              <PlatformTextField
-                variant="textarea"
-                aria-label="快速编辑提示词"
-                value={quickEditPanel.prompt}
-                size="sm"
-                density="compact"
-                className="image-canvas-editor__quick-edit-prompt"
-                onChange={(event) =>
-                  setQuickEditPanel((currentPanel) =>
-                    currentPanel
-                      ? {
-                          ...currentPanel,
-                          prompt: event.target.value,
-                          status:
-                            currentPanel.status === 'failed'
-                              ? 'idle'
-                              : currentPanel.status,
-                          errorMessage:
-                            currentPanel.status === 'failed'
-                              ? undefined
-                              : currentPanel.errorMessage,
-                        }
-                      : currentPanel,
-                  )
-                }
-              />
-              <div className="image-canvas-editor__quick-edit-controls">
-                <PlatformSelectField
-                  aria-label="快速编辑尺寸"
-                  value={quickEditPanel.size}
-                  size="xs"
-                  density="compact"
-                  onChange={(event) =>
-                    setQuickEditPanel((currentPanel) =>
-                      currentPanel
-                        ? { ...currentPanel, size: event.target.value }
-                        : currentPanel,
-                    )
-                  }
-                >
-                  {quickEditSizeOptions.map((size) => (
-                    <option key={size} value={size}>
-                      {size}
-                    </option>
-                  ))}
-                </PlatformSelectField>
-                <PlatformSelectField
-                  aria-label="快速编辑模型"
-                  value={quickEditPanel.model}
-                  size="xs"
-                  density="compact"
-                  onChange={(event) =>
-                    setQuickEditPanel((currentPanel) =>
-                      currentPanel
-                        ? { ...currentPanel, model: event.target.value }
-                        : currentPanel,
-                    )
-                  }
-                >
-                  {quickEditModelOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </PlatformSelectField>
-              </div>
-              {quickEditPanel.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  role="alert"
-                >
-                  {quickEditPanel.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <PlatformActionButton
-                type="submit"
-                tone="secondary"
-                size="sm"
-                className="image-canvas-editor__quick-edit-submit"
-              >
-                生成
-              </PlatformActionButton>
-            </form>
-          ) : null}
-
-
-
-          {characterAnimationPanel &&
-          characterAnimationSourceLayer &&
-          characterAnimationPanelStyle ? (
-            <form
-              className="image-canvas-editor__character-animation-panel"
-              style={characterAnimationPanelStyle}
-              role="dialog"
-              aria-label="角色动画生成面板"
-              onPointerDown={(event) => event.stopPropagation()}
-              onSubmit={(event) => {
-                event.preventDefault();
-                if (characterAnimationPanel.status !== 'generating') {
-                  void submitCharacterAnimation();
-                }
-              }}
-            >
-              <div className="image-canvas-editor__character-animation-head">
-                <strong>角色动画</strong>
-                <EditorIconButton
-                  label="关闭角色动画生成面板"
-                  title="关闭"
-                  icon={X}
-                  onClick={() => setCharacterAnimationPanel(null)}
-                />
-              </div>
-              <PlatformTextField
-                variant="textarea"
-                aria-label="动画描述"
-                value={characterAnimationPanel.promptText}
-                maxLength={4000}
-                disabled={characterAnimationPanel.status === 'generating'}
-                size="sm"
-                density="compact"
-                className="image-canvas-editor__character-animation-textarea"
-                onChange={(event) =>
-                  setCharacterAnimationPanel((currentPanel) =>
-                    currentPanel
-                      ? {
-                          ...currentPanel,
-                          promptText: event.target.value.slice(0, 4000),
-                          status:
-                            currentPanel.status === 'failed'
-                              ? 'idle'
-                              : currentPanel.status,
-                          errorMessage:
-                            currentPanel.status === 'failed'
-                              ? undefined
-                              : currentPanel.errorMessage,
-                        }
-                      : currentPanel,
-                  )
-                }
-              />
-              <div className="image-canvas-editor__character-animation-presets">
-                {CHARACTER_ANIMATION_ACTION_PROMPTS.map((preset) => (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    className="image-canvas-editor__character-animation-preset"
-                    disabled={characterAnimationPanel.status === 'generating'}
-                    onClick={() =>
-                      setCharacterAnimationPanel((currentPanel) =>
-                        currentPanel
-                          ? {
-                              ...currentPanel,
-                              promptText: preset.text,
-                              status: 'idle',
-                              errorMessage: undefined,
-                            }
-                          : currentPanel,
-                      )
+          <ImageCanvasGenerationComposerView
+            specToolWrapRef={specToolWrapRef}
+            characterSpecButtonRef={characterSpecButtonRef}
+            iconSpecButtonRef={iconSpecButtonRef}
+            isSpecMenuOpen={isSpecMenuOpen}
+            isCharacterSpecMenuOpen={isCharacterSpecMenuOpen}
+            isIconSpecMenuOpen={isIconSpecMenuOpen}
+            isPickingCharacterSpecFromCanvas={isPickingCharacterSpecFromCanvas}
+            isPickingIconSpecFromCanvas={isPickingIconSpecFromCanvas}
+            generateDialog={generateDialog}
+            generationComposerStyle={generationComposerStyle}
+            iconComposerStyle={iconComposerStyle}
+            quickEditPanel={quickEditPanel}
+            quickEditSourceLayer={quickEditSourceLayer}
+            quickEditPanelStyle={quickEditPanelStyle}
+            quickEditSizeOptions={quickEditSizeOptions}
+            quickEditModelOptions={quickEditModelOptions}
+            characterAnimationPanel={characterAnimationPanel}
+            characterAnimationSourceLayer={characterAnimationSourceLayer}
+            characterAnimationPanelStyle={characterAnimationPanelStyle}
+            characterAnimationPrice={characterAnimationPrice}
+            setGenerateDialog={setGenerateDialog}
+            setQuickEditPanel={setQuickEditPanel}
+            setCharacterAnimationPanel={setCharacterAnimationPanel}
+            setIsCharacterSpecMenuOpen={setIsCharacterSpecMenuOpen}
+            setIsIconSpecMenuOpen={setIsIconSpecMenuOpen}
+            setIsPickingCharacterSpecFromCanvas={setIsPickingCharacterSpecFromCanvas}
+            setIsPickingIconSpecFromCanvas={setIsPickingIconSpecFromCanvas}
+            onOpenSpecDialog={openSpecDialog}
+            onRequestUpload={(target) => {
+              setUploadTarget(target);
+              uploadInputRef.current?.click();
+            }}
+            onSubmitImageGeneration={(dialog) => void submitImageGeneration(dialog)}
+            onSubmitIconSpritesheetGeneration={(dialog) =>
+              void submitIconSpritesheetGeneration(dialog)
+            }
+            onSubmitQuickEdit={() => void submitQuickEdit()}
+            onSubmitCharacterAnimation={() => void submitCharacterAnimation()}
+            onCloseGenerateComposer={() => {
+              setGenerateDialog((currentDialog) =>
+                currentDialog?.mode === 'generate'
+                  ? {
+                      ...currentDialog,
+                      composerOpen: false,
                     }
-                  >
-                    {preset.label}
-                  </button>
-                ))}
-              </div>
-              <div className="image-canvas-editor__character-animation-grid">
-                <PlatformSelectField
-                  aria-label="分辨率"
-                  value={characterAnimationPanel.resolution}
-                  disabled={characterAnimationPanel.status === 'generating'}
-                  size="xs"
-                  density="compact"
-                  onChange={(event) =>
-                    setCharacterAnimationPanel((currentPanel) =>
-                      currentPanel
-                        ? {
-                            ...currentPanel,
-                            resolution:
-                              event.target.value === '720p' ? '720p' : '480p',
-                            status:
-                              currentPanel.status === 'failed'
-                                ? 'idle'
-                                : currentPanel.status,
-                            errorMessage:
-                              currentPanel.status === 'failed'
-                                ? undefined
-                                : currentPanel.errorMessage,
-                          }
-                        : currentPanel,
-                    )
-                  }
-                >
-                  <option value="480p">480p</option>
-                  <option value="720p">720p</option>
-                </PlatformSelectField>
-                <PlatformSelectField
-                  aria-label="画面比例"
-                  value={characterAnimationPanel.ratio}
-                  disabled={characterAnimationPanel.status === 'generating'}
-                  size="xs"
-                  density="compact"
-                  onChange={(event) =>
-                    setCharacterAnimationPanel((currentPanel) =>
-                      currentPanel
-                        ? {
-                            ...currentPanel,
-                            ratio:
-                              CHARACTER_ANIMATION_RATIO_OPTIONS.find(
-                                (item) => item.value === event.target.value,
-                              )?.value ?? 'same',
-                            status:
-                              currentPanel.status === 'failed'
-                                ? 'idle'
-                                : currentPanel.status,
-                            errorMessage:
-                              currentPanel.status === 'failed'
-                                ? undefined
-                                : currentPanel.errorMessage,
-                          }
-                        : currentPanel,
-                    )
-                  }
-                >
-                  {CHARACTER_ANIMATION_RATIO_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </PlatformSelectField>
-                <PlatformSelectField
-                  aria-label="时长"
-                  value={String(characterAnimationPanel.frameCount)}
-                  disabled={characterAnimationPanel.status === 'generating'}
-                  size="xs"
-                  density="compact"
-                  onChange={(event) =>
-                    updateCharacterAnimationDuration(event.target.value)
-                  }
-                >
-                  {CHARACTER_ANIMATION_DURATION_OPTIONS.map((option) => (
-                    <option
-                      key={option.frameCount}
-                      value={String(option.frameCount)}
-                    >
-                      {option.label}
-                    </option>
-                  ))}
-                </PlatformSelectField>
-              </div>
-              <div className="image-canvas-editor__character-animation-summary">
-                <span
-                  className="image-canvas-editor__character-animation-summary-text"
-                  title={characterAnimationPanel.promptText.trim() || undefined}
-                  aria-label={`生成文本：${
-                    characterAnimationPanel.promptText.trim() || '动画描述'
-                  }`}
-                >
-                  {characterAnimationPanel.promptText.trim()
-                    ? characterAnimationPanel.promptText.trim()
-                    : '动画描述'}
-                </span>
-                <strong>{characterAnimationPrice}泥点</strong>
-              </div>
-              {characterAnimationPanel.status === 'completed' &&
-              characterAnimationPanel.result ? (
-                <PlatformStatusMessage
-                  tone="success"
-                  surface="platform"
-                  size="xs"
-                  role="status"
-                >
-                  已生成 {characterAnimationPanel.result.frameCount} 帧
-                </PlatformStatusMessage>
-              ) : null}
-              {characterAnimationPanel.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  role="alert"
-                >
-                  {characterAnimationPanel.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <PlatformActionButton
-                type="submit"
-                tone="secondary"
-                size="sm"
-                className="image-canvas-editor__character-animation-submit"
-                disabled={characterAnimationPanel.status === 'generating'}
-              >
-                {characterAnimationPanel.status === 'generating'
-                  ? '生成中'
-                  : '生成'}
-              </PlatformActionButton>
-            </form>
-          ) : null}
+                  : currentDialog,
+              );
+              setActiveTool('select');
+            }}
+            onUpdateSpecFormValue={updateSpecFormValue}
+            onUpdateIconDescription={updateIconDescription}
+            onAddIconDescription={addIconDescription}
+            onUpdateCharacterAnimationDuration={updateCharacterAnimationDuration}
+          />
+
         </ImageCanvasStageView>
       </div>
 
@@ -5642,97 +4514,6 @@ export function ImageCanvasEditorView() {
           </dl>
         ) : null}
       </UnifiedModal>
-
-      <UnifiedModal
-        open={
-          generateDialog?.mode === 'edit' &&
-          generateDialog.status !== 'generating'
-        }
-        title={generateDialog?.mode === 'edit' ? '修改图片' : '生成图片'}
-        size="sm"
-        closeLabel={
-          generateDialog?.mode === 'edit' ? '关闭修改图片' : '关闭生成图片'
-        }
-        closeDisabled={generateDialog?.status === 'generating'}
-        onClose={() => setGenerateDialog(null)}
-        panelClassName="image-canvas-editor__generate-dialog"
-        bodyClassName="image-canvas-editor__generate-dialog-body"
-      >
-        {generateDialog?.mode === 'edit' ? (
-          <form
-            className="image-canvas-editor__generate-form"
-            onSubmit={(event) => {
-              event.preventDefault();
-              if (generateDialog.status !== 'generating') {
-                void submitImageGeneration(generateDialog);
-              }
-            }}
-          >
-            <div className="image-canvas-editor__generate-body">
-              <PlatformTextField
-                variant="textarea"
-                aria-label="生成提示词"
-                value={generateDialog.prompt}
-                disabled={generateDialog.status === 'generating'}
-                size="sm"
-                density="roomy"
-                className="image-canvas-editor__generate-prompt"
-                placeholder={
-                  generateDialog.mode === 'edit'
-                    ? '描述你想如何修改这张图片'
-                    : '描述你想生成的图片'
-                }
-                onChange={(event) =>
-                  setGenerateDialog((currentDialog) =>
-                    currentDialog
-                      ? {
-                          ...currentDialog,
-                          prompt: event.target.value,
-                        }
-                      : currentDialog,
-                  )
-                }
-              />
-              {generateDialog.status === 'generating' ? (
-                <PlatformStatusMessage
-                  tone="info"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="status"
-                >
-                  {generateDialog.mode === 'edit' ? '修改中' : '生成中'}
-                </PlatformStatusMessage>
-              ) : null}
-              {generateDialog.status === 'failed' ? (
-                <PlatformStatusMessage
-                  tone="error"
-                  surface="platform"
-                  size="xs"
-                  className="image-canvas-editor__generate-status"
-                  role="alert"
-                >
-                  {generateDialog.errorMessage}
-                </PlatformStatusMessage>
-              ) : null}
-              <PlatformActionButton
-                type="submit"
-                size="sm"
-                className="image-canvas-editor__generate-submit"
-                disabled={generateDialog.status === 'generating'}
-              >
-                {generateDialog.status === 'generating'
-                  ? generateDialog.mode === 'edit'
-                    ? '修改中'
-                    : '生成中'
-                  : generateDialog.mode === 'edit'
-                    ? '修改'
-                    : '生成'}
-              </PlatformActionButton>
-            </div>
-          </form>
-        ) : null}
-      </UnifiedModal>
     </section>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
new file mode 100644
index 00000000..444c363f
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -0,0 +1,1318 @@
+import {
+  ChevronDown,
+  ClipboardList,
+  ImageIcon,
+  ImagePlus,
+  X,
+} from 'lucide-react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
+import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import {
+  PlatformSelectField,
+  PlatformTextField,
+} from '../common/PlatformTextField';
+import { UnifiedModal } from '../common/UnifiedModal';
+import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import {
+  CHARACTER_ANIMATION_ACTION_PROMPTS,
+  CHARACTER_ANIMATION_DURATION_OPTIONS,
+  CHARACTER_ANIMATION_RATIO_OPTIONS,
+  CHARACTER_SPEC_VIEW_OPTIONS,
+  DEFAULT_ICON_DESCRIPTIONS,
+  ICON_DESCRIPTION_LIMIT,
+  SPEC_GENERATION_COST,
+  SPEC_TYPE_LABEL,
+} from './ImageCanvasGenerationModel';
+import type {
+  CharacterAnimationPanelState,
+  CanvasLayer,
+  GenerateDialogState,
+  QuickEditPanelState,
+  SpecFormValues,
+  SpecGenerationType,
+  UploadTarget,
+} from './ImageCanvasEditorTypes';
+
+type ImageCanvasGenerationComposerViewProps = {
+  specToolWrapRef: RefObject<HTMLSpanElement | null>;
+  characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
+  iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
+  isSpecMenuOpen: boolean;
+  isCharacterSpecMenuOpen: boolean;
+  isIconSpecMenuOpen: boolean;
+  isPickingCharacterSpecFromCanvas: boolean;
+  isPickingIconSpecFromCanvas: boolean;
+  generateDialog: GenerateDialogState | null;
+  generationComposerStyle: CSSProperties | null;
+  iconComposerStyle: CSSProperties | null;
+  quickEditPanel: QuickEditPanelState | null;
+  quickEditSourceLayer: CanvasLayer | null;
+  quickEditPanelStyle: CSSProperties | null;
+  quickEditSizeOptions: string[];
+  quickEditModelOptions: Array<{ label: string; value: string }>;
+  characterAnimationPanel: CharacterAnimationPanelState | null;
+  characterAnimationSourceLayer: CanvasLayer | null;
+  characterAnimationPanelStyle: CSSProperties | null;
+  characterAnimationPrice: number;
+  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
+  setQuickEditPanel: Dispatch<SetStateAction<QuickEditPanelState | null>>;
+  setCharacterAnimationPanel: Dispatch<
+    SetStateAction<CharacterAnimationPanelState | null>
+  >;
+  setIsCharacterSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsIconSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsPickingCharacterSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
+  setIsPickingIconSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
+  onOpenSpecDialog: (specType: SpecGenerationType) => void;
+  onRequestUpload: (target: UploadTarget) => void;
+  onSubmitImageGeneration: (dialog: GenerateDialogState) => void;
+  onSubmitIconSpritesheetGeneration: (dialog: GenerateDialogState) => void;
+  onSubmitQuickEdit: () => void;
+  onSubmitCharacterAnimation: () => void;
+  onCloseGenerateComposer: () => void;
+  onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
+  onUpdateIconDescription: (index: number, value: string) => void;
+  onAddIconDescription: () => void;
+  onUpdateCharacterAnimationDuration: (frameCountValue: string) => void;
+};
+
+function triggerPlaceholderAction(label: string) {
+  window.alert(`${label}功能建设中`);
+}
+
+function buildPortalMenuStyle(
+  anchor: HTMLElement | null,
+  placement: 'above' | 'below',
+): CSSProperties {
+  const rect = anchor?.getBoundingClientRect();
+  if (!rect) {
+    return {
+      position: 'fixed',
+      left: 0,
+      top: 0,
+      right: 'auto',
+      bottom: 'auto',
+      zIndex: 70,
+    };
+  }
+
+  return {
+    position: 'fixed',
+    left: Math.round(rect.left),
+    top:
+      placement === 'above'
+        ? Math.round(rect.top)
+        : Math.round(rect.bottom + 8),
+    right: 'auto',
+    bottom: 'auto',
+    zIndex: 70,
+    transform:
+      placement === 'above' ? 'translateY(calc(-100% - 0.45rem))' : undefined,
+  };
+}
+
+function renderEditorPortal(node: ReactNode) {
+  if (typeof document === 'undefined') {
+    return node;
+  }
+  return createPortal(node, document.body);
+}
+
+function resetFailedDialogStatus(dialog: GenerateDialogState) {
+  return {
+    ...dialog,
+    status: dialog.status === 'failed' ? 'idle' : dialog.status,
+    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
+  };
+}
+
+function resetFailedPanelStatus<T extends { status: string; errorMessage?: string }>(
+  panel: T,
+) {
+  return {
+    ...panel,
+    status: panel.status === 'failed' ? 'idle' : panel.status,
+    errorMessage: panel.status === 'failed' ? undefined : panel.errorMessage,
+  };
+}
+
+export function ImageCanvasGenerationComposerView({
+  specToolWrapRef,
+  characterSpecButtonRef,
+  iconSpecButtonRef,
+  isSpecMenuOpen,
+  isCharacterSpecMenuOpen,
+  isIconSpecMenuOpen,
+  isPickingCharacterSpecFromCanvas,
+  isPickingIconSpecFromCanvas,
+  generateDialog,
+  generationComposerStyle,
+  iconComposerStyle,
+  quickEditPanel,
+  quickEditSourceLayer,
+  quickEditPanelStyle,
+  quickEditSizeOptions,
+  quickEditModelOptions,
+  characterAnimationPanel,
+  characterAnimationSourceLayer,
+  characterAnimationPanelStyle,
+  characterAnimationPrice,
+  setGenerateDialog,
+  setQuickEditPanel,
+  setCharacterAnimationPanel,
+  setIsCharacterSpecMenuOpen,
+  setIsIconSpecMenuOpen,
+  setIsPickingCharacterSpecFromCanvas,
+  setIsPickingIconSpecFromCanvas,
+  onOpenSpecDialog,
+  onRequestUpload,
+  onSubmitImageGeneration,
+  onSubmitIconSpritesheetGeneration,
+  onSubmitQuickEdit,
+  onSubmitCharacterAnimation,
+  onCloseGenerateComposer,
+  onUpdateSpecFormValue,
+  onUpdateIconDescription,
+  onAddIconDescription,
+  onUpdateCharacterAnimationDuration,
+}: ImageCanvasGenerationComposerViewProps) {
+  return (
+    <>
+      {isSpecMenuOpen
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="生成规范类型"
+              placement="top-start"
+              style={buildPortalMenuStyle(specToolWrapRef.current, 'above')}
+            >
+              {(['character', 'ui', 'custom'] as const).map((specType) => (
+                <PlatformFloatingMenuItem
+                  key={specType}
+                  className="image-canvas-editor__spec-menu-item"
+                  onClick={() => onOpenSpecDialog(specType)}
+                >
+                  {SPEC_TYPE_LABEL[specType]}
+                </PlatformFloatingMenuItem>
+              ))}
+            </PlatformFloatingMenu>,
+          )
+        : null}
+
+      {generateDialog?.mode === 'generate' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <form
+          className="image-canvas-editor__generation-composer"
+          style={generationComposerStyle}
+          role="dialog"
+          aria-label="生成图片"
+          onPointerDown={(event) => event.stopPropagation()}
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (generateDialog.status !== 'generating') {
+              onSubmitImageGeneration(generateDialog);
+            }
+          }}
+        >
+          <PlatformIconButton
+            variant="surfaceFloating"
+            className="image-canvas-editor__generation-ref"
+            label="添加参考图"
+            disabled={generateDialog.status === 'generating'}
+            onClick={() => onRequestUpload('asset')}
+            icon={<ImageIcon className="h-4 w-4" />}
+          >
+            <span>参考图</span>
+          </PlatformIconButton>
+          <PlatformTextField
+            variant="textarea"
+            aria-label="生成提示词"
+            value={generateDialog.prompt}
+            disabled={generateDialog.status === 'generating'}
+            placeholder="今天我们要创作什么"
+            size="sm"
+            density="compact"
+            className="image-canvas-editor__generation-prompt"
+            onChange={(event) =>
+              setGenerateDialog((currentDialog) =>
+                currentDialog
+                  ? {
+                      ...resetFailedDialogStatus(currentDialog),
+                      prompt: event.target.value,
+                    }
+                  : currentDialog,
+              )
+            }
+          />
+          <div className="image-canvas-editor__generation-composer-footer">
+            <PlatformInlineOptionButton
+              className="image-canvas-editor__generation-ratio"
+              aria-label="生成比例 1:1 2k 1张"
+              disabled={generateDialog.status === 'generating'}
+              onClick={() => triggerPlaceholderAction('生成参数')}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+            >
+              中 · 1:1(2k) · 1张
+            </PlatformInlineOptionButton>
+            <PlatformInlineOptionButton
+              className="image-canvas-editor__generation-model"
+              aria-label="生成模型 GPT Image"
+              disabled={generateDialog.status === 'generating'}
+              onClick={() => triggerPlaceholderAction('模型选择')}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+            >
+              GPT Im...
+            </PlatformInlineOptionButton>
+            <PlatformActionButton
+              type="submit"
+              tone="secondary"
+              size="xs"
+              shape="pill"
+              className="image-canvas-editor__generation-submit"
+              disabled={generateDialog.status === 'generating'}
+              aria-label="生成"
+            >
+              {generateDialog.status === 'generating' ? '生成中' : '12'}
+            </PlatformActionButton>
+          </div>
+          {generateDialog.status === 'generating' ? (
+            <PlatformStatusMessage
+              tone="info"
+              surface="platform"
+              size="xs"
+              className="image-canvas-editor__generate-status"
+              role="status"
+            >
+              生成中
+            </PlatformStatusMessage>
+          ) : null}
+          {generateDialog.status === 'failed' ? (
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="xs"
+              className="image-canvas-editor__generate-status"
+              role="alert"
+            >
+              {generateDialog.errorMessage}
+            </PlatformStatusMessage>
+          ) : null}
+          <EditorIconButton
+            className="image-canvas-editor__generation-close"
+            label="关闭生成图片"
+            icon={X}
+            variant="surfaceFloating"
+            disabled={generateDialog.status === 'generating'}
+            onClick={onCloseGenerateComposer}
+          />
+        </form>
+      ) : null}
+
+      {generateDialog?.mode === 'spec' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <form
+          className="image-canvas-editor__generation-composer image-canvas-editor__spec-composer"
+          style={generationComposerStyle}
+          role="dialog"
+          aria-label="生成规范"
+          onPointerDown={(event) => event.stopPropagation()}
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (generateDialog.status !== 'generating') {
+              onSubmitImageGeneration(generateDialog);
+            }
+          }}
+        >
+          <div className="image-canvas-editor__spec-fields">
+            {generateDialog.specType === 'custom' ? (
+              <label className="image-canvas-editor__field-block">
+                <PlatformFieldLabel
+                  variant="form"
+                  className="image-canvas-editor__field-title"
+                >
+                  自定义规范提示词
+                </PlatformFieldLabel>
+                <PlatformTextField
+                  variant="textarea"
+                  aria-label="自定义规范提示词"
+                  value={generateDialog.specValues?.customPrompt ?? ''}
+                  disabled={generateDialog.status === 'generating'}
+                  size="sm"
+                  density="compact"
+                  className="image-canvas-editor__spec-textarea"
+                  onChange={(event) =>
+                    onUpdateSpecFormValue('customPrompt', event.target.value)
+                  }
+                />
+              </label>
+            ) : (
+              <>
+                <label className="image-canvas-editor__field-block">
+                  <PlatformFieldLabel
+                    variant="form"
+                    className="image-canvas-editor__field-title"
+                  >
+                    玩法设定
+                  </PlatformFieldLabel>
+                  <PlatformTextField
+                    aria-label="玩法设定"
+                    value={generateDialog.specValues?.playSetting ?? ''}
+                    disabled={generateDialog.status === 'generating'}
+                    size="sm"
+                    density="compact"
+                    className="image-canvas-editor__spec-input"
+                    onChange={(event) =>
+                      onUpdateSpecFormValue('playSetting', event.target.value)
+                    }
+                  />
+                </label>
+                <label className="image-canvas-editor__field-block">
+                  <PlatformFieldLabel
+                    variant="form"
+                    className="image-canvas-editor__field-title"
+                  >
+                    美术风格
+                  </PlatformFieldLabel>
+                  <PlatformTextField
+                    aria-label="美术风格"
+                    value={generateDialog.specValues?.artStyle ?? ''}
+                    disabled={generateDialog.status === 'generating'}
+                    size="sm"
+                    density="compact"
+                    className="image-canvas-editor__spec-input"
+                    onChange={(event) =>
+                      onUpdateSpecFormValue('artStyle', event.target.value)
+                    }
+                  />
+                </label>
+                {generateDialog.specType === 'character' ? (
+                  <>
+                    <label className="image-canvas-editor__field-block">
+                      <PlatformFieldLabel
+                        variant="form"
+                        className="image-canvas-editor__field-title"
+                      >
+                        头身比
+                      </PlatformFieldLabel>
+                      <PlatformSelectField
+                        aria-label="头身比"
+                        value={generateDialog.specValues?.bodyRatio ?? '3'}
+                        disabled={generateDialog.status === 'generating'}
+                        size="sm"
+                        density="compact"
+                        className="image-canvas-editor__spec-input"
+                        onChange={(event) =>
+                          onUpdateSpecFormValue('bodyRatio', event.target.value)
+                        }
+                      >
+                        {['2', '3', '4', '5', '6'].map((value) => (
+                          <option key={value} value={value}>
+                            {value}
+                          </option>
+                        ))}
+                      </PlatformSelectField>
+                    </label>
+                    <label className="image-canvas-editor__field-block">
+                      <PlatformFieldLabel
+                        variant="form"
+                        className="image-canvas-editor__field-title"
+                      >
+                        角色视角
+                      </PlatformFieldLabel>
+                      <PlatformSelectField
+                        aria-label="角色视角"
+                        value={generateDialog.specValues?.characterView ?? ''}
+                        disabled={generateDialog.status === 'generating'}
+                        size="sm"
+                        density="compact"
+                        className="image-canvas-editor__spec-input"
+                        onChange={(event) =>
+                          onUpdateSpecFormValue(
+                            'characterView',
+                            event.target.value,
+                          )
+                        }
+                      >
+                        {CHARACTER_SPEC_VIEW_OPTIONS.map((value) => (
+                          <option key={value} value={value}>
+                            {value}
+                          </option>
+                        ))}
+                      </PlatformSelectField>
+                    </label>
+                  </>
+                ) : null}
+              </>
+            )}
+          </div>
+          {generateDialog.status === 'failed' ? (
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="xs"
+              className="image-canvas-editor__generate-status"
+              role="alert"
+            >
+              {generateDialog.errorMessage}
+            </PlatformStatusMessage>
+          ) : null}
+          <div className="image-canvas-editor__spec-footer">
+            <PlatformActionButton
+              type="submit"
+              tone="secondary"
+              size="sm"
+              className="image-canvas-editor__spec-submit"
+              disabled={generateDialog.status === 'generating'}
+              aria-label="提交生成规范"
+            >
+              {generateDialog.status === 'generating'
+                ? '生成中'
+                : `消耗${SPEC_GENERATION_COST}泥点 · 生成`}
+            </PlatformActionButton>
+          </div>
+        </form>
+      ) : null}
+
+      {generateDialog?.mode === 'character' && generationComposerStyle ? (
+        <form
+          className="image-canvas-editor__character-composer"
+          style={generationComposerStyle}
+          role="dialog"
+          aria-label="生成角色形象"
+          onPointerDown={(event) => event.stopPropagation()}
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (generateDialog.status !== 'generating') {
+              onSubmitImageGeneration(generateDialog);
+            }
+          }}
+        >
+          <div className="image-canvas-editor__character-reference-row">
+            <div className="image-canvas-editor__field-block image-canvas-editor__character-reference-field image-canvas-editor__character-reference-field--spec">
+              <PlatformFieldLabel
+                variant="field"
+                className="image-canvas-editor__field-title"
+              >
+                角色形象规范
+              </PlatformFieldLabel>
+              <span className="image-canvas-editor__character-spec-wrap">
+                <button
+                  ref={characterSpecButtonRef}
+                  type="button"
+                  className="image-canvas-editor__character-spec-ref image-canvas-editor__reference-tile image-canvas-editor__reference-tile--spec"
+                  disabled={generateDialog.status === 'generating'}
+                  onClick={() => setIsCharacterSpecMenuOpen((open) => !open)}
+                >
+                  <span className="image-canvas-editor__reference-tile-visual">
+                    {generateDialog.characterSpecReference ? (
+                      <img
+                        src={generateDialog.characterSpecReference.src}
+                        alt=""
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <ClipboardList className="h-4 w-4" aria-hidden="true" />
+                    )}
+                  </span>
+                  <span className="image-canvas-editor__reference-tile-copy">
+                    {generateDialog.characterSpecReference?.label ??
+                      '角色形象规范'}
+                  </span>
+                </button>
+              </span>
+            </div>
+            {isCharacterSpecMenuOpen
+              ? renderEditorPortal(
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
+                    label="角色形象规范来源"
+                    placement="bottom-start"
+                    style={buildPortalMenuStyle(
+                      characterSpecButtonRef.current,
+                      'below',
+                    )}
+                  >
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() => {
+                        setIsPickingCharacterSpecFromCanvas(true);
+                        setIsCharacterSpecMenuOpen(false);
+                      }}
+                    >
+                      从画布中选择
+                    </PlatformFloatingMenuItem>
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() => {
+                        setIsCharacterSpecMenuOpen(false);
+                        onOpenSpecDialog('character');
+                      }}
+                    >
+                      新建角色形象规范
+                    </PlatformFloatingMenuItem>
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() => {
+                        setIsCharacterSpecMenuOpen(false);
+                        onRequestUpload('character-spec');
+                      }}
+                    >
+                      上传图片
+                    </PlatformFloatingMenuItem>
+                  </PlatformFloatingMenu>,
+                )
+              : null}
+            <div className="image-canvas-editor__field-block image-canvas-editor__character-reference-field image-canvas-editor__character-reference-field--regular">
+              <PlatformFieldLabel
+                variant="field"
+                className="image-canvas-editor__field-title"
+              >
+                常规参考图
+              </PlatformFieldLabel>
+              <div className="image-canvas-editor__character-reference-list">
+                {(generateDialog.characterReferences ?? []).map(
+                  (reference, index) => (
+                    <span
+                      key={reference.id}
+                      className="image-canvas-editor__character-ref-thumb"
+                      title={reference.label}
+                    >
+                      <img src={reference.src} alt={reference.label} />
+                      <span className="image-canvas-editor__character-ref-index">
+                        {index + 1}
+                      </span>
+                    </span>
+                  ),
+                )}
+                <button
+                  type="button"
+                  className="image-canvas-editor__character-reference-add image-canvas-editor__reference-tile image-canvas-editor__reference-tile--upload"
+                  disabled={generateDialog.status === 'generating'}
+                  onClick={() => onRequestUpload('character-reference')}
+                >
+                  <span className="image-canvas-editor__reference-tile-visual">
+                    <ImagePlus className="h-4 w-4" aria-hidden="true" />
+                  </span>
+                  <span className="image-canvas-editor__reference-tile-copy">
+                    上传常规参考图
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <label className="image-canvas-editor__field-block">
+            <PlatformFieldLabel
+              variant="field"
+              className="image-canvas-editor__field-title"
+            >
+              角色设定
+            </PlatformFieldLabel>
+            <PlatformTextField
+              variant="textarea"
+              aria-label="角色设定"
+              value={generateDialog.prompt}
+              disabled={generateDialog.status === 'generating'}
+              size="sm"
+              density="compact"
+              className="image-canvas-editor__generation-prompt"
+              onChange={(event) =>
+                setGenerateDialog((currentDialog) =>
+                  currentDialog?.mode === 'character'
+                    ? {
+                        ...resetFailedDialogStatus(currentDialog),
+                        prompt: event.target.value,
+                      }
+                    : currentDialog,
+                )
+              }
+            />
+          </label>
+          {generateDialog.status === 'failed' ? (
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="xs"
+              className="image-canvas-editor__generate-status"
+              role="alert"
+            >
+              {generateDialog.errorMessage}
+            </PlatformStatusMessage>
+          ) : null}
+          <div className="image-canvas-editor__generation-composer-footer">
+            <div className="image-canvas-editor__option-field">
+              <PlatformFieldLabel
+                variant="field"
+                className="image-canvas-editor__field-title"
+              >
+                画面比例
+              </PlatformFieldLabel>
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__generation-ratio"
+                disabled={generateDialog.status === 'generating'}
+                onClick={() => triggerPlaceholderAction('角色比例')}
+              >
+                1:1
+              </PlatformInlineOptionButton>
+            </div>
+            <div className="image-canvas-editor__option-field">
+              <PlatformFieldLabel
+                variant="field"
+                className="image-canvas-editor__field-title"
+              >
+                模型
+              </PlatformFieldLabel>
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__generation-model"
+                disabled={generateDialog.status === 'generating'}
+                onClick={() => triggerPlaceholderAction('角色模型')}
+              >
+                GPT Image
+              </PlatformInlineOptionButton>
+            </div>
+            <PlatformActionButton
+              type="submit"
+              tone="secondary"
+              size="xs"
+              shape="pill"
+              className="image-canvas-editor__generation-submit"
+              disabled={generateDialog.status === 'generating'}
+            >
+              {generateDialog.status === 'generating' ? '生成中' : '生成'}
+            </PlatformActionButton>
+          </div>
+        </form>
+      ) : null}
+
+      {generateDialog?.mode === 'icon' &&
+      generateDialog.composerOpen !== false &&
+      iconComposerStyle ? (
+        <form
+          className="image-canvas-editor__icon-composer"
+          style={iconComposerStyle}
+          role="dialog"
+          aria-label="生成图标素材"
+          onPointerDown={(event) => event.stopPropagation()}
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (generateDialog.status !== 'generating') {
+              onSubmitIconSpritesheetGeneration(generateDialog);
+            }
+          }}
+        >
+          <div className="image-canvas-editor__field-block">
+            <PlatformFieldLabel
+              variant="field"
+              className="image-canvas-editor__field-title"
+            >
+              图标素材规范
+            </PlatformFieldLabel>
+            <div className="image-canvas-editor__icon-spec-row">
+              <span className="image-canvas-editor__character-spec-wrap">
+                <button
+                  ref={iconSpecButtonRef}
+                  type="button"
+                  className="image-canvas-editor__icon-spec-card"
+                  disabled={generateDialog.status === 'generating'}
+                  aria-label={
+                    generateDialog.iconSpecReference?.label ?? '图标素材规范'
+                  }
+                  onClick={() => setIsIconSpecMenuOpen((open) => !open)}
+                >
+                  <span
+                    className="image-canvas-editor__icon-spec-preview"
+                    aria-hidden="true"
+                  >
+                    {generateDialog.iconSpecReference?.src ? (
+                      <img src={generateDialog.iconSpecReference.src} alt="" />
+                    ) : (
+                      <ImageIcon className="h-5 w-5" />
+                    )}
+                  </span>
+                  <span className="image-canvas-editor__icon-spec-copy">
+                    <span className="image-canvas-editor__icon-spec-eyebrow">
+                      图标素材规范
+                    </span>
+                    <span className="image-canvas-editor__icon-spec-title">
+                      {generateDialog.iconSpecReference?.label ?? '待选择'}
+                    </span>
+                  </span>
+                  <span className="image-canvas-editor__icon-spec-state">
+                    {generateDialog.iconSpecReference ? '已绑定' : '待绑定'}
+                  </span>
+                </button>
+              </span>
+              {isIconSpecMenuOpen
+                ? renderEditorPortal(
+                    <PlatformFloatingMenu
+                      className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
+                      label="图标素材规范来源"
+                      placement="bottom-start"
+                      style={buildPortalMenuStyle(
+                        iconSpecButtonRef.current,
+                        'below',
+                      )}
+                    >
+                      <PlatformFloatingMenuItem
+                        className="image-canvas-editor__context-menu-item"
+                        onClick={() => {
+                          setIsPickingIconSpecFromCanvas(true);
+                          setIsIconSpecMenuOpen(false);
+                        }}
+                      >
+                        从画布中选择
+                      </PlatformFloatingMenuItem>
+                      <PlatformFloatingMenuItem
+                        className="image-canvas-editor__context-menu-item"
+                        onClick={() => {
+                          setIsIconSpecMenuOpen(false);
+                          onOpenSpecDialog('icon');
+                        }}
+                      >
+                        新建图标素材规范
+                      </PlatformFloatingMenuItem>
+                      <PlatformFloatingMenuItem
+                        className="image-canvas-editor__context-menu-item"
+                        onClick={() => {
+                          setIsIconSpecMenuOpen(false);
+                          onRequestUpload('icon-spec');
+                        }}
+                      >
+                        上传图片
+                      </PlatformFloatingMenuItem>
+                    </PlatformFloatingMenu>,
+                  )
+                : null}
+              <div
+                className="image-canvas-editor__icon-spec-actions"
+                aria-label="图标素材规范操作"
+              >
+                <button
+                  type="button"
+                  disabled={generateDialog.status === 'generating'}
+                  onClick={() => {
+                    setIsPickingIconSpecFromCanvas(true);
+                    setIsIconSpecMenuOpen(false);
+                  }}
+                >
+                  画布
+                </button>
+                <button
+                  type="button"
+                  disabled={generateDialog.status === 'generating'}
+                  onClick={() => {
+                    setIsIconSpecMenuOpen(false);
+                    onOpenSpecDialog('icon');
+                  }}
+                >
+                  新建
+                </button>
+                <button
+                  type="button"
+                  disabled={generateDialog.status === 'generating'}
+                  onClick={() => {
+                    setIsIconSpecMenuOpen(false);
+                    onRequestUpload('icon-spec');
+                  }}
+                >
+                  上传
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="image-canvas-editor__field-block">
+            <PlatformFieldLabel
+              variant="field"
+              className="image-canvas-editor__field-title"
+            >
+              素材描述
+            </PlatformFieldLabel>
+            <div className="image-canvas-editor__icon-description-list">
+              {(generateDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS).map(
+                (description, index) => (
+                  <label
+                    key={index}
+                    className="image-canvas-editor__icon-description-card"
+                  >
+                    <span className="image-canvas-editor__icon-description-index">
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <span className="image-canvas-editor__icon-description-title">
+                      素材描述 {index + 1}
+                    </span>
+                    <PlatformTextField
+                      aria-label={`素材描述${index + 1}`}
+                      value={description}
+                      disabled={generateDialog.status === 'generating'}
+                      size="sm"
+                      density="compact"
+                      className="image-canvas-editor__icon-description-input"
+                      onChange={(event) =>
+                        onUpdateIconDescription(index, event.target.value)
+                      }
+                    />
+                  </label>
+                ),
+              )}
+            </div>
+          </div>
+          {generateDialog.status === 'failed' ? (
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="xs"
+              className="image-canvas-editor__generate-status"
+              role="alert"
+            >
+              {generateDialog.errorMessage}
+            </PlatformStatusMessage>
+          ) : null}
+          <div className="image-canvas-editor__icon-footer">
+            <button
+              type="button"
+              className="image-canvas-editor__character-reference-add"
+              disabled={
+                generateDialog.status === 'generating' ||
+                (generateDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS)
+                  .length >= ICON_DESCRIPTION_LIMIT
+              }
+              onClick={onAddIconDescription}
+            >
+              添加素材描述
+            </button>
+            <div className="image-canvas-editor__option-field">
+              <PlatformFieldLabel
+                variant="field"
+                className="image-canvas-editor__field-title"
+              >
+                模型
+              </PlatformFieldLabel>
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__generation-model"
+                disabled={generateDialog.status === 'generating'}
+                onClick={() => triggerPlaceholderAction('图标模型')}
+              >
+                nanobanana2
+              </PlatformInlineOptionButton>
+            </div>
+            <PlatformActionButton
+              type="submit"
+              tone="secondary"
+              size="xs"
+              shape="pill"
+              className="image-canvas-editor__generation-submit"
+              disabled={generateDialog.status === 'generating'}
+              aria-label="生成"
+            >
+              {generateDialog.status === 'generating' ? '生成中' : '生成'}
+            </PlatformActionButton>
+          </div>
+        </form>
+      ) : null}
+
+      {isPickingCharacterSpecFromCanvas ? (
+        <div className="image-canvas-editor__canvas-pick-hint">
+          请选择画布中的图片作为角色形象规范，按 Esc 退出
+        </div>
+      ) : null}
+      {isPickingIconSpecFromCanvas ? (
+        <div className="image-canvas-editor__canvas-pick-hint">
+          请选择画布中的图标素材规范，按 Esc 退出
+        </div>
+      ) : null}
+
+      {quickEditPanel &&
+      quickEditPanel.status !== 'generating' &&
+      quickEditSourceLayer &&
+      quickEditPanelStyle ? (
+        <form
+          className="image-canvas-editor__quick-edit-panel"
+          style={quickEditPanelStyle}
+          role="dialog"
+          aria-label="快速编辑图片"
+          onPointerDown={(event) => event.stopPropagation()}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmitQuickEdit();
+          }}
+        >
+          <div className="image-canvas-editor__quick-edit-head">
+            <div className="image-canvas-editor__quick-edit-reference">
+              <img
+                src={quickEditSourceLayer.src}
+                alt={`${quickEditSourceLayer.title}参考图`}
+              />
+              <span>{quickEditSourceLayer.title}</span>
+            </div>
+            <EditorIconButton
+              label="关闭快速编辑图片"
+              title="关闭"
+              icon={X}
+              onClick={() => setQuickEditPanel(null)}
+            />
+          </div>
+          <PlatformTextField
+            variant="textarea"
+            aria-label="快速编辑提示词"
+            value={quickEditPanel.prompt}
+            size="sm"
+            density="compact"
+            className="image-canvas-editor__quick-edit-prompt"
+            onChange={(event) =>
+              setQuickEditPanel((currentPanel) =>
+                currentPanel
+                  ? {
+                      ...resetFailedPanelStatus(currentPanel),
+                      prompt: event.target.value,
+                    }
+                  : currentPanel,
+              )
+            }
+          />
+          <div className="image-canvas-editor__quick-edit-controls">
+            <PlatformSelectField
+              aria-label="快速编辑尺寸"
+              value={quickEditPanel.size}
+              size="xs"
+              density="compact"
+              onChange={(event) =>
+                setQuickEditPanel((currentPanel) =>
+                  currentPanel
+                    ? { ...currentPanel, size: event.target.value }
+                    : currentPanel,
+                )
+              }
+            >
+              {quickEditSizeOptions.map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </PlatformSelectField>
+            <PlatformSelectField
+              aria-label="快速编辑模型"
+              value={quickEditPanel.model}
+              size="xs"
+              density="compact"
+              onChange={(event) =>
+                setQuickEditPanel((currentPanel) =>
+                  currentPanel
+                    ? { ...currentPanel, model: event.target.value }
+                    : currentPanel,
+                )
+              }
+            >
+              {quickEditModelOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </PlatformSelectField>
+          </div>
+          {quickEditPanel.status === 'failed' ? (
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="xs"
+              role="alert"
+            >
+              {quickEditPanel.errorMessage}
+            </PlatformStatusMessage>
+          ) : null}
+          <PlatformActionButton
+            type="submit"
+            tone="secondary"
+            size="sm"
+            className="image-canvas-editor__quick-edit-submit"
+          >
+            生成
+          </PlatformActionButton>
+        </form>
+      ) : null}
+
+      {characterAnimationPanel &&
+      characterAnimationSourceLayer &&
+      characterAnimationPanelStyle ? (
+        <form
+          className="image-canvas-editor__character-animation-panel"
+          style={characterAnimationPanelStyle}
+          role="dialog"
+          aria-label="角色动画生成面板"
+          onPointerDown={(event) => event.stopPropagation()}
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (characterAnimationPanel.status !== 'generating') {
+              onSubmitCharacterAnimation();
+            }
+          }}
+        >
+          <div className="image-canvas-editor__character-animation-head">
+            <strong>角色动画</strong>
+            <EditorIconButton
+              label="关闭角色动画生成面板"
+              title="关闭"
+              icon={X}
+              onClick={() => setCharacterAnimationPanel(null)}
+            />
+          </div>
+          <PlatformTextField
+            variant="textarea"
+            aria-label="动画描述"
+            value={characterAnimationPanel.promptText}
+            maxLength={4000}
+            disabled={characterAnimationPanel.status === 'generating'}
+            size="sm"
+            density="compact"
+            className="image-canvas-editor__character-animation-textarea"
+            onChange={(event) =>
+              setCharacterAnimationPanel((currentPanel) =>
+                currentPanel
+                  ? {
+                      ...resetFailedPanelStatus(currentPanel),
+                      promptText: event.target.value.slice(0, 4000),
+                    }
+                  : currentPanel,
+              )
+            }
+          />
+          <div className="image-canvas-editor__character-animation-presets">
+            {CHARACTER_ANIMATION_ACTION_PROMPTS.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                className="image-canvas-editor__character-animation-preset"
+                disabled={characterAnimationPanel.status === 'generating'}
+                onClick={() =>
+                  setCharacterAnimationPanel((currentPanel) =>
+                    currentPanel
+                      ? {
+                          ...currentPanel,
+                          promptText: preset.text,
+                          status: 'idle',
+                          errorMessage: undefined,
+                        }
+                      : currentPanel,
+                  )
+                }
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+          <div className="image-canvas-editor__character-animation-grid">
+            <PlatformSelectField
+              aria-label="分辨率"
+              value={characterAnimationPanel.resolution}
+              disabled={characterAnimationPanel.status === 'generating'}
+              size="xs"
+              density="compact"
+              onChange={(event) =>
+                setCharacterAnimationPanel((currentPanel) =>
+                  currentPanel
+                    ? {
+                        ...resetFailedPanelStatus(currentPanel),
+                        resolution:
+                          event.target.value === '720p' ? '720p' : '480p',
+                      }
+                    : currentPanel,
+                )
+              }
+            >
+              <option value="480p">480p</option>
+              <option value="720p">720p</option>
+            </PlatformSelectField>
+            <PlatformSelectField
+              aria-label="画面比例"
+              value={characterAnimationPanel.ratio}
+              disabled={characterAnimationPanel.status === 'generating'}
+              size="xs"
+              density="compact"
+              onChange={(event) =>
+                setCharacterAnimationPanel((currentPanel) =>
+                  currentPanel
+                    ? {
+                        ...resetFailedPanelStatus(currentPanel),
+                        ratio:
+                          CHARACTER_ANIMATION_RATIO_OPTIONS.find(
+                            (item) => item.value === event.target.value,
+                          )?.value ?? 'same',
+                      }
+                    : currentPanel,
+                )
+              }
+            >
+              {CHARACTER_ANIMATION_RATIO_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </PlatformSelectField>
+            <PlatformSelectField
+              aria-label="时长"
+              value={String(characterAnimationPanel.frameCount)}
+              disabled={characterAnimationPanel.status === 'generating'}
+              size="xs"
+              density="compact"
+              onChange={(event) =>
+                onUpdateCharacterAnimationDuration(event.target.value)
+              }
+            >
+              {CHARACTER_ANIMATION_DURATION_OPTIONS.map((option) => (
+                <option
+                  key={option.frameCount}
+                  value={String(option.frameCount)}
+                >
+                  {option.label}
+                </option>
+              ))}
+            </PlatformSelectField>
+          </div>
+          <div className="image-canvas-editor__character-animation-summary">
+            <span
+              className="image-canvas-editor__character-animation-summary-text"
+              title={characterAnimationPanel.promptText.trim() || undefined}
+              aria-label={`生成文本：${
+                characterAnimationPanel.promptText.trim() || '动画描述'
+              }`}
+            >
+              {characterAnimationPanel.promptText.trim()
+                ? characterAnimationPanel.promptText.trim()
+                : '动画描述'}
+            </span>
+            <strong>{characterAnimationPrice}泥点</strong>
+          </div>
+          {characterAnimationPanel.status === 'completed' &&
+          characterAnimationPanel.result ? (
+            <PlatformStatusMessage
+              tone="success"
+              surface="platform"
+              size="xs"
+              role="status"
+            >
+              已生成 {characterAnimationPanel.result.frameCount} 帧
+            </PlatformStatusMessage>
+          ) : null}
+          {characterAnimationPanel.status === 'failed' ? (
+            <PlatformStatusMessage
+              tone="error"
+              surface="platform"
+              size="xs"
+              role="alert"
+            >
+              {characterAnimationPanel.errorMessage}
+            </PlatformStatusMessage>
+          ) : null}
+          <PlatformActionButton
+            type="submit"
+            tone="secondary"
+            size="sm"
+            className="image-canvas-editor__character-animation-submit"
+            disabled={characterAnimationPanel.status === 'generating'}
+          >
+            {characterAnimationPanel.status === 'generating'
+              ? '生成中'
+              : '生成'}
+          </PlatformActionButton>
+        </form>
+      ) : null}
+
+      <UnifiedModal
+        open={
+          generateDialog?.mode === 'edit' &&
+          generateDialog.status !== 'generating'
+        }
+        title={generateDialog?.mode === 'edit' ? '修改图片' : '生成图片'}
+        size="sm"
+        closeLabel={
+          generateDialog?.mode === 'edit' ? '关闭修改图片' : '关闭生成图片'
+        }
+        closeDisabled={generateDialog?.status === 'generating'}
+        onClose={() => setGenerateDialog(null)}
+        panelClassName="image-canvas-editor__generate-dialog"
+        bodyClassName="image-canvas-editor__generate-dialog-body"
+      >
+        {generateDialog?.mode === 'edit' ? (
+          <form
+            className="image-canvas-editor__generate-form"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (generateDialog.status !== 'generating') {
+                onSubmitImageGeneration(generateDialog);
+              }
+            }}
+          >
+            <div className="image-canvas-editor__generate-body">
+              <PlatformTextField
+                variant="textarea"
+                aria-label="生成提示词"
+                value={generateDialog.prompt}
+                disabled={generateDialog.status === 'generating'}
+                size="sm"
+                density="roomy"
+                className="image-canvas-editor__generate-prompt"
+                placeholder="描述你想如何修改这张图片"
+                onChange={(event) =>
+                  setGenerateDialog((currentDialog) =>
+                    currentDialog
+                      ? {
+                          ...currentDialog,
+                          prompt: event.target.value,
+                        }
+                      : currentDialog,
+                  )
+                }
+              />
+              {generateDialog.status === 'generating' ? (
+                <PlatformStatusMessage
+                  tone="info"
+                  surface="platform"
+                  size="xs"
+                  className="image-canvas-editor__generate-status"
+                  role="status"
+                >
+                  修改中
+                </PlatformStatusMessage>
+              ) : null}
+              {generateDialog.status === 'failed' ? (
+                <PlatformStatusMessage
+                  tone="error"
+                  surface="platform"
+                  size="xs"
+                  className="image-canvas-editor__generate-status"
+                  role="alert"
+                >
+                  {generateDialog.errorMessage}
+                </PlatformStatusMessage>
+              ) : null}
+              <PlatformActionButton
+                type="submit"
+                size="sm"
+                className="image-canvas-editor__generate-submit"
+                disabled={generateDialog.status === 'generating'}
+              >
+                {generateDialog.status === 'generating' ? '修改中' : '修改'}
+              </PlatformActionButton>
+            </div>
+          </form>
+        ) : null}
+      </UnifiedModal>
+    </>
+  );
+}