From 6afc1cf920cfa8ead6bcdaf468f14242678e7ec7 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 17 Jun 2026 20:21:07 +0800
Subject: [PATCH 01/16] =?UTF-8?q?=E6=8A=BD=E5=87=BA=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=8F=82=E8=80=83=E5=9B=BE=E7=8A=B6=E6=80=81=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

扩展 ImageCanvasUploadModel 承载生成参考图上传后的状态转换

精简 useImageCanvasUploadWorkflow 中的参考图 dialog 写回逻辑

补充上传模型单测覆盖参考图写入和失败态清理

更新 TRACKING.md 记录第四十五执行批次验证
---
 TRACKING.md                                   |   2 +
 .../ImageCanvasUploadModel.test.ts            | 131 +++++++++++++++++-
 .../image-editor/ImageCanvasUploadModel.ts    |  86 ++++++++++++
 .../useImageCanvasUploadWorkflow.ts           | 104 +++++++-------
 4 files changed, 272 insertions(+), 51 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index b671815ba..b3e47ea13 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -169,3 +169,5 @@
 - 2026-06-17 前端拆分第四十三执行批次：继续收口 `useImageCanvasGenerationWorkflow`，新增 `useImageCanvasGenerationSubmissionWorkflow`，把普通生图 / 修改图 / 图标素材批量生成 / 快速编辑 / 角色动画的提交 API、提交中 / 失败 / 完成状态回写、生成结果落画布、选中图层、切换图层侧栏、适合视图和 last image model 记忆从入口 workflow 中抽成生成提交流水线 hook；原 workflow 保留生成入口、菜单开关、画布选取引用、表单字段更新、生成器关闭和删除图层后的状态清理，避免把 UI 选择态和提交态混在一起。新增 hook 单测覆盖 quick edit 成功 / 失败、edit 成功清理 modal、生成使用最新移动占位、icon 缺规范校验、icon 成功批量落图并记住模型、角色动画 completed / failed 状态机；同步修复新测试文件的 mock 隔离，避免 `vi.clearAllMocks()` 清空并行集成测试的调用记录；`useImageCanvasGenerationWorkflow.ts` 从 870 行降至 499 行。统一验证命令：`npm run test -- src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx`、`npm run test -- src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 临时 `XDG_CONFIG_HOME` 下 Chrome headless 打开成功，未登录显示 `账号入口`；关闭后 `画布背景设置` 可打开，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；点击 `生成工具` 后 `Image Generator` 占位、`生成图片` 对话框和 `AI画布工具栏` 均可见，控制台仅有预期的未登录 `/api/auth/refresh` 401。
 - 2026-06-17 前端拆分第四十四执行批次：继续收口 `useImageCanvasAssetLibrary`，扩展 `ImageCanvasAssetLibraryModel`，把素材文件夹坐标命中、素材拖拽目标文件夹置顶判断、素材框选起点 / 移动 / 反向拖拽矩形归一化、框选只命中 uploaded 素材和框选启动规则从 hook 中抽成纯几何模型；asset library hook 保留 DOM 查询、dataset 读取、pointer capture / release、React 状态写入、后端 CRUD 和登录弹窗副作用，避免把 DOM 与服务调用塞进模型。新增模型单测覆盖文件夹边界命中、列表外返回空、文件夹 header 视野外置顶、反向框选归一化、边缘相交命中、忽略 built-in / unknown 素材；只读子代理复核同意优先抽 Rect/Point + folder hit + pinned + marquee selection，不继续拆新 hook。验证命令：`npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/useImageCanvasAssetLibrary.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`。
 - 2026-06-17 前端拆分第四十四执行批次验证补充：统一编辑器回归命令 `npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx` 通过 33 个文件 / 219 个测试；`npm run typecheck`、`npm run check:encoding`、`git diff --check` 均通过。浏览器回归：`http://127.0.0.1:10007/editor/canvas` 使用 Playwright CLI headless 打开成功，未登录显示 `账号入口`；关闭登录后 `画布背景设置` 可打开，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；默认素材侧栏显示 `素材` / `项目素材` / `上传到项目素材`，切换 `打开图层` 后侧栏显示 `图层`，点击 `生成工具` 后 `Image Generator` 占位、`生成图片` 对话框和 `AI画布工具栏` 均可见；网络请求仅有预期未登录 `/api/auth/refresh` 401，其余 editor smoke 相关请求正常。
+- 2026-06-17 前端拆分第四十五执行批次：继续收口 `useImageCanvasUploadWorkflow`，扩展 `ImageCanvasUploadModel`，把生成参考图上传后的 dialog 状态转换从 hook 中抽成纯模型：统一创建上传参考图对象、将 failed 生成面板恢复为 idle、按 `spec-reference` / `character-spec` / `character-reference` / `icon-spec` 写入对应引用字段，并保持不匹配 dialog 不变；upload workflow hook 继续保留文件筛选、Data URL 读取、文件 input、未登录素材上传续传、真实素材创建 API、上传进度和画布落图副作用。新增模型单测覆盖参考图 fallback label、failed 状态清理、规范 / 角色 / 图标参考图写入和角色参考图追加；局部验证命令：`npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx`。
+- 2026-06-17 前端拆分第四十五执行批次验证补充：统一编辑器回归命令 `npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx` 通过 33 个文件 / 223 个测试；`npm run typecheck`、`npm run check:encoding`、`git diff --check` 均通过。浏览器回归：`http://127.0.0.1:10007/editor/canvas` 使用 Playwright CLI headless 打开成功，未登录显示 `账号入口`；关闭登录后 `画布背景设置` 可打开，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；默认素材侧栏显示 `素材` / `项目素材` / `上传到项目素材`，切换 `打开图层` 后侧栏显示 `图层`，点击 `生成工具` 后 `Image Generator` 占位、`生成图片` 对话框和 `AI画布工具栏` 均可见；网络请求仅有预期未登录 `/api/auth/refresh` 401，其余 editor smoke 相关请求正常。只读子代理复核生成提交链路后建议暂停继续硬拆，除非后续新增生成模式再考虑按“生成成功后的落图提交事务”抽内部 hook。
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 2bdef3245..663d289c6 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -1,14 +1,18 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import type {
   CanvasLayer,
   EditorAssetFolder,
+  GenerateDialogState,
 } from './ImageCanvasEditorTypes';
 import {
+  applyGenerationReferenceUpload,
   createUploadCanvasLayer,
+  createUploadedGenerationReference,
   createUploadingAssetPlaceholder,
   resizeUploadCanvasLayerToImage,
   resolveUploadFolderId,
+  setFailedGenerationIdle,
 } from './ImageCanvasUploadModel';
 
 function createFolder(
@@ -43,7 +47,23 @@ function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   };
 }
 
+function createDialog(
+  overrides: Partial<GenerateDialogState> = {},
+): GenerateDialogState {
+  return {
+    mode: 'character',
+    prompt: '',
+    status: 'failed',
+    errorMessage: '旧错误',
+    ...overrides,
+  };
+}
+
 describe('ImageCanvasUploadModel', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('resolves upload folder ids with project fallback', () => {
     const folders = [
       createFolder(),
@@ -89,6 +109,115 @@ describe('ImageCanvasUploadModel', () => {
     });
   });
 
+  it('creates uploaded generation references with fallback labels', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-06-17T12:00:00.000Z'));
+
+    expect(
+      createUploadedGenerationReference({
+        idPrefix: 'upload-character-reference',
+        index: 2,
+        fileName: '',
+        fallbackLabel: '参考图3',
+        imageSrc: 'data:image/png;base64,ref',
+      }),
+    ).toEqual({
+      id: 'upload-character-reference-1781697600000-2',
+      label: '参考图3',
+      src: 'data:image/png;base64,ref',
+    });
+  });
+
+  it('resets failed generation dialogs when reference uploads are applied', () => {
+    expect(
+      setFailedGenerationIdle(
+        createDialog({ status: 'failed', errorMessage: '旧错误' }),
+      ),
+    ).toMatchObject({ status: 'idle', errorMessage: undefined });
+    expect(
+      setFailedGenerationIdle(createDialog({ status: 'generating' })),
+    ).toMatchObject({ status: 'generating', errorMessage: '旧错误' });
+  });
+
+  it('applies uploaded references to matching generation dialogs', () => {
+    const reference = {
+      id: 'ref-a',
+      label: '参考图',
+      src: 'data:image/png;base64,ref',
+    };
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({ mode: 'spec' }),
+        target: 'spec-reference',
+        references: [reference],
+      }),
+    ).toMatchObject({
+      mode: 'spec',
+      status: 'idle',
+      specReference: reference,
+      errorMessage: undefined,
+    });
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({ mode: 'character' }),
+        target: 'character-spec',
+        references: [reference],
+      }),
+    ).toMatchObject({
+      mode: 'character',
+      status: 'idle',
+      characterSpecReference: reference,
+    });
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({ mode: 'icon' }),
+        target: 'icon-spec',
+        references: [reference],
+      }),
+    ).toMatchObject({
+      mode: 'icon',
+      status: 'idle',
+      iconSpecReference: reference,
+    });
+  });
+
+  it('appends character reference uploads without changing unmatched dialogs', () => {
+    const previousReference = {
+      id: 'ref-old',
+      label: '旧参考图',
+      src: 'data:image/png;base64,old',
+    };
+    const nextReference = {
+      id: 'ref-new',
+      label: '新参考图',
+      src: 'data:image/png;base64,new',
+    };
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({
+          mode: 'character',
+          characterReferences: [previousReference],
+        }),
+        target: 'character-reference',
+        references: [nextReference],
+      }),
+    ).toMatchObject({
+      mode: 'character',
+      status: 'idle',
+      characterReferences: [previousReference, nextReference],
+    });
+    const iconDialog = createDialog({ mode: 'icon' });
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: iconDialog,
+        target: 'character-reference',
+        references: [nextReference],
+      }),
+    ).toBe(iconDialog);
+  });
+
   it('creates upload canvas layers centered on the target canvas point', () => {
     const layer = createUploadCanvasLayer({
       uploadIndex: 1,
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 84033df9a..5337c0b6e 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -1,13 +1,20 @@
 import { resolveLayerResolutionSize } from './ImageCanvasEditorModel';
 import type {
+  CharacterReferenceImage,
   CanvasLayer,
   CanvasViewport,
   EditorAsset,
   EditorAssetFolder,
+  GenerateDialogState,
 } from './ImageCanvasEditorTypes';
 
 type CanvasSize = { width: number; height: number };
 type CanvasPoint = { x: number; y: number };
+type GenerationReferenceUploadTarget =
+  | 'character-reference'
+  | 'character-spec'
+  | 'icon-spec'
+  | 'spec-reference';
 
 export const UPLOAD_LAYER_FALLBACK_SIZE = {
   width: 420,
@@ -29,6 +36,85 @@ export function resolveUploadFolderId({
     : 'project';
 }
 
+export function createUploadedGenerationReference({
+  idPrefix,
+  index,
+  fileName,
+  fallbackLabel,
+  imageSrc,
+}: {
+  idPrefix: string;
+  index?: number;
+  fileName?: string;
+  fallbackLabel: string;
+  imageSrc: string;
+}): CharacterReferenceImage {
+  return {
+    id:
+      typeof index === 'number'
+        ? `${idPrefix}-${Date.now()}-${index}`
+        : `${idPrefix}-${Date.now()}`,
+    label: fileName || fallbackLabel,
+    src: imageSrc,
+  };
+}
+
+export function setFailedGenerationIdle(dialog: GenerateDialogState) {
+  return {
+    ...dialog,
+    status: dialog.status === 'failed' ? 'idle' : dialog.status,
+    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
+  };
+}
+
+export function applyGenerationReferenceUpload({
+  dialog,
+  target,
+  references,
+}: {
+  dialog: GenerateDialogState | null;
+  target: GenerationReferenceUploadTarget;
+  references: CharacterReferenceImage[];
+}): GenerateDialogState | null {
+  const firstReference = references[0];
+  if (!firstReference) {
+    return dialog;
+  }
+  if (target === 'spec-reference') {
+    return dialog?.mode === 'spec'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          specReference: firstReference,
+        }
+      : dialog;
+  }
+  if (target === 'character-spec') {
+    return dialog?.mode === 'character'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          characterSpecReference: firstReference,
+        }
+      : dialog;
+  }
+  if (target === 'icon-spec') {
+    return dialog?.mode === 'icon'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          iconSpecReference: firstReference,
+        }
+      : dialog;
+  }
+  return dialog?.mode === 'character'
+    ? {
+        ...setFailedGenerationIdle(dialog),
+        characterReferences: [
+          ...(dialog.characterReferences ?? []),
+          ...references,
+        ],
+      }
+    : dialog;
+}
+
 export function createUploadingAssetPlaceholder({
   uploadIndex,
   fileName,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 220fa2fa9..2dc5fefba 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -20,7 +20,9 @@ import type {
 } from './ImageCanvasEditorTypes';
 import { isImageFile, readImageFileAsDataUrl } from './ImageCanvasFileModel';
 import {
+  applyGenerationReferenceUpload,
   createUploadCanvasLayer,
+  createUploadedGenerationReference,
   createUploadingAssetPlaceholder,
   resizeUploadCanvasLayerToImage,
   resolveUploadFolderId,
@@ -60,14 +62,6 @@ function isEditorAuthError(error: unknown) {
   );
 }
 
-function setFailedGenerationIdle(dialog: GenerateDialogState) {
-  return {
-    ...dialog,
-    status: dialog.status === 'failed' ? 'idle' : dialog.status,
-    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
-  };
-}
-
 export function useImageCanvasUploadWorkflow({
   canAccessProtectedData,
   openEditorLoginModal,
@@ -113,16 +107,18 @@ export function useImageCanvasUploadWorkflow({
 
       const imageSrc = await readImageFileAsDataUrl(imageFile);
       setGenerateDialog((currentDialog) =>
-        currentDialog?.mode === 'character'
-          ? {
-              ...setFailedGenerationIdle(currentDialog),
-              characterSpecReference: {
-                id: `upload-character-spec-${Date.now()}`,
-                label: imageFile.name || '角色形象规范',
-                src: imageSrc,
-              },
-            }
-          : currentDialog,
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'character-spec',
+          references: [
+            createUploadedGenerationReference({
+              idPrefix: 'upload-character-spec',
+              fileName: imageFile.name,
+              fallbackLabel: '角色形象规范',
+              imageSrc,
+            }),
+          ],
+        }),
       );
     },
     [setGenerateDialog],
@@ -138,16 +134,18 @@ export function useImageCanvasUploadWorkflow({
 
       const imageSrc = await readImageFileAsDataUrl(imageFile);
       setGenerateDialog((currentDialog) =>
-        currentDialog?.mode === 'spec'
-          ? {
-              ...setFailedGenerationIdle(currentDialog),
-              specReference: {
-                id: `upload-spec-reference-${Date.now()}`,
-                label: imageFile.name || '参考图',
-                src: imageSrc,
-              },
-            }
-          : currentDialog,
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'spec-reference',
+          references: [
+            createUploadedGenerationReference({
+              idPrefix: 'upload-spec-reference',
+              fileName: imageFile.name,
+              fallbackLabel: '参考图',
+              imageSrc,
+            }),
+          ],
+        }),
       );
     },
     [setGenerateDialog],
@@ -163,21 +161,25 @@ export function useImageCanvasUploadWorkflow({
 
       const references = await Promise.all(
         imageFiles.map(async (file, index) => ({
-          id: `upload-character-reference-${Date.now()}-${index}`,
-          label: file.name || `参考图${index + 1}`,
-          src: await readImageFileAsDataUrl(file),
+          file,
+          index,
+          imageSrc: await readImageFileAsDataUrl(file),
         })),
       );
       setGenerateDialog((currentDialog) =>
-        currentDialog?.mode === 'character'
-          ? {
-              ...setFailedGenerationIdle(currentDialog),
-              characterReferences: [
-                ...(currentDialog.characterReferences ?? []),
-                ...references,
-              ],
-            }
-          : currentDialog,
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'character-reference',
+          references: references.map(({ file, imageSrc, index }) =>
+            createUploadedGenerationReference({
+              idPrefix: 'upload-character-reference',
+              index,
+              fileName: file.name,
+              fallbackLabel: `参考图${index + 1}`,
+              imageSrc,
+            }),
+          ),
+        }),
       );
     },
     [setGenerateDialog],
@@ -193,16 +195,18 @@ export function useImageCanvasUploadWorkflow({
 
       const imageSrc = await readImageFileAsDataUrl(imageFile);
       setGenerateDialog((currentDialog) =>
-        currentDialog?.mode === 'icon'
-          ? {
-              ...setFailedGenerationIdle(currentDialog),
-              iconSpecReference: {
-                id: `upload-icon-spec-${Date.now()}`,
-                label: imageFile.name || '图标素材规范',
-                src: imageSrc,
-              },
-            }
-          : currentDialog,
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'icon-spec',
+          references: [
+            createUploadedGenerationReference({
+              idPrefix: 'upload-icon-spec',
+              fileName: imageFile.name,
+              fallbackLabel: '图标素材规范',
+              imageSrc,
+            }),
+          ],
+        }),
       );
     },
     [setGenerateDialog],

From d8bd371c69f519d25a005d916ad767d36031d0ad Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 17 Jun 2026 20:36:11 +0800
Subject: [PATCH 02/16] =?UTF-8?q?=E6=8A=BD=E5=87=BA=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=94=9F=E5=91=BD=E5=91=A8=E6=9C=9F=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

扩展 ImageCanvasUploadModel 承载素材上传占位、进度、失败和持久化回写状态迁移

精简 useImageCanvasUploadWorkflow 中的资产与图层状态补丁逻辑

补充上传模型单测覆盖生命周期状态和图层绑定

更新 TRACKING.md 记录第四十六执行批次与验证结果
---
 TRACKING.md                                   |   2 +
 .../ImageCanvasUploadModel.test.ts            | 182 ++++++++++++++++++
 .../image-editor/ImageCanvasUploadModel.ts    | 179 +++++++++++++++++
 .../useImageCanvasUploadWorkflow.ts           | 132 +++++--------
 4 files changed, 409 insertions(+), 86 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index b3e47ea13..366d27a80 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -171,3 +171,5 @@
 - 2026-06-17 前端拆分第四十四执行批次验证补充：统一编辑器回归命令 `npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx` 通过 33 个文件 / 219 个测试；`npm run typecheck`、`npm run check:encoding`、`git diff --check` 均通过。浏览器回归：`http://127.0.0.1:10007/editor/canvas` 使用 Playwright CLI headless 打开成功，未登录显示 `账号入口`；关闭登录后 `画布背景设置` 可打开，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；默认素材侧栏显示 `素材` / `项目素材` / `上传到项目素材`，切换 `打开图层` 后侧栏显示 `图层`，点击 `生成工具` 后 `Image Generator` 占位、`生成图片` 对话框和 `AI画布工具栏` 均可见；网络请求仅有预期未登录 `/api/auth/refresh` 401，其余 editor smoke 相关请求正常。
 - 2026-06-17 前端拆分第四十五执行批次：继续收口 `useImageCanvasUploadWorkflow`，扩展 `ImageCanvasUploadModel`，把生成参考图上传后的 dialog 状态转换从 hook 中抽成纯模型：统一创建上传参考图对象、将 failed 生成面板恢复为 idle、按 `spec-reference` / `character-spec` / `character-reference` / `icon-spec` 写入对应引用字段，并保持不匹配 dialog 不变；upload workflow hook 继续保留文件筛选、Data URL 读取、文件 input、未登录素材上传续传、真实素材创建 API、上传进度和画布落图副作用。新增模型单测覆盖参考图 fallback label、failed 状态清理、规范 / 角色 / 图标参考图写入和角色参考图追加；局部验证命令：`npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx`。
 - 2026-06-17 前端拆分第四十五执行批次验证补充：统一编辑器回归命令 `npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx` 通过 33 个文件 / 223 个测试；`npm run typecheck`、`npm run check:encoding`、`git diff --check` 均通过。浏览器回归：`http://127.0.0.1:10007/editor/canvas` 使用 Playwright CLI headless 打开成功，未登录显示 `账号入口`；关闭登录后 `画布背景设置` 可打开，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；默认素材侧栏显示 `素材` / `项目素材` / `上传到项目素材`，切换 `打开图层` 后侧栏显示 `图层`，点击 `生成工具` 后 `Image Generator` 占位、`生成图片` 对话框和 `AI画布工具栏` 均可见；网络请求仅有预期未登录 `/api/auth/refresh` 401，其余 editor smoke 相关请求正常。只读子代理复核生成提交链路后建议暂停继续硬拆，除非后续新增生成模式再考虑按“生成成功后的落图提交事务”抽内部 hook。
+- 2026-06-17 前端拆分第四十六执行批次：继续收口 `useImageCanvasUploadWorkflow`，扩展 `ImageCanvasUploadModel`，把素材上传生命周期中的文件夹展开、读取成功 / 失败、上传中、持久化资产替换、上传失败、图片尺寸回写和画布图层绑定持久化素材抽成纯模型；upload workflow hook 继续保留文件筛选、Data URL 读取、登录弹窗、真实素材创建 API、Image 尺寸读取、画布落图和 React setter 编排。新增模型单测覆盖上传占位卡各阶段状态、持久化后清理上传态、尺寸回写和图层绑定；局部验证命令：`npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx`。
+- 2026-06-17 前端拆分第四十六执行批次验证补充：统一编辑器回归命令 `npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx` 通过 33 个文件 / 228 个测试；`npm run typecheck`、`npm run check:encoding`、`git diff --check` 均通过。浏览器回归：`http://127.0.0.1:10007/editor/canvas` 使用系统 Chrome headless 打开成功，未登录显示 `账号入口`；默认素材侧栏显示 `素材` / `项目素材`；关闭登录后 `画布背景设置` 可打开，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；切换 `打开图层` 后侧栏显示 `图层`；点击 `生成工具` 后 `Image Generator` 占位、生成表单控件和 `AI画布工具栏` 均可见；除预期未登录 `/api/auth/refresh` 401 外无额外 API 失败或控制台错误。
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 663d289c6..562b7714b 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -7,9 +7,17 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   applyGenerationReferenceUpload,
+  applyMeasuredUploadAssetSize,
+  applyPersistedUploadAsset,
+  applyUploadAssetCreateFailure,
+  applyUploadAssetCreatePending,
+  applyUploadAssetReadFailure,
+  applyUploadAssetReadSuccess,
+  bindUploadLayerToPersistedAsset,
   createUploadCanvasLayer,
   createUploadedGenerationReference,
   createUploadingAssetPlaceholder,
+  expandUploadFolder,
   resizeUploadCanvasLayerToImage,
   resolveUploadFolderId,
   setFailedGenerationIdle,
@@ -47,6 +55,19 @@ function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   };
 }
 
+function createUploadingAsset(
+  overrides: Partial<ReturnType<typeof createUploadingAssetPlaceholder>> = {},
+) {
+  return {
+    ...createUploadingAssetPlaceholder({
+      uploadIndex: 1,
+      fileName: '上传图片.png',
+      folderId: 'project',
+    }),
+    ...overrides,
+  };
+}
+
 function createDialog(
   overrides: Partial<GenerateDialogState> = {},
 ): GenerateDialogState {
@@ -109,6 +130,167 @@ describe('ImageCanvasUploadModel', () => {
     });
   });
 
+  it('opens the target upload folder without changing other folders', () => {
+    expect(
+      expandUploadFolder({
+        folders: [
+          createFolder({ id: 'project', collapsed: true }),
+          createFolder({ id: 'characters', label: '角色素材', collapsed: true }),
+        ],
+        folderId: 'characters',
+      }),
+    ).toEqual([
+      createFolder({ id: 'project', collapsed: true }),
+      createFolder({ id: 'characters', label: '角色素材', collapsed: false }),
+    ]);
+  });
+
+  it('applies upload asset lifecycle patches', () => {
+    const asset = createUploadingAsset();
+    const otherAsset = createUploadingAsset({
+      id: 'upload-other',
+      label: '其他图片.png',
+    });
+
+    expect(
+      applyUploadAssetReadSuccess({
+        assets: [asset, otherAsset],
+        uploadAssetId: asset.id,
+        imageSrc: 'data:image/png;base64,read',
+      }),
+    ).toMatchObject([
+      {
+        id: 'upload-1',
+        src: 'data:image/png;base64,read',
+        uploadProgress: 42,
+        uploadMessage: '读取图片',
+      },
+      { id: 'upload-other', label: '其他图片.png' },
+    ]);
+
+    expect(
+      applyUploadAssetCreatePending({
+        assets: [asset],
+        uploadAssetId: asset.id,
+      }),
+    ).toMatchObject([
+      {
+        id: 'upload-1',
+        uploadStatus: 'uploading',
+        uploadProgress: 68,
+        uploadMessage: '上传中',
+      },
+    ]);
+
+    expect(
+      applyUploadAssetReadFailure({
+        assets: [asset],
+        uploadAssetId: asset.id,
+      }),
+    ).toMatchObject([
+      {
+        id: 'upload-1',
+        uploadStatus: 'failed',
+        uploadProgress: 100,
+        uploadMessage: '读取失败',
+      },
+    ]);
+
+    expect(
+      applyUploadAssetCreateFailure({
+        assets: [asset],
+        uploadAssetId: asset.id,
+        message: '请先登录',
+      }),
+    ).toMatchObject([
+      {
+        id: 'upload-1',
+        uploadStatus: 'failed',
+        uploadProgress: 100,
+        uploadMessage: '请先登录',
+      },
+    ]);
+  });
+
+  it('replaces upload placeholders with persisted assets and clears upload state', () => {
+    expect(
+      applyPersistedUploadAsset({
+        assets: [createUploadingAsset()],
+        uploadAssetId: 'upload-1',
+        persistedAsset: {
+          assetId: 'asset-1',
+          folderId: 'characters',
+          label: '角色.png',
+          imageSrc: 'data:image/png;base64,persisted',
+          width: 1024,
+          height: 768,
+          objectKey: 'object-key',
+          assetObjectId: 'asset-object',
+        },
+      }),
+    ).toEqual([
+      {
+        id: 'asset-1',
+        label: '角色.png',
+        src: 'data:image/png;base64,persisted',
+        width: 1024,
+        height: 768,
+        folderId: 'characters',
+        sourceKind: 'uploaded',
+        sourceType: 'uploaded',
+        persisted: true,
+        objectKey: 'object-key',
+        assetObjectId: 'asset-object',
+        uploadStatus: undefined,
+        uploadProgress: undefined,
+        uploadMessage: undefined,
+      },
+    ]);
+  });
+
+  it('updates measured asset size after the browser loads the uploaded image', () => {
+    expect(
+      applyMeasuredUploadAssetSize({
+        assets: [createUploadingAsset()],
+        uploadAssetId: 'upload-1',
+        originalWidth: 1600,
+        originalHeight: 900,
+      }),
+    ).toMatchObject([
+      {
+        id: 'upload-1',
+        width: 1600,
+        height: 900,
+      },
+    ]);
+  });
+
+  it('binds uploaded canvas layers to persisted asset metadata', () => {
+    expect(
+      bindUploadLayerToPersistedAsset({
+        layers: [createLayer({ objectKey: 'local-object' })],
+        layerId: 'layer-upload-1',
+        persistedAsset: {
+          assetId: 'asset-1',
+          folderId: 'project',
+          label: '上传图片.png',
+          imageSrc: 'data:image/png;base64,persisted',
+          width: 420,
+          height: 315,
+          objectKey: 'object-key',
+          assetObjectId: 'asset-object',
+        },
+      }),
+    ).toMatchObject([
+      {
+        id: 'layer-upload-1',
+        sourceAssetId: 'asset-1',
+        objectKey: 'object-key',
+        assetObjectId: 'asset-object',
+      },
+    ]);
+  });
+
   it('creates uploaded generation references with fallback labels', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2026-06-17T12:00:00.000Z'));
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 5337c0b6e..7d5a10262 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -10,6 +10,16 @@ import type {
 
 type CanvasSize = { width: number; height: number };
 type CanvasPoint = { x: number; y: number };
+type PersistedUploadAsset = {
+  assetId: string;
+  folderId: string;
+  label: string;
+  imageSrc: string;
+  width: number;
+  height: number;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
+};
 type GenerationReferenceUploadTarget =
   | 'character-reference'
   | 'character-spec'
@@ -140,6 +150,175 @@ export function createUploadingAssetPlaceholder({
   };
 }
 
+export function expandUploadFolder({
+  folders,
+  folderId,
+}: {
+  folders: EditorAssetFolder[];
+  folderId: string;
+}) {
+  return folders.map((folder) =>
+    folder.id === folderId
+      ? {
+          ...folder,
+          collapsed: false,
+        }
+      : folder,
+  );
+}
+
+export function applyUploadAssetReadSuccess({
+  assets,
+  uploadAssetId,
+  imageSrc,
+}: {
+  assets: EditorAsset[];
+  uploadAssetId: string;
+  imageSrc: string;
+}) {
+  return assets.map((asset) =>
+    asset.id === uploadAssetId
+      ? {
+          ...asset,
+          src: imageSrc,
+          uploadProgress: 42,
+          uploadMessage: '读取图片',
+        }
+      : asset,
+  );
+}
+
+export function applyUploadAssetReadFailure({
+  assets,
+  uploadAssetId,
+}: {
+  assets: EditorAsset[];
+  uploadAssetId: string;
+}) {
+  return assets.map((asset) =>
+    asset.id === uploadAssetId
+      ? {
+          ...asset,
+          uploadStatus: 'failed' as const,
+          uploadProgress: 100,
+          uploadMessage: '读取失败',
+        }
+      : asset,
+  );
+}
+
+export function applyUploadAssetCreatePending({
+  assets,
+  uploadAssetId,
+}: {
+  assets: EditorAsset[];
+  uploadAssetId: string;
+}) {
+  return assets.map((asset) =>
+    asset.id === uploadAssetId
+      ? {
+          ...asset,
+          uploadProgress: 68,
+          uploadMessage: '上传中',
+        }
+      : asset,
+  );
+}
+
+export function applyPersistedUploadAsset({
+  assets,
+  uploadAssetId,
+  persistedAsset,
+}: {
+  assets: EditorAsset[];
+  uploadAssetId: string;
+  persistedAsset: PersistedUploadAsset;
+}) {
+  return assets.map((asset) =>
+    asset.id === uploadAssetId
+      ? {
+          ...asset,
+          id: persistedAsset.assetId,
+          folderId: persistedAsset.folderId,
+          label: persistedAsset.label,
+          src: persistedAsset.imageSrc,
+          width: persistedAsset.width,
+          height: persistedAsset.height,
+          objectKey: persistedAsset.objectKey ?? undefined,
+          assetObjectId: persistedAsset.assetObjectId ?? undefined,
+          persisted: true,
+          uploadStatus: undefined,
+          uploadProgress: undefined,
+          uploadMessage: undefined,
+        }
+      : asset,
+  );
+}
+
+export function applyUploadAssetCreateFailure({
+  assets,
+  uploadAssetId,
+  message,
+}: {
+  assets: EditorAsset[];
+  uploadAssetId: string;
+  message: string;
+}) {
+  return assets.map((asset) =>
+    asset.id === uploadAssetId
+      ? {
+          ...asset,
+          uploadStatus: 'failed' as const,
+          uploadProgress: 100,
+          uploadMessage: message,
+        }
+      : asset,
+  );
+}
+
+export function applyMeasuredUploadAssetSize({
+  assets,
+  uploadAssetId,
+  originalWidth,
+  originalHeight,
+}: {
+  assets: EditorAsset[];
+  uploadAssetId: string;
+  originalWidth: number;
+  originalHeight: number;
+}) {
+  return assets.map((asset) =>
+    asset.id === uploadAssetId
+      ? {
+          ...asset,
+          width: originalWidth,
+          height: originalHeight,
+        }
+      : asset,
+  );
+}
+
+export function bindUploadLayerToPersistedAsset({
+  layers,
+  layerId,
+  persistedAsset,
+}: {
+  layers: CanvasLayer[];
+  layerId: string;
+  persistedAsset: PersistedUploadAsset;
+}) {
+  return layers.map((layer) =>
+    layer.id === layerId
+      ? {
+          ...layer,
+          sourceAssetId: persistedAsset.assetId,
+          objectKey: persistedAsset.objectKey ?? layer.objectKey,
+          assetObjectId: persistedAsset.assetObjectId ?? layer.assetObjectId,
+        }
+      : layer,
+  );
+}
+
 export function normalizeUploadScreenPoint({
   canvasPoint,
   canvasSize,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 2dc5fefba..61168d7cf 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -21,9 +21,17 @@ import type {
 import { isImageFile, readImageFileAsDataUrl } from './ImageCanvasFileModel';
 import {
   applyGenerationReferenceUpload,
+  applyMeasuredUploadAssetSize,
+  applyPersistedUploadAsset,
+  applyUploadAssetCreateFailure,
+  applyUploadAssetCreatePending,
+  applyUploadAssetReadFailure,
+  applyUploadAssetReadSuccess,
+  bindUploadLayerToPersistedAsset,
   createUploadCanvasLayer,
   createUploadedGenerationReference,
   createUploadingAssetPlaceholder,
+  expandUploadFolder,
   resizeUploadCanvasLayerToImage,
   resolveUploadFolderId,
 } from './ImageCanvasUploadModel';
@@ -232,43 +240,28 @@ export function useImageCanvasUploadWorkflow({
       });
       setAssets((currentAssets) => [...currentAssets, uploadedAsset]);
       setAssetFolders((currentFolders) =>
-        currentFolders.map((folder) =>
-          folder.id === uploadFolderId
-            ? {
-                ...folder,
-                collapsed: false,
-              }
-            : folder,
-        ),
+        expandUploadFolder({
+          folders: currentFolders,
+          folderId: uploadFolderId,
+        }),
       );
 
       let imageSrc = '';
       try {
         imageSrc = await readImageFileAsDataUrl(file);
         setAssets((currentAssets) =>
-          currentAssets.map((asset) =>
-            asset.id === uploadedAsset.id
-              ? {
-                  ...asset,
-                  src: imageSrc,
-                  uploadProgress: 42,
-                  uploadMessage: '读取图片',
-                }
-              : asset,
-          ),
+          applyUploadAssetReadSuccess({
+            assets: currentAssets,
+            uploadAssetId: uploadedAsset.id,
+            imageSrc,
+          }),
         );
       } catch {
         setAssets((currentAssets) =>
-          currentAssets.map((asset) =>
-            asset.id === uploadedAsset.id
-              ? {
-                  ...asset,
-                  uploadStatus: 'failed',
-                  uploadProgress: 100,
-                  uploadMessage: '读取失败',
-                }
-              : asset,
-          ),
+          applyUploadAssetReadFailure({
+            assets: currentAssets,
+            uploadAssetId: uploadedAsset.id,
+          }),
         );
         return;
       }
@@ -288,15 +281,10 @@ export function useImageCanvasUploadWorkflow({
       }
 
       setAssets((currentAssets) =>
-        currentAssets.map((asset) =>
-          asset.id === uploadedAsset.id
-            ? {
-                ...asset,
-                uploadProgress: 68,
-                uploadMessage: '上传中',
-              }
-            : asset,
-        ),
+        applyUploadAssetCreatePending({
+          assets: currentAssets,
+          uploadAssetId: uploadedAsset.id,
+        }),
       );
       createEditorAsset({
         folderId: uploadFolderId,
@@ -308,39 +296,19 @@ export function useImageCanvasUploadWorkflow({
       })
         .then((asset) => {
           setAssets((currentAssets) =>
-            currentAssets.map((currentAsset) =>
-              currentAsset.id === uploadedAsset.id
-                ? {
-                    ...currentAsset,
-                    id: asset.assetId,
-                    folderId: asset.folderId,
-                    label: asset.label,
-                    src: asset.imageSrc,
-                    width: asset.width,
-                    height: asset.height,
-                    objectKey: asset.objectKey ?? undefined,
-                    assetObjectId: asset.assetObjectId ?? undefined,
-                    persisted: true,
-                    uploadStatus: undefined,
-                    uploadProgress: undefined,
-                    uploadMessage: undefined,
-                  }
-                : currentAsset,
-            ),
+            applyPersistedUploadAsset({
+              assets: currentAssets,
+              uploadAssetId: uploadedAsset.id,
+              persistedAsset: asset,
+            }),
           );
           if (options.addToCanvas) {
             setLayers((currentLayers) =>
-              currentLayers.map((currentLayer) =>
-                currentLayer.id === nextLayer.id
-                  ? {
-                      ...currentLayer,
-                      sourceAssetId: asset.assetId,
-                      objectKey: asset.objectKey ?? currentLayer.objectKey,
-                      assetObjectId:
-                        asset.assetObjectId ?? currentLayer.assetObjectId,
-                    }
-                  : currentLayer,
-              ),
+              bindUploadLayerToPersistedAsset({
+                layers: currentLayers,
+                layerId: nextLayer.id,
+                persistedAsset: asset,
+              }),
             );
           }
         })
@@ -350,16 +318,11 @@ export function useImageCanvasUploadWorkflow({
             openEditorLoginModal();
           }
           setAssets((currentAssets) =>
-            currentAssets.map((asset) =>
-              asset.id === uploadedAsset.id
-                ? {
-                    ...asset,
-                    uploadStatus: 'failed',
-                    uploadProgress: 100,
-                    uploadMessage: isAuthError ? '请先登录' : '上传失败',
-                  }
-                : asset,
-            ),
+            applyUploadAssetCreateFailure({
+              assets: currentAssets,
+              uploadAssetId: uploadedAsset.id,
+              message: isAuthError ? '请先登录' : '上传失败',
+            }),
           );
         });
 
@@ -387,15 +350,12 @@ export function useImageCanvasUploadWorkflow({
             );
           }
           setAssets((currentAssets) =>
-            currentAssets.map((asset) =>
-              asset.id === uploadedAsset.id
-                ? {
-                    ...asset,
-                    width: originalWidth,
-                    height: originalHeight,
-                  }
-                : asset,
-            ),
+            applyMeasuredUploadAssetSize({
+              assets: currentAssets,
+              uploadAssetId: uploadedAsset.id,
+              originalWidth,
+              originalHeight,
+            }),
           );
         };
         uploadedImage.src = imageSrc;

From d1cd30069548869c5cfa5bcb953737569906af64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Wed, 17 Jun 2026 17:46:13 +0800
Subject: [PATCH 03/16] =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E4=B8=AD=E7=9A=84=E4=B8=8A=E6=B8=B8=E6=A0=87?=
 =?UTF-8?q?=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

图片信息弹窗标题固定为图片信息，不再拼接图片名称
图片信息弹窗移除 Provider 展示行
Task 展示收口为任务标识末尾数字，避免暴露 Provider 字符串
补充图片信息脱敏展示回归测试
更新画板角色形象生成文档中的图片信息展示口径
---
 ...��编辑器】画板角色形象生成入口设计-2026-06-15.md |  7 +++++++
 .../ImageCanvasMetadataModalView.test.tsx          | 14 +++++++++-----
 .../image-editor/ImageCanvasMetadataModalView.tsx  | 11 +++++++----
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index 41360ec04..b67d32183 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -57,6 +57,13 @@
 - 提交生成规范时，若存在参考图，前端必须把参考图作为 `referenceImageSrcs[0]` 提交到 `/api/editor/images/generations`，并在生图提示词开头自动追加“参考图生成规范”语义：要求模型参考图 1 的构图、风格、材质、色彩、形状语言和视觉层级生成规范图，但不要复制参考图中的文字、水印或无关背景。
 - 生成结果的信息快照必须记录该参考图，标题为 `参考图`，便于后续在图片信息面板回看生成输入。
 
+## 图片信息展示
+
+- 图片信息弹窗标题固定为 `图片信息`，不拼接图片 / 图层名称。
+- 图片信息弹窗不展示 Provider 行，也不在 Task 中暴露 Provider 字符串。
+- Task 只展示任务标识里的数字部分；若任务标识没有数字，则显示 `-`。
+- 图片 / 图层名称只用于画布内部选择、图层列表和素材管理，不进入图片信息弹窗。
+
 ## 可访问性与状态
 
 - 点选状态下画布显示状态提示 `请选择画布中的图片作为角色形象规范，按 Esc 退出`。
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
index ba2e0efa5..2263bdf0d 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
@@ -31,7 +31,7 @@ describe('ImageCanvasMetadataModalView', () => {
         layer={createLayer({
           model: 'gpt-image-2',
           provider: 'VectorEngine',
-          taskId: 'task-123',
+          taskId: 'gpt-image-2-task-123',
           objectKey: 'generated/object.png',
           generationInputs: {
             fields: [{ title: '生成提示词', value: '清爽游戏按钮' }],
@@ -48,8 +48,9 @@ describe('ImageCanvasMetadataModalView', () => {
       />,
     );
 
-    const dialog = screen.getByRole('dialog', { name: '生成主图图片信息' });
+    const dialog = screen.getByRole('dialog', { name: '图片信息' });
 
+    expect(within(dialog).queryByText('生成主图')).toBeNull();
     expect(within(dialog).getByText('生成图片')).toBeTruthy();
     expect(within(dialog).getByText('生成提示词')).toBeTruthy();
     expect(within(dialog).getByText('清爽游戏按钮')).toBeTruthy();
@@ -57,8 +58,10 @@ describe('ImageCanvasMetadataModalView', () => {
     expect(within(dialog).getByText('角色立绘')).toBeTruthy();
     expect(within(dialog).getByText('gpt-image-2')).toBeTruthy();
     expect(within(dialog).getByText('1024 x 768 px')).toBeTruthy();
-    expect(within(dialog).getByText('VectorEngine')).toBeTruthy();
-    expect(within(dialog).getByText('task-123')).toBeTruthy();
+    expect(within(dialog).queryByText('Provider')).toBeNull();
+    expect(within(dialog).queryByText(/VectorEngine/u)).toBeNull();
+    expect(within(dialog).queryByText(/task-/u)).toBeNull();
+    expect(within(dialog).getByText('123')).toBeTruthy();
     expect(within(dialog).getByText('generated/object.png')).toBeTruthy();
   });
 
@@ -80,8 +83,9 @@ describe('ImageCanvasMetadataModalView', () => {
       />,
     );
 
-    const dialog = screen.getByRole('dialog', { name: '上传素材图片信息' });
+    const dialog = screen.getByRole('dialog', { name: '图片信息' });
 
+    expect(within(dialog).queryByText('上传素材')).toBeNull();
     expect(within(dialog).getByText('上传图片')).toBeTruthy();
     expect(within(dialog).getAllByText('-').length).toBeGreaterThanOrEqual(3);
     expect(within(dialog).getByText('asset-object-1')).toBeTruthy();
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index 6751cd6a5..628ea40b3 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -7,6 +7,11 @@ export type ImageCanvasMetadataModalViewProps = {
   onClose: () => void;
 };
 
+function formatTaskIdForDisplay(taskId?: string | null) {
+  const numericParts = taskId?.match(/\d+/gu);
+  return numericParts?.length ? numericParts[numericParts.length - 1] : '-';
+}
+
 export function ImageCanvasMetadataModalView({
   layer,
   onClose,
@@ -14,7 +19,7 @@ export function ImageCanvasMetadataModalView({
   return (
     <UnifiedModal
       open={Boolean(layer)}
-      title={layer ? `${layer.title}图片信息` : '图片信息'}
+      title="图片信息"
       size="sm"
       closeLabel="关闭图片信息"
       onClose={onClose}
@@ -70,10 +75,8 @@ export function ImageCanvasMetadataModalView({
           <dd>
             {layer.originalWidth} x {layer.originalHeight} px
           </dd>
-          <dt>Provider</dt>
-          <dd>{layer.provider ?? '-'}</dd>
           <dt>Task</dt>
-          <dd>{layer.taskId ?? '-'}</dd>
+          <dd>{formatTaskIdForDisplay(layer.taskId)}</dd>
           <dt>Object</dt>
           <dd>{layer.objectKey ?? layer.assetObjectId ?? '-'}</dd>
         </dl>

From b2fd5574dbc07e11253e1c127c30427e874b216b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Wed, 17 Jun 2026 20:47:27 +0800
Subject: [PATCH 04/16] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E7=94=BB=E6=9D=BF?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E8=A7=86=E9=A2=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增画板底部生成视频入口、Lovart 风格面板、视频图层渲染与元数据展示。

接入 /api/editor/videos/generations 契约与后端 Ark/VectorEngine 视频任务链路。

统一编辑器生成类泥点配置，并补充 UI 设计图、参考图与生成面板结构测试。

更新编辑器技术方案、生成类面板方案和 Hermes 共享决策/踩坑记录。
---
 .hermes/shared-memory/decision-log.md         |  20 +-
 .hermes/shared-memory/pitfalls.md             |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   8 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md | 101 +++
 ...辑器】画板UI设计图生成入口设计-2026-06-17.md |  53 ++
 ...辑器】画板图标素材生成入口设计-2026-06-15.md |  16 +-
 ...辑器】画板角色形象生成入口设计-2026-06-15.md |  34 +-
 .../src/character_animation_assets.rs         | 415 ++++++++++-
 .../src/editor_generation_config.rs           |  72 ++
 .../crates/api-server/src/editor_project.rs   | 327 +++++++--
 server-rs/crates/api-server/src/main.rs       |   1 +
 .../api-server/src/modules/play_flow.rs       |   9 +-
 .../api-server/src/openai_image_generation.rs |  92 ++-
 server-rs/crates/platform-image/src/lib.rs    |   7 +-
 .../src/vector_engine/client.rs               | 143 +++-
 .../platform-image/src/vector_engine/mod.rs   |   5 +-
 .../src/vector_engine/payload.rs              |  39 +
 .../src/vector_engine/request.rs              |  81 ++-
 .../platform-image/src/vector_engine/tests.rs |  60 +-
 .../platform-image/tests/vector_engine.rs     | 127 +++-
 .../crates/shared-contracts/src/assets.rs     |  79 +++
 .../image-editor/ImageCanvasEditorModel.ts    |   6 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |  35 +-
 ...ImageCanvasGenerationComposerView.test.tsx | 296 ++++++++
 .../ImageCanvasGenerationLayerModel.ts        |  61 ++
 .../ImageCanvasGenerationModel.ts             | 118 +++-
 ...mageCanvasGenerationPlacementModel.test.ts | 113 +++
 .../ImageCanvasGenerationPlacementModel.ts    | 257 +++++++
 .../ImageCanvasMetadataModalView.test.tsx     |  36 +
 .../ImageCanvasMetadataModalView.tsx          |   6 +-
 .../useImageCanvasGenerationWorkflow.test.tsx | 101 ++-
 .../useImageCanvasKeyboardShortcuts.test.tsx  |   9 +
 .../useImageCanvasKeyboardShortcuts.ts        |  22 +-
 .../useImageCanvasStageInteractions.test.tsx  |   8 +
 .../useImageCanvasStageInteractions.ts        |  37 +
 .../useImageCanvasUploadWorkflow.test.tsx     |  58 +-
 src/index.css                                 | 665 +++++++++++++++---
 .../image-editor/editorProjectClient.test.ts  |  53 ++
 .../image-editor/editorProjectClient.ts       |  50 +-
 39 files changed, 3390 insertions(+), 238 deletions(-)
 create mode 100644 docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
 create mode 100644 docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
 create mode 100644 server-rs/crates/api-server/src/editor_generation_config.rs
 create mode 100644 src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
 create mode 100644 src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
 create mode 100644 src/components/image-editor/ImageCanvasGenerationPlacementModel.ts

diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md
index 5ccebe0eb..a34f90aff 100644
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -2263,13 +2263,13 @@
 - 验证方式：新增或增删素材描述项时，面板宽度应随项数变化；图标素材规范入口应呈现参考卡视觉而非纯文本按钮；移动端下仍应固定在底部锚定，不出现内部滚动条。
 - 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
-## 2026-06-16 图片画布图标素材采用 nanobanana2 spritesheet + 后端连通域拆分
+## 2026-06-16 图片画布图标素材与角色生成支持双图片模型
 
-- 背景：图片画布需要一次生成多枚 UI 图标素材，并保证生成后能按用户输入顺序命名、拆成独立透明素材铺回画布。
-- 决策：底部 `生成图标素材` 入口创建一叠空白图标占位和独立面板；图标规范参考图只允许绑定 `assetKind="icon-spec"`。前端提交 `/api/editor/icon-spritesheets/generations`，后端固定使用 VectorEngine `gemini-3.1-flash-image-preview`，`<=25` 个描述用 `512x512`，`>25` 个描述用 `1024x1024`，先生成绿幕 1:1 spritesheet，再由 `platform-image` 绿幕去背并按 8 邻域连通域从上到下、从左到右拆分。成品图标图层写入 `assetKind="icon"`。
-- 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、图片画布技术方案。
-- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts`、`cargo test --manifest-path server-rs/Cargo.toml -p platform-image generated_asset_sheets::sheet::tests -- --nocapture`、`cargo test --manifest-path server-rs/Cargo.toml -p api-server editor_project -- --nocapture`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
-- 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+- 背景：图片画布需要一次生成多枚 UI 图标素材，并保证生成后能按用户输入顺序命名、拆成独立透明素材铺回画布；角色形象生成也需要和图标素材共用同一套图片模型选择、比例和大小口径。
+- 决策：底部 `生成图标素材` 入口创建一叠空白图标占位和独立面板；图标规范参考图只允许绑定 `assetKind="icon-spec"`。`生成角色形象` 与 `生成图标素材` 均支持 VectorEngine `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`，用户在两类面板中切换过模型后下一次打开继续沿用上次模型。前端提交 `model`、`aspectRatio`、`imageSize`；后端不再按图标数量分 `512x512/1024x1024`，而是按模型归一尺寸：`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，把参考图写成 `inline_data`，并在 `generationConfig.imageConfig` 写入比例和大小，`0.5K` 传 `"512"`；`gpt-image-2` 无参考图走 generations，有参考图走 edits，按文档支持的 `size` 字符串映射。图标素材仍先生成绿幕 spritesheet，再由 `platform-image` 绿幕去背并按 8 邻域连通域从上到下、从左到右拆分。成品图标图层写入 `assetKind="icon"`，角色图层写入 `assetKind="character"`。
+- 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/platform-image/src/vector_engine/*`、`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、图片画布技术方案。
+- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p api-server editor_generation_dimensions_follow_model_options --manifest-path server-rs/Cargo.toml`、`cargo test -p platform-image nanobanana_generate_content --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
 ## 2026-06-16 图片画布生成面板与浮层层级收口
 
@@ -2294,3 +2294,11 @@
 - 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、图片画布 layout hydrate、新建 / 上传 / 生成 / 快速编辑 / 图标素材生成结果铺回画布逻辑，以及图片画布技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "hydrates canvas images from Resolution instead of saved Size|opens generated image info from the corner button and creates a real right-side edit result|shows image resolution on hover"`。
 - 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-17 图片画布底部生成视频接入 Lovart 面板
+
+- 背景：编辑器画板底部工具栏需要新增 `生成视频`，并和现有 Lovart 式生成类面板、泥点展示、占位图和画布结果图层保持一致。
+- 决策：`生成视频` 点击后创建独立视频生成占位和极简面板，提交 `POST /api/editor/videos/generations`；首期支持 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`、`veo3.1`、`veo3.1-fast`，固定文字转视频、`16:9`、标准模式和静音。后端复用 Ark / VectorEngine content generation task 轮询链路，下载视频后持久化到 OSS。生成结果在画布中写入 `mediaType="video"` 与 `assetKind="video"`，图片信息弹窗按视频显示为 `视频信息` / `视频类型`。生成类泥点价格统一走 `editor_generation_config`，视频和角色动画均为 480p 每秒 10 泥点、720p 每秒 20 泥点。
+- 影响范围：图片画布生成工作流、前端 editorProjectClient、`shared-contracts`、`api-server` 视频生成 BFF、编辑器技术方案和生成类面板方案。
+- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "opens the bottom generate video panel"`、`npm run test -- src/components/image-editor/ImageCanvasMetadataModalView.test.tsx`、`npm run test -- src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p shared-contracts editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
diff --git a/.hermes/shared-memory/pitfalls.md b/.hermes/shared-memory/pitfalls.md
index 0be1a9739..0ac3c3eaa 100644
--- a/.hermes/shared-memory/pitfalls.md
+++ b/.hermes/shared-memory/pitfalls.md
@@ -55,6 +55,14 @@
 - 验证：测试断言菜单不包含在底部工具栏 / 参考图行里，并且生成面板打开时底部 `AI画布工具栏` 仍存在。
 - 关联：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/ImageCanvasEditorView.test.tsx`。
 
+## 图片编辑器规范图片面板不要脱离统一生成 shell
+
+- 现象：生成 UI 设计图或新建图标素材规范时，面板参考图、输入区和底部生成按钮相对生成图片 / 生成角色 / 生成视频错位；图标素材规范甚至可能缺少首行参考图入口。
+- 原因：规范、UI 设计图等面板虽然都属于生成类入口，但 JSX 和 CSS 曾各自维护 `spec-footer`、局部 field wrapper 或缺省参考区，导致后续改造只覆盖普通图片 / 角色 / 视频，规范图片类面板结构漂移。
+- 处理：生成规范下的角色形象规范、UI 素材规范、图标素材规范、自定义规范，以及生成 UI 设计图，都必须复用 `image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image` 外层 shell；首行统一 `image-canvas-editor__generation-ref`，底部统一 `image-canvas-editor__generation-composer-footer` + `image-canvas-editor__generation-submit`。多字段内容只在中央字段区保持紧凑，不单独发明 footer 或省略参考区。
+- 验证：`npm test -- src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx -t "生成UI设计图|生成规范|visible titles|图标素材规范|character spec"`。
+- 关联：`src/components/image-editor/ImageCanvasGenerationComposerView.tsx`、`src/index.css`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 图片编辑器生成占位图在生成中也要使用最新拖拽位置
 
 - 现象：用户在图片编辑器里提交生成后继续拖动画布占位图，预览框可以移动，但生成完成后的真实图片仍落回提交瞬间的旧位置。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 5c882f3a1..67c0ecec9 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -12,13 +12,13 @@
 - 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
 - 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
 - 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。
-- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
+- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；图片右上角素材类型标签、查看信息按钮和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；查看信息按钮使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
 - 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成、局部修改 / 蒙版、文字、形状 / 标注、导出。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图落在最新占位框位置，输入框继续跟随新生成图；点击所有图片生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，支持 Seedance 2.0 / Seedance 2.0 Fast / Kling 3.0 / Kling 3.0 Omni / Veo 3.1 / Veo 3.1 Fast，首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 
 ## 交互规则
@@ -62,8 +62,10 @@
 - `POST /api/editor/assets`：批量或单个创建账号级素材，支持按钮上传和拖拽上传后的 data URL / 后续 OSS 元数据。
 - `PATCH /api/editor/assets/{assetId}`：重命名素材或移动素材到文件夹。
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
-- `POST /api/editor/images/generations`：按提示词调用 VectorEngine `gpt-image-2` 生成图片；携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
+- `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
+- `POST /api/editor/icon-spritesheets/generations`：按图标素材规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`，后端把 UI 尺寸归一为文档支持的 `1024x1024`、`1024x1536`、`1536x1024`、`2048x2048`、`2048x1152` 等 `size` 字符串。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
+- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。请求模型支持 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`、`veo3.1`、`veo3.1-fast`；后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
 所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
 
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
new file mode 100644
index 000000000..d617fa79b
--- /dev/null
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -0,0 +1,101 @@
+# 生成类面板 Lovart 统一改造方案
+
+日期：`2026-06-17`
+
+## 范围
+
+图片画布编辑器内以下生成类面板统一对齐 Lovart 式极简创作工具风格：
+
+- `生成图片`
+- `生成规范`
+- `生成角色形象`
+- `生成图标素材`
+- `生成UI设计图`
+- `生成视频`
+- `角色动画生成面板`
+
+## 统一布局
+
+1. 参考图区域永远位于面板第一行。
+2. 参考图使用统一参考图卡片：
+   - 普通参考图：灰蓝色图片图标。
+   - 规范参考图：紫色剪贴板图标。
+   - 图标素材规范：绿色图标图标。
+   - UI 图标规范：琥珀色图标图标。
+   - 视频参考图 / 角色视频源图：深色视频或角色图标。
+3. 参考图卡片尽量少文字；必要文字写在图标块内或短标签内，不写规则说明。
+4. 普通参考图支持连续追加：已有图缩略图后始终保留一个 `+` 入口。点击入口只弹出“从画布中选择 / 上传图片”来源选项，不再直接打开系统文件选择器；生成图片、生成视频、角色常规参考图等同类参考图入口都遵循同一交互。
+5. 单文本输入面板不显示文本框标题，用问题式 placeholder：
+   - 生成图片：`今天想生成什么画面？`
+   - 生成角色：`你希望角色如何设计？`
+   - 生成 UI：`你希望这个 UI 长什么样？`
+   - 生成视频：`你希望生成什么视频？`
+   - 角色动画：`你希望角色做什么动作？`
+6. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范、图标素材多描述。
+7. 生成规范下的角色形象规范、UI素材规范、图标素材规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
+
+## 参数交互
+
+画面比例、大小尺寸、模型、分辨率、时长等生成参数统一为 Lovart 式底部胶囊按钮：
+
+```text
+左下：[比例 · 尺寸 ˄]          右下：[模型 ˄] [生成 · 图标 12]
+```
+
+- 面板内不显示 `画面比例`、`大小尺寸`、`模型` 等字段标题，只显示当前选择值。
+- 图片类面板把画面比例和大小尺寸合并成一个左下角选项框；视频 / 角色动画把比例、时长、清晰度合并成一个左下角选项框。
+- 模型选项框和生成按钮位于右下角。
+- 点击后在父级生成面板内向上弹出子面板；父级面板隐藏或销毁时，子面板同步销毁。
+- 子面板展示时，点击父级面板中除当前子面板和选项触发器以外的任意区域即可收起，不额外显示右上角关闭按钮。
+- 弹出面板内可分组展示字段，点击某个选项只更新当前字段和选中样式，不关闭弹出面板，方便连续修改。
+- 模型子面板每行固定一个模型，不用方框包裹模型名；模型名不换行，前置对应模型类型图标，选中项在模型名后用对号标记。
+- 比例选项卡片内展示对应比例的线框。
+- 父级面板、底部选项框、弹出子面板字号保持一致。
+- 底部组合值使用 `·` 分隔，例如 `16:9 · 4秒 · 480p`。
+- 底部参数热区与生成按钮等高，默认不显示阴影；悬停显示轻量阴影；箭头默认向下，展开后旋转向上。
+- 生成图片和生成视频文本输入框紧贴参考图下方，取消旧网格预留导致的空白高度。
+- 不再在底部常驻展开全部可选项。
+
+## 泥点显示
+
+- 本次消耗泥点必须显示在生成按钮内部。
+- `泥点` 文本不在 UI 中显示，改用图标 + 数值，例如 `生成  ✦ 12`。
+- 泥点配置统一收口到 `api-server` 的编辑器生成配置模块；前端只保留与后端配置同名的展示兜底，后续可接接口动态下发。
+
+## 第一版计费配置
+
+```text
+生成图片：12 泥点
+生成规范：5 泥点
+生成角色形象：12 泥点
+生成图标素材：12 泥点
+生成UI设计图：12 泥点
+生成视频：480p 每秒 10 泥点，720p 每秒 20 泥点
+角色动画：480p 每秒 10 泥点，720p 每秒 20 泥点
+```
+
+## 生成视频模型与接口
+
+- 底部 `生成视频` 面板提交到 `POST /api/editor/videos/generations`。
+- 首期只开放文字生成视频，固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布。
+- 支持模型：
+  - `seedance2.0`
+  - `seedance2.0-fast`
+  - `kling3.0`
+  - `kling3.0-omni`
+- 不展示 Veo 模型入口。
+  - `veo3.1`
+  - `veo3.1-fast`
+- 后端复用现有 Ark / VectorEngine content generation task 轮询链路，并把生成视频持久化到 OSS；缺少 `ARK_CHARACTER_VIDEO_BASE_URL` 或 `ARK_CHARACTER_VIDEO_API_KEY` 时 fail-closed 返回配置错误。
+
+## 验收
+
+- 所有生成类面板首行都是参考图区域。
+- 比例 / 尺寸 / 模型不再平铺全部选项；比例与尺寸合并为左下角当前值按钮，模型与生成按钮位于右下角。
+- 单文本输入面板不显示字段标题，placeholder 是问题式文案。
+- 多文本输入面板字段标题和边界仍清晰。
+- 生成按钮内能看到图标化泥点消耗数值。
+- 弹出选项面板点击选项后保持打开，可连续修改多个字段。
+- 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
+- 后端存在独立编辑器生成计费配置文件，角色动画价格校验使用该配置。
+- 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
diff --git a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
new file mode 100644
index 000000000..5244dcfdf
--- /dev/null
+++ b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
@@ -0,0 +1,53 @@
+# 【编辑器】画板UI设计图生成入口设计
+
+日期：2026-06-17
+
+## 入口与画布状态
+
+- 底部 AI 画布工具栏新增 `生成UI设计图`。
+- 点击后立即在画布中新建 `UI设计图生成占位图`，不复用普通新建图片的空白样式。
+- 占位图默认 16:9 展示，生成成功后替换为 `assetKind: "ui-design"` 的画布图层。
+
+## 生成面板
+
+- 占位图下方打开独立生成面板，标题为 `生成UI设计图`。
+- 面板复用普通 `生成图片` / `生成角色形象` / `生成视频` 的生成类 shell：首行参考图区域、中央单文本输入、底部参数与生成按钮区。
+- 面板第一个模块为 `图标素材规范`，并放在首行参考图区域。
+- 点击图标素材规范卡片后，在卡片旁弹出来源菜单：
+  - `从画布中选择`
+  - `新建图标素材规范`
+  - `上传图片`
+- `从画布中选择` 只接受 `assetKind: "icon-spec"` 的图层；普通图片、其他类别图层和不携带标签的图片不绑定。
+- `新建图标素材规范` 复用现有图标素材规范生成表单。
+- `上传图片` 仅绑定到当前 UI 设计面板的图标素材规范参考，不自动添加为画布图层。
+
+## 生成参数
+
+- 支持自定义画面比例和大小尺寸。
+- 模型固定为 `gpt-image-2`，面板不提供切换到其他模型的能力。
+- 默认画面比例为 `16:9`，默认大小为 `1K`。
+
+## 提示词契约
+
+后端收到 `kind: "ui-design"` 时固定拼接：
+
+```text
+生成玩法UI原型图
+【用户输入】<用户输入>
+```
+
+如果用户设置了图标素材规范参考图，则追加：
+
+```text
+参考图1为图标素材规范，请在UI图标、按钮符号、描边、材质、圆角、阴影和状态层级上严格遵循参考图1的素材规范。
+```
+
+生成请求固定使用 `gpt-image-2`。有参考图时走图片编辑请求；无参考图时走图片生成请求。
+
+## 验收点
+
+- 点击 `生成UI设计图` 后出现 UI 设计占位图和独立生成面板。
+- 面板第一模块为图标素材规范，来源菜单包含三个动作。
+- 从画布选择时只能绑定图标素材规范图片。
+- 请求参数包含 `kind: "ui-design"`、`model: "gpt-image-2"`、比例、大小与可选参考图。
+- 生成图层信息面板展示 `用户输入` 与 `图标素材规范`。
diff --git a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
index b49d87aed..2ecd41871 100644
--- a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
@@ -39,11 +39,13 @@
 - 请求字段：
   - `referenceImageSrc`：图标素材规范 Data URL。
   - `iconDescriptions`：过滤空文本后的图标描述数组，`1..100`。
-  - `model`：固定 `gemini-3.1-flash-image-preview`。
-- 后端根据图标数量选择尺寸：
-  - `<=25` 个：`512x512`，即 0.5K 1:1。
-  - `>25` 个：`1024x1024`，即 1K 1:1。
-- 后端使用 VectorEngine 图片编辑接口，把 `referenceImageSrc` 作为参考图 1，模型固定传 `gemini-3.1-flash-image-preview`。
+  - `model`：支持 `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`。
+  - `aspectRatio`：按 `x:y` 展示，选项跟随模型。
+  - `imageSize`：按 `0.5K / 1K / 2K` 展示，选项跟随模型。
+- 模型与尺寸选项：
+  - `nanobanana2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `0.5K / 1K / 2K`。后端走 `/v1beta/models/{model}:generateContent`，把图标素材规范图作为 `inline_data`，并把 `aspectRatio` / `imageSize` 写入 `generationConfig.imageConfig`；`0.5K` 按 VectorEngine 文档传 `"512"`。
+  - `gpt-image-2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `1K / 2K`。后端走 `/v1/images/edits`，把图标素材规范图作为 multipart `image`，按 `size` 映射：`1K 1:1 -> 1024x1024`、`1K 2:3/9:16 -> 1024x1536`、`1K 3:2/16:9 -> 1536x1024`、`2K 1:1 -> 2048x2048`、`2K 3:2/16:9 -> 2048x1152`；文档未列出 `2K` 竖版，`2K 2:3/9:16` 后端回落到 `1024x1536`。
+- 用户在角色或图标素材面板中切换过模型后，下一次打开这两类面板继续使用上次模型。
 - Prompt 固定为：
 
 ```text
@@ -72,6 +74,6 @@
 - 点击 `生成图标素材` 后出现一叠空白图标占位和图标素材面板。
 - `图标素材规范 -> 从画布中选择` 只能选择图标素材规范图，点击普通图片或角色规范图不会绑定。
 - 默认 6 个素材描述会进入 prompt；新增描述最多到 100 个。
-- `<=25` 个描述提交时后端请求尺寸为 `512x512`；`>25` 个描述提交时后端请求尺寸为 `1024x1024`。
-- VectorEngine 请求体的 `model` 为 `gemini-3.1-flash-image-preview`。
+- 默认打开图标素材面板时选中 `nanobanana2 / 1:1 / 1K`；模型切换后，角色和图标素材面板之间沿用上次选择的模型。
+- 图标素材生成请求必须带 `model`、`aspectRatio` 和 `imageSize`；`nanobanana2` 请求体必须包含 `generationConfig.imageConfig.aspectRatio/imageSize`，`gpt-image-2` 请求必须包含文档映射后的 `size`。
 - 生成成功后画布出现按描述命名的多个透明图标素材图层，图层之间不重叠。
diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index b67d32183..9ac63ce6c 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -32,6 +32,16 @@
 4. 左下角展示画面比例和大小选择按钮。
 5. 右下角展示模型选择和生成按钮。
 
+## 普通生成面板视觉口径
+
+普通 `生成图片`、`生成角色形象`、`生成UI设计图` 等锚定在图片下方的生成面板统一采用 Lovart 式极简创作工具风格：
+
+- PC 端优先保持面板锚定在占位图或目标图片下方，宽度允许比旧版略宽，避免比例、尺寸、模型和生成按钮挤成一行难以阅读。
+- 面板只展示创作必需输入：参考图、提示词、比例、大小、模型和生成按钮；不在 UI 内铺说明性规则文案。
+- 视觉以白色半透明面板、轻边框、低阴影、低饱和选项按钮和清晰黑色主按钮为主，减少游戏式厚重装饰，贴近 Lovart 的极简画布工具感。
+- 普通 `生成图片` 面板的比例、大小和模型必须使用真实选项按钮，不再使用占位式参数按钮或弹出“建设中”提示。
+- 移动端仍可固定在底部工具栏上方并允许内部滚动，保证不遮挡底部 AI 工具栏和画布操作。
+
 ## 生成与参考图契约
 
 - 前端提交角色生成时，使用 `POST /api/editor/images/generations`。
@@ -39,8 +49,14 @@
 - 角色形象规范与常规参考图作为 `referenceImageSrcs` 传入，顺序固定为：
   1. 角色形象规范图。
   2. 常规参考图列表。
-- 当前请求尺寸沿用编辑器普通生成默认值；比例和大小按钮先复用现有占位交互。
-- 后端如果收到参考图，则走带多参考图的图片编辑/参考图生成链路；没有参考图时走纯文本生成链路。
+- 请求同时提交 `model`、`aspectRatio` 和 `imageSize`：
+  - `model` 支持 `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`。
+  - 用户在角色或图标素材面板中切换过模型后，下一次打开这两类面板继续使用上次模型。
+  - 比例按 `x:y` 展示；大小按 `0.5K / 1K / 2K` 展示。
+- 尺寸选项来源以 VectorEngine 接入文档为准：
+  - `nanobanana2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `0.5K / 1K / 2K`。后端走 `/v1beta/models/{model}:generateContent`，把比例写入 `generationConfig.imageConfig.aspectRatio`，把大小写入 `generationConfig.imageConfig.imageSize`；其中 `0.5K` 按文档传 `"512"`。
+  - `gpt-image-2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `1K / 2K`。后端走 `/v1/images/generations` 或 `/v1/images/edits`，按文档尺寸映射：`1K 1:1 -> 1024x1024`、`1K 2:3/9:16 -> 1024x1536`、`1K 3:2/16:9 -> 1536x1024`、`2K 1:1 -> 2048x2048`、`2K 3:2/16:9 -> 2048x1152`；文档未列出 `2K` 竖版，`2K 2:3/9:16` 后端回落到 `1024x1536`。
+- 后端如果收到参考图，`nanobanana2` 把参考图作为 `inline_data` 传入原生 `generateContent`；`gpt-image-2` 走带多参考图的图片编辑链路。没有参考图时按所选模型走纯文本生成链路。
 - `kind = "character"` 时，后端不直接把前端文本当完整生图提示词，而是把文本作为 `角色设定` 填入固定提示词骨架：
 
 ```text
@@ -52,11 +68,18 @@
 
 ## 生成规范参考图
 
-- `生成规范 -> 角色形象规范`、`UI素材规范`、`自定义规范` 的设定面板支持上传 1 张参考图；`图标素材规范` 继续使用后续图标素材生成面板里的专用规范图链路，不在这里重复新增入口。
+- `生成规范 -> 角色形象规范`、`UI素材规范`、`图标素材规范`、`自定义规范` 的设定面板都支持上传 1 张参考图，并统一放在面板首行参考图区域。
 - 参考图入口只展示字段标题、缩略图或上传图标、文件名，不把参考规则说明铺在 UI 上。
 - 提交生成规范时，若存在参考图，前端必须把参考图作为 `referenceImageSrcs[0]` 提交到 `/api/editor/images/generations`，并在生图提示词开头自动追加“参考图生成规范”语义：要求模型参考图 1 的构图、风格、材质、色彩、形状语言和视觉层级生成规范图，但不要复制参考图中的文字、水印或无关背景。
 - 生成结果的信息快照必须记录该参考图，标题为 `参考图`，便于后续在图片信息面板回看生成输入。
 
+## 新建生成图落点避让
+
+- 普通生成、生成规范、生成角色形象和生成图标素材在创建画布占位图前，必须先检测占位图矩形是否与画布中已有可见图片图层或已有生成占位图重叠。
+- 若当前屏幕中心对应的画板位置可用，则占位图仍创建在该中心；若重叠，则以当前屏幕中心对应画板位置为原点，按距离由近到远查找不重叠候选位置。
+- 候选占位图与相邻图片或占位图之间保留 `32px` 画板间距；隐藏图层不阻挡新建落点。
+- 选中落点后保持当前缩放比例不变，将视口中心移动到新占位图中心，确保用户创建后立即看到新图和生成面板。
+
 ## 图片信息展示
 
 - 图片信息弹窗标题固定为 `图片信息`，不拼接图片 / 图层名称。
@@ -78,13 +101,16 @@
 - `角色形象规范` 与 `上传常规参考图` 入口是带预览视觉块的参考图卡片，不是无样式文字。
 - `从画布中选择` 后点击已有画布图片可绑定为角色形象规范，`Esc` 可退出点选状态。
 - 上传常规参考图后缩略图右下角显示序号。
-- 输入角色设定并生成时，请求包含 `kind: "character"`、角色设定 prompt 和参考图数组。
+- 输入角色设定并生成时，请求包含 `kind: "character"`、角色设定 prompt、参考图数组、`model`、`aspectRatio` 和 `imageSize`。
+- 默认打开角色生成面板时选中 `nanobanana2 / 1:1 / 1K`；切换到 `gpt-image-2` 后再次打开角色或图标素材面板应沿用该模型。
 - 生成成功后在占位图位置创建 `assetKind: "character"` 图层，右上角显示 `角色` 标签，布局保存包含该字段。
 
 ## 当前落地记录
 
 - 前端画板已接入 `生成角色形象` 底部入口、角色占位图、角色面板、画布点选规范图、上传规范图、上传常规参考图和序号角标。
+- 画布生成类入口已统一接入新建占位图落点避让：优先使用当前屏幕中心对应画板位置，重叠时自动选择最近的不重叠位置，并将视口中心移动到新占位图。
 - 角色生成提交统一走 `/api/editor/images/generations`，按 `角色形象规范 -> 常规参考图` 顺序传 `referenceImageSrcs`，并写入 `assetKind: "character"`。
+- 角色和图标素材生成已接入 `nanobanana2` / `gpt-image-2` 模型切换、上次模型记忆，以及按模型归一的比例 / 大小尺寸；`nanobanana2` 使用原生 `generateContent` 的 `imageConfig.aspectRatio/imageSize`，`gpt-image-2` 使用文档列出的 `size` 字符串。
 - 角色生成后端已按固定 prompt 骨架补入 `角色设定`，并在生成成功后自动执行绿幕去背、写入 `generated-character-drafts/editor/character-images/<taskId>/image.png` 路径下的 OSS 私有对象，返回的 `objectKey` / `assetObjectId` 会随画板资源记录保存。
 - `Esc` 只退出角色规范画布点选状态，不关闭角色生成面板。
 - 已补充回归测试覆盖角色形象生成、点选退出、角色动画入口隔离和快速编辑入口。
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 8740d3795..26ee14cc0 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -42,7 +42,8 @@ use shared_contracts::assets::{
     CharacterVisualDraftPayload, CharacterWorkflowCacheGetResponse, CharacterWorkflowCachePayload,
     CharacterWorkflowCacheSaveRequest, CharacterWorkflowCacheSaveResponse,
     EditorCharacterAnimationFramePayload, EditorCharacterAnimationGenerateRequest,
-    EditorCharacterAnimationGenerateResponse,
+    EditorCharacterAnimationGenerateResponse, EditorVideoGenerateRequest,
+    EditorVideoGenerateResponse,
 };
 use spacetime_client::SpacetimeClientError;
 
@@ -87,6 +88,15 @@ const ARK_VIDEO_TASK_POLL_INTERVAL_MS: u64 = 5_000;
 const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0";
 const EDITOR_CHARACTER_ANIMATION_ASSET_KIND: &str = "editor_character_animation";
 const EDITOR_CHARACTER_ANIMATION_PROMPT_PREFIX: &str = "生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为纯绿色绿幕，只作为抠像底色，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。\n动作描述：";
+const EDITOR_VIDEO_ASSET_KIND: &str = "editor_video";
+const EDITOR_VIDEO_ENTITY_KIND: &str = "editor_canvas";
+const EDITOR_VIDEO_SLOT: &str = "video_preview";
+const EDITOR_VIDEO_MODEL_SEEDANCE_2: &str = "seedance2.0";
+const EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST: &str = "seedance2.0-fast";
+const EDITOR_VIDEO_MODEL_KLING_3: &str = "kling3.0";
+const EDITOR_VIDEO_MODEL_KLING_3_OMNI: &str = "kling3.0-omni";
+const EDITOR_VIDEO_MODEL_VEO_3_1: &str = "veo3.1";
+const EDITOR_VIDEO_MODEL_VEO_3_1_FAST: &str = "veo3.1-fast";
 
 const BUILT_IN_MOTION_TEMPLATES: [MotionTemplate; 4] = [
     MotionTemplate {
@@ -575,6 +585,63 @@ pub async fn generate_editor_character_animation(
     ))
 }
 
+pub async fn generate_editor_video(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    payload: Result<Json<EditorVideoGenerateRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = payload.map_err(|error| {
+        editor_video_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-video",
+                "message": error.body_text(),
+            })),
+        )
+    })?;
+
+    let normalized =
+        normalize_editor_video_request(payload).map_err(|error| {
+            editor_video_error_response(&request_context, error)
+        })?;
+    let settings = require_editor_video_settings(&state, normalized.model.as_str()).map_err(
+        |error| editor_video_error_response(&request_context, error),
+    )?;
+    let http_client = build_upstream_http_client(settings.ark.request_timeout_ms)
+        .map_err(|error| editor_video_error_response(&request_context, error))?;
+    let task_id = generate_ai_task_id(current_utc_micros());
+
+    let generated = request_editor_video_preview(
+        &state,
+        &http_client,
+        &settings,
+        "editor-video",
+        task_id.as_str(),
+        &normalized,
+    )
+    .await
+    .map_err(|error| editor_video_error_response(&request_context, error))?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorVideoGenerateResponse {
+            ok: true,
+            video_src: generated.preview_video_path,
+            width: normalized.width,
+            height: normalized.height,
+            source_type: "generated".to_string(),
+            prompt: normalized.prompt,
+            actual_prompt: Some(generated.submitted_prompt),
+            model: normalized.model,
+            provider: "VectorEngine".to_string(),
+            task_id,
+            duration_seconds: normalized.duration_seconds,
+            resolution: normalized.resolution,
+            price_mud_points: normalized.price_mud_points,
+        },
+    ))
+}
+
 pub async fn get_character_animation_job(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1371,6 +1438,114 @@ async fn request_editor_character_animation_preview(
     })
 }
 
+async fn request_editor_video_preview(
+    state: &AppState,
+    http_client: &reqwest::Client,
+    settings: &EditorVideoSettings,
+    owner_user_id: &str,
+    task_id: &str,
+    request: &NormalizedEditorVideoRequest,
+) -> Result<GeneratedAnimationPreview, AppError> {
+    let upstream_task_id =
+        create_editor_text_to_video_task(http_client, settings, request).await?;
+    let video_url =
+        wait_for_ark_content_generation_task(http_client, &settings.ark, upstream_task_id.as_str())
+            .await?;
+    let preview_payload =
+        download_generated_video(http_client, video_url.as_str(), "下载画板生成视频失败。").await?;
+    let preview_video_path =
+        put_generated_editor_video(state, owner_user_id, task_id, request, preview_payload).await?;
+
+    Ok(GeneratedAnimationPreview {
+        preview_video_path,
+        upstream_task_id,
+        submitted_prompt: request.prompt.clone(),
+        moderation_fallback_applied: false,
+    })
+}
+
+async fn create_editor_text_to_video_task(
+    http_client: &reqwest::Client,
+    settings: &EditorVideoSettings,
+    request: &NormalizedEditorVideoRequest,
+) -> Result<String, AppError> {
+    let response = http_client
+        .post(format!("{}/contents/generations/tasks", settings.ark.base_url))
+        .header(
+            reqwest::header::AUTHORIZATION,
+            format!("Bearer {}", settings.ark.api_key),
+        )
+        .header(reqwest::header::CONTENT_TYPE, "application/json")
+        .json(&json!({
+            "model": request.provider_model,
+            "content": [
+                {
+                    "type": "text",
+                    "text": request.prompt,
+                }
+            ],
+            "resolution": request.resolution,
+            "ratio": request.aspect_ratio,
+            "duration": request.duration_seconds,
+            "mode": "std",
+            "watermark": false,
+        }))
+        .send()
+        .await
+        .map_err(|error| {
+            map_character_animation_upstream_error(format!("请求画板视频服务失败：{error}"))
+        })?;
+
+    let status = response.status();
+    let body = response.text().await.map_err(|error| {
+        map_character_animation_upstream_error(format!("读取画板视频任务响应失败：{error}"))
+    })?;
+    if !status.is_success() {
+        return Err(parse_animation_upstream_error(
+            body.as_str(),
+            "创建画板视频任务失败。",
+        ));
+    }
+    let payload = parse_animation_json_payload(body.as_str(), "创建画板视频任务失败。")?;
+    extract_animation_task_id(&payload.payload).ok_or_else(|| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "editor-video",
+            "message": "画板视频任务未返回任务 id。",
+        }))
+    })
+}
+
+async fn put_generated_editor_video(
+    state: &AppState,
+    owner_user_id: &str,
+    task_id: &str,
+    request: &NormalizedEditorVideoRequest,
+    preview_payload: MediaPayload,
+) -> Result<String, AppError> {
+    let put_result = put_character_animation_object(
+        state,
+        LegacyAssetPrefix::CharacterDrafts,
+        vec![
+            "editor-videos".to_string(),
+            sanitize_storage_segment(request.model.as_str(), "model"),
+            task_id.to_string(),
+        ],
+        format!("preview.{}", preview_payload.extension),
+        preview_payload.mime_type,
+        preview_payload.bytes,
+        build_asset_metadata(
+            EDITOR_VIDEO_ASSET_KIND,
+            owner_user_id,
+            EDITOR_VIDEO_ENTITY_KIND,
+            task_id,
+            EDITOR_VIDEO_SLOT,
+            request.model.as_str(),
+        ),
+    )
+    .await?;
+    Ok(put_result.legacy_public_path)
+}
+
 async fn create_editor_ark_image_to_video_task(
     http_client: &reqwest::Client,
     settings: &EditorCharacterAnimationSettings,
@@ -2131,7 +2306,10 @@ fn normalize_editor_character_animation_request(
     let frame_count = normalize_editor_character_animation_frame_count(payload.frame_count)?;
     let duration_seconds =
         normalize_editor_character_animation_duration(payload.duration_seconds, frame_count)?;
-    let expected_price = calculate_editor_character_animation_price(resolution, duration_seconds);
+    let expected_price = crate::editor_generation_config::editor_character_animation_mud_points(
+        resolution,
+        duration_seconds,
+    );
     if payload.price_mud_points != expected_price {
         return Err(editor_character_animation_bad_request(format!(
             "priceMudPoints 与分辨率和时长不一致，应为 {expected_price}。"
@@ -2212,6 +2390,145 @@ fn require_editor_character_animation_settings(
     })
 }
 
+fn normalize_editor_video_request(
+    payload: EditorVideoGenerateRequest,
+) -> Result<NormalizedEditorVideoRequest, AppError> {
+    let prompt = payload.prompt.trim().chars().take(4000).collect::<String>();
+    if prompt.is_empty() {
+        return Err(editor_video_bad_request("视频描述不能为空。"));
+    }
+    let model = normalize_editor_video_model(payload.model.as_str())?;
+    let aspect_ratio = normalize_editor_video_aspect_ratio(payload.aspect_ratio.as_str())?;
+    let resolution = normalize_editor_video_resolution(payload.resolution.as_str())?;
+    let duration_seconds = normalize_editor_video_duration(payload.duration_seconds)?;
+    if payload.mode.trim() != "std" {
+        return Err(editor_video_bad_request("mode 只支持 std。"));
+    }
+    if payload.sound.trim() != "off" {
+        return Err(editor_video_bad_request("sound 只支持 off。"));
+    }
+    let expected_price = crate::editor_generation_config::editor_video_generation_mud_points(
+        resolution,
+        duration_seconds,
+    );
+    if payload.price_mud_points != expected_price {
+        return Err(editor_video_bad_request(format!(
+            "priceMudPoints 与分辨率和时长不一致，应为 {expected_price}。"
+        )));
+    }
+    let (width, height) = resolve_editor_video_size(aspect_ratio, resolution);
+
+    Ok(NormalizedEditorVideoRequest {
+        prompt,
+        model: model.to_string(),
+        provider_model: resolve_editor_video_provider_model(model).to_string(),
+        aspect_ratio: aspect_ratio.to_string(),
+        resolution: resolution.to_string(),
+        duration_seconds,
+        price_mud_points: expected_price,
+        width,
+        height,
+    })
+}
+
+fn normalize_editor_video_model(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        EDITOR_VIDEO_MODEL_SEEDANCE_2 => Ok(EDITOR_VIDEO_MODEL_SEEDANCE_2),
+        EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST => Ok(EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST),
+        EDITOR_VIDEO_MODEL_KLING_3 => Ok(EDITOR_VIDEO_MODEL_KLING_3),
+        EDITOR_VIDEO_MODEL_KLING_3_OMNI => Ok(EDITOR_VIDEO_MODEL_KLING_3_OMNI),
+        EDITOR_VIDEO_MODEL_VEO_3_1 => Ok(EDITOR_VIDEO_MODEL_VEO_3_1),
+        EDITOR_VIDEO_MODEL_VEO_3_1_FAST => Ok(EDITOR_VIDEO_MODEL_VEO_3_1_FAST),
+        _ => Err(editor_video_bad_request(
+            "model 只支持 seedance2.0、seedance2.0-fast、kling3.0、kling3.0-omni、veo3.1、veo3.1-fast。",
+        )),
+    }
+}
+
+fn resolve_editor_video_provider_model(model: &str) -> &str {
+    match model {
+        // 中文注释：Seedance 2.0 Fast 复用平台已有 fast seedance 上游模型；标准版按产品 ID 透传。
+        EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST => CHARACTER_ANIMATION_MODEL,
+        _ => model,
+    }
+}
+
+fn normalize_editor_video_aspect_ratio(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "16:9" => Ok("16:9"),
+        _ => Err(editor_video_bad_request("aspectRatio 只支持 16:9。")),
+    }
+}
+
+fn normalize_editor_video_resolution(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "480p" => Ok("480p"),
+        "720p" => Ok("720p"),
+        _ => Err(editor_video_bad_request("resolution 只支持 480p 或 720p。")),
+    }
+}
+
+fn normalize_editor_video_duration(value: u32) -> Result<u32, AppError> {
+    match value {
+        4 | 5 => Ok(value),
+        _ => Err(editor_video_bad_request("durationSeconds 只支持 4 或 5。")),
+    }
+}
+
+fn resolve_editor_video_size(aspect_ratio: &str, resolution: &str) -> (u32, u32) {
+    match (aspect_ratio, resolution) {
+        ("16:9", "720p") => (1280, 720),
+        _ => (854, 480),
+    }
+}
+
+fn require_editor_video_settings(
+    state: &AppState,
+    model: &str,
+) -> Result<EditorVideoSettings, AppError> {
+    let base_url = state
+        .config
+        .ark_character_video_base_url
+        .trim()
+        .trim_end_matches('/');
+    if base_url.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+                "provider": "ark",
+                "reason": "ARK_CHARACTER_VIDEO_BASE_URL 未配置",
+            })),
+        );
+    }
+    let api_key = state
+        .config
+        .ark_character_video_api_key
+        .as_deref()
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+                "provider": "ark",
+                "reason": "ARK_CHARACTER_VIDEO_API_KEY 未配置",
+            }))
+        })?;
+
+    Ok(EditorVideoSettings {
+        ark: ArkVideoSettings {
+            base_url: base_url.to_string(),
+            api_key: api_key.to_string(),
+            request_timeout_ms: state.config.ark_character_video_request_timeout_ms.max(1),
+            model: resolve_editor_video_provider_model(model).to_string(),
+        },
+    })
+}
+
+fn editor_video_bad_request(message: impl Into<String>) -> AppError {
+    AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+        "provider": "editor-video",
+        "message": message.into(),
+    }))
+}
+
 fn build_editor_character_animation_prompt(prompt_text: &str) -> String {
     format!(
         "{}\n{}",
@@ -2272,11 +2589,6 @@ fn normalize_editor_character_animation_duration(
     }
 }
 
-fn calculate_editor_character_animation_price(resolution: &str, duration_seconds: u32) -> u32 {
-    let per_second = if resolution == "720p" { 20 } else { 10 };
-    per_second * duration_seconds
-}
-
 fn resolve_editor_character_animation_provider_ratio(
     ratio: &str,
     source_width: u32,
@@ -3792,6 +4104,10 @@ fn character_animation_error_response(
     error.into_response_with_context(Some(request_context))
 }
 
+fn editor_video_error_response(request_context: &RequestContext, error: AppError) -> Response {
+    error.into_response_with_context(Some(request_context))
+}
+
 pub(crate) struct MotionTemplate {
     pub(crate) id: &'static str,
     pub(crate) label: &'static str,
@@ -3836,6 +4152,10 @@ struct EditorCharacterAnimationSettings {
     duration_seconds: u32,
 }
 
+struct EditorVideoSettings {
+    ark: ArkVideoSettings,
+}
+
 #[derive(Debug)]
 struct NormalizedEditorCharacterAnimationRequest {
     source_layer_id: String,
@@ -3851,6 +4171,19 @@ struct NormalizedEditorCharacterAnimationRequest {
     fps: u32,
 }
 
+#[derive(Debug)]
+struct NormalizedEditorVideoRequest {
+    prompt: String,
+    model: String,
+    provider_model: String,
+    aspect_ratio: String,
+    resolution: String,
+    duration_seconds: u32,
+    price_mud_points: u32,
+    width: u32,
+    height: u32,
+}
+
 struct GeneratedAnimationPreview {
     preview_video_path: String,
     upstream_task_id: String,
@@ -4112,7 +4445,71 @@ mod tests {
 
     #[test]
     fn editor_character_animation_price_depends_on_resolution_and_duration() {
-        assert_eq!(calculate_editor_character_animation_price("480p", 4), 40);
-        assert_eq!(calculate_editor_character_animation_price("720p", 6), 120);
+        assert_eq!(
+            crate::editor_generation_config::editor_character_animation_mud_points("480p", 4),
+            40
+        );
+        assert_eq!(
+            crate::editor_generation_config::editor_character_animation_mud_points("720p", 6),
+            120
+        );
+    }
+
+    #[test]
+    fn editor_video_normalizes_lovart_model_contract() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: " 让角色向镜头挥手 ".to_string(),
+            model: EDITOR_VIDEO_MODEL_KLING_3_OMNI.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 50,
+        })
+        .expect("editor video request should normalize");
+
+        assert_eq!(normalized.prompt, "让角色向镜头挥手");
+        assert_eq!(normalized.model, EDITOR_VIDEO_MODEL_KLING_3_OMNI);
+        assert_eq!(normalized.provider_model, EDITOR_VIDEO_MODEL_KLING_3_OMNI);
+        assert_eq!(normalized.width, 854);
+        assert_eq!(normalized.height, 480);
+        assert_eq!(normalized.price_mud_points, 50);
+    }
+
+    #[test]
+    fn editor_video_seedance_fast_uses_existing_fast_seedance_model() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "快速生成镜头推进。".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "720p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 80,
+        })
+        .expect("seedance fast request should normalize");
+
+        assert_eq!(normalized.provider_model, CHARACTER_ANIMATION_MODEL);
+        assert_eq!(normalized.width, 1280);
+        assert_eq!(normalized.height, 720);
+    }
+
+    #[test]
+    fn editor_video_rejects_price_mismatch() {
+        let error = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "生成镜头。".to_string(),
+            model: EDITOR_VIDEO_MODEL_VEO_3_1.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 40,
+        })
+        .expect_err("wrong price should fail");
+
+        assert!(error.body_text().contains("priceMudPoints"));
     }
 }
diff --git a/server-rs/crates/api-server/src/editor_generation_config.rs b/server-rs/crates/api-server/src/editor_generation_config.rs
new file mode 100644
index 000000000..1fb6ad586
--- /dev/null
+++ b/server-rs/crates/api-server/src/editor_generation_config.rs
@@ -0,0 +1,72 @@
+/// 图片画布编辑器生成类能力的泥点配置。
+///
+/// 中文注释：先用 api-server 静态配置收口价格事实源，避免继续把价格散落在
+/// 前端常量和具体 handler 内；后续若接后台配置，可只替换本模块读取来源。
+const EDITOR_IMAGE_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_SPEC_GENERATION_MUD_POINTS: u32 = 5;
+const EDITOR_CHARACTER_IMAGE_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_ICON_SPRITESHEET_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_UI_DESIGN_GENERATION_MUD_POINTS: u32 = 12;
+
+pub(crate) const EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
+pub(crate) const EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND: u32 = 20;
+
+pub(crate) const EDITOR_CHARACTER_ANIMATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
+pub(crate) const EDITOR_CHARACTER_ANIMATION_720P_MUD_POINTS_PER_SECOND: u32 = 20;
+
+pub(crate) fn editor_image_generation_mud_points(kind: Option<&str>) -> u32 {
+    match kind.map(str::trim) {
+        Some("spec") => EDITOR_SPEC_GENERATION_MUD_POINTS,
+        Some("character") => EDITOR_CHARACTER_IMAGE_GENERATION_MUD_POINTS,
+        Some("icon") => EDITOR_ICON_SPRITESHEET_GENERATION_MUD_POINTS,
+        Some("ui-design") => EDITOR_UI_DESIGN_GENERATION_MUD_POINTS,
+        _ => EDITOR_IMAGE_GENERATION_MUD_POINTS,
+    }
+}
+
+pub(crate) fn editor_video_generation_mud_points(resolution: &str, duration_seconds: u32) -> u32 {
+    let per_second = if resolution == "720p" {
+        EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND
+    } else {
+        EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND
+    };
+    per_second * duration_seconds
+}
+
+pub(crate) fn editor_character_animation_mud_points(
+    resolution: &str,
+    duration_seconds: u32,
+) -> u32 {
+    let per_second = if resolution == "720p" {
+        EDITOR_CHARACTER_ANIMATION_720P_MUD_POINTS_PER_SECOND
+    } else {
+        EDITOR_CHARACTER_ANIMATION_480P_MUD_POINTS_PER_SECOND
+    };
+    per_second * duration_seconds
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn editor_character_animation_price_uses_configured_resolution_rates() {
+        assert_eq!(editor_character_animation_mud_points("480p", 4), 40);
+        assert_eq!(editor_character_animation_mud_points("720p", 6), 120);
+    }
+
+    #[test]
+    fn editor_video_generation_price_uses_configured_resolution_rates() {
+        assert_eq!(editor_video_generation_mud_points("480p", 4), 40);
+        assert_eq!(editor_video_generation_mud_points("720p", 5), 100);
+    }
+
+    #[test]
+    fn editor_image_generation_price_uses_configured_kind_rates() {
+        assert_eq!(editor_image_generation_mud_points(None), 12);
+        assert_eq!(editor_image_generation_mud_points(Some("spec")), 5);
+        assert_eq!(editor_image_generation_mud_points(Some("character")), 12);
+        assert_eq!(editor_image_generation_mud_points(Some("icon")), 12);
+        assert_eq!(editor_image_generation_mud_points(Some("ui-design")), 12);
+    }
+}
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 5e002c9ac..b979116bf 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -42,7 +42,8 @@ use crate::{
     openai_image_generation::{
         DownloadedOpenAiImage, GPT_IMAGE_2_MODEL, OpenAiReferenceImage,
         build_openai_image_http_client, create_openai_image_edit_with_references,
-        create_openai_image_edit_with_references_and_model, create_openai_image_generation,
+        create_openai_image_edit_with_references_and_model,
+        create_openai_image_generation_with_model, create_openai_nanobanana_generate_content,
         require_openai_image_settings,
     },
     platform_errors::map_oss_error,
@@ -57,9 +58,7 @@ const EDITOR_ASSET_ID_PREFIX: &str = "editor-asset-";
 const EDITOR_LAYOUT_MAX_BYTES: usize = 256 * 1024;
 const EDITOR_PROJECT_DEFAULT_TITLE: &str = "未命名画布";
 const EDITOR_IMAGE_GENERATION_SIZE: &str = "1024x1024";
-const EDITOR_ICON_SPRITESHEET_MODEL: &str = "gemini-3.1-flash-image-preview";
-const EDITOR_ICON_SPRITESHEET_SMALL_SIZE: &str = "512x512";
-const EDITOR_ICON_SPRITESHEET_LARGE_SIZE: &str = "1024x1024";
+const EDITOR_IMAGE_MODEL_NANOBANANA2: &str = "gemini-3.1-flash-image-preview";
 const EDITOR_ICON_DESCRIPTION_LIMIT: usize = 100;
 const EDITOR_CHARACTER_IMAGE_ASSET_KIND: &str = "editor_character_image";
 const EDITOR_CHARACTER_IMAGE_ENTITY_KIND: &str = "editor_project";
@@ -155,6 +154,8 @@ pub struct EditorImageGenerationRequest {
     size: Option<String>,
     kind: Option<String>,
     model: Option<String>,
+    aspect_ratio: Option<String>,
+    image_size: Option<String>,
     reference_image_srcs: Option<Vec<String>>,
 }
 
@@ -171,6 +172,8 @@ pub struct EditorIconSpritesheetGenerationRequest {
     reference_image_src: String,
     icon_descriptions: Vec<String>,
     model: Option<String>,
+    aspect_ratio: Option<String>,
+    image_size: Option<String>,
 }
 
 #[derive(Debug, Serialize)]
@@ -238,7 +241,7 @@ pub struct EditorImageGenerationResponse {
     source_type: &'static str,
     prompt: String,
     actual_prompt: Option<String>,
-    model: &'static str,
+    model: String,
     provider: &'static str,
     task_id: String,
 }
@@ -757,12 +760,33 @@ pub async fn generate_editor_image(
         );
     }
 
-    let image_size = normalize_editor_image_generation_size(payload.size.as_deref());
-    let _requested_model = payload.model.as_deref();
+    let generation_options = normalize_editor_generation_options(
+        payload.model.as_deref(),
+        payload.aspect_ratio.as_deref(),
+        payload.image_size.as_deref(),
+    );
+    let has_dimension_options = payload.aspect_ratio.is_some() || payload.image_size.is_some();
+    let legacy_size = normalize_editor_image_generation_size(payload.size.as_deref());
+    let image_size = if has_dimension_options {
+        Cow::Owned(generation_options.size.clone())
+    } else {
+        legacy_size
+    };
     let normalized_kind = payload.kind.as_deref().map(str::trim);
+    let _configured_price_mud_points =
+        crate::editor_generation_config::editor_image_generation_mud_points(normalized_kind);
     let is_character_generation = matches!(normalized_kind, Some("character"));
+    let is_ui_design_generation = matches!(normalized_kind, Some("ui-design"));
     let submitted_prompt = if is_character_generation {
         build_editor_character_image_prompt(role_setting.as_str())
+    } else if is_ui_design_generation {
+        build_editor_ui_design_prompt(
+            role_setting.as_str(),
+            payload
+                .reference_image_srcs
+                .as_ref()
+                .is_some_and(|references| references.iter().any(|source| !source.trim().is_empty())),
+        )
     } else {
         role_setting.clone()
     };
@@ -770,6 +794,7 @@ pub async fn generate_editor_image(
         Some("character") => "图片画布生成角色形象",
         Some("spec") => "图片画布生成规范",
         Some("quick-edit") => "图片画布快速编辑图片",
+        Some("ui-design") => "图片画布生成UI设计图",
         _ => "图片画布生成图片",
     };
     let reference_sources = payload
@@ -787,10 +812,46 @@ pub async fn generate_editor_image(
     );
     let http_client = build_openai_image_http_client(&settings)?;
     let negative_prompt = Some("文字、水印、边框、按钮、UI 控件、低清晰度、变形主体");
-    let generated = if reference_sources.is_empty() {
-        create_openai_image_generation(
+    let reference_images = if reference_sources.is_empty() {
+        Vec::new()
+    } else {
+        reference_sources
+            .iter()
+            .map(|source| parse_editor_reference_image(source.as_str()))
+            .collect::<Result<Vec<_>, _>>()?
+    };
+    let generation_options = if is_ui_design_generation {
+        normalize_editor_generation_options(
+            Some(GPT_IMAGE_2_MODEL),
+            payload.aspect_ratio.as_deref(),
+            payload.image_size.as_deref(),
+        )
+    } else {
+        generation_options
+    };
+    let image_size = if is_ui_design_generation {
+        Cow::Owned(generation_options.size.clone())
+    } else {
+        image_size
+    };
+    let generated = if generation_options.model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        create_openai_nanobanana_generate_content(
             &http_client,
             &settings,
+            generation_options.model,
+            submitted_prompt.as_str(),
+            negative_prompt,
+            generation_options.aspect_ratio,
+            generation_options.provider_image_size,
+            reference_images.as_slice(),
+            failure_context,
+        )
+        .await?
+    } else if reference_images.is_empty() {
+        create_openai_image_generation_with_model(
+            &http_client,
+            &settings,
+            generation_options.model,
             submitted_prompt.as_str(),
             negative_prompt,
             image_size.as_ref(),
@@ -800,13 +861,10 @@ pub async fn generate_editor_image(
         )
         .await?
     } else {
-        let reference_images = reference_sources
-            .iter()
-            .map(|source| parse_editor_reference_image(source.as_str()))
-            .collect::<Result<Vec<_>, _>>()?;
-        create_openai_image_edit_with_references(
+        create_openai_image_edit_with_references_and_model(
             &http_client,
             &settings,
+            generation_options.model,
             submitted_prompt.as_str(),
             negative_prompt,
             image_size.as_ref(),
@@ -863,7 +921,7 @@ pub async fn generate_editor_image(
             source_type: "generated",
             prompt: role_setting,
             actual_prompt: generated.actual_prompt,
-            model: GPT_IMAGE_2_MODEL,
+            model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
         },
@@ -895,6 +953,96 @@ fn is_editor_custom_image_size(value: &str) -> bool {
     (64..=4096).contains(&width) && (64..=4096).contains(&height)
 }
 
+fn normalize_editor_generation_options(
+    model: Option<&str>,
+    aspect_ratio: Option<&str>,
+    image_size: Option<&str>,
+) -> EditorGenerationOptions {
+    let normalized_model = match model.map(str::trim).filter(|value| !value.is_empty()) {
+        Some(GPT_IMAGE_2_MODEL) => GPT_IMAGE_2_MODEL,
+        Some(EDITOR_IMAGE_MODEL_NANOBANANA2) => EDITOR_IMAGE_MODEL_NANOBANANA2,
+        // 中文注释：未显式传模型的旧普通生成、快速编辑和生成规范继续走 gpt-image-2；
+        // 角色 / 图标素材入口由前端显式传入 nanobanana2 默认值。
+        None => GPT_IMAGE_2_MODEL,
+        _ => EDITOR_IMAGE_MODEL_NANOBANANA2,
+    };
+    let aspect_ratio = normalize_editor_generation_aspect_ratio(aspect_ratio);
+    let image_size = normalize_editor_generation_image_size(normalized_model, image_size);
+    let size = editor_generation_size_for_model(normalized_model, aspect_ratio, image_size);
+    let provider_image_size =
+        editor_generation_provider_image_size_for_model(normalized_model, image_size);
+
+    EditorGenerationOptions {
+        model: normalized_model,
+        aspect_ratio,
+        image_size,
+        size,
+        provider_image_size,
+    }
+}
+
+fn normalize_editor_generation_aspect_ratio(aspect_ratio: Option<&str>) -> &'static str {
+    match aspect_ratio
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+    {
+        Some("2:3") => "2:3",
+        Some("3:2") => "3:2",
+        Some("9:16") => "9:16",
+        Some("16:9") => "16:9",
+        _ => "1:1",
+    }
+}
+
+fn normalize_editor_generation_image_size(model: &str, image_size: Option<&str>) -> &'static str {
+    match (
+        model,
+        image_size.map(str::trim).filter(|value| !value.is_empty()),
+    ) {
+        (EDITOR_IMAGE_MODEL_NANOBANANA2, Some("0.5K")) => "0.5K",
+        (_, Some("2K")) => "2K",
+        _ => "1K",
+    }
+}
+
+fn editor_generation_size_for_model(model: &str, aspect_ratio: &str, image_size: &str) -> String {
+    if model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        return match image_size {
+            // 中文注释：VectorEngine 的 nanobanana2 文档要求 0.5K 传入 512。
+            "0.5K" => "512",
+            "2K" => "2048",
+            _ => "1024",
+        }
+        .to_string();
+    }
+
+    match (image_size, aspect_ratio) {
+        ("2K", "1:1") => "2048x2048",
+        // 中文注释：gpt-image-2 文档未列出 2K 竖版，竖版选择回落到文档明确支持的 1K 竖版。
+        ("2K", "2:3") | ("2K", "9:16") => "1024x1536",
+        ("2K", "16:9") | ("2K", "3:2") => "2048x1152",
+        ("1K", "2:3") | ("1K", "9:16") => "1024x1536",
+        ("1K", "3:2") | ("1K", "16:9") => "1536x1024",
+        _ => "1024x1024",
+    }
+    .to_string()
+}
+
+fn editor_generation_provider_image_size_for_model(
+    model: &str,
+    image_size: &'static str,
+) -> &'static str {
+    if model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        return match image_size {
+            "0.5K" => "512",
+            "2K" => "2K",
+            _ => "1K",
+        };
+    }
+
+    image_size
+}
+
 pub async fn edit_editor_image(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -955,7 +1103,7 @@ pub async fn edit_editor_image(
             source_type: "generated",
             prompt,
             actual_prompt: generated.actual_prompt,
-            model: GPT_IMAGE_2_MODEL,
+            model: GPT_IMAGE_2_MODEL.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
         },
@@ -977,14 +1125,12 @@ pub async fn generate_editor_icon_spritesheet(
                 "message": "图标素材规范必须是图片 Data URL。",
             }))
         })?;
-    let model = payload
-        .model
-        .as_deref()
-        .map(str::trim)
-        .filter(|value| !value.is_empty())
-        .unwrap_or(EDITOR_ICON_SPRITESHEET_MODEL)
-        .to_string();
-    let size = editor_icon_spritesheet_size_for_count(icon_descriptions.len());
+    let generation_options = normalize_editor_generation_options(
+        payload.model.as_deref(),
+        payload.aspect_ratio.as_deref(),
+        payload.image_size.as_deref(),
+    );
+    let size = generation_options.size.as_str();
     let prompt = build_editor_icon_spritesheet_prompt(&icon_descriptions);
 
     let settings = require_openai_image_settings(&state)?.with_external_api_audit_context(
@@ -993,18 +1139,33 @@ pub async fn generate_editor_icon_spritesheet(
         None,
     );
     let http_client = build_openai_image_http_client(&settings)?;
-    let generated = create_openai_image_edit_with_references_and_model(
-        &http_client,
-        &settings,
-        model.as_str(),
-        prompt.as_str(),
-        None,
-        size,
-        1,
-        &[reference_image],
-        "图片画布生成图标素材 spritesheet",
-    )
-    .await?;
+    let generated = if generation_options.model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        create_openai_nanobanana_generate_content(
+            &http_client,
+            &settings,
+            generation_options.model,
+            prompt.as_str(),
+            None,
+            generation_options.aspect_ratio,
+            generation_options.provider_image_size,
+            &[reference_image],
+            "图片画布生成图标素材 spritesheet",
+        )
+        .await?
+    } else {
+        create_openai_image_edit_with_references_and_model(
+            &http_client,
+            &settings,
+            generation_options.model,
+            prompt.as_str(),
+            None,
+            size,
+            1,
+            &[reference_image],
+            "图片画布生成图标素材 spritesheet",
+        )
+        .await?
+    };
     let image = generated.images.into_iter().next().ok_or_else(|| {
         AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
             "provider": "vector-engine",
@@ -1045,7 +1206,7 @@ pub async fn generate_editor_icon_spritesheet(
             icon_image_srcs,
             prompt,
             actual_prompt: generated.actual_prompt,
-            model,
+            model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
         },
@@ -1249,6 +1410,17 @@ fn build_editor_icon_spritesheet_prompt(icon_descriptions: &[String]) -> String
     )
 }
 
+fn build_editor_ui_design_prompt(user_input: &str, has_icon_spec_reference: bool) -> String {
+    let mut prompt = vec![
+        "生成玩法UI原型图".to_string(),
+        format!("【用户输入】{}", user_input.trim()),
+    ];
+    if has_icon_spec_reference {
+        prompt.push("参考图1为图标素材规范，请在UI图标、按钮符号、描边、材质、圆角、阴影和状态层级上严格遵循参考图1的素材规范。".to_string());
+    }
+    prompt.join("\n")
+}
+
 fn build_editor_character_image_prompt(role_setting: &str) -> String {
     vec![
         "严格基于图1的角色美术视觉规范指导中的美术风格、角色头身比、角色朝向等特征生成游戏角色形象图。画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为纯绿色绿幕，只作为抠像底色，禁止生成美术视觉规范、出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。".to_string(),
@@ -1295,14 +1467,6 @@ fn prepare_editor_character_image_for_response(
     }
 }
 
-fn editor_icon_spritesheet_size_for_count(icon_count: usize) -> &'static str {
-    if icon_count <= 25 {
-        EDITOR_ICON_SPRITESHEET_SMALL_SIZE
-    } else {
-        EDITOR_ICON_SPRITESHEET_LARGE_SIZE
-    }
-}
-
 fn data_url_from_image_bytes(mime_type: &str, bytes: &[u8]) -> String {
     format!(
         "data:{};base64,{}",
@@ -1322,6 +1486,15 @@ fn editor_icon_response_from_slice(
     }
 }
 
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct EditorGenerationOptions {
+    model: &'static str,
+    aspect_ratio: &'static str,
+    image_size: &'static str,
+    size: String,
+    provider_image_size: &'static str,
+}
+
 struct PersistedEditorGeneratedImage {
     object_key: String,
     asset_object_id: String,
@@ -1548,6 +1721,68 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_generation_dimensions_follow_model_options() {
+        let default_generation = normalize_editor_generation_options(None, Some("1:1"), Some("1K"));
+        assert_eq!(default_generation.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(default_generation.size, "1024x1024");
+
+        let nanobanana = normalize_editor_generation_options(
+            Some(EDITOR_IMAGE_MODEL_NANOBANANA2),
+            Some("1:1"),
+            Some("0.5K"),
+        );
+        assert_eq!(nanobanana.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        assert_eq!(nanobanana.size, "512");
+        assert_eq!(nanobanana.aspect_ratio, "1:1");
+        assert_eq!(nanobanana.image_size, "0.5K");
+        assert_eq!(nanobanana.provider_image_size, "512");
+
+        let gpt = normalize_editor_generation_options(Some("gpt-image-2"), Some("2:3"), Some("1K"));
+        assert_eq!(gpt.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt.size, "1024x1536");
+        assert_eq!(gpt.aspect_ratio, "2:3");
+        assert_eq!(gpt.image_size, "1K");
+        assert_eq!(gpt.provider_image_size, "1K");
+
+        let gpt_landscape_2k =
+            normalize_editor_generation_options(Some("gpt-image-2"), Some("16:9"), Some("2K"));
+        assert_eq!(gpt_landscape_2k.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt_landscape_2k.size, "2048x1152");
+        assert_eq!(gpt_landscape_2k.aspect_ratio, "16:9");
+        assert_eq!(gpt_landscape_2k.image_size, "2K");
+
+        let gpt_portrait_2k_fallback =
+            normalize_editor_generation_options(Some("gpt-image-2"), Some("9:16"), Some("2K"));
+        assert_eq!(gpt_portrait_2k_fallback.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt_portrait_2k_fallback.size, "1024x1536");
+        assert_eq!(gpt_portrait_2k_fallback.aspect_ratio, "9:16");
+        assert_eq!(gpt_portrait_2k_fallback.image_size, "2K");
+
+        let fallback = normalize_editor_generation_options(
+            Some("unknown-model"),
+            Some("bad-ratio"),
+            Some("bad-size"),
+        );
+        assert_eq!(fallback.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        assert_eq!(fallback.size, "1024");
+        assert_eq!(fallback.aspect_ratio, "1:1");
+        assert_eq!(fallback.image_size, "1K");
+        assert_eq!(fallback.provider_image_size, "1K");
+    }
+
+    #[test]
+    fn editor_ui_design_prompt_uses_fixed_user_input_block_and_optional_icon_spec() {
+        let prompt = build_editor_ui_design_prompt("二消玩法，主界面和结算弹窗", true);
+
+        assert!(prompt.contains("生成玩法UI原型图"));
+        assert!(prompt.contains("【用户输入】二消玩法，主界面和结算弹窗"));
+        assert!(prompt.contains("参考图1为图标素材规范"));
+
+        let no_reference_prompt = build_editor_ui_design_prompt("只要战斗HUD", false);
+        assert!(!no_reference_prompt.contains("参考图1为图标素材规范"));
+    }
+
     #[test]
     fn editor_character_image_prompt_appends_user_role_setting() {
         let prompt = build_editor_character_image_prompt("菜市场卖菜大妈");
@@ -1631,8 +1866,6 @@ mod tests {
         assert!(prompt.contains("参考图1的图标素材规范"));
         assert!(prompt.contains("纯绿幕背景方便扣除背景"));
         assert!(prompt.contains("返回按钮、设置按钮、下一关按钮"));
-        assert_eq!(editor_icon_spritesheet_size_for_count(25), "512x512");
-        assert_eq!(editor_icon_spritesheet_size_for_count(26), "1024x1024");
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/main.rs b/server-rs/crates/api-server/src/main.rs
index ec6d4451f..7f51e5a64 100644
--- a/server-rs/crates/api-server/src/main.rs
+++ b/server-rs/crates/api-server/src/main.rs
@@ -36,6 +36,7 @@ mod custom_world_asset_prompts;
 mod custom_world_foundation_draft;
 mod custom_world_result_prompts;
 mod custom_world_rpg_draft_prompts;
+mod editor_generation_config;
 mod editor_project;
 mod edutainment_baby_drawing;
 mod edutainment_baby_object;
diff --git a/server-rs/crates/api-server/src/modules/play_flow.rs b/server-rs/crates/api-server/src/modules/play_flow.rs
index bc800e299..f80609751 100644
--- a/server-rs/crates/api-server/src/modules/play_flow.rs
+++ b/server-rs/crates/api-server/src/modules/play_flow.rs
@@ -16,7 +16,7 @@ use crate::{
     assets::get_asset_history,
     auth::require_bearer_auth,
     character_animation_assets::{
-        generate_character_animation, generate_editor_character_animation,
+        generate_character_animation, generate_editor_character_animation, generate_editor_video,
         get_character_animation_job, get_character_workflow_cache, import_character_animation_video,
         list_character_animation_templates,
         publish_character_animation, put_role_asset_workflow, resolve_role_asset_workflow,
@@ -461,6 +461,13 @@ fn play_flow_support_router(state: AppState) -> Router<AppState> {
                 EDITOR_CHARACTER_ANIMATION_BODY_LIMIT_BYTES,
             )),
         )
+        .route(
+            "/api/editor/videos/generations",
+            post(generate_editor_video).route_layer(middleware::from_fn_with_state(
+                state.clone(),
+                require_bearer_auth,
+            )),
+        )
         .route(
             "/api/assets/character-animation/jobs/{task_id}",
             get(get_character_animation_job),
diff --git a/server-rs/crates/api-server/src/openai_image_generation.rs b/server-rs/crates/api-server/src/openai_image_generation.rs
index 987896fb8..3742350c7 100644
--- a/server-rs/crates/api-server/src/openai_image_generation.rs
+++ b/server-rs/crates/api-server/src/openai_image_generation.rs
@@ -3,7 +3,9 @@ use platform_image::{
     DownloadedImage, GeneratedImages, PlatformImageError, PlatformImageStatusHint, ReferenceImage,
     VECTOR_ENGINE_PROVIDER, VectorEngineImageSettings, build_vector_engine_image_http_client,
     create_vector_engine_image_edit, create_vector_engine_image_edit_with_references,
-    create_vector_engine_image_edit_with_references_and_model, create_vector_engine_image_generation,
+    create_vector_engine_image_edit_with_references_and_model,
+    create_vector_engine_image_generation, create_vector_engine_image_generation_with_model,
+    create_vector_engine_nanobanana_generate_content,
 };
 #[cfg(test)]
 use platform_image::{
@@ -159,6 +161,94 @@ pub(crate) async fn create_openai_image_generation(
     .await
 }
 
+#[allow(clippy::too_many_arguments)]
+pub(crate) async fn create_openai_image_generation_with_model(
+    http_client: &reqwest::Client,
+    settings: &OpenAiImageSettings,
+    model: &str,
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    size: &str,
+    candidate_count: u32,
+    reference_images: &[String],
+    failure_context: &str,
+) -> Result<OpenAiGeneratedImages, AppError> {
+    let started_at_micros = current_utc_micros();
+    let request_payload = json!({
+        "model": model,
+        "size": size,
+        "candidateCount": candidate_count,
+        "promptChars": prompt.chars().count(),
+        "negativePromptChars": negative_prompt.map(str::chars).map(Iterator::count),
+        "referenceImageCount": reference_images.len(),
+    });
+    let result = create_vector_engine_image_generation_with_model(
+        http_client,
+        &settings.provider_settings(),
+        model,
+        prompt,
+        negative_prompt,
+        size,
+        candidate_count,
+        reference_images,
+        failure_context,
+    )
+    .await;
+    map_platform_image_result(
+        settings,
+        result,
+        "image_generation",
+        failure_context,
+        request_payload,
+        started_at_micros,
+    )
+    .await
+}
+
+#[allow(clippy::too_many_arguments)]
+pub(crate) async fn create_openai_nanobanana_generate_content(
+    http_client: &reqwest::Client,
+    settings: &OpenAiImageSettings,
+    model: &str,
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    aspect_ratio: &str,
+    image_size: &str,
+    reference_images: &[OpenAiReferenceImage],
+    failure_context: &str,
+) -> Result<OpenAiGeneratedImages, AppError> {
+    let started_at_micros = current_utc_micros();
+    let request_payload = json!({
+        "model": model,
+        "aspectRatio": aspect_ratio,
+        "imageSize": image_size,
+        "promptChars": prompt.chars().count(),
+        "negativePromptChars": negative_prompt.map(str::chars).map(Iterator::count),
+        "referenceImageCount": reference_images.len(),
+    });
+    let result = create_vector_engine_nanobanana_generate_content(
+        http_client,
+        &settings.provider_settings(),
+        model,
+        prompt,
+        negative_prompt,
+        aspect_ratio,
+        image_size,
+        reference_images,
+        failure_context,
+    )
+    .await;
+    map_platform_image_result(
+        settings,
+        result,
+        "nanobanana_generate_content",
+        failure_context,
+        request_payload,
+        started_at_micros,
+    )
+    .await
+}
+
 pub(crate) async fn create_openai_image_edit(
     http_client: &reqwest::Client,
     settings: &OpenAiImageSettings,
diff --git a/server-rs/crates/platform-image/src/lib.rs b/server-rs/crates/platform-image/src/lib.rs
index 267a08492..4e7aaa896 100644
--- a/server-rs/crates/platform-image/src/lib.rs
+++ b/server-rs/crates/platform-image/src/lib.rs
@@ -7,8 +7,11 @@ pub use vector_engine::{
     PlatformImageFailureAudit, PlatformImageStatusHint, ReferenceImage,
     VECTOR_ENGINE_GPT_IMAGE_2_MODEL, VECTOR_ENGINE_PROVIDER, VectorEngineImageSettings,
     build_vector_engine_image_http_client, build_vector_engine_image_request_body,
-    create_vector_engine_image_edit, create_vector_engine_image_edit_with_references,
+    build_vector_engine_nanobanana_generate_content_request_body, create_vector_engine_image_edit,
+    create_vector_engine_image_edit_with_references,
     create_vector_engine_image_edit_with_references_and_model,
     create_vector_engine_image_generation, create_vector_engine_image_generation_with_model,
-    download_remote_image, vector_engine_images_edit_url, vector_engine_images_generation_url,
+    create_vector_engine_nanobanana_generate_content, download_remote_image,
+    vector_engine_images_edit_url, vector_engine_images_generation_url,
+    vector_engine_nanobanana_generate_content_url,
 };
diff --git a/server-rs/crates/platform-image/src/vector_engine/client.rs b/server-rs/crates/platform-image/src/vector_engine/client.rs
index e65d08ee5..e5024124a 100644
--- a/server-rs/crates/platform-image/src/vector_engine/client.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/client.rs
@@ -14,9 +14,10 @@ use super::{
     image_source::resolve_reference_images,
     request::{
         build_vector_engine_image_edit_request_log_params,
-        build_vector_engine_image_request_body_with_model, normalize_image_size,
+        build_vector_engine_image_request_body_with_model,
+        build_vector_engine_nanobanana_generate_content_request_body, normalize_image_size,
         normalize_vector_engine_image_model, vector_engine_images_edit_url,
-        vector_engine_images_generation_url,
+        vector_engine_images_generation_url, vector_engine_nanobanana_generate_content_url,
     },
     response::handle_vector_engine_response,
     types::{GeneratedImages, ReferenceImage, VectorEngineImageSettings},
@@ -181,6 +182,144 @@ pub async fn create_vector_engine_image_generation_with_model(
     .await
 }
 
+#[allow(clippy::too_many_arguments)]
+pub async fn create_vector_engine_nanobanana_generate_content(
+    http_client: &reqwest::Client,
+    settings: &VectorEngineImageSettings,
+    model: &str,
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    aspect_ratio: &str,
+    image_size: &str,
+    reference_images: &[ReferenceImage],
+    failure_context: &str,
+) -> Result<GeneratedImages, PlatformImageError> {
+    let model = normalize_vector_engine_image_model(model);
+    let request_url = vector_engine_nanobanana_generate_content_url(settings, model);
+    let request_body = build_vector_engine_nanobanana_generate_content_request_body(
+        prompt,
+        negative_prompt,
+        aspect_ratio,
+        image_size,
+        reference_images,
+    );
+    let reference_image_count = reference_images.iter().take(14).count();
+    let reference_image_bytes_total: usize = reference_images
+        .iter()
+        .take(14)
+        .map(|image| image.bytes.len())
+        .sum();
+    let request_params = serde_json::json!({
+        "model": model,
+        "promptChars": prompt.trim().chars().count(),
+        "negativePromptChars": negative_prompt
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .map(str::chars)
+            .map(Iterator::count)
+            .unwrap_or_default(),
+        "aspectRatio": aspect_ratio,
+        "imageSize": image_size,
+        "referenceImageCount": reference_image_count,
+        "referenceImageBytesTotal": reference_image_bytes_total,
+    });
+    let started_at = std::time::Instant::now();
+    let mut attempt = 1;
+    let response = loop {
+        match send_vector_engine_json_request_with_curl(
+            request_url.as_str(),
+            settings.api_key.as_str(),
+            &request_body,
+            settings.request_timeout_ms,
+        )
+        .await
+        {
+            Ok(response) => {
+                if should_retry_vector_engine_upstream_status(response.status, attempt) {
+                    retry_vector_engine_upstream_status_after_delay(
+                        "nanobanana_generate_content",
+                        request_url.as_str(),
+                        attempt,
+                        response.status,
+                        response.body.as_str(),
+                        started_at.elapsed().as_millis() as u64,
+                        Some(prompt.chars().count()),
+                        Some(reference_image_count),
+                        Some(&request_params),
+                    )
+                    .await;
+                    attempt += 1;
+                    continue;
+                }
+                break response;
+            }
+            Err(error) => {
+                if should_retry_vector_engine_curl_send_error(&error, attempt) {
+                    retry_vector_engine_send_after_delay(
+                        "nanobanana_generate_content",
+                        request_url.as_str(),
+                        "request_send",
+                        attempt,
+                        error.is_timeout(),
+                        error.is_connect() || error.is_transient_transport(),
+                        true,
+                        false,
+                        error.to_string().as_str(),
+                        started_at.elapsed().as_millis() as u64,
+                        Some(prompt.chars().count()),
+                        Some(reference_image_count),
+                        Some(&request_params),
+                    )
+                    .await;
+                    attempt += 1;
+                    continue;
+                }
+                return Err(map_curl_error(
+                    format!("{failure_context}：创建 nanobanana2 图片生成任务失败").as_str(),
+                    request_url.as_str(),
+                    "request_send",
+                    error,
+                    started_at.elapsed().as_millis() as u64,
+                    Some(prompt.chars().count()),
+                    Some(reference_image_count),
+                    Some(&request_params),
+                ));
+            }
+        }
+    };
+    let response_status = response.status;
+    tracing::info!(
+        provider = VECTOR_ENGINE_PROVIDER,
+        endpoint = %request_url,
+        status = response_status,
+        image_model = model,
+        prompt_chars = prompt.chars().count(),
+        aspect_ratio,
+        image_size,
+        reference_image_count,
+        reference_image_bytes_total,
+        request_params = %request_params,
+        attempt,
+        elapsed_ms = started_at.elapsed().as_millis() as u64,
+        failure_context,
+        "VectorEngine nanobanana2 图片生成 HTTP 返回"
+    );
+    let response_text = response.body;
+    handle_vector_engine_response(
+        http_client,
+        request_url.as_str(),
+        response_status,
+        response_text.as_str(),
+        failure_context,
+        started_at.elapsed().as_millis() as u64,
+        Some(prompt.chars().count()),
+        Some(reference_image_count),
+        1,
+        "vector-engine-nanobanana",
+    )
+    .await
+}
+
 pub async fn create_vector_engine_image_edit(
     http_client: &reqwest::Client,
     settings: &VectorEngineImageSettings,
diff --git a/server-rs/crates/platform-image/src/vector_engine/mod.rs b/server-rs/crates/platform-image/src/vector_engine/mod.rs
index 698be30bc..f8d953e8a 100644
--- a/server-rs/crates/platform-image/src/vector_engine/mod.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/mod.rs
@@ -16,13 +16,16 @@ pub use client::{
     create_vector_engine_image_edit, create_vector_engine_image_edit_with_references,
     create_vector_engine_image_edit_with_references_and_model,
     create_vector_engine_image_generation, create_vector_engine_image_generation_with_model,
+    create_vector_engine_nanobanana_generate_content,
 };
 pub use constants::{GPT_IMAGE_2_MODEL, VECTOR_ENGINE_GPT_IMAGE_2_MODEL, VECTOR_ENGINE_PROVIDER};
 pub use error::{PlatformImageError, PlatformImageStatusHint};
 pub use image_source::download_remote_image;
 pub use request::{
     build_vector_engine_image_request_body, build_vector_engine_image_request_body_with_model,
-    normalize_image_size, vector_engine_images_edit_url, vector_engine_images_generation_url,
+    build_vector_engine_nanobanana_generate_content_request_body, normalize_image_size,
+    vector_engine_images_edit_url, vector_engine_images_generation_url,
+    vector_engine_nanobanana_generate_content_url,
 };
 pub use transport::build_vector_engine_image_http_client;
 pub use types::{DownloadedImage, GeneratedImages, ReferenceImage, VectorEngineImageSettings};
diff --git a/server-rs/crates/platform-image/src/vector_engine/payload.rs b/server-rs/crates/platform-image/src/vector_engine/payload.rs
index f7b4a8e68..9f5130a62 100644
--- a/server-rs/crates/platform-image/src/vector_engine/payload.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/payload.rs
@@ -88,9 +88,48 @@ pub(super) fn extract_image_urls(payload: &Value) -> Vec<String> {
 pub(super) fn extract_b64_images(payload: &Value) -> Vec<String> {
     let mut values = Vec::new();
     collect_strings_by_key(payload, "b64_json", &mut values);
+    collect_inline_image_data(payload, &mut values);
     values
 }
 
+fn collect_inline_image_data(value: &Value, results: &mut Vec<String>) {
+    match value {
+        Value::Array(entries) => {
+            for entry in entries {
+                collect_inline_image_data(entry, results);
+            }
+        }
+        Value::Object(object) => {
+            for key in ["inlineData", "inline_data"] {
+                if let Some(Value::Object(inline_data)) = object.get(key) {
+                    let mime_type = inline_data
+                        .get("mimeType")
+                        .or_else(|| inline_data.get("mime_type"))
+                        .and_then(Value::as_str)
+                        .map(str::trim)
+                        .unwrap_or("image/png")
+                        .to_ascii_lowercase();
+                    if !mime_type.is_empty() && !mime_type.starts_with("image/") {
+                        continue;
+                    }
+                    if let Some(data) = inline_data
+                        .get("data")
+                        .and_then(Value::as_str)
+                        .map(str::trim)
+                        .filter(|value| !value.is_empty())
+                    {
+                        results.push(data.to_string());
+                    }
+                }
+            }
+            for nested_value in object.values() {
+                collect_inline_image_data(nested_value, results);
+            }
+        }
+        _ => {}
+    }
+}
+
 pub(super) fn parse_api_error_message(raw_text: &str, fallback_message: &str) -> String {
     if raw_text.trim().is_empty() {
         return fallback_message.to_string();
diff --git a/server-rs/crates/platform-image/src/vector_engine/request.rs b/server-rs/crates/platform-image/src/vector_engine/request.rs
index 26219012c..930dc159c 100644
--- a/server-rs/crates/platform-image/src/vector_engine/request.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/request.rs
@@ -32,10 +32,7 @@ pub fn build_vector_engine_image_request_body_with_model(
 ) -> Value {
     let model = normalize_vector_engine_image_model(model);
     let body = Map::from_iter([
-        (
-            "model".to_string(),
-            Value::String(model.to_string()),
-        ),
+        ("model".to_string(), Value::String(model.to_string())),
         (
             "prompt".to_string(),
             Value::String(build_prompt_with_negative(prompt, negative_prompt)),
@@ -50,6 +47,42 @@ pub fn build_vector_engine_image_request_body_with_model(
     Value::Object(body)
 }
 
+pub fn build_vector_engine_nanobanana_generate_content_request_body(
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    aspect_ratio: &str,
+    image_size: &str,
+    reference_images: &[ReferenceImage],
+) -> Value {
+    let prompt = build_prompt_with_negative(prompt, negative_prompt);
+    let mut parts = vec![json!({ "text": prompt })];
+    for reference_image in reference_images.iter().take(14) {
+        parts.push(json!({
+            "inline_data": {
+                "mime_type": reference_image.mime_type,
+                "data": base64::Engine::encode(
+                    &base64::engine::general_purpose::STANDARD,
+                    reference_image.bytes.as_slice()
+                ),
+            },
+        }));
+    }
+
+    json!({
+        "contents": [{
+            "role": "user",
+            "parts": parts,
+        }],
+        "generationConfig": {
+            "responseModalities": ["IMAGE"],
+            "imageConfig": {
+                "aspectRatio": normalize_nanobanana_aspect_ratio(aspect_ratio),
+                "imageSize": normalize_nanobanana_image_size(image_size),
+            },
+        },
+    })
+}
+
 pub fn normalize_vector_engine_image_model(model: &str) -> &str {
     match model.trim() {
         "" => GPT_IMAGE_2_MODEL,
@@ -71,6 +104,31 @@ pub fn normalize_image_size(size: &str) -> String {
     .to_string()
 }
 
+fn normalize_nanobanana_aspect_ratio(aspect_ratio: &str) -> &str {
+    match aspect_ratio.trim() {
+        "2:3" => "2:3",
+        "3:2" => "3:2",
+        "3:4" => "3:4",
+        "4:3" => "4:3",
+        "4:5" => "4:5",
+        "5:4" => "5:4",
+        "9:16" => "9:16",
+        "16:9" => "16:9",
+        "21:9" => "21:9",
+        _ => "1:1",
+    }
+}
+
+fn normalize_nanobanana_image_size(image_size: &str) -> &str {
+    match image_size.trim() {
+        // 中文注释：nanobanana / Gemini 3.1 的 0.5K 在 VectorEngine 文档中要求传 512。
+        "512" | "0.5K" => "512",
+        "2K" => "2K",
+        "4K" => "4K",
+        _ => "1K",
+    }
+}
+
 pub fn vector_engine_images_generation_url(settings: &VectorEngineImageSettings) -> String {
     if settings.base_url.ends_with("/v1") {
         format!("{}/images/generations", settings.base_url)
@@ -87,6 +145,21 @@ pub fn vector_engine_images_edit_url(settings: &VectorEngineImageSettings) -> St
     }
 }
 
+pub fn vector_engine_nanobanana_generate_content_url(
+    settings: &VectorEngineImageSettings,
+    model: &str,
+) -> String {
+    let base_url = settings
+        .base_url
+        .trim_end_matches("/v1")
+        .trim_end_matches('/');
+    format!(
+        "{}/v1beta/models/{}:generateContent",
+        base_url,
+        normalize_vector_engine_image_model(model)
+    )
+}
+
 pub(crate) fn build_vector_engine_image_edit_request_log_params(
     model: &str,
     prompt: &str,
diff --git a/server-rs/crates/platform-image/src/vector_engine/tests.rs b/server-rs/crates/platform-image/src/vector_engine/tests.rs
index 1f1d6691f..dc9a37ea6 100644
--- a/server-rs/crates/platform-image/src/vector_engine/tests.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/tests.rs
@@ -66,8 +66,10 @@ mod tests {
         assert_eq!(reference.mime_type, "image/png");
         assert_eq!(reference.bytes, b"\x89PNG\r\n\x1A\nrest");
 
-        let image = decode_generated_image_base64(BASE64_STANDARD.encode(b"\x89PNG\r\n\x1A\nrest").as_str())
-            .expect("base64 image should decode");
+        let image = decode_generated_image_base64(
+            BASE64_STANDARD.encode(b"\x89PNG\r\n\x1A\nrest").as_str(),
+        )
+        .expect("base64 image should decode");
         assert_eq!(image.extension, "png");
         assert_eq!(image.mime_type, "image/png");
         assert_eq!(image.bytes, b"\x89PNG\r\n\x1A\nrest");
@@ -121,10 +123,22 @@ mod tests {
             audit: Some(audit.clone()),
         };
 
-        assert_eq!(invalid_config.status_hint(), PlatformImageStatusHint::ServiceUnavailable);
-        assert_eq!(invalid_request.status_hint(), PlatformImageStatusHint::BadRequest);
-        assert_eq!(request_error.status_hint(), PlatformImageStatusHint::GatewayTimeout);
-        assert_eq!(upstream_timeout.status_hint(), PlatformImageStatusHint::GatewayTimeout);
+        assert_eq!(
+            invalid_config.status_hint(),
+            PlatformImageStatusHint::ServiceUnavailable
+        );
+        assert_eq!(
+            invalid_request.status_hint(),
+            PlatformImageStatusHint::BadRequest
+        );
+        assert_eq!(
+            request_error.status_hint(),
+            PlatformImageStatusHint::GatewayTimeout
+        );
+        assert_eq!(
+            upstream_timeout.status_hint(),
+            PlatformImageStatusHint::GatewayTimeout
+        );
         assert_eq!(
             PlatformImageError::MissingImage {
                 provider: VECTOR_ENGINE_PROVIDER,
@@ -137,7 +151,10 @@ mod tests {
 
         let audit_ref = upstream_timeout.audit().expect("audit should be preserved");
         assert_eq!(audit_ref.provider, VECTOR_ENGINE_PROVIDER);
-        assert_eq!(audit_ref.endpoint, "https://vector.example/v1/images/generations");
+        assert_eq!(
+            audit_ref.endpoint,
+            "https://vector.example/v1/images/generations"
+        );
         assert_eq!(audit_ref.status_code, Some(504));
         assert_eq!(audit_ref.status_class, Some("5xx"));
         assert!(audit_ref.timeout);
@@ -158,7 +175,27 @@ mod tests {
                 {"url": "https://example.com/b.png"}
             ],
             "nested": {
-                "b64_json": ["YWJj", "ZGVm"]
+                "b64_json": ["YWJj", "ZGVm"],
+                "parts": [
+                    {
+                        "inlineData": {
+                            "mimeType": "image/png",
+                            "data": "aW1hZ2UtMQ=="
+                        }
+                    },
+                    {
+                        "inline_data": {
+                            "mime_type": "image/jpeg",
+                            "data": "aW1hZ2UtMg=="
+                        }
+                    },
+                    {
+                        "inlineData": {
+                            "mimeType": "text/plain",
+                            "data": "bm90LWltYWdl"
+                        }
+                    }
+                ]
             }
         });
 
@@ -171,7 +208,12 @@ mod tests {
         );
         assert_eq!(
             extract_b64_images(&payload),
-            vec!["YWJj".to_string(), "ZGVm".to_string()]
+            vec![
+                "YWJj".to_string(),
+                "ZGVm".to_string(),
+                "aW1hZ2UtMQ==".to_string(),
+                "aW1hZ2UtMg==".to_string(),
+            ]
         );
     }
 }
diff --git a/server-rs/crates/platform-image/tests/vector_engine.rs b/server-rs/crates/platform-image/tests/vector_engine.rs
index 208a3b9b2..ec757c685 100644
--- a/server-rs/crates/platform-image/tests/vector_engine.rs
+++ b/server-rs/crates/platform-image/tests/vector_engine.rs
@@ -1,9 +1,11 @@
 use platform_image::vector_engine::{
     GPT_IMAGE_2_MODEL, ReferenceImage, VECTOR_ENGINE_PROVIDER, VectorEngineImageSettings,
     build_vector_engine_image_http_client, build_vector_engine_image_request_body,
-    build_vector_engine_image_request_body_with_model, create_vector_engine_image_edit,
-    create_vector_engine_image_generation,
+    build_vector_engine_image_request_body_with_model,
+    build_vector_engine_nanobanana_generate_content_request_body, create_vector_engine_image_edit,
+    create_vector_engine_image_generation, create_vector_engine_nanobanana_generate_content,
     vector_engine_images_edit_url, vector_engine_images_generation_url,
+    vector_engine_nanobanana_generate_content_url,
 };
 use std::{
     sync::{
@@ -69,6 +71,60 @@ fn vector_engine_request_body_can_use_nanobanana2_model() {
     assert_eq!(body["n"], 1);
 }
 
+#[test]
+fn vector_engine_request_body_can_use_nanobanana2_half_k() {
+    let body = build_vector_engine_image_request_body_with_model(
+        "gemini-3.1-flash-image-preview",
+        "生成图标 spritesheet",
+        None,
+        "512",
+        1,
+        &[],
+    );
+
+    assert_eq!(body["model"], "gemini-3.1-flash-image-preview");
+    assert_eq!(body["size"], "512");
+}
+
+#[test]
+fn nanobanana_generate_content_body_carries_aspect_ratio_and_image_size() {
+    let body = build_vector_engine_nanobanana_generate_content_request_body(
+        "生成角色图",
+        Some("文字、水印"),
+        "2:3",
+        "512",
+        &[],
+    );
+
+    assert_eq!(body["contents"][0]["role"], "user");
+    assert_eq!(
+        body["contents"][0]["parts"][0]["text"],
+        "生成角色图\n避免：文字、水印"
+    );
+    assert_eq!(body["generationConfig"]["responseModalities"][0], "IMAGE");
+    assert_eq!(
+        body["generationConfig"]["imageConfig"]["aspectRatio"],
+        "2:3"
+    );
+    assert_eq!(body["generationConfig"]["imageConfig"]["imageSize"], "512");
+    assert!(body.get("model").is_none());
+    assert!(body.get("n").is_none());
+}
+
+#[test]
+fn nanobanana_generate_content_url_uses_model_path() {
+    let settings = VectorEngineImageSettings {
+        base_url: "https://vector.example/v1".to_string(),
+        api_key: "test-key".to_string(),
+        request_timeout_ms: 1_000,
+    };
+
+    assert_eq!(
+        vector_engine_nanobanana_generate_content_url(&settings, "gemini-3.1-flash-image-preview"),
+        "https://vector.example/v1beta/models/gemini-3.1-flash-image-preview:generateContent"
+    );
+}
+
 #[tokio::test]
 async fn vector_engine_image_edit_retries_send_timeout_once_and_succeeds() {
     let listener = TcpListener::bind("127.0.0.1:0")
@@ -136,6 +192,73 @@ async fn vector_engine_image_edit_retries_send_timeout_once_and_succeeds() {
     server.abort();
 }
 
+#[tokio::test]
+async fn nanobanana_generate_content_posts_native_body_and_reads_inline_data() {
+    let listener = TcpListener::bind("127.0.0.1:0")
+        .await
+        .expect("mock server should bind");
+    let server_addr = listener
+        .local_addr()
+        .expect("mock server address should be readable");
+    let server = tokio::spawn(async move {
+        let Ok((mut stream, _)) = listener.accept().await else {
+            return;
+        };
+        let mut request = Vec::new();
+        let mut buffer = [0_u8; 4096];
+        loop {
+            let Ok(read) = stream.read(&mut buffer).await else {
+                return;
+            };
+            if read == 0 {
+                return;
+            }
+            request.extend_from_slice(&buffer[..read]);
+            if request.windows(4).any(|window| window == b"\r\n\r\n") {
+                break;
+            }
+        }
+        let request_text = String::from_utf8_lossy(request.as_slice());
+        assert!(
+            request_text.contains("/v1beta/models/gemini-3.1-flash-image-preview:generateContent")
+        );
+        assert!(request_text.contains("\"aspectRatio\":\"2:3\""));
+        assert!(request_text.contains("\"imageSize\":\"512\""));
+
+        let body = r#"{"candidates":[{"content":{"parts":[{"inlineData":{"mimeType":"image/png","data":"iVBORw0KGgpyZXN0"}}]}}]}"#;
+        let response = format!(
+            "HTTP/1.1 200 OK\r\nContent-Type: application/json\r\nContent-Length: {}\r\n\r\n{}",
+            body.len(),
+            body
+        );
+        let _ = stream.write_all(response.as_bytes()).await;
+    });
+    let settings = VectorEngineImageSettings {
+        base_url: format!("http://{}", server_addr),
+        api_key: "test-key".to_string(),
+        request_timeout_ms: 1_000,
+    };
+    let client = build_vector_engine_image_http_client(&settings).expect("client should build");
+
+    let generated = create_vector_engine_nanobanana_generate_content(
+        &client,
+        &settings,
+        "gemini-3.1-flash-image-preview",
+        "生成角色图",
+        Some("文字、水印"),
+        "2:3",
+        "512",
+        &[],
+        "测试 nanobanana",
+    )
+    .await
+    .expect("nanobanana response should parse");
+
+    assert_eq!(generated.images.len(), 1);
+    assert_eq!(generated.images[0].mime_type, "image/png");
+    server.abort();
+}
+
 #[tokio::test]
 async fn vector_engine_image_generation_retries_upstream_502_once_and_succeeds() {
     let listener = TcpListener::bind("127.0.0.1:0")
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index b414eb1de..a07cc8f85 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -346,6 +346,38 @@ pub struct EditorCharacterAnimationGenerateResponse {
     pub price_mud_points: u32,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorVideoGenerateRequest {
+    pub prompt: String,
+    pub model: String,
+    pub aspect_ratio: String,
+    pub duration_seconds: u32,
+    pub resolution: String,
+    pub mode: String,
+    pub sound: String,
+    pub price_mud_points: u32,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorVideoGenerateResponse {
+    pub ok: bool,
+    pub video_src: String,
+    pub width: u32,
+    pub height: u32,
+    pub source_type: String,
+    pub prompt: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub actual_prompt: Option<String>,
+    pub model: String,
+    pub provider: String,
+    pub task_id: String,
+    pub duration_seconds: u32,
+    pub resolution: String,
+    pub price_mud_points: u32,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct CharacterAnimationDraftPayload {
@@ -908,6 +940,53 @@ mod tests {
         assert_eq!(payload["fps"], json!(8));
     }
 
+    #[test]
+    fn editor_video_request_supports_lovart_model_contract() {
+        let payload = serde_json::to_value(EditorVideoGenerateRequest {
+            prompt: "让角色向镜头挥手".to_string(),
+            model: "kling3.0-omni".to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 50,
+        })
+        .expect("request should serialize");
+
+        assert_eq!(payload["aspectRatio"], json!("16:9"));
+        assert_eq!(payload["durationSeconds"], json!(5));
+        assert_eq!(payload["priceMudPoints"], json!(50));
+        assert_eq!(payload["model"], json!("kling3.0-omni"));
+    }
+
+    #[test]
+    fn editor_video_response_uses_canvas_video_shape() {
+        let payload = serde_json::to_value(EditorVideoGenerateResponse {
+            ok: true,
+            video_src: "/generated-editor-videos/task-1/preview.mp4".to_string(),
+            width: 1280,
+            height: 720,
+            source_type: "generated".to_string(),
+            prompt: "让角色向镜头挥手".to_string(),
+            actual_prompt: Some("让角色向镜头挥手".to_string()),
+            model: "kling3.0-omni".to_string(),
+            provider: "VectorEngine".to_string(),
+            task_id: "task-1".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            price_mud_points: 50,
+        })
+        .expect("response should serialize");
+
+        assert_eq!(
+            payload["videoSrc"],
+            json!("/generated-editor-videos/task-1/preview.mp4")
+        );
+        assert_eq!(payload["sourceType"], json!("generated"));
+        assert_eq!(payload["durationSeconds"], json!(5));
+    }
+
     #[test]
     fn character_workflow_cache_response_keeps_legacy_shape() {
         let payload = serde_json::to_value(CharacterWorkflowCacheSaveResponse {
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 9e85e6fc0..c2dde13b6 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -150,6 +150,7 @@ export function serializeLayer(
     originalHeight: layer.originalHeight,
     zIndex: layer.zIndex,
     sourceType: layer.sourceType,
+    mediaType: layer.mediaType,
     prompt: layer.prompt,
     actualPrompt: layer.actualPrompt,
     model: layer.model,
@@ -207,6 +208,7 @@ export function hydrateLayer(
     sourceType: isCanvasSourceType(snapshot.sourceType)
       ? snapshot.sourceType
       : 'uploaded',
+    mediaType: snapshot.mediaType === 'video' ? 'video' : 'image',
     prompt: stringOrNull(snapshot.prompt),
     actualPrompt: stringOrNull(snapshot.actualPrompt),
     model: stringOrNull(snapshot.model),
@@ -406,7 +408,9 @@ export function canvasAssetKindOrNull(value: unknown): CanvasAssetKind | null {
   return value === 'spec' ||
     value === 'character' ||
     value === 'icon' ||
-    value === 'icon-spec'
+    value === 'icon-spec' ||
+    value === 'ui-design' ||
+    value === 'video'
     ? value
     : null;
 }
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 30bc68204..a0a56d243 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -7,12 +7,21 @@ import type {
 
 export type CanvasSourceType = 'uploaded' | 'generated' | 'mock_generated';
 
-export type CanvasAssetKind = 'spec' | 'character' | 'icon' | 'icon-spec';
+export type CanvasAssetKind =
+  | 'spec'
+  | 'character'
+  | 'icon'
+  | 'icon-spec'
+  | 'ui-design'
+  | 'video';
+
+export type CanvasMediaType = 'image' | 'video';
 
 export type EditorAsset = {
   id: string;
   label: string;
   src: string;
+  mediaType?: CanvasMediaType;
   width: number;
   height: number;
   folderId: string;
@@ -52,6 +61,7 @@ export type CanvasLayer = {
   resourceId: string;
   title: string;
   src: string;
+  mediaType?: CanvasMediaType;
   x: number;
   y: number;
   width: number;
@@ -89,9 +99,11 @@ export type CanvasTool =
   | 'hand'
   | 'upload'
   | 'generate'
+  | 'video'
   | 'spec'
   | 'character'
   | 'icon'
+  | 'ui-design'
   | 'text'
   | 'shape'
   | 'export';
@@ -124,7 +136,14 @@ export type CharacterReferenceImage = {
 
 export type GenerateDialogState = {
   id?: string;
-  mode: 'generate' | 'edit' | 'spec' | 'character' | 'icon';
+  mode:
+    | 'generate'
+    | 'edit'
+    | 'spec'
+    | 'character'
+    | 'icon'
+    | 'ui-design'
+    | 'video';
   prompt: string;
   status: 'idle' | 'generating' | 'failed';
   composerOpen?: boolean;
@@ -133,11 +152,19 @@ export type GenerateDialogState = {
   specType?: SpecGenerationType;
   specValues?: SpecFormValues;
   specReference?: CharacterReferenceImage | null;
+  generationReferences?: CharacterReferenceImage[];
   characterSpecReference?: CharacterReferenceImage | null;
   characterReferences?: CharacterReferenceImage[];
   iconSpecReference?: CharacterReferenceImage | null;
   iconDescriptions?: string[];
+  uiDesignSpecReference?: CharacterReferenceImage | null;
   imageModel?: string;
+  videoModel?: string;
+  videoAspectRatio?: string;
+  videoResolution?: string;
+  videoDurationSeconds?: 4 | 5;
+  videoMode?: 'std';
+  videoSound?: 'off';
   aspectRatio?: string;
   imageSize?: string;
   errorMessage?: string;
@@ -219,10 +246,12 @@ export type CharacterAnimationPanelState = {
 
 export type UploadTarget =
   | 'asset'
+  | 'generation-reference'
   | 'spec-reference'
   | 'character-spec'
   | 'character-reference'
-  | 'icon-spec';
+  | 'icon-spec'
+  | 'ui-design-icon-spec';
 
 export type SnapGuide = {
   vertical?: number;
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
new file mode 100644
index 000000000..23089a2f8
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -0,0 +1,296 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  createRef,
+  type ComponentProps,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { GenerateDialogState } from './ImageCanvasEditorTypes';
+import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
+
+function mockStateSetter<T>() {
+  return vi.fn() as unknown as Dispatch<SetStateAction<T>>;
+}
+
+function renderComposer(
+  generateDialog: GenerateDialogState,
+  overrides: Partial<
+    ComponentProps<typeof ImageCanvasGenerationComposerView>
+  > = {},
+) {
+  const props: ComponentProps<typeof ImageCanvasGenerationComposerView> = {
+    specToolWrapRef: createRef(),
+    characterSpecButtonRef: createRef(),
+    characterReferenceButtonRef: createRef(),
+    generationReferenceButtonRef: createRef(),
+    iconSpecButtonRef: createRef(),
+    isSpecMenuOpen: false,
+    isCharacterSpecMenuOpen: false,
+    isCharacterReferenceMenuOpen: false,
+    isGenerationReferenceMenuOpen: false,
+    isIconSpecMenuOpen: false,
+    isUiDesignSpecMenuOpen: false,
+    isPickingCharacterSpecFromCanvas: false,
+    isPickingCharacterReferenceFromCanvas: false,
+    isPickingGenerationReferenceFromCanvas: false,
+    isPickingIconSpecFromCanvas: false,
+    isPickingUiDesignSpecFromCanvas: false,
+    generateDialog,
+    generationComposerStyle: { left: 320, top: 240 },
+    iconComposerStyle: { left: 320, top: 240, width: '32rem' },
+    quickEditPanel: null,
+    quickEditSourceLayer: null,
+    quickEditPanelStyle: null,
+    quickEditSizeOptions: ['1024x1024'],
+    quickEditModelOptions: [{ label: 'gpt-image-2', value: 'gpt-image-2' }],
+    characterAnimationPanel: null,
+    characterAnimationSourceLayer: null,
+    characterAnimationPanelStyle: null,
+    characterAnimationPrice: 40,
+    setGenerateDialog: mockStateSetter<GenerateDialogState | null>(),
+    setQuickEditPanel:
+      mockStateSetter<
+        ComponentProps<
+          typeof ImageCanvasGenerationComposerView
+        >['quickEditPanel']
+      >(),
+    setCharacterAnimationPanel:
+      mockStateSetter<
+        ComponentProps<
+          typeof ImageCanvasGenerationComposerView
+        >['characterAnimationPanel']
+      >(),
+    setIsCharacterSpecMenuOpen: mockStateSetter<boolean>(),
+    setIsCharacterReferenceMenuOpen: mockStateSetter<boolean>(),
+    setIsGenerationReferenceMenuOpen: mockStateSetter<boolean>(),
+    setIsIconSpecMenuOpen: mockStateSetter<boolean>(),
+    setIsUiDesignSpecMenuOpen: mockStateSetter<boolean>(),
+    setIsPickingCharacterSpecFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingCharacterReferenceFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingGenerationReferenceFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingIconSpecFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingUiDesignSpecFromCanvas: mockStateSetter<boolean>(),
+    onOpenSpecDialog: vi.fn(),
+    onRequestUpload: vi.fn(),
+    onSubmitImageGeneration: vi.fn(),
+    onSubmitIconSpritesheetGeneration: vi.fn(),
+    onSubmitQuickEdit: vi.fn(),
+    onSubmitCharacterAnimation: vi.fn(),
+    onCloseGenerateComposer: vi.fn(),
+    onUpdateSpecFormValue: vi.fn(),
+    onUpdateIconDescription: vi.fn(),
+    onAddIconDescription: vi.fn(),
+    onUpdateCharacterAnimationDuration: vi.fn(),
+    onRememberImageModel: vi.fn(),
+    ...overrides,
+  };
+
+  return render(<ImageCanvasGenerationComposerView {...props} />);
+}
+
+describe('ImageCanvasGenerationComposerView', () => {
+  it('让生成UI设计图面板复用普通图片生成面板的纵向结构', () => {
+    renderComposer({
+      mode: 'ui-design',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      uiDesignSpecReference: null,
+      imageModel: 'gpt-image-2',
+      aspectRatio: '16:9',
+      imageSize: '1K',
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成UI设计图' });
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer',
+    );
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer--image',
+    );
+    expect(
+      within(panel).getByRole('button', { name: 'UI设计图标素材规范' })
+        .parentElement?.className,
+    ).toContain('image-canvas-editor__generation-ref');
+    expect(
+      within(panel).getByRole('textbox', { name: 'UI设计要求' }).className,
+    ).toContain('image-canvas-editor__generation-prompt');
+    expect(
+      panel.querySelector('.image-canvas-editor__generation-composer-footer'),
+    ).toBeTruthy();
+  });
+
+  it('让生成规范图片面板复用生成类面板 shell 和底部按钮结构', () => {
+    renderComposer({
+      mode: 'spec',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      specType: 'character',
+      specValues: {
+        playSetting: '战棋类RPG玩法',
+        artStyle: '像素风',
+        bodyRatio: '3',
+        characterView: '右向斜侧身站姿',
+        customPrompt: '',
+      },
+      specReference: null,
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer',
+    );
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer--image',
+    );
+    expect(
+      within(panel).getByRole('button', { name: '参考图' }).parentElement
+        ?.className,
+    ).toContain('image-canvas-editor__generation-ref');
+    expect(
+      panel.querySelector('.image-canvas-editor__generation-composer-footer'),
+    ).toBeTruthy();
+    expect(
+      within(panel).getByRole('button', { name: '提交生成规范' }).className,
+    ).toContain('image-canvas-editor__generation-submit');
+  });
+
+  it('让图标素材规范生成面板也保留首行参考区', () => {
+    renderComposer({
+      mode: 'spec',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      specType: 'icon',
+      specValues: {
+        playSetting: '休闲小游戏',
+        artStyle: '清爽卡通',
+        bodyRatio: '3',
+        characterView: '右向斜侧身站姿',
+        customPrompt: '',
+      },
+      specReference: null,
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    expect(
+      within(panel).getByRole('button', { name: '参考图' }).parentElement
+        ?.className,
+    ).toContain('image-canvas-editor__generation-ref');
+  });
+  it('生成图片参考图点击先弹来源菜单，不直接打开上传', () => {
+    const onRequestUpload = vi.fn();
+    const setIsGenerationReferenceMenuOpen = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'generate',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+      },
+      {
+        isGenerationReferenceMenuOpen: true,
+        onRequestUpload,
+        setIsGenerationReferenceMenuOpen,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成图片' });
+    fireEvent.click(within(panel).getByRole('button', { name: '添加参考图' }));
+
+    expect(onRequestUpload).not.toHaveBeenCalled();
+    expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(
+      within(menu).getByRole('menuitem', { name: '从画布中选择' }),
+    ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '上传图片' }),
+    ).toBeTruthy();
+  });
+
+  it('生成视频参考图点击先弹来源菜单，不直接打开上传', () => {
+    const onRequestUpload = vi.fn();
+    const setIsGenerationReferenceMenuOpen = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'video',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+        videoModel: 'seedance2.0',
+        videoAspectRatio: '16:9',
+        videoDurationSeconds: 4,
+        videoResolution: '480p',
+        videoMode: 'std',
+        videoSound: 'off',
+      },
+      {
+        isGenerationReferenceMenuOpen: true,
+        onRequestUpload,
+        setIsGenerationReferenceMenuOpen,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成视频' });
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '添加视频参考图' }),
+    );
+
+    expect(onRequestUpload).not.toHaveBeenCalled();
+    expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(
+      within(menu).getByRole('menuitem', { name: '从画布中选择' }),
+    ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '上传图片' }),
+    ).toBeTruthy();
+  });
+  it('生成规范参考图点击先弹来源菜单，不直接打开上传', () => {
+    const onRequestUpload = vi.fn();
+    const setIsGenerationReferenceMenuOpen = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'spec',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        specType: 'character',
+        specValues: {
+          playSetting: '战棋类RPG玩法',
+          artStyle: '像素风',
+          bodyRatio: '3',
+          characterView: '右向斜侧身站姿',
+          customPrompt: '',
+        },
+        specReference: null,
+      },
+      {
+        isGenerationReferenceMenuOpen: true,
+        onRequestUpload,
+        setIsGenerationReferenceMenuOpen,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    fireEvent.click(within(panel).getByRole('button', { name: '参考图' }));
+
+    expect(onRequestUpload).not.toHaveBeenCalled();
+    expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(within(menu).getByRole('menuitem', { name: '从画布中选择' })).toBeTruthy();
+    expect(within(menu).getByRole('menuitem', { name: '上传图片' })).toBeTruthy();
+  });
+});
+
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 6ad7874a2..af77efbc7 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -2,6 +2,7 @@ import type {
   EditorIconSpritesheetGenerationResult,
   EditorIconSpritesheetIconResult,
   EditorImageGenerationResult,
+  EditorVideoGenerationResult,
 } from '../../services/image-editor/editorProjectClient';
 import { resolveLayerResolutionSize } from './ImageCanvasEditorModel';
 import { ICON_FRAME_DISPLAY_SIZE } from './ImageCanvasGenerationModel';
@@ -43,6 +44,16 @@ type IconSpritesheetResultLayerOptions = {
   frame?: GenerateDialogState['placeholder'];
 };
 
+type VideoResultLayerOptions = {
+  generated: EditorVideoGenerationResult;
+  generatedIndex: number;
+  title: string;
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  generationInputs: CanvasGenerationInputs;
+  frame?: GenerateDialogState['placeholder'];
+};
+
 function getViewportWorldCenter({
   canvasSize,
   viewport,
@@ -235,3 +246,53 @@ export function createIconSpritesheetResultLayers({
     return layer;
   });
 }
+
+export function createVideoResultLayer({
+  generated,
+  generatedIndex,
+  title,
+  canvasSize,
+  viewport,
+  generationInputs,
+  frame,
+}: VideoResultLayerOptions): CanvasLayer {
+  const originalWidth = generated.width || 1280;
+  const originalHeight = generated.height || 720;
+  const { width, height } = resolveLayerResolutionSize(
+    originalWidth,
+    originalHeight,
+    { width: 560, height: 315 },
+  );
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  const frameX =
+    frame && frame.width > 0
+      ? frame.x + frame.width / 2 - width / 2
+      : undefined;
+  const frameY =
+    frame && frame.height > 0
+      ? frame.y + frame.height / 2 - height / 2
+      : undefined;
+
+  return {
+    id: `layer-video-${generatedIndex}`,
+    resourceId: `local-resource-video-${generatedIndex}`,
+    title,
+    src: generated.videoSrc,
+    mediaType: 'video',
+    assetKind: 'video',
+    x: frameX ?? worldCenter.x - width / 2,
+    y: frameY ?? worldCenter.y - height / 2,
+    width,
+    height,
+    originalWidth,
+    originalHeight,
+    zIndex: generatedIndex + 10,
+    sourceType: generated.sourceType,
+    prompt: generated.prompt,
+    actualPrompt: generated.actualPrompt ?? generated.prompt,
+    model: generated.model,
+    provider: generated.provider,
+    taskId: generated.taskId,
+    generationInputs,
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 7a119efc2..34e942e82 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -15,7 +15,23 @@ import type {
 } from './ImageCanvasEditorTypes';
 import { isGeneratedLayer } from './ImageCanvasEditorModel';
 
-export const SPEC_GENERATION_COST = 5;
+// 中文注释：与 api-server/src/editor_generation_config.rs 保持同名语义，当前作为前端展示兜底。
+export const EDITOR_GENERATION_MUD_POINT_CONFIG = {
+  image: 12,
+  spec: 5,
+  character: 12,
+  icon: 12,
+  uiDesign: 12,
+  videoPerSecond: {
+    '480p': 10,
+    '720p': 20,
+  },
+  characterAnimationPerSecond: {
+    '480p': 10,
+    '720p': 20,
+  },
+} as const;
+export const SPEC_GENERATION_COST = EDITOR_GENERATION_MUD_POINT_CONFIG.spec;
 export const SPEC_GENERATION_SIZE = '2048x1152';
 export const SPEC_FRAME_ORIGINAL_SIZE = { width: 2048, height: 1152 };
 export const SPEC_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
@@ -23,6 +39,8 @@ export const CHARACTER_FRAME_ORIGINAL_SIZE = { width: 2048, height: 2048 };
 export const CHARACTER_FRAME_DISPLAY_SIZE = { width: 420, height: 420 };
 export const ICON_FRAME_ORIGINAL_SIZE = { width: 512, height: 512 };
 export const ICON_FRAME_DISPLAY_SIZE = { width: 360, height: 360 };
+export const UI_DESIGN_FRAME_ORIGINAL_SIZE = { width: 2048, height: 1152 };
+export const UI_DESIGN_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
 export const IMAGE_MODEL_GPT_IMAGE_2 = 'gpt-image-2';
 export const IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 export const DEFAULT_IMAGE_MODEL = IMAGE_MODEL_NANOBANANA2;
@@ -86,6 +104,18 @@ export const CHARACTER_ANIMATION_DURATION_OPTIONS = [
   { label: '40帧·5秒', frameCount: 40, durationSeconds: 5 },
   { label: '48帧·6秒', frameCount: 48, durationSeconds: 6 },
 ] as const;
+export const VIDEO_FRAME_ORIGINAL_SIZE = { width: 1280, height: 720 };
+export const VIDEO_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
+export const EDITOR_VIDEO_MODEL_OPTIONS = [
+  { label: 'Seedance 2.0', value: 'seedance2.0' },
+  { label: 'Seedance 2.0 Fast', value: 'seedance2.0-fast' },
+  { label: 'Kling 3.0', value: 'kling3.0' },
+  { label: 'Kling 3.0 Omni', value: 'kling3.0-omni' },
+] as const;
+export const EDITOR_VIDEO_DURATION_OPTIONS = [
+  { label: '4秒', value: '4' },
+  { label: '5秒', value: '5' },
+] as const;
 
 export const DEFAULT_SPEC_FORM_VALUES: Record<
   SpecGenerationType,
@@ -215,6 +245,12 @@ export function getLayerKindLabel(layer: CanvasLayer) {
   if (layer.assetKind === 'icon-spec') {
     return '图标规范';
   }
+  if (layer.assetKind === 'ui-design') {
+    return 'UI设计';
+  }
+  if (layer.assetKind === 'video' || layer.mediaType === 'video') {
+    return '视频';
+  }
   return null;
 }
 
@@ -231,6 +267,12 @@ export function formatLayerImageType(layer: CanvasLayer) {
   if (layer.assetKind === 'icon-spec') {
     return '图标素材规范图片';
   }
+  if (layer.assetKind === 'ui-design') {
+    return 'UI设计图';
+  }
+  if (layer.assetKind === 'video' || layer.mediaType === 'video') {
+    return '生成视频';
+  }
   return isGeneratedLayer(layer) ? '生成图片' : '上传图片';
 }
 
@@ -238,7 +280,20 @@ export function calculateCharacterAnimationPrice(
   resolution: EditorCharacterAnimationResolution,
   durationSeconds: number,
 ) {
-  return (resolution === '720p' ? 20 : 10) * durationSeconds;
+  return (
+    EDITOR_GENERATION_MUD_POINT_CONFIG.characterAnimationPerSecond[resolution] *
+    durationSeconds
+  );
+}
+
+export function calculateEditorVideoPrice(
+  resolution: '480p' | '720p',
+  durationSeconds: number,
+) {
+  return (
+    EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond[resolution] *
+    durationSeconds
+  );
 }
 
 export function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
@@ -264,10 +319,31 @@ export function createGenerationInputField(
   return normalizedValue ? [{ title, value: normalizedValue }] : [];
 }
 
-export function buildImageGenerationInputs(prompt: string): CanvasGenerationInputs {
+export function buildImageGenerationInputs(
+  prompt: string,
+  references?: CharacterReferenceImage[],
+): CanvasGenerationInputs {
   return {
     fields: createGenerationInputField('生成提示词', prompt),
-    references: [],
+    references: (references ?? []).map((reference, index) => ({
+      title: `参考图 ${index + 1}`,
+      label: reference.label,
+      src: reference.src,
+    })),
+  };
+}
+
+export function buildVideoGenerationInputs(
+  prompt: string,
+  references?: CharacterReferenceImage[],
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField('视频描述', prompt),
+    references: (references ?? []).map((reference, index) => ({
+      title: `参考图 ${index + 1}`,
+      label: reference.label,
+      src: reference.src,
+    })),
   };
 }
 
@@ -328,6 +404,24 @@ export function buildCharacterGenerationInputs(
   };
 }
 
+export function buildUiDesignGenerationInputs(
+  prompt: string,
+  specReference: CharacterReferenceImage | null | undefined,
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField('用户输入', prompt),
+    references: specReference
+      ? [
+          {
+            title: '图标素材规范',
+            label: specReference.label,
+            src: specReference.src,
+          },
+        ]
+      : [],
+  };
+}
+
 export function buildIconGenerationInputs(
   iconDescriptions: string[],
   specReference: CharacterReferenceImage,
@@ -372,7 +466,9 @@ export function isCanvasGenerationDialog(
       (dialog.mode === 'generate' ||
         dialog.mode === 'spec' ||
         dialog.mode === 'character' ||
-        dialog.mode === 'icon'),
+        dialog.mode === 'icon' ||
+        dialog.mode === 'ui-design' ||
+        dialog.mode === 'video'),
   );
 }
 
@@ -388,6 +484,12 @@ export function getGenerationFrameAriaLabel(
   if (dialog.mode === 'icon') {
     return '图标素材生成占位图';
   }
+  if (dialog.mode === 'ui-design') {
+    return 'UI设计图生成占位图';
+  }
+  if (dialog.mode === 'video') {
+    return '视频生成占位图';
+  }
   return '图像生成占位图';
 }
 
@@ -401,6 +503,12 @@ export function getGenerationFrameLabel(dialog: CanvasGenerationDialogState) {
   if (dialog.mode === 'icon') {
     return 'Icon Generator';
   }
+  if (dialog.mode === 'ui-design') {
+    return 'UI Design Generator';
+  }
+  if (dialog.mode === 'video') {
+    return 'Video Generator';
+  }
   return 'Image Generator';
 }
 
diff --git a/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts b/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
new file mode 100644
index 000000000..c3b81995c
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  chooseGenerationPlacement,
+  centerViewportOnPlacement,
+} from './ImageCanvasGenerationPlacementModel';
+import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
+
+const canvasSize = { width: 900, height: 640 };
+const viewport: CanvasViewport = { x: 10, y: 20, scale: 2 };
+const frame = {
+  x: 0,
+  y: 0,
+  width: 420,
+  height: 420,
+  originalWidth: 2048,
+  originalHeight: 2048,
+};
+
+function layer(overrides: Partial<CanvasLayer>): CanvasLayer {
+  return {
+    id: 'layer-1',
+    resourceId: 'resource-1',
+    title: '图片',
+    src: '/image.png',
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    originalWidth: 100,
+    originalHeight: 100,
+    zIndex: 1,
+    sourceType: 'uploaded',
+    ...overrides,
+  };
+}
+
+describe('ImageCanvasGenerationPlacementModel', () => {
+  it('places an empty-canvas generation frame at the current viewport center', () => {
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame,
+      layers: [],
+      generationDialogs: [],
+    });
+
+    expect(placement).toEqual({
+      x: 10,
+      y: -60,
+      width: 420,
+      height: 420,
+      originalWidth: 2048,
+      originalHeight: 2048,
+    });
+  });
+
+  it('keeps the nearest non-overlapping gap from visible layers and generation placeholders', () => {
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame: { ...frame, width: 100, height: 100 },
+      layers: [
+        layer({ id: 'center', x: 170, y: 110, width: 120, height: 120 }),
+        layer({ id: 'right', x: 322, y: 110, width: 100, height: 120 }),
+        layer({
+          id: 'hidden',
+          hidden: true,
+          x: 18,
+          y: 118,
+          width: 100,
+          height: 100,
+        }),
+      ],
+      generationDialogs: [
+        {
+          id: 'dialog-left',
+          mode: 'generate',
+          prompt: '',
+          status: 'idle',
+          placeholder: {
+            x: 18,
+            y: 118,
+            width: 100,
+            height: 100,
+            originalWidth: 2048,
+            originalHeight: 2048,
+          },
+        },
+      ],
+    });
+
+    expect(placement.x).toBe(170);
+    expect(placement.y).toBe(-22);
+  });
+
+  it('centers the viewport on the chosen placement without changing zoom', () => {
+    const nextViewport = centerViewportOnPlacement({
+      canvasSize,
+      viewport,
+      placement: {
+        x: 170,
+        y: 262,
+        width: 100,
+        height: 100,
+        originalWidth: 2048,
+        originalHeight: 2048,
+      },
+    });
+
+    expect(nextViewport).toEqual({ x: 10, y: -304, scale: 2 });
+  });
+});
diff --git a/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts b/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
new file mode 100644
index 000000000..d7a85b840
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
@@ -0,0 +1,257 @@
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+  GenerateDialogState,
+} from './ImageCanvasEditorTypes';
+
+type CanvasSize = { width: number; height: number };
+type GenerationFrame = NonNullable<GenerateDialogState['placeholder']>;
+type Rect = { x: number; y: number; width: number; height: number };
+
+const GENERATION_PLACEMENT_GAP = 32;
+const MAX_PLACEMENT_RING = 12;
+
+function getViewportWorldCenter({
+  canvasSize,
+  viewport,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+}) {
+  const safeScale = viewport.scale > 0 ? viewport.scale : 1;
+  return {
+    x: (canvasSize.width / 2 - viewport.x) / safeScale,
+    y: (canvasSize.height / 2 - viewport.y) / safeScale,
+  };
+}
+
+function expandRect(rect: Rect, gap: number): Rect {
+  return {
+    x: rect.x - gap,
+    y: rect.y - gap,
+    width: rect.width + gap * 2,
+    height: rect.height + gap * 2,
+  };
+}
+
+function rectsOverlap(a: Rect, b: Rect) {
+  return (
+    a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y
+  );
+}
+
+function distanceSquared(
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return dx * dx + dy * dy;
+}
+
+function buildBlockingRects({
+  layers,
+  generationDialogs,
+}: {
+  layers: CanvasLayer[];
+  generationDialogs: CanvasGenerationDialogState[];
+}) {
+  return [
+    ...layers
+      .filter((layer) => !layer.hidden)
+      .map((layer) => ({
+        x: layer.x,
+        y: layer.y,
+        width: layer.width,
+        height: layer.height,
+      })),
+    ...generationDialogs.flatMap((dialog) =>
+      dialog.placeholder
+        ? [
+            {
+              x: dialog.placeholder.x,
+              y: dialog.placeholder.y,
+              width: dialog.placeholder.width,
+              height: dialog.placeholder.height,
+            },
+          ]
+        : [],
+    ),
+  ].map((rect) => expandRect(rect, GENERATION_PLACEMENT_GAP));
+}
+
+function isFree(candidate: Rect, blockingRects: Rect[]) {
+  return !blockingRects.some((rect) => rectsOverlap(candidate, rect));
+}
+
+function createCandidate({
+  center,
+  frame,
+  offsetX,
+  offsetY,
+}: {
+  center: { x: number; y: number };
+  frame: Pick<GenerationFrame, 'width' | 'height'>;
+  offsetX: number;
+  offsetY: number;
+}): Rect {
+  return {
+    x: center.x - frame.width / 2 + offsetX,
+    y: center.y - frame.height / 2 + offsetY,
+    width: frame.width,
+    height: frame.height,
+  };
+}
+
+function pushUniqueCandidate(candidates: Rect[], candidate: Rect) {
+  if (
+    candidates.some(
+      (current) => current.x === candidate.x && current.y === candidate.y,
+    )
+  ) {
+    return;
+  }
+  candidates.push(candidate);
+}
+
+function buildPlacementCandidates({
+  center,
+  frame,
+  blockingRects,
+}: {
+  center: { x: number; y: number };
+  frame: Pick<GenerationFrame, 'width' | 'height'>;
+  blockingRects: Rect[];
+}) {
+  const baseX = center.x - frame.width / 2;
+  const baseY = center.y - frame.height / 2;
+  const stepX = frame.width + GENERATION_PLACEMENT_GAP;
+  const stepY = frame.height + GENERATION_PLACEMENT_GAP;
+  const candidates: Rect[] = [];
+  pushUniqueCandidate(candidates, {
+    x: baseX,
+    y: baseY,
+    width: frame.width,
+    height: frame.height,
+  });
+
+  blockingRects.forEach((rect) => {
+    [
+      { x: rect.x + rect.width, y: baseY },
+      { x: baseX, y: rect.y + rect.height },
+      { x: rect.x - frame.width, y: baseY },
+      { x: baseX, y: rect.y - frame.height },
+      { x: rect.x + rect.width, y: rect.y + rect.height },
+      { x: rect.x - frame.width, y: rect.y + rect.height },
+      { x: rect.x + rect.width, y: rect.y - frame.height },
+      { x: rect.x - frame.width, y: rect.y - frame.height },
+    ].forEach((candidate) =>
+      pushUniqueCandidate(candidates, {
+        ...candidate,
+        width: frame.width,
+        height: frame.height,
+      }),
+    );
+  });
+
+  for (let ring = 1; ring <= MAX_PLACEMENT_RING; ring += 1) {
+    const offsets = [
+      { x: ring, y: 0 },
+      { x: 0, y: ring },
+      { x: -ring, y: 0 },
+      { x: 0, y: -ring },
+      { x: ring, y: ring },
+      { x: -ring, y: ring },
+      { x: ring, y: -ring },
+      { x: -ring, y: -ring },
+    ];
+    offsets.forEach((offset) =>
+      pushUniqueCandidate(
+        candidates,
+        createCandidate({
+          center,
+          frame,
+          offsetX: offset.x * stepX,
+          offsetY: offset.y * stepY,
+        }),
+      ),
+    );
+  }
+
+  return candidates.sort((a, b) => {
+    const aDistance = distanceSquared(
+      { x: a.x + a.width / 2, y: a.y + a.height / 2 },
+      center,
+    );
+    const bDistance = distanceSquared(
+      { x: b.x + b.width / 2, y: b.y + b.height / 2 },
+      center,
+    );
+    if (aDistance !== bDistance) {
+      return aDistance - bDistance;
+    }
+    const aDownBias = a.y >= baseY ? 0 : 1;
+    const bDownBias = b.y >= baseY ? 0 : 1;
+    if (aDownBias !== bDownBias) {
+      return aDownBias - bDownBias;
+    }
+    if (a.x !== b.x) {
+      return a.x - b.x;
+    }
+    return a.y - b.y;
+  });
+}
+
+export function chooseGenerationPlacement({
+  canvasSize,
+  viewport,
+  frame,
+  layers,
+  generationDialogs,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  frame: GenerationFrame;
+  layers: CanvasLayer[];
+  generationDialogs: CanvasGenerationDialogState[];
+}): GenerationFrame {
+  const center = getViewportWorldCenter({ canvasSize, viewport });
+  const blockingRects = buildBlockingRects({ layers, generationDialogs });
+  const candidates = buildPlacementCandidates({ center, frame, blockingRects });
+  const fallbackPlacement = createCandidate({
+    center,
+    frame,
+    offsetX: 0,
+    offsetY: 0,
+  });
+  const placement =
+    candidates.find((candidate) => isFree(candidate, blockingRects)) ??
+    fallbackPlacement;
+
+  return {
+    ...frame,
+    x: placement.x,
+    y: placement.y,
+  };
+}
+
+export function centerViewportOnPlacement({
+  canvasSize,
+  viewport,
+  placement,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  placement: GenerationFrame;
+}): CanvasViewport {
+  const scale = viewport.scale > 0 ? viewport.scale : 1;
+  return {
+    x: canvasSize.width / 2 - (placement.x + placement.width / 2) * scale,
+    y: canvasSize.height / 2 - (placement.y + placement.height / 2) * scale,
+    scale,
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
index 2263bdf0d..1b4837d70 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
@@ -95,6 +95,42 @@ describe('ImageCanvasMetadataModalView', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('renders generated video metadata with video labels and close action', () => {
+    const onClose = vi.fn();
+    render(
+      <ImageCanvasMetadataModalView
+        layer={createLayer({
+          title: '生成视频 1',
+          src: '/generated-editor-videos/video-task-1/preview.mp4',
+          mediaType: 'video',
+          assetKind: 'video',
+          originalWidth: 1280,
+          originalHeight: 720,
+          model: 'kling3.0-omni',
+          taskId: 'video-task-1',
+          generationInputs: {
+            fields: [{ title: '视频描述', value: '让角色向镜头挥手' }],
+            references: [],
+          },
+        })}
+        onClose={onClose}
+      />,
+    );
+
+    const dialog = screen.getByRole('dialog', { name: '视频信息' });
+
+    expect(within(dialog).getByText('视频类型')).toBeTruthy();
+    expect(within(dialog).getByText('生成视频')).toBeTruthy();
+    expect(within(dialog).getByText('视频描述')).toBeTruthy();
+    expect(within(dialog).getByText('让角色向镜头挥手')).toBeTruthy();
+    expect(within(dialog).getByText('kling3.0-omni')).toBeTruthy();
+    expect(within(dialog).getByText('1280 x 720 px')).toBeTruthy();
+
+    fireEvent.click(within(dialog).getByRole('button', { name: '关闭视频信息' }));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   it('does not render a dialog when no layer is selected', () => {
     render(<ImageCanvasMetadataModalView layer={null} onClose={vi.fn()} />);
 
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index 628ea40b3..c66dc0375 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -19,16 +19,16 @@ export function ImageCanvasMetadataModalView({
   return (
     <UnifiedModal
       open={Boolean(layer)}
-      title="图片信息"
+      title={layer?.mediaType === 'video' ? '视频信息' : '图片信息'}
       size="sm"
-      closeLabel="关闭图片信息"
+      closeLabel={layer?.mediaType === 'video' ? '关闭视频信息' : '关闭图片信息'}
       onClose={onClose}
       panelClassName="image-canvas-editor__metadata-dialog"
       bodyClassName="image-canvas-editor__metadata-body"
     >
       {layer ? (
         <dl className="image-canvas-editor__metadata-grid">
-          <dt>图片类型</dt>
+          <dt>{layer.mediaType === 'video' ? '视频类型' : '图片类型'}</dt>
           <dd>{formatLayerImageType(layer)}</dd>
           <dt>生成输入</dt>
           <dd className="image-canvas-editor__metadata-inputs">
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 6569c3801..ef29319e8 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -1,6 +1,12 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -72,10 +78,13 @@ function createGenerated(overrides = {}) {
 
 function GenerationWorkflowHarness({
   initialLayers = [createLayer()],
+  initialViewport = { x: 10, y: 20, scale: 2 },
 }: {
   initialLayers?: CanvasLayer[];
+  initialViewport?: { x: number; y: number; scale: number };
 }) {
   const [layers, setLayers] = useState<CanvasLayer[]>(initialLayers);
+  const [viewport, setViewport] = useState(initialViewport);
   const [activeTool, setActiveTool] = useState<CanvasTool>('select');
   const [activeSidebarPanel, setActiveSidebarPanel] =
     useState<SidebarPanel | null>('assets');
@@ -93,7 +102,9 @@ function GenerationWorkflowHarness({
   const workflow = useImageCanvasGenerationWorkflow({
     layers,
     canvasSize: { width: 900, height: 640 },
-    viewport: { x: 10, y: 20, scale: 2 },
+    viewport,
+    setViewport,
+    canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     layerCounterRef,
     generateDialog: dialogs.generateDialog,
     setGenerateDialog: dialogs.setGenerateDialog,
@@ -126,6 +137,12 @@ function GenerationWorkflowHarness({
       <span data-testid="selected">{selectedLayerId ?? '-'}</span>
       <span data-testid="metadata">{metadataLayer?.id ?? '-'}</span>
       <span data-testid="image-context">{imageContextMenu ? 'open' : '-'}</span>
+      <span data-testid="viewport">{`${viewport.x}:${viewport.y}:${viewport.scale}`}</span>
+      <span data-testid="placeholder">
+        {activeDialog?.placeholder
+          ? `${activeDialog.placeholder.x}:${activeDialog.placeholder.y}:${activeDialog.placeholder.width}:${activeDialog.placeholder.height}`
+          : '-'}
+      </span>
       <span data-testid="layers">
         {layers
           .map(
@@ -139,6 +156,11 @@ function GenerationWorkflowHarness({
           ? `${activeDialog.mode}:${activeDialog.status}:${activeDialog.composerOpen !== false ? 'open' : 'closed'}:${activeDialog.generatedLayerId ?? '-'}:${activeDialog.placeholder ? 'placeholder' : '-'}`
           : '-'}
       </span>
+      <span data-testid="generation-references">
+        {activeDialog?.generationReferences
+          ?.map((reference) => reference.label)
+          .join('|') ?? '-'}
+      </span>
       <span data-testid="quick-edit">
         {workflow.quickEditPanel
           ? `${workflow.quickEditPanel.sourceLayerId}:${workflow.quickEditPanel.status}:${workflow.quickEditPanel.prompt || '-'}`
@@ -190,7 +212,9 @@ function GenerationWorkflowHarness({
       <button
         type="button"
         onClick={() =>
-          workflow.openCharacterAnimationPanel(createLayer({ id: 'layer-plain' }))
+          workflow.openCharacterAnimationPanel(
+            createLayer({ id: 'layer-plain' }),
+          )
         }
       >
         打开普通动画
@@ -217,6 +241,16 @@ function GenerationWorkflowHarness({
       >
         提交生成
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.pickGenerationReferenceFromLayer(
+            createLayer({ id: 'layer-reference', title: '画布参考图' }),
+          )
+        }
+      >
+        选择画布参考图
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -240,21 +274,22 @@ function GenerationWorkflowHarness({
         type="button"
         onClick={() =>
           workflow.setQuickEditPanel((currentPanel) =>
-            currentPanel ? { ...currentPanel, prompt: '快速修图' } : currentPanel,
+            currentPanel
+              ? { ...currentPanel, prompt: '快速修图' }
+              : currentPanel,
           )
         }
       >
         填写快速编辑
       </button>
-      <button
-        type="button"
-        onClick={() => void workflow.submitQuickEdit()}
-      >
+      <button type="button" onClick={() => void workflow.submitQuickEdit()}>
         提交快速编辑
       </button>
       <button
         type="button"
-        onClick={() => workflow.clearDeletedLayerGenerationState('layer-source')}
+        onClick={() =>
+          workflow.clearDeletedLayerGenerationState('layer-source')
+        }
       >
         清理源图状态
       </button>
@@ -298,6 +333,29 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('places a new generation placeholder away from existing canvas images and centers the viewport on it', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            id: 'center-layer',
+            x: 0,
+            y: -80,
+            width: 460,
+            height: 460,
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '打开生成' }));
+
+    expect(screen.getByTestId('placeholder').textContent).toBe(
+      '-452:-60:420:420',
+    );
+    expect(screen.getByTestId('viewport').textContent).toBe('934:20:2');
+  });
+
   it('submits a normal generation, appends the generated layer, and keeps the composer anchored', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '一张生成图' }),
@@ -329,6 +387,30 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('adds picked canvas layers as normal generation references and submits them', async () => {
+    generateEditorImageMock.mockResolvedValueOnce(
+      createGenerated({ prompt: '参考生成图' }),
+    );
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择画布参考图' }));
+
+    expect(screen.getByTestId('generation-references').textContent).toBe(
+      '画布参考图',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '填写生成提示词' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交生成' }));
+
+    await waitFor(() => {
+      expect(generateEditorImageMock).toHaveBeenCalledWith({
+        prompt: '一张生成图',
+        referenceImageSrcs: ['data:image/png;base64,source'],
+      });
+    });
+  });
+
   it('submits spec generation with reference image and reference prompt semantics', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: 'UI规范图' }),
@@ -344,6 +426,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         expect.objectContaining({
           size: '2048x1152',
           kind: 'spec',
+          model: 'gpt-image-2',
           referenceImageSrcs: ['data:image/png;base64,ref'],
           prompt: expect.stringContaining('参考图生成规范'),
         }),
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
index 1f44b871c..e246a8994 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
@@ -78,6 +78,8 @@ function KeyboardShortcutsHarness({
   const [imageContextMenuOpen, setImageContextMenuOpen] = useState(true);
   const [contextMenuOpen, setContextMenuOpen] = useState(true);
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(true);
+  const [, setIsGenerationReferenceMenuOpen] = useState(true);
+  const [, setIsPickingGenerationReferenceFromCanvas] = useState(true);
   const [isCharacterSpecMenuOpen, setIsCharacterSpecMenuOpen] = useState(true);
   const [isCharacterReferenceMenuOpen, setIsCharacterReferenceMenuOpen] =
     useState(true);
@@ -90,6 +92,9 @@ function KeyboardShortcutsHarness({
   const [isIconSpecMenuOpen, setIsIconSpecMenuOpen] = useState(true);
   const [isPickingIconSpecFromCanvas, setIsPickingIconSpecFromCanvas] =
     useState(true);
+  const [, setIsUiDesignSpecMenuOpen] = useState(true);
+  const [, setIsPickingUiDesignSpecFromCanvas] =
+    useState(true);
   const [isSpacePanning, setIsSpacePanning] = useState(false);
   const [shiftPressed, setShiftPressed] = useState(false);
   const generateDialogRef = useRef<GenerateDialogState | null>(generateDialog);
@@ -116,12 +121,16 @@ function KeyboardShortcutsHarness({
       ),
     closeEditorChromePanels,
     setIsSpecMenuOpen,
+    setIsGenerationReferenceMenuOpen,
+    setIsPickingGenerationReferenceFromCanvas,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
     setIsPickingCharacterSpecFromCanvas,
     setIsPickingCharacterReferenceFromCanvas,
     setIsIconSpecMenuOpen,
     setIsPickingIconSpecFromCanvas,
+    setIsUiDesignSpecMenuOpen,
+    setIsPickingUiDesignSpecFromCanvas,
     setIsSpacePanning,
     setShiftPressed,
   });
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
index ed2fd4795..982f66369 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
@@ -30,12 +30,16 @@ type UseImageCanvasKeyboardShortcutsOptions = {
   ) => void;
   closeEditorChromePanels: () => void;
   setIsSpecMenuOpen: (open: boolean) => void;
+  setIsGenerationReferenceMenuOpen: (open: boolean) => void;
+  setIsPickingGenerationReferenceFromCanvas: (picking: boolean) => void;
   setIsCharacterSpecMenuOpen: (open: boolean) => void;
   setIsCharacterReferenceMenuOpen: (open: boolean) => void;
   setIsPickingCharacterSpecFromCanvas: (picking: boolean) => void;
   setIsPickingCharacterReferenceFromCanvas: (picking: boolean) => void;
   setIsIconSpecMenuOpen: (open: boolean) => void;
   setIsPickingIconSpecFromCanvas: (picking: boolean) => void;
+  setIsUiDesignSpecMenuOpen: (open: boolean) => void;
+  setIsPickingUiDesignSpecFromCanvas: (picking: boolean) => void;
   setIsSpacePanning: (panning: boolean) => void;
   setShiftPressed: (pressed: boolean) => void;
 };
@@ -61,7 +65,8 @@ function isCanvasGenerationPlaceholderDialog(
     (dialog?.mode === 'generate' ||
       dialog?.mode === 'spec' ||
       dialog?.mode === 'character' ||
-      dialog?.mode === 'icon')
+      dialog?.mode === 'icon' ||
+      dialog?.mode === 'ui-design')
   );
 }
 
@@ -78,12 +83,16 @@ export function useImageCanvasKeyboardShortcuts({
   setQuickEditPanel,
   closeEditorChromePanels,
   setIsSpecMenuOpen,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
   setIsCharacterSpecMenuOpen,
   setIsCharacterReferenceMenuOpen,
   setIsPickingCharacterSpecFromCanvas,
   setIsPickingCharacterReferenceFromCanvas,
   setIsIconSpecMenuOpen,
   setIsPickingIconSpecFromCanvas,
+  setIsUiDesignSpecMenuOpen,
+  setIsPickingUiDesignSpecFromCanvas,
   setIsSpacePanning,
   setShiftPressed,
 }: UseImageCanvasKeyboardShortcutsOptions) {
@@ -91,6 +100,8 @@ export function useImageCanvasKeyboardShortcuts({
     const closeTransientEditorPanels = () => {
       closeEditorChromePanels();
       setIsSpecMenuOpen(false);
+      setIsGenerationReferenceMenuOpen(false);
+      setIsPickingGenerationReferenceFromCanvas(false);
       setImageContextMenu(null);
       setContextMenu(null);
       setQuickEditPanel((currentPanel) =>
@@ -102,6 +113,8 @@ export function useImageCanvasKeyboardShortcuts({
       setIsPickingCharacterReferenceFromCanvas(false);
       setIsIconSpecMenuOpen(false);
       setIsPickingIconSpecFromCanvas(false);
+      setIsUiDesignSpecMenuOpen(false);
+      setIsPickingUiDesignSpecFromCanvas(false);
       setGenerateDialog((currentDialog) => {
         if (!currentDialog || currentDialog.status === 'generating') {
           return currentDialog;
@@ -118,6 +131,9 @@ export function useImageCanvasKeyboardShortcuts({
         if (currentDialog.mode === 'icon') {
           return currentDialog;
         }
+        if (currentDialog.mode === 'ui-design') {
+          return currentDialog;
+        }
         return null;
       });
     };
@@ -154,6 +170,8 @@ export function useImageCanvasKeyboardShortcuts({
           event.preventDefault();
           setGenerateDialog(null);
           setActiveTool('select');
+          setIsGenerationReferenceMenuOpen(false);
+          setIsPickingGenerationReferenceFromCanvas(false);
           setIsCharacterSpecMenuOpen(false);
           setIsCharacterReferenceMenuOpen(false);
           setIsPickingCharacterSpecFromCanvas(false);
@@ -200,6 +218,8 @@ export function useImageCanvasKeyboardShortcuts({
     setContextMenu,
     setGenerateDialog,
     setImageContextMenu,
+    setIsGenerationReferenceMenuOpen,
+    setIsPickingGenerationReferenceFromCanvas,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
     setIsIconSpecMenuOpen,
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
index df67f5055..8b8fe15fa 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
@@ -108,13 +108,17 @@ function asCanvasGenerationDialog(
 
 function StageInteractionsHarness({
   pickCharacterSpecFromLayer = vi.fn(),
+  pickGenerationReferenceFromLayer = vi.fn(),
   pickIconSpecFromLayer = vi.fn(),
+  isPickingGenerationReferenceFromCanvas = false,
   activateCanvasGenerationDialog = vi.fn(),
   moveViewportFromMinimapPointer = vi.fn(),
   updateViewportFromMinimapDrag = vi.fn(),
 }: {
   pickCharacterSpecFromLayer?: (layer: CanvasLayer) => void;
+  pickGenerationReferenceFromLayer?: (layer: CanvasLayer) => void;
   pickIconSpecFromLayer?: (layer: CanvasLayer) => void;
+  isPickingGenerationReferenceFromCanvas?: boolean;
   activateCanvasGenerationDialog?: (
     dialog: CanvasGenerationDialogState,
   ) => void;
@@ -175,16 +179,20 @@ function StageInteractionsHarness({
     generateDialog,
     setGenerateDialog,
     isPickingCharacterSpecFromCanvas: false,
+    isPickingGenerationReferenceFromCanvas,
     isPickingCharacterReferenceFromCanvas: false,
     isPickingIconSpecFromCanvas: false,
+    isPickingUiDesignSpecFromCanvas: false,
     clearCanvasFocus: () => {
       setSelectedLayerId(null);
       setSelectedLayerIds([]);
       setClearCount((currentCount) => currentCount + 1);
     },
     pickCharacterSpecFromLayer,
+    pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer: vi.fn(),
     pickIconSpecFromLayer,
+    pickUiDesignSpecFromLayer: vi.fn(),
     activateCanvasGenerationDialog,
     updateCanvasGenerationDialogById: (dialogId, updater) => {
       setGenerateDialog((currentDialog) => {
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts
index 865a27cb3..6d967a6f2 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.ts
+++ b/src/components/image-editor/useImageCanvasStageInteractions.ts
@@ -54,12 +54,16 @@ type UseImageCanvasStageInteractionsOptions = {
   generateDialog: GenerateDialogState | null;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   isPickingCharacterSpecFromCanvas: boolean;
+  isPickingGenerationReferenceFromCanvas: boolean;
   isPickingCharacterReferenceFromCanvas: boolean;
   isPickingIconSpecFromCanvas: boolean;
+  isPickingUiDesignSpecFromCanvas: boolean;
   clearCanvasFocus: () => void;
   pickCharacterSpecFromLayer: (layer: CanvasLayer) => void;
+  pickGenerationReferenceFromLayer: (layer: CanvasLayer) => void;
   pickCharacterReferenceFromLayer: (layer: CanvasLayer) => void;
   pickIconSpecFromLayer: (layer: CanvasLayer) => void;
+  pickUiDesignSpecFromLayer: (layer: CanvasLayer) => void;
   activateCanvasGenerationDialog: (
     dialog: CanvasGenerationDialogState,
   ) => void;
@@ -92,12 +96,16 @@ export function useImageCanvasStageInteractions({
   generateDialog,
   setGenerateDialog,
   isPickingCharacterSpecFromCanvas,
+  isPickingGenerationReferenceFromCanvas,
   isPickingCharacterReferenceFromCanvas,
   isPickingIconSpecFromCanvas,
+  isPickingUiDesignSpecFromCanvas,
   clearCanvasFocus,
   pickCharacterSpecFromLayer,
+  pickGenerationReferenceFromLayer,
   pickCharacterReferenceFromLayer,
   pickIconSpecFromLayer,
+  pickUiDesignSpecFromLayer,
   activateCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
   moveViewportFromMinimapPointer,
@@ -190,6 +198,18 @@ export function useImageCanvasStageInteractions({
         event.stopPropagation();
         return;
       }
+      if (
+        isPickingGenerationReferenceFromCanvas &&
+        (generateDialog?.mode === 'generate' ||
+          generateDialog?.mode === 'video' ||
+          generateDialog?.mode === 'spec')
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        suppressNextLayerClickRef.current = true;
+        pickGenerationReferenceFromLayer(layer);
+        return;
+      }
       if (
         isPickingCharacterSpecFromCanvas &&
         generateDialog?.mode === 'character'
@@ -217,6 +237,16 @@ export function useImageCanvasStageInteractions({
         pickIconSpecFromLayer(layer);
         return;
       }
+      if (
+        isPickingUiDesignSpecFromCanvas &&
+        generateDialog?.mode === 'ui-design'
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        suppressNextLayerClickRef.current = true;
+        pickUiDesignSpecFromLayer(layer);
+        return;
+      }
 
       event.preventDefault();
       event.stopPropagation();
@@ -244,12 +274,15 @@ export function useImageCanvasStageInteractions({
       effectiveTool,
       generateDialog?.mode,
       isPickingCharacterSpecFromCanvas,
+      isPickingGenerationReferenceFromCanvas,
       isPickingCharacterReferenceFromCanvas,
       isPickingIconSpecFromCanvas,
       layers,
+      pickGenerationReferenceFromLayer,
       pickCharacterReferenceFromLayer,
       pickCharacterSpecFromLayer,
       pickIconSpecFromLayer,
+      pickUiDesignSpecFromLayer,
       selectedLayerIds,
       setGenerateDialog,
       setSelectedLayerId,
@@ -271,6 +304,9 @@ export function useImageCanvasStageInteractions({
       if (isPickingCharacterSpecFromCanvas) {
         return;
       }
+      if (isPickingGenerationReferenceFromCanvas) {
+        return;
+      }
       if (isPickingCharacterReferenceFromCanvas) {
         return;
       }
@@ -289,6 +325,7 @@ export function useImageCanvasStageInteractions({
     },
     [
       isPickingCharacterSpecFromCanvas,
+      isPickingGenerationReferenceFromCanvas,
       isPickingCharacterReferenceFromCanvas,
       isPickingIconSpecFromCanvas,
       onCloseImageContextMenu,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
index 3696420e0..210792b05 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
@@ -1,6 +1,12 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -130,7 +136,7 @@ function UploadWorkflowHarness({
       <span data-testid="selected-layer">{selectedLayerId ?? '-'}</span>
       <span data-testid="dialog">
         {generateDialog
-          ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}`
+          ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}:${generateDialog.generationReferences?.length ?? 0}:${generateDialog.generationReferences?.[0]?.label ?? '-'}`
           : '-'}
       </span>
       <button
@@ -153,6 +159,19 @@ function UploadWorkflowHarness({
       >
         上传到画布
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          setGenerateDialog({
+            mode: 'generate',
+            prompt: '',
+            status: 'failed',
+            errorMessage: '旧错误',
+          })
+        }
+      >
+        准备图片生成
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -180,6 +199,12 @@ function UploadWorkflowHarness({
       >
         准备规范生成
       </button>
+      <button
+        type="button"
+        onClick={() => workflow.setUploadTarget('generation-reference')}
+      >
+        选择生成参考图
+      </button>
       <button
         type="button"
         onClick={() => workflow.setUploadTarget('spec-reference')}
@@ -262,7 +287,9 @@ describe('useImageCanvasUploadWorkflow', () => {
         openEditorLoginModal={openEditorLoginModal}
       />,
     );
-    const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
+    const uploadInput = screen.getByLabelText(
+      '上传图片文件',
+    ) as HTMLInputElement;
     const clickUploadInput = vi.spyOn(uploadInput, 'click');
 
     fireEvent.click(screen.getByRole('button', { name: '请求素材上传' }));
@@ -279,7 +306,9 @@ describe('useImageCanvasUploadWorkflow', () => {
         openEditorLoginModal={openEditorLoginModal}
       />,
     );
-    const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
+    const uploadInput = screen.getByLabelText(
+      '上传图片文件',
+    ) as HTMLInputElement;
     const clickUploadInput = vi.spyOn(uploadInput, 'click');
 
     fireEvent.click(screen.getByRole('button', { name: '请求角色规范上传' }));
@@ -370,7 +399,7 @@ describe('useImageCanvasUploadWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '选择角色规范' }));
     await waitFor(() => {
       expect(screen.getByTestId('dialog').textContent).toBe(
-        'character:failed:-:0:-:-',
+        'character:failed:-:0:-:-:0:-',
       );
     });
 
@@ -388,6 +417,25 @@ describe('useImageCanvasUploadWorkflow', () => {
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
 
+  it('dispatches file input uploads to normal generation references', async () => {
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备图片生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择生成参考图' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [createTestFile('普通参考.png')],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'generate:idle:-:0:-:-:1:普通参考.png',
+      );
+    });
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('dispatches file input uploads to spec reference images', async () => {
     render(<UploadWorkflowHarness />);
 
diff --git a/src/index.css b/src/index.css
index 12106d6e9..2a4cd8fab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3758,7 +3758,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__asset-meta span + span {
   color: #64748b;
-  font-size: 0.72rem;
+  font-size: 0.82rem;
   font-weight: 760;
 }
 
@@ -3913,7 +3913,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   max-width: 10rem;
   overflow: hidden;
   color: #dc2626;
-  font-size: 0.72rem;
+  font-size: 0.82rem;
   font-weight: 760;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4063,17 +4063,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   z-index: 6;
   display: grid;
   place-items: center;
-  border: 2px solid #2f7df6;
+  border: 2px solid transparent;
   background: #eeeeee;
   color: #9ca3af;
   cursor: move;
   box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
 }
 
+.image-canvas-editor__generation-frame--focused {
+  border-color: #2f7df6;
+}
+
 .image-canvas-editor__generation-frame-label,
 .image-canvas-editor__generation-frame-size {
   position: absolute;
-  top: -1.35rem;
+  top: var(--image-canvas-editor-frame-label-offset, -1.35rem);
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -4082,14 +4086,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-weight: 850;
   line-height: 1;
   white-space: nowrap;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
 }
 
 .image-canvas-editor__generation-frame-label {
   left: 0;
+  transform-origin: bottom left;
 }
 
 .image-canvas-editor__generation-frame-size {
   right: 0;
+  transform-origin: bottom right;
 }
 
 .image-canvas-editor__generation-frame-icon {
@@ -4100,7 +4107,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__generation-frame--generating {
   overflow: hidden;
-  border-color: rgba(47, 125, 246, 0.72);
   background: radial-gradient(
       circle at 50% 38%,
       rgba(255, 255, 255, 0.96),
@@ -4206,7 +4212,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__generation-frame--icon {
-  border-color: #10b981;
   background: linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.72),
@@ -4215,6 +4220,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     #ecfdf5;
 }
 
+.image-canvas-editor__generation-frame--icon.image-canvas-editor__generation-frame--focused {
+  border-color: #10b981;
+}
+
 .image-canvas-editor__generation-frame--icon::before,
 .image-canvas-editor__generation-frame--icon::after {
   content: '';
@@ -4248,14 +4257,30 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 16px 28px rgba(16, 185, 129, 0.16);
 }
 
-.image-canvas-editor__generation-frame--icon.image-canvas-editor__generation-frame--generating {
-  border-color: rgba(16, 185, 129, 0.75);
+.image-canvas-editor__generation-frame--ui-design {
+  background: linear-gradient(
+      90deg,
+      rgba(245, 158, 11, 0.12) 1px,
+      transparent 1px
+    ),
+    linear-gradient(0deg, rgba(245, 158, 11, 0.1) 1px, transparent 1px),
+    rgba(255, 251, 235, 0.82);
+  background-size: 42px 42px;
+}
+
+.image-canvas-editor__generation-frame--ui-design.image-canvas-editor__generation-frame--focused {
+  border-color: rgba(245, 158, 11, 0.72);
+}
+
+.image-canvas-editor__generation-frame--ui-design
+  .image-canvas-editor__generation-frame-icon {
+  color: #d97706;
 }
 
 .image-canvas-editor__metadata-corner {
   position: absolute;
-  right: 0.35rem;
-  top: 0.35rem;
+  right: var(--image-canvas-editor-corner-offset, 0.35rem);
+  top: var(--image-canvas-editor-corner-offset, 0.35rem);
   z-index: 2;
   display: grid;
   width: 1.35rem;
@@ -4264,6 +4289,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-radius: 999px;
   background: rgba(16, 15, 14, 0.78);
   color: #ffffff;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top right;
 }
 
 .image-canvas-editor__metadata-corner:hover {
@@ -4271,11 +4298,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__metadata-corner--beside-spec {
-  right: 3.95rem;
+  right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
 }
 
 .image-canvas-editor__metadata-corner--beside-kind {
-  right: 3.95rem;
+  right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
 }
 
 .image-canvas-editor__spec-badge {
@@ -4300,8 +4327,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__kind-badge {
   position: absolute;
-  right: 0.38rem;
-  top: 0.38rem;
+  right: var(--image-canvas-editor-kind-offset, 0.38rem);
+  top: var(--image-canvas-editor-kind-offset, 0.38rem);
   z-index: 3;
   display: inline-flex;
   align-items: center;
@@ -4314,6 +4341,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   line-height: 1;
   letter-spacing: 0.04em;
   pointer-events: none;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top right;
 }
 
 .image-canvas-editor__kind-badge--spec {
@@ -4336,15 +4365,22 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(13, 148, 136, 0.24);
 }
 
+.image-canvas-editor__kind-badge--ui-design {
+  background: rgba(245, 158, 11, 0.94);
+  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
+}
+
 .image-canvas-editor__size-badge {
   position: absolute;
-  left: 0.35rem;
-  top: 0.35rem;
+  left: var(--image-canvas-editor-corner-offset, 0.35rem);
+  top: var(--image-canvas-editor-corner-offset, 0.35rem);
   z-index: 2;
   border-color: rgba(255, 255, 255, 0.16);
   background: rgba(16, 15, 14, 0.82);
   color: #ffffff;
   white-space: nowrap;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top left;
 }
 
 .image-canvas-editor__floating-toolbar {
@@ -4541,10 +4577,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   overflow: hidden;
   border: 1px solid #e2e8f0;
   border-radius: 0.58rem;
-  background:
-    linear-gradient(to top, #000000, transparent),
-    linear-gradient(to right, #ffffff, transparent),
-    #ef4444;
+  background: linear-gradient(to top, #000000, transparent),
+    linear-gradient(to right, #ffffff, transparent), #ef4444;
 }
 
 .image-canvas-editor__background-spectrum input,
@@ -4560,8 +4594,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__background-spectrum-surface {
   position: absolute;
   inset: 0;
-  background:
-    linear-gradient(to top, #000000, transparent),
+  background: linear-gradient(to top, #000000, transparent),
     linear-gradient(to right, #ffffff, transparent);
   pointer-events: none;
 }
@@ -4627,7 +4660,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: #e0f2fe;
 }
 
-.image-canvas-editor__background-preset .image-canvas-editor__background-swatch {
+.image-canvas-editor__background-preset
+  .image-canvas-editor__background-swatch {
   width: 1.55rem;
   height: 1.55rem;
   border-color: #e2e8f0;
@@ -4660,9 +4694,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border: 0;
   background: transparent;
   color: #475569;
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
   font-size: 0.78rem;
   font-weight: 820;
   outline: none;
@@ -4745,60 +4778,84 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   display: grid;
   grid-template-columns: 3.8rem minmax(0, 1fr);
   grid-template-rows: minmax(5.9rem, auto) auto auto;
-  width: min(34rem, calc(100% - 1.5rem));
-  min-height: 11.2rem;
-  gap: 0.45rem 0.75rem;
-  border: 1px solid #cfd6df;
-  border-radius: 1.35rem;
-  background: #ffffff;
-  padding: 0.5rem 0.65rem 0.65rem;
+  width: min(38rem, calc(100% - 1.5rem));
+  min-height: 10.4rem;
+  gap: 0.38rem 0.72rem;
+  border: 1px solid rgba(15, 23, 42, 0.09);
+  border-radius: 1.45rem;
+  background: rgba(255, 255, 255, 0.97);
+  padding: 0.72rem 0.82rem 0.82rem;
   color: #1f2937;
-  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
+  font-size: 0.82rem;
+  box-shadow:
+    0 22px 60px rgba(15, 23, 42, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94);
   transform: translateX(-50%);
+  backdrop-filter: blur(18px);
+}
+
+.image-canvas-editor__generation-composer--image {
+  grid-template-columns: 4rem minmax(0, 1fr);
+  grid-template-rows: auto auto auto;
+  width: min(42rem, calc(100% - 1.5rem));
+  gap: 0.18rem 0.72rem;
+}
+
+.image-canvas-editor__generation-composer--video {
+  grid-template-rows: auto auto auto;
+  gap: 0.18rem 0.72rem;
 }
 
 .image-canvas-editor__generation-ref {
-  display: grid;
-  width: 3.5rem;
-  height: 4.25rem;
-  place-items: center;
+  display: flex;
+  width: auto;
+  height: auto;
+  min-width: 0;
   align-self: start;
-  border: 0;
-  border-radius: 1rem;
-  background: #f2f2f2;
-  color: #a3a3a3;
-  font-size: 0.72rem;
-  font-weight: 760;
-  box-shadow: none;
+  grid-column: 1 / -1;
 }
 
 .image-canvas-editor__generation-ref span {
-  margin-top: -0.4rem;
+  margin-top: 0;
 }
 
 .image-canvas-editor__generation-prompt {
-  min-height: 5.8rem;
+  grid-column: 1 / -1;
+  min-height: 4.1rem;
   resize: none;
-  border: 0;
-  background: transparent;
-  padding: 1.2rem 0.2rem 0.2rem;
-  color: #1f2937;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1.05rem;
+  background: #f8fafc;
+  padding: 0.64rem 0.9rem;
+  color: #0f172a;
   font: inherit;
-  font-size: 0.9rem;
-  font-weight: 720;
+  font-size: 0.88rem;
+  font-weight: 680;
+  line-height: 1.55;
   outline: none;
 }
 
 .image-canvas-editor__generation-prompt::placeholder {
-  color: #b5b5b5;
+  color: #94a3b8;
+}
+
+.image-canvas-editor__video-prompt {
+  grid-column: 1 / -1;
+  min-height: 4.1rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1.05rem;
+  background: #f8fafc;
+  padding: 0.64rem 0.9rem;
 }
 
 .image-canvas-editor__generation-composer-footer {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.46rem;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+  padding-top: 0.44rem;
 }
 
 .image-canvas-editor__generation-close {
@@ -4819,36 +4876,397 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__generation-model {
   gap: 0.25rem;
-  max-width: 7.2rem;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.image-canvas-editor__generation-submit {
-  min-width: 3.55rem;
-  height: 2.55rem;
-  border: 0;
-  background: #f0f0f0;
-  color: #b6b6b6;
+.image-canvas-editor__inline-option-group {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.28rem;
+}
+
+.image-canvas-editor__reference-strip {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.4rem;
+  overflow-x: auto;
+  padding: 0.02rem 2.2rem 0.08rem 0;
+  scrollbar-width: thin;
+}
+
+.image-canvas-editor__reference-chip {
+  display: inline-flex;
+  min-width: 4.4rem;
+  max-width: 8.8rem;
+  height: 3.25rem;
+  align-items: center;
+  gap: 0.4rem;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 1rem;
+  background: #f8fafc;
+  padding: 0.32rem 0.52rem 0.32rem 0.36rem;
+  color: #475569;
+  font-size: 0.72rem;
+  font-weight: 780;
+  text-align: left;
+  box-shadow: none;
+}
+
+.image-canvas-editor__reference-chip-icon {
+  display: grid;
+  width: 2.28rem;
+  height: 2.28rem;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 0.78rem;
+  background: rgba(148, 163, 184, 0.13);
+}
+
+.image-canvas-editor__reference-chip-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-canvas-editor__reference-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__reference-chip--spec
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(147, 51, 234, 0.12);
+  color: #7e22ce;
+}
+
+.image-canvas-editor__reference-chip--icon
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(16, 185, 129, 0.13);
+  color: #059669;
+}
+
+.image-canvas-editor__reference-chip--ui
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(245, 158, 11, 0.15);
+  color: #d97706;
+}
+
+.image-canvas-editor__reference-chip--character
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(15, 23, 42, 0.08);
+  color: #0f172a;
+}
+
+.image-canvas-editor__option-picker {
+  width: 100%;
+  min-height: 2rem;
+  justify-content: space-between;
+  border: 1px solid transparent;
+  border-radius: 0.85rem;
+  background: transparent;
+  padding: 0 0.6rem;
+  color: #0f172a;
+  box-shadow: none;
+}
+
+.image-canvas-editor__option-cluster {
+  min-height: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  padding: 0 0.72rem;
+  color: #0f172a;
+  box-shadow: none;
+}
+
+.image-canvas-editor__option-cluster:hover:not(:disabled),
+.image-canvas-editor__option-cluster[aria-expanded='true'] {
+  border-color: rgba(15, 23, 42, 0.08);
+  background: #f8fafc;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.image-canvas-editor__option-cluster .platform-inline-option-button__trailing {
+  transition: transform 160ms ease;
+}
+
+.image-canvas-editor__option-cluster[aria-expanded='true']
+  .platform-inline-option-button__trailing {
+  transform: rotate(180deg);
+}
+
+.image-canvas-editor__option-cluster--dimensions {
+  justify-self: start;
+  gap: 0.42rem;
+}
+
+.image-canvas-editor__option-cluster--dimensions span {
+  font-variant-numeric: tabular-nums;
+}
+
+.image-canvas-editor__option-cluster--model {
+  grid-column: 3;
+  max-width: min(15.5rem, 32vw);
+  justify-self: end;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__model-trigger-label {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.32rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__model-trigger-label svg,
+.image-canvas-editor__model-icon svg {
+  width: 0.88rem;
+  height: 0.88rem;
+}
+
+.image-canvas-editor__model-trigger-label span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__model-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: #334155;
+}
+
+.image-canvas-editor__option-popover {
+  min-width: 16rem;
+  max-width: min(23rem, calc(100vw - 1.5rem));
+  border-radius: 1.05rem;
+  padding: 0.95rem;
   font-size: 0.82rem;
-  font-weight: 800;
+}
+
+.image-canvas-editor__option-popover-sections {
+  display: grid;
+  gap: 1rem;
+}
+
+.image-canvas-editor__option-popover-section {
+  display: grid;
+  gap: 0.58rem;
+}
+
+.image-canvas-editor__option-popover-title {
+  color: #2f2f35;
+  font-size: 0.82rem;
+  font-weight: 760;
+}
+
+.image-canvas-editor__option-popover-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.46rem;
+}
+
+.image-canvas-editor__option-popover-items--card {
+  gap: 0.62rem;
+}
+
+.image-canvas-editor__option-popover:has(
+    .image-canvas-editor__option-popover-choice--model
+  ) {
+  min-width: 13.5rem;
+}
+
+.image-canvas-editor__option-popover-choice {
+  display: inline-flex;
+  min-width: 4.5rem;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 0 0.85rem;
+  color: #111827;
+  font-size: 0.82rem;
+  font-weight: 720;
+}
+
+.image-canvas-editor__option-popover-items--card
+  .image-canvas-editor__option-popover-choice {
+  min-width: 5.25rem;
+  min-height: 4.6rem;
+  border-radius: 1rem;
+  font-size: 0.82rem;
+}
+
+.image-canvas-editor__option-popover-choice[aria-pressed='true'] {
+  border-color: #202124;
+  box-shadow: inset 0 0 0 1px #202124;
+}
+
+.image-canvas-editor__option-popover-choice--model {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1rem minmax(0, 1fr) 1rem;
+  justify-content: stretch;
+  column-gap: 0.44rem;
+  border-color: transparent;
+  background: transparent;
+  padding: 0.18rem 0.2rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__option-popover-choice--model span:nth-child(2) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__option-popover-choice--model
+  .image-canvas-editor__model-icon {
+  justify-self: start;
+}
+
+.image-canvas-editor__option-popover-choice--model[aria-pressed='true'] {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.image-canvas-editor__option-popover-choice--model:hover {
+  background: #f8fafc;
+}
+
+.image-canvas-editor__option-selected-check {
+  width: 0.92rem;
+  height: 0.92rem;
+  justify-self: end;
+  color: #111827;
+  stroke-width: 3;
+}
+
+.image-canvas-editor__option-popover-choice--ratio {
+  flex-direction: column;
+  gap: 0.42rem;
+}
+
+.image-canvas-editor__ratio-wireframe {
+  display: block;
+  width: 1.65rem;
+  height: 1.08rem;
+  border: 2px solid currentColor;
+  border-radius: 0.24rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='9:16'] {
+  width: 1.02rem;
+  height: 1.74rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='3:4'],
+.image-canvas-editor__ratio-wireframe[data-ratio='2:3'] {
+  width: 1.12rem;
+  height: 1.58rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='4:3'],
+.image-canvas-editor__ratio-wireframe[data-ratio='3:2'] {
+  width: 1.74rem;
+  height: 1.16rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='1:1'] {
+  width: 1.36rem;
+  height: 1.36rem;
+}
+
+.image-canvas-editor__mud-point-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.18rem;
+  color: currentColor;
+  font-size: 0.74rem;
+  font-weight: 850;
+  line-height: 1;
+}
+
+.image-canvas-editor__generation-composer .image-canvas-editor__option-field {
+  min-width: 0;
+}
+
+.image-canvas-editor__generation-composer .image-canvas-editor__field-title {
+  color: #94a3b8;
+  font-size: 0.66rem;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+}
+
+.image-canvas-editor__generation-composer .platform-inline-option-button {
+  min-height: 2.25rem;
+  border-color: transparent;
+  background: transparent;
+  color: #475569;
+  font-size: 0.82rem;
+  font-weight: 760;
+  box-shadow: none;
+}
+
+.image-canvas-editor__generation-composer
+  .platform-inline-option-button[aria-pressed='true'] {
+  border-color: rgba(15, 23, 42, 0.14);
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.image-canvas-editor__generation-submit {
+  grid-column: 4;
+  min-width: 5.45rem;
+  height: 2.25rem;
+  gap: 0.4rem;
+  border: 0;
+  background: #0f172a;
+  color: #ffffff;
+  font-size: 0.82rem;
+  font-weight: 820;
 }
 
 .image-canvas-editor__generation-submit:not(:disabled) {
-  color: #7f7f7f;
+  color: #ffffff;
 }
 
 .image-canvas-editor__generation-submit:disabled {
   cursor: wait;
+  background: #e2e8f0;
+  color: #94a3b8;
 }
 
 .image-canvas-editor__generation-close {
   position: absolute;
-  right: 0.6rem;
-  top: 0.55rem;
+  right: 0.62rem;
+  top: 0.58rem;
   width: 2rem;
   height: 2rem;
+  color: #94a3b8;
 }
 
 .image-canvas-editor__generation-composer
@@ -5357,35 +5775,28 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__spec-composer {
   grid-template-columns: minmax(0, 1fr);
   min-height: 0;
-  width: min(28rem, calc(100% - 1.5rem));
-  padding: 0.72rem;
+}
+
+.image-canvas-editor__spec-composer.image-canvas-editor__generation-composer--image {
+  grid-template-rows: auto auto auto;
 }
 
 .image-canvas-editor__spec-fields {
+  grid-column: 1 / -1;
   display: grid;
-  gap: 0.5rem;
+  gap: 0.38rem;
 }
 
 .image-canvas-editor__spec-input {
-  min-height: 2.45rem;
+  min-height: 2.16rem;
 }
 
 .image-canvas-editor__spec-textarea {
-  min-height: 5.4rem;
+  min-height: 4.55rem;
 }
 
 .image-canvas-editor__spec-textarea--view {
-  min-height: 4.3rem;
-}
-
-.image-canvas-editor__spec-footer {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.image-canvas-editor__spec-submit {
-  min-width: 7.8rem;
-  color: #5f4b00;
+  min-height: 3.55rem;
 }
 
 .image-canvas-editor__context-menu {
@@ -5527,6 +5938,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-radius: 1.1rem;
   background: rgba(255, 255, 255, 0.96);
   padding: 0.76rem;
+  font-size: 0.82rem;
   box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
 }
 
@@ -5558,36 +5970,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-size: 0.78rem;
 }
 
-.image-canvas-editor__character-animation-grid {
+.image-canvas-editor__character-animation-footer {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
   gap: 0.46rem;
 }
 
-.image-canvas-editor__character-animation-summary {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.7rem;
-  border-radius: 0.82rem;
-  background: #f8fafc;
-  padding: 0.48rem 0.64rem;
-  color: #475569;
-  font-size: 0.78rem;
-  font-weight: 850;
-}
-
-.image-canvas-editor__character-animation-summary-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .image-canvas-editor__character-animation-submit {
-  justify-self: end;
-  min-width: 6.8rem;
+  grid-column: 3;
+  min-width: 5.45rem;
+  height: 2.25rem;
+  gap: 0.4rem;
+  border: 0;
+  background: #0f172a;
+  color: #ffffff;
 }
 
 .image-canvas-editor__snap-guide {
@@ -5789,6 +6186,39 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     transform: none;
   }
 
+  .image-canvas-editor__generation-composer {
+    position: fixed;
+    left: 0.75rem !important;
+    right: 0.75rem;
+    top: auto !important;
+    bottom: 3.85rem;
+    width: auto;
+    max-height: min(72vh, 31rem);
+    grid-template-columns: 3.55rem minmax(0, 1fr);
+    overflow: auto;
+    transform: none;
+  }
+
+  .image-canvas-editor__generation-composer-footer,
+  .image-canvas-editor__character-animation-footer {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  .image-canvas-editor__option-cluster--dimensions,
+  .image-canvas-editor__option-cluster--model,
+  .image-canvas-editor__generation-submit,
+  .image-canvas-editor__character-animation-submit {
+    grid-column: auto;
+    width: 100%;
+    max-width: none;
+    justify-self: stretch;
+  }
+
+  .image-canvas-editor__generation-submit {
+    width: 100%;
+  }
+
   .image-canvas-editor__character-composer {
     position: fixed;
     left: 0.75rem !important;
@@ -5841,10 +6271,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     border-radius: 0.9rem;
   }
 
-  .image-canvas-editor__character-animation-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .image-canvas-editor__main {
     min-height: 0;
     flex: 1;
@@ -12998,3 +13424,18 @@ button {
   color: #1f2937 !important;
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
 }
+
+.image-canvas-editor__generation-composer .image-canvas-editor__option-cluster {
+  min-height: 2.25rem;
+  background: transparent;
+  border-color: transparent;
+}
+
+.image-canvas-editor__generation-composer
+  .image-canvas-editor__option-cluster:hover:not(:disabled),
+.image-canvas-editor__generation-composer
+  .image-canvas-editor__option-cluster[aria-expanded='true'] {
+  border-color: rgba(15, 23, 42, 0.08);
+  background: #f8fafc;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 9e56d01d2..de787e19e 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -12,6 +12,7 @@ import {
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
   generateEditorImage,
+  generateEditorVideo,
   listEditorProjects,
   loadEditorAssetLibrary,
   loadEditorProject,
@@ -760,6 +761,58 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('generates editor videos through the backend BFF', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      videoSrc: '/generated-editor-videos/video-task-1/preview.mp4',
+      width: 1280,
+      height: 720,
+      sourceType: 'generated',
+      prompt: '让角色向镜头挥手',
+      actualPrompt: '让角色向镜头挥手',
+      model: 'kling3.0-omni',
+      provider: 'VectorEngine',
+      taskId: 'video-task-1',
+      durationSeconds: 5,
+      resolution: '480p',
+      priceMudPoints: 50,
+    });
+
+    const result = await generateEditorVideo({
+      prompt: '让角色向镜头挥手',
+      model: 'kling3.0-omni',
+      aspectRatio: '16:9',
+      durationSeconds: 5,
+      resolution: '480p',
+      mode: 'std',
+      sound: 'off',
+      priceMudPoints: 50,
+    });
+
+    expect(result.taskId).toBe('video-task-1');
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/videos/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: '让角色向镜头挥手',
+          model: 'kling3.0-omni',
+          aspectRatio: '16:9',
+          durationSeconds: 5,
+          resolution: '480p',
+          mode: 'std',
+          sound: 'off',
+          priceMudPoints: 50,
+        }),
+      }),
+      '生成视频失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('edits editor images through the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,edited',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 5a7fc6c7d..985bfdfb7 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -8,6 +8,7 @@ const EDITOR_ICON_SPRITESHEET_GENERATION_API =
   '/api/editor/icon-spritesheets/generations';
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
+const EDITOR_VIDEO_GENERATION_API = '/api/editor/videos/generations';
 const EDITOR_IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 const DEFAULT_PROJECT_TITLE = '未命名画布';
 
@@ -83,7 +84,7 @@ export type EditorAssetLibrarySnapshot = {
 export type EditorImageGenerationInput = {
   prompt: string;
   size?: string;
-  kind?: 'spec' | 'character' | 'quick-edit';
+  kind?: 'spec' | 'character' | 'quick-edit' | 'ui-design';
   model?: string;
   aspectRatio?: string;
   imageSize?: string;
@@ -185,6 +186,38 @@ export type EditorCharacterAnimationGenerationResult = {
   priceMudPoints: number;
 };
 
+export type EditorVideoModel =
+  | 'seedance2.0'
+  | 'seedance2.0-fast'
+  | 'kling3.0'
+  | 'kling3.0-omni'
+  | 'veo3.1'
+  | 'veo3.1-fast';
+
+export type EditorVideoGenerationInput = {
+  prompt: string;
+  model: EditorVideoModel;
+  aspectRatio: '16:9';
+  durationSeconds: 4 | 5;
+  resolution: '480p' | '720p';
+  mode: 'std';
+  sound: 'off';
+  priceMudPoints: number;
+};
+
+export type EditorVideoGenerationResult = {
+  videoSrc: string;
+  width: number;
+  height: number;
+  sourceType: 'generated';
+  prompt: string;
+  actualPrompt?: string | null;
+  model: string;
+  provider: string;
+  taskId: string;
+  priceMudPoints?: number;
+};
+
 export type EditorProjectSnapshot = {
   projectId: string;
   title: string;
@@ -281,6 +314,7 @@ type EditorAssetResponse = {
 type EditorImageGenerationResponse = EditorImageGenerationResult;
 type EditorIconSpritesheetGenerationResponse =
   EditorIconSpritesheetGenerationResult;
+type EditorVideoGenerationResponse = EditorVideoGenerationResult;
 
 function jsonRequest(method: 'POST' | 'PATCH', body: Record<string, unknown>) {
   return {
@@ -534,3 +568,17 @@ export async function generateEditorCharacterAnimation(
     },
   );
 }
+
+export async function generateEditorVideo(input: EditorVideoGenerationInput) {
+  return requestJson<EditorVideoGenerationResponse>(
+    EDITOR_VIDEO_GENERATION_API,
+    jsonRequest('POST', input),
+    '生成视频失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: {
+        maxRetries: 0,
+      },
+    },
+  );
+}

From 6d964937dbaa24cfbcd29917120daeee9ea6a7cc Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 17 Jun 2026 21:49:32 +0800
Subject: [PATCH 05/16] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E9=9D=A2=E6=9D=BF=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

补齐普通生图参考图来源菜单和画布选择流程

接入UI设计图与视频生成面板的提交链路

让生成引用上传目标支持多种生成面板

统一图片信息弹窗断言并补充相关测试

修复图标按钮浮层锚点ref与视频生成类型契约
---
 src/components/common/PlatformIconButton.tsx  |  33 ++-
 ...CanvasBasicGenerationComposerView.test.tsx |   2 +-
 ...ImageCanvasBasicGenerationComposerView.tsx |  96 ++++++--
 ...CanvasEditorGenerationIntegration.test.tsx |  16 +-
 .../ImageCanvasEditorShellView.test.tsx       |   2 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |   5 +-
 .../ImageCanvasEditorView.test.tsx            |   6 +-
 .../image-editor/ImageCanvasEditorView.tsx    |  20 ++
 .../ImageCanvasGenerationComposerView.tsx     | 224 +++++++++++++++++-
 .../ImageCanvasGenerationDialogModel.ts       |  64 +++++
 .../ImageCanvasGenerationSubmissionModel.ts   |  83 ++++++-
 ...CanvasIconSpritesheetComposerView.test.tsx |   7 +-
 ...mageCanvasSpecGenerationPanelView.test.tsx |   4 +-
 .../ImageCanvasSpecGenerationPanelView.tsx    | 150 ++++++++++--
 .../image-editor/ImageCanvasUploadModel.ts    |  25 +-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  59 +++++
 .../useImageCanvasGenerationSurface.test.tsx  |   7 +-
 .../useImageCanvasGenerationSurface.tsx       |  31 +++
 .../useImageCanvasGenerationWorkflow.test.tsx |   2 +-
 .../useImageCanvasGenerationWorkflow.ts       |  94 +++++++-
 .../useImageCanvasUploadWorkflow.ts           |  69 ++++++
 21 files changed, 914 insertions(+), 85 deletions(-)

diff --git a/src/components/common/PlatformIconButton.tsx b/src/components/common/PlatformIconButton.tsx
index 2f5671360..4cf90c7f9 100644
--- a/src/components/common/PlatformIconButton.tsx
+++ b/src/components/common/PlatformIconButton.tsx
@@ -1,9 +1,11 @@
+import { forwardRef } from 'react';
 import type {
   ButtonHTMLAttributes,
   HTMLAttributes,
   KeyboardEvent,
   LabelHTMLAttributes,
   ReactNode,
+  Ref,
 } from 'react';
 
 type PlatformIconButtonBaseProps = {
@@ -52,16 +54,22 @@ type PlatformIconButtonProps =
  * 平台通用图标动作按钮。
  * 统一承接纯图标动作、图标上传 label 和带短标签的浮动图标动作。
  */
-export function PlatformIconButton({
-  label,
-  icon,
-  children,
-  variant = 'platformIcon',
-  title,
-  className,
-  asChild,
-  ...actionProps
-}: PlatformIconButtonProps) {
+export const PlatformIconButton = forwardRef<
+  HTMLButtonElement | HTMLLabelElement | HTMLSpanElement,
+  PlatformIconButtonProps
+>(function PlatformIconButton(
+  {
+    label,
+    icon,
+    children,
+    variant = 'platformIcon',
+    title,
+    className,
+    asChild,
+    ...actionProps
+  },
+  ref,
+) {
   const variantClassName = {
     platformIcon: 'platform-icon-button',
     surfaceFloating:
@@ -78,6 +86,7 @@ export function PlatformIconButton({
     return (
       <label
         {...(actionProps as LabelHTMLAttributes<HTMLLabelElement>)}
+        ref={ref as Ref<HTMLLabelElement>}
         title={title}
         className={actionClassName}
       >
@@ -112,6 +121,7 @@ export function PlatformIconButton({
     return (
       <span
         {...spanProps}
+        ref={ref as Ref<HTMLSpanElement>}
         aria-disabled={disabled}
         aria-label={label}
         className={actionClassName}
@@ -133,6 +143,7 @@ export function PlatformIconButton({
   return (
     <button
       {...buttonProps}
+      ref={ref as Ref<HTMLButtonElement>}
       type={type}
       aria-label={label}
       title={title}
@@ -142,4 +153,4 @@ export function PlatformIconButton({
       {children}
     </button>
   );
-}
+});
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
index 39861f183..212a5029c 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
@@ -77,7 +77,7 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     expect(screen.getByLabelText('当前提示词').textContent).toBe('新的提示');
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
-    expect(requestUpload).toHaveBeenCalledWith('asset');
+    expect(requestUpload).not.toHaveBeenCalled();
     expect(submitGeneration).toHaveBeenCalledWith(
       expect.objectContaining({ prompt: '新的提示', status: 'idle' }),
     );
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 913597dd5..003e14201 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -1,7 +1,17 @@
 import { ChevronDown, ImageIcon, X } from 'lucide-react';
-import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
@@ -9,14 +19,23 @@ import { PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type {
   GenerateDialogState,
-  UploadTarget,
 } from './ImageCanvasEditorTypes';
 
 type ImageCanvasBasicGenerationComposerViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
-  onRequestUpload: (target: UploadTarget) => void;
+  generationReferenceButtonRef?: RefObject<HTMLButtonElement | null>;
+  isGenerationReferenceMenuOpen?: boolean;
+  setIsGenerationReferenceMenuOpen?: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas?: Dispatch<SetStateAction<boolean>>;
+  renderEditorPortal?: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle?: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
+  onRequestUpload: (target: 'generation-reference') => void;
+  onToggleReferenceMenu?: () => void;
   onSubmit: (dialog: GenerateDialogState) => void;
   onClose: () => void;
 };
@@ -37,30 +56,39 @@ export function ImageCanvasBasicGenerationComposerView({
   dialog,
   style,
   setGenerateDialog,
+  generationReferenceButtonRef,
+  isGenerationReferenceMenuOpen = false,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  renderEditorPortal = (node) => node,
+  buildPortalMenuStyle = () => ({}),
   onRequestUpload,
+  onToggleReferenceMenu,
   onSubmit,
   onClose,
 }: ImageCanvasBasicGenerationComposerViewProps) {
   return (
-    <form
-      className="image-canvas-editor__generation-composer"
-      style={style}
-      role="dialog"
-      aria-label="生成图片"
-      onPointerDown={(event) => event.stopPropagation()}
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (dialog.status !== 'generating') {
-          onSubmit(dialog);
-        }
-      }}
-    >
+    <>
+      <form
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        style={style}
+        role="dialog"
+        aria-label="生成图片"
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (dialog.status !== 'generating') {
+            onSubmit(dialog);
+          }
+        }}
+      >
       <PlatformIconButton
+        ref={generationReferenceButtonRef}
         variant="surfaceFloating"
         className="image-canvas-editor__generation-ref"
         label="添加参考图"
         disabled={dialog.status === 'generating'}
-        onClick={() => onRequestUpload('asset')}
+        onClick={() => onToggleReferenceMenu?.()}
         icon={<ImageIcon className="h-4 w-4" />}
       >
         <span>参考图</span>
@@ -146,6 +174,38 @@ export function ImageCanvasBasicGenerationComposerView({
         disabled={dialog.status === 'generating'}
         onClick={onClose}
       />
-    </form>
+      </form>
+      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="参考图来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(false);
+                  onRequestUpload('generation-reference');
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 08059010c..6577a72d1 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -173,9 +173,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(metadataButtons[0]).toBeTruthy();
     fireEvent.click(metadataButtons[0]!);
 
-    const infoPanel = screen.getByRole('dialog', {
-      name: /生成图片 .*图片信息/,
-    });
+    const infoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(infoPanel).queryByText('Prompt')).toBeNull();
     expect(
       within(infoPanel).queryByRole('button', { name: '复制Prompt' }),
@@ -1452,7 +1450,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       })[0]!,
     );
     const characterInfoPanel = screen.getByRole('dialog', {
-      name: /角色形象 .*图片信息/u,
+      name: '图片信息',
     });
     expect(within(characterInfoPanel).queryByText('Prompt')).toBeNull();
     expect(within(characterInfoPanel).getByText('生成输入')).toBeTruthy();
@@ -1679,9 +1677,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     fireEvent.click(
       screen.getAllByRole('button', { name: '查看返回按钮图片信息' })[0]!,
     );
-    const iconInfoPanel = screen.getByRole('dialog', {
-      name: '返回按钮图片信息',
-    });
+    const iconInfoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(iconInfoPanel).queryByText('Prompt')).toBeNull();
     expect(within(iconInfoPanel).getByText('生成输入')).toBeTruthy();
     expect(within(iconInfoPanel).getByText('素材描述 1')).toBeTruthy();
@@ -2216,9 +2212,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     fireEvent.click(metadataCornerButton);
 
-    const metadataDialog = screen.getByRole('dialog', {
-      name: /生成图片 .*图片信息/,
-    });
+    const metadataDialog = screen.getByRole('dialog', { name: '图片信息' });
     expect(metadataDialog).toBeTruthy();
     expect(within(metadataDialog).getByText('图片类型')).toBeTruthy();
     expect(within(metadataDialog).getByText('生成图片')).toBeTruthy();
@@ -2266,7 +2260,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       })[0]!,
     );
     const editedMetadataDialog = screen.getByRole('dialog', {
-      name: /生成图片 .* 修改结果图片信息/u,
+      name: '图片信息',
     });
     expect(within(editedMetadataDialog).queryByText('Prompt')).toBeNull();
     expect(within(editedMetadataDialog).getByText('修改要求')).toBeTruthy();
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 06234edeb..dc89bdf54 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -225,7 +225,7 @@ describe('ImageCanvasEditorShellView', () => {
     expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
     expect(screen.getByLabelText('画布工作区')).toBeTruthy();
     expect(screen.getByRole('toolbar', { name: 'AI画布工具栏' })).toBeTruthy();
-    expect(screen.getByRole('dialog', { name: '测试图片图片信息' })).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: '图片信息' })).toBeTruthy();
 
     const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
     fireEvent.change(uploadInput);
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index a0a56d243..4da5459cd 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -3,6 +3,7 @@ import type {
   EditorCharacterAnimationGenerationResult,
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
+  EditorVideoModel,
 } from '../../services/image-editor/editorProjectClient';
 
 export type CanvasSourceType = 'uploaded' | 'generated' | 'mock_generated';
@@ -159,9 +160,9 @@ export type GenerateDialogState = {
   iconDescriptions?: string[];
   uiDesignSpecReference?: CharacterReferenceImage | null;
   imageModel?: string;
-  videoModel?: string;
+  videoModel?: EditorVideoModel;
   videoAspectRatio?: string;
-  videoResolution?: string;
+  videoResolution?: '480p' | '720p';
   videoDurationSeconds?: 4 | 5;
   videoMode?: 'std';
   videoSound?: 'off';
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 816b63bd8..906893638 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -489,7 +489,7 @@ describe('ImageCanvasEditorView', () => {
     );
     fireEvent.click(infoButton);
 
-    const infoPanel = screen.getByRole('dialog', { name: '拼图素材图片信息' });
+    const infoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(infoPanel).getByText('图片类型')).toBeTruthy();
     expect(within(infoPanel).getByText('上传图片')).toBeTruthy();
     expect(within(infoPanel).getByText('生成输入')).toBeTruthy();
@@ -547,9 +547,7 @@ describe('ImageCanvasEditorView', () => {
     fireEvent.click(
       screen.getAllByRole('button', { name: '查看旧布局图片图片信息' })[0]!,
     );
-    const infoPanel = screen.getByRole('dialog', {
-      name: '旧布局图片图片信息',
-    });
+    const infoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(infoPanel).queryByText('Size')).toBeNull();
     expect(within(infoPanel).getByText('Resolution')).toBeTruthy();
     expect(within(infoPanel).getByText('1536 x 1024 px')).toBeTruthy();
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index a3621262b..c61a0f543 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -49,6 +49,7 @@ export function ImageCanvasEditorView() {
   const specToolWrapRef = useRef<HTMLSpanElement | null>(null);
   const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const characterReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
+  const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const selectedLayerIdRef = useRef<string | null>(null);
   const selectedLayerIdsRef = useRef<string[]>([]);
@@ -350,14 +351,17 @@ export function ImageCanvasEditorView() {
     layers,
     canvasSize,
     viewport,
+    setViewport,
     layerCounterRef,
     specToolWrapRef,
     characterSpecButtonRef,
     characterReferenceButtonRef,
+    generationReferenceButtonRef,
     iconSpecButtonRef,
     generateDialog,
     setGenerateDialog,
     activeCanvasGenerationDialog,
+    canvasGenerationDialogs,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
     removeCanvasGenerationDialogById,
@@ -376,8 +380,11 @@ export function ImageCanvasEditorView() {
     quickEditPanel,
     setQuickEditPanel,
     setIsSpecMenuOpen,
+    setIsGenerationReferenceMenuOpen,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
+    isPickingGenerationReferenceFromCanvas,
+    setIsPickingGenerationReferenceFromCanvas,
     isPickingCharacterSpecFromCanvas,
     setIsPickingCharacterSpecFromCanvas,
     isPickingCharacterReferenceFromCanvas,
@@ -385,12 +392,17 @@ export function ImageCanvasEditorView() {
     setIsIconSpecMenuOpen,
     isPickingIconSpecFromCanvas,
     setIsPickingIconSpecFromCanvas,
+    setIsUiDesignSpecMenuOpen,
+    isPickingUiDesignSpecFromCanvas,
+    setIsPickingUiDesignSpecFromCanvas,
     openCharacterAnimationPanel,
     openEditDialog,
     openQuickEditPanel,
     pickCharacterSpecFromLayer,
+    pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer,
     pickIconSpecFromLayer,
+    pickUiDesignSpecFromLayer,
     hideGeneratedLayerPanelAfterBlur,
     clearDeletedLayerGenerationState,
     generationComposerStyle,
@@ -482,12 +494,16 @@ export function ImageCanvasEditorView() {
     generateDialog,
     setGenerateDialog,
     isPickingCharacterSpecFromCanvas,
+    isPickingGenerationReferenceFromCanvas,
     isPickingCharacterReferenceFromCanvas,
     isPickingIconSpecFromCanvas,
+    isPickingUiDesignSpecFromCanvas,
     clearCanvasFocus,
     pickCharacterSpecFromLayer,
+    pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer,
     pickIconSpecFromLayer,
+    pickUiDesignSpecFromLayer,
     activateCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
     moveViewportFromMinimapPointer,
@@ -514,12 +530,16 @@ export function ImageCanvasEditorView() {
     setQuickEditPanel,
     closeEditorChromePanels,
     setIsSpecMenuOpen,
+    setIsGenerationReferenceMenuOpen,
+    setIsPickingGenerationReferenceFromCanvas,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
     setIsPickingCharacterSpecFromCanvas,
     setIsPickingCharacterReferenceFromCanvas,
     setIsIconSpecMenuOpen,
     setIsPickingIconSpecFromCanvas,
+    setIsUiDesignSpecMenuOpen,
+    setIsPickingUiDesignSpecFromCanvas,
     setIsSpacePanning,
     setShiftPressed,
   });
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 9e646bda4..668ba6dcf 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -1,3 +1,4 @@
+import { ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -11,6 +12,9 @@ import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
 import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
@@ -18,7 +22,10 @@ import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationM
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
 import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
-import { SPEC_TYPE_LABEL } from './ImageCanvasGenerationModel';
+import {
+  SPEC_TYPE_LABEL,
+  calculateEditorVideoPrice,
+} from './ImageCanvasGenerationModel';
 import type {
   CharacterAnimationPanelState,
   CanvasLayer,
@@ -33,14 +40,19 @@ type ImageCanvasGenerationComposerViewProps = {
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
   characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
   characterReferenceButtonRef: RefObject<HTMLButtonElement | null>;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
   isSpecMenuOpen: boolean;
+  isGenerationReferenceMenuOpen: boolean;
   isCharacterSpecMenuOpen: boolean;
   isCharacterReferenceMenuOpen: boolean;
   isIconSpecMenuOpen: boolean;
+  isUiDesignSpecMenuOpen: boolean;
+  isPickingGenerationReferenceFromCanvas: boolean;
   isPickingCharacterSpecFromCanvas: boolean;
   isPickingCharacterReferenceFromCanvas: boolean;
   isPickingIconSpecFromCanvas: boolean;
+  isPickingUiDesignSpecFromCanvas: boolean;
   generateDialog: GenerateDialogState | null;
   generationComposerStyle: CSSProperties | null;
   iconComposerStyle: CSSProperties | null;
@@ -58,12 +70,16 @@ type ImageCanvasGenerationComposerViewProps = {
   setCharacterAnimationPanel: Dispatch<
     SetStateAction<CharacterAnimationPanelState | null>
   >;
+  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsCharacterSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsCharacterReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsIconSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsUiDesignSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
   setIsPickingCharacterSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
   setIsPickingCharacterReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
   setIsPickingIconSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
+  setIsPickingUiDesignSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
   onOpenSpecDialog: (specType: SpecGenerationType) => void;
   onRequestUpload: (target: UploadTarget) => void;
   onSubmitImageGeneration: (dialog: GenerateDialogState) => void;
@@ -116,18 +132,153 @@ function renderEditorPortal(node: ReactNode) {
   return createPortal(node, document.body);
 }
 
+function ImageCanvasVideoGenerationComposerView({
+  dialog,
+  style,
+  generationReferenceButtonRef,
+  isGenerationReferenceMenuOpen,
+  setGenerateDialog,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  onRequestUpload,
+  onSubmit,
+}: {
+  dialog: GenerateDialogState;
+  style: CSSProperties;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
+  isGenerationReferenceMenuOpen: boolean;
+  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
+  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
+  onRequestUpload: (target: UploadTarget) => void;
+  onSubmit: (dialog: GenerateDialogState) => void;
+}) {
+  const resolution = dialog.videoResolution ?? '480p';
+  const durationSeconds = dialog.videoDurationSeconds ?? 4;
+  const price = calculateEditorVideoPrice(resolution, durationSeconds);
+  return (
+    <>
+      <form
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        style={style}
+        role="dialog"
+        aria-label="生成视频"
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (dialog.status !== 'generating') {
+            onSubmit(dialog);
+          }
+        }}
+      >
+        <PlatformIconButton
+          ref={generationReferenceButtonRef}
+          variant="surfaceFloating"
+          className="image-canvas-editor__generation-ref"
+          label="添加视频参考图"
+          disabled={dialog.status === 'generating'}
+          onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
+          icon={<ImageIcon className="h-4 w-4" />}
+        >
+          <span>参考图</span>
+        </PlatformIconButton>
+        <PlatformTextField
+          variant="textarea"
+          aria-label="视频描述"
+          value={dialog.prompt}
+          disabled={dialog.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">
+          <span className="image-canvas-editor__generation-ratio">
+            16:9 · {resolution} · {durationSeconds}秒
+          </span>
+          <PlatformActionButton
+            type="submit"
+            tone="secondary"
+            size="xs"
+            shape="pill"
+            className="image-canvas-editor__generation-submit"
+            disabled={dialog.status === 'generating'}
+            aria-label="生成视频"
+          >
+            {dialog.status === 'generating' ? '生成中' : `${price}`}
+          </PlatformActionButton>
+        </div>
+      </form>
+      {isGenerationReferenceMenuOpen
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="参考图来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(false);
+                  onRequestUpload('generation-reference');
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
+  );
+}
+
 export function ImageCanvasGenerationComposerView({
   specToolWrapRef,
   characterSpecButtonRef,
   characterReferenceButtonRef,
+  generationReferenceButtonRef,
   iconSpecButtonRef,
   isSpecMenuOpen,
+  isGenerationReferenceMenuOpen,
   isCharacterSpecMenuOpen,
   isCharacterReferenceMenuOpen,
   isIconSpecMenuOpen,
+  isUiDesignSpecMenuOpen,
+  isPickingGenerationReferenceFromCanvas,
   isPickingCharacterSpecFromCanvas,
   isPickingCharacterReferenceFromCanvas,
   isPickingIconSpecFromCanvas,
+  isPickingUiDesignSpecFromCanvas,
   generateDialog,
   generationComposerStyle,
   iconComposerStyle,
@@ -143,12 +294,16 @@ export function ImageCanvasGenerationComposerView({
   setGenerateDialog,
   setQuickEditPanel,
   setCharacterAnimationPanel,
+  setIsGenerationReferenceMenuOpen,
   setIsCharacterSpecMenuOpen,
   setIsCharacterReferenceMenuOpen,
   setIsIconSpecMenuOpen,
+  setIsUiDesignSpecMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
   setIsPickingCharacterSpecFromCanvas,
   setIsPickingCharacterReferenceFromCanvas,
   setIsPickingIconSpecFromCanvas,
+  setIsPickingUiDesignSpecFromCanvas,
   onOpenSpecDialog,
   onRequestUpload,
   onSubmitImageGeneration,
@@ -192,7 +347,18 @@ export function ImageCanvasGenerationComposerView({
           dialog={generateDialog}
           style={generationComposerStyle}
           setGenerateDialog={setGenerateDialog}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
           onRequestUpload={onRequestUpload}
+          onToggleReferenceMenu={() =>
+            setIsGenerationReferenceMenuOpen((open) => !open)
+          }
           onSubmit={onSubmitImageGeneration}
           onClose={onCloseGenerateComposer}
         />
@@ -204,12 +370,58 @@ export function ImageCanvasGenerationComposerView({
         <ImageCanvasSpecGenerationPanelView
           dialog={generateDialog}
           style={generationComposerStyle}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
           onUpdateSpecFormValue={onUpdateSpecFormValue}
           onRequestUpload={onRequestUpload}
           onSubmit={onSubmitImageGeneration}
         />
       ) : null}
 
+      {generateDialog?.mode === 'ui-design' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <ImageCanvasSpecGenerationPanelView
+          dialog={generateDialog}
+          style={generationComposerStyle}
+          isGenerationReferenceMenuOpen={isUiDesignSpecMenuOpen}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          setIsGenerationReferenceMenuOpen={setIsUiDesignSpecMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingUiDesignSpecFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
+          onUpdateSpecFormValue={onUpdateSpecFormValue}
+          onRequestUpload={onRequestUpload}
+          onSubmit={onSubmitImageGeneration}
+        />
+      ) : null}
+
+      {generateDialog?.mode === 'video' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <ImageCanvasVideoGenerationComposerView
+          dialog={generateDialog}
+          style={generationComposerStyle}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          setGenerateDialog={setGenerateDialog}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          onRequestUpload={onRequestUpload}
+          onSubmit={onSubmitImageGeneration}
+        />
+      ) : null}
+
       {generateDialog?.mode === 'character' && generationComposerStyle ? (
         <ImageCanvasCharacterGenerationComposerView
           dialog={generateDialog}
@@ -268,11 +480,21 @@ export function ImageCanvasGenerationComposerView({
           请选择画布中的图片作为常规参考图，按 Esc 退出
         </div>
       ) : null}
+      {isPickingGenerationReferenceFromCanvas ? (
+        <div className="image-canvas-editor__canvas-pick-hint">
+          请选择画布中的图片作为参考图，按 Esc 退出
+        </div>
+      ) : null}
       {isPickingIconSpecFromCanvas ? (
         <div className="image-canvas-editor__canvas-pick-hint">
           请选择画布中的图标素材规范，按 Esc 退出
         </div>
       ) : null}
+      {isPickingUiDesignSpecFromCanvas ? (
+        <div className="image-canvas-editor__canvas-pick-hint">
+          请选择画布中的图标素材规范，按 Esc 退出
+        </div>
+      ) : null}
 
       {quickEditPanel &&
       quickEditPanel.status !== 'generating' &&
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index c03421283..cb0e63a10 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -23,6 +23,8 @@ import {
   ICON_FRAME_ORIGINAL_SIZE,
   SPEC_FRAME_DISPLAY_SIZE,
   SPEC_FRAME_ORIGINAL_SIZE,
+  UI_DESIGN_FRAME_DISPLAY_SIZE,
+  UI_DESIGN_FRAME_ORIGINAL_SIZE,
 } from './ImageCanvasGenerationModel';
 
 type CanvasSize = { width: number; height: number };
@@ -180,6 +182,37 @@ export function createIconGenerationDialogDraft({
   };
 }
 
+export function createUiDesignGenerationDialogDraft({
+  canvasSize,
+  viewport,
+  imageModel,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  imageModel: string;
+}): Omit<CanvasGenerationDialogState, 'id'> {
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  const dimensionDefaults = resolveImageDimensionDefaults(imageModel);
+  return {
+    mode: 'ui-design',
+    prompt: '',
+    status: 'idle',
+    composerOpen: true,
+    uiDesignSpecReference: null,
+    imageModel,
+    aspectRatio: dimensionDefaults.aspectRatio,
+    imageSize: dimensionDefaults.imageSize,
+    placeholder: {
+      x: worldCenter.x - UI_DESIGN_FRAME_DISPLAY_SIZE.width / 2,
+      y: worldCenter.y - UI_DESIGN_FRAME_DISPLAY_SIZE.height / 2,
+      width: UI_DESIGN_FRAME_DISPLAY_SIZE.width,
+      height: UI_DESIGN_FRAME_DISPLAY_SIZE.height,
+      originalWidth: UI_DESIGN_FRAME_ORIGINAL_SIZE.width,
+      originalHeight: UI_DESIGN_FRAME_ORIGINAL_SIZE.height,
+    },
+  };
+}
+
 export function createEditDialogDraft(
   sourceLayer: CanvasLayer,
 ): GenerateDialogState {
@@ -255,6 +288,24 @@ export function appendCharacterReference(
     : dialog;
 }
 
+export function appendGenerationReference(
+  dialog: GenerateDialogState | null,
+  layer: CanvasLayer,
+): GenerateDialogState | null {
+  return dialog?.mode === 'generate' ||
+    dialog?.mode === 'video' ||
+    dialog?.mode === 'spec'
+    ? {
+        ...resetFailedGenerationDialog(dialog),
+        generationReferences: [
+          ...(dialog.generationReferences ?? []),
+          createCanvasLayerReference(layer),
+        ],
+        composerOpen: true,
+      }
+    : dialog;
+}
+
 export function assignIconSpecReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
@@ -271,6 +322,19 @@ export function assignIconSpecReference(
     : dialog;
 }
 
+export function assignUiDesignSpecReference(
+  dialog: GenerateDialogState | null,
+  layer: CanvasLayer,
+): GenerateDialogState | null {
+  return dialog?.mode === 'ui-design'
+    ? {
+        ...resetFailedGenerationDialog(dialog),
+        uiDesignSpecReference: createCanvasLayerReference(layer),
+        composerOpen: true,
+      }
+    : dialog;
+}
+
 export function updateSpecFormDialogValue(
   dialog: GenerateDialogState | null,
   key: keyof SpecFormValues,
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index c92bc16ff..65697cd2b 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -2,6 +2,7 @@ import type {
   EditorCharacterAnimationGenerationInput,
   EditorIconSpritesheetGenerationInput,
   EditorImageGenerationInput,
+  EditorVideoGenerationInput,
 } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationInputs,
@@ -22,7 +23,10 @@ import {
   buildImageGenerationInputs,
   buildSpecGenerationInputs,
   buildSpecPrompt,
+  buildUiDesignGenerationInputs,
+  buildVideoGenerationInputs,
   calculateCharacterAnimationPrice,
+  calculateEditorVideoPrice,
   resolveCharacterAnimationSourceImageSrc,
 } from './ImageCanvasGenerationModel';
 
@@ -49,6 +53,15 @@ export type ImageGenerationSubmissionPlan =
         generationInputs: CanvasGenerationInputs;
       };
       rememberImageModel?: string;
+    }
+  | {
+      kind: 'video';
+      normalizedPrompt: string;
+      input: EditorVideoGenerationInput;
+      result: {
+        title: string;
+        generationInputs: CanvasGenerationInputs;
+      };
     };
 
 export type IconSpritesheetGenerationSubmissionPlan =
@@ -156,14 +169,82 @@ export function buildImageGenerationSubmissionPlan({
     };
   }
 
+  if (dialog.mode === 'ui-design') {
+    const imageModel = dialog.imageModel ?? DEFAULT_IMAGE_MODEL;
+    const referenceImageSrcs = [dialog.uiDesignSpecReference?.src].filter(
+      (src): src is string => Boolean(src),
+    );
+    return {
+      kind: 'image',
+      normalizedPrompt,
+      input: {
+        prompt: normalizedPrompt,
+        kind: 'ui-design',
+        model: imageModel,
+        aspectRatio: dialog.aspectRatio ?? '16:9',
+        imageSize: dialog.imageSize ?? '1K',
+        ...(referenceImageSrcs.length ? { referenceImageSrcs } : {}),
+      },
+      result: {
+        assetKind: 'ui-design',
+        title: `UI设计图 ${nextGeneratedIndex}`,
+        generationInputs: buildUiDesignGenerationInputs(
+          normalizedPrompt,
+          dialog.uiDesignSpecReference,
+        ),
+      },
+      rememberImageModel: imageModel,
+    };
+  }
+
+  if (dialog.mode === 'video') {
+    const resolution = dialog.videoResolution ?? '480p';
+    const durationSeconds = dialog.videoDurationSeconds ?? 4;
+    const model = dialog.videoModel ?? 'seedance2.0';
+    return {
+      kind: 'video',
+      normalizedPrompt,
+      input: {
+        prompt: normalizedPrompt,
+        model,
+        aspectRatio: '16:9',
+        durationSeconds,
+        resolution,
+        mode: 'std',
+        sound: 'off',
+        priceMudPoints: calculateEditorVideoPrice(
+          resolution,
+          durationSeconds,
+        ),
+      },
+      result: {
+        title: `生成视频 ${nextGeneratedIndex}`,
+        generationInputs: buildVideoGenerationInputs(
+          normalizedPrompt,
+          dialog.generationReferences,
+        ),
+      },
+    };
+  }
+
   return {
     kind: 'image',
     normalizedPrompt,
     input: {
       prompt: normalizedPrompt,
+      ...(dialog.generationReferences?.length
+        ? {
+            referenceImageSrcs: dialog.generationReferences.map(
+              (reference) => reference.src,
+            ),
+          }
+        : {}),
     },
     result: {
-      generationInputs: buildImageGenerationInputs(normalizedPrompt),
+      generationInputs: buildImageGenerationInputs(
+        normalizedPrompt,
+        dialog.generationReferences,
+      ),
     },
   };
 }
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index a0b025d92..eb10fbae8 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -4,7 +4,10 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-import type { GenerateDialogState } from './ImageCanvasEditorTypes';
+import type {
+  GenerateDialogState,
+  UploadTarget,
+} from './ImageCanvasEditorTypes';
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
 
 function createIconDialog(
@@ -35,7 +38,7 @@ function IconComposerHarness({
   initialDialog: GenerateDialogState;
   initialMenuOpen?: boolean;
   onOpenSpecDialog?: (specType: 'character' | 'ui' | 'icon' | 'custom') => void;
-  onRequestUpload?: (target: 'asset' | 'spec-reference' | 'character-spec' | 'character-reference' | 'icon-spec') => void;
+  onRequestUpload?: (target: UploadTarget) => void;
   onUpdateIconDescription?: (index: number, value: string) => void;
   onAddIconDescription?: () => void;
   onRememberImageModel?: (model: string) => void;
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index f2af6a669..eada5c475 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -109,7 +109,7 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     cleanup();
     renderPanel({ dialog: createSpecDialog({ specType: 'icon' }) });
 
-    expect(screen.queryByText('添加参考图')).toBeNull();
+    expect(screen.getByRole('button', { name: '参考图' })).toBeTruthy();
   });
 
   it('requests reference upload and submits while idle', () => {
@@ -122,7 +122,7 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
       onSubmit: submitSpec,
     });
 
-    fireEvent.click(screen.getByRole('button', { name: '添加参考图' }));
+    fireEvent.click(screen.getByRole('button', { name: '参考图' }));
     fireEvent.click(screen.getByRole('button', { name: '提交生成规范' }));
 
     expect(requestUpload).toHaveBeenCalledWith('spec-reference');
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 5d2aeb722..2fef0779c 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -1,8 +1,18 @@
-import { type CSSProperties } from 'react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
 import { ImagePlus } from 'lucide-react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import {
   PlatformSelectField,
@@ -21,6 +31,15 @@ import type {
 type ImageCanvasSpecGenerationPanelViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
+  isGenerationReferenceMenuOpen?: boolean;
+  generationReferenceButtonRef?: RefObject<HTMLButtonElement | null>;
+  setIsGenerationReferenceMenuOpen?: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas?: Dispatch<SetStateAction<boolean>>;
+  renderEditorPortal?: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle?: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
   onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
   onRequestUpload: (target: UploadTarget) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
@@ -29,26 +48,71 @@ type ImageCanvasSpecGenerationPanelViewProps = {
 export function ImageCanvasSpecGenerationPanelView({
   dialog,
   style,
+  isGenerationReferenceMenuOpen = false,
+  generationReferenceButtonRef,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  renderEditorPortal = (node) => node,
+  buildPortalMenuStyle = () => ({}),
   onUpdateSpecFormValue,
   onRequestUpload,
   onSubmit,
 }: ImageCanvasSpecGenerationPanelViewProps) {
+  const isUiDesignDialog = dialog.mode === 'ui-design';
+  const referenceLabel = isUiDesignDialog ? 'UI设计图标素材规范' : '参考图';
+  const uploadTarget: UploadTarget = isUiDesignDialog
+    ? 'ui-design-icon-spec'
+    : 'spec-reference';
+  const reference = isUiDesignDialog
+    ? dialog.uiDesignSpecReference
+    : dialog.specReference;
+  const openReferenceMenu = () => {
+    if (setIsGenerationReferenceMenuOpen) {
+      setIsGenerationReferenceMenuOpen((open) => !open);
+      return;
+    }
+    onRequestUpload(uploadTarget);
+  };
+
   return (
-    <form
-      className="image-canvas-editor__generation-composer image-canvas-editor__spec-composer"
-      style={style}
-      role="dialog"
-      aria-label="生成规范"
-      onPointerDown={(event) => event.stopPropagation()}
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (dialog.status !== 'generating') {
-          onSubmit(dialog);
-        }
-      }}
-    >
+    <>
+      <form
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__spec-composer"
+        style={style}
+        role="dialog"
+        aria-label={isUiDesignDialog ? '生成UI设计图' : '生成规范'}
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (dialog.status !== 'generating') {
+            onSubmit(dialog);
+          }
+        }}
+      >
       <div className="image-canvas-editor__spec-fields">
-        {dialog.specType === 'custom' ? (
+        {isUiDesignDialog ? (
+          <label className="image-canvas-editor__field-block">
+            <PlatformFieldLabel
+              variant="form"
+              className="image-canvas-editor__field-title"
+            >
+              UI设计要求
+            </PlatformFieldLabel>
+            <PlatformTextField
+              variant="textarea"
+              aria-label="UI设计要求"
+              value={dialog.prompt}
+              disabled={dialog.status === 'generating'}
+              placeholder="描述要生成的UI界面"
+              size="sm"
+              density="compact"
+              className="image-canvas-editor__generation-prompt"
+              onChange={(event) =>
+                onUpdateSpecFormValue('customPrompt', event.target.value)
+              }
+            />
+          </label>
+        ) : dialog.specType === 'custom' ? (
           <label className="image-canvas-editor__field-block">
             <PlatformFieldLabel
               variant="form"
@@ -165,29 +229,31 @@ export function ImageCanvasSpecGenerationPanelView({
             ) : null}
           </>
         )}
-        {dialog.specType !== 'icon' ? (
-          <div className="image-canvas-editor__field-block">
+        {isUiDesignDialog || dialog.specType ? (
+          <div className="image-canvas-editor__field-block image-canvas-editor__generation-ref">
             <PlatformFieldLabel
               variant="form"
               className="image-canvas-editor__field-title"
             >
-              参考图
+              {referenceLabel}
             </PlatformFieldLabel>
             <button
+              ref={generationReferenceButtonRef}
               type="button"
               className="image-canvas-editor__character-spec-ref image-canvas-editor__reference-tile image-canvas-editor__reference-tile--spec"
               disabled={dialog.status === 'generating'}
-              onClick={() => onRequestUpload('spec-reference')}
+              onClick={openReferenceMenu}
+              aria-label={referenceLabel}
             >
               <span className="image-canvas-editor__reference-tile-visual">
-                {dialog.specReference ? (
-                  <img src={dialog.specReference.src} alt="" aria-hidden="true" />
+                {reference ? (
+                  <img src={reference.src} alt="" aria-hidden="true" />
                 ) : (
                   <ImagePlus className="h-4 w-4" aria-hidden="true" />
                 )}
               </span>
               <span className="image-canvas-editor__reference-tile-copy">
-                {dialog.specReference?.label ?? '添加参考图'}
+                {reference?.label ?? '添加参考图'}
               </span>
             </button>
           </div>
@@ -204,20 +270,52 @@ export function ImageCanvasSpecGenerationPanelView({
           {dialog.errorMessage}
         </PlatformStatusMessage>
       ) : null}
-      <div className="image-canvas-editor__spec-footer">
+      <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__spec-footer">
         <PlatformActionButton
           type="submit"
           tone="secondary"
           size="sm"
-          className="image-canvas-editor__spec-submit"
+          className="image-canvas-editor__generation-submit image-canvas-editor__spec-submit"
           disabled={dialog.status === 'generating'}
-          aria-label="提交生成规范"
+          aria-label={isUiDesignDialog ? '生成UI设计图' : '提交生成规范'}
         >
           {dialog.status === 'generating'
             ? '生成中'
             : `消耗${SPEC_GENERATION_COST}泥点 · 生成`}
         </PlatformActionButton>
       </div>
-    </form>
+      </form>
+      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="参考图来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(false);
+                  onRequestUpload(uploadTarget);
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 7d5a10262..898ca48b5 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -23,8 +23,10 @@ type PersistedUploadAsset = {
 type GenerationReferenceUploadTarget =
   | 'character-reference'
   | 'character-spec'
+  | 'generation-reference'
   | 'icon-spec'
-  | 'spec-reference';
+  | 'spec-reference'
+  | 'ui-design-icon-spec';
 
 export const UPLOAD_LAYER_FALLBACK_SIZE = {
   width: 420,
@@ -114,6 +116,27 @@ export function applyGenerationReferenceUpload({
         }
       : dialog;
   }
+  if (target === 'ui-design-icon-spec') {
+    return dialog?.mode === 'ui-design'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          uiDesignSpecReference: firstReference,
+        }
+      : dialog;
+  }
+  if (target === 'generation-reference') {
+    return dialog?.mode === 'generate' ||
+      dialog?.mode === 'video' ||
+      dialog?.mode === 'spec'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          generationReferences: [
+            ...(dialog.generationReferences ?? []),
+            ...references,
+          ],
+        }
+      : dialog;
+  }
   return dialog?.mode === 'character'
     ? {
         ...setFailedGenerationIdle(dialog),
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 443babc9e..322b81966 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -12,6 +12,7 @@ import {
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
   generateEditorImage,
+  generateEditorVideo,
 } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
@@ -28,6 +29,7 @@ import {
   createGeneratedResultLayer,
   createIconSpritesheetResultLayers,
   createQuickEditResultLayer,
+  createVideoResultLayer,
 } from './ImageCanvasGenerationLayerModel';
 import {
   buildEditGenerationInputs,
@@ -242,6 +244,53 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     ],
   );
 
+  const addVideoResultLayer = useCallback(
+    (
+      generated: Parameters<typeof createVideoResultLayer>[0]['generated'],
+      title: string,
+      generationInputs: CanvasGenerationInputs,
+      frame?: GenerateDialogState['placeholder'],
+      dialogId?: string,
+    ) => {
+      layerCounterRef.current += 1;
+      const generatedIndex = layerCounterRef.current;
+      const nextLayer = createVideoResultLayer({
+        generated,
+        generatedIndex,
+        title,
+        canvasSize,
+        viewport,
+        generationInputs,
+        frame,
+      });
+
+      appendCanvasLayersWithResources([nextLayer]);
+      selectSingleLayer(nextLayer.id);
+      setActiveSidebarPanel('layers');
+      if (dialogId) {
+        updateCanvasGenerationDialogById(dialogId, (currentDialog) => ({
+          ...currentDialog,
+          status: 'idle',
+          composerOpen: true,
+          generatedLayerId: nextLayer.id,
+          placeholder: undefined,
+          errorMessage: undefined,
+        }));
+      }
+      setActiveTool('select');
+    },
+    [
+      appendCanvasLayersWithResources,
+      canvasSize,
+      layerCounterRef,
+      selectSingleLayer,
+      setActiveSidebarPanel,
+      setActiveTool,
+      updateCanvasGenerationDialogById,
+      viewport,
+    ],
+  );
+
   const submitIconSpritesheetGeneration = useCallback(
     async (dialog: GenerateDialogState) => {
       if (dialog.mode !== 'icon') {
@@ -397,6 +446,15 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             sourceLayer: submissionPlan.sourceLayer,
             generationInputs: submissionPlan.generationInputs,
           });
+        } else if (submissionPlan.kind === 'video') {
+          const generated = await generateEditorVideo(submissionPlan.input);
+          addVideoResultLayer(
+            generated,
+            submissionPlan.result.title,
+            submissionPlan.result.generationInputs,
+            getGeneratingDialogPlaceholder(dialog),
+            canvasDialog?.id,
+          );
         } else {
           const generated = await generateEditorImage(submissionPlan.input);
           if (submissionPlan.rememberImageModel) {
@@ -432,6 +490,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     },
     [
       addGeneratedResultLayer,
+      addVideoResultLayer,
       getGeneratingDialogPlaceholder,
       layerCounterRef,
       layers,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index b379ff00c..da0919ecc 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -63,6 +63,8 @@ function GenerationSurfaceHarness() {
   const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const characterReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
+  const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [viewport, setViewport] = useState({ x: 10, y: 20, scale: 2 });
   const dialogs = useCanvasGenerationDialogs();
   const activeDialog = dialogs.generateDialog;
   const activeCanvasDialog =
@@ -72,15 +74,18 @@ function GenerationSurfaceHarness() {
   const surface = useImageCanvasGenerationSurface({
     layers,
     canvasSize: { width: 900, height: 640 },
-    viewport: { x: 10, y: 20, scale: 2 },
+    viewport,
+    setViewport,
     layerCounterRef,
     specToolWrapRef,
     characterSpecButtonRef,
     characterReferenceButtonRef,
     iconSpecButtonRef,
+    generationReferenceButtonRef,
     generateDialog: dialogs.generateDialog,
     setGenerateDialog: dialogs.setGenerateDialog,
     activeCanvasGenerationDialog: activeCanvasDialog,
+    canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     openCanvasGenerationDialog: dialogs.openCanvasGenerationDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
     removeCanvasGenerationDialogById: dialogs.removeCanvasGenerationDialogById,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 14f7204af..05da70962 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -34,14 +34,17 @@ type ImageCanvasGenerationSurfaceOptions = {
   layers: CanvasLayer[];
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
+  setViewport: Dispatch<SetStateAction<CanvasViewport>>;
   layerCounterRef: MutableRefObject<number>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
   characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
   characterReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   generateDialog: GenerateDialogState | null;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   activeCanvasGenerationDialog: CanvasGenerationDialogState | null;
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
   openCanvasGenerationDialog: (
     dialog: Omit<CanvasGenerationDialogState, 'id'>,
   ) => void;
@@ -68,14 +71,17 @@ export function useImageCanvasGenerationSurface({
   layers,
   canvasSize,
   viewport,
+  setViewport,
   layerCounterRef,
   specToolWrapRef,
   characterSpecButtonRef,
   characterReferenceButtonRef,
   iconSpecButtonRef,
+  generationReferenceButtonRef,
   generateDialog,
   setGenerateDialog,
   activeCanvasGenerationDialog,
+  canvasGenerationDialogs,
   openCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
   removeCanvasGenerationDialogById,
@@ -94,6 +100,8 @@ export function useImageCanvasGenerationSurface({
     layers,
     canvasSize,
     viewport,
+    setViewport,
+    canvasGenerationDialogs,
     layerCounterRef,
     generateDialog,
     setGenerateDialog,
@@ -173,13 +181,21 @@ export function useImageCanvasGenerationSurface({
       specToolWrapRef={specToolWrapRef}
       characterSpecButtonRef={characterSpecButtonRef}
       characterReferenceButtonRef={characterReferenceButtonRef}
+      generationReferenceButtonRef={generationReferenceButtonRef}
       iconSpecButtonRef={iconSpecButtonRef}
       isSpecMenuOpen={generationWorkflow.isSpecMenuOpen}
+      isGenerationReferenceMenuOpen={
+        generationWorkflow.isGenerationReferenceMenuOpen
+      }
       isCharacterSpecMenuOpen={generationWorkflow.isCharacterSpecMenuOpen}
       isCharacterReferenceMenuOpen={
         generationWorkflow.isCharacterReferenceMenuOpen
       }
       isIconSpecMenuOpen={generationWorkflow.isIconSpecMenuOpen}
+      isUiDesignSpecMenuOpen={generationWorkflow.isUiDesignSpecMenuOpen}
+      isPickingGenerationReferenceFromCanvas={
+        generationWorkflow.isPickingGenerationReferenceFromCanvas
+      }
       isPickingCharacterSpecFromCanvas={
         generationWorkflow.isPickingCharacterSpecFromCanvas
       }
@@ -189,6 +205,9 @@ export function useImageCanvasGenerationSurface({
       isPickingIconSpecFromCanvas={
         generationWorkflow.isPickingIconSpecFromCanvas
       }
+      isPickingUiDesignSpecFromCanvas={
+        generationWorkflow.isPickingUiDesignSpecFromCanvas
+      }
       generateDialog={generateDialog}
       generationComposerStyle={generationComposerStyle}
       iconComposerStyle={iconComposerStyle}
@@ -214,7 +233,16 @@ export function useImageCanvasGenerationSurface({
       setIsCharacterReferenceMenuOpen={
         generationWorkflow.setIsCharacterReferenceMenuOpen
       }
+      setIsGenerationReferenceMenuOpen={
+        generationWorkflow.setIsGenerationReferenceMenuOpen
+      }
       setIsIconSpecMenuOpen={generationWorkflow.setIsIconSpecMenuOpen}
+      setIsUiDesignSpecMenuOpen={
+        generationWorkflow.setIsUiDesignSpecMenuOpen
+      }
+      setIsPickingGenerationReferenceFromCanvas={
+        generationWorkflow.setIsPickingGenerationReferenceFromCanvas
+      }
       setIsPickingCharacterSpecFromCanvas={
         generationWorkflow.setIsPickingCharacterSpecFromCanvas
       }
@@ -224,6 +252,9 @@ export function useImageCanvasGenerationSurface({
       setIsPickingIconSpecFromCanvas={
         generationWorkflow.setIsPickingIconSpecFromCanvas
       }
+      setIsPickingUiDesignSpecFromCanvas={
+        generationWorkflow.setIsPickingUiDesignSpecFromCanvas
+      }
       onOpenSpecDialog={generationWorkflow.openSpecDialog}
       onRequestUpload={requestUpload}
       onSubmitImageGeneration={(dialog) =>
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index ef29319e8..95b62d8c8 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -426,7 +426,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         expect.objectContaining({
           size: '2048x1152',
           kind: 'spec',
-          model: 'gpt-image-2',
+          model: 'gemini-3.1-flash-image-preview',
           referenceImageSrcs: ['data:image/png;base64,ref'],
           prompt: expect.stringContaining('参考图生成规范'),
         }),
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 07633ff49..cdbb65429 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -22,7 +22,9 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   appendCharacterReference,
+  appendGenerationReference,
   appendIconDescriptionToDialog,
+  assignUiDesignSpecReference,
   assignCharacterSpecReference,
   assignIconSpecReference,
   closeGenerateComposerDialog,
@@ -38,6 +40,10 @@ import {
   updateIconDescriptionInDialog,
   updateSpecFormDialogValue,
 } from './ImageCanvasGenerationDialogModel';
+import {
+  centerViewportOnPlacement,
+  chooseGenerationPlacement,
+} from './ImageCanvasGenerationPlacementModel';
 import {
   buildQuickEditModelOptions,
   buildQuickEditSizeOptions,
@@ -57,6 +63,8 @@ type GenerationWorkflowOptions = {
   layers: CanvasLayer[];
   canvasSize: CanvasSize;
   viewport: CanvasViewport;
+  setViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
   layerCounterRef: MutableRefObject<number>;
   generateDialog: GenerateDialogState | null;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
@@ -85,6 +93,8 @@ export function useImageCanvasGenerationWorkflow({
   layers,
   canvasSize,
   viewport,
+  setViewport,
+  canvasGenerationDialogs,
   layerCounterRef,
   generateDialog,
   setGenerateDialog,
@@ -102,9 +112,15 @@ export function useImageCanvasGenerationWorkflow({
   setImageContextMenu,
 }: GenerationWorkflowOptions) {
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
+  const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
+    useState(false);
   const [isCharacterSpecMenuOpen, setIsCharacterSpecMenuOpen] = useState(false);
   const [isCharacterReferenceMenuOpen, setIsCharacterReferenceMenuOpen] =
     useState(false);
+  const [
+    isPickingGenerationReferenceFromCanvas,
+    setIsPickingGenerationReferenceFromCanvas,
+  ] = useState(false);
   const [
     isPickingCharacterSpecFromCanvas,
     setIsPickingCharacterSpecFromCanvas,
@@ -116,6 +132,9 @@ export function useImageCanvasGenerationWorkflow({
   const [isIconSpecMenuOpen, setIsIconSpecMenuOpen] = useState(false);
   const [isPickingIconSpecFromCanvas, setIsPickingIconSpecFromCanvas] =
     useState(false);
+  const [isUiDesignSpecMenuOpen, setIsUiDesignSpecMenuOpen] = useState(false);
+  const [isPickingUiDesignSpecFromCanvas, setIsPickingUiDesignSpecFromCanvas] =
+    useState(false);
   const [quickEditPanel, setQuickEditPanel] =
     useState<QuickEditPanelState | null>(null);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
@@ -153,17 +172,40 @@ export function useImageCanvasGenerationWorkflow({
       : DEFAULT_ICON_DESCRIPTIONS;
 
   const openGenerateDialog = useCallback(() => {
-    openCanvasGenerationDialog(
-      createGenerateDialogDraft({ canvasSize, viewport }),
+    const draft = createGenerateDialogDraft({ canvasSize, viewport });
+    const draftPlaceholder = draft.placeholder;
+    if (!draftPlaceholder) {
+      return;
+    }
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame: draftPlaceholder,
+      layers,
+      generationDialogs: canvasGenerationDialogs,
+    }) ?? draftPlaceholder;
+    openCanvasGenerationDialog({
+      ...draft,
+      placeholder: placement,
+    });
+    setViewport(
+      centerViewportOnPlacement({
+        canvasSize,
+        viewport,
+        placement,
+      }),
     );
     setActiveTool('generate');
     selectSingleLayer(null);
     setQuickEditPanel(null);
   }, [
     canvasSize,
+    canvasGenerationDialogs,
+    layers,
     openCanvasGenerationDialog,
     selectSingleLayer,
     setActiveTool,
+    setViewport,
     viewport,
   ]);
 
@@ -202,9 +244,13 @@ export function useImageCanvasGenerationWorkflow({
 
   const openCharacterGenerationDialog = useCallback(() => {
     setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
     setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
     setIsPickingCharacterSpecFromCanvas(false);
     setIsPickingCharacterReferenceFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
     openCanvasGenerationDialog(
       createCharacterGenerationDialogDraft({
         canvasSize,
@@ -226,9 +272,13 @@ export function useImageCanvasGenerationWorkflow({
 
   const openIconGenerationDialog = useCallback(() => {
     setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
     setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
     setIsPickingCharacterSpecFromCanvas(false);
     setIsPickingCharacterReferenceFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
     setIsPickingIconSpecFromCanvas(false);
     openCanvasGenerationDialog(
       createIconGenerationDialogDraft({
@@ -292,6 +342,18 @@ export function useImageCanvasGenerationWorkflow({
     [setGenerateDialog, setImageContextMenu],
   );
 
+  const pickGenerationReferenceFromLayer = useCallback(
+    (layer: CanvasLayer) => {
+      setGenerateDialog((currentDialog) =>
+        appendGenerationReference(currentDialog, layer),
+      );
+      setIsPickingGenerationReferenceFromCanvas(false);
+      setIsGenerationReferenceMenuOpen(false);
+      setImageContextMenu(null);
+    },
+    [setGenerateDialog, setImageContextMenu],
+  );
+
   const pickCharacterReferenceFromLayer = useCallback(
     (layer: CanvasLayer) => {
       setGenerateDialog((currentDialog) =>
@@ -318,6 +380,18 @@ export function useImageCanvasGenerationWorkflow({
     [setGenerateDialog, setImageContextMenu],
   );
 
+  const pickUiDesignSpecFromLayer = useCallback(
+    (layer: CanvasLayer) => {
+      setGenerateDialog((currentDialog) =>
+        assignUiDesignSpecReference(currentDialog, layer),
+      );
+      setIsPickingUiDesignSpecFromCanvas(false);
+      setIsUiDesignSpecMenuOpen(false);
+      setImageContextMenu(null);
+    },
+    [setGenerateDialog, setImageContextMenu],
+  );
+
   const updateIconDescription = useCallback(
     (index: number, value: string) => {
       setGenerateDialog((currentDialog) =>
@@ -422,10 +496,14 @@ export function useImageCanvasGenerationWorkflow({
       iconDescriptionValues,
       isSpecMenuOpen,
       setIsSpecMenuOpen,
+      isGenerationReferenceMenuOpen,
+      setIsGenerationReferenceMenuOpen,
       isCharacterSpecMenuOpen,
       setIsCharacterSpecMenuOpen,
       isCharacterReferenceMenuOpen,
       setIsCharacterReferenceMenuOpen,
+      isPickingGenerationReferenceFromCanvas,
+      setIsPickingGenerationReferenceFromCanvas,
       isPickingCharacterSpecFromCanvas,
       setIsPickingCharacterSpecFromCanvas,
       isPickingCharacterReferenceFromCanvas,
@@ -434,6 +512,10 @@ export function useImageCanvasGenerationWorkflow({
       setIsIconSpecMenuOpen,
       isPickingIconSpecFromCanvas,
       setIsPickingIconSpecFromCanvas,
+      isUiDesignSpecMenuOpen,
+      setIsUiDesignSpecMenuOpen,
+      isPickingUiDesignSpecFromCanvas,
+      setIsPickingUiDesignSpecFromCanvas,
       openGenerateDialog,
       openSpecDialog,
       openCharacterAnimationPanel,
@@ -442,8 +524,10 @@ export function useImageCanvasGenerationWorkflow({
       openEditDialog,
       openQuickEditPanel,
       pickCharacterSpecFromLayer,
+      pickGenerationReferenceFromLayer,
       pickCharacterReferenceFromLayer,
       pickIconSpecFromLayer,
+      pickUiDesignSpecFromLayer,
       submitIconSpritesheetGeneration,
       submitQuickEdit,
       submitImageGeneration,
@@ -469,9 +553,13 @@ export function useImageCanvasGenerationWorkflow({
       isCharacterReferenceMenuOpen,
       isCharacterSpecMenuOpen,
       isIconSpecMenuOpen,
+      isGenerationReferenceMenuOpen,
       isPickingCharacterReferenceFromCanvas,
       isPickingCharacterSpecFromCanvas,
+      isPickingGenerationReferenceFromCanvas,
       isPickingIconSpecFromCanvas,
+      isPickingUiDesignSpecFromCanvas,
+      isUiDesignSpecMenuOpen,
       isSpecMenuOpen,
       openCharacterAnimationPanel,
       openCharacterGenerationDialog,
@@ -482,7 +570,9 @@ export function useImageCanvasGenerationWorkflow({
       openSpecDialog,
       pickCharacterReferenceFromLayer,
       pickCharacterSpecFromLayer,
+      pickGenerationReferenceFromLayer,
       pickIconSpecFromLayer,
+      pickUiDesignSpecFromLayer,
       quickEditModelOptions,
       quickEditPanel,
       quickEditSizeOptions,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 61168d7cf..27eac7682 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -193,6 +193,40 @@ export function useImageCanvasUploadWorkflow({
     [setGenerateDialog],
   );
 
+  const addGenerationReferenceFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const imageFiles = Array.from(files).filter(isImageFile);
+      if (!imageFiles.length) {
+        window.alert('请选择图片文件');
+        return;
+      }
+
+      const references = await Promise.all(
+        imageFiles.map(async (file, index) => ({
+          file,
+          index,
+          imageSrc: await readImageFileAsDataUrl(file),
+        })),
+      );
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'generation-reference',
+          references: references.map(({ file, imageSrc, index }) =>
+            createUploadedGenerationReference({
+              idPrefix: 'upload-generation-reference',
+              index,
+              fileName: file.name,
+              fallbackLabel: `参考图${index + 1}`,
+              imageSrc,
+            }),
+          ),
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
   const addIconSpecReferenceFiles = useCallback(
     async (files: FileList | File[]) => {
       const imageFile = Array.from(files).find(isImageFile);
@@ -220,6 +254,33 @@ export function useImageCanvasUploadWorkflow({
     [setGenerateDialog],
   );
 
+  const addUiDesignSpecReferenceFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const imageFile = Array.from(files).find(isImageFile);
+      if (!imageFile) {
+        window.alert('请选择图片文件');
+        return;
+      }
+
+      const imageSrc = await readImageFileAsDataUrl(imageFile);
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'ui-design-icon-spec',
+          references: [
+            createUploadedGenerationReference({
+              idPrefix: 'upload-ui-design-icon-spec',
+              fileName: imageFile.name,
+              fallbackLabel: 'UI设计图标素材规范',
+              imageSrc,
+            }),
+          ],
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
   const uploadAssetFile = useCallback(
     async (file: File, options: UploadAssetFileOptions) => {
       if (!isImageFile(file)) {
@@ -435,12 +496,16 @@ export function useImageCanvasUploadWorkflow({
       if (files?.length) {
         if (currentUploadTarget === 'spec-reference') {
           void addSpecReferenceFiles(files);
+        } else if (currentUploadTarget === 'generation-reference') {
+          void addGenerationReferenceFiles(files);
         } else if (currentUploadTarget === 'character-spec') {
           void addCharacterSpecReferenceFiles(files);
         } else if (currentUploadTarget === 'character-reference') {
           void addCharacterReferenceFiles(files);
         } else if (currentUploadTarget === 'icon-spec') {
           void addIconSpecReferenceFiles(files);
+        } else if (currentUploadTarget === 'ui-design-icon-spec') {
+          void addUiDesignSpecReferenceFiles(files);
         } else {
           addUploadedFiles(files, { addToCanvas: activeTool === 'upload' });
         }
@@ -452,8 +517,10 @@ export function useImageCanvasUploadWorkflow({
       activeTool,
       addCharacterReferenceFiles,
       addCharacterSpecReferenceFiles,
+      addGenerationReferenceFiles,
       addSpecReferenceFiles,
       addIconSpecReferenceFiles,
+      addUiDesignSpecReferenceFiles,
       addUploadedFiles,
       setUploadTarget,
     ],
@@ -469,6 +536,8 @@ export function useImageCanvasUploadWorkflow({
     addSpecReferenceFiles,
     addCharacterSpecReferenceFiles,
     addCharacterReferenceFiles,
+    addGenerationReferenceFiles,
     addIconSpecReferenceFiles,
+    addUiDesignSpecReferenceFiles,
   };
 }

From 17768119ea359bb55fcd510cc12ceb8e607e69d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Wed, 17 Jun 2026 23:05:17 +0800
Subject: [PATCH 06/16] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=94=9F=E6=88=90=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

恢复画布底部工具栏的视频生成和 UI 设计入口

恢复视频生成弹窗的参数、模型和提交状态处理

补齐规范参考、快捷键和生成流程相关测试
---
 .../ImageCanvasBottomToolbarView.test.tsx     |  10 +-
 .../ImageCanvasBottomToolbarView.tsx          |   4 +
 ...ImageCanvasGenerationComposerView.test.tsx |  60 +++++++++-
 .../ImageCanvasGenerationComposerView.tsx     | 103 +++++++++++++++++-
 .../ImageCanvasGenerationDialogModel.test.ts  | 100 +++++++++++++++++
 .../ImageCanvasGenerationDialogModel.ts       |  50 ++++++++-
 .../image-editor/ImageCanvasOverlayModel.ts   |   4 +-
 .../ImageCanvasSpecGenerationPanelView.tsx    |  41 ++++++-
 .../useImageCanvasGenerationSurface.test.tsx  |  27 +++++
 .../useImageCanvasGenerationSurface.tsx       |   8 ++
 .../useImageCanvasGenerationWorkflow.ts       |  62 +++++++++++
 .../useImageCanvasKeyboardShortcuts.ts        |  15 ++-
 12 files changed, 465 insertions(+), 19 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index a67baa288..691b009b5 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -31,11 +31,17 @@ describe('ImageCanvasBottomToolbarView', () => {
     ).toBe('false');
 
     fireEvent.click(within(toolbar).getByRole('button', { name: '抓手工具' }));
+    fireEvent.click(within(toolbar).getByRole('button', { name: '生成视频' }));
     fireEvent.click(within(toolbar).getByRole('button', { name: '生成规范' }));
+    fireEvent.click(
+      within(toolbar).getByRole('button', { name: '生成UI设计图' }),
+    );
     fireEvent.click(within(toolbar).getByRole('button', { name: '文字工具' }));
 
     expect(switchTool).toHaveBeenNthCalledWith(1, 'hand');
-    expect(switchTool).toHaveBeenNthCalledWith(2, 'spec');
-    expect(switchTool).toHaveBeenNthCalledWith(3, 'text');
+    expect(switchTool).toHaveBeenNthCalledWith(2, 'video');
+    expect(switchTool).toHaveBeenNthCalledWith(3, 'spec');
+    expect(switchTool).toHaveBeenNthCalledWith(4, 'ui-design');
+    expect(switchTool).toHaveBeenNthCalledWith(5, 'text');
   });
 });
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index dd36b4cce..8075cf122 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -1,9 +1,11 @@
 import {
   ClipboardList,
+  Clapperboard,
   Download,
   Hand,
   ImageIcon,
   ImagePlus,
+  LayoutTemplate,
   MousePointer2,
   Shapes,
   Sparkles,
@@ -30,9 +32,11 @@ const canvasTools: Array<{
   { id: 'hand', label: '抓手工具', icon: Hand },
   { id: 'upload', label: '上传工具', icon: ImagePlus },
   { id: 'generate', label: '生成工具', icon: WandSparkles },
+  { id: 'video', label: '生成视频', icon: Clapperboard },
   { id: 'spec', label: '生成规范', icon: ClipboardList },
   { id: 'character', label: '生成角色形象', icon: Sparkles },
   { id: 'icon', label: '生成图标素材', icon: ImageIcon },
+  { id: 'ui-design', label: '生成UI设计图', icon: LayoutTemplate },
   { id: 'text', label: '文字工具', icon: Type },
   { id: 'shape', label: '形状标注工具', icon: Shapes },
   { id: 'export', label: '导出工具', icon: Download },
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 23089a2f8..8e2eab8ae 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -94,6 +94,7 @@ function renderComposer(
 
 describe('ImageCanvasGenerationComposerView', () => {
   it('让生成UI设计图面板复用普通图片生成面板的纵向结构', () => {
+    const setGenerateDialog = vi.fn();
     renderComposer({
       mode: 'ui-design',
       prompt: '',
@@ -103,6 +104,12 @@ describe('ImageCanvasGenerationComposerView', () => {
       imageModel: 'gpt-image-2',
       aspectRatio: '16:9',
       imageSize: '1K',
+    }, {
+      isUiDesignSpecMenuOpen: true,
+      setGenerateDialog:
+        setGenerateDialog as unknown as Dispatch<
+          SetStateAction<GenerateDialogState | null>
+        >,
     });
 
     const panel = screen.getByRole('dialog', { name: '生成UI设计图' });
@@ -122,6 +129,14 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(
       panel.querySelector('.image-canvas-editor__generation-composer-footer'),
     ).toBeTruthy();
+    fireEvent.change(within(panel).getByRole('textbox', { name: 'UI设计要求' }), {
+      target: { value: '主界面和结算弹窗' },
+    });
+    expect(setGenerateDialog).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(
+      within(menu).getByRole('menuitem', { name: '新建图标素材规范' }),
+    ).toBeTruthy();
   });
 
   it('让生成规范图片面板复用生成类面板 shell 和底部按钮结构', () => {
@@ -256,6 +271,50 @@ describe('ImageCanvasGenerationComposerView', () => {
       within(menu).getByRole('menuitem', { name: '上传图片' }),
     ).toBeTruthy();
   });
+
+  it('生成视频面板可切换时长、清晰度和模型并更新泥点', () => {
+    const setGenerateDialog = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'video',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+        videoModel: 'seedance2.0',
+        videoAspectRatio: '16:9',
+        videoDurationSeconds: 4,
+        videoResolution: '480p',
+        videoMode: 'std',
+        videoSound: 'off',
+      },
+      {
+        setGenerateDialog:
+          setGenerateDialog as unknown as Dispatch<
+            SetStateAction<GenerateDialogState | null>
+          >,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成视频' });
+    expect(within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }))
+      .toBeTruthy();
+    expect(within(panel).getByRole('button', { name: '模型 Seedance 2.0' }))
+      .toBeTruthy();
+    expect(within(panel).getByRole('button', { name: '清晰度 480p' }))
+      .toBeTruthy();
+    expect(within(panel).getByRole('button', { name: '生成视频' }).textContent)
+      .toBe('40');
+
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }),
+    );
+    fireEvent.click(within(panel).getByRole('button', { name: '模型 Seedance 2.0' }));
+    fireEvent.click(within(panel).getByRole('button', { name: '清晰度 480p' }));
+
+    expect(setGenerateDialog).toHaveBeenCalledTimes(3);
+  });
   it('生成规范参考图点击先弹来源菜单，不直接打开上传', () => {
     const onRequestUpload = vi.fn();
     const setIsGenerationReferenceMenuOpen = vi.fn();
@@ -293,4 +352,3 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(within(menu).getByRole('menuitem', { name: '上传图片' })).toBeTruthy();
   });
 });
-
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 668ba6dcf..5cb012d95 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -1,4 +1,4 @@
-import { ImageIcon } from 'lucide-react';
+import { ChevronDown, ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -14,6 +14,7 @@ import {
 } from '../common/PlatformFloatingMenu';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
@@ -23,6 +24,7 @@ import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSprites
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
 import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
 import {
+  EDITOR_VIDEO_MODEL_OPTIONS,
   SPEC_TYPE_LABEL,
   calculateEditorVideoPrice,
 } from './ImageCanvasGenerationModel';
@@ -155,6 +157,9 @@ function ImageCanvasVideoGenerationComposerView({
 }) {
   const resolution = dialog.videoResolution ?? '480p';
   const durationSeconds = dialog.videoDurationSeconds ?? 4;
+  const currentModel =
+    EDITOR_VIDEO_MODEL_OPTIONS.find((item) => item.value === dialog.videoModel)
+      ?? EDITOR_VIDEO_MODEL_OPTIONS[0];
   const price = calculateEditorVideoPrice(resolution, durationSeconds);
   return (
     <>
@@ -211,9 +216,97 @@ function ImageCanvasVideoGenerationComposerView({
           }
         />
         <div className="image-canvas-editor__generation-composer-footer">
-          <span className="image-canvas-editor__generation-ratio">
+          <PlatformInlineOptionButton
+            className="image-canvas-editor__generation-ratio"
+            aria-label={`视频参数 16:9 · ${durationSeconds}秒 · ${resolution}`}
+            disabled={dialog.status === 'generating'}
+            trailingIcon={<ChevronDown className="h-3 w-3" />}
+            onClick={() => {
+              setGenerateDialog((currentDialog) =>
+                currentDialog?.mode === 'video'
+                  ? {
+                      ...currentDialog,
+                      videoDurationSeconds:
+                        currentDialog.videoDurationSeconds === 5 ? 4 : 5,
+                      status:
+                        currentDialog.status === 'failed'
+                          ? 'idle'
+                          : currentDialog.status,
+                      errorMessage:
+                        currentDialog.status === 'failed'
+                          ? undefined
+                          : currentDialog.errorMessage,
+                    }
+                  : currentDialog,
+              );
+            }}
+          >
             16:9 · {resolution} · {durationSeconds}秒
-          </span>
+          </PlatformInlineOptionButton>
+          <PlatformInlineOptionButton
+            className="image-canvas-editor__generation-model"
+            aria-label={`模型 ${currentModel.label}`}
+            disabled={dialog.status === 'generating'}
+            trailingIcon={<ChevronDown className="h-3 w-3" />}
+            onClick={() => {
+              setGenerateDialog((currentDialog) => {
+                if (currentDialog?.mode !== 'video') {
+                  return currentDialog;
+                }
+                const currentIndex = EDITOR_VIDEO_MODEL_OPTIONS.findIndex(
+                  (item) => item.value === currentDialog.videoModel,
+                );
+                const nextModel =
+                  EDITOR_VIDEO_MODEL_OPTIONS[
+                    (Math.max(currentIndex, 0) + 1) %
+                      EDITOR_VIDEO_MODEL_OPTIONS.length
+                  ];
+                return {
+                  ...currentDialog,
+                  videoModel: nextModel.value,
+                  status:
+                    currentDialog.status === 'failed'
+                      ? 'idle'
+                      : currentDialog.status,
+                  errorMessage:
+                    currentDialog.status === 'failed'
+                      ? undefined
+                      : currentDialog.errorMessage,
+                };
+              });
+            }}
+          >
+            {currentModel.label}
+          </PlatformInlineOptionButton>
+          <PlatformInlineOptionButton
+            className="image-canvas-editor__generation-ratio"
+            aria-label={`清晰度 ${resolution}`}
+            disabled={dialog.status === 'generating'}
+            trailingIcon={<ChevronDown className="h-3 w-3" />}
+            onClick={() => {
+              setGenerateDialog((currentDialog) =>
+                currentDialog?.mode === 'video'
+                  ? {
+                      ...currentDialog,
+                      videoResolution:
+                        currentDialog.videoResolution === '720p'
+                          ? '480p'
+                          : '720p',
+                      status:
+                        currentDialog.status === 'failed'
+                          ? 'idle'
+                          : currentDialog.status,
+                      errorMessage:
+                        currentDialog.status === 'failed'
+                          ? undefined
+                          : currentDialog.errorMessage,
+                    }
+                  : currentDialog,
+              );
+            }}
+          >
+            {resolution}
+          </PlatformInlineOptionButton>
           <PlatformActionButton
             type="submit"
             tone="secondary"
@@ -378,6 +471,8 @@ export function ImageCanvasGenerationComposerView({
           }
           renderEditorPortal={renderEditorPortal}
           buildPortalMenuStyle={buildPortalMenuStyle}
+          setGenerateDialog={setGenerateDialog}
+          onOpenSpecDialog={onOpenSpecDialog}
           onUpdateSpecFormValue={onUpdateSpecFormValue}
           onRequestUpload={onRequestUpload}
           onSubmit={onSubmitImageGeneration}
@@ -398,6 +493,8 @@ export function ImageCanvasGenerationComposerView({
           }
           renderEditorPortal={renderEditorPortal}
           buildPortalMenuStyle={buildPortalMenuStyle}
+          setGenerateDialog={setGenerateDialog}
+          onOpenSpecDialog={onOpenSpecDialog}
           onUpdateSpecFormValue={onUpdateSpecFormValue}
           onRequestUpload={onRequestUpload}
           onSubmit={onSubmitImageGeneration}
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 218048eeb..888e2afee 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -7,9 +7,11 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   appendCharacterReference,
+  appendGenerationReference,
   appendIconDescriptionToDialog,
   assignCharacterSpecReference,
   assignIconSpecReference,
+  assignUiDesignSpecReference,
   closeGenerateComposerDialog,
   createCharacterAnimationPanelDraft,
   createCharacterGenerationDialogDraft,
@@ -18,6 +20,8 @@ import {
   createIconGenerationDialogDraft,
   createQuickEditPanelDraft,
   createSpecDialogDraft,
+  createUiDesignGenerationDialogDraft,
+  createVideoGenerationDialogDraft,
   hideGeneratedLayerComposerAfterBlur,
   updateCharacterAnimationDurationPanel,
   updateIconDescriptionInDialog,
@@ -132,6 +136,52 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('creates video and UI design drafts restored from the original generation entry work', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+
+    expect(createVideoGenerationDialogDraft({ canvasSize, viewport }))
+      .toMatchObject({
+        mode: 'video',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+        videoModel: 'seedance2.0',
+        videoAspectRatio: '16:9',
+        videoResolution: '480p',
+        videoDurationSeconds: 4,
+        videoMode: 'std',
+        videoSound: 'off',
+        placeholder: {
+          x: 200,
+          y: 202.5,
+          width: 560,
+          height: 315,
+          originalWidth: 1280,
+          originalHeight: 720,
+        },
+      });
+    expect(
+      createUiDesignGenerationDialogDraft({
+        canvasSize,
+        viewport,
+        imageModel: 'gpt-image-2',
+      }),
+    ).toMatchObject({
+      mode: 'ui-design',
+      imageModel: 'gpt-image-2',
+      aspectRatio: '16:9',
+      imageSize: '1K',
+      uiDesignSpecReference: null,
+      placeholder: {
+        x: 200,
+        y: 202.5,
+        width: 560,
+        height: 315,
+      },
+    });
+  });
+
   it('creates edit, quick-edit, and character animation panel drafts', () => {
     const sourceLayer = createLayer({
       prompt: '原图提示',
@@ -214,6 +264,56 @@ describe('ImageCanvasGenerationDialogModel', () => {
     expect(assignIconSpecReference(iconDialog, sourceLayer)).toBe(iconDialog);
   });
 
+  it('routes picked canvas references to spec, image, video, and UI design fields', () => {
+    const sourceLayer = createLayer({ title: '参考图' });
+    expect(
+      appendGenerationReference(
+        {
+          mode: 'spec',
+          prompt: '',
+          status: 'failed',
+          errorMessage: '失败',
+        },
+        sourceLayer,
+      ),
+    ).toMatchObject({
+      status: 'idle',
+      errorMessage: undefined,
+      specReference: { label: '参考图' },
+    });
+    expect(
+      appendGenerationReference(
+        {
+          mode: 'video',
+          prompt: '',
+          status: 'idle',
+          generationReferences: [],
+        },
+        sourceLayer,
+      ),
+    ).toMatchObject({
+      generationReferences: [{ label: '参考图' }],
+    });
+
+    const uiDialog: GenerateDialogState = {
+      mode: 'ui-design',
+      prompt: '',
+      status: 'failed',
+      errorMessage: '失败',
+    };
+    expect(assignUiDesignSpecReference(uiDialog, sourceLayer)).toBe(uiDialog);
+    expect(
+      assignUiDesignSpecReference(
+        uiDialog,
+        createLayer({ title: '图标规范', assetKind: 'icon-spec' }),
+      ),
+    ).toMatchObject({
+      status: 'idle',
+      errorMessage: undefined,
+      uiDesignSpecReference: { label: '图标规范' },
+    });
+  });
+
   it('updates failed spec and icon dialog fields back to idle state', () => {
     const specDialog: GenerateDialogState = {
       mode: 'spec',
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index cb0e63a10..dcc038748 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -18,6 +18,7 @@ import {
   DEFAULT_IMAGE_MODEL,
   DEFAULT_SPEC_FORM_VALUES,
   EDITOR_IMAGE_DIMENSION_OPTIONS,
+  EDITOR_VIDEO_MODEL_OPTIONS,
   ICON_DESCRIPTION_LIMIT,
   ICON_FRAME_DISPLAY_SIZE,
   ICON_FRAME_ORIGINAL_SIZE,
@@ -25,6 +26,8 @@ import {
   SPEC_FRAME_ORIGINAL_SIZE,
   UI_DESIGN_FRAME_DISPLAY_SIZE,
   UI_DESIGN_FRAME_ORIGINAL_SIZE,
+  VIDEO_FRAME_DISPLAY_SIZE,
+  VIDEO_FRAME_ORIGINAL_SIZE,
 } from './ImageCanvasGenerationModel';
 
 type CanvasSize = { width: number; height: number };
@@ -182,6 +185,37 @@ export function createIconGenerationDialogDraft({
   };
 }
 
+export function createVideoGenerationDialogDraft({
+  canvasSize,
+  viewport,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+}): Omit<CanvasGenerationDialogState, 'id'> {
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  return {
+    mode: 'video',
+    prompt: '',
+    status: 'idle',
+    composerOpen: true,
+    generationReferences: [],
+    videoModel: EDITOR_VIDEO_MODEL_OPTIONS[0].value,
+    videoAspectRatio: '16:9',
+    videoResolution: '480p',
+    videoDurationSeconds: 4,
+    videoMode: 'std',
+    videoSound: 'off',
+    placeholder: {
+      x: worldCenter.x - VIDEO_FRAME_DISPLAY_SIZE.width / 2,
+      y: worldCenter.y - VIDEO_FRAME_DISPLAY_SIZE.height / 2,
+      width: VIDEO_FRAME_DISPLAY_SIZE.width,
+      height: VIDEO_FRAME_DISPLAY_SIZE.height,
+      originalWidth: VIDEO_FRAME_ORIGINAL_SIZE.width,
+      originalHeight: VIDEO_FRAME_ORIGINAL_SIZE.height,
+    },
+  };
+}
+
 export function createUiDesignGenerationDialogDraft({
   canvasSize,
   viewport,
@@ -200,7 +234,7 @@ export function createUiDesignGenerationDialogDraft({
     composerOpen: true,
     uiDesignSpecReference: null,
     imageModel,
-    aspectRatio: dimensionDefaults.aspectRatio,
+    aspectRatio: '16:9',
     imageSize: dimensionDefaults.imageSize,
     placeholder: {
       x: worldCenter.x - UI_DESIGN_FRAME_DISPLAY_SIZE.width / 2,
@@ -292,9 +326,14 @@ export function appendGenerationReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
 ): GenerateDialogState | null {
-  return dialog?.mode === 'generate' ||
-    dialog?.mode === 'video' ||
-    dialog?.mode === 'spec'
+  if (dialog?.mode === 'spec') {
+    return {
+      ...resetFailedGenerationDialog(dialog),
+      specReference: createCanvasLayerReference(layer),
+      composerOpen: true,
+    };
+  }
+  return dialog?.mode === 'generate' || dialog?.mode === 'video'
     ? {
         ...resetFailedGenerationDialog(dialog),
         generationReferences: [
@@ -326,6 +365,9 @@ export function assignUiDesignSpecReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
 ): GenerateDialogState | null {
+  if (layer.assetKind !== 'icon-spec') {
+    return dialog;
+  }
   return dialog?.mode === 'ui-design'
     ? {
         ...resetFailedGenerationDialog(dialog),
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.ts b/src/components/image-editor/ImageCanvasOverlayModel.ts
index 59492c8b5..5ef8e07ac 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.ts
@@ -183,6 +183,8 @@ export function isCanvasGenerationComposerVisible(
     dialog?.mode === 'generate' ||
     dialog?.mode === 'spec' ||
     dialog?.mode === 'character' ||
-    dialog?.mode === 'icon'
+    dialog?.mode === 'icon' ||
+    dialog?.mode === 'ui-design' ||
+    dialog?.mode === 'video'
   );
 }
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 2fef0779c..4bf5fee8c 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -25,6 +25,7 @@ import {
 import type {
   GenerateDialogState,
   SpecFormValues,
+  SpecGenerationType,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 
@@ -35,11 +36,13 @@ type ImageCanvasSpecGenerationPanelViewProps = {
   generationReferenceButtonRef?: RefObject<HTMLButtonElement | null>;
   setIsGenerationReferenceMenuOpen?: Dispatch<SetStateAction<boolean>>;
   setIsPickingGenerationReferenceFromCanvas?: Dispatch<SetStateAction<boolean>>;
+  setGenerateDialog?: Dispatch<SetStateAction<GenerateDialogState | null>>;
   renderEditorPortal?: (node: ReactNode) => ReactNode;
   buildPortalMenuStyle?: (
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
+  onOpenSpecDialog?: (specType: SpecGenerationType) => void;
   onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
   onRequestUpload: (target: UploadTarget) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
@@ -52,8 +55,10 @@ export function ImageCanvasSpecGenerationPanelView({
   generationReferenceButtonRef,
   setIsGenerationReferenceMenuOpen,
   setIsPickingGenerationReferenceFromCanvas,
+  setGenerateDialog,
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
+  onOpenSpecDialog,
   onUpdateSpecFormValue,
   onRequestUpload,
   onSubmit,
@@ -107,9 +112,29 @@ export function ImageCanvasSpecGenerationPanelView({
               size="sm"
               density="compact"
               className="image-canvas-editor__generation-prompt"
-              onChange={(event) =>
-                onUpdateSpecFormValue('customPrompt', event.target.value)
-              }
+              onChange={(event) => {
+                const nextPrompt = event.target.value;
+                if (setGenerateDialog) {
+                  setGenerateDialog((currentDialog) =>
+                    currentDialog?.mode === 'ui-design'
+                      ? {
+                          ...currentDialog,
+                          prompt: nextPrompt,
+                          status:
+                            currentDialog.status === 'failed'
+                              ? 'idle'
+                              : currentDialog.status,
+                          errorMessage:
+                            currentDialog.status === 'failed'
+                              ? undefined
+                              : currentDialog.errorMessage,
+                        }
+                      : currentDialog,
+                  );
+                  return;
+                }
+                onUpdateSpecFormValue('customPrompt', nextPrompt);
+              }}
             />
           </label>
         ) : dialog.specType === 'custom' ? (
@@ -304,6 +329,16 @@ export function ImageCanvasSpecGenerationPanelView({
               >
                 从画布中选择
               </PlatformFloatingMenuItem>
+              {isUiDesignDialog ? (
+                <PlatformFloatingMenuItem
+                  onClick={() => {
+                    setIsGenerationReferenceMenuOpen?.(false);
+                    onOpenSpecDialog?.('icon');
+                  }}
+                >
+                  新建图标素材规范
+                </PlatformFloatingMenuItem>
+              ) : null}
               <PlatformFloatingMenuItem
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index da0919ecc..23c8bab94 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -125,6 +125,9 @@ function GenerationSurfaceHarness() {
       >
         切换生成
       </button>
+      <button type="button" onClick={() => surface.switchGenerationTool('video')}>
+        切换视频
+      </button>
       <button type="button" onClick={() => surface.switchGenerationTool('spec')}>
         切换规范
       </button>
@@ -137,6 +140,12 @@ function GenerationSurfaceHarness() {
       <button type="button" onClick={() => surface.switchGenerationTool('icon')}>
         切换图标
       </button>
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('ui-design')}
+      >
+        切换UI设计
+      </button>
       <button type="button" onClick={() => surface.switchGenerationTool('text')}>
         切换文字
       </button>
@@ -183,4 +192,22 @@ describe('useImageCanvasGenerationSurface', () => {
     const menu = screen.getByRole('menu', { name: '生成规范类型' });
     expect(within(menu).getByRole('menuitem', { name: '角色形象规范' })).toBeTruthy();
   });
+
+  it('opens video and UI design generation dialogs through the generation surface', () => {
+    render(<GenerationSurfaceHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '切换视频' }));
+    expect(screen.getByTestId('tool').textContent).toBe('video');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'video:open:placeholder',
+    );
+    expect(screen.getByRole('dialog', { name: '生成视频' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '切换UI设计' }));
+    expect(screen.getByTestId('tool').textContent).toBe('ui-design');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'ui-design:open:placeholder',
+    );
+    expect(screen.getByRole('dialog', { name: '生成UI设计图' })).toBeTruthy();
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 05da70962..a0b822a17 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -158,6 +158,10 @@ export function useImageCanvasGenerationSurface({
         generationWorkflow.openGenerateDialog();
         return true;
       }
+      if (tool === 'video') {
+        generationWorkflow.openVideoGenerationDialog();
+        return true;
+      }
       if (tool === 'spec') {
         generationWorkflow.setIsSpecMenuOpen((open) => !open);
         setActiveTool('spec');
@@ -171,6 +175,10 @@ export function useImageCanvasGenerationSurface({
         generationWorkflow.openIconGenerationDialog();
         return true;
       }
+      if (tool === 'ui-design') {
+        generationWorkflow.openUiDesignGenerationDialog();
+        return true;
+      }
       return false;
     },
     [generationWorkflow, setActiveTool],
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index cdbb65429..2308a2c59 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -35,6 +35,8 @@ import {
   createIconGenerationDialogDraft,
   createQuickEditPanelDraft,
   createSpecDialogDraft,
+  createUiDesignGenerationDialogDraft,
+  createVideoGenerationDialogDraft,
   hideGeneratedLayerComposerAfterBlur,
   updateCharacterAnimationDurationPanel,
   updateIconDescriptionInDialog,
@@ -300,6 +302,62 @@ export function useImageCanvasGenerationWorkflow({
     viewport,
   ]);
 
+  const openVideoGenerationDialog = useCallback(() => {
+    setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
+    setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
+    setIsPickingCharacterSpecFromCanvas(false);
+    setIsPickingCharacterReferenceFromCanvas(false);
+    setIsIconSpecMenuOpen(false);
+    setIsPickingIconSpecFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
+    openCanvasGenerationDialog(
+      createVideoGenerationDialogDraft({ canvasSize, viewport }),
+    );
+    setActiveTool('video');
+    selectSingleLayer(null);
+    setQuickEditPanel(null);
+    setCharacterAnimationPanel(null);
+  }, [
+    canvasSize,
+    openCanvasGenerationDialog,
+    selectSingleLayer,
+    setActiveTool,
+    viewport,
+  ]);
+
+  const openUiDesignGenerationDialog = useCallback(() => {
+    setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
+    setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
+    setIsPickingCharacterSpecFromCanvas(false);
+    setIsPickingCharacterReferenceFromCanvas(false);
+    setIsIconSpecMenuOpen(false);
+    setIsPickingIconSpecFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
+    openCanvasGenerationDialog(
+      createUiDesignGenerationDialogDraft({
+        canvasSize,
+        viewport,
+        imageModel: 'gpt-image-2',
+      }),
+    );
+    setActiveTool('ui-design');
+    selectSingleLayer(null);
+    setQuickEditPanel(null);
+    setCharacterAnimationPanel(null);
+  }, [
+    canvasSize,
+    openCanvasGenerationDialog,
+    selectSingleLayer,
+    setActiveTool,
+    viewport,
+  ]);
+
   const openEditDialog = useCallback(
     (sourceLayer: CanvasLayer) => {
       setMetadataLayer(null);
@@ -521,6 +579,8 @@ export function useImageCanvasGenerationWorkflow({
       openCharacterAnimationPanel,
       openCharacterGenerationDialog,
       openIconGenerationDialog,
+      openVideoGenerationDialog,
+      openUiDesignGenerationDialog,
       openEditDialog,
       openQuickEditPanel,
       pickCharacterSpecFromLayer,
@@ -566,8 +626,10 @@ export function useImageCanvasGenerationWorkflow({
       openEditDialog,
       openGenerateDialog,
       openIconGenerationDialog,
+      openUiDesignGenerationDialog,
       openQuickEditPanel,
       openSpecDialog,
+      openVideoGenerationDialog,
       pickCharacterReferenceFromLayer,
       pickCharacterSpecFromLayer,
       pickGenerationReferenceFromLayer,
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
index 982f66369..f832d5ae0 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
@@ -66,7 +66,8 @@ function isCanvasGenerationPlaceholderDialog(
       dialog?.mode === 'spec' ||
       dialog?.mode === 'character' ||
       dialog?.mode === 'icon' ||
-      dialog?.mode === 'ui-design')
+      dialog?.mode === 'ui-design' ||
+      dialog?.mode === 'video')
   );
 }
 
@@ -119,7 +120,12 @@ export function useImageCanvasKeyboardShortcuts({
         if (!currentDialog || currentDialog.status === 'generating') {
           return currentDialog;
         }
-        if (currentDialog.mode === 'generate' || currentDialog.mode === 'spec') {
+        if (
+          currentDialog.mode === 'generate' ||
+          currentDialog.mode === 'spec' ||
+          currentDialog.mode === 'ui-design' ||
+          currentDialog.mode === 'video'
+        ) {
           return {
             ...currentDialog,
             composerOpen: false,
@@ -131,9 +137,6 @@ export function useImageCanvasKeyboardShortcuts({
         if (currentDialog.mode === 'icon') {
           return currentDialog;
         }
-        if (currentDialog.mode === 'ui-design') {
-          return currentDialog;
-        }
         return null;
       });
     };
@@ -178,6 +181,8 @@ export function useImageCanvasKeyboardShortcuts({
           setIsPickingCharacterReferenceFromCanvas(false);
           setIsIconSpecMenuOpen(false);
           setIsPickingIconSpecFromCanvas(false);
+          setIsUiDesignSpecMenuOpen(false);
+          setIsPickingUiDesignSpecFromCanvas(false);
           return;
         }
       }

From 946308b75e184c61347cba3a56e2bc8173d8fdb4 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 17 Jun 2026 23:54:18 +0800
Subject: [PATCH 07/16] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E7=94=9F=E6=88=90=E5=99=A8=E5=BF=AB=E7=85=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将生成器对话框作为画布布局项序列化和恢复

生成成功后保留生成器快照并锚定到成品图层

图片类生成结果同步写入账号素材库

补充生成器持久化测试和浏览器回归相关文档
---
 .../shared-memory/decision-log.md             |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   4 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |   9 +
 ...CanvasEditorGenerationIntegration.test.tsx |  89 +++++++
 .../ImageCanvasEditorModel.test.ts            |  74 +++++-
 .../image-editor/ImageCanvasEditorModel.ts    | 232 +++++++++++++++++
 .../image-editor/ImageCanvasEditorView.tsx    |  96 ++++++-
 .../ImageCanvasGenerationComposerView.tsx     |   5 +-
 .../ImageCanvasWorldView.test.tsx             |  24 ++
 .../image-editor/ImageCanvasWorldView.tsx     |  12 +-
 .../useCanvasGenerationDialogs.test.tsx       |  83 ++++++
 .../useCanvasGenerationDialogs.ts             |  36 +++
 ...anvasGenerationSubmissionWorkflow.test.tsx |  58 ++++-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  60 +++--
 .../useImageCanvasGenerationSurface.test.tsx  |   1 -
 .../useImageCanvasGenerationSurface.tsx       |   6 +-
 .../useImageCanvasGenerationWorkflow.test.tsx |   3 +-
 .../useImageCanvasGenerationWorkflow.ts       |   6 +-
 .../useImageCanvasProjectPersistence.test.tsx | 236 ++++++++++++++++--
 .../useImageCanvasProjectPersistence.ts       |  82 ++++--
 20 files changed, 1044 insertions(+), 80 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index f4a522a0a..505ad2e08 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -2326,3 +2326,11 @@
 - 影响范围：图片画布生成工作流、前端 editorProjectClient、`shared-contracts`、`api-server` 视频生成 BFF、编辑器技术方案和生成类面板方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "opens the bottom generate video panel"`、`npm run test -- src/components/image-editor/ImageCanvasMetadataModalView.test.tsx`、`npm run test -- src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p shared-contracts editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-17 图片画布生成器快照纳入画布布局
+
+- 背景：生成占位图和生成器对话框里包含用户输入、参数、参考图、占位框位置和生成结果绑定，刷新后丢失会让已生成图片无法回到 Lovart 式跟随编辑状态。
+- 决策：生成器对象统一作为 `editor_canvas` 布局 JSON 的 `itemType: "generation-dialog"` 项保存，不新增表；成功生成后仍保留生成器快照和最后占位框位置，并通过 `generatedLayerId` 锚定到成品图层，渲染时不重复显示灰色占位框。图片类生成结果同步写入账号级素材库；视频结果当前只作为画布视频资源保存。
+- 影响范围：图片画布 layout 序列化 / hydrate、生成工作流、生成器渲染、项目自动保存、素材库回填和编辑器技术方案。
+- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useCanvasGenerationDialogs.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`、浏览器刷新 smoke。
+- 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 67c0ecec9..ddf90980d 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -41,7 +41,8 @@
 - `editor_project_resource` 表保存工程画布引用过的资源快照：`resourceId`、`projectId`、`ownerUserId`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、sourceResourceId、创建时间和更新时间。上传素材被拖入画布时会复制为 project resource，图层只引用 resourceId。
 - 图片文件本体继续走 OSS，浏览器读取私有 generated 对象仍经 `/api/assets/read-url` 换签。
 - 当前 MVP 的本地上传先以 data URL 持久化在素材记录中，保证刷新和跨项目可见；后续接入正式 OSS 上传时，只替换 `imageSrc/objectKey/assetObjectId` 的写入方式，账号级素材表和画布资源表不变。
-- 资源表只保存资源元数据；图层位置、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。图层展示尺寸不再作为独立 `Size` 真相保存，刷新与新建图层均按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，不单独建表。
+- 资源表只保存资源元数据；图层位置、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。布局 JSON 是混合数组：普通图层按 `layerId/resourceId` 保存，生成器占位和生成器对话框按 `itemType: "generation-dialog"` 保存，不新增单独表。生成器快照必须包含生成器 ID、模式、提示词、参数、参考图、状态、占位框位置和可选 `generatedLayerId`；生成成功后仍保存该快照，只是渲染时由 `generatedLayerId` 锚定到成品图层而不重复显示灰色占位框。图层展示尺寸不再作为独立 `Size` 真相保存，刷新与新建图层均按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，不单独建表。
+- 图片类生成结果除作为 `editor_project_resource` 和画布图层保存外，还要写入账号级 `editor_asset` 素材库；视频结果当前只保存为画布视频资源，不进入图片素材库。
 - 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
 - 未登录用户可以使用本地演示态，但不触发工程自动保存；真实图片生成 / 修改需要登录。编辑器 API 请求允许使用 refresh cookie 静默补 access token，但 401 / 403 只在编辑器局部提示登录，不清空整站登录态，也不把后端 requestId 直接作为生图弹窗主文案。
 
@@ -85,6 +86,7 @@
 - 默认选择模式；底部工具栏能切换工具；中键拖拽和 Space 临时抓手都能平移画布。
 - 拖拽图片接近其它图片边缘或中心时显示吸附线，并保存吸附后的最终布局。
 - 生成工具点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
+- 生成器快照刷新后必须恢复；待生成、生成中、失败和已生成后跟随成品图层的生成器都不能因为刷新丢失输入、参数、参考图或占位框位置。
 - 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色形象规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index d617fa79b..4348dc1cb 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -62,6 +62,14 @@
 - `泥点` 文本不在 UI 中显示，改用图标 + 数值，例如 `生成  ✦ 12`。
 - 泥点配置统一收口到 `api-server` 的编辑器生成配置模块；前端只保留与后端配置同名的展示兜底，后续可接接口动态下发。
 
+## 画布保存
+
+- 生成占位图和生成器对话框不是临时浮层，必须作为画布布局数据保存。
+- 保存时在现有画布布局数组中追加 `itemType: "generation-dialog"` 项，记录生成器 ID、模式、提示词、参数、参考图、状态、占位框位置和 `generatedLayerId`。
+- 生成成功后仍保留生成器快照；画布渲染优先用 `generatedLayerId` 锚定到成品图层，不再重复显示灰色占位框。
+- 图片类生成结果还要写入账号级素材库；视频结果先只作为画布资源和视频图层保存。
+- 刷新项目后，画布需要同时恢复图层、生成器快照和生成输入框跟随关系。
+
 ## 第一版计费配置
 
 ```text
@@ -99,3 +107,4 @@
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
 - 后端存在独立编辑器生成计费配置文件，角色动画价格校验使用该配置。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
+- 生成器输入、参数、参考图和占位框在刷新后仍存在；已生成对象的生成器面板继续跟随成品图层。
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 6577a72d1..72715b230 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -80,6 +80,75 @@ describe('ImageCanvasEditorView generation integration', () => {
     saveEditorProjectLayoutMock,
   });
 
+  it('restores generated image composer from saved generator snapshots', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-generated-dialog',
+      title: '已生成画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-generated-restored',
+          resourceId: 'resource-generated-restored',
+          title: '生成图片 1',
+          x: 236,
+          y: 66,
+          width: 512,
+          height: 512,
+          originalWidth: 512,
+          originalHeight: 512,
+          zIndex: 11,
+          sourceType: 'generated',
+          generationInputs: {
+            fields: [{ title: '生成提示词', value: '刷新后恢复生成器' }],
+            references: [],
+          },
+        },
+        {
+          itemType: 'generation-dialog',
+          layerId: 'generation-dialog:generation-dialog-1',
+          resourceId: 'generation-dialog:generation-dialog-1',
+          dialog: {
+            id: 'generation-dialog-1',
+            mode: 'generate',
+            prompt: '刷新后恢复生成器',
+            status: 'idle',
+            composerOpen: true,
+            generatedLayerId: 'layer-generated-restored',
+            placeholder: {
+              x: 282,
+              y: 112,
+              width: 420,
+              height: 420,
+              originalWidth: 2048,
+              originalHeight: 2048,
+            },
+          },
+        },
+      ],
+      resources: [
+        {
+          resourceId: 'resource-generated-restored',
+          projectId: 'editor-project-generated-dialog',
+          imageSrc: 'data:image/png;base64,cmVzdG9yZWQ=',
+          width: 512,
+          height: 512,
+          sourceType: 'generated',
+        },
+      ],
+      updatedAt: '2026-06-17T00:00:00.000Z',
+    });
+
+    render(<ImageCanvasEditorView />);
+
+    expect(await screen.findByAltText('画布图片：生成图片 1')).toBeTruthy();
+    expect(screen.queryByLabelText('图像生成占位图')).toBeNull();
+    const generateDialog = screen.getByRole('dialog', { name: '生成图片' });
+    expect(generateDialog).toBeTruthy();
+    expect((screen.getByLabelText('生成提示词') as HTMLTextAreaElement).value).toBe(
+      '刷新后恢复生成器',
+    );
+  });
+
   it('opens a canvas generation frame and composer before creating a generated layer', async () => {
     generateEditorImageMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
@@ -151,6 +220,26 @@ describe('ImageCanvasEditorView generation integration', () => {
     await waitFor(() => {
       expect(screen.getByAltText(/画布图片：生成图片/)).toBeTruthy();
     });
+    await waitFor(() => {
+      expect(createEditorAssetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          folderId: 'project',
+          label: expect.stringMatching(/生成图片/u),
+          imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
+          width: 1024,
+          height: 1024,
+          sourceType: 'generated',
+          prompt: '一张明亮的拼图主视觉',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'editor-real-task-1',
+        }),
+      );
+    });
+    fireEvent.click(screen.getByRole('button', { name: '打开素材' }));
+    expect(
+      screen.getByRole('button', { name: /添加生成图片/u }),
+    ).toBeTruthy();
     const generatedLayer = screen
       .getByAltText(/画布图片：生成图片/)
       .closest('button')!;
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 47ce7f6ae..b027ef778 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -7,9 +7,15 @@ import {
   normalizeAssetLibrary,
   normalizeCanvasBackgroundHex,
   resolveSnappedLayerPosition,
+  serializeCanvasLayout,
   serializeLayer,
+  splitCanvasLayoutItems,
 } from './ImageCanvasEditorModel';
-import type { CanvasLayer, EditorAsset } from './ImageCanvasEditorTypes';
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  EditorAsset,
+} from './ImageCanvasEditorTypes';
 
 describe('ImageCanvasEditorModel', () => {
   it('normalizes valid canvas background hex values and rejects invalid input', () => {
@@ -122,6 +128,72 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('serializes generation dialogs beside layers and splits them on load', () => {
+    const layer: CanvasLayer = {
+      id: 'layer-generated',
+      resourceId: 'resource-generated',
+      title: '生成图',
+      src: 'data:image/png;base64,heavy',
+      x: 10,
+      y: 20,
+      width: 1024,
+      height: 768,
+      originalWidth: 1024,
+      originalHeight: 768,
+      zIndex: 9,
+      sourceType: 'generated',
+    };
+    const dialog: CanvasGenerationDialogState = {
+      id: 'generation-dialog-9',
+      mode: 'generate',
+      prompt: '刷新后要继续保留',
+      status: 'generating',
+      composerOpen: false,
+      generatedLayerId: 'layer-generated',
+      imageModel: 'gpt-image-2',
+      placeholder: {
+        x: 100,
+        y: 120,
+        width: 420,
+        height: 420,
+        originalWidth: 2048,
+        originalHeight: 2048,
+      },
+      generationReferences: [
+        {
+          id: 'reference-1',
+          label: '参考图',
+          src: 'data:image/png;base64,ref',
+        },
+      ],
+    };
+
+    const layout = serializeCanvasLayout({
+      layers: [layer],
+      canvasGenerationDialogs: [dialog],
+    });
+    const { layerItems, generationDialogs } = splitCanvasLayoutItems(layout);
+
+    expect(layerItems).toHaveLength(1);
+    expect(generationDialogs).toHaveLength(1);
+    expect(generationDialogs[0]).toMatchObject({
+      id: 'generation-dialog-9',
+      mode: 'generate',
+      prompt: '刷新后要继续保留',
+      status: 'generating',
+      generatedLayerId: 'layer-generated',
+      imageModel: 'gpt-image-2',
+      placeholder: {
+        x: 100,
+        y: 120,
+        width: 420,
+      },
+    });
+    expect(generationDialogs[0]?.generationReferences?.[0]).toMatchObject({
+      label: '参考图',
+    });
+  });
+
   it('snaps moving layers to nearby canvas and layer guides', () => {
     const movingLayer: CanvasLayer = {
       id: 'moving',
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index c2dde13b6..567610e4c 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -4,6 +4,7 @@ import type {
 } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasAssetKind,
+  CanvasGenerationDialogState,
   CanvasGenerationInputs,
   CanvasLayer,
   CanvasContextMenuState,
@@ -170,6 +171,145 @@ export function serializeLayer(
   };
 }
 
+type CanvasGenerationDialogSnapshot = EditorProjectLayerSnapshot & {
+  itemType: 'generation-dialog';
+  dialog: CanvasGenerationDialogState;
+};
+
+export type CanvasLayoutItems = EditorProjectLayerSnapshot[];
+
+export function serializeCanvasGenerationDialog(
+  dialog: CanvasGenerationDialogState,
+): CanvasGenerationDialogSnapshot {
+  return {
+    itemType: 'generation-dialog',
+    layerId: `generation-dialog:${dialog.id}`,
+    resourceId: `generation-dialog:${dialog.id}`,
+    dialog,
+  };
+}
+
+export function serializeCanvasLayout({
+  layers,
+  canvasGenerationDialogs,
+}: {
+  layers: CanvasLayer[];
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
+}): CanvasLayoutItems {
+  return [
+    ...layers.map(serializeLayer),
+    ...canvasGenerationDialogs.map(serializeCanvasGenerationDialog),
+  ];
+}
+
+export function isCanvasGenerationDialogLayoutItem(
+  item: EditorProjectLayerSnapshot,
+): item is CanvasGenerationDialogSnapshot {
+  return (
+    item.itemType === 'generation-dialog' &&
+    Boolean(
+      hydrateCanvasGenerationDialog(
+        (item as { dialog?: unknown }).dialog,
+      ),
+    )
+  );
+}
+
+export function splitCanvasLayoutItems(
+  items: EditorProjectLayerSnapshot[],
+): {
+  layerItems: EditorProjectLayerSnapshot[];
+  generationDialogs: CanvasGenerationDialogState[];
+} {
+  const layerItems: EditorProjectLayerSnapshot[] = [];
+  const generationDialogs: CanvasGenerationDialogState[] = [];
+
+  items.forEach((item) => {
+    if (isCanvasGenerationDialogLayoutItem(item)) {
+      const dialog = hydrateCanvasGenerationDialog(item.dialog);
+      if (dialog) {
+        generationDialogs.push(dialog);
+      }
+      return;
+    }
+    layerItems.push(item);
+  });
+
+  return { layerItems, generationDialogs };
+}
+
+export function hydrateCanvasGenerationDialog(
+  value: unknown,
+): CanvasGenerationDialogState | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const snapshot = value as Partial<CanvasGenerationDialogState>;
+  const id = stringOrNull(snapshot.id);
+  const prompt = typeof snapshot.prompt === 'string' ? snapshot.prompt : '';
+  if (!id || !isCanvasGenerationDialogMode(snapshot.mode)) {
+    return null;
+  }
+
+  return {
+    id,
+    mode: snapshot.mode,
+    prompt,
+    status: isGenerationStatus(snapshot.status) ? snapshot.status : 'idle',
+    composerOpen:
+      typeof snapshot.composerOpen === 'boolean'
+        ? snapshot.composerOpen
+        : true,
+    sourceLayerId: stringOrUndefined(snapshot.sourceLayerId),
+    generatedLayerId: stringOrUndefined(snapshot.generatedLayerId),
+    specType: isSpecGenerationType(snapshot.specType)
+      ? snapshot.specType
+      : undefined,
+    specValues: hydrateSpecFormValues(snapshot.specValues),
+    specReference: hydrateCharacterReference(snapshot.specReference),
+    generationReferences: hydrateCharacterReferences(
+      snapshot.generationReferences,
+    ),
+    characterSpecReference: hydrateCharacterReference(
+      snapshot.characterSpecReference,
+    ),
+    characterReferences: hydrateCharacterReferences(
+      snapshot.characterReferences,
+    ),
+    iconSpecReference: hydrateCharacterReference(snapshot.iconSpecReference),
+    iconDescriptions: Array.isArray(snapshot.iconDescriptions)
+      ? snapshot.iconDescriptions.filter(
+          (description): description is string =>
+            typeof description === 'string',
+        )
+      : undefined,
+    uiDesignSpecReference: hydrateCharacterReference(
+      snapshot.uiDesignSpecReference,
+    ),
+    imageModel: stringOrUndefined(snapshot.imageModel),
+    videoModel:
+      typeof snapshot.videoModel === 'string'
+        ? snapshot.videoModel
+        : undefined,
+    videoAspectRatio: stringOrUndefined(snapshot.videoAspectRatio),
+    videoResolution:
+      snapshot.videoResolution === '480p' || snapshot.videoResolution === '720p'
+        ? snapshot.videoResolution
+        : undefined,
+    videoDurationSeconds:
+      snapshot.videoDurationSeconds === 4 ||
+      snapshot.videoDurationSeconds === 5
+        ? snapshot.videoDurationSeconds
+        : undefined,
+    videoMode: snapshot.videoMode === 'std' ? 'std' : undefined,
+    videoSound: snapshot.videoSound === 'off' ? 'off' : undefined,
+    aspectRatio: stringOrUndefined(snapshot.aspectRatio),
+    imageSize: stringOrUndefined(snapshot.imageSize),
+    errorMessage: stringOrUndefined(snapshot.errorMessage),
+    placeholder: hydrateGenerationPlaceholder(snapshot.placeholder),
+  };
+}
+
 export function hydrateLayer(
   snapshot: EditorProjectLayerSnapshot,
   resourcesById: Map<string, { imageSrc: string }>,
@@ -298,6 +438,10 @@ export function stringOrNull(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : null;
 }
 
+export function stringOrUndefined(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value : undefined;
+}
+
 export function booleanFromSnapshot(value: unknown) {
   return value === true;
 }
@@ -429,6 +573,94 @@ export function isGeneratedLayer(layer: CanvasLayer) {
   );
 }
 
+function isCanvasGenerationDialogMode(
+  value: unknown,
+): value is CanvasGenerationDialogState['mode'] {
+  return (
+    value === 'generate' ||
+    value === 'spec' ||
+    value === 'character' ||
+    value === 'icon' ||
+    value === 'ui-design' ||
+    value === 'video'
+  );
+}
+
+function isGenerationStatus(
+  value: unknown,
+): value is CanvasGenerationDialogState['status'] {
+  return value === 'idle' || value === 'generating' || value === 'failed';
+}
+
+function isSpecGenerationType(
+  value: unknown,
+): value is NonNullable<CanvasGenerationDialogState['specType']> {
+  return (
+    value === 'character' ||
+    value === 'ui' ||
+    value === 'icon' ||
+    value === 'custom'
+  );
+}
+
+function hydrateSpecFormValues(
+  value: unknown,
+): CanvasGenerationDialogState['specValues'] {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  const snapshot = value as Record<string, unknown>;
+  return {
+    playSetting:
+      typeof snapshot.playSetting === 'string' ? snapshot.playSetting : '',
+    artStyle: typeof snapshot.artStyle === 'string' ? snapshot.artStyle : '',
+    bodyRatio: typeof snapshot.bodyRatio === 'string' ? snapshot.bodyRatio : '',
+    characterView:
+      typeof snapshot.characterView === 'string'
+        ? snapshot.characterView
+        : '',
+    customPrompt:
+      typeof snapshot.customPrompt === 'string' ? snapshot.customPrompt : '',
+  };
+}
+
+function hydrateCharacterReference(value: unknown) {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const snapshot = value as Record<string, unknown>;
+  const id = stringOrNull(snapshot.id);
+  const label = stringOrNull(snapshot.label);
+  const src = stringOrNull(snapshot.src);
+  return id && label && src ? { id, label, src } : null;
+}
+
+function hydrateCharacterReferences(value: unknown) {
+  return Array.isArray(value)
+    ? value.flatMap((reference) => {
+        const hydrated = hydrateCharacterReference(reference);
+        return hydrated ? [hydrated] : [];
+      })
+    : undefined;
+}
+
+function hydrateGenerationPlaceholder(
+  value: unknown,
+): CanvasGenerationDialogState['placeholder'] {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  const snapshot = value as Record<string, unknown>;
+  return {
+    x: numberFromSnapshot(snapshot.x, 0),
+    y: numberFromSnapshot(snapshot.y, 0),
+    width: numberFromSnapshot(snapshot.width, 320),
+    height: numberFromSnapshot(snapshot.height, 320),
+    originalWidth: numberFromSnapshot(snapshot.originalWidth, 320),
+    originalHeight: numberFromSnapshot(snapshot.originalHeight, 320),
+  };
+}
+
 export function getLayerBounds(targetLayers: CanvasLayer[]) {
   if (targetLayers.length === 0) {
     return null;
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index c61a0f543..0b31c2916 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { createEditorAsset } from '../../services/image-editor/editorProjectClient';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
 import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
 import { isCanvasGenerationComposerVisible } from './ImageCanvasOverlayModel';
 import type {
   AssetPointerDragState,
+  CanvasGenerationDialogState,
   CanvasContextMenuState,
   CanvasLayer,
   CanvasTool,
@@ -43,6 +45,7 @@ export function ImageCanvasEditorView() {
   const hasRequestedLoginRef = useRef(false);
   const layerCounterRef = useRef(0);
   const layersRef = useRef<CanvasLayer[]>([]);
+  const canvasGenerationDialogsRef = useRef<CanvasGenerationDialogState[]>([]);
   const viewportRef = useRef<CanvasViewport>(DEFAULT_IMAGE_CANVAS_VIEWPORT);
   const captureCanvasHistoryRef = useRef<() => void>(() => {});
   const resetCanvasInteractionStateRef = useRef<() => void>(() => {});
@@ -219,13 +222,14 @@ export function ImageCanvasEditorView() {
     canvasGenerationDialogs,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById,
     activateCanvasGenerationDialog,
+    restoreCanvasGenerationDialogs,
     removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder,
   } = useCanvasGenerationDialogs({
     onActivate: handleActivateCanvasGenerationDialog,
   });
+  canvasGenerationDialogsRef.current = canvasGenerationDialogs;
   const canvasHistoryRefs = useMemo(
     () => ({
       layersRef,
@@ -277,16 +281,98 @@ export function ImageCanvasEditorView() {
         isCanvasGenerationComposerVisible(currentDialog)
           ? {
               ...currentDialog,
-              composerOpen: false,
+              composerOpen: currentDialog.generatedLayerId === layerId,
             }
           : currentDialog,
       );
     }
   }, []);
+  const persistGeneratedAsset = useCallback(
+    (layer: CanvasLayer) => {
+      if (authUiRef.current && !authUiRef.current.canAccessProtectedData) {
+        openEditorLoginModal();
+        return;
+      }
+      createEditorAsset({
+        folderId: activeUploadFolderId,
+        label: layer.title,
+        imageSrc: layer.src,
+        objectKey: layer.objectKey,
+        assetObjectId: layer.assetObjectId,
+        width: layer.originalWidth,
+        height: layer.originalHeight,
+        sourceType: 'generated',
+        prompt: layer.prompt,
+        actualPrompt: layer.actualPrompt,
+        model: layer.model,
+        provider: layer.provider,
+        taskId: layer.taskId,
+      })
+        .then((asset) => {
+          setAssets((currentAssets) => [
+            ...currentAssets.filter(
+              (currentAsset) => currentAsset.id !== asset.assetId,
+            ),
+            {
+              id: asset.assetId,
+              label: asset.label,
+              src: asset.imageSrc,
+              width: asset.width,
+              height: asset.height,
+              folderId: asset.folderId,
+              sourceKind: 'uploaded',
+              sourceType: asset.sourceType,
+              persisted: true,
+              prompt: asset.prompt ?? undefined,
+              actualPrompt: asset.actualPrompt ?? undefined,
+              model: asset.model ?? undefined,
+              provider: asset.provider ?? undefined,
+              taskId: asset.taskId ?? undefined,
+              objectKey: asset.objectKey ?? undefined,
+              assetObjectId: asset.assetObjectId ?? undefined,
+            },
+          ]);
+          setAssetFolders((currentFolders) =>
+            currentFolders.map((folder) =>
+              folder.id === asset.folderId
+                ? {
+                    ...folder,
+                    collapsed: false,
+                  }
+                : folder,
+            ),
+          );
+          setLayers((currentLayers) =>
+            currentLayers.map((currentLayer) =>
+              currentLayer.id === layer.id
+                ? {
+                    ...currentLayer,
+                    sourceAssetId: asset.assetId,
+                    objectKey: asset.objectKey ?? currentLayer.objectKey,
+                    assetObjectId:
+                      asset.assetObjectId ?? currentLayer.assetObjectId,
+                  }
+                : currentLayer,
+            ),
+          );
+        })
+        .catch((error: unknown) => {
+          if (
+            error instanceof Error &&
+            'status' in error &&
+            (error.status === 401 || error.status === 403)
+          ) {
+            openEditorLoginModal();
+          }
+        });
+    },
+    [activeUploadFolderId, openEditorLoginModal, setAssetFolders, setAssets],
+  );
   const projectPersistenceRefs = useMemo(
     () => ({
       layersRef,
       viewportRef,
+      canvasGenerationDialogsRef,
     }),
     [],
   );
@@ -300,14 +386,16 @@ export function ImageCanvasEditorView() {
       setLayerCounter: (value: number) => {
         layerCounterRef.current = value;
       },
+      restoreCanvasGenerationDialogs,
     }),
-    [selectSingleLayer],
+    [restoreCanvasGenerationDialogs, selectSingleLayer],
   );
   const { projectId, appendCanvasLayersWithResources } =
     useImageCanvasProjectPersistence({
       refs: projectPersistenceRefs,
       setters: projectPersistenceSetters,
       layers,
+      canvasGenerationDialogs,
       viewport,
       canAccessProtectedData: authUi ? authUi.canAccessProtectedData : true,
       openEditorLoginModal,
@@ -364,7 +452,6 @@ export function ImageCanvasEditorView() {
     canvasGenerationDialogs,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources,
@@ -375,6 +462,7 @@ export function ImageCanvasEditorView() {
     setMetadataLayer,
     setImageContextMenu,
     requestUpload,
+    persistGeneratedAsset,
   });
   const {
     quickEditPanel,
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 5cb012d95..96f0cc0da 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -260,7 +260,10 @@ function ImageCanvasVideoGenerationComposerView({
                   EDITOR_VIDEO_MODEL_OPTIONS[
                     (Math.max(currentIndex, 0) + 1) %
                       EDITOR_VIDEO_MODEL_OPTIONS.length
-                  ];
+                  ] ?? EDITOR_VIDEO_MODEL_OPTIONS[0];
+                if (!nextModel) {
+                  return currentDialog;
+                }
                 return {
                   ...currentDialog,
                   videoModel: nextModel.value,
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index c030e7669..d01ad1f8f 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -218,4 +218,28 @@ describe('ImageCanvasWorldView', () => {
     expect(props.onActivateGenerationDialog).toHaveBeenCalledWith(dialog);
     expect(screen.queryByText('dialog-without-placeholder')).toBeNull();
   });
+
+  it('keeps saved generator placeholders hidden after a result layer exists', () => {
+    renderWorldView({
+      layers: [createLayer({ id: 'layer-generated', title: '生成图片' })],
+      canvasGenerationDialogs: [
+        createGenerationDialog({
+          generatedLayerId: 'layer-generated',
+          placeholder: {
+            x: 80,
+            y: 90,
+            width: 420,
+            height: 420,
+            originalWidth: 2048,
+            originalHeight: 2048,
+          },
+        }),
+      ],
+    });
+
+    expect(screen.getByRole('button', { name: '选择生成图片' })).toBeTruthy();
+    expect(
+      screen.queryByRole('button', { name: '图像生成占位图' }),
+    ).toBeNull();
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index 69b8a999e..25f1b9771 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -216,8 +216,12 @@ export function ImageCanvasWorldView({
           }}
         />
       ) : null}
-      {canvasGenerationDialogs.map((dialog) =>
-        dialog.placeholder ? (
+      {canvasGenerationDialogs.map((dialog) => {
+        const hasGeneratedLayer = Boolean(
+          dialog.generatedLayerId &&
+            layers.some((layer) => layer.id === dialog.generatedLayerId),
+        );
+        return dialog.placeholder && !hasGeneratedLayer ? (
           <div
             key={dialog.id}
             className={`image-canvas-editor__generation-frame ${
@@ -276,8 +280,8 @@ export function ImageCanvasWorldView({
               </span>
             ) : null}
           </div>
-        ) : null,
-      )}
+        ) : null;
+      })}
       {(generateDialog?.mode === 'generate' ||
         generateDialog?.mode === 'spec' ||
         generateDialog?.mode === 'character' ||
diff --git a/src/components/image-editor/useCanvasGenerationDialogs.test.tsx b/src/components/image-editor/useCanvasGenerationDialogs.test.tsx
index 7c2ab16a3..b933c82cc 100644
--- a/src/components/image-editor/useCanvasGenerationDialogs.test.tsx
+++ b/src/components/image-editor/useCanvasGenerationDialogs.test.tsx
@@ -128,6 +128,53 @@ function GenerationDialogsHarness({ onActivate }: { onActivate: () => void }) {
       >
         remove layer dialogs
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.restoreCanvasGenerationDialogs([
+            {
+              id: 'generation-dialog-12',
+              mode: 'generate',
+              prompt: 'restored',
+              status: 'idle',
+              composerOpen: true,
+              placeholder: {
+                x: 12,
+                y: 24,
+                width: 320,
+                height: 240,
+                originalWidth: 320,
+                originalHeight: 240,
+              },
+            },
+          ])
+        }
+      >
+        restore saved
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.restoreCanvasGenerationDialogs([
+            {
+              id: 'generation-dialog-2',
+              mode: 'generate',
+              prompt: 'inactive saved',
+              status: 'idle',
+              composerOpen: false,
+            },
+            {
+              id: 'generation-dialog-3',
+              mode: 'character',
+              prompt: 'active saved',
+              status: 'idle',
+              composerOpen: true,
+            },
+          ])
+        }
+      >
+        restore active
+      </button>
     </div>
   );
 }
@@ -174,4 +221,40 @@ describe('useCanvasGenerationDialogs', () => {
     expect(screen.getByTestId('active-prompt').textContent).toBe('-');
     expect(screen.getByTestId('inactive').textContent).toBe('');
   });
+
+  it('restores saved dialogs and continues ids after the saved maximum', () => {
+    const onActivate = vi.fn();
+    render(<GenerationDialogsHarness onActivate={onActivate} />);
+
+    act(() => screen.getByRole('button', { name: 'restore saved' }).click());
+    expect(screen.getByTestId('active-id').textContent).toBe(
+      'generation-dialog-12',
+    );
+    expect(screen.getByTestId('active-prompt').textContent).toBe('restored');
+
+    act(() => screen.getByRole('button', { name: 'open second' }).click());
+    expect(screen.getByTestId('active-id').textContent).toBe(
+      'generation-dialog-13',
+    );
+    expect(screen.getByTestId('inactive').textContent).toContain(
+      'generation-dialog-12:restored:false',
+    );
+  });
+
+  it('keeps the saved open dialog active when restoring multiple dialogs', () => {
+    const onActivate = vi.fn();
+    render(<GenerationDialogsHarness onActivate={onActivate} />);
+
+    act(() => screen.getByRole('button', { name: 'restore active' }).click());
+
+    expect(screen.getByTestId('active-id').textContent).toBe(
+      'generation-dialog-3',
+    );
+    expect(screen.getByTestId('active-prompt').textContent).toBe(
+      'active saved',
+    );
+    expect(screen.getByTestId('inactive').textContent).toContain(
+      'generation-dialog-2:inactive saved:false',
+    );
+  });
 });
diff --git a/src/components/image-editor/useCanvasGenerationDialogs.ts b/src/components/image-editor/useCanvasGenerationDialogs.ts
index d2bc52fbd..8313df4ba 100644
--- a/src/components/image-editor/useCanvasGenerationDialogs.ts
+++ b/src/components/image-editor/useCanvasGenerationDialogs.ts
@@ -127,6 +127,41 @@ export function useCanvasGenerationDialogs({
     [onActivate],
   );
 
+  const restoreCanvasGenerationDialogs = useCallback(
+    (dialogs: CanvasGenerationDialogState[]) => {
+      const nextCounter = dialogs.reduce((maxCounter, dialog) => {
+        const match = /^generation-dialog-(\d+)$/u.exec(dialog.id);
+        const numericId = match ? Number.parseInt(match[1] ?? '0', 10) : 0;
+        return Math.max(maxCounter, Number.isFinite(numericId) ? numericId : 0);
+      }, 0);
+      generationDialogCounterRef.current = Math.max(
+        generationDialogCounterRef.current,
+        nextCounter,
+      );
+      const activeDialog =
+        [...dialogs].reverse().find((dialog) => dialog.composerOpen !== false) ??
+        dialogs[dialogs.length - 1] ??
+        null;
+      setGenerateDialog(
+        activeDialog
+          ? {
+              ...activeDialog,
+              composerOpen: activeDialog.composerOpen !== false,
+            }
+          : null,
+      );
+      setInactiveGenerateDialogs(
+        dialogs
+          .filter((dialog) => dialog.id !== activeDialog?.id)
+          .map((dialog) => ({
+            ...dialog,
+            composerOpen: false,
+          })),
+      );
+    },
+    [],
+  );
+
   const removeCanvasGenerationDialogsByLayerId = useCallback(
     (targetLayerId: string) => {
       const keepDialog = (dialog: CanvasGenerationDialogState) =>
@@ -182,6 +217,7 @@ export function useCanvasGenerationDialogs({
     updateCanvasGenerationDialogById,
     removeCanvasGenerationDialogById,
     activateCanvasGenerationDialog,
+    restoreCanvasGenerationDialogs,
     removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder,
   };
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 1269eda80..fc18e7649 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -133,7 +133,6 @@ function SubmissionWorkflowHarness({
     setCharacterAnimationPanel,
     setGenerateDialog: dialogs.setGenerateDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById: dialogs.removeCanvasGenerationDialogById,
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources: (nextLayers) =>
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]),
@@ -412,7 +411,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       );
     });
     expect(screen.getByTestId('dialog').textContent).toBe(
-      'generate:idle:open:layer-generated-1:-:-',
+      'generate:idle:open:layer-generated-1:placeholder:-',
     );
   });
 
@@ -468,6 +467,14 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
             src: 'data:image/png;base64,spec',
           },
           iconDescriptions: ['  返回按钮  ', '', '设置按钮'],
+          placeholder: {
+            x: 140,
+            y: 160,
+            width: 360,
+            height: 360,
+            originalWidth: 512,
+            originalHeight: 512,
+          },
         }}
       />,
     );
@@ -493,12 +500,57 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       'layer-icon-2:设置按钮:-:icon',
     );
     expect(screen.getByTestId('selected').textContent).toBe('layer-icon-1');
-    expect(screen.getByTestId('dialog').textContent).toBe('-');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'icon:idle:open:layer-icon-1:placeholder:-',
+    );
     expect(screen.getByTestId('remembered-model').textContent).toBe(
       'gpt-image-2',
     );
   });
 
+  it('keeps character generation dialog data after the result is created', async () => {
+    generateEditorImageMock.mockResolvedValueOnce(
+      createGenerated({ width: 768, height: 768 }),
+    );
+    render(
+      <SubmissionWorkflowHarness
+        initialDialog={{
+          id: 'dialog-character',
+          mode: 'character',
+          prompt: '骑士角色',
+          status: 'idle',
+          composerOpen: true,
+          imageModel: 'gpt-image-2',
+          characterSpecReference: {
+            id: 'spec-character',
+            label: '角色规范',
+            src: 'data:image/png;base64,spec',
+          },
+          placeholder: {
+            x: 120,
+            y: 140,
+            width: 420,
+            height: 420,
+            originalWidth: 2048,
+            originalHeight: 2048,
+          },
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '设置初始对话' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交当前生成' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('layers').textContent).toContain(
+        'layer-generated-1:角色形象 1:-:character',
+      );
+    });
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'character:idle:open:layer-generated-1:placeholder:-',
+    );
+  });
+
   it('moves character animation panels from generating to completed', async () => {
     generateEditorCharacterAnimationMock.mockResolvedValueOnce({
       frames: [{ imageSrc: 'data:image/png;base64,frame' }],
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 322b81966..90580a127 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -66,7 +66,6 @@ type GenerationSubmissionWorkflowOptions = {
     dialogId: string,
     updater: CanvasGenerationDialogUpdater,
   ) => void;
-  removeCanvasGenerationDialogById: (dialogId: string) => void;
   getGeneratingDialogPlaceholder: (
     dialog: GenerateDialogState,
   ) => GenerateDialogState['placeholder'];
@@ -76,6 +75,7 @@ type GenerationSubmissionWorkflowOptions = {
   setActiveTool: Dispatch<SetStateAction<CanvasTool>>;
   setActiveSidebarPanel: Dispatch<SetStateAction<SidebarPanel | null>>;
   rememberImageModel: (imageModel: string) => void;
+  persistGeneratedAsset?: (layer: CanvasLayer) => void;
 };
 
 export function useImageCanvasGenerationSubmissionWorkflow({
@@ -91,7 +91,6 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   setCharacterAnimationPanel,
   setGenerateDialog,
   updateCanvasGenerationDialogById,
-  removeCanvasGenerationDialogById,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
   selectSingleLayer,
@@ -99,7 +98,18 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   setActiveTool,
   setActiveSidebarPanel,
   rememberImageModel,
+  persistGeneratedAsset,
 }: GenerationSubmissionWorkflowOptions) {
+  const addGeneratedLayersToCanvas = useCallback(
+    (nextLayers: CanvasLayer[]) => {
+      appendCanvasLayersWithResources(nextLayers);
+      nextLayers
+        .filter((layer) => layer.mediaType !== 'video')
+        .forEach((layer) => persistGeneratedAsset?.(layer));
+    },
+    [appendCanvasLayersWithResources, persistGeneratedAsset],
+  );
+
   const addGeneratedResultLayer = useCallback(
     (
       generated: Parameters<typeof createGeneratedResultLayer>[0]['generated'],
@@ -126,32 +136,27 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         generationInputs: options.generationInputs,
       });
 
-      appendCanvasLayersWithResources([nextLayer]);
+      addGeneratedLayersToCanvas([nextLayer]);
       selectSingleLayer(nextLayer.id);
       setActiveSidebarPanel('layers');
       if (options.sourceLayer) {
         setGenerateDialog(null);
         setActiveTool('select');
       } else if (options.dialogId) {
-        updateCanvasGenerationDialogById(options.dialogId, (currentDialog) =>
-          currentDialog.mode === 'character' || currentDialog.mode === 'icon'
-            ? null
-            : {
-                ...currentDialog,
-                status: 'idle',
-                composerOpen: true,
-                generatedLayerId: nextLayer.id,
-                placeholder: undefined,
-                errorMessage: undefined,
-              },
-        );
+        updateCanvasGenerationDialogById(options.dialogId, (currentDialog) => ({
+          ...currentDialog,
+          status: 'idle',
+          composerOpen: true,
+          generatedLayerId: nextLayer.id,
+          errorMessage: undefined,
+        }));
       }
       if (options.sourceLayer) {
         fitLayers([options.sourceLayer, nextLayer]);
       }
     },
     [
-      appendCanvasLayersWithResources,
+      addGeneratedLayersToCanvas,
       canvasSize,
       fitLayers,
       layerCounterRef,
@@ -179,7 +184,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         generationInputs,
       });
 
-      appendCanvasLayersWithResources([nextLayer]);
+      addGeneratedLayersToCanvas([nextLayer]);
       selectSingleLayer(nextLayer.id);
       setActiveSidebarPanel('layers');
       setQuickEditPanel(null);
@@ -187,7 +192,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       fitLayers([sourceLayer, nextLayer]);
     },
     [
-      appendCanvasLayersWithResources,
+      addGeneratedLayersToCanvas,
       fitLayers,
       layerCounterRef,
       selectSingleLayer,
@@ -224,22 +229,28 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         return;
       }
       layerCounterRef.current += nextLayers.length;
-      appendCanvasLayersWithResources(nextLayers);
+      addGeneratedLayersToCanvas(nextLayers);
       selectSingleLayer(nextLayers[0]?.id ?? null);
       setActiveSidebarPanel('layers');
       if (dialogId) {
-        removeCanvasGenerationDialogById(dialogId);
+        updateCanvasGenerationDialogById(dialogId, (currentDialog) => ({
+          ...currentDialog,
+          status: 'idle',
+          composerOpen: true,
+          generatedLayerId: nextLayers[0]?.id,
+          errorMessage: undefined,
+        }));
       }
       setActiveTool('select');
     },
     [
-      appendCanvasLayersWithResources,
+      addGeneratedLayersToCanvas,
       canvasSize,
       layerCounterRef,
-      removeCanvasGenerationDialogById,
       selectSingleLayer,
       setActiveSidebarPanel,
       setActiveTool,
+      updateCanvasGenerationDialogById,
       viewport,
     ],
   );
@@ -264,7 +275,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         frame,
       });
 
-      appendCanvasLayersWithResources([nextLayer]);
+      addGeneratedLayersToCanvas([nextLayer]);
       selectSingleLayer(nextLayer.id);
       setActiveSidebarPanel('layers');
       if (dialogId) {
@@ -273,14 +284,13 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           status: 'idle',
           composerOpen: true,
           generatedLayerId: nextLayer.id,
-          placeholder: undefined,
           errorMessage: undefined,
         }));
       }
       setActiveTool('select');
     },
     [
-      appendCanvasLayersWithResources,
+      addGeneratedLayersToCanvas,
       canvasSize,
       layerCounterRef,
       selectSingleLayer,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index 23c8bab94..2e988200b 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -88,7 +88,6 @@ function GenerationSurfaceHarness() {
     canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     openCanvasGenerationDialog: dialogs.openCanvasGenerationDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById: dialogs.removeCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId:
       dialogs.removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index a0b822a17..a1372c884 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -52,7 +52,6 @@ type ImageCanvasGenerationSurfaceOptions = {
     dialogId: string,
     updater: CanvasGenerationDialogUpdater,
   ) => void;
-  removeCanvasGenerationDialogById: (dialogId: string) => void;
   removeCanvasGenerationDialogsByLayerId: (targetLayerId: string) => void;
   getGeneratingDialogPlaceholder: (
     dialog: GenerateDialogState,
@@ -65,6 +64,7 @@ type ImageCanvasGenerationSurfaceOptions = {
   setMetadataLayer: Dispatch<SetStateAction<CanvasLayer | null>>;
   setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
   requestUpload: (target: UploadTarget) => void;
+  persistGeneratedAsset?: (layer: CanvasLayer) => void;
 };
 
 export function useImageCanvasGenerationSurface({
@@ -84,7 +84,6 @@ export function useImageCanvasGenerationSurface({
   canvasGenerationDialogs,
   openCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
-  removeCanvasGenerationDialogById,
   removeCanvasGenerationDialogsByLayerId,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
@@ -95,6 +94,7 @@ export function useImageCanvasGenerationSurface({
   setMetadataLayer,
   setImageContextMenu,
   requestUpload,
+  persistGeneratedAsset,
 }: ImageCanvasGenerationSurfaceOptions) {
   const generationWorkflow = useImageCanvasGenerationWorkflow({
     layers,
@@ -107,7 +107,6 @@ export function useImageCanvasGenerationSurface({
     setGenerateDialog,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources,
@@ -117,6 +116,7 @@ export function useImageCanvasGenerationSurface({
     setActiveSidebarPanel,
     setMetadataLayer,
     setImageContextMenu,
+    persistGeneratedAsset,
   });
 
   const activeGenerationLayer =
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 95b62d8c8..d34831491 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -110,7 +110,6 @@ function GenerationWorkflowHarness({
     setGenerateDialog: dialogs.setGenerateDialog,
     openCanvasGenerationDialog: dialogs.openCanvasGenerationDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById: dialogs.removeCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId:
       dialogs.removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
@@ -383,7 +382,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       'layer-generated-1',
     );
     expect(screen.getByTestId('dialog').textContent).toBe(
-      'generate:idle:open:layer-generated-1:-',
+      'generate:idle:open:layer-generated-1:placeholder',
     );
   });
 
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 2308a2c59..8a1bf3acc 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -77,7 +77,6 @@ type GenerationWorkflowOptions = {
     dialogId: string,
     updater: CanvasGenerationDialogUpdater,
   ) => void;
-  removeCanvasGenerationDialogById: (dialogId: string) => void;
   removeCanvasGenerationDialogsByLayerId: (targetLayerId: string) => void;
   getGeneratingDialogPlaceholder: (
     dialog: GenerateDialogState,
@@ -89,6 +88,7 @@ type GenerationWorkflowOptions = {
   setActiveSidebarPanel: Dispatch<SetStateAction<SidebarPanel | null>>;
   setMetadataLayer: Dispatch<SetStateAction<CanvasLayer | null>>;
   setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
+  persistGeneratedAsset?: (layer: CanvasLayer) => void;
 };
 
 export function useImageCanvasGenerationWorkflow({
@@ -102,7 +102,6 @@ export function useImageCanvasGenerationWorkflow({
   setGenerateDialog,
   openCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
-  removeCanvasGenerationDialogById,
   removeCanvasGenerationDialogsByLayerId,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
@@ -112,6 +111,7 @@ export function useImageCanvasGenerationWorkflow({
   setActiveSidebarPanel,
   setMetadataLayer,
   setImageContextMenu,
+  persistGeneratedAsset,
 }: GenerationWorkflowOptions) {
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
   const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
@@ -476,7 +476,6 @@ export function useImageCanvasGenerationWorkflow({
     setCharacterAnimationPanel,
     setGenerateDialog,
     updateCanvasGenerationDialogById,
-    removeCanvasGenerationDialogById,
     getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources,
     selectSingleLayer,
@@ -484,6 +483,7 @@ export function useImageCanvasGenerationWorkflow({
     setActiveTool,
     setActiveSidebarPanel,
     rememberImageModel: setLastImageModel,
+    persistGeneratedAsset,
   });
   const {
     submitCharacterAnimation,
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
index ca9c0b880..b916c92be 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
@@ -1,10 +1,14 @@
 /* @vitest-environment jsdom */
 
 import { act, render, screen, waitFor } from '@testing-library/react';
-import { useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+} from './ImageCanvasEditorTypes';
 import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersistence';
 
 const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
@@ -45,10 +49,15 @@ function createLayer(id: string): CanvasLayer {
 
 function ProjectPersistenceHarness({
   canAccessProtectedData = true,
+  initialGenerationDialogs = [],
 }: {
   canAccessProtectedData?: boolean;
+  initialGenerationDialogs?: CanvasGenerationDialogState[];
 }) {
   const [layers, setLayers] = useState<CanvasLayer[]>([]);
+  const [generationDialogs, setGenerationDialogs] = useState<
+    CanvasGenerationDialogState[]
+  >(initialGenerationDialogs);
   const [viewport, setViewport] = useState<CanvasViewport>({
     x: 0,
     y: 0,
@@ -58,33 +67,49 @@ function ProjectPersistenceHarness({
   const [projectRenameValue, setProjectRenameValue] = useState('');
   const layersRef = useRef(layers);
   const viewportRef = useRef(viewport);
+  const canvasGenerationDialogsRef = useRef(generationDialogs);
   const selectedLayerRef = useRef<string | null>(null);
   const layerCounterRef = useRef(0);
+  const openEditorLoginModalRef = useRef(vi.fn());
 
   layersRef.current = layers;
   viewportRef.current = viewport;
-
-  const persistence = useImageCanvasProjectPersistence({
-    refs: {
+  canvasGenerationDialogsRef.current = generationDialogs;
+  const selectSingleLayer = useCallback((layerId: string | null) => {
+    selectedLayerRef.current = layerId;
+  }, []);
+  const setLayerCounter = useCallback((value: number) => {
+    layerCounterRef.current = value;
+  }, []);
+  const persistenceRefs = useMemo(
+    () => ({
       layersRef,
       viewportRef,
-    },
-    setters: {
+      canvasGenerationDialogsRef,
+    }),
+    [],
+  );
+  const persistenceSetters = useMemo(
+    () => ({
       setProjectTitle,
       setProjectRenameValue,
       setViewport,
       setLayers,
-      selectSingleLayer: (layerId) => {
-        selectedLayerRef.current = layerId;
-      },
-      setLayerCounter: (value) => {
-        layerCounterRef.current = value;
-      },
-    },
+      selectSingleLayer,
+      setLayerCounter,
+      restoreCanvasGenerationDialogs: setGenerationDialogs,
+    }),
+    [selectSingleLayer, setLayerCounter],
+  );
+
+  const persistence = useImageCanvasProjectPersistence({
+    refs: persistenceRefs,
+    setters: persistenceSetters,
     layers,
+    canvasGenerationDialogs: generationDialogs,
     viewport,
     canAccessProtectedData,
-    openEditorLoginModal: vi.fn(),
+    openEditorLoginModal: openEditorLoginModalRef.current,
   });
 
   return (
@@ -97,6 +122,11 @@ function ProjectPersistenceHarness({
       </span>
       <span data-testid="selected">{selectedLayerRef.current ?? '-'}</span>
       <span data-testid="counter">{layerCounterRef.current}</span>
+      <span data-testid="generation-dialogs">
+        {generationDialogs
+          .map((dialog) => `${dialog.id}:${dialog.prompt}:${dialog.placeholder?.x}`)
+          .join(',')}
+      </span>
       <button
         type="button"
         onClick={() => {
@@ -105,6 +135,42 @@ function ProjectPersistenceHarness({
       >
         append
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          const generatedLayer = createLayer('layer-generated');
+          persistence.appendCanvasLayersWithResources([
+            {
+              ...generatedLayer,
+              title: '生成图片',
+              sourceType: 'generated',
+              sourceAssetId: undefined,
+            },
+          ]);
+        }}
+      >
+        append generated
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setGenerationDialogs((currentDialogs) =>
+            currentDialogs.map((dialog) =>
+              dialog.id === 'generation-dialog-1'
+                ? {
+                    ...dialog,
+                    prompt: '移动后的生成器',
+                    placeholder: dialog.placeholder
+                      ? { ...dialog.placeholder, x: 88 }
+                      : dialog.placeholder,
+                  }
+                : dialog,
+            ),
+          );
+        }}
+      >
+        move generation
+      </button>
     </div>
   );
 }
@@ -175,6 +241,146 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('saves generation dialogs in the project layout and restores them on load', async () => {
+    const savedDialog: CanvasGenerationDialogState = {
+      id: 'generation-dialog-1',
+      mode: 'generate',
+      prompt: '刷新后继续生成',
+      status: 'generating',
+      composerOpen: false,
+      placeholder: {
+        x: 42,
+        y: 56,
+        width: 420,
+        height: 420,
+        originalWidth: 2048,
+        originalHeight: 2048,
+      },
+    };
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-default',
+      title: '空画布项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          itemType: 'generation-dialog',
+          layerId: 'generation-dialog:generation-dialog-1',
+          resourceId: 'generation-dialog:generation-dialog-1',
+          dialog: savedDialog,
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByTestId('generation-dialogs').textContent).toBe(
+        'generation-dialog-1:刷新后继续生成:42',
+      );
+    });
+
+    vi.useFakeTimers();
+    act(() => {
+      screen.getByRole('button', { name: 'move generation' }).click();
+    });
+    expect(screen.getByTestId('generation-dialogs').textContent).toBe(
+      'generation-dialog-1:移动后的生成器:88',
+    );
+    act(() => {
+      vi.advanceTimersByTime(451);
+    });
+
+    expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        layers: expect.arrayContaining([
+          expect.objectContaining({
+            itemType: 'generation-dialog',
+            dialog: expect.objectContaining({
+              id: 'generation-dialog-1',
+              prompt: '移动后的生成器',
+              placeholder: expect.objectContaining({ x: 88 }),
+            }),
+          }),
+        ]),
+      }),
+    );
+    vi.useRealTimers();
+  });
+
+  it('saves generated layers together with their generator snapshots', async () => {
+    const savedDialog: CanvasGenerationDialogState = {
+      id: 'generation-dialog-1',
+      mode: 'generate',
+      prompt: '已生成也要保存生成器',
+      status: 'idle',
+      composerOpen: true,
+      generatedLayerId: 'layer-generated',
+      placeholder: {
+        x: 70,
+        y: 80,
+        width: 420,
+        height: 420,
+        originalWidth: 2048,
+        originalHeight: 2048,
+      },
+    };
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-default',
+      title: '空画布项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          itemType: 'generation-dialog',
+          layerId: 'generation-dialog:generation-dialog-1',
+          resourceId: 'generation-dialog:generation-dialog-1',
+          dialog: savedDialog,
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    expect(screen.getByTestId('generation-dialogs').textContent).toBe(
+      'generation-dialog-1:已生成也要保存生成器:70',
+    );
+    act(() => {
+      screen.getByRole('button', { name: 'append generated' }).click();
+    });
+
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-default',
+        expect.objectContaining({
+          layers: expect.arrayContaining([
+            expect.objectContaining({
+              layerId: 'layer-generated',
+              sourceType: 'generated',
+            }),
+            expect.objectContaining({
+              itemType: 'generation-dialog',
+              dialog: expect.objectContaining({
+                id: 'generation-dialog-1',
+                generatedLayerId: 'layer-generated',
+                prompt: '已生成也要保存生成器',
+                placeholder: expect.objectContaining({
+                  x: 70,
+                  width: 420,
+                }),
+              }),
+            }),
+          ]),
+        }),
+      );
+    });
+  });
+
   it('does not load protected project data before login is available', () => {
     render(<ProjectPersistenceHarness canAccessProtectedData={false} />);
 
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.ts b/src/components/image-editor/useImageCanvasProjectPersistence.ts
index 0592bbd81..96f085559 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.ts
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.ts
@@ -7,8 +7,16 @@ import {
   loadOrCreateRecentEditorProject,
   saveEditorProjectLayout,
 } from '../../services/image-editor/editorProjectClient';
-import { hydrateLayer, serializeLayer } from './ImageCanvasEditorModel';
-import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
+import {
+  hydrateLayer,
+  serializeCanvasLayout,
+  splitCanvasLayoutItems,
+} from './ImageCanvasEditorModel';
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+} from './ImageCanvasEditorTypes';
 
 type ProjectResourceOptions = {
   onCreated?: (resourceId: string) => void;
@@ -23,6 +31,7 @@ type PendingProjectResourceLayer = {
 type ImageCanvasProjectPersistenceRefs = {
   layersRef: RefObject<CanvasLayer[]>;
   viewportRef: RefObject<CanvasViewport>;
+  canvasGenerationDialogsRef: RefObject<CanvasGenerationDialogState[]>;
 };
 
 type ImageCanvasProjectPersistenceSetters = {
@@ -32,6 +41,9 @@ type ImageCanvasProjectPersistenceSetters = {
   setLayers: (layers: CanvasLayer[]) => void;
   selectSingleLayer: (layerId: string | null) => void;
   setLayerCounter: (value: number) => void;
+  restoreCanvasGenerationDialogs: (
+    dialogs: CanvasGenerationDialogState[],
+  ) => void;
 };
 
 function isEditorAuthError(error: unknown) {
@@ -45,6 +57,7 @@ export function useImageCanvasProjectPersistence({
   refs,
   setters,
   layers,
+  canvasGenerationDialogs,
   viewport,
   canAccessProtectedData,
   openEditorLoginModal,
@@ -52,6 +65,7 @@ export function useImageCanvasProjectPersistence({
   refs: ImageCanvasProjectPersistenceRefs;
   setters: ImageCanvasProjectPersistenceSetters;
   layers: CanvasLayer[];
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
   viewport: CanvasViewport;
   canAccessProtectedData: boolean;
   openEditorLoginModal: (postLoginAction?: (() => void) | null) => void;
@@ -63,6 +77,15 @@ export function useImageCanvasProjectPersistence({
   const saveTimerRef = useRef<number | null>(null);
   const [projectId, setProjectId] = useState<string | null>(null);
   const [isProjectReady, setIsProjectReady] = useState(false);
+  const {
+    setProjectTitle,
+    setProjectRenameValue,
+    setViewport,
+    setLayers,
+    selectSingleLayer,
+    setLayerCounter,
+    restoreCanvasGenerationDialogs,
+  } = setters;
 
   const createProjectResourceForLayer = useCallback(
     (layer: CanvasLayer, options: ProjectResourceOptions = {}) => {
@@ -110,11 +133,15 @@ export function useImageCanvasProjectPersistence({
                 )
               : currentLayers;
           refs.layersRef.current = nextLayers;
-          setters.setLayers(nextLayers);
+          setLayers(nextLayers);
           if (nextLayers.length) {
             void saveEditorProjectLayout(readyProjectId, {
               viewport: refs.viewportRef.current,
-              layers: nextLayers.map(serializeLayer),
+              layers: serializeCanvasLayout({
+                layers: nextLayers,
+                canvasGenerationDialogs:
+                  refs.canvasGenerationDialogsRef.current,
+              }),
             }).catch((error: unknown) => {
               if (isEditorAuthError(error)) {
                 openEditorLoginModal();
@@ -128,7 +155,7 @@ export function useImageCanvasProjectPersistence({
           }
         });
     },
-    [openEditorLoginModal, refs, setters],
+    [openEditorLoginModal, refs, setLayers],
   );
 
   const appendCanvasLayersWithResources = useCallback(
@@ -138,12 +165,12 @@ export function useImageCanvasProjectPersistence({
       }
       const snapshotLayers = [...refs.layersRef.current, ...nextLayers];
       refs.layersRef.current = snapshotLayers;
-      setters.setLayers(snapshotLayers);
+      setLayers(snapshotLayers);
       nextLayers.forEach((layer) =>
         createProjectResourceForLayer(layer, { snapshotLayers }),
       );
     },
-    [createProjectResourceForLayer, refs, setters],
+    [createProjectResourceForLayer, refs, setLayers],
   );
 
   useEffect(() => {
@@ -170,26 +197,30 @@ export function useImageCanvasProjectPersistence({
         projectIdRef.current = project.projectId;
         setProjectId(project.projectId);
         const nextProjectTitle = project.title?.trim() || '未命名画布';
-        setters.setProjectTitle(nextProjectTitle);
-        setters.setProjectRenameValue(nextProjectTitle);
+        setProjectTitle(nextProjectTitle);
+        setProjectRenameValue(nextProjectTitle);
         const pendingLayers = pendingProjectResourceLayersRef.current.splice(0);
         pendingLayers.forEach(({ layer, options }) => {
           createProjectResourceForLayer(layer, options);
         });
-        setters.setViewport(project.viewport);
+        setViewport(project.viewport);
         const resourcesById = new Map(
           project.resources.map((resource) => [
             resource.resourceId,
             { imageSrc: resource.imageSrc },
           ]),
         );
-        const hydratedLayers = project.layers
+        const { layerItems, generationDialogs } = splitCanvasLayoutItems(
+          project.layers,
+        );
+        const hydratedLayers = layerItems
           .map((layer) => hydrateLayer(layer, resourcesById))
           .filter((layer): layer is CanvasLayer => Boolean(layer));
+        restoreCanvasGenerationDialogs(generationDialogs);
         if (hydratedLayers.length > 0) {
-          setters.setLayerCounter(hydratedLayers.length);
-          setters.setLayers(hydratedLayers);
-          setters.selectSingleLayer(hydratedLayers[0]?.id ?? null);
+          setLayerCounter(hydratedLayers.length);
+          setLayers(hydratedLayers);
+          selectSingleLayer(hydratedLayers[0]?.id ?? null);
         }
         setIsProjectReady(true);
       })
@@ -212,7 +243,13 @@ export function useImageCanvasProjectPersistence({
     canAccessProtectedData,
     createProjectResourceForLayer,
     openEditorLoginModal,
-    setters,
+    restoreCanvasGenerationDialogs,
+    selectSingleLayer,
+    setLayerCounter,
+    setLayers,
+    setProjectRenameValue,
+    setProjectTitle,
+    setViewport,
   ]);
 
   useEffect(() => {
@@ -226,7 +263,10 @@ export function useImageCanvasProjectPersistence({
     saveTimerRef.current = window.setTimeout(() => {
       saveEditorProjectLayout(projectId, {
         viewport,
-        layers: layers.map(serializeLayer),
+        layers: serializeCanvasLayout({
+          layers,
+          canvasGenerationDialogs,
+        }),
       }).catch((error: unknown) => {
         if (isEditorAuthError(error)) {
           openEditorLoginModal();
@@ -239,7 +279,15 @@ export function useImageCanvasProjectPersistence({
         window.clearTimeout(saveTimerRef.current);
       }
     };
-  }, [isProjectReady, layers, openEditorLoginModal, projectId, viewport]);
+  }, [
+    isProjectReady,
+    canvasGenerationDialogs,
+    layers,
+    openEditorLoginModal,
+    projectId,
+    refs,
+    viewport,
+  ]);
 
   return {
     projectId,

From 8956ed6fe6d3e4f2f1b2a830bd4bf22679090b11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 11:40:19 +0800
Subject: [PATCH 08/16] Unify canvas generation placement and UI changes

Add unified placement and UI updates for canvas generation: docs require ImageCanvasGenerationPlacementModel to compute placeholder positions (avoid overlaps, center viewport on placement) and limit frontend video model entries. Refactor UI components and tests: expose div props on PlatformFloatingMenu, make PlatformInlineOptionButton forwardRef, replace inline placeholder actions with ImageCanvasGenerationImageOptionsView in basic generation composer, enhance character animation panel with parameter menu portal and option choices, add reference chip UI, and update many tests to match new interactions and labels. These changes align generation workflows, accessibility labels, and positioning behavior across editor panels.
---
 .../shared-memory/decision-log.md             |  10 +-
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   5 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  43 +-
 .../common/PlatformFloatingMenu.tsx           |   6 +-
 .../common/PlatformInlineOptionButton.tsx     |  20 +-
 ...CanvasBasicGenerationComposerView.test.tsx | 100 +++-
 ...ImageCanvasBasicGenerationComposerView.tsx | 118 +++--
 ...CanvasCharacterAnimationPanelView.test.tsx |  46 +-
 ...ImageCanvasCharacterAnimationPanelView.tsx | 454 ++++++++++++------
 ...asCharacterGenerationComposerView.test.tsx |  17 +
 ...eCanvasCharacterGenerationComposerView.tsx | 232 +++++----
 ...CanvasEditorGenerationIntegration.test.tsx | 191 ++++++--
 ...ImageCanvasGenerationComposerView.test.tsx | 121 +++--
 .../ImageCanvasGenerationComposerView.tsx     | 432 ++++++++++++-----
 .../ImageCanvasGenerationDialogModel.ts       |   4 +
 ...eCanvasGenerationImageOptionsView.test.tsx |  69 ++-
 .../ImageCanvasGenerationImageOptionsView.tsx | 332 +++++++++----
 ...mageCanvasGenerationPlacementModel.test.ts | 109 ++++-
 .../ImageCanvasGenerationPlacementModel.ts    |  20 +
 .../ImageCanvasGenerationSubmissionModel.ts   |   5 +
 ...CanvasIconSpritesheetComposerView.test.tsx |  33 +-
 ...ImageCanvasIconSpritesheetComposerView.tsx | 118 ++---
 ...mageCanvasSpecGenerationPanelView.test.tsx |  82 ++++
 .../ImageCanvasSpecGenerationPanelView.tsx    | 128 +++--
 .../ImageCanvasWorldView.test.tsx             |  90 ++++
 .../image-editor/ImageCanvasWorldView.tsx     | 182 ++++---
 .../useImageCanvasGenerationWorkflow.test.tsx |  34 ++
 .../useImageCanvasGenerationWorkflow.ts       | 193 ++++----
 src/index.css                                 | 108 ++++-
 29 files changed, 2292 insertions(+), 1010 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index f4a522a0a..1846b7b87 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-06-17 图片画布生成占位统一避让落点
+
+- 背景：图片画布的普通图片、规范、角色、图标、视频和 UI 设计图生成入口都会先在画布中新建“即将生成”的占位图；若各入口直接使用当前视口中心，容易压住已有图片或已有生成占位，Lovart 式连续创作体验不稳定。
+- 决策：所有会新建画布生成占位的入口统一经过 `ImageCanvasGenerationPlacementModel` 计算落点。模型以当前视口世界中心为目标，避让所有未隐藏画布图层和 active / inactive generation dialog placeholder，按 32px 画布世界坐标间距外扩阻挡矩形，选择距离当前屏幕中心对应画板位置最近且不重叠的位置。选定后立即调用 `centerViewportOnPlacement(...)`，保持当前缩放比例不变，只平移画布 viewport，让屏幕中心移动到新占位中心。
+- 影响范围：`/editor/canvas` 图片画布生成入口、`useImageCanvasGenerationWorkflow`、`ImageCanvasGenerationPlacementModel`、图片画布技术方案和 Lovart 生成类面板文档。
+- 验证方式：运行 `npm run test -- src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`，并执行 `npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 2026-06-15 SpacetimeDB 本地 skills 只保留 CLI / Concepts / Rust
 
 - 背景：本仓库的 SpacetimeDB 接入已固定为 `server-rs + Axum + SpacetimeDB`，本地 skill 需要从上游 SpacetimeDB `skills/` 更新到 2.5 口径，同时避免继续维护当前项目不使用的 TypeScript server/client、C# 和 Unity 专用 skill。
@@ -2322,7 +2330,7 @@
 ## 2026-06-17 图片画布底部生成视频接入 Lovart 面板
 
 - 背景：编辑器画板底部工具栏需要新增 `生成视频`，并和现有 Lovart 式生成类面板、泥点展示、占位图和画布结果图层保持一致。
-- 决策：`生成视频` 点击后创建独立视频生成占位和极简面板，提交 `POST /api/editor/videos/generations`；首期支持 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`、`veo3.1`、`veo3.1-fast`，固定文字转视频、`16:9`、标准模式和静音。后端复用 Ark / VectorEngine content generation task 轮询链路，下载视频后持久化到 OSS。生成结果在画布中写入 `mediaType="video"` 与 `assetKind="video"`，图片信息弹窗按视频显示为 `视频信息` / `视频类型`。生成类泥点价格统一走 `editor_generation_config`，视频和角色动画均为 480p 每秒 10 泥点、720p 每秒 20 泥点。
+- 决策：`生成视频` 点击后创建独立视频生成占位和极简面板，提交 `POST /api/editor/videos/generations`；首期前端仅开放 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`，不展示 Veo 模型入口；固定文字转视频、`16:9`、标准模式和静音。后端复用 Ark / VectorEngine content generation task 轮询链路，下载视频后持久化到 OSS。生成结果在画布中写入 `mediaType="video"` 与 `assetKind="video"`，图片信息弹窗按视频显示为 `视频信息` / `视频类型`。生成类泥点价格统一走 `editor_generation_config`，视频和角色动画均为 480p 每秒 10 泥点、720p 每秒 20 泥点。
 - 影响范围：图片画布生成工作流、前端 editorProjectClient、`shared-contracts`、`api-server` 视频生成 BFF、编辑器技术方案和生成类面板方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "opens the bottom generate video panel"`、`npm run test -- src/components/image-editor/ImageCanvasMetadataModalView.test.tsx`、`npm run test -- src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p shared-contracts editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 67c0ecec9..635346316 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -18,8 +18,9 @@
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，支持 Seedance 2.0 / Seedance 2.0 Fast / Kling 3.0 / Kling 3.0 Omni / Veo 3.1 / Veo 3.1 Fast，首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 / Seedance 2.0 Fast / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
+- 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频` 和 `生成UI设计图`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
 
 ## 交互规则
 
@@ -65,7 +66,7 @@
 - `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
 - `POST /api/editor/icon-spritesheets/generations`：按图标素材规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`，后端把 UI 尺寸归一为文档支持的 `1024x1024`、`1024x1536`、`1536x1024`、`2048x2048`、`2048x1152` 等 `size` 字符串。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
-- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。请求模型支持 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`、`veo3.1`、`veo3.1-fast`；后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
+- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。前端可选模型为 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`；后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
 所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
 
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index d617fa79b..0f61ad148 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -12,7 +12,8 @@
 - `生成图标素材`
 - `生成UI设计图`
 - `生成视频`
-- `角色动画生成面板`
+
+`角色动画生成面板` 同步纳入本次生成类面板交互统一：参考图首行、单文本无边界、参数按钮向上弹出、生成按钮明确展示泥点。
 
 ## 统一布局
 
@@ -22,7 +23,7 @@
    - 规范参考图：紫色剪贴板图标。
    - 图标素材规范：绿色图标图标。
    - UI 图标规范：琥珀色图标图标。
-   - 视频参考图 / 角色视频源图：深色视频或角色图标。
+   - 视频参考图：深色视频图标。
 3. 参考图卡片尽量少文字；必要文字写在图标块内或短标签内，不写规则说明。
 4. 普通参考图支持连续追加：已有图缩略图后始终保留一个 `+` 入口。点击入口只弹出“从画布中选择 / 上传图片”来源选项，不再直接打开系统文件选择器；生成图片、生成视频、角色常规参考图等同类参考图入口都遵循同一交互。
 5. 单文本输入面板不显示文本框标题，用问题式 placeholder：
@@ -30,7 +31,6 @@
    - 生成角色：`你希望角色如何设计？`
    - 生成 UI：`你希望这个 UI 长什么样？`
    - 生成视频：`你希望生成什么视频？`
-   - 角色动画：`你希望角色做什么动作？`
 6. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范、图标素材多描述。
 7. 生成规范下的角色形象规范、UI素材规范、图标素材规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
 
@@ -39,15 +39,15 @@
 画面比例、大小尺寸、模型、分辨率、时长等生成参数统一为 Lovart 式底部胶囊按钮：
 
 ```text
-左下：[比例 · 尺寸 ˄]          右下：[模型 ˄] [生成 · 图标 12]
+左下：[比例 · 尺寸 ˄]          右下：[模型 ˄] [生成12泥点]
 ```
 
 - 面板内不显示 `画面比例`、`大小尺寸`、`模型` 等字段标题，只显示当前选择值。
-- 图片类面板把画面比例和大小尺寸合并成一个左下角选项框；视频 / 角色动画把比例、时长、清晰度合并成一个左下角选项框。
+- 图片类面板把画面比例和大小尺寸合并成一个左下角选项框；视频面板把比例、时长、清晰度合并成一个左下角选项框。
 - 模型选项框和生成按钮位于右下角。
-- 点击后在父级生成面板内向上弹出子面板；父级面板隐藏或销毁时，子面板同步销毁。
-- 子面板展示时，点击父级面板中除当前子面板和选项触发器以外的任意区域即可收起，不额外显示右上角关闭按钮。
-- 弹出面板内可分组展示字段，点击某个选项只更新当前字段和选中样式，不关闭弹出面板，方便连续修改。
+- 点击后以页面级浮层向上弹出独立选项面板；父级面板隐藏或销毁时，选项面板同步销毁。
+- 点击选项只更新字段和选中样式，不收起选项面板；再次点击当前参数按钮可收起。
+- 弹出面板内可分组展示字段，点击某个选项只更新当前字段和选中样式，方便连续修改。
 - 模型子面板每行固定一个模型，不用方框包裹模型名；模型名不换行，前置对应模型类型图标，选中项在模型名后用对号标记。
 - 比例选项卡片内展示对应比例的线框。
 - 父级面板、底部选项框、弹出子面板字号保持一致。
@@ -59,9 +59,25 @@
 ## 泥点显示
 
 - 本次消耗泥点必须显示在生成按钮内部。
-- `泥点` 文本不在 UI 中显示，改用图标 + 数值，例如 `生成  ✦ 12`。
+- 生成按钮内明确显示 `N泥点`，例如 `生成12泥点`、`生成40泥点`；不使用泥点图标替代文字。
 - 泥点配置统一收口到 `api-server` 的编辑器生成配置模块；前端只保留与后端配置同名的展示兜底，后续可接接口动态下发。
 
+## 画布占位落点
+
+- 任何会创建“即将生成”画布占位的 Lovart 面板入口，都必须先生成对应 draft，再通过统一 placement 模型改写 placeholder，不能直接使用 draft 初始中心点。
+- 统一入口范围：生成图片、生成规范、生成角色形象、生成图标素材、生成视频、生成 UI 设计图。
+- 避让对象：所有 `hidden !== true` 的画布图层，以及当前 active / inactive generation dialogs 中已有的 placeholder。
+- 避让间距：每个避让矩形向外扩 32px，保证新占位和已有图层 / 占位之间保留可见空隙。
+- 距离目标：以当前视口世界中心为目标点，在候选落点中选择距离最近且不重叠的位置；中心被占用时按相邻边、四角和外圈候选继续寻找。
+- 居中行为：调用 `openCanvasGenerationDialog(...)` 时写入避让后的 placeholder；随后调用 `centerViewportOnPlacement(...)`，让屏幕中心移动到新占位中心，并保持原 viewport scale。
+- 入口状态：新入口打开后设置对应 activeTool，清空画布选中、右键菜单、快速编辑、角色动画和其它生成来源选择状态；只切换当前面板，不删除已有生成占位。
+
+## 画布悬浮信息
+
+- 待生成占位图只有聚焦或生成中才显示高亮边框、左上角生成器名称和右上角原始尺寸；失焦后保留灰色占位块本体，不显示这些辅助信息。
+- 占位图的生成器名称 / 原始尺寸、图片图层右上角素材类型标签、查看信息按钮和悬浮尺寸标签都按 viewport 反向缩放，画布缩小时保持屏幕可读尺寸。
+- 查看信息按钮固定使用圆形 `i` 图标，不使用中括号、花括号或文本符号样式。
+
 ## 第一版计费配置
 
 ```text
@@ -83,9 +99,7 @@
   - `seedance2.0-fast`
   - `kling3.0`
   - `kling3.0-omni`
-- 不展示 Veo 模型入口。
-  - `veo3.1`
-  - `veo3.1-fast`
+- 前端不展示 Veo 模型入口。
 - 后端复用现有 Ark / VectorEngine content generation task 轮询链路，并把生成视频持久化到 OSS；缺少 `ARK_CHARACTER_VIDEO_BASE_URL` 或 `ARK_CHARACTER_VIDEO_API_KEY` 时 fail-closed 返回配置错误。
 
 ## 验收
@@ -94,8 +108,7 @@
 - 比例 / 尺寸 / 模型不再平铺全部选项；比例与尺寸合并为左下角当前值按钮，模型与生成按钮位于右下角。
 - 单文本输入面板不显示字段标题，placeholder 是问题式文案。
 - 多文本输入面板字段标题和边界仍清晰。
-- 生成按钮内能看到图标化泥点消耗数值。
-- 弹出选项面板点击选项后保持打开，可连续修改多个字段。
+- 生成按钮内能看到 `N泥点` 文案。
+- 弹出选项面板通过 `role=menu` 暴露，点击选项后保持打开，可连续修改多个字段。
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
-- 后端存在独立编辑器生成计费配置文件，角色动画价格校验使用该配置。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
diff --git a/src/components/common/PlatformFloatingMenu.tsx b/src/components/common/PlatformFloatingMenu.tsx
index 4cdcb2478..f91e9152a 100644
--- a/src/components/common/PlatformFloatingMenu.tsx
+++ b/src/components/common/PlatformFloatingMenu.tsx
@@ -1,6 +1,6 @@
-import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
 
-type PlatformFloatingMenuProps = {
+type PlatformFloatingMenuProps = HTMLAttributes<HTMLDivElement> & {
   children: ReactNode;
   className?: string;
   label?: string;
@@ -26,9 +26,11 @@ export function PlatformFloatingMenu({
   label,
   placement = 'top-end',
   style,
+  ...divProps
 }: PlatformFloatingMenuProps) {
   return (
     <div
+      {...divProps}
       className={[
         'platform-floating-menu',
         `platform-floating-menu--${placement}`,
diff --git a/src/components/common/PlatformInlineOptionButton.tsx b/src/components/common/PlatformInlineOptionButton.tsx
index 96f35ee7d..bc349d4e2 100644
--- a/src/components/common/PlatformInlineOptionButton.tsx
+++ b/src/components/common/PlatformInlineOptionButton.tsx
@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 
 type PlatformInlineOptionButtonProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -12,13 +12,13 @@ type PlatformInlineOptionButtonProps = Omit<
  * 平台内联选项按钮。
  * 统一承接工具面板里“当前选项 + 下拉箭头”这类轻量 pill 动作。
  */
-export function PlatformInlineOptionButton({
-  children,
-  trailingIcon,
-  className,
-  type = 'button',
-  ...buttonProps
-}: PlatformInlineOptionButtonProps) {
+export const PlatformInlineOptionButton = forwardRef<
+  HTMLButtonElement,
+  PlatformInlineOptionButtonProps
+>(function PlatformInlineOptionButton(
+  { children, trailingIcon, className, type = 'button', ...buttonProps },
+  ref,
+) {
   const actionClassName = [
     'platform-inline-option-button inline-flex items-center justify-center border-0 bg-transparent text-sm font-black text-slate-700 transition-colors hover:text-slate-950 disabled:cursor-not-allowed disabled:opacity-55',
     className,
@@ -27,7 +27,7 @@ export function PlatformInlineOptionButton({
     .join(' ');
 
   return (
-    <button {...buttonProps} type={type} className={actionClassName}>
+    <button {...buttonProps} ref={ref} type={type} className={actionClassName}>
       <span className="platform-inline-option-button__label">{children}</span>
       {trailingIcon ? (
         <span className="platform-inline-option-button__trailing" aria-hidden="true">
@@ -36,4 +36,4 @@ export function PlatformInlineOptionButton({
       ) : null}
     </button>
   );
-}
+});
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
index 212a5029c..bc9009dff 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
@@ -1,7 +1,7 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen } from '@testing-library/react';
-import { useState } from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type {
@@ -17,6 +17,10 @@ function createDialog(
     mode: 'generate',
     prompt: '初始提示',
     status: 'idle',
+    generationReferences: [],
+    imageModel: 'gemini-3.1-flash-image-preview',
+    aspectRatio: '16:9',
+    imageSize: '1K',
     ...patch,
   };
 }
@@ -35,6 +39,9 @@ function BasicGenerationHarness({
   const [dialog, setDialog] = useState<GenerateDialogState | null>(
     initialDialog,
   );
+  const [isReferenceMenuOpen, setIsReferenceMenuOpen] = useState(false);
+  const [isPickingReference, setIsPickingReference] = useState(false);
+  const generationReferenceButtonRef = createRef<HTMLButtonElement>();
 
   return dialog ? (
     <div>
@@ -42,13 +49,24 @@ function BasicGenerationHarness({
         dialog={dialog}
         style={{ left: 10, top: 20 }}
         setGenerateDialog={setDialog}
+        generationReferenceButtonRef={generationReferenceButtonRef}
+        isGenerationReferenceMenuOpen={isReferenceMenuOpen}
+        setIsGenerationReferenceMenuOpen={setIsReferenceMenuOpen}
+        setIsPickingGenerationReferenceFromCanvas={setIsPickingReference}
+        renderEditorPortal={(node) => node}
+        buildPortalMenuStyle={() => ({ position: 'fixed', left: 0, top: 0 })}
         onRequestUpload={onRequestUpload}
+        onToggleReferenceMenu={() => setIsReferenceMenuOpen((open) => !open)}
         onSubmit={onSubmit}
         onClose={onClose}
       />
       <output aria-label="当前提示词">{dialog.prompt}</output>
+      <output aria-label="当前比例">{dialog.aspectRatio}</output>
+      <output aria-label="当前尺寸">{dialog.imageSize}</output>
+      <output aria-label="当前模型">{dialog.imageModel}</output>
       <output aria-label="当前状态">{dialog.status}</output>
       <output aria-label="当前错误">{dialog.errorMessage ?? '-'}</output>
+      <output aria-label="选择参考图">{String(isPickingReference)}</output>
     </div>
   ) : null;
 }
@@ -71,31 +89,89 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '新的提示' },
     });
-    fireEvent.click(screen.getByRole('button', { name: '添加参考图' }));
+    const panel = screen.getByRole('dialog', { name: '生成图片' });
+    fireEvent.click(within(panel).getByRole('button', { name: '添加参考图' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: '上传图片' }));
     fireEvent.click(screen.getByRole('button', { name: '生成' }));
 
     expect(screen.getByLabelText('当前提示词').textContent).toBe('新的提示');
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
-    expect(requestUpload).not.toHaveBeenCalled();
+    expect(requestUpload).toHaveBeenCalledWith('generation-reference');
     expect(submitGeneration).toHaveBeenCalledWith(
       expect.objectContaining({ prompt: '新的提示', status: 'idle' }),
     );
   });
 
-  it('runs placeholder actions and closes through its interface', () => {
+  it('keeps references on the first row and appends a new add-reference entry', () => {
+    render(
+      <BasicGenerationHarness
+        initialDialog={createDialog({
+          generationReferences: [
+            {
+              id: 'ref-a',
+              label: '参考图A',
+              src: 'data:image/png;base64,cmVmQQ==',
+            },
+            {
+              id: 'ref-b',
+              label: '参考图B',
+              src: 'data:image/png;base64,cmVmQg==',
+            },
+          ],
+        })}
+      />,
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成图片' });
+    const strip = panel.querySelector('.image-canvas-editor__reference-strip');
+
+    expect(strip).toBeTruthy();
+    expect(within(strip as HTMLElement).getByText('参考图A')).toBeTruthy();
+    expect(within(strip as HTMLElement).getByText('参考图B')).toBeTruthy();
+    expect(
+      within(strip as HTMLElement).getByRole('button', { name: '添加参考图' }),
+    ).toBeTruthy();
+  });
+
+  it('shows only current image options and opens upward option panels', () => {
+    render(<BasicGenerationHarness />);
+
+    const panel = screen.getByRole('dialog', { name: '生成图片' });
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: '生成图片尺寸 16:9 · 1K',
+      }),
+    );
+    const dimensionPanel = screen.getByRole('menu', {
+      name: '生成图片尺寸选项',
+    });
+    expect(within(dimensionPanel).getByText('比例')).toBeTruthy();
+    fireEvent.click(within(dimensionPanel).getByRole('button', { name: '2K' }));
+
+    expect(screen.getByLabelText('当前尺寸').textContent).toBe('2K');
+
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: '生成图片模型 nanobanana2',
+      }),
+    );
+    const modelPanel = screen.getByRole('menu', { name: '生成图片模型选项' });
+    fireEvent.click(
+      within(modelPanel).getByRole('button', { name: /gpt-image-2/ }),
+    );
+
+    expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
+    const submitButton = within(panel).getByRole('button', { name: '生成' });
+    expect(submitButton.textContent).toBe('生成12泥点');
+  });
+
+  it('closes through its interface', () => {
     const closeComposer = vi.fn();
-    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
     render(<BasicGenerationHarness onClose={closeComposer} />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成比例 1:1 2k 1张' }));
-    fireEvent.click(screen.getByRole('button', { name: '生成模型 GPT Image' }));
     fireEvent.click(screen.getByRole('button', { name: '关闭生成图片' }));
 
-    expect(alertSpy).toHaveBeenCalledWith('生成参数功能建设中');
-    expect(alertSpy).toHaveBeenCalledWith('模型选择功能建设中');
     expect(closeComposer).toHaveBeenCalledTimes(1);
-
-    alertSpy.mockRestore();
   });
 });
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 003e14201..5c3909c18 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown, ImageIcon, X } from 'lucide-react';
+import { ImageIcon, X } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -7,17 +7,19 @@ import {
   type SetStateAction,
 } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
-import { PlatformIconButton } from '../common/PlatformIconButton';
-import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import {
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+} from './ImageCanvasGenerationModel';
+import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 import type {
+  CharacterReferenceImage,
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
 
@@ -36,14 +38,10 @@ type ImageCanvasBasicGenerationComposerViewProps = {
   ) => CSSProperties;
   onRequestUpload: (target: 'generation-reference') => void;
   onToggleReferenceMenu?: () => void;
+  onRememberImageModel?: (model: string) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
   onClose: () => void;
 };
-
-function triggerPlaceholderAction(label: string) {
-  window.alert(`${label}功能建设中`);
-}
-
 function resetFailedDialogStatus(dialog: GenerateDialogState) {
   return {
     ...dialog,
@@ -52,6 +50,28 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
+function ReferenceChip({
+  reference,
+  index,
+}: {
+  reference: CharacterReferenceImage;
+  index: number;
+}) {
+  return (
+    <span
+      className="image-canvas-editor__reference-chip"
+      title={reference.label}
+    >
+      <span className="image-canvas-editor__reference-chip-icon">
+        <img src={reference.src} alt="" aria-hidden="true" />
+      </span>
+      <span className="image-canvas-editor__reference-chip-label">
+        {reference.label || `参考图${index + 1}`}
+      </span>
+    </span>
+  );
+}
+
 export function ImageCanvasBasicGenerationComposerView({
   dialog,
   style,
@@ -64,9 +84,11 @@ export function ImageCanvasBasicGenerationComposerView({
   buildPortalMenuStyle = () => ({}),
   onRequestUpload,
   onToggleReferenceMenu,
+  onRememberImageModel = () => {},
   onSubmit,
   onClose,
 }: ImageCanvasBasicGenerationComposerViewProps) {
+  const references = dialog.generationReferences ?? [];
   return (
     <>
       <form
@@ -82,23 +104,36 @@ export function ImageCanvasBasicGenerationComposerView({
           }
         }}
       >
-      <PlatformIconButton
-        ref={generationReferenceButtonRef}
-        variant="surfaceFloating"
-        className="image-canvas-editor__generation-ref"
-        label="添加参考图"
-        disabled={dialog.status === 'generating'}
-        onClick={() => onToggleReferenceMenu?.()}
-        icon={<ImageIcon className="h-4 w-4" />}
-      >
-        <span>参考图</span>
-      </PlatformIconButton>
+      <div className="image-canvas-editor__reference-strip">
+        {references.map((reference, index) => (
+          <ReferenceChip
+            key={reference.id}
+            reference={reference}
+            index={index}
+          />
+        ))}
+        <button
+          ref={generationReferenceButtonRef}
+          type="button"
+          className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--upload"
+          disabled={dialog.status === 'generating'}
+          aria-label="添加参考图"
+          onClick={() => onToggleReferenceMenu?.()}
+        >
+          <span className="image-canvas-editor__reference-chip-icon">
+            <ImageIcon className="h-4 w-4" aria-hidden="true" />
+          </span>
+          <span className="image-canvas-editor__reference-chip-label">
+            参考图
+          </span>
+        </button>
+      </div>
       <PlatformTextField
         variant="textarea"
         aria-label="生成提示词"
         value={dialog.prompt}
         disabled={dialog.status === 'generating'}
-        placeholder="今天我们要创作什么"
+        placeholder="今天想生成什么画面？"
         size="sm"
         density="compact"
         className="image-canvas-editor__generation-prompt"
@@ -114,35 +149,18 @@ export function ImageCanvasBasicGenerationComposerView({
         }
       />
       <div className="image-canvas-editor__generation-composer-footer">
-        <PlatformInlineOptionButton
-          className="image-canvas-editor__generation-ratio"
-          aria-label="生成比例 1:1 2k 1张"
-          disabled={dialog.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={dialog.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={dialog.status === 'generating'}
-          aria-label="生成"
-        >
-          {dialog.status === 'generating' ? '生成中' : '12'}
-        </PlatformActionButton>
+        <ImageCanvasGenerationImageOptionsView
+          dialog={dialog}
+          setGenerateDialog={setGenerateDialog}
+          includeDimensions
+          onRememberImageModel={onRememberImageModel}
+          optionLabelPrefix="生成图片"
+          cost={EDITOR_GENERATION_MUD_POINT_CONFIG.image}
+          submitLabel="生成"
+          submitAriaLabel="生成"
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
+        />
       </div>
       {dialog.status === 'generating' ? (
         <PlatformStatusMessage
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
index 22d0da943..a4d9a5adc 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
@@ -4,9 +4,27 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-import type { CharacterAnimationPanelState } from './ImageCanvasEditorTypes';
+import type { CanvasLayer, CharacterAnimationPanelState } from './ImageCanvasEditorTypes';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
 
+
+function createSourceLayer(): CanvasLayer {
+  return {
+    id: 'layer-a',
+    resourceId: 'resource-a',
+    title: '角色源图',
+    src: 'data:image/png;base64,Y2hhcmFjdGVy',
+    x: 0,
+    y: 0,
+    width: 128,
+    height: 128,
+    originalWidth: 128,
+    originalHeight: 128,
+    zIndex: 1,
+    sourceType: 'uploaded',
+  };
+}
+
 function createPanel(
   patch: Partial<CharacterAnimationPanelState> = {},
 ): CharacterAnimationPanelState {
@@ -64,6 +82,7 @@ function CharacterAnimationPanelHarness({
     <div>
       <ImageCanvasCharacterAnimationPanelView
         panel={panel}
+        sourceLayer={createSourceLayer()}
         style={{ left: 12, top: 24 }}
         price={18}
         setCharacterAnimationPanel={setPanel}
@@ -84,7 +103,7 @@ function CharacterAnimationPanelHarness({
 }
 
 describe('ImageCanvasCharacterAnimationPanelView', () => {
-  it('updates prompt, resolution and ratio while clearing failed state', () => {
+  it('keeps source reference first and updates prompt, resolution and ratio from a menu while clearing failed state', () => {
     render(
       <CharacterAnimationPanelHarness
         initialPanel={createPanel({
@@ -97,16 +116,18 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
     fireEvent.change(screen.getByLabelText('动画描述'), {
       target: { value: `${'a'.repeat(4001)}` },
     });
-    fireEvent.change(screen.getByLabelText('分辨率'), {
-      target: { value: '720p' },
-    });
-    fireEvent.change(screen.getByLabelText('画面比例'), {
-      target: { value: '16:9' },
-    });
+    fireEvent.click(
+      screen.getByRole('button', { name: '动画参数 同图尺寸 · 4秒 · 480p' }),
+    );
+    const menu = screen.getByRole('menu', { name: '动画参数选项' });
+    fireEvent.click(screen.getByRole('button', { name: '清晰度 720p' }));
+    fireEvent.click(screen.getByRole('button', { name: '比例 16:9' }));
 
+    expect(screen.getByRole('menu', { name: '动画参数选项' })).toBeTruthy();
     expect(screen.getByLabelText('当前动画描述').textContent).toHaveLength(4000);
     expect(screen.getByLabelText('当前分辨率').textContent).toBe('720p');
     expect(screen.getByLabelText('当前比例').textContent).toBe('16:9');
+    expect(menu).toBeTruthy();
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
   });
@@ -124,9 +145,10 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
     );
 
     fireEvent.click(screen.getByRole('button', { name: '行走' }));
-    fireEvent.change(screen.getByLabelText('时长'), {
-      target: { value: '48' },
-    });
+    fireEvent.click(
+      screen.getByRole('button', { name: '动画参数 同图尺寸 · 4秒 · 480p' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '时长 48帧·6秒' }));
 
     expect(screen.getByLabelText('当前动画描述').textContent).toBe(
       '循环行走动作，步伐稳定。',
@@ -145,7 +167,7 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: '生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成18泥点' }));
     fireEvent.click(
       screen.getByRole('button', { name: '关闭角色动画生成面板' }),
     );
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx
index e58677e25..896f6cdf3 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx
@@ -1,19 +1,37 @@
-import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
-import { X } from 'lucide-react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, X } from 'lucide-react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformSelectField, PlatformTextField } from '../common/PlatformTextField';
+import { PlatformFloatingMenu } from '../common/PlatformFloatingMenu';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import {
   CHARACTER_ANIMATION_ACTION_PROMPTS,
   CHARACTER_ANIMATION_DURATION_OPTIONS,
   CHARACTER_ANIMATION_RATIO_OPTIONS,
 } from './ImageCanvasGenerationModel';
-import type { CharacterAnimationPanelState } from './ImageCanvasEditorTypes';
+import type {
+  EditorCharacterAnimationRatio,
+  EditorCharacterAnimationResolution,
+} from '../../services/image-editor/editorProjectClient';
+import type {
+  CanvasLayer,
+  CharacterAnimationPanelState,
+} from './ImageCanvasEditorTypes';
 
 type ImageCanvasCharacterAnimationPanelViewProps = {
   panel: CharacterAnimationPanelState;
+  sourceLayer: CanvasLayer;
   style: CSSProperties;
   price: number;
   setCharacterAnimationPanel: Dispatch<
@@ -33,144 +51,198 @@ function resetFailedPanelStatus<T extends { status: string; errorMessage?: strin
   };
 }
 
+function buildLocalMenuStyle(anchor: HTMLElement | null): 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: Math.round(rect.top),
+    right: 'auto',
+    bottom: 'auto',
+    zIndex: 70,
+    transform: 'translateY(calc(-100% - 0.45rem))',
+  };
+}
+
+function renderPanelPortal(node: ReactNode) {
+  if (typeof document === 'undefined') {
+    return node;
+  }
+  // 中文注释：参数菜单挂到页面级，避免被角色动画面板滚动边界裁切。
+  return document.body ? createPortal(node, document.body) : node;
+}
+
+function getRatioLabel(value: EditorCharacterAnimationRatio) {
+  return value === 'same' ? '同图尺寸' : value;
+}
+
+function AnimationOptionChoice({
+  children,
+  selected,
+  className,
+  ariaLabel,
+  disabled,
+  onClick,
+}: {
+  children: ReactNode;
+  selected: boolean;
+  className?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={['image-canvas-editor__option-popover-choice', className]
+        .filter(Boolean)
+        .join(' ')}
+      aria-label={ariaLabel}
+      aria-pressed={selected}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
 export function ImageCanvasCharacterAnimationPanelView({
   panel,
+  sourceLayer,
   style,
   price,
   setCharacterAnimationPanel,
   onUpdateDuration,
   onSubmit,
 }: ImageCanvasCharacterAnimationPanelViewProps) {
+  const [isParameterMenuOpen, setIsParameterMenuOpen] = useState(false);
+  const parameterButtonRef = useRef<HTMLButtonElement | null>(null);
+  const isGenerating = panel.status === 'generating';
+  const ratioLabel = getRatioLabel(panel.ratio);
+
+  const updatePanel = (patch: Partial<CharacterAnimationPanelState>) => {
+    setCharacterAnimationPanel((currentPanel) =>
+      currentPanel
+        ? {
+            ...resetFailedPanelStatus(currentPanel),
+            ...patch,
+          }
+        : currentPanel,
+    );
+  };
+
   return (
-    <form
-      className="image-canvas-editor__character-animation-panel"
-      style={style}
-      role="dialog"
-      aria-label="角色动画生成面板"
-      onPointerDown={(event) => event.stopPropagation()}
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (panel.status !== 'generating') {
-          onSubmit();
-        }
-      }}
-    >
-      <div className="image-canvas-editor__character-animation-head">
-        <strong>角色动画</strong>
+    <>
+      <form
+        className="image-canvas-editor__character-animation-panel"
+        style={style}
+        role="dialog"
+        aria-label="角色动画生成面板"
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (!isGenerating) {
+            onSubmit();
+          }
+        }}
+      >
+        <div className="image-canvas-editor__reference-strip">
+          <span
+            className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--character"
+            title={sourceLayer.title}
+          >
+            <span className="image-canvas-editor__reference-chip-icon">
+              <img src={sourceLayer.src} alt="" aria-hidden="true" />
+            </span>
+            <span className="image-canvas-editor__reference-chip-label">
+              {sourceLayer.title}
+            </span>
+          </span>
+        </div>
         <EditorIconButton
+          className="image-canvas-editor__generation-close"
           label="关闭角色动画生成面板"
           title="关闭"
           icon={X}
+          variant="surfaceFloating"
+          disabled={isGenerating}
           onClick={() => setCharacterAnimationPanel(null)}
         />
-      </div>
-      <PlatformTextField
-        variant="textarea"
-        aria-label="动画描述"
-        value={panel.promptText}
-        maxLength={4000}
-        disabled={panel.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={panel.status === 'generating'}
-            onClick={() =>
-              setCharacterAnimationPanel((currentPanel) =>
-                currentPanel
-                  ? {
-                      ...currentPanel,
-                      promptText: preset.text,
-                      status: 'idle',
-                      errorMessage: undefined,
-                    }
-                  : currentPanel,
-              )
-            }
+        <PlatformTextField
+          variant="textarea"
+          aria-label="动画描述"
+          value={panel.promptText}
+          maxLength={4000}
+          disabled={isGenerating}
+          placeholder="你希望角色做什么动作？"
+          size="sm"
+          density="compact"
+          className="image-canvas-editor__generation-prompt image-canvas-editor__generation-prompt--borderless image-canvas-editor__character-animation-textarea"
+          onChange={(event) =>
+            updatePanel({ promptText: event.target.value.slice(0, 4000) })
+          }
+        />
+        <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={isGenerating}
+              onClick={() =>
+                setCharacterAnimationPanel((currentPanel) =>
+                  currentPanel
+                    ? {
+                        ...currentPanel,
+                        promptText: preset.text,
+                        status: 'idle',
+                        errorMessage: undefined,
+                      }
+                    : currentPanel,
+                )
+              }
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+        <div className="image-canvas-editor__character-animation-footer">
+          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
+            <PlatformInlineOptionButton
+              ref={parameterButtonRef}
+              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+              aria-label={`动画参数 ${ratioLabel} · ${panel.durationSeconds}秒 · ${panel.resolution}`}
+              aria-expanded={isParameterMenuOpen}
+              disabled={isGenerating}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+              onClick={() => setIsParameterMenuOpen((open) => !open)}
+            >
+              {ratioLabel} · {panel.durationSeconds}秒 · {panel.resolution}
+            </PlatformInlineOptionButton>
+          </div>
+          <PlatformActionButton
+            type="submit"
+            tone="secondary"
+            size="xs"
+            shape="pill"
+            className="image-canvas-editor__character-animation-submit"
+            disabled={isGenerating}
           >
-            {preset.label}
-          </button>
-        ))}
-      </div>
-      <div className="image-canvas-editor__character-animation-grid">
-        <PlatformSelectField
-          aria-label="分辨率"
-          value={panel.resolution}
-          disabled={panel.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={panel.ratio}
-          disabled={panel.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(panel.frameCount)}
-          disabled={panel.status === 'generating'}
-          size="xs"
-          density="compact"
-          onChange={(event) => onUpdateDuration(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">
+            {isGenerating ? '生成中' : `生成${price}泥点`}
+          </PlatformActionButton>
+        </div>
         <span
           className="image-canvas-editor__character-animation-summary-text"
           title={panel.promptText.trim() || undefined}
@@ -178,37 +250,103 @@ export function ImageCanvasCharacterAnimationPanelView({
         >
           {panel.promptText.trim() ? panel.promptText.trim() : '动画描述'}
         </span>
-        <strong>{price}泥点</strong>
-      </div>
-      {panel.status === 'completed' && panel.result ? (
-        <PlatformStatusMessage
-          tone="success"
-          surface="platform"
-          size="xs"
-          role="status"
-        >
-          已生成 {panel.result.frameCount} 帧
-        </PlatformStatusMessage>
-      ) : null}
-      {panel.status === 'failed' ? (
-        <PlatformStatusMessage
-          tone="error"
-          surface="platform"
-          size="xs"
-          role="alert"
-        >
-          {panel.errorMessage}
-        </PlatformStatusMessage>
-      ) : null}
-      <PlatformActionButton
-        type="submit"
-        tone="secondary"
-        size="sm"
-        className="image-canvas-editor__character-animation-submit"
-        disabled={panel.status === 'generating'}
-      >
-        {panel.status === 'generating' ? '生成中' : '生成'}
-      </PlatformActionButton>
-    </form>
+        {panel.status === 'completed' && panel.result ? (
+          <PlatformStatusMessage
+            tone="success"
+            surface="platform"
+            size="xs"
+            role="status"
+          >
+            已生成 {panel.result.frameCount} 帧
+          </PlatformStatusMessage>
+        ) : null}
+        {panel.status === 'failed' ? (
+          <PlatformStatusMessage
+            tone="error"
+            surface="platform"
+            size="xs"
+            role="alert"
+          >
+            {panel.errorMessage}
+          </PlatformStatusMessage>
+        ) : null}
+      </form>
+      {isParameterMenuOpen
+        ? renderPanelPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+              label="动画参数选项"
+              placement="top-start"
+              style={buildLocalMenuStyle(parameterButtonRef.current)}
+              onPointerDown={(event) => event.stopPropagation()}
+            >
+              <div className="image-canvas-editor__option-popover-sections">
+                <section className="image-canvas-editor__option-popover-section">
+                  <span className="image-canvas-editor__option-popover-title">
+                    比例
+                  </span>
+                  <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
+                    {CHARACTER_ANIMATION_RATIO_OPTIONS.map((option) => (
+                      <AnimationOptionChoice
+                        key={option.value}
+                        selected={panel.ratio === option.value}
+                        disabled={isGenerating}
+                        className="image-canvas-editor__option-popover-choice--ratio"
+                        ariaLabel={`比例 ${getRatioLabel(option.value)}`}
+                        onClick={() => updatePanel({ ratio: option.value })}
+                      >
+                        <span
+                          className="image-canvas-editor__ratio-wireframe"
+                          data-ratio={option.value}
+                          aria-hidden="true"
+                        />
+                        <span>{getRatioLabel(option.value)}</span>
+                      </AnimationOptionChoice>
+                    ))}
+                  </div>
+                </section>
+                <section className="image-canvas-editor__option-popover-section">
+                  <span className="image-canvas-editor__option-popover-title">
+                    时长
+                  </span>
+                  <div className="image-canvas-editor__option-popover-items">
+                    {CHARACTER_ANIMATION_DURATION_OPTIONS.map((option) => (
+                      <AnimationOptionChoice
+                        key={option.frameCount}
+                        selected={panel.frameCount === option.frameCount}
+                        disabled={isGenerating}
+                        ariaLabel={`时长 ${option.label}`}
+                        onClick={() => onUpdateDuration(String(option.frameCount))}
+                      >
+                        {option.label}
+                      </AnimationOptionChoice>
+                    ))}
+                  </div>
+                </section>
+                <section className="image-canvas-editor__option-popover-section">
+                  <span className="image-canvas-editor__option-popover-title">
+                    清晰度
+                  </span>
+                  <div className="image-canvas-editor__option-popover-items">
+                    {(['480p', '720p'] as EditorCharacterAnimationResolution[]).map(
+                      (resolution) => (
+                        <AnimationOptionChoice
+                          key={resolution}
+                          selected={panel.resolution === resolution}
+                          disabled={isGenerating}
+                          ariaLabel={`清晰度 ${resolution}`}
+                          onClick={() => updatePanel({ resolution })}
+                        >
+                          {resolution}
+                        </AnimationOptionChoice>
+                      ),
+                    )}
+                  </div>
+                </section>
+              </div>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
index 28a73fa5c..e278bdb26 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
@@ -92,6 +92,23 @@ function CharacterGenerationHarness({
 }
 
 describe('ImageCanvasCharacterGenerationComposerView', () => {
+  it('keeps the prompt as a borderless single text input with a question placeholder', () => {
+    render(<CharacterGenerationHarness />);
+
+    const panel = screen.getByRole('dialog', { name: '生成角色形象' });
+    const prompt = screen.getByRole('textbox', { name: '角色设定' });
+
+    expect(
+      Array.from(panel.querySelectorAll('.image-canvas-editor__field-title'))
+        .map((node) => node.textContent)
+        .join(''),
+    ).not.toContain('角色设定');
+    expect(prompt.getAttribute('placeholder')).toBe('你希望角色如何设计？');
+    expect(prompt.className).toContain(
+      'image-canvas-editor__generation-prompt--borderless',
+    );
+  });
+
   it('updates character prompt, clears failed state and submits', () => {
     const submitCharacter = vi.fn();
     render(
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
index d580b4285..04d122fe5 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
@@ -7,8 +7,6 @@ import {
   type SetStateAction,
 } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
@@ -16,10 +14,12 @@ import {
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import type {
+  CharacterReferenceImage,
   GenerateDialogState,
   SpecGenerationType,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
+import { EDITOR_GENERATION_MUD_POINT_CONFIG } from './ImageCanvasGenerationModel';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 
 type ImageCanvasCharacterGenerationComposerViewProps = {
@@ -53,6 +53,28 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
+function ReferenceChip({
+  reference,
+  index,
+}: {
+  reference: CharacterReferenceImage;
+  index: number;
+}) {
+  return (
+    <span
+      className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--character"
+      title={reference.label}
+    >
+      <span className="image-canvas-editor__reference-chip-icon">
+        <img src={reference.src} alt="" aria-hidden="true" />
+      </span>
+      <span className="image-canvas-editor__reference-chip-label">
+        {reference.label || `参考图${index + 1}`}
+      </span>
+    </span>
+  );
+}
+
 export function ImageCanvasCharacterGenerationComposerView({
   dialog,
   style,
@@ -86,39 +108,32 @@ export function ImageCanvasCharacterGenerationComposerView({
         }
       }}
     >
-      <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"
+      <div className="image-canvas-editor__reference-strip">
+        <span className="image-canvas-editor__character-spec-wrap">
+          <button
+            ref={characterSpecButtonRef}
+            type="button"
+            className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--spec image-canvas-editor__reference-chip--upload"
+            disabled={dialog.status === 'generating'}
+            aria-label={dialog.characterSpecReference?.label ?? '角色形象规范'}
+            onClick={() => setIsCharacterSpecMenuOpen((open) => !open)}
           >
-            角色形象规范
-          </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={dialog.status === 'generating'}
-              onClick={() => setIsCharacterSpecMenuOpen((open) => !open)}
-            >
-              <span className="image-canvas-editor__reference-tile-visual">
-                {dialog.characterSpecReference ? (
-                  <img
-                    src={dialog.characterSpecReference.src}
-                    alt=""
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <ClipboardList className="h-4 w-4" aria-hidden="true" />
-                )}
-              </span>
-              <span className="image-canvas-editor__reference-tile-copy">
-                {dialog.characterSpecReference?.label ?? '角色形象规范'}
-              </span>
-            </button>
-          </span>
-        </div>
+            <span className="image-canvas-editor__reference-chip-icon">
+              {dialog.characterSpecReference ? (
+                <img
+                  src={dialog.characterSpecReference.src}
+                  alt=""
+                  aria-hidden="true"
+                />
+              ) : (
+                <ClipboardList className="h-4 w-4" aria-hidden="true" />
+              )}
+            </span>
+            <span className="image-canvas-editor__reference-chip-label">
+              {dialog.characterSpecReference?.label ?? '角色形象规范'}
+            </span>
+          </button>
+        </span>
         {isCharacterSpecMenuOpen
           ? renderEditorPortal(
               <PlatformFloatingMenu
@@ -160,90 +175,71 @@ export function ImageCanvasCharacterGenerationComposerView({
               </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">
-            {(dialog.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
-              ref={characterReferenceButtonRef}
-              type="button"
-              className="image-canvas-editor__character-reference-add image-canvas-editor__reference-tile image-canvas-editor__reference-tile--upload"
-              disabled={dialog.status === 'generating'}
-              onClick={() => setIsCharacterReferenceMenuOpen((open) => !open)}
-            >
-              <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>
-            {isCharacterReferenceMenuOpen
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
-                    label="常规参考图来源"
-                    placement="top-start"
-                    style={buildPortalMenuStyle(
-                      characterReferenceButtonRef.current,
-                      'above',
-                    )}
-                  >
-                    <PlatformFloatingMenuItem
-                      className="image-canvas-editor__context-menu-item"
-                      onClick={() => {
-                        setIsPickingCharacterReferenceFromCanvas(true);
-                        setIsCharacterReferenceMenuOpen(false);
-                      }}
-                    >
-                      从画布中选择
-                    </PlatformFloatingMenuItem>
-                    <PlatformFloatingMenuItem
-                      className="image-canvas-editor__context-menu-item"
-                      onClick={() => {
-                        setIsCharacterReferenceMenuOpen(false);
-                        onRequestUpload('character-reference');
-                      }}
-                    >
-                      上传图片
-                    </PlatformFloatingMenuItem>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-        </div>
-      </div>
-      <label className="image-canvas-editor__field-block">
-        <PlatformFieldLabel
-          variant="field"
-          className="image-canvas-editor__field-title"
+        {(dialog.characterReferences ?? []).map((reference, index) => (
+          <ReferenceChip
+            key={reference.id}
+            reference={reference}
+            index={index}
+          />
+        ))}
+        <button
+          ref={characterReferenceButtonRef}
+          type="button"
+          className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--upload"
+          disabled={dialog.status === 'generating'}
+          aria-label="上传常规参考图"
+          onClick={() => setIsCharacterReferenceMenuOpen((open) => !open)}
         >
-          角色设定
-        </PlatformFieldLabel>
+          <span className="image-canvas-editor__reference-chip-icon">
+            <ImagePlus className="h-4 w-4" aria-hidden="true" />
+          </span>
+          <span className="image-canvas-editor__reference-chip-label">
+            参考图
+          </span>
+        </button>
+        {isCharacterReferenceMenuOpen
+          ? renderEditorPortal(
+              <PlatformFloatingMenu
+                className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
+                label="常规参考图来源"
+                placement="top-start"
+                style={buildPortalMenuStyle(
+                  characterReferenceButtonRef.current,
+                  'above',
+                )}
+              >
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__context-menu-item"
+                  onClick={() => {
+                    setIsPickingCharacterReferenceFromCanvas(true);
+                    setIsCharacterReferenceMenuOpen(false);
+                  }}
+                >
+                  从画布中选择
+                </PlatformFloatingMenuItem>
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__context-menu-item"
+                  onClick={() => {
+                    setIsCharacterReferenceMenuOpen(false);
+                    onRequestUpload('character-reference');
+                  }}
+                >
+                  上传图片
+                </PlatformFloatingMenuItem>
+              </PlatformFloatingMenu>,
+            )
+          : null}
+      </div>
+      <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
         <PlatformTextField
           variant="textarea"
           aria-label="角色设定"
           value={dialog.prompt}
           disabled={dialog.status === 'generating'}
+          placeholder="你希望角色如何设计？"
           size="sm"
           density="compact"
-          className="image-canvas-editor__generation-prompt"
+          className="image-canvas-editor__generation-prompt image-canvas-editor__generation-prompt--borderless"
           onChange={(event) =>
             setGenerateDialog((currentDialog) =>
               currentDialog?.mode === 'character'
@@ -273,17 +269,13 @@ export function ImageCanvasCharacterGenerationComposerView({
           setGenerateDialog={setGenerateDialog}
           includeDimensions
           onRememberImageModel={onRememberImageModel}
+          optionLabelPrefix="生成图片"
+          cost={EDITOR_GENERATION_MUD_POINT_CONFIG.character}
+          submitLabel="生成"
+          submitAriaLabel="生成"
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
         />
-        <PlatformActionButton
-          type="submit"
-          tone="secondary"
-          size="xs"
-          shape="pill"
-          className="image-canvas-editor__generation-submit"
-          disabled={dialog.status === 'generating'}
-        >
-          {dialog.status === 'generating' ? '生成中' : '生成'}
-        </PlatformActionButton>
       </div>
     </form>
   );
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 6577a72d1..0c2d3b41c 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -80,6 +80,57 @@ describe('ImageCanvasEditorView generation integration', () => {
     saveEditorProjectLayoutMock,
   });
 
+  const openGenerationDimensionsPanel = (
+    panel: HTMLElement,
+    labelPrefix = '生成图片',
+  ) => {
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: new RegExp(`^${labelPrefix}尺寸 `, 'u'),
+      }),
+    );
+    return screen.getByRole('menu', { name: `${labelPrefix}尺寸选项` });
+  };
+
+  const openGenerationModelPanel = (
+    panel: HTMLElement,
+    labelPrefix = '生成图片',
+  ) => {
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: new RegExp(`^${labelPrefix}模型 `, 'u'),
+      }),
+    );
+    return screen.getByRole('menu', { name: `${labelPrefix}模型选项` });
+  };
+
+  const selectGenerationModel = (panel: HTMLElement, modelLabel: string) => {
+    const modelPanel = openGenerationModelPanel(panel);
+    fireEvent.click(
+      within(modelPanel).getByRole('button', {
+        name: new RegExp(`^${modelLabel}(?: ✓)?$`, 'u'),
+      }),
+    );
+  };
+
+  const selectGenerationDimensions = (
+    panel: HTMLElement,
+    aspectRatio: string,
+    imageSize: string,
+  ) => {
+    const dimensionsPanel = openGenerationDimensionsPanel(panel);
+    fireEvent.click(
+      within(dimensionsPanel).getByRole('button', {
+        name: new RegExp(`^(?:比例 )?${aspectRatio}$`, 'u'),
+      }),
+    );
+    fireEvent.click(
+      within(dimensionsPanel).getByRole('button', {
+        name: new RegExp(`^(?:尺寸 )?${imageSize}$`, 'u'),
+      }),
+    );
+  };
+
   it('opens a canvas generation frame and composer before creating a generated layer', async () => {
     generateEditorImageMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
@@ -108,11 +159,11 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(
       within(generateDialog).getByRole('button', { name: '添加参考图' })
         .className,
-    ).toContain('bg-white/94');
+    ).toContain('image-canvas-editor__reference-chip');
     expect(
       within(generateDialog).getByRole('button', { name: '添加参考图' })
         .className,
-    ).toContain('image-canvas-editor__generation-ref');
+    ).toContain('image-canvas-editor__reference-chip');
     const generatePrompt = screen.getByLabelText('生成提示词');
     expect(generatePrompt.className).toContain('platform-text-field');
     expect(generatePrompt.className).toContain(
@@ -120,12 +171,12 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     expect(
       within(generateDialog).getByRole('button', {
-        name: '生成比例 1:1 2k 1张',
+        name: '生成图片尺寸 1:1 · 1K',
       }).className,
     ).toContain('platform-inline-option-button');
     expect(
       within(generateDialog).getByRole('button', {
-        name: '生成模型 GPT Image',
+        name: '生成图片模型 nanobanana2',
       }).className,
     ).toContain('platform-inline-option-button');
     expect(
@@ -146,6 +197,9 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByRole('status').textContent).toContain('生成中');
     expect(generateEditorImageMock).toHaveBeenCalledWith({
       prompt: '一张明亮的拼图主视觉',
+      model: 'gemini-3.1-flash-image-preview',
+      aspectRatio: '1:1',
+      imageSize: '1K',
     });
 
     await waitFor(() => {
@@ -654,7 +708,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(
       within(specDialog).getByRole('button', { name: '提交生成规范' })
         .textContent,
-    ).toContain('消耗5泥点');
+    ).toContain('生成5泥点');
 
     fireEvent.change(screen.getByLabelText('玩法设定'), {
       target: { value: '平台跳跃玩法' },
@@ -745,7 +799,11 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(within(iconSpritesheetPanel).getByText('素材描述')).toBeTruthy();
     expect(within(iconSpritesheetPanel).getByText('素材描述 1')).toBeTruthy();
     expect(within(iconSpritesheetPanel).getByText('素材描述 6')).toBeTruthy();
-    expect(within(iconSpritesheetPanel).getByText('模型')).toBeTruthy();
+    expect(
+      within(iconSpritesheetPanel).getByRole('button', {
+        name: '生成图片模型 nanobanana2',
+      }),
+    ).toBeTruthy();
 
     fireEvent.click(
       within(iconSpritesheetPanel).getByRole('button', {
@@ -768,26 +826,44 @@ describe('ImageCanvasEditorView generation integration', () => {
     const characterPanel = screen.getByRole('dialog', {
       name: '生成角色形象',
     });
-    expect(within(characterPanel).getByText('画面比例')).toBeTruthy();
-    expect(within(characterPanel).getByText('大小尺寸')).toBeTruthy();
-    expect(within(characterPanel).getByText('模型')).toBeTruthy();
     expect(
-      within(characterPanel).getByRole('button', { name: '1:1' }),
+      within(characterPanel).getByRole('button', {
+        name: '生成图片尺寸 1:1 · 1K',
+      }),
     ).toBeTruthy();
     expect(
-      within(characterPanel).getByRole('button', { name: '1K' }),
+      within(characterPanel).getByRole('button', {
+        name: '生成图片模型 nanobanana2',
+      }),
+    ).toBeTruthy();
+    const characterDimensionsPanel =
+      openGenerationDimensionsPanel(characterPanel);
+    expect(within(characterDimensionsPanel).getByText(/^(?:比例|Aspect ratio)$/u)).toBeTruthy();
+    expect(within(characterDimensionsPanel).getByText(/^(?:尺寸|Size)$/u)).toBeTruthy();
+    expect(
+      within(characterDimensionsPanel).getByRole('button', { name: /^(?:比例 )?1:1$/u }),
     ).toBeTruthy();
     expect(
-      within(characterPanel).getByRole('button', { name: 'nanobanana2' }),
+      within(characterDimensionsPanel).getByRole('button', { name: /^(?:尺寸 )?1K$/u }),
+    ).toBeTruthy();
+    const characterModelPanel = openGenerationModelPanel(characterPanel);
+    expect(
+      within(characterModelPanel).getByRole('button', {
+        name: /nanobanana2/u,
+      }),
     ).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '生成图标素材' }));
     const iconPanel = screen.getByRole('dialog', { name: '生成图标素材' });
-    expect(within(iconPanel).getByText('画面比例')).toBeTruthy();
-    expect(within(iconPanel).getByText('大小尺寸')).toBeTruthy();
-    expect(within(iconPanel).getByText('模型')).toBeTruthy();
     expect(
-      within(iconPanel).getByRole('button', { name: 'nanobanana2' }),
+      within(iconPanel).getByRole('button', {
+        name: '生成图片尺寸 1:1 · 1K',
+      }),
+    ).toBeTruthy();
+    expect(
+      within(iconPanel).getByRole('button', {
+        name: '生成图片模型 nanobanana2',
+      }),
     ).toBeTruthy();
   });
 
@@ -867,13 +943,8 @@ describe('ImageCanvasEditorView generation integration', () => {
     const characterPanel = screen.getByRole('dialog', {
       name: '生成角色形象',
     });
-    fireEvent.click(
-      within(characterPanel).getByRole('button', { name: 'gpt-image-2' }),
-    );
-    fireEvent.click(
-      within(characterPanel).getByRole('button', { name: '2:3' }),
-    );
-    fireEvent.click(within(characterPanel).getByRole('button', { name: '2K' }));
+    selectGenerationModel(characterPanel, 'gpt-image-2');
+    selectGenerationDimensions(characterPanel, '2:3', '2K');
     fireEvent.change(within(characterPanel).getByLabelText('角色设定'), {
       target: { value: '蓝衣剑士' },
     });
@@ -896,7 +967,9 @@ describe('ImageCanvasEditorView generation integration', () => {
     fireEvent.click(screen.getByRole('button', { name: '生成图标素材' }));
     const iconPanel = screen.getByRole('dialog', { name: '生成图标素材' });
     expect(
-      within(iconPanel).getByRole('button', { name: 'gpt-image-2' }),
+      within(iconPanel).getByRole('button', {
+        name: '生成图片模型 gpt-image-2',
+      }),
     ).toBeTruthy();
     fireEvent.click(
       within(iconPanel).getByRole('button', { name: '图标素材规范' }),
@@ -1091,11 +1164,14 @@ describe('ImageCanvasEditorView generation integration', () => {
       within(characterPanel).getByRole('button', { name: '角色形象规范' }),
     );
     const referenceRow = characterPanel.querySelector(
-      '.image-canvas-editor__character-reference-row',
+      '.image-canvas-editor__reference-strip',
     );
     const sourceMenu = screen.getByRole('menu', { name: '角色形象规范来源' });
 
-    expect(referenceRow?.contains(sourceMenu)).toBe(false);
+    if (!referenceRow) {
+      throw new Error('角色生成面板应包含参考图区域');
+    }
+    expect(referenceRow.contains(sourceMenu)).toBe(false);
     expect(sourceMenu.className).toContain('platform-floating-menu--top-start');
 
     fireEvent.click(
@@ -1104,7 +1180,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     const regularReferenceMenu = screen.getByRole('menu', {
       name: '常规参考图来源',
     });
-    expect(referenceRow?.contains(regularReferenceMenu)).toBe(false);
+    expect(referenceRow.contains(regularReferenceMenu)).toBe(false);
     expect(regularReferenceMenu.className).toContain(
       'platform-floating-menu--top-start',
     );
@@ -1122,15 +1198,15 @@ describe('ImageCanvasEditorView generation integration', () => {
       name: '上传常规参考图',
     });
 
-    expect(specTile.className).toContain('image-canvas-editor__reference-tile');
+    expect(specTile.className).toContain('image-canvas-editor__reference-chip');
     expect(uploadTile.className).toContain(
-      'image-canvas-editor__reference-tile',
+      'image-canvas-editor__reference-chip',
     );
     expect(
-      specTile.querySelector('.image-canvas-editor__reference-tile-visual'),
+      specTile.querySelector('.image-canvas-editor__reference-chip-icon'),
     ).toBeTruthy();
     expect(
-      uploadTile.querySelector('.image-canvas-editor__reference-tile-visual'),
+      uploadTile.querySelector('.image-canvas-editor__reference-chip-icon'),
     ).toBeTruthy();
   });
 
@@ -1406,7 +1482,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(canvasReferenceLayer.className).not.toContain(
       'image-canvas-editor__layer--selected',
     );
-    expect(within(characterPanel).getByText('1')).toBeTruthy();
+    expect(within(characterPanel).getByText('大鱼素材')).toBeTruthy();
 
     fireEvent.click(
       within(characterPanel).getByRole('button', { name: '上传常规参考图' }),
@@ -1417,7 +1493,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       new File(['reference'], '常规参考.png', { type: 'image/png' }),
     );
     await waitFor(() => {
-      expect(within(characterPanel).getByText('2')).toBeTruthy();
+      expect(within(characterPanel).getByText('常规参考.png')).toBeTruthy();
     });
 
     fireEvent.change(within(characterPanel).getByLabelText('角色设定'), {
@@ -1807,16 +1883,14 @@ describe('ImageCanvasEditorView generation integration', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
     const panel = screen.getByRole('dialog', { name: '角色动画生成面板' });
-    expect(within(panel).getByText('40泥点')).toBeTruthy();
     expect(
-      (within(panel).getByLabelText('分辨率') as HTMLSelectElement).value,
-    ).toBe('480p');
+      within(panel).getByRole('button', {
+        name: '动画参数 同图尺寸 · 4秒 · 480p',
+      }),
+    ).toBeTruthy();
     expect(
-      (within(panel).getByLabelText('画面比例') as HTMLSelectElement).value,
-    ).toBe('same');
-    expect(
-      (within(panel).getByLabelText('时长') as HTMLSelectElement).value,
-    ).toBe('32');
+      within(panel).getByRole('button', { name: '生成40泥点' }),
+    ).toBeTruthy();
     for (const actionLabel of [
       '待机',
       '行走',
@@ -1849,17 +1923,30 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(
       within(panel).getByLabelText(`生成文本：${precisePrompt}`),
     ).toBeTruthy();
-    fireEvent.change(within(panel).getByLabelText('分辨率'), {
-      target: { value: '720p' },
-    });
-    fireEvent.change(within(panel).getByLabelText('画面比例'), {
-      target: { value: '16:9' },
-    });
-    fireEvent.change(within(panel).getByLabelText('时长'), {
-      target: { value: '48' },
-    });
-    expect(within(panel).getByText('120泥点')).toBeTruthy();
-    fireEvent.click(within(panel).getByRole('button', { name: '生成' }));
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: '动画参数 同图尺寸 · 4秒 · 480p',
+      }),
+    );
+    const animationMenu = screen.getByRole('menu', { name: '动画参数选项' });
+    fireEvent.click(
+      within(animationMenu).getByRole('button', { name: '清晰度 720p' }),
+    );
+    fireEvent.click(
+      within(animationMenu).getByRole('button', { name: '比例 16:9' }),
+    );
+    fireEvent.click(
+      within(animationMenu).getByRole('button', { name: '时长 48帧·6秒' }),
+    );
+    expect(
+      screen.getByRole('menu', { name: '动画参数选项' }),
+    ).toBeTruthy();
+    expect(
+      within(panel).getByRole('button', {
+        name: '动画参数 16:9 · 6秒 · 720p',
+      }),
+    ).toBeTruthy();
+    fireEvent.click(within(panel).getByRole('button', { name: '生成120泥点' }));
 
     expect(generateEditorCharacterAnimationMock).toHaveBeenCalledWith(
       expect.objectContaining({
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 8e2eab8ae..736a7ba28 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -1,8 +1,9 @@
-/* @vitest-environment jsdom */
+/* @vitest-environment jsdom */
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import {
   createRef,
+  useState,
   type ComponentProps,
   type Dispatch,
   type SetStateAction,
@@ -16,13 +17,14 @@ function mockStateSetter<T>() {
   return vi.fn() as unknown as Dispatch<SetStateAction<T>>;
 }
 
-function renderComposer(
+
+function createComposerProps(
   generateDialog: GenerateDialogState,
   overrides: Partial<
     ComponentProps<typeof ImageCanvasGenerationComposerView>
   > = {},
-) {
-  const props: ComponentProps<typeof ImageCanvasGenerationComposerView> = {
+): ComponentProps<typeof ImageCanvasGenerationComposerView> {
+  return {
     specToolWrapRef: createRef(),
     characterSpecButtonRef: createRef(),
     characterReferenceButtonRef: createRef(),
@@ -88,6 +90,15 @@ function renderComposer(
     onRememberImageModel: vi.fn(),
     ...overrides,
   };
+}
+
+function renderComposer(
+  generateDialog: GenerateDialogState,
+  overrides: Partial<
+    ComponentProps<typeof ImageCanvasGenerationComposerView>
+  > = {},
+) {
+  const props = createComposerProps(generateDialog, overrides);
 
   return render(<ImageCanvasGenerationComposerView {...props} />);
 }
@@ -113,6 +124,11 @@ describe('ImageCanvasGenerationComposerView', () => {
     });
 
     const panel = screen.getByRole('dialog', { name: '生成UI设计图' });
+    expect(
+      panel.firstElementChild?.className.includes(
+        'image-canvas-editor__reference-strip',
+      ),
+    ).toBe(true);
     expect(panel.className).toContain(
       'image-canvas-editor__generation-composer',
     );
@@ -120,9 +136,8 @@ describe('ImageCanvasGenerationComposerView', () => {
       'image-canvas-editor__generation-composer--image',
     );
     expect(
-      within(panel).getByRole('button', { name: 'UI设计图标素材规范' })
-        .parentElement?.className,
-    ).toContain('image-canvas-editor__generation-ref');
+      within(panel).getByRole('button', { name: 'UI设计图标素材规范' }),
+    ).toBeTruthy();
     expect(
       within(panel).getByRole('textbox', { name: 'UI设计要求' }).className,
     ).toContain('image-canvas-editor__generation-prompt');
@@ -157,16 +172,18 @@ describe('ImageCanvasGenerationComposerView', () => {
     });
 
     const panel = screen.getByRole('dialog', { name: '生成规范' });
+    expect(
+      panel.firstElementChild?.className.includes(
+        'image-canvas-editor__reference-strip',
+      ),
+    ).toBe(true);
     expect(panel.className).toContain(
       'image-canvas-editor__generation-composer',
     );
     expect(panel.className).toContain(
       'image-canvas-editor__generation-composer--image',
     );
-    expect(
-      within(panel).getByRole('button', { name: '参考图' }).parentElement
-        ?.className,
-    ).toContain('image-canvas-editor__generation-ref');
+    expect(within(panel).getByRole('button', { name: '参考图' })).toBeTruthy();
     expect(
       panel.querySelector('.image-canvas-editor__generation-composer-footer'),
     ).toBeTruthy();
@@ -194,9 +211,11 @@ describe('ImageCanvasGenerationComposerView', () => {
 
     const panel = screen.getByRole('dialog', { name: '生成规范' });
     expect(
-      within(panel).getByRole('button', { name: '参考图' }).parentElement
-        ?.className,
-    ).toContain('image-canvas-editor__generation-ref');
+      panel.firstElementChild?.className.includes(
+        'image-canvas-editor__reference-strip',
+      ),
+    ).toBe(true);
+    expect(within(panel).getByRole('button', { name: '参考图' })).toBeTruthy();
   });
   it('生成图片参考图点击先弹来源菜单，不直接打开上传', () => {
     const onRequestUpload = vi.fn();
@@ -272,11 +291,9 @@ describe('ImageCanvasGenerationComposerView', () => {
     ).toBeTruthy();
   });
 
-  it('生成视频面板可切换时长、清晰度和模型并更新泥点', () => {
-    const setGenerateDialog = vi.fn();
-
-    renderComposer(
-      {
+  it('生成视频面板用子面板修改参数和模型，不展示 Veo，并在按钮内显示泥点文案', () => {
+    function VideoHarness() {
+      const [dialog, setDialog] = useState<GenerateDialogState>({
         mode: 'video',
         prompt: '',
         status: 'idle',
@@ -288,32 +305,60 @@ describe('ImageCanvasGenerationComposerView', () => {
         videoResolution: '480p',
         videoMode: 'std',
         videoSound: 'off',
-      },
-      {
-        setGenerateDialog:
-          setGenerateDialog as unknown as Dispatch<
-            SetStateAction<GenerateDialogState | null>
-          >,
-      },
-    );
+      });
+      return (
+        <>
+          <ImageCanvasGenerationComposerView
+            {...createComposerProps(dialog)}
+            setGenerateDialog={setDialog as Dispatch<SetStateAction<GenerateDialogState | null>>}
+          />
+          <output aria-label="当前视频模型">{dialog.videoModel}</output>
+          <output aria-label="当前视频时长">{dialog.videoDurationSeconds}</output>
+          <output aria-label="当前视频清晰度">{dialog.videoResolution}</output>
+        </>
+      );
+    }
+
+    render(<VideoHarness />);
 
     const panel = screen.getByRole('dialog', { name: '生成视频' });
-    expect(within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }))
-      .toBeTruthy();
-    expect(within(panel).getByRole('button', { name: '模型 Seedance 2.0' }))
-      .toBeTruthy();
-    expect(within(panel).getByRole('button', { name: '清晰度 480p' }))
-      .toBeTruthy();
-    expect(within(panel).getByRole('button', { name: '生成视频' }).textContent)
-      .toBe('40');
+    expect(
+      within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }),
+    ).toBeTruthy();
+    expect(
+      within(panel).getByRole('button', { name: '模型 Seedance 2.0' }),
+    ).toBeTruthy();
+    expect(within(panel).getByRole('button', { name: '生成视频' }).textContent).toBe(
+      '生成40泥点',
+    );
 
     fireEvent.click(
       within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }),
     );
-    fireEvent.click(within(panel).getByRole('button', { name: '模型 Seedance 2.0' }));
-    fireEvent.click(within(panel).getByRole('button', { name: '清晰度 480p' }));
+    const paramsPanel = screen.getByRole('menu', {
+      name: '视频参数选项',
+    });
+    fireEvent.click(within(paramsPanel).getByRole('button', { name: '时长 5秒' }));
+    fireEvent.click(within(paramsPanel).getByRole('button', { name: '清晰度 720p' }));
 
-    expect(setGenerateDialog).toHaveBeenCalledTimes(3);
+    expect(
+      screen.getByRole('menu', { name: '视频参数选项' }),
+    ).toBeTruthy();
+    expect(screen.getByLabelText('当前视频时长').textContent).toBe('5');
+    expect(screen.getByLabelText('当前视频清晰度').textContent).toBe('720p');
+    expect(screen.getByRole('button', { name: '视频参数 16:9 · 5秒 · 720p' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '生成视频' }).textContent).toBe(
+      '生成100泥点',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '模型 Seedance 2.0' }));
+    const modelPanel = screen.getByRole('menu', { name: '视频模型选项' });
+    expect(within(modelPanel).queryByRole('button', { name: /Veo/i })).toBeNull();
+    fireEvent.click(within(modelPanel).getByRole('button', { name: 'Kling 3.0' }));
+
+    expect(screen.getByRole('menu', { name: '视频模型选项' })).toBeTruthy();
+    expect(screen.getByLabelText('当前视频模型').textContent).toBe('kling3.0');
+    expect(screen.getByRole('button', { name: '模型 Kling 3.0' })).toBeTruthy();
   });
   it('生成规范参考图点击先弹来源菜单，不直接打开上传', () => {
     const onRequestUpload = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 5cb012d95..225b3bd49 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -1,10 +1,12 @@
-import { ChevronDown, ImageIcon } from 'lucide-react';
+import { Check, ChevronDown, Cpu, ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
   type ReactNode,
   type RefObject,
   type SetStateAction,
+  useRef,
+  useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -13,7 +15,6 @@ import {
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
 import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
@@ -24,6 +25,7 @@ import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSprites
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
 import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
 import {
+  EDITOR_VIDEO_DURATION_OPTIONS,
   EDITOR_VIDEO_MODEL_OPTIONS,
   SPEC_TYPE_LABEL,
   calculateEditorVideoPrice,
@@ -134,6 +136,70 @@ function renderEditorPortal(node: ReactNode) {
   return createPortal(node, document.body);
 }
 
+function resetFailedVideoDialogStatus(dialog: GenerateDialogState) {
+  return {
+    ...dialog,
+    status: dialog.status === 'failed' ? 'idle' : dialog.status,
+    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
+  };
+}
+
+function VideoReferenceChip({
+  reference,
+  index,
+}: {
+  reference: { id: string; label: string; src: string };
+  index: number;
+}) {
+  return (
+    <span
+      className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--video"
+      title={reference.label}
+    >
+      <span className="image-canvas-editor__reference-chip-icon">
+        <img src={reference.src} alt="" aria-hidden="true" />
+      </span>
+      <span className="image-canvas-editor__reference-chip-label">
+        {reference.label || `参考图${index + 1}`}
+      </span>
+    </span>
+  );
+}
+
+function VideoOptionChoice({
+  children,
+  selected,
+  className,
+  ariaLabel,
+  disabled,
+  onClick,
+}: {
+  children: ReactNode;
+  selected: boolean;
+  className?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={[
+        'image-canvas-editor__option-popover-choice',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      aria-label={ariaLabel}
+      aria-pressed={selected}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
 function ImageCanvasVideoGenerationComposerView({
   dialog,
   style,
@@ -142,6 +208,8 @@ function ImageCanvasVideoGenerationComposerView({
   setGenerateDialog,
   setIsGenerationReferenceMenuOpen,
   setIsPickingGenerationReferenceFromCanvas,
+  renderEditorPortal,
+  buildPortalMenuStyle,
   onRequestUpload,
   onSubmit,
 }: {
@@ -152,171 +220,270 @@ function ImageCanvasVideoGenerationComposerView({
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
+  renderEditorPortal: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
   onRequestUpload: (target: UploadTarget) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
 }) {
+  const [openPanel, setOpenPanel] = useState<'params' | 'model' | null>(null);
+  const paramsButtonRef = useRef<HTMLButtonElement | null>(null);
+  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
   const resolution = dialog.videoResolution ?? '480p';
   const durationSeconds = dialog.videoDurationSeconds ?? 4;
   const currentModel =
-    EDITOR_VIDEO_MODEL_OPTIONS.find((item) => item.value === dialog.videoModel)
-      ?? EDITOR_VIDEO_MODEL_OPTIONS[0];
+    EDITOR_VIDEO_MODEL_OPTIONS.find((item) => item.value === dialog.videoModel) ??
+    EDITOR_VIDEO_MODEL_OPTIONS[0];
   const price = calculateEditorVideoPrice(resolution, durationSeconds);
+  const isGenerating = dialog.status === 'generating';
+
+  const updateVideoDialog = (patch: Partial<GenerateDialogState>) => {
+    setGenerateDialog((currentDialog) =>
+      currentDialog?.mode === 'video'
+        ? {
+            ...resetFailedVideoDialogStatus(currentDialog),
+            ...patch,
+          }
+        : currentDialog,
+    );
+  };
+
   return (
     <>
       <form
-        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--video"
         style={style}
         role="dialog"
         aria-label="生成视频"
         onPointerDown={(event) => event.stopPropagation()}
         onSubmit={(event) => {
           event.preventDefault();
-          if (dialog.status !== 'generating') {
+          if (!isGenerating) {
             onSubmit(dialog);
           }
         }}
       >
-        <PlatformIconButton
-          ref={generationReferenceButtonRef}
-          variant="surfaceFloating"
-          className="image-canvas-editor__generation-ref"
-          label="添加视频参考图"
-          disabled={dialog.status === 'generating'}
-          onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
-          icon={<ImageIcon className="h-4 w-4" />}
-        >
-          <span>参考图</span>
-        </PlatformIconButton>
+        <div className="image-canvas-editor__reference-strip">
+          {(dialog.generationReferences ?? []).map((reference, index) => (
+            <VideoReferenceChip
+              key={reference.id}
+              reference={reference}
+              index={index}
+            />
+          ))}
+          <button
+            ref={generationReferenceButtonRef}
+            type="button"
+            className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--upload image-canvas-editor__reference-chip--video"
+            disabled={isGenerating}
+            aria-label="添加视频参考图"
+            onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
+          >
+            <span className="image-canvas-editor__reference-chip-icon">
+              <ImageIcon className="h-4 w-4" aria-hidden="true" />
+            </span>
+            <span className="image-canvas-editor__reference-chip-label">
+              参考图
+            </span>
+          </button>
+        </div>
         <PlatformTextField
           variant="textarea"
           aria-label="视频描述"
           value={dialog.prompt}
-          disabled={dialog.status === 'generating'}
-          placeholder="描述视频画面"
+          disabled={isGenerating}
+          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,
-            )
-          }
+          onChange={(event) => updateVideoDialog({ prompt: event.target.value })}
         />
         <div className="image-canvas-editor__generation-composer-footer">
-          <PlatformInlineOptionButton
-            className="image-canvas-editor__generation-ratio"
-            aria-label={`视频参数 16:9 · ${durationSeconds}秒 · ${resolution}`}
-            disabled={dialog.status === 'generating'}
-            trailingIcon={<ChevronDown className="h-3 w-3" />}
-            onClick={() => {
-              setGenerateDialog((currentDialog) =>
-                currentDialog?.mode === 'video'
-                  ? {
-                      ...currentDialog,
-                      videoDurationSeconds:
-                        currentDialog.videoDurationSeconds === 5 ? 4 : 5,
-                      status:
-                        currentDialog.status === 'failed'
-                          ? 'idle'
-                          : currentDialog.status,
-                      errorMessage:
-                        currentDialog.status === 'failed'
-                          ? undefined
-                          : currentDialog.errorMessage,
-                    }
-                  : currentDialog,
-              );
-            }}
-          >
-            16:9 · {resolution} · {durationSeconds}秒
-          </PlatformInlineOptionButton>
-          <PlatformInlineOptionButton
-            className="image-canvas-editor__generation-model"
-            aria-label={`模型 ${currentModel.label}`}
-            disabled={dialog.status === 'generating'}
-            trailingIcon={<ChevronDown className="h-3 w-3" />}
-            onClick={() => {
-              setGenerateDialog((currentDialog) => {
-                if (currentDialog?.mode !== 'video') {
-                  return currentDialog;
-                }
-                const currentIndex = EDITOR_VIDEO_MODEL_OPTIONS.findIndex(
-                  (item) => item.value === currentDialog.videoModel,
-                );
-                const nextModel =
-                  EDITOR_VIDEO_MODEL_OPTIONS[
-                    (Math.max(currentIndex, 0) + 1) %
-                      EDITOR_VIDEO_MODEL_OPTIONS.length
-                  ];
-                return {
-                  ...currentDialog,
-                  videoModel: nextModel.value,
-                  status:
-                    currentDialog.status === 'failed'
-                      ? 'idle'
-                      : currentDialog.status,
-                  errorMessage:
-                    currentDialog.status === 'failed'
-                      ? undefined
-                      : currentDialog.errorMessage,
-                };
-              });
-            }}
-          >
-            {currentModel.label}
-          </PlatformInlineOptionButton>
-          <PlatformInlineOptionButton
-            className="image-canvas-editor__generation-ratio"
-            aria-label={`清晰度 ${resolution}`}
-            disabled={dialog.status === 'generating'}
-            trailingIcon={<ChevronDown className="h-3 w-3" />}
-            onClick={() => {
-              setGenerateDialog((currentDialog) =>
-                currentDialog?.mode === 'video'
-                  ? {
-                      ...currentDialog,
-                      videoResolution:
-                        currentDialog.videoResolution === '720p'
-                          ? '480p'
-                          : '720p',
-                      status:
-                        currentDialog.status === 'failed'
-                          ? 'idle'
-                          : currentDialog.status,
-                      errorMessage:
-                        currentDialog.status === 'failed'
-                          ? undefined
-                          : currentDialog.errorMessage,
-                    }
-                  : currentDialog,
-              );
-            }}
-          >
-            {resolution}
-          </PlatformInlineOptionButton>
+          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
+            <PlatformInlineOptionButton
+              ref={paramsButtonRef}
+              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+              aria-label={`视频参数 16:9 · ${durationSeconds}秒 · ${resolution}`}
+              aria-expanded={openPanel === 'params'}
+              disabled={isGenerating}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+              onClick={() =>
+                setOpenPanel((currentPanel) =>
+                  currentPanel === 'params' ? null : 'params',
+                )
+              }
+            >
+              16:9 · {durationSeconds}秒 · {resolution}
+            </PlatformInlineOptionButton>
+            {openPanel === 'params'
+              ? renderEditorPortal(
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+                    label="视频参数选项"
+                    placement="top-start"
+                    style={buildPortalMenuStyle(paramsButtonRef.current, 'above')}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  >
+                    <div className="image-canvas-editor__option-popover-sections">
+                      <section className="image-canvas-editor__option-popover-section">
+                        <span className="image-canvas-editor__option-popover-title">
+                          比例
+                        </span>
+                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
+                          <VideoOptionChoice
+                            selected
+                            disabled={isGenerating}
+                            className="image-canvas-editor__option-popover-choice--ratio"
+                            ariaLabel="比例 16:9"
+                          >
+                            <span
+                              className="image-canvas-editor__ratio-wireframe"
+                              data-ratio="16:9"
+                              aria-hidden="true"
+                            />
+                            <span>16:9</span>
+                          </VideoOptionChoice>
+                        </div>
+                      </section>
+                      <section className="image-canvas-editor__option-popover-section">
+                        <span className="image-canvas-editor__option-popover-title">
+                          时长
+                        </span>
+                        <div className="image-canvas-editor__option-popover-items">
+                          {EDITOR_VIDEO_DURATION_OPTIONS.map((option) => {
+                            const nextDuration =
+                              Number(option.value) === 5 ? 5 : 4;
+                            return (
+                              <VideoOptionChoice
+                                key={option.value}
+                                selected={durationSeconds === nextDuration}
+                                disabled={isGenerating}
+                                ariaLabel={`时长 ${option.label}`}
+                                onClick={() =>
+                                  updateVideoDialog({
+                                    videoDurationSeconds: nextDuration,
+                                  })
+                                }
+                              >
+                                {option.label}
+                              </VideoOptionChoice>
+                            );
+                          })}
+                        </div>
+                      </section>
+                      <section className="image-canvas-editor__option-popover-section">
+                        <span className="image-canvas-editor__option-popover-title">
+                          清晰度
+                        </span>
+                        <div className="image-canvas-editor__option-popover-items">
+                          {(['480p', '720p'] as const).map((option) => (
+                            <VideoOptionChoice
+                              key={option}
+                              selected={resolution === option}
+                              disabled={isGenerating}
+                              ariaLabel={`清晰度 ${option}`}
+                              onClick={() =>
+                                updateVideoDialog({ videoResolution: option })
+                              }
+                            >
+                              {option}
+                            </VideoOptionChoice>
+                          ))}
+                        </div>
+                      </section>
+                    </div>
+                  </PlatformFloatingMenu>,
+                )
+              : null}
+          </div>
+          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
+            <PlatformInlineOptionButton
+              ref={modelButtonRef}
+              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+              aria-label={`模型 ${currentModel.label}`}
+              aria-expanded={openPanel === 'model'}
+              disabled={isGenerating}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+              onClick={() =>
+                setOpenPanel((currentPanel) =>
+                  currentPanel === 'model' ? null : 'model',
+                )
+              }
+            >
+              <span className="image-canvas-editor__model-trigger-label">
+                <span
+                  className="image-canvas-editor__model-icon"
+                  aria-hidden="true"
+                >
+                  <Cpu />
+                </span>
+                <span>{currentModel.label}</span>
+              </span>
+            </PlatformInlineOptionButton>
+            {openPanel === 'model'
+              ? renderEditorPortal(
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
+                    label="视频模型选项"
+                    placement="top-start"
+                    style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  >
+                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                      {EDITOR_VIDEO_MODEL_OPTIONS.map((option) => {
+                        const checked = currentModel.value === option.value;
+                        return (
+                          <VideoOptionChoice
+                            key={option.value}
+                            selected={checked}
+                            disabled={isGenerating}
+                            className="image-canvas-editor__option-popover-choice--model"
+                            ariaLabel={option.label}
+                            onClick={() =>
+                              updateVideoDialog({ videoModel: option.value })
+                            }
+                          >
+                            <span
+                              className="image-canvas-editor__model-icon"
+                              aria-hidden="true"
+                            >
+                              <Cpu />
+                            </span>
+                            <span>{option.label}</span>
+                            <Check
+                              className="image-canvas-editor__option-selected-check"
+                              data-visible={checked}
+                              aria-hidden="true"
+                            />
+                          </VideoOptionChoice>
+                        );
+                      })}
+                    </div>
+                  </PlatformFloatingMenu>,
+                )
+              : null}
+          </div>
           <PlatformActionButton
             type="submit"
             tone="secondary"
             size="xs"
             shape="pill"
             className="image-canvas-editor__generation-submit"
-            disabled={dialog.status === 'generating'}
+            disabled={isGenerating}
             aria-label="生成视频"
           >
-            {dialog.status === 'generating' ? '生成中' : `${price}`}
+            {isGenerating ? (
+              '生成中'
+            ) : (
+              <>
+                <span>生成</span>
+                <span className="image-canvas-editor__mud-point-inline">
+                  {price}泥点
+                </span>
+              </>
+            )}
           </PlatformActionButton>
         </div>
       </form>
@@ -452,6 +619,7 @@ export function ImageCanvasGenerationComposerView({
           onToggleReferenceMenu={() =>
             setIsGenerationReferenceMenuOpen((open) => !open)
           }
+          onRememberImageModel={onRememberImageModel}
           onSubmit={onSubmitImageGeneration}
           onClose={onCloseGenerateComposer}
         />
@@ -497,6 +665,7 @@ export function ImageCanvasGenerationComposerView({
           onOpenSpecDialog={onOpenSpecDialog}
           onUpdateSpecFormValue={onUpdateSpecFormValue}
           onRequestUpload={onRequestUpload}
+          onRememberImageModel={onRememberImageModel}
           onSubmit={onSubmitImageGeneration}
         />
       ) : null}
@@ -514,6 +683,8 @@ export function ImageCanvasGenerationComposerView({
           setIsPickingGenerationReferenceFromCanvas={
             setIsPickingGenerationReferenceFromCanvas
           }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
           onRequestUpload={onRequestUpload}
           onSubmit={onSubmitImageGeneration}
         />
@@ -615,6 +786,7 @@ export function ImageCanvasGenerationComposerView({
           panel={characterAnimationPanel}
           style={characterAnimationPanelStyle}
           price={characterAnimationPrice}
+          sourceLayer={characterAnimationSourceLayer}
           setCharacterAnimationPanel={setCharacterAnimationPanel}
           onUpdateDuration={onUpdateCharacterAnimationDuration}
           onSubmit={onSubmitCharacterAnimation}
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index dcc038748..8619c627b 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -77,11 +77,15 @@ export function createGenerateDialogDraft({
   const placeholderWidth = 420;
   const placeholderHeight = 420;
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  const dimensionDefaults = resolveImageDimensionDefaults(DEFAULT_IMAGE_MODEL);
   return {
     mode: 'generate',
     prompt: '',
     status: 'idle',
     composerOpen: true,
+    imageModel: DEFAULT_IMAGE_MODEL,
+    aspectRatio: dimensionDefaults.aspectRatio,
+    imageSize: dimensionDefaults.imageSize,
     placeholder: {
       x: worldCenter.x - placeholderWidth / 2,
       y: worldCenter.y - placeholderHeight / 2,
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
index 16f1b155e..22de4e2ba 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -29,6 +29,9 @@ function ImageOptionsHarness({
         setGenerateDialog={setDialog}
         includeDimensions
         onRememberImageModel={onRememberImageModel}
+        cost={12}
+        submitLabel="生成"
+        submitAriaLabel="生成角色形象"
       />
       <output aria-label="当前模型">{dialog.imageModel}</output>
       <output aria-label="当前比例">{dialog.aspectRatio}</output>
@@ -40,7 +43,7 @@ function ImageOptionsHarness({
 }
 
 describe('ImageCanvasGenerationImageOptionsView', () => {
-  it('updates dimensions and resets failed dialog state', () => {
+  it('updates dimensions from a menu, keeps the menu open and marks the selection', () => {
     render(
       <ImageOptionsHarness
         initialDialog={{
@@ -55,16 +58,35 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: '16:9' }));
-    fireEvent.click(screen.getByRole('button', { name: '2K' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+    );
+    const panel = screen.getByRole('menu', { name: '生成图片尺寸选项' });
 
+    fireEvent.click(within(panel).getByRole('button', { name: '16:9' }));
+    fireEvent.click(within(panel).getByRole('button', { name: '2K' }));
+
+    expect(screen.getByRole('menu', { name: '生成图片尺寸选项' })).toBeTruthy();
+    expect(
+      within(panel)
+        .getByRole('button', { name: '16:9' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(
+      within(panel)
+        .getByRole('button', { name: '2K' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(
+      screen.getByRole('button', { name: '生成图片尺寸 16:9 · 2K' }),
+    ).toBeTruthy();
     expect(screen.getByLabelText('当前比例').textContent).toBe('16:9');
     expect(screen.getByLabelText('当前尺寸').textContent).toBe('2K');
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
   });
 
-  it('remembers model changes and keeps compatible dimensions', () => {
+  it('renders model choices as one model per row and uses a check mark for selection', () => {
     const rememberImageModel = vi.fn();
     render(
       <ImageOptionsHarness
@@ -80,13 +102,48 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片模型 nanobanana2' }),
+    );
+    const panel = screen.getByRole('menu', { name: '生成图片模型选项' });
 
+    expect(within(panel).getByRole('button', { name: 'nanobanana2' })).toBeTruthy();
+    fireEvent.click(within(panel).getByRole('button', { name: 'gpt-image-2' }));
+
+    expect(screen.getByRole('menu', { name: '生成图片模型选项' })).toBeTruthy();
     expect(rememberImageModel).toHaveBeenCalledWith(IMAGE_MODEL_GPT_IMAGE_2);
     expect(screen.getByLabelText('当前模型').textContent).toBe(
       IMAGE_MODEL_GPT_IMAGE_2,
     );
     expect(screen.getByLabelText('当前比例').textContent).toBe('9:16');
     expect(screen.getByLabelText('当前尺寸').textContent).toBe('1K');
+    expect(
+      screen.getByRole('button', { name: '生成图片模型 gpt-image-2' }),
+    ).toBeTruthy();
+  });
+
+  it('renders option menus and shows mud point text in the submit button', () => {
+    render(
+      <ImageOptionsHarness
+        initialDialog={{
+          mode: 'generate',
+          prompt: '',
+          status: 'idle',
+          imageModel: IMAGE_MODEL_NANOBANANA2,
+          aspectRatio: '1:1',
+          imageSize: '1K',
+        }}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+    );
+
+    expect(
+      screen.getByRole('menu', { name: '生成图片尺寸选项' }),
+    ).toBeTruthy();
+    const submit = screen.getByRole('button', { name: '生成角色形象' });
+    expect(submit.textContent).toBe('生成12泥点');
   });
 });
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index 06136ed8c..6f1025c0c 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -1,6 +1,15 @@
-import { type Dispatch, type SetStateAction } from 'react';
+import { Check, ChevronDown, Cpu } from 'lucide-react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useRef,
+  useState,
+} from 'react';
 
-import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformFloatingMenu } from '../common/PlatformFloatingMenu';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import {
   EDITOR_IMAGE_DIMENSION_OPTIONS,
@@ -14,8 +23,19 @@ type ImageCanvasGenerationImageOptionsViewProps = {
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   includeDimensions: boolean;
   onRememberImageModel: (model: string) => void;
+  optionLabelPrefix?: string;
+  cost?: number;
+  submitLabel?: string;
+  submitAriaLabel?: string;
+  renderEditorPortal?: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle?: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
 };
 
+type OpenPanel = 'dimensions' | 'model' | null;
+
 function resetFailedDialogStatus(dialog: GenerateDialogState) {
   return {
     ...dialog,
@@ -24,7 +44,7 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
-function getImageDimensionOptions(model: string | null | undefined) {
+export function getImageDimensionOptions(model: string | null | undefined) {
   return (
     EDITOR_IMAGE_DIMENSION_OPTIONS[
       (model ?? IMAGE_MODEL_NANOBANANA2) as keyof typeof EDITOR_IMAGE_DIMENSION_OPTIONS
@@ -32,7 +52,7 @@ function getImageDimensionOptions(model: string | null | undefined) {
   );
 }
 
-function normalizeImageDialogSelection(dialog: GenerateDialogState) {
+export function normalizeImageDialogSelection(dialog: GenerateDialogState) {
   const model = dialog.imageModel ?? IMAGE_MODEL_NANOBANANA2;
   const options = getImageDimensionOptions(model);
   const aspectRatios = options.aspectRatios as readonly string[];
@@ -52,13 +72,58 @@ function normalizeImageDialogSelection(dialog: GenerateDialogState) {
   };
 }
 
+function getImageModelLabel(value: string) {
+  return (
+    EDITOR_IMAGE_MODEL_OPTIONS.find((option) => option.value === value)
+      ?.label ?? value
+  );
+}
+
+function OptionChoice({
+  children,
+  selected,
+  className,
+  onClick,
+}: {
+  children: ReactNode;
+  selected: boolean;
+  className?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={['image-canvas-editor__option-popover-choice', className]
+        .filter(Boolean)
+        .join(' ')}
+      aria-pressed={selected}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
 export function ImageCanvasGenerationImageOptionsView({
   dialog,
   setGenerateDialog,
   includeDimensions,
   onRememberImageModel,
+  optionLabelPrefix,
+  cost,
+  submitLabel = '生成',
+  submitAriaLabel = '生成',
+  renderEditorPortal = (node) => node,
+  buildPortalMenuStyle = () => ({}),
 }: ImageCanvasGenerationImageOptionsViewProps) {
+  const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
+  const dimensionsButtonRef = useRef<HTMLButtonElement | null>(null);
+  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
   const selection = normalizeImageDialogSelection(dialog);
+  const selectedModelLabel = getImageModelLabel(selection.model);
+  const isGenerating = dialog.status === 'generating';
+  const labelPrefix = optionLabelPrefix ?? '生成图片';
+
   const updateDialog = (patch: Partial<GenerateDialogState>) => {
     setGenerateDialog((currentDialog) =>
       currentDialog && currentDialog.mode === dialog.mode
@@ -70,96 +135,187 @@ export function ImageCanvasGenerationImageOptionsView({
     );
   };
 
+  const updateImageModel = (model: string) => {
+    onRememberImageModel(model);
+    setGenerateDialog((currentDialog) => {
+      if (!currentDialog || currentDialog.mode !== dialog.mode) {
+        return currentDialog;
+      }
+      const nextOptions = getImageDimensionOptions(model);
+      const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
+      const nextImageSizes = nextOptions.imageSizes as readonly string[];
+      return {
+        ...resetFailedDialogStatus(currentDialog),
+        imageModel: model,
+        aspectRatio:
+          currentDialog.aspectRatio &&
+          nextAspectRatios.includes(currentDialog.aspectRatio)
+            ? currentDialog.aspectRatio
+            : nextOptions.aspectRatios[0],
+        imageSize:
+          currentDialog.imageSize &&
+          nextImageSizes.includes(currentDialog.imageSize)
+            ? currentDialog.imageSize
+            : (nextOptions.imageSizes.find((size) => size === '1K') ??
+              nextOptions.imageSizes[0]),
+      };
+    });
+  };
+
+  const togglePanel = (panel: Exclude<OpenPanel, null>) => {
+    setOpenPanel((currentPanel) => (currentPanel === panel ? null : panel));
+  };
+
   return (
     <>
       {includeDimensions ? (
-        <>
-          <div className="image-canvas-editor__option-field">
-            <PlatformFieldLabel
-              variant="field"
-              className="image-canvas-editor__field-title"
-            >
-              画面比例
-            </PlatformFieldLabel>
-            <div className="image-canvas-editor__inline-option-group">
-              {selection.options.aspectRatios.map((aspectRatio) => (
-                <PlatformInlineOptionButton
-                  key={aspectRatio}
-                  className="image-canvas-editor__generation-ratio"
-                  disabled={dialog.status === 'generating'}
-                  aria-pressed={selection.aspectRatio === aspectRatio}
-                  onClick={() => updateDialog({ aspectRatio })}
+        <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
+          <PlatformInlineOptionButton
+            ref={dimensionsButtonRef}
+            className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+            aria-label={`${labelPrefix}尺寸 ${selection.aspectRatio} · ${selection.imageSize}`}
+            aria-expanded={openPanel === 'dimensions'}
+            disabled={isGenerating}
+            trailingIcon={<ChevronDown className="h-3 w-3" />}
+            onClick={() => togglePanel('dimensions')}
+          >
+            {selection.aspectRatio} · {selection.imageSize}
+          </PlatformInlineOptionButton>
+          {openPanel === 'dimensions'
+            ? renderEditorPortal(
+                <PlatformFloatingMenu
+                  className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+                  label={`${labelPrefix}尺寸选项`}
+                  placement="top-start"
+                  style={buildPortalMenuStyle(
+                    dimensionsButtonRef.current,
+                    'above',
+                  )}
+                  onPointerDown={(event) => event.stopPropagation()}
                 >
-                  {aspectRatio}
-                </PlatformInlineOptionButton>
-              ))}
-            </div>
-          </div>
-          <div className="image-canvas-editor__option-field">
-            <PlatformFieldLabel
-              variant="field"
-              className="image-canvas-editor__field-title"
-            >
-              大小尺寸
-            </PlatformFieldLabel>
-            <div className="image-canvas-editor__inline-option-group">
-              {selection.options.imageSizes.map((imageSize) => (
-                <PlatformInlineOptionButton
-                  key={imageSize}
-                  className="image-canvas-editor__generation-ratio"
-                  disabled={dialog.status === 'generating'}
-                  aria-pressed={selection.imageSize === imageSize}
-                  onClick={() => updateDialog({ imageSize })}
-                >
-                  {imageSize}
-                </PlatformInlineOptionButton>
-              ))}
-            </div>
-          </div>
-        </>
-      ) : null}
-      <div className="image-canvas-editor__option-field">
-        <PlatformFieldLabel
-          variant="field"
-          className="image-canvas-editor__field-title"
-        >
-          模型
-        </PlatformFieldLabel>
-        <div className="image-canvas-editor__inline-option-group">
-          {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-            const nextOptions = getImageDimensionOptions(option.value);
-            const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
-            const nextImageSizes = nextOptions.imageSizes as readonly string[];
-            return (
-              <PlatformInlineOptionButton
-                key={option.value}
-                className="image-canvas-editor__generation-model"
-                disabled={dialog.status === 'generating'}
-                aria-pressed={selection.model === option.value}
-                onClick={() => {
-                  onRememberImageModel(option.value);
-                  updateDialog({
-                    imageModel: option.value,
-                    aspectRatio:
-                      dialog.aspectRatio &&
-                      nextAspectRatios.includes(dialog.aspectRatio)
-                        ? dialog.aspectRatio
-                        : nextOptions.aspectRatios[0],
-                    imageSize:
-                      dialog.imageSize &&
-                      nextImageSizes.includes(dialog.imageSize)
-                        ? dialog.imageSize
-                        : (nextOptions.imageSizes.find((size) => size === '1K') ??
-                          nextOptions.imageSizes[0]),
-                  });
-                }}
-              >
-                {option.label}
-              </PlatformInlineOptionButton>
-            );
-          })}
+                  <div className="image-canvas-editor__option-popover-sections">
+                    <div className="image-canvas-editor__option-popover-section">
+                      <span className="image-canvas-editor__option-popover-title">
+                        比例
+                      </span>
+                      <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
+                        {selection.options.aspectRatios.map((aspectRatio) => (
+                          <OptionChoice
+                            key={aspectRatio}
+                            selected={selection.aspectRatio === aspectRatio}
+                            className="image-canvas-editor__option-popover-choice--ratio"
+                            onClick={() => updateDialog({ aspectRatio })}
+                          >
+                            <span
+                              className="image-canvas-editor__ratio-wireframe"
+                              data-ratio={aspectRatio}
+                              aria-hidden="true"
+                            />
+                            <span>{aspectRatio}</span>
+                          </OptionChoice>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="image-canvas-editor__option-popover-section">
+                      <span className="image-canvas-editor__option-popover-title">
+                        尺寸
+                      </span>
+                      <div className="image-canvas-editor__option-popover-items">
+                        {selection.options.imageSizes.map((imageSize) => (
+                          <OptionChoice
+                            key={imageSize}
+                            selected={selection.imageSize === imageSize}
+                            onClick={() => updateDialog({ imageSize })}
+                          >
+                            {imageSize}
+                          </OptionChoice>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </PlatformFloatingMenu>,
+              )
+            : null}
         </div>
+      ) : null}
+      <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
+        <PlatformInlineOptionButton
+          ref={modelButtonRef}
+          className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+          aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
+          aria-expanded={openPanel === 'model'}
+          disabled={isGenerating}
+          trailingIcon={<ChevronDown className="h-3 w-3" />}
+          onClick={() => togglePanel('model')}
+        >
+          <span className="image-canvas-editor__model-trigger-label">
+            <span className="image-canvas-editor__model-icon" aria-hidden="true">
+              <Cpu />
+            </span>
+            <span>{selectedModelLabel}</span>
+          </span>
+        </PlatformInlineOptionButton>
+        {openPanel === 'model'
+          ? renderEditorPortal(
+              <PlatformFloatingMenu
+                className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
+                label={`${labelPrefix}模型选项`}
+                placement="top-start"
+                style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                onPointerDown={(event) => event.stopPropagation()}
+              >
+                <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                  {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
+                    const selected = selection.model === option.value;
+                    return (
+                      <OptionChoice
+                        key={option.value}
+                        selected={selected}
+                        className="image-canvas-editor__option-popover-choice--model"
+                        onClick={() => updateImageModel(option.value)}
+                      >
+                        <span
+                          className="image-canvas-editor__model-icon"
+                          aria-hidden="true"
+                        >
+                          <Cpu />
+                        </span>
+                        <span>{option.label}</span>
+                        <Check
+                          className="image-canvas-editor__option-selected-check"
+                          data-visible={selected}
+                          aria-hidden="true"
+                        />
+                      </OptionChoice>
+                    );
+                  })}
+                </div>
+              </PlatformFloatingMenu>,
+            )
+          : null}
       </div>
+      {typeof cost === 'number' ? (
+        <PlatformActionButton
+          type="submit"
+          tone="secondary"
+          size="xs"
+          shape="pill"
+          className="image-canvas-editor__generation-submit"
+          disabled={isGenerating}
+          aria-label={submitAriaLabel}
+        >
+          {isGenerating ? (
+            '生成中'
+          ) : (
+            <>
+              <span>{submitLabel}</span>
+              <span className="image-canvas-editor__mud-point-inline">
+                {cost}泥点
+              </span>
+            </>
+          )}
+        </PlatformActionButton>
+      ) : null}
     </>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts b/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
index c3b81995c..eacdc479e 100644
--- a/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
@@ -4,7 +4,11 @@ import {
   chooseGenerationPlacement,
   centerViewportOnPlacement,
 } from './ImageCanvasGenerationPlacementModel';
-import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+} from './ImageCanvasEditorTypes';
 
 const canvasSize = { width: 900, height: 640 };
 const viewport: CanvasViewport = { x: 10, y: 20, scale: 2 };
@@ -35,6 +39,26 @@ function layer(overrides: Partial<CanvasLayer>): CanvasLayer {
   };
 }
 
+function generationDialog(
+  overrides: Partial<CanvasGenerationDialogState>,
+): CanvasGenerationDialogState {
+  return {
+    id: 'dialog-1',
+    mode: 'generate',
+    prompt: '',
+    status: 'idle',
+    placeholder: {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      originalWidth: 2048,
+      originalHeight: 2048,
+    },
+    ...overrides,
+  };
+}
+
 describe('ImageCanvasGenerationPlacementModel', () => {
   it('places an empty-canvas generation frame at the current viewport center', () => {
     const placement = chooseGenerationPlacement({
@@ -94,10 +118,86 @@ describe('ImageCanvasGenerationPlacementModel', () => {
     expect(placement.y).toBe(-22);
   });
 
-  it('centers the viewport on the chosen placement without changing zoom', () => {
-    const nextViewport = centerViewportOnPlacement({
+  it('does not treat hidden layers as generation placement blockers', () => {
+    const placement = chooseGenerationPlacement({
       canvasSize,
       viewport,
+      frame: { ...frame, width: 100, height: 100 },
+      layers: [
+        layer({
+          id: 'hidden-center',
+          hidden: true,
+          x: 170,
+          y: 110,
+          width: 100,
+          height: 100,
+        }),
+      ],
+      generationDialogs: [],
+    });
+
+    expect(placement.x).toBe(170);
+    expect(placement.y).toBe(100);
+  });
+
+  it('chooses the nearest empty slot when multiple blockers surround the viewport center', () => {
+    const placement = chooseGenerationPlacement({
+      canvasSize: { width: 1000, height: 1000 },
+      viewport: { x: 500, y: 500, scale: 1 },
+      frame: { ...frame, width: 100, height: 100 },
+      layers: [
+        layer({
+          id: 'left-blocker',
+          x: -148,
+          y: -68,
+          width: 96,
+          height: 136,
+        }),
+        layer({
+          id: 'top-blocker',
+          x: -68,
+          y: -148,
+          width: 136,
+          height: 96,
+        }),
+      ],
+      generationDialogs: [],
+    });
+
+    expect(placement.x).toBe(-20);
+    expect(placement.y).toBe(-20);
+  });
+
+  it('avoids existing generation placeholders when choosing a new placement', () => {
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame: { ...frame, width: 100, height: 100 },
+      layers: [],
+      generationDialogs: [
+        generationDialog({
+          id: 'existing-placeholder',
+          placeholder: {
+            x: 170,
+            y: 110,
+            width: 100,
+            height: 100,
+            originalWidth: 2048,
+            originalHeight: 2048,
+          },
+        }),
+      ],
+    });
+
+    expect(placement.x).toBe(170);
+    expect(placement.y).toBe(-22);
+  });
+
+  it('centers the viewport on the chosen placement without changing zoom', () => {
+    const zoomedViewport = { ...viewport, scale: 1.75 };
+    const nextViewport = centerViewportOnPlacement({
+      canvasSize,
+      viewport: zoomedViewport,
       placement: {
         x: 170,
         y: 262,
@@ -108,6 +208,7 @@ describe('ImageCanvasGenerationPlacementModel', () => {
       },
     });
 
-    expect(nextViewport).toEqual({ x: 10, y: -304, scale: 2 });
+    expect(nextViewport.scale).toBe(zoomedViewport.scale);
+    expect(nextViewport).toEqual({ x: 65, y: -226, scale: 1.75 });
   });
 });
diff --git a/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts b/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
index d7a85b840..dfe159919 100644
--- a/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
@@ -158,6 +158,26 @@ function buildPlacementCandidates({
     );
   });
 
+  // 组合不同阻挡物的水平 / 垂直边界，覆盖中心被多块图层夹住时的最近空位。
+  const edgeXs = new Set<number>([baseX]);
+  const edgeYs = new Set<number>([baseY]);
+  blockingRects.forEach((rect) => {
+    edgeXs.add(rect.x + rect.width);
+    edgeXs.add(rect.x - frame.width);
+    edgeYs.add(rect.y + rect.height);
+    edgeYs.add(rect.y - frame.height);
+  });
+  edgeXs.forEach((x) => {
+    edgeYs.forEach((y) => {
+      pushUniqueCandidate(candidates, {
+        x,
+        y,
+        width: frame.width,
+        height: frame.height,
+      });
+    });
+  });
+
   for (let ring = 1; ring <= MAX_PLACEMENT_RING; ring += 1) {
     const offsets = [
       { x: ring, y: 0 },
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 65697cd2b..04611cde8 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -227,11 +227,15 @@ export function buildImageGenerationSubmissionPlan({
     };
   }
 
+  const imageModel = dialog.imageModel ?? DEFAULT_IMAGE_MODEL;
   return {
     kind: 'image',
     normalizedPrompt,
     input: {
       prompt: normalizedPrompt,
+      model: imageModel,
+      aspectRatio: dialog.aspectRatio ?? '1:1',
+      imageSize: dialog.imageSize ?? '1K',
       ...(dialog.generationReferences?.length
         ? {
             referenceImageSrcs: dialog.generationReferences.map(
@@ -246,6 +250,7 @@ export function buildImageGenerationSubmissionPlan({
         dialog.generationReferences,
       ),
     },
+    rememberImageModel: imageModel,
   };
 }
 
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index eb10fbae8..eaea5dda9 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -101,10 +101,31 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '新建图标素材规范' }));
     expect(openSpecDialog).toHaveBeenCalledWith('icon');
 
-    fireEvent.click(screen.getByRole('button', { name: '上传' }));
+    fireEvent.click(screen.getByRole('button', { name: '图标素材规范' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: '上传图片' }));
     expect(requestUpload).toHaveBeenCalledWith('icon-spec');
   });
 
+  it('keeps the spec reference as a single first-row card without extra source buttons', () => {
+    render(<IconComposerHarness initialDialog={createIconDialog()} />);
+
+    const panel = screen.getByRole('dialog', { name: '生成图标素材' });
+    const firstRow = panel.querySelector('.image-canvas-editor__reference-strip');
+
+    expect(firstRow).toBeTruthy();
+    expect(
+      within(firstRow as HTMLElement).getByRole('button', {
+        name: '图标素材规范',
+      }),
+    ).toBeTruthy();
+    expect(
+      panel.querySelector('.image-canvas-editor__icon-spec-actions'),
+    ).toBeNull();
+    expect(screen.queryByRole('button', { name: '画布' })).toBeNull();
+    expect(screen.queryByRole('button', { name: '新建' })).toBeNull();
+    expect(screen.queryByRole('button', { name: '上传' })).toBeNull();
+  });
+
   it('updates descriptions, adds more descriptions and submits', () => {
     const updateIconDescription = vi.fn();
     const addIconDescription = vi.fn();
@@ -142,7 +163,13 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片模型 nanobanana2' }),
+    );
+    const modelPanel = screen.getByRole('menu', { name: '生成图片模型选项' });
+    fireEvent.click(
+      within(modelPanel).getByRole('button', { name: 'gpt-image-2' }),
+    );
 
     expect(rememberImageModel).toHaveBeenCalledWith('gpt-image-2');
     expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
index e11d4ba29..dbf893e5c 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
@@ -7,7 +7,6 @@ import {
 } from 'react';
 import { ImageIcon } from 'lucide-react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import {
   PlatformFloatingMenu,
@@ -17,6 +16,7 @@ import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import {
   DEFAULT_ICON_DESCRIPTIONS,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
   ICON_DESCRIPTION_LIMIT,
 } from './ImageCanvasGenerationModel';
 import type {
@@ -95,46 +95,40 @@ export function ImageCanvasIconSpritesheetComposerView({
         }
       }}
     >
-      <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={dialog.status === 'generating'}
-              aria-label={dialog.iconSpecReference?.label ?? '图标素材规范'}
-              onClick={() => setIsIconSpecMenuOpen((open) => !open)}
-            >
-              <span
-                className="image-canvas-editor__icon-spec-preview"
-                aria-hidden="true"
-              >
-                {dialog.iconSpecReference?.src ? (
-                  <img src={dialog.iconSpecReference.src} alt="" />
-                ) : (
-                  <ImageIcon className="h-5 w-5" />
-                )}
+      <div className="image-canvas-editor__reference-strip">
+        <span className="image-canvas-editor__character-spec-wrap">
+          <button
+            ref={iconSpecButtonRef}
+            type="button"
+            className="image-canvas-editor__icon-spec-card image-canvas-editor__reference-chip image-canvas-editor__reference-chip--icon image-canvas-editor__reference-chip--upload"
+            disabled={dialog.status === 'generating'}
+            aria-label={dialog.iconSpecReference?.label ?? '图标素材规范'}
+            onClick={() => setIsIconSpecMenuOpen((open) => !open)}
+          >
+            <span className="image-canvas-editor__reference-chip-icon image-canvas-editor__icon-spec-preview">
+              {dialog.iconSpecReference?.src ? (
+                <img
+                  src={dialog.iconSpecReference.src}
+                  alt=""
+                  aria-hidden="true"
+                />
+              ) : (
+                <ImageIcon className="h-4 w-4" aria-hidden="true" />
+              )}
+            </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-copy">
-                <span className="image-canvas-editor__icon-spec-eyebrow">
-                  图标素材规范
-                </span>
-                <span className="image-canvas-editor__icon-spec-title">
-                  {dialog.iconSpecReference?.label ?? '待选择'}
-                </span>
+              <span className="image-canvas-editor__icon-spec-title">
+                {dialog.iconSpecReference?.label ?? '待选择'}
               </span>
-              <span className="image-canvas-editor__icon-spec-state">
-                {dialog.iconSpecReference ? '已绑定' : '待绑定'}
-              </span>
-            </button>
-          </span>
+            </span>
+            <span className="image-canvas-editor__icon-spec-state">
+              {dialog.iconSpecReference ? '已绑定' : '待绑定'}
+            </span>
+          </button>
+        </span>
           {isIconSpecMenuOpen
             ? renderEditorPortal(
                 <PlatformFloatingMenu
@@ -164,33 +158,6 @@ export function ImageCanvasIconSpritesheetComposerView({
                 </PlatformFloatingMenu>,
               )
             : null}
-          <div
-            className="image-canvas-editor__icon-spec-actions"
-            aria-label="图标素材规范操作"
-          >
-            <button
-              type="button"
-              disabled={dialog.status === 'generating'}
-              onClick={pickIconSpecFromCanvas}
-            >
-              画布
-            </button>
-            <button
-              type="button"
-              disabled={dialog.status === 'generating'}
-              onClick={openIconSpecDialog}
-            >
-              新建
-            </button>
-            <button
-              type="button"
-              disabled={dialog.status === 'generating'}
-              onClick={requestIconSpecUpload}
-            >
-              上传
-            </button>
-          </div>
-        </div>
       </div>
       <div className="image-canvas-editor__field-block">
         <PlatformFieldLabel
@@ -249,23 +216,20 @@ export function ImageCanvasIconSpritesheetComposerView({
         >
           添加素材描述
         </button>
+      </div>
+      <div className="image-canvas-editor__generation-composer-footer">
         <ImageCanvasGenerationImageOptionsView
           dialog={dialog}
           setGenerateDialog={setGenerateDialog}
           includeDimensions
           onRememberImageModel={onRememberImageModel}
+          optionLabelPrefix="生成图片"
+          cost={EDITOR_GENERATION_MUD_POINT_CONFIG.icon}
+          submitLabel="生成"
+          submitAriaLabel="生成"
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
         />
-        <PlatformActionButton
-          type="submit"
-          tone="secondary"
-          size="xs"
-          shape="pill"
-          className="image-canvas-editor__generation-submit"
-          disabled={dialog.status === 'generating'}
-          aria-label="生成"
-        >
-          {dialog.status === 'generating' ? '生成中' : '生成'}
-        </PlatformActionButton>
       </div>
     </form>
   );
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index eada5c475..a09594c29 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -1,6 +1,7 @@
 /* @vitest-environment jsdom */
 
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type {
@@ -51,7 +52,80 @@ function renderPanel({
   );
 }
 
+function UiDesignHarness({
+  initialDialog,
+}: {
+  initialDialog: GenerateDialogState;
+}) {
+  const [dialog, setDialog] = useState<GenerateDialogState | null>(
+    initialDialog,
+  );
+  const referenceButtonRef = createRef<HTMLButtonElement>();
+
+  return dialog ? (
+    <ImageCanvasSpecGenerationPanelView
+      dialog={dialog}
+      style={{ left: 10, top: 20 }}
+      generationReferenceButtonRef={referenceButtonRef}
+      setGenerateDialog={setDialog}
+      renderEditorPortal={(node) => node}
+      buildPortalMenuStyle={() => ({ position: 'fixed', left: 0, top: 0 })}
+      onUpdateSpecFormValue={vi.fn()}
+      onRequestUpload={vi.fn()}
+      onSubmit={vi.fn()}
+    />
+  ) : null;
+}
+
 describe('ImageCanvasSpecGenerationPanelView', () => {
+  it('keeps the reference row above fields for spec panels and shows mud point text', () => {
+    renderPanel({ dialog: createSpecDialog() });
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    expect(
+      panel.firstElementChild?.className.includes(
+        'image-canvas-editor__reference-strip',
+      ),
+    ).toBe(true);
+    const submitButton = screen.getByRole('button', { name: '提交生成规范' });
+    expect(submitButton.textContent).toBe('生成5泥点');
+  });
+
+  it('renders UI design as a single borderless prompt below the first reference row', () => {
+    render(
+      <UiDesignHarness
+        initialDialog={{
+          mode: 'ui-design',
+          prompt: '',
+          status: 'idle',
+          composerOpen: true,
+          uiDesignSpecReference: null,
+          imageModel: 'nanobanana2',
+          aspectRatio: '16:9',
+          imageSize: '1K',
+        }}
+      />,
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成UI设计图' });
+    const prompt = screen.getByRole('textbox', { name: 'UI设计要求' });
+
+    expect(
+      panel.firstElementChild?.className.includes(
+        'image-canvas-editor__reference-strip',
+      ),
+    ).toBe(true);
+    expect(panel.textContent).not.toContain('UI设计要求');
+    expect(prompt.getAttribute('placeholder')).toBe(
+      '你希望这个 UI 长什么样？',
+    );
+    expect(prompt.className).toContain(
+      'image-canvas-editor__generation-prompt--borderless',
+    );
+    const submitButton = screen.getByRole('button', { name: '生成UI设计图' });
+    expect(submitButton.textContent).toBe('生成12泥点');
+  });
+
   it('renders character spec fields and forwards updates', () => {
     const updateSpecFormValue = vi.fn();
     renderPanel({
@@ -129,6 +203,14 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     expect(submitSpec).toHaveBeenCalledWith(dialog);
   });
 
+  it('renders compact spec submit cost with mud point text', () => {
+    renderPanel({ dialog: createSpecDialog() });
+
+    const submitButton = screen.getByRole('button', { name: '提交生成规范' });
+
+    expect(submitButton.textContent).toBe('生成5泥点');
+  });
+
   it('disables controls while generating and renders failure state', () => {
     const submitSpec = vi.fn();
     const { rerender } = render(
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 4bf5fee8c..130050fac 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -5,7 +5,7 @@ import {
   type RefObject,
   type SetStateAction,
 } from 'react';
-import { ImagePlus } from 'lucide-react';
+import { ClipboardList, ImagePlus } from 'lucide-react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
@@ -20,6 +20,7 @@ import {
 } from '../common/PlatformTextField';
 import {
   CHARACTER_SPEC_VIEW_OPTIONS,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
   SPEC_GENERATION_COST,
 } from './ImageCanvasGenerationModel';
 import type {
@@ -28,6 +29,7 @@ import type {
   SpecGenerationType,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
+import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 
 type ImageCanvasSpecGenerationPanelViewProps = {
   dialog: GenerateDialogState;
@@ -45,6 +47,7 @@ type ImageCanvasSpecGenerationPanelViewProps = {
   onOpenSpecDialog?: (specType: SpecGenerationType) => void;
   onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
   onRequestUpload: (target: UploadTarget) => void;
+  onRememberImageModel?: (model: string) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
 };
 
@@ -61,6 +64,7 @@ export function ImageCanvasSpecGenerationPanelView({
   onOpenSpecDialog,
   onUpdateSpecFormValue,
   onRequestUpload,
+  onRememberImageModel = () => {},
   onSubmit,
 }: ImageCanvasSpecGenerationPanelViewProps) {
   const isUiDesignDialog = dialog.mode === 'ui-design';
@@ -94,24 +98,49 @@ export function ImageCanvasSpecGenerationPanelView({
           }
         }}
       >
+      <div className="image-canvas-editor__reference-strip">
+        {(isUiDesignDialog || dialog.specType) ? (
+          <button
+            ref={generationReferenceButtonRef}
+            type="button"
+            className={[
+              'image-canvas-editor__reference-chip',
+              isUiDesignDialog
+                ? 'image-canvas-editor__reference-chip--ui'
+                : 'image-canvas-editor__reference-chip--spec',
+              'image-canvas-editor__reference-chip--upload',
+            ].join(' ')}
+            disabled={dialog.status === 'generating'}
+            onClick={openReferenceMenu}
+            aria-label={referenceLabel}
+          >
+            <span className="image-canvas-editor__reference-chip-icon">
+              {reference ? (
+                <img src={reference.src} alt="" aria-hidden="true" />
+              ) : isUiDesignDialog ? (
+                <ImagePlus className="h-4 w-4" aria-hidden="true" />
+              ) : (
+                <ClipboardList className="h-4 w-4" aria-hidden="true" />
+              )}
+            </span>
+            <span className="image-canvas-editor__reference-chip-label">
+              {reference?.label ?? referenceLabel}
+            </span>
+          </button>
+        ) : null}
+      </div>
       <div className="image-canvas-editor__spec-fields">
         {isUiDesignDialog ? (
-          <label className="image-canvas-editor__field-block">
-            <PlatformFieldLabel
-              variant="form"
-              className="image-canvas-editor__field-title"
-            >
-              UI设计要求
-            </PlatformFieldLabel>
+          <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
             <PlatformTextField
               variant="textarea"
               aria-label="UI设计要求"
               value={dialog.prompt}
               disabled={dialog.status === 'generating'}
-              placeholder="描述要生成的UI界面"
+              placeholder="你希望这个 UI 长什么样？"
               size="sm"
               density="compact"
-              className="image-canvas-editor__generation-prompt"
+              className="image-canvas-editor__generation-prompt image-canvas-editor__generation-prompt--borderless"
               onChange={(event) => {
                 const nextPrompt = event.target.value;
                 if (setGenerateDialog) {
@@ -254,35 +283,6 @@ export function ImageCanvasSpecGenerationPanelView({
             ) : null}
           </>
         )}
-        {isUiDesignDialog || dialog.specType ? (
-          <div className="image-canvas-editor__field-block image-canvas-editor__generation-ref">
-            <PlatformFieldLabel
-              variant="form"
-              className="image-canvas-editor__field-title"
-            >
-              {referenceLabel}
-            </PlatformFieldLabel>
-            <button
-              ref={generationReferenceButtonRef}
-              type="button"
-              className="image-canvas-editor__character-spec-ref image-canvas-editor__reference-tile image-canvas-editor__reference-tile--spec"
-              disabled={dialog.status === 'generating'}
-              onClick={openReferenceMenu}
-              aria-label={referenceLabel}
-            >
-              <span className="image-canvas-editor__reference-tile-visual">
-                {reference ? (
-                  <img src={reference.src} alt="" aria-hidden="true" />
-                ) : (
-                  <ImagePlus className="h-4 w-4" aria-hidden="true" />
-                )}
-              </span>
-              <span className="image-canvas-editor__reference-tile-copy">
-                {reference?.label ?? '添加参考图'}
-              </span>
-            </button>
-          </div>
-        ) : null}
       </div>
       {dialog.status === 'failed' ? (
         <PlatformStatusMessage
@@ -296,18 +296,44 @@ export function ImageCanvasSpecGenerationPanelView({
         </PlatformStatusMessage>
       ) : null}
       <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__spec-footer">
-        <PlatformActionButton
-          type="submit"
-          tone="secondary"
-          size="sm"
-          className="image-canvas-editor__generation-submit image-canvas-editor__spec-submit"
-          disabled={dialog.status === 'generating'}
-          aria-label={isUiDesignDialog ? '生成UI设计图' : '提交生成规范'}
-        >
-          {dialog.status === 'generating'
-            ? '生成中'
-            : `消耗${SPEC_GENERATION_COST}泥点 · 生成`}
-        </PlatformActionButton>
+        {isUiDesignDialog ? (
+          <ImageCanvasGenerationImageOptionsView
+            dialog={dialog}
+            setGenerateDialog={setGenerateDialog ?? (() => undefined)}
+            includeDimensions
+            onRememberImageModel={onRememberImageModel}
+            cost={EDITOR_GENERATION_MUD_POINT_CONFIG.uiDesign}
+            submitLabel="生成"
+            submitAriaLabel="生成UI设计图"
+            optionLabelPrefix="生成图片"
+            renderEditorPortal={renderEditorPortal}
+            buildPortalMenuStyle={buildPortalMenuStyle}
+          />
+        ) : (
+          <>
+            <span aria-hidden="true" />
+          <PlatformActionButton
+              type="submit"
+              tone="secondary"
+              size="xs"
+              shape="pill"
+              className="image-canvas-editor__generation-submit image-canvas-editor__spec-submit"
+              disabled={dialog.status === 'generating'}
+              aria-label="提交生成规范"
+            >
+            {dialog.status === 'generating' ? (
+              '生成中'
+            ) : (
+              <>
+                <span>生成</span>
+                <span className="image-canvas-editor__mud-point-inline">
+                  {SPEC_GENERATION_COST}泥点
+                </span>
+              </>
+            )}
+            </PlatformActionButton>
+          </>
+        )}
       </div>
       </form>
       {isGenerationReferenceMenuOpen && generationReferenceButtonRef
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index c030e7669..c7dffaa7f 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -199,10 +199,14 @@ describe('ImageCanvasWorldView', () => {
           placeholder: undefined,
         }),
       ],
+      generateDialog: dialog,
     });
 
     const frame = screen.getByRole('button', { name: '图标素材生成占位图' });
 
+    expect(frame.className).toContain(
+      'image-canvas-editor__generation-frame--focused',
+    );
     expect(within(frame).getByText('Icon Generator')).toBeTruthy();
     expect(within(frame).getByText('图标')).toBeTruthy();
     expect(within(frame).getByText('1024 x 768')).toBeTruthy();
@@ -218,4 +222,90 @@ describe('ImageCanvasWorldView', () => {
     expect(props.onActivateGenerationDialog).toHaveBeenCalledWith(dialog);
     expect(screen.queryByText('dialog-without-placeholder')).toBeNull();
   });
+
+  it('hides idle placeholder chrome after blur and restores it when focused', () => {
+    const dialog = createGenerationDialog({
+      id: 'dialog-idle',
+      mode: 'generate',
+      status: 'idle',
+    });
+
+    const { rerender, props } = renderWorldView({
+      canvasGenerationDialogs: [dialog],
+      generateDialog: null,
+    });
+
+    const blurredFrame = screen.getByRole('button', { name: '图像生成占位图' });
+    expect(blurredFrame.className).not.toContain(
+      'image-canvas-editor__generation-frame--focused',
+    );
+    expect(within(blurredFrame).queryByText('Image Generator')).toBeNull();
+    expect(within(blurredFrame).queryByText('1024 x 768')).toBeNull();
+
+    rerender(<ImageCanvasWorldView {...props} generateDialog={dialog} />);
+
+    const focusedFrame = screen.getByRole('button', { name: '图像生成占位图' });
+    expect(focusedFrame.className).toContain(
+      'image-canvas-editor__generation-frame--focused',
+    );
+    expect(within(focusedFrame).getByText('Image Generator')).toBeTruthy();
+    expect(within(focusedFrame).getByText('1024 x 768')).toBeTruthy();
+  });
+
+  it('keeps layer and generation chrome readable when the canvas is zoomed out', () => {
+    const layer = createLayer({ assetKind: 'character' });
+    const dialog = createGenerationDialog({ id: 'dialog-focused' });
+
+    renderWorldView({
+      viewport: { x: 0, y: 0, scale: 0.25 },
+      layers: [layer],
+      hoveredLayerId: layer.id,
+      canvasGenerationDialogs: [dialog],
+      generateDialog: dialog,
+    });
+
+    const layerButton = screen.getByRole('button', { name: '选择角色主图' });
+    const frame = screen.getByRole('button', { name: '图像生成占位图' });
+    const inverseScale = '4';
+
+    expect(
+      (within(layerButton).getByText('角色') as HTMLElement).style.getPropertyValue(
+        '--image-canvas-editor-inverse-scale',
+      ),
+    ).toBe(inverseScale);
+    expect(
+      (within(layerButton).getByText('640 x 480 px') as HTMLElement).style.getPropertyValue(
+        '--image-canvas-editor-inverse-scale',
+      ),
+    ).toBe(inverseScale);
+    expect(
+      within(layerButton)
+        .getByRole('button', { name: '查看角色主图图片信息' })
+        .style.getPropertyValue('--image-canvas-editor-inverse-scale'),
+    ).toBe(inverseScale);
+    expect(
+      (within(frame).getByText('Image Generator') as HTMLElement).style.getPropertyValue(
+        '--image-canvas-editor-inverse-scale',
+      ),
+    ).toBe(inverseScale);
+    expect(
+      (within(frame).getByText('1024 x 768') as HTMLElement).style.getPropertyValue(
+        '--image-canvas-editor-inverse-scale',
+      ),
+    ).toBe(inverseScale);
+  });
+
+  it('uses a plain information icon for metadata corner actions', () => {
+    const layer = createLayer();
+    renderWorldView({ layers: [layer] });
+
+    const metadataButton = screen.getByRole('button', {
+      name: '查看角色主图图片信息',
+    });
+
+    expect(metadataButton.querySelector('svg')?.getAttribute('class')).toContain(
+      'lucide-info',
+    );
+  });
+
 });
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index 69b8a999e..1023f9db0 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -1,4 +1,4 @@
-import { Braces, ImageIcon } from 'lucide-react';
+import { ImageIcon, Info } from 'lucide-react';
 import type {
   CSSProperties,
   MouseEvent as ReactMouseEvent,
@@ -24,6 +24,25 @@ import {
   getLayerKindLabel,
 } from './ImageCanvasGenerationModel';
 
+function getInverseViewportScale(viewport: CanvasViewport) {
+  if (!Number.isFinite(viewport.scale) || viewport.scale <= 0) {
+    return 1;
+  }
+  return 1 / viewport.scale;
+}
+
+function buildInverseScaleStyle(
+  inverseScale: number,
+): CSSProperties & Record<string, string> {
+  return {
+    '--image-canvas-editor-inverse-scale': String(inverseScale),
+    '--image-canvas-editor-corner-offset': `calc(0.35rem * ${inverseScale})`,
+    '--image-canvas-editor-kind-offset': `calc(0.38rem * ${inverseScale})`,
+    '--image-canvas-editor-beside-kind-offset': `calc(3.95rem * ${inverseScale})`,
+    '--image-canvas-editor-frame-label-offset': `calc(-1.35rem * ${inverseScale})`,
+  };
+}
+
 export type ImageCanvasWorldViewProps = {
   viewport: CanvasViewport;
   snapGuide: SnapGuide | null;
@@ -77,6 +96,9 @@ export function ImageCanvasWorldView({
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
 }: ImageCanvasWorldViewProps) {
+  const inverseScale = getInverseViewportScale(viewport);
+  const inverseScaleStyle = buildInverseScaleStyle(inverseScale);
+
   return (
     <div
       className="image-canvas-editor__world"
@@ -153,6 +175,7 @@ export function ImageCanvasWorldView({
               {kindLabel ? (
                 <span
                   className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind}`}
+                  style={inverseScaleStyle}
                 >
                   {kindLabel}
                 </span>
@@ -166,7 +189,8 @@ export function ImageCanvasWorldView({
                     : ''
                 }`}
                 label={`查看${layer.title}图片信息`}
-                icon={<Braces className="h-3 w-3" />}
+                icon={<Info className="h-3 w-3" />}
+                style={inverseScaleStyle}
                 onClick={(event) => {
                   event.stopPropagation();
                   onOpenLayerMetadata(layer);
@@ -178,6 +202,7 @@ export function ImageCanvasWorldView({
                   tone="lightOverlay"
                   size="xs"
                   className="image-canvas-editor__size-badge"
+                  style={inverseScaleStyle}
                 >
                   {Math.round(layer.originalWidth)} x{' '}
                   {Math.round(layer.originalHeight)} px
@@ -217,66 +242,99 @@ export function ImageCanvasWorldView({
         />
       ) : null}
       {canvasGenerationDialogs.map((dialog) =>
-        dialog.placeholder ? (
-          <div
-            key={dialog.id}
-            className={`image-canvas-editor__generation-frame ${
-              dialog.mode === 'icon'
-                ? 'image-canvas-editor__generation-frame--icon'
-                : ''
-            } ${
-              dialog.status === 'generating'
-                ? 'image-canvas-editor__generation-frame--generating'
-                : ''
-            }`}
-            role="button"
-            tabIndex={0}
-            style={{
-              left: dialog.placeholder.x,
-              top: dialog.placeholder.y,
-              width: dialog.placeholder.width,
-              height: dialog.placeholder.height,
-            }}
-            aria-label={getGenerationFrameAriaLabel(dialog)}
-            onPointerDown={(event) => onGenerationFramePointerDown(event, dialog)}
-            onDoubleClick={() => onActivateGenerationDialog(dialog)}
-          >
-            <span className="image-canvas-editor__generation-frame-label">
-              <ImageIcon className="h-4 w-4" />
-              {getGenerationFrameLabel(dialog)}
-            </span>
-            {dialog.mode === 'character' ? (
-              <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--character">
-                角色
-              </span>
-            ) : null}
-            {dialog.mode === 'spec' ? (
-              <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--spec">
-                规范
-              </span>
-            ) : null}
-            {dialog.mode === 'icon' ? (
-              <span className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--icon">
-                图标
-              </span>
-            ) : null}
-            <span className="image-canvas-editor__generation-frame-size">
-              {dialog.placeholder.originalWidth} x{' '}
-              {dialog.placeholder.originalHeight}
-            </span>
-            <span className="image-canvas-editor__generation-frame-icon">
-              <ImageIcon className="h-8 w-8" />
-            </span>
-            {dialog.status === 'generating' ? (
-              <span
-                className="image-canvas-editor__generation-frame-progress"
-                role="status"
-              >
-                生成中
-              </span>
-            ) : null}
-          </div>
-        ) : null,
+        dialog.placeholder
+          ? (() => {
+              const isFocused = generateDialog?.id === dialog.id;
+              const showFocusedChrome =
+                isFocused || dialog.status === 'generating';
+
+              return (
+                <div
+                  key={dialog.id}
+                  className={`image-canvas-editor__generation-frame ${
+                    dialog.mode === 'icon'
+                      ? 'image-canvas-editor__generation-frame--icon'
+                      : ''
+                  } ${
+                    dialog.status === 'generating'
+                      ? 'image-canvas-editor__generation-frame--generating'
+                      : ''
+                  } ${
+                    isFocused
+                      ? 'image-canvas-editor__generation-frame--focused'
+                      : ''
+                  }`}
+                  role="button"
+                  tabIndex={0}
+                  style={{
+                    left: dialog.placeholder.x,
+                    top: dialog.placeholder.y,
+                    width: dialog.placeholder.width,
+                    height: dialog.placeholder.height,
+                  }}
+                  aria-label={getGenerationFrameAriaLabel(dialog)}
+                  onPointerDown={(event) =>
+                    onGenerationFramePointerDown(event, dialog)
+                  }
+                  onDoubleClick={() => onActivateGenerationDialog(dialog)}
+                >
+                  {showFocusedChrome ? (
+                    <span
+                      className="image-canvas-editor__generation-frame-label"
+                      style={inverseScaleStyle}
+                    >
+                      <ImageIcon className="h-4 w-4" />
+                      {getGenerationFrameLabel(dialog)}
+                    </span>
+                  ) : null}
+                  {dialog.mode === 'character' ? (
+                    <span
+                      className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--character"
+                      style={inverseScaleStyle}
+                    >
+                      角色
+                    </span>
+                  ) : null}
+                  {dialog.mode === 'spec' ? (
+                    <span
+                      className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--spec"
+                      style={inverseScaleStyle}
+                    >
+                      规范
+                    </span>
+                  ) : null}
+                  {dialog.mode === 'icon' ? (
+                    <span
+                      className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--icon"
+                      style={inverseScaleStyle}
+                    >
+                      图标
+                    </span>
+                  ) : null}
+                  {showFocusedChrome ? (
+                    <span
+                      className="image-canvas-editor__generation-frame-size"
+                      style={inverseScaleStyle}
+                    >
+                      {dialog.placeholder.originalWidth} x{' '}
+                      {dialog.placeholder.originalHeight}
+                    </span>
+                  ) : null}
+                  <span className="image-canvas-editor__generation-frame-icon">
+                    <ImageIcon className="h-8 w-8" />
+                  </span>
+                  {dialog.status === 'generating' ? (
+                    <span
+                      className="image-canvas-editor__generation-frame-progress"
+                      role="status"
+                    >
+                      生成中
+                    </span>
+                  ) : null}
+                </div>
+              );
+            })()
+          : null,
       )}
       {(generateDialog?.mode === 'generate' ||
         generateDialog?.mode === 'spec' ||
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 95b62d8c8..2ceef94e6 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -180,6 +180,9 @@ function GenerationWorkflowHarness({
       <button type="button" onClick={() => workflow.openSpecDialog('ui')}>
         打开UI规范
       </button>
+      <button type="button" onClick={workflow.openVideoGenerationDialog}>
+        打开视频生成
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -356,6 +359,31 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('viewport').textContent).toBe('934:20:2');
   });
 
+  it('places a new video generation placeholder away from existing canvas images and centers the viewport on it', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            id: 'center-layer',
+            x: 0,
+            y: -80,
+            width: 460,
+            height: 460,
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '打开视频生成' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('video');
+    expect(screen.getByTestId('selected').textContent).toBe('-');
+    expect(screen.getByTestId('placeholder').textContent).toBe(
+      '-60:412:560:315',
+    );
+    expect(screen.getByTestId('viewport').textContent).toBe('10:-819:2');
+  });
+
   it('submits a normal generation, appends the generated layer, and keeps the composer anchored', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '一张生成图' }),
@@ -368,6 +396,9 @@ describe('useImageCanvasGenerationWorkflow', () => {
 
     expect(generateEditorImageMock).toHaveBeenCalledWith({
       prompt: '一张生成图',
+      model: 'gemini-3.1-flash-image-preview',
+      aspectRatio: '1:1',
+      imageSize: '1K',
     });
     expect(screen.getByTestId('dialog').textContent).toBe(
       'generate:generating:closed:-:placeholder',
@@ -406,6 +437,9 @@ describe('useImageCanvasGenerationWorkflow', () => {
     await waitFor(() => {
       expect(generateEditorImageMock).toHaveBeenCalledWith({
         prompt: '一张生成图',
+        model: 'gemini-3.1-flash-image-preview',
+        aspectRatio: '1:1',
+        imageSize: '1K',
         referenceImageSrcs: ['data:image/png;base64,source'],
       });
     });
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 2308a2c59..9a5fc97ff 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -173,59 +173,92 @@ export function useImageCanvasGenerationWorkflow({
       ? (generateDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS)
       : DEFAULT_ICON_DESCRIPTIONS;
 
-  const openGenerateDialog = useCallback(() => {
-    const draft = createGenerateDialogDraft({ canvasSize, viewport });
-    const draftPlaceholder = draft.placeholder;
-    if (!draftPlaceholder) {
-      return;
-    }
-    const placement = chooseGenerationPlacement({
-      canvasSize,
-      viewport,
-      frame: draftPlaceholder,
-      layers,
-      generationDialogs: canvasGenerationDialogs,
-    }) ?? draftPlaceholder;
-    openCanvasGenerationDialog({
-      ...draft,
-      placeholder: placement,
-    });
-    setViewport(
-      centerViewportOnPlacement({
+  const closeGenerationTransientState = useCallback(() => {
+    setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
+    setIsCharacterSpecMenuOpen(false);
+    setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
+    setIsPickingCharacterSpecFromCanvas(false);
+    setIsPickingCharacterReferenceFromCanvas(false);
+    setIsIconSpecMenuOpen(false);
+    setIsPickingIconSpecFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
+    setImageContextMenu(null);
+  }, [setImageContextMenu]);
+
+  const openPlacedCanvasGenerationDialog = useCallback(
+    (draft: Omit<CanvasGenerationDialogState, 'id'>) => {
+      const draftPlaceholder = draft.placeholder;
+      if (!draftPlaceholder) {
+        openCanvasGenerationDialog(draft);
+        return;
+      }
+      // 中文注释：所有画布生成入口统一先走 placement 模型，避免新占位压住已有图层或生成占位。
+      const placement = chooseGenerationPlacement({
         canvasSize,
         viewport,
-        placement,
-      }),
+        frame: draftPlaceholder,
+        layers,
+        generationDialogs: canvasGenerationDialogs,
+      });
+      openCanvasGenerationDialog({
+        ...draft,
+        placeholder: placement,
+      });
+      setViewport(
+        centerViewportOnPlacement({
+          canvasSize,
+          viewport,
+          placement,
+        }),
+      );
+    },
+    [
+      canvasGenerationDialogs,
+      canvasSize,
+      layers,
+      openCanvasGenerationDialog,
+      setViewport,
+      viewport,
+    ],
+  );
+
+  const activateCanvasGenerationEntry = useCallback(
+    (activeTool: CanvasTool) => {
+      closeGenerationTransientState();
+      setActiveTool(activeTool);
+      selectSingleLayer(null);
+      setQuickEditPanel(null);
+      setCharacterAnimationPanel(null);
+    },
+    [closeGenerationTransientState, selectSingleLayer, setActiveTool],
+  );
+
+  const openGenerateDialog = useCallback(() => {
+    openPlacedCanvasGenerationDialog(
+      createGenerateDialogDraft({ canvasSize, viewport }),
     );
-    setActiveTool('generate');
-    selectSingleLayer(null);
-    setQuickEditPanel(null);
+    activateCanvasGenerationEntry('generate');
   }, [
+    activateCanvasGenerationEntry,
     canvasSize,
-    canvasGenerationDialogs,
-    layers,
-    openCanvasGenerationDialog,
-    selectSingleLayer,
-    setActiveTool,
-    setViewport,
+    openPlacedCanvasGenerationDialog,
     viewport,
   ]);
 
   const openSpecDialog = useCallback(
     (specType: SpecGenerationType) => {
-      openCanvasGenerationDialog(
+      openPlacedCanvasGenerationDialog(
         createSpecDialogDraft({ canvasSize, viewport, specType }),
       );
-      setIsSpecMenuOpen(false);
-      setActiveTool('generate');
-      selectSingleLayer(null);
-      setQuickEditPanel(null);
+      activateCanvasGenerationEntry('generate');
     },
     [
+      activateCanvasGenerationEntry,
       canvasSize,
-      openCanvasGenerationDialog,
-      selectSingleLayer,
-      setActiveTool,
+      openPlacedCanvasGenerationDialog,
       viewport,
     ],
   );
@@ -245,116 +278,64 @@ export function useImageCanvasGenerationWorkflow({
   );
 
   const openCharacterGenerationDialog = useCallback(() => {
-    setIsSpecMenuOpen(false);
-    setIsGenerationReferenceMenuOpen(false);
-    setIsCharacterReferenceMenuOpen(false);
-    setIsPickingGenerationReferenceFromCanvas(false);
-    setIsPickingCharacterSpecFromCanvas(false);
-    setIsPickingCharacterReferenceFromCanvas(false);
-    setIsUiDesignSpecMenuOpen(false);
-    setIsPickingUiDesignSpecFromCanvas(false);
-    openCanvasGenerationDialog(
+    openPlacedCanvasGenerationDialog(
       createCharacterGenerationDialogDraft({
         canvasSize,
         viewport,
         imageModel: lastImageModel,
       }),
     );
-    setActiveTool('character');
-    selectSingleLayer(null);
-    setQuickEditPanel(null);
+    activateCanvasGenerationEntry('character');
   }, [
+    activateCanvasGenerationEntry,
     canvasSize,
     lastImageModel,
-    openCanvasGenerationDialog,
-    selectSingleLayer,
-    setActiveTool,
+    openPlacedCanvasGenerationDialog,
     viewport,
   ]);
 
   const openIconGenerationDialog = useCallback(() => {
-    setIsSpecMenuOpen(false);
-    setIsGenerationReferenceMenuOpen(false);
-    setIsCharacterReferenceMenuOpen(false);
-    setIsPickingGenerationReferenceFromCanvas(false);
-    setIsPickingCharacterSpecFromCanvas(false);
-    setIsPickingCharacterReferenceFromCanvas(false);
-    setIsUiDesignSpecMenuOpen(false);
-    setIsPickingUiDesignSpecFromCanvas(false);
-    setIsPickingIconSpecFromCanvas(false);
-    openCanvasGenerationDialog(
+    openPlacedCanvasGenerationDialog(
       createIconGenerationDialogDraft({
         canvasSize,
         viewport,
         imageModel: lastImageModel,
       }),
     );
-    setActiveTool('icon');
-    selectSingleLayer(null);
-    setQuickEditPanel(null);
-    setCharacterAnimationPanel(null);
+    activateCanvasGenerationEntry('icon');
   }, [
+    activateCanvasGenerationEntry,
     canvasSize,
     lastImageModel,
-    openCanvasGenerationDialog,
-    selectSingleLayer,
-    setActiveTool,
+    openPlacedCanvasGenerationDialog,
     viewport,
   ]);
 
   const openVideoGenerationDialog = useCallback(() => {
-    setIsSpecMenuOpen(false);
-    setIsGenerationReferenceMenuOpen(false);
-    setIsCharacterReferenceMenuOpen(false);
-    setIsPickingGenerationReferenceFromCanvas(false);
-    setIsPickingCharacterSpecFromCanvas(false);
-    setIsPickingCharacterReferenceFromCanvas(false);
-    setIsIconSpecMenuOpen(false);
-    setIsPickingIconSpecFromCanvas(false);
-    setIsUiDesignSpecMenuOpen(false);
-    setIsPickingUiDesignSpecFromCanvas(false);
-    openCanvasGenerationDialog(
+    openPlacedCanvasGenerationDialog(
       createVideoGenerationDialogDraft({ canvasSize, viewport }),
     );
-    setActiveTool('video');
-    selectSingleLayer(null);
-    setQuickEditPanel(null);
-    setCharacterAnimationPanel(null);
+    activateCanvasGenerationEntry('video');
   }, [
+    activateCanvasGenerationEntry,
     canvasSize,
-    openCanvasGenerationDialog,
-    selectSingleLayer,
-    setActiveTool,
+    openPlacedCanvasGenerationDialog,
     viewport,
   ]);
 
   const openUiDesignGenerationDialog = useCallback(() => {
-    setIsSpecMenuOpen(false);
-    setIsGenerationReferenceMenuOpen(false);
-    setIsCharacterReferenceMenuOpen(false);
-    setIsPickingGenerationReferenceFromCanvas(false);
-    setIsPickingCharacterSpecFromCanvas(false);
-    setIsPickingCharacterReferenceFromCanvas(false);
-    setIsIconSpecMenuOpen(false);
-    setIsPickingIconSpecFromCanvas(false);
-    setIsUiDesignSpecMenuOpen(false);
-    setIsPickingUiDesignSpecFromCanvas(false);
-    openCanvasGenerationDialog(
+    openPlacedCanvasGenerationDialog(
       createUiDesignGenerationDialogDraft({
         canvasSize,
         viewport,
         imageModel: 'gpt-image-2',
       }),
     );
-    setActiveTool('ui-design');
-    selectSingleLayer(null);
-    setQuickEditPanel(null);
-    setCharacterAnimationPanel(null);
+    activateCanvasGenerationEntry('ui-design');
   }, [
+    activateCanvasGenerationEntry,
     canvasSize,
-    openCanvasGenerationDialog,
-    selectSingleLayer,
-    setActiveTool,
+    openPlacedCanvasGenerationDialog,
     viewport,
   ]);
 
diff --git a/src/index.css b/src/index.css
index 9aff8edec..945554e22 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4821,17 +4821,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__generation-prompt {
   grid-column: 1 / -1;
-  min-height: 4.1rem;
+  min-height: 3.35rem;
   resize: none;
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 1.05rem;
   background: #f8fafc;
-  padding: 0.64rem 0.9rem;
+  padding: 0.52rem 0.82rem;
   color: #0f172a;
   font: inherit;
-  font-size: 0.88rem;
+  font-size: 0.82rem;
   font-weight: 680;
-  line-height: 1.55;
+  line-height: 1.48;
   outline: none;
 }
 
@@ -4839,6 +4839,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #94a3b8;
 }
 
+.image-canvas-editor__generation-prompt--borderless {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.image-canvas-editor__generation-prompt--borderless:focus {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
 .image-canvas-editor__video-prompt {
   grid-column: 1 / -1;
   min-height: 4.1rem;
@@ -4854,6 +4866,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   gap: 0.46rem;
+  position: relative;
   border-top: 1px solid rgba(15, 23, 42, 0.06);
   padding-top: 0.44rem;
 }
@@ -4892,11 +4905,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__reference-strip {
   display: flex;
+  grid-column: 1 / -1;
   min-width: 0;
   align-items: center;
   gap: 0.4rem;
   overflow-x: auto;
-  padding: 0.02rem 2.2rem 0.08rem 0;
+  padding: 0 2.2rem 0.02rem 0;
   scrollbar-width: thin;
 }
 
@@ -4966,6 +4980,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #0f172a;
 }
 
+.image-canvas-editor__reference-chip--video
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(59, 130, 246, 0.12);
+  color: #2563eb;
+}
+
 .image-canvas-editor__option-picker {
   width: 100%;
   min-height: 2rem;
@@ -4981,6 +5001,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__option-cluster {
   min-height: 2.25rem;
   height: 2.25rem;
+  width: 100%;
   border: 1px solid transparent;
   border-radius: 999px;
   background: transparent;
@@ -5006,6 +5027,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__option-cluster--dimensions {
+  grid-column: auto;
   justify-self: start;
   gap: 0.42rem;
 }
@@ -5015,7 +5037,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__option-cluster--model {
-  grid-column: 3;
   max-width: min(15.5rem, 32vw);
   justify-self: end;
   overflow: hidden;
@@ -5023,6 +5044,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   white-space: nowrap;
 }
 
+.image-canvas-editor__option-popover-anchor {
+  position: relative;
+  min-width: 0;
+}
+
+.image-canvas-editor__option-popover-anchor--dimensions {
+  grid-column: 1;
+  justify-self: start;
+}
+
+.image-canvas-editor__option-popover-anchor--model {
+  grid-column: 3;
+  justify-self: end;
+}
+
 .image-canvas-editor__model-trigger-label {
   display: inline-flex;
   min-width: 0;
@@ -5056,11 +5092,48 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__option-popover {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 0.45rem);
+  z-index: 3;
   min-width: 16rem;
   max-width: min(23rem, calc(100vw - 1.5rem));
+  border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 1.05rem;
-  padding: 0.95rem;
+  background: rgba(255, 255, 255, 0.98);
+  padding: 1.78rem 0.95rem 0.95rem;
+  color: #111827;
   font-size: 0.82rem;
+  box-shadow:
+    0 22px 56px rgba(15, 23, 42, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(16px);
+}
+
+.image-canvas-editor__option-popover-anchor--model
+  .image-canvas-editor__option-popover {
+  right: 0;
+  left: auto;
+}
+
+.image-canvas-editor__option-popover-close {
+  position: absolute;
+  right: 0.54rem;
+  top: 0.5rem;
+  display: inline-flex;
+  width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #64748b;
+}
+
+.image-canvas-editor__option-popover-close:hover {
+  background: #f1f5f9;
+  color: #0f172a;
 }
 
 .image-canvas-editor__option-popover-sections {
@@ -5165,6 +5238,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   stroke-width: 3;
 }
 
+.image-canvas-editor__option-selected-check[data-visible='false'] {
+  opacity: 0;
+}
+
 .image-canvas-editor__option-popover-choice--ratio {
   flex-direction: column;
   gap: 0.42rem;
@@ -5210,6 +5287,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   line-height: 1;
 }
 
+.image-canvas-editor__mud-point-inline svg {
+  width: 0.88rem;
+  height: 0.88rem;
+}
+
 .image-canvas-editor__generation-composer .image-canvas-editor__option-field {
   min-width: 0;
 }
@@ -5784,19 +5866,23 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__spec-fields {
   grid-column: 1 / -1;
   display: grid;
-  gap: 0.38rem;
+  gap: 0.28rem;
 }
 
 .image-canvas-editor__spec-input {
-  min-height: 2.16rem;
+  min-height: 1.96rem;
 }
 
 .image-canvas-editor__spec-textarea {
-  min-height: 4.55rem;
+  min-height: 3.8rem;
 }
 
 .image-canvas-editor__spec-textarea--view {
-  min-height: 3.55rem;
+  min-height: 3.1rem;
+}
+
+.image-canvas-editor__spec-composer .image-canvas-editor__field-block {
+  gap: 0.24rem;
 }
 
 .image-canvas-editor__context-menu {

From 38cbb85d48c3df34f595825dfe3f7aa7101231aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 14:40:39 +0800
Subject: [PATCH 09/16] =?UTF-8?q?=E4=B8=A5=E6=A0=BC=E5=8C=BA=E5=88=86Seeda?=
 =?UTF-8?q?nce=E8=A7=86=E9=A2=91=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将画板生成视频默认模型调整为 seedance2.0-fast

为 seedance2.0 与 seedance2.0-fast 分别映射独立上游模型

固定角色动画使用 seedance2.0-fast 并更新前后端契约测试

同步更新编辑器生成面板和项目记忆文档
---
 .../shared-memory/decision-log.md             |  4 +-
 ...辑器】画板角色动画生成实施计划-2026-06-15.md |  8 +--
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |  4 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  6 +-
 ...辑器】画板角色形象生成入口设计-2026-06-15.md |  4 +-
 server-rs/crates/api-server/src/app.rs        |  2 +-
 .../src/character_animation_assets.rs         | 64 +++++++++++++++++--
 .../crates/shared-contracts/src/assets.rs     |  6 +-
 ...CanvasCharacterAnimationPanelView.test.tsx |  2 +-
 ...CanvasEditorGenerationIntegration.test.tsx |  4 +-
 ...ImageCanvasGenerationComposerView.test.tsx |  8 +--
 .../ImageCanvasGenerationDialogModel.test.ts  |  2 +-
 .../ImageCanvasGenerationDialogModel.ts       |  3 +-
 .../ImageCanvasGenerationModel.ts             |  9 ++-
 ...ageCanvasGenerationSubmissionModel.test.ts | 63 +++++++++++++++++-
 .../ImageCanvasGenerationSubmissionModel.ts   |  3 +-
 ...anvasGenerationSubmissionWorkflow.test.tsx |  2 +-
 .../image-editor/editorProjectClient.test.ts  |  6 +-
 .../image-editor/editorProjectClient.ts       |  4 +-
 19 files changed, 163 insertions(+), 41 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index ceb2620ef..2b602af5d 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -2282,7 +2282,7 @@
 ## 2026-06-15 图片画布角色图层新增动画生成入口
 
 - 背景：图片画布已有角色形象图层标记 `assetKind="character"`，需要只对角色图片开放动画生成，不让普通素材误触发角色动画链路。
-- 决策：角色动画入口只由画布图层 `assetKind="character"` 控制，在图片上方浮动工具条和右键菜单显示 `生成动画`；非角色图层不展示入口。点击后打开独立 `角色动画生成面板`，桌面端锚定到图片右侧，移动端按底部面板承接。前端固定提交 `seedance2.0`、分辨率 / 比例 / 帧数 / 时长 / 价格字段；后端经 `/api/editor/character-animations/generations` 使用角色图作为首帧和尾帧生成视频，并立即抽取 32 / 40 / 48 帧、绿幕去背后写入 OSS。
+- 决策：角色动画入口只由画布图层 `assetKind="character"` 控制，在图片上方浮动工具条和右键菜单显示 `生成动画`；非角色图层不展示入口。点击后打开独立 `角色动画生成面板`，桌面端锚定到图片右侧，移动端按底部面板承接。前端固定提交 `seedance2.0-fast`、分辨率 / 比例 / 帧数 / 时长 / 价格字段；后端经 `/api/editor/character-animations/generations` 使用角色图作为首帧和尾帧生成视频，并立即抽取 32 / 40 / 48 帧、绿幕去背后写入 OSS。
 - 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/api-server/src/character_animation_assets.rs`、`server-rs/crates/shared-contracts/src/assets.rs`、图片画布技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p api-server editor_character_animation --manifest-path server-rs/Cargo.toml`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
@@ -2330,7 +2330,7 @@
 ## 2026-06-17 图片画布底部生成视频接入 Lovart 面板
 
 - 背景：编辑器画板底部工具栏需要新增 `生成视频`，并和现有 Lovart 式生成类面板、泥点展示、占位图和画布结果图层保持一致。
-- 决策：`生成视频` 点击后创建独立视频生成占位和极简面板，提交 `POST /api/editor/videos/generations`；首期前端仅开放 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`，不展示 Veo 模型入口；固定文字转视频、`16:9`、标准模式和静音。后端复用 Ark / VectorEngine content generation task 轮询链路，下载视频后持久化到 OSS。生成结果在画布中写入 `mediaType="video"` 与 `assetKind="video"`，图片信息弹窗按视频显示为 `视频信息` / `视频类型`。生成类泥点价格统一走 `editor_generation_config`，视频和角色动画均为 480p 每秒 10 泥点、720p 每秒 20 泥点。
+- 决策：`生成视频` 点击后创建独立视频生成占位和极简面板，提交 `POST /api/editor/videos/generations`；首期前端仅开放 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，不展示 Veo 模型入口，默认 `seedance2.0-fast`。后端必须严格区分 Seedance 2.0 Fast 与标准版：`seedance2.0-fast` 映射 `doubao-seedance-2-0-fast-260128`，`seedance2.0` 映射 `doubao-seedance-2-0-260128`，不得混用；固定文字转视频、`16:9`、标准模式和静音。后端复用 Ark / VectorEngine content generation task 轮询链路，下载视频后持久化到 OSS。生成结果在画布中写入 `mediaType="video"` 与 `assetKind="video"`，图片信息弹窗按视频显示为 `视频信息` / `视频类型`。生成类泥点价格统一走 `editor_generation_config`，视频和角色动画均为 480p 每秒 10 泥点、720p 每秒 20 泥点。
 - 影响范围：图片画布生成工作流、前端 editorProjectClient、`shared-contracts`、`api-server` 视频生成 BFF、编辑器技术方案和生成类面板方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "opens the bottom generate video panel"`、`npm run test -- src/components/image-editor/ImageCanvasMetadataModalView.test.tsx`、`npm run test -- src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p shared-contracts editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
diff --git a/docs/superpowers/plans/【编辑器】画板角色动画生成实施计划-2026-06-15.md b/docs/superpowers/plans/【编辑器】画板角色动画生成实施计划-2026-06-15.md
index 1b5513d8f..1416c67c7 100644
--- a/docs/superpowers/plans/【编辑器】画板角色动画生成实施计划-2026-06-15.md
+++ b/docs/superpowers/plans/【编辑器】画板角色动画生成实施计划-2026-06-15.md
@@ -2,11 +2,11 @@
 
 > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
 
-**Goal:** 在图片画布编辑器中，仅对角色图片提供角色动画生成入口，并通过后端 seedance2.0 链路生成视频、抽帧、去绿幕并持久化到 OSS。
+**Goal:** 在图片画布编辑器中，仅对角色图片提供角色动画生成入口，并通过后端 seedance2.0-fast 链路生成视频、抽帧、去绿幕并持久化到 OSS。
 
 **Architecture:** 前端在 `ImageCanvasEditorView` 中基于图层 `assetKind === "character"` 控制悬浮按钮和右键菜单，打开锚定到图片右侧的独立动画生成面板。前端 service 调用新增编辑器角色动画 API，后端复用 `character_animation_assets.rs` 中现有视频生成、抽帧、绿幕去背、OSS 写入能力，避免新建平行资产系统。
 
-**Tech Stack:** React + TypeScript + Vitest；Rust Axum `api-server`；现有 `shared-contracts` 资产 DTO；Aliyun OSS 资产持久化；VectorEngine/Ark seedance2.0 角色动画链路。
+**Tech Stack:** React + TypeScript + Vitest；Rust Axum `api-server`；现有 `shared-contracts` 资产 DTO；Aliyun OSS 资产持久化；VectorEngine/Ark seedance2.0-fast 角色动画链路。
 
 ---
 
@@ -48,7 +48,7 @@
 
 - [ ] **Step 1: 新增 service 类型和请求函数**
   - `generateEditorCharacterAnimation(input)` 调用 `/api/editor/character-animations/generations`。
-  - 限定 model 固定为 `seedance2.0` 的回包展示字段。
+  - 限定 model 固定为 `seedance2.0-fast` 的回包展示字段。
 
 - [ ] **Step 2: 扩展图层 assetKind**
   - `CanvasLayer.assetKind` 支持 `'character' | 'spec' | null`。
@@ -71,7 +71,7 @@
 - Modify: `C:/Genarrative/server-rs/crates/api-server/src/modules/play_flow.rs` 或现有 editor router 文件（按现有路由事实选择）
 
 - [ ] **Step 1: 写 DTO / prompt / plan 单测**
-  - 验证请求 480p/720p、32/40/48 帧、比例枚举、模型固定 seedance2.0。
+  - 验证请求 480p/720p、32/40/48 帧、比例枚举、模型固定 seedance2.0-fast。
   - 验证构造 prompt 包含用户给定固定骨架与动作描述。
   - 验证价格计算：480p 每秒 10，720p 每秒 20。
 
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 9f0a67a7e..828ef80bc 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -18,7 +18,7 @@
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 / Seedance 2.0 Fast / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频` 和 `生成UI设计图`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
 
@@ -67,7 +67,7 @@
 - `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
 - `POST /api/editor/icon-spritesheets/generations`：按图标素材规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`，后端把 UI 尺寸归一为文档支持的 `1024x1024`、`1024x1536`、`1536x1024`、`2048x2048`、`2048x1152` 等 `size` 字符串。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
-- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。前端可选模型为 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`；后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
+- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
 所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
 
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index 431f22793..be2342683 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -101,13 +101,15 @@
 ## 生成视频模型与接口
 
 - 底部 `生成视频` 面板提交到 `POST /api/editor/videos/generations`。
-- 首期只开放文字生成视频，固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布。
+- 固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布。
 - 支持模型：
-  - `seedance2.0`
   - `seedance2.0-fast`
+  - `seedance2.0`
   - `kling3.0`
   - `kling3.0-omni`
 - 前端不展示 Veo 模型入口。
+- `seedance2.0-fast` 是生成视频默认项，并继续映射到 `doubao-seedance-2-0-fast-260128`；`seedance2.0` 是标准版可选项，必须独立映射到 `doubao-seedance-2-0-260128`，不得与 Fast 混用。
+- 角色动画生成固定使用 `seedance2.0-fast`，不继承生成视频标准版选择。
 - 后端复用现有 Ark / VectorEngine content generation task 轮询链路，并把生成视频持久化到 OSS；缺少 `ARK_CHARACTER_VIDEO_BASE_URL` 或 `ARK_CHARACTER_VIDEO_API_KEY` 时 fail-closed 返回配置错误。
 
 ## 验收
diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index 9ac63ce6c..38252a61c 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -136,7 +136,7 @@
    - 分辨率：`480p`、`720p`。
    - 画面比例：默认 `与角色图片保持同尺寸`，可选 `1:1`、`4:3`、`16:9`、`9:16`、`3:4`。
    - 时长：`32帧·4秒`、`40帧·5秒`、`48帧·6秒`。
-4. 模型固定使用 `seedance2.0`，前端不提供模型切换。
+4. 模型固定使用 `seedance2.0-fast`，前端不提供模型切换。
 5. 生成按钮上方显示本次生成文本摘要和生成价格：
    - `480p` 每秒 `10` 泥点。
    - `720p` 每秒 `20` 泥点。
@@ -145,7 +145,7 @@
 
 - 前端提交到 `POST /api/editor/character-animations/generations`。
 - 请求必须带上角色图片来源、原始尺寸、动画描述、分辨率、画面比例、帧数和时长。角色图片已经持久化到 OSS 时，`sourceImageSrc` 必须优先传 `objectKey`；只有未持久化的本地临时图片才允许传 Data URL。
-- 后端使用角色图片作为首帧和尾帧参考，模型固定映射到 seedance2.0 对应后端模型。
+- 后端使用角色图片作为首帧和尾帧参考，模型固定映射到 `doubao-seedance-2-0-fast-260128`。
 - 后端路由兼容旧 Data URL 请求并单独放宽 JSON body limit 到 `12MB`，但该限额只作为兼容兜底，不作为新链路默认传大图的方式。
 - 后端 prompt 使用以下固定骨架，并把面板输入追加到 `动作描述：` 后：
 
diff --git a/server-rs/crates/api-server/src/app.rs b/server-rs/crates/api-server/src/app.rs
index 573747d06..082e95566 100644
--- a/server-rs/crates/api-server/src/app.rs
+++ b/server-rs/crates/api-server/src/app.rs
@@ -1484,7 +1484,7 @@ mod tests {
             "frameCount": 32,
             "durationSeconds": 4,
             "priceMudPoints": 40,
-            "model": "seedance2.0"
+            "model": "seedance2.0-fast"
         })
         .to_string();
         assert!(request_body.len() > 2 * 1024 * 1024);
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 26ee14cc0..d2b9b6fae 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -63,6 +63,7 @@ use crate::{
 use tokio::time::sleep;
 
 const CHARACTER_ANIMATION_MODEL: &str = "doubao-seedance-2-0-fast-260128";
+const SEEDANCE_2_STANDARD_MODEL: &str = "doubao-seedance-2-0-260128";
 const CHARACTER_ANIMATION_ASSET_KIND: &str = "character_animation";
 const CHARACTER_ANIMATION_REFERENCE_ASSET_KIND: &str = "character_animation_reference_video";
 const CHARACTER_WORKFLOW_CACHE_ASSET_KIND: &str = "character_workflow_cache";
@@ -85,7 +86,7 @@ const FIXED_ARK_CHARACTER_VIDEO_RESOLUTION: &str = "480p";
 const FIXED_ARK_CHARACTER_VIDEO_RATIO: &str = "1:1";
 const FIXED_ARK_CHARACTER_VIDEO_DURATION_SECONDS: u32 = 4;
 const ARK_VIDEO_TASK_POLL_INTERVAL_MS: u64 = 5_000;
-const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0";
+const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0-fast";
 const EDITOR_CHARACTER_ANIMATION_ASSET_KIND: &str = "editor_character_animation";
 const EDITOR_CHARACTER_ANIMATION_PROMPT_PREFIX: &str = "生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为纯绿色绿幕，只作为抠像底色，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。\n动作描述：";
 const EDITOR_VIDEO_ASSET_KIND: &str = "editor_video";
@@ -2317,7 +2318,7 @@ fn normalize_editor_character_animation_request(
     }
     if payload.model.trim() != EDITOR_CHARACTER_ANIMATION_MODEL {
         return Err(editor_character_animation_bad_request(
-            "model 必须固定为 seedance2.0。",
+            "model 必须固定为 seedance2.0-fast。",
         ));
     }
     let (frame_width, frame_height) = resolve_editor_character_animation_frame_size(
@@ -2376,13 +2377,13 @@ fn require_editor_character_animation_settings(
                 "reason": "ARK_CHARACTER_VIDEO_API_KEY 未配置",
             }))
         })?;
-    // 中文注释：画板角色动画入口产品侧固定为 seedance2.0，不继承通用角色视频环境模型覆盖。
+    // 中文注释：画板角色动画入口产品侧固定为 Seedance 2.0 Fast，不继承通用角色视频环境模型覆盖。
     Ok(EditorCharacterAnimationSettings {
         ark: ArkVideoSettings {
             base_url: base_url.to_string(),
             api_key: api_key.to_string(),
             request_timeout_ms: state.config.ark_character_video_request_timeout_ms.max(1),
-            model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
+            model: CHARACTER_ANIMATION_MODEL.to_string(),
         },
         resolution: request.resolution.clone(),
         ratio: request.ratio.clone(),
@@ -2447,7 +2448,9 @@ fn normalize_editor_video_model(value: &str) -> Result<&'static str, AppError> {
 
 fn resolve_editor_video_provider_model(model: &str) -> &str {
     match model {
-        // 中文注释：Seedance 2.0 Fast 复用平台已有 fast seedance 上游模型；标准版按产品 ID 透传。
+        // 中文注释：Seedance 2.0 与 Seedance 2.0 Fast 必须映射到不同上游模型，避免生成视频误把标准版发到 fast 模型。
+        EDITOR_VIDEO_MODEL_SEEDANCE_2 => SEEDANCE_2_STANDARD_MODEL,
+        // 中文注释：Seedance 2.0 Fast 继续复用平台已有 fast seedance 上游模型。
         EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST => CHARACTER_ANIMATION_MODEL,
         _ => model,
     }
@@ -4237,6 +4240,7 @@ struct PublishedAnimationAction {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use crate::AppConfig;
 
     #[test]
     fn parse_video_data_url_accepts_mp4_payload() {
@@ -4408,6 +4412,37 @@ mod tests {
         assert_eq!(normalized.ratio, "3:4");
     }
 
+    #[test]
+    fn editor_character_animation_uses_fast_seedance_provider_model() {
+        let config = AppConfig {
+            ark_character_video_base_url: "https://ark.example.com/api/v3".to_string(),
+            ark_character_video_api_key: Some("ark-key".to_string()),
+            ark_character_video_request_timeout_ms: 420_000,
+            ..AppConfig::default()
+        };
+        let state = AppState::new(config).expect("state should build");
+        let request =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                source_layer_id: "layer-hero".to_string(),
+                source_image_src: "/generated-characters/hero/master.png".to_string(),
+                source_width: 1024,
+                source_height: 1024,
+                prompt_text: "待机呼吸".to_string(),
+                resolution: "480p".to_string(),
+                ratio: "same".to_string(),
+                frame_count: 32,
+                duration_seconds: 4,
+                price_mud_points: 40,
+                model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
+            })
+            .expect("editor request should normalize");
+
+        let settings = require_editor_character_animation_settings(&state, &request)
+            .expect("settings should normalize");
+
+        assert_eq!(settings.ark.model, CHARACTER_ANIMATION_MODEL);
+    }
+
     #[test]
     fn editor_character_animation_rejects_invalid_frame_duration_pair() {
         let error =
@@ -4496,6 +4531,25 @@ mod tests {
         assert_eq!(normalized.height, 720);
     }
 
+    #[test]
+    fn editor_video_seedance_standard_uses_non_fast_seedance_model() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "生成更稳定的电影感镜头。".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "720p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 80,
+        })
+        .expect("seedance standard request should normalize");
+
+        assert_eq!(normalized.model, EDITOR_VIDEO_MODEL_SEEDANCE_2);
+        assert_eq!(normalized.provider_model, "doubao-seedance-2-0-260128");
+        assert_ne!(normalized.provider_model, CHARACTER_ANIMATION_MODEL);
+    }
+
     #[test]
     fn editor_video_rejects_price_mismatch() {
         let error = normalize_editor_video_request(EditorVideoGenerateRequest {
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index a07cc8f85..8438d64a2 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -902,14 +902,14 @@ mod tests {
             frame_count: 48,
             duration_seconds: 6,
             price_mud_points: 120,
-            model: "seedance2.0".to_string(),
+            model: "seedance2.0-fast".to_string(),
         })
         .expect("request should serialize");
 
         assert_eq!(payload["sourceLayerId"], json!("layer-1"));
         assert_eq!(payload["sourceImageSrc"], json!("/generated-characters/hero/master.png"));
         assert_eq!(payload["priceMudPoints"], json!(120));
-        assert_eq!(payload["model"], json!("seedance2.0"));
+        assert_eq!(payload["model"], json!("seedance2.0-fast"));
     }
 
     #[test]
@@ -917,7 +917,7 @@ mod tests {
         let payload = serde_json::to_value(EditorCharacterAnimationGenerateResponse {
             ok: true,
             task_id: "task-1".to_string(),
-            model: "seedance2.0".to_string(),
+            model: "seedance2.0-fast".to_string(),
             prompt: "生成游戏角色动画".to_string(),
             preview_video_path: "/generated-character-drafts/editor/layer/preview.mp4".to_string(),
             frames: vec![EditorCharacterAnimationFramePayload {
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
index a4d9a5adc..4ad3bd7ab 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
@@ -199,7 +199,7 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
   it('renders completed frame count and failed error state', () => {
     const result = {
       taskId: 'task-a',
-      model: 'seedance2.0' as const,
+      model: 'seedance2.0-fast' as const,
       prompt: '行走动作',
       previewVideoPath: '/preview.mp4',
       frames: [],
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 7e0b4ab2d..1d609540c 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -1935,7 +1935,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     generateEditorCharacterAnimationMock.mockResolvedValueOnce({
       taskId: 'character-animation-task-1',
-      model: 'seedance2.0',
+      model: 'seedance2.0-fast',
       prompt: '生成游戏角色动画\n动作描述：\n待机',
       previewVideoPath: '/generated-character-drafts/editor/preview.mp4',
       frames: Array.from({ length: 48 }, (_, index) => ({
@@ -2049,7 +2049,7 @@ describe('ImageCanvasEditorView generation integration', () => {
         frameCount: 48,
         durationSeconds: 6,
         priceMudPoints: 120,
-        model: 'seedance2.0',
+        model: 'seedance2.0-fast',
       }),
     );
     expect(
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 736a7ba28..52930553a 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -261,7 +261,7 @@ describe('ImageCanvasGenerationComposerView', () => {
         status: 'idle',
         composerOpen: true,
         generationReferences: [],
-        videoModel: 'seedance2.0',
+        videoModel: 'seedance2.0-fast',
         videoAspectRatio: '16:9',
         videoDurationSeconds: 4,
         videoResolution: '480p',
@@ -299,7 +299,7 @@ describe('ImageCanvasGenerationComposerView', () => {
         status: 'idle',
         composerOpen: true,
         generationReferences: [],
-        videoModel: 'seedance2.0',
+        videoModel: 'seedance2.0-fast',
         videoAspectRatio: '16:9',
         videoDurationSeconds: 4,
         videoResolution: '480p',
@@ -326,7 +326,7 @@ describe('ImageCanvasGenerationComposerView', () => {
       within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }),
     ).toBeTruthy();
     expect(
-      within(panel).getByRole('button', { name: '模型 Seedance 2.0' }),
+      within(panel).getByRole('button', { name: '模型 Seedance 2.0 Fast' }),
     ).toBeTruthy();
     expect(within(panel).getByRole('button', { name: '生成视频' }).textContent).toBe(
       '生成40泥点',
@@ -351,7 +351,7 @@ describe('ImageCanvasGenerationComposerView', () => {
       '生成100泥点',
     );
 
-    fireEvent.click(screen.getByRole('button', { name: '模型 Seedance 2.0' }));
+    fireEvent.click(screen.getByRole('button', { name: '模型 Seedance 2.0 Fast' }));
     const modelPanel = screen.getByRole('menu', { name: '视频模型选项' });
     expect(within(modelPanel).queryByRole('button', { name: /Veo/i })).toBeNull();
     fireEvent.click(within(modelPanel).getByRole('button', { name: 'Kling 3.0' }));
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 888e2afee..a9b49e8b0 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -146,7 +146,7 @@ describe('ImageCanvasGenerationDialogModel', () => {
         status: 'idle',
         composerOpen: true,
         generationReferences: [],
-        videoModel: 'seedance2.0',
+        videoModel: 'seedance2.0-fast',
         videoAspectRatio: '16:9',
         videoResolution: '480p',
         videoDurationSeconds: 4,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 8619c627b..b43f6d4e4 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -17,6 +17,7 @@ import {
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_IMAGE_MODEL,
   DEFAULT_SPEC_FORM_VALUES,
+  DEFAULT_VIDEO_MODEL,
   EDITOR_IMAGE_DIMENSION_OPTIONS,
   EDITOR_VIDEO_MODEL_OPTIONS,
   ICON_DESCRIPTION_LIMIT,
@@ -203,7 +204,7 @@ export function createVideoGenerationDialogDraft({
     status: 'idle',
     composerOpen: true,
     generationReferences: [],
-    videoModel: EDITOR_VIDEO_MODEL_OPTIONS[0].value,
+    videoModel: DEFAULT_VIDEO_MODEL,
     videoAspectRatio: '16:9',
     videoResolution: '480p',
     videoDurationSeconds: 4,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 34e942e82..38774433e 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -78,7 +78,10 @@ export const EDITOR_IMAGE_DIMENSION_OPTIONS = {
     imageSizes: ['1K', '2K'],
   },
 } as const;
-export const CHARACTER_ANIMATION_MODEL = 'seedance2.0';
+export const VIDEO_MODEL_SEEDANCE_2 = 'seedance2.0';
+export const VIDEO_MODEL_SEEDANCE_2_FAST = 'seedance2.0-fast';
+export const DEFAULT_VIDEO_MODEL = VIDEO_MODEL_SEEDANCE_2_FAST;
+export const CHARACTER_ANIMATION_MODEL = VIDEO_MODEL_SEEDANCE_2_FAST;
 export const CHARACTER_ANIMATION_ACTION_PROMPTS = [
   { label: '待机', text: '待机动作，轻微呼吸起伏。' },
   { label: '行走', text: '循环行走动作，步伐稳定。' },
@@ -107,8 +110,8 @@ export const CHARACTER_ANIMATION_DURATION_OPTIONS = [
 export const VIDEO_FRAME_ORIGINAL_SIZE = { width: 1280, height: 720 };
 export const VIDEO_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
 export const EDITOR_VIDEO_MODEL_OPTIONS = [
-  { label: 'Seedance 2.0', value: 'seedance2.0' },
-  { label: 'Seedance 2.0 Fast', value: 'seedance2.0-fast' },
+  { label: 'Seedance 2.0 Fast', value: VIDEO_MODEL_SEEDANCE_2_FAST },
+  { label: 'Seedance 2.0', value: VIDEO_MODEL_SEEDANCE_2 },
   { label: 'Kling 3.0', value: 'kling3.0' },
   { label: 'Kling 3.0 Omni', value: 'kling3.0-omni' },
 ] as const;
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index 56b4d1f17..a5000712d 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -37,11 +37,14 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
       nextGeneratedIndex: 3,
     });
 
-    expect(plan).toEqual({
+    expect(plan).toMatchObject({
       kind: 'image',
       normalizedPrompt: '一张发光主视觉',
       input: {
         prompt: '一张发光主视觉',
+        model: 'gemini-3.1-flash-image-preview',
+        aspectRatio: '1:1',
+        imageSize: '1K',
       },
       result: {
         generationInputs: {
@@ -49,6 +52,7 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
           references: [],
         },
       },
+      rememberImageModel: 'gemini-3.1-flash-image-preview',
     });
   });
 
@@ -326,7 +330,64 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         frameCount: 48,
         durationSeconds: 6,
         priceMudPoints: 120,
+        model: 'seedance2.0-fast',
+      },
+    });
+  });
+
+  it('builds video generation plans with seedance fast as the fallback model', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'video',
+        prompt: '  角色绕场一周  ',
+        status: 'idle',
+        generationReferences: [],
+        videoResolution: '480p',
+        videoDurationSeconds: 4,
+      },
+      layers: [],
+      nextGeneratedIndex: 3,
+    });
+
+    expect(plan).toMatchObject({
+      kind: 'video',
+      normalizedPrompt: '角色绕场一周',
+      input: {
+        model: 'seedance2.0-fast',
+        priceMudPoints: 40,
+      },
+      result: {
+        title: '生成视频 3',
+      },
+    });
+  });
+
+  it('builds video generation plans with explicit seedance standard model', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'video',
+        prompt: '  生成电影感开场动画  ',
+        status: 'idle',
+        videoModel: 'seedance2.0',
+        videoResolution: '720p',
+        videoDurationSeconds: 5,
+      },
+      layers: [],
+      nextGeneratedIndex: 7,
+    });
+
+    expect(plan).toMatchObject({
+      kind: 'video',
+      normalizedPrompt: '生成电影感开场动画',
+      input: {
+        prompt: '生成电影感开场动画',
         model: 'seedance2.0',
+        resolution: '720p',
+        durationSeconds: 5,
+        priceMudPoints: 100,
+      },
+      result: {
+        title: '生成视频 7',
       },
     });
   });
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 04611cde8..570db673a 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -15,6 +15,7 @@ import {
   DEFAULT_IMAGE_MODEL,
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_SPEC_FORM_VALUES,
+  DEFAULT_VIDEO_MODEL,
   SPEC_GENERATION_SIZE,
   SPEC_TYPE_LABEL,
   buildIconGenerationInputs,
@@ -200,7 +201,7 @@ export function buildImageGenerationSubmissionPlan({
   if (dialog.mode === 'video') {
     const resolution = dialog.videoResolution ?? '480p';
     const durationSeconds = dialog.videoDurationSeconds ?? 4;
-    const model = dialog.videoModel ?? 'seedance2.0';
+    const model = dialog.videoModel ?? DEFAULT_VIDEO_MODEL;
     return {
       kind: 'video',
       normalizedPrompt,
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index fc18e7649..de2aaf3f7 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -589,7 +589,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
           sourceLayerId: 'character-layer',
           sourceImageSrc: 'generated/character.png',
           promptText: '跑步',
-          model: 'seedance2.0',
+          model: 'seedance2.0-fast',
         }),
       );
     });
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index de787e19e..01c712ce6 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -702,7 +702,7 @@ describe('editorProjectClient', () => {
   it('generates editor character animations through the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       taskId: 'character-animation-1',
-      model: 'seedance2.0',
+      model: 'seedance2.0-fast',
       prompt: '生成游戏角色动画\n动作描述：\n待机',
       previewVideoPath: '/generated-character-drafts/editor/preview.mp4',
       frames: [
@@ -730,7 +730,7 @@ describe('editorProjectClient', () => {
       frameCount: 32,
       durationSeconds: 4,
       priceMudPoints: 40,
-      model: 'seedance2.0',
+      model: 'seedance2.0-fast',
     });
 
     expect(result.taskId).toBe('character-animation-1');
@@ -750,7 +750,7 @@ describe('editorProjectClient', () => {
           frameCount: 32,
           durationSeconds: 4,
           priceMudPoints: 40,
-          model: 'seedance2.0',
+          model: 'seedance2.0-fast',
         }),
       }),
       '生成角色动画失败',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 985bfdfb7..716cfc3d9 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -164,7 +164,7 @@ export type EditorCharacterAnimationGenerationInput = {
   frameCount: EditorCharacterAnimationFrameCount;
   durationSeconds: EditorCharacterAnimationDurationSeconds;
   priceMudPoints: number;
-  model: 'seedance2.0';
+  model: 'seedance2.0-fast';
 };
 
 export type EditorCharacterAnimationFrameResult = {
@@ -176,7 +176,7 @@ export type EditorCharacterAnimationFrameResult = {
 
 export type EditorCharacterAnimationGenerationResult = {
   taskId: string;
-  model: 'seedance2.0';
+  model: 'seedance2.0-fast';
   prompt: string;
   previewVideoPath: string;
   frames: EditorCharacterAnimationFrameResult[];

From 62d9f6bb57356aa7fcc87210db2da482d5dd746d Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Thu, 18 Jun 2026 15:15:54 +0800
Subject: [PATCH 10/16] =?UTF-8?q?=E5=BF=BD=E7=95=A5=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E6=B5=8B=E8=AF=95=E4=BA=A7=E7=89=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

忽略根目录和子目录中的 .playwright-cli 目录

忽略 output/playwright 下的本地截图和 smoke 产物
---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index e61911d59..380c603b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,6 +38,9 @@ temp*build*/
 /target/
 /logs
 /.codegraph/
+/.playwright-cli/
+**/.playwright-cli/
+/output/playwright/
 /server-rs/crates/*/logs/
 .worktrees/
 .rag/

From ac180ecad9518f2ae6077a74b8c097115536bf84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 15:42:17 +0800
Subject: [PATCH 11/16] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=BB=E6=9D=BF?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E9=9F=B3=E4=B9=90=E4=B8=8E=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增画板底部生成音乐入口，支持游戏音效和游戏背景音乐生成面板。

接入编辑器音频生成前后端契约、VectorEngine 请求与 BFF 路由。

补齐音频结果图层、元数据、画布恢复和客户端提交流程。

统一生成类面板 Lovart 式参数浮层、参考素材入口与相关测试。

更新编辑器音乐生成设计文档和项目长期记忆。
---
 .../shared-memory/decision-log.md             |   8 +
 docs/project-memory/shared-memory/pitfalls.md |   8 +-
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   2 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  18 +-
 ...�编辑器】画板音乐生成入口设计-2026-06-18.md | 109 +++++
 .../src/character_animation_assets.rs         | 326 ++++++++++++++-
 .../api-server/src/modules/play_flow.rs       |  26 +-
 .../src/vector_engine_audio_generation.rs     |   1 +
 .../generation.rs                             | 217 +++++++++-
 .../vector_engine_audio_generation/tests.rs   |  50 ++-
 server-rs/crates/platform-audio/src/client.rs |  60 ++-
 server-rs/crates/platform-audio/src/lib.rs    |  16 +-
 .../crates/platform-audio/src/request.rs      |  33 +-
 server-rs/crates/platform-audio/src/types.rs  |  13 +
 .../tests/vector_engine_audio.rs              |  39 +-
 .../crates/shared-contracts/src/assets.rs     | 139 ++++++-
 .../common/PlatformFloatingMenu.test.tsx      |  24 +-
 .../common/PlatformFloatingMenu.tsx           |   5 +
 ...CanvasBasicGenerationComposerView.test.tsx |  40 ++
 ...ImageCanvasBasicGenerationComposerView.tsx |  71 ++--
 .../ImageCanvasBottomToolbarView.test.tsx     |   4 +-
 .../ImageCanvasBottomToolbarView.tsx          |   2 +
 ...CanvasCharacterAnimationPanelView.test.tsx |  15 +
 ...ImageCanvasCharacterAnimationPanelView.tsx |  29 +-
 ...asCharacterGenerationComposerView.test.tsx |  28 ++
 ...eCanvasCharacterGenerationComposerView.tsx | 119 +++---
 ...CanvasEditorGenerationIntegration.test.tsx |  66 +++
 .../ImageCanvasEditorModel.test.ts            |  67 +++
 .../image-editor/ImageCanvasEditorModel.ts    |  61 ++-
 .../ImageCanvasEditorShellView.tsx            |  11 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |  23 +-
 .../image-editor/ImageCanvasEditorView.tsx    |   3 +
 .../image-editor/ImageCanvasFileModel.ts      | 122 +++++-
 ...ImageCanvasGenerationComposerView.test.tsx |  92 ++++-
 .../ImageCanvasGenerationComposerView.tsx     | 384 ++++++++++++++++--
 .../ImageCanvasGenerationDialogModel.test.ts  |  37 ++
 .../ImageCanvasGenerationDialogModel.ts       |  69 +++-
 ...eCanvasGenerationImageOptionsView.test.tsx |  28 ++
 .../ImageCanvasGenerationImageOptionsView.tsx |  15 +-
 .../ImageCanvasGenerationLayerModel.test.ts   |  55 +++
 .../ImageCanvasGenerationLayerModel.ts        |  61 +++
 .../ImageCanvasGenerationModel.ts             | 104 ++++-
 ...ageCanvasGenerationSubmissionModel.test.ts | 216 ++++++++++
 .../ImageCanvasGenerationSubmissionModel.ts   | 149 ++++++-
 ...CanvasIconSpritesheetComposerView.test.tsx |  19 +
 ...ImageCanvasIconSpritesheetComposerView.tsx |  87 ++--
 .../ImageCanvasMetadataModalView.tsx          |  12 +-
 .../image-editor/ImageCanvasReferenceSlot.tsx | 115 ++++++
 .../ImageCanvasSpecGenerationPanelView.tsx    | 102 +++--
 .../image-editor/ImageCanvasUploadModel.ts    |  70 ++++
 .../ImageCanvasWorldView.test.tsx             |  21 +
 .../image-editor/ImageCanvasWorldView.tsx     |  46 ++-
 .../useImageCanvasFloatingOptionDismiss.ts    |  60 +++
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  74 +++-
 .../useImageCanvasGenerationSurface.test.tsx  |  36 ++
 .../useImageCanvasGenerationSurface.tsx       |  51 ++-
 .../useImageCanvasGenerationWorkflow.ts       |  35 ++
 .../useImageCanvasUploadWorkflow.test.tsx     | 121 +++++-
 .../useImageCanvasUploadWorkflow.ts           | 272 ++++++++++++-
 src/index.css                                 | 259 ++++++------
 .../image-editor/editorProjectClient.test.ts  | 141 +++++++
 .../image-editor/editorProjectClient.ts       |  96 ++++-
 .../editorReferenceUploadClient.test.ts       | 145 +++++++
 .../editorReferenceUploadClient.ts            | 139 +++++++
 64 files changed, 4455 insertions(+), 411 deletions(-)
 create mode 100644 docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
 create mode 100644 src/components/image-editor/ImageCanvasReferenceSlot.tsx
 create mode 100644 src/components/image-editor/useImageCanvasFloatingOptionDismiss.ts
 create mode 100644 src/services/image-editor/editorReferenceUploadClient.test.ts
 create mode 100644 src/services/image-editor/editorReferenceUploadClient.ts

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 2b602af5d..8e118cfda 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-06-18 图片画布生成音乐入口作为音频图层接入
+
+- 背景：图片画布底部生成工具需要补齐游戏音效和游戏背景音乐生成，既要复用现有 Lovart 式画布生成器快照、占位避让和持久化，又不能把音频能力并入图片素材库或视觉小说专用音频开关。
+- 决策：`/editor/canvas` 新增底部 `生成音乐` 入口，点击后先弹出“生成游戏音效 / 生成游戏背景音乐”选项框，再分别创建 `audio-sound-effect` 或 `audio-background-music` 生成器；生成结果作为 `mediaType="audio"` 的画布音频卡保存，`assetKind` 分别为 `sound-effect` / `background-music`。音效请求字段固定映射 `sound/type/tempo`，背景音乐请求字段固定映射 `gpt_description_prompt` 且 `make_instrumental=true`。
+- 影响范围：图片画布生成工作流、前端 editorProjectClient、`shared-contracts`、`platform-audio`、`api-server` 编辑器音频 BFF、图片画布技术方案和音乐生成入口设计文档。
+- 验证方式：运行编辑器生成入口 / 提交 / 音频图层相关前端测试，`platform-audio` 请求体测试，`shared-contracts` editor audio 序列化测试，`api-server` editor audio 归一化测试，并执行 `npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/【编辑器】画板音乐生成入口设计-2026-06-18.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 2026-06-17 图片画布生成占位统一避让落点
 
 - 背景：图片画布的普通图片、规范、角色、图标、视频和 UI 设计图生成入口都会先在画布中新建“即将生成”的占位图；若各入口直接使用当前视口中心，容易压住已有图片或已有生成占位，Lovart 式连续创作体验不稳定。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 26ca81482..7fdca4f0d 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -50,10 +50,10 @@
 ## 图片编辑器生成类菜单要挂到页面级 portal
 
 - 现象：底部 `生成规范` 菜单、角色面板里的 `角色形象规范` 来源菜单点击后像没有弹出来，实际被按钮所在的局部滚动容器挡住了。
-- 原因：菜单仍然渲染在底部工具栏或参考图横向滚动行内部，父容器带 `overflow`，弹层无法越出边界。
-- 处理：这类轻量菜单统一用页面级 fixed portal 挂到 `document.body`，位置根据触发按钮的 `getBoundingClientRect()` 计算；底部 AI 工具栏在生成面板打开时仍保持可见，不要整栏隐藏。
-- 验证：测试断言菜单不包含在底部工具栏 / 参考图行里，并且生成面板打开时底部 `AI画布工具栏` 仍存在。
-- 关联：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/ImageCanvasEditorView.test.tsx`。
+- 原因：菜单仍然渲染在底部工具栏或参考图横向滚动行内部，父容器带 `overflow`，弹层无法越出边界；即便挂到 portal，如果菜单根节点的 `pointerdown` 继续冒泡到画布视口，也会先触发画布失焦并卸载面板，导致菜单项 `click` 前消失。
+- 处理：这类轻量菜单统一用页面级 fixed portal 挂到 `document.body`，位置根据触发按钮的 `getBoundingClientRect()` 计算；`PlatformFloatingMenu` 根节点必须阻止 `pointerdown` 冒泡，避免画布清空当前生成面板；底部 AI 工具栏在生成面板打开时仍保持可见，不要整栏隐藏。
+- 验证：测试断言菜单不包含在底部工具栏 / 参考图行里，并且生成面板打开时底部 `AI画布工具栏` 仍存在；规范参考图来源菜单应能通过 portal 点击“从画布中选择 / 上传图片”并写回规范参考图。
+- 关联：`src/components/common/PlatformFloatingMenu.tsx`、`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`。
 
 ## 图片编辑器规范图片面板不要脱离统一生成 shell
 
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 828ef80bc..2019d717e 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -88,7 +88,7 @@
 - 拖拽图片接近其它图片边缘或中心时显示吸附线，并保存吸附后的最终布局。
 - 生成工具点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
 - 生成器快照刷新后必须恢复；待生成、生成中、失败和已生成后跟随成品图层的生成器都不能因为刷新丢失输入、参数、参考图或占位框位置。
-- 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色形象规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。
+- 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色形象规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。所有生成面板参考图槽位统一为方形图标组件；角色形象规范槽位只显示规范 logo 和 `角色规范` 四字，绑定来源标题只保留给可访问名称、悬浮 title 和图片信息。已有参考图槽位只有在 hover / focus 时显示右上角 `×`，点击后只解绑对应参考图。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
 - 修改生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index be2342683..c1a81aef0 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -18,21 +18,23 @@
 ## 统一布局
 
 1. 参考图区域永远位于面板第一行。
-2. 参考图使用统一参考图卡片：
+2. 参考图使用统一方形参考图图标组件，不再使用横向长卡：
    - 普通参考图：灰蓝色图片图标。
-   - 规范参考图：紫色剪贴板图标。
+   - 规范参考图：紫色规范 logo。
    - 图标素材规范：绿色图标图标。
    - UI 图标规范：琥珀色图标图标。
    - 视频参考图：深色视频图标。
-3. 参考图卡片尽量少文字；必要文字写在图标块内或短标签内，不写规则说明。
-4. 普通参考图支持连续追加：已有图缩略图后始终保留一个 `+` 入口。点击入口只弹出“从画布中选择 / 上传图片”来源选项，不再直接打开系统文件选择器；生成图片、生成视频、角色常规参考图等同类参考图入口都遵循同一交互。
-5. 单文本输入面板不显示文本框标题，用问题式 placeholder：
+3. 角色形象规范参考图组件只展示一个方形参考图图标；图标内上方是规范 logo，下方固定短标 `角色规范`，不再展示绑定状态、来源说明或长标题。已有绑定图片的原始标题只作为可访问名称、悬浮 title 和图片信息回看使用。
+4. 参考图图标尽量少文字；必要文字写在图标块内或短标签内，不写规则说明。
+5. 已有参考图在鼠标悬停或键盘聚焦到对应参考图槽位时，右上角显示一个 `×` 删除按钮；鼠标不在槽位上时不显示。点击 `×` 只移除该参考图绑定，不触发来源菜单、不删除画布图片。
+6. 普通参考图支持连续追加：已有图缩略图后始终保留一个 `+` 入口。点击入口只弹出“从画布中选择 / 上传图片”来源选项，不再直接打开系统文件选择器；生成图片、生成视频、角色常规参考图等同类参考图入口都遵循同一交互。
+7. 单文本输入面板不显示文本框标题，用问题式 placeholder：
    - 生成图片：`今天想生成什么画面？`
    - 生成角色：`你希望角色如何设计？`
    - 生成 UI：`你希望这个 UI 长什么样？`
    - 生成视频：`你希望生成什么视频？`
-6. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范、图标素材多描述。
-7. 生成规范下的角色形象规范、UI素材规范、图标素材规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
+8. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范、图标素材多描述。
+9. 生成规范下的角色形象规范、UI素材规范、图标素材规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
 
 ## 参数交互
 
@@ -47,6 +49,7 @@
 - 模型选项框和生成按钮位于右下角。
 - 点击后以页面级浮层向上弹出独立选项面板；父级面板隐藏或销毁时，选项面板同步销毁。
 - 点击选项只更新字段和选中样式，不收起选项面板；再次点击当前参数按钮可收起。
+- 选项面板打开后，点击父级生成面板内任意非选项框、非触发按钮区域必须收起；点击选项面板自身仍保持打开，便于连续修改。
 - 弹出面板内可分组展示字段，点击某个选项只更新当前字段和选中样式，方便连续修改。
 - 模型子面板每行固定一个模型，不用方框包裹模型名；模型名不换行，前置对应模型类型图标，选中项在模型名后用对号标记。
 - 比例选项卡片内展示对应比例的线框。
@@ -115,6 +118,7 @@
 ## 验收
 
 - 所有生成类面板首行都是参考图区域。
+- 参考图槽位统一是方形图标；角色形象规范槽位显示规范 logo 和 `角色规范` 四字，悬停已有参考图时才显示右上角删除 `×`。
 - 比例 / 尺寸 / 模型不再平铺全部选项；比例与尺寸合并为左下角当前值按钮，模型与生成按钮位于右下角。
 - 单文本输入面板不显示字段标题，placeholder 是问题式文案。
 - 多文本输入面板字段标题和边界仍清晰。
diff --git a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
new file mode 100644
index 000000000..6042ce30e
--- /dev/null
+++ b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
@@ -0,0 +1,109 @@
+# 画板音乐生成入口设计
+
+日期：`2026-06-18`
+
+## 范围
+
+本次只在 `/editor/canvas` 图片画布编辑器内新增底部 `生成音乐` 入口，用于生成完整游戏音效或游戏背景音乐。该入口属于画板生成类工具，不新增平台玩法入口、不进入作品发布链路，也不修改现有视觉小说音频生成开关。
+
+## 入口与交互
+
+1. 底部 AI 画布工具栏新增 `生成音乐`。
+2. 点击 `生成音乐` 后先弹出页面级 fixed 选项框，选项为：
+   - `生成游戏音效`
+   - `生成游戏背景音乐`
+3. 选择某一项后创建独立 `generation-dialog` 画布生成对象，并通过现有 placement 模型避让已有图层和占位。
+4. 面板 UI 复用 `生成角色形象` 的紧凑结构：上方为字段区，底部为参数 / 生成按钮区，不写规则说明类文案。
+5. 生成中隐藏设置面板，只保留画布中的音频生成占位；失败后恢复面板并展示短错误。
+
+## 面板字段
+
+### 生成游戏音效
+
+- `sound`：用户输入的音效提示词。
+- `type`：合成选项，第一版以前端下拉 / 子面板保存字符串。
+- `tempo`：合成选项，第一版以前端下拉 / 子面板保存字符串。
+- 提交时映射到 VectorEngine 游戏音效接口字段：`sound`、`type`、`tempo`。
+
+### 生成游戏背景音乐
+
+- `gpt_description_prompt`：用户输入的背景音乐提示词。
+- `make_instrumental`：固定传 `true`，不在 UI 中展示为可改字段。
+- 提交时映射到 VectorEngine 游戏背景音乐接口字段：`gpt_description_prompt`、`make_instrumental: true`。
+
+## 画布数据
+
+- 生成器继续保存到画布 layout JSON 的 `itemType: "generation-dialog"`，不新增表。
+- 新增生成器模式：
+  - `audio-sound-effect`
+  - `audio-background-music`
+- 新增结果图层媒体类型 `mediaType="audio"`。
+- 新增素材类型：
+  - `assetKind="sound-effect"`
+  - `assetKind="background-music"`
+- 音频结果以小型音频卡加入画布，卡片内使用 `<audio controls>` 播放；音频结果当前只保存为画布资源，不进入图片素材库。
+- 元数据弹窗按音频显示 `音频信息` / `音频类型`，生成输入快照只展示用户面板字段。
+
+## 前端提交契约
+
+前端新增两个 BFF client：
+
+```ts
+POST /api/editor/audios/sound-effects/generations
+{
+  sound: string,
+  type: string,
+  tempo: string,
+  priceMudPoints: 10
+}
+```
+
+```ts
+POST /api/editor/audios/background-music/generations
+{
+  gptDescriptionPrompt: string,
+  makeInstrumental: true,
+  priceMudPoints: 5
+}
+```
+
+统一响应：
+
+```ts
+{
+  ok: true,
+  audioSrc: string,
+  width: 420,
+  height: 120,
+  sourceType: "generated",
+  prompt: string,
+  actualPrompt?: string | null,
+  model: string,
+  provider: string,
+  taskId: string,
+  priceMudPoints: number,
+  audioKind: "sound-effect" | "background-music"
+}
+```
+
+## 后端实现
+
+- 在 `shared-contracts/src/assets.rs` 增加编辑器音频请求 / 响应 DTO。
+- 在 `platform-audio` 增加编辑器专用 body builder 和 submit 函数：
+  - 背景音乐 body 使用 `gpt_description_prompt`、`make_instrumental`。
+  - 音效 body 使用 `sound`、`type`、`tempo`。
+- 在 `api-server` 增加编辑器音频 BFF：
+  - `/api/editor/audios/sound-effects/generations`
+  - `/api/editor/audios/background-music/generations`
+- BFF 复用现有 `vector_engine_audio_generation` 的任务轮询、下载、OSS 持久化和计费包装；音效 10 泥点，背景音乐 5 泥点。
+
+## 验收
+
+- 底部工具栏显示 `生成音乐`。
+- 点击 `生成音乐` 只出现选项框，不立刻创建占位。
+- 点击 `生成游戏音效` 后出现音效面板，字段为 `sound`、`type`、`tempo`。
+- 点击 `生成游戏背景音乐` 后出现背景音乐面板，字段为 `gpt_description_prompt`，不展示 `make_instrumental`。
+- 音效提交到 `/api/editor/audios/sound-effects/generations`，背景音乐提交到 `/api/editor/audios/background-music/generations`。
+- 成功后画布新增音频卡，能通过 `<audio controls>` 播放。
+- 刷新后 layout 能恢复音频生成器和音频图层。
+
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index d2b9b6fae..32753c5b8 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -98,6 +98,11 @@ const EDITOR_VIDEO_MODEL_KLING_3: &str = "kling3.0";
 const EDITOR_VIDEO_MODEL_KLING_3_OMNI: &str = "kling3.0-omni";
 const EDITOR_VIDEO_MODEL_VEO_3_1: &str = "veo3.1";
 const EDITOR_VIDEO_MODEL_VEO_3_1_FAST: &str = "veo3.1-fast";
+const EDITOR_VIDEO_REFERENCE_IMAGE_LIMIT: usize = 9;
+const EDITOR_VIDEO_REFERENCE_VIDEO_LIMIT: usize = 3;
+const EDITOR_VIDEO_REFERENCE_AUDIO_LIMIT: usize = 3;
+const EDITOR_VIDEO_REFERENCE_REQUEST_LIMIT_BYTES: usize = 64 * 1024 * 1024;
+const EDITOR_VIDEO_REFERENCE_READ_EXPIRE_SECONDS: u64 = 60 * 60;
 
 const BUILT_IN_MOTION_TEMPLATES: [MotionTemplate; 4] = [
     MotionTemplate {
@@ -1448,7 +1453,7 @@ async fn request_editor_video_preview(
     request: &NormalizedEditorVideoRequest,
 ) -> Result<GeneratedAnimationPreview, AppError> {
     let upstream_task_id =
-        create_editor_text_to_video_task(http_client, settings, request).await?;
+        create_editor_text_to_video_task(state, http_client, settings, request).await?;
     let video_url =
         wait_for_ark_content_generation_task(http_client, &settings.ark, upstream_task_id.as_str())
             .await?;
@@ -1466,10 +1471,12 @@ async fn request_editor_video_preview(
 }
 
 async fn create_editor_text_to_video_task(
+    state: &AppState,
     http_client: &reqwest::Client,
     settings: &EditorVideoSettings,
     request: &NormalizedEditorVideoRequest,
 ) -> Result<String, AppError> {
+    let content = build_editor_video_ark_content(state, request)?;
     let response = http_client
         .post(format!("{}/contents/generations/tasks", settings.ark.base_url))
         .header(
@@ -1479,16 +1486,11 @@ async fn create_editor_text_to_video_task(
         .header(reqwest::header::CONTENT_TYPE, "application/json")
         .json(&json!({
             "model": request.provider_model,
-            "content": [
-                {
-                    "type": "text",
-                    "text": request.prompt,
-                }
-            ],
+            "content": content,
             "resolution": request.resolution,
             "ratio": request.aspect_ratio,
             "duration": request.duration_seconds,
-            "mode": "std",
+            "generate_audio": false,
             "watermark": false,
         }))
         .send()
@@ -2417,6 +2419,12 @@ fn normalize_editor_video_request(
             "priceMudPoints 与分辨率和时长不一致，应为 {expected_price}。"
         )));
     }
+    let references = normalize_editor_video_references(
+        model,
+        payload.reference_image_srcs,
+        payload.reference_video_srcs,
+        payload.reference_audio_srcs,
+    )?;
     let (width, height) = resolve_editor_video_size(aspect_ratio, resolution);
 
     Ok(NormalizedEditorVideoRequest {
@@ -2429,9 +2437,228 @@ fn normalize_editor_video_request(
         price_mud_points: expected_price,
         width,
         height,
+        reference_image_srcs: references.reference_image_srcs,
+        reference_video_srcs: references.reference_video_srcs,
+        reference_audio_srcs: references.reference_audio_srcs,
     })
 }
 
+fn build_editor_video_ark_content(
+    state: &AppState,
+    request: &NormalizedEditorVideoRequest,
+) -> Result<Vec<Value>, AppError> {
+    let mut content = Vec::new();
+    if !request.prompt.trim().is_empty() {
+        content.push(json!({
+            "type": "text",
+            "text": request.prompt,
+        }));
+    }
+    let reference_image_urls = resolve_editor_video_reference_urls(
+        state,
+        request.reference_image_srcs.as_slice(),
+        "参考图片",
+    )?;
+    let reference_video_urls = resolve_editor_video_reference_urls(
+        state,
+        request.reference_video_srcs.as_slice(),
+        "参考视频",
+    )?;
+    let reference_audio_urls = resolve_editor_video_reference_urls(
+        state,
+        request.reference_audio_srcs.as_slice(),
+        "参考音频",
+    )?;
+    content.extend(reference_image_urls.iter().map(|url| {
+        json!({
+            "type": "image_url",
+            "image_url": { "url": url },
+            "role": "reference_image",
+        })
+    }));
+    content.extend(reference_video_urls.iter().map(|url| {
+        json!({
+            "type": "video_url",
+            "video_url": { "url": url },
+            "role": "reference_video",
+        })
+    }));
+    content.extend(reference_audio_urls.iter().map(|url| {
+        json!({
+            "type": "audio_url",
+            "audio_url": { "url": url },
+            "role": "reference_audio",
+        })
+    }));
+    Ok(content)
+}
+
+fn resolve_editor_video_reference_urls(
+    state: &AppState,
+    sources: &[String],
+    label: &str,
+) -> Result<Vec<String>, AppError> {
+    sources
+        .iter()
+        .map(|source| resolve_editor_video_reference_url(state, source.as_str(), label))
+        .collect()
+}
+
+fn resolve_editor_video_reference_url(
+    state: &AppState,
+    source: &str,
+    label: &str,
+) -> Result<String, AppError> {
+    let value = source.trim();
+    if value.starts_with("data:") || value.starts_with("asset://") {
+        return Ok(value.to_string());
+    }
+    if value.starts_with("http://") || value.starts_with("https://") {
+        return Ok(value.to_string());
+    }
+
+    let object_key = value.trim_start_matches('/');
+    if LegacyAssetPrefix::from_object_key(object_key).is_none() {
+        return Err(editor_video_bad_request(format!(
+            "{label}必须是官方支持的公网 URL、素材 ID、data URL 或画板资源路径。"
+        )));
+    }
+    let oss_client = state.oss_client().ok_or_else(|| {
+        AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+            "provider": "aliyun-oss",
+            "reason": "OSS 未完成环境变量配置，无法为画板参考素材生成可访问 URL。",
+        }))
+    })?;
+    let signed = oss_client
+        .sign_get_object_url(OssSignedGetObjectUrlRequest {
+            object_key: object_key.to_string(),
+            expire_seconds: Some(EDITOR_VIDEO_REFERENCE_READ_EXPIRE_SECONDS),
+        })
+        .map_err(|error| map_oss_error(error, "aliyun-oss"))?;
+    Ok(signed.signed_url)
+}
+
+struct NormalizedEditorVideoReferences {
+    reference_image_srcs: Vec<String>,
+    reference_video_srcs: Vec<String>,
+    reference_audio_srcs: Vec<String>,
+}
+
+fn normalize_editor_video_references(
+    model: &str,
+    image_srcs: Vec<String>,
+    video_srcs: Vec<String>,
+    audio_srcs: Vec<String>,
+) -> Result<NormalizedEditorVideoReferences, AppError> {
+    let is_seedance =
+        model == EDITOR_VIDEO_MODEL_SEEDANCE_2 || model == EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST;
+    let image_srcs = normalize_reference_srcs(image_srcs);
+    let video_srcs = normalize_reference_srcs(video_srcs);
+    let audio_srcs = normalize_reference_srcs(audio_srcs);
+
+    if !is_seedance {
+        if image_srcs.is_empty() && video_srcs.is_empty() && audio_srcs.is_empty() {
+            return Ok(NormalizedEditorVideoReferences {
+                reference_image_srcs: Vec::new(),
+                reference_video_srcs: Vec::new(),
+                reference_audio_srcs: Vec::new(),
+            });
+        }
+        return Err(editor_video_bad_request(
+            "参考图片、参考视频和参考音频仅支持 Seedance 2.0 系列模型。",
+        ));
+    }
+    if image_srcs.len() > EDITOR_VIDEO_REFERENCE_IMAGE_LIMIT {
+        return Err(editor_video_bad_request("参考图片最多 9 张。"));
+    }
+    if video_srcs.len() > EDITOR_VIDEO_REFERENCE_VIDEO_LIMIT {
+        return Err(editor_video_bad_request("参考视频最多 3 个。"));
+    }
+    if audio_srcs.len() > EDITOR_VIDEO_REFERENCE_AUDIO_LIMIT {
+        return Err(editor_video_bad_request("参考音频最多 3 个。"));
+    }
+    if !audio_srcs.is_empty() && image_srcs.is_empty() && video_srcs.is_empty() {
+        return Err(editor_video_bad_request(
+            "参考音频必须搭配参考图片或参考视频。",
+        ));
+    }
+
+    for src in &image_srcs {
+        validate_editor_video_reference_src(
+            src,
+            "参考图片",
+            &["data:image/", "http://", "https://", "asset://"],
+            true,
+            "对应媒体 data URL",
+        )?;
+    }
+    for src in &video_srcs {
+        validate_editor_video_reference_src(
+            src,
+            "参考视频",
+            &["http://", "https://", "asset://"],
+            true,
+            "URL、素材 ID 或画板资源路径",
+        )?;
+    }
+    for src in &audio_srcs {
+        validate_editor_video_reference_src(
+            src,
+            "参考音频",
+            &["data:audio/", "http://", "https://", "asset://"],
+            true,
+            "对应媒体 data URL",
+        )?;
+    }
+
+    let request_bytes = image_srcs
+        .iter()
+        .chain(video_srcs.iter())
+        .chain(audio_srcs.iter())
+        .map(String::len)
+        .sum::<usize>();
+    if request_bytes > EDITOR_VIDEO_REFERENCE_REQUEST_LIMIT_BYTES {
+        return Err(editor_video_bad_request("参考文件总请求体不能超过 64MB。"));
+    }
+
+    Ok(NormalizedEditorVideoReferences {
+        reference_image_srcs: image_srcs,
+        reference_video_srcs: video_srcs,
+        reference_audio_srcs: audio_srcs,
+    })
+}
+
+fn normalize_reference_srcs(values: Vec<String>) -> Vec<String> {
+    values
+        .into_iter()
+        .map(|value| value.trim().to_string())
+        .filter(|value| !value.is_empty())
+        .collect()
+}
+
+fn validate_editor_video_reference_src(
+    value: &str,
+    label: &str,
+    allowed_prefixes: &[&str],
+    allow_generated_object_key: bool,
+    format_hint: &str,
+) -> Result<(), AppError> {
+    if allowed_prefixes
+        .iter()
+        .any(|prefix| value.starts_with(prefix))
+    {
+        return Ok(());
+    }
+    if allow_generated_object_key
+        && LegacyAssetPrefix::from_object_key(value.trim_start_matches('/')).is_some()
+    {
+        return Ok(());
+    }
+    Err(editor_video_bad_request(format!(
+        "{label}格式不支持，请使用官方支持的{format_hint}。"
+    )))
+}
+
 fn normalize_editor_video_model(value: &str) -> Result<&'static str, AppError> {
     match value.trim() {
         EDITOR_VIDEO_MODEL_SEEDANCE_2 => Ok(EDITOR_VIDEO_MODEL_SEEDANCE_2),
@@ -4185,6 +4412,9 @@ struct NormalizedEditorVideoRequest {
     price_mud_points: u32,
     width: u32,
     height: u32,
+    reference_image_srcs: Vec<String>,
+    reference_video_srcs: Vec<String>,
+    reference_audio_srcs: Vec<String>,
 }
 
 struct GeneratedAnimationPreview {
@@ -4501,6 +4731,9 @@ mod tests {
             mode: "std".to_string(),
             sound: "off".to_string(),
             price_mud_points: 50,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
         })
         .expect("editor video request should normalize");
 
@@ -4523,6 +4756,9 @@ mod tests {
             mode: "std".to_string(),
             sound: "off".to_string(),
             price_mud_points: 80,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
         })
         .expect("seedance fast request should normalize");
 
@@ -4542,6 +4778,9 @@ mod tests {
             mode: "std".to_string(),
             sound: "off".to_string(),
             price_mud_points: 80,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
         })
         .expect("seedance standard request should normalize");
 
@@ -4550,6 +4789,74 @@ mod tests {
         assert_ne!(normalized.provider_model, CHARACTER_ANIMATION_MODEL);
     }
 
+
+    #[test]
+    fn editor_video_normalizes_seedance_multimodal_references() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "参考素材生成视频".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "720p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 100,
+            reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
+            reference_video_srcs: vec![
+                "generated-character-drafts/editor/seedance-references/video/demo.mp4".to_string(),
+            ],
+            reference_audio_srcs: vec!["data:audio/mpeg;base64,audio".to_string()],
+        })
+        .expect("seedance multimodal request should normalize");
+
+        assert_eq!(normalized.reference_image_srcs, vec!["data:image/png;base64,image"]);
+        assert_eq!(
+            normalized.reference_video_srcs,
+            vec!["generated-character-drafts/editor/seedance-references/video/demo.mp4"]
+        );
+        assert_eq!(normalized.reference_audio_srcs, vec!["data:audio/mpeg;base64,audio"]);
+    }
+
+    #[test]
+    fn editor_video_rejects_seedance_video_data_urls() {
+        let error = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "参考视频生成视频".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 40,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: vec!["data:video/mp4;base64,video".to_string()],
+            reference_audio_srcs: Vec::new(),
+        })
+        .expect_err("Seedance reference videos must not accept Base64 data URLs");
+
+        assert!(error.body_text().contains("参考视频格式不支持"));
+    }
+
+    #[test]
+    fn editor_video_rejects_audio_only_seedance_references() {
+        let error = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "根据旁白生成视频".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 40,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: vec!["data:audio/wav;base64,audio".to_string()],
+        })
+        .expect_err("audio-only references should fail");
+
+        assert!(error.body_text().contains("参考音频必须搭配参考图片或参考视频"));
+    }
+
     #[test]
     fn editor_video_rejects_price_mismatch() {
         let error = normalize_editor_video_request(EditorVideoGenerateRequest {
@@ -4561,6 +4868,9 @@ mod tests {
             mode: "std".to_string(),
             sound: "off".to_string(),
             price_mud_points: 40,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
         })
         .expect_err("wrong price should fail");
 
diff --git a/server-rs/crates/api-server/src/modules/play_flow.rs b/server-rs/crates/api-server/src/modules/play_flow.rs
index f80609751..c90d06150 100644
--- a/server-rs/crates/api-server/src/modules/play_flow.rs
+++ b/server-rs/crates/api-server/src/modules/play_flow.rs
@@ -17,8 +17,8 @@ use crate::{
     auth::require_bearer_auth,
     character_animation_assets::{
         generate_character_animation, generate_editor_character_animation, generate_editor_video,
-        get_character_animation_job, get_character_workflow_cache, import_character_animation_video,
-        list_character_animation_templates,
+        get_character_animation_job, get_character_workflow_cache,
+        import_character_animation_video, list_character_animation_templates,
         publish_character_animation, put_role_asset_workflow, resolve_role_asset_workflow,
         save_character_workflow_cache,
     },
@@ -46,10 +46,14 @@ use crate::{
     runtime_save::{list_profile_save_archives, resume_profile_save_archive},
     runtime_settings::{get_runtime_settings, put_runtime_settings},
     state::AppState,
+    vector_engine_audio_generation::{
+        generate_editor_background_music, generate_editor_sound_effect,
+    },
 };
 
 const HYPER3D_IMAGE_TO_MODEL_BODY_LIMIT_BYTES: usize = 56 * 1024 * 1024;
 const EDITOR_CHARACTER_ANIMATION_BODY_LIMIT_BYTES: usize = 12 * 1024 * 1024;
+const EDITOR_VIDEO_BODY_LIMIT_BYTES: usize = 64 * 1024 * 1024;
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub(crate) struct PlayFlowDomainAdapter {
@@ -463,7 +467,23 @@ fn play_flow_support_router(state: AppState) -> Router<AppState> {
         )
         .route(
             "/api/editor/videos/generations",
-            post(generate_editor_video).route_layer(middleware::from_fn_with_state(
+            post(generate_editor_video)
+                .layer(DefaultBodyLimit::max(EDITOR_VIDEO_BODY_LIMIT_BYTES))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
+        )
+        .route(
+            "/api/editor/audios/sound-effects/generations",
+            post(generate_editor_sound_effect).route_layer(middleware::from_fn_with_state(
+                state.clone(),
+                require_bearer_auth,
+            )),
+        )
+        .route(
+            "/api/editor/audios/background-music/generations",
+            post(generate_editor_background_music).route_layer(middleware::from_fn_with_state(
                 state.clone(),
                 require_bearer_auth,
             )),
diff --git a/server-rs/crates/api-server/src/vector_engine_audio_generation.rs b/server-rs/crates/api-server/src/vector_engine_audio_generation.rs
index 000f74984..48a2f15bd 100644
--- a/server-rs/crates/api-server/src/vector_engine_audio_generation.rs
+++ b/server-rs/crates/api-server/src/vector_engine_audio_generation.rs
@@ -11,6 +11,7 @@ mod tasks;
 mod tests;
 mod types;
 
+pub use generation::{generate_editor_background_music, generate_editor_sound_effect};
 pub use handlers::{
     create_background_music_task, create_sound_effect_task,
     create_visual_novel_background_music_task, create_visual_novel_sound_effect_task,
diff --git a/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs b/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs
index 63fdd53e8..9f628c395 100644
--- a/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs
+++ b/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs
@@ -1,18 +1,229 @@
+use axum::Extension;
+use axum::http::StatusCode;
+use axum::{
+    Json,
+    extract::{State, rejection::JsonRejection},
+    response::Response,
+};
+use platform_oss::LegacyAssetPrefix;
+use serde_json::Value;
 use serde_json::json;
-use shared_contracts::creation_audio;
+use shared_contracts::{assets, creation_audio};
 
 use crate::{
-    http_error::AppError, state::AppState, tracking::record_external_generation_run_after_success,
+    api_response::json_success_body, auth::AuthenticatedAccessToken, http_error::AppError,
+    request_context::RequestContext, state::AppState,
+    tracking::record_external_generation_run_after_success,
 };
 
 use super::{
     clock::{current_utc_iso_text, current_utc_micros},
-    errors::{map_platform_audio_error, vector_engine_bad_gateway},
+    errors::{map_platform_audio_error, parse_json_payload, vector_engine_bad_gateway},
     publish::wait_for_generated_audio_asset,
+    settings::require_vector_engine_audio_settings,
     tasks::create_sound_effect_task_response,
     types::{AudioAssetBindingTarget, AudioAssetSlot, GeneratedCreationAudioTarget},
 };
 
+const EDITOR_SOUND_EFFECT_POINTS_COST: u32 = 10;
+const EDITOR_BACKGROUND_MUSIC_POINTS_COST: u32 = 5;
+const EDITOR_AUDIO_WIDTH: u32 = 420;
+const EDITOR_AUDIO_HEIGHT: u32 = 120;
+
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub(super) struct NormalizedEditorSoundEffectRequest {
+    pub(super) sound: String,
+    pub(super) sound_type: String,
+    pub(super) tempo: String,
+    pub(super) price_mud_points: u32,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub(super) struct NormalizedEditorBackgroundMusicRequest {
+    pub(super) gpt_description_prompt: String,
+    pub(super) make_instrumental: bool,
+    pub(super) price_mud_points: u32,
+}
+
+pub(super) fn normalize_editor_sound_effect_request(
+    payload: assets::EditorSoundEffectGenerateRequest,
+) -> Result<NormalizedEditorSoundEffectRequest, AppError> {
+    if payload.price_mud_points != EDITOR_SOUND_EFFECT_POINTS_COST {
+        return Err(editor_audio_bad_request("音效生成泥点消耗不匹配"));
+    }
+    Ok(NormalizedEditorSoundEffectRequest {
+        sound: platform_audio::normalize_limited_text(
+            &payload.sound,
+            "sound",
+            platform_audio::VIDU_PROMPT_MAX_CHARS,
+        )
+        .map_err(map_platform_audio_error)?,
+        sound_type: platform_audio::normalize_limited_text(&payload.sound_type, "type", 80)
+            .map_err(map_platform_audio_error)?,
+        tempo: platform_audio::normalize_limited_text(&payload.tempo, "tempo", 80)
+            .map_err(map_platform_audio_error)?,
+        price_mud_points: payload.price_mud_points,
+    })
+}
+
+pub(super) fn normalize_editor_background_music_request(
+    payload: assets::EditorBackgroundMusicGenerateRequest,
+) -> Result<NormalizedEditorBackgroundMusicRequest, AppError> {
+    if payload.price_mud_points != EDITOR_BACKGROUND_MUSIC_POINTS_COST {
+        return Err(editor_audio_bad_request("背景音乐生成泥点消耗不匹配"));
+    }
+    Ok(NormalizedEditorBackgroundMusicRequest {
+        gpt_description_prompt: platform_audio::normalize_limited_text(
+            &payload.gpt_description_prompt,
+            "gpt_description_prompt",
+            platform_audio::SUNO_PROMPT_MAX_CHARS,
+        )
+        .map_err(map_platform_audio_error)?,
+        make_instrumental: true,
+        price_mud_points: payload.price_mud_points,
+    })
+}
+
+pub async fn generate_editor_sound_effect(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    payload: Result<Json<assets::EditorSoundEffectGenerateRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = parse_json_payload(&request_context, payload)?;
+    let normalized = normalize_editor_sound_effect_request(payload)
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let settings = require_vector_engine_audio_settings(&state)
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let http_client = platform_audio::build_vector_engine_audio_http_client(&settings)
+        .map_err(map_platform_audio_error)
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let task = platform_audio::submit_editor_sound_effect_task(
+        &http_client,
+        &settings,
+        platform_audio::EditorSoundEffectTaskRequest {
+            sound: normalized.sound.clone(),
+            sound_type: normalized.sound_type.clone(),
+            tempo: normalized.tempo.clone(),
+        },
+    )
+    .await
+    .map_err(map_platform_audio_error)
+    .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let generated = wait_for_generated_audio_asset(
+        &state,
+        authenticated.claims().user_id(),
+        task.task_id.clone(),
+        AudioAssetSlot::SoundEffect,
+        build_editor_audio_target(&task.task_id, "sound_effect", "editor_sound_effect"),
+    )
+    .await
+    .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let audio_src = generated
+        .audio_src
+        .ok_or_else(|| vector_engine_bad_gateway("音效生成完成但缺少播放地址"))
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        assets::EditorAudioGenerateResponse {
+            ok: true,
+            audio_src,
+            width: EDITOR_AUDIO_WIDTH,
+            height: EDITOR_AUDIO_HEIGHT,
+            source_type: "generated".to_string(),
+            prompt: normalized.sound.clone(),
+            actual_prompt: Some(normalized.sound),
+            model: platform_audio::VIDU_AUDIO_MODEL.to_string(),
+            provider: generated.provider,
+            task_id: generated.task_id,
+            price_mud_points: normalized.price_mud_points,
+            audio_kind: "sound-effect".to_string(),
+        },
+    ))
+}
+
+pub async fn generate_editor_background_music(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    payload: Result<Json<assets::EditorBackgroundMusicGenerateRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = parse_json_payload(&request_context, payload)?;
+    let normalized = normalize_editor_background_music_request(payload)
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let settings = require_vector_engine_audio_settings(&state)
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let http_client = platform_audio::build_vector_engine_audio_http_client(&settings)
+        .map_err(map_platform_audio_error)
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let task = platform_audio::submit_editor_background_music_task(
+        &http_client,
+        &settings,
+        platform_audio::EditorBackgroundMusicTaskRequest {
+            gpt_description_prompt: normalized.gpt_description_prompt.clone(),
+            make_instrumental: normalized.make_instrumental,
+        },
+    )
+    .await
+    .map_err(map_platform_audio_error)
+    .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let generated = wait_for_generated_audio_asset(
+        &state,
+        authenticated.claims().user_id(),
+        task.task_id.clone(),
+        AudioAssetSlot::BackgroundMusic,
+        build_editor_audio_target(&task.task_id, "background_music", "editor_background_music"),
+    )
+    .await
+    .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+    let audio_src = generated
+        .audio_src
+        .ok_or_else(|| vector_engine_bad_gateway("背景音乐生成完成但缺少播放地址"))
+        .map_err(|error| error.into_response_with_context(Some(&request_context)))?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        assets::EditorAudioGenerateResponse {
+            ok: true,
+            audio_src,
+            width: EDITOR_AUDIO_WIDTH,
+            height: EDITOR_AUDIO_HEIGHT,
+            source_type: "generated".to_string(),
+            prompt: normalized.gpt_description_prompt.clone(),
+            actual_prompt: Some(normalized.gpt_description_prompt),
+            model: platform_audio::SUNO_DEFAULT_MODEL.to_string(),
+            provider: generated.provider,
+            task_id: generated.task_id,
+            price_mud_points: normalized.price_mud_points,
+            audio_kind: "background-music".to_string(),
+        },
+    ))
+}
+
+fn build_editor_audio_target(
+    task_id: &str,
+    slot: &'static str,
+    asset_kind: &'static str,
+) -> AudioAssetBindingTarget {
+    AudioAssetBindingTarget {
+        entity_kind: "editor_audio".to_string(),
+        entity_id: task_id.to_string(),
+        slot: slot.to_string(),
+        asset_kind: asset_kind.to_string(),
+        profile_id: None,
+        storage_prefix: LegacyAssetPrefix::CharacterDrafts,
+        storage_scope: "editor_audio".to_string(),
+    }
+}
+
+fn editor_audio_bad_request(message: impl Into<String>) -> AppError {
+    AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+        "provider": platform_audio::VECTOR_ENGINE_PROVIDER,
+        "message": message.into(),
+    }))
+}
+
 pub(crate) async fn generate_sound_effect_asset_for_creation(
     state: &AppState,
     owner_user_id: &str,
diff --git a/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs b/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs
index 566a5bd97..025530dbb 100644
--- a/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs
+++ b/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs
@@ -1,8 +1,11 @@
 use axum::http::StatusCode;
 use platform_oss::LegacyAssetPrefix;
-use shared_contracts::creation_audio;
+use shared_contracts::{assets, creation_audio};
 
 use super::{
+    generation::{
+        normalize_editor_background_music_request, normalize_editor_sound_effect_request,
+    },
     publish::resolve_creation_audio_points_cost,
     targets::{build_creation_audio_target, creation_audio_generation_disabled_error_for_target},
     types::{AudioAssetBindingTarget, AudioAssetSlot},
@@ -77,3 +80,48 @@ fn disabled_creation_audio_targets_return_gone_including_wooden_fish_sound_effec
         .expect_err("wooden fish hit sound target should be disabled");
     assert_eq!(error.status_code(), StatusCode::GONE);
 }
+
+#[test]
+fn editor_sound_effect_request_normalizes_sound_type_tempo_and_price() {
+    let normalized =
+        normalize_editor_sound_effect_request(assets::EditorSoundEffectGenerateRequest {
+            sound: "  金币掉落叮当声  ".to_string(),
+            sound_type: " ui ".to_string(),
+            tempo: " fast ".to_string(),
+            price_mud_points: 10,
+        })
+        .expect("editor sound effect request should normalize");
+
+    assert_eq!(normalized.sound, "金币掉落叮当声");
+    assert_eq!(normalized.sound_type, "ui");
+    assert_eq!(normalized.tempo, "fast");
+    assert_eq!(normalized.price_mud_points, 10);
+}
+
+#[test]
+fn editor_background_music_request_forces_instrumental_and_price() {
+    let normalized =
+        normalize_editor_background_music_request(assets::EditorBackgroundMusicGenerateRequest {
+            gpt_description_prompt: "  森林冒险背景音乐  ".to_string(),
+            make_instrumental: false,
+            price_mud_points: 5,
+        })
+        .expect("editor background music request should normalize");
+
+    assert_eq!(normalized.gpt_description_prompt, "森林冒险背景音乐");
+    assert!(normalized.make_instrumental);
+    assert_eq!(normalized.price_mud_points, 5);
+}
+
+#[test]
+fn editor_audio_rejects_price_mismatch() {
+    let error = normalize_editor_sound_effect_request(assets::EditorSoundEffectGenerateRequest {
+        sound: "点击按钮".to_string(),
+        sound_type: "ui".to_string(),
+        tempo: "medium".to_string(),
+        price_mud_points: 5,
+    })
+    .expect_err("wrong sound effect price should fail");
+
+    assert!(error.to_string().contains("泥点"));
+}
diff --git a/server-rs/crates/platform-audio/src/client.rs b/server-rs/crates/platform-audio/src/client.rs
index b1233e057..f286d0db6 100644
--- a/server-rs/crates/platform-audio/src/client.rs
+++ b/server-rs/crates/platform-audio/src/client.rs
@@ -8,7 +8,9 @@ use crate::response::{
 };
 use crate::{
     AudioError, AudioTaskKind, AudioTaskResponse, BackgroundMusicTaskRequest,
-    SoundEffectTaskRequest, VectorEngineAudioSettings, build_background_music_task_body,
+    EditorBackgroundMusicTaskRequest, EditorSoundEffectTaskRequest, SoundEffectTaskRequest,
+    VectorEngineAudioSettings, build_background_music_task_body,
+    build_editor_background_music_task_body, build_editor_sound_effect_task_body,
     build_sound_effect_task_body,
 };
 
@@ -83,6 +85,62 @@ pub async fn submit_sound_effect_task(
     })
 }
 
+pub async fn submit_editor_background_music_task(
+    http_client: &reqwest::Client,
+    settings: &VectorEngineAudioSettings,
+    request: EditorBackgroundMusicTaskRequest,
+) -> Result<AudioTaskResponse, AudioError> {
+    let body = build_editor_background_music_task_body(request)?;
+    let response = post_vector_engine_json(
+        http_client,
+        settings,
+        AudioTaskKind::BackgroundMusic.submit_path(),
+        body,
+        "提交编辑器背景音乐任务失败",
+    )
+    .await?;
+    let task_id = extract_string_by_path(&response, &["data"])
+        .or_else(|| find_first_string_by_key(&response, "task_id"))
+        .or_else(|| find_first_string_by_key(&response, "taskId"))
+        .ok_or_else(|| {
+            AudioError::missing_audio("提交编辑器背景音乐任务失败：上游未返回任务 ID")
+        })?;
+
+    Ok(AudioTaskResponse {
+        kind: AudioTaskKind::BackgroundMusic,
+        task_id,
+        provider: AudioTaskKind::BackgroundMusic.provider().to_string(),
+        status: "submitted".to_string(),
+    })
+}
+
+pub async fn submit_editor_sound_effect_task(
+    http_client: &reqwest::Client,
+    settings: &VectorEngineAudioSettings,
+    request: EditorSoundEffectTaskRequest,
+) -> Result<AudioTaskResponse, AudioError> {
+    let body = build_editor_sound_effect_task_body(request)?;
+    let response = post_vector_engine_json(
+        http_client,
+        settings,
+        AudioTaskKind::SoundEffect.submit_path(),
+        body,
+        "提交编辑器音效任务失败",
+    )
+    .await?;
+    let task_id = find_first_string_by_key(&response, "task_id")
+        .or_else(|| find_first_string_by_key(&response, "taskId"))
+        .ok_or_else(|| AudioError::missing_audio("提交编辑器音效任务失败：上游未返回任务 ID"))?;
+    let status = find_first_string_by_key(&response, "state").unwrap_or_else(|| "created".into());
+
+    Ok(AudioTaskResponse {
+        kind: AudioTaskKind::SoundEffect,
+        task_id,
+        provider: AudioTaskKind::SoundEffect.provider().to_string(),
+        status,
+    })
+}
+
 async fn fetch_audio_task_payload(
     http_client: &reqwest::Client,
     settings: &VectorEngineAudioSettings,
diff --git a/server-rs/crates/platform-audio/src/lib.rs b/server-rs/crates/platform-audio/src/lib.rs
index 4d9235efb..cc4c7a528 100644
--- a/server-rs/crates/platform-audio/src/lib.rs
+++ b/server-rs/crates/platform-audio/src/lib.rs
@@ -8,7 +8,8 @@ mod types;
 
 pub use client::{
     build_vector_engine_audio_http_client, resolve_audio_task_download_urls,
-    submit_background_music_task, submit_sound_effect_task,
+    submit_background_music_task, submit_editor_background_music_task,
+    submit_editor_sound_effect_task, submit_sound_effect_task,
 };
 pub use download::{audio_mime_to_extension, download_generated_audio, normalize_audio_mime_type};
 pub use error::{AudioError, AudioStatusHint};
@@ -16,7 +17,8 @@ pub use persist::{
     GeneratedAudioPersistInput, GeneratedAudioPersistTarget, prepare_generated_audio_put_request,
 };
 pub use request::{
-    build_background_music_task_body, build_sound_effect_task_body, normalize_limited_text,
+    build_background_music_task_body, build_editor_background_music_task_body,
+    build_editor_sound_effect_task_body, build_sound_effect_task_body, normalize_limited_text,
     normalize_limited_text_allow_empty, normalize_optional_text,
 };
 pub use response::{
@@ -24,9 +26,9 @@ pub use response::{
 };
 pub use types::{
     AudioTaskKind, AudioTaskResponse, BackgroundMusicTaskRequest,
-    DEFAULT_SOUND_EFFECT_DURATION_SECONDS, DownloadedAudio, MAX_GENERATED_AUDIO_BYTES,
-    SUNO_DEFAULT_MODEL, SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS, SUNO_TITLE_MAX_CHARS,
-    SoundEffectTaskRequest, VECTOR_ENGINE_PROVIDER, VECTOR_ENGINE_SUNO_PROVIDER,
-    VECTOR_ENGINE_VIDU_PROVIDER, VIDU_AUDIO_MODEL, VIDU_PROMPT_MAX_CHARS,
-    VectorEngineAudioSettings,
+    DEFAULT_SOUND_EFFECT_DURATION_SECONDS, DownloadedAudio, EditorBackgroundMusicTaskRequest,
+    EditorSoundEffectTaskRequest, MAX_GENERATED_AUDIO_BYTES, SUNO_DEFAULT_MODEL,
+    SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS, SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest,
+    VECTOR_ENGINE_PROVIDER, VECTOR_ENGINE_SUNO_PROVIDER, VECTOR_ENGINE_VIDU_PROVIDER,
+    VIDU_AUDIO_MODEL, VIDU_PROMPT_MAX_CHARS, VectorEngineAudioSettings,
 };
diff --git a/server-rs/crates/platform-audio/src/request.rs b/server-rs/crates/platform-audio/src/request.rs
index ea864d872..d751fc02d 100644
--- a/server-rs/crates/platform-audio/src/request.rs
+++ b/server-rs/crates/platform-audio/src/request.rs
@@ -1,9 +1,9 @@
 use serde_json::{Map, Value, json};
 
 use crate::{
-    AudioError, BackgroundMusicTaskRequest, SUNO_DEFAULT_MODEL, SUNO_PROMPT_MAX_CHARS,
-    SUNO_TAGS_MAX_CHARS, SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest, VIDU_AUDIO_MODEL,
-    VIDU_PROMPT_MAX_CHARS,
+    AudioError, BackgroundMusicTaskRequest, EditorBackgroundMusicTaskRequest,
+    EditorSoundEffectTaskRequest, SUNO_DEFAULT_MODEL, SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS,
+    SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest, VIDU_AUDIO_MODEL, VIDU_PROMPT_MAX_CHARS,
 };
 
 pub fn build_background_music_task_body(
@@ -53,6 +53,33 @@ pub fn build_sound_effect_task_body(request: SoundEffectTaskRequest) -> Result<V
     Ok(Value::Object(body))
 }
 
+pub fn build_editor_background_music_task_body(
+    request: EditorBackgroundMusicTaskRequest,
+) -> Result<Value, AudioError> {
+    let prompt = normalize_limited_text(
+        &request.gpt_description_prompt,
+        "gpt_description_prompt",
+        SUNO_PROMPT_MAX_CHARS,
+    )?;
+    Ok(json!({
+        "gpt_description_prompt": prompt,
+        "make_instrumental": request.make_instrumental,
+    }))
+}
+
+pub fn build_editor_sound_effect_task_body(
+    request: EditorSoundEffectTaskRequest,
+) -> Result<Value, AudioError> {
+    let sound = normalize_limited_text(&request.sound, "sound", VIDU_PROMPT_MAX_CHARS)?;
+    let sound_type = normalize_limited_text(&request.sound_type, "type", 80)?;
+    let tempo = normalize_limited_text(&request.tempo, "tempo", 80)?;
+    Ok(json!({
+        "sound": sound,
+        "type": sound_type,
+        "tempo": tempo,
+    }))
+}
+
 pub fn normalize_limited_text(
     value: &str,
     field: &'static str,
diff --git a/server-rs/crates/platform-audio/src/types.rs b/server-rs/crates/platform-audio/src/types.rs
index b23faa1bd..ea8e37763 100644
--- a/server-rs/crates/platform-audio/src/types.rs
+++ b/server-rs/crates/platform-audio/src/types.rs
@@ -52,6 +52,19 @@ pub struct SoundEffectTaskRequest {
     pub seed: Option<u64>,
 }
 
+#[derive(Clone, Debug)]
+pub struct EditorBackgroundMusicTaskRequest {
+    pub gpt_description_prompt: String,
+    pub make_instrumental: bool,
+}
+
+#[derive(Clone, Debug)]
+pub struct EditorSoundEffectTaskRequest {
+    pub sound: String,
+    pub sound_type: String,
+    pub tempo: String,
+}
+
 #[derive(Clone, Debug)]
 pub struct AudioTaskResponse {
     pub kind: AudioTaskKind,
diff --git a/server-rs/crates/platform-audio/tests/vector_engine_audio.rs b/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
index 179daf474..0e290903a 100644
--- a/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
+++ b/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
@@ -1,8 +1,10 @@
 use platform_audio::{
-    AudioTaskKind, BackgroundMusicTaskRequest, SUNO_DEFAULT_MODEL, VIDU_PROMPT_MAX_CHARS,
-    audio_mime_to_extension, build_background_music_task_body, build_sound_effect_task_body,
-    extract_audio_urls, is_failed_task_status, is_pending_task_status, normalize_audio_mime_type,
-    normalize_task_status,
+    AudioTaskKind, BackgroundMusicTaskRequest, EditorBackgroundMusicTaskRequest,
+    EditorSoundEffectTaskRequest, SUNO_DEFAULT_MODEL, VIDU_PROMPT_MAX_CHARS,
+    audio_mime_to_extension, build_background_music_task_body,
+    build_editor_background_music_task_body, build_editor_sound_effect_task_body,
+    build_sound_effect_task_body, extract_audio_urls, is_failed_task_status,
+    is_pending_task_status, normalize_audio_mime_type, normalize_task_status,
 };
 use serde_json::json;
 
@@ -82,3 +84,32 @@ fn sound_effect_request_rejects_overlong_prompt() {
 
     assert!(error.message().contains("prompt 超过"));
 }
+
+#[test]
+fn editor_background_music_request_body_uses_gpt_description_prompt_and_instrumental() {
+    let body =
+        build_editor_background_music_task_body(EditorBackgroundMusicTaskRequest {
+            gpt_description_prompt: "  轻快森林冒险背景音乐  ".to_string(),
+            make_instrumental: true,
+        })
+        .expect("editor background music body should be valid");
+
+    assert_eq!(body["gpt_description_prompt"], "轻快森林冒险背景音乐");
+    assert_eq!(body["make_instrumental"], true);
+    assert!(body.get("prompt").is_none());
+}
+
+#[test]
+fn editor_sound_effect_request_body_uses_sound_type_and_tempo() {
+    let body = build_editor_sound_effect_task_body(EditorSoundEffectTaskRequest {
+        sound: "  金币掉落叮当声  ".to_string(),
+        sound_type: " ui ".to_string(),
+        tempo: " fast ".to_string(),
+    })
+    .expect("editor sound effect body should be valid");
+
+    assert_eq!(body["sound"], "金币掉落叮当声");
+    assert_eq!(body["type"], "ui");
+    assert_eq!(body["tempo"], "fast");
+    assert!(body.get("prompt").is_none());
+}
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index 8438d64a2..a83fa1377 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -357,6 +357,12 @@ pub struct EditorVideoGenerateRequest {
     pub mode: String,
     pub sound: String,
     pub price_mud_points: u32,
+    #[serde(default)]
+    pub reference_image_srcs: Vec<String>,
+    #[serde(default)]
+    pub reference_video_srcs: Vec<String>,
+    #[serde(default)]
+    pub reference_audio_srcs: Vec<String>,
 }
 
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
@@ -378,6 +384,42 @@ pub struct EditorVideoGenerateResponse {
     pub price_mud_points: u32,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorSoundEffectGenerateRequest {
+    pub sound: String,
+    #[serde(rename = "type")]
+    pub sound_type: String,
+    pub tempo: String,
+    pub price_mud_points: u32,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorBackgroundMusicGenerateRequest {
+    pub gpt_description_prompt: String,
+    pub make_instrumental: bool,
+    pub price_mud_points: u32,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorAudioGenerateResponse {
+    pub ok: bool,
+    pub audio_src: String,
+    pub width: u32,
+    pub height: u32,
+    pub source_type: String,
+    pub prompt: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub actual_prompt: Option<String>,
+    pub model: String,
+    pub provider: String,
+    pub task_id: String,
+    pub price_mud_points: u32,
+    pub audio_kind: String,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct CharacterAnimationDraftPayload {
@@ -907,7 +949,10 @@ mod tests {
         .expect("request should serialize");
 
         assert_eq!(payload["sourceLayerId"], json!("layer-1"));
-        assert_eq!(payload["sourceImageSrc"], json!("/generated-characters/hero/master.png"));
+        assert_eq!(
+            payload["sourceImageSrc"],
+            json!("/generated-characters/hero/master.png")
+        );
         assert_eq!(payload["priceMudPoints"], json!(120));
         assert_eq!(payload["model"], json!("seedance2.0-fast"));
     }
@@ -935,8 +980,14 @@ mod tests {
         })
         .expect("response should serialize");
 
-        assert_eq!(payload["previewVideoPath"], json!("/generated-character-drafts/editor/layer/preview.mp4"));
-        assert_eq!(payload["frames"][0]["imageSrc"], json!("/generated-animations/editor/layer/frame01.png"));
+        assert_eq!(
+            payload["previewVideoPath"],
+            json!("/generated-character-drafts/editor/layer/preview.mp4")
+        );
+        assert_eq!(
+            payload["frames"][0]["imageSrc"],
+            json!("/generated-animations/editor/layer/frame01.png")
+        );
         assert_eq!(payload["fps"], json!(8));
     }
 
@@ -951,6 +1002,9 @@ mod tests {
             mode: "std".to_string(),
             sound: "off".to_string(),
             price_mud_points: 50,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
         })
         .expect("request should serialize");
 
@@ -960,6 +1014,37 @@ mod tests {
         assert_eq!(payload["model"], json!("kling3.0-omni"));
     }
 
+    #[test]
+    fn editor_video_request_supports_seedance_multimodal_references() {
+        let payload = serde_json::to_value(EditorVideoGenerateRequest {
+            prompt: "参考素材生成视频".to_string(),
+            model: "seedance2.0-fast".to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "720p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 100,
+            reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
+            reference_video_srcs: vec!["data:video/mp4;base64,video".to_string()],
+            reference_audio_srcs: vec!["data:audio/mpeg;base64,audio".to_string()],
+        })
+        .expect("request should serialize");
+
+        assert_eq!(
+            payload["referenceImageSrcs"],
+            json!(["data:image/png;base64,image"])
+        );
+        assert_eq!(
+            payload["referenceVideoSrcs"],
+            json!(["data:video/mp4;base64,video"])
+        );
+        assert_eq!(
+            payload["referenceAudioSrcs"],
+            json!(["data:audio/mpeg;base64,audio"])
+        );
+    }
+
     #[test]
     fn editor_video_response_uses_canvas_video_shape() {
         let payload = serde_json::to_value(EditorVideoGenerateResponse {
@@ -987,6 +1072,54 @@ mod tests {
         assert_eq!(payload["durationSeconds"], json!(5));
     }
 
+    #[test]
+    fn editor_audio_requests_and_response_use_canvas_audio_shape() {
+        let sound_payload = serde_json::to_value(EditorSoundEffectGenerateRequest {
+            sound: "金币掉落叮当声".to_string(),
+            sound_type: "ui".to_string(),
+            tempo: "fast".to_string(),
+            price_mud_points: 10,
+        })
+        .expect("sound request should serialize");
+        assert_eq!(sound_payload["sound"], json!("金币掉落叮当声"));
+        assert_eq!(sound_payload["type"], json!("ui"));
+        assert_eq!(sound_payload["tempo"], json!("fast"));
+        assert_eq!(sound_payload["priceMudPoints"], json!(10));
+
+        let music_payload = serde_json::to_value(EditorBackgroundMusicGenerateRequest {
+            gpt_description_prompt: "森林冒险背景音乐".to_string(),
+            make_instrumental: true,
+            price_mud_points: 5,
+        })
+        .expect("background music request should serialize");
+        assert_eq!(
+            music_payload["gptDescriptionPrompt"],
+            json!("森林冒险背景音乐")
+        );
+        assert_eq!(music_payload["makeInstrumental"], json!(true));
+
+        let response_payload = serde_json::to_value(EditorAudioGenerateResponse {
+            ok: true,
+            audio_src: "/generated-character-drafts/editor-audios/sfx.mp3".to_string(),
+            width: 420,
+            height: 120,
+            source_type: "generated".to_string(),
+            prompt: "金币掉落叮当声".to_string(),
+            actual_prompt: Some("金币掉落叮当声".to_string()),
+            model: "audio1.0".to_string(),
+            provider: "VectorEngine".to_string(),
+            task_id: "sound-task-1".to_string(),
+            price_mud_points: 10,
+            audio_kind: "sound-effect".to_string(),
+        })
+        .expect("audio response should serialize");
+        assert_eq!(
+            response_payload["audioSrc"],
+            json!("/generated-character-drafts/editor-audios/sfx.mp3")
+        );
+        assert_eq!(response_payload["audioKind"], json!("sound-effect"));
+    }
+
     #[test]
     fn character_workflow_cache_response_keeps_legacy_shape() {
         let payload = serde_json::to_value(CharacterWorkflowCacheSaveResponse {
diff --git a/src/components/common/PlatformFloatingMenu.test.tsx b/src/components/common/PlatformFloatingMenu.test.tsx
index 0901fc3cd..e4dad62c3 100644
--- a/src/components/common/PlatformFloatingMenu.test.tsx
+++ b/src/components/common/PlatformFloatingMenu.test.tsx
@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -28,4 +28,26 @@ describe('PlatformFloatingMenu', () => {
 
     expect(onRename).toHaveBeenCalledOnce();
   });
+
+  it('keeps pointer events from leaking to canvas-style parents', () => {
+    const onParentPointerDown = vi.fn();
+    const onMenuPointerDown = vi.fn();
+
+    render(
+      <div onPointerDown={onParentPointerDown}>
+        <PlatformFloatingMenu
+          label="项目菜单"
+          placement="bottom-end"
+          onPointerDown={onMenuPointerDown}
+        >
+          <PlatformFloatingMenuItem>重命名</PlatformFloatingMenuItem>
+        </PlatformFloatingMenu>
+      </div>,
+    );
+
+    fireEvent.pointerDown(screen.getByRole('menu', { name: '项目菜单' }));
+
+    expect(onMenuPointerDown).toHaveBeenCalledOnce();
+    expect(onParentPointerDown).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/common/PlatformFloatingMenu.tsx b/src/components/common/PlatformFloatingMenu.tsx
index f91e9152a..1fcf7ab1d 100644
--- a/src/components/common/PlatformFloatingMenu.tsx
+++ b/src/components/common/PlatformFloatingMenu.tsx
@@ -26,6 +26,7 @@ export function PlatformFloatingMenu({
   label,
   placement = 'top-end',
   style,
+  onPointerDown,
   ...divProps
 }: PlatformFloatingMenuProps) {
   return (
@@ -41,6 +42,10 @@ export function PlatformFloatingMenu({
       role="menu"
       aria-label={label}
       style={style}
+      onPointerDown={(event) => {
+        event.stopPropagation();
+        onPointerDown?.(event);
+      }}
     >
       {children}
     </div>
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
index bc9009dff..90677990e 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
@@ -134,6 +134,26 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     ).toBeTruthy();
   });
 
+  it('removes an existing reference from its hover delete button', () => {
+    render(
+      <BasicGenerationHarness
+        initialDialog={createDialog({
+          generationReferences: [
+            {
+              id: 'ref-a',
+              label: '参考图A',
+              src: 'data:image/png;base64,cmVmQQ==',
+            },
+          ],
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '删除参考图A' }));
+
+    expect(screen.queryByText('参考图A')).toBeNull();
+  });
+
   it('shows only current image options and opens upward option panels', () => {
     render(<BasicGenerationHarness />);
 
@@ -166,6 +186,26 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     expect(submitButton.textContent).toBe('生成12泥点');
   });
 
+  it('clicks the parent generation panel to collapse an opened option panel', () => {
+    render(<BasicGenerationHarness />);
+
+    const panel = screen.getByRole('dialog', { name: '生成图片' });
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: '生成图片尺寸 16:9 · 1K',
+      }),
+    );
+    expect(
+      screen.getByRole('menu', { name: '生成图片尺寸选项' }),
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('textbox', { name: '生成提示词' }));
+
+    expect(
+      screen.queryByRole('menu', { name: '生成图片尺寸选项' }),
+    ).toBeNull();
+  });
+
   it('closes through its interface', () => {
     const closeComposer = vi.fn();
     render(<BasicGenerationHarness onClose={closeComposer} />);
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 5c3909c18..05eb11709 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -14,14 +14,16 @@ import {
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
-import {
-  EDITOR_GENERATION_MUD_POINT_CONFIG,
-} from './ImageCanvasGenerationModel';
-import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
+import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
+import {
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+} from './ImageCanvasGenerationModel';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasBasicGenerationComposerViewProps = {
   dialog: GenerateDialogState;
@@ -53,22 +55,24 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
 function ReferenceChip({
   reference,
   index,
+  onRemove,
 }: {
   reference: CharacterReferenceImage;
   index: number;
+  onRemove: () => void;
 }) {
+  const label = reference.label || `参考图${index + 1}`;
   return (
-    <span
-      className="image-canvas-editor__reference-chip"
+    <ImageCanvasReferenceSlot
+      tone="default"
+      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+      imageSrc={reference.src}
+      label={label}
+      ariaLabel={label}
       title={reference.label}
-    >
-      <span className="image-canvas-editor__reference-chip-icon">
-        <img src={reference.src} alt="" aria-hidden="true" />
-      </span>
-      <span className="image-canvas-editor__reference-chip-label">
-        {reference.label || `参考图${index + 1}`}
-      </span>
-    </span>
+      onRemove={onRemove}
+      removeLabel={`删除${label}`}
+    />
   );
 }
 
@@ -89,6 +93,12 @@ export function ImageCanvasBasicGenerationComposerView({
   onClose,
 }: ImageCanvasBasicGenerationComposerViewProps) {
   const references = dialog.generationReferences ?? [];
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isGenerationReferenceMenuOpen,
+    boundaryRefs: [generationReferenceButtonRef],
+    onDismiss: () => setIsGenerationReferenceMenuOpen?.(false),
+  });
+
   return (
     <>
       <form
@@ -110,23 +120,30 @@ export function ImageCanvasBasicGenerationComposerView({
             key={reference.id}
             reference={reference}
             index={index}
+            onRemove={() =>
+              setGenerateDialog((currentDialog) =>
+                currentDialog
+                  ? {
+                      ...resetFailedDialogStatus(currentDialog),
+                      generationReferences: (
+                        currentDialog.generationReferences ?? []
+                      ).filter((item) => item.id !== reference.id),
+                    }
+                  : currentDialog,
+              )
+            }
           />
         ))}
-        <button
-          ref={generationReferenceButtonRef}
-          type="button"
-          className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--upload"
+        <ImageCanvasReferenceSlot
+          buttonRef={generationReferenceButtonRef}
+          tone="default"
+          icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+          label="参考图"
+          ariaLabel="添加参考图"
           disabled={dialog.status === 'generating'}
-          aria-label="添加参考图"
+          isAdd
           onClick={() => onToggleReferenceMenu?.()}
-        >
-          <span className="image-canvas-editor__reference-chip-icon">
-            <ImageIcon className="h-4 w-4" aria-hidden="true" />
-          </span>
-          <span className="image-canvas-editor__reference-chip-label">
-            参考图
-          </span>
-        </button>
+        />
       </div>
       <PlatformTextField
         variant="textarea"
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index 691b009b5..8c21f4fa7 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -36,12 +36,14 @@ describe('ImageCanvasBottomToolbarView', () => {
     fireEvent.click(
       within(toolbar).getByRole('button', { name: '生成UI设计图' }),
     );
+    fireEvent.click(within(toolbar).getByRole('button', { name: '生成音乐' }));
     fireEvent.click(within(toolbar).getByRole('button', { name: '文字工具' }));
 
     expect(switchTool).toHaveBeenNthCalledWith(1, 'hand');
     expect(switchTool).toHaveBeenNthCalledWith(2, 'video');
     expect(switchTool).toHaveBeenNthCalledWith(3, 'spec');
     expect(switchTool).toHaveBeenNthCalledWith(4, 'ui-design');
-    expect(switchTool).toHaveBeenNthCalledWith(5, 'text');
+    expect(switchTool).toHaveBeenNthCalledWith(5, 'music');
+    expect(switchTool).toHaveBeenNthCalledWith(6, 'text');
   });
 });
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index 8075cf122..6a4fcad46 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -7,6 +7,7 @@ import {
   ImagePlus,
   LayoutTemplate,
   MousePointer2,
+  Music,
   Shapes,
   Sparkles,
   Type,
@@ -33,6 +34,7 @@ const canvasTools: Array<{
   { id: 'upload', label: '上传工具', icon: ImagePlus },
   { id: 'generate', label: '生成工具', icon: WandSparkles },
   { id: 'video', label: '生成视频', icon: Clapperboard },
+  { id: 'music', label: '生成音乐', icon: Music },
   { id: 'spec', label: '生成规范', icon: ClipboardList },
   { id: 'character', label: '生成角色形象', icon: Sparkles },
   { id: 'icon', label: '生成图标素材', icon: ImageIcon },
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
index 4ad3bd7ab..deca396d4 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
@@ -132,6 +132,21 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
   });
 
+  it('clicks the parent animation panel to collapse the parameter menu', () => {
+    render(
+      <CharacterAnimationPanelHarness initialPanel={createPanel()} />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '动画参数 同图尺寸 · 4秒 · 480p' }),
+    );
+    expect(screen.getByRole('menu', { name: '动画参数选项' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('textbox', { name: '动画描述' }));
+
+    expect(screen.queryByRole('menu', { name: '动画参数选项' })).toBeNull();
+  });
+
   it('applies preset prompt and duration updates', () => {
     const updateDuration = vi.fn();
     render(
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx
index 896f6cdf3..ede1eb526 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx
@@ -1,33 +1,35 @@
+import { ChevronDown, X } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
   type ReactNode,
   type SetStateAction,
+  useCallback,
   useRef,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
-import { ChevronDown, X } from 'lucide-react';
 
+import type {
+  EditorCharacterAnimationRatio,
+  EditorCharacterAnimationResolution,
+} from '../../services/image-editor/editorProjectClient';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFloatingMenu } from '../common/PlatformFloatingMenu';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import type {
+  CanvasLayer,
+  CharacterAnimationPanelState,
+} from './ImageCanvasEditorTypes';
 import {
   CHARACTER_ANIMATION_ACTION_PROMPTS,
   CHARACTER_ANIMATION_DURATION_OPTIONS,
   CHARACTER_ANIMATION_RATIO_OPTIONS,
 } from './ImageCanvasGenerationModel';
-import type {
-  EditorCharacterAnimationRatio,
-  EditorCharacterAnimationResolution,
-} from '../../services/image-editor/editorProjectClient';
-import type {
-  CanvasLayer,
-  CharacterAnimationPanelState,
-} from './ImageCanvasEditorTypes';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasCharacterAnimationPanelViewProps = {
   panel: CharacterAnimationPanelState;
@@ -131,6 +133,15 @@ export function ImageCanvasCharacterAnimationPanelView({
   const parameterButtonRef = useRef<HTMLButtonElement | null>(null);
   const isGenerating = panel.status === 'generating';
   const ratioLabel = getRatioLabel(panel.ratio);
+  const dismissParameterMenu = useCallback(() => {
+    setIsParameterMenuOpen(false);
+  }, []);
+
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isParameterMenuOpen,
+    boundaryRefs: [parameterButtonRef],
+    onDismiss: dismissParameterMenu,
+  });
 
   const updatePanel = (patch: Partial<CharacterAnimationPanelState>) => {
     setCharacterAnimationPanel((currentPanel) =>
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
index e278bdb26..3bc6ee799 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
@@ -166,4 +166,32 @@ describe('ImageCanvasCharacterGenerationComposerView', () => {
 
     expect(screen.getByLabelText('选择常规参考图').textContent).toBe('true');
   });
+
+  it('removes bound character spec and regular references from their delete buttons', () => {
+    render(<CharacterGenerationHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '删除角色形象规范' }));
+    expect(screen.getByRole('button', { name: '角色形象规范' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '角色规范A' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '删除参考图A' }));
+    expect(screen.queryByText('参考图A')).toBeNull();
+  });
+
+  it('clicks the parent character panel to collapse reference menus', () => {
+    render(
+      <CharacterGenerationHarness
+        initialDialog={createDialog()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '角色规范A' }));
+    expect(screen.getByRole('menu', { name: '角色形象规范来源' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('textbox', { name: '角色设定' }));
+
+    expect(
+      screen.queryByRole('menu', { name: '角色形象规范来源' }),
+    ).toBeNull();
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
index 04d122fe5..073ea2d81 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
@@ -13,14 +13,16 @@ import {
 } from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
   SpecGenerationType,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
-import { EDITOR_GENERATION_MUD_POINT_CONFIG } from './ImageCanvasGenerationModel';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
+import { EDITOR_GENERATION_MUD_POINT_CONFIG } from './ImageCanvasGenerationModel';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasCharacterGenerationComposerViewProps = {
   dialog: GenerateDialogState;
@@ -56,22 +58,24 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
 function ReferenceChip({
   reference,
   index,
+  onRemove,
 }: {
   reference: CharacterReferenceImage;
   index: number;
+  onRemove: () => void;
 }) {
+  const label = reference.label || `参考图${index + 1}`;
   return (
-    <span
-      className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--character"
+    <ImageCanvasReferenceSlot
+      tone="character"
+      icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
+      imageSrc={reference.src}
+      label={label}
+      ariaLabel={label}
       title={reference.label}
-    >
-      <span className="image-canvas-editor__reference-chip-icon">
-        <img src={reference.src} alt="" aria-hidden="true" />
-      </span>
-      <span className="image-canvas-editor__reference-chip-label">
-        {reference.label || `参考图${index + 1}`}
-      </span>
-    </span>
+      onRemove={onRemove}
+      removeLabel={`删除${label}`}
+    />
   );
 }
 
@@ -94,6 +98,15 @@ export function ImageCanvasCharacterGenerationComposerView({
   onRememberImageModel,
   onSubmit,
 }: ImageCanvasCharacterGenerationComposerViewProps) {
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isCharacterSpecMenuOpen || isCharacterReferenceMenuOpen,
+    boundaryRefs: [characterSpecButtonRef, characterReferenceButtonRef],
+    onDismiss: () => {
+      setIsCharacterSpecMenuOpen(false);
+      setIsCharacterReferenceMenuOpen(false);
+    },
+  });
+
   return (
     <form
       className="image-canvas-editor__character-composer"
@@ -109,31 +122,32 @@ export function ImageCanvasCharacterGenerationComposerView({
       }}
     >
       <div className="image-canvas-editor__reference-strip">
-        <span className="image-canvas-editor__character-spec-wrap">
-          <button
-            ref={characterSpecButtonRef}
-            type="button"
-            className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--spec image-canvas-editor__reference-chip--upload"
-            disabled={dialog.status === 'generating'}
-            aria-label={dialog.characterSpecReference?.label ?? '角色形象规范'}
-            onClick={() => setIsCharacterSpecMenuOpen((open) => !open)}
-          >
-            <span className="image-canvas-editor__reference-chip-icon">
-              {dialog.characterSpecReference ? (
-                <img
-                  src={dialog.characterSpecReference.src}
-                  alt=""
-                  aria-hidden="true"
-                />
-              ) : (
-                <ClipboardList className="h-4 w-4" aria-hidden="true" />
-              )}
-            </span>
-            <span className="image-canvas-editor__reference-chip-label">
-              {dialog.characterSpecReference?.label ?? '角色形象规范'}
-            </span>
-          </button>
-        </span>
+        <ImageCanvasReferenceSlot
+          buttonRef={characterSpecButtonRef}
+          tone="spec"
+          icon={<ClipboardList className="h-4 w-4" aria-hidden="true" />}
+          imageSrc={dialog.characterSpecReference?.src}
+          label="角色规范"
+          ariaLabel={dialog.characterSpecReference?.label ?? '角色形象规范'}
+          title={dialog.characterSpecReference?.label ?? '角色形象规范'}
+          disabled={dialog.status === 'generating'}
+          isAdd={!dialog.characterSpecReference}
+          onClick={() => setIsCharacterSpecMenuOpen((open) => !open)}
+          onRemove={
+            dialog.characterSpecReference
+              ? () =>
+                  setGenerateDialog((currentDialog) =>
+                    currentDialog?.mode === 'character'
+                      ? {
+                          ...resetFailedDialogStatus(currentDialog),
+                          characterSpecReference: null,
+                        }
+                      : currentDialog,
+                  )
+              : undefined
+          }
+          removeLabel="删除角色形象规范"
+        />
         {isCharacterSpecMenuOpen
           ? renderEditorPortal(
               <PlatformFloatingMenu
@@ -180,23 +194,30 @@ export function ImageCanvasCharacterGenerationComposerView({
             key={reference.id}
             reference={reference}
             index={index}
+            onRemove={() =>
+              setGenerateDialog((currentDialog) =>
+                currentDialog?.mode === 'character'
+                  ? {
+                      ...resetFailedDialogStatus(currentDialog),
+                      characterReferences: (
+                        currentDialog.characterReferences ?? []
+                      ).filter((item) => item.id !== reference.id),
+                    }
+                  : currentDialog,
+              )
+            }
           />
         ))}
-        <button
-          ref={characterReferenceButtonRef}
-          type="button"
-          className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--upload"
+        <ImageCanvasReferenceSlot
+          buttonRef={characterReferenceButtonRef}
+          tone="default"
+          icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
+          label="参考图"
+          ariaLabel="上传常规参考图"
           disabled={dialog.status === 'generating'}
-          aria-label="上传常规参考图"
+          isAdd
           onClick={() => setIsCharacterReferenceMenuOpen((open) => !open)}
-        >
-          <span className="image-canvas-editor__reference-chip-icon">
-            <ImagePlus className="h-4 w-4" aria-hidden="true" />
-          </span>
-          <span className="image-canvas-editor__reference-chip-label">
-            参考图
-          </span>
-        </button>
+        />
         {isCharacterReferenceMenuOpen
           ? renderEditorPortal(
               <PlatformFloatingMenu
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 1d609540c..16ea65001 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -1486,6 +1486,72 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByText('规范')).toBeTruthy();
   });
 
+  it('keeps spec reference source menu actions clickable from the portal', async () => {
+    render(<ImageCanvasEditorView />);
+
+    fireEvent.click(
+      within(screen.getByRole('toolbar', { name: 'AI画布工具栏' })).getByRole(
+        'button',
+        { name: '生成规范' },
+      ),
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '角色形象规范' }));
+
+    const specDialog = screen.getByRole('dialog', { name: '生成规范' });
+    await userEvent.click(
+      within(specDialog).getByRole('button', { name: '参考图' }),
+    );
+    await userEvent.click(
+      within(screen.getByRole('menu', { name: '参考图来源' })).getByRole(
+        'menuitem',
+        { name: '从画布中选择' },
+      ),
+    );
+
+    expect(
+      screen.getByText('请选择画布中的图片作为参考图，按 Esc 退出'),
+    ).toBeTruthy();
+    fireEvent.pointerDown(
+      screen.getByAltText('画布图片：拼图素材').closest('button')!,
+      {
+        button: 0,
+        pointerId: 190,
+        clientX: 120,
+        clientY: 120,
+      },
+    );
+    expect(
+      within(screen.getByRole('dialog', { name: '生成规范' })).getByText(
+        '拼图素材',
+      ),
+    ).toBeTruthy();
+
+    await userEvent.click(
+      within(screen.getByRole('dialog', { name: '生成规范' })).getByRole(
+        'button',
+        { name: '参考图' },
+      ),
+    );
+    await userEvent.click(
+      within(screen.getByRole('menu', { name: '参考图来源' })).getByRole(
+        'menuitem',
+        { name: '上传图片' },
+      ),
+    );
+    await userEvent.upload(
+      screen.getByLabelText('上传图片文件'),
+      new File(['spec-reference'], '规范上传.png', { type: 'image/png' }),
+    );
+
+    await waitFor(() => {
+      expect(
+        within(screen.getByRole('dialog', { name: '生成规范' })).getByText(
+          '规范上传.png',
+        ),
+      ).toBeTruthy();
+    });
+  });
+
   it('supports character generation from a picked canvas spec and numbered references', async () => {
     generateEditorImageMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,Y2hhcmFjdGVy',
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index b027ef778..743d680ed 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -128,6 +128,73 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('hydrates audio media type and sound effect asset kind from saved layout', () => {
+    const hydrated = hydrateLayer(
+      {
+        layerId: 'layer-audio',
+        resourceId: 'resource-audio',
+        title: '游戏音效',
+        x: 10,
+        y: 20,
+        width: 420,
+        height: 120,
+        originalWidth: 420,
+        originalHeight: 120,
+        zIndex: 5,
+        sourceType: 'generated',
+        mediaType: 'audio',
+        assetKind: 'sound-effect',
+      },
+      new Map([
+        [
+          'resource-audio',
+          { imageSrc: '/generated-character-drafts/editor-audios/sfx.mp3' },
+        ],
+      ]),
+    );
+
+    expect(hydrated).toMatchObject({
+      id: 'layer-audio',
+      src: '/generated-character-drafts/editor-audios/sfx.mp3',
+      mediaType: 'audio',
+      assetKind: 'sound-effect',
+    });
+  });
+
+  it('restores audio generation dialogs from saved layout', () => {
+    const dialog: CanvasGenerationDialogState = {
+      id: 'generation-dialog-audio',
+      mode: 'audio-background-music',
+      prompt: '森林冒险背景音乐',
+      status: 'idle',
+      composerOpen: true,
+      generatedLayerId: 'layer-audio',
+      placeholder: {
+        x: 100,
+        y: 120,
+        width: 420,
+        height: 120,
+        originalWidth: 420,
+        originalHeight: 120,
+      },
+    };
+
+    const { generationDialogs } = splitCanvasLayoutItems(
+      serializeCanvasLayout({
+        layers: [],
+        canvasGenerationDialogs: [dialog],
+      }),
+    );
+
+    expect(generationDialogs).toHaveLength(1);
+    expect(generationDialogs[0]).toMatchObject({
+      id: 'generation-dialog-audio',
+      mode: 'audio-background-music',
+      prompt: '森林冒险背景音乐',
+      generatedLayerId: 'layer-audio',
+    });
+  });
+
   it('serializes generation dialogs beside layers and splits them on load', () => {
     const layer: CanvasLayer = {
       id: 'layer-generated',
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 567610e4c..c3af929d6 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -8,6 +8,8 @@ import type {
   CanvasGenerationInputs,
   CanvasLayer,
   CanvasContextMenuState,
+  CanvasMediaType,
+  CharacterReferenceImage,
   CanvasViewport,
   EditorAsset,
   EditorAssetFolder,
@@ -303,6 +305,22 @@ export function hydrateCanvasGenerationDialog(
         : undefined,
     videoMode: snapshot.videoMode === 'std' ? 'std' : undefined,
     videoSound: snapshot.videoSound === 'off' ? 'off' : undefined,
+    soundType:
+      snapshot.soundType === 'foley' || snapshot.soundType === 'ambient'
+        ? snapshot.soundType
+        : snapshot.soundType === 'ui'
+          ? 'ui'
+          : undefined,
+    soundTempo:
+      snapshot.soundTempo === 'slow' || snapshot.soundTempo === 'fast'
+        ? snapshot.soundTempo
+        : snapshot.soundTempo === 'medium'
+          ? 'medium'
+          : undefined,
+    makeInstrumental:
+      typeof snapshot.makeInstrumental === 'boolean'
+        ? snapshot.makeInstrumental
+        : undefined,
     aspectRatio: stringOrUndefined(snapshot.aspectRatio),
     imageSize: stringOrUndefined(snapshot.imageSize),
     errorMessage: stringOrUndefined(snapshot.errorMessage),
@@ -348,7 +366,10 @@ export function hydrateLayer(
     sourceType: isCanvasSourceType(snapshot.sourceType)
       ? snapshot.sourceType
       : 'uploaded',
-    mediaType: snapshot.mediaType === 'video' ? 'video' : 'image',
+    mediaType:
+      snapshot.mediaType === 'video' || snapshot.mediaType === 'audio'
+        ? snapshot.mediaType
+        : 'image',
     prompt: stringOrNull(snapshot.prompt),
     actualPrompt: stringOrNull(snapshot.actualPrompt),
     model: stringOrNull(snapshot.model),
@@ -554,7 +575,9 @@ export function canvasAssetKindOrNull(value: unknown): CanvasAssetKind | null {
     value === 'icon' ||
     value === 'icon-spec' ||
     value === 'ui-design' ||
-    value === 'video'
+    value === 'video' ||
+    value === 'sound-effect' ||
+    value === 'background-music'
     ? value
     : null;
 }
@@ -582,7 +605,9 @@ function isCanvasGenerationDialogMode(
     value === 'character' ||
     value === 'icon' ||
     value === 'ui-design' ||
-    value === 'video'
+    value === 'video' ||
+    value === 'audio-sound-effect' ||
+    value === 'audio-background-music'
   );
 }
 
@@ -624,7 +649,7 @@ function hydrateSpecFormValues(
   };
 }
 
-function hydrateCharacterReference(value: unknown) {
+function hydrateCharacterReference(value: unknown): CharacterReferenceImage | null {
   if (!value || typeof value !== 'object') {
     return null;
   }
@@ -632,10 +657,34 @@ function hydrateCharacterReference(value: unknown) {
   const id = stringOrNull(snapshot.id);
   const label = stringOrNull(snapshot.label);
   const src = stringOrNull(snapshot.src);
-  return id && label && src ? { id, label, src } : null;
+  const mediaType: CanvasMediaType =
+    snapshot.mediaType === 'video' || snapshot.mediaType === 'audio'
+      ? snapshot.mediaType
+      : 'image';
+  const mimeType = stringOrUndefined(snapshot.mimeType);
+  const sizeBytes = numberFromSnapshot(snapshot.sizeBytes, 0) || undefined;
+  const durationSeconds =
+    numberFromSnapshot(snapshot.durationSeconds, 0) || undefined;
+  const objectKey = stringOrUndefined(snapshot.objectKey);
+  const assetObjectId = stringOrUndefined(snapshot.assetObjectId);
+  return id && label && src
+    ? {
+        id,
+        label,
+        src,
+        mediaType,
+        mimeType,
+        sizeBytes,
+        durationSeconds,
+        objectKey,
+        assetObjectId,
+      }
+    : null;
 }
 
-function hydrateCharacterReferences(value: unknown) {
+function hydrateCharacterReferences(
+  value: unknown,
+): CharacterReferenceImage[] | undefined {
   return Array.isArray(value)
     ? value.flatMap((reference) => {
         const hydrated = hydrateCharacterReference(reference);
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.tsx b/src/components/image-editor/ImageCanvasEditorShellView.tsx
index 4131d50a2..1701d3f47 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.tsx
@@ -18,6 +18,7 @@ type AssetDragPreview = {
 type ImageCanvasEditorShellViewProps = {
   editorRootRef: RefObject<HTMLElement | null>;
   uploadInputRef: RefObject<HTMLInputElement | null>;
+  uploadAccept?: string;
   onUploadInputChange: ChangeEventHandler<HTMLInputElement>;
   assetDragPreview: AssetDragPreview | null;
   sidebarProps: ComponentProps<typeof ImageCanvasSidebarView>;
@@ -29,6 +30,7 @@ type ImageCanvasEditorShellViewProps = {
 export function ImageCanvasEditorShellView({
   editorRootRef,
   uploadInputRef,
+  uploadAccept = 'image/*',
   onUploadInputChange,
   assetDragPreview,
   sidebarProps,
@@ -36,6 +38,11 @@ export function ImageCanvasEditorShellView({
   stageProps,
   metadataProps,
 }: ImageCanvasEditorShellViewProps) {
+  const uploadInputLabel =
+    uploadAccept.includes('video') || uploadAccept.includes('audio')
+      ? '上传媒体文件'
+      : '上传图片文件';
+
   return (
     <section
       ref={editorRootRef}
@@ -46,9 +53,9 @@ export function ImageCanvasEditorShellView({
       <input
         ref={uploadInputRef}
         type="file"
-        accept="image/*"
+        accept={uploadAccept}
         multiple
-        aria-label="上传图片文件"
+        aria-label={uploadInputLabel}
         hidden
         onChange={onUploadInputChange}
       />
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 4da5459cd..bab6628a9 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -14,9 +14,11 @@ export type CanvasAssetKind =
   | 'icon'
   | 'icon-spec'
   | 'ui-design'
-  | 'video';
+  | 'video'
+  | 'sound-effect'
+  | 'background-music';
 
-export type CanvasMediaType = 'image' | 'video';
+export type CanvasMediaType = 'image' | 'video' | 'audio';
 
 export type EditorAsset = {
   id: string;
@@ -101,6 +103,7 @@ export type CanvasTool =
   | 'upload'
   | 'generate'
   | 'video'
+  | 'music'
   | 'spec'
   | 'character'
   | 'icon'
@@ -133,6 +136,12 @@ export type CharacterReferenceImage = {
   id: string;
   label: string;
   src: string;
+  mediaType?: CanvasMediaType;
+  mimeType?: string;
+  sizeBytes?: number;
+  durationSeconds?: number;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
 };
 
 export type GenerateDialogState = {
@@ -144,7 +153,9 @@ export type GenerateDialogState = {
     | 'character'
     | 'icon'
     | 'ui-design'
-    | 'video';
+    | 'video'
+    | 'audio-sound-effect'
+    | 'audio-background-music';
   prompt: string;
   status: 'idle' | 'generating' | 'failed';
   composerOpen?: boolean;
@@ -166,6 +177,9 @@ export type GenerateDialogState = {
   videoDurationSeconds?: 4 | 5;
   videoMode?: 'std';
   videoSound?: 'off';
+  soundType?: 'ui' | 'foley' | 'ambient';
+  soundTempo?: 'slow' | 'medium' | 'fast';
+  makeInstrumental?: boolean;
   aspectRatio?: string;
   imageSize?: string;
   errorMessage?: string;
@@ -248,6 +262,9 @@ export type CharacterAnimationPanelState = {
 export type UploadTarget =
   | 'asset'
   | 'generation-reference'
+  | 'video-reference-image'
+  | 'video-reference-video'
+  | 'video-reference-audio'
   | 'spec-reference'
   | 'character-spec'
   | 'character-reference'
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 0b31c2916..c077db8e8 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -30,6 +30,7 @@ import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersist
 import { useImageCanvasStageController } from './useImageCanvasStageController';
 import { useImageCanvasStageInteractions } from './useImageCanvasStageInteractions';
 import { useImageCanvasUploadWorkflow } from './useImageCanvasUploadWorkflow';
+import { getEditorUploadAccept } from './ImageCanvasFileModel';
 import {
   DEFAULT_IMAGE_CANVAS_VIEWPORT,
   useImageCanvasViewportControls,
@@ -412,6 +413,7 @@ export function ImageCanvasEditorView() {
   });
   const {
     uploadInputRef,
+    uploadTarget,
     setUploadTarget,
     requestUpload,
     handleUploadInputChange,
@@ -869,6 +871,7 @@ export function ImageCanvasEditorView() {
     <ImageCanvasEditorShellView
       editorRootRef={editorRootRef}
       uploadInputRef={uploadInputRef}
+      uploadAccept={getEditorUploadAccept(uploadTarget)}
       onUploadInputChange={handleUploadInputChange}
       assetDragPreview={assetDragPreview}
       sidebarProps={sidebarProps}
diff --git a/src/components/image-editor/ImageCanvasFileModel.ts b/src/components/image-editor/ImageCanvasFileModel.ts
index 14ba912c1..a968dc6be 100644
--- a/src/components/image-editor/ImageCanvasFileModel.ts
+++ b/src/components/image-editor/ImageCanvasFileModel.ts
@@ -2,7 +2,86 @@ export function isImageFile(file: File) {
   return file.type.startsWith('image/');
 }
 
-export function readImageFileAsDataUrl(file: File) {
+export const SEEDANCE_REFERENCE_ACCEPT = {
+  image:
+    '.jpg,.jpeg,.png,.webp,.bmp,.tiff,.tif,.gif,.heic,.heif,image/jpeg,image/png,image/webp,image/bmp,image/tiff,image/gif,image/heic,image/heif',
+  video: '.mp4,.mov,video/mp4,video/quicktime',
+  audio: '.wav,.mp3,audio/wav,audio/x-wav,audio/mpeg,audio/mp3',
+} as const;
+
+export function getEditorUploadAccept(target: string) {
+  if (target === 'video-reference-video') {
+    return SEEDANCE_REFERENCE_ACCEPT.video;
+  }
+  if (target === 'video-reference-audio') {
+    return SEEDANCE_REFERENCE_ACCEPT.audio;
+  }
+  if (target === 'video-reference-image') {
+    return SEEDANCE_REFERENCE_ACCEPT.image;
+  }
+  return 'image/*';
+}
+
+export const SEEDANCE_REFERENCE_FILE_LIMITS = {
+  imageBytes: 30 * 1024 * 1024,
+  videoBytes: 50 * 1024 * 1024,
+  audioBytes: 15 * 1024 * 1024,
+  mediaMinDurationSeconds: 2,
+  mediaMaxDurationSeconds: 15,
+  mediaTotalDurationSeconds: 15,
+} as const;
+
+const SEEDANCE_IMAGE_EXTENSIONS = new Set([
+  'jpg',
+  'jpeg',
+  'png',
+  'webp',
+  'bmp',
+  'tiff',
+  'tif',
+  'gif',
+  'heic',
+  'heif',
+]);
+const SEEDANCE_VIDEO_EXTENSIONS = new Set(['mp4', 'mov']);
+const SEEDANCE_AUDIO_EXTENSIONS = new Set(['wav', 'mp3']);
+
+function getFileExtension(file: File) {
+  return file.name.split('.').pop()?.toLowerCase() ?? '';
+}
+
+function hasAllowedExtension(file: File, extensions: Set<string>) {
+  return extensions.has(getFileExtension(file));
+}
+
+export function isSeedanceReferenceImageFile(file: File) {
+  return (
+    (file.type.startsWith('image/') || file.type === '') &&
+    hasAllowedExtension(file, SEEDANCE_IMAGE_EXTENSIONS)
+  );
+}
+
+export function isSeedanceReferenceVideoFile(file: File) {
+  return (
+    (file.type === 'video/mp4' ||
+      file.type === 'video/quicktime' ||
+      file.type === '') &&
+    hasAllowedExtension(file, SEEDANCE_VIDEO_EXTENSIONS)
+  );
+}
+
+export function isSeedanceReferenceAudioFile(file: File) {
+  return (
+    (file.type === 'audio/wav' ||
+      file.type === 'audio/x-wav' ||
+      file.type === 'audio/mpeg' ||
+      file.type === 'audio/mp3' ||
+      file.type === '') &&
+    hasAllowedExtension(file, SEEDANCE_AUDIO_EXTENSIONS)
+  );
+}
+
+export function readFileAsDataUrl(file: File) {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -10,9 +89,46 @@ export function readImageFileAsDataUrl(file: File) {
         resolve(reader.result);
         return;
       }
-      reject(new Error('图片读取失败'));
+      reject(new Error('文件读取失败'));
     };
-    reader.onerror = () => reject(reader.error ?? new Error('图片读取失败'));
+    reader.onerror = () => reject(reader.error ?? new Error('文件读取失败'));
     reader.readAsDataURL(file);
   });
 }
+
+export function readImageFileAsDataUrl(file: File) {
+  return readFileAsDataUrl(file);
+}
+
+export function probeMediaDurationSeconds(
+  file: File,
+  mediaType: 'video' | 'audio',
+) {
+  return new Promise<number>((resolve, reject) => {
+    if (typeof document === 'undefined' || typeof URL === 'undefined') {
+      resolve(Number.NaN);
+      return;
+    }
+    const element =
+      mediaType === 'video'
+        ? document.createElement('video')
+        : document.createElement('audio');
+    const objectUrl = URL.createObjectURL(file);
+    const cleanup = () => {
+      URL.revokeObjectURL(objectUrl);
+      element.removeAttribute('src');
+      element.load();
+    };
+    element.preload = 'metadata';
+    element.onloadedmetadata = () => {
+      const duration = element.duration;
+      cleanup();
+      resolve(duration);
+    };
+    element.onerror = () => {
+      cleanup();
+      reject(new Error('读取媒体时长失败'));
+    };
+    element.src = objectUrl;
+  });
+}
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 52930553a..fa2070a5d 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -277,18 +277,60 @@ describe('ImageCanvasGenerationComposerView', () => {
 
     const panel = screen.getByRole('dialog', { name: '生成视频' });
     fireEvent.click(
-      within(panel).getByRole('button', { name: '添加视频参考图' }),
+      within(panel).getByRole('button', { name: '添加视频参考素材' }),
     );
 
     expect(onRequestUpload).not.toHaveBeenCalled();
     expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
-    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    const menu = screen.getByRole('menu', { name: '参考素材来源' });
     expect(
       within(menu).getByRole('menuitem', { name: '从画布中选择' }),
     ).toBeTruthy();
     expect(
       within(menu).getByRole('menuitem', { name: '上传图片' }),
     ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '上传视频' }),
+    ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '上传音频' }),
+    ).toBeTruthy();
+  });
+
+  it('点击生成视频父级面板任意区域会收起参考素材菜单', () => {
+    function VideoReferenceMenuHarness() {
+      const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
+        useState(true);
+      const dialog: GenerateDialogState = {
+        mode: 'video',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+        videoModel: 'seedance2.0-fast',
+        videoAspectRatio: '16:9',
+        videoDurationSeconds: 4,
+        videoResolution: '480p',
+        videoMode: 'std',
+        videoSound: 'off',
+      };
+
+      return (
+        <ImageCanvasGenerationComposerView
+          {...createComposerProps(dialog)}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+        />
+      );
+    }
+
+    render(<VideoReferenceMenuHarness />);
+
+    expect(screen.getByRole('menu', { name: '参考素材来源' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('textbox', { name: '视频描述' }));
+
+    expect(screen.queryByRole('menu', { name: '参考素材来源' })).toBeNull();
   });
 
   it('生成视频面板用子面板修改参数和模型，不展示 Veo，并在按钮内显示泥点文案', () => {
@@ -360,6 +402,52 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(screen.getByLabelText('当前视频模型').textContent).toBe('kling3.0');
     expect(screen.getByRole('button', { name: '模型 Kling 3.0' })).toBeTruthy();
   });
+
+  it('生成游戏音效面板展示 sound、type、tempo 并在按钮内显示泥点', () => {
+    const onSubmitImageGeneration = vi.fn();
+    renderComposer(
+      {
+        mode: 'audio-sound-effect',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        soundType: 'ui',
+        soundTempo: 'medium',
+      },
+      { onSubmitImageGeneration },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成游戏音效' });
+    expect(within(panel).getByRole('textbox', { name: 'sound提示词' })).toBeTruthy();
+    expect(within(panel).getByRole('button', { name: 'type UI' })).toBeTruthy();
+    expect(within(panel).getByRole('button', { name: 'tempo 中速' })).toBeTruthy();
+    expect(within(panel).getByRole('button', { name: '生成游戏音效' }).textContent).toBe(
+      '生成10泥点',
+    );
+
+    fireEvent.submit(panel);
+    expect(onSubmitImageGeneration).toHaveBeenCalledWith(
+      expect.objectContaining({ mode: 'audio-sound-effect' }),
+    );
+  });
+
+  it('生成游戏背景音乐面板只展示 gpt_description_prompt 并固定隐藏 instrumental 开关', () => {
+    renderComposer({
+      mode: 'audio-background-music',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成游戏背景音乐' });
+    expect(
+      within(panel).getByRole('textbox', { name: 'gpt_description_prompt' }),
+    ).toBeTruthy();
+    expect(within(panel).queryByText('make_instrumental')).toBeNull();
+    expect(within(panel).getByRole('button', { name: '生成游戏背景音乐' }).textContent).toBe(
+      '生成5泥点',
+    );
+  });
   it('生成规范参考图点击先弹来源菜单，不直接打开上传', () => {
     const onRequestUpload = vi.fn();
     const setIsGenerationReferenceMenuOpen = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 225b3bd49..75d6d2377 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -1,10 +1,11 @@
-import { Check, ChevronDown, Cpu, ImageIcon } from 'lucide-react';
+import { Check, ChevronDown, Cpu, Film, ImageIcon, Music } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
   type ReactNode,
   type RefObject,
   type SetStateAction,
+  useCallback,
   useRef,
   useState,
 } from 'react';
@@ -16,6 +17,7 @@ import {
 } from '../common/PlatformFloatingMenu';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
@@ -23,10 +25,13 @@ import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharact
 import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationModalView';
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 import {
   EDITOR_VIDEO_DURATION_OPTIONS,
   EDITOR_VIDEO_MODEL_OPTIONS,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
   SPEC_TYPE_LABEL,
   calculateEditorVideoPrice,
 } from './ImageCanvasGenerationModel';
@@ -144,25 +149,42 @@ function resetFailedVideoDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
+function isSeedanceVideoModel(model: string | undefined) {
+  return model === 'seedance2.0' || model === 'seedance2.0-fast';
+}
+
 function VideoReferenceChip({
   reference,
   index,
+  onRemove,
 }: {
-  reference: { id: string; label: string; src: string };
+  reference: { id: string; label: string; src: string; mediaType?: string };
   index: number;
+  onRemove: () => void;
 }) {
+  const mediaType = reference.mediaType ?? 'image';
+  const labelPrefix =
+    mediaType === 'video' ? '参考视频' : mediaType === 'audio' ? '参考音频' : '参考图';
+  const label = reference.label || `${labelPrefix}${index + 1}`;
+  const icon =
+    mediaType === 'video' ? (
+      <Film className="h-4 w-4" aria-hidden="true" />
+    ) : mediaType === 'audio' ? (
+      <Music className="h-4 w-4" aria-hidden="true" />
+    ) : (
+      <ImageIcon className="h-4 w-4" aria-hidden="true" />
+    );
   return (
-    <span
-      className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--video"
+    <ImageCanvasReferenceSlot
+      tone={mediaType === 'audio' ? 'audio' : 'video'}
+      icon={icon}
+      imageSrc={mediaType === 'image' ? reference.src : undefined}
+      label={label}
+      ariaLabel={label}
       title={reference.label}
-    >
-      <span className="image-canvas-editor__reference-chip-icon">
-        <img src={reference.src} alt="" aria-hidden="true" />
-      </span>
-      <span className="image-canvas-editor__reference-chip-label">
-        {reference.label || `参考图${index + 1}`}
-      </span>
-    </span>
+      onRemove={onRemove}
+      removeLabel={`删除${label}`}
+    />
   );
 }
 
@@ -236,8 +258,19 @@ function ImageCanvasVideoGenerationComposerView({
   const currentModel =
     EDITOR_VIDEO_MODEL_OPTIONS.find((item) => item.value === dialog.videoModel) ??
     EDITOR_VIDEO_MODEL_OPTIONS[0];
+  const supportsReferences = isSeedanceVideoModel(currentModel.value);
   const price = calculateEditorVideoPrice(resolution, durationSeconds);
   const isGenerating = dialog.status === 'generating';
+  const closeVideoFloatingPanels = useCallback(() => {
+    setOpenPanel(null);
+    setIsGenerationReferenceMenuOpen(false);
+  }, [setIsGenerationReferenceMenuOpen]);
+
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: openPanel !== null || isGenerationReferenceMenuOpen,
+    boundaryRefs: [paramsButtonRef, modelButtonRef, generationReferenceButtonRef],
+    onDismiss: closeVideoFloatingPanels,
+  });
 
   const updateVideoDialog = (patch: Partial<GenerateDialogState>) => {
     setGenerateDialog((currentDialog) =>
@@ -250,6 +283,13 @@ function ImageCanvasVideoGenerationComposerView({
     );
   };
 
+  const updateVideoModel = (model: GenerateDialogState['videoModel']) => {
+    updateVideoDialog({
+      videoModel: model,
+      ...(isSeedanceVideoModel(model) ? {} : { generationReferences: [] }),
+    });
+  };
+
   return (
     <>
       <form
@@ -265,30 +305,34 @@ function ImageCanvasVideoGenerationComposerView({
           }
         }}
       >
-        <div className="image-canvas-editor__reference-strip">
-          {(dialog.generationReferences ?? []).map((reference, index) => (
-            <VideoReferenceChip
-              key={reference.id}
-              reference={reference}
-              index={index}
+        {supportsReferences ? (
+          <div className="image-canvas-editor__reference-strip">
+            {(dialog.generationReferences ?? []).map((reference, index) => (
+              <VideoReferenceChip
+                key={reference.id}
+                reference={reference}
+                index={index}
+                onRemove={() =>
+                  updateVideoDialog({
+                    generationReferences: (
+                      dialog.generationReferences ?? []
+                    ).filter((item) => item.id !== reference.id),
+                  })
+                }
+              />
+            ))}
+            <ImageCanvasReferenceSlot
+              buttonRef={generationReferenceButtonRef}
+              tone="video"
+              icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+              label="参考"
+              ariaLabel="添加视频参考素材"
+              disabled={isGenerating}
+              isAdd
+              onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
             />
-          ))}
-          <button
-            ref={generationReferenceButtonRef}
-            type="button"
-            className="image-canvas-editor__reference-chip image-canvas-editor__reference-chip--upload image-canvas-editor__reference-chip--video"
-            disabled={isGenerating}
-            aria-label="添加视频参考图"
-            onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
-          >
-            <span className="image-canvas-editor__reference-chip-icon">
-              <ImageIcon className="h-4 w-4" aria-hidden="true" />
-            </span>
-            <span className="image-canvas-editor__reference-chip-label">
-              参考图
-            </span>
-          </button>
-        </div>
+          </div>
+        ) : null}
         <PlatformTextField
           variant="textarea"
           aria-label="视频描述"
@@ -441,9 +485,7 @@ function ImageCanvasVideoGenerationComposerView({
                             disabled={isGenerating}
                             className="image-canvas-editor__option-popover-choice--model"
                             ariaLabel={option.label}
-                            onClick={() =>
-                              updateVideoDialog({ videoModel: option.value })
-                            }
+                            onClick={() => updateVideoModel(option.value)}
                           >
                             <span
                               className="image-canvas-editor__model-icon"
@@ -487,11 +529,11 @@ function ImageCanvasVideoGenerationComposerView({
           </PlatformActionButton>
         </div>
       </form>
-      {isGenerationReferenceMenuOpen
+      {isGenerationReferenceMenuOpen && supportsReferences
         ? renderEditorPortal(
             <PlatformFloatingMenu
               className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="参考图来源"
+              label="参考素材来源"
               placement="top-start"
               style={buildPortalMenuStyle(
                 generationReferenceButtonRef.current,
@@ -510,11 +552,29 @@ function ImageCanvasVideoGenerationComposerView({
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen(false);
                   setIsPickingGenerationReferenceFromCanvas(false);
-                  onRequestUpload('generation-reference');
+                  onRequestUpload('video-reference-image');
                 }}
               >
                 上传图片
               </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(false);
+                  onRequestUpload('video-reference-video');
+                }}
+              >
+                上传视频
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(false);
+                  onRequestUpload('video-reference-audio');
+                }}
+              >
+                上传音频
+              </PlatformFloatingMenuItem>
             </PlatformFloatingMenu>,
           )
         : null}
@@ -522,6 +582,234 @@ function ImageCanvasVideoGenerationComposerView({
   );
 }
 
+const SOUND_TYPE_OPTIONS = [
+  { label: 'UI', value: 'ui' },
+  { label: '拟音', value: 'foley' },
+  { label: '环境', value: 'ambient' },
+] as const;
+
+const SOUND_TEMPO_OPTIONS = [
+  { label: '慢速', value: 'slow' },
+  { label: '中速', value: 'medium' },
+  { label: '快速', value: 'fast' },
+] as const;
+
+function resetFailedAudioDialogStatus(dialog: GenerateDialogState) {
+  return {
+    ...dialog,
+    status: dialog.status === 'failed' ? 'idle' : dialog.status,
+    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
+  };
+}
+
+function ImageCanvasAudioGenerationComposerView({
+  dialog,
+  style,
+  setGenerateDialog,
+  renderEditorPortal,
+  buildPortalMenuStyle,
+  onSubmit,
+}: {
+  dialog: GenerateDialogState;
+  style: CSSProperties;
+  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
+  renderEditorPortal: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
+  onSubmit: (dialog: GenerateDialogState) => void;
+}) {
+  const [openPanel, setOpenPanel] = useState<'type' | 'tempo' | null>(null);
+  const typeButtonRef = useRef<HTMLButtonElement | null>(null);
+  const tempoButtonRef = useRef<HTMLButtonElement | null>(null);
+  const isSoundEffect = dialog.mode === 'audio-sound-effect';
+  const isGenerating = dialog.status === 'generating';
+  const currentType =
+    SOUND_TYPE_OPTIONS.find((option) => option.value === dialog.soundType) ??
+    SOUND_TYPE_OPTIONS[0];
+  const currentTempo =
+    SOUND_TEMPO_OPTIONS.find((option) => option.value === dialog.soundTempo) ??
+    SOUND_TEMPO_OPTIONS[1];
+  const dialogLabel = isSoundEffect ? '生成游戏音效' : '生成游戏背景音乐';
+  const cost = isSoundEffect
+    ? EDITOR_GENERATION_MUD_POINT_CONFIG.soundEffect
+    : EDITOR_GENERATION_MUD_POINT_CONFIG.backgroundMusic;
+
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: openPanel !== null,
+    boundaryRefs: [typeButtonRef, tempoButtonRef],
+    onDismiss: () => setOpenPanel(null),
+  });
+
+  const updateAudioDialog = (patch: Partial<GenerateDialogState>) => {
+    setGenerateDialog((currentDialog) =>
+      currentDialog?.mode === dialog.mode
+        ? {
+            ...resetFailedAudioDialogStatus(currentDialog),
+            ...patch,
+          }
+        : currentDialog,
+    );
+  };
+
+  return (
+    <form
+      className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--audio"
+      style={style}
+      role="dialog"
+      aria-label={dialogLabel}
+      onPointerDown={(event) => event.stopPropagation()}
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (!isGenerating) {
+          onSubmit(dialog);
+        }
+      }}
+    >
+      <PlatformTextField
+        variant="textarea"
+        aria-label={isSoundEffect ? 'sound提示词' : 'gpt_description_prompt'}
+        value={dialog.prompt}
+        disabled={isGenerating}
+        placeholder={
+          isSoundEffect ? '描述需要生成的游戏音效' : '描述需要生成的游戏背景音乐'
+        }
+        size="sm"
+        density="compact"
+        className="image-canvas-editor__generation-prompt"
+        onChange={(event) => updateAudioDialog({ prompt: event.target.value })}
+      />
+      {dialog.status === 'failed' ? (
+        <PlatformStatusMessage
+          tone="error"
+          surface="platform"
+          size="xs"
+          className="image-canvas-editor__generate-status"
+          role="alert"
+        >
+          {dialog.errorMessage}
+        </PlatformStatusMessage>
+      ) : null}
+      <div className="image-canvas-editor__generation-composer-footer">
+        {isSoundEffect ? (
+          <>
+            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
+              <PlatformInlineOptionButton
+                ref={typeButtonRef}
+                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+                aria-label={`type ${currentType.label}`}
+                aria-expanded={openPanel === 'type'}
+                disabled={isGenerating}
+                trailingIcon={<ChevronDown className="h-3 w-3" />}
+                onClick={() =>
+                  setOpenPanel((currentPanel) =>
+                    currentPanel === 'type' ? null : 'type',
+                  )
+                }
+              >
+                type {currentType.label}
+              </PlatformInlineOptionButton>
+              {openPanel === 'type'
+                ? renderEditorPortal(
+                    <PlatformFloatingMenu
+                      className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+                      label="音效 type 选项"
+                      placement="top-start"
+                      style={buildPortalMenuStyle(typeButtonRef.current, 'above')}
+                    >
+                      <div className="image-canvas-editor__option-popover-items">
+                        {SOUND_TYPE_OPTIONS.map((option) => (
+                          <VideoOptionChoice
+                            key={option.value}
+                            selected={currentType.value === option.value}
+                            disabled={isGenerating}
+                            ariaLabel={`type ${option.label}`}
+                            onClick={() =>
+                              updateAudioDialog({ soundType: option.value })
+                            }
+                          >
+                            {option.label}
+                          </VideoOptionChoice>
+                        ))}
+                      </div>
+                    </PlatformFloatingMenu>,
+                  )
+                : null}
+            </div>
+            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--audio-tempo">
+              <PlatformInlineOptionButton
+                ref={tempoButtonRef}
+                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+                aria-label={`tempo ${currentTempo.label}`}
+                aria-expanded={openPanel === 'tempo'}
+                disabled={isGenerating}
+                trailingIcon={<ChevronDown className="h-3 w-3" />}
+                onClick={() =>
+                  setOpenPanel((currentPanel) =>
+                    currentPanel === 'tempo' ? null : 'tempo',
+                  )
+                }
+              >
+                tempo {currentTempo.label}
+              </PlatformInlineOptionButton>
+              {openPanel === 'tempo'
+                ? renderEditorPortal(
+                    <PlatformFloatingMenu
+                      className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+                      label="音效 tempo 选项"
+                      placement="top-start"
+                      style={buildPortalMenuStyle(
+                        tempoButtonRef.current,
+                        'above',
+                      )}
+                    >
+                      <div className="image-canvas-editor__option-popover-items">
+                        {SOUND_TEMPO_OPTIONS.map((option) => (
+                          <VideoOptionChoice
+                            key={option.value}
+                            selected={currentTempo.value === option.value}
+                            disabled={isGenerating}
+                            ariaLabel={`tempo ${option.label}`}
+                            onClick={() =>
+                              updateAudioDialog({ soundTempo: option.value })
+                            }
+                          >
+                            {option.label}
+                          </VideoOptionChoice>
+                        ))}
+                      </div>
+                    </PlatformFloatingMenu>,
+                  )
+                : null}
+            </div>
+          </>
+        ) : null}
+        <PlatformActionButton
+          type="submit"
+          tone="secondary"
+          size="xs"
+          shape="pill"
+          className="image-canvas-editor__generation-submit"
+          disabled={isGenerating}
+          aria-label={dialogLabel}
+        >
+          {isGenerating ? (
+            '生成中'
+          ) : (
+            <>
+              <span>生成</span>
+              <span className="image-canvas-editor__mud-point-inline">
+                {cost}泥点
+              </span>
+            </>
+          )}
+        </PlatformActionButton>
+      </div>
+    </form>
+  );
+}
+
 export function ImageCanvasGenerationComposerView({
   specToolWrapRef,
   characterSpecButtonRef,
@@ -690,6 +978,20 @@ export function ImageCanvasGenerationComposerView({
         />
       ) : null}
 
+      {(generateDialog?.mode === 'audio-sound-effect' ||
+        generateDialog?.mode === 'audio-background-music') &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <ImageCanvasAudioGenerationComposerView
+          dialog={generateDialog}
+          style={generationComposerStyle}
+          setGenerateDialog={setGenerateDialog}
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
+          onSubmit={onSubmitImageGeneration}
+        />
+      ) : null}
+
       {generateDialog?.mode === 'character' && generationComposerStyle ? (
         <ImageCanvasCharacterGenerationComposerView
           dialog={generateDialog}
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index a9b49e8b0..0f2a60721 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -18,6 +18,8 @@ import {
   createEditDialogDraft,
   createGenerateDialogDraft,
   createIconGenerationDialogDraft,
+  createSoundEffectGenerationDialogDraft,
+  createBackgroundMusicGenerationDialogDraft,
   createQuickEditPanelDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
@@ -182,6 +184,41 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('creates audio generation drafts for sound effects and background music', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+
+    expect(createSoundEffectGenerationDialogDraft({ canvasSize, viewport }))
+      .toMatchObject({
+        mode: 'audio-sound-effect',
+        status: 'idle',
+        composerOpen: true,
+        soundType: 'ui',
+        soundTempo: 'medium',
+        placeholder: {
+          x: 270,
+          y: 300,
+          width: 420,
+          height: 120,
+          originalWidth: 420,
+          originalHeight: 120,
+        },
+      });
+    expect(createBackgroundMusicGenerationDialogDraft({ canvasSize, viewport }))
+      .toMatchObject({
+        mode: 'audio-background-music',
+        status: 'idle',
+        composerOpen: true,
+        makeInstrumental: true,
+        placeholder: {
+          x: 270,
+          y: 300,
+          width: 420,
+          height: 120,
+        },
+      });
+  });
+
   it('creates edit, quick-edit, and character animation panel drafts', () => {
     const sourceLayer = createLayer({
       prompt: '原图提示',
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index b43f6d4e4..6f02cd7a5 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -11,6 +11,8 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   CHARACTER_ANIMATION_DURATION_OPTIONS,
+  AUDIO_FRAME_DISPLAY_SIZE,
+  AUDIO_FRAME_ORIGINAL_SIZE,
   CHARACTER_FRAME_DISPLAY_SIZE,
   CHARACTER_FRAME_ORIGINAL_SIZE,
   createCanvasLayerReference,
@@ -55,6 +57,11 @@ function resetFailedGenerationDialog(dialog: GenerateDialogState) {
   };
 }
 
+function isSeedanceVideoModel(model: string | undefined) {
+  const resolvedModel = model ?? DEFAULT_VIDEO_MODEL;
+  return resolvedModel === 'seedance2.0' || resolvedModel === 'seedance2.0-fast';
+}
+
 function resolveImageDimensionDefaults(imageModel: string) {
   const dimensionOptions =
     EDITOR_IMAGE_DIMENSION_OPTIONS[
@@ -221,6 +228,57 @@ export function createVideoGenerationDialogDraft({
   };
 }
 
+export function createSoundEffectGenerationDialogDraft({
+  canvasSize,
+  viewport,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+}): Omit<CanvasGenerationDialogState, 'id'> {
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  return {
+    mode: 'audio-sound-effect',
+    prompt: '',
+    status: 'idle',
+    composerOpen: true,
+    soundType: 'ui',
+    soundTempo: 'medium',
+    placeholder: {
+      x: worldCenter.x - AUDIO_FRAME_DISPLAY_SIZE.width / 2,
+      y: worldCenter.y - AUDIO_FRAME_DISPLAY_SIZE.height / 2,
+      width: AUDIO_FRAME_DISPLAY_SIZE.width,
+      height: AUDIO_FRAME_DISPLAY_SIZE.height,
+      originalWidth: AUDIO_FRAME_ORIGINAL_SIZE.width,
+      originalHeight: AUDIO_FRAME_ORIGINAL_SIZE.height,
+    },
+  };
+}
+
+export function createBackgroundMusicGenerationDialogDraft({
+  canvasSize,
+  viewport,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+}): Omit<CanvasGenerationDialogState, 'id'> {
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  return {
+    mode: 'audio-background-music',
+    prompt: '',
+    status: 'idle',
+    composerOpen: true,
+    makeInstrumental: true,
+    placeholder: {
+      x: worldCenter.x - AUDIO_FRAME_DISPLAY_SIZE.width / 2,
+      y: worldCenter.y - AUDIO_FRAME_DISPLAY_SIZE.height / 2,
+      width: AUDIO_FRAME_DISPLAY_SIZE.width,
+      height: AUDIO_FRAME_DISPLAY_SIZE.height,
+      originalWidth: AUDIO_FRAME_ORIGINAL_SIZE.width,
+      originalHeight: AUDIO_FRAME_ORIGINAL_SIZE.height,
+    },
+  };
+}
+
 export function createUiDesignGenerationDialogDraft({
   canvasSize,
   viewport,
@@ -338,6 +396,9 @@ export function appendGenerationReference(
       composerOpen: true,
     };
   }
+  if (dialog?.mode === 'video' && !isSeedanceVideoModel(dialog.videoModel)) {
+    return dialog;
+  }
   return dialog?.mode === 'generate' || dialog?.mode === 'video'
     ? {
         ...resetFailedGenerationDialog(dialog),
@@ -459,7 +520,9 @@ export function hideGeneratedLayerComposerAfterBlur(
   return (dialog?.mode === 'generate' ||
     dialog?.mode === 'spec' ||
     dialog?.mode === 'character' ||
-    dialog?.mode === 'icon') &&
+    dialog?.mode === 'icon' ||
+    dialog?.mode === 'audio-sound-effect' ||
+    dialog?.mode === 'audio-background-music') &&
     dialog.status !== 'generating'
     ? {
         ...dialog,
@@ -471,7 +534,9 @@ export function hideGeneratedLayerComposerAfterBlur(
 export function closeGenerateComposerDialog(
   dialog: GenerateDialogState | null,
 ): GenerateDialogState | null {
-  return dialog?.mode === 'generate'
+  return dialog?.mode === 'generate' ||
+    dialog?.mode === 'audio-sound-effect' ||
+    dialog?.mode === 'audio-background-music'
     ? {
         ...dialog,
         composerOpen: false,
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
index 22de4e2ba..eb71e4913 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
@@ -86,6 +86,34 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
   });
 
+  it('closes option panels when clicking parent panel outside trigger buttons', () => {
+    render(
+      <ImageOptionsHarness
+        initialDialog={{
+          mode: 'generate',
+          prompt: '',
+          status: 'idle',
+          imageModel: IMAGE_MODEL_NANOBANANA2,
+          aspectRatio: '1:1',
+          imageSize: '1K',
+        }}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+    );
+    expect(
+      screen.getByRole('menu', { name: '生成图片尺寸选项' }),
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByLabelText('当前模型'));
+
+    expect(
+      screen.queryByRole('menu', { name: '生成图片尺寸选项' }),
+    ).toBeNull();
+  });
+
   it('renders model choices as one model per row and uses a check mark for selection', () => {
     const rememberImageModel = vi.fn();
     render(
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index 6f1025c0c..a4f6e40f7 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -4,6 +4,7 @@ import {
   type Dispatch,
   type ReactNode,
   type SetStateAction,
+  useCallback,
   useRef,
   useState,
 } from 'react';
@@ -11,12 +12,13 @@ import {
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFloatingMenu } from '../common/PlatformFloatingMenu';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
+import type { GenerateDialogState } from './ImageCanvasEditorTypes';
 import {
   EDITOR_IMAGE_DIMENSION_OPTIONS,
   EDITOR_IMAGE_MODEL_OPTIONS,
   IMAGE_MODEL_NANOBANANA2,
 } from './ImageCanvasGenerationModel';
-import type { GenerateDialogState } from './ImageCanvasEditorTypes';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasGenerationImageOptionsViewProps = {
   dialog: GenerateDialogState;
@@ -44,7 +46,7 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
-export function getImageDimensionOptions(model: string | null | undefined) {
+function getImageDimensionOptions(model: string | null | undefined) {
   return (
     EDITOR_IMAGE_DIMENSION_OPTIONS[
       (model ?? IMAGE_MODEL_NANOBANANA2) as keyof typeof EDITOR_IMAGE_DIMENSION_OPTIONS
@@ -52,7 +54,7 @@ export function getImageDimensionOptions(model: string | null | undefined) {
   );
 }
 
-export function normalizeImageDialogSelection(dialog: GenerateDialogState) {
+function normalizeImageDialogSelection(dialog: GenerateDialogState) {
   const model = dialog.imageModel ?? IMAGE_MODEL_NANOBANANA2;
   const options = getImageDimensionOptions(model);
   const aspectRatios = options.aspectRatios as readonly string[];
@@ -123,6 +125,13 @@ export function ImageCanvasGenerationImageOptionsView({
   const selectedModelLabel = getImageModelLabel(selection.model);
   const isGenerating = dialog.status === 'generating';
   const labelPrefix = optionLabelPrefix ?? '生成图片';
+  const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
+
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: openPanel !== null,
+    boundaryRefs: [dimensionsButtonRef, modelButtonRef],
+    onDismiss: dismissOpenPanel,
+  });
 
   const updateDialog = (patch: Partial<GenerateDialogState>) => {
     setGenerateDialog((currentDialog) =>
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index 88351f677..b5cec31a0 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -5,6 +5,7 @@ import type {
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
 import {
+  createAudioResultLayer,
   createGeneratedResultLayer,
   createIconSpritesheetResultLayers,
   createQuickEditResultLayer,
@@ -222,4 +223,58 @@ describe('ImageCanvasGenerationLayerModel', () => {
       assetKind: 'icon',
     });
   });
+
+  it('creates audio result layers centered on the active placeholder', () => {
+    const layer = createAudioResultLayer({
+      generated: {
+        audioSrc: '/generated-character-drafts/editor-audios/sfx.mp3',
+        width: 420,
+        height: 120,
+        sourceType: 'generated',
+        prompt: '金币掉落叮当声',
+        actualPrompt: '金币掉落叮当声',
+        model: 'audio1.0',
+        provider: 'VectorEngine',
+        taskId: 'sound-task-1',
+        priceMudPoints: 10,
+        audioKind: 'sound-effect',
+      },
+      generatedIndex: 14,
+      title: '游戏音效 14',
+      canvasSize: { width: 900, height: 640 },
+      viewport: { x: 10, y: 20, scale: 2 },
+      frame: {
+        x: 80,
+        y: 60,
+        width: 420,
+        height: 120,
+        originalWidth: 420,
+        originalHeight: 120,
+      },
+      generationInputs: {
+        fields: [{ title: 'sound', value: '金币掉落叮当声' }],
+        references: [],
+      },
+    });
+
+    expect(layer).toMatchObject({
+      id: 'layer-audio-14',
+      resourceId: 'local-resource-audio-14',
+      title: '游戏音效 14',
+      src: '/generated-character-drafts/editor-audios/sfx.mp3',
+      mediaType: 'audio',
+      assetKind: 'sound-effect',
+      x: 80,
+      y: 60,
+      width: 420,
+      height: 120,
+      originalWidth: 420,
+      originalHeight: 120,
+      sourceType: 'generated',
+      prompt: '金币掉落叮当声',
+      model: 'audio1.0',
+      provider: 'VectorEngine',
+      taskId: 'sound-task-1',
+    });
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index af77efbc7..473051f97 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -2,6 +2,7 @@ import type {
   EditorIconSpritesheetGenerationResult,
   EditorIconSpritesheetIconResult,
   EditorImageGenerationResult,
+  EditorAudioGenerationResult,
   EditorVideoGenerationResult,
 } from '../../services/image-editor/editorProjectClient';
 import { resolveLayerResolutionSize } from './ImageCanvasEditorModel';
@@ -54,6 +55,16 @@ type VideoResultLayerOptions = {
   frame?: GenerateDialogState['placeholder'];
 };
 
+type AudioResultLayerOptions = {
+  generated: EditorAudioGenerationResult;
+  generatedIndex: number;
+  title: string;
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  generationInputs: CanvasGenerationInputs;
+  frame?: GenerateDialogState['placeholder'];
+};
+
 function getViewportWorldCenter({
   canvasSize,
   viewport,
@@ -296,3 +307,53 @@ export function createVideoResultLayer({
     generationInputs,
   };
 }
+
+export function createAudioResultLayer({
+  generated,
+  generatedIndex,
+  title,
+  canvasSize,
+  viewport,
+  generationInputs,
+  frame,
+}: AudioResultLayerOptions): CanvasLayer {
+  const originalWidth = generated.width || 420;
+  const originalHeight = generated.height || 120;
+  const { width, height } = resolveLayerResolutionSize(
+    originalWidth,
+    originalHeight,
+    { width: 420, height: 120 },
+  );
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  const frameX =
+    frame && frame.width > 0
+      ? frame.x + frame.width / 2 - width / 2
+      : undefined;
+  const frameY =
+    frame && frame.height > 0
+      ? frame.y + frame.height / 2 - height / 2
+      : undefined;
+
+  return {
+    id: `layer-audio-${generatedIndex}`,
+    resourceId: `local-resource-audio-${generatedIndex}`,
+    title,
+    src: generated.audioSrc,
+    mediaType: 'audio',
+    assetKind: generated.audioKind,
+    x: frameX ?? worldCenter.x - width / 2,
+    y: frameY ?? worldCenter.y - height / 2,
+    width,
+    height,
+    originalWidth,
+    originalHeight,
+    zIndex: generatedIndex + 10,
+    sourceType: generated.sourceType,
+    prompt: generated.prompt,
+    actualPrompt: generated.actualPrompt ?? generated.prompt,
+    model: generated.model,
+    provider: generated.provider,
+    taskId: generated.taskId,
+    generationInputs,
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 38774433e..7c8782f92 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -30,6 +30,8 @@ export const EDITOR_GENERATION_MUD_POINT_CONFIG = {
     '480p': 10,
     '720p': 20,
   },
+  soundEffect: 10,
+  backgroundMusic: 5,
 } as const;
 export const SPEC_GENERATION_COST = EDITOR_GENERATION_MUD_POINT_CONFIG.spec;
 export const SPEC_GENERATION_SIZE = '2048x1152';
@@ -82,6 +84,12 @@ export const VIDEO_MODEL_SEEDANCE_2 = 'seedance2.0';
 export const VIDEO_MODEL_SEEDANCE_2_FAST = 'seedance2.0-fast';
 export const DEFAULT_VIDEO_MODEL = VIDEO_MODEL_SEEDANCE_2_FAST;
 export const CHARACTER_ANIMATION_MODEL = VIDEO_MODEL_SEEDANCE_2_FAST;
+export const SEEDANCE_VIDEO_REFERENCE_LIMITS = {
+  image: 9,
+  video: 3,
+  audio: 3,
+  requestBytes: 64 * 1024 * 1024,
+} as const;
 export const CHARACTER_ANIMATION_ACTION_PROMPTS = [
   { label: '待机', text: '待机动作，轻微呼吸起伏。' },
   { label: '行走', text: '循环行走动作，步伐稳定。' },
@@ -109,6 +117,8 @@ export const CHARACTER_ANIMATION_DURATION_OPTIONS = [
 ] as const;
 export const VIDEO_FRAME_ORIGINAL_SIZE = { width: 1280, height: 720 };
 export const VIDEO_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
+export const AUDIO_FRAME_ORIGINAL_SIZE = { width: 420, height: 120 };
+export const AUDIO_FRAME_DISPLAY_SIZE = { width: 420, height: 120 };
 export const EDITOR_VIDEO_MODEL_OPTIONS = [
   { label: 'Seedance 2.0 Fast', value: VIDEO_MODEL_SEEDANCE_2_FAST },
   { label: 'Seedance 2.0', value: VIDEO_MODEL_SEEDANCE_2 },
@@ -254,6 +264,15 @@ export function getLayerKindLabel(layer: CanvasLayer) {
   if (layer.assetKind === 'video' || layer.mediaType === 'video') {
     return '视频';
   }
+  if (layer.assetKind === 'sound-effect') {
+    return '音效';
+  }
+  if (layer.assetKind === 'background-music') {
+    return '背景音乐';
+  }
+  if (layer.mediaType === 'audio') {
+    return '音频';
+  }
   return null;
 }
 
@@ -276,6 +295,15 @@ export function formatLayerImageType(layer: CanvasLayer) {
   if (layer.assetKind === 'video' || layer.mediaType === 'video') {
     return '生成视频';
   }
+  if (layer.assetKind === 'sound-effect') {
+    return '游戏音效';
+  }
+  if (layer.assetKind === 'background-music') {
+    return '游戏背景音乐';
+  }
+  if (layer.mediaType === 'audio') {
+    return '生成音频';
+  }
   return isGeneratedLayer(layer) ? '生成图片' : '上传图片';
 }
 
@@ -307,10 +335,16 @@ export function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
 export function createCanvasLayerReference(
   layer: CanvasLayer,
 ): CharacterReferenceImage {
+  const mediaType = layer.mediaType === 'video' || layer.mediaType === 'audio'
+    ? layer.mediaType
+    : undefined;
   return {
     id: `canvas-${layer.id}`,
     label: layer.title,
-    src: layer.src,
+    src: layer.objectKey?.trim() || layer.src,
+    ...(mediaType ? { mediaType } : {}),
+    objectKey: layer.objectKey ?? undefined,
+    assetObjectId: layer.assetObjectId ?? undefined,
   };
 }
 
@@ -340,13 +374,55 @@ export function buildVideoGenerationInputs(
   prompt: string,
   references?: CharacterReferenceImage[],
 ): CanvasGenerationInputs {
+  const mediaIndexes = {
+    image: 0,
+    video: 0,
+    audio: 0,
+  };
   return {
     fields: createGenerationInputField('视频描述', prompt),
-    references: (references ?? []).map((reference, index) => ({
-      title: `参考图 ${index + 1}`,
-      label: reference.label,
-      src: reference.src,
-    })),
+    references: (references ?? []).map((reference) => {
+      const mediaType = reference.mediaType ?? 'image';
+      mediaIndexes[mediaType] += 1;
+      const title =
+        mediaType === 'video'
+          ? `参考视频 ${mediaIndexes.video}`
+          : mediaType === 'audio'
+            ? `参考音频 ${mediaIndexes.audio}`
+            : `参考图 ${mediaIndexes.image}`;
+      return {
+        title,
+        label: reference.label,
+        src: reference.src,
+      };
+    }),
+  };
+}
+
+export function buildSoundEffectGenerationInputs(
+  sound: string,
+  soundType: string,
+  tempo: string,
+): CanvasGenerationInputs {
+  return {
+    fields: [
+      ...createGenerationInputField('sound', sound),
+      ...createGenerationInputField('type', soundType),
+      ...createGenerationInputField('tempo', tempo),
+    ],
+    references: [],
+  };
+}
+
+export function buildBackgroundMusicGenerationInputs(
+  gptDescriptionPrompt: string,
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField(
+      'gpt_description_prompt',
+      gptDescriptionPrompt,
+    ),
+    references: [],
   };
 }
 
@@ -471,7 +547,9 @@ export function isCanvasGenerationDialog(
         dialog.mode === 'character' ||
         dialog.mode === 'icon' ||
         dialog.mode === 'ui-design' ||
-        dialog.mode === 'video'),
+        dialog.mode === 'video' ||
+        dialog.mode === 'audio-sound-effect' ||
+        dialog.mode === 'audio-background-music'),
   );
 }
 
@@ -493,6 +571,12 @@ export function getGenerationFrameAriaLabel(
   if (dialog.mode === 'video') {
     return '视频生成占位图';
   }
+  if (dialog.mode === 'audio-sound-effect') {
+    return '音效生成占位图';
+  }
+  if (dialog.mode === 'audio-background-music') {
+    return '背景音乐生成占位图';
+  }
   return '图像生成占位图';
 }
 
@@ -512,6 +596,12 @@ export function getGenerationFrameLabel(dialog: CanvasGenerationDialogState) {
   if (dialog.mode === 'video') {
     return 'Video Generator';
   }
+  if (dialog.mode === 'audio-sound-effect') {
+    return 'Sound Generator';
+  }
+  if (dialog.mode === 'audio-background-music') {
+    return 'Music Generator';
+  }
   return 'Image Generator';
 }
 
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index a5000712d..e82665ef3 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -335,6 +335,150 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
     });
   });
 
+
+  it('builds seedance video plans with multimodal references', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'video',
+        prompt: '  根据参考生成角色宣传片  ',
+        status: 'idle',
+        videoModel: 'seedance2.0-fast',
+        videoResolution: '720p',
+        videoDurationSeconds: 5,
+        generationReferences: [
+          {
+            id: 'image-ref',
+            label: '参考图.png',
+            src: 'data:image/png;base64,image',
+            mediaType: 'image',
+            mimeType: 'image/png',
+            sizeBytes: 1024,
+          },
+          {
+            id: 'video-ref',
+            label: '参考视频.mp4',
+            src: 'https://signed.example.com/video.mp4',
+            mediaType: 'video',
+            mimeType: 'video/mp4',
+            sizeBytes: 2048,
+            durationSeconds: 4,
+            objectKey:
+              'generated-character-drafts/editor/seedance-references/video/video.mp4',
+          },
+          {
+            id: 'audio-ref',
+            label: '参考音频.mp3',
+            src: 'https://signed.example.com/audio.mp3',
+            mediaType: 'audio',
+            mimeType: 'audio/mpeg',
+            sizeBytes: 512,
+            durationSeconds: 3,
+            objectKey:
+              'generated-character-drafts/editor/seedance-references/audio/audio.mp3',
+          },
+        ],
+      },
+      layers: [],
+      nextGeneratedIndex: 6,
+    });
+
+    expect(plan).toMatchObject({
+      kind: 'video',
+      input: {
+        model: 'seedance2.0-fast',
+        referenceImageSrcs: ['data:image/png;base64,image'],
+        referenceVideoSrcs: [
+          'generated-character-drafts/editor/seedance-references/video/video.mp4',
+        ],
+        referenceAudioSrcs: [
+          'generated-character-drafts/editor/seedance-references/audio/audio.mp3',
+        ],
+      },
+      result: {
+        generationInputs: {
+          references: [
+            { title: '参考图 1', label: '参考图.png' },
+            { title: '参考视频 1', label: '参考视频.mp4' },
+            { title: '参考音频 1', label: '参考音频.mp3' },
+          ],
+        },
+      },
+    });
+  });
+
+  it('does not submit references to non seedance video models', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'video',
+        prompt: '镜头推进',
+        status: 'idle',
+        videoModel: 'kling3.0',
+        generationReferences: [
+          {
+            id: 'image-ref',
+            label: '参考图.png',
+            src: 'data:image/png;base64,image',
+            mediaType: 'image',
+          },
+        ],
+      },
+      layers: [],
+      nextGeneratedIndex: 2,
+    });
+
+    expect(plan.kind).toBe('video');
+    if (plan.kind === 'video') {
+      expect(plan.input).not.toHaveProperty('referenceImageSrcs');
+      expect(plan.input).not.toHaveProperty('referenceVideoSrcs');
+      expect(plan.input).not.toHaveProperty('referenceAudioSrcs');
+    }
+  });
+
+  it('rejects seedance video plans that only contain audio references', () => {
+    expect(() =>
+      buildImageGenerationSubmissionPlan({
+        dialog: {
+          mode: 'video',
+          prompt: '根据音频生成视频',
+          status: 'idle',
+          videoModel: 'seedance2.0',
+          generationReferences: [
+            {
+              id: 'audio-ref',
+              label: '旁白.wav',
+              src: 'data:audio/wav;base64,audio',
+              mediaType: 'audio',
+              durationSeconds: 4,
+            },
+          ],
+        },
+        layers: [],
+        nextGeneratedIndex: 2,
+      }),
+    ).toThrow('参考音频必须搭配参考图片或参考视频');
+  });
+
+  it('rejects seedance video plans that exceed reference count limits', () => {
+    expect(() =>
+      buildImageGenerationSubmissionPlan({
+        dialog: {
+          mode: 'video',
+          prompt: '生成视频',
+          status: 'idle',
+          videoModel: 'seedance2.0-fast',
+          generationReferences: Array.from({ length: 10 }, (_, index) => ({
+            id: `image-${index}`,
+            label: `参考图${index}.png`,
+            src: `data:image/png;base64,${index}`,
+            mediaType: 'image' as const,
+          })),
+        },
+        layers: [],
+        nextGeneratedIndex: 2,
+      }),
+    ).toThrow('参考图片最多 9 张');
+  });
+
   it('builds video generation plans with seedance fast as the fallback model', () => {
     const plan = buildImageGenerationSubmissionPlan({
       dialog: {
@@ -391,4 +535,76 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
       },
     });
   });
+
+  it('builds game sound effect audio submission plans', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'audio-sound-effect',
+        prompt: '  金币掉落叮当声  ',
+        status: 'idle',
+        soundType: 'ui',
+        soundTempo: 'fast',
+      },
+      layers: [],
+      nextGeneratedIndex: 4,
+    });
+
+    expect(plan).toEqual({
+      kind: 'audio',
+      audioKind: 'sound-effect',
+      normalizedPrompt: '金币掉落叮当声',
+      input: {
+        sound: '金币掉落叮当声',
+        type: 'ui',
+        tempo: 'fast',
+        priceMudPoints: 10,
+      },
+      result: {
+        title: '游戏音效 4',
+        generationInputs: {
+          fields: [
+            { title: 'sound', value: '金币掉落叮当声' },
+            { title: 'type', value: 'ui' },
+            { title: 'tempo', value: 'fast' },
+          ],
+          references: [],
+        },
+      },
+    });
+  });
+
+  it('builds game background music audio submission plans with instrumental fixed to true', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'audio-background-music',
+        prompt: '  温暖轻快的森林冒险背景音乐  ',
+        status: 'idle',
+      },
+      layers: [],
+      nextGeneratedIndex: 5,
+    });
+
+    expect(plan).toEqual({
+      kind: 'audio',
+      audioKind: 'background-music',
+      normalizedPrompt: '温暖轻快的森林冒险背景音乐',
+      input: {
+        gptDescriptionPrompt: '温暖轻快的森林冒险背景音乐',
+        makeInstrumental: true,
+        priceMudPoints: 5,
+      },
+      result: {
+        title: '游戏背景音乐 5',
+        generationInputs: {
+          fields: [
+            {
+              title: 'gpt_description_prompt',
+              value: '温暖轻快的森林冒险背景音乐',
+            },
+          ],
+          references: [],
+        },
+      },
+    });
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 570db673a..67634fddd 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -1,7 +1,9 @@
 import type {
   EditorCharacterAnimationGenerationInput,
+  EditorBackgroundMusicGenerationInput,
   EditorIconSpritesheetGenerationInput,
   EditorImageGenerationInput,
+  EditorSoundEffectGenerationInput,
   EditorVideoGenerationInput,
 } from '../../services/image-editor/editorProjectClient';
 import type {
@@ -16,12 +18,16 @@ import {
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_SPEC_FORM_VALUES,
   DEFAULT_VIDEO_MODEL,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+  SEEDANCE_VIDEO_REFERENCE_LIMITS,
   SPEC_GENERATION_SIZE,
   SPEC_TYPE_LABEL,
   buildIconGenerationInputs,
+  buildBackgroundMusicGenerationInputs,
   buildCharacterGenerationInputs,
   buildEditGenerationInputs,
   buildImageGenerationInputs,
+  buildSoundEffectGenerationInputs,
   buildSpecGenerationInputs,
   buildSpecPrompt,
   buildUiDesignGenerationInputs,
@@ -37,6 +43,69 @@ type ImageGenerationSubmissionOptions = {
   nextGeneratedIndex: number;
 };
 
+function isSeedanceVideoModel(model: string) {
+  return model === 'seedance2.0' || model === 'seedance2.0-fast';
+}
+
+function estimateReferenceRequestBytes(references: Array<{ src: string }>) {
+  // 中文注释：JSON 包装字段还有少量额外字节；这里按 src 字符串长度估算，前后端都会再兜底校验 64MB。
+  return references.reduce((sum, reference) => sum + reference.src.length, 0);
+}
+
+function buildSeedanceVideoReferenceInput(
+  references: NonNullable<GenerateDialogState['generationReferences']>,
+) {
+  const resolveReferenceSource = (reference: { src: string; objectKey?: string | null }) =>
+    reference.objectKey?.trim() || reference.src;
+  const imageReferences = references.filter(
+    (reference) => (reference.mediaType ?? 'image') === 'image',
+  );
+  const videoReferences = references.filter(
+    (reference) => reference.mediaType === 'video',
+  );
+  const audioReferences = references.filter(
+    (reference) => reference.mediaType === 'audio',
+  );
+
+  if (imageReferences.length > SEEDANCE_VIDEO_REFERENCE_LIMITS.image) {
+    throw new Error('参考图片最多 9 张');
+  }
+  if (videoReferences.length > SEEDANCE_VIDEO_REFERENCE_LIMITS.video) {
+    throw new Error('参考视频最多 3 个');
+  }
+  if (audioReferences.length > SEEDANCE_VIDEO_REFERENCE_LIMITS.audio) {
+    throw new Error('参考音频最多 3 个');
+  }
+  if (audioReferences.length && !imageReferences.length && !videoReferences.length) {
+    throw new Error('参考音频必须搭配参考图片或参考视频');
+  }
+  if (
+    estimateReferenceRequestBytes(references) >
+    SEEDANCE_VIDEO_REFERENCE_LIMITS.requestBytes
+  ) {
+    throw new Error('参考文件总请求体不能超过 64MB');
+  }
+
+  return {
+    referenceImageSrcs: imageReferences.map(resolveReferenceSource),
+    referenceVideoSrcs: videoReferences.map(resolveReferenceSource),
+    referenceAudioSrcs: audioReferences.map(resolveReferenceSource),
+  };
+}
+
+function getDialogDefaultPrompt(mode: GenerateDialogState['mode']) {
+  if (mode === 'edit') {
+    return '修改当前图片';
+  }
+  if (mode === 'audio-sound-effect') {
+    return '游戏音效';
+  }
+  if (mode === 'audio-background-music') {
+    return '游戏背景音乐';
+  }
+  return 'AI 生成图片';
+}
+
 export type ImageGenerationSubmissionPlan =
   | {
       kind: 'edit';
@@ -63,6 +132,26 @@ export type ImageGenerationSubmissionPlan =
         title: string;
         generationInputs: CanvasGenerationInputs;
       };
+    }
+  | {
+      kind: 'audio';
+      audioKind: 'sound-effect';
+      normalizedPrompt: string;
+      input: EditorSoundEffectGenerationInput;
+      result: {
+        title: string;
+        generationInputs: CanvasGenerationInputs;
+      };
+    }
+  | {
+      kind: 'audio';
+      audioKind: 'background-music';
+      normalizedPrompt: string;
+      input: EditorBackgroundMusicGenerationInput;
+      result: {
+        title: string;
+        generationInputs: CanvasGenerationInputs;
+      };
     };
 
 export type IconSpritesheetGenerationSubmissionPlan =
@@ -89,8 +178,7 @@ export function buildImageGenerationSubmissionPlan({
   nextGeneratedIndex,
 }: ImageGenerationSubmissionOptions): ImageGenerationSubmissionPlan {
   const normalizedPrompt =
-    dialog.prompt.trim() ||
-    (dialog.mode === 'edit' ? '修改当前图片' : 'AI 生成图片');
+    dialog.prompt.trim() || getDialogDefaultPrompt(dialog.mode);
 
   if (dialog.mode === 'edit') {
     const sourceLayer = layers.find((layer) => layer.id === dialog.sourceLayerId);
@@ -202,6 +290,13 @@ export function buildImageGenerationSubmissionPlan({
     const resolution = dialog.videoResolution ?? '480p';
     const durationSeconds = dialog.videoDurationSeconds ?? 4;
     const model = dialog.videoModel ?? DEFAULT_VIDEO_MODEL;
+    const seedanceReferences = isSeedanceVideoModel(model)
+      ? buildSeedanceVideoReferenceInput(dialog.generationReferences ?? [])
+      : {
+          referenceImageSrcs: [],
+          referenceVideoSrcs: [],
+          referenceAudioSrcs: [],
+        };
     return {
       kind: 'video',
       normalizedPrompt,
@@ -217,6 +312,15 @@ export function buildImageGenerationSubmissionPlan({
           resolution,
           durationSeconds,
         ),
+        ...(seedanceReferences.referenceImageSrcs.length
+          ? { referenceImageSrcs: seedanceReferences.referenceImageSrcs }
+          : {}),
+        ...(seedanceReferences.referenceVideoSrcs.length
+          ? { referenceVideoSrcs: seedanceReferences.referenceVideoSrcs }
+          : {}),
+        ...(seedanceReferences.referenceAudioSrcs.length
+          ? { referenceAudioSrcs: seedanceReferences.referenceAudioSrcs }
+          : {}),
       },
       result: {
         title: `生成视频 ${nextGeneratedIndex}`,
@@ -228,6 +332,47 @@ export function buildImageGenerationSubmissionPlan({
     };
   }
 
+  if (dialog.mode === 'audio-sound-effect') {
+    const soundType = dialog.soundType ?? 'ui';
+    const soundTempo = dialog.soundTempo ?? 'medium';
+    return {
+      kind: 'audio',
+      audioKind: 'sound-effect',
+      normalizedPrompt,
+      input: {
+        sound: normalizedPrompt,
+        type: soundType,
+        tempo: soundTempo,
+        priceMudPoints: EDITOR_GENERATION_MUD_POINT_CONFIG.soundEffect,
+      },
+      result: {
+        title: `游戏音效 ${nextGeneratedIndex}`,
+        generationInputs: buildSoundEffectGenerationInputs(
+          normalizedPrompt,
+          soundType,
+          soundTempo,
+        ),
+      },
+    };
+  }
+
+  if (dialog.mode === 'audio-background-music') {
+    return {
+      kind: 'audio',
+      audioKind: 'background-music',
+      normalizedPrompt,
+      input: {
+        gptDescriptionPrompt: normalizedPrompt,
+        makeInstrumental: true,
+        priceMudPoints: EDITOR_GENERATION_MUD_POINT_CONFIG.backgroundMusic,
+      },
+      result: {
+        title: `游戏背景音乐 ${nextGeneratedIndex}`,
+        generationInputs: buildBackgroundMusicGenerationInputs(normalizedPrompt),
+      },
+    };
+  }
+
   const imageModel = dialog.imageModel ?? DEFAULT_IMAGE_MODEL;
   return {
     kind: 'image',
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index eaea5dda9..e561d550d 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -126,6 +126,25 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
     expect(screen.queryByRole('button', { name: '上传' })).toBeNull();
   });
 
+  it('removes a bound icon spec from the hover delete button', () => {
+    render(
+      <IconComposerHarness
+        initialDialog={createIconDialog({
+          iconSpecReference: {
+            id: 'icon-spec-a',
+            label: '图标规范A',
+            src: 'data:image/png;base64,aWNvbg==',
+          },
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '删除图标素材规范' }));
+
+    expect(screen.getByRole('button', { name: '图标素材规范' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '图标规范A' })).toBeNull();
+  });
+
   it('updates descriptions, adds more descriptions and submits', () => {
     const updateIconDescription = vi.fn();
     const addIconDescription = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
index dbf893e5c..5b0918b53 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
@@ -1,3 +1,4 @@
+import { ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -5,7 +6,6 @@ import {
   type RefObject,
   type SetStateAction,
 } from 'react';
-import { ImageIcon } from 'lucide-react';
 
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import {
@@ -14,17 +14,19 @@ import {
 } from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
-import {
-  DEFAULT_ICON_DESCRIPTIONS,
-  EDITOR_GENERATION_MUD_POINT_CONFIG,
-  ICON_DESCRIPTION_LIMIT,
-} from './ImageCanvasGenerationModel';
 import type {
   GenerateDialogState,
   SpecGenerationType,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
+import {
+  DEFAULT_ICON_DESCRIPTIONS,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+  ICON_DESCRIPTION_LIMIT,
+} from './ImageCanvasGenerationModel';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasIconSpritesheetComposerViewProps = {
   dialog: GenerateDialogState;
@@ -65,6 +67,11 @@ export function ImageCanvasIconSpritesheetComposerView({
   onSubmit,
 }: ImageCanvasIconSpritesheetComposerViewProps) {
   const descriptions = dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS;
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isIconSpecMenuOpen,
+    boundaryRefs: [iconSpecButtonRef],
+    onDismiss: () => setIsIconSpecMenuOpen(false),
+  });
 
   const pickIconSpecFromCanvas = () => {
     setIsPickingIconSpecFromCanvas(true);
@@ -96,39 +103,41 @@ export function ImageCanvasIconSpritesheetComposerView({
       }}
     >
       <div className="image-canvas-editor__reference-strip">
-        <span className="image-canvas-editor__character-spec-wrap">
-          <button
-            ref={iconSpecButtonRef}
-            type="button"
-            className="image-canvas-editor__icon-spec-card image-canvas-editor__reference-chip image-canvas-editor__reference-chip--icon image-canvas-editor__reference-chip--upload"
-            disabled={dialog.status === 'generating'}
-            aria-label={dialog.iconSpecReference?.label ?? '图标素材规范'}
-            onClick={() => setIsIconSpecMenuOpen((open) => !open)}
-          >
-            <span className="image-canvas-editor__reference-chip-icon image-canvas-editor__icon-spec-preview">
-              {dialog.iconSpecReference?.src ? (
-                <img
-                  src={dialog.iconSpecReference.src}
-                  alt=""
-                  aria-hidden="true"
-                />
-              ) : (
-                <ImageIcon className="h-4 w-4" aria-hidden="true" />
-              )}
-            </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">
-                {dialog.iconSpecReference?.label ?? '待选择'}
-              </span>
-            </span>
-            <span className="image-canvas-editor__icon-spec-state">
-              {dialog.iconSpecReference ? '已绑定' : '待绑定'}
-            </span>
-          </button>
-        </span>
+        <ImageCanvasReferenceSlot
+          buttonRef={iconSpecButtonRef}
+          tone="icon"
+          className="image-canvas-editor__icon-spec-card"
+          icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+          imageSrc={dialog.iconSpecReference?.src}
+          label="图标规范"
+          ariaLabel={dialog.iconSpecReference?.label ?? '图标素材规范'}
+          title={dialog.iconSpecReference?.label ?? '图标素材规范'}
+          disabled={dialog.status === 'generating'}
+          isAdd={!dialog.iconSpecReference}
+          onClick={() => setIsIconSpecMenuOpen((open) => !open)}
+          onRemove={
+            dialog.iconSpecReference
+              ? () =>
+                  setGenerateDialog((currentDialog) =>
+                    currentDialog?.mode === 'icon'
+                      ? {
+                          ...currentDialog,
+                          status:
+                            currentDialog.status === 'failed'
+                              ? 'idle'
+                              : currentDialog.status,
+                          errorMessage:
+                            currentDialog.status === 'failed'
+                              ? undefined
+                              : currentDialog.errorMessage,
+                          iconSpecReference: null,
+                        }
+                      : currentDialog,
+                  )
+              : undefined
+          }
+          removeLabel="删除图标素材规范"
+        />
           {isIconSpecMenuOpen
             ? renderEditorPortal(
                 <PlatformFloatingMenu
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index c66dc0375..2a8aa2b20 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -16,19 +16,25 @@ export function ImageCanvasMetadataModalView({
   layer,
   onClose,
 }: ImageCanvasMetadataModalViewProps) {
+  const mediaLabel =
+    layer?.mediaType === 'audio'
+      ? '音频'
+      : layer?.mediaType === 'video'
+        ? '视频'
+        : '图片';
   return (
     <UnifiedModal
       open={Boolean(layer)}
-      title={layer?.mediaType === 'video' ? '视频信息' : '图片信息'}
+      title={`${mediaLabel}信息`}
       size="sm"
-      closeLabel={layer?.mediaType === 'video' ? '关闭视频信息' : '关闭图片信息'}
+      closeLabel={`关闭${mediaLabel}信息`}
       onClose={onClose}
       panelClassName="image-canvas-editor__metadata-dialog"
       bodyClassName="image-canvas-editor__metadata-body"
     >
       {layer ? (
         <dl className="image-canvas-editor__metadata-grid">
-          <dt>{layer.mediaType === 'video' ? '视频类型' : '图片类型'}</dt>
+          <dt>{mediaLabel}类型</dt>
           <dd>{formatLayerImageType(layer)}</dd>
           <dt>生成输入</dt>
           <dd className="image-canvas-editor__metadata-inputs">
diff --git a/src/components/image-editor/ImageCanvasReferenceSlot.tsx b/src/components/image-editor/ImageCanvasReferenceSlot.tsx
new file mode 100644
index 000000000..209cb5884
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasReferenceSlot.tsx
@@ -0,0 +1,115 @@
+import { type ReactNode, type RefObject } from 'react';
+import { X } from 'lucide-react';
+
+type ImageCanvasReferenceSlotTone =
+  | 'default'
+  | 'spec'
+  | 'icon'
+  | 'ui'
+  | 'character'
+  | 'video'
+  | 'audio';
+
+type ImageCanvasReferenceSlotProps = {
+  buttonRef?: RefObject<HTMLButtonElement | null>;
+  tone?: ImageCanvasReferenceSlotTone;
+  className?: string;
+  icon: ReactNode;
+  label: string;
+  ariaLabel: string;
+  title?: string;
+  imageSrc?: string | null;
+  disabled?: boolean;
+  isAdd?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  removeLabel?: string;
+};
+
+export function ImageCanvasReferenceSlot({
+  buttonRef,
+  tone = 'default',
+  className,
+  icon,
+  label,
+  ariaLabel,
+  title,
+  imageSrc,
+  disabled = false,
+  isAdd = false,
+  onClick,
+  onRemove,
+  removeLabel,
+}: ImageCanvasReferenceSlotProps) {
+  const hasPreviewImage = Boolean(imageSrc);
+  const slotClassName = [
+    'image-canvas-editor__reference-chip',
+    `image-canvas-editor__reference-chip--${tone}`,
+    hasPreviewImage
+      ? 'image-canvas-editor__reference-chip--has-image'
+      : 'image-canvas-editor__reference-chip--icon-only',
+    isAdd ? 'image-canvas-editor__reference-chip--upload' : null,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const slotContent = (
+    <>
+      <span className="image-canvas-editor__reference-chip-icon">
+        {hasPreviewImage ? (
+          <img src={imageSrc ?? undefined} alt="" aria-hidden="true" />
+        ) : (
+          icon
+        )}
+      </span>
+      <span className="image-canvas-editor__reference-chip-label">{label}</span>
+      {title && title !== label ? (
+        <span className="image-canvas-editor__reference-chip-source-label">
+          {title}
+        </span>
+      ) : null}
+    </>
+  );
+  return (
+    <span className="image-canvas-editor__reference-slot">
+      {onClick || buttonRef ? (
+        <button
+          ref={buttonRef}
+          type="button"
+          className={slotClassName}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          title={title ?? ariaLabel}
+          onClick={onClick}
+        >
+          {slotContent}
+        </button>
+      ) : (
+        <span
+          className={slotClassName}
+          aria-label={ariaLabel}
+          title={title ?? ariaLabel}
+        >
+          {slotContent}
+        </span>
+      )}
+      {onRemove ? (
+        <button
+          type="button"
+          className="image-canvas-editor__reference-chip-remove"
+          disabled={disabled}
+          aria-label={removeLabel ?? `删除${ariaLabel}`}
+          title="删除"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onRemove();
+          }}
+        >
+          <X className="h-3 w-3" aria-hidden="true" />
+        </button>
+      ) : null}
+    </span>
+  );
+}
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 130050fac..218e74c0c 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -1,3 +1,4 @@
+import { ClipboardList, ImagePlus } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -5,7 +6,6 @@ import {
   type RefObject,
   type SetStateAction,
 } from 'react';
-import { ClipboardList, ImagePlus } from 'lucide-react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
@@ -18,11 +18,6 @@ import {
   PlatformSelectField,
   PlatformTextField,
 } from '../common/PlatformTextField';
-import {
-  CHARACTER_SPEC_VIEW_OPTIONS,
-  EDITOR_GENERATION_MUD_POINT_CONFIG,
-  SPEC_GENERATION_COST,
-} from './ImageCanvasGenerationModel';
 import type {
   GenerateDialogState,
   SpecFormValues,
@@ -30,6 +25,13 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
+import {
+  CHARACTER_SPEC_VIEW_OPTIONS,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+  SPEC_GENERATION_COST,
+} from './ImageCanvasGenerationModel';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasSpecGenerationPanelViewProps = {
   dialog: GenerateDialogState;
@@ -69,12 +71,23 @@ export function ImageCanvasSpecGenerationPanelView({
 }: ImageCanvasSpecGenerationPanelViewProps) {
   const isUiDesignDialog = dialog.mode === 'ui-design';
   const referenceLabel = isUiDesignDialog ? 'UI设计图标素材规范' : '参考图';
+  const referenceSlotLabel = isUiDesignDialog
+    ? '图标规范'
+    : dialog.specType === 'character'
+      ? '角色规范'
+      : '参考图';
   const uploadTarget: UploadTarget = isUiDesignDialog
     ? 'ui-design-icon-spec'
     : 'spec-reference';
   const reference = isUiDesignDialog
     ? dialog.uiDesignSpecReference
     : dialog.specReference;
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isGenerationReferenceMenuOpen,
+    boundaryRefs: [generationReferenceButtonRef],
+    onDismiss: () => setIsGenerationReferenceMenuOpen?.(false),
+  });
+
   const openReferenceMenu = () => {
     if (setIsGenerationReferenceMenuOpen) {
       setIsGenerationReferenceMenuOpen((open) => !open);
@@ -100,33 +113,62 @@ export function ImageCanvasSpecGenerationPanelView({
       >
       <div className="image-canvas-editor__reference-strip">
         {(isUiDesignDialog || dialog.specType) ? (
-          <button
-            ref={generationReferenceButtonRef}
-            type="button"
-            className={[
-              'image-canvas-editor__reference-chip',
-              isUiDesignDialog
-                ? 'image-canvas-editor__reference-chip--ui'
-                : 'image-canvas-editor__reference-chip--spec',
-              'image-canvas-editor__reference-chip--upload',
-            ].join(' ')}
-            disabled={dialog.status === 'generating'}
-            onClick={openReferenceMenu}
-            aria-label={referenceLabel}
-          >
-            <span className="image-canvas-editor__reference-chip-icon">
-              {reference ? (
-                <img src={reference.src} alt="" aria-hidden="true" />
-              ) : isUiDesignDialog ? (
+          <ImageCanvasReferenceSlot
+            buttonRef={generationReferenceButtonRef}
+            tone={isUiDesignDialog ? 'ui' : 'spec'}
+            icon={
+              isUiDesignDialog ? (
                 <ImagePlus className="h-4 w-4" aria-hidden="true" />
               ) : (
                 <ClipboardList className="h-4 w-4" aria-hidden="true" />
-              )}
-            </span>
-            <span className="image-canvas-editor__reference-chip-label">
-              {reference?.label ?? referenceLabel}
-            </span>
-          </button>
+              )
+            }
+            imageSrc={reference?.src}
+            label={referenceSlotLabel}
+            ariaLabel={referenceLabel}
+            title={reference?.label ?? referenceLabel}
+            disabled={dialog.status === 'generating'}
+            isAdd={!reference}
+            onClick={openReferenceMenu}
+            onRemove={
+              reference && setGenerateDialog
+                ? () =>
+                    setGenerateDialog((currentDialog) => {
+                      if (isUiDesignDialog) {
+                        return currentDialog?.mode === 'ui-design'
+                          ? {
+                              ...currentDialog,
+                              status:
+                                currentDialog.status === 'failed'
+                                  ? 'idle'
+                                  : currentDialog.status,
+                              errorMessage:
+                                currentDialog.status === 'failed'
+                                  ? undefined
+                                  : currentDialog.errorMessage,
+                              uiDesignSpecReference: null,
+                            }
+                          : currentDialog;
+                      }
+                      return currentDialog?.mode === 'spec'
+                        ? {
+                            ...currentDialog,
+                            status:
+                              currentDialog.status === 'failed'
+                                ? 'idle'
+                                : currentDialog.status,
+                            errorMessage:
+                              currentDialog.status === 'failed'
+                                ? undefined
+                                : currentDialog.errorMessage,
+                            specReference: null,
+                          }
+                        : currentDialog;
+                    })
+                : undefined
+            }
+            removeLabel={`删除${referenceLabel}`}
+          />
         ) : null}
       </div>
       <div className="image-canvas-editor__spec-fields">
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 898ca48b5..d150f1835 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -1,6 +1,7 @@
 import { resolveLayerResolutionSize } from './ImageCanvasEditorModel';
 import type {
   CharacterReferenceImage,
+  CanvasMediaType,
   CanvasLayer,
   CanvasViewport,
   EditorAsset,
@@ -24,10 +25,19 @@ type GenerationReferenceUploadTarget =
   | 'character-reference'
   | 'character-spec'
   | 'generation-reference'
+  | 'video-reference-image'
+  | 'video-reference-video'
+  | 'video-reference-audio'
   | 'icon-spec'
   | 'spec-reference'
   | 'ui-design-icon-spec';
 
+const VIDEO_REFERENCE_LIMITS = {
+  image: 9,
+  video: 3,
+  audio: 3,
+} as const;
+
 export const UPLOAD_LAYER_FALLBACK_SIZE = {
   width: 420,
   height: 315,
@@ -54,12 +64,24 @@ export function createUploadedGenerationReference({
   fileName,
   fallbackLabel,
   imageSrc,
+  mediaType = 'image',
+  mimeType,
+  sizeBytes,
+  durationSeconds,
+  objectKey,
+  assetObjectId,
 }: {
   idPrefix: string;
   index?: number;
   fileName?: string;
   fallbackLabel: string;
   imageSrc: string;
+  mediaType?: CanvasMediaType;
+  mimeType?: string;
+  sizeBytes?: number;
+  durationSeconds?: number;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
 }): CharacterReferenceImage {
   return {
     id:
@@ -68,6 +90,12 @@ export function createUploadedGenerationReference({
         : `${idPrefix}-${Date.now()}`,
     label: fileName || fallbackLabel,
     src: imageSrc,
+    mediaType,
+    mimeType,
+    sizeBytes,
+    durationSeconds,
+    objectKey,
+    assetObjectId,
   };
 }
 
@@ -137,6 +165,29 @@ export function applyGenerationReferenceUpload({
         }
       : dialog;
   }
+  if (
+    target === 'video-reference-image' ||
+    target === 'video-reference-video' ||
+    target === 'video-reference-audio'
+  ) {
+    const mediaType: CanvasMediaType =
+      target === 'video-reference-video'
+        ? 'video'
+        : target === 'video-reference-audio'
+          ? 'audio'
+          : 'image';
+    return dialog?.mode === 'video'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          generationReferences: appendLimitedVideoReferences(
+            dialog.generationReferences ?? [],
+            references,
+            mediaType,
+          ),
+          composerOpen: true,
+        }
+      : dialog;
+  }
   return dialog?.mode === 'character'
     ? {
         ...setFailedGenerationIdle(dialog),
@@ -148,6 +199,25 @@ export function applyGenerationReferenceUpload({
     : dialog;
 }
 
+function appendLimitedVideoReferences(
+  currentReferences: CharacterReferenceImage[],
+  nextReferences: CharacterReferenceImage[],
+  mediaType: CanvasMediaType,
+) {
+  const limit = VIDEO_REFERENCE_LIMITS[mediaType];
+  const currentCount = currentReferences.filter(
+    (reference) => (reference.mediaType ?? 'image') === mediaType,
+  ).length;
+  const remaining = Math.max(0, limit - currentCount);
+  return [
+    ...currentReferences,
+    ...nextReferences.slice(0, remaining).map((reference) => ({
+      ...reference,
+      mediaType,
+    })),
+  ];
+}
+
 export function createUploadingAssetPlaceholder({
   uploadIndex,
   fileName,
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index 334bd4491..2a55a421d 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -308,6 +308,27 @@ describe('ImageCanvasWorldView', () => {
     );
   });
 
+  it('renders audio layers with an audio control card instead of an image', () => {
+    const layer = createLayer({
+      title: '游戏音效',
+      src: '/generated-character-drafts/editor-audios/sfx.mp3',
+      mediaType: 'audio',
+      assetKind: 'sound-effect',
+      width: 420,
+      height: 120,
+      originalWidth: 420,
+      originalHeight: 120,
+    });
+
+    renderWorldView({ layers: [layer] });
+
+    const layerButton = screen.getByRole('button', { name: '选择游戏音效' });
+    const audio = within(layerButton).getByLabelText('画布音频：游戏音效');
+    expect(audio.tagName.toLowerCase()).toBe('audio');
+    expect(within(layerButton).queryByAltText('画布图片：游戏音效')).toBeNull();
+    expect(within(layerButton).getByText('音效')).toBeTruthy();
+  });
+
   it('keeps saved generator placeholders hidden after a result layer exists', () => {
     renderWorldView({
       layers: [createLayer({ id: 'layer-generated', title: '生成图片' })],
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index c330094ac..7ca40870c 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -160,18 +160,32 @@ export function ImageCanvasWorldView({
               onMouseLeave={() => onLayerMouseLeave(layer.id)}
               aria-label={`选择${layer.title}`}
             >
-              <img
-                src={layer.src}
-                alt={`画布图片：${layer.title}`}
-                style={{
-                  transform:
-                    layer.flipX || layer.flipY
-                      ? `scale(${layer.flipX ? -1 : 1}, ${
-                          layer.flipY ? -1 : 1
-                        })`
-                      : undefined,
-                }}
-              />
+              {layer.mediaType === 'audio' ? (
+                <div className="image-canvas-editor__audio-card">
+                  <audio
+                    src={layer.src}
+                    controls
+                    aria-label={`画布音频：${layer.title}`}
+                  />
+                </div>
+              ) : (
+                <img
+                  src={layer.src}
+                  alt={
+                    layer.mediaType === 'video'
+                      ? `画布视频：${layer.title}`
+                      : `画布图片：${layer.title}`
+                  }
+                  style={{
+                    transform:
+                      layer.flipX || layer.flipY
+                        ? `scale(${layer.flipX ? -1 : 1}, ${
+                            layer.flipY ? -1 : 1
+                          })`
+                        : undefined,
+                  }}
+                />
+              )}
               {kindLabel ? (
                 <span
                   className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind}`}
@@ -188,7 +202,13 @@ export function ImageCanvasWorldView({
                     ? 'image-canvas-editor__metadata-corner--beside-kind'
                     : ''
                 }`}
-                label={`查看${layer.title}图片信息`}
+                label={`查看${layer.title}${
+                  layer.mediaType === 'audio'
+                    ? '音频'
+                    : layer.mediaType === 'video'
+                      ? '视频'
+                      : '图片'
+                }信息`}
                 icon={<Info className="h-3 w-3" />}
                 style={inverseScaleStyle}
                 onClick={(event) => {
diff --git a/src/components/image-editor/useImageCanvasFloatingOptionDismiss.ts b/src/components/image-editor/useImageCanvasFloatingOptionDismiss.ts
new file mode 100644
index 000000000..de8ba389c
--- /dev/null
+++ b/src/components/image-editor/useImageCanvasFloatingOptionDismiss.ts
@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+
+type FloatingOptionBoundaryRef = {
+  readonly current: HTMLElement | null;
+};
+
+type UseImageCanvasFloatingOptionDismissOptions = {
+  isOpen: boolean;
+  boundaryRefs: Array<FloatingOptionBoundaryRef | null | undefined>;
+  onDismiss: () => void;
+};
+
+function isEventInsideBoundary(
+  target: EventTarget | null,
+  boundaryRefs: Array<FloatingOptionBoundaryRef | null | undefined>,
+) {
+  if (!(target instanceof Node)) {
+    return false;
+  }
+
+  return boundaryRefs.some((boundaryRef) => {
+    const element = boundaryRef?.current;
+    return element ? element.contains(target) : false;
+  });
+}
+
+function isEventInsideFloatingMenu(target: EventTarget | null) {
+  return (
+    target instanceof Element &&
+    target.closest('.image-canvas-editor__portal-menu')
+  );
+}
+
+export function useImageCanvasFloatingOptionDismiss({
+  isOpen,
+  boundaryRefs,
+  onDismiss,
+}: UseImageCanvasFloatingOptionDismissOptions) {
+  useEffect(() => {
+    if (!isOpen || typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const handleClick = (event: MouseEvent) => {
+      // 中文注释：选项项点击后要保留浮层；父级面板其它区域点击才收起。
+      if (
+        isEventInsideBoundary(event.target, boundaryRefs) ||
+        isEventInsideFloatingMenu(event.target)
+      ) {
+        return;
+      }
+      onDismiss();
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [boundaryRefs, isOpen, onDismiss]);
+}
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 90580a127..847e88bd8 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -9,9 +9,11 @@ import {
 import { resolveEditorImageReferenceDataUrl } from '../../services/image-editor/editorImageReference';
 import {
   editEditorImage,
+  generateEditorBackgroundMusic,
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
   generateEditorImage,
+  generateEditorSoundEffect,
   generateEditorVideo,
 } from '../../services/image-editor/editorProjectClient';
 import type {
@@ -27,6 +29,7 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   createGeneratedResultLayer,
+  createAudioResultLayer,
   createIconSpritesheetResultLayers,
   createQuickEditResultLayer,
   createVideoResultLayer,
@@ -104,7 +107,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     (nextLayers: CanvasLayer[]) => {
       appendCanvasLayersWithResources(nextLayers);
       nextLayers
-        .filter((layer) => layer.mediaType !== 'video')
+        .filter(
+          (layer) => layer.mediaType !== 'video' && layer.mediaType !== 'audio',
+        )
         .forEach((layer) => persistGeneratedAsset?.(layer));
     },
     [appendCanvasLayersWithResources, persistGeneratedAsset],
@@ -301,6 +306,52 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     ],
   );
 
+  const addAudioResultLayer = useCallback(
+    (
+      generated: Parameters<typeof createAudioResultLayer>[0]['generated'],
+      title: string,
+      generationInputs: CanvasGenerationInputs,
+      frame?: GenerateDialogState['placeholder'],
+      dialogId?: string,
+    ) => {
+      layerCounterRef.current += 1;
+      const generatedIndex = layerCounterRef.current;
+      const nextLayer = createAudioResultLayer({
+        generated,
+        generatedIndex,
+        title,
+        canvasSize,
+        viewport,
+        generationInputs,
+        frame,
+      });
+
+      addGeneratedLayersToCanvas([nextLayer]);
+      selectSingleLayer(nextLayer.id);
+      setActiveSidebarPanel('layers');
+      if (dialogId) {
+        updateCanvasGenerationDialogById(dialogId, (currentDialog) => ({
+          ...currentDialog,
+          status: 'idle',
+          composerOpen: true,
+          generatedLayerId: nextLayer.id,
+          errorMessage: undefined,
+        }));
+      }
+      setActiveTool('select');
+    },
+    [
+      addGeneratedLayersToCanvas,
+      canvasSize,
+      layerCounterRef,
+      selectSingleLayer,
+      setActiveSidebarPanel,
+      setActiveTool,
+      updateCanvasGenerationDialogById,
+      viewport,
+    ],
+  );
+
   const submitIconSpritesheetGeneration = useCallback(
     async (dialog: GenerateDialogState) => {
       if (dialog.mode !== 'icon') {
@@ -420,7 +471,13 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     async (dialog: GenerateDialogState) => {
       const normalizedPrompt =
         dialog.prompt.trim() ||
-        (dialog.mode === 'edit' ? '修改当前图片' : 'AI 生成图片');
+        (dialog.mode === 'edit'
+          ? '修改当前图片'
+          : dialog.mode === 'audio-sound-effect'
+            ? '游戏音效'
+            : dialog.mode === 'audio-background-music'
+              ? '游戏背景音乐'
+              : 'AI 生成图片');
       const canvasDialog = isCanvasGenerationDialog(dialog) ? dialog : null;
       if (canvasDialog) {
         updateCanvasGenerationDialogById(canvasDialog.id, (currentDialog) => ({
@@ -465,6 +522,18 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             getGeneratingDialogPlaceholder(dialog),
             canvasDialog?.id,
           );
+        } else if (submissionPlan.kind === 'audio') {
+          const generated =
+            submissionPlan.audioKind === 'sound-effect'
+              ? await generateEditorSoundEffect(submissionPlan.input)
+              : await generateEditorBackgroundMusic(submissionPlan.input);
+          addAudioResultLayer(
+            generated,
+            submissionPlan.result.title,
+            submissionPlan.result.generationInputs,
+            getGeneratingDialogPlaceholder(dialog),
+            canvasDialog?.id,
+          );
         } else {
           const generated = await generateEditorImage(submissionPlan.input);
           if (submissionPlan.rememberImageModel) {
@@ -500,6 +569,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     },
     [
       addGeneratedResultLayer,
+      addAudioResultLayer,
       addVideoResultLayer,
       getGeneratingDialogPlaceholder,
       layerCounterRef,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index 2e988200b..d2ddfcfcb 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -127,6 +127,9 @@ function GenerationSurfaceHarness() {
       <button type="button" onClick={() => surface.switchGenerationTool('video')}>
         切换视频
       </button>
+      <button type="button" onClick={() => surface.switchGenerationTool('music')}>
+        切换音乐
+      </button>
       <button type="button" onClick={() => surface.switchGenerationTool('spec')}>
         切换规范
       </button>
@@ -209,4 +212,37 @@ describe('useImageCanvasGenerationSurface', () => {
     );
     expect(screen.getByRole('dialog', { name: '生成UI设计图' })).toBeTruthy();
   });
+
+  it('opens the music choice menu before creating audio generation dialogs', () => {
+    render(<GenerationSurfaceHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '切换音乐' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('music');
+    expect(screen.getByTestId('dialog').textContent).toBe('-');
+    const menu = screen.getByRole('menu', { name: '生成音乐类型' });
+    expect(
+      within(menu).getByRole('menuitem', { name: '生成游戏音效' }),
+    ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '生成游戏背景音乐' }),
+    ).toBeTruthy();
+
+    fireEvent.click(within(menu).getByRole('menuitem', { name: '生成游戏音效' }));
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'audio-sound-effect:open:placeholder',
+    );
+    expect(screen.getByRole('dialog', { name: '生成游戏音效' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '切换音乐' }));
+    fireEvent.click(
+      screen.getByRole('menuitem', { name: '生成游戏背景音乐' }),
+    );
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'audio-background-music:open:placeholder',
+    );
+    expect(
+      screen.getByRole('dialog', { name: '生成游戏背景音乐' }),
+    ).toBeTruthy();
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index a1372c884..e3cf501c5 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -1,11 +1,17 @@
 import {
   type Dispatch,
   type MutableRefObject,
+  type ReactNode,
   type RefObject,
   type SetStateAction,
   useCallback,
 } from 'react';
+import { createPortal } from 'react-dom';
 
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
 import {
   resolveCharacterAnimationPanelStyle,
@@ -67,6 +73,13 @@ type ImageCanvasGenerationSurfaceOptions = {
   persistGeneratedAsset?: (layer: CanvasLayer) => void;
 };
 
+function renderEditorPortal(node: ReactNode) {
+  if (typeof document === 'undefined') {
+    return node;
+  }
+  return createPortal(node, document.body);
+}
+
 export function useImageCanvasGenerationSurface({
   layers,
   canvasSize,
@@ -162,6 +175,11 @@ export function useImageCanvasGenerationSurface({
         generationWorkflow.openVideoGenerationDialog();
         return true;
       }
+      if (tool === 'music') {
+        generationWorkflow.setIsMusicMenuOpen((open) => !open);
+        setActiveTool('music');
+        return true;
+      }
       if (tool === 'spec') {
         generationWorkflow.setIsSpecMenuOpen((open) => !open);
         setActiveTool('spec');
@@ -185,7 +203,8 @@ export function useImageCanvasGenerationSurface({
   );
 
   const generationComposerNode = (
-    <ImageCanvasGenerationComposerView
+    <>
+      <ImageCanvasGenerationComposerView
       specToolWrapRef={specToolWrapRef}
       characterSpecButtonRef={characterSpecButtonRef}
       characterReferenceButtonRef={characterReferenceButtonRef}
@@ -283,7 +302,35 @@ export function useImageCanvasGenerationSurface({
         generationWorkflow.updateCharacterAnimationDuration
       }
       onRememberImageModel={generationWorkflow.rememberImageModel}
-    />
+      />
+      {generationWorkflow.isMusicMenuOpen
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu image-canvas-editor__music-menu"
+              label="生成音乐类型"
+              placement="top-start"
+              style={{
+                position: 'fixed',
+                left: '50%',
+                bottom: '4.8rem',
+                zIndex: 70,
+                transform: 'translateX(-50%)',
+              }}
+            >
+              <PlatformFloatingMenuItem
+                onClick={generationWorkflow.openSoundEffectGenerationDialog}
+              >
+                生成游戏音效
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={generationWorkflow.openBackgroundMusicGenerationDialog}
+              >
+                生成游戏背景音乐
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
   );
 
   return {
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index f607c29e5..ba83092e0 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -28,12 +28,14 @@ import {
   assignCharacterSpecReference,
   assignIconSpecReference,
   closeGenerateComposerDialog,
+  createBackgroundMusicGenerationDialogDraft,
   createCharacterAnimationPanelDraft,
   createCharacterGenerationDialogDraft,
   createEditDialogDraft,
   createGenerateDialogDraft,
   createIconGenerationDialogDraft,
   createQuickEditPanelDraft,
+  createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
   createVideoGenerationDialogDraft,
@@ -137,6 +139,7 @@ export function useImageCanvasGenerationWorkflow({
   const [isUiDesignSpecMenuOpen, setIsUiDesignSpecMenuOpen] = useState(false);
   const [isPickingUiDesignSpecFromCanvas, setIsPickingUiDesignSpecFromCanvas] =
     useState(false);
+  const [isMusicMenuOpen, setIsMusicMenuOpen] = useState(false);
   const [quickEditPanel, setQuickEditPanel] =
     useState<QuickEditPanelState | null>(null);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
@@ -185,6 +188,7 @@ export function useImageCanvasGenerationWorkflow({
     setIsPickingIconSpecFromCanvas(false);
     setIsUiDesignSpecMenuOpen(false);
     setIsPickingUiDesignSpecFromCanvas(false);
+    setIsMusicMenuOpen(false);
     setImageContextMenu(null);
   }, [setImageContextMenu]);
 
@@ -339,6 +343,30 @@ export function useImageCanvasGenerationWorkflow({
     viewport,
   ]);
 
+  const openSoundEffectGenerationDialog = useCallback(() => {
+    openPlacedCanvasGenerationDialog(
+      createSoundEffectGenerationDialogDraft({ canvasSize, viewport }),
+    );
+    activateCanvasGenerationEntry('music');
+  }, [
+    activateCanvasGenerationEntry,
+    canvasSize,
+    openPlacedCanvasGenerationDialog,
+    viewport,
+  ]);
+
+  const openBackgroundMusicGenerationDialog = useCallback(() => {
+    openPlacedCanvasGenerationDialog(
+      createBackgroundMusicGenerationDialogDraft({ canvasSize, viewport }),
+    );
+    activateCanvasGenerationEntry('music');
+  }, [
+    activateCanvasGenerationEntry,
+    canvasSize,
+    openPlacedCanvasGenerationDialog,
+    viewport,
+  ]);
+
   const openEditDialog = useCallback(
     (sourceLayer: CanvasLayer) => {
       setMetadataLayer(null);
@@ -555,6 +583,8 @@ export function useImageCanvasGenerationWorkflow({
       setIsUiDesignSpecMenuOpen,
       isPickingUiDesignSpecFromCanvas,
       setIsPickingUiDesignSpecFromCanvas,
+      isMusicMenuOpen,
+      setIsMusicMenuOpen,
       openGenerateDialog,
       openSpecDialog,
       openCharacterAnimationPanel,
@@ -562,6 +592,8 @@ export function useImageCanvasGenerationWorkflow({
       openIconGenerationDialog,
       openVideoGenerationDialog,
       openUiDesignGenerationDialog,
+      openSoundEffectGenerationDialog,
+      openBackgroundMusicGenerationDialog,
       openEditDialog,
       openQuickEditPanel,
       pickCharacterSpecFromLayer,
@@ -601,7 +633,9 @@ export function useImageCanvasGenerationWorkflow({
       isPickingIconSpecFromCanvas,
       isPickingUiDesignSpecFromCanvas,
       isUiDesignSpecMenuOpen,
+      isMusicMenuOpen,
       isSpecMenuOpen,
+      openBackgroundMusicGenerationDialog,
       openCharacterAnimationPanel,
       openCharacterGenerationDialog,
       openEditDialog,
@@ -610,6 +644,7 @@ export function useImageCanvasGenerationWorkflow({
       openUiDesignGenerationDialog,
       openQuickEditPanel,
       openSpecDialog,
+      openSoundEffectGenerationDialog,
       openVideoGenerationDialog,
       pickCharacterReferenceFromLayer,
       pickCharacterSpecFromLayer,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
index 210792b05..7fb403ef9 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
@@ -1,4 +1,4 @@
-/* @vitest-environment jsdom */
+/* @vitest-environment jsdom */
 
 import {
   act,
@@ -22,6 +22,8 @@ import type {
 import { useImageCanvasUploadWorkflow } from './useImageCanvasUploadWorkflow';
 
 const createEditorAssetMock = vi.hoisted(() => vi.fn());
+const uploadEditorSeedanceReferenceFileMock = vi.hoisted(() => vi.fn());
+let createdMediaElements: HTMLMediaElement[] = [];
 
 vi.mock('../../services/image-editor/editorProjectClient', async () => {
   const actual = await vi.importActual<
@@ -33,6 +35,10 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   };
 });
 
+vi.mock('../../services/image-editor/editorReferenceUploadClient', () => ({
+  uploadEditorSeedanceReferenceFile: uploadEditorSeedanceReferenceFileMock,
+}));
+
 function createDefaultFolder(): EditorAssetFolder {
   return {
     id: 'project',
@@ -136,7 +142,7 @@ function UploadWorkflowHarness({
       <span data-testid="selected-layer">{selectedLayerId ?? '-'}</span>
       <span data-testid="dialog">
         {generateDialog
-          ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}:${generateDialog.generationReferences?.length ?? 0}:${generateDialog.generationReferences?.[0]?.label ?? '-'}`
+          ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}:${generateDialog.generationReferences?.length ?? 0}:${generateDialog.generationReferences?.[0]?.label ?? '-'}:${generateDialog.generationReferences?.map((reference) => `${reference.mediaType ?? 'image'}:${reference.src}:${reference.objectKey ?? '-'}`).join(',') || '-'}`
           : '-'}
       </span>
       <button
@@ -199,6 +205,19 @@ function UploadWorkflowHarness({
       >
         准备规范生成
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          setGenerateDialog({
+            mode: 'video',
+            prompt: '',
+            status: 'failed',
+            generationReferences: [],
+          })
+        }
+      >
+        准备视频生成
+      </button>
       <button
         type="button"
         onClick={() => workflow.setUploadTarget('generation-reference')}
@@ -223,6 +242,18 @@ function UploadWorkflowHarness({
       >
         请求角色规范上传
       </button>
+      <button
+        type="button"
+        onClick={() => workflow.setUploadTarget('video-reference-video')}
+      >
+        选择参考视频
+      </button>
+      <button
+        type="button"
+        onClick={() => workflow.setUploadTarget('video-reference-audio')}
+      >
+        选择参考音频
+      </button>
     </div>
   );
 }
@@ -241,6 +272,35 @@ describe('useImageCanvasUploadWorkflow', () => {
       objectKey: 'object-key-uploaded',
       assetObjectId: 'asset-object-uploaded',
     }));
+    uploadEditorSeedanceReferenceFileMock.mockImplementation(
+      async (file: File, mediaType: 'video' | 'audio') => ({
+        src: `https://signed.example.com/${mediaType}/${file.name}`,
+        objectKey: `generated-character-drafts/editor/seedance-references/${mediaType}/${file.name}`,
+        assetObjectId: `assetobj-${mediaType}`,
+      }),
+    );
+    Object.defineProperty(HTMLMediaElement.prototype, 'duration', {
+      configurable: true,
+      value: 4,
+    });
+    createdMediaElements = [];
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation((tagName, options) => {
+      const element = originalCreateElement(tagName, options);
+      if (tagName === 'video' || tagName === 'audio') {
+        createdMediaElements.push(element as HTMLMediaElement);
+      }
+      return element;
+    });
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn(() => 'blob:media'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(() => undefined);
   });
 
   it('opens login before creating placeholders and resumes the same upload after login', async () => {
@@ -399,7 +459,7 @@ describe('useImageCanvasUploadWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '选择角色规范' }));
     await waitFor(() => {
       expect(screen.getByTestId('dialog').textContent).toBe(
-        'character:failed:-:0:-:-:0:-',
+        'character:failed:-:0:-:-:0:-:-',
       );
     });
 
@@ -454,4 +514,59 @@ describe('useImageCanvasUploadWorkflow', () => {
     });
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
+
+  it('uploads Seedance reference videos through OSS and stores object keys instead of data URLs', async () => {
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备视频生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择参考视频' }));
+    const uploadInput = screen.getByLabelText('上传图片文件');
+    fireEvent.change(uploadInput, {
+      target: {
+        files: [new File(['video'], '动作参考.mp4', { type: 'video/mp4' })],
+      },
+    });
+    act(() => {
+      createdMediaElements[0]?.onloadedmetadata?.(new Event('loadedmetadata'));
+    });
+
+    await waitFor(() => {
+      expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledWith(
+        expect.objectContaining({ name: '动作参考.mp4' }),
+        'video',
+      );
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'video:idle:-:0:-:-:1:动作参考.mp4:video:https://signed.example.com/video/动作参考.mp4:generated-character-drafts/editor/seedance-references/video/动作参考.mp4',
+      );
+    });
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+    expect(screen.getByTestId('dialog').textContent).not.toContain('data:video');
+  });
+
+  it('uploads Seedance reference audios through OSS and stores object keys instead of data URLs', async () => {
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备视频生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择参考音频' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [new File(['audio'], '旁白.mp3', { type: 'audio/mpeg' })],
+      },
+    });
+    act(() => {
+      createdMediaElements[0]?.onloadedmetadata?.(new Event('loadedmetadata'));
+    });
+
+    await waitFor(() => {
+      expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledWith(
+        expect.objectContaining({ name: '旁白.mp3' }),
+        'audio',
+      );
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'video:idle:-:0:-:-:1:旁白.mp3:audio:https://signed.example.com/audio/旁白.mp3:generated-character-drafts/editor/seedance-references/audio/旁白.mp3',
+      );
+    });
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+    expect(screen.getByTestId('dialog').textContent).not.toContain('data:audio');
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 27eac7682..6758ddbbc 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -9,6 +9,7 @@ import {
 
 import { ApiClientError } from '../../services/apiClient';
 import { createEditorAsset } from '../../services/image-editor/editorProjectClient';
+import { uploadEditorSeedanceReferenceFile } from '../../services/image-editor/editorReferenceUploadClient';
 import type {
   CanvasLayer,
   CanvasTool,
@@ -18,7 +19,16 @@ import type {
   GenerateDialogState,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
-import { isImageFile, readImageFileAsDataUrl } from './ImageCanvasFileModel';
+import {
+  SEEDANCE_REFERENCE_FILE_LIMITS,
+  isImageFile,
+  isSeedanceReferenceAudioFile,
+  isSeedanceReferenceImageFile,
+  isSeedanceReferenceVideoFile,
+  probeMediaDurationSeconds,
+  readFileAsDataUrl,
+  readImageFileAsDataUrl,
+} from './ImageCanvasFileModel';
 import {
   applyGenerationReferenceUpload,
   applyMeasuredUploadAssetSize,
@@ -227,6 +237,254 @@ export function useImageCanvasUploadWorkflow({
     [setGenerateDialog],
   );
 
+  const addVideoReferenceImageFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const imageFiles = Array.from(files).filter(isSeedanceReferenceImageFile);
+      if (!imageFiles.length) {
+        window.alert('请选择 Seedance 支持的图片文件');
+        return;
+      }
+      if (
+        imageFiles.some(
+          (file) => file.size >= SEEDANCE_REFERENCE_FILE_LIMITS.imageBytes,
+        )
+      ) {
+        window.alert('参考图片单张必须小于 30MB');
+        return;
+      }
+      const references = await Promise.all(
+        imageFiles.map(async (file, index) => ({
+          file,
+          index,
+          src: await readFileAsDataUrl(file),
+        })),
+      );
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'video-reference-image',
+          references: references.map(({ file, src, index }) =>
+            createUploadedGenerationReference({
+              idPrefix: 'upload-video-reference-image',
+              index,
+              fileName: file.name,
+              fallbackLabel: `参考图${index + 1}`,
+              imageSrc: src,
+              mediaType: 'image',
+              mimeType: file.type || undefined,
+              sizeBytes: file.size,
+            }),
+          ),
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
+  const addVideoReferenceVideoFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const videoFiles = Array.from(files).filter(isSeedanceReferenceVideoFile);
+      if (!videoFiles.length) {
+        window.alert('请选择 mp4 或 mov 视频文件');
+        return;
+      }
+      if (
+        videoFiles.some(
+          (file) => file.size > SEEDANCE_REFERENCE_FILE_LIMITS.videoBytes,
+        )
+      ) {
+        window.alert('参考视频单个不能超过 50MB');
+        return;
+      }
+      const references = await Promise.all(
+        videoFiles.map(async (file, index) => {
+          const durationSeconds = await probeMediaDurationSeconds(file, 'video');
+          return {
+            file,
+            index,
+            durationSeconds,
+          };
+        }),
+      );
+      if (
+        references.some(
+          ({ durationSeconds }) =>
+            Number.isFinite(durationSeconds) &&
+            (durationSeconds < SEEDANCE_REFERENCE_FILE_LIMITS.mediaMinDurationSeconds ||
+              durationSeconds >
+                SEEDANCE_REFERENCE_FILE_LIMITS.mediaMaxDurationSeconds),
+        )
+      ) {
+        window.alert('参考视频时长必须为 2-15 秒');
+        return;
+      }
+      const totalDuration = references.reduce(
+        (sum, reference) =>
+          Number.isFinite(reference.durationSeconds)
+            ? sum + reference.durationSeconds
+            : sum,
+        0,
+      );
+      if (
+        totalDuration >
+        SEEDANCE_REFERENCE_FILE_LIMITS.mediaTotalDurationSeconds
+      ) {
+        window.alert('参考视频总时长不能超过 15 秒');
+        return;
+      }
+      let uploadedReferences: Array<{
+        file: File;
+        index: number;
+        durationSeconds: number;
+        src: string;
+        objectKey: string;
+        assetObjectId: string;
+      }>;
+      try {
+        uploadedReferences = await Promise.all(
+          references.map(async ({ file, index, durationSeconds }) => {
+            const uploaded = await uploadEditorSeedanceReferenceFile(file, 'video');
+            return {
+              file,
+              index,
+              durationSeconds,
+              src: uploaded.src,
+              objectKey: uploaded.objectKey,
+              assetObjectId: uploaded.assetObjectId,
+            };
+          }),
+        );
+      } catch {
+        window.alert('参考视频上传失败，请稍后重试');
+        return;
+      }
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'video-reference-video',
+          references: uploadedReferences.map(({ file, src, index, durationSeconds, objectKey, assetObjectId }) =>
+            createUploadedGenerationReference({
+              idPrefix: 'upload-video-reference-video',
+              index,
+              fileName: file.name,
+              fallbackLabel: `参考视频${index + 1}`,
+              imageSrc: src,
+              mediaType: 'video',
+              mimeType: file.type || undefined,
+              sizeBytes: file.size,
+              durationSeconds,
+              objectKey,
+              assetObjectId,
+            }),
+          ),
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
+  const addVideoReferenceAudioFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const audioFiles = Array.from(files).filter(isSeedanceReferenceAudioFile);
+      if (!audioFiles.length) {
+        window.alert('请选择 wav 或 mp3 音频文件');
+        return;
+      }
+      if (
+        audioFiles.some(
+          (file) => file.size > SEEDANCE_REFERENCE_FILE_LIMITS.audioBytes,
+        )
+      ) {
+        window.alert('参考音频单个不能超过 15MB');
+        return;
+      }
+      const references = await Promise.all(
+        audioFiles.map(async (file, index) => {
+          const durationSeconds = await probeMediaDurationSeconds(file, 'audio');
+          return {
+            file,
+            index,
+            durationSeconds,
+          };
+        }),
+      );
+      if (
+        references.some(
+          ({ durationSeconds }) =>
+            Number.isFinite(durationSeconds) &&
+            (durationSeconds < SEEDANCE_REFERENCE_FILE_LIMITS.mediaMinDurationSeconds ||
+              durationSeconds >
+                SEEDANCE_REFERENCE_FILE_LIMITS.mediaMaxDurationSeconds),
+        )
+      ) {
+        window.alert('参考音频时长必须为 2-15 秒');
+        return;
+      }
+      const totalDuration = references.reduce(
+        (sum, reference) =>
+          Number.isFinite(reference.durationSeconds)
+            ? sum + reference.durationSeconds
+            : sum,
+        0,
+      );
+      if (
+        totalDuration >
+        SEEDANCE_REFERENCE_FILE_LIMITS.mediaTotalDurationSeconds
+      ) {
+        window.alert('参考音频总时长不能超过 15 秒');
+        return;
+      }
+      let uploadedReferences: Array<{
+        file: File;
+        index: number;
+        durationSeconds: number;
+        src: string;
+        objectKey: string;
+        assetObjectId: string;
+      }>;
+      try {
+        uploadedReferences = await Promise.all(
+          references.map(async ({ file, index, durationSeconds }) => {
+            const uploaded = await uploadEditorSeedanceReferenceFile(file, 'audio');
+            return {
+              file,
+              index,
+              durationSeconds,
+              src: uploaded.src,
+              objectKey: uploaded.objectKey,
+              assetObjectId: uploaded.assetObjectId,
+            };
+          }),
+        );
+      } catch {
+        window.alert('参考音频上传失败，请稍后重试');
+        return;
+      }
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'video-reference-audio',
+          references: uploadedReferences.map(({ file, src, index, durationSeconds, objectKey, assetObjectId }) =>
+            createUploadedGenerationReference({
+              idPrefix: 'upload-video-reference-audio',
+              index,
+              fileName: file.name,
+              fallbackLabel: `参考音频${index + 1}`,
+              imageSrc: src,
+              mediaType: 'audio',
+              mimeType: file.type || undefined,
+              sizeBytes: file.size,
+              durationSeconds,
+              objectKey,
+              assetObjectId,
+            }),
+          ),
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
   const addIconSpecReferenceFiles = useCallback(
     async (files: FileList | File[]) => {
       const imageFile = Array.from(files).find(isImageFile);
@@ -498,6 +756,12 @@ export function useImageCanvasUploadWorkflow({
           void addSpecReferenceFiles(files);
         } else if (currentUploadTarget === 'generation-reference') {
           void addGenerationReferenceFiles(files);
+        } else if (currentUploadTarget === 'video-reference-image') {
+          void addVideoReferenceImageFiles(files);
+        } else if (currentUploadTarget === 'video-reference-video') {
+          void addVideoReferenceVideoFiles(files);
+        } else if (currentUploadTarget === 'video-reference-audio') {
+          void addVideoReferenceAudioFiles(files);
         } else if (currentUploadTarget === 'character-spec') {
           void addCharacterSpecReferenceFiles(files);
         } else if (currentUploadTarget === 'character-reference') {
@@ -518,6 +782,9 @@ export function useImageCanvasUploadWorkflow({
       addCharacterReferenceFiles,
       addCharacterSpecReferenceFiles,
       addGenerationReferenceFiles,
+      addVideoReferenceImageFiles,
+      addVideoReferenceVideoFiles,
+      addVideoReferenceAudioFiles,
       addSpecReferenceFiles,
       addIconSpecReferenceFiles,
       addUiDesignSpecReferenceFiles,
@@ -537,6 +804,9 @@ export function useImageCanvasUploadWorkflow({
     addCharacterSpecReferenceFiles,
     addCharacterReferenceFiles,
     addGenerationReferenceFiles,
+    addVideoReferenceImageFiles,
+    addVideoReferenceVideoFiles,
+    addVideoReferenceAudioFiles,
     addIconSpecReferenceFiles,
     addUiDesignSpecReferenceFiles,
   };
diff --git a/src/index.css b/src/index.css
index 945554e22..f4af0df22 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4009,6 +4009,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   pointer-events: none;
 }
 
+.image-canvas-editor__audio-card {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  border-radius: 0.85rem;
+  background: linear-gradient(135deg, #0f172a, #263449);
+  padding: 0.85rem;
+  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
+}
+
+.image-canvas-editor__audio-card audio {
+  width: 100%;
+}
+
 .image-canvas-editor__layer--hovered,
 .image-canvas-editor__layer--selected {
   border-color: #4bb5aa;
@@ -4370,6 +4385,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
 }
 
+.image-canvas-editor__kind-badge--sound-effect,
+.image-canvas-editor__kind-badge--background-music {
+  background: rgba(79, 70, 229, 0.92);
+  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.24);
+}
+
 .image-canvas-editor__size-badge {
   position: absolute;
   left: var(--image-canvas-editor-corner-offset, 0.35rem);
@@ -4908,84 +4929,185 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   grid-column: 1 / -1;
   min-width: 0;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.36rem;
   overflow-x: auto;
   padding: 0 2.2rem 0.02rem 0;
   scrollbar-width: thin;
 }
 
-.image-canvas-editor__reference-chip {
+.image-canvas-editor__reference-slot {
+  position: relative;
   display: inline-flex;
-  min-width: 4.4rem;
-  max-width: 8.8rem;
-  height: 3.25rem;
+  flex: 0 0 auto;
+  width: 3.95rem;
+  height: 3.95rem;
+}
+
+.image-canvas-editor__reference-chip {
+  position: relative;
+  display: inline-grid;
+  width: 3.95rem;
+  min-width: 3.95rem;
+  max-width: 3.95rem;
+  height: 3.95rem;
+  min-height: 3.95rem;
+  grid-template-rows: 1.42rem auto;
   align-items: center;
-  gap: 0.4rem;
-  border: 1px solid rgba(148, 163, 184, 0.22);
+  justify-items: center;
+  gap: 0.28rem;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.16);
   border-radius: 1rem;
-  background: #f8fafc;
-  padding: 0.32rem 0.52rem 0.32rem 0.36rem;
-  color: #475569;
-  font-size: 0.72rem;
-  font-weight: 780;
-  text-align: left;
+  background: #f2f3f5;
+  padding: 0.62rem 0.36rem 0.5rem;
+  color: #a3a8ae;
+  font-size: 0.68rem;
+  font-weight: 850;
+  line-height: 1.04;
+  text-align: center;
   box-shadow: none;
 }
 
+button.image-canvas-editor__reference-chip {
+  cursor: pointer;
+}
+
+button.image-canvas-editor__reference-chip:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: rgba(148, 163, 184, 0.22);
+  background: #eef0f2;
+}
+
+button.image-canvas-editor__reference-chip:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+  transform: none;
+}
+
 .image-canvas-editor__reference-chip-icon {
   display: grid;
-  width: 2.28rem;
-  height: 2.28rem;
+  width: 1.42rem;
+  height: 1.42rem;
   flex: 0 0 auto;
   place-items: center;
   overflow: hidden;
-  border-radius: 0.78rem;
-  background: rgba(148, 163, 184, 0.13);
+  border-radius: 0.36rem;
+  background: transparent;
+  color: currentColor;
 }
 
 .image-canvas-editor__reference-chip-icon img {
   width: 100%;
   height: 100%;
+  border-radius: 0.36rem;
   object-fit: cover;
 }
 
 .image-canvas-editor__reference-chip-label {
+  display: -webkit-box;
   min-width: 0;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   text-overflow: ellipsis;
+  white-space: normal;
+  word-break: keep-all;
+}
+
+.image-canvas-editor__reference-chip-source-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.image-canvas-editor__reference-chip-remove {
+  position: absolute;
+  top: 0.16rem;
+  right: 0.16rem;
+  z-index: 2;
+  display: grid;
+  width: 1.12rem;
+  height: 1.12rem;
+  place-items: center;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.86);
+  color: #ffffff;
+  opacity: 0;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
+  pointer-events: none;
+  transform: scale(0.88);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.image-canvas-editor__reference-slot:hover
+  .image-canvas-editor__reference-chip-remove,
+.image-canvas-editor__reference-slot:focus-within
+  .image-canvas-editor__reference-chip-remove {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.image-canvas-editor__reference-chip-remove:disabled {
+  cursor: not-allowed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.image-canvas-editor__reference-chip-remove:hover:not(:disabled) {
+  background: rgba(220, 38, 38, 0.95);
+}
+
+.image-canvas-editor__reference-chip--has-image
+  .image-canvas-editor__reference-chip-icon {
+  width: 1.74rem;
+  height: 1.74rem;
+  border-radius: 0.48rem;
+}
+
+.image-canvas-editor__reference-chip--has-image
+  .image-canvas-editor__reference-chip-icon
+  img {
+  border-radius: 0.48rem;
 }
 
 .image-canvas-editor__reference-chip--spec
   .image-canvas-editor__reference-chip-icon {
-  background: rgba(147, 51, 234, 0.12);
-  color: #7e22ce;
+  color: #8b5cf6;
 }
 
 .image-canvas-editor__reference-chip--icon
   .image-canvas-editor__reference-chip-icon {
-  background: rgba(16, 185, 129, 0.13);
   color: #059669;
 }
 
 .image-canvas-editor__reference-chip--ui
   .image-canvas-editor__reference-chip-icon {
-  background: rgba(245, 158, 11, 0.15);
   color: #d97706;
 }
 
 .image-canvas-editor__reference-chip--character
   .image-canvas-editor__reference-chip-icon {
-  background: rgba(15, 23, 42, 0.08);
   color: #0f172a;
 }
 
 .image-canvas-editor__reference-chip--video
   .image-canvas-editor__reference-chip-icon {
-  background: rgba(59, 130, 246, 0.12);
   color: #2563eb;
 }
 
+.image-canvas-editor__reference-chip--audio
+  .image-canvas-editor__reference-chip-icon {
+  color: #7c3aed;
+}
+
 .image-canvas-editor__option-picker {
   width: 100%;
   min-height: 2rem;
@@ -5428,102 +5550,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   min-width: 0;
 }
 
-.image-canvas-editor__icon-spec-card {
-  display: grid;
-  min-width: 0;
-  width: 100%;
-  min-height: 4.35rem;
-  grid-template-columns: 3.35rem minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.62rem;
-  border: 1px solid rgba(16, 185, 129, 0.24);
-  border-radius: 1.1rem;
-  background: linear-gradient(
-      135deg,
-      rgba(236, 253, 245, 0.96),
-      rgba(255, 255, 255, 0.96)
-    ),
-    #ffffff;
-  padding: 0.48rem 0.55rem;
-  color: #064e3b;
-  text-align: left;
-  box-shadow:
-    0 12px 26px rgba(15, 118, 110, 0.11),
-    inset 0 1px 0 rgba(255, 255, 255, 0.96);
-}
-
-.image-canvas-editor__icon-spec-card:hover:not(:disabled) {
-  transform: translateY(-1px);
-  border-color: rgba(16, 185, 129, 0.42);
-  box-shadow:
-    0 15px 30px rgba(15, 118, 110, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.98);
-}
-
 .image-canvas-editor__icon-spec-card:disabled {
   cursor: wait;
   opacity: 0.68;
 }
 
-.image-canvas-editor__icon-spec-preview {
-  display: grid;
-  width: 3.1rem;
-  height: 3.1rem;
-  place-items: center;
-  overflow: hidden;
-  border: 1px solid rgba(16, 185, 129, 0.24);
-  border-radius: 0.9rem;
-  background: linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.96),
-      rgba(209, 250, 229, 0.72)
-    ),
-    #ecfdf5;
-  color: #10b981;
-}
-
-.image-canvas-editor__icon-spec-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.image-canvas-editor__icon-spec-copy {
-  display: grid;
-  min-width: 0;
-  gap: 0.16rem;
-}
-
-.image-canvas-editor__icon-spec-eyebrow {
-  color: #059669;
-  font-size: 0.68rem;
-  font-weight: 900;
-  letter-spacing: 0.08em;
-}
-
-.image-canvas-editor__icon-spec-title {
-  overflow: hidden;
-  color: #111827;
-  font-size: 0.86rem;
-  font-weight: 900;
-  line-height: 1.12;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.image-canvas-editor__icon-spec-state {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: rgba(16, 185, 129, 0.12);
-  padding: 0.24rem 0.42rem;
-  color: #047857;
-  font-size: 0.66rem;
-  font-weight: 900;
-  white-space: nowrap;
-}
-
 .image-canvas-editor__icon-spec-actions {
   display: grid;
   grid-auto-flow: column;
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 01c712ce6..e7d15df65 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -10,8 +10,10 @@ import {
   deleteEditorProject,
   editEditorImage,
   generateEditorCharacterAnimation,
+  generateEditorBackgroundMusic,
   generateEditorIconSpritesheet,
   generateEditorImage,
+  generateEditorSoundEffect,
   generateEditorVideo,
   listEditorProjects,
   loadEditorAssetLibrary,
@@ -813,6 +815,145 @@ describe('editorProjectClient', () => {
     );
   });
 
+
+  it('passes seedance video multimodal references through the backend BFF', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      videoSrc: '/generated-editor-videos/video-task-2/preview.mp4',
+      width: 1280,
+      height: 720,
+      sourceType: 'generated',
+      prompt: '参考素材生成视频',
+      actualPrompt: '参考素材生成视频',
+      model: 'seedance2.0-fast',
+      provider: 'VectorEngine',
+      taskId: 'video-task-2',
+      durationSeconds: 5,
+      resolution: '720p',
+      priceMudPoints: 100,
+    });
+
+    await generateEditorVideo({
+      prompt: '参考素材生成视频',
+      model: 'seedance2.0-fast',
+      aspectRatio: '16:9',
+      durationSeconds: 5,
+      resolution: '720p',
+      mode: 'std',
+      sound: 'off',
+      priceMudPoints: 100,
+      referenceImageSrcs: ['data:image/png;base64,image'],
+      referenceVideoSrcs: ['data:video/mp4;base64,video'],
+      referenceAudioSrcs: ['data:audio/mpeg;base64,audio'],
+    });
+
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/videos/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: '参考素材生成视频',
+          model: 'seedance2.0-fast',
+          aspectRatio: '16:9',
+          durationSeconds: 5,
+          resolution: '720p',
+          mode: 'std',
+          sound: 'off',
+          priceMudPoints: 100,
+          referenceImageSrcs: ['data:image/png;base64,image'],
+          referenceVideoSrcs: ['data:video/mp4;base64,video'],
+          referenceAudioSrcs: ['data:audio/mpeg;base64,audio'],
+        }),
+      }),
+      '生成视频失败',
+      expect.objectContaining({ timeoutMs: 1_200_000 }),
+    );
+  });
+
+  it('generates editor sound effects through the backend BFF', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      audioSrc: '/generated-character-drafts/editor-audios/sfx.mp3',
+      width: 420,
+      height: 120,
+      sourceType: 'generated',
+      prompt: '金币掉落叮当声',
+      actualPrompt: '金币掉落叮当声',
+      model: 'audio1.0',
+      provider: 'VectorEngine',
+      taskId: 'sound-task-1',
+      priceMudPoints: 10,
+      audioKind: 'sound-effect',
+    });
+
+    const result = await generateEditorSoundEffect({
+      sound: '金币掉落叮当声',
+      type: 'ui',
+      tempo: 'fast',
+      priceMudPoints: 10,
+    });
+
+    expect(result.taskId).toBe('sound-task-1');
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/audios/sound-effects/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sound: '金币掉落叮当声',
+          type: 'ui',
+          tempo: 'fast',
+          priceMudPoints: 10,
+        }),
+      }),
+      '生成游戏音效失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
+  it('generates editor background music through the backend BFF', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      audioSrc: '/generated-character-drafts/editor-audios/bgm.mp3',
+      width: 420,
+      height: 120,
+      sourceType: 'generated',
+      prompt: '森林冒险背景音乐',
+      actualPrompt: '森林冒险背景音乐',
+      model: 'chirp-v4',
+      provider: 'VectorEngine',
+      taskId: 'music-task-1',
+      priceMudPoints: 5,
+      audioKind: 'background-music',
+    });
+
+    const result = await generateEditorBackgroundMusic({
+      gptDescriptionPrompt: '森林冒险背景音乐',
+      makeInstrumental: true,
+      priceMudPoints: 5,
+    });
+
+    expect(result.taskId).toBe('music-task-1');
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/audios/background-music/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          gptDescriptionPrompt: '森林冒险背景音乐',
+          makeInstrumental: true,
+          priceMudPoints: 5,
+        }),
+      }),
+      '生成游戏背景音乐失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('edits editor images through the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,edited',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 716cfc3d9..2dfee690e 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -9,6 +9,10 @@ const EDITOR_ICON_SPRITESHEET_GENERATION_API =
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
 const EDITOR_VIDEO_GENERATION_API = '/api/editor/videos/generations';
+const EDITOR_SOUND_EFFECT_GENERATION_API =
+  '/api/editor/audios/sound-effects/generations';
+const EDITOR_BACKGROUND_MUSIC_GENERATION_API =
+  '/api/editor/audios/background-music/generations';
 const EDITOR_IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 const DEFAULT_PROJECT_TITLE = '未命名画布';
 
@@ -203,6 +207,9 @@ export type EditorVideoGenerationInput = {
   mode: 'std';
   sound: 'off';
   priceMudPoints: number;
+  referenceImageSrcs?: string[];
+  referenceVideoSrcs?: string[];
+  referenceAudioSrcs?: string[];
 };
 
 export type EditorVideoGenerationResult = {
@@ -218,6 +225,33 @@ export type EditorVideoGenerationResult = {
   priceMudPoints?: number;
 };
 
+export type EditorSoundEffectGenerationInput = {
+  sound: string;
+  type: 'ui' | 'foley' | 'ambient';
+  tempo: 'slow' | 'medium' | 'fast';
+  priceMudPoints: number;
+};
+
+export type EditorBackgroundMusicGenerationInput = {
+  gptDescriptionPrompt: string;
+  makeInstrumental: true;
+  priceMudPoints: number;
+};
+
+export type EditorAudioGenerationResult = {
+  audioSrc: string;
+  width: number;
+  height: number;
+  sourceType: 'generated';
+  prompt: string;
+  actualPrompt?: string | null;
+  model: string;
+  provider: string;
+  taskId: string;
+  priceMudPoints: number;
+  audioKind: 'sound-effect' | 'background-music';
+};
+
 export type EditorProjectSnapshot = {
   projectId: string;
   title: string;
@@ -315,6 +349,7 @@ type EditorImageGenerationResponse = EditorImageGenerationResult;
 type EditorIconSpritesheetGenerationResponse =
   EditorIconSpritesheetGenerationResult;
 type EditorVideoGenerationResponse = EditorVideoGenerationResult;
+type EditorAudioGenerationResponse = EditorAudioGenerationResult;
 
 function jsonRequest(method: 'POST' | 'PATCH', body: Record<string, unknown>) {
   return {
@@ -572,7 +607,25 @@ export async function generateEditorCharacterAnimation(
 export async function generateEditorVideo(input: EditorVideoGenerationInput) {
   return requestJson<EditorVideoGenerationResponse>(
     EDITOR_VIDEO_GENERATION_API,
-    jsonRequest('POST', input),
+    jsonRequest('POST', {
+      prompt: input.prompt,
+      model: input.model,
+      aspectRatio: input.aspectRatio,
+      durationSeconds: input.durationSeconds,
+      resolution: input.resolution,
+      mode: input.mode,
+      sound: input.sound,
+      priceMudPoints: input.priceMudPoints,
+      ...(input.referenceImageSrcs?.length
+        ? { referenceImageSrcs: input.referenceImageSrcs }
+        : {}),
+      ...(input.referenceVideoSrcs?.length
+        ? { referenceVideoSrcs: input.referenceVideoSrcs }
+        : {}),
+      ...(input.referenceAudioSrcs?.length
+        ? { referenceAudioSrcs: input.referenceAudioSrcs }
+        : {}),
+    }),
     '生成视频失败',
     {
       timeoutMs: 1_200_000,
@@ -582,3 +635,44 @@ export async function generateEditorVideo(input: EditorVideoGenerationInput) {
     },
   );
 }
+
+export async function generateEditorSoundEffect(
+  input: EditorSoundEffectGenerationInput,
+) {
+  return requestJson<EditorAudioGenerationResponse>(
+    EDITOR_SOUND_EFFECT_GENERATION_API,
+    jsonRequest('POST', {
+      sound: input.sound,
+      type: input.type,
+      tempo: input.tempo,
+      priceMudPoints: input.priceMudPoints,
+    }),
+    '生成游戏音效失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: {
+        maxRetries: 0,
+      },
+    },
+  );
+}
+
+export async function generateEditorBackgroundMusic(
+  input: EditorBackgroundMusicGenerationInput,
+) {
+  return requestJson<EditorAudioGenerationResponse>(
+    EDITOR_BACKGROUND_MUSIC_GENERATION_API,
+    jsonRequest('POST', {
+      gptDescriptionPrompt: input.gptDescriptionPrompt,
+      makeInstrumental: input.makeInstrumental,
+      priceMudPoints: input.priceMudPoints,
+    }),
+    '生成游戏背景音乐失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: {
+        maxRetries: 0,
+      },
+    },
+  );
+}
diff --git a/src/services/image-editor/editorReferenceUploadClient.test.ts b/src/services/image-editor/editorReferenceUploadClient.test.ts
new file mode 100644
index 000000000..dbefbcd1f
--- /dev/null
+++ b/src/services/image-editor/editorReferenceUploadClient.test.ts
@@ -0,0 +1,145 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { requestJson } from '../apiClient';
+import { getSignedAssetReadUrl } from '../assetReadUrlService';
+import { uploadEditorSeedanceReferenceFile } from './editorReferenceUploadClient';
+
+vi.mock('../apiClient', () => ({
+  requestJson: vi.fn(),
+}));
+
+vi.mock('../assetReadUrlService', () => ({
+  getSignedAssetReadUrl: vi.fn(),
+}));
+
+const requestJsonMock = vi.mocked(requestJson);
+const getSignedAssetReadUrlMock = vi.mocked(getSignedAssetReadUrl);
+
+describe('editorReferenceUploadClient', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(Date, 'now').mockReturnValue(1771400000000);
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => new Response(null, { status: 200 })),
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('uploads Seedance reference videos through direct OSS upload and returns object metadata', async () => {
+    requestJsonMock
+      .mockResolvedValueOnce({
+        upload: {
+          bucket: 'bucket',
+          host: 'https://oss.example.com',
+          objectKey:
+            'generated-character-drafts/editor/seedance-references/video/ref.mp4',
+          legacyPublicPath:
+            '/generated-character-drafts/editor/seedance-references/video/ref.mp4',
+          formFields: {
+            key: 'generated-character-drafts/editor/seedance-references/video/ref.mp4',
+            policy: 'policy',
+            'x-oss-signature': 'signature',
+          },
+        },
+      })
+      .mockResolvedValueOnce({
+        assetObject: {
+          assetObjectId: 'assetobj-video',
+          objectKey:
+            'generated-character-drafts/editor/seedance-references/video/ref.mp4',
+          assetKind: 'editor_seedance_reference_video',
+        },
+      });
+    getSignedAssetReadUrlMock.mockResolvedValueOnce(
+      'https://signed.example.com/ref.mp4',
+    );
+
+    const result = await uploadEditorSeedanceReferenceFile(
+      new File(['video'], 'ref.mp4', { type: 'video/mp4' }),
+      'video',
+    );
+
+    expect(requestJsonMock).toHaveBeenNthCalledWith(
+      1,
+      '/api/assets/direct-upload-tickets',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: expect.any(String),
+      }),
+      '创建参考素材上传凭证失败',
+    );
+    const ticketBody = JSON.parse(
+      (requestJsonMock.mock.calls[0]?.[1] as RequestInit).body as string,
+    );
+    expect(ticketBody).toMatchObject({
+      legacyPrefix: 'generated-character-drafts',
+      pathSegments: [
+        'editor',
+        'seedance-references',
+        'video',
+        '1771400000000',
+      ],
+      fileName: 'ref.mp4',
+      contentType: 'video/mp4',
+      access: 'private',
+      maxSizeBytes: 5,
+      successActionStatus: 200,
+      metadata: {
+        asset_kind: 'editor_seedance_reference_video',
+        editor_seedance_reference_type: 'video',
+      },
+    });
+    expect(fetch).toHaveBeenCalledWith(
+      'https://oss.example.com',
+      expect.objectContaining({
+        method: 'POST',
+        body: expect.any(FormData),
+      }),
+    );
+    expect(requestJsonMock).toHaveBeenNthCalledWith(
+      2,
+      '/api/assets/objects/confirm',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: expect.any(String),
+      }),
+      '确认参考素材资产失败',
+    );
+    const confirmBody = JSON.parse(
+      (requestJsonMock.mock.calls[1]?.[1] as RequestInit).body as string,
+    );
+    expect(confirmBody).toMatchObject({
+      bucket: 'bucket',
+      objectKey: 'generated-character-drafts/editor/seedance-references/video/ref.mp4',
+      contentType: 'video/mp4',
+      contentLength: 5,
+      assetKind: 'editor_seedance_reference_video',
+      accessPolicy: 'private',
+      entityId: 'editor-seedance-reference-video',
+    });
+    expect(getSignedAssetReadUrlMock).toHaveBeenCalledWith(
+      {
+        objectKey:
+          'generated-character-drafts/editor/seedance-references/video/ref.mp4',
+        expireSeconds: 3600,
+      },
+      undefined,
+      { bypassCache: true },
+    );
+    expect(result).toEqual({
+      src: 'https://signed.example.com/ref.mp4',
+      objectKey:
+        'generated-character-drafts/editor/seedance-references/video/ref.mp4',
+      assetObjectId: 'assetobj-video',
+      legacyPublicPath:
+        '/generated-character-drafts/editor/seedance-references/video/ref.mp4',
+    });
+  });
+});
diff --git a/src/services/image-editor/editorReferenceUploadClient.ts b/src/services/image-editor/editorReferenceUploadClient.ts
new file mode 100644
index 000000000..d9a8bace8
--- /dev/null
+++ b/src/services/image-editor/editorReferenceUploadClient.ts
@@ -0,0 +1,139 @@
+import { requestJson } from '../apiClient';
+import { getSignedAssetReadUrl } from '../assetReadUrlService';
+
+type EditorSeedanceReferenceMediaType = 'video' | 'audio';
+
+type DirectUploadTicketResponse = {
+  upload: {
+    bucket: string;
+    host: string;
+    objectKey: string;
+    legacyPublicPath: string;
+    formFields: Record<string, string | null | undefined>;
+  };
+};
+
+type ConfirmAssetObjectResponse = {
+  assetObject: {
+    assetObjectId: string;
+    objectKey: string;
+    assetKind: string;
+  };
+};
+
+export type UploadedEditorSeedanceReference = {
+  src: string;
+  objectKey: string;
+  assetObjectId: string;
+  legacyPublicPath: string;
+};
+
+const EDITOR_SEEDANCE_REFERENCE_READ_EXPIRE_SECONDS = 60 * 60;
+
+function resolveReferenceAssetKind(mediaType: EditorSeedanceReferenceMediaType) {
+  return mediaType === 'video'
+    ? 'editor_seedance_reference_video'
+    : 'editor_seedance_reference_audio';
+}
+
+function resolveReferenceEntityId(mediaType: EditorSeedanceReferenceMediaType) {
+  return `editor-seedance-reference-${mediaType}`;
+}
+
+function sanitizeReferenceFileName(fileName: string, mediaType: EditorSeedanceReferenceMediaType) {
+  const trimmedName = fileName.trim();
+  if (trimmedName) {
+    return trimmedName;
+  }
+  return mediaType === 'video' ? 'seedance-reference.mp4' : 'seedance-reference.mp3';
+}
+
+async function postDirectUploadFile(
+  upload: DirectUploadTicketResponse['upload'],
+  file: File,
+) {
+  const formData = new FormData();
+  Object.entries(upload.formFields).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      formData.append(key, value);
+    }
+  });
+  formData.append('file', file, file.name);
+
+  const response = await fetch(upload.host, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error('上传参考素材失败');
+  }
+}
+
+export async function uploadEditorSeedanceReferenceFile(
+  file: File,
+  mediaType: EditorSeedanceReferenceMediaType,
+): Promise<UploadedEditorSeedanceReference> {
+  const assetKind = resolveReferenceAssetKind(mediaType);
+  const fileName = sanitizeReferenceFileName(file.name, mediaType);
+  const contentType = file.type.trim() || 'application/octet-stream';
+
+  const ticket = await requestJson<DirectUploadTicketResponse>(
+    '/api/assets/direct-upload-tickets',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        legacyPrefix: 'generated-character-drafts',
+        pathSegments: ['editor', 'seedance-references', mediaType, `${Date.now()}`],
+        fileName,
+        contentType,
+        access: 'private',
+        maxSizeBytes: file.size,
+        successActionStatus: 200,
+        metadata: {
+          asset_kind: assetKind,
+          editor_seedance_reference_type: mediaType,
+        },
+      }),
+    },
+    '创建参考素材上传凭证失败',
+  );
+
+  await postDirectUploadFile(ticket.upload, file);
+
+  const confirmed = await requestJson<ConfirmAssetObjectResponse>(
+    '/api/assets/objects/confirm',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        bucket: ticket.upload.bucket,
+        objectKey: ticket.upload.objectKey,
+        contentType,
+        contentLength: file.size,
+        assetKind,
+        accessPolicy: 'private',
+        entityId: resolveReferenceEntityId(mediaType),
+      }),
+    },
+    '确认参考素材资产失败',
+  );
+
+  // 中文注释：返回短期 signed URL 供前端立即预览；生成请求最终优先提交 objectKey，由后端统一重新签名。
+  const signedUrl = await getSignedAssetReadUrl(
+    {
+      objectKey: confirmed.assetObject.objectKey,
+      expireSeconds: EDITOR_SEEDANCE_REFERENCE_READ_EXPIRE_SECONDS,
+    },
+    undefined,
+    { bypassCache: true },
+  );
+
+  return {
+    src: signedUrl,
+    objectKey: confirmed.assetObject.objectKey,
+    assetObjectId: confirmed.assetObject.assetObjectId,
+    legacyPublicPath: ticket.upload.legacyPublicPath,
+  };
+}

From 0431c3e922d7b5c25102dfb0003b17a545f958f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 16:22:49 +0800
Subject: [PATCH 12/16] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E7=94=BB=E6=9D=BF?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E6=A0=8F=E6=8C=89=E9=92=AE=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

仅选择工具和抓手工具保留常驻选中态。

生成、上传、文本、形状、导出等动作按钮点击后不再保持按下态。

补充底部工具栏选中态回归测试。
---
 .../ImageCanvasBottomToolbarView.test.tsx     | 54 ++++++++++++++++++-
 .../ImageCanvasBottomToolbarView.tsx          |  8 ++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index 8c21f4fa7..c36ca789f 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -23,7 +23,7 @@ describe('ImageCanvasBottomToolbarView', () => {
       within(toolbar)
         .getByRole('button', { name: '生成工具' })
         .getAttribute('aria-pressed'),
-    ).toBe('true');
+    ).toBe('false');
     expect(
       within(toolbar)
         .getByRole('button', { name: '选择工具' })
@@ -46,4 +46,56 @@ describe('ImageCanvasBottomToolbarView', () => {
     expect(switchTool).toHaveBeenNthCalledWith(5, 'music');
     expect(switchTool).toHaveBeenNthCalledWith(6, 'text');
   });
+
+  it('only keeps the select and hand tools visibly pressed', () => {
+    const renderToolbar = (effectiveTool: Parameters<
+      typeof ImageCanvasBottomToolbarView
+    >[0]['effectiveTool']) => (
+      <ImageCanvasBottomToolbarView
+        specToolWrapRef={createRef<HTMLSpanElement>()}
+        effectiveTool={effectiveTool}
+        onSwitchTool={vi.fn()}
+      />
+    );
+
+    const { rerender } = render(renderToolbar('select'));
+    const toolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
+
+    expect(
+      within(toolbar)
+        .getByRole('button', { name: '选择工具' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true');
+
+    rerender(renderToolbar('hand'));
+
+    expect(
+      within(toolbar)
+        .getByRole('button', { name: '抓手工具' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true');
+
+    for (const tool of [
+      ['upload', '上传工具'],
+      ['generate', '生成工具'],
+      ['video', '生成视频'],
+      ['music', '生成音乐'],
+      ['spec', '生成规范'],
+      ['character', '生成角色形象'],
+      ['icon', '生成图标素材'],
+      ['ui-design', '生成UI设计图'],
+      ['text', '文字工具'],
+      ['shape', '形状标注工具'],
+      ['export', '导出工具'],
+    ] as const) {
+      rerender(renderToolbar(tool[0]));
+
+      expect(
+        within(toolbar)
+          .getByRole('button', { name: tool[1] })
+          .getAttribute('aria-pressed'),
+      ).toBe('false');
+    }
+  });
+
 });
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index 6a4fcad46..69d63ff61 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -44,6 +44,10 @@ const canvasTools: Array<{
   { id: 'export', label: '导出工具', icon: Download },
 ];
 
+function hasPersistentPressedState(tool: CanvasTool) {
+  return tool === 'select' || tool === 'hand';
+}
+
 export function ImageCanvasBottomToolbarView({
   specToolWrapRef,
   effectiveTool,
@@ -67,7 +71,7 @@ export function ImageCanvasBottomToolbarView({
               label={label}
               title={label}
               icon={Icon}
-              pressed={effectiveTool === id}
+              pressed={hasPersistentPressedState(id) && effectiveTool === id}
               onClick={() => onSwitchTool(id)}
             />
           </span>
@@ -77,7 +81,7 @@ export function ImageCanvasBottomToolbarView({
             label={label}
             title={label}
             icon={Icon}
-            pressed={effectiveTool === id}
+            pressed={hasPersistentPressedState(id) && effectiveTool === id}
             onClick={() => onSwitchTool(id)}
           />
         ),

From 9eab60e4270765dc8bfc576e031418dd7eb33401 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 16:43:02 +0800
Subject: [PATCH 13/16] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=BA=95=E6=A0=8F=E9=80=89=E9=A1=B9=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将生成规范和生成音乐底栏入口改为悬停打开、离开收起

将生成音乐选项面板锚定到音乐按钮上方，避免错位

补充底栏 hover 行为和音乐菜单定位测试

更新生成类面板 Lovart 交互文档
---
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  4 +
 .../ImageCanvasBottomToolbarView.test.tsx     | 40 +++++++-
 .../ImageCanvasBottomToolbarView.tsx          | 61 ++++++++----
 .../ImageCanvasEditorShellView.test.tsx       |  3 +
 .../image-editor/ImageCanvasEditorView.tsx    |  5 +
 .../ImageCanvasGenerationComposerView.tsx     |  8 ++
 .../image-editor/ImageCanvasStageView.tsx     |  9 ++
 .../useImageCanvasGenerationSurface.test.tsx  | 56 ++++++++++-
 .../useImageCanvasGenerationSurface.tsx       | 98 +++++++++++++++++--
 src/index.css                                 |  1 +
 10 files changed, 254 insertions(+), 31 deletions(-)

diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index c1a81aef0..934dda7ad 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -56,6 +56,8 @@
 - 父级面板、底部选项框、弹出子面板字号保持一致。
 - 底部组合值使用 `·` 分隔，例如 `16:9 · 4秒 · 480p`。
 - 底部参数热区与生成按钮等高，默认不显示阴影；悬停显示轻量阴影；箭头默认向下，展开后旋转向上。
+- 底边栏中会在上方弹出二级选项的入口不再依赖点击展开。鼠标悬停到入口即可打开二级面板，鼠标离开入口和二级面板后自动收起；当前范围包括 `生成规范` 和 `生成音乐`。
+- 底边栏二级选项面板必须锚定到对应入口按钮本身，不使用屏幕居中或固定底部偏移；移动端窄屏下也应保持跟随入口位置。
 - 生成图片和生成视频文本输入框紧贴参考图下方，取消旧网格预留导致的空白高度。
 - 不再在底部常驻展开全部可选项。
 
@@ -124,6 +126,8 @@
 - 多文本输入面板字段标题和边界仍清晰。
 - 生成按钮内能看到 `N泥点` 文案。
 - 弹出选项面板通过 `role=menu` 暴露，点击选项后保持打开，可连续修改多个字段。
+- 底边栏 `生成规范` / `生成音乐` 悬停即可看到上方选项面板；鼠标从按钮移动到选项面板时不闪退，离开按钮和选项面板后收起。
+- `生成音乐` 选项面板出现在音乐按钮上方，不再固定在底栏中间。
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
 - 生成器输入、参数、参考图和占位框在刷新后仍存在；已生成对象的生成器面板继续跟随成品图层。
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index c36ca789f..0bd5ac897 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -9,11 +9,16 @@ import { ImageCanvasBottomToolbarView } from './ImageCanvasBottomToolbarView';
 describe('ImageCanvasBottomToolbarView', () => {
   it('renders the canvas tools and forwards tool changes', () => {
     const switchTool = vi.fn();
+    const specToolWrapRef = createRef<HTMLSpanElement>();
+    const musicToolWrapRef = createRef<HTMLSpanElement>();
     render(
       <ImageCanvasBottomToolbarView
-        specToolWrapRef={createRef<HTMLSpanElement>()}
+        specToolWrapRef={specToolWrapRef}
+        musicToolWrapRef={musicToolWrapRef}
         effectiveTool="generate"
         onSwitchTool={switchTool}
+        onOpenToolOptions={vi.fn()}
+        onCloseToolOptions={vi.fn()}
       />,
     );
 
@@ -48,13 +53,18 @@ describe('ImageCanvasBottomToolbarView', () => {
   });
 
   it('only keeps the select and hand tools visibly pressed', () => {
+    const specToolWrapRef = createRef<HTMLSpanElement>();
+    const musicToolWrapRef = createRef<HTMLSpanElement>();
     const renderToolbar = (effectiveTool: Parameters<
       typeof ImageCanvasBottomToolbarView
     >[0]['effectiveTool']) => (
       <ImageCanvasBottomToolbarView
-        specToolWrapRef={createRef<HTMLSpanElement>()}
+        specToolWrapRef={specToolWrapRef}
+        musicToolWrapRef={musicToolWrapRef}
         effectiveTool={effectiveTool}
         onSwitchTool={vi.fn()}
+        onOpenToolOptions={vi.fn()}
+        onCloseToolOptions={vi.fn()}
       />
     );
 
@@ -98,4 +108,30 @@ describe('ImageCanvasBottomToolbarView', () => {
     }
   });
 
+  it('opens and closes bottom option tools on hover', () => {
+    const openToolOptions = vi.fn();
+    const closeToolOptions = vi.fn();
+    const specToolWrapRef = createRef<HTMLSpanElement>();
+    const musicToolWrapRef = createRef<HTMLSpanElement>();
+    render(
+      <ImageCanvasBottomToolbarView
+        specToolWrapRef={specToolWrapRef}
+        musicToolWrapRef={musicToolWrapRef}
+        effectiveTool="select"
+        onSwitchTool={vi.fn()}
+        onOpenToolOptions={openToolOptions}
+        onCloseToolOptions={closeToolOptions}
+      />,
+    );
+
+    fireEvent.pointerEnter(specToolWrapRef.current!);
+    fireEvent.pointerLeave(specToolWrapRef.current!);
+    fireEvent.pointerEnter(musicToolWrapRef.current!);
+    fireEvent.pointerLeave(musicToolWrapRef.current!);
+
+    expect(openToolOptions).toHaveBeenNthCalledWith(1, 'spec');
+    expect(closeToolOptions).toHaveBeenNthCalledWith(1, 'spec');
+    expect(openToolOptions).toHaveBeenNthCalledWith(2, 'music');
+    expect(closeToolOptions).toHaveBeenNthCalledWith(2, 'music');
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index 69d63ff61..151792de3 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -18,10 +18,15 @@ import type { RefObject } from 'react';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type { CanvasTool } from './ImageCanvasEditorTypes';
 
+type ToolbarOptionTool = Extract<CanvasTool, 'music' | 'spec'>;
+
 type ImageCanvasBottomToolbarViewProps = {
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
+  musicToolWrapRef: RefObject<HTMLSpanElement | null>;
   effectiveTool: CanvasTool;
   onSwitchTool: (tool: CanvasTool) => void;
+  onOpenToolOptions: (tool: ToolbarOptionTool) => void;
+  onCloseToolOptions: (tool: ToolbarOptionTool) => void;
 };
 
 const canvasTools: Array<{
@@ -44,14 +49,21 @@ const canvasTools: Array<{
   { id: 'export', label: '导出工具', icon: Download },
 ];
 
+function isToolbarOptionTool(tool: CanvasTool): tool is ToolbarOptionTool {
+  return tool === 'music' || tool === 'spec';
+}
+
 function hasPersistentPressedState(tool: CanvasTool) {
   return tool === 'select' || tool === 'hand';
 }
 
 export function ImageCanvasBottomToolbarView({
   specToolWrapRef,
+  musicToolWrapRef,
   effectiveTool,
   onSwitchTool,
+  onOpenToolOptions,
+  onCloseToolOptions,
 }: ImageCanvasBottomToolbarViewProps) {
   return (
     <div
@@ -60,22 +72,35 @@ export function ImageCanvasBottomToolbarView({
       aria-label="AI画布工具栏"
       onPointerDown={(event) => event.stopPropagation()}
     >
-      {canvasTools.map(({ id, label, icon: Icon }) =>
-        id === 'spec' ? (
-          <span
-            key={id}
-            ref={specToolWrapRef}
-            className="image-canvas-editor__spec-tool-wrap"
-          >
-            <EditorIconButton
-              label={label}
-              title={label}
-              icon={Icon}
-              pressed={hasPersistentPressedState(id) && effectiveTool === id}
-              onClick={() => onSwitchTool(id)}
-            />
-          </span>
-        ) : (
+      {canvasTools.map(({ id, label, icon: Icon }) => {
+        if (isToolbarOptionTool(id)) {
+          return (
+            <span
+              key={id}
+              ref={id === 'spec' ? specToolWrapRef : musicToolWrapRef}
+              className={[
+                'image-canvas-editor__bottom-toolbar-option-wrap',
+                id === 'spec' ? 'image-canvas-editor__spec-tool-wrap' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              onPointerEnter={() => onOpenToolOptions(id)}
+              onPointerLeave={() => onCloseToolOptions(id)}
+              onFocus={() => onOpenToolOptions(id)}
+              onBlur={() => onCloseToolOptions(id)}
+            >
+              <EditorIconButton
+                label={label}
+                title={label}
+                icon={Icon}
+                pressed={hasPersistentPressedState(id) && effectiveTool === id}
+                onClick={() => onSwitchTool(id)}
+              />
+            </span>
+          );
+        }
+
+        return (
           <EditorIconButton
             key={id}
             label={label}
@@ -84,8 +109,8 @@ export function ImageCanvasBottomToolbarView({
             pressed={hasPersistentPressedState(id) && effectiveTool === id}
             onClick={() => onSwitchTool(id)}
           />
-        ),
-      )}
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index dc89bdf54..e5f284af2 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -115,6 +115,7 @@ function createStageProps(): ImageCanvasStageViewProps {
   return {
     canvasViewportRef: createRef<HTMLDivElement>(),
     specToolWrapRef: createRef<HTMLSpanElement>(),
+    musicToolWrapRef: createRef<HTMLSpanElement>(),
     isPanning: false,
     effectiveTool: 'select',
     canvasBackgroundColor: '#f8fafc',
@@ -191,6 +192,8 @@ function createStageProps(): ImageCanvasStageViewProps {
     onToggleMinimap: vi.fn(),
     onMinimapPointerDown: vi.fn(),
     onSwitchTool: vi.fn(),
+    onOpenToolOptions: vi.fn(),
+    onCloseToolOptions: vi.fn(),
   };
 }
 
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index c077db8e8..7e8389214 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -51,6 +51,7 @@ export function ImageCanvasEditorView() {
   const captureCanvasHistoryRef = useRef<() => void>(() => {});
   const resetCanvasInteractionStateRef = useRef<() => void>(() => {});
   const specToolWrapRef = useRef<HTMLSpanElement | null>(null);
+  const musicToolWrapRef = useRef<HTMLSpanElement | null>(null);
   const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const characterReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -444,6 +445,7 @@ export function ImageCanvasEditorView() {
     setViewport,
     layerCounterRef,
     specToolWrapRef,
+    musicToolWrapRef,
     characterSpecButtonRef,
     characterReferenceButtonRef,
     generationReferenceButtonRef,
@@ -782,6 +784,7 @@ export function ImageCanvasEditorView() {
   const stageProps = {
     canvasViewportRef,
     specToolWrapRef,
+    musicToolWrapRef,
     isPanning,
     effectiveTool,
     canvasBackgroundColor,
@@ -864,6 +867,8 @@ export function ImageCanvasEditorView() {
     onToggleMinimap: toggleMinimap,
     onMinimapPointerDown: handleMinimapPointerDown,
     onSwitchTool: switchTool,
+    onOpenToolOptions: generationSurface.openToolbarOptionMenu,
+    onCloseToolOptions: generationSurface.closeToolbarOptionMenu,
     children: generationComposerNode,
   };
 
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 75d6d2377..090926ef3 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -101,6 +101,8 @@ type ImageCanvasGenerationComposerViewProps = {
   onAddIconDescription: () => void;
   onUpdateCharacterAnimationDuration: (frameCountValue: string) => void;
   onRememberImageModel: (model: string) => void;
+  onSpecMenuPointerEnter?: () => void;
+  onSpecMenuPointerLeave?: () => void;
 };
 
 function buildPortalMenuStyle(
@@ -864,6 +866,8 @@ export function ImageCanvasGenerationComposerView({
   onAddIconDescription,
   onUpdateCharacterAnimationDuration,
   onRememberImageModel,
+  onSpecMenuPointerEnter,
+  onSpecMenuPointerLeave,
 }: ImageCanvasGenerationComposerViewProps) {
   return (
     <>
@@ -874,6 +878,10 @@ export function ImageCanvasGenerationComposerView({
               label="生成规范类型"
               placement="top-start"
               style={buildPortalMenuStyle(specToolWrapRef.current, 'above')}
+              onPointerEnter={onSpecMenuPointerEnter}
+              onPointerLeave={onSpecMenuPointerLeave}
+              onFocus={onSpecMenuPointerEnter}
+              onBlur={onSpecMenuPointerLeave}
             >
               {(['character', 'ui', 'custom'] as const).map((specType) => (
                 <PlatformFloatingMenuItem
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 1e04f7533..16a5c6ac0 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -31,6 +31,7 @@ import type {
 export type ImageCanvasStageViewProps = {
   canvasViewportRef: RefObject<HTMLDivElement | null>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
+  musicToolWrapRef: RefObject<HTMLSpanElement | null>;
   isPanning: boolean;
   effectiveTool: CanvasTool;
   canvasBackgroundColor: string;
@@ -120,11 +121,14 @@ export type ImageCanvasStageViewProps = {
   onToggleMinimap: () => void;
   onMinimapPointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void;
   onSwitchTool: (tool: CanvasTool) => void;
+  onOpenToolOptions: (tool: Extract<CanvasTool, 'music' | 'spec'>) => void;
+  onCloseToolOptions: (tool: Extract<CanvasTool, 'music' | 'spec'>) => void;
 };
 
 export function ImageCanvasStageView({
   canvasViewportRef,
   specToolWrapRef,
+  musicToolWrapRef,
   isPanning,
   effectiveTool,
   canvasBackgroundColor,
@@ -202,6 +206,8 @@ export function ImageCanvasStageView({
   onToggleMinimap,
   onMinimapPointerDown,
   onSwitchTool,
+  onOpenToolOptions,
+  onCloseToolOptions,
 }: ImageCanvasStageViewProps) {
   return (
     <div
@@ -314,8 +320,11 @@ export function ImageCanvasStageView({
 
       <ImageCanvasBottomToolbarView
         specToolWrapRef={specToolWrapRef}
+        musicToolWrapRef={musicToolWrapRef}
         effectiveTool={effectiveTool}
         onSwitchTool={onSwitchTool}
+        onOpenToolOptions={onOpenToolOptions}
+        onCloseToolOptions={onCloseToolOptions}
       />
 
       {children}
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index d2ddfcfcb..8b8d0b016 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { useRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -60,6 +60,7 @@ function GenerationSurfaceHarness() {
   const [, setImageContextMenu] = useState<ImageContextMenuState | null>(null);
   const layerCounterRef = useRef(0);
   const specToolWrapRef = useRef<HTMLSpanElement | null>(null);
+  const musicToolWrapRef = useRef<HTMLSpanElement | null>(null);
   const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const characterReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -78,6 +79,7 @@ function GenerationSurfaceHarness() {
     setViewport,
     layerCounterRef,
     specToolWrapRef,
+    musicToolWrapRef,
     characterSpecButtonRef,
     characterReferenceButtonRef,
     iconSpecButtonRef,
@@ -105,6 +107,13 @@ function GenerationSurfaceHarness() {
   return (
     <div>
       <span ref={specToolWrapRef}>规范入口</span>
+      <span
+        ref={musicToolWrapRef}
+        onPointerEnter={() => surface.openToolbarOptionMenu('music')}
+        onPointerLeave={() => surface.closeToolbarOptionMenu('music')}
+      >
+        音乐入口
+      </span>
       <span data-testid="tool">{activeTool}</span>
       <span data-testid="sidebar">{activeSidebarPanel ?? '-'}</span>
       <span data-testid="dialog">
@@ -195,6 +204,51 @@ describe('useImageCanvasGenerationSurface', () => {
     expect(within(menu).getByRole('menuitem', { name: '角色形象规范' })).toBeTruthy();
   });
 
+  it('anchors the music menu to the music tool and closes after hover leaves', () => {
+    vi.useFakeTimers();
+    try {
+      render(<GenerationSurfaceHarness />);
+      const musicAnchor = screen.getByText('音乐入口');
+      Object.defineProperty(musicAnchor, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({
+          x: 220,
+          y: 360,
+          left: 220,
+          top: 360,
+          right: 256,
+          bottom: 396,
+          width: 36,
+          height: 36,
+          toJSON: () => ({}),
+        }),
+      });
+
+      fireEvent.pointerEnter(musicAnchor);
+
+      const menu = screen.getByRole('menu', { name: '生成音乐类型' });
+      expect(menu.style.left).toBe('220px');
+      expect(menu.style.top).toBe('360px');
+      expect(menu.style.transform).toBe('translateY(calc(-100% - 0.45rem))');
+      expect(menu.getAttribute('style') ?? '').not.toContain('left: 50%');
+
+      fireEvent.pointerLeave(musicAnchor);
+      fireEvent.pointerEnter(menu);
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(screen.getByRole('menu', { name: '生成音乐类型' })).toBeTruthy();
+
+      fireEvent.pointerLeave(menu);
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(screen.queryByRole('menu', { name: '生成音乐类型' })).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it('opens video and UI design generation dialogs through the generation surface', () => {
     render(<GenerationSurfaceHarness />);
 
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index e3cf501c5..683bca51a 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -1,10 +1,13 @@
 import {
+  type CSSProperties,
   type Dispatch,
   type MutableRefObject,
   type ReactNode,
   type RefObject,
   type SetStateAction,
   useCallback,
+  useEffect,
+  useRef,
 } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -36,6 +39,8 @@ type CanvasGenerationDialogUpdater = (
   dialog: CanvasGenerationDialogState,
 ) => CanvasGenerationDialogState | null;
 
+type ToolbarOptionTool = Extract<CanvasTool, 'music' | 'spec'>;
+
 type ImageCanvasGenerationSurfaceOptions = {
   layers: CanvasLayer[];
   canvasSize: { width: number; height: number };
@@ -43,6 +48,7 @@ type ImageCanvasGenerationSurfaceOptions = {
   setViewport: Dispatch<SetStateAction<CanvasViewport>>;
   layerCounterRef: MutableRefObject<number>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
+  musicToolWrapRef: RefObject<HTMLSpanElement | null>;
   characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
   characterReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
@@ -80,6 +86,34 @@ function renderEditorPortal(node: ReactNode) {
   return createPortal(node, document.body);
 }
 
+function buildToolbarPortalMenuStyle(
+  anchor: HTMLElement | null,
+): 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: Math.round(rect.top),
+    right: 'auto',
+    bottom: 'auto',
+    zIndex: 70,
+    transform: 'translateY(calc(-100% - 0.45rem))',
+  };
+}
+
+const TOOLBAR_OPTION_CLOSE_DELAY_MS = 160;
+
 export function useImageCanvasGenerationSurface({
   layers,
   canvasSize,
@@ -87,6 +121,7 @@ export function useImageCanvasGenerationSurface({
   setViewport,
   layerCounterRef,
   specToolWrapRef,
+  musicToolWrapRef,
   characterSpecButtonRef,
   characterReferenceButtonRef,
   iconSpecButtonRef,
@@ -109,6 +144,9 @@ export function useImageCanvasGenerationSurface({
   requestUpload,
   persistGeneratedAsset,
 }: ImageCanvasGenerationSurfaceOptions) {
+  const toolbarOptionCloseTimerRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
   const generationWorkflow = useImageCanvasGenerationWorkflow({
     layers,
     canvasSize,
@@ -165,6 +203,44 @@ export function useImageCanvasGenerationSurface({
     canvasSize,
   });
 
+  const clearToolbarOptionCloseTimer = useCallback(() => {
+    if (!toolbarOptionCloseTimerRef.current) {
+      return;
+    }
+    clearTimeout(toolbarOptionCloseTimerRef.current);
+    toolbarOptionCloseTimerRef.current = null;
+  }, []);
+
+  useEffect(
+    () => () => {
+      clearToolbarOptionCloseTimer();
+    },
+    [clearToolbarOptionCloseTimer],
+  );
+
+  const openToolbarOptionMenu = useCallback(
+    (tool: ToolbarOptionTool) => {
+      clearToolbarOptionCloseTimer();
+      generationWorkflow.setIsMusicMenuOpen(tool === 'music');
+      generationWorkflow.setIsSpecMenuOpen(tool === 'spec');
+    },
+    [clearToolbarOptionCloseTimer, generationWorkflow],
+  );
+
+  const closeToolbarOptionMenu = useCallback(
+    (tool: ToolbarOptionTool) => {
+      clearToolbarOptionCloseTimer();
+      toolbarOptionCloseTimerRef.current = setTimeout(() => {
+        if (tool === 'music') {
+          generationWorkflow.setIsMusicMenuOpen(false);
+          return;
+        }
+        generationWorkflow.setIsSpecMenuOpen(false);
+      }, TOOLBAR_OPTION_CLOSE_DELAY_MS);
+    },
+    [clearToolbarOptionCloseTimer, generationWorkflow],
+  );
+
   const switchGenerationTool = useCallback(
     (tool: CanvasTool) => {
       if (tool === 'generate') {
@@ -176,12 +252,12 @@ export function useImageCanvasGenerationSurface({
         return true;
       }
       if (tool === 'music') {
-        generationWorkflow.setIsMusicMenuOpen((open) => !open);
+        openToolbarOptionMenu('music');
         setActiveTool('music');
         return true;
       }
       if (tool === 'spec') {
-        generationWorkflow.setIsSpecMenuOpen((open) => !open);
+        openToolbarOptionMenu('spec');
         setActiveTool('spec');
         return true;
       }
@@ -199,7 +275,7 @@ export function useImageCanvasGenerationSurface({
       }
       return false;
     },
-    [generationWorkflow, setActiveTool],
+    [generationWorkflow, openToolbarOptionMenu, setActiveTool],
   );
 
   const generationComposerNode = (
@@ -302,6 +378,8 @@ export function useImageCanvasGenerationSurface({
         generationWorkflow.updateCharacterAnimationDuration
       }
       onRememberImageModel={generationWorkflow.rememberImageModel}
+      onSpecMenuPointerEnter={() => openToolbarOptionMenu('spec')}
+      onSpecMenuPointerLeave={() => closeToolbarOptionMenu('spec')}
       />
       {generationWorkflow.isMusicMenuOpen
         ? renderEditorPortal(
@@ -309,13 +387,11 @@ export function useImageCanvasGenerationSurface({
               className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu image-canvas-editor__music-menu"
               label="生成音乐类型"
               placement="top-start"
-              style={{
-                position: 'fixed',
-                left: '50%',
-                bottom: '4.8rem',
-                zIndex: 70,
-                transform: 'translateX(-50%)',
-              }}
+              style={buildToolbarPortalMenuStyle(musicToolWrapRef.current)}
+              onPointerEnter={() => openToolbarOptionMenu('music')}
+              onPointerLeave={() => closeToolbarOptionMenu('music')}
+              onFocus={() => openToolbarOptionMenu('music')}
+              onBlur={() => closeToolbarOptionMenu('music')}
             >
               <PlatformFloatingMenuItem
                 onClick={generationWorkflow.openSoundEffectGenerationDialog}
@@ -337,6 +413,8 @@ export function useImageCanvasGenerationSurface({
     ...generationWorkflow,
     generationComposerStyle,
     generationComposerNode,
+    openToolbarOptionMenu,
+    closeToolbarOptionMenu,
     switchGenerationTool,
   };
 }
diff --git a/src/index.css b/src/index.css
index f4af0df22..9a7666580 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4775,6 +4775,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #0369a1;
 }
 
+.image-canvas-editor__bottom-toolbar-option-wrap,
 .image-canvas-editor__spec-tool-wrap {
   position: relative;
   display: inline-flex;

From 6f1ae6caeff33af478bbba4cfa5abf89b1e4aa1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 16:53:59 +0800
Subject: [PATCH 14/16] =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E5=8F=82=E6=95=B0=E5=B9=B6=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E7=94=9F=E6=88=90=E4=B8=AD=E5=8D=A0=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

生成规范类图片固定提交 16:9、2K 和 gpt-image-2，并在面板底部只读展示。

生成中占位支持通过 Delete 或 Backspace 删除，不新增可见删除按钮。

异步生成回写前按生成对象 ID 校验，避免已删除占位重新落回画布。

更新编辑器生成面板与图片画布技术文档及相关测试。
---
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |  4 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  4 ++
 .../image-editor/ImageCanvasEditorView.tsx    |  8 +++
 .../ImageCanvasGenerationModel.ts             |  3 ++
 ...ageCanvasGenerationSubmissionModel.test.ts |  3 ++
 .../ImageCanvasGenerationSubmissionModel.ts   |  7 ++-
 ...mageCanvasSpecGenerationPanelView.test.tsx |  9 ++++
 .../ImageCanvasSpecGenerationPanelView.tsx    | 51 +++++++++++--------
 .../useCanvasGenerationDialogs.ts             |  9 ++++
 ...anvasGenerationSubmissionWorkflow.test.tsx |  1 +
 ...ImageCanvasGenerationSubmissionWorkflow.ts | 18 +++++++
 .../useImageCanvasGenerationSurface.test.tsx  |  1 +
 .../useImageCanvasGenerationSurface.tsx       |  3 ++
 .../useImageCanvasGenerationWorkflow.test.tsx |  5 +-
 .../useImageCanvasGenerationWorkflow.ts       |  3 ++
 .../useImageCanvasKeyboardShortcuts.test.tsx  | 30 ++++++++++-
 .../useImageCanvasKeyboardShortcuts.ts        | 21 +++++++-
 src/index.css                                 | 29 +++++++++++
 18 files changed, 183 insertions(+), 26 deletions(-)

diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 2019d717e..61d637f8a 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -18,7 +18,7 @@
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板只展示只读参数，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频` 和 `生成UI设计图`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
 
@@ -87,8 +87,10 @@
 - 默认选择模式；底部工具栏能切换工具；中键拖拽和 Space 临时抓手都能平移画布。
 - 拖拽图片接近其它图片边缘或中心时显示吸附线，并保存吸附后的最终布局。
 - 生成工具点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
+- 生成中的占位图聚焦后支持键盘 `Delete` / `Backspace` 删除，不新增可见删除按钮；删除后对应异步回写必须按生成器 ID 判空并丢弃，不能把已删除素材重新落回画布。
 - 生成器快照刷新后必须恢复；待生成、生成中、失败和已生成后跟随成品图层的生成器都不能因为刷新丢失输入、参数、参考图或占位框位置。
 - 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色形象规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。所有生成面板参考图槽位统一为方形图标组件；角色形象规范槽位只显示规范 logo 和 `角色规范` 四字，绑定来源标题只保留给可访问名称、悬浮 title 和图片信息。已有参考图槽位只有在 hover / focus 时显示右上角 `×`，点击后只解绑对应参考图。
+- 生成规范类图片面板底部必须显示只读 `16:9`、`2K`、`gpt-image-2`，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
 - 修改生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index 934dda7ad..f90c7e420 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -59,6 +59,7 @@
 - 底边栏中会在上方弹出二级选项的入口不再依赖点击展开。鼠标悬停到入口即可打开二级面板，鼠标离开入口和二级面板后自动收起；当前范围包括 `生成规范` 和 `生成音乐`。
 - 底边栏二级选项面板必须锚定到对应入口按钮本身，不使用屏幕居中或固定底部偏移；移动端窄屏下也应保持跟随入口位置。
 - 生成图片和生成视频文本输入框紧贴参考图下方，取消旧网格预留导致的空白高度。
+- 生成规范类图片固定使用 `16:9 · 2K · gpt-image-2`。这三个参数在面板底部以只读短胶囊展示，不提供比例、尺寸或模型修改入口。
 - 不再在底部常驻展开全部可选项。
 
 ## 泥点显示
@@ -76,6 +77,7 @@
 - 距离目标：以当前视口世界中心为目标点，在候选落点中选择距离最近且不重叠的位置；中心被占用时按相邻边、四角和外圈候选继续寻找。
 - 居中行为：调用 `openCanvasGenerationDialog(...)` 时写入避让后的 placeholder；随后调用 `centerViewportOnPlacement(...)`，让屏幕中心移动到新占位中心，并保持原 viewport scale。
 - 入口状态：新入口打开后设置对应 activeTool，清空画布选中、右键菜单、快速编辑、角色动画和其它生成来源选择状态；只切换当前面板，不删除已有生成占位。
+- 生成中的占位图允许通过键盘 `Delete` / `Backspace` 删除；不额外增加画布上的可见删除按钮。用户删除后，后续异步成功或失败回写不得重新创建该生成对象。
 
 ## 画布悬浮信息
 
@@ -129,5 +131,7 @@
 - 底边栏 `生成规范` / `生成音乐` 悬停即可看到上方选项面板；鼠标从按钮移动到选项面板时不闪退，离开按钮和选项面板后收起。
 - `生成音乐` 选项面板出现在音乐按钮上方，不再固定在底栏中间。
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
+- 生成规范类图片底部展示只读 `16:9`、`2K`、`gpt-image-2`，提交参数也固定为这三项，不出现可编辑的比例 / 尺寸 / 模型选项。
+- 生成中的占位图聚焦后可用 `Delete` / `Backspace` 删除；删除后异步结果不再落回画布，也不显示额外删除 UI。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
 - 生成器输入、参数、参考图和占位框在刷新后仍存在；已生成对象的生成器面板继续跟随成品图层。
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 7e8389214..cf90c6e10 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -224,6 +224,8 @@ export function ImageCanvasEditorView() {
     canvasGenerationDialogs,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
+    removeCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById,
     activateCanvasGenerationDialog,
     restoreCanvasGenerationDialogs,
     removeCanvasGenerationDialogsByLayerId,
@@ -456,6 +458,7 @@ export function ImageCanvasEditorView() {
     canvasGenerationDialogs,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources,
@@ -615,6 +618,11 @@ export function ImageCanvasEditorView() {
     redoCanvasChange,
     undoCanvasChange,
     deleteLayerById: deleteLayerByIdFromShortcut,
+    removeCanvasGenerationDialogById: (dialogId: string) => {
+      captureCanvasHistory();
+      removeCanvasGenerationDialogById(dialogId);
+      setActiveTool('select');
+    },
     setActiveTool,
     setGenerateDialog,
     setImageContextMenu,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 7c8782f92..6cfae7d29 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -46,6 +46,9 @@ export const UI_DESIGN_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
 export const IMAGE_MODEL_GPT_IMAGE_2 = 'gpt-image-2';
 export const IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 export const DEFAULT_IMAGE_MODEL = IMAGE_MODEL_NANOBANANA2;
+export const SPEC_GENERATION_MODEL = IMAGE_MODEL_GPT_IMAGE_2;
+export const SPEC_GENERATION_ASPECT_RATIO = '16:9';
+export const SPEC_GENERATION_IMAGE_SIZE = '2K';
 export const ICON_DESCRIPTION_LIMIT = 100;
 // 图标素材面板按描述项扩宽，避免在画布子面板里做滑动列表。
 export const ICON_DESCRIPTION_CARD_WIDTH_REM = 8.4;
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index e82665ef3..33ec4d040 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -116,6 +116,9 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
       normalizedPrompt: 'AI 生成图片',
       input: {
         size: '2048x1152',
+        model: 'gpt-image-2',
+        aspectRatio: '16:9',
+        imageSize: '2K',
         kind: 'spec',
         referenceImageSrcs: ['data:image/png;base64,ref'],
         prompt: expect.stringContaining('参考图生成规范'),
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 67634fddd..8fb68839b 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -20,6 +20,9 @@ import {
   DEFAULT_VIDEO_MODEL,
   EDITOR_GENERATION_MUD_POINT_CONFIG,
   SEEDANCE_VIDEO_REFERENCE_LIMITS,
+  SPEC_GENERATION_ASPECT_RATIO,
+  SPEC_GENERATION_IMAGE_SIZE,
+  SPEC_GENERATION_MODEL,
   SPEC_GENERATION_SIZE,
   SPEC_TYPE_LABEL,
   buildIconGenerationInputs,
@@ -210,7 +213,9 @@ export function buildImageGenerationSubmissionPlan({
           Boolean(dialog.specReference?.src),
         ),
         size: SPEC_GENERATION_SIZE,
-        model: DEFAULT_IMAGE_MODEL,
+        model: SPEC_GENERATION_MODEL,
+        aspectRatio: SPEC_GENERATION_ASPECT_RATIO,
+        imageSize: SPEC_GENERATION_IMAGE_SIZE,
         kind: 'spec',
         ...(dialog.specReference?.src
           ? { referenceImageSrcs: [dialog.specReference.src] }
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index a09594c29..2b334828b 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -89,6 +89,15 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     ).toBe(true);
     const submitButton = screen.getByRole('button', { name: '提交生成规范' });
     expect(submitButton.textContent).toBe('生成5泥点');
+    expect(screen.getByLabelText('生成规范固定参数').textContent).toBe(
+      '16:92Kgpt-image-2',
+    );
+    expect(
+      screen.queryByRole('button', { name: /生成图片尺寸/u }),
+    ).toBeNull();
+    expect(
+      screen.queryByRole('button', { name: /生成图片模型/u }),
+    ).toBeNull();
   });
 
   it('renders UI design as a single borderless prompt below the first reference row', () => {
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 218e74c0c..6c223fabb 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -29,7 +29,10 @@ import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import {
   CHARACTER_SPEC_VIEW_OPTIONS,
   EDITOR_GENERATION_MUD_POINT_CONFIG,
+  SPEC_GENERATION_ASPECT_RATIO,
   SPEC_GENERATION_COST,
+  SPEC_GENERATION_IMAGE_SIZE,
+  SPEC_GENERATION_MODEL,
 } from './ImageCanvasGenerationModel';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
@@ -82,6 +85,7 @@ export function ImageCanvasSpecGenerationPanelView({
   const reference = isUiDesignDialog
     ? dialog.uiDesignSpecReference
     : dialog.specReference;
+  const isGenerating = dialog.status === 'generating';
   useImageCanvasFloatingOptionDismiss({
     isOpen: isGenerationReferenceMenuOpen,
     boundaryRefs: [generationReferenceButtonRef],
@@ -127,7 +131,7 @@ export function ImageCanvasSpecGenerationPanelView({
             label={referenceSlotLabel}
             ariaLabel={referenceLabel}
             title={reference?.label ?? referenceLabel}
-            disabled={dialog.status === 'generating'}
+            disabled={isGenerating}
             isAdd={!reference}
             onClick={openReferenceMenu}
             onRemove={
@@ -178,7 +182,7 @@ export function ImageCanvasSpecGenerationPanelView({
               variant="textarea"
               aria-label="UI设计要求"
               value={dialog.prompt}
-              disabled={dialog.status === 'generating'}
+              disabled={isGenerating}
               placeholder="你希望这个 UI 长什么样？"
               size="sm"
               density="compact"
@@ -220,7 +224,7 @@ export function ImageCanvasSpecGenerationPanelView({
               variant="textarea"
               aria-label="自定义规范提示词"
               value={dialog.specValues?.customPrompt ?? ''}
-              disabled={dialog.status === 'generating'}
+              disabled={isGenerating}
               size="sm"
               density="compact"
               className="image-canvas-editor__spec-textarea"
@@ -241,7 +245,7 @@ export function ImageCanvasSpecGenerationPanelView({
               <PlatformTextField
                 aria-label="玩法设定"
                 value={dialog.specValues?.playSetting ?? ''}
-                disabled={dialog.status === 'generating'}
+                disabled={isGenerating}
                 size="sm"
                 density="compact"
                 className="image-canvas-editor__spec-input"
@@ -260,7 +264,7 @@ export function ImageCanvasSpecGenerationPanelView({
               <PlatformTextField
                 aria-label="美术风格"
                 value={dialog.specValues?.artStyle ?? ''}
-                disabled={dialog.status === 'generating'}
+                disabled={isGenerating}
                 size="sm"
                 density="compact"
                 className="image-canvas-editor__spec-input"
@@ -281,7 +285,7 @@ export function ImageCanvasSpecGenerationPanelView({
                   <PlatformSelectField
                     aria-label="头身比"
                     value={dialog.specValues?.bodyRatio ?? '3'}
-                    disabled={dialog.status === 'generating'}
+                    disabled={isGenerating}
                     size="sm"
                     density="compact"
                     className="image-canvas-editor__spec-input"
@@ -306,7 +310,7 @@ export function ImageCanvasSpecGenerationPanelView({
                   <PlatformSelectField
                     aria-label="角色视角"
                     value={dialog.specValues?.characterView ?? ''}
-                    disabled={dialog.status === 'generating'}
+                    disabled={isGenerating}
                     size="sm"
                     density="compact"
                     className="image-canvas-editor__spec-input"
@@ -353,26 +357,33 @@ export function ImageCanvasSpecGenerationPanelView({
           />
         ) : (
           <>
-            <span aria-hidden="true" />
-          <PlatformActionButton
+            <div
+              className="image-canvas-editor__readonly-generation-options"
+              aria-label="生成规范固定参数"
+            >
+              <span>{SPEC_GENERATION_ASPECT_RATIO}</span>
+              <span>{SPEC_GENERATION_IMAGE_SIZE}</span>
+              <span>{SPEC_GENERATION_MODEL}</span>
+            </div>
+            <PlatformActionButton
               type="submit"
               tone="secondary"
               size="xs"
               shape="pill"
               className="image-canvas-editor__generation-submit image-canvas-editor__spec-submit"
-              disabled={dialog.status === 'generating'}
+              disabled={isGenerating}
               aria-label="提交生成规范"
             >
-            {dialog.status === 'generating' ? (
-              '生成中'
-            ) : (
-              <>
-                <span>生成</span>
-                <span className="image-canvas-editor__mud-point-inline">
-                  {SPEC_GENERATION_COST}泥点
-                </span>
-              </>
-            )}
+              {isGenerating ? (
+                '生成中'
+              ) : (
+                <>
+                  <span>生成</span>
+                  <span className="image-canvas-editor__mud-point-inline">
+                    {SPEC_GENERATION_COST}泥点
+                  </span>
+                </>
+              )}
             </PlatformActionButton>
           </>
         )}
diff --git a/src/components/image-editor/useCanvasGenerationDialogs.ts b/src/components/image-editor/useCanvasGenerationDialogs.ts
index 8313df4ba..42e07abab 100644
--- a/src/components/image-editor/useCanvasGenerationDialogs.ts
+++ b/src/components/image-editor/useCanvasGenerationDialogs.ts
@@ -100,6 +100,14 @@ export function useCanvasGenerationDialogs({
     [updateCanvasGenerationDialogById],
   );
 
+  const hasCanvasGenerationDialogById = useCallback((dialogId: string) => {
+    const currentDialog = generateDialogRef.current;
+    return [
+      ...(isCanvasGenerationDialog(currentDialog) ? [currentDialog] : []),
+      ...inactiveGenerateDialogsRef.current,
+    ].some((dialog) => dialog.id === dialogId);
+  }, []);
+
   const activateCanvasGenerationDialog = useCallback(
     (targetDialog: CanvasGenerationDialogState) => {
       setInactiveGenerateDialogs((currentDialogs) => {
@@ -216,6 +224,7 @@ export function useCanvasGenerationDialogs({
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
     removeCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById,
     activateCanvasGenerationDialog,
     restoreCanvasGenerationDialogs,
     removeCanvasGenerationDialogsByLayerId,
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index de2aaf3f7..e9c162430 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -133,6 +133,7 @@ function SubmissionWorkflowHarness({
     setCharacterAnimationPanel,
     setGenerateDialog: dialogs.setGenerateDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById: dialogs.hasCanvasGenerationDialogById,
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources: (nextLayers) =>
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]),
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 847e88bd8..cdf5859cb 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -69,6 +69,7 @@ type GenerationSubmissionWorkflowOptions = {
     dialogId: string,
     updater: CanvasGenerationDialogUpdater,
   ) => void;
+  hasCanvasGenerationDialogById: (dialogId: string) => boolean;
   getGeneratingDialogPlaceholder: (
     dialog: GenerateDialogState,
   ) => GenerateDialogState['placeholder'];
@@ -94,6 +95,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   setCharacterAnimationPanel,
   setGenerateDialog,
   updateCanvasGenerationDialogById,
+  hasCanvasGenerationDialogById,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
   selectSingleLayer,
@@ -127,6 +129,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         generationInputs?: CanvasGenerationInputs;
       } = {},
     ) => {
+      if (options.dialogId && !hasCanvasGenerationDialogById(options.dialogId)) {
+        return;
+      }
       layerCounterRef.current += 1;
       const generatedIndex = layerCounterRef.current;
       const nextLayer = createGeneratedResultLayer({
@@ -170,6 +175,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       setActiveTool,
       setGenerateDialog,
       updateCanvasGenerationDialogById,
+      hasCanvasGenerationDialogById,
       viewport,
     ],
   );
@@ -219,6 +225,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       frame?: GenerateDialogState['placeholder'],
       dialogId?: string,
     ) => {
+      if (dialogId && !hasCanvasGenerationDialogById(dialogId)) {
+        return;
+      }
       const startIndex = layerCounterRef.current + 1;
       const nextLayers = createIconSpritesheetResultLayers({
         generated,
@@ -256,6 +265,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       setActiveSidebarPanel,
       setActiveTool,
       updateCanvasGenerationDialogById,
+      hasCanvasGenerationDialogById,
       viewport,
     ],
   );
@@ -268,6 +278,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       frame?: GenerateDialogState['placeholder'],
       dialogId?: string,
     ) => {
+      if (dialogId && !hasCanvasGenerationDialogById(dialogId)) {
+        return;
+      }
       layerCounterRef.current += 1;
       const generatedIndex = layerCounterRef.current;
       const nextLayer = createVideoResultLayer({
@@ -302,6 +315,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       setActiveSidebarPanel,
       setActiveTool,
       updateCanvasGenerationDialogById,
+      hasCanvasGenerationDialogById,
       viewport,
     ],
   );
@@ -314,6 +328,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       frame?: GenerateDialogState['placeholder'],
       dialogId?: string,
     ) => {
+      if (dialogId && !hasCanvasGenerationDialogById(dialogId)) {
+        return;
+      }
       layerCounterRef.current += 1;
       const generatedIndex = layerCounterRef.current;
       const nextLayer = createAudioResultLayer({
@@ -348,6 +365,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       setActiveSidebarPanel,
       setActiveTool,
       updateCanvasGenerationDialogById,
+      hasCanvasGenerationDialogById,
       viewport,
     ],
   );
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index 8b8d0b016..50c9a326e 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -90,6 +90,7 @@ function GenerationSurfaceHarness() {
     canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     openCanvasGenerationDialog: dialogs.openCanvasGenerationDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById: dialogs.hasCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId:
       dialogs.removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 683bca51a..f8a01874a 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -64,6 +64,7 @@ type ImageCanvasGenerationSurfaceOptions = {
     dialogId: string,
     updater: CanvasGenerationDialogUpdater,
   ) => void;
+  hasCanvasGenerationDialogById: (dialogId: string) => boolean;
   removeCanvasGenerationDialogsByLayerId: (targetLayerId: string) => void;
   getGeneratingDialogPlaceholder: (
     dialog: GenerateDialogState,
@@ -132,6 +133,7 @@ export function useImageCanvasGenerationSurface({
   canvasGenerationDialogs,
   openCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
+  hasCanvasGenerationDialogById,
   removeCanvasGenerationDialogsByLayerId,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
@@ -158,6 +160,7 @@ export function useImageCanvasGenerationSurface({
     setGenerateDialog,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources,
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 28ada880a..9b133f4f3 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -110,6 +110,7 @@ function GenerationWorkflowHarness({
     setGenerateDialog: dialogs.setGenerateDialog,
     openCanvasGenerationDialog: dialogs.openCanvasGenerationDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById: dialogs.hasCanvasGenerationDialogById,
     removeCanvasGenerationDialogsByLayerId:
       dialogs.removeCanvasGenerationDialogsByLayerId,
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
@@ -459,7 +460,9 @@ describe('useImageCanvasGenerationWorkflow', () => {
         expect.objectContaining({
           size: '2048x1152',
           kind: 'spec',
-          model: 'gemini-3.1-flash-image-preview',
+          model: 'gpt-image-2',
+          aspectRatio: '16:9',
+          imageSize: '2K',
           referenceImageSrcs: ['data:image/png;base64,ref'],
           prompt: expect.stringContaining('参考图生成规范'),
         }),
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index ba83092e0..14d56f66c 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -79,6 +79,7 @@ type GenerationWorkflowOptions = {
     dialogId: string,
     updater: CanvasGenerationDialogUpdater,
   ) => void;
+  hasCanvasGenerationDialogById: (dialogId: string) => boolean;
   removeCanvasGenerationDialogsByLayerId: (targetLayerId: string) => void;
   getGeneratingDialogPlaceholder: (
     dialog: GenerateDialogState,
@@ -104,6 +105,7 @@ export function useImageCanvasGenerationWorkflow({
   setGenerateDialog,
   openCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
+  hasCanvasGenerationDialogById,
   removeCanvasGenerationDialogsByLayerId,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
@@ -485,6 +487,7 @@ export function useImageCanvasGenerationWorkflow({
     setCharacterAnimationPanel,
     setGenerateDialog,
     updateCanvasGenerationDialogById,
+    hasCanvasGenerationDialogById,
     getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources,
     selectSingleLayer,
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
index e246a8994..7f7c5ef18 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
@@ -59,6 +59,7 @@ function KeyboardShortcutsHarness({
   undoCanvasChange = vi.fn(),
   redoCanvasChange = vi.fn(),
   deleteLayerById = vi.fn(),
+  removeCanvasGenerationDialogById = vi.fn(),
   closeEditorChromePanels = vi.fn(),
 }: {
   selectedLayerId?: string | null;
@@ -68,6 +69,7 @@ function KeyboardShortcutsHarness({
   undoCanvasChange?: () => void;
   redoCanvasChange?: () => void;
   deleteLayerById?: (layerId: string | null) => void;
+  removeCanvasGenerationDialogById?: (dialogId: string) => void;
   closeEditorChromePanels?: () => void;
 }) {
   const [activeTool, setActiveTool] = useState<CanvasTool>(initialTool);
@@ -108,6 +110,7 @@ function KeyboardShortcutsHarness({
     redoCanvasChange,
     undoCanvasChange,
     deleteLayerById,
+    removeCanvasGenerationDialogById,
     setActiveTool: (tool) => setActiveTool(tool),
     setGenerateDialog: (updater) =>
       setGenerateDialogState((currentDialog) =>
@@ -227,10 +230,12 @@ describe('useImageCanvasKeyboardShortcuts', () => {
   });
 
   it('removes editable generation placeholders with Backspace', () => {
+    const removeCanvasGenerationDialogById = vi.fn();
     render(
       <KeyboardShortcutsHarness
         initialTool="character"
         initialGenerateDialog={createPlaceholderDialog('character')}
+        removeCanvasGenerationDialogById={removeCanvasGenerationDialogById}
       />,
     );
 
@@ -238,7 +243,10 @@ describe('useImageCanvasKeyboardShortcuts', () => {
       fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' });
     });
 
-    expect(screen.getByTestId('generate-dialog').textContent).toBe('none');
+    expect(removeCanvasGenerationDialogById).toHaveBeenCalledWith('dialog-1');
+    expect(screen.getByTestId('generate-dialog').textContent).toBe(
+      'character:idle:true',
+    );
     expect(screen.getByTestId('active-tool').textContent).toBe('select');
     expect(screen.getByTestId('character-menu').textContent).toBe('false');
     expect(screen.getByTestId('character-picking').textContent).toBe('false');
@@ -246,6 +254,26 @@ describe('useImageCanvasKeyboardShortcuts', () => {
     expect(screen.getByTestId('icon-picking').textContent).toBe('false');
   });
 
+  it('removes generating placeholders with Delete', () => {
+    const removeCanvasGenerationDialogById = vi.fn();
+    const generatingDialog = createPlaceholderDialog('generate');
+    generatingDialog.status = 'generating';
+    render(
+      <KeyboardShortcutsHarness
+        initialTool="generate"
+        initialGenerateDialog={generatingDialog}
+        removeCanvasGenerationDialogById={removeCanvasGenerationDialogById}
+      />,
+    );
+
+    act(() => {
+      fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
+    });
+
+    expect(removeCanvasGenerationDialogById).toHaveBeenCalledWith('dialog-1');
+    expect(screen.getByTestId('active-tool').textContent).toBe('select');
+  });
+
   it('closes transient editor panels with Escape and collapses idle composers', () => {
     const closeEditorChromePanels = vi.fn();
     render(
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
index f832d5ae0..8815e7900 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
@@ -1,6 +1,7 @@
 import { type RefObject, useEffect } from 'react';
 
 import type {
+  CanvasGenerationDialogState,
   GenerateDialogState,
   QuickEditPanelState,
 } from './ImageCanvasEditorTypes';
@@ -11,6 +12,7 @@ type UseImageCanvasKeyboardShortcutsOptions = {
   redoCanvasChange: () => void;
   undoCanvasChange: () => void;
   deleteLayerById: (layerId: string | null) => void;
+  removeCanvasGenerationDialogById?: (dialogId: string) => void;
   setActiveTool: (tool: 'select') => void;
   setGenerateDialog: (
     updater:
@@ -61,7 +63,6 @@ function isCanvasGenerationPlaceholderDialog(
 ) {
   return (
     Boolean(dialog?.placeholder) &&
-    dialog?.status !== 'generating' &&
     (dialog?.mode === 'generate' ||
       dialog?.mode === 'spec' ||
       dialog?.mode === 'character' ||
@@ -71,12 +72,19 @@ function isCanvasGenerationPlaceholderDialog(
   );
 }
 
+function isCanvasGenerationDialogState(
+  dialog: GenerateDialogState | null,
+): dialog is CanvasGenerationDialogState {
+  return Boolean(dialog?.id && isCanvasGenerationPlaceholderDialog(dialog));
+}
+
 export function useImageCanvasKeyboardShortcuts({
   generateDialogRef,
   selectedLayerIdRef,
   redoCanvasChange,
   undoCanvasChange,
   deleteLayerById,
+  removeCanvasGenerationDialogById,
   setActiveTool,
   setGenerateDialog,
   setImageContextMenu,
@@ -171,7 +179,15 @@ export function useImageCanvasKeyboardShortcuts({
         }
         if (isCanvasGenerationPlaceholderDialog(generateDialogRef.current)) {
           event.preventDefault();
-          setGenerateDialog(null);
+          const currentDialog = generateDialogRef.current;
+          if (
+            isCanvasGenerationDialogState(currentDialog) &&
+            removeCanvasGenerationDialogById
+          ) {
+            removeCanvasGenerationDialogById(currentDialog.id);
+          } else {
+            setGenerateDialog(null);
+          }
           setActiveTool('select');
           setIsGenerationReferenceMenuOpen(false);
           setIsPickingGenerationReferenceFromCanvas(false);
@@ -217,6 +233,7 @@ export function useImageCanvasKeyboardShortcuts({
     closeEditorChromePanels,
     deleteLayerById,
     generateDialogRef,
+    removeCanvasGenerationDialogById,
     redoCanvasChange,
     selectedLayerIdRef,
     setActiveTool,
diff --git a/src/index.css b/src/index.css
index 9a7666580..652df66c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5917,6 +5917,30 @@ button.image-canvas-editor__reference-chip:disabled {
   gap: 0.24rem;
 }
 
+.image-canvas-editor__readonly-generation-options {
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2.25rem;
+  align-items: center;
+  gap: 0.28rem;
+  justify-self: start;
+  color: #475569;
+  font-size: 0.78rem;
+  font-weight: 820;
+}
+
+.image-canvas-editor__readonly-generation-options span {
+  display: inline-flex;
+  min-height: 1.72rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 999px;
+  background: #f8fafc;
+  padding: 0 0.58rem;
+  white-space: nowrap;
+}
+
 .image-canvas-editor__context-menu {
   position: fixed;
   z-index: 35;
@@ -6325,6 +6349,7 @@ button.image-canvas-editor__reference-chip:disabled {
 
   .image-canvas-editor__option-cluster--dimensions,
   .image-canvas-editor__option-cluster--model,
+  .image-canvas-editor__readonly-generation-options,
   .image-canvas-editor__generation-submit,
   .image-canvas-editor__character-animation-submit {
     grid-column: auto;
@@ -6337,6 +6362,10 @@ button.image-canvas-editor__reference-chip:disabled {
     width: 100%;
   }
 
+  .image-canvas-editor__readonly-generation-options {
+    flex-wrap: wrap;
+  }
+
   .image-canvas-editor__character-composer {
     position: fixed;
     left: 0.75rem !important;

From 9c7b3ad16d5611ea3dfa4ab640bfdb5074fbf4fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Thu, 18 Jun 2026 17:31:35 +0800
Subject: [PATCH 15/16] Image editor: Seedance2.0 refs and audio changes

Adds Seedance 2.0 reference-media constraints and forbids video data URLs; updates docs/decision-log and pitfalls to record the new rules. Introduces typed audio params (type: one-shot|loop, tempo: number|null), generator-specific placeholder styles/avoidance and UI changes for generation panels. Implements related front-end changes (new crop/ raster edit components, many image-editor models, tests and workflow hooks) and server-side contract/handler updates across api-server, shared-contracts, platform-audio, platform-image and vector_engine_audio_generation to support the new submission/asset flow and validations.
---
 .../shared-memory/decision-log.md             |  15 +
 docs/project-memory/shared-memory/pitfalls.md |  16 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |  21 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  28 +-
 ...辑器】画板图标素材生成入口设计-2026-06-15.md |  15 +-
 ...�编辑器】画板音乐生成入口设计-2026-06-18.md |  20 +-
 .../src/character_animation_assets.rs         | 204 ++++++++---
 .../crates/api-server/src/editor_project.rs   |  57 +++-
 .../api-server/src/modules/editor_project.rs  |   8 +-
 .../generation.rs                             |  32 +-
 .../vector_engine_audio_generation/tests.rs   |  65 +++-
 server-rs/crates/platform-audio/src/client.rs |  79 ++++-
 server-rs/crates/platform-audio/src/lib.rs    |   7 +-
 .../crates/platform-audio/src/request.rs      |  21 +-
 server-rs/crates/platform-audio/src/types.rs  |   6 +-
 .../tests/vector_engine_audio.rs              |  81 ++++-
 .../src/generated_asset_sheets/alpha.rs       |  21 +-
 .../src/generated_asset_sheets/sheet.rs       |  17 +-
 .../src/vector_engine/curl_transport.rs       |  11 +-
 .../crates/shared-contracts/src/assets.rs     | 115 ++++++-
 .../spacetime-client/src/editor_project.rs    |  78 +++--
 server-rs/crates/spacetime-client/src/lib.rs  |   4 +-
 .../crates/spacetime-client/src/mapper.rs     |  28 +-
 .../src/mapper/editor_project.rs              |   6 +-
 .../src/editor_project_storage.rs             |  38 +--
 .../ImageCanvasBottomToolbarView.test.tsx     |  13 +-
 .../ImageCanvasBottomToolbarView.tsx          | 109 +++---
 .../ImageCanvasCropExpandPanelView.tsx        | 108 ++++++
 ...CanvasEditorGenerationIntegration.test.tsx | 199 +++++------
 .../ImageCanvasEditorModel.test.ts            |  12 +-
 .../image-editor/ImageCanvasEditorModel.ts    |  28 +-
 .../ImageCanvasEditorShellView.test.tsx       |  22 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |  23 +-
 .../ImageCanvasEditorView.test.tsx            |  54 +--
 .../image-editor/ImageCanvasEditorView.tsx    | 117 +++++--
 ...ImageCanvasGenerationComposerView.test.tsx |  83 ++++-
 .../ImageCanvasGenerationComposerView.tsx     | 323 ++++++++++--------
 .../ImageCanvasGenerationDialogModel.test.ts  | 141 ++++++--
 .../ImageCanvasGenerationDialogModel.ts       | 116 +++++--
 .../ImageCanvasGenerationLayerModel.test.ts   |   1 +
 .../ImageCanvasGenerationLayerModel.ts        |   8 +-
 .../ImageCanvasGenerationModel.test.ts        |  23 +-
 .../ImageCanvasGenerationModel.ts             |  24 +-
 ...ageCanvasGenerationSubmissionModel.test.ts |  54 ++-
 .../ImageCanvasGenerationSubmissionModel.ts   |  42 ++-
 ...CanvasIconSpritesheetComposerView.test.tsx |  33 +-
 ...ImageCanvasIconSpritesheetComposerView.tsx | 135 +++-----
 .../ImageCanvasOverlayModel.test.ts           |   5 +-
 .../image-editor/ImageCanvasOverlayModel.ts   |  50 ++-
 .../ImageCanvasQuickEditPanelView.tsx         |  24 +-
 .../ImageCanvasRasterEditModel.test.ts        |  70 ++++
 .../ImageCanvasRasterEditModel.ts             | 263 ++++++++++++++
 ...ageCanvasSelectedLayerToolbarView.test.tsx |  75 ++--
 .../ImageCanvasSelectedLayerToolbarView.tsx   | 106 +++---
 .../image-editor/ImageCanvasStageView.tsx     |  27 +-
 .../ImageCanvasUploadModel.test.ts            |   6 +
 .../ImageCanvasWorldView.test.tsx             | 179 ++++++++++
 .../image-editor/ImageCanvasWorldView.tsx     | 107 ++++--
 ...anvasGenerationSubmissionWorkflow.test.tsx |  10 +-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  33 +-
 .../useImageCanvasGenerationSurface.test.tsx  |  44 ++-
 .../useImageCanvasGenerationSurface.tsx       | 246 ++++++-------
 .../useImageCanvasGenerationWorkflow.test.tsx |   4 +-
 .../useImageCanvasGenerationWorkflow.ts       | 248 ++++++++++++--
 .../useImageCanvasLayerCommands.test.tsx      |   2 +-
 src/index.css                                 | 318 +++++++++--------
 .../image-editor/editorProjectClient.test.ts  |  71 +++-
 .../image-editor/editorProjectClient.ts       |   7 +-
 68 files changed, 3262 insertions(+), 1294 deletions(-)
 create mode 100644 src/components/image-editor/ImageCanvasCropExpandPanelView.tsx
 create mode 100644 src/components/image-editor/ImageCanvasRasterEditModel.test.ts
 create mode 100644 src/components/image-editor/ImageCanvasRasterEditModel.ts

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 8e118cfda..c9b774977 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-06-18 图片画布 Seedance 2.0 参考媒体提交边界
+
+- 背景：`/editor/canvas` 生成视频需要严格对齐火山 Seedance 2.0 多模态参考输入；参考视频若继续走 Base64 / `data:video` 会超过请求体并被上游拒绝，参考音频单独输入和非 Seedance 模型携带参考字段也会违反文档契约。
+- 决策：仅 `seedance2.0-fast` / `seedance2.0` 可提交参考图片、参考视频、参考音频；图片 0~9、视频 0~3、音频 0~3，音频必须搭配图片或视频。参考视频只能提交公网 URL、`asset://` 或画板资源 `objectKey`，禁止 `data:video/*`；视频 / 音频上传先走 OSS 直传和 asset_object confirm，前端保存 signed URL 预览但提交优先 `objectKey`，后端统一重新签名给 Ark。Ark body 按 `image_url` / `video_url` / `audio_url` + `reference_*` role 构造，并显式发送 `generate_audio:false`。
+- 影响范围：图片画布生成视频面板、参考媒体上传工作流、`editorReferenceUploadClient`、`ImageCanvasGenerationSubmissionModel`、`shared-contracts`、`api-server` 编辑器视频 BFF、Lovart 生成类面板文档。
+- 验证方式：运行 `npx vitest run src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/services/image-editor/editorReferenceUploadClient.test.ts --reporter verbose`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p shared-contracts editor_video_request_supports_seedance_multimodal_references --manifest-path server-rs/Cargo.toml`，并执行 `npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、火山 Seedance 2.0 任务创建文档。
+
 ## 2026-06-18 图片画布生成音乐入口作为音频图层接入
 
 - 背景：图片画布底部生成工具需要补齐游戏音效和游戏背景音乐生成，既要复用现有 Lovart 式画布生成器快照、占位避让和持久化，又不能把音频能力并入图片素材库或视觉小说专用音频开关。
@@ -2350,3 +2358,10 @@
 - 影响范围：图片画布 layout 序列化 / hydrate、生成工作流、生成器渲染、项目自动保存、素材库回填和编辑器技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useCanvasGenerationDialogs.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`、浏览器刷新 smoke。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-18 编辑器画板音效参数与待生成占位类型化
+
+- 背景：`/editor/canvas` 新建视频、角色形象、音效和背景音乐待生成对象时沿用图片占位 icon，音效面板仍把 `type` 与 `tempo` 分成两个旧字符串选项，不符合 Lovart 式简洁参数按钮和 BPM 输入需求。
+- 决策：画布待生成占位按生成器模式渲染专属空白样式、icon 与右上角标签：视频、角色、音效、背景音乐不再统一使用图片 icon；角标继续按 viewport 反向缩放。编辑器音效请求契约改为 `type: "one-shot" | "loop"` 与 `tempo: number | null`，BPM 范围 `1-300`，默认 `null`；前端底部只保留一个无标题音效参数按钮，组合显示如 `单次·120BPM`。
+- 影响范围：`src/components/image-editor/ImageCanvasWorldView.tsx`、`ImageCanvasGenerationComposerView.tsx`、`ImageCanvasEditorTypes.ts`、`ImageCanvasGenerationSubmissionModel.ts`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/shared-contracts/src/assets.rs`、`server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs`、`server-rs/crates/platform-audio/src/request.rs`。
+- 验证方式：`npx vitest run src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/ImageCanvasGenerationModel.test.ts src/services/image-editor/editorProjectClient.test.ts --reporter verbose`、`cargo test -p shared-contracts --manifest-path server-rs/Cargo.toml`、`cargo test -p platform-audio --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_sound_effect --manifest-path server-rs/Cargo.toml`。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 7fdca4f0d..5fc577cfa 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -47,6 +47,14 @@
 - 验证：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "only exposes character animation"`；`cargo test -p api-server editor_character_animation_accepts_character_image_body_above_default_limit --manifest-path server-rs/Cargo.toml`。
 - 关联：`src/components/image-editor/ImageCanvasEditorView.tsx`、`server-rs/crates/api-server/src/modules/play_flow.rs`、`server-rs/crates/api-server/src/app.rs`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`。
 
+## 图片编辑器 Seedance 2.0 参考媒体不要提交视频 Data URL
+
+- 现象：画板生成视频选择 Seedance 2.0 并上传参考视频后，请求体暴涨、可能返回 `413` 或上游拒绝 `video_url.url`；文档示例或测试如果写 `data:video/mp4;base64,...`，后续实现很容易照抄。
+- 原因：火山 Seedance 2.0 参考视频只支持公网 URL 或 `asset://` 素材 ID，项目内画板资源应以 `objectKey` 由后端换签；视频不支持 Base64 / `data:video`，且 50MB 视频转 Base64 后会逼近或超过 64MB 请求体上限。参考音频虽然支持 Base64，但也不能单独输入，且大文件同样不应塞进 JSON。
+- 处理：参考视频 / 音频上传先走 `/api/assets/direct-upload-tickets` 直传 OSS，再 `/api/assets/objects/confirm` 确认；前端保留 signed URL 做预览，提交生成时优先使用 `objectKey`。后端归一化必须拒绝 `data:video/*`，非 Seedance 模型携带参考字段也必须拒绝；Ark body 显式带 `generate_audio:false`。
+- 验证：`npx vitest run src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/services/image-editor/editorReferenceUploadClient.test.ts --reporter verbose`；`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`；`cargo test -p shared-contracts editor_video_request_supports_seedance_multimodal_references --manifest-path server-rs/Cargo.toml`。
+- 关联：`src/services/image-editor/editorReferenceUploadClient.ts`、`src/components/image-editor/useImageCanvasUploadWorkflow.ts`、`src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts`、`server-rs/crates/api-server/src/character_animation_assets.rs`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 图片编辑器生成类菜单要挂到页面级 portal
 
 - 现象：底部 `生成规范` 菜单、角色面板里的 `角色形象规范` 来源菜单点击后像没有弹出来，实际被按钮所在的局部滚动容器挡住了。
@@ -71,6 +79,14 @@
 - 验证：`npm test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "keeps the generation placeholder draggable while the image is generating"`。
 - 关联：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/ImageCanvasEditorView.test.tsx`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
+## 图片画布 Lovart 新生成占位必须避让已有图层和占位
+
+- 现象：用户在画布中心已有图片时继续点击“生成图片 / 生成视频 / 生成规范”等入口，新建的待生成占位压在已有图片或其它待生成占位上；生成完成后看起来像图片被覆盖或丢失。
+- 原因：入口直接把 placeholder 放在当前视口中心，没有把已有图层、隐藏状态和 inactive generation dialog 的占位统一纳入避让计算，也没有在落点确定后把 viewport 平移到新占位中心。
+- 处理：所有会创建 generation dialog 的入口都必须走 `ImageCanvasGenerationPlacementModel`，避让所有 `hidden !== true` 的图层和 active / inactive placeholder；按 32px 世界坐标间距外扩阻挡矩形，在候选点中选择距离当前屏幕中心对应画板位置最近且不重叠的位置，再调用 `centerViewportOnPlacement(...)` 保持缩放只平移。
+- 验证：`npm run test -- src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`。
+- 关联：`src/components/image-editor/ImageCanvasGenerationPlacementModel.ts`、`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## Windows 本地 dev 不要把 RUSTC_WRAPPER 绕过写成 rustc
 
 - 现象：Windows 上执行 `npm run dev:api-server` 时，api-server 在 Cargo 启动阶段失败，日志出现 `error: multiple input filenames provided (first two filenames are ... rustc.exe and -)`，`/healthz` 无法访问。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 61d637f8a..62414515a 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -12,13 +12,13 @@
 - 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
 - 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
 - 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。
-- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；图片右上角素材类型标签、查看信息按钮和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；查看信息按钮使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
-- 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成、局部修改 / 蒙版、文字、形状 / 标注、导出。
+- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；浮动工具栏只保留当前可执行的编辑动作，不放调整 / 复制 / 删除 / 查看信息占位按钮。图片右上角素材类型标签、图片信息角标和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；图片信息角标使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
+- 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成图片、生成视频、生成音乐、生成规范、生成角色形象、生成图标素材、生成 UI 设计图。底部栏不再展示文字工具、形状标注工具和导出工具；上传与生成图片之间、生成音乐与生成规范之间各有一个半图标高度分割线。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
-- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
-- 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板只展示只读参数，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色形象规范 / 常规参考图 / 图标素材规范 / 编辑参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
+- 对生成资源执行重绘时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图；重绘面板不因提交成功自动关闭，便于连续改提示词。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范、快速编辑和重绘保留既有 `gpt-image-2` 路径；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板只展示只读参数，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后作为 `quick-edit` 参考图走同一图片生成 BFF，并在原图右侧生成一张新图。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和重绘在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频` 和 `生成UI设计图`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
 
@@ -65,7 +65,7 @@
 - `PATCH /api/editor/assets/{assetId}`：重命名素材或移动素材到文件夹。
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
 - `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
-- `POST /api/editor/icon-spritesheets/generations`：按图标素材规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`，后端把 UI 尺寸归一为文档支持的 `1024x1024`、`1024x1536`、`1536x1024`、`2048x2048`、`2048x1152` 等 `size` 字符串。
+- `POST /api/editor/icon-spritesheets/generations`：按图标素材规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize` 和 `priceMudPoints`；`priceMudPoints` 必须来自编辑器生成计费配置的 `icon` 档位（首版 12 泥点），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`，后端把 UI 尺寸归一为文档支持的 `1024x1024`、`1024x1536`、`1536x1024`、`2048x2048`、`2048x1152` 等 `size` 字符串。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
 - `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
@@ -86,15 +86,16 @@
 - 左下角小地图可展示当前图层分布和视口范围，开关按钮可隐藏 / 恢复小地图，背景色菜单可切换白色、浅灰、暖灰和冷蓝工作区底色。
 - 默认选择模式；底部工具栏能切换工具；中键拖拽和 Space 临时抓手都能平移画布。
 - 拖拽图片接近其它图片边缘或中心时显示吸附线，并保存吸附后的最终布局。
-- 生成工具点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
+- 生成图片点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
 - 生成中的占位图聚焦后支持键盘 `Delete` / `Backspace` 删除，不新增可见删除按钮；删除后对应异步回写必须按生成器 ID 判空并丢弃，不能把已删除素材重新落回画布。
 - 生成器快照刷新后必须恢复；待生成、生成中、失败和已生成后跟随成品图层的生成器都不能因为刷新丢失输入、参数、参考图或占位框位置。
 - 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色形象规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。所有生成面板参考图槽位统一为方形图标组件；角色形象规范槽位只显示规范 logo 和 `角色规范` 四字，绑定来源标题只保留给可访问名称、悬浮 title 和图片信息。已有参考图槽位只有在 hover / focus 时显示右上角 `×`，点击后只解绑对应参考图。
 - 生成规范类图片面板底部必须显示只读 `16:9`、`2K`、`gpt-image-2`，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
-- 修改生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图。
-- 快速编辑站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
+- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、角色图专属生成动画、分割线、重绘、下载按钮。裁扩支持输入四边像素，负数裁剪、正数扩大，扩大区域保持透明；去除背景使用前端轻量去背并回写为新的工程资源快照。
+- 重绘生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图，且重绘面板保持打开。
+- 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
 - 素材文件夹可以新建、折叠、重命名和删除；删除普通文件夹后，其素材移动到“项目素材”。
 - 上传按钮和拖拽上传都支持多文件；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入默认文件夹并在投放点创建画布图层。
 - 素材面板支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
@@ -109,4 +110,4 @@
 - 接入图片生成 / 修改计费、队列进度状态、OSS 落盘和更完整失败审计。
 - 资产库接入：素材栏从用户资产、历史生成图或上传结果读取。
 - 图层模型：引入稳定 layer id、z-index、锁定、隐藏和多选。
-- 图像编辑：将占位工具替换为裁剪、抠图、局部修改、蒙版和导出等真实能力。
+- 图像编辑：继续扩展更精细的局部修改、蒙版、智能抠图与导出能力。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index f90c7e420..c4a021d4f 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -33,7 +33,7 @@
    - 生成角色：`你希望角色如何设计？`
    - 生成 UI：`你希望这个 UI 长什么样？`
    - 生成视频：`你希望生成什么视频？`
-8. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范、图标素材多描述。
+8. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范。图标素材生成不再使用多描述列表，改为复用角色形象生成面板同款单文本输入框。
 9. 生成规范下的角色形象规范、UI素材规范、图标素材规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
 
 ## 参数交互
@@ -45,7 +45,7 @@
 ```
 
 - 面板内不显示 `画面比例`、`大小尺寸`、`模型` 等字段标题，只显示当前选择值。
-- 图片类面板把画面比例和大小尺寸合并成一个左下角选项框；视频面板把比例、时长、清晰度合并成一个左下角选项框。
+- 图片类面板把画面比例和大小尺寸合并成一个左下角选项框；视频面板把比例、时长、清晰度合并成一个左下角选项框；音效面板把 type 和 BPM 合并成一个无标题左下角选项框。
 - 模型选项框和生成按钮位于右下角。
 - 点击后以页面级浮层向上弹出独立选项面板；父级面板隐藏或销毁时，选项面板同步销毁。
 - 点击选项只更新字段和选中样式，不收起选项面板；再次点击当前参数按钮可收起。
@@ -54,7 +54,7 @@
 - 模型子面板每行固定一个模型，不用方框包裹模型名；模型名不换行，前置对应模型类型图标，选中项在模型名后用对号标记。
 - 比例选项卡片内展示对应比例的线框。
 - 父级面板、底部选项框、弹出子面板字号保持一致。
-- 底部组合值使用 `·` 分隔，例如 `16:9 · 4秒 · 480p`。
+- 底部组合值使用 `·` 分隔，例如 `16:9 · 4秒 · 480p`、`单次·120BPM`。
 - 底部参数热区与生成按钮等高，默认不显示阴影；悬停显示轻量阴影；箭头默认向下，展开后旋转向上。
 - 底边栏中会在上方弹出二级选项的入口不再依赖点击展开。鼠标悬停到入口即可打开二级面板，鼠标离开入口和二级面板后自动收起；当前范围包括 `生成规范` 和 `生成音乐`。
 - 底边栏二级选项面板必须锚定到对应入口按钮本身，不使用屏幕居中或固定底部偏移；移动端窄屏下也应保持跟随入口位置。
@@ -67,6 +67,7 @@
 - 本次消耗泥点必须显示在生成按钮内部。
 - 生成按钮内明确显示 `N泥点`，例如 `生成12泥点`、`生成40泥点`；不使用泥点图标替代文字。
 - 泥点配置统一收口到 `api-server` 的编辑器生成配置模块；前端只保留与后端配置同名的展示兜底，后续可接接口动态下发。
+- 生成图标素材面板提交 `POST /api/editor/icon-spritesheets/generations` 时必须携带 `priceMudPoints`，取同一份 `icon` 计费配置；后端用 `editor_generation_config` 校验，不允许绕过配置继续生成。
 
 ## 画布占位落点
 
@@ -78,12 +79,14 @@
 - 居中行为：调用 `openCanvasGenerationDialog(...)` 时写入避让后的 placeholder；随后调用 `centerViewportOnPlacement(...)`，让屏幕中心移动到新占位中心，并保持原 viewport scale。
 - 入口状态：新入口打开后设置对应 activeTool，清空画布选中、右键菜单、快速编辑、角色动画和其它生成来源选择状态；只切换当前面板，不删除已有生成占位。
 - 生成中的占位图允许通过键盘 `Delete` / `Backspace` 删除；不额外增加画布上的可见删除按钮。用户删除后，后续异步成功或失败回写不得重新创建该生成对象。
+- 待生成占位的空白样式按生成类型区分：视频使用视频图标和视频角标，角色形象使用角色图标和角色角标，音效使用音效图标和音效角标，背景音乐使用音乐图标和背景音乐角标。
 
 ## 画布悬浮信息
 
 - 待生成占位图只有聚焦或生成中才显示高亮边框、左上角生成器名称和右上角原始尺寸；失焦后保留灰色占位块本体，不显示这些辅助信息。
 - 占位图的生成器名称 / 原始尺寸、图片图层右上角素材类型标签、查看信息按钮和悬浮尺寸标签都按 viewport 反向缩放，画布缩小时保持屏幕可读尺寸。
 - 查看信息按钮固定使用圆形 `i` 图标，不使用中括号、花括号或文本符号样式。
+- 视频 / 角色 / 音效 / 背景音乐待生成占位的角标同样按 viewport 反向缩放，不随画布缩放变小。
 
 ## 画布保存
 
@@ -103,6 +106,8 @@
 生成UI设计图：12 泥点
 生成视频：480p 每秒 10 泥点，720p 每秒 20 泥点
 角色动画：480p 每秒 10 泥点，720p 每秒 20 泥点
+生成音效：10 泥点
+生成背景音乐：5 泥点
 ```
 
 ## 生成视频模型与接口
@@ -119,13 +124,25 @@
 - 角色动画生成固定使用 `seedance2.0-fast`，不继承生成视频标准版选择。
 - 后端复用现有 Ark / VectorEngine content generation task 轮询链路，并把生成视频持久化到 OSS；缺少 `ARK_CHARACTER_VIDEO_BASE_URL` 或 `ARK_CHARACTER_VIDEO_API_KEY` 时 fail-closed 返回配置错误。
 
+### Seedance 2.0 参考媒体与提交约束
+
+- 参考媒体只对 `seedance2.0-fast` / `seedance2.0` 开放；切换到 Kling 等非 Seedance 模型时，前端不提交 `referenceImageSrcs` / `referenceVideoSrcs` / `referenceAudioSrcs`，后端收到非 Seedance 参考字段必须拒绝。
+- 多模态参考按火山 Seedance 2.0 文档限制：参考图片 0~9 张，参考视频 0~3 个，参考音频 0~3 段；音频不可单独输入，必须至少搭配 1 张参考图片或 1 个参考视频。
+- 参考图片支持 URL / Base64 / `asset://` / 画板资源路径；格式为 jpeg、png、webp、bmp、tiff、gif、heic、heif，单张小于 30MB，请求体总大小不超过 64MB。
+- 参考视频只支持 URL / `asset://` / 画板资源路径，不支持 Base64 / `data:video/*`；格式为 mp4、mov，单个文件不超过 50MB，单个时长 [2, 15] 秒，最多 3 个且总时长不超过 15 秒。
+- 参考音频支持 URL / Base64 / `asset://` / 画板资源路径；格式为 wav、mp3，单个文件不超过 15MB，单个时长 [2, 15] 秒，最多 3 段且总时长不超过 15 秒。
+- 前端上传参考视频 / 参考音频必须走 `/api/assets/direct-upload-tickets` 直传 OSS，再 `/api/assets/objects/confirm` 入库；前端状态保存 signed URL 供预览，同时保存 `objectKey` / `assetObjectId`，提交生成时优先使用 `objectKey`。
+- 后端接收画板资源 `objectKey` 后统一重新签名为 Ark 可读 URL，再按文档构造 `content`：`image_url` + `role=reference_image`、`video_url` + `role=reference_video`、`audio_url` + `role=reference_audio`。
+- 画板生成视频当前固定无声，因此 Ark 请求必须显式带 `generate_audio:false`，不能只依赖前端 `sound=off` 或上游默认值。
+- Seedance 2.0 文档提示不支持直接上传含真人人脸的参考图 / 视频；当前画板尚未做真人脸授权证明、来源声明或服务端人脸拦截，后续开放真人素材前必须补授权/来源确认链路。
+
 ## 验收
 
 - 所有生成类面板首行都是参考图区域。
 - 参考图槽位统一是方形图标；角色形象规范槽位显示规范 logo 和 `角色规范` 四字，悬停已有参考图时才显示右上角删除 `×`。
 - 比例 / 尺寸 / 模型不再平铺全部选项；比例与尺寸合并为左下角当前值按钮，模型与生成按钮位于右下角。
 - 单文本输入面板不显示字段标题，placeholder 是问题式文案。
-- 多文本输入面板字段标题和边界仍清晰。
+- 多文本输入面板字段标题和边界仍清晰；图标素材面板应只有一个 `素材描述` 文本输入框，不出现列表式 `素材描述 N` 卡片或添加描述按钮。
 - 生成按钮内能看到 `N泥点` 文案。
 - 弹出选项面板通过 `role=menu` 暴露，点击选项后保持打开，可连续修改多个字段。
 - 底边栏 `生成规范` / `生成音乐` 悬停即可看到上方选项面板；鼠标从按钮移动到选项面板时不闪退，离开按钮和选项面板后收起。
@@ -133,5 +150,8 @@
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
 - 生成规范类图片底部展示只读 `16:9`、`2K`、`gpt-image-2`，提交参数也固定为这三项，不出现可编辑的比例 / 尺寸 / 模型选项。
 - 生成中的占位图聚焦后可用 `Delete` / `Backspace` 删除；删除后异步结果不再落回画布，也不显示额外删除 UI。
+- 生成视频 / 角色形象 / 音效 / 背景音乐新建后，画布占位空白样式和右上角标签均与对应生成类型一致，不再统一使用图片占位 icon。
+- 生成游戏音效面板底部不显示 `type` / `tempo` 字段标题，只有一个音效参数按钮；type 只支持 `one-shot` / `loop`，BPM 为 `1-300` 的数字或 `null`，选择后按钮显示 `单次·120BPM` 这类组合值。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
 - 生成器输入、参数、参考图和占位框在刷新后仍存在；已生成对象的生成器面板继续跟随成品图层。
+- Seedance 2.0 参考视频 / 音频上传不产生 `data:video/*` / 大体积音频 JSON；提交请求优先携带 `objectKey`，后端 Ark body 含 `generate_audio:false` 且不含未确认的 `mode` 字段。
diff --git a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
index 2ecd41871..d4dd470b5 100644
--- a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
@@ -21,15 +21,14 @@
    - `从画布中选择` 进入画布点选状态，只允许选择 `assetKind: "icon-spec"` 的图标素材规范图片；其它图片点击无效。
    - `新建图标素材规范` 复用生成规范表单，规格类型为 `图标素材规范`，生成成功后图层标记为 `icon-spec`。
    - `上传图片` 使用现有本地图片上传入口，上传图只绑定到本次面板，不自动放入画布。
-2. 第二模块为素材描述列表。
-   - 每个文本框输入一个素材描述。
-   - 默认填入：`返回按钮`、`设置按钮`、`下一关按钮`、`提示按钮`、`原图按钮`、`冻结按钮`。
-   - 可以继续添加新的素材描述框，最多 `100` 个。
-   - 生成时过滤空文本，按面板从上到下顺序作为 prompt 的素材清单。
+2. 第二模块为素材描述文本框。
+   - UI 复用角色形象生成面板同款单个文本输入框，让用户直接叙述多个素材。
+   - 默认按换行填入：`返回按钮`、`设置按钮`、`下一关按钮`、`提示按钮`、`原图按钮`、`冻结按钮`。
+   - 生成时按换行、逗号、顿号、分号、斜杠或竖线切分，过滤空文本后最多保留 `100` 个素材描述，并按文本顺序作为 prompt 的素材清单。
 
 ## 面板外观
 
-- 图标素材面板不使用内部纵向滑动列表；素材描述项按横向卡片铺开，新增一项就让面板整体更宽，保持列表一眼可扫。
+- 图标素材面板不再使用列表式素材描述框，也不再按描述项横向扩宽；素材描述区改为与角色形象生成面板一致的单个文本输入框。
 - 图标素材规范入口采用 Lovart 式参考卡：左侧预览缩略图，中间显示当前绑定名称，右侧显示绑定状态和三个轻量动作入口，不再只是两行文字平铺。
 - 规范卡的 `从画布中选择 / 新建图标素材规范 / 上传图片` 继续保留独立菜单，但菜单只负责来源切换，不承载说明文案。
 
@@ -42,6 +41,7 @@
   - `model`：支持 `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`。
   - `aspectRatio`：按 `x:y` 展示，选项跟随模型。
   - `imageSize`：按 `0.5K / 1K / 2K` 展示，选项跟随模型。
+  - `priceMudPoints`：固定取编辑器生成计费配置中的 `icon` 档位，首版为 `12`；前端只提交该配置值，后端用 `editor_generation_config` 校验，不允许素材生成面板自行写死其它价格。
 - 模型与尺寸选项：
   - `nanobanana2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `0.5K / 1K / 2K`。后端走 `/v1beta/models/{model}:generateContent`，把图标素材规范图作为 `inline_data`，并把 `aspectRatio` / `imageSize` 写入 `generationConfig.imageConfig`；`0.5K` 按 VectorEngine 文档传 `"512"`。
   - `gpt-image-2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `1K / 2K`。后端走 `/v1/images/edits`，把图标素材规范图作为 multipart `image`，按 `size` 映射：`1K 1:1 -> 1024x1024`、`1K 2:3/9:16 -> 1024x1536`、`1K 3:2/16:9 -> 1536x1024`、`2K 1:1 -> 2048x2048`、`2K 3:2/16:9 -> 2048x1152`；文档未列出 `2K` 竖版，`2K 2:3/9:16` 后端回落到 `1024x1536`。
@@ -73,7 +73,8 @@
 
 - 点击 `生成图标素材` 后出现一叠空白图标占位和图标素材面板。
 - `图标素材规范 -> 从画布中选择` 只能选择图标素材规范图，点击普通图片或角色规范图不会绑定。
-- 默认 6 个素材描述会进入 prompt；新增描述最多到 100 个。
+- 默认 6 个素材描述会进入 prompt；用户在单个文本框中继续输入时最多解析 100 个素材描述。
 - 默认打开图标素材面板时选中 `nanobanana2 / 1:1 / 1K`；模型切换后，角色和图标素材面板之间沿用上次选择的模型。
 - 图标素材生成请求必须带 `model`、`aspectRatio` 和 `imageSize`；`nanobanana2` 请求体必须包含 `generationConfig.imageConfig.aspectRatio/imageSize`，`gpt-image-2` 请求必须包含文档映射后的 `size`。
 - 生成成功后画布出现按描述命名的多个透明图标素材图层，图层之间不重叠。
+- 生成图标素材提交体包含 `priceMudPoints: 12`；若前端传入与后端计费配置不一致的值，后端返回 `priceMudPoints` 校验错误，不继续调用上游生成。
diff --git a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
index 6042ce30e..cb79578d7 100644
--- a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
+++ b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
@@ -21,15 +21,17 @@
 ### 生成游戏音效
 
 - `sound`：用户输入的音效提示词。
-- `type`：合成选项，第一版以前端下拉 / 子面板保存字符串。
-- `tempo`：合成选项，第一版以前端下拉 / 子面板保存字符串。
+- `type`：合成选项，只支持 `one-shot` / `loop`；UI 显示为 `单次` / `循环`，不展示字段标题。
+- `tempo`：可空 BPM 数值；默认不填为 `null`，用户可通过拖拉条或数字输入设置，范围 `1-300`。
+- `type` 与 `tempo` 合并为一个 Lovart 式底部参数按钮；无 BPM 时按钮显示 `单次` / `循环`，有 BPM 时显示 `单次·120BPM` 这类组合值。
 - 提交时映射到 VectorEngine 游戏音效接口字段：`sound`、`type`、`tempo`。
 
 ### 生成游戏背景音乐
 
 - `gpt_description_prompt`：用户输入的背景音乐提示词。
 - `make_instrumental`：固定传 `true`，不在 UI 中展示为可改字段。
-- 提交时映射到 VectorEngine 游戏背景音乐接口字段：`gpt_description_prompt`、`make_instrumental: true`。
+- 提交到 VectorEngine 时映射为 Suno 纯音乐模式字段：`mv`、`gpt_description_prompt`、`make_instrumental: true`。`mv` 后端固定使用默认 Suno 模型，不在 UI 中展示。
+- `gpt_description_prompt` 按 Apifox 契约限制 200 字，超出时由 BFF 返回参数错误。
 
 ## 画布数据
 
@@ -52,8 +54,8 @@
 POST /api/editor/audios/sound-effects/generations
 {
   sound: string,
-  type: string,
-  tempo: string,
+  type: "one-shot" | "loop",
+  tempo: number | null,
   priceMudPoints: 10
 }
 ```
@@ -90,8 +92,9 @@ POST /api/editor/audios/background-music/generations
 
 - 在 `shared-contracts/src/assets.rs` 增加编辑器音频请求 / 响应 DTO。
 - 在 `platform-audio` 增加编辑器专用 body builder 和 submit 函数：
-  - 背景音乐 body 使用 `gpt_description_prompt`、`make_instrumental`。
-  - 音效 body 使用 `sound`、`type`、`tempo`。
+  - 背景音乐 body 使用 `mv`、`gpt_description_prompt`、`make_instrumental`。
+  - Suno 音乐接口路径固定为 `/suno/submit/music`；`VECTOR_ENGINE_BASE_URL` 即使配置为带 `/v1` 的图片接口根，也要在 `platform-audio` 中归一为根路径后再拼接，避免误请求 `/v1/suno/submit/music`。
+  - 音效 body 使用 `sound`、`type`、`tempo`，其中 `tempo` 是 `1-300` 的 BPM 或 `null`。
 - 在 `api-server` 增加编辑器音频 BFF：
   - `/api/editor/audios/sound-effects/generations`
   - `/api/editor/audios/background-music/generations`
@@ -101,7 +104,8 @@ POST /api/editor/audios/background-music/generations
 
 - 底部工具栏显示 `生成音乐`。
 - 点击 `生成音乐` 只出现选项框，不立刻创建占位。
-- 点击 `生成游戏音效` 后出现音效面板，字段为 `sound`、`type`、`tempo`。
+- 点击 `生成游戏音效` 后出现音效面板，文本字段为 `sound`；底部只有一个无标题音效参数按钮，内部合并 `type` 和 BPM。
+- 音效参数只提供 `单次(one-shot)`、`循环(loop)`，BPM 支持拖拉条和数字输入，范围 `1-300`，不填时提交 `tempo: null`。
 - 点击 `生成游戏背景音乐` 后出现背景音乐面板，字段为 `gpt_description_prompt`，不展示 `make_instrumental`。
 - 音效提交到 `/api/editor/audios/sound-effects/generations`，背景音乐提交到 `/api/editor/audios/background-music/generations`。
 - 成功后画布新增音频卡，能通过 `<audio controls>` 播放。
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 32753c5b8..42bad87d6 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -569,8 +569,8 @@ pub async fn generate_editor_character_animation(
     }
     .await;
 
-    let (generated, frames) = result
-        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let (generated, frames) =
+        result.map_err(|error| character_animation_error_response(&request_context, error))?;
 
     Ok(json_success_body(
         Some(&request_context),
@@ -606,13 +606,10 @@ pub async fn generate_editor_video(
         )
     })?;
 
-    let normalized =
-        normalize_editor_video_request(payload).map_err(|error| {
-            editor_video_error_response(&request_context, error)
-        })?;
-    let settings = require_editor_video_settings(&state, normalized.model.as_str()).map_err(
-        |error| editor_video_error_response(&request_context, error),
-    )?;
+    let normalized = normalize_editor_video_request(payload)
+        .map_err(|error| editor_video_error_response(&request_context, error))?;
+    let settings = require_editor_video_settings(&state, normalized.model.as_str())
+        .map_err(|error| editor_video_error_response(&request_context, error))?;
     let http_client = build_upstream_http_client(settings.ark.request_timeout_ms)
         .map_err(|error| editor_video_error_response(&request_context, error))?;
     let task_id = generate_ai_task_id(current_utc_micros());
@@ -1423,9 +1420,12 @@ async fn request_editor_character_animation_preview(
     let video_url =
         wait_for_ark_content_generation_task(http_client, &settings.ark, upstream_task_id.as_str())
             .await?;
-    let preview_payload =
-        download_generated_video(http_client, video_url.as_str(), "下载画板角色动画视频失败。")
-            .await?;
+    let preview_payload = download_generated_video(
+        http_client,
+        video_url.as_str(),
+        "下载画板角色动画视频失败。",
+    )
+    .await?;
     let preview_video_path = put_generated_preview_video(
         state,
         owner_user_id,
@@ -1476,23 +1476,18 @@ async fn create_editor_text_to_video_task(
     settings: &EditorVideoSettings,
     request: &NormalizedEditorVideoRequest,
 ) -> Result<String, AppError> {
-    let content = build_editor_video_ark_content(state, request)?;
+    let request_body = build_editor_video_ark_request_body(state, request)?;
     let response = http_client
-        .post(format!("{}/contents/generations/tasks", settings.ark.base_url))
+        .post(format!(
+            "{}/contents/generations/tasks",
+            settings.ark.base_url
+        ))
         .header(
             reqwest::header::AUTHORIZATION,
             format!("Bearer {}", settings.ark.api_key),
         )
         .header(reqwest::header::CONTENT_TYPE, "application/json")
-        .json(&json!({
-            "model": request.provider_model,
-            "content": content,
-            "resolution": request.resolution,
-            "ratio": request.aspect_ratio,
-            "duration": request.duration_seconds,
-            "generate_audio": false,
-            "watermark": false,
-        }))
+        .json(&request_body)
         .send()
         .await
         .map_err(|error| {
@@ -1556,7 +1551,10 @@ async fn create_editor_ark_image_to_video_task(
     source_frame_data_url: &str,
 ) -> Result<String, AppError> {
     let response = http_client
-        .post(format!("{}/contents/generations/tasks", settings.ark.base_url))
+        .post(format!(
+            "{}/contents/generations/tasks",
+            settings.ark.base_url
+        ))
         .header(
             reqwest::header::AUTHORIZATION,
             format!("Bearer {}", settings.ark.api_key),
@@ -2300,7 +2298,12 @@ fn normalize_editor_character_animation_request(
     }
     let source_image_src = trim_optional_text(Some(payload.source_image_src.as_str()))
         .ok_or_else(|| editor_character_animation_bad_request("sourceImageSrc 不能为空。"))?;
-    let prompt_text = payload.prompt_text.trim().chars().take(4000).collect::<String>();
+    let prompt_text = payload
+        .prompt_text
+        .trim()
+        .chars()
+        .take(4000)
+        .collect::<String>();
     if prompt_text.is_empty() {
         return Err(editor_character_animation_bad_request("动画描述不能为空。"));
     }
@@ -2443,6 +2446,23 @@ fn normalize_editor_video_request(
     })
 }
 
+fn build_editor_video_ark_request_body(
+    state: &AppState,
+    request: &NormalizedEditorVideoRequest,
+) -> Result<Value, AppError> {
+    let content = build_editor_video_ark_content(state, request)?;
+    Ok(json!({
+        "model": request.provider_model,
+        "content": content,
+        "resolution": request.resolution,
+        "ratio": request.aspect_ratio,
+        "duration": request.duration_seconds,
+        // 中文注释：Seedance 2.0 文档里声音生成默认为开启；画板当前视频入口固定无声，必须显式关闭。
+        "generate_audio": false,
+        "watermark": false,
+    }))
+}
+
 fn build_editor_video_ark_content(
     state: &AppState,
     request: &NormalizedEditorVideoRequest,
@@ -2458,16 +2478,19 @@ fn build_editor_video_ark_content(
         state,
         request.reference_image_srcs.as_slice(),
         "参考图片",
+        true,
     )?;
     let reference_video_urls = resolve_editor_video_reference_urls(
         state,
         request.reference_video_srcs.as_slice(),
         "参考视频",
+        false,
     )?;
     let reference_audio_urls = resolve_editor_video_reference_urls(
         state,
         request.reference_audio_srcs.as_slice(),
         "参考音频",
+        true,
     )?;
     content.extend(reference_image_urls.iter().map(|url| {
         json!({
@@ -2497,10 +2520,13 @@ fn resolve_editor_video_reference_urls(
     state: &AppState,
     sources: &[String],
     label: &str,
+    allow_data_url: bool,
 ) -> Result<Vec<String>, AppError> {
     sources
         .iter()
-        .map(|source| resolve_editor_video_reference_url(state, source.as_str(), label))
+        .map(|source| {
+            resolve_editor_video_reference_url(state, source.as_str(), label, allow_data_url)
+        })
         .collect()
 }
 
@@ -2508,9 +2534,18 @@ fn resolve_editor_video_reference_url(
     state: &AppState,
     source: &str,
     label: &str,
+    allow_data_url: bool,
 ) -> Result<String, AppError> {
     let value = source.trim();
-    if value.starts_with("data:") || value.starts_with("asset://") {
+    if value.starts_with("data:") {
+        if allow_data_url {
+            return Ok(value.to_string());
+        }
+        return Err(editor_video_bad_request(format!(
+            "{label}格式不支持，请使用官方支持的 URL、素材 ID 或画板资源路径。"
+        )));
+    }
+    if value.starts_with("asset://") {
         return Ok(value.to_string());
     }
     if value.starts_with("http://") || value.starts_with("https://") {
@@ -2519,8 +2554,13 @@ fn resolve_editor_video_reference_url(
 
     let object_key = value.trim_start_matches('/');
     if LegacyAssetPrefix::from_object_key(object_key).is_none() {
+        let format_hint = if allow_data_url {
+            "公网 URL、素材 ID、data URL 或画板资源路径"
+        } else {
+            "公网 URL、素材 ID 或画板资源路径"
+        };
         return Err(editor_video_bad_request(format!(
-            "{label}必须是官方支持的公网 URL、素材 ID、data URL 或画板资源路径。"
+            "{label}必须是官方支持的{format_hint}。"
         )));
     }
     let oss_client = state.oss_client().ok_or_else(|| {
@@ -2865,12 +2905,12 @@ fn resolve_editor_character_animation_frame_size(
         _ => (1, 1),
     };
     if ratio_width >= ratio_height {
-        let height = ((long_edge as f32 * ratio_height as f32 / ratio_width as f32).round() as u32)
-            .max(1);
+        let height =
+            ((long_edge as f32 * ratio_height as f32 / ratio_width as f32).round() as u32).max(1);
         (long_edge, height)
     } else {
-        let width = ((long_edge as f32 * ratio_width as f32 / ratio_height as f32).round() as u32)
-            .max(1);
+        let width =
+            ((long_edge as f32 * ratio_width as f32 / ratio_height as f32).round() as u32).max(1);
         (width, long_edge)
     }
 }
@@ -4691,11 +4731,7 @@ mod tests {
             })
             .expect_err("invalid frame/duration pair should fail");
 
-        assert!(
-            error
-                .body_text()
-                .contains("durationSeconds 必须与帧数组合")
-        );
+        assert!(error.body_text().contains("durationSeconds 必须与帧数组合"));
     }
 
     #[test]
@@ -4789,7 +4825,6 @@ mod tests {
         assert_ne!(normalized.provider_model, CHARACTER_ANIMATION_MODEL);
     }
 
-
     #[test]
     fn editor_video_normalizes_seedance_multimodal_references() {
         let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
@@ -4809,12 +4844,18 @@ mod tests {
         })
         .expect("seedance multimodal request should normalize");
 
-        assert_eq!(normalized.reference_image_srcs, vec!["data:image/png;base64,image"]);
+        assert_eq!(
+            normalized.reference_image_srcs,
+            vec!["data:image/png;base64,image"]
+        );
         assert_eq!(
             normalized.reference_video_srcs,
             vec!["generated-character-drafts/editor/seedance-references/video/demo.mp4"]
         );
-        assert_eq!(normalized.reference_audio_srcs, vec!["data:audio/mpeg;base64,audio"]);
+        assert_eq!(
+            normalized.reference_audio_srcs,
+            vec!["data:audio/mpeg;base64,audio"]
+        );
     }
 
     #[test]
@@ -4837,6 +4878,83 @@ mod tests {
         assert!(error.body_text().contains("参考视频格式不支持"));
     }
 
+    #[test]
+    fn editor_video_ark_body_sets_generate_audio_false_without_mode() {
+        let state = AppState::new(AppConfig::default()).expect("state should build");
+        let request = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "参考素材生成视频".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 40,
+            reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
+            reference_video_srcs: vec!["https://assets.example.com/reference.mp4".to_string()],
+            reference_audio_srcs: vec!["data:audio/mpeg;base64,audio".to_string()],
+        })
+        .expect("seedance multimodal request should normalize");
+
+        let body =
+            build_editor_video_ark_request_body(&state, &request).expect("ark body should build");
+
+        assert_eq!(body["generate_audio"], json!(false));
+        assert!(body.get("mode").is_none());
+        assert_eq!(body["content"][1]["role"], json!("reference_image"));
+        assert_eq!(body["content"][2]["role"], json!("reference_video"));
+        assert_eq!(body["content"][3]["role"], json!("reference_audio"));
+        assert_eq!(
+            body["content"][2]["video_url"]["url"],
+            json!("https://assets.example.com/reference.mp4")
+        );
+    }
+
+    #[test]
+    fn editor_video_ark_content_signs_generated_object_keys() {
+        let state = AppState::new(AppConfig {
+            oss_bucket: Some("genarrative-assets".to_string()),
+            oss_endpoint: Some("oss-cn-shanghai.aliyuncs.com".to_string()),
+            oss_access_key_id: Some("test-access-key-id".to_string()),
+            oss_access_key_secret: Some("test-access-key-secret".to_string()),
+            ..AppConfig::default()
+        })
+        .expect("state should build with OSS");
+        let request = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "参考视频生成视频".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 40,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: vec![
+                "generated-character-drafts/editor/seedance-references/video/demo.mp4".to_string(),
+            ],
+            reference_audio_srcs: Vec::new(),
+        })
+        .expect("seedance objectKey request should normalize");
+
+        let content = build_editor_video_ark_content(&state, &request)
+            .expect("ark content should sign object keys");
+        let signed_url = content[1]["video_url"]["url"]
+            .as_str()
+            .expect("video url should be string");
+
+        assert!(signed_url.starts_with("https://genarrative-assets.oss-cn-shanghai.aliyuncs.com/"));
+        assert!(
+            signed_url
+                .contains("generated-character-drafts/editor/seedance-references/video/demo.mp4")
+        );
+        assert!(signed_url.contains("x-oss-signature="));
+        assert_ne!(
+            signed_url,
+            "generated-character-drafts/editor/seedance-references/video/demo.mp4"
+        );
+    }
+
     #[test]
     fn editor_video_rejects_audio_only_seedance_references() {
         let error = normalize_editor_video_request(EditorVideoGenerateRequest {
@@ -4854,7 +4972,11 @@ mod tests {
         })
         .expect_err("audio-only references should fail");
 
-        assert!(error.body_text().contains("参考音频必须搭配参考图片或参考视频"));
+        assert!(
+            error
+                .body_text()
+                .contains("参考音频必须搭配参考图片或参考视频")
+        );
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index b979116bf..8bc4a4671 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -174,6 +174,7 @@ pub struct EditorIconSpritesheetGenerationRequest {
     model: Option<String>,
     aspect_ratio: Option<String>,
     image_size: Option<String>,
+    price_mud_points: u32,
 }
 
 #[derive(Debug, Serialize)]
@@ -267,6 +268,7 @@ pub struct EditorIconSpritesheetGenerationResponse {
     model: String,
     provider: &'static str,
     task_id: String,
+    price_mud_points: u32,
 }
 
 #[derive(Debug, Serialize)]
@@ -785,7 +787,9 @@ pub async fn generate_editor_image(
             payload
                 .reference_image_srcs
                 .as_ref()
-                .is_some_and(|references| references.iter().any(|source| !source.trim().is_empty())),
+                .is_some_and(|references| {
+                    references.iter().any(|source| !source.trim().is_empty())
+                }),
         )
     } else {
         role_setting.clone()
@@ -1116,6 +1120,8 @@ pub async fn generate_editor_icon_spritesheet(
     Extension(authenticated): Extension<AuthenticatedAccessToken>,
     Json(payload): Json<EditorIconSpritesheetGenerationRequest>,
 ) -> Result<Json<Value>, AppError> {
+    let expected_price_mud_points =
+        validate_editor_icon_spritesheet_price(payload.price_mud_points)?;
     let icon_descriptions = normalize_icon_descriptions(payload.icon_descriptions)?;
     let reference_image = parse_editor_reference_image(payload.reference_image_src.as_str())
         .map_err(|error| {
@@ -1209,6 +1215,7 @@ pub async fn generate_editor_icon_spritesheet(
             model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
+            price_mud_points: expected_price_mud_points,
         },
     ))
 }
@@ -1403,6 +1410,24 @@ fn normalize_icon_descriptions(descriptions: Vec<String>) -> Result<Vec<String>,
     Ok(normalized)
 }
 
+fn editor_icon_spritesheet_bad_request(message: impl Into<String>) -> AppError {
+    AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+        "provider": "editor-icon-spritesheet",
+        "message": message.into(),
+    }))
+}
+
+fn validate_editor_icon_spritesheet_price(price_mud_points: u32) -> Result<u32, AppError> {
+    let expected_price_mud_points =
+        crate::editor_generation_config::editor_image_generation_mud_points(Some("icon"));
+    if price_mud_points != expected_price_mud_points {
+        return Err(editor_icon_spritesheet_bad_request(format!(
+            "priceMudPoints 与素材生成计费配置不一致，应为 {expected_price_mud_points}。"
+        )));
+    }
+    Ok(expected_price_mud_points)
+}
+
 fn build_editor_icon_spritesheet_prompt(icon_descriptions: &[String]) -> String {
     format!(
         "参考图1的图标素材规范，纯绿幕背景方便扣除背景，禁止出现文字，保证每个图标素材的所有内容区域是完全连通的。按照以下的素材的顺序从上到下从左到右依次生成并整理成一张spritesheet：\n\n{}",
@@ -1883,4 +1908,34 @@ mod tests {
             .collect::<Vec<_>>();
         assert!(normalize_icon_descriptions(too_many).is_err());
     }
+
+    #[test]
+    fn editor_icon_spritesheet_request_price_uses_generation_config() {
+        assert_eq!(validate_editor_icon_spritesheet_price(12).unwrap(), 12);
+        let error = validate_editor_icon_spritesheet_price(5)
+            .expect_err("wrong icon spritesheet price should fail");
+        assert!(error.body_text().contains("priceMudPoints"));
+        let response = EditorIconSpritesheetGenerationResponse {
+            spritesheet_image_src: "data:image/png;base64,sheet".to_string(),
+            spritesheet_width: 512,
+            spritesheet_height: 512,
+            icon_image_srcs: vec![EditorIconSpritesheetIconResponse {
+                name: "返回按钮".to_string(),
+                image_src: "data:image/png;base64,back".to_string(),
+                width: 128,
+                height: 128,
+            }],
+            prompt: "图标 prompt".to_string(),
+            actual_prompt: Some("图标 prompt".to_string()),
+            model: "gemini-3.1-flash-image-preview".to_string(),
+            provider: "VectorEngine",
+            task_id: "task-icons".to_string(),
+            price_mud_points: crate::editor_generation_config::editor_image_generation_mud_points(
+                Some("icon"),
+            ),
+        };
+        let payload = serde_json::to_value(response).expect("response should serialize");
+
+        assert_eq!(payload["priceMudPoints"], json!(12));
+    }
 }
diff --git a/server-rs/crates/api-server/src/modules/editor_project.rs b/server-rs/crates/api-server/src/modules/editor_project.rs
index dd23407fc..be1ca8735 100644
--- a/server-rs/crates/api-server/src/modules/editor_project.rs
+++ b/server-rs/crates/api-server/src/modules/editor_project.rs
@@ -8,10 +8,10 @@ use crate::{
     editor_project::{
         create_editor_asset, create_editor_asset_folder, create_editor_project,
         create_editor_project_resource, delete_editor_asset, delete_editor_asset_folder,
-        delete_editor_project, edit_editor_image, generate_editor_image,
-        generate_editor_icon_spritesheet, get_editor_asset_library, get_editor_project,
-        list_editor_projects, load_recent_editor_project, rename_editor_project,
-        save_editor_project_layout, update_editor_asset, update_editor_asset_folder,
+        delete_editor_project, edit_editor_image, generate_editor_icon_spritesheet,
+        generate_editor_image, get_editor_asset_library, get_editor_project, list_editor_projects,
+        load_recent_editor_project, rename_editor_project, save_editor_project_layout,
+        update_editor_asset, update_editor_asset_folder,
     },
     state::AppState,
 };
diff --git a/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs b/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs
index 9f628c395..26a7a0083 100644
--- a/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs
+++ b/server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs
@@ -34,7 +34,7 @@ const EDITOR_AUDIO_HEIGHT: u32 = 120;
 pub(super) struct NormalizedEditorSoundEffectRequest {
     pub(super) sound: String,
     pub(super) sound_type: String,
-    pub(super) tempo: String,
+    pub(super) tempo: Option<u16>,
     pub(super) price_mud_points: u32,
 }
 
@@ -58,14 +58,31 @@ pub(super) fn normalize_editor_sound_effect_request(
             platform_audio::VIDU_PROMPT_MAX_CHARS,
         )
         .map_err(map_platform_audio_error)?,
-        sound_type: platform_audio::normalize_limited_text(&payload.sound_type, "type", 80)
-            .map_err(map_platform_audio_error)?,
-        tempo: platform_audio::normalize_limited_text(&payload.tempo, "tempo", 80)
-            .map_err(map_platform_audio_error)?,
+        sound_type: normalize_editor_sound_type(&payload.sound_type)?,
+        tempo: normalize_editor_sound_tempo(payload.tempo)?,
         price_mud_points: payload.price_mud_points,
     })
 }
 
+fn normalize_editor_sound_type(value: &str) -> Result<String, AppError> {
+    let sound_type = platform_audio::normalize_limited_text(value, "type", 80)
+        .map_err(map_platform_audio_error)?;
+    if sound_type == "one-shot" || sound_type == "loop" {
+        return Ok(sound_type);
+    }
+    Err(editor_audio_bad_request(
+        "音效 type 只支持 one-shot 或 loop",
+    ))
+}
+
+fn normalize_editor_sound_tempo(value: Option<u16>) -> Result<Option<u16>, AppError> {
+    match value {
+        Some(tempo) if (1..=300).contains(&tempo) => Ok(Some(tempo)),
+        Some(_) => Err(editor_audio_bad_request("音效 tempo BPM 必须在 1-300 之间")),
+        None => Ok(None),
+    }
+}
+
 pub(super) fn normalize_editor_background_music_request(
     payload: assets::EditorBackgroundMusicGenerateRequest,
 ) -> Result<NormalizedEditorBackgroundMusicRequest, AppError> {
@@ -76,7 +93,7 @@ pub(super) fn normalize_editor_background_music_request(
         gpt_description_prompt: platform_audio::normalize_limited_text(
             &payload.gpt_description_prompt,
             "gpt_description_prompt",
-            platform_audio::SUNO_PROMPT_MAX_CHARS,
+            platform_audio::SUNO_GPT_DESCRIPTION_PROMPT_MAX_CHARS,
         )
         .map_err(map_platform_audio_error)?,
         make_instrumental: true,
@@ -104,7 +121,7 @@ pub async fn generate_editor_sound_effect(
         platform_audio::EditorSoundEffectTaskRequest {
             sound: normalized.sound.clone(),
             sound_type: normalized.sound_type.clone(),
-            tempo: normalized.tempo.clone(),
+            tempo: normalized.tempo,
         },
     )
     .await
@@ -163,6 +180,7 @@ pub async fn generate_editor_background_music(
         platform_audio::EditorBackgroundMusicTaskRequest {
             gpt_description_prompt: normalized.gpt_description_prompt.clone(),
             make_instrumental: normalized.make_instrumental,
+            model: None,
         },
     )
     .await
diff --git a/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs b/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs
index 025530dbb..b91b91b0f 100644
--- a/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs
+++ b/server-rs/crates/api-server/src/vector_engine_audio_generation/tests.rs
@@ -86,18 +86,58 @@ fn editor_sound_effect_request_normalizes_sound_type_tempo_and_price() {
     let normalized =
         normalize_editor_sound_effect_request(assets::EditorSoundEffectGenerateRequest {
             sound: "  金币掉落叮当声  ".to_string(),
-            sound_type: " ui ".to_string(),
-            tempo: " fast ".to_string(),
+            sound_type: " one-shot ".to_string(),
+            tempo: Some(120),
             price_mud_points: 10,
         })
         .expect("editor sound effect request should normalize");
 
     assert_eq!(normalized.sound, "金币掉落叮当声");
-    assert_eq!(normalized.sound_type, "ui");
-    assert_eq!(normalized.tempo, "fast");
+    assert_eq!(normalized.sound_type, "one-shot");
+    assert_eq!(normalized.tempo, Some(120));
     assert_eq!(normalized.price_mud_points, 10);
 }
 
+#[test]
+fn editor_sound_effect_request_accepts_null_tempo_and_rejects_invalid_type() {
+    let normalized =
+        normalize_editor_sound_effect_request(assets::EditorSoundEffectGenerateRequest {
+            sound: "按钮点击".to_string(),
+            sound_type: "loop".to_string(),
+            tempo: None,
+            price_mud_points: 10,
+        })
+        .expect("null BPM should keep tempo unset");
+    assert_eq!(normalized.sound_type, "loop");
+    assert_eq!(normalized.tempo, None);
+
+    let error = normalize_editor_sound_effect_request(assets::EditorSoundEffectGenerateRequest {
+        sound: "按钮点击".to_string(),
+        sound_type: "ui".to_string(),
+        tempo: Some(120),
+        price_mud_points: 10,
+    })
+    .expect_err("unsupported sound type should fail");
+    assert!(error.to_string().contains("one-shot"));
+}
+
+#[test]
+fn editor_sound_effect_request_rejects_bpm_outside_documented_range() {
+    for tempo in [0, 301] {
+        let error = normalize_editor_sound_effect_request(
+            assets::EditorSoundEffectGenerateRequest {
+                sound: "按钮点击".to_string(),
+                sound_type: "one-shot".to_string(),
+                tempo: Some(tempo),
+                price_mud_points: 10,
+            },
+        )
+        .expect_err("BPM outside 1-300 should fail");
+
+        assert!(error.to_string().contains("1-300"));
+    }
+}
+
 #[test]
 fn editor_background_music_request_forces_instrumental_and_price() {
     let normalized =
@@ -113,12 +153,25 @@ fn editor_background_music_request_forces_instrumental_and_price() {
     assert_eq!(normalized.price_mud_points, 5);
 }
 
+#[test]
+fn editor_background_music_request_rejects_prompt_over_documented_limit() {
+    let error =
+        normalize_editor_background_music_request(assets::EditorBackgroundMusicGenerateRequest {
+            gpt_description_prompt: "乐".repeat(201),
+            make_instrumental: true,
+            price_mud_points: 5,
+        })
+        .expect_err("Suno gpt_description_prompt should follow Apifox 200 char limit");
+
+    assert!(error.to_string().contains("gpt_description_prompt"));
+}
+
 #[test]
 fn editor_audio_rejects_price_mismatch() {
     let error = normalize_editor_sound_effect_request(assets::EditorSoundEffectGenerateRequest {
         sound: "点击按钮".to_string(),
-        sound_type: "ui".to_string(),
-        tempo: "medium".to_string(),
+        sound_type: "one-shot".to_string(),
+        tempo: Some(120),
         price_mud_points: 5,
     })
     .expect_err("wrong sound effect price should fail");
diff --git a/server-rs/crates/platform-audio/src/client.rs b/server-rs/crates/platform-audio/src/client.rs
index f286d0db6..4444c4704 100644
--- a/server-rs/crates/platform-audio/src/client.rs
+++ b/server-rs/crates/platform-audio/src/client.rs
@@ -201,12 +201,9 @@ async fn get_vector_engine_json(
     path: &str,
     failure_context: &str,
 ) -> Result<Value, AudioError> {
+    let endpoint = vector_engine_audio_endpoint_url(settings, path);
     let response = http_client
-        .get(format!(
-            "{}{}",
-            settings.base_url.trim_end_matches('/'),
-            path
-        ))
+        .get(endpoint.as_str())
         .header(
             header::AUTHORIZATION,
             format!("Bearer {}", settings.api_key),
@@ -214,7 +211,7 @@ async fn get_vector_engine_json(
         .header(header::ACCEPT, "application/json")
         .send()
         .await
-        .map_err(|error| map_reqwest_error(failure_context, path, error))?;
+        .map_err(|error| map_reqwest_error(failure_context, endpoint.as_str(), error))?;
     parse_vector_engine_response(response, failure_context).await
 }
 
@@ -225,12 +222,9 @@ async fn post_vector_engine_json(
     body: Value,
     failure_context: &str,
 ) -> Result<Value, AudioError> {
+    let endpoint = vector_engine_audio_endpoint_url(settings, path);
     let response = http_client
-        .post(format!(
-            "{}{}",
-            settings.base_url.trim_end_matches('/'),
-            path
-        ))
+        .post(endpoint.as_str())
         .header(
             header::AUTHORIZATION,
             format!("Bearer {}", settings.api_key),
@@ -240,10 +234,33 @@ async fn post_vector_engine_json(
         .json(&body)
         .send()
         .await
-        .map_err(|error| map_reqwest_error(failure_context, path, error))?;
+        .map_err(|error| map_reqwest_error(failure_context, endpoint.as_str(), error))?;
     parse_vector_engine_response(response, failure_context).await
 }
 
+pub(crate) fn vector_engine_audio_endpoint_url(
+    settings: &VectorEngineAudioSettings,
+    path: &str,
+) -> String {
+    let base_url = normalize_vector_engine_audio_base_url(settings.base_url.as_str());
+    let path = path.trim();
+    if path.starts_with('/') {
+        format!("{base_url}{path}")
+    } else {
+        format!("{base_url}/{path}")
+    }
+}
+
+fn normalize_vector_engine_audio_base_url(base_url: &str) -> String {
+    let normalized = base_url.trim().trim_end_matches('/');
+    // 中文注释：Suno / Vidu 音频接口在 VectorEngine 根路径下，不能拼成 /v1/suno/*。
+    normalized
+        .strip_suffix("/v1")
+        .unwrap_or(normalized)
+        .trim_end_matches('/')
+        .to_string()
+}
+
 async fn parse_vector_engine_response(
     response: reqwest::Response,
     failure_context: &str,
@@ -311,3 +328,41 @@ fn map_reqwest_error(failure_context: &str, endpoint: &str, error: reqwest::Erro
 fn truncate_raw(raw_text: &str) -> String {
     raw_text.chars().take(800).collect()
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn settings(base_url: &str) -> VectorEngineAudioSettings {
+        VectorEngineAudioSettings {
+            base_url: base_url.to_string(),
+            api_key: "test-key".to_string(),
+            request_timeout_ms: 1_000,
+        }
+    }
+
+    #[test]
+    fn audio_endpoint_urls_strip_v1_for_root_level_suno_paths() {
+        assert_eq!(
+            vector_engine_audio_endpoint_url(
+                &settings("https://api.vectorengine.cn"),
+                "/suno/submit/music"
+            ),
+            "https://api.vectorengine.cn/suno/submit/music"
+        );
+        assert_eq!(
+            vector_engine_audio_endpoint_url(
+                &settings("https://api.vectorengine.cn/v1"),
+                "/suno/submit/music"
+            ),
+            "https://api.vectorengine.cn/suno/submit/music"
+        );
+        assert_eq!(
+            vector_engine_audio_endpoint_url(
+                &settings(" https://api.vectorengine.cn/v1/ "),
+                "suno/submit/music"
+            ),
+            "https://api.vectorengine.cn/suno/submit/music"
+        );
+    }
+}
diff --git a/server-rs/crates/platform-audio/src/lib.rs b/server-rs/crates/platform-audio/src/lib.rs
index cc4c7a528..a686612a7 100644
--- a/server-rs/crates/platform-audio/src/lib.rs
+++ b/server-rs/crates/platform-audio/src/lib.rs
@@ -28,7 +28,8 @@ pub use types::{
     AudioTaskKind, AudioTaskResponse, BackgroundMusicTaskRequest,
     DEFAULT_SOUND_EFFECT_DURATION_SECONDS, DownloadedAudio, EditorBackgroundMusicTaskRequest,
     EditorSoundEffectTaskRequest, MAX_GENERATED_AUDIO_BYTES, SUNO_DEFAULT_MODEL,
-    SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS, SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest,
-    VECTOR_ENGINE_PROVIDER, VECTOR_ENGINE_SUNO_PROVIDER, VECTOR_ENGINE_VIDU_PROVIDER,
-    VIDU_AUDIO_MODEL, VIDU_PROMPT_MAX_CHARS, VectorEngineAudioSettings,
+    SUNO_GPT_DESCRIPTION_PROMPT_MAX_CHARS, SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS,
+    SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest, VECTOR_ENGINE_PROVIDER,
+    VECTOR_ENGINE_SUNO_PROVIDER, VECTOR_ENGINE_VIDU_PROVIDER, VIDU_AUDIO_MODEL,
+    VIDU_PROMPT_MAX_CHARS, VectorEngineAudioSettings,
 };
diff --git a/server-rs/crates/platform-audio/src/request.rs b/server-rs/crates/platform-audio/src/request.rs
index d751fc02d..1f5825d9a 100644
--- a/server-rs/crates/platform-audio/src/request.rs
+++ b/server-rs/crates/platform-audio/src/request.rs
@@ -2,8 +2,9 @@ use serde_json::{Map, Value, json};
 
 use crate::{
     AudioError, BackgroundMusicTaskRequest, EditorBackgroundMusicTaskRequest,
-    EditorSoundEffectTaskRequest, SUNO_DEFAULT_MODEL, SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS,
-    SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest, VIDU_AUDIO_MODEL, VIDU_PROMPT_MAX_CHARS,
+    EditorSoundEffectTaskRequest, SUNO_DEFAULT_MODEL, SUNO_GPT_DESCRIPTION_PROMPT_MAX_CHARS,
+    SUNO_PROMPT_MAX_CHARS, SUNO_TAGS_MAX_CHARS, SUNO_TITLE_MAX_CHARS, SoundEffectTaskRequest,
+    VIDU_AUDIO_MODEL, VIDU_PROMPT_MAX_CHARS,
 };
 
 pub fn build_background_music_task_body(
@@ -59,9 +60,12 @@ pub fn build_editor_background_music_task_body(
     let prompt = normalize_limited_text(
         &request.gpt_description_prompt,
         "gpt_description_prompt",
-        SUNO_PROMPT_MAX_CHARS,
+        SUNO_GPT_DESCRIPTION_PROMPT_MAX_CHARS,
     )?;
+    let model = normalize_optional_text(request.model.as_deref())
+        .unwrap_or_else(|| SUNO_DEFAULT_MODEL.to_string());
     Ok(json!({
+        "mv": model,
         "gpt_description_prompt": prompt,
         "make_instrumental": request.make_instrumental,
     }))
@@ -72,11 +76,18 @@ pub fn build_editor_sound_effect_task_body(
 ) -> Result<Value, AudioError> {
     let sound = normalize_limited_text(&request.sound, "sound", VIDU_PROMPT_MAX_CHARS)?;
     let sound_type = normalize_limited_text(&request.sound_type, "type", 80)?;
-    let tempo = normalize_limited_text(&request.tempo, "tempo", 80)?;
+    if sound_type != "one-shot" && sound_type != "loop" {
+        return Err(AudioError::invalid_request("type 只支持 one-shot 或 loop"));
+    }
+    if let Some(tempo) = request.tempo {
+        if !(1..=300).contains(&tempo) {
+            return Err(AudioError::invalid_request("tempo BPM 必须在 1-300 之间"));
+        }
+    }
     Ok(json!({
         "sound": sound,
         "type": sound_type,
-        "tempo": tempo,
+        "tempo": request.tempo,
     }))
 }
 
diff --git a/server-rs/crates/platform-audio/src/types.rs b/server-rs/crates/platform-audio/src/types.rs
index ea8e37763..3ef331eb5 100644
--- a/server-rs/crates/platform-audio/src/types.rs
+++ b/server-rs/crates/platform-audio/src/types.rs
@@ -56,13 +56,14 @@ pub struct SoundEffectTaskRequest {
 pub struct EditorBackgroundMusicTaskRequest {
     pub gpt_description_prompt: String,
     pub make_instrumental: bool,
+    pub model: Option<String>,
 }
 
 #[derive(Clone, Debug)]
 pub struct EditorSoundEffectTaskRequest {
     pub sound: String,
     pub sound_type: String,
-    pub tempo: String,
+    pub tempo: Option<u16>,
 }
 
 #[derive(Clone, Debug)]
@@ -90,9 +91,10 @@ pub struct DownloadedAudio {
 pub const VECTOR_ENGINE_PROVIDER: &str = "vector-engine";
 pub const VECTOR_ENGINE_SUNO_PROVIDER: &str = "vector-engine-suno";
 pub const VECTOR_ENGINE_VIDU_PROVIDER: &str = "vector-engine-vidu";
-pub const SUNO_DEFAULT_MODEL: &str = "chirp-v4";
+pub const SUNO_DEFAULT_MODEL: &str = "chirp-v5";
 pub const VIDU_AUDIO_MODEL: &str = "audio1.0";
 pub const SUNO_PROMPT_MAX_CHARS: usize = 5_000;
+pub const SUNO_GPT_DESCRIPTION_PROMPT_MAX_CHARS: usize = 200;
 pub const SUNO_TITLE_MAX_CHARS: usize = 80;
 pub const SUNO_TAGS_MAX_CHARS: usize = 160;
 pub const VIDU_PROMPT_MAX_CHARS: usize = 1_500;
diff --git a/server-rs/crates/platform-audio/tests/vector_engine_audio.rs b/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
index 0e290903a..a491a4d82 100644
--- a/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
+++ b/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
@@ -87,29 +87,90 @@ fn sound_effect_request_rejects_overlong_prompt() {
 
 #[test]
 fn editor_background_music_request_body_uses_gpt_description_prompt_and_instrumental() {
-    let body =
-        build_editor_background_music_task_body(EditorBackgroundMusicTaskRequest {
-            gpt_description_prompt: "  轻快森林冒险背景音乐  ".to_string(),
-            make_instrumental: true,
-        })
-        .expect("editor background music body should be valid");
+    let body = build_editor_background_music_task_body(EditorBackgroundMusicTaskRequest {
+        gpt_description_prompt: "  轻快森林冒险背景音乐  ".to_string(),
+        make_instrumental: true,
+        model: None,
+    })
+    .expect("editor background music body should be valid");
 
+    assert_eq!(body["mv"], SUNO_DEFAULT_MODEL);
     assert_eq!(body["gpt_description_prompt"], "轻快森林冒险背景音乐");
     assert_eq!(body["make_instrumental"], true);
     assert!(body.get("prompt").is_none());
 }
 
+#[test]
+fn editor_background_music_request_body_normalizes_explicit_model() {
+    let body = build_editor_background_music_task_body(EditorBackgroundMusicTaskRequest {
+        gpt_description_prompt: "  轻快森林冒险背景音乐  ".to_string(),
+        make_instrumental: true,
+        model: Some(" chirp-v5-5 ".to_string()),
+    })
+    .expect("editor background music body should be valid");
+
+    assert_eq!(body["mv"], "chirp-v5-5");
+    assert_eq!(body["gpt_description_prompt"], "轻快森林冒险背景音乐");
+    assert_eq!(body["make_instrumental"], true);
+}
+
+#[test]
+fn editor_background_music_request_body_rejects_overlong_gpt_description_prompt() {
+    let error = build_editor_background_music_task_body(EditorBackgroundMusicTaskRequest {
+        gpt_description_prompt: "乐".repeat(201),
+        make_instrumental: true,
+        model: None,
+    })
+    .expect_err("Apifox limits gpt_description_prompt to 200 chars");
+
+    assert!(error.message().contains("gpt_description_prompt 超过"));
+}
+
 #[test]
 fn editor_sound_effect_request_body_uses_sound_type_and_tempo() {
     let body = build_editor_sound_effect_task_body(EditorSoundEffectTaskRequest {
         sound: "  金币掉落叮当声  ".to_string(),
-        sound_type: " ui ".to_string(),
-        tempo: " fast ".to_string(),
+        sound_type: " one-shot ".to_string(),
+        tempo: Some(120),
     })
     .expect("editor sound effect body should be valid");
 
     assert_eq!(body["sound"], "金币掉落叮当声");
-    assert_eq!(body["type"], "ui");
-    assert_eq!(body["tempo"], "fast");
+    assert_eq!(body["type"], "one-shot");
+    assert_eq!(body["tempo"], 120);
     assert!(body.get("prompt").is_none());
 }
+
+#[test]
+fn editor_sound_effect_request_body_keeps_null_tempo() {
+    let body = build_editor_sound_effect_task_body(EditorSoundEffectTaskRequest {
+        sound: "按钮确认短促音".to_string(),
+        sound_type: "loop".to_string(),
+        tempo: None,
+    })
+    .expect("unset BPM should serialize as null");
+
+    assert_eq!(body["type"], "loop");
+    assert_eq!(body["tempo"], serde_json::Value::Null);
+}
+
+#[test]
+fn editor_sound_effect_request_body_rejects_invalid_type_and_tempo() {
+    let invalid_type = build_editor_sound_effect_task_body(EditorSoundEffectTaskRequest {
+        sound: "按钮确认短促音".to_string(),
+        sound_type: "ambient".to_string(),
+        tempo: Some(120),
+    })
+    .expect_err("platform layer should reject unsupported sound type");
+    assert!(invalid_type.message().contains("one-shot"));
+
+    for tempo in [0, 301] {
+        let invalid_tempo = build_editor_sound_effect_task_body(EditorSoundEffectTaskRequest {
+            sound: "按钮确认短促音".to_string(),
+            sound_type: "one-shot".to_string(),
+            tempo: Some(tempo),
+        })
+        .expect_err("platform layer should reject BPM outside 1-300");
+        assert!(invalid_tempo.message().contains("1-300"));
+    }
+}
diff --git a/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs b/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs
index ac23daf0d..95115c900 100644
--- a/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs
+++ b/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs
@@ -253,15 +253,28 @@ fn remove_generated_asset_sheet_green_screen_background(
 
                 let x = pixel_index % width;
                 let y = pixel_index / width;
-                if x == 0 || x == width.saturating_sub(1) || y == 0 || y == height.saturating_sub(1) {
+                if x == 0 || x == width.saturating_sub(1) || y == 0 || y == height.saturating_sub(1)
+                {
                     touches_border = true;
                 }
 
                 let neighbors = [
                     if x > 0 { Some(pixel_index - 1) } else { None },
-                    if x + 1 < width { Some(pixel_index + 1) } else { None },
-                    if y > 0 { Some(pixel_index - width) } else { None },
-                    if y + 1 < height { Some(pixel_index + width) } else { None },
+                    if x + 1 < width {
+                        Some(pixel_index + 1)
+                    } else {
+                        None
+                    },
+                    if y > 0 {
+                        Some(pixel_index - width)
+                    } else {
+                        None
+                    },
+                    if y + 1 < height {
+                        Some(pixel_index + width)
+                    } else {
+                        None
+                    },
                 ];
 
                 for next in neighbors.into_iter().flatten() {
diff --git a/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs b/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs
index 035266818..3407258e9 100644
--- a/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs
+++ b/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs
@@ -213,14 +213,9 @@ fn slice_generated_icon_spritesheet_rgba_by_connected_components(
             x1: bounds.x1.saturating_add(pad_x).min(width),
             y1: bounds.y1.saturating_add(pad_y).min(height),
         };
-        let cropped = image::imageops::crop_imm(
-            &image,
-            crop.x0,
-            crop.y0,
-            crop.width(),
-            crop.height(),
-        )
-        .to_image();
+        let cropped =
+            image::imageops::crop_imm(&image, crop.x0, crop.y0, crop.width(), crop.height())
+                .to_image();
         let mut cursor = std::io::Cursor::new(Vec::new());
         image::DynamicImage::ImageRgba8(cropped)
             .write_to(&mut cursor, ImageFormat::Png)
@@ -304,8 +299,7 @@ mod tests {
 
     #[test]
     fn slices_icon_spritesheet_by_connected_components_in_reading_order() {
-        let mut sheet: image::RgbaImage =
-            ImageBuffer::from_pixel(96, 64, Rgba([0, 255, 0, 255]));
+        let mut sheet: image::RgbaImage = ImageBuffer::from_pixel(96, 64, Rgba([0, 255, 0, 255]));
         for y in 10..24 {
             for x in 12..28 {
                 sheet.put_pixel(x, y, Rgba([240, 80, 80, 255]));
@@ -338,8 +332,7 @@ mod tests {
 
     #[test]
     fn rejects_when_connected_components_are_fewer_than_icon_names() {
-        let mut sheet: image::RgbaImage =
-            ImageBuffer::from_pixel(48, 48, Rgba([0, 255, 0, 255]));
+        let mut sheet: image::RgbaImage = ImageBuffer::from_pixel(48, 48, Rgba([0, 255, 0, 255]));
         for y in 12..24 {
             for x in 12..24 {
                 sheet.put_pixel(x, y, Rgba([240, 80, 80, 255]));
diff --git a/server-rs/crates/platform-image/src/vector_engine/curl_transport.rs b/server-rs/crates/platform-image/src/vector_engine/curl_transport.rs
index 308f27ce3..ce7dd389c 100644
--- a/server-rs/crates/platform-image/src/vector_engine/curl_transport.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/curl_transport.rs
@@ -7,11 +7,8 @@ use curl::{
 use serde_json::Value;
 
 use super::{
-    audit::build_failure_audit,
-    constants::VECTOR_ENGINE_PROVIDER,
-    error::PlatformImageError,
-    request::build_prompt_with_negative,
-    types::ReferenceImage,
+    audit::build_failure_audit, constants::VECTOR_ENGINE_PROVIDER, error::PlatformImageError,
+    request::build_prompt_with_negative, types::ReferenceImage,
 };
 
 #[derive(Debug)]
@@ -242,9 +239,7 @@ fn send_multipart_edit_request_with_curl_blocking(
     timeout_ms: u64,
 ) -> Result<VectorEngineCurlResponse, VectorEngineCurlError> {
     let mut form = Form::new();
-    form.part("model")
-        .contents(model.as_bytes())
-        .add()?;
+    form.part("model").contents(model.as_bytes()).add()?;
     form.part("prompt")
         .contents(build_prompt_with_negative(prompt, negative_prompt).as_bytes())
         .add()?;
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index a83fa1377..d47f5514a 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -384,13 +384,52 @@ pub struct EditorVideoGenerateResponse {
     pub price_mud_points: u32,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorIconSpritesheetGenerateRequest {
+    pub reference_image_src: String,
+    pub icon_descriptions: Vec<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub model: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub aspect_ratio: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub image_size: Option<String>,
+    pub price_mud_points: u32,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorIconSpritesheetIconPayload {
+    pub name: String,
+    pub image_src: String,
+    pub width: u32,
+    pub height: u32,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorIconSpritesheetGenerateResponse {
+    pub spritesheet_image_src: String,
+    pub spritesheet_width: u32,
+    pub spritesheet_height: u32,
+    pub icon_image_srcs: Vec<EditorIconSpritesheetIconPayload>,
+    pub prompt: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub actual_prompt: Option<String>,
+    pub model: String,
+    pub provider: String,
+    pub task_id: String,
+    pub price_mud_points: u32,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorSoundEffectGenerateRequest {
     pub sound: String,
     #[serde(rename = "type")]
     pub sound_type: String,
-    pub tempo: String,
+    pub tempo: Option<u16>,
     pub price_mud_points: u32,
 }
 
@@ -1026,7 +1065,9 @@ mod tests {
             sound: "off".to_string(),
             price_mud_points: 100,
             reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
-            reference_video_srcs: vec!["data:video/mp4;base64,video".to_string()],
+            reference_video_srcs: vec![
+                "generated-character-drafts/editor/seedance-references/video/demo.mp4".to_string(),
+            ],
             reference_audio_srcs: vec!["data:audio/mpeg;base64,audio".to_string()],
         })
         .expect("request should serialize");
@@ -1037,7 +1078,7 @@ mod tests {
         );
         assert_eq!(
             payload["referenceVideoSrcs"],
-            json!(["data:video/mp4;base64,video"])
+            json!(["generated-character-drafts/editor/seedance-references/video/demo.mp4"])
         );
         assert_eq!(
             payload["referenceAudioSrcs"],
@@ -1072,20 +1113,80 @@ mod tests {
         assert_eq!(payload["durationSeconds"], json!(5));
     }
 
+    #[test]
+    fn editor_icon_spritesheet_request_and_response_include_price() {
+        let request_payload = serde_json::to_value(EditorIconSpritesheetGenerateRequest {
+            reference_image_src: "data:image/png;base64,spec".to_string(),
+            icon_descriptions: vec!["返回按钮".to_string(), "设置按钮".to_string()],
+            model: Some("gemini-3.1-flash-image-preview".to_string()),
+            aspect_ratio: Some("1:1".to_string()),
+            image_size: Some("1K".to_string()),
+            price_mud_points: 12,
+        })
+        .expect("request should serialize");
+
+        assert_eq!(
+            request_payload["referenceImageSrc"],
+            json!("data:image/png;base64,spec")
+        );
+        assert_eq!(request_payload["priceMudPoints"], json!(12));
+
+        let response_payload = serde_json::to_value(EditorIconSpritesheetGenerateResponse {
+            spritesheet_image_src: "data:image/png;base64,sheet".to_string(),
+            spritesheet_width: 512,
+            spritesheet_height: 512,
+            icon_image_srcs: vec![EditorIconSpritesheetIconPayload {
+                name: "返回按钮".to_string(),
+                image_src: "data:image/png;base64,back".to_string(),
+                width: 128,
+                height: 128,
+            }],
+            prompt: "图标 prompt".to_string(),
+            actual_prompt: Some("图标 prompt".to_string()),
+            model: "gemini-3.1-flash-image-preview".to_string(),
+            provider: "VectorEngine".to_string(),
+            task_id: "task-icons".to_string(),
+            price_mud_points: 12,
+        })
+        .expect("response should serialize");
+
+        assert_eq!(response_payload["priceMudPoints"], json!(12));
+        assert_eq!(
+            response_payload["iconImageSrcs"][0]["name"],
+            json!("返回按钮")
+        );
+    }
+
     #[test]
     fn editor_audio_requests_and_response_use_canvas_audio_shape() {
         let sound_payload = serde_json::to_value(EditorSoundEffectGenerateRequest {
             sound: "金币掉落叮当声".to_string(),
-            sound_type: "ui".to_string(),
-            tempo: "fast".to_string(),
+            sound_type: "one-shot".to_string(),
+            tempo: Some(120),
             price_mud_points: 10,
         })
         .expect("sound request should serialize");
         assert_eq!(sound_payload["sound"], json!("金币掉落叮当声"));
-        assert_eq!(sound_payload["type"], json!("ui"));
-        assert_eq!(sound_payload["tempo"], json!("fast"));
+        assert_eq!(sound_payload["type"], json!("one-shot"));
+        assert_eq!(sound_payload["tempo"], json!(120));
         assert_eq!(sound_payload["priceMudPoints"], json!(10));
 
+        let unset_tempo_payload = serde_json::to_value(EditorSoundEffectGenerateRequest {
+            sound: "按钮确认短促音".to_string(),
+            sound_type: "loop".to_string(),
+            tempo: None,
+            price_mud_points: 10,
+        })
+        .expect("sound request with unset tempo should serialize");
+        assert_eq!(unset_tempo_payload["type"], json!("loop"));
+        assert_eq!(unset_tempo_payload["tempo"], json!(null));
+
+        let parsed_unset_tempo: EditorSoundEffectGenerateRequest =
+            serde_json::from_value(unset_tempo_payload)
+                .expect("sound request with null tempo should deserialize");
+        assert_eq!(parsed_unset_tempo.sound_type, "loop");
+        assert_eq!(parsed_unset_tempo.tempo, None);
+
         let music_payload = serde_json::to_value(EditorBackgroundMusicGenerateRequest {
             gpt_description_prompt: "森林冒险背景音乐".to_string(),
             make_instrumental: true,
diff --git a/server-rs/crates/spacetime-client/src/editor_project.rs b/server-rs/crates/spacetime-client/src/editor_project.rs
index 1aa577326..89c009289 100644
--- a/server-rs/crates/spacetime-client/src/editor_project.rs
+++ b/server-rs/crates/spacetime-client/src/editor_project.rs
@@ -57,14 +57,15 @@ impl SpacetimeClient {
         self.call_after_connect(
             "get_editor_project_and_return",
             move |connection, sender| {
-                connection
-                    .procedures()
-                    .get_editor_project_and_return_then(procedure_input, move |_, result| {
+                connection.procedures().get_editor_project_and_return_then(
+                    procedure_input,
+                    move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_project_required_procedure_result);
                         send_once(&sender, mapped);
-                    });
+                    },
+                );
             },
         )
         .await
@@ -79,15 +80,14 @@ impl SpacetimeClient {
         self.call_after_connect(
             "list_editor_projects_and_return",
             move |connection, sender| {
-                connection.procedures().list_editor_projects_and_return_then(
-                    procedure_input,
-                    move |_, result| {
+                connection
+                    .procedures()
+                    .list_editor_projects_and_return_then(procedure_input, move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_project_list_procedure_result);
                         send_once(&sender, mapped);
-                    },
-                );
+                    });
             },
         )
         .await
@@ -102,15 +102,14 @@ impl SpacetimeClient {
         self.call_after_connect(
             "rename_editor_project_and_return",
             move |connection, sender| {
-                connection.procedures().rename_editor_project_and_return_then(
-                    procedure_input,
-                    move |_, result| {
+                connection
+                    .procedures()
+                    .rename_editor_project_and_return_then(procedure_input, move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_project_required_procedure_result);
                         send_once(&sender, mapped);
-                    },
-                );
+                    });
             },
         )
         .await
@@ -125,15 +124,14 @@ impl SpacetimeClient {
         self.call_after_connect(
             "delete_editor_project_and_return",
             move |connection, sender| {
-                connection.procedures().delete_editor_project_and_return_then(
-                    procedure_input,
-                    move |_, result| {
+                connection
+                    .procedures()
+                    .delete_editor_project_and_return_then(procedure_input, move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_project_delete_procedure_result);
                         send_once(&sender, mapped);
-                    },
-                );
+                    });
             },
         )
         .await
@@ -204,15 +202,12 @@ impl SpacetimeClient {
             move |connection, sender| {
                 connection
                     .procedures()
-                    .get_editor_asset_library_and_return_then(
-                        procedure_input,
-                        move |_, result| {
-                            let mapped = result
-                                .map_err(SpacetimeClientError::from_sdk_error)
-                                .and_then(map_editor_asset_library_procedure_result);
-                            send_once(&sender, mapped);
-                        },
-                    );
+                    .get_editor_asset_library_and_return_then(procedure_input, move |_, result| {
+                        let mapped = result
+                            .map_err(SpacetimeClientError::from_sdk_error)
+                            .and_then(map_editor_asset_library_procedure_result);
+                        send_once(&sender, mapped);
+                    });
             },
         )
         .await
@@ -302,14 +297,15 @@ impl SpacetimeClient {
         self.call_after_connect(
             "create_editor_asset_and_return",
             move |connection, sender| {
-                connection
-                    .procedures()
-                    .create_editor_asset_and_return_then(procedure_input, move |_, result| {
+                connection.procedures().create_editor_asset_and_return_then(
+                    procedure_input,
+                    move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_asset_procedure_result);
                         send_once(&sender, mapped);
-                    });
+                    },
+                );
             },
         )
         .await
@@ -324,14 +320,15 @@ impl SpacetimeClient {
         self.call_after_connect(
             "update_editor_asset_and_return",
             move |connection, sender| {
-                connection
-                    .procedures()
-                    .update_editor_asset_and_return_then(procedure_input, move |_, result| {
+                connection.procedures().update_editor_asset_and_return_then(
+                    procedure_input,
+                    move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_asset_procedure_result);
                         send_once(&sender, mapped);
-                    });
+                    },
+                );
             },
         )
         .await
@@ -346,14 +343,15 @@ impl SpacetimeClient {
         self.call_after_connect(
             "delete_editor_asset_and_return",
             move |connection, sender| {
-                connection
-                    .procedures()
-                    .delete_editor_asset_and_return_then(procedure_input, move |_, result| {
+                connection.procedures().delete_editor_asset_and_return_then(
+                    procedure_input,
+                    move |_, result| {
                         let mapped = result
                             .map_err(SpacetimeClientError::from_sdk_error)
                             .and_then(map_editor_asset_procedure_result);
                         send_once(&sender, mapped);
-                    });
+                    },
+                );
             },
         )
         .await
diff --git a/server-rs/crates/spacetime-client/src/lib.rs b/server-rs/crates/spacetime-client/src/lib.rs
index 9036707a2..f698df627 100644
--- a/server-rs/crates/spacetime-client/src/lib.rs
+++ b/server-rs/crates/spacetime-client/src/lib.rs
@@ -37,8 +37,7 @@ pub use mapper::{
     EditorCanvasViewportRecord, EditorProjectCreateRecordInput, EditorProjectDeleteRecordInput,
     EditorProjectGetRecordInput, EditorProjectLayoutSaveRecordInput, EditorProjectRecord,
     EditorProjectRenameRecordInput, EditorProjectResourceCreateRecordInput,
-    EditorProjectResourceRecord,
-    ExternalGenerationJobClaimRecordInput,
+    EditorProjectResourceRecord, ExternalGenerationJobClaimRecordInput,
     ExternalGenerationJobCompleteRecordInput, ExternalGenerationJobEnqueueRecordInput,
     ExternalGenerationJobFailRecordInput, ExternalGenerationJobGetRecordInput,
     ExternalGenerationJobRecord, ExternalGenerationJobRenewLeaseRecordInput,
@@ -48,7 +47,6 @@ pub use mapper::{
     JumpHopGenerationStatus, JumpHopJumpRequest, JumpHopJumpResponse, JumpHopJumpResult,
     JumpHopLastJump, JumpHopPath, JumpHopPlatform, JumpHopRestartRunRequest, JumpHopRunResponse,
     JumpHopRunStatus, JumpHopRuntimeRunSnapshotResponse, JumpHopScoring, JumpHopSessionResponse,
-
     JumpHopSessionSnapshotResponse, JumpHopStartRunRequest, JumpHopStylePreset, JumpHopTileAsset,
     JumpHopTileType, JumpHopWorkDetailResponse, JumpHopWorkMutationResponse,
     JumpHopWorkProfileResponse, JumpHopWorkSummaryResponse, JumpHopWorksResponse,
diff --git a/server-rs/crates/spacetime-client/src/mapper.rs b/server-rs/crates/spacetime-client/src/mapper.rs
index cbd0a8220..f17a6937b 100644
--- a/server-rs/crates/spacetime-client/src/mapper.rs
+++ b/server-rs/crates/spacetime-client/src/mapper.rs
@@ -42,15 +42,6 @@ pub use self::combat::{
     BarkBattleDraftConfigRecord, BarkBattleRunRecord, BarkBattleRuntimeConfigRecord,
     ResolveCombatActionRecord,
 };
-pub use self::editor_project::{
-    EditorAssetCreateRecordInput, EditorAssetDeleteRecordInput, EditorAssetFolderCreateRecordInput,
-    EditorAssetFolderDeleteRecordInput, EditorAssetFolderRecord, EditorAssetFolderUpdateRecordInput,
-    EditorAssetLibraryRecord, EditorAssetRecord, EditorAssetUpdateRecordInput, EditorCanvasRecord,
-    EditorCanvasViewportRecord, EditorProjectCreateRecordInput, EditorProjectDeleteRecordInput,
-    EditorProjectGetRecordInput,
-    EditorProjectLayoutSaveRecordInput, EditorProjectRecord, EditorProjectRenameRecordInput,
-    EditorProjectResourceCreateRecordInput, EditorProjectResourceRecord,
-};
 pub use self::common::{
     BigFishAgentMessageRecord, BigFishAnchorItemRecord, BigFishAnchorPackRecord,
     BigFishBackgroundBlueprintRecord, BigFishDraftCompileRecordInput,
@@ -80,6 +71,15 @@ pub use self::common::{
     VisualNovelRunSnapshotRecordInput, VisualNovelRunStartRecordInput,
     VisualNovelWorkCompileRecordInput,
 };
+pub use self::editor_project::{
+    EditorAssetCreateRecordInput, EditorAssetDeleteRecordInput, EditorAssetFolderCreateRecordInput,
+    EditorAssetFolderDeleteRecordInput, EditorAssetFolderRecord,
+    EditorAssetFolderUpdateRecordInput, EditorAssetLibraryRecord, EditorAssetRecord,
+    EditorAssetUpdateRecordInput, EditorCanvasRecord, EditorCanvasViewportRecord,
+    EditorProjectCreateRecordInput, EditorProjectDeleteRecordInput, EditorProjectGetRecordInput,
+    EditorProjectLayoutSaveRecordInput, EditorProjectRecord, EditorProjectRenameRecordInput,
+    EditorProjectResourceCreateRecordInput, EditorProjectResourceRecord,
+};
 pub use self::external_generation::{
     ExternalGenerationJobClaimRecordInput, ExternalGenerationJobCompleteRecordInput,
     ExternalGenerationJobEnqueueRecordInput, ExternalGenerationJobFailRecordInput,
@@ -197,11 +197,11 @@ pub(crate) use self::custom_world::{
     parse_rpg_agent_stage_record,
 };
 pub(crate) use self::editor_project::{
-    map_editor_asset_folder_library_procedure_result,
-    map_editor_asset_folder_procedure_result, map_editor_asset_library_procedure_result,
-    map_editor_asset_procedure_result, map_editor_project_delete_procedure_result,
-    map_editor_project_list_procedure_result, map_editor_project_optional_procedure_result,
-    map_editor_project_required_procedure_result, map_editor_project_resource_procedure_result,
+    map_editor_asset_folder_library_procedure_result, map_editor_asset_folder_procedure_result,
+    map_editor_asset_library_procedure_result, map_editor_asset_procedure_result,
+    map_editor_project_delete_procedure_result, map_editor_project_list_procedure_result,
+    map_editor_project_optional_procedure_result, map_editor_project_required_procedure_result,
+    map_editor_project_resource_procedure_result,
 };
 pub(crate) use self::external_generation::{
     map_external_generation_job_claim_result, map_external_generation_job_procedure_result,
diff --git a/server-rs/crates/spacetime-client/src/mapper/editor_project.rs b/server-rs/crates/spacetime-client/src/mapper/editor_project.rs
index 3db100f86..6f977bf42 100644
--- a/server-rs/crates/spacetime-client/src/mapper/editor_project.rs
+++ b/server-rs/crates/spacetime-client/src/mapper/editor_project.rs
@@ -486,8 +486,10 @@ fn map_editor_project_snapshot(
 ) -> Result<EditorProjectRecord, SpacetimeClientError> {
     let layers: serde_json::Value =
         serde_json::from_str(&snapshot.canvas.layers_json).map_err(|error| {
-        SpacetimeClientError::validation_failed(format!("图片画布图层布局 JSON 无法解析：{error}"))
-    })?;
+            SpacetimeClientError::validation_failed(format!(
+                "图片画布图层布局 JSON 无法解析：{error}"
+            ))
+        })?;
     let viewport = EditorCanvasViewportRecord {
         x: snapshot.canvas.viewport.x,
         y: snapshot.canvas.viewport.y,
diff --git a/server-rs/crates/spacetime-module/src/editor_project_storage.rs b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
index fe0b95788..aacc3e55b 100644
--- a/server-rs/crates/spacetime-module/src/editor_project_storage.rs
+++ b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
@@ -601,13 +601,7 @@ fn create_editor_project(
         created_at: now,
         updated_at: now,
     });
-    ensure_default_canvas(
-        ctx,
-        project_id.as_str(),
-        owner_user_id.as_str(),
-        None,
-        now,
-    )?;
+    ensure_default_canvas(ctx, project_id.as_str(), owner_user_id.as_str(), None, now)?;
 
     build_project_snapshot(ctx, project_id.as_str())
 }
@@ -786,10 +780,8 @@ fn create_editor_project_resource(
     ctx: &ReducerContext,
     input: EditorProjectResourceCreateInput,
 ) -> Result<EditorProjectResourceSnapshot, String> {
-    let resource_id = normalize_required(
-        &input.resource_id,
-        "editor_project_resource.resource_id",
-    )?;
+    let resource_id =
+        normalize_required(&input.resource_id, "editor_project_resource.resource_id")?;
     let project_id = normalize_required(&input.project_id, "editor_project_resource.project_id")?;
     let owner_user_id = normalize_required(
         &input.owner_user_id,
@@ -797,10 +789,8 @@ fn create_editor_project_resource(
     )?;
     require_owned_project(ctx, project_id.as_str(), owner_user_id.as_str())?;
     let image_src = normalize_required(&input.image_src, "editor_project_resource.image_src")?;
-    let source_type = normalize_required(
-        &input.source_type,
-        "editor_project_resource.source_type",
-    )?;
+    let source_type =
+        normalize_required(&input.source_type, "editor_project_resource.source_type")?;
     if !EDITOR_PROJECT_SOURCE_TYPES.contains(&source_type.as_str()) {
         return Err("画布资源来源类型只支持 uploaded、generated 或 mock_generated".to_string());
     }
@@ -863,10 +853,8 @@ fn create_editor_asset_folder(
     input: EditorAssetFolderCreateInput,
 ) -> Result<EditorAssetFolderSnapshot, String> {
     let folder_id = normalize_required(&input.folder_id, "editor_asset_folder.folder_id")?;
-    let owner_user_id = normalize_required(
-        &input.owner_user_id,
-        "editor_asset_folder.owner_user_id",
-    )?;
+    let owner_user_id =
+        normalize_required(&input.owner_user_id, "editor_asset_folder.owner_user_id")?;
     if ctx
         .db
         .editor_asset_folder()
@@ -901,10 +889,8 @@ fn update_editor_asset_folder(
     input: EditorAssetFolderUpdateInput,
 ) -> Result<EditorAssetFolderSnapshot, String> {
     let folder_id = normalize_required(&input.folder_id, "editor_asset_folder.folder_id")?;
-    let owner_user_id = normalize_required(
-        &input.owner_user_id,
-        "editor_asset_folder.owner_user_id",
-    )?;
+    let owner_user_id =
+        normalize_required(&input.owner_user_id, "editor_asset_folder.owner_user_id")?;
     let folder = require_owned_asset_folder(ctx, folder_id.as_str(), owner_user_id.as_str())?;
     let now = Timestamp::from_micros_since_unix_epoch(input.updated_at_micros);
     ctx.db.editor_asset_folder().folder_id().delete(&folder_id);
@@ -934,10 +920,8 @@ fn delete_editor_asset_folder(
     input: EditorAssetFolderDeleteInput,
 ) -> Result<EditorAssetLibrarySnapshot, String> {
     let folder_id = normalize_required(&input.folder_id, "editor_asset_folder.folder_id")?;
-    let owner_user_id = normalize_required(
-        &input.owner_user_id,
-        "editor_asset_folder.owner_user_id",
-    )?;
+    let owner_user_id =
+        normalize_required(&input.owner_user_id, "editor_asset_folder.owner_user_id")?;
     let folder = require_owned_asset_folder(ctx, folder_id.as_str(), owner_user_id.as_str())?;
     if folder.system_default {
         return Err("默认素材文件夹不能删除".to_string());
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index 0bd5ac897..de6dc85c9 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -26,7 +26,7 @@ describe('ImageCanvasBottomToolbarView', () => {
 
     expect(
       within(toolbar)
-        .getByRole('button', { name: '生成工具' })
+        .getByRole('button', { name: '生成图片' })
         .getAttribute('aria-pressed'),
     ).toBe('false');
     expect(
@@ -42,14 +42,16 @@ describe('ImageCanvasBottomToolbarView', () => {
       within(toolbar).getByRole('button', { name: '生成UI设计图' }),
     );
     fireEvent.click(within(toolbar).getByRole('button', { name: '生成音乐' }));
-    fireEvent.click(within(toolbar).getByRole('button', { name: '文字工具' }));
+    fireEvent.click(
+      within(toolbar).getByRole('button', { name: '生成图标素材' }),
+    );
 
     expect(switchTool).toHaveBeenNthCalledWith(1, 'hand');
     expect(switchTool).toHaveBeenNthCalledWith(2, 'video');
     expect(switchTool).toHaveBeenNthCalledWith(3, 'spec');
     expect(switchTool).toHaveBeenNthCalledWith(4, 'ui-design');
     expect(switchTool).toHaveBeenNthCalledWith(5, 'music');
-    expect(switchTool).toHaveBeenNthCalledWith(6, 'text');
+    expect(switchTool).toHaveBeenNthCalledWith(6, 'icon');
   });
 
   it('only keeps the select and hand tools visibly pressed', () => {
@@ -87,16 +89,13 @@ describe('ImageCanvasBottomToolbarView', () => {
 
     for (const tool of [
       ['upload', '上传工具'],
-      ['generate', '生成工具'],
+      ['generate', '生成图片'],
       ['video', '生成视频'],
       ['music', '生成音乐'],
       ['spec', '生成规范'],
       ['character', '生成角色形象'],
       ['icon', '生成图标素材'],
       ['ui-design', '生成UI设计图'],
-      ['text', '文字工具'],
-      ['shape', '形状标注工具'],
-      ['export', '导出工具'],
     ] as const) {
       rerender(renderToolbar(tool[0]));
 
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index 151792de3..06bec8a92 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -1,17 +1,14 @@
 import {
-  ClipboardList,
+  AppWindow,
   Clapperboard,
-  Download,
+  ClipboardList,
+  Grid2X2,
   Hand,
   ImageIcon,
   ImagePlus,
-  LayoutTemplate,
   MousePointer2,
   Music,
-  Shapes,
-  Sparkles,
-  Type,
-  WandSparkles,
+  UserRound,
 } from 'lucide-react';
 import type { RefObject } from 'react';
 
@@ -33,20 +30,28 @@ const canvasTools: Array<{
   id: CanvasTool;
   label: string;
   icon: typeof MousePointer2;
+  separatorBefore?: boolean;
 }> = [
   { id: 'select', label: '选择工具', icon: MousePointer2 },
   { id: 'hand', label: '抓手工具', icon: Hand },
   { id: 'upload', label: '上传工具', icon: ImagePlus },
-  { id: 'generate', label: '生成工具', icon: WandSparkles },
+  {
+    id: 'generate',
+    label: '生成图片',
+    icon: ImageIcon,
+    separatorBefore: true,
+  },
   { id: 'video', label: '生成视频', icon: Clapperboard },
   { id: 'music', label: '生成音乐', icon: Music },
-  { id: 'spec', label: '生成规范', icon: ClipboardList },
-  { id: 'character', label: '生成角色形象', icon: Sparkles },
-  { id: 'icon', label: '生成图标素材', icon: ImageIcon },
-  { id: 'ui-design', label: '生成UI设计图', icon: LayoutTemplate },
-  { id: 'text', label: '文字工具', icon: Type },
-  { id: 'shape', label: '形状标注工具', icon: Shapes },
-  { id: 'export', label: '导出工具', icon: Download },
+  {
+    id: 'spec',
+    label: '生成规范',
+    icon: ClipboardList,
+    separatorBefore: true,
+  },
+  { id: 'character', label: '生成角色形象', icon: UserRound },
+  { id: 'icon', label: '生成图标素材', icon: Grid2X2 },
+  { id: 'ui-design', label: '生成UI设计图', icon: AppWindow },
 ];
 
 function isToolbarOptionTool(tool: CanvasTool): tool is ToolbarOptionTool {
@@ -72,43 +77,57 @@ export function ImageCanvasBottomToolbarView({
       aria-label="AI画布工具栏"
       onPointerDown={(event) => event.stopPropagation()}
     >
-      {canvasTools.map(({ id, label, icon: Icon }) => {
+      {canvasTools.map(({ id, label, icon: Icon, separatorBefore }) => {
         if (isToolbarOptionTool(id)) {
           return (
-            <span
-              key={id}
-              ref={id === 'spec' ? specToolWrapRef : musicToolWrapRef}
-              className={[
-                'image-canvas-editor__bottom-toolbar-option-wrap',
-                id === 'spec' ? 'image-canvas-editor__spec-tool-wrap' : '',
-              ]
-                .filter(Boolean)
-                .join(' ')}
-              onPointerEnter={() => onOpenToolOptions(id)}
-              onPointerLeave={() => onCloseToolOptions(id)}
-              onFocus={() => onOpenToolOptions(id)}
-              onBlur={() => onCloseToolOptions(id)}
-            >
-              <EditorIconButton
-                label={label}
-                title={label}
-                icon={Icon}
-                pressed={hasPersistentPressedState(id) && effectiveTool === id}
-                onClick={() => onSwitchTool(id)}
-              />
+            <span key={id} className="image-canvas-editor__bottom-tool-group">
+              {separatorBefore ? (
+                <span
+                  aria-hidden="true"
+                  className="image-canvas-editor__bottom-toolbar-divider"
+                />
+              ) : null}
+              <span
+                ref={id === 'spec' ? specToolWrapRef : musicToolWrapRef}
+                className={[
+                  'image-canvas-editor__bottom-toolbar-option-wrap',
+                  id === 'spec' ? 'image-canvas-editor__spec-tool-wrap' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                onPointerEnter={() => onOpenToolOptions(id)}
+                onPointerLeave={() => onCloseToolOptions(id)}
+                onFocus={() => onOpenToolOptions(id)}
+                onBlur={() => onCloseToolOptions(id)}
+              >
+                <EditorIconButton
+                  label={label}
+                  title={label}
+                  icon={Icon}
+                  pressed={hasPersistentPressedState(id) && effectiveTool === id}
+                  onClick={() => onSwitchTool(id)}
+                />
+              </span>
             </span>
           );
         }
 
         return (
-          <EditorIconButton
-            key={id}
-            label={label}
-            title={label}
-            icon={Icon}
-            pressed={hasPersistentPressedState(id) && effectiveTool === id}
-            onClick={() => onSwitchTool(id)}
-          />
+          <span key={id} className="image-canvas-editor__bottom-tool-group">
+            {separatorBefore ? (
+              <span
+                aria-hidden="true"
+                className="image-canvas-editor__bottom-toolbar-divider"
+              />
+            ) : null}
+            <EditorIconButton
+              label={label}
+              title={label}
+              icon={Icon}
+              pressed={hasPersistentPressedState(id) && effectiveTool === id}
+              onClick={() => onSwitchTool(id)}
+            />
+          </span>
         );
       })}
     </div>
diff --git a/src/components/image-editor/ImageCanvasCropExpandPanelView.tsx b/src/components/image-editor/ImageCanvasCropExpandPanelView.tsx
new file mode 100644
index 000000000..400bf29a4
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasCropExpandPanelView.tsx
@@ -0,0 +1,108 @@
+import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
+import { X } from 'lucide-react';
+
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformTextField } from '../common/PlatformTextField';
+import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import type { CanvasLayer, CropExpandPanelState } from './ImageCanvasEditorTypes';
+
+type ImageCanvasCropExpandPanelViewProps = {
+  panel: CropExpandPanelState;
+  sourceLayer: CanvasLayer;
+  style: CSSProperties;
+  setCropExpandPanel: Dispatch<SetStateAction<CropExpandPanelState | null>>;
+  onSubmit: () => void;
+};
+
+const CROP_EXPAND_FIELDS = [
+  { key: 'left', label: '左' },
+  { key: 'top', label: '上' },
+  { key: 'right', label: '右' },
+  { key: 'bottom', label: '下' },
+] as const;
+
+function resetFailedCropExpandPanel(panel: CropExpandPanelState) {
+  return {
+    ...panel,
+    status: panel.status === 'failed' ? 'idle' : panel.status,
+    errorMessage: panel.status === 'failed' ? undefined : panel.errorMessage,
+  };
+}
+
+export function ImageCanvasCropExpandPanelView({
+  panel,
+  sourceLayer,
+  style,
+  setCropExpandPanel,
+  onSubmit,
+}: ImageCanvasCropExpandPanelViewProps) {
+  return (
+    <form
+      className="image-canvas-editor__crop-expand-panel"
+      style={style}
+      role="dialog"
+      aria-label="裁扩图片"
+      onPointerDown={(event) => event.stopPropagation()}
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (panel.status !== 'processing') {
+          onSubmit();
+        }
+      }}
+    >
+      <div className="image-canvas-editor__quick-edit-head">
+        <div className="image-canvas-editor__quick-edit-reference">
+          <img src={sourceLayer.src} alt={`${sourceLayer.title}参考图`} />
+          <span>{sourceLayer.title}</span>
+        </div>
+        <EditorIconButton
+          label="关闭裁扩图片"
+          title="关闭"
+          icon={X}
+          onClick={() => setCropExpandPanel(null)}
+        />
+      </div>
+      <div className="image-canvas-editor__crop-expand-fields">
+        {CROP_EXPAND_FIELDS.map(({ key, label }) => (
+          <label key={key} className="image-canvas-editor__crop-expand-field">
+            <span>{label}</span>
+            <PlatformTextField
+              aria-label={`裁扩${label}`}
+              value={String(panel.insets[key])}
+              inputMode="numeric"
+              size="xs"
+              density="compact"
+              onChange={(event) =>
+                setCropExpandPanel((currentPanel) =>
+                  currentPanel
+                    ? {
+                        ...resetFailedCropExpandPanel(currentPanel),
+                        insets: {
+                          ...currentPanel.insets,
+                          [key]: event.target.value,
+                        },
+                      }
+                    : currentPanel,
+                )
+              }
+            />
+          </label>
+        ))}
+      </div>
+      {panel.status === 'failed' ? (
+        <p className="image-canvas-editor__crop-expand-error" role="alert">
+          {panel.errorMessage}
+        </p>
+      ) : null}
+      <PlatformActionButton
+        type="submit"
+        tone="secondary"
+        size="sm"
+        className="image-canvas-editor__quick-edit-submit"
+        disabled={panel.status === 'processing'}
+      >
+        {panel.status === 'processing' ? '处理中' : '应用'}
+      </PlatformActionButton>
+    </form>
+  );
+}
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 16ea65001..2871ce2a0 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -13,8 +13,8 @@ import { describe, expect, it, vi } from 'vitest';
 
 import {
   ApiClientError,
-  ImageCanvasEditorView,
   dispatchPointerEvent,
+  ImageCanvasEditorView,
   setupImageCanvasEditorViewTestLifecycle,
 } from './ImageCanvasEditorView.test-utils';
 
@@ -216,7 +216,7 @@ describe('ImageCanvasEditorView generation integration', () => {
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     fireEvent.click(
-      within(bottomToolbar).getByRole('button', { name: '生成工具' }),
+      within(bottomToolbar).getByRole('button', { name: '生成图片' }),
     );
 
     const generateDialog = screen.getByRole('dialog', { name: '生成图片' });
@@ -343,7 +343,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     const initialComposerTop = Number.parseFloat(
       (screen.getByRole('dialog', { name: '生成图片' }) as HTMLElement).style
         .top,
@@ -421,7 +421,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '生成中继续拖动的图片' },
     });
@@ -500,7 +500,7 @@ describe('ImageCanvasEditorView generation integration', () => {
   it('hides the generation composer when selecting another image but keeps the placeholder', () => {
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
 
     fireEvent.pointerDown(
@@ -529,7 +529,7 @@ describe('ImageCanvasEditorView generation integration', () => {
   it('hides the generation composer when clicking the canvas outside generation controls', () => {
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
 
     fireEvent.pointerDown(screen.getByLabelText('画布工作区'), {
@@ -546,7 +546,7 @@ describe('ImageCanvasEditorView generation integration', () => {
   it('closes the generation composer without removing the placeholder frame', () => {
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.click(screen.getByRole('button', { name: '关闭生成图片' }));
 
     expect(screen.queryByRole('dialog', { name: '生成图片' })).toBeNull();
@@ -559,7 +559,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '一张真实生成失败的图' },
     });
@@ -586,7 +586,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '一张需要登录生成的图' },
     });
@@ -604,7 +604,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     const cases = [
       {
         open: () => {
-          fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+          fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
           fireEvent.change(screen.getByLabelText('生成提示词'), {
             target: { value: '生成中的普通图片' },
           });
@@ -758,7 +758,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       .getAllByRole('button')
       .filter((button) => button.getAttribute('aria-label')?.startsWith('生成'))
       .map((button) => button.getAttribute('aria-label'));
-    expect(generationToolLabels).toContain('生成工具');
+    expect(generationToolLabels).toContain('生成图片');
     expect(generationToolLabels).toContain('生成规范');
     fireEvent.click(
       within(bottomToolbar).getByRole('button', { name: '生成规范' }),
@@ -817,8 +817,10 @@ describe('ImageCanvasEditorView generation integration', () => {
 
     expect(generateEditorImageMock).toHaveBeenCalledWith({
       kind: 'spec',
-      model: 'gemini-3.1-flash-image-preview',
+      model: 'gpt-image-2',
       size: '2048x1152',
+      aspectRatio: '16:9',
+      imageSize: '2K',
       prompt: expect.stringContaining('玩法设计：平台跳跃玩法'),
     });
     const prompt = generateEditorImageMock.mock.calls[0]?.[0]?.prompt ?? '';
@@ -885,9 +887,13 @@ describe('ImageCanvasEditorView generation integration', () => {
         name: '图标素材规范',
       }),
     ).toBeTruthy();
-    expect(within(iconSpritesheetPanel).getByText('素材描述')).toBeTruthy();
-    expect(within(iconSpritesheetPanel).getByText('素材描述 1')).toBeTruthy();
-    expect(within(iconSpritesheetPanel).getByText('素材描述 6')).toBeTruthy();
+    expect(
+      within(iconSpritesheetPanel).getByRole('textbox', {
+        name: '素材描述',
+      }),
+    ).toBeTruthy();
+    expect(within(iconSpritesheetPanel).queryByText('素材描述 1')).toBeNull();
+    expect(within(iconSpritesheetPanel).queryByText('素材描述 6')).toBeNull();
     expect(
       within(iconSpritesheetPanel).getByRole('button', {
         name: '生成图片模型 nanobanana2',
@@ -1024,6 +1030,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'icon-gpt-model-1',
+      priceMudPoints: 12,
     });
     render(<ImageCanvasEditorView />);
     await screen.findByAltText('画布图片：拼图素材');
@@ -1068,6 +1075,14 @@ describe('ImageCanvasEditorView generation integration', () => {
       screen.getByLabelText('上传图片文件'),
       new File(['icon-spec'], '图标规范.png', { type: 'image/png' }),
     );
+    await waitFor(() => {
+      expect(
+        within(screen.getByRole('dialog', { name: '生成图标素材' })).getByRole(
+          'button',
+          { name: '图标规范.png' },
+        ),
+      ).toBeTruthy();
+    });
     fireEvent.click(
       within(screen.getByRole('dialog', { name: '生成图标素材' })).getByRole(
         'button',
@@ -1139,7 +1154,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '生成中切换后仍保留位置' },
     });
@@ -1299,7 +1314,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     ).toBeTruthy();
   });
 
-  it('expands the icon panel width as new description items are added', async () => {
+  it('uses one direct text input for icon asset descriptions', async () => {
     render(<ImageCanvasEditorView />);
 
     await waitFor(() => {
@@ -1309,23 +1324,26 @@ describe('ImageCanvasEditorView generation integration', () => {
     fireEvent.click(screen.getByRole('button', { name: '生成图标素材' }));
 
     const iconPanel = screen.getByRole('dialog', { name: '生成图标素材' });
-    expect(Number.parseFloat(iconPanel.style.width)).toBeCloseTo(52.8, 1);
+    expect(iconPanel.style.width).toBe('');
     expect(
       iconPanel.querySelector('.image-canvas-editor__icon-description-list'),
-    ).toBeTruthy();
+    ).toBeNull();
     expect(
       iconPanel.querySelector('.image-canvas-editor__icon-description-card'),
-    ).toBeTruthy();
+    ).toBeNull();
     expect(
       iconPanel.querySelector('.image-canvas-editor__icon-spec-card'),
     ).toBeTruthy();
 
-    fireEvent.click(
-      within(iconPanel).getByRole('button', { name: '添加素材描述' }),
+    fireEvent.change(
+      within(iconPanel).getByRole('textbox', { name: '素材描述' }),
+      { target: { value: '返回按钮\n设置按钮\n提示按钮' } },
     );
 
-    expect(Number.parseFloat(iconPanel.style.width)).toBeCloseTo(61.2, 1);
-    expect(within(iconPanel).getAllByRole('textbox')).toHaveLength(7);
+    expect(within(iconPanel).getAllByRole('textbox')).toHaveLength(1);
+    expect(
+      within(iconPanel).queryByRole('button', { name: '添加素材描述' }),
+    ).toBeNull();
   });
 
   it('hides the active generation panel and clears image selection after canvas background focus', async () => {
@@ -1342,7 +1360,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '发光蘑菇角色' },
     });
@@ -1429,8 +1447,10 @@ describe('ImageCanvasEditorView generation integration', () => {
 
     expect(generateEditorImageMock).toHaveBeenCalledWith({
       kind: 'spec',
-      model: 'gemini-3.1-flash-image-preview',
+      model: 'gpt-image-2',
       size: '2048x1152',
+      aspectRatio: '16:9',
+      imageSize: '2K',
       prompt: expect.stringContaining('生成一张完整游戏UI规范汇总设定展板'),
     });
     const prompt = generateEditorImageMock.mock.calls[0]?.[0]?.prompt ?? '';
@@ -1476,8 +1496,10 @@ describe('ImageCanvasEditorView generation integration', () => {
 
     expect(generateEditorImageMock).toHaveBeenCalledWith({
       kind: 'spec',
-      model: 'gemini-3.1-flash-image-preview',
+      model: 'gpt-image-2',
       size: '2048x1152',
+      aspectRatio: '16:9',
+      imageSize: '2K',
       prompt: '生成一张武器图标规范展板',
     });
     await waitFor(() => {
@@ -1804,6 +1826,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       model: 'gemini-3.1-flash-image-preview',
       provider: 'VectorEngine',
       taskId: 'icon-task-1',
+      priceMudPoints: 12,
     });
     render(<ImageCanvasEditorView />);
 
@@ -1820,11 +1843,12 @@ describe('ImageCanvasEditorView generation integration', () => {
       within(iconPanel).getByRole('button', { name: '图标素材规范' }),
     ).toBeTruthy();
     expect(
-      (within(iconPanel).getAllByRole('textbox')[0] as HTMLInputElement).value,
-    ).toBe('返回按钮');
-    expect(
-      (within(iconPanel).getAllByRole('textbox')[5] as HTMLInputElement).value,
-    ).toBe('冻结按钮');
+      (
+        within(iconPanel).getByRole('textbox', {
+          name: '素材描述',
+        }) as HTMLTextAreaElement
+      ).value,
+    ).toBe('返回按钮\n设置按钮\n下一关按钮\n提示按钮\n原图按钮\n冻结按钮');
 
     fireEvent.click(
       within(iconPanel).getByRole('button', { name: '图标素材规范' }),
@@ -1863,32 +1887,12 @@ describe('ImageCanvasEditorView generation integration', () => {
       screen.queryByText('请选择画布中的图标素材规范，按 Esc 退出'),
     ).toBeNull();
 
-    const iconDescriptionInputs = within(iconPanel).getAllByRole('textbox');
-    const [
-      ,
-      ,
-      iconDescription3,
-      iconDescription4,
-      iconDescription5,
-      iconDescription6,
-    ] = iconDescriptionInputs;
-    expect(iconDescription3).toBeTruthy();
-    expect(iconDescription4).toBeTruthy();
-    expect(iconDescription5).toBeTruthy();
-    expect(iconDescription6).toBeTruthy();
-
-    fireEvent.change(iconDescription3!, {
-      target: { value: '' },
-    });
-    fireEvent.change(iconDescription4!, {
-      target: { value: '' },
-    });
-    fireEvent.change(iconDescription5!, {
-      target: { value: '' },
-    });
-    fireEvent.change(iconDescription6!, {
-      target: { value: '' },
-    });
+    fireEvent.change(
+      within(iconPanel).getByRole('textbox', { name: '素材描述' }),
+      {
+        target: { value: '返回按钮\n设置按钮' },
+      },
+    );
     fireEvent.click(within(iconPanel).getByRole('button', { name: '生成' }));
 
     expect(generateEditorIconSpritesheetMock).toHaveBeenCalledWith({
@@ -1897,6 +1901,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       model: 'gemini-3.1-flash-image-preview',
       aspectRatio: '1:1',
       imageSize: '1K',
+      priceMudPoints: 12,
     });
 
     await waitFor(() => {
@@ -1911,10 +1916,12 @@ describe('ImageCanvasEditorView generation integration', () => {
     const iconInfoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(iconInfoPanel).queryByText('Prompt')).toBeNull();
     expect(within(iconInfoPanel).getByText('生成输入')).toBeTruthy();
-    expect(within(iconInfoPanel).getByText('素材描述 1')).toBeTruthy();
-    expect(within(iconInfoPanel).getByText('素材描述 2')).toBeTruthy();
-    expect(within(iconInfoPanel).getByText('返回按钮')).toBeTruthy();
-    expect(within(iconInfoPanel).getByText('设置按钮')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('素材描述')).toBeTruthy();
+    expect(
+      within(iconInfoPanel).getByText(
+        (_, element) => element?.textContent === '返回按钮\n设置按钮',
+      ),
+    ).toBeTruthy();
     expect(within(iconInfoPanel).getByText('图标素材规范')).toBeTruthy();
     expect(within(iconInfoPanel).getByText('清爽按钮图标规范')).toBeTruthy();
     await waitFor(() => {
@@ -2413,8 +2420,8 @@ describe('ImageCanvasEditorView generation integration', () => {
       provider: 'VectorEngine',
       taskId: 'editor-real-task-2',
     });
-    editEditorImageMock.mockResolvedValueOnce({
-      imageSrc: 'data:image/png;base64,ZWRpdGVkLWltYWdl',
+    generateEditorImageMock.mockResolvedValueOnce({
+      imageSrc: 'data:image/png;base64,ZWRhd24tcmVkcmF3',
       width: 1024,
       height: 1024,
       sourceType: 'generated',
@@ -2422,11 +2429,11 @@ describe('ImageCanvasEditorView generation integration', () => {
       actualPrompt: '把画面改成黄昏光线',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
-      taskId: 'editor-real-edit-1',
+      taskId: 'editor-real-redraw-1',
     });
     render(<ImageCanvasEditorView />);
 
-    fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '一张可修改的生成图' },
     });
@@ -2471,41 +2478,45 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(within(metadataDialog).getByText('Resolution')).toBeTruthy();
     expect(within(metadataDialog).getByText('1024 x 1024 px')).toBeTruthy();
 
-    fireEvent.click(screen.getByRole('button', { name: '修改图片' }));
-    const editDialog = screen.getByRole('dialog', { name: '修改图片' });
+    fireEvent.click(screen.getByRole('button', { name: '重绘' }));
+    const editDialog = screen.getByRole('dialog', { name: '重绘图片' });
     expect(editDialog).toBeTruthy();
-    const editPrompt = screen.getByLabelText('生成提示词');
+    const editPrompt = within(editDialog).getByLabelText('重绘提示词');
     expect(editPrompt.className).toContain('platform-text-field');
     expect(editPrompt.className).toContain(
-      'image-canvas-editor__generate-prompt',
+      'image-canvas-editor__quick-edit-prompt',
     );
     fireEvent.change(editPrompt, {
       target: { value: '把画面改成黄昏光线' },
     });
-    fireEvent.click(screen.getByRole('button', { name: '修改' }));
+    fireEvent.click(within(editDialog).getByRole('button', { name: '生成' }));
 
-    expect(screen.getByRole('status').textContent).toContain('修改中');
     await waitFor(() => {
-      expect(editEditorImageMock).toHaveBeenCalledWith({
-        prompt: '把画面改成黄昏光线',
-        sourceImageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
-      });
+      expect(generateEditorImageMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          prompt: '把画面改成黄昏光线',
+          size: '1024x1024',
+          kind: 'quick-edit',
+          model: 'gpt-image-2',
+          referenceImageSrcs: ['data:image/png;base64,ZmFrZS1pbWFnZQ=='],
+        }),
+      );
     });
 
     await waitFor(() => {
-      expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();
+      expect(screen.getByRole('dialog', { name: '重绘图片' })).toBeTruthy();
     });
-    expect(screen.getByAltText(/画布图片：生成图片 .* 修改结果/)).toBeTruthy();
+    expect(screen.getByAltText(/画布图片：生成图片 .* 重绘/)).toBeTruthy();
     fireEvent.click(
       screen.getAllByRole('button', {
-        name: /查看生成图片 .* 修改结果图片信息/u,
+        name: /查看生成图片 .* 重绘图片信息/u,
       })[0]!,
     );
     const editedMetadataDialog = screen.getByRole('dialog', {
       name: '图片信息',
     });
     expect(within(editedMetadataDialog).queryByText('Prompt')).toBeNull();
-    expect(within(editedMetadataDialog).getByText('修改要求')).toBeTruthy();
+    expect(within(editedMetadataDialog).getByText('重绘提示词')).toBeTruthy();
     expect(
       within(editedMetadataDialog).getByText('把画面改成黄昏光线'),
     ).toBeTruthy();
@@ -2518,16 +2529,16 @@ describe('ImageCanvasEditorView generation integration', () => {
     ).toBeTruthy();
   });
 
-  it('hides the edit image panel after generation starts while keeping the source preview visible', async () => {
+  it('keeps the redraw panel open after generation starts while keeping the source preview visible', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-edit-generating',
-      title: '修改图片生成中画布',
+      title: '重绘生成中画布',
       viewport: { x: 0, y: 0, scale: 1 },
       layers: [
         {
           layerId: 'layer-edit-generating-source',
           resourceId: 'resource-edit-generating-source',
-          title: '待修改图片',
+          title: '待重绘',
           src: 'data:image/png;base64,ZWRpdC1nZW5lcmF0aW5n',
           x: 120,
           y: 140,
@@ -2547,10 +2558,10 @@ describe('ImageCanvasEditorView generation integration', () => {
       resources: [],
       updatedAt: '2026-06-16T00:00:00.000Z',
     });
-    editEditorImageMock.mockReturnValueOnce(new Promise(() => undefined));
+    generateEditorImageMock.mockReturnValueOnce(new Promise(() => undefined));
     render(<ImageCanvasEditorView />);
 
-    const sourceImage = await screen.findByAltText('画布图片：待修改图片');
+    const sourceImage = await screen.findByAltText('画布图片：待重绘');
     const sourceLayer = sourceImage.closest('button')!;
     fireEvent.pointerDown(sourceLayer, {
       button: 0,
@@ -2563,21 +2574,19 @@ describe('ImageCanvasEditorView generation integration', () => {
       clientX: 180,
       clientY: 180,
     });
-    fireEvent.click(screen.getByRole('button', { name: '修改图片' }));
-    const editDialog = screen.getByRole('dialog', { name: '修改图片' });
-    fireEvent.change(within(editDialog).getByLabelText('生成提示词'), {
+    fireEvent.click(screen.getByRole('button', { name: '重绘' }));
+    const editDialog = screen.getByRole('dialog', { name: '重绘图片' });
+    fireEvent.change(within(editDialog).getByLabelText('重绘提示词'), {
       target: { value: '改成雨夜灯光' },
     });
-    fireEvent.click(within(editDialog).getByRole('button', { name: '修改' }));
+    fireEvent.click(within(editDialog).getByRole('button', { name: '生成' }));
 
-    expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();
-    expect(screen.getByAltText('画布图片：待修改图片')).toBeTruthy();
-    expect(sourceLayer.className).toContain(
+    expect(screen.getByRole('dialog', { name: '重绘图片' })).toBeTruthy();
+    expect(screen.getByAltText('画布图片：待重绘')).toBeTruthy();
+    expect(sourceLayer.className).not.toContain(
       'image-canvas-editor__layer--generating',
     );
-    expect(within(sourceLayer).getByRole('status').textContent).toContain(
-      '修改中',
-    );
+    expect(within(editDialog).getByRole('button', { name: '生成中' })).toBeTruthy();
   });
 
   it('hides the quick edit panel after generation starts while keeping the source preview visible', async () => {
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 743d680ed..4f0aca801 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -164,10 +164,12 @@ describe('ImageCanvasEditorModel', () => {
   it('restores audio generation dialogs from saved layout', () => {
     const dialog: CanvasGenerationDialogState = {
       id: 'generation-dialog-audio',
-      mode: 'audio-background-music',
-      prompt: '森林冒险背景音乐',
+      mode: 'audio-sound-effect',
+      prompt: '金币掉落叮当声',
       status: 'idle',
       composerOpen: true,
+      soundType: 'loop',
+      soundTempo: 120,
       generatedLayerId: 'layer-audio',
       placeholder: {
         x: 100,
@@ -189,8 +191,10 @@ describe('ImageCanvasEditorModel', () => {
     expect(generationDialogs).toHaveLength(1);
     expect(generationDialogs[0]).toMatchObject({
       id: 'generation-dialog-audio',
-      mode: 'audio-background-music',
-      prompt: '森林冒险背景音乐',
+      mode: 'audio-sound-effect',
+      prompt: '金币掉落叮当声',
+      soundType: 'loop',
+      soundTempo: 120,
       generatedLayerId: 'layer-audio',
     });
   });
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index c3af929d6..0fe8e848c 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -4,13 +4,13 @@ import type {
 } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasAssetKind,
+  CanvasContextMenuState,
   CanvasGenerationDialogState,
   CanvasGenerationInputs,
   CanvasLayer,
-  CanvasContextMenuState,
   CanvasMediaType,
-  CharacterReferenceImage,
   CanvasViewport,
+  CharacterReferenceImage,
   EditorAsset,
   EditorAssetFolder,
   SnapCandidate,
@@ -306,17 +306,10 @@ export function hydrateCanvasGenerationDialog(
     videoMode: snapshot.videoMode === 'std' ? 'std' : undefined,
     videoSound: snapshot.videoSound === 'off' ? 'off' : undefined,
     soundType:
-      snapshot.soundType === 'foley' || snapshot.soundType === 'ambient'
+      snapshot.soundType === 'loop' || snapshot.soundType === 'one-shot'
         ? snapshot.soundType
-        : snapshot.soundType === 'ui'
-          ? 'ui'
-          : undefined,
-    soundTempo:
-      snapshot.soundTempo === 'slow' || snapshot.soundTempo === 'fast'
-        ? snapshot.soundTempo
-        : snapshot.soundTempo === 'medium'
-          ? 'medium'
-          : undefined,
+        : undefined,
+    soundTempo: bpmOrNull(snapshot.soundTempo),
     makeInstrumental:
       typeof snapshot.makeInstrumental === 'boolean'
         ? snapshot.makeInstrumental
@@ -455,6 +448,17 @@ export function numberFromSnapshot(value: unknown, fallback: number) {
   return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
 }
 
+export function bpmOrNull(value: unknown) {
+  if (value === null) {
+    return null;
+  }
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return undefined;
+  }
+  const roundedValue = Math.round(value);
+  return roundedValue >= 1 && roundedValue <= 300 ? roundedValue : undefined;
+}
+
 export function stringOrNull(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : null;
 }
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index e5f284af2..27292fe9e 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -4,14 +4,12 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-import type {
-  ImageCanvasMetadataModalViewProps,
-} from './ImageCanvasMetadataModalView';
+import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
+import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import type { ImageCanvasMetadataModalViewProps } from './ImageCanvasMetadataModalView';
 import type { ImageCanvasSidebarViewProps } from './ImageCanvasSidebarView';
 import type { ImageCanvasStageViewProps } from './ImageCanvasStageView';
 import type { ImageCanvasTopbarViewProps } from './ImageCanvasTopbarView';
-import type { CanvasLayer } from './ImageCanvasEditorTypes';
-import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
@@ -161,10 +159,12 @@ function createStageProps(): ImageCanvasStageViewProps {
     onOpenLayerMetadata: vi.fn(),
     onGenerationFramePointerDown: vi.fn(),
     onActivateGenerationDialog: vi.fn(),
-    onDeleteSelectedLayer: vi.fn(),
     onOpenQuickEditPanel: vi.fn(),
-    onOpenEditDialog: vi.fn(),
+    onOpenRedrawPanel: vi.fn(),
+    onOpenCropExpandPanel: vi.fn(),
+    onRemoveBackground: vi.fn(),
     onOpenCharacterAnimationPanel: vi.fn(),
+    onDownloadLayer: vi.fn(),
     onPasteCanvasClipboard: vi.fn(),
     onCopyContextLayers: vi.fn(),
     onDuplicateContextLayers: vi.fn(),
@@ -222,15 +222,15 @@ describe('ImageCanvasEditorShellView', () => {
       />,
     );
 
-    expect(
-      screen.getByRole('region', { name: '图片画布编辑器' }),
-    ).toBeTruthy();
+    expect(screen.getByRole('region', { name: '图片画布编辑器' })).toBeTruthy();
     expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
     expect(screen.getByLabelText('画布工作区')).toBeTruthy();
     expect(screen.getByRole('toolbar', { name: 'AI画布工具栏' })).toBeTruthy();
     expect(screen.getByRole('dialog', { name: '图片信息' })).toBeTruthy();
 
-    const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
+    const uploadInput = screen.getByLabelText(
+      '上传图片文件',
+    ) as HTMLInputElement;
     fireEvent.change(uploadInput);
 
     expect(uploadInput.multiple).toBe(true);
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index bab6628a9..b62443e17 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -107,10 +107,7 @@ export type CanvasTool =
   | 'spec'
   | 'character'
   | 'icon'
-  | 'ui-design'
-  | 'text'
-  | 'shape'
-  | 'export';
+  | 'ui-design';
 
 export type SidebarPanel = 'assets' | 'layers';
 
@@ -177,8 +174,9 @@ export type GenerateDialogState = {
   videoDurationSeconds?: 4 | 5;
   videoMode?: 'std';
   videoSound?: 'off';
-  soundType?: 'ui' | 'foley' | 'ambient';
-  soundTempo?: 'slow' | 'medium' | 'fast';
+  soundType?: 'one-shot' | 'loop';
+  // 中文注释：音效 tempo 改为可空 BPM，null 表示用户不指定节奏。
+  soundTempo?: number | null;
   makeInstrumental?: boolean;
   aspectRatio?: string;
   imageSize?: string;
@@ -239,6 +237,7 @@ export type CanvasContextMenuState =
     };
 
 export type QuickEditPanelState = {
+  mode?: 'quick-edit' | 'redraw';
   sourceLayerId: string;
   prompt: string;
   size: string;
@@ -247,6 +246,18 @@ export type QuickEditPanelState = {
   errorMessage?: string;
 };
 
+export type CropExpandPanelState = {
+  sourceLayerId: string;
+  insets: {
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+  };
+  status: 'idle' | 'processing' | 'failed';
+  errorMessage?: string;
+};
+
 export type CharacterAnimationPanelState = {
   sourceLayerId: string;
   promptText: string;
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 906893638..ba08e239c 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -15,9 +15,9 @@ import { describe, expect, it, vi } from 'vitest';
 import {
   ApiClientError,
   AuthUiContext,
-  ImageCanvasEditorView,
   createAuthValue,
   dispatchPointerEvent,
+  ImageCanvasEditorView,
   readZipText,
   setupImageCanvasEditorViewTestLifecycle,
 } from './ImageCanvasEditorView.test-utils';
@@ -437,8 +437,7 @@ describe('ImageCanvasEditorView', () => {
     ).toBe(true);
   });
 
-  it('shows image resolution on hover and placeholder toolbar after selecting a layer', () => {
-    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
+  it('shows image resolution on hover and opens the crop-expand panel after selecting a layer', () => {
     render(<ImageCanvasEditorView />);
 
     const canvasImage = screen.getByAltText('画布图片：拼图素材');
@@ -455,7 +454,7 @@ describe('ImageCanvasEditorView', () => {
       clientY: 120,
     });
 
-    const cropButton = screen.getByRole('button', { name: '裁剪占位' });
+    const cropButton = screen.getByRole('button', { name: '裁扩按钮' });
     fireEvent.pointerDown(cropButton, {
       button: 0,
       pointerId: 2,
@@ -464,7 +463,7 @@ describe('ImageCanvasEditorView', () => {
     });
     fireEvent.click(cropButton);
 
-    expect(alertSpy).toHaveBeenCalledWith('裁剪功能建设中');
+    expect(screen.getByRole('dialog', { name: '裁扩图片' })).toBeTruthy();
     expect(screen.getByRole('toolbar', { name: '图片工具栏' })).toBeTruthy();
   });
 
@@ -505,7 +504,7 @@ describe('ImageCanvasEditorView', () => {
     expect(
       within(infoPanel).queryByRole('button', { name: '复制Prompt' }),
     ).toBeNull();
-    expect(screen.queryByRole('button', { name: '修改图片' })).toBeNull();
+    expect(screen.getByRole('button', { name: '重绘' })).toBeTruthy();
   });
 
   it('hydrates canvas images from Resolution instead of saved Size', async () => {
@@ -553,7 +552,15 @@ describe('ImageCanvasEditorView', () => {
     expect(within(infoPanel).getByText('1536 x 1024 px')).toBeTruthy();
   });
 
-  it('deletes the selected layer from the floating toolbar', () => {
+  it('downloads the selected layer from the floating toolbar', () => {
+    let downloadName = '';
+    let downloadHref = '';
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(
+      function click(this: HTMLAnchorElement) {
+        downloadName = this.download;
+        downloadHref = this.href;
+      },
+    );
     render(<ImageCanvasEditorView />);
 
     expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
@@ -567,9 +574,11 @@ describe('ImageCanvasEditorView', () => {
         clientY: 120,
       },
     );
-    fireEvent.click(screen.getByRole('button', { name: '删除图片' }));
+    fireEvent.click(screen.getByRole('button', { name: '下载按钮' }));
 
-    expect(screen.queryByAltText('画布图片：拼图素材')).toBeNull();
+    expect(downloadName).toBe('拼图素材.png');
+    expect(downloadHref).toContain('/creation-type-references/puzzle.webp');
+    expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
     expect(screen.getByAltText('画布图片：大鱼素材')).toBeTruthy();
   });
 
@@ -823,7 +832,7 @@ describe('ImageCanvasEditorView', () => {
     expect(
       screen.getByRole('button', { name: '查看大鱼素材图片信息' }),
     ).toBeTruthy();
-    expect(screen.queryByRole('button', { name: '修改图片' })).toBeNull();
+    expect(screen.getByRole('button', { name: '重绘' })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '打开素材' }));
 
@@ -1235,30 +1244,23 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('switches tools and restores the previous tool after holding Space', async () => {
-    const user = userEvent.setup();
     render(<ImageCanvasEditorView />);
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     const selectTool = within(bottomToolbar).getByRole('button', {
       name: '选择工具',
     });
-    const textTool = within(bottomToolbar).getByRole('button', {
-      name: '文字工具',
-    });
     const handTool = within(bottomToolbar).getByRole('button', {
       name: '抓手工具',
     });
 
     expect(selectTool.getAttribute('aria-pressed')).toBe('true');
 
-    await user.click(textTool);
-    expect(textTool.getAttribute('aria-pressed')).toBe('true');
-
     fireEvent.keyDown(window, { code: 'Space', key: ' ' });
     expect(handTool.getAttribute('aria-pressed')).toBe('true');
 
     fireEvent.keyUp(window, { code: 'Space', key: ' ' });
-    expect(textTool.getAttribute('aria-pressed')).toBe('true');
+    expect(selectTool.getAttribute('aria-pressed')).toBe('true');
   });
 
   it('switches away from hand tool from the bottom toolbar', async () => {
@@ -1269,15 +1271,15 @@ describe('ImageCanvasEditorView', () => {
     const handTool = within(bottomToolbar).getByRole('button', {
       name: '抓手工具',
     });
-    const textTool = within(bottomToolbar).getByRole('button', {
-      name: '文字工具',
+    const selectTool = within(bottomToolbar).getByRole('button', {
+      name: '选择工具',
     });
 
     await user.click(handTool);
     expect(handTool.getAttribute('aria-pressed')).toBe('true');
 
-    await user.click(textTool);
-    expect(textTool.getAttribute('aria-pressed')).toBe('true');
+    await user.click(selectTool);
+    expect(selectTool.getAttribute('aria-pressed')).toBe('true');
     expect(handTool.getAttribute('aria-pressed')).toBe('false');
   });
 
@@ -1355,12 +1357,12 @@ describe('ImageCanvasEditorView', () => {
     });
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
-    const textTool = within(bottomToolbar).getByRole('button', {
-      name: '文字工具',
+    const handTool = within(bottomToolbar).getByRole('button', {
+      name: '抓手工具',
     });
-    await user.click(textTool);
+    await user.click(handTool);
 
-    expect(textTool.getAttribute('aria-pressed')).toBe('true');
+    expect(handTool.getAttribute('aria-pressed')).toBe('true');
     expect(
       screen.queryByTestId('image-canvas-editor-snap-guide-vertical'),
     ).toBeNull();
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index cf90c6e10..eff6791e1 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1,27 +1,31 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { createEditorAsset } from '../../services/image-editor/editorProjectClient';
+import {
+  createEditorAsset,
+  createEditorProjectResource,
+} from '../../services/image-editor/editorProjectClient';
 import { useAuthUi } from '../auth/AuthUiContext';
-import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
 import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
-import { isCanvasGenerationComposerVisible } from './ImageCanvasOverlayModel';
+import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
 import type {
   AssetPointerDragState,
-  CanvasGenerationDialogState,
   CanvasContextMenuState,
+  CanvasGenerationDialogState,
   CanvasLayer,
   CanvasTool,
   CanvasViewport,
   ImageContextMenuState,
 } from './ImageCanvasEditorTypes';
-import { useCanvasHistory } from './useCanvasHistory';
+import { getEditorUploadAccept } from './ImageCanvasFileModel';
+import { isCanvasGenerationComposerVisible } from './ImageCanvasOverlayModel';
 import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
-import { useImageCanvasAssetLibrary } from './useImageCanvasAssetLibrary';
+import { useCanvasHistory } from './useCanvasHistory';
 import {
   useImageCanvasAssetCanvasBridge,
   useImageCanvasAssetLayerCleanup,
 } from './useImageCanvasAssetCanvasBridge';
 import { useImageCanvasAssetExportWorkflow } from './useImageCanvasAssetExportWorkflow';
+import { useImageCanvasAssetLibrary } from './useImageCanvasAssetLibrary';
 import { useImageCanvasEditorChrome } from './useImageCanvasEditorChrome';
 import { useImageCanvasGenerationSurface } from './useImageCanvasGenerationSurface';
 import { useImageCanvasKeyboardShortcuts } from './useImageCanvasKeyboardShortcuts';
@@ -30,7 +34,6 @@ import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersist
 import { useImageCanvasStageController } from './useImageCanvasStageController';
 import { useImageCanvasStageInteractions } from './useImageCanvasStageInteractions';
 import { useImageCanvasUploadWorkflow } from './useImageCanvasUploadWorkflow';
-import { getEditorUploadAccept } from './ImageCanvasFileModel';
 import {
   DEFAULT_IMAGE_CANVAS_VIEWPORT,
   useImageCanvasViewportControls,
@@ -217,7 +220,6 @@ export function ImageCanvasEditorView() {
     generateDialog,
     setGenerateDialog,
     generateDialogRef,
-    inactiveGenerateDialogs,
     setInactiveGenerateDialogs,
     inactiveGenerateDialogsRef,
     activeCanvasGenerationDialog,
@@ -243,7 +245,7 @@ export function ImageCanvasEditorView() {
       selectedLayerIdRef,
       selectedLayerIdsRef,
     }),
-    [],
+    [generateDialogRef, inactiveGenerateDialogsRef],
   );
   const canvasHistorySetters = useMemo(
     () => ({
@@ -254,7 +256,14 @@ export function ImageCanvasEditorView() {
       setSelectedLayerId,
       setSelectedLayerIds,
     }),
-    [],
+    [
+      setGenerateDialog,
+      setInactiveGenerateDialogs,
+      setLayers,
+      setSelectedLayerId,
+      setSelectedLayerIds,
+      setViewport,
+    ],
   );
   const canvasHistoryResetters = useMemo(
     () => ({
@@ -277,20 +286,23 @@ export function ImageCanvasEditorView() {
     resetters: canvasHistoryResetters,
   });
   captureCanvasHistoryRef.current = captureCanvasHistory;
-  const selectSingleLayer = useCallback((layerId: string | null) => {
-    setSelectedLayerId(layerId);
-    setSelectedLayerIds(layerId ? [layerId] : []);
-    if (layerId) {
-      setGenerateDialog((currentDialog) =>
-        isCanvasGenerationComposerVisible(currentDialog)
-          ? {
-              ...currentDialog,
-              composerOpen: currentDialog.generatedLayerId === layerId,
-            }
-          : currentDialog,
-      );
-    }
-  }, []);
+  const selectSingleLayer = useCallback(
+    (layerId: string | null) => {
+      setSelectedLayerId(layerId);
+      setSelectedLayerIds(layerId ? [layerId] : []);
+      if (layerId) {
+        setGenerateDialog((currentDialog) =>
+          isCanvasGenerationComposerVisible(currentDialog)
+            ? {
+                ...currentDialog,
+                composerOpen: currentDialog.generatedLayerId === layerId,
+              }
+            : currentDialog,
+        );
+      }
+    },
+    [setGenerateDialog],
+  );
   const persistGeneratedAsset = useCallback(
     (layer: CanvasLayer) => {
       if (authUiRef.current && !authUiRef.current.canAccessProtectedData) {
@@ -392,7 +404,14 @@ export function ImageCanvasEditorView() {
       },
       restoreCanvasGenerationDialogs,
     }),
-    [restoreCanvasGenerationDialogs, selectSingleLayer],
+    [
+      restoreCanvasGenerationDialogs,
+      selectSingleLayer,
+      setLayers,
+      setProjectRenameValue,
+      setProjectTitle,
+      setViewport,
+    ],
   );
   const { projectId, appendCanvasLayersWithResources } =
     useImageCanvasProjectPersistence({
@@ -404,6 +423,37 @@ export function ImageCanvasEditorView() {
       canAccessProtectedData: authUi ? authUi.canAccessProtectedData : true,
       openEditorLoginModal,
     });
+  const persistUpdatedLayerResource = useCallback(
+    (layer: CanvasLayer) => {
+      if (!projectId) {
+        return;
+      }
+      void createEditorProjectResource(projectId, {
+        imageSrc: layer.src,
+        width: layer.originalWidth,
+        height: layer.originalHeight,
+        sourceType: layer.sourceType,
+        prompt: layer.prompt,
+        actualPrompt: layer.actualPrompt,
+        model: layer.model,
+        provider: layer.provider,
+        taskId: layer.taskId,
+        sourceResourceId: layer.sourceResourceId,
+      }).then((resource) => {
+        setLayers((currentLayers) =>
+          currentLayers.map((currentLayer) =>
+            currentLayer.id === layer.id
+              ? {
+                  ...currentLayer,
+                  resourceId: resource.resourceId,
+                }
+              : currentLayer,
+          ),
+        );
+      });
+    },
+    [projectId],
+  );
   const {
     assetExportStatus,
     isExportingAssets,
@@ -417,7 +467,6 @@ export function ImageCanvasEditorView() {
   const {
     uploadInputRef,
     uploadTarget,
-    setUploadTarget,
     requestUpload,
     handleUploadInputChange,
     addUploadedFiles,
@@ -445,6 +494,7 @@ export function ImageCanvasEditorView() {
     canvasSize,
     viewport,
     setViewport,
+    setLayers,
     layerCounterRef,
     specToolWrapRef,
     musicToolWrapRef,
@@ -464,12 +514,14 @@ export function ImageCanvasEditorView() {
     appendCanvasLayersWithResources,
     selectSingleLayer,
     fitLayers,
+    captureCanvasHistory,
     setActiveTool,
     setActiveSidebarPanel,
     setMetadataLayer,
     setImageContextMenu,
     requestUpload,
     persistGeneratedAsset,
+    persistUpdatedLayerResource,
   });
   const {
     quickEditPanel,
@@ -491,8 +543,10 @@ export function ImageCanvasEditorView() {
     isPickingUiDesignSpecFromCanvas,
     setIsPickingUiDesignSpecFromCanvas,
     openCharacterAnimationPanel,
-    openEditDialog,
     openQuickEditPanel,
+    openRedrawPanel,
+    openCropExpandPanel,
+    removeSelectedLayerBackground,
     pickCharacterSpecFromLayer,
     pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer,
@@ -541,7 +595,6 @@ export function ImageCanvasEditorView() {
     deleteContextLayers,
     exportContextLayer,
     deleteLayerById,
-    deleteSelectedLayer,
     groupSelectedLayers,
   } = useImageCanvasLayerCommands({
     layers,
@@ -701,7 +754,7 @@ export function ImageCanvasEditorView() {
       requestUpload('asset');
       return;
     }
-  if (switchGenerationTool(tool)) {
+    if (switchGenerationTool(tool)) {
       return;
     }
     setActiveTool(tool);
@@ -844,10 +897,12 @@ export function ImageCanvasEditorView() {
     },
     onGenerationFramePointerDown: handleGenerationFramePointerDown,
     onActivateGenerationDialog: activateCanvasGenerationDialog,
-    onDeleteSelectedLayer: deleteSelectedLayer,
     onOpenQuickEditPanel: openQuickEditPanel,
-    onOpenEditDialog: openEditDialog,
+    onOpenRedrawPanel: openRedrawPanel,
+    onOpenCropExpandPanel: openCropExpandPanel,
+    onRemoveBackground: removeSelectedLayerBackground,
     onOpenCharacterAnimationPanel: openCharacterAnimationPanel,
+    onDownloadLayer: exportLayerImage,
     onPasteCanvasClipboard: pasteCanvasClipboard,
     onCopyContextLayers: copyContextLayers,
     onDuplicateContextLayers: duplicateContextLayers,
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index fa2070a5d..51524b827 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -2,11 +2,11 @@
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import {
-  createRef,
-  useState,
   type ComponentProps,
+  createRef,
   type Dispatch,
   type SetStateAction,
+  useState,
 } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -47,6 +47,9 @@ function createComposerProps(
     quickEditPanel: null,
     quickEditSourceLayer: null,
     quickEditPanelStyle: null,
+    cropExpandPanel: null,
+    cropExpandSourceLayer: null,
+    cropExpandPanelStyle: null,
     quickEditSizeOptions: ['1024x1024'],
     quickEditModelOptions: [{ label: 'gpt-image-2', value: 'gpt-image-2' }],
     characterAnimationPanel: null,
@@ -60,6 +63,12 @@ function createComposerProps(
           typeof ImageCanvasGenerationComposerView
         >['quickEditPanel']
       >(),
+    setCropExpandPanel:
+      mockStateSetter<
+        ComponentProps<
+          typeof ImageCanvasGenerationComposerView
+        >['cropExpandPanel']
+      >(),
     setCharacterAnimationPanel:
       mockStateSetter<
         ComponentProps<
@@ -81,11 +90,11 @@ function createComposerProps(
     onSubmitImageGeneration: vi.fn(),
     onSubmitIconSpritesheetGeneration: vi.fn(),
     onSubmitQuickEdit: vi.fn(),
+    onSubmitCropExpand: vi.fn(),
     onSubmitCharacterAnimation: vi.fn(),
     onCloseGenerateComposer: vi.fn(),
     onUpdateSpecFormValue: vi.fn(),
-    onUpdateIconDescription: vi.fn(),
-    onAddIconDescription: vi.fn(),
+    onUpdateIconDescriptionText: vi.fn(),
     onUpdateCharacterAnimationDuration: vi.fn(),
     onRememberImageModel: vi.fn(),
     ...overrides,
@@ -403,31 +412,75 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(screen.getByRole('button', { name: '模型 Kling 3.0' })).toBeTruthy();
   });
 
-  it('生成游戏音效面板展示 sound、type、tempo 并在按钮内显示泥点', () => {
+  it('生成游戏音效面板把类型和 BPM 合并到一个无标题参数按钮', () => {
     const onSubmitImageGeneration = vi.fn();
-    renderComposer(
-      {
+    function AudioHarness() {
+      const [dialog, setDialog] = useState<GenerateDialogState>({
         mode: 'audio-sound-effect',
         prompt: '',
         status: 'idle',
         composerOpen: true,
-        soundType: 'ui',
-        soundTempo: 'medium',
-      },
-      { onSubmitImageGeneration },
-    );
+        soundType: 'one-shot',
+        soundTempo: null,
+      });
+      return (
+        <>
+          <ImageCanvasGenerationComposerView
+            {...createComposerProps(dialog, { onSubmitImageGeneration })}
+            setGenerateDialog={
+              setDialog as Dispatch<SetStateAction<GenerateDialogState | null>>
+            }
+          />
+          <output aria-label="当前音效类型">{dialog.soundType}</output>
+          <output aria-label="当前BPM">{dialog.soundTempo ?? 'null'}</output>
+        </>
+      );
+    }
+
+    render(<AudioHarness />);
 
     const panel = screen.getByRole('dialog', { name: '生成游戏音效' });
     expect(within(panel).getByRole('textbox', { name: 'sound提示词' })).toBeTruthy();
-    expect(within(panel).getByRole('button', { name: 'type UI' })).toBeTruthy();
-    expect(within(panel).getByRole('button', { name: 'tempo 中速' })).toBeTruthy();
+    expect(
+      within(panel).getByRole('button', { name: '音效参数 单次' }),
+    ).toBeTruthy();
+    expect(within(panel).queryByRole('button', { name: /type/u })).toBeNull();
+    expect(within(panel).queryByRole('button', { name: /tempo/u })).toBeNull();
     expect(within(panel).getByRole('button', { name: '生成游戏音效' }).textContent).toBe(
       '生成10泥点',
     );
 
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '音效参数 单次' }),
+    );
+    const optionPanel = screen.getByRole('menu', { name: '音效参数选项' });
+    fireEvent.click(within(optionPanel).getByRole('button', { name: '循环' }));
+    fireEvent.change(within(optionPanel).getByLabelText('BPM数值'), {
+      target: { value: '120' },
+    });
+
+    expect(screen.getByLabelText('当前音效类型').textContent).toBe('loop');
+    expect(screen.getByLabelText('当前BPM').textContent).toBe('120');
+    expect(
+      screen.getByRole('button', { name: '音效参数 循环·120BPM' }),
+    ).toBeTruthy();
+
+    fireEvent.change(within(optionPanel).getByLabelText('BPM拖拉条'), {
+      target: { value: '88' },
+    });
+
+    expect(screen.getByLabelText('当前BPM').textContent).toBe('88');
+    expect(
+      screen.getByRole('button', { name: '音效参数 循环·88BPM' }),
+    ).toBeTruthy();
+
     fireEvent.submit(panel);
     expect(onSubmitImageGeneration).toHaveBeenCalledWith(
-      expect.objectContaining({ mode: 'audio-sound-effect' }),
+      expect.objectContaining({
+        mode: 'audio-sound-effect',
+        soundType: 'loop',
+        soundTempo: 88,
+      }),
     );
   });
 
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 090926ef3..9e5d937f4 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -11,39 +11,41 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 
+import { PlatformActionButton } from '../common/PlatformActionButton';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
-import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
 import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
+import { ImageCanvasCropExpandPanelView } from './ImageCanvasCropExpandPanelView';
 import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationModalView';
-import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
-import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
-import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
-import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
-import {
-  EDITOR_VIDEO_DURATION_OPTIONS,
-  EDITOR_VIDEO_MODEL_OPTIONS,
-  EDITOR_GENERATION_MUD_POINT_CONFIG,
-  SPEC_TYPE_LABEL,
-  calculateEditorVideoPrice,
-} from './ImageCanvasGenerationModel';
 import type {
-  CharacterAnimationPanelState,
   CanvasLayer,
+  CharacterAnimationPanelState,
+  CropExpandPanelState,
   GenerateDialogState,
   QuickEditPanelState,
   SpecFormValues,
   SpecGenerationType,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
+import {
+  calculateEditorVideoPrice,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+  EDITOR_VIDEO_DURATION_OPTIONS,
+  EDITOR_VIDEO_MODEL_OPTIONS,
+  SPEC_TYPE_LABEL,
+} from './ImageCanvasGenerationModel';
+import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
+import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
+import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasGenerationComposerViewProps = {
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
@@ -68,6 +70,9 @@ type ImageCanvasGenerationComposerViewProps = {
   quickEditPanel: QuickEditPanelState | null;
   quickEditSourceLayer: CanvasLayer | null;
   quickEditPanelStyle: CSSProperties | null;
+  cropExpandPanel: CropExpandPanelState | null;
+  cropExpandSourceLayer: CanvasLayer | null;
+  cropExpandPanelStyle: CSSProperties | null;
   quickEditSizeOptions: string[];
   quickEditModelOptions: Array<{ label: string; value: string }>;
   characterAnimationPanel: CharacterAnimationPanelState | null;
@@ -76,6 +81,7 @@ type ImageCanvasGenerationComposerViewProps = {
   characterAnimationPrice: number;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   setQuickEditPanel: Dispatch<SetStateAction<QuickEditPanelState | null>>;
+  setCropExpandPanel: Dispatch<SetStateAction<CropExpandPanelState | null>>;
   setCharacterAnimationPanel: Dispatch<
     SetStateAction<CharacterAnimationPanelState | null>
   >;
@@ -94,11 +100,11 @@ type ImageCanvasGenerationComposerViewProps = {
   onSubmitImageGeneration: (dialog: GenerateDialogState) => void;
   onSubmitIconSpritesheetGeneration: (dialog: GenerateDialogState) => void;
   onSubmitQuickEdit: () => void;
+  onSubmitCropExpand: () => void;
   onSubmitCharacterAnimation: () => void;
   onCloseGenerateComposer: () => void;
   onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
-  onUpdateIconDescription: (index: number, value: string) => void;
-  onAddIconDescription: () => void;
+  onUpdateIconDescriptionText: (value: string) => void;
   onUpdateCharacterAnimationDuration: (frameCountValue: string) => void;
   onRememberImageModel: (model: string) => void;
   onSpecMenuPointerEnter?: () => void;
@@ -166,7 +172,11 @@ function VideoReferenceChip({
 }) {
   const mediaType = reference.mediaType ?? 'image';
   const labelPrefix =
-    mediaType === 'video' ? '参考视频' : mediaType === 'audio' ? '参考音频' : '参考图';
+    mediaType === 'video'
+      ? '参考视频'
+      : mediaType === 'audio'
+        ? '参考音频'
+        : '参考图';
   const label = reference.label || `${labelPrefix}${index + 1}`;
   const icon =
     mediaType === 'video' ? (
@@ -208,10 +218,7 @@ function VideoOptionChoice({
   return (
     <button
       type="button"
-      className={[
-        'image-canvas-editor__option-popover-choice',
-        className,
-      ]
+      className={['image-canvas-editor__option-popover-choice', className]
         .filter(Boolean)
         .join(' ')}
       aria-label={ariaLabel}
@@ -258,8 +265,9 @@ function ImageCanvasVideoGenerationComposerView({
   const resolution = dialog.videoResolution ?? '480p';
   const durationSeconds = dialog.videoDurationSeconds ?? 4;
   const currentModel =
-    EDITOR_VIDEO_MODEL_OPTIONS.find((item) => item.value === dialog.videoModel) ??
-    EDITOR_VIDEO_MODEL_OPTIONS[0];
+    EDITOR_VIDEO_MODEL_OPTIONS.find(
+      (item) => item.value === dialog.videoModel,
+    ) ?? EDITOR_VIDEO_MODEL_OPTIONS[0];
   const supportsReferences = isSeedanceVideoModel(currentModel.value);
   const price = calculateEditorVideoPrice(resolution, durationSeconds);
   const isGenerating = dialog.status === 'generating';
@@ -270,7 +278,11 @@ function ImageCanvasVideoGenerationComposerView({
 
   useImageCanvasFloatingOptionDismiss({
     isOpen: openPanel !== null || isGenerationReferenceMenuOpen,
-    boundaryRefs: [paramsButtonRef, modelButtonRef, generationReferenceButtonRef],
+    boundaryRefs: [
+      paramsButtonRef,
+      modelButtonRef,
+      generationReferenceButtonRef,
+    ],
     onDismiss: closeVideoFloatingPanels,
   });
 
@@ -344,7 +356,9 @@ function ImageCanvasVideoGenerationComposerView({
           size="sm"
           density="compact"
           className="image-canvas-editor__generation-prompt"
-          onChange={(event) => updateVideoDialog({ prompt: event.target.value })}
+          onChange={(event) =>
+            updateVideoDialog({ prompt: event.target.value })
+          }
         />
         <div className="image-canvas-editor__generation-composer-footer">
           <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
@@ -369,7 +383,10 @@ function ImageCanvasVideoGenerationComposerView({
                     className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
                     label="视频参数选项"
                     placement="top-start"
-                    style={buildPortalMenuStyle(paramsButtonRef.current, 'above')}
+                    style={buildPortalMenuStyle(
+                      paramsButtonRef.current,
+                      'above',
+                    )}
                     onPointerDown={(event) => event.stopPropagation()}
                   >
                     <div className="image-canvas-editor__option-popover-sections">
@@ -474,7 +491,10 @@ function ImageCanvasVideoGenerationComposerView({
                     className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
                     label="视频模型选项"
                     placement="top-start"
-                    style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                    style={buildPortalMenuStyle(
+                      modelButtonRef.current,
+                      'above',
+                    )}
                     onPointerDown={(event) => event.stopPropagation()}
                   >
                     <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
@@ -585,16 +605,35 @@ function ImageCanvasVideoGenerationComposerView({
 }
 
 const SOUND_TYPE_OPTIONS = [
-  { label: 'UI', value: 'ui' },
-  { label: '拟音', value: 'foley' },
-  { label: '环境', value: 'ambient' },
+  { label: '单次', value: 'one-shot' },
+  { label: '循环', value: 'loop' },
 ] as const;
+const SOUND_BPM_MIN = 1;
+const SOUND_BPM_MAX = 300;
+const SOUND_BPM_SLIDER_FALLBACK = 120;
 
-const SOUND_TEMPO_OPTIONS = [
-  { label: '慢速', value: 'slow' },
-  { label: '中速', value: 'medium' },
-  { label: '快速', value: 'fast' },
-] as const;
+function clampSoundBpm(value: number) {
+  return Math.min(
+    SOUND_BPM_MAX,
+    Math.max(SOUND_BPM_MIN, Math.round(value)),
+  );
+}
+
+function parseSoundBpmInput(value: string) {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) {
+    return null;
+  }
+  const parsedValue = Number(normalizedValue);
+  return Number.isFinite(parsedValue) ? clampSoundBpm(parsedValue) : null;
+}
+
+function formatSoundEffectOptionLabel(
+  typeLabel: string,
+  soundTempo: number | null | undefined,
+) {
+  return soundTempo ? `${typeLabel}·${soundTempo}BPM` : typeLabel;
+}
 
 function resetFailedAudioDialogStatus(dialog: GenerateDialogState) {
   return {
@@ -622,26 +661,28 @@ function ImageCanvasAudioGenerationComposerView({
   ) => CSSProperties;
   onSubmit: (dialog: GenerateDialogState) => void;
 }) {
-  const [openPanel, setOpenPanel] = useState<'type' | 'tempo' | null>(null);
-  const typeButtonRef = useRef<HTMLButtonElement | null>(null);
-  const tempoButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [isSoundOptionsOpen, setIsSoundOptionsOpen] = useState(false);
+  const soundOptionsButtonRef = useRef<HTMLButtonElement | null>(null);
   const isSoundEffect = dialog.mode === 'audio-sound-effect';
   const isGenerating = dialog.status === 'generating';
   const currentType =
     SOUND_TYPE_OPTIONS.find((option) => option.value === dialog.soundType) ??
     SOUND_TYPE_OPTIONS[0];
   const currentTempo =
-    SOUND_TEMPO_OPTIONS.find((option) => option.value === dialog.soundTempo) ??
-    SOUND_TEMPO_OPTIONS[1];
+    typeof dialog.soundTempo === 'number' ? dialog.soundTempo : null;
+  const soundOptionLabel = formatSoundEffectOptionLabel(
+    currentType.label,
+    currentTempo,
+  );
   const dialogLabel = isSoundEffect ? '生成游戏音效' : '生成游戏背景音乐';
   const cost = isSoundEffect
     ? EDITOR_GENERATION_MUD_POINT_CONFIG.soundEffect
     : EDITOR_GENERATION_MUD_POINT_CONFIG.backgroundMusic;
 
   useImageCanvasFloatingOptionDismiss({
-    isOpen: openPanel !== null,
-    boundaryRefs: [typeButtonRef, tempoButtonRef],
-    onDismiss: () => setOpenPanel(null),
+    isOpen: isSoundOptionsOpen,
+    boundaryRefs: [soundOptionsButtonRef],
+    onDismiss: () => setIsSoundOptionsOpen(false),
   });
 
   const updateAudioDialog = (patch: Partial<GenerateDialogState>) => {
@@ -655,6 +696,10 @@ function ImageCanvasAudioGenerationComposerView({
     );
   };
 
+  const updateSoundTempo = (nextTempo: number | null) => {
+    updateAudioDialog({ soundTempo: nextTempo });
+  };
+
   return (
     <form
       className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--audio"
@@ -675,7 +720,9 @@ function ImageCanvasAudioGenerationComposerView({
         value={dialog.prompt}
         disabled={isGenerating}
         placeholder={
-          isSoundEffect ? '描述需要生成的游戏音效' : '描述需要生成的游戏背景音乐'
+          isSoundEffect
+            ? '描述需要生成的游戏音效'
+            : '描述需要生成的游戏背景音乐'
         }
         size="sm"
         density="compact"
@@ -695,97 +742,77 @@ function ImageCanvasAudioGenerationComposerView({
       ) : null}
       <div className="image-canvas-editor__generation-composer-footer">
         {isSoundEffect ? (
-          <>
-            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
-              <PlatformInlineOptionButton
-                ref={typeButtonRef}
-                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-                aria-label={`type ${currentType.label}`}
-                aria-expanded={openPanel === 'type'}
-                disabled={isGenerating}
-                trailingIcon={<ChevronDown className="h-3 w-3" />}
-                onClick={() =>
-                  setOpenPanel((currentPanel) =>
-                    currentPanel === 'type' ? null : 'type',
-                  )
-                }
-              >
-                type {currentType.label}
-              </PlatformInlineOptionButton>
-              {openPanel === 'type'
-                ? renderEditorPortal(
-                    <PlatformFloatingMenu
-                      className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
-                      label="音效 type 选项"
-                      placement="top-start"
-                      style={buildPortalMenuStyle(typeButtonRef.current, 'above')}
-                    >
-                      <div className="image-canvas-editor__option-popover-items">
-                        {SOUND_TYPE_OPTIONS.map((option) => (
-                          <VideoOptionChoice
-                            key={option.value}
-                            selected={currentType.value === option.value}
-                            disabled={isGenerating}
-                            ariaLabel={`type ${option.label}`}
-                            onClick={() =>
-                              updateAudioDialog({ soundType: option.value })
-                            }
-                          >
-                            {option.label}
-                          </VideoOptionChoice>
-                        ))}
-                      </div>
-                    </PlatformFloatingMenu>,
-                  )
-                : null}
-            </div>
-            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--audio-tempo">
-              <PlatformInlineOptionButton
-                ref={tempoButtonRef}
-                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-                aria-label={`tempo ${currentTempo.label}`}
-                aria-expanded={openPanel === 'tempo'}
-                disabled={isGenerating}
-                trailingIcon={<ChevronDown className="h-3 w-3" />}
-                onClick={() =>
-                  setOpenPanel((currentPanel) =>
-                    currentPanel === 'tempo' ? null : 'tempo',
-                  )
-                }
-              >
-                tempo {currentTempo.label}
-              </PlatformInlineOptionButton>
-              {openPanel === 'tempo'
-                ? renderEditorPortal(
-                    <PlatformFloatingMenu
-                      className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
-                      label="音效 tempo 选项"
-                      placement="top-start"
-                      style={buildPortalMenuStyle(
-                        tempoButtonRef.current,
-                        'above',
-                      )}
-                    >
-                      <div className="image-canvas-editor__option-popover-items">
-                        {SOUND_TEMPO_OPTIONS.map((option) => (
-                          <VideoOptionChoice
-                            key={option.value}
-                            selected={currentTempo.value === option.value}
-                            disabled={isGenerating}
-                            ariaLabel={`tempo ${option.label}`}
-                            onClick={() =>
-                              updateAudioDialog({ soundTempo: option.value })
-                            }
-                          >
-                            {option.label}
-                          </VideoOptionChoice>
-                        ))}
-                      </div>
-                    </PlatformFloatingMenu>,
-                  )
-                : null}
-            </div>
-          </>
+          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
+            <PlatformInlineOptionButton
+              ref={soundOptionsButtonRef}
+              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+              aria-label={`音效参数 ${soundOptionLabel}`}
+              aria-expanded={isSoundOptionsOpen}
+              disabled={isGenerating}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+              onClick={() => setIsSoundOptionsOpen((isOpen) => !isOpen)}
+            >
+              {soundOptionLabel}
+            </PlatformInlineOptionButton>
+            {isSoundOptionsOpen
+              ? renderEditorPortal(
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--audio-options image-canvas-editor__portal-menu"
+                    label="音效参数选项"
+                    placement="top-start"
+                    style={buildPortalMenuStyle(
+                      soundOptionsButtonRef.current,
+                      'above',
+                    )}
+                  >
+                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__audio-type-options">
+                      {SOUND_TYPE_OPTIONS.map((option) => (
+                        <VideoOptionChoice
+                          key={option.value}
+                          selected={currentType.value === option.value}
+                          disabled={isGenerating}
+                          ariaLabel={option.label}
+                          onClick={() =>
+                            updateAudioDialog({ soundType: option.value })
+                          }
+                        >
+                          {option.label}
+                        </VideoOptionChoice>
+                      ))}
+                    </div>
+                    <div className="image-canvas-editor__audio-bpm-control">
+                      <input
+                        type="range"
+                        min={SOUND_BPM_MIN}
+                        max={SOUND_BPM_MAX}
+                        value={currentTempo ?? SOUND_BPM_SLIDER_FALLBACK}
+                        disabled={isGenerating}
+                        aria-label="BPM拖拉条"
+                        onChange={(event) =>
+                          updateSoundTempo(
+                            clampSoundBpm(Number(event.target.value)),
+                          )
+                        }
+                      />
+                      <input
+                        type="number"
+                        min={SOUND_BPM_MIN}
+                        max={SOUND_BPM_MAX}
+                        value={currentTempo ?? ''}
+                        placeholder="BPM"
+                        disabled={isGenerating}
+                        aria-label="BPM数值"
+                        onChange={(event) =>
+                          updateSoundTempo(
+                            parseSoundBpmInput(event.target.value),
+                          )
+                        }
+                      />
+                    </div>
+                  </PlatformFloatingMenu>,
+                )
+              : null}
+          </div>
         ) : null}
         <PlatformActionButton
           type="submit"
@@ -835,6 +862,9 @@ export function ImageCanvasGenerationComposerView({
   quickEditPanel,
   quickEditSourceLayer,
   quickEditPanelStyle,
+  cropExpandPanel,
+  cropExpandSourceLayer,
+  cropExpandPanelStyle,
   quickEditSizeOptions,
   quickEditModelOptions,
   characterAnimationPanel,
@@ -843,6 +873,7 @@ export function ImageCanvasGenerationComposerView({
   characterAnimationPrice,
   setGenerateDialog,
   setQuickEditPanel,
+  setCropExpandPanel,
   setCharacterAnimationPanel,
   setIsGenerationReferenceMenuOpen,
   setIsCharacterSpecMenuOpen,
@@ -859,11 +890,11 @@ export function ImageCanvasGenerationComposerView({
   onSubmitImageGeneration,
   onSubmitIconSpritesheetGeneration,
   onSubmitQuickEdit,
+  onSubmitCropExpand,
   onSubmitCharacterAnimation,
   onCloseGenerateComposer,
   onUpdateSpecFormValue,
-  onUpdateIconDescription,
-  onAddIconDescription,
+  onUpdateIconDescriptionText,
   onUpdateCharacterAnimationDuration,
   onRememberImageModel,
   onSpecMenuPointerEnter,
@@ -1041,8 +1072,7 @@ export function ImageCanvasGenerationComposerView({
           buildPortalMenuStyle={buildPortalMenuStyle}
           onOpenSpecDialog={onOpenSpecDialog}
           onRequestUpload={onRequestUpload}
-          onUpdateIconDescription={onUpdateIconDescription}
-          onAddIconDescription={onAddIconDescription}
+          onUpdateIconDescriptionText={onUpdateIconDescriptionText}
           onRememberImageModel={onRememberImageModel}
           onSubmit={onSubmitIconSpritesheetGeneration}
         />
@@ -1075,7 +1105,8 @@ export function ImageCanvasGenerationComposerView({
       ) : null}
 
       {quickEditPanel &&
-      quickEditPanel.status !== 'generating' &&
+      (quickEditPanel.mode === 'redraw' ||
+        quickEditPanel.status !== 'generating') &&
       quickEditSourceLayer &&
       quickEditPanelStyle ? (
         <ImageCanvasQuickEditPanelView
@@ -1089,6 +1120,18 @@ export function ImageCanvasGenerationComposerView({
         />
       ) : null}
 
+      {cropExpandPanel &&
+      cropExpandSourceLayer &&
+      cropExpandPanelStyle ? (
+        <ImageCanvasCropExpandPanelView
+          panel={cropExpandPanel}
+          sourceLayer={cropExpandSourceLayer}
+          style={cropExpandPanelStyle}
+          setCropExpandPanel={setCropExpandPanel}
+          onSubmit={onSubmitCropExpand}
+        />
+      ) : null}
+
       {characterAnimationPanel &&
       characterAnimationSourceLayer &&
       characterAnimationPanelStyle ? (
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 0f2a60721..eeb836c6f 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -8,28 +8,28 @@ import type {
 import {
   appendCharacterReference,
   appendGenerationReference,
-  appendIconDescriptionToDialog,
   assignCharacterSpecReference,
   assignIconSpecReference,
   assignUiDesignSpecReference,
   closeGenerateComposerDialog,
+  createBackgroundMusicGenerationDialogDraft,
   createCharacterAnimationPanelDraft,
   createCharacterGenerationDialogDraft,
   createEditDialogDraft,
   createGenerateDialogDraft,
   createIconGenerationDialogDraft,
-  createSoundEffectGenerationDialogDraft,
-  createBackgroundMusicGenerationDialogDraft,
   createQuickEditPanelDraft,
+  createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
   createVideoGenerationDialogDraft,
+  formatIconDescriptionsText,
   hideGeneratedLayerComposerAfterBlur,
+  parseIconDescriptionsText,
   updateCharacterAnimationDurationPanel,
-  updateIconDescriptionInDialog,
+  updateIconDescriptionsTextInDialog,
   updateSpecFormDialogValue,
 } from './ImageCanvasGenerationDialogModel';
-import { ICON_DESCRIPTION_LIMIT } from './ImageCanvasGenerationModel';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
@@ -120,6 +120,7 @@ describe('ImageCanvasGenerationDialogModel', () => {
       imageModel: 'unknown-model',
       aspectRatio: '1:1',
       imageSize: '1K',
+      prompt: '返回按钮\n设置按钮\n下一关按钮\n提示按钮\n原图按钮\n冻结按钮',
       iconSpecReference: null,
       iconDescriptions: [
         '返回按钮',
@@ -193,8 +194,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
         mode: 'audio-sound-effect',
         status: 'idle',
         composerOpen: true,
-        soundType: 'ui',
-        soundTempo: 'medium',
+        soundType: 'one-shot',
+        soundTempo: null,
         placeholder: {
           x: 270,
           y: 300,
@@ -234,6 +235,7 @@ describe('ImageCanvasGenerationDialogModel', () => {
       sourceLayerId: 'layer-source',
     });
     expect(createQuickEditPanelDraft(sourceLayer)).toEqual({
+      mode: 'quick-edit',
       sourceLayerId: 'layer-source',
       prompt: '',
       size: '1024x768',
@@ -303,6 +305,14 @@ describe('ImageCanvasGenerationDialogModel', () => {
 
   it('routes picked canvas references to spec, image, video, and UI design fields', () => {
     const sourceLayer = createLayer({ title: '参考图' });
+    const videoLayer = createLayer({
+      id: 'layer-video',
+      title: '动作参考',
+      src: 'https://signed.example.com/reference.mp4',
+      mediaType: 'video',
+      objectKey: 'generated-character-drafts/editor/seedance-references/video/reference.mp4',
+      assetObjectId: 'asset-object-video',
+    });
     expect(
       appendGenerationReference(
         {
@@ -331,6 +341,41 @@ describe('ImageCanvasGenerationDialogModel', () => {
     ).toMatchObject({
       generationReferences: [{ label: '参考图' }],
     });
+    expect(
+      appendGenerationReference(
+        {
+          mode: 'video',
+          prompt: '',
+          status: 'idle',
+          videoModel: 'seedance2.0-fast',
+          generationReferences: [],
+        },
+        videoLayer,
+      ),
+    ).toMatchObject({
+      generationReferences: [
+        {
+          label: '动作参考',
+          mediaType: 'video',
+          objectKey:
+            'generated-character-drafts/editor/seedance-references/video/reference.mp4',
+          assetObjectId: 'asset-object-video',
+        },
+      ],
+    });
+    const imageDialog: GenerateDialogState = {
+      mode: 'generate',
+      prompt: '',
+      status: 'idle',
+      generationReferences: [],
+    };
+    expect(appendGenerationReference(imageDialog, videoLayer)).toBe(imageDialog);
+    const specDialog: GenerateDialogState = {
+      mode: 'spec',
+      prompt: '',
+      status: 'idle',
+    };
+    expect(appendGenerationReference(specDialog, videoLayer)).toBe(specDialog);
 
     const uiDialog: GenerateDialogState = {
       mode: 'ui-design',
@@ -351,6 +396,57 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('limits Seedance canvas-picked references by media type', () => {
+    const videoDialog: GenerateDialogState = {
+      mode: 'video',
+      prompt: '',
+      status: 'idle',
+      videoModel: 'seedance2.0',
+      generationReferences: Array.from({ length: 3 }, (_, index) => ({
+        id: `video-${index}`,
+        label: `视频${index + 1}`,
+        src: `generated-character-drafts/video-${index}.mp4`,
+        mediaType: 'video',
+      })),
+    };
+
+    expect(
+      appendGenerationReference(
+        videoDialog,
+        createLayer({
+          id: 'video-extra',
+          title: '额外视频',
+          mediaType: 'video',
+          src: 'generated-character-drafts/video-extra.mp4',
+        }),
+      ),
+    ).toMatchObject({
+      generationReferences: [
+        { label: '视频1' },
+        { label: '视频2' },
+        { label: '视频3' },
+      ],
+    });
+    expect(
+      appendGenerationReference(
+        videoDialog,
+        createLayer({
+          id: 'audio-first',
+          title: '旁白',
+          mediaType: 'audio',
+          src: 'generated-character-drafts/audio.mp3',
+        }),
+      ),
+    ).toMatchObject({
+      generationReferences: [
+        { label: '视频1' },
+        { label: '视频2' },
+        { label: '视频3' },
+        { label: '旁白', mediaType: 'audio' },
+      ],
+    });
+  });
+
   it('updates failed spec and icon dialog fields back to idle state', () => {
     const specDialog: GenerateDialogState = {
       mode: 'spec',
@@ -387,31 +483,22 @@ describe('ImageCanvasGenerationDialogModel', () => {
       errorMessage: '描述错误',
       iconDescriptions: ['旧描述'],
     };
-    expect(updateIconDescriptionInDialog(iconDialog, 0, '新描述')).toEqual(
+    expect(updateIconDescriptionsTextInDialog(iconDialog, '剑\n盾、药水')).toEqual(
       expect.objectContaining({
         status: 'idle',
         errorMessage: undefined,
-        iconDescriptions: ['新描述'],
-      }),
-    );
-    expect(appendIconDescriptionToDialog(iconDialog)).toEqual(
-      expect.objectContaining({
-        iconDescriptions: ['旧描述', ''],
-      }),
-    );
-    expect(
-      appendIconDescriptionToDialog({
-        ...iconDialog,
-        iconDescriptions: Array.from(
-          { length: ICON_DESCRIPTION_LIMIT },
-          (_, index) => `图标${index}`,
-        ),
-      }),
-    ).toEqual(
-      expect.objectContaining({
-        iconDescriptions: expect.arrayContaining(['图标0']),
+        prompt: '剑\n盾、药水',
+        iconDescriptions: ['剑', '盾', '药水'],
       }),
     );
+    expect(parseIconDescriptionsText('剑，盾\n药水/宝箱|钥匙')).toEqual([
+      '剑',
+      '盾',
+      '药水',
+      '宝箱',
+      '钥匙',
+    ]);
+    expect(formatIconDescriptionsText(['剑', '盾'])).toBe('剑\n盾');
   });
 
   it('updates character animation duration and composer visibility', () => {
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 6f02cd7a5..194ccc54f 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -10,9 +10,9 @@ import type {
   SpecGenerationType,
 } from './ImageCanvasEditorTypes';
 import {
-  CHARACTER_ANIMATION_DURATION_OPTIONS,
   AUDIO_FRAME_DISPLAY_SIZE,
   AUDIO_FRAME_ORIGINAL_SIZE,
+  CHARACTER_ANIMATION_DURATION_OPTIONS,
   CHARACTER_FRAME_DISPLAY_SIZE,
   CHARACTER_FRAME_ORIGINAL_SIZE,
   createCanvasLayerReference,
@@ -21,7 +21,6 @@ import {
   DEFAULT_SPEC_FORM_VALUES,
   DEFAULT_VIDEO_MODEL,
   EDITOR_IMAGE_DIMENSION_OPTIONS,
-  EDITOR_VIDEO_MODEL_OPTIONS,
   ICON_DESCRIPTION_LIMIT,
   ICON_FRAME_DISPLAY_SIZE,
   ICON_FRAME_ORIGINAL_SIZE,
@@ -34,6 +33,11 @@ import {
 } from './ImageCanvasGenerationModel';
 
 type CanvasSize = { width: number; height: number };
+const VIDEO_REFERENCE_LIMITS = {
+  image: 9,
+  video: 3,
+  audio: 3,
+} as const;
 
 function getViewportWorldCenter({
   canvasSize,
@@ -57,11 +61,43 @@ function resetFailedGenerationDialog(dialog: GenerateDialogState) {
   };
 }
 
+export function parseIconDescriptionsText(text: string): string[] {
+  return text
+    .split(/[\r\n,，、;；/|]+/u)
+    .map((description) => description.trim())
+    .filter(Boolean)
+    .slice(0, ICON_DESCRIPTION_LIMIT);
+}
+
+export function formatIconDescriptionsText(descriptions: string[]): string {
+  return descriptions.join('\n');
+}
+
 function isSeedanceVideoModel(model: string | undefined) {
   const resolvedModel = model ?? DEFAULT_VIDEO_MODEL;
   return resolvedModel === 'seedance2.0' || resolvedModel === 'seedance2.0-fast';
 }
 
+function getReferenceMediaType(layer: CanvasLayer) {
+  return layer.mediaType === 'video' || layer.mediaType === 'audio'
+    ? layer.mediaType
+    : 'image';
+}
+
+function appendLimitedSeedanceCanvasReference(
+  references: NonNullable<GenerateDialogState['generationReferences']>,
+  layer: CanvasLayer,
+) {
+  const mediaType = getReferenceMediaType(layer);
+  const currentCount = references.filter(
+    (reference) => (reference.mediaType ?? 'image') === mediaType,
+  ).length;
+  if (currentCount >= VIDEO_REFERENCE_LIMITS[mediaType]) {
+    return references;
+  }
+  return [...references, createCanvasLayerReference(layer)];
+}
+
 function resolveImageDimensionDefaults(imageModel: string) {
   const dimensionOptions =
     EDITOR_IMAGE_DIMENSION_OPTIONS[
@@ -178,7 +214,7 @@ export function createIconGenerationDialogDraft({
   const dimensionDefaults = resolveImageDimensionDefaults(imageModel);
   return {
     mode: 'icon',
-    prompt: '',
+    prompt: formatIconDescriptionsText(DEFAULT_ICON_DESCRIPTIONS),
     status: 'idle',
     composerOpen: true,
     iconSpecReference: null,
@@ -241,8 +277,8 @@ export function createSoundEffectGenerationDialogDraft({
     prompt: '',
     status: 'idle',
     composerOpen: true,
-    soundType: 'ui',
-    soundTempo: 'medium',
+    soundType: 'one-shot',
+    soundTempo: null,
     placeholder: {
       x: worldCenter.x - AUDIO_FRAME_DISPLAY_SIZE.width / 2,
       y: worldCenter.y - AUDIO_FRAME_DISPLAY_SIZE.height / 2,
@@ -328,6 +364,7 @@ export function createQuickEditPanelDraft(
   sourceLayer: CanvasLayer,
 ): QuickEditPanelState {
   return {
+    mode: 'quick-edit',
     sourceLayerId: sourceLayer.id,
     prompt: '',
     size: formatImageSizeValue(
@@ -339,6 +376,19 @@ export function createQuickEditPanelDraft(
   };
 }
 
+export function createRedrawPanelDraft(
+  sourceLayer: CanvasLayer,
+): QuickEditPanelState {
+  return {
+    ...createQuickEditPanelDraft(sourceLayer),
+    mode: 'redraw',
+    prompt:
+      sourceLayer.prompt?.trim() ||
+      sourceLayer.generationInputs?.fields[0]?.value?.trim() ||
+      '',
+  };
+}
+
 export function createCharacterAnimationPanelDraft(
   layer: CanvasLayer,
 ): CharacterAnimationPanelState | null {
@@ -360,7 +410,7 @@ export function assignCharacterSpecReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
 ): GenerateDialogState | null {
-  return dialog?.mode === 'character'
+  return dialog?.mode === 'character' && getReferenceMediaType(layer) === 'image'
     ? {
         ...resetFailedGenerationDialog(dialog),
         characterSpecReference: createCanvasLayerReference(layer),
@@ -373,7 +423,7 @@ export function appendCharacterReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
 ): GenerateDialogState | null {
-  return dialog?.mode === 'character'
+  return dialog?.mode === 'character' && getReferenceMediaType(layer) === 'image'
     ? {
         ...resetFailedGenerationDialog(dialog),
         characterReferences: [
@@ -390,6 +440,9 @@ export function appendGenerationReference(
   layer: CanvasLayer,
 ): GenerateDialogState | null {
   if (dialog?.mode === 'spec') {
+    if (getReferenceMediaType(layer) !== 'image') {
+      return dialog;
+    }
     return {
       ...resetFailedGenerationDialog(dialog),
       specReference: createCanvasLayerReference(layer),
@@ -399,13 +452,26 @@ export function appendGenerationReference(
   if (dialog?.mode === 'video' && !isSeedanceVideoModel(dialog.videoModel)) {
     return dialog;
   }
-  return dialog?.mode === 'generate' || dialog?.mode === 'video'
+  if (dialog?.mode === 'generate') {
+    if (getReferenceMediaType(layer) !== 'image') {
+      return dialog;
+    }
+    return {
+      ...resetFailedGenerationDialog(dialog),
+      generationReferences: [
+        ...(dialog.generationReferences ?? []),
+        createCanvasLayerReference(layer),
+      ],
+      composerOpen: true,
+    };
+  }
+  return dialog?.mode === 'video'
     ? {
         ...resetFailedGenerationDialog(dialog),
-        generationReferences: [
-          ...(dialog.generationReferences ?? []),
-          createCanvasLayerReference(layer),
-        ],
+        generationReferences: appendLimitedSeedanceCanvasReference(
+          dialog.generationReferences ?? [],
+          layer,
+        ),
         composerOpen: true,
       }
     : dialog;
@@ -462,39 +528,19 @@ export function updateSpecFormDialogValue(
   };
 }
 
-export function updateIconDescriptionInDialog(
+export function updateIconDescriptionsTextInDialog(
   dialog: GenerateDialogState | null,
-  index: number,
   value: string,
 ): GenerateDialogState | null {
   return dialog?.mode === 'icon'
     ? {
         ...resetFailedGenerationDialog(dialog),
-        iconDescriptions: (
-          dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS
-        ).map((description, descriptionIndex) =>
-          descriptionIndex === index ? value : description,
-        ),
+        prompt: value,
+        iconDescriptions: parseIconDescriptionsText(value),
       }
     : dialog;
 }
 
-export function appendIconDescriptionToDialog(
-  dialog: GenerateDialogState | null,
-): GenerateDialogState | null {
-  if (dialog?.mode !== 'icon') {
-    return dialog;
-  }
-  const descriptions = dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS;
-  if (descriptions.length >= ICON_DESCRIPTION_LIMIT) {
-    return dialog;
-  }
-  return {
-    ...resetFailedGenerationDialog(dialog),
-    iconDescriptions: [...descriptions, ''],
-  };
-}
-
 export function updateCharacterAnimationDurationPanel(
   panel: CharacterAnimationPanelState | null,
   frameCountValue: string,
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index b5cec31a0..572f0abde 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -157,6 +157,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
         model: 'gpt-image-2',
         provider: 'VectorEngine',
         taskId: 'task-icons',
+        priceMudPoints: 12,
       },
       iconResults: [
         {
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 473051f97..dc0c6538d 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -1,18 +1,18 @@
 import type {
+  EditorAudioGenerationResult,
   EditorIconSpritesheetGenerationResult,
   EditorIconSpritesheetIconResult,
   EditorImageGenerationResult,
-  EditorAudioGenerationResult,
   EditorVideoGenerationResult,
 } from '../../services/image-editor/editorProjectClient';
 import { resolveLayerResolutionSize } from './ImageCanvasEditorModel';
-import { ICON_FRAME_DISPLAY_SIZE } from './ImageCanvasGenerationModel';
 import type {
   CanvasGenerationInputs,
   CanvasLayer,
   CanvasViewport,
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
+import { ICON_FRAME_DISPLAY_SIZE } from './ImageCanvasGenerationModel';
 
 type CanvasSize = { width: number; height: number };
 
@@ -33,6 +33,7 @@ type QuickEditResultLayerOptions = {
   generatedIndex: number;
   sourceLayer: CanvasLayer;
   generationInputs: CanvasGenerationInputs;
+  mode?: 'quick-edit' | 'redraw';
 };
 
 type IconSpritesheetResultLayerOptions = {
@@ -160,6 +161,7 @@ export function createQuickEditResultLayer({
   generatedIndex,
   sourceLayer,
   generationInputs,
+  mode = 'quick-edit',
 }: QuickEditResultLayerOptions): CanvasLayer {
   const originalWidth = generated.width || sourceLayer.originalWidth || 1024;
   const originalHeight = generated.height || sourceLayer.originalHeight || 1024;
@@ -176,7 +178,7 @@ export function createQuickEditResultLayer({
     {
       id: `layer-quick-edit-${generatedIndex}`,
       resourceId: `local-resource-quick-edit-${generatedIndex}`,
-      title: `${sourceLayer.title} 快速编辑`,
+      title: `${sourceLayer.title} ${mode === 'redraw' ? '重绘' : '快速编辑'}`,
       src: generated.imageSrc,
       x: sourceLayer.x + sourceLayer.width + 32,
       y: sourceLayer.y,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index b6c565ad4..b7cdea0cc 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -1,24 +1,25 @@
 import { describe, expect, it } from 'vitest';
 
 import { ApiClientError } from '../../services/apiClient';
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+} from './ImageCanvasEditorTypes';
 import {
-  DEFAULT_IMAGE_MODEL,
   buildCharacterGenerationInputs,
   buildEditGenerationInputs,
   buildIconGenerationInputs,
   buildImageGenerationInputs,
   buildQuickEditModelOptions,
+  buildSoundEffectGenerationInputs,
   buildSpecGenerationInputs,
   buildSpecPrompt,
+  DEFAULT_IMAGE_MODEL,
   getGenerationFrameAriaLabel,
   getGenerationFrameLabel,
   resolveCharacterAnimationSourceImageSrc,
   resolveImageGenerationErrorMessage,
 } from './ImageCanvasGenerationModel';
-import type {
-  CanvasGenerationDialogState,
-  CanvasLayer,
-} from './ImageCanvasEditorTypes';
 
 describe('ImageCanvasGenerationModel', () => {
   it('builds user-facing generation input snapshots instead of backend prompts', () => {
@@ -71,8 +72,7 @@ describe('ImageCanvasGenerationModel', () => {
       }),
     ).toEqual({
       fields: [
-        { title: '素材描述 1', value: '返回按钮' },
-        { title: '素材描述 2', value: '设置按钮' },
+        { title: '素材描述', value: '返回按钮\n设置按钮' },
       ],
       references: [
         { title: '图标素材规范', label: '图标规范', src: '/icon-spec.png' },
@@ -166,6 +166,15 @@ describe('ImageCanvasGenerationModel', () => {
 
     expect(getGenerationFrameAriaLabel(iconDialog)).toBe('图标素材生成占位图');
     expect(getGenerationFrameLabel(iconDialog)).toBe('Icon Generator');
+    expect(
+      buildSoundEffectGenerationInputs('金币掉落叮当声', 'one-shot', null),
+    ).toEqual({
+      fields: [
+        { title: 'sound', value: '金币掉落叮当声' },
+        { title: 'type', value: 'one-shot' },
+      ],
+      references: [],
+    });
     expect(
       resolveImageGenerationErrorMessage(
         new ApiClientError({
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 6cfae7d29..6d23b01e8 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -3,6 +3,7 @@ import type {
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
 } from '../../services/image-editor/editorProjectClient';
+import { isGeneratedLayer } from './ImageCanvasEditorModel';
 import type {
   CanvasGenerationDialogState,
   CanvasGenerationInputField,
@@ -13,7 +14,6 @@ import type {
   SpecFormValues,
   SpecGenerationType,
 } from './ImageCanvasEditorTypes';
-import { isGeneratedLayer } from './ImageCanvasEditorModel';
 
 // 中文注释：与 api-server/src/editor_generation_config.rs 保持同名语义，当前作为前端展示兜底。
 export const EDITOR_GENERATION_MUD_POINT_CONFIG = {
@@ -50,10 +50,6 @@ export const SPEC_GENERATION_MODEL = IMAGE_MODEL_GPT_IMAGE_2;
 export const SPEC_GENERATION_ASPECT_RATIO = '16:9';
 export const SPEC_GENERATION_IMAGE_SIZE = '2K';
 export const ICON_DESCRIPTION_LIMIT = 100;
-// 图标素材面板按描述项扩宽，避免在画布子面板里做滑动列表。
-export const ICON_DESCRIPTION_CARD_WIDTH_REM = 8.4;
-export const ICON_COMPOSER_MIN_WIDTH_REM = 28;
-export const ICON_COMPOSER_HORIZONTAL_CHROME_REM = 2.4;
 export const DEFAULT_ICON_DESCRIPTIONS = [
   '返回按钮',
   '设置按钮',
@@ -405,13 +401,15 @@ export function buildVideoGenerationInputs(
 export function buildSoundEffectGenerationInputs(
   sound: string,
   soundType: string,
-  tempo: string,
+  tempo: number | null | undefined,
 ): CanvasGenerationInputs {
   return {
     fields: [
       ...createGenerationInputField('sound', sound),
       ...createGenerationInputField('type', soundType),
-      ...createGenerationInputField('tempo', tempo),
+      ...(tempo
+        ? createGenerationInputField('tempo', `${tempo}BPM`)
+        : []),
     ],
     references: [],
   };
@@ -509,10 +507,12 @@ export function buildIconGenerationInputs(
   specReference: CharacterReferenceImage,
 ): CanvasGenerationInputs {
   return {
-    fields: iconDescriptions.map((description, index) => ({
-      title: `素材描述 ${index + 1}`,
-      value: description,
-    })),
+    fields: [
+      {
+        title: '素材描述',
+        value: iconDescriptions.join('\n'),
+      },
+    ],
     references: [
       {
         title: '图标素材规范',
@@ -524,7 +524,7 @@ export function buildIconGenerationInputs(
 }
 
 export function buildEditGenerationInputs(
-  title: '修改要求' | '快速编辑提示词',
+  title: '修改要求' | '快速编辑提示词' | '重绘提示词',
   prompt: string,
   sourceLayer: CanvasLayer,
 ): CanvasGenerationInputs {
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index 33ec4d040..2aee4df21 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -257,7 +257,7 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
   it('builds icon spritesheet plans with trimmed descriptions and references', () => {
     const plan = buildIconSpritesheetGenerationSubmissionPlan({
       mode: 'icon',
-      prompt: '',
+      prompt: '  返回按钮  \n\n设置按钮',
       status: 'idle',
       imageModel: 'gpt-image-2',
       aspectRatio: '3:2',
@@ -267,7 +267,7 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         label: '图标规范',
         src: 'data:image/png;base64,spec',
       },
-      iconDescriptions: ['  返回按钮  ', '', '设置按钮'],
+      iconDescriptions: ['旧返回', '旧设置'],
     });
 
     expect(plan).toEqual({
@@ -279,12 +279,10 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         model: 'gpt-image-2',
         aspectRatio: '3:2',
         imageSize: '2K',
+        priceMudPoints: 12,
       },
       generationInputs: {
-        fields: [
-          { title: '素材描述 1', value: '返回按钮' },
-          { title: '素材描述 2', value: '设置按钮' },
-        ],
+        fields: [{ title: '素材描述', value: '返回按钮\n设置按钮' }],
         references: [
           {
             title: '图标素材规范',
@@ -545,8 +543,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         mode: 'audio-sound-effect',
         prompt: '  金币掉落叮当声  ',
         status: 'idle',
-        soundType: 'ui',
-        soundTempo: 'fast',
+        soundType: 'loop',
+        soundTempo: 120,
       },
       layers: [],
       nextGeneratedIndex: 4,
@@ -558,8 +556,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
       normalizedPrompt: '金币掉落叮当声',
       input: {
         sound: '金币掉落叮当声',
-        type: 'ui',
-        tempo: 'fast',
+        type: 'loop',
+        tempo: 120,
         priceMudPoints: 10,
       },
       result: {
@@ -567,8 +565,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         generationInputs: {
           fields: [
             { title: 'sound', value: '金币掉落叮当声' },
-            { title: 'type', value: 'ui' },
-            { title: 'tempo', value: 'fast' },
+            { title: 'type', value: 'loop' },
+            { title: 'tempo', value: '120BPM' },
           ],
           references: [],
         },
@@ -576,6 +574,38 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
     });
   });
 
+  it('keeps game sound effect BPM unset as null by default', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'audio-sound-effect',
+        prompt: '按钮确认短促音',
+        status: 'idle',
+        soundType: 'one-shot',
+        soundTempo: null,
+      },
+      layers: [],
+      nextGeneratedIndex: 6,
+    });
+
+    expect(plan).toMatchObject({
+      kind: 'audio',
+      audioKind: 'sound-effect',
+      input: {
+        sound: '按钮确认短促音',
+        type: 'one-shot',
+        tempo: null,
+      },
+      result: {
+        generationInputs: {
+          fields: [
+            { title: 'sound', value: '按钮确认短促音' },
+            { title: 'type', value: 'one-shot' },
+          ],
+        },
+      },
+    });
+  });
+
   it('builds game background music audio submission plans with instrumental fixed to true', () => {
     const plan = buildImageGenerationSubmissionPlan({
       dialog: {
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 8fb68839b..23b357938 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -1,6 +1,6 @@
 import type {
-  EditorCharacterAnimationGenerationInput,
   EditorBackgroundMusicGenerationInput,
+  EditorCharacterAnimationGenerationInput,
   EditorIconSpritesheetGenerationInput,
   EditorImageGenerationInput,
   EditorSoundEffectGenerationInput,
@@ -13,22 +13,10 @@ import type {
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
 import {
-  CHARACTER_ANIMATION_MODEL,
-  DEFAULT_IMAGE_MODEL,
-  DEFAULT_ICON_DESCRIPTIONS,
-  DEFAULT_SPEC_FORM_VALUES,
-  DEFAULT_VIDEO_MODEL,
-  EDITOR_GENERATION_MUD_POINT_CONFIG,
-  SEEDANCE_VIDEO_REFERENCE_LIMITS,
-  SPEC_GENERATION_ASPECT_RATIO,
-  SPEC_GENERATION_IMAGE_SIZE,
-  SPEC_GENERATION_MODEL,
-  SPEC_GENERATION_SIZE,
-  SPEC_TYPE_LABEL,
-  buildIconGenerationInputs,
   buildBackgroundMusicGenerationInputs,
   buildCharacterGenerationInputs,
   buildEditGenerationInputs,
+  buildIconGenerationInputs,
   buildImageGenerationInputs,
   buildSoundEffectGenerationInputs,
   buildSpecGenerationInputs,
@@ -37,7 +25,20 @@ import {
   buildVideoGenerationInputs,
   calculateCharacterAnimationPrice,
   calculateEditorVideoPrice,
+  CHARACTER_ANIMATION_MODEL,
+  DEFAULT_ICON_DESCRIPTIONS,
+  DEFAULT_IMAGE_MODEL,
+  DEFAULT_SPEC_FORM_VALUES,
+  DEFAULT_VIDEO_MODEL,
+  EDITOR_GENERATION_MUD_POINT_CONFIG,
+  ICON_DESCRIPTION_LIMIT,
   resolveCharacterAnimationSourceImageSrc,
+  SEEDANCE_VIDEO_REFERENCE_LIMITS,
+  SPEC_GENERATION_ASPECT_RATIO,
+  SPEC_GENERATION_IMAGE_SIZE,
+  SPEC_GENERATION_MODEL,
+  SPEC_GENERATION_SIZE,
+  SPEC_TYPE_LABEL,
 } from './ImageCanvasGenerationModel';
 
 type ImageGenerationSubmissionOptions = {
@@ -338,8 +339,8 @@ export function buildImageGenerationSubmissionPlan({
   }
 
   if (dialog.mode === 'audio-sound-effect') {
-    const soundType = dialog.soundType ?? 'ui';
-    const soundTempo = dialog.soundTempo ?? 'medium';
+    const soundType = dialog.soundType ?? 'one-shot';
+    const soundTempo = dialog.soundTempo ?? null;
     return {
       kind: 'audio',
       audioKind: 'sound-effect',
@@ -408,9 +409,13 @@ export function buildImageGenerationSubmissionPlan({
 export function buildIconSpritesheetGenerationSubmissionPlan(
   dialog: GenerateDialogState,
 ): IconSpritesheetGenerationSubmissionPlan {
-  const iconDescriptions = (dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS)
+  const iconDescriptions = (dialog.prompt.trim()
+    ? dialog.prompt.split(/[\r\n,，、;；/|]+/u)
+    : (dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS)
+  )
     .map((description) => description.trim())
-    .filter(Boolean);
+    .filter(Boolean)
+    .slice(0, ICON_DESCRIPTION_LIMIT);
 
   if (!dialog.iconSpecReference) {
     return {
@@ -436,6 +441,7 @@ export function buildIconSpritesheetGenerationSubmissionPlan(
       model: rememberImageModel,
       aspectRatio: dialog.aspectRatio ?? '1:1',
       imageSize: dialog.imageSize ?? '1K',
+      priceMudPoints: EDITOR_GENERATION_MUD_POINT_CONFIG.icon,
     },
     generationInputs: buildIconGenerationInputs(
       iconDescriptions,
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index e561d550d..14de80d91 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -30,8 +30,7 @@ function IconComposerHarness({
   initialMenuOpen = false,
   onOpenSpecDialog = vi.fn(),
   onRequestUpload = vi.fn(),
-  onUpdateIconDescription = vi.fn(),
-  onAddIconDescription = vi.fn(),
+  onUpdateIconDescriptionText = vi.fn(),
   onRememberImageModel = vi.fn(),
   onSubmit = vi.fn(),
 }: {
@@ -39,8 +38,7 @@ function IconComposerHarness({
   initialMenuOpen?: boolean;
   onOpenSpecDialog?: (specType: 'character' | 'ui' | 'icon' | 'custom') => void;
   onRequestUpload?: (target: UploadTarget) => void;
-  onUpdateIconDescription?: (index: number, value: string) => void;
-  onAddIconDescription?: () => void;
+  onUpdateIconDescriptionText?: (value: string) => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit?: (dialog: GenerateDialogState) => void;
 }) {
@@ -65,8 +63,7 @@ function IconComposerHarness({
         buildPortalMenuStyle={() => ({ position: 'fixed', left: 0, top: 0 })}
         onOpenSpecDialog={onOpenSpecDialog}
         onRequestUpload={onRequestUpload}
-        onUpdateIconDescription={onUpdateIconDescription}
-        onAddIconDescription={onAddIconDescription}
+        onUpdateIconDescriptionText={onUpdateIconDescriptionText}
         onRememberImageModel={onRememberImageModel}
         onSubmit={onSubmit}
       />
@@ -145,28 +142,24 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
     expect(screen.queryByRole('button', { name: '图标规范A' })).toBeNull();
   });
 
-  it('updates descriptions, adds more descriptions and submits', () => {
-    const updateIconDescription = vi.fn();
-    const addIconDescription = vi.fn();
+  it('updates multi-line descriptions and submits', () => {
+    const updateIconDescriptionText = vi.fn();
     const submitIconGeneration = vi.fn();
-    const dialog = createIconDialog();
+    const dialog = createIconDialog({ prompt: '剑\n盾' });
     render(
       <IconComposerHarness
         initialDialog={dialog}
-        onUpdateIconDescription={updateIconDescription}
-        onAddIconDescription={addIconDescription}
+        onUpdateIconDescriptionText={updateIconDescriptionText}
         onSubmit={submitIconGeneration}
       />,
     );
 
-    fireEvent.change(screen.getByLabelText('素材描述1'), {
-      target: { value: '魔法剑' },
+    fireEvent.change(screen.getByLabelText('素材描述'), {
+      target: { value: '魔法剑\n圆盾' },
     });
-    fireEvent.click(screen.getByRole('button', { name: '添加素材描述' }));
     fireEvent.click(screen.getByRole('button', { name: '生成' }));
 
-    expect(updateIconDescription).toHaveBeenCalledWith(0, '魔法剑');
-    expect(addIconDescription).toHaveBeenCalledTimes(1);
+    expect(updateIconDescriptionText).toHaveBeenCalledWith('魔法剑\n圆盾');
     expect(submitIconGeneration).toHaveBeenCalledWith(dialog);
   });
 
@@ -197,23 +190,19 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
 
   it('disables generation controls and renders failure state', () => {
     const submitIconGeneration = vi.fn();
-    const addIconDescription = vi.fn();
     const { rerender } = render(
       <IconComposerHarness
         initialDialog={createIconDialog({ status: 'generating' })}
-        onAddIconDescription={addIconDescription}
         onSubmit={submitIconGeneration}
       />,
     );
 
     fireEvent.click(screen.getByRole('button', { name: '生成' }));
-    fireEvent.click(screen.getByRole('button', { name: '添加素材描述' }));
 
-    expect((screen.getByLabelText('素材描述1') as HTMLInputElement).disabled).toBe(
+    expect((screen.getByLabelText('素材描述') as HTMLInputElement).disabled).toBe(
       true,
     );
     expect(submitIconGeneration).not.toHaveBeenCalled();
-    expect(addIconDescription).not.toHaveBeenCalled();
 
     rerender(
       <IconComposerHarness
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
index 5b0918b53..1503c5cea 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
@@ -7,7 +7,6 @@ import {
   type SetStateAction,
 } from 'react';
 
-import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
@@ -20,12 +19,11 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
-import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import {
   DEFAULT_ICON_DESCRIPTIONS,
   EDITOR_GENERATION_MUD_POINT_CONFIG,
-  ICON_DESCRIPTION_LIMIT,
 } from './ImageCanvasGenerationModel';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasIconSpritesheetComposerViewProps = {
@@ -43,8 +41,7 @@ type ImageCanvasIconSpritesheetComposerViewProps = {
   ) => CSSProperties;
   onOpenSpecDialog: (specType: SpecGenerationType) => void;
   onRequestUpload: (target: UploadTarget) => void;
-  onUpdateIconDescription: (index: number, value: string) => void;
-  onAddIconDescription: () => void;
+  onUpdateIconDescriptionText: (value: string) => void;
   onRememberImageModel: (model: string) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
 };
@@ -61,12 +58,13 @@ export function ImageCanvasIconSpritesheetComposerView({
   buildPortalMenuStyle,
   onOpenSpecDialog,
   onRequestUpload,
-  onUpdateIconDescription,
-  onAddIconDescription,
+  onUpdateIconDescriptionText,
   onRememberImageModel,
   onSubmit,
 }: ImageCanvasIconSpritesheetComposerViewProps) {
-  const descriptions = dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS;
+  const descriptionText =
+    dialog.prompt ||
+    (dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS).join('\n');
   useImageCanvasFloatingOptionDismiss({
     isOpen: isIconSpecMenuOpen,
     boundaryRefs: [iconSpecButtonRef],
@@ -98,7 +96,7 @@ export function ImageCanvasIconSpritesheetComposerView({
       onSubmit={(event) => {
         event.preventDefault();
         if (dialog.status !== 'generating') {
-          onSubmit(dialog);
+          onSubmit({ ...dialog, prompt: descriptionText });
         }
       }}
     >
@@ -138,70 +136,52 @@ export function ImageCanvasIconSpritesheetComposerView({
           }
           removeLabel="删除图标素材规范"
         />
-          {isIconSpecMenuOpen
-            ? renderEditorPortal(
-                <PlatformFloatingMenu
-                  className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
-                  label="图标素材规范来源"
-                  placement="top-start"
-                  style={buildPortalMenuStyle(iconSpecButtonRef.current, 'above')}
+        {isIconSpecMenuOpen
+          ? renderEditorPortal(
+              <PlatformFloatingMenu
+                className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
+                label="图标素材规范来源"
+                placement="top-start"
+                style={buildPortalMenuStyle(
+                  iconSpecButtonRef.current,
+                  'above',
+                )}
+              >
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__context-menu-item"
+                  onClick={pickIconSpecFromCanvas}
                 >
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__context-menu-item"
-                    onClick={pickIconSpecFromCanvas}
-                  >
-                    从画布中选择
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__context-menu-item"
-                    onClick={openIconSpecDialog}
-                  >
-                    新建图标素材规范
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__context-menu-item"
-                    onClick={requestIconSpecUpload}
-                  >
-                    上传图片
-                  </PlatformFloatingMenuItem>
-                </PlatformFloatingMenu>,
-              )
-            : null}
-      </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">
-          {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={dialog.status === 'generating'}
-                size="sm"
-                density="compact"
-                className="image-canvas-editor__icon-description-input"
-                onChange={(event) =>
-                  onUpdateIconDescription(index, event.target.value)
-                }
-              />
-            </label>
-          ))}
-        </div>
+                  从画布中选择
+                </PlatformFloatingMenuItem>
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__context-menu-item"
+                  onClick={openIconSpecDialog}
+                >
+                  新建图标素材规范
+                </PlatformFloatingMenuItem>
+                <PlatformFloatingMenuItem
+                  className="image-canvas-editor__context-menu-item"
+                  onClick={requestIconSpecUpload}
+                >
+                  上传图片
+                </PlatformFloatingMenuItem>
+              </PlatformFloatingMenu>,
+            )
+          : null}
       </div>
+      <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
+        <PlatformTextField
+          variant="textarea"
+          aria-label="素材描述"
+          value={descriptionText}
+          disabled={dialog.status === 'generating'}
+          placeholder="描述要生成的多个素材，每行一个。"
+          size="sm"
+          density="compact"
+          className="image-canvas-editor__generation-prompt image-canvas-editor__generation-prompt--borderless"
+          onChange={(event) => onUpdateIconDescriptionText(event.target.value)}
+        />
+      </label>
       {dialog.status === 'failed' ? (
         <PlatformStatusMessage
           tone="error"
@@ -213,19 +193,6 @@ export function ImageCanvasIconSpritesheetComposerView({
           {dialog.errorMessage}
         </PlatformStatusMessage>
       ) : null}
-      <div className="image-canvas-editor__icon-footer">
-        <button
-          type="button"
-          className="image-canvas-editor__character-reference-add"
-          disabled={
-            dialog.status === 'generating' ||
-            descriptions.length >= ICON_DESCRIPTION_LIMIT
-          }
-          onClick={onAddIconDescription}
-        >
-          添加素材描述
-        </button>
-      </div>
       <div className="image-canvas-editor__generation-composer-footer">
         <ImageCanvasGenerationImageOptionsView
           dialog={dialog}
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.test.ts b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
index de6bb1672..385ddd89f 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.test.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
@@ -92,24 +92,21 @@ describe('ImageCanvasOverlayModel', () => {
     ).toBeNull();
   });
 
-  it('expands icon composer width by description count', () => {
+  it('keeps icon composer aligned to the base generation composer width', () => {
     expect(
       resolveIconComposerStyle({
         dialog: createDialog({ mode: 'icon' }),
         composerStyle: { left: 100, top: 200 },
-        iconDescriptionCount: 6,
       }),
     ).toEqual({
       left: 100,
       top: 200,
-      width: '52.8rem',
     });
 
     expect(
       resolveIconComposerStyle({
         dialog: createDialog({ mode: 'generate' }),
         composerStyle: { left: 100, top: 200 },
-        iconDescriptionCount: 6,
       }),
     ).toBeNull();
   });
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.ts b/src/components/image-editor/ImageCanvasOverlayModel.ts
index 5ef8e07ac..22cc5d476 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.ts
@@ -1,18 +1,14 @@
 import {
-  TOOLBAR_HALF_WIDTH,
   clamp,
+  TOOLBAR_HALF_WIDTH,
 } from './ImageCanvasEditorModel';
-import {
-  ICON_COMPOSER_HORIZONTAL_CHROME_REM,
-  ICON_COMPOSER_MIN_WIDTH_REM,
-  ICON_DESCRIPTION_CARD_WIDTH_REM,
-} from './ImageCanvasGenerationModel';
 import type {
   CanvasGenerationDialogMode,
   CanvasGenerationDialogState,
   CanvasLayer,
   CanvasViewport,
   CharacterAnimationPanelState,
+  CropExpandPanelState,
   GenerateDialogState,
   QuickEditPanelState,
 } from './ImageCanvasEditorTypes';
@@ -72,23 +68,14 @@ export function resolveGenerationComposerStyle({
 export function resolveIconComposerStyle({
   dialog,
   composerStyle,
-  iconDescriptionCount,
 }: {
   dialog: CanvasGenerationDialogState | null;
   composerStyle: CanvasOverlayStyle | null;
-  iconDescriptionCount: number;
 }): CanvasComposerOverlayStyle | null {
   if (dialog?.mode !== 'icon' || !composerStyle) {
     return null;
   }
-  return {
-    ...composerStyle,
-    width: `${Math.max(
-      ICON_COMPOSER_MIN_WIDTH_REM,
-      ICON_COMPOSER_HORIZONTAL_CHROME_REM +
-        iconDescriptionCount * ICON_DESCRIPTION_CARD_WIDTH_REM,
-    ).toFixed(1)}rem`,
-  };
+  return composerStyle;
 }
 
 export function resolveSelectedToolbarStyle({
@@ -146,6 +133,37 @@ export function resolveQuickEditPanelStyle({
   };
 }
 
+export function resolveCropExpandPanelStyle({
+  panel,
+  sourceLayer,
+  viewport,
+  canvasSize,
+}: {
+  panel: CropExpandPanelState | null;
+  sourceLayer: CanvasLayer | null;
+  viewport: CanvasViewport;
+  canvasSize: CanvasSize;
+}): CanvasOverlayStyle | null {
+  if (!panel || !sourceLayer) {
+    return null;
+  }
+  return {
+    left: clamp(
+      viewport.x +
+        (sourceLayer.x + sourceLayer.width / 2) * viewport.scale,
+      12,
+      Math.max(12, canvasSize.width - 12),
+    ),
+    top: clamp(
+      viewport.y +
+        (sourceLayer.y + sourceLayer.height) * viewport.scale +
+        12,
+      12,
+      Math.max(12, canvasSize.height - 320),
+    ),
+  };
+}
+
 export function resolveCharacterAnimationPanelStyle({
   panel,
   sourceLayer,
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
index e5cd0a7c0..91b3807b9 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
@@ -1,9 +1,9 @@
-import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
 import { X } from 'lucide-react';
+import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformSelectField, PlatformTextField } from '../common/PlatformTextField';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformSelectField, PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type {
   CanvasLayer,
@@ -39,12 +39,16 @@ export function ImageCanvasQuickEditPanelView({
   setQuickEditPanel,
   onSubmit,
 }: ImageCanvasQuickEditPanelViewProps) {
+  const isRedraw = panel.mode === 'redraw';
+  const isGenerating = panel.status === 'generating';
+  const panelLabel = isRedraw ? '重绘图片' : '快速编辑图片';
+  const promptLabel = isRedraw ? '重绘提示词' : '快速编辑提示词';
   return (
     <form
       className="image-canvas-editor__quick-edit-panel"
       style={style}
       role="dialog"
-      aria-label="快速编辑图片"
+      aria-label={panelLabel}
       onPointerDown={(event) => event.stopPropagation()}
       onSubmit={(event) => {
         event.preventDefault();
@@ -57,7 +61,7 @@ export function ImageCanvasQuickEditPanelView({
           <span>{sourceLayer.title}</span>
         </div>
         <EditorIconButton
-          label="关闭快速编辑图片"
+          label={`关闭${panelLabel}`}
           title="关闭"
           icon={X}
           onClick={() => setQuickEditPanel(null)}
@@ -65,8 +69,9 @@ export function ImageCanvasQuickEditPanelView({
       </div>
       <PlatformTextField
         variant="textarea"
-        aria-label="快速编辑提示词"
+        aria-label={promptLabel}
         value={panel.prompt}
+        disabled={isGenerating}
         size="sm"
         density="compact"
         className="image-canvas-editor__quick-edit-prompt"
@@ -83,8 +88,9 @@ export function ImageCanvasQuickEditPanelView({
       />
       <div className="image-canvas-editor__quick-edit-controls">
         <PlatformSelectField
-          aria-label="快速编辑尺寸"
+          aria-label={isRedraw ? '重绘尺寸' : '快速编辑尺寸'}
           value={panel.size}
+          disabled={isGenerating}
           size="xs"
           density="compact"
           onChange={(event) =>
@@ -102,8 +108,9 @@ export function ImageCanvasQuickEditPanelView({
           ))}
         </PlatformSelectField>
         <PlatformSelectField
-          aria-label="快速编辑模型"
+          aria-label={isRedraw ? '重绘模型' : '快速编辑模型'}
           value={panel.model}
+          disabled={isGenerating}
           size="xs"
           density="compact"
           onChange={(event) =>
@@ -131,8 +138,9 @@ export function ImageCanvasQuickEditPanelView({
         tone="secondary"
         size="sm"
         className="image-canvas-editor__quick-edit-submit"
+        disabled={isGenerating}
       >
-        生成
+        {isGenerating ? '生成中' : '生成'}
       </PlatformActionButton>
     </form>
   );
diff --git a/src/components/image-editor/ImageCanvasRasterEditModel.test.ts b/src/components/image-editor/ImageCanvasRasterEditModel.test.ts
new file mode 100644
index 000000000..d67eeb8ed
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasRasterEditModel.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  buildCropExpandGeometry,
+  buildCropExpandLayerPatch,
+  parseCropExpandInsetValue,
+} from './ImageCanvasRasterEditModel';
+
+describe('ImageCanvasRasterEditModel', () => {
+  it('builds transparent expansion geometry around the source image', () => {
+    expect(
+      buildCropExpandGeometry({
+        width: 100,
+        height: 80,
+        insets: { left: 10, top: 6, right: 12, bottom: 8 },
+      }),
+    ).toEqual({
+      outputWidth: 122,
+      outputHeight: 94,
+      sourceX: 0,
+      sourceY: 0,
+      sourceWidth: 100,
+      sourceHeight: 80,
+      targetX: 10,
+      targetY: 6,
+    });
+  });
+
+  it('builds crop geometry and moves the layer origin to the cropped bounds', () => {
+    const insets = { left: -10, top: -6, right: -12, bottom: -8 };
+    expect(
+      buildCropExpandGeometry({
+        width: 100,
+        height: 80,
+        insets,
+      }),
+    ).toMatchObject({
+      outputWidth: 78,
+      outputHeight: 66,
+      sourceX: 10,
+      sourceY: 6,
+      sourceWidth: 78,
+      sourceHeight: 66,
+      targetX: 0,
+      targetY: 0,
+    });
+    expect(
+      buildCropExpandLayerPatch({
+        layerX: 50,
+        layerY: 40,
+        insets,
+        outputWidth: 78,
+        outputHeight: 66,
+      }),
+    ).toEqual({
+      x: 60,
+      y: 46,
+      width: 78,
+      height: 66,
+      originalWidth: 78,
+      originalHeight: 66,
+    });
+  });
+
+  it('parses integer crop-expand values and rejects invalid input', () => {
+    expect(parseCropExpandInsetValue(' 12 ')).toBe(12);
+    expect(parseCropExpandInsetValue('')).toBe(0);
+    expect(() => parseCropExpandInsetValue('左')).toThrow('裁扩数值必须是整数');
+  });
+});
diff --git a/src/components/image-editor/ImageCanvasRasterEditModel.ts b/src/components/image-editor/ImageCanvasRasterEditModel.ts
new file mode 100644
index 000000000..9ae0e651e
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasRasterEditModel.ts
@@ -0,0 +1,263 @@
+export type CropExpandInsets = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+export type CropExpandGeometry = {
+  outputWidth: number;
+  outputHeight: number;
+  sourceX: number;
+  sourceY: number;
+  sourceWidth: number;
+  sourceHeight: number;
+  targetX: number;
+  targetY: number;
+};
+
+export type RasterEditResult = {
+  imageSrc: string;
+  width: number;
+  height: number;
+};
+
+function assertCanvasSupport() {
+  if (typeof document === 'undefined') {
+    throw new Error('当前环境不支持图片编辑');
+  }
+}
+
+function loadImageElement(source: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = 'anonymous';
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('图片读取失败'));
+    image.src = source;
+  });
+}
+
+function createRasterCanvas(width: number, height: number) {
+  assertCanvasSupport();
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  if (!context) {
+    throw new Error('当前浏览器不支持图片编辑');
+  }
+  return { canvas, context };
+}
+
+function resolveImageSize(image: HTMLImageElement) {
+  return {
+    width: Math.max(1, image.naturalWidth || image.width || 1),
+    height: Math.max(1, image.naturalHeight || image.height || 1),
+  };
+}
+
+export function parseCropExpandInsetValue(value: string) {
+  const trimmedValue = value.trim();
+  if (!trimmedValue) {
+    return 0;
+  }
+  const parsedValue = Number.parseInt(trimmedValue, 10);
+  if (!Number.isFinite(parsedValue)) {
+    throw new Error('裁扩数值必须是整数');
+  }
+  return parsedValue;
+}
+
+export function buildCropExpandGeometry({
+  width,
+  height,
+  insets,
+}: {
+  width: number;
+  height: number;
+  insets: CropExpandInsets;
+}): CropExpandGeometry {
+  const sourceWidth = Math.max(1, Math.round(width || 1));
+  const sourceHeight = Math.max(1, Math.round(height || 1));
+  const cropLeft = Math.max(0, -insets.left);
+  const cropTop = Math.max(0, -insets.top);
+  const cropRight = Math.max(0, -insets.right);
+  const cropBottom = Math.max(0, -insets.bottom);
+  const targetX = Math.max(0, insets.left);
+  const targetY = Math.max(0, insets.top);
+  const drawableWidth = sourceWidth - cropLeft - cropRight;
+  const drawableHeight = sourceHeight - cropTop - cropBottom;
+  if (drawableWidth <= 0 || drawableHeight <= 0) {
+    throw new Error('裁剪范围不能小于 1 像素');
+  }
+
+  return {
+    outputWidth: targetX + drawableWidth + Math.max(0, insets.right),
+    outputHeight: targetY + drawableHeight + Math.max(0, insets.bottom),
+    sourceX: cropLeft,
+    sourceY: cropTop,
+    sourceWidth: drawableWidth,
+    sourceHeight: drawableHeight,
+    targetX,
+    targetY,
+  };
+}
+
+export function buildCropExpandLayerPatch({
+  layerX,
+  layerY,
+  insets,
+  outputWidth,
+  outputHeight,
+}: {
+  layerX: number;
+  layerY: number;
+  insets: CropExpandInsets;
+  outputWidth: number;
+  outputHeight: number;
+}) {
+  return {
+    x: layerX - insets.left,
+    y: layerY - insets.top,
+    width: outputWidth,
+    height: outputHeight,
+    originalWidth: outputWidth,
+    originalHeight: outputHeight,
+  };
+}
+
+export async function renderCropExpandImage({
+  source,
+  insets,
+}: {
+  source: string;
+  insets: CropExpandInsets;
+}): Promise<RasterEditResult> {
+  const image = await loadImageElement(source);
+  const imageSize = resolveImageSize(image);
+  const geometry = buildCropExpandGeometry({
+    width: imageSize.width,
+    height: imageSize.height,
+    insets,
+  });
+  const { canvas, context } = createRasterCanvas(
+    geometry.outputWidth,
+    geometry.outputHeight,
+  );
+  // 中文注释：画布默认透明，扩大出来的新区域不填色，直接保留 alpha=0。
+  context.clearRect(0, 0, geometry.outputWidth, geometry.outputHeight);
+  context.drawImage(
+    image,
+    geometry.sourceX,
+    geometry.sourceY,
+    geometry.sourceWidth,
+    geometry.sourceHeight,
+    geometry.targetX,
+    geometry.targetY,
+    geometry.sourceWidth,
+    geometry.sourceHeight,
+  );
+
+  return {
+    imageSrc: canvas.toDataURL('image/png'),
+    width: geometry.outputWidth,
+    height: geometry.outputHeight,
+  };
+}
+
+function colorDistance(
+  pixels: Uint8ClampedArray,
+  offset: number,
+  color: [number, number, number],
+) {
+  const red = (pixels[offset] ?? 0) - color[0];
+  const green = (pixels[offset + 1] ?? 0) - color[1];
+  const blue = (pixels[offset + 2] ?? 0) - color[2];
+  return Math.sqrt(red * red + green * green + blue * blue);
+}
+
+function readPixelColor(
+  pixels: Uint8ClampedArray,
+  width: number,
+  x: number,
+  y: number,
+): [number, number, number] {
+  const offset = (y * width + x) * 4;
+  return [
+    pixels[offset] ?? 0,
+    pixels[offset + 1] ?? 0,
+    pixels[offset + 2] ?? 0,
+  ];
+}
+
+export async function removeImageBackground(
+  source: string,
+): Promise<RasterEditResult> {
+  const image = await loadImageElement(source);
+  const { width, height } = resolveImageSize(image);
+  const { canvas, context } = createRasterCanvas(width, height);
+  context.drawImage(image, 0, 0, width, height);
+  const imageData = context.getImageData(0, 0, width, height);
+  const pixels = imageData.data;
+  const cornerColors = [
+    readPixelColor(pixels, width, 0, 0),
+    readPixelColor(pixels, width, width - 1, 0),
+    readPixelColor(pixels, width, 0, height - 1),
+    readPixelColor(pixels, width, width - 1, height - 1),
+  ];
+  const visited = new Uint8Array(width * height);
+  const queue: number[] = [];
+  const threshold = 42;
+
+  const shouldClearPixel = (index: number) => {
+    const offset = index * 4;
+    const alpha = pixels[offset + 3] ?? 0;
+    if (alpha <= 8) {
+      return true;
+    }
+    return cornerColors.some(
+      (color) => colorDistance(pixels, offset, color) <= threshold,
+    );
+  };
+
+  const enqueue = (x: number, y: number) => {
+    if (x < 0 || y < 0 || x >= width || y >= height) {
+      return;
+    }
+    const index = y * width + x;
+    if (visited[index] || !shouldClearPixel(index)) {
+      return;
+    }
+    visited[index] = 1;
+    queue.push(index);
+  };
+
+  for (let x = 0; x < width; x += 1) {
+    enqueue(x, 0);
+    enqueue(x, height - 1);
+  }
+  for (let y = 0; y < height; y += 1) {
+    enqueue(0, y);
+    enqueue(width - 1, y);
+  }
+
+  while (queue.length) {
+    const index = queue.shift()!;
+    const offset = index * 4;
+    pixels[offset + 3] = 0;
+    const x = index % width;
+    const y = Math.floor(index / width);
+    enqueue(x + 1, y);
+    enqueue(x - 1, y);
+    enqueue(x, y + 1);
+    enqueue(x, y - 1);
+  }
+
+  context.putImageData(imageData, 0, 0);
+  return {
+    imageSrc: canvas.toDataURL('image/png'),
+    width,
+    height,
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index fbf3bffca..7d60a9b7d 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -1,6 +1,12 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
@@ -30,11 +36,12 @@ function renderSelectedToolbar(
   const props: Parameters<typeof ImageCanvasSelectedLayerToolbarView>[0] = {
     selectedLayer: createLayer(),
     selectedToolbarStyle: { left: 12, top: 24 },
-    onDeleteSelectedLayer: vi.fn(),
     onOpenQuickEditPanel: vi.fn(),
-    onOpenEditDialog: vi.fn(),
+    onOpenRedrawPanel: vi.fn(),
+    onOpenCropExpandPanel: vi.fn(),
+    onRemoveBackground: vi.fn(),
     onOpenCharacterAnimationPanel: vi.fn(),
-    onOpenLayerMetadata: vi.fn(),
+    onDownloadLayer: vi.fn(),
     ...overrides,
   };
 
@@ -44,33 +51,59 @@ function renderSelectedToolbar(
 }
 
 describe('ImageCanvasSelectedLayerToolbarView', () => {
-  it('renders common layer actions and forwards callbacks', () => {
+  it('renders common layer actions in the Lovart toolbar order and forwards callbacks', () => {
     const props = renderSelectedToolbar();
     const toolbar = screen.getByRole('toolbar', { name: '图片工具栏' });
+    const buttons = within(toolbar).getAllByRole('button');
+
+    expect(buttons.map((button) => button.getAttribute('aria-label'))).toEqual([
+      '快速编辑',
+      '裁扩按钮',
+      '去除背景按钮',
+      '重绘',
+      '下载按钮',
+    ]);
 
-    fireEvent.click(within(toolbar).getByRole('button', { name: '删除图片' }));
     fireEvent.click(within(toolbar).getByRole('button', { name: '快速编辑' }));
+    fireEvent.click(within(toolbar).getByRole('button', { name: '裁扩按钮' }));
+    fireEvent.click(
+      within(toolbar).getByRole('button', { name: '去除背景按钮' }),
+    );
+    fireEvent.click(within(toolbar).getByRole('button', { name: '重绘' }));
+    fireEvent.click(within(toolbar).getByRole('button', { name: '下载按钮' }));
 
-    expect(props.onDeleteSelectedLayer).toHaveBeenCalledTimes(1);
     expect(props.onOpenQuickEditPanel).toHaveBeenCalledWith(props.selectedLayer);
+    expect(props.onOpenCropExpandPanel).toHaveBeenCalledWith(
+      props.selectedLayer,
+    );
+    expect(props.onRemoveBackground).toHaveBeenCalledWith(props.selectedLayer);
+    expect(props.onOpenRedrawPanel).toHaveBeenCalledWith(props.selectedLayer);
+    expect(props.onDownloadLayer).toHaveBeenCalledWith(props.selectedLayer);
+    expect(
+      within(toolbar).queryByRole('button', { name: '删除图片' }),
+    ).toBeNull();
+    expect(
+      within(toolbar).queryByRole('button', { name: '修改图片' }),
+    ).toBeNull();
+    expect(
+      within(toolbar).queryByRole('button', { name: /查看.*图片信息/u }),
+    ).toBeNull();
   });
 
-  it('renders generated and character actions only when applicable', () => {
+  it('renders character animation only for character layers', () => {
     const layer = createLayer({
       sourceType: 'generated',
       assetKind: 'character',
     });
     const props = renderSelectedToolbar({ selectedLayer: layer });
 
-    fireEvent.click(screen.getByRole('button', { name: '修改图片' }));
     fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
-    fireEvent.click(
-      screen.getByRole('button', { name: `查看${layer.title}图片信息` }),
-    );
 
-    expect(props.onOpenEditDialog).toHaveBeenCalledWith(layer);
     expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
-    expect(props.onOpenLayerMetadata).toHaveBeenCalledWith(layer);
+
+    cleanup();
+    renderSelectedToolbar({ selectedLayer: createLayer({ id: 'layer-2' }) });
+    expect(screen.queryByRole('button', { name: '生成动画' })).toBeNull();
   });
 
   it('renders nothing without a selected layer or toolbar position', () => {
@@ -78,11 +111,12 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
       <ImageCanvasSelectedLayerToolbarView
         selectedLayer={null}
         selectedToolbarStyle={{ left: 0, top: 0 }}
-        onDeleteSelectedLayer={vi.fn()}
         onOpenQuickEditPanel={vi.fn()}
-        onOpenEditDialog={vi.fn()}
+        onOpenRedrawPanel={vi.fn()}
+        onOpenCropExpandPanel={vi.fn()}
+        onRemoveBackground={vi.fn()}
         onOpenCharacterAnimationPanel={vi.fn()}
-        onOpenLayerMetadata={vi.fn()}
+        onDownloadLayer={vi.fn()}
       />,
     );
 
@@ -92,11 +126,12 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
       <ImageCanvasSelectedLayerToolbarView
         selectedLayer={createLayer()}
         selectedToolbarStyle={null}
-        onDeleteSelectedLayer={vi.fn()}
         onOpenQuickEditPanel={vi.fn()}
-        onOpenEditDialog={vi.fn()}
+        onOpenRedrawPanel={vi.fn()}
+        onOpenCropExpandPanel={vi.fn()}
+        onRemoveBackground={vi.fn()}
         onOpenCharacterAnimationPanel={vi.fn()}
-        onOpenLayerMetadata={vi.fn()}
+        onDownloadLayer={vi.fn()}
       />,
     );
 
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index c879a33f6..718f12e6b 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -1,47 +1,36 @@
 import {
-  Copy,
   Crop,
-  Info,
-  SlidersHorizontal,
+  Download,
+  Eraser,
   Sparkles,
-  Trash2,
   WandSparkles,
 } from 'lucide-react';
 import type { CSSProperties } from 'react';
 
+import { PlatformIconButton } from '../common/PlatformIconButton';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
-import { isGeneratedLayer } from './ImageCanvasEditorModel';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 
 type ImageCanvasSelectedLayerToolbarViewProps = {
   selectedLayer: CanvasLayer | null;
   selectedToolbarStyle: CSSProperties | null;
-  onDeleteSelectedLayer: () => void;
   onOpenQuickEditPanel: (layer: CanvasLayer) => void;
-  onOpenEditDialog: (layer: CanvasLayer) => void;
+  onOpenRedrawPanel: (layer: CanvasLayer) => void;
+  onOpenCropExpandPanel: (layer: CanvasLayer) => void;
+  onRemoveBackground: (layer: CanvasLayer) => void;
   onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
-  onOpenLayerMetadata: (layer: CanvasLayer) => void;
+  onDownloadLayer: (layer: CanvasLayer) => void;
 };
 
-const layerToolButtons = [
-  { label: '裁剪', icon: Crop },
-  { label: '重绘', icon: Sparkles },
-  { label: '调整', icon: SlidersHorizontal },
-  { label: '复制', icon: Copy },
-];
-
-function triggerPlaceholderAction(label: string) {
-  window.alert(`${label}功能建设中`);
-}
-
 export function ImageCanvasSelectedLayerToolbarView({
   selectedLayer,
   selectedToolbarStyle,
-  onDeleteSelectedLayer,
   onOpenQuickEditPanel,
-  onOpenEditDialog,
+  onOpenRedrawPanel,
+  onOpenCropExpandPanel,
+  onRemoveBackground,
   onOpenCharacterAnimationPanel,
-  onOpenLayerMetadata,
+  onDownloadLayer,
 }: ImageCanvasSelectedLayerToolbarViewProps) {
   if (!selectedLayer || !selectedToolbarStyle) {
     return null;
@@ -55,43 +44,31 @@ export function ImageCanvasSelectedLayerToolbarView({
       aria-label="图片工具栏"
       onPointerDown={(event) => event.stopPropagation()}
     >
-      {layerToolButtons.map(({ label, icon: Icon }) => (
-        <EditorIconButton
-          key={label}
-          label={`${label}占位`}
-          title={`${label}占位`}
-          icon={Icon}
-          onClick={() => triggerPlaceholderAction(label)}
-        />
-      ))}
-      <EditorIconButton
-        label="删除图片"
-        title="删除图片"
-        icon={Trash2}
-        onClick={onDeleteSelectedLayer}
-      />
-      <EditorIconButton
+      <PlatformIconButton
+        className="image-canvas-editor__floating-toolbar-text-button"
         label="快速编辑"
         title="快速编辑"
-        icon={Sparkles}
+        icon={<Sparkles className="h-4 w-4" />}
         onClick={() => onOpenQuickEditPanel(selectedLayer)}
+      >
+        <span>快速编辑</span>
+      </PlatformIconButton>
+      <span
+        aria-hidden="true"
+        className="image-canvas-editor__floating-toolbar-divider"
+      />
+      <EditorIconButton
+        label="裁扩按钮"
+        title="裁扩按钮"
+        icon={Crop}
+        onClick={() => onOpenCropExpandPanel(selectedLayer)}
+      />
+      <EditorIconButton
+        label="去除背景按钮"
+        title="去除背景按钮"
+        icon={Eraser}
+        onClick={() => onRemoveBackground(selectedLayer)}
       />
-      {isGeneratedLayer(selectedLayer) ? (
-        <>
-          <EditorIconButton
-            label={`查看${selectedLayer.title}图片信息`}
-            title={`查看${selectedLayer.title}图片信息`}
-            icon={Info}
-            onClick={() => onOpenLayerMetadata(selectedLayer)}
-          />
-          <EditorIconButton
-            label="修改图片"
-            title="修改图片"
-            icon={WandSparkles}
-            onClick={() => onOpenEditDialog(selectedLayer)}
-          />
-        </>
-      ) : null}
       {selectedLayer.assetKind === 'character' ? (
         <EditorIconButton
           label="生成动画"
@@ -100,6 +77,25 @@ export function ImageCanvasSelectedLayerToolbarView({
           onClick={() => onOpenCharacterAnimationPanel(selectedLayer)}
         />
       ) : null}
+      <span
+        aria-hidden="true"
+        className="image-canvas-editor__floating-toolbar-divider"
+      />
+      <PlatformIconButton
+        className="image-canvas-editor__floating-toolbar-text-button"
+        label="重绘"
+        title="重绘"
+        icon={<WandSparkles className="h-4 w-4" />}
+        onClick={() => onOpenRedrawPanel(selectedLayer)}
+      >
+        <span>重绘</span>
+      </PlatformIconButton>
+      <EditorIconButton
+        label="下载按钮"
+        title="下载按钮"
+        icon={Download}
+        onClick={() => onDownloadLayer(selectedLayer)}
+      />
     </div>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 16a5c6ac0..80edbe4d0 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -9,10 +9,6 @@ import type {
 
 import { ImageCanvasBottomToolbarView } from './ImageCanvasBottomToolbarView';
 import { ImageCanvasContextMenusView } from './ImageCanvasContextMenusView';
-import { ImageCanvasPanelDockView } from './ImageCanvasPanelDockView';
-import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';
-import { ImageCanvasWorldView } from './ImageCanvasWorldView';
-import type { StageMinimapModel } from './ImageCanvasInteractionModel';
 import type {
   CanvasClipboard,
   CanvasContextMenuState,
@@ -27,6 +23,10 @@ import type {
   SidebarPanel,
   SnapGuide,
 } from './ImageCanvasEditorTypes';
+import type { StageMinimapModel } from './ImageCanvasInteractionModel';
+import { ImageCanvasPanelDockView } from './ImageCanvasPanelDockView';
+import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';
+import { ImageCanvasWorldView } from './ImageCanvasWorldView';
 
 export type ImageCanvasStageViewProps = {
   canvasViewportRef: RefObject<HTMLDivElement | null>;
@@ -90,10 +90,12 @@ export type ImageCanvasStageViewProps = {
     dialog: CanvasGenerationDialogState,
   ) => void;
   onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
-  onDeleteSelectedLayer: () => void;
   onOpenQuickEditPanel: (layer: CanvasLayer) => void;
-  onOpenEditDialog: (layer: CanvasLayer) => void;
+  onOpenRedrawPanel: (layer: CanvasLayer) => void;
+  onOpenCropExpandPanel: (layer: CanvasLayer) => void;
+  onRemoveBackground: (layer: CanvasLayer) => void;
   onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
+  onDownloadLayer: (layer: CanvasLayer) => void;
   onPasteCanvasClipboard: (canvasPoint?: { x: number; y: number }) => void;
   onCopyContextLayers: (options?: { cut?: boolean }) => void;
   onDuplicateContextLayers: () => void;
@@ -175,10 +177,12 @@ export function ImageCanvasStageView({
   onOpenLayerMetadata,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
-  onDeleteSelectedLayer,
   onOpenQuickEditPanel,
-  onOpenEditDialog,
+  onOpenRedrawPanel,
+  onOpenCropExpandPanel,
+  onRemoveBackground,
   onOpenCharacterAnimationPanel,
+  onDownloadLayer,
   onPasteCanvasClipboard,
   onCopyContextLayers,
   onDuplicateContextLayers,
@@ -257,11 +261,12 @@ export function ImageCanvasStageView({
       <ImageCanvasSelectedLayerToolbarView
         selectedLayer={selectedLayer}
         selectedToolbarStyle={selectedToolbarStyle}
-        onDeleteSelectedLayer={onDeleteSelectedLayer}
         onOpenQuickEditPanel={onOpenQuickEditPanel}
-        onOpenEditDialog={onOpenEditDialog}
+        onOpenRedrawPanel={onOpenRedrawPanel}
+        onOpenCropExpandPanel={onOpenCropExpandPanel}
+        onRemoveBackground={onRemoveBackground}
         onOpenCharacterAnimationPanel={onOpenCharacterAnimationPanel}
-        onOpenLayerMetadata={onOpenLayerMetadata}
+        onDownloadLayer={onDownloadLayer}
       />
 
       <ImageCanvasContextMenusView
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 562b7714b..cc4817331 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -307,6 +307,12 @@ describe('ImageCanvasUploadModel', () => {
       id: 'upload-character-reference-1781697600000-2',
       label: '参考图3',
       src: 'data:image/png;base64,ref',
+      mediaType: 'image',
+      mimeType: undefined,
+      sizeBytes: undefined,
+      durationSeconds: undefined,
+      objectKey: undefined,
+      assetObjectId: undefined,
     });
   });
 
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index 2a55a421d..d8106df4a 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -6,6 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 import type {
   CanvasGenerationDialogState,
   CanvasLayer,
+  GenerateDialogState,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasWorldView } from './ImageCanvasWorldView';
 
@@ -252,6 +253,184 @@ describe('ImageCanvasWorldView', () => {
     expect(within(focusedFrame).getByText('1024 x 768')).toBeTruthy();
   });
 
+  it.each([
+    {
+      mode: 'character',
+      ariaLabel: '角色生成占位图',
+      generatorLabel: 'Character Generator',
+      badgeLabel: '角色',
+      frameClassName: 'image-canvas-editor__generation-frame--character',
+      iconClassName: 'lucide-user-round',
+    },
+    {
+      mode: 'video',
+      ariaLabel: '视频生成占位图',
+      generatorLabel: 'Video Generator',
+      badgeLabel: '视频',
+      frameClassName: 'image-canvas-editor__generation-frame--video',
+      iconClassName: 'lucide-film',
+    },
+    {
+      mode: 'audio-sound-effect',
+      ariaLabel: '音效生成占位图',
+      generatorLabel: 'Sound Generator',
+      badgeLabel: '音效',
+      frameClassName:
+        'image-canvas-editor__generation-frame--audio-sound-effect',
+      iconClassName: 'lucide-volume-2',
+    },
+    {
+      mode: 'audio-background-music',
+      ariaLabel: '背景音乐生成占位图',
+      generatorLabel: 'Music Generator',
+      badgeLabel: '背景音乐',
+      frameClassName:
+        'image-canvas-editor__generation-frame--audio-background-music',
+      iconClassName: 'lucide-music-2',
+    },
+  ])(
+    'renders $mode generation placeholder with its own icon and badge',
+    ({ mode, ariaLabel, generatorLabel, badgeLabel, frameClassName, iconClassName }) => {
+      const dialog = createGenerationDialog({
+        id: `dialog-${mode}`,
+        mode: mode as CanvasGenerationDialogState['mode'],
+      });
+
+      renderWorldView({
+        canvasGenerationDialogs: [dialog],
+        generateDialog: dialog as GenerateDialogState,
+      });
+
+      const frame = screen.getByRole('button', { name: ariaLabel });
+      const generatorLabelNode = within(frame).getByText(
+        generatorLabel,
+      ) as HTMLElement;
+      expect(frame.className).toContain(frameClassName);
+      expect(generatorLabelNode).toBeTruthy();
+      expect(
+        generatorLabelNode.querySelector('svg')?.getAttribute('class'),
+      ).toContain(iconClassName);
+      expect(within(frame).getByText(badgeLabel)).toBeTruthy();
+      expect(
+        frame
+          .querySelector('.image-canvas-editor__generation-frame-icon svg')
+          ?.getAttribute('class'),
+      ).toContain(iconClassName);
+    },
+  );
+
+  it.each([
+    {
+      mode: 'character',
+      ariaLabel: '角色生成占位图',
+      generatorLabel: 'Character Generator',
+      badgeLabel: '角色',
+    },
+    {
+      mode: 'video',
+      ariaLabel: '视频生成占位图',
+      generatorLabel: 'Video Generator',
+      badgeLabel: '视频',
+    },
+    {
+      mode: 'audio-sound-effect',
+      ariaLabel: '音效生成占位图',
+      generatorLabel: 'Sound Generator',
+      badgeLabel: '音效',
+    },
+    {
+      mode: 'audio-background-music',
+      ariaLabel: '背景音乐生成占位图',
+      generatorLabel: 'Music Generator',
+      badgeLabel: '背景音乐',
+    },
+  ])(
+    'keeps $mode generation title size and badge readable when zoomed out',
+    ({ mode, ariaLabel, generatorLabel, badgeLabel }) => {
+      const dialog = createGenerationDialog({
+        id: `dialog-zoom-${mode}`,
+        mode: mode as CanvasGenerationDialogState['mode'],
+      });
+
+      renderWorldView({
+        viewport: { x: 0, y: 0, scale: 0.25 },
+        canvasGenerationDialogs: [dialog],
+        generateDialog: dialog as GenerateDialogState,
+      });
+
+      const frame = screen.getByRole('button', { name: ariaLabel });
+      const inverseScale = '4';
+
+      expect(
+        (within(frame).getByText(generatorLabel) as HTMLElement).style.getPropertyValue(
+          '--image-canvas-editor-inverse-scale',
+        ),
+      ).toBe(inverseScale);
+      expect(
+        (within(frame).getByText('1024 x 768') as HTMLElement).style.getPropertyValue(
+          '--image-canvas-editor-inverse-scale',
+        ),
+      ).toBe(inverseScale);
+      expect(
+        (within(frame).getByText(badgeLabel) as HTMLElement).style.getPropertyValue(
+          '--image-canvas-editor-inverse-scale',
+        ),
+      ).toBe(inverseScale);
+    },
+  );
+
+  it.each([
+    {
+      mode: 'character',
+      ariaLabel: '角色生成占位图',
+      generatorLabel: 'Character Generator',
+      badgeLabel: '角色',
+    },
+    {
+      mode: 'video',
+      ariaLabel: '视频生成占位图',
+      generatorLabel: 'Video Generator',
+      badgeLabel: '视频',
+    },
+    {
+      mode: 'audio-sound-effect',
+      ariaLabel: '音效生成占位图',
+      generatorLabel: 'Sound Generator',
+      badgeLabel: '音效',
+    },
+    {
+      mode: 'audio-background-music',
+      ariaLabel: '背景音乐生成占位图',
+      generatorLabel: 'Music Generator',
+      badgeLabel: '背景音乐',
+    },
+  ])(
+    'keeps $mode placeholder icon and badge visible after blur without helper chrome',
+    ({ mode, ariaLabel, generatorLabel, badgeLabel }) => {
+      const dialog = createGenerationDialog({
+        id: `dialog-blurred-${mode}`,
+        mode: mode as CanvasGenerationDialogState['mode'],
+        status: 'idle',
+      });
+
+      renderWorldView({
+        generateDialog: null,
+        canvasGenerationDialogs: [dialog],
+      });
+
+      const frame = screen.getByRole('button', { name: ariaLabel });
+      expect(frame.className).not.toContain(
+        'image-canvas-editor__generation-frame--focused',
+      );
+      expect(within(frame).queryByText(generatorLabel)).toBeNull();
+      expect(within(frame).queryByText('1024 x 768')).toBeNull();
+      expect(within(frame).getByText(badgeLabel)).toBeTruthy();
+      expect(
+        frame.querySelector('.image-canvas-editor__generation-frame-icon svg'),
+      ).toBeTruthy();
+    },
+  );
+
   it('keeps layer and generation chrome readable when the canvas is zoomed out', () => {
     const layer = createLayer({ assetKind: 'character' });
     const dialog = createGenerationDialog({ id: 'dialog-focused' });
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index 7ca40870c..904356ff7 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -1,4 +1,4 @@
-import { ImageIcon, Info } from 'lucide-react';
+import { Film, ImageIcon, Info, Music2, UserRound, Volume2 } from 'lucide-react';
 import type {
   CSSProperties,
   MouseEvent as ReactMouseEvent,
@@ -24,6 +24,77 @@ import {
   getLayerKindLabel,
 } from './ImageCanvasGenerationModel';
 
+function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) {
+  switch (dialog.mode) {
+    case 'character':
+      return {
+        frameClassName: 'image-canvas-editor__generation-frame--character',
+        badgeClassName: 'character',
+        badgeLabel: '角色',
+        icon: <UserRound className="h-8 w-8" />,
+        labelIcon: <UserRound className="h-4 w-4" />,
+      };
+    case 'spec':
+      return {
+        frameClassName: 'image-canvas-editor__generation-frame--spec',
+        badgeClassName: 'spec',
+        badgeLabel: '规范',
+        icon: <ImageIcon className="h-8 w-8" />,
+        labelIcon: <ImageIcon className="h-4 w-4" />,
+      };
+    case 'icon':
+      return {
+        frameClassName: 'image-canvas-editor__generation-frame--icon',
+        badgeClassName: 'icon',
+        badgeLabel: '图标',
+        icon: <ImageIcon className="h-8 w-8" />,
+        labelIcon: <ImageIcon className="h-4 w-4" />,
+      };
+    case 'ui-design':
+      return {
+        frameClassName: 'image-canvas-editor__generation-frame--ui-design',
+        badgeClassName: 'ui-design',
+        badgeLabel: 'UI设计',
+        icon: <ImageIcon className="h-8 w-8" />,
+        labelIcon: <ImageIcon className="h-4 w-4" />,
+      };
+    case 'video':
+      return {
+        frameClassName: 'image-canvas-editor__generation-frame--video',
+        badgeClassName: 'video',
+        badgeLabel: '视频',
+        icon: <Film className="h-8 w-8" />,
+        labelIcon: <Film className="h-4 w-4" />,
+      };
+    case 'audio-sound-effect':
+      return {
+        frameClassName:
+          'image-canvas-editor__generation-frame--audio-sound-effect',
+        badgeClassName: 'sound-effect',
+        badgeLabel: '音效',
+        icon: <Volume2 className="h-8 w-8" />,
+        labelIcon: <Volume2 className="h-4 w-4" />,
+      };
+    case 'audio-background-music':
+      return {
+        frameClassName:
+          'image-canvas-editor__generation-frame--audio-background-music',
+        badgeClassName: 'background-music',
+        badgeLabel: '背景音乐',
+        icon: <Music2 className="h-8 w-8" />,
+        labelIcon: <Music2 className="h-4 w-4" />,
+      };
+    default:
+      return {
+        frameClassName: '',
+        badgeClassName: null,
+        badgeLabel: null,
+        icon: <ImageIcon className="h-8 w-8" />,
+        labelIcon: <ImageIcon className="h-4 w-4" />,
+      };
+  }
+}
+
 function getInverseViewportScale(viewport: CanvasViewport) {
   if (!Number.isFinite(viewport.scale) || viewport.scale <= 0) {
     return 1;
@@ -136,7 +207,8 @@ export function ImageCanvasWorldView({
             generateDialog.status === 'generating' &&
             generateDialog.sourceLayerId === layer.id
               ? '修改中'
-              : quickEditPanel?.status === 'generating' &&
+              : quickEditPanel?.mode !== 'redraw' &&
+                  quickEditPanel?.status === 'generating' &&
                   quickEditPanel.sourceLayerId === layer.id
                 ? '生成中'
                 : null;
@@ -271,14 +343,13 @@ export function ImageCanvasWorldView({
               const isFocused = generateDialog?.id === dialog.id;
               const showFocusedChrome =
                 isFocused || dialog.status === 'generating';
+              const placeholderMeta = getGenerationPlaceholderMeta(dialog);
 
               return (
                 <div
                   key={dialog.id}
                   className={`image-canvas-editor__generation-frame ${
-                    dialog.mode === 'icon'
-                      ? 'image-canvas-editor__generation-frame--icon'
-                      : ''
+                    placeholderMeta.frameClassName
                   } ${
                     dialog.status === 'generating'
                       ? 'image-canvas-editor__generation-frame--generating'
@@ -307,32 +378,16 @@ export function ImageCanvasWorldView({
                       className="image-canvas-editor__generation-frame-label"
                       style={inverseScaleStyle}
                     >
-                      <ImageIcon className="h-4 w-4" />
+                      {placeholderMeta.labelIcon}
                       {getGenerationFrameLabel(dialog)}
                     </span>
                   ) : null}
-                  {dialog.mode === 'character' ? (
+                  {placeholderMeta.badgeLabel ? (
                     <span
-                      className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--character"
+                      className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${placeholderMeta.badgeClassName}`}
                       style={inverseScaleStyle}
                     >
-                      角色
-                    </span>
-                  ) : null}
-                  {dialog.mode === 'spec' ? (
-                    <span
-                      className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--spec"
-                      style={inverseScaleStyle}
-                    >
-                      规范
-                    </span>
-                  ) : null}
-                  {dialog.mode === 'icon' ? (
-                    <span
-                      className="image-canvas-editor__kind-badge image-canvas-editor__kind-badge--icon"
-                      style={inverseScaleStyle}
-                    >
-                      图标
+                      {placeholderMeta.badgeLabel}
                     </span>
                   ) : null}
                   {showFocusedChrome ? (
@@ -345,7 +400,7 @@ export function ImageCanvasWorldView({
                     </span>
                   ) : null}
                   <span className="image-canvas-editor__generation-frame-icon">
-                    <ImageIcon className="h-8 w-8" />
+                    {placeholderMeta.icon}
                   </span>
                   {dialog.status === 'generating' ? (
                     <span
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index e9c162430..87f02d44b 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -13,8 +13,8 @@ import type {
   QuickEditPanelState,
   SidebarPanel,
 } from './ImageCanvasEditorTypes';
-import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { createQuickEditPanelDraft } from './ImageCanvasGenerationDialogModel';
+import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { useImageCanvasGenerationSubmissionWorkflow } from './useImageCanvasGenerationSubmissionWorkflow';
 
 const resolveEditorImageReferenceDataUrlMock = vi.hoisted(() => vi.fn());
@@ -422,7 +422,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         initialDialog={{
           id: 'dialog-icon',
           mode: 'icon',
-          prompt: '',
+          prompt: '  返回按钮  \n\n设置按钮',
           status: 'idle',
           composerOpen: true,
           iconDescriptions: ['返回按钮'],
@@ -448,6 +448,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-icons',
+      priceMudPoints: 12,
       iconImageSrcs: [
         createIconResult('返回按钮', 'data:image/png;base64,back'),
         createIconResult('设置按钮', 'data:image/png;base64,setting'),
@@ -458,7 +459,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         initialDialog={{
           id: 'dialog-icon',
           mode: 'icon',
-          prompt: '',
+          prompt: '  返回按钮  \n\n  设置按钮  ',
           status: 'idle',
           composerOpen: true,
           imageModel: 'gpt-image-2',
@@ -467,7 +468,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
             label: '图标规范',
             src: 'data:image/png;base64,spec',
           },
-          iconDescriptions: ['  返回按钮  ', '', '设置按钮'],
+          iconDescriptions: ['旧返回', '旧设置'],
           placeholder: {
             x: 140,
             y: 160,
@@ -489,6 +490,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
           referenceImageSrc: 'data:image/png;base64,spec',
           iconDescriptions: ['返回按钮', '设置按钮'],
           model: 'gpt-image-2',
+          priceMudPoints: 12,
         }),
       );
     });
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index cdf5859cb..8775ac9f8 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -28,8 +28,8 @@ import type {
   SidebarPanel,
 } from './ImageCanvasEditorTypes';
 import {
-  createGeneratedResultLayer,
   createAudioResultLayer,
+  createGeneratedResultLayer,
   createIconSpritesheetResultLayers,
   createQuickEditResultLayer,
   createVideoResultLayer,
@@ -185,6 +185,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       generated: Parameters<typeof createQuickEditResultLayer>[0]['generated'],
       sourceLayer: CanvasLayer,
       generationInputs: CanvasGenerationInputs,
+      mode: QuickEditPanelState['mode'] = 'quick-edit',
     ) => {
       layerCounterRef.current += 1;
       const generatedIndex = layerCounterRef.current;
@@ -193,13 +194,27 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         generatedIndex,
         sourceLayer,
         generationInputs,
+        mode,
       });
 
       addGeneratedLayersToCanvas([nextLayer]);
-      selectSingleLayer(nextLayer.id);
+      selectSingleLayer(mode === 'redraw' ? sourceLayer.id : nextLayer.id);
       setActiveSidebarPanel('layers');
-      setQuickEditPanel(null);
-      setActiveTool('select');
+      if (mode === 'redraw') {
+        setQuickEditPanel((currentPanel) =>
+          currentPanel?.sourceLayerId === sourceLayer.id
+            ? {
+                ...currentPanel,
+                mode: 'redraw',
+                status: 'idle',
+                errorMessage: undefined,
+              }
+            : currentPanel,
+        );
+      } else {
+        setQuickEditPanel(null);
+        setActiveTool('select');
+      }
       fitLayers([sourceLayer, nextLayer]);
     },
     [
@@ -383,7 +398,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       };
       const submissionPlan =
         buildIconSpritesheetGenerationSubmissionPlan(dialog);
-      if (!submissionPlan.ok) {
+      if (submissionPlan.ok === false) {
         if (canvasDialog) {
           setSubmittingIconDialog({
             ...canvasDialog,
@@ -442,7 +457,10 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       return;
     }
 
-    const normalizedPrompt = quickEditPanel.prompt.trim() || '快速编辑图片';
+    const panelMode = quickEditPanel.mode ?? 'quick-edit';
+    const normalizedPrompt =
+      quickEditPanel.prompt.trim() ||
+      (panelMode === 'redraw' ? '重绘图片' : '快速编辑图片');
     setQuickEditPanel({
       ...quickEditPanel,
       prompt: normalizedPrompt,
@@ -465,10 +483,11 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         generated,
         quickEditSourceLayer,
         buildEditGenerationInputs(
-          '快速编辑提示词',
+          panelMode === 'redraw' ? '重绘提示词' : '快速编辑提示词',
           normalizedPrompt,
           quickEditSourceLayer,
         ),
+        panelMode,
       );
     } catch (error) {
       setQuickEditPanel({
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index 50c9a326e..c9ce1524d 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -8,7 +8,6 @@ import type {
   CanvasGenerationDialogState,
   CanvasLayer,
   CanvasTool,
-  GenerateDialogState,
   ImageContextMenuState,
   SidebarPanel,
 } from './ImageCanvasEditorTypes';
@@ -77,6 +76,7 @@ function GenerationSurfaceHarness() {
     canvasSize: { width: 900, height: 640 },
     viewport,
     setViewport,
+    setLayers,
     layerCounterRef,
     specToolWrapRef,
     musicToolWrapRef,
@@ -98,6 +98,7 @@ function GenerationSurfaceHarness() {
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]),
     selectSingleLayer: () => {},
     fitLayers: () => {},
+    captureCanvasHistory: () => {},
     setActiveTool,
     setActiveSidebarPanel,
     setMetadataLayer,
@@ -134,13 +135,22 @@ function GenerationSurfaceHarness() {
       >
         切换生成
       </button>
-      <button type="button" onClick={() => surface.switchGenerationTool('video')}>
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('video')}
+      >
         切换视频
       </button>
-      <button type="button" onClick={() => surface.switchGenerationTool('music')}>
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('music')}
+      >
         切换音乐
       </button>
-      <button type="button" onClick={() => surface.switchGenerationTool('spec')}>
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('spec')}
+      >
         切换规范
       </button>
       <button
@@ -149,7 +159,10 @@ function GenerationSurfaceHarness() {
       >
         切换角色
       </button>
-      <button type="button" onClick={() => surface.switchGenerationTool('icon')}>
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('icon')}
+      >
         切换图标
       </button>
       <button
@@ -158,8 +171,11 @@ function GenerationSurfaceHarness() {
       >
         切换UI设计
       </button>
-      <button type="button" onClick={() => surface.switchGenerationTool('text')}>
-        切换文字
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('select')}
+      >
+        切换选择
       </button>
       {surface.generationComposerNode}
     </div>
@@ -170,7 +186,7 @@ describe('useImageCanvasGenerationSurface', () => {
   it('switches generation tools while leaving non-generation tools untouched', () => {
     render(<GenerationSurfaceHarness />);
 
-    fireEvent.click(screen.getByRole('button', { name: '切换文字' }));
+    fireEvent.click(screen.getByRole('button', { name: '切换选择' }));
     expect(screen.getByTestId('tool').textContent).toBe('select');
 
     fireEvent.click(screen.getByRole('button', { name: '切换生成' }));
@@ -202,7 +218,9 @@ describe('useImageCanvasGenerationSurface', () => {
     fireEvent.click(screen.getByRole('button', { name: '切换规范' }));
     expect(screen.getByTestId('tool').textContent).toBe('spec');
     const menu = screen.getByRole('menu', { name: '生成规范类型' });
-    expect(within(menu).getByRole('menuitem', { name: '角色形象规范' })).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '角色形象规范' }),
+    ).toBeTruthy();
   });
 
   it('anchors the music menu to the music tool and closes after hover leaves', () => {
@@ -283,16 +301,16 @@ describe('useImageCanvasGenerationSurface', () => {
       within(menu).getByRole('menuitem', { name: '生成游戏背景音乐' }),
     ).toBeTruthy();
 
-    fireEvent.click(within(menu).getByRole('menuitem', { name: '生成游戏音效' }));
+    fireEvent.click(
+      within(menu).getByRole('menuitem', { name: '生成游戏音效' }),
+    );
     expect(screen.getByTestId('dialog').textContent).toBe(
       'audio-sound-effect:open:placeholder',
     );
     expect(screen.getByRole('dialog', { name: '生成游戏音效' })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '切换音乐' }));
-    fireEvent.click(
-      screen.getByRole('menuitem', { name: '生成游戏背景音乐' }),
-    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '生成游戏背景音乐' }));
     expect(screen.getByTestId('dialog').textContent).toBe(
       'audio-background-music:open:placeholder',
     );
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index f8a01874a..e31cb9f46 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -15,14 +15,6 @@ import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
-import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
-import {
-  resolveCharacterAnimationPanelStyle,
-  resolveGenerationAnchor,
-  resolveGenerationComposerStyle,
-  resolveIconComposerStyle,
-  resolveQuickEditPanelStyle,
-} from './ImageCanvasOverlayModel';
 import type {
   CanvasGenerationDialogState,
   CanvasLayer,
@@ -33,6 +25,15 @@ import type {
   SidebarPanel,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
+import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
+import {
+  resolveCharacterAnimationPanelStyle,
+  resolveCropExpandPanelStyle,
+  resolveGenerationAnchor,
+  resolveGenerationComposerStyle,
+  resolveIconComposerStyle,
+  resolveQuickEditPanelStyle,
+} from './ImageCanvasOverlayModel';
 import { useImageCanvasGenerationWorkflow } from './useImageCanvasGenerationWorkflow';
 
 type CanvasGenerationDialogUpdater = (
@@ -46,6 +47,7 @@ type ImageCanvasGenerationSurfaceOptions = {
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
   setViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
   layerCounterRef: MutableRefObject<number>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
   musicToolWrapRef: RefObject<HTMLSpanElement | null>;
@@ -72,12 +74,14 @@ type ImageCanvasGenerationSurfaceOptions = {
   appendCanvasLayersWithResources: (nextLayers: CanvasLayer[]) => void;
   selectSingleLayer: (layerId: string | null) => void;
   fitLayers: (targetLayers?: CanvasLayer[]) => void;
+  captureCanvasHistory: () => void;
   setActiveTool: Dispatch<SetStateAction<CanvasTool>>;
   setActiveSidebarPanel: Dispatch<SetStateAction<SidebarPanel | null>>;
   setMetadataLayer: Dispatch<SetStateAction<CanvasLayer | null>>;
   setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
   requestUpload: (target: UploadTarget) => void;
   persistGeneratedAsset?: (layer: CanvasLayer) => void;
+  persistUpdatedLayerResource?: (layer: CanvasLayer) => void;
 };
 
 function renderEditorPortal(node: ReactNode) {
@@ -120,6 +124,7 @@ export function useImageCanvasGenerationSurface({
   canvasSize,
   viewport,
   setViewport,
+  setLayers,
   layerCounterRef,
   specToolWrapRef,
   musicToolWrapRef,
@@ -139,12 +144,14 @@ export function useImageCanvasGenerationSurface({
   appendCanvasLayersWithResources,
   selectSingleLayer,
   fitLayers,
+  captureCanvasHistory,
   setActiveTool,
   setActiveSidebarPanel,
   setMetadataLayer,
   setImageContextMenu,
   requestUpload,
   persistGeneratedAsset,
+  persistUpdatedLayerResource,
 }: ImageCanvasGenerationSurfaceOptions) {
   const toolbarOptionCloseTimerRef = useRef<ReturnType<
     typeof setTimeout
@@ -154,6 +161,7 @@ export function useImageCanvasGenerationSurface({
     canvasSize,
     viewport,
     setViewport,
+    setLayers,
     canvasGenerationDialogs,
     layerCounterRef,
     generateDialog,
@@ -166,19 +174,20 @@ export function useImageCanvasGenerationSurface({
     appendCanvasLayersWithResources,
     selectSingleLayer,
     fitLayers,
+    captureCanvasHistory,
     setActiveTool,
     setActiveSidebarPanel,
     setMetadataLayer,
     setImageContextMenu,
     persistGeneratedAsset,
+    persistUpdatedLayerResource,
   });
 
-  const activeGenerationLayer =
-    activeCanvasGenerationDialog?.generatedLayerId
-      ? (layers.find(
-          (layer) => layer.id === activeCanvasGenerationDialog.generatedLayerId,
-        ) ?? null)
-      : null;
+  const activeGenerationLayer = activeCanvasGenerationDialog?.generatedLayerId
+    ? (layers.find(
+        (layer) => layer.id === activeCanvasGenerationDialog.generatedLayerId,
+      ) ?? null)
+    : null;
   const generationAnchor = resolveGenerationAnchor({
     dialog: activeCanvasGenerationDialog,
     generatedLayer: activeGenerationLayer,
@@ -191,7 +200,6 @@ export function useImageCanvasGenerationSurface({
   const iconComposerStyle = resolveIconComposerStyle({
     dialog: activeCanvasGenerationDialog,
     composerStyle: generationComposerStyle,
-    iconDescriptionCount: generationWorkflow.iconDescriptionValues.length,
   });
   const quickEditPanelStyle = resolveQuickEditPanelStyle({
     panel: generationWorkflow.quickEditPanel,
@@ -199,6 +207,12 @@ export function useImageCanvasGenerationSurface({
     viewport,
     canvasSize,
   });
+  const cropExpandPanelStyle = resolveCropExpandPanelStyle({
+    panel: generationWorkflow.cropExpandPanel,
+    sourceLayer: generationWorkflow.cropExpandSourceLayer,
+    viewport,
+    canvasSize,
+  });
   const characterAnimationPanelStyle = resolveCharacterAnimationPanelStyle({
     panel: generationWorkflow.characterAnimationPanel,
     sourceLayer: generationWorkflow.characterAnimationSourceLayer,
@@ -284,105 +298,109 @@ export function useImageCanvasGenerationSurface({
   const generationComposerNode = (
     <>
       <ImageCanvasGenerationComposerView
-      specToolWrapRef={specToolWrapRef}
-      characterSpecButtonRef={characterSpecButtonRef}
-      characterReferenceButtonRef={characterReferenceButtonRef}
-      generationReferenceButtonRef={generationReferenceButtonRef}
-      iconSpecButtonRef={iconSpecButtonRef}
-      isSpecMenuOpen={generationWorkflow.isSpecMenuOpen}
-      isGenerationReferenceMenuOpen={
-        generationWorkflow.isGenerationReferenceMenuOpen
-      }
-      isCharacterSpecMenuOpen={generationWorkflow.isCharacterSpecMenuOpen}
-      isCharacterReferenceMenuOpen={
-        generationWorkflow.isCharacterReferenceMenuOpen
-      }
-      isIconSpecMenuOpen={generationWorkflow.isIconSpecMenuOpen}
-      isUiDesignSpecMenuOpen={generationWorkflow.isUiDesignSpecMenuOpen}
-      isPickingGenerationReferenceFromCanvas={
-        generationWorkflow.isPickingGenerationReferenceFromCanvas
-      }
-      isPickingCharacterSpecFromCanvas={
-        generationWorkflow.isPickingCharacterSpecFromCanvas
-      }
-      isPickingCharacterReferenceFromCanvas={
-        generationWorkflow.isPickingCharacterReferenceFromCanvas
-      }
-      isPickingIconSpecFromCanvas={
-        generationWorkflow.isPickingIconSpecFromCanvas
-      }
-      isPickingUiDesignSpecFromCanvas={
-        generationWorkflow.isPickingUiDesignSpecFromCanvas
-      }
-      generateDialog={generateDialog}
-      generationComposerStyle={generationComposerStyle}
-      iconComposerStyle={iconComposerStyle}
-      quickEditPanel={generationWorkflow.quickEditPanel}
-      quickEditSourceLayer={generationWorkflow.quickEditSourceLayer}
-      quickEditPanelStyle={quickEditPanelStyle}
-      quickEditSizeOptions={generationWorkflow.quickEditSizeOptions}
-      quickEditModelOptions={generationWorkflow.quickEditModelOptions}
-      characterAnimationPanel={generationWorkflow.characterAnimationPanel}
-      characterAnimationSourceLayer={
-        generationWorkflow.characterAnimationSourceLayer
-      }
-      characterAnimationPanelStyle={characterAnimationPanelStyle}
-      characterAnimationPrice={generationWorkflow.characterAnimationPrice}
-      setGenerateDialog={setGenerateDialog}
-      setQuickEditPanel={generationWorkflow.setQuickEditPanel}
-      setCharacterAnimationPanel={
-        generationWorkflow.setCharacterAnimationPanel
-      }
-      setIsCharacterSpecMenuOpen={
-        generationWorkflow.setIsCharacterSpecMenuOpen
-      }
-      setIsCharacterReferenceMenuOpen={
-        generationWorkflow.setIsCharacterReferenceMenuOpen
-      }
-      setIsGenerationReferenceMenuOpen={
-        generationWorkflow.setIsGenerationReferenceMenuOpen
-      }
-      setIsIconSpecMenuOpen={generationWorkflow.setIsIconSpecMenuOpen}
-      setIsUiDesignSpecMenuOpen={
-        generationWorkflow.setIsUiDesignSpecMenuOpen
-      }
-      setIsPickingGenerationReferenceFromCanvas={
-        generationWorkflow.setIsPickingGenerationReferenceFromCanvas
-      }
-      setIsPickingCharacterSpecFromCanvas={
-        generationWorkflow.setIsPickingCharacterSpecFromCanvas
-      }
-      setIsPickingCharacterReferenceFromCanvas={
-        generationWorkflow.setIsPickingCharacterReferenceFromCanvas
-      }
-      setIsPickingIconSpecFromCanvas={
-        generationWorkflow.setIsPickingIconSpecFromCanvas
-      }
-      setIsPickingUiDesignSpecFromCanvas={
-        generationWorkflow.setIsPickingUiDesignSpecFromCanvas
-      }
-      onOpenSpecDialog={generationWorkflow.openSpecDialog}
-      onRequestUpload={requestUpload}
-      onSubmitImageGeneration={(dialog) =>
-        void generationWorkflow.submitImageGeneration(dialog)
-      }
-      onSubmitIconSpritesheetGeneration={(dialog) =>
-        void generationWorkflow.submitIconSpritesheetGeneration(dialog)
-      }
-      onSubmitQuickEdit={() => void generationWorkflow.submitQuickEdit()}
-      onSubmitCharacterAnimation={() =>
-        void generationWorkflow.submitCharacterAnimation()
-      }
-      onCloseGenerateComposer={generationWorkflow.closeGenerateComposer}
-      onUpdateSpecFormValue={generationWorkflow.updateSpecFormValue}
-      onUpdateIconDescription={generationWorkflow.updateIconDescription}
-      onAddIconDescription={generationWorkflow.addIconDescription}
-      onUpdateCharacterAnimationDuration={
-        generationWorkflow.updateCharacterAnimationDuration
-      }
-      onRememberImageModel={generationWorkflow.rememberImageModel}
-      onSpecMenuPointerEnter={() => openToolbarOptionMenu('spec')}
-      onSpecMenuPointerLeave={() => closeToolbarOptionMenu('spec')}
+        specToolWrapRef={specToolWrapRef}
+        characterSpecButtonRef={characterSpecButtonRef}
+        characterReferenceButtonRef={characterReferenceButtonRef}
+        generationReferenceButtonRef={generationReferenceButtonRef}
+        iconSpecButtonRef={iconSpecButtonRef}
+        isSpecMenuOpen={generationWorkflow.isSpecMenuOpen}
+        isGenerationReferenceMenuOpen={
+          generationWorkflow.isGenerationReferenceMenuOpen
+        }
+        isCharacterSpecMenuOpen={generationWorkflow.isCharacterSpecMenuOpen}
+        isCharacterReferenceMenuOpen={
+          generationWorkflow.isCharacterReferenceMenuOpen
+        }
+        isIconSpecMenuOpen={generationWorkflow.isIconSpecMenuOpen}
+        isUiDesignSpecMenuOpen={generationWorkflow.isUiDesignSpecMenuOpen}
+        isPickingGenerationReferenceFromCanvas={
+          generationWorkflow.isPickingGenerationReferenceFromCanvas
+        }
+        isPickingCharacterSpecFromCanvas={
+          generationWorkflow.isPickingCharacterSpecFromCanvas
+        }
+        isPickingCharacterReferenceFromCanvas={
+          generationWorkflow.isPickingCharacterReferenceFromCanvas
+        }
+        isPickingIconSpecFromCanvas={
+          generationWorkflow.isPickingIconSpecFromCanvas
+        }
+        isPickingUiDesignSpecFromCanvas={
+          generationWorkflow.isPickingUiDesignSpecFromCanvas
+        }
+        generateDialog={generateDialog}
+        generationComposerStyle={generationComposerStyle}
+        iconComposerStyle={iconComposerStyle}
+        quickEditPanel={generationWorkflow.quickEditPanel}
+        quickEditSourceLayer={generationWorkflow.quickEditSourceLayer}
+        quickEditPanelStyle={quickEditPanelStyle}
+        cropExpandPanel={generationWorkflow.cropExpandPanel}
+        cropExpandSourceLayer={generationWorkflow.cropExpandSourceLayer}
+        cropExpandPanelStyle={cropExpandPanelStyle}
+        quickEditSizeOptions={generationWorkflow.quickEditSizeOptions}
+        quickEditModelOptions={generationWorkflow.quickEditModelOptions}
+        characterAnimationPanel={generationWorkflow.characterAnimationPanel}
+        characterAnimationSourceLayer={
+          generationWorkflow.characterAnimationSourceLayer
+        }
+        characterAnimationPanelStyle={characterAnimationPanelStyle}
+        characterAnimationPrice={generationWorkflow.characterAnimationPrice}
+        setGenerateDialog={setGenerateDialog}
+        setQuickEditPanel={generationWorkflow.setQuickEditPanel}
+        setCropExpandPanel={generationWorkflow.setCropExpandPanel}
+        setCharacterAnimationPanel={
+          generationWorkflow.setCharacterAnimationPanel
+        }
+        setIsCharacterSpecMenuOpen={
+          generationWorkflow.setIsCharacterSpecMenuOpen
+        }
+        setIsCharacterReferenceMenuOpen={
+          generationWorkflow.setIsCharacterReferenceMenuOpen
+        }
+        setIsGenerationReferenceMenuOpen={
+          generationWorkflow.setIsGenerationReferenceMenuOpen
+        }
+        setIsIconSpecMenuOpen={generationWorkflow.setIsIconSpecMenuOpen}
+        setIsUiDesignSpecMenuOpen={generationWorkflow.setIsUiDesignSpecMenuOpen}
+        setIsPickingGenerationReferenceFromCanvas={
+          generationWorkflow.setIsPickingGenerationReferenceFromCanvas
+        }
+        setIsPickingCharacterSpecFromCanvas={
+          generationWorkflow.setIsPickingCharacterSpecFromCanvas
+        }
+        setIsPickingCharacterReferenceFromCanvas={
+          generationWorkflow.setIsPickingCharacterReferenceFromCanvas
+        }
+        setIsPickingIconSpecFromCanvas={
+          generationWorkflow.setIsPickingIconSpecFromCanvas
+        }
+        setIsPickingUiDesignSpecFromCanvas={
+          generationWorkflow.setIsPickingUiDesignSpecFromCanvas
+        }
+        onOpenSpecDialog={generationWorkflow.openSpecDialog}
+        onRequestUpload={requestUpload}
+        onSubmitImageGeneration={(dialog) =>
+          void generationWorkflow.submitImageGeneration(dialog)
+        }
+        onSubmitIconSpritesheetGeneration={(dialog) =>
+          void generationWorkflow.submitIconSpritesheetGeneration(dialog)
+        }
+        onSubmitQuickEdit={() => void generationWorkflow.submitQuickEdit()}
+        onSubmitCropExpand={() => void generationWorkflow.submitCropExpand()}
+        onSubmitCharacterAnimation={() =>
+          void generationWorkflow.submitCharacterAnimation()
+        }
+        onCloseGenerateComposer={generationWorkflow.closeGenerateComposer}
+        onUpdateSpecFormValue={generationWorkflow.updateSpecFormValue}
+        onUpdateIconDescriptionText={
+          generationWorkflow.updateIconDescriptionsText
+        }
+        onUpdateCharacterAnimationDuration={
+          generationWorkflow.updateCharacterAnimationDuration
+        }
+        onRememberImageModel={generationWorkflow.rememberImageModel}
+        onSpecMenuPointerEnter={() => openToolbarOptionMenu('spec')}
+        onSpecMenuPointerLeave={() => closeToolbarOptionMenu('spec')}
       />
       {generationWorkflow.isMusicMenuOpen
         ? renderEditorPortal(
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 9b133f4f3..0b4a74b3d 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -1,7 +1,6 @@
 /* @vitest-environment jsdom */
 
 import {
-  act,
   fireEvent,
   render,
   screen,
@@ -14,7 +13,6 @@ import type {
   CanvasGenerationDialogState,
   CanvasLayer,
   CanvasTool,
-  GenerateDialogState,
   ImageContextMenuState,
   SidebarPanel,
 } from './ImageCanvasEditorTypes';
@@ -104,6 +102,7 @@ function GenerationWorkflowHarness({
     canvasSize: { width: 900, height: 640 },
     viewport,
     setViewport,
+    setLayers,
     canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     layerCounterRef,
     generateDialog: dialogs.generateDialog,
@@ -118,6 +117,7 @@ function GenerationWorkflowHarness({
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]),
     selectSingleLayer: setSelectedLayerId,
     fitLayers: fitLayersMockRef.current,
+    captureCanvasHistory: () => {},
     setActiveTool,
     setActiveSidebarPanel,
     setMetadataLayer,
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 14d56f66c..c570f405c 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -13,6 +13,7 @@ import type {
   CanvasTool,
   CanvasViewport,
   CharacterAnimationPanelState,
+  CropExpandPanelState,
   GenerateDialogState,
   ImageContextMenuState,
   QuickEditPanelState,
@@ -23,10 +24,9 @@ import type {
 import {
   appendCharacterReference,
   appendGenerationReference,
-  appendIconDescriptionToDialog,
-  assignUiDesignSpecReference,
   assignCharacterSpecReference,
   assignIconSpecReference,
+  assignUiDesignSpecReference,
   closeGenerateComposerDialog,
   createBackgroundMusicGenerationDialogDraft,
   createCharacterAnimationPanelDraft,
@@ -35,26 +35,34 @@ import {
   createGenerateDialogDraft,
   createIconGenerationDialogDraft,
   createQuickEditPanelDraft,
+  createRedrawPanelDraft,
   createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
   createVideoGenerationDialogDraft,
   hideGeneratedLayerComposerAfterBlur,
   updateCharacterAnimationDurationPanel,
-  updateIconDescriptionInDialog,
+  updateIconDescriptionsTextInDialog,
   updateSpecFormDialogValue,
 } from './ImageCanvasGenerationDialogModel';
-import {
-  centerViewportOnPlacement,
-  chooseGenerationPlacement,
-} from './ImageCanvasGenerationPlacementModel';
 import {
   buildQuickEditModelOptions,
   buildQuickEditSizeOptions,
   calculateCharacterAnimationPrice,
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_IMAGE_MODEL,
+  ICON_DESCRIPTION_LIMIT,
 } from './ImageCanvasGenerationModel';
+import {
+  centerViewportOnPlacement,
+  chooseGenerationPlacement,
+} from './ImageCanvasGenerationPlacementModel';
+import {
+  buildCropExpandLayerPatch,
+  parseCropExpandInsetValue,
+  removeImageBackground,
+  renderCropExpandImage,
+} from './ImageCanvasRasterEditModel';
 import { useImageCanvasGenerationSubmissionWorkflow } from './useImageCanvasGenerationSubmissionWorkflow';
 
 type CanvasSize = { width: number; height: number };
@@ -68,6 +76,7 @@ type GenerationWorkflowOptions = {
   canvasSize: CanvasSize;
   viewport: CanvasViewport;
   setViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
   canvasGenerationDialogs: CanvasGenerationDialogState[];
   layerCounterRef: MutableRefObject<number>;
   generateDialog: GenerateDialogState | null;
@@ -87,11 +96,13 @@ type GenerationWorkflowOptions = {
   appendCanvasLayersWithResources: (nextLayers: CanvasLayer[]) => void;
   selectSingleLayer: (layerId: string | null) => void;
   fitLayers: (targetLayers?: CanvasLayer[]) => void;
+  captureCanvasHistory: () => void;
   setActiveTool: Dispatch<SetStateAction<CanvasTool>>;
   setActiveSidebarPanel: Dispatch<SetStateAction<SidebarPanel | null>>;
   setMetadataLayer: Dispatch<SetStateAction<CanvasLayer | null>>;
   setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
   persistGeneratedAsset?: (layer: CanvasLayer) => void;
+  persistUpdatedLayerResource?: (layer: CanvasLayer) => void;
 };
 
 export function useImageCanvasGenerationWorkflow({
@@ -99,6 +110,7 @@ export function useImageCanvasGenerationWorkflow({
   canvasSize,
   viewport,
   setViewport,
+  setLayers,
   canvasGenerationDialogs,
   layerCounterRef,
   generateDialog,
@@ -111,11 +123,13 @@ export function useImageCanvasGenerationWorkflow({
   appendCanvasLayersWithResources,
   selectSingleLayer,
   fitLayers,
+  captureCanvasHistory,
   setActiveTool,
   setActiveSidebarPanel,
   setMetadataLayer,
   setImageContextMenu,
   persistGeneratedAsset,
+  persistUpdatedLayerResource,
 }: GenerationWorkflowOptions) {
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
   const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
@@ -144,6 +158,8 @@ export function useImageCanvasGenerationWorkflow({
   const [isMusicMenuOpen, setIsMusicMenuOpen] = useState(false);
   const [quickEditPanel, setQuickEditPanel] =
     useState<QuickEditPanelState | null>(null);
+  const [cropExpandPanel, setCropExpandPanel] =
+    useState<CropExpandPanelState | null>(null);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
     useState<CharacterAnimationPanelState | null>(null);
   const [lastImageModel, setLastImageModel] = useState(DEFAULT_IMAGE_MODEL);
@@ -152,6 +168,10 @@ export function useImageCanvasGenerationWorkflow({
     ? (layers.find((layer) => layer.id === quickEditPanel.sourceLayerId) ??
       null)
     : null;
+  const cropExpandSourceLayer = cropExpandPanel
+    ? (layers.find((layer) => layer.id === cropExpandPanel.sourceLayerId) ??
+      null)
+    : null;
   const characterAnimationSourceLayer = characterAnimationPanel
     ? (layers.find(
         (layer) => layer.id === characterAnimationPanel.sourceLayerId,
@@ -175,7 +195,13 @@ export function useImageCanvasGenerationWorkflow({
     : 0;
   const iconDescriptionValues =
     generateDialog?.mode === 'icon'
-      ? (generateDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS)
+      ? generateDialog.prompt.trim()
+        ? generateDialog.prompt
+            .split(/[\r\n,，、;；/|]+/u)
+            .map((description) => description.trim())
+            .filter(Boolean)
+            .slice(0, ICON_DESCRIPTION_LIMIT)
+        : (generateDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS)
       : DEFAULT_ICON_DESCRIPTIONS;
 
   const closeGenerationTransientState = useCallback(() => {
@@ -237,6 +263,7 @@ export function useImageCanvasGenerationWorkflow({
       setActiveTool(activeTool);
       selectSingleLayer(null);
       setQuickEditPanel(null);
+      setCropExpandPanel(null);
       setCharacterAnimationPanel(null);
     },
     [closeGenerationTransientState, selectSingleLayer, setActiveTool],
@@ -277,6 +304,7 @@ export function useImageCanvasGenerationWorkflow({
       }
       setImageContextMenu(null);
       setQuickEditPanel(null);
+      setCropExpandPanel(null);
       setCharacterAnimationPanel(nextPanel);
       selectSingleLayer(layer.id);
     },
@@ -374,6 +402,7 @@ export function useImageCanvasGenerationWorkflow({
       setMetadataLayer(null);
       setImageContextMenu(null);
       setQuickEditPanel(null);
+      setCropExpandPanel(null);
       setGenerateDialog(createEditDialogDraft(sourceLayer));
       setActiveTool('generate');
     },
@@ -385,6 +414,7 @@ export function useImageCanvasGenerationWorkflow({
       setImageContextMenu(null);
       setMetadataLayer(null);
       setGenerateDialog(null);
+      setCropExpandPanel(null);
       setCharacterAnimationPanel(null);
       setQuickEditPanel(createQuickEditPanelDraft(sourceLayer));
       selectSingleLayer(sourceLayer.id);
@@ -399,6 +429,176 @@ export function useImageCanvasGenerationWorkflow({
     ],
   );
 
+  const updateSourceLayer = useCallback(
+    (
+      sourceLayerId: string,
+      updater: (layer: CanvasLayer) => CanvasLayer,
+    ) => {
+      const sourceLayer = layers.find((layer) => layer.id === sourceLayerId);
+      if (!sourceLayer) {
+        return;
+      }
+      const updatedLayer = updater(sourceLayer);
+      captureCanvasHistory();
+      setLayers((currentLayers) =>
+        currentLayers.map((layer) =>
+          layer.id === sourceLayerId ? updatedLayer : layer,
+        ),
+      );
+      persistUpdatedLayerResource?.(updatedLayer);
+      selectSingleLayer(sourceLayerId);
+      fitLayers([updatedLayer]);
+    },
+    [
+      captureCanvasHistory,
+      fitLayers,
+      layers,
+      persistUpdatedLayerResource,
+      selectSingleLayer,
+      setLayers,
+    ],
+  );
+
+  const openRedrawPanel = useCallback(
+    (sourceLayer: CanvasLayer) => {
+      setImageContextMenu(null);
+      setMetadataLayer(null);
+      setGenerateDialog(null);
+      setCropExpandPanel(null);
+      setCharacterAnimationPanel(null);
+      setQuickEditPanel(createRedrawPanelDraft(sourceLayer));
+      selectSingleLayer(sourceLayer.id);
+      setActiveTool('generate');
+    },
+    [
+      selectSingleLayer,
+      setActiveTool,
+      setGenerateDialog,
+      setImageContextMenu,
+      setMetadataLayer,
+    ],
+  );
+
+  const openCropExpandPanel = useCallback(
+    (sourceLayer: CanvasLayer) => {
+      setImageContextMenu(null);
+      setMetadataLayer(null);
+      setGenerateDialog(null);
+      setQuickEditPanel(null);
+      setCharacterAnimationPanel(null);
+      setCropExpandPanel({
+        sourceLayerId: sourceLayer.id,
+        insets: {
+          left: '0',
+          top: '0',
+          right: '0',
+          bottom: '0',
+        },
+        status: 'idle',
+      });
+      selectSingleLayer(sourceLayer.id);
+      setActiveTool('select');
+    },
+    [
+      selectSingleLayer,
+      setActiveTool,
+      setGenerateDialog,
+      setImageContextMenu,
+      setMetadataLayer,
+    ],
+  );
+
+  const submitCropExpand = useCallback(async () => {
+    if (!cropExpandPanel || !cropExpandSourceLayer) {
+      return;
+    }
+
+    try {
+      const insets = {
+        left: parseCropExpandInsetValue(cropExpandPanel.insets.left),
+        top: parseCropExpandInsetValue(cropExpandPanel.insets.top),
+        right: parseCropExpandInsetValue(cropExpandPanel.insets.right),
+        bottom: parseCropExpandInsetValue(cropExpandPanel.insets.bottom),
+      };
+      setCropExpandPanel({
+        ...cropExpandPanel,
+        status: 'processing',
+        errorMessage: undefined,
+      });
+      const result = await renderCropExpandImage({
+        source: cropExpandSourceLayer.src,
+        insets,
+      });
+      const layerPatch = buildCropExpandLayerPatch({
+        layerX: cropExpandSourceLayer.x,
+        layerY: cropExpandSourceLayer.y,
+        insets,
+        outputWidth: result.width,
+        outputHeight: result.height,
+      });
+      updateSourceLayer(cropExpandSourceLayer.id, (layer) => ({
+        ...layer,
+        ...layerPatch,
+        src: result.imageSrc,
+        objectKey: null,
+        assetObjectId: null,
+        sourceAssetId: null,
+      }));
+      setCropExpandPanel(null);
+      setActiveSidebarPanel('layers');
+    } catch (error) {
+      setCropExpandPanel({
+        ...cropExpandPanel,
+        status: 'failed',
+        errorMessage:
+          error instanceof Error && error.message.trim()
+            ? error.message
+            : '裁扩图片失败',
+      });
+    }
+  }, [
+    cropExpandPanel,
+    cropExpandSourceLayer,
+    setActiveSidebarPanel,
+    updateSourceLayer,
+  ]);
+
+  const removeSelectedLayerBackground = useCallback(
+    async (sourceLayer: CanvasLayer) => {
+      setImageContextMenu(null);
+      setMetadataLayer(null);
+      setCropExpandPanel(null);
+      setQuickEditPanel(null);
+      try {
+        const result = await removeImageBackground(sourceLayer.src);
+        updateSourceLayer(sourceLayer.id, (layer) => ({
+          ...layer,
+          src: result.imageSrc,
+          width: result.width,
+          height: result.height,
+          originalWidth: result.width,
+          originalHeight: result.height,
+          objectKey: null,
+          assetObjectId: null,
+          sourceAssetId: null,
+        }));
+        setActiveSidebarPanel('layers');
+      } catch (error) {
+        window.alert(
+          error instanceof Error && error.message.trim()
+            ? error.message
+            : '去除背景失败',
+        );
+      }
+    },
+    [
+      setActiveSidebarPanel,
+      setImageContextMenu,
+      setMetadataLayer,
+      updateSourceLayer,
+    ],
+  );
+
   const pickCharacterSpecFromLayer = useCallback(
     (layer: CanvasLayer) => {
       setGenerateDialog((currentDialog) =>
@@ -461,19 +661,15 @@ export function useImageCanvasGenerationWorkflow({
     [setGenerateDialog, setImageContextMenu],
   );
 
-  const updateIconDescription = useCallback(
-    (index: number, value: string) => {
+  const updateIconDescriptionsText = useCallback(
+    (value: string) => {
       setGenerateDialog((currentDialog) =>
-        updateIconDescriptionInDialog(currentDialog, index, value),
+        updateIconDescriptionsTextInDialog(currentDialog, value),
       );
     },
     [setGenerateDialog],
   );
 
-  const addIconDescription = useCallback(() => {
-    setGenerateDialog(appendIconDescriptionToDialog);
-  }, [setGenerateDialog]);
-
   const generationSubmissionWorkflow = useImageCanvasGenerationSubmissionWorkflow({
     layers,
     canvasSize,
@@ -538,6 +734,9 @@ export function useImageCanvasGenerationWorkflow({
       setQuickEditPanel((currentPanel) =>
         currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
       );
+      setCropExpandPanel((currentPanel) =>
+        currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
+      );
       setCharacterAnimationPanel((currentPanel) =>
         currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
       );
@@ -557,6 +756,9 @@ export function useImageCanvasGenerationWorkflow({
       quickEditPanel,
       setQuickEditPanel,
       quickEditSourceLayer,
+      cropExpandPanel,
+      setCropExpandPanel,
+      cropExpandSourceLayer,
       quickEditSizeOptions,
       quickEditModelOptions,
       characterAnimationPanel,
@@ -599,6 +801,9 @@ export function useImageCanvasGenerationWorkflow({
       openBackgroundMusicGenerationDialog,
       openEditDialog,
       openQuickEditPanel,
+      openRedrawPanel,
+      openCropExpandPanel,
+      removeSelectedLayerBackground,
       pickCharacterSpecFromLayer,
       pickGenerationReferenceFromLayer,
       pickCharacterReferenceFromLayer,
@@ -606,10 +811,10 @@ export function useImageCanvasGenerationWorkflow({
       pickUiDesignSpecFromLayer,
       submitIconSpritesheetGeneration,
       submitQuickEdit,
+      submitCropExpand,
       submitImageGeneration,
       updateSpecFormValue,
-      updateIconDescription,
-      addIconDescription,
+      updateIconDescriptionsText,
       updateCharacterAnimationDuration,
       rememberImageModel: setLastImageModel,
       submitCharacterAnimation,
@@ -618,12 +823,13 @@ export function useImageCanvasGenerationWorkflow({
       clearDeletedLayerGenerationState,
     }),
     [
-      addIconDescription,
       characterAnimationPanel,
       characterAnimationPrice,
       characterAnimationSourceLayer,
       clearDeletedLayerGenerationState,
       closeGenerateComposer,
+      cropExpandPanel,
+      cropExpandSourceLayer,
       hideGeneratedLayerPanelAfterBlur,
       iconDescriptionValues,
       isCharacterReferenceMenuOpen,
@@ -641,9 +847,11 @@ export function useImageCanvasGenerationWorkflow({
       openBackgroundMusicGenerationDialog,
       openCharacterAnimationPanel,
       openCharacterGenerationDialog,
+      openCropExpandPanel,
       openEditDialog,
       openGenerateDialog,
       openIconGenerationDialog,
+      openRedrawPanel,
       openUiDesignGenerationDialog,
       openQuickEditPanel,
       openSpecDialog,
@@ -658,12 +866,14 @@ export function useImageCanvasGenerationWorkflow({
       quickEditPanel,
       quickEditSizeOptions,
       quickEditSourceLayer,
+      removeSelectedLayerBackground,
       submitCharacterAnimation,
+      submitCropExpand,
       submitIconSpritesheetGeneration,
       submitImageGeneration,
       submitQuickEdit,
       updateCharacterAnimationDuration,
-      updateIconDescription,
+      updateIconDescriptionsText,
       updateSpecFormValue,
     ],
   );
diff --git a/src/components/image-editor/useImageCanvasLayerCommands.test.tsx b/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
index 7202fa741..552341205 100644
--- a/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
+++ b/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
@@ -61,7 +61,7 @@ function LayerCommandsHarness({
   );
   const [historyCount, setHistoryCount] = useState(0);
   const [imageContextClosedCount, setImageContextClosedCount] = useState(0);
-  const [activeTool, setActiveTool] = useState('shape');
+  const [activeTool, setActiveTool] = useState('select');
 
   const selectSingleLayer = (layerId: string | null) => {
     setSelectedLayerId(layerId);
diff --git a/src/index.css b/src/index.css
index 652df66c1..8fe69b7d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3965,6 +3965,31 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-radius: 0.45rem;
 }
 
+.image-canvas-editor__bottom-tool-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.image-canvas-editor__bottom-toolbar-divider,
+.image-canvas-editor__floating-toolbar-divider {
+  display: inline-block;
+  width: 1px;
+  height: 0.5rem;
+  flex: 0 0 auto;
+  align-self: center;
+  border-radius: 999px;
+  background: #d9dee8;
+}
+
+.image-canvas-editor__floating-toolbar-divider {
+  height: 1.125rem;
+}
+
+.image-canvas-editor__bottom-toolbar-option-wrap {
+  display: inline-flex;
+}
+
 .image-canvas-editor__viewport {
   position: relative;
   min-width: 0;
@@ -4120,6 +4145,62 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #c7c7c7;
 }
 
+.image-canvas-editor__generation-frame--character {
+  background: radial-gradient(
+      circle at 50% 34%,
+      rgba(250, 245, 255, 0.94),
+      transparent 30%
+    ),
+    linear-gradient(135deg, rgba(250, 245, 255, 0.84), rgba(243, 232, 255, 0.72));
+}
+
+.image-canvas-editor__generation-frame--character.image-canvas-editor__generation-frame--focused {
+  border-color: rgba(147, 51, 234, 0.72);
+}
+
+.image-canvas-editor__generation-frame--character
+  .image-canvas-editor__generation-frame-icon {
+  color: #9333ea;
+}
+
+.image-canvas-editor__generation-frame--video {
+  background:
+    linear-gradient(90deg, rgba(15, 23, 42, 0.12) 10%, transparent 10% 90%, rgba(15, 23, 42, 0.12) 90%),
+    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.82));
+}
+
+.image-canvas-editor__generation-frame--video.image-canvas-editor__generation-frame--focused {
+  border-color: rgba(37, 99, 235, 0.72);
+}
+
+.image-canvas-editor__generation-frame--video
+  .image-canvas-editor__generation-frame-icon {
+  color: #2563eb;
+}
+
+.image-canvas-editor__generation-frame--audio-sound-effect,
+.image-canvas-editor__generation-frame--audio-background-music {
+  background:
+    repeating-linear-gradient(
+      90deg,
+      rgba(79, 70, 229, 0.14) 0 0.22rem,
+      transparent 0.22rem 0.58rem
+    ),
+    linear-gradient(135deg, rgba(238, 242, 255, 0.92), rgba(224, 231, 255, 0.8));
+}
+
+.image-canvas-editor__generation-frame--audio-sound-effect.image-canvas-editor__generation-frame--focused,
+.image-canvas-editor__generation-frame--audio-background-music.image-canvas-editor__generation-frame--focused {
+  border-color: rgba(79, 70, 229, 0.72);
+}
+
+.image-canvas-editor__generation-frame--audio-sound-effect
+  .image-canvas-editor__generation-frame-icon,
+.image-canvas-editor__generation-frame--audio-background-music
+  .image-canvas-editor__generation-frame-icon {
+  color: #4f46e5;
+}
+
 .image-canvas-editor__generation-frame--generating {
   overflow: hidden;
   background: radial-gradient(
@@ -4385,6 +4466,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
 }
 
+.image-canvas-editor__kind-badge--video {
+  background: rgba(37, 99, 235, 0.92);
+  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
+}
+
 .image-canvas-editor__kind-badge--sound-effect,
 .image-canvas-editor__kind-badge--background-music {
   background: rgba(79, 70, 229, 0.92);
@@ -4408,6 +4494,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   position: absolute;
   z-index: 8;
   display: inline-flex;
+  align-items: center;
   gap: 0.3rem;
   border: 1px solid #d9dee8;
   border-radius: 0.5rem;
@@ -4417,6 +4504,16 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   transform: translate(-50%, -100%);
 }
 
+.image-canvas-editor__floating-toolbar button.image-canvas-editor__floating-toolbar-text-button {
+  width: auto;
+  min-width: 0;
+  gap: 0.35rem;
+  padding: 0 0.62rem;
+  font-size: 0.74rem;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
 .image-canvas-editor__reset-button {
   position: absolute;
   right: 0.85rem;
@@ -5319,6 +5416,47 @@ button.image-canvas-editor__reference-chip:disabled {
   box-shadow: inset 0 0 0 1px #202124;
 }
 
+.image-canvas-editor__option-popover--audio-options {
+  display: grid;
+  min-width: 16.4rem;
+  gap: 0.72rem;
+  padding: 0.88rem;
+}
+
+.image-canvas-editor__audio-type-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.image-canvas-editor__audio-bpm-control {
+  display: grid;
+  grid-template-columns: minmax(7rem, 1fr) 4.7rem;
+  align-items: center;
+  gap: 0.56rem;
+}
+
+.image-canvas-editor__audio-bpm-control input[type='range'] {
+  width: 100%;
+  accent-color: #4f46e5;
+}
+
+.image-canvas-editor__audio-bpm-control input[type='number'] {
+  min-width: 0;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 999px;
+  background: #f8fafc;
+  padding: 0.46rem 0.62rem;
+  color: #0f172a;
+  font-size: 0.82rem;
+  font-weight: 760;
+  outline: none;
+}
+
+.image-canvas-editor__audio-bpm-control input[type='number']:focus {
+  border-color: rgba(79, 70, 229, 0.42);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
 .image-canvas-editor__option-popover-choice--model {
   display: grid;
   width: 100%;
@@ -5514,41 +5652,22 @@ button.image-canvas-editor__reference-chip:disabled {
   z-index: 13;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  min-width: 28rem;
-  max-width: none;
-  gap: 0.55rem;
-  overflow: visible;
-  border: 1px solid rgba(134, 146, 166, 0.24);
-  border-radius: 1.45rem;
-  background: radial-gradient(
-      circle at 10% 0%,
-      rgba(240, 253, 250, 0.95),
-      transparent 36%
-    ),
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.98),
-      rgba(248, 250, 252, 0.96)
-    );
-  padding: 0.72rem 0.78rem 0.76rem;
+  grid-template-rows: auto minmax(5.8rem, auto) auto auto;
+  width: min(34rem, calc(100% - 1.5rem));
+  min-height: 11.2rem;
+  gap: 0.5rem;
+  border: 1px solid #cfd6df;
+  border-radius: 1.35rem;
+  background: #ffffff;
+  padding: 0.62rem 0.7rem 0.68rem;
   color: #1f2937;
-  box-shadow:
-    0 20px 54px rgba(15, 23, 42, 0.17),
-    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
   transform: translateX(-50%);
 }
 
-.image-canvas-editor__icon-spec-row {
-  display: grid;
-  grid-template-columns: minmax(15.5rem, 1fr) auto;
-  min-width: 0;
-  align-items: stretch;
-  gap: 0.5rem;
-}
-
-.image-canvas-editor__icon-spec-row .image-canvas-editor__character-spec-wrap {
-  display: flex;
-  min-width: 0;
+.image-canvas-editor__icon-composer .image-canvas-editor__generation-prompt {
+  min-height: 5.8rem;
+  padding-top: 0.42rem;
 }
 
 .image-canvas-editor__icon-spec-card:disabled {
@@ -5556,47 +5675,6 @@ button.image-canvas-editor__reference-chip:disabled {
   opacity: 0.68;
 }
 
-.image-canvas-editor__icon-spec-actions {
-  display: grid;
-  grid-auto-flow: column;
-  align-items: stretch;
-  gap: 0.32rem;
-}
-
-.image-canvas-editor__icon-spec-actions button {
-  min-width: 3rem;
-  border: 1px solid rgba(148, 163, 184, 0.25);
-  border-radius: 0.9rem;
-  background: rgba(255, 255, 255, 0.86);
-  padding: 0 0.42rem;
-  color: #475569;
-  font-size: 0.72rem;
-  font-weight: 900;
-  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
-}
-
-.image-canvas-editor__icon-spec-actions button:hover:not(:disabled) {
-  transform: translateY(-1px);
-  border-color: rgba(16, 185, 129, 0.35);
-  background: #ffffff;
-  color: #047857;
-}
-
-.image-canvas-editor__icon-spec-actions button:disabled {
-  cursor: wait;
-  opacity: 0.56;
-}
-
-.image-canvas-editor__icon-description-list {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 8.4rem;
-  align-items: stretch;
-  gap: 0.46rem;
-  overflow: visible;
-  padding: 0.02rem 0;
-}
-
 .image-canvas-editor__field-block {
   display: grid;
   gap: 0.42rem;
@@ -5636,61 +5714,6 @@ button.image-canvas-editor__reference-chip:disabled {
   scrollbar-width: thin;
 }
 
-.image-canvas-editor__icon-description-card {
-  display: grid;
-  min-width: 0;
-  gap: 0.32rem;
-  border: 1px solid rgba(148, 163, 184, 0.22);
-  border-radius: 1.05rem;
-  background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.96),
-      rgba(248, 250, 252, 0.92)
-    ),
-    #ffffff;
-  padding: 0.45rem;
-  box-shadow:
-    0 10px 24px rgba(15, 23, 42, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.9);
-}
-
-.image-canvas-editor__icon-description-index {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  border-radius: 999px;
-  background: #111827;
-  padding: 0.1rem 0.36rem;
-  color: #ffffff;
-  font-size: 0.64rem;
-  font-weight: 900;
-  letter-spacing: 0.05em;
-}
-
-.image-canvas-editor__icon-description-title {
-  color: #475569;
-  font-size: 0.7rem;
-  font-weight: 900;
-  letter-spacing: 0.04em;
-}
-
-.image-canvas-editor__icon-description-input {
-  min-height: 2.25rem;
-}
-
-.image-canvas-editor__icon-footer {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 0.48rem;
-}
-
-.image-canvas-editor__icon-footer
-  .image-canvas-editor__character-reference-add {
-  min-width: 6.2rem;
-  height: 2.55rem;
-}
-
 .image-canvas-editor__character-reference-row {
   display: flex;
   min-width: 0;
@@ -6004,7 +6027,8 @@ button.image-canvas-editor__reference-chip:disabled {
   color: #991b1b !important;
 }
 
-.image-canvas-editor__quick-edit-panel {
+.image-canvas-editor__quick-edit-panel,
+.image-canvas-editor__crop-expand-panel {
   position: absolute;
   z-index: 14;
   display: grid;
@@ -6021,6 +6045,10 @@ button.image-canvas-editor__reference-chip:disabled {
   transform: translateX(-50%);
 }
 
+.image-canvas-editor__crop-expand-panel {
+  width: min(19rem, calc(100vw - 1.5rem));
+}
+
 .image-canvas-editor__quick-edit-head {
   display: flex;
   align-items: center;
@@ -6068,6 +6096,30 @@ button.image-canvas-editor__reference-chip:disabled {
   min-width: 6.8rem;
 }
 
+.image-canvas-editor__crop-expand-fields {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.image-canvas-editor__crop-expand-field {
+  display: grid;
+  gap: 0.26rem;
+  color: #475569;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__crop-expand-error {
+  margin: 0;
+  border-radius: 0.72rem;
+  background: #fff1f2;
+  padding: 0.48rem 0.62rem;
+  color: #be123c;
+  font-size: 0.74rem;
+  font-weight: 800;
+}
+
 .image-canvas-editor__character-animation-panel {
   position: absolute;
   z-index: 14;
@@ -6402,15 +6454,11 @@ button.image-canvas-editor__reference-chip:disabled {
     right: auto;
     top: auto !important;
     bottom: 3.85rem;
+    width: calc(100% - 1.5rem) !important;
     min-width: 0;
-    max-width: none;
     transform: none;
   }
 
-  .image-canvas-editor__icon-spec-row {
-    grid-template-columns: minmax(14rem, 1fr) auto;
-  }
-
   .image-canvas-editor__canvas-pick-hint {
     position: fixed;
     top: 4.35rem;
@@ -6438,6 +6486,10 @@ button.image-canvas-editor__reference-chip:disabled {
     height: 2rem;
   }
 
+  .image-canvas-editor__floating-toolbar button.image-canvas-editor__floating-toolbar-text-button {
+    width: auto;
+  }
+
   .image-canvas-editor__floating-toolbar {
     max-width: calc(100% - 1.5rem);
     overflow-x: auto;
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index e7d15df65..db886302a 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import {
   createEditorAsset,
@@ -9,8 +9,8 @@ import {
   deleteEditorAssetFolder,
   deleteEditorProject,
   editEditorImage,
-  generateEditorCharacterAnimation,
   generateEditorBackgroundMusic,
+  generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
   generateEditorImage,
   generateEditorSoundEffect,
@@ -591,11 +591,13 @@ describe('editorProjectClient', () => {
       model: 'gemini-3.1-flash-image-preview',
       provider: 'VectorEngine',
       taskId: 'icon-spritesheet-task-1',
+      priceMudPoints: 12,
     });
 
     const result = await generateEditorIconSpritesheet({
       referenceImageSrc: 'data:image/png;base64,spec',
       iconDescriptions: ['返回按钮', '设置按钮'],
+      priceMudPoints: 12,
     });
 
     expect(result.taskId).toBe('icon-spritesheet-task-1');
@@ -608,6 +610,7 @@ describe('editorProjectClient', () => {
           referenceImageSrc: 'data:image/png;base64,spec',
           iconDescriptions: ['返回按钮', '设置按钮'],
           model: 'gemini-3.1-flash-image-preview',
+          priceMudPoints: 12,
         }),
       }),
       '生成图标素材失败',
@@ -629,6 +632,7 @@ describe('editorProjectClient', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'icon-spritesheet-task-2',
+      priceMudPoints: 12,
     });
 
     await generateEditorIconSpritesheet({
@@ -637,6 +641,7 @@ describe('editorProjectClient', () => {
       model: 'gpt-image-2',
       aspectRatio: '1:1',
       imageSize: '2K',
+      priceMudPoints: 12,
     });
 
     expect(requestJsonMock).toHaveBeenCalledWith(
@@ -650,6 +655,7 @@ describe('editorProjectClient', () => {
           model: 'gpt-image-2',
           aspectRatio: '1:1',
           imageSize: '2K',
+          priceMudPoints: 12,
         }),
       }),
       '生成图标素材失败',
@@ -842,8 +848,12 @@ describe('editorProjectClient', () => {
       sound: 'off',
       priceMudPoints: 100,
       referenceImageSrcs: ['data:image/png;base64,image'],
-      referenceVideoSrcs: ['data:video/mp4;base64,video'],
-      referenceAudioSrcs: ['data:audio/mpeg;base64,audio'],
+      referenceVideoSrcs: [
+        'generated-character-drafts/editor/seedance-references/video/video.mp4',
+      ],
+      referenceAudioSrcs: [
+        'generated-character-drafts/editor/seedance-references/audio/audio.mp3',
+      ],
     });
 
     expect(requestJsonMock).toHaveBeenCalledWith(
@@ -861,8 +871,12 @@ describe('editorProjectClient', () => {
           sound: 'off',
           priceMudPoints: 100,
           referenceImageSrcs: ['data:image/png;base64,image'],
-          referenceVideoSrcs: ['data:video/mp4;base64,video'],
-          referenceAudioSrcs: ['data:audio/mpeg;base64,audio'],
+          referenceVideoSrcs: [
+            'generated-character-drafts/editor/seedance-references/video/video.mp4',
+          ],
+          referenceAudioSrcs: [
+            'generated-character-drafts/editor/seedance-references/audio/audio.mp3',
+          ],
         }),
       }),
       '生成视频失败',
@@ -887,8 +901,8 @@ describe('editorProjectClient', () => {
 
     const result = await generateEditorSoundEffect({
       sound: '金币掉落叮当声',
-      type: 'ui',
-      tempo: 'fast',
+      type: 'one-shot',
+      tempo: 120,
       priceMudPoints: 10,
     });
 
@@ -900,8 +914,8 @@ describe('editorProjectClient', () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           sound: '金币掉落叮当声',
-          type: 'ui',
-          tempo: 'fast',
+          type: 'one-shot',
+          tempo: 120,
           priceMudPoints: 10,
         }),
       }),
@@ -913,6 +927,43 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('keeps editor sound effect tempo as null when BPM is not selected', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      audioSrc: '/generated-character-drafts/editor-audios/sfx-null.mp3',
+      width: 420,
+      height: 120,
+      sourceType: 'generated',
+      prompt: '按钮确认短促音',
+      actualPrompt: '按钮确认短促音',
+      model: 'audio1.0',
+      provider: 'VectorEngine',
+      taskId: 'sound-task-null',
+      priceMudPoints: 10,
+      audioKind: 'sound-effect',
+    });
+
+    await generateEditorSoundEffect({
+      sound: '按钮确认短促音',
+      type: 'one-shot',
+      tempo: null,
+      priceMudPoints: 10,
+    });
+
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/audios/sound-effects/generations',
+      expect.objectContaining({
+        body: JSON.stringify({
+          sound: '按钮确认短促音',
+          type: 'one-shot',
+          tempo: null,
+          priceMudPoints: 10,
+        }),
+      }),
+      '生成游戏音效失败',
+      expect.any(Object),
+    );
+  });
+
   it('generates editor background music through the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       audioSrc: '/generated-character-drafts/editor-audios/bgm.mp3',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 2dfee690e..62f3f47ce 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -101,6 +101,7 @@ export type EditorIconSpritesheetGenerationInput = {
   model?: string;
   aspectRatio?: string;
   imageSize?: string;
+  priceMudPoints: number;
 };
 
 export type EditorImageEditInput = {
@@ -141,6 +142,7 @@ export type EditorIconSpritesheetGenerationResult = {
   model: string;
   provider: string;
   taskId: string;
+  priceMudPoints: number;
 };
 
 export type EditorCharacterAnimationResolution = '480p' | '720p';
@@ -227,8 +229,8 @@ export type EditorVideoGenerationResult = {
 
 export type EditorSoundEffectGenerationInput = {
   sound: string;
-  type: 'ui' | 'foley' | 'ambient';
-  tempo: 'slow' | 'medium' | 'fast';
+  type: 'one-shot' | 'loop';
+  tempo: number | null;
   priceMudPoints: number;
 };
 
@@ -558,6 +560,7 @@ export async function generateEditorIconSpritesheet(
       model: input.model?.trim() || EDITOR_IMAGE_MODEL_NANOBANANA2,
       ...(input.aspectRatio ? { aspectRatio: input.aspectRatio } : {}),
       ...(input.imageSize ? { imageSize: input.imageSize } : {}),
+      priceMudPoints: input.priceMudPoints,
     }),
     '生成图标素材失败',
     {

From 8c749c5f6839bc60d4630e35e747cea92c8876ed Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Thu, 18 Jun 2026 20:34:29 +0800
Subject: [PATCH 16/16] =?UTF-8?q?=E6=94=B9=E8=BF=9B=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E4=B8=AD=E5=8D=A0=E4=BD=8D=E5=9B=BE=E5=88=A0=E9=99=A4=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

生成中占位图删除前提示泥点不返还

占位图增加独立删除按钮并接入键盘删除请求

补充生成中占位图删除确认回归测试

记录本轮画布删除确认验证进度
---
 TRACKING.md                                   |  1 +
 ...CanvasEditorGenerationIntegration.test.tsx | 62 +++++++++++++
 .../ImageCanvasEditorShellView.test.tsx       |  1 +
 .../image-editor/ImageCanvasEditorView.tsx    | 88 +++++++++++++++----
 .../image-editor/ImageCanvasStageView.tsx     |  3 +
 .../ImageCanvasWorldView.test.tsx             |  5 ++
 .../image-editor/ImageCanvasWorldView.tsx     | 28 +++++-
 .../useImageCanvasKeyboardShortcuts.test.tsx  | 30 ++++---
 .../useImageCanvasKeyboardShortcuts.ts        | 16 ++--
 src/index.css                                 | 11 +++
 10 files changed, 207 insertions(+), 38 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 366d27a80..9d577ebd0 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -144,6 +144,7 @@
 - 2026-06-17 前端拆分第十九执行批次：新增 `useImageCanvasCanvasDropWorkflow`，把画布区域 drag over / drag leave / drop 分流从主视图抽出，覆盖素材库图片拖入画布、本地文件拖入画布、无关拖拽不拦截、默认文件夹选择和画布遮罩清理；主视图继续注入素材建层、文件上传、drop 点换算和素材移动高亮清理。新增 hook 单测覆盖拖拽入画布细节，主视图从 1452 行降至 1405 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10003/editor/canvas` 登录态刷新后素材 / 画布 / 小地图和底部工具栏可见，真实鼠标拖拽素材库图片到画布时出现 `添加到画布` 遮罩，松手后画布图层数量从 4 增至 5；`画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；抓手工具可切回选择工具，登录后控制台无前端 error。
 - 2026-06-17 前端拆分第二十执行批次：新增 `ImageCanvasMetadataModalView`，把图片信息弹窗从主视图抽出，承载图片类型、生成输入、参考图、模型、分辨率、Provider、Task 和 Object 信息渲染；主视图只保留 `metadataLayer` 状态和关闭回调。同步修复未登录进入编辑器时项目 / 素材接口抢跑 401、`重置画布视图` 点击事件误传给适合视图函数的问题。新增组件单测覆盖生成图 metadata、上传图 fallback 和关闭回调，新增 hook / 主视图测试覆盖未登录不请求受保护素材 / 工程数据和重置按钮回归；主视图从 1405 行降至 1337 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10003/editor/canvas` 清空会话后直接弹出 `账号入口`，且未登录状态下没有发起 `/api/editor/*` 请求；登录临时开发账号后 `重置画布视图` 无控制台错误，`画布背景设置` 保持 Lovart 式白色浮层，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)`，上传素材可加入画布，右上角图片信息按钮可打开不透明白底元数据弹窗，关闭后 `AI画布工具栏` 仍可见。
 - 2026-06-17 前端拆分第二十一执行批次：新增 `useImageCanvasKeyboardShortcuts`，把 Ctrl / Cmd + Z 撤销、Ctrl / Cmd + Shift + Z 重做、Shift 状态、Backspace / Delete 删除、Escape 关闭临时面板和 Space 临时抓手从主视图抽出；主视图继续注入图层删除、生成对话框、快速编辑和 chrome 面板 setter。新增 hook 单测覆盖输入框忽略快捷键、删除选中图层、删除生成占位、Escape 保留生成中面板、Space 和 Shift；主视图从 1337 行降至 1250 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10003/editor/canvas` 未登录直接弹出 `账号入口` 且未抢跑 `/api/editor/*`，登录后 `/api/editor/assets/library` 和 `/api/editor/projects/recent` 为 200，`AI画布工具栏` 与 `画布面板入口` 可见，viewport 背景为 `rgb(248, 250, 252)` 且 `background-image: none`；按住 Space 从 `文字工具` 临时切到 `抓手工具`，松开恢复 `文字工具`；`画布背景设置` 点击 `暖灰` 后背景变为 `rgb(243, 240, 234)`；点击 `生成工具` 后 `Image Generator` 占位框、`生成图片` 对话框和 `AI画布工具栏` 同时可见，登录后控制台无前端 error。
+- 2026-06-18 生成中占位图删除确认：画布生成占位框增加删除按钮，删除 `generating` 状态占位图时统一弹出 `删除生成中的占位图` 二次确认，并提示 `已消耗的泥点不会返还`；空闲占位仍直接删除。键盘 Backspace / Delete 删除生成占位也改走同一请求入口，避免绕过提示；确认删除后清理选中态、右键菜单并切回选择工具，已删除的生成任务即使后续返回结果也不会落图。验证命令：`npm run test -- src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：本地 Vite + Chrome CDP 打开 `/editor/canvas`，点击 `生成图片` 创建生成中占位，删除按钮弹出确认框，取消后占位保留，确认后占位移除且提示包含泥点不返还。
 - 2026-06-17 前端拆分第二十二执行批次：新增 `useImageCanvasAssetPointerDragBridge`，把素材卡片 pointer 拖拽到画布 / 文件夹的全局监听、拖拽激活、画布 drop 提示、文件夹高亮、移动素材、加入画布和点击抑制从主视图抽出；主视图继续负责素材库事实、画布建层、历史和工程资源持久化。同步恢复 `账号入口` 认证弹窗 portal 渲染，避免全屏画布遮住登录弹窗；`画布背景设置` 调整为独立白色浮层，包含当前色、色域、色相、自定义颜色、预设网格、HEX 输入和恢复默认。验证命令：`npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 未登录打开直接显示 `账号入口`；登录临时开发账号后 `画布背景设置` 显示当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；上传图片进入 `项目素材`，真实 pointer 拖拽素材到画布后图层数从 0 到 1 且 `AI画布工具栏` 保持可见；新建 `SmokeFolder` 后真实 pointer 拖拽素材到文件夹，`项目素材` 变 0、`SmokeFolder` 变 1，素材执行移动而非拷贝。控制台仅有未登录 refresh 401，登录后编辑器 API 均为 200。
 - 2026-06-17 前端拆分第二十三执行批次：新增 `ImageCanvasOverlayModel`，把生成输入框锚定、图标素材生成面板宽度、选中图片工具栏边界、快速编辑面板和角色动画面板定位从主视图抽出为纯模型；主视图继续保留生成 / quick edit / 角色动画状态机和舞台编排。新增模型单测覆盖锚定优先级、生成中隐藏、icon 宽度、工具栏 clamp、quick edit / 角色动画边界和生成 dialog 模式识别；主视图从 1182 行降至 1133 行。验证命令：`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 未登录打开显示 `账号入口`，登录后 `画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，点击 `生成工具` 后 `Image Generator`、`生成图片` 对话框和 `AI画布工具栏` 均可见；素材库已有素材真实 pointer 拖入画布后图层数从 0 到 1，工具栏保持可见，截图留存于 `output/playwright/editor-overlay-model-regression-20260617.png`。
 - 2026-06-17 前端拆分第二十四执行批次：新增 `useImageCanvasAssetCanvasBridge`，把删除素材清理画布图层、素材加入画布、素材 pointer 拖入画布 / 文件夹、画布 drag/drop 分流和文件拖入画布参数组装从主视图抽成素材到画布桥接 hook；主视图继续保留素材库事实、上传读取、工程资源持久化和历史触发。新增 hook 单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态；主视图从 1133 行降至 1086 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`；登录临时开发账号后 `画布背景设置` 是完整设置面板，包含当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，HEX 输入 `#ffffff` 后变为白色，按 Escape 关闭面板；登录后上传图片请求 `/api/editor/assets` 返回 200，素材库出现上传素材，`AI画布工具栏` 保持可见。
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 2871ce2a0..5432b7a23 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -497,6 +497,68 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
   });
 
+  it('confirms before deleting a generating placeholder because mud points are not refunded', async () => {
+    let resolveGeneration!: (value: unknown) => void;
+    generateEditorImageMock.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveGeneration = resolve;
+      }),
+    );
+    render(<ImageCanvasEditorView />);
+
+    await waitFor(() => {
+      expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
+    fireEvent.change(screen.getByLabelText('生成提示词'), {
+      target: { value: '准备删除的生成中图片' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '生成' }));
+
+    const frame = screen.getByLabelText('图像生成占位图');
+    expect(frame.className).toContain(
+      'image-canvas-editor__generation-frame--generating',
+    );
+
+    fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
+
+    const confirmDialog = screen.getByRole('dialog', {
+      name: '删除生成中的占位图',
+    });
+    expect(
+      within(confirmDialog).getByText(
+        '删除后会停止在画布中显示这个生成任务，已消耗的泥点不会返还。',
+      ),
+    ).toBeTruthy();
+    expect(screen.getByLabelText('图像生成占位图')).toBeTruthy();
+
+    fireEvent.click(within(confirmDialog).getByRole('button', { name: '取消' }));
+    expect(screen.queryByRole('dialog', { name: '删除生成中的占位图' })).toBeNull();
+    expect(screen.getByLabelText('图像生成占位图')).toBeTruthy();
+
+    fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
+    fireEvent.click(screen.getByRole('button', { name: '确认删除' }));
+
+    expect(screen.queryByLabelText('图像生成占位图')).toBeNull();
+
+    await act(async () => {
+      resolveGeneration({
+        imageSrc: 'data:image/png;base64,ZGVsZXRlZC1wbGFjZWhvbGRlcg==',
+        width: 1024,
+        height: 1024,
+        sourceType: 'generated',
+        prompt: '准备删除的生成中图片',
+        actualPrompt: '准备删除的生成中图片',
+        model: 'gpt-image-2',
+        provider: 'VectorEngine',
+        taskId: 'editor-deleted-placeholder-1',
+      });
+    });
+
+    expect(screen.queryByAltText(/画布图片：生成图片/)).toBeNull();
+  });
+
   it('hides the generation composer when selecting another image but keeps the placeholder', () => {
     render(<ImageCanvasEditorView />);
 
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 27292fe9e..409bba246 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -159,6 +159,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     onOpenLayerMetadata: vi.fn(),
     onGenerationFramePointerDown: vi.fn(),
     onActivateGenerationDialog: vi.fn(),
+    onDeleteGenerationDialog: vi.fn(),
     onOpenQuickEditPanel: vi.fn(),
     onOpenRedrawPanel: vi.fn(),
     onOpenCropExpandPanel: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index eff6791e1..9d7a9cd82 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -5,6 +5,7 @@ import {
   createEditorProjectResource,
 } from '../../services/image-editor/editorProjectClient';
 import { useAuthUi } from '../auth/AuthUiContext';
+import { PlatformDangerConfirmDialog } from '../common/PlatformDangerConfirmDialog';
 import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
 import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
 import type {
@@ -70,6 +71,8 @@ export function ImageCanvasEditorView() {
   const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([]);
   const [hoveredLayerId, setHoveredLayerId] = useState<string | null>(null);
   const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(null);
+  const [pendingGenerationDeleteDialog, setPendingGenerationDeleteDialog] =
+    useState<CanvasGenerationDialogState | null>(null);
   const [imageContextMenu, setImageContextMenu] =
     useState<ImageContextMenuState | null>(null);
   const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
@@ -664,6 +667,45 @@ export function ImageCanvasEditorView() {
     (layerId: string | null) => deleteLayerByIdRef.current(layerId),
     [],
   );
+  const removeCanvasGenerationDialog = useCallback(
+    (dialogId: string) => {
+      captureCanvasHistory();
+      removeCanvasGenerationDialogById(dialogId);
+      setSelectedLayerId(null);
+      setSelectedLayerIds([]);
+      setImageContextMenu(null);
+      setContextMenu(null);
+      setActiveTool('select');
+    },
+    [
+      captureCanvasHistory,
+      removeCanvasGenerationDialogById,
+      setActiveTool,
+      setContextMenu,
+      setImageContextMenu,
+      setSelectedLayerId,
+      setSelectedLayerIds,
+    ],
+  );
+  const requestRemoveCanvasGenerationDialog = useCallback(
+    (dialog: CanvasGenerationDialogState) => {
+      if (dialog.status === 'generating') {
+        activateCanvasGenerationDialog(dialog);
+        setPendingGenerationDeleteDialog(dialog);
+        return;
+      }
+      removeCanvasGenerationDialog(dialog.id);
+    },
+    [activateCanvasGenerationDialog, removeCanvasGenerationDialog],
+  );
+  const confirmRemoveGeneratingDialog = useCallback(() => {
+    const dialog = pendingGenerationDeleteDialog;
+    if (!dialog) {
+      return;
+    }
+    setPendingGenerationDeleteDialog(null);
+    removeCanvasGenerationDialog(dialog.id);
+  }, [pendingGenerationDeleteDialog, removeCanvasGenerationDialog]);
 
   useImageCanvasKeyboardShortcuts({
     generateDialogRef,
@@ -671,11 +713,7 @@ export function ImageCanvasEditorView() {
     redoCanvasChange,
     undoCanvasChange,
     deleteLayerById: deleteLayerByIdFromShortcut,
-    removeCanvasGenerationDialogById: (dialogId: string) => {
-      captureCanvasHistory();
-      removeCanvasGenerationDialogById(dialogId);
-      setActiveTool('select');
-    },
+    requestRemoveCanvasGenerationDialog,
     setActiveTool,
     setGenerateDialog,
     setImageContextMenu,
@@ -897,6 +935,7 @@ export function ImageCanvasEditorView() {
     },
     onGenerationFramePointerDown: handleGenerationFramePointerDown,
     onActivateGenerationDialog: activateCanvasGenerationDialog,
+    onDeleteGenerationDialog: requestRemoveCanvasGenerationDialog,
     onOpenQuickEditPanel: openQuickEditPanel,
     onOpenRedrawPanel: openRedrawPanel,
     onOpenCropExpandPanel: openCropExpandPanel,
@@ -936,20 +975,31 @@ export function ImageCanvasEditorView() {
   };
 
   return (
-    <ImageCanvasEditorShellView
-      editorRootRef={editorRootRef}
-      uploadInputRef={uploadInputRef}
-      uploadAccept={getEditorUploadAccept(uploadTarget)}
-      onUploadInputChange={handleUploadInputChange}
-      assetDragPreview={assetDragPreview}
-      sidebarProps={sidebarProps}
-      topbarProps={topbarProps}
-      stageProps={stageProps}
-      metadataProps={{
-        layer: metadataLayer,
-        onClose: () => setMetadataLayer(null),
-      }}
-    />
+    <>
+      <ImageCanvasEditorShellView
+        editorRootRef={editorRootRef}
+        uploadInputRef={uploadInputRef}
+        uploadAccept={getEditorUploadAccept(uploadTarget)}
+        onUploadInputChange={handleUploadInputChange}
+        assetDragPreview={assetDragPreview}
+        sidebarProps={sidebarProps}
+        topbarProps={topbarProps}
+        stageProps={stageProps}
+        metadataProps={{
+          layer: metadataLayer,
+          onClose: () => setMetadataLayer(null),
+        }}
+      />
+      <PlatformDangerConfirmDialog
+        open={Boolean(pendingGenerationDeleteDialog)}
+        title="删除生成中的占位图"
+        confirmLabel="确认删除"
+        onClose={() => setPendingGenerationDeleteDialog(null)}
+        onConfirm={confirmRemoveGeneratingDialog}
+      >
+        删除后会停止在画布中显示这个生成任务，已消耗的泥点不会返还。
+      </PlatformDangerConfirmDialog>
+    </>
   );
 }
 
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 80edbe4d0..43a5f0fba 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -90,6 +90,7 @@ export type ImageCanvasStageViewProps = {
     dialog: CanvasGenerationDialogState,
   ) => void;
   onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
+  onDeleteGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
   onOpenQuickEditPanel: (layer: CanvasLayer) => void;
   onOpenRedrawPanel: (layer: CanvasLayer) => void;
   onOpenCropExpandPanel: (layer: CanvasLayer) => void;
@@ -177,6 +178,7 @@ export function ImageCanvasStageView({
   onOpenLayerMetadata,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
+  onDeleteGenerationDialog,
   onOpenQuickEditPanel,
   onOpenRedrawPanel,
   onOpenCropExpandPanel,
@@ -256,6 +258,7 @@ export function ImageCanvasStageView({
         onOpenLayerMetadata={onOpenLayerMetadata}
         onGenerationFramePointerDown={onGenerationFramePointerDown}
         onActivateGenerationDialog={onActivateGenerationDialog}
+        onDeleteGenerationDialog={onDeleteGenerationDialog}
       />
 
       <ImageCanvasSelectedLayerToolbarView
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index d8106df4a..1496e73b7 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -70,6 +70,7 @@ function renderWorldView(
     onOpenLayerMetadata: vi.fn(),
     onGenerationFramePointerDown: vi.fn(),
     onActivateGenerationDialog: vi.fn(),
+    onDeleteGenerationDialog: vi.fn(),
     ...overrides,
   };
 
@@ -215,12 +216,16 @@ describe('ImageCanvasWorldView', () => {
 
     fireEvent.pointerDown(frame);
     fireEvent.doubleClick(frame);
+    fireEvent.click(
+      within(frame).getByRole('button', { name: '删除图标素材生成占位图' }),
+    );
 
     expect(props.onGenerationFramePointerDown).toHaveBeenCalledWith(
       expect.any(Object),
       dialog,
     );
     expect(props.onActivateGenerationDialog).toHaveBeenCalledWith(dialog);
+    expect(props.onDeleteGenerationDialog).toHaveBeenCalledWith(dialog);
     expect(screen.queryByText('dialog-without-placeholder')).toBeNull();
   });
 
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index 904356ff7..f8107e53d 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -1,4 +1,12 @@
-import { Film, ImageIcon, Info, Music2, UserRound, Volume2 } from 'lucide-react';
+import {
+  Film,
+  ImageIcon,
+  Info,
+  Music2,
+  Trash2,
+  UserRound,
+  Volume2,
+} from 'lucide-react';
 import type {
   CSSProperties,
   MouseEvent as ReactMouseEvent,
@@ -111,6 +119,7 @@ function buildInverseScaleStyle(
     '--image-canvas-editor-kind-offset': `calc(0.38rem * ${inverseScale})`,
     '--image-canvas-editor-beside-kind-offset': `calc(3.95rem * ${inverseScale})`,
     '--image-canvas-editor-frame-label-offset': `calc(-1.35rem * ${inverseScale})`,
+    '--image-canvas-editor-frame-action-offset': `calc(-0.75rem * ${inverseScale})`,
   };
 }
 
@@ -145,6 +154,7 @@ export type ImageCanvasWorldViewProps = {
     dialog: CanvasGenerationDialogState,
   ) => void;
   onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
+  onDeleteGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
 };
 
 export function ImageCanvasWorldView({
@@ -166,6 +176,7 @@ export function ImageCanvasWorldView({
   onOpenLayerMetadata,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
+  onDeleteGenerationDialog,
 }: ImageCanvasWorldViewProps) {
   const inverseScale = getInverseViewportScale(viewport);
   const inverseScaleStyle = buildInverseScaleStyle(inverseScale);
@@ -382,6 +393,21 @@ export function ImageCanvasWorldView({
                       {getGenerationFrameLabel(dialog)}
                     </span>
                   ) : null}
+                  {showFocusedChrome ? (
+                    <PlatformIconButton
+                      variant="darkMini"
+                      className="image-canvas-editor__generation-frame-delete"
+                      label={`删除${getGenerationFrameAriaLabel(dialog)}`}
+                      icon={<Trash2 className="h-3 w-3" />}
+                      style={inverseScaleStyle}
+                      onPointerDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onDeleteGenerationDialog(dialog);
+                      }}
+                    />
+                  ) : null}
                   {placeholderMeta.badgeLabel ? (
                     <span
                       className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${placeholderMeta.badgeClassName}`}
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
index 7f7c5ef18..598dfd463 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
@@ -5,6 +5,7 @@ import { useRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type {
+  CanvasGenerationDialogState,
   CanvasTool,
   GenerateDialogState,
   QuickEditPanelState,
@@ -59,7 +60,7 @@ function KeyboardShortcutsHarness({
   undoCanvasChange = vi.fn(),
   redoCanvasChange = vi.fn(),
   deleteLayerById = vi.fn(),
-  removeCanvasGenerationDialogById = vi.fn(),
+  requestRemoveCanvasGenerationDialog = vi.fn(),
   closeEditorChromePanels = vi.fn(),
 }: {
   selectedLayerId?: string | null;
@@ -69,7 +70,9 @@ function KeyboardShortcutsHarness({
   undoCanvasChange?: () => void;
   redoCanvasChange?: () => void;
   deleteLayerById?: (layerId: string | null) => void;
-  removeCanvasGenerationDialogById?: (dialogId: string) => void;
+  requestRemoveCanvasGenerationDialog?: (
+    dialog: CanvasGenerationDialogState,
+  ) => void;
   closeEditorChromePanels?: () => void;
 }) {
   const [activeTool, setActiveTool] = useState<CanvasTool>(initialTool);
@@ -110,7 +113,7 @@ function KeyboardShortcutsHarness({
     redoCanvasChange,
     undoCanvasChange,
     deleteLayerById,
-    removeCanvasGenerationDialogById,
+    requestRemoveCanvasGenerationDialog,
     setActiveTool: (tool) => setActiveTool(tool),
     setGenerateDialog: (updater) =>
       setGenerateDialogState((currentDialog) =>
@@ -229,13 +232,14 @@ describe('useImageCanvasKeyboardShortcuts', () => {
     expect(deleteLayerById).toHaveBeenCalledWith('layer-selected');
   });
 
-  it('removes editable generation placeholders with Backspace', () => {
-    const removeCanvasGenerationDialogById = vi.fn();
+  it('requests deleting editable generation placeholders with Backspace', () => {
+    const requestRemoveCanvasGenerationDialog = vi.fn();
+    const dialog = createPlaceholderDialog('character');
     render(
       <KeyboardShortcutsHarness
         initialTool="character"
-        initialGenerateDialog={createPlaceholderDialog('character')}
-        removeCanvasGenerationDialogById={removeCanvasGenerationDialogById}
+        initialGenerateDialog={dialog}
+        requestRemoveCanvasGenerationDialog={requestRemoveCanvasGenerationDialog}
       />,
     );
 
@@ -243,7 +247,7 @@ describe('useImageCanvasKeyboardShortcuts', () => {
       fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' });
     });
 
-    expect(removeCanvasGenerationDialogById).toHaveBeenCalledWith('dialog-1');
+    expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(dialog);
     expect(screen.getByTestId('generate-dialog').textContent).toBe(
       'character:idle:true',
     );
@@ -254,15 +258,15 @@ describe('useImageCanvasKeyboardShortcuts', () => {
     expect(screen.getByTestId('icon-picking').textContent).toBe('false');
   });
 
-  it('removes generating placeholders with Delete', () => {
-    const removeCanvasGenerationDialogById = vi.fn();
+  it('requests deleting generating placeholders with Delete', () => {
+    const requestRemoveCanvasGenerationDialog = vi.fn();
     const generatingDialog = createPlaceholderDialog('generate');
     generatingDialog.status = 'generating';
     render(
       <KeyboardShortcutsHarness
         initialTool="generate"
         initialGenerateDialog={generatingDialog}
-        removeCanvasGenerationDialogById={removeCanvasGenerationDialogById}
+        requestRemoveCanvasGenerationDialog={requestRemoveCanvasGenerationDialog}
       />,
     );
 
@@ -270,7 +274,9 @@ describe('useImageCanvasKeyboardShortcuts', () => {
       fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
     });
 
-    expect(removeCanvasGenerationDialogById).toHaveBeenCalledWith('dialog-1');
+    expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(
+      generatingDialog,
+    );
     expect(screen.getByTestId('active-tool').textContent).toBe('select');
   });
 
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
index 8815e7900..8e8d1c97c 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
@@ -12,7 +12,9 @@ type UseImageCanvasKeyboardShortcutsOptions = {
   redoCanvasChange: () => void;
   undoCanvasChange: () => void;
   deleteLayerById: (layerId: string | null) => void;
-  removeCanvasGenerationDialogById?: (dialogId: string) => void;
+  requestRemoveCanvasGenerationDialog?: (
+    dialog: CanvasGenerationDialogState,
+  ) => void;
   setActiveTool: (tool: 'select') => void;
   setGenerateDialog: (
     updater:
@@ -68,7 +70,9 @@ function isCanvasGenerationPlaceholderDialog(
       dialog?.mode === 'character' ||
       dialog?.mode === 'icon' ||
       dialog?.mode === 'ui-design' ||
-      dialog?.mode === 'video')
+      dialog?.mode === 'video' ||
+      dialog?.mode === 'audio-sound-effect' ||
+      dialog?.mode === 'audio-background-music')
   );
 }
 
@@ -84,7 +88,7 @@ export function useImageCanvasKeyboardShortcuts({
   redoCanvasChange,
   undoCanvasChange,
   deleteLayerById,
-  removeCanvasGenerationDialogById,
+  requestRemoveCanvasGenerationDialog,
   setActiveTool,
   setGenerateDialog,
   setImageContextMenu,
@@ -182,9 +186,9 @@ export function useImageCanvasKeyboardShortcuts({
           const currentDialog = generateDialogRef.current;
           if (
             isCanvasGenerationDialogState(currentDialog) &&
-            removeCanvasGenerationDialogById
+            requestRemoveCanvasGenerationDialog
           ) {
-            removeCanvasGenerationDialogById(currentDialog.id);
+            requestRemoveCanvasGenerationDialog(currentDialog);
           } else {
             setGenerateDialog(null);
           }
@@ -233,7 +237,7 @@ export function useImageCanvasKeyboardShortcuts({
     closeEditorChromePanels,
     deleteLayerById,
     generateDialogRef,
-    removeCanvasGenerationDialogById,
+    requestRemoveCanvasGenerationDialog,
     redoCanvasChange,
     selectedLayerIdRef,
     setActiveTool,
diff --git a/src/index.css b/src/index.css
index 8fe69b7d4..3db6ddfa1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4139,6 +4139,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   transform-origin: bottom right;
 }
 
+.image-canvas-editor__generation-frame-delete {
+  position: absolute;
+  right: var(--image-canvas-editor-frame-action-offset, -0.75rem);
+  top: var(--image-canvas-editor-frame-action-offset, -0.75rem);
+  z-index: 5;
+  width: 1.5rem;
+  height: 1.5rem;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top right;
+}
+
 .image-canvas-editor__generation-frame-icon {
   display: grid;
   place-items: center;