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,
+  };
+}