From cc3346758cb52b4d717b9a1c14c9dc8d4f797743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Fri, 19 Jun 2026 14:18:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=8B=A5=E5=B9=B2bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared-memory/decision-log.md             |   2 +-
 docs/project-memory/shared-memory/pitfalls.md |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   2 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  13 +-
 ...�编辑器】画板音乐生成入口设计-2026-06-18.md |  18 +-
 .../src/character_animation_assets.rs         |   8 +-
 .../src/editor_generation_config.rs           |  29 +-
 .../crates/api-server/src/editor_project.rs   |   4 +-
 .../crates/platform-audio/src/request.rs      |   9 +-
 .../tests/vector_engine_audio.rs              |   2 +
 .../crates/shared-contracts/src/assets.rs     |   6 +-
 ...CanvasBasicGenerationComposerView.test.tsx |   2 +-
 ...asCharacterGenerationComposerView.test.tsx |  28 ++
 ...CanvasEditorGenerationIntegration.test.tsx |   3 +-
 .../ImageCanvasEditorModel.test.ts            |  25 +
 .../image-editor/ImageCanvasEditorModel.ts    |   1 +
 .../ImageCanvasEditorShellView.test.tsx       |   1 +
 .../ImageCanvasEditorView.test.tsx            |  31 ++
 .../image-editor/ImageCanvasEditorView.tsx    |  26 +
 ...ImageCanvasGenerationComposerView.test.tsx |   5 +-
 ...eCanvasGenerationImageOptionsView.test.tsx |   6 +-
 .../ImageCanvasGenerationModel.test.ts        |   6 +-
 .../ImageCanvasGenerationModel.ts             |  21 +-
 ...CanvasIconSpritesheetComposerView.test.tsx |   3 +
 .../ImageCanvasQuickEditPanelView.test.tsx    |   2 +-
 ...mageCanvasSpecGenerationPanelView.test.tsx |   5 +
 .../image-editor/ImageCanvasStageView.tsx     |   7 +
 .../ImageCanvasWorldView.test.tsx             |  30 ++
 .../image-editor/ImageCanvasWorldView.tsx     | 453 ++++++++++++++----
 ...anvasGenerationSubmissionWorkflow.test.tsx |   6 +-
 src/index.css                                 | 108 ++++-
 .../image-editor/editorProjectClient.test.ts  |   8 +-
 32 files changed, 722 insertions(+), 156 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 13ecbf4ac..4b0f9e708 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -2400,6 +2400,6 @@
 ## 2026-06-19 编辑器游戏音效默认改用 Vidu 文生音频
 
 - 背景：VectorEngine Apifox `创建文生音频任务` 文档明确 Vidu `/ent/v2/text2audio` 请求体使用 `model: "audio1.0"`、`prompt`、`duration` 和可选 `seed`；编辑器此前把游戏音效提交到 Suno `task: "sound"`，与当前游戏音效默认模型要求不一致。
-- 决策：`/editor/canvas` 的 `生成游戏音效` 入口继续保留，但默认且暂时唯一可用模型为 Vidu `audio1.0`，前端请求固定发送 `prompt`、`model: "audio1.0"`、`duration` 和 `priceMudPoints`，面板只显示 `Vidu` 与 `2-10` 秒时长选项，默认 `5` 秒；不再发送或展示 `sound`、`type`、`tempo`、BPM 或 Suno 文生音效入口。后端 `/api/editor/audios/sound-effects/generations` 只接受空模型或 `audio1.0`，拒绝 Suno / `chirp-*`；提交和轮询改走 Vidu `/ent/v2/text2audio` 与 `/ent/v2/tasks/{taskId}/creations`。背景音乐仍保留 Suno `/suno/submit/music`、`/suno/fetch/{taskId}` 和 wav clip 兜底逻辑。
+- 决策：`/editor/canvas` 的 `生成游戏音效` 入口继续保留，但默认且暂时唯一可用模型为 Vidu `audio1.0`，前端请求固定发送 `prompt`、`model: "audio1.0"`、`duration` 和 `priceMudPoints`，面板只显示 `Vidu` 与 `2-10` 秒时长选项，默认 `5` 秒；不再展示 `type`、`tempo`、BPM 或 Suno 文生音效入口。后端 `/api/editor/audios/sound-effects/generations` 只接受空模型或 `audio1.0`，拒绝 Suno / `chirp-*`；提交到 VectorEngine 时对内 `prompt` 同步映射为上游 body 的 `prompt` 与 `sound`，兼容 Apifox 文档和线上网关实际 `missing field sound` 校验；提交和轮询改走 Vidu `/ent/v2/text2audio` 与 `/ent/v2/tasks/{taskId}/creations`。背景音乐仍保留 Suno `/suno/submit/music`、`/suno/fetch/{taskId}` 和 wav clip 兜底逻辑。
 - 影响范围：`server-rs/crates/platform-audio`、`server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs`、`server-rs/crates/shared-contracts/src/assets.rs`、`src/services/image-editor/editorProjectClient.ts`、`src/components/image-editor/ImageCanvasGeneration*`。
 - 验证方式：`cargo test -p platform-audio --manifest-path server-rs/Cargo.toml --test vector_engine_audio`、`cargo test -p api-server --manifest-path server-rs/Cargo.toml editor_sound_effect`、`cargo test -p shared-contracts --manifest-path server-rs/Cargo.toml editor_audio_requests_and_response_use_canvas_audio_shape`、`npx vitest run src/services/image-editor/editorProjectClient.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasGenerationModel.test.ts --reporter=dot`。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 5b639514f..cafa80ee5 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -15,6 +15,14 @@
 - 关联：相关文件、文档、提交或 Issue
 ```
 
+## Vidu 文生音频线上网关可能要求 sound 字段
+
+- 现象：画板点击 `生成游戏音效` 后，请求返回 `Failed to deserialize the JSON body into the target type: missing field sound`。
+- 原因：VectorEngine Apifox `创建文生音频任务` 文档仍写 `/ent/v2/text2audio` 使用 `model + prompt + duration`，但线上 Vidu 网关曾按 `sound` 字段反序列化；只发送 `prompt` 会被上游拦截在 JSON 解析阶段。
+- 处理：前端和 BFF 对内继续使用用户语义更清晰的 `prompt`；`platform-audio` 转发到 VectorEngine Vidu 时同时发送 `prompt` 与 `sound`，两者值保持一致。不要把 UI 改回 Suno `task: "sound"`、`type`、`tempo` 或 BPM。
+- 验证：`cargo test -p platform-audio --manifest-path server-rs/Cargo.toml --test vector_engine_audio` 中音效请求体测试必须同时断言 `prompt` 与 `sound`；必要时用线上生成音效 smoke 确认不再出现 `missing field sound`。
+- 关联：`server-rs/crates/platform-audio/src/request.rs`、`server-rs/crates/platform-audio/tests/vector_engine_audio.rs`、`docs/【编辑器】画板音乐生成入口设计-2026-06-18.md`。
+
 ## Suno 任务完成不代表已经拿到 wav 下载地址
 
 - 现象：画板生成背景音乐时，前端报 `音频生成尚未返回可下载地址(requestId:...)`；画板生成音效时，前端可能报 `获取 Suno 音效 wav 失败(requestId:...)`。上游任务可能已经完成，但 wav 下载地址还没就绪。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 41f06309a..707959d24 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -12,7 +12,7 @@
 - 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
 - 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
 - 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。
-- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；浮动工具栏只保留当前可执行的编辑动作，不放调整 / 复制 / 删除 / 查看信息占位按钮。图片右上角素材类型标签、图片信息角标和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；图片信息角标使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
+- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；浮动工具栏只保留当前可执行的编辑动作，不放调整 / 复制 / 删除 / 查看信息占位按钮。图片右上角素材类型标签、图片信息角标和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；无 `assetKind` 的素材右上角显示 `未知` 标签，点击标签弹出独立标签选择菜单并可写回图层 `assetKind`，不能触发图层选择 / 拖拽事件；图片信息角标使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
 - 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成图片、生成视频、生成音乐、生成规范、生成角色形象、生成图标素材、生成 UI 设计图。底部栏不再展示文字工具、形状标注工具和导出工具；上传与生成图片之间、生成音乐与生成规范之间各有一个半图标高度分割线。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index 72d0fcbbb..819c76180 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -117,12 +117,9 @@
 ## 第一版计费配置
 
 ```text
-生成图片：12 泥点
-生成规范：5 泥点
-生成角色形象：12 泥点
-生成图标素材：12 泥点
-生成UI设计图：12 泥点
-生成视频：480p 每秒 10 泥点，720p 每秒 20 泥点
+生成图片 / 生成角色形象 / 生成图标素材 / 生成UI设计图 / 宣发素材 / 快速编辑 / 重绘：nanobanana2 为 12 泥点，gpt-image-2 为 20 泥点
+生成规范：固定 gpt-image-2，5 泥点
+生成视频：seedance2.0-fast 为 480p 每秒 10 / 720p 每秒 20；seedance2.0 为 480p 每秒 12 / 720p 每秒 24；kling3.0 为 480p 每秒 15 / 720p 每秒 30；kling3.0-omni 为 480p 每秒 20 / 720p 每秒 40
 角色动画：480p 每秒 10 泥点，720p 每秒 20 泥点
 生成音效：10 泥点
 生成背景音乐：5 泥点
@@ -130,9 +127,9 @@
 
 当前必须显式覆盖的正式模型定价配置：
 
-- 图片类：`gemini-3.1-flash-image-preview`（UI 显示与历史别名统一为 `nanobanana2`）、`gpt-image-2`。
+- 图片类：`gemini-3.1-flash-image-preview`（UI 显示与历史别名统一为 `nanobanana2`）为 12 泥点；`gpt-image-2` 为 20 泥点。
 - 规范：`gpt-image-2`。
-- 视频：`seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`；兼容旧布局回放的 `veo3.1`、`veo3.1-fast` 也要保留定价配置，但前端模型菜单不展示。
+- 视频：`seedance2.0-fast` 为 10 / 20 泥点每秒；`seedance2.0` 为 12 / 24 泥点每秒；`kling3.0` 为 15 / 30 泥点每秒；`kling3.0-omni` 为 20 / 40 泥点每秒。兼容旧布局回放的 `veo3.1`、`veo3.1-fast` 也要保留 10 / 20 泥点每秒定价配置，但前端模型菜单不展示。
 - 角色动画：`seedance2.0-fast`。
 - 音效：`audio1.0`。
 - 背景音乐：`chirp-v5`。
diff --git a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
index a19c7d6c6..b62840bd3 100644
--- a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
+++ b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
@@ -20,10 +20,10 @@
 
 ### 生成游戏音效
 
-- `prompt`：用户输入的音效提示词，直接作为 Vidu 文生音频请求的 `prompt` 字段。
+- `prompt`：用户输入的音效提示词。前端与 BFF 对内仍使用 `prompt`，提交到 VectorEngine Vidu 时同时写入 `prompt` 与 `sound` 同值，兼容线上网关对 `sound` 字段的反序列化要求。
 - `model`：固定默认 `audio1.0`，UI 以禁用态模型胶囊显示为 `Vidu`，位置紧贴生成按钮；暂不展示 Suno 文生音效模型入口。
 - `duration`：Vidu 音频时长，UI 以一个无标题参数按钮展示，选项范围 `2-10` 秒，默认 `5` 秒。
-- 提交到 VectorEngine 时映射为 Vidu 文生音频字段：`model: "audio1.0"`、`prompt`、`duration`、可选 `seed`。当前编辑器音效固定使用 Vidu `audio1.0`，不再走 Suno `task: "sound"` / `metadata_params` 文生音效契约。
+- 提交到 VectorEngine 时映射为 Vidu 文生音频字段：`model: "audio1.0"`、`prompt`、`sound: prompt`、`duration`、可选 `seed`。当前编辑器音效固定使用 Vidu `audio1.0`，不再走 Suno `task: "sound"` / `metadata_params` 文生音效契约。
 
 ### 生成游戏背景音乐
 
@@ -42,8 +42,9 @@
 - 新增素材类型：
   - `assetKind="sound-effect"`
   - `assetKind="background-music"`
-- 音频结果以小型音频卡加入画布，卡片底部使用 `<audio controls>` 播放；音频结果当前只保存为画布资源，不进入图片素材库。
-- 音频结果卡片底部显示用户提示词与播放控件，不在卡片左下角或悬停左上角展示时长。
+- 音频结果以小型音频卡加入画布，卡片底部使用融入卡片的自定义播放器组件承载进度、时间和音量，播放 / 暂停只收口到卡片中央图标按钮；音频结果当前只保存为画布资源，不进入图片素材库。
+- 音频结果卡片底部显示用户提示词与播放器辅助控件，不在卡片左下角或悬停左上角展示时长。
+- 音频结果卡片的提示词固定显示在卡片左上角；底部播放器辅助控件仅在鼠标悬停音频卡片时从下方滑入显示，移出后向下滑出收起。
 - 音频卡片中央播放区按状态切换：未悬停且未播放时显示音效 / 背景音乐图标，悬停且未播放时显示播放按钮，播放中始终显示暂停按钮。
 - generated 私有音频资源播放前必须通过 `/api/assets/read-url` 换签；画布卡片不得直接把 `/generated-*` 或 generated OSS 私有地址交给 `<audio>` 裸请求。
 - 音频元数据弹窗使用 `时长`，不使用图片 / 视频的分辨率语义；音频生成占位不显示分辨率或时长角标。
@@ -100,7 +101,7 @@ POST /api/editor/audios/background-music/generations
 - 在 `platform-audio` 增加编辑器专用 body builder 和 submit 函数：
   - 背景音乐 body 使用 `mv`、`gpt_description_prompt`、`make_instrumental`。
   - Suno 音乐接口路径固定为 `/suno/submit/music`；`VECTOR_ENGINE_BASE_URL` 即使配置为带 `/v1` 的图片接口根，也要在 `platform-audio` 中归一为根路径后再拼接，避免误请求 `/v1/suno/submit/music`。
-  - 音效 body 使用 Vidu 文生音频契约：提交 `/ent/v2/text2audio`，请求体包含 `model: "audio1.0"`、`prompt`、`duration` 和可选 `seed`；`model` 和 `prompt` 为必填，`prompt` 最长 1500 字符，`duration` 按 Vidu 文档限制在 `2-10` 秒。
+  - 音效 body 使用 Vidu 文生音频契约：提交 `/ent/v2/text2audio`，请求体包含 `model: "audio1.0"`、`prompt`、`sound: prompt`、`duration` 和可选 `seed`；`model` 和 `prompt` 为文档必填，`sound` 用于兼容线上网关实际校验，`prompt` 最长 1500 字符，`duration` 按 Vidu 文档限制在 `2-10` 秒。
   - 编辑器音效轮询使用 Vidu 路径 `/ent/v2/tasks/{taskId}/creations`，不再使用 Suno `/suno/fetch/{taskId}`；Suno 文生音效 `task: "sound"` 暂不从编辑器入口暴露。
   - Suno 提交成功后的任务 ID 兼容与 wav clip 轮询逻辑只保留给背景音乐链路，避免误伤 `/api/editor/audios/background-music/generations`。
   - VectorEngine 音频响应的 `code` 需要兼容 `"success"`、`"ok"`、`"0"`、`"200"` 以及数字 `0` / `200`；HTTP 非 2xx 时后端错误信息应透出安全的上游状态和短响应摘要，避免前端只显示笼统提交失败。
@@ -115,11 +116,12 @@ POST /api/editor/audios/background-music/generations
 - 点击 `生成音乐` 只出现选项框，不立刻创建占位。
 - 点击 `生成游戏音效` 后出现音效面板，文本字段为 `prompt`；底部左侧只有一个无标题时长参数按钮，右侧为固定 `Vidu` 模型胶囊和生成按钮。
 - 音效时长只提供 `2-10` 秒选项，默认 `5` 秒，提交到 BFF 的字段为 `duration`。
-- 音效面板模型显示 `Vidu`，提交 `model: "audio1.0"`；不显示 Suno 文生音效模型或 Suno 音效入口。
+- 音效面板模型显示 `Vidu`，提交 `model: "audio1.0"`；后端转发到 Vidu 时同时携带 `prompt` 和 `sound`；不显示 Suno 文生音效模型或 Suno 音效入口。
 - 点击 `生成游戏背景音乐` 后出现背景音乐面板，字段为 `gpt_description_prompt`，右侧固定显示 `Suno` 模型胶囊，不展示 `make_instrumental`。
 - 音效提交到 `/api/editor/audios/sound-effects/generations`，背景音乐提交到 `/api/editor/audios/background-music/generations`。
-- 成功后画布新增音频卡，能通过 `<audio controls>` 播放。
-- 成功后的音频卡展示提示词；卡片中央按未悬停图标、悬停播放、播放中暂停切换，播放控件固定在卡片底部。
+- 成功后画布新增音频卡，能通过卡片中央播放按钮播放，底部进度、时间和音量控件可操作。
+- 成功后的音频卡展示提示词；卡片中央按未悬停图标、悬停播放、播放中暂停切换，不在底部重复显示播放 / 暂停按钮，播放器辅助控件直接融入卡片底部。
+- 鼠标未悬停音频卡时底部播放器辅助控件不可见，悬停时从底部滑动显现；提示词位于卡片左上角。
 - 音频卡片、悬停角标和待生成占位不显示时长；信息弹窗显示时长。
 - 音频素材浮动工具栏只显示 `改造` 与 `下载按钮`，`改造` 复用对应生成面板且没有参考图组件。
 - 私有 generated 音频能先换签再预览播放，不出现播放条一直为 `0:00` 的裸路径失败状态。
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 faf24d2d9..3b8257c72 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -4784,7 +4784,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
-            price_mud_points: 50,
+            price_mud_points: 100,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
             reference_audio_srcs: Vec::new(),
@@ -4796,7 +4796,7 @@ mod tests {
         assert_eq!(normalized.provider_model, EDITOR_VIDEO_MODEL_KLING_3_OMNI);
         assert_eq!(normalized.width, 854);
         assert_eq!(normalized.height, 480);
-        assert_eq!(normalized.price_mud_points, 50);
+        assert_eq!(normalized.price_mud_points, 100);
     }
 
     #[test]
@@ -4831,7 +4831,7 @@ mod tests {
             resolution: "720p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
-            price_mud_points: 80,
+            price_mud_points: 96,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
             reference_audio_srcs: Vec::new(),
@@ -4983,7 +4983,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
-            price_mud_points: 40,
+            price_mud_points: 48,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
             reference_audio_srcs: vec!["data:audio/wav;base64,audio".to_string()],
diff --git a/server-rs/crates/api-server/src/editor_generation_config.rs b/server-rs/crates/api-server/src/editor_generation_config.rs
index 0e450c82e..48eeb0f5a 100644
--- a/server-rs/crates/api-server/src/editor_generation_config.rs
+++ b/server-rs/crates/api-server/src/editor_generation_config.rs
@@ -7,6 +7,7 @@ const EDITOR_IMAGE_MODEL_NANOBANANA2: &str = "gemini-3.1-flash-image-preview";
 const EDITOR_IMAGE_MODEL_NANOBANANA2_DISPLAY_ALIAS: &str = "nanobanana2";
 const EDITOR_IMAGE_MODEL_NANOBANANA_LEGACY_ALIAS: &str = "nano-banana";
 const EDITOR_IMAGE_MODEL_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_IMAGE_MODEL_GPT_IMAGE_2_MUD_POINTS: u32 = 20;
 const EDITOR_SPEC_MODEL_GPT_IMAGE_2_MUD_POINTS: u32 = 5;
 
 pub(crate) const EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
@@ -29,8 +30,8 @@ const EDITOR_BACKGROUND_MUSIC_MODEL_SUNO_MUD_POINTS: u32 = 5;
 
 pub(crate) fn editor_image_model_generation_mud_points(model: Option<&str>) -> u32 {
     match model.map(str::trim).filter(|value| !value.is_empty()) {
-        Some(EDITOR_IMAGE_MODEL_GPT_IMAGE_2)
-        | Some(EDITOR_IMAGE_MODEL_NANOBANANA2)
+        Some(EDITOR_IMAGE_MODEL_GPT_IMAGE_2) => EDITOR_IMAGE_MODEL_GPT_IMAGE_2_MUD_POINTS,
+        Some(EDITOR_IMAGE_MODEL_NANOBANANA2)
         | Some(EDITOR_IMAGE_MODEL_NANOBANANA2_DISPLAY_ALIAS)
         | Some(EDITOR_IMAGE_MODEL_NANOBANANA_LEGACY_ALIAS) => {
             EDITOR_IMAGE_MODEL_GENERATION_MUD_POINTS
@@ -60,7 +61,7 @@ fn editor_video_model_resolution_mud_points_per_second(
     model: Option<&str>,
     resolution: &str,
 ) -> u32 {
-    let _normalized_model = match model.map(str::trim).filter(|value| !value.is_empty()) {
+    let normalized_model = match model.map(str::trim).filter(|value| !value.is_empty()) {
         Some(
             EDITOR_VIDEO_MODEL_SEEDANCE_2
             | EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST
@@ -71,12 +72,16 @@ fn editor_video_model_resolution_mud_points_per_second(
         ) => model.unwrap_or_default().trim(),
         _ => EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST,
     };
-    let per_second = if resolution == "720p" {
-        EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND
-    } else {
-        EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND
+    let (rate_480p, rate_720p) = match normalized_model {
+        EDITOR_VIDEO_MODEL_SEEDANCE_2 => (12, 24),
+        EDITOR_VIDEO_MODEL_KLING_3 => (15, 30),
+        EDITOR_VIDEO_MODEL_KLING_3_OMNI => (20, 40),
+        _ => (
+            EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND,
+            EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND,
+        ),
     };
-    per_second
+    if resolution == "720p" { rate_720p } else { rate_480p }
 }
 
 pub(crate) fn editor_video_model_generation_mud_points(
@@ -157,15 +162,15 @@ mod tests {
         );
         assert_eq!(
             editor_video_model_generation_mud_points(Some("seedance2.0"), "720p", 5),
-            100
+            120
         );
         assert_eq!(
             editor_video_model_generation_mud_points(Some("kling3.0"), "480p", 5),
-            50
+            75
         );
         assert_eq!(
             editor_video_model_generation_mud_points(Some("kling3.0-omni"), "720p", 4),
-            80
+            160
         );
         assert_eq!(
             editor_video_model_generation_mud_points(Some("veo3.1"), "480p", 4),
@@ -219,7 +224,7 @@ mod tests {
         );
         assert_eq!(
             editor_image_generation_mud_points(Some("publication-material"), Some("gpt-image-2")),
-            12
+            20
         );
     }
 }
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index def2bea84..37a5a06c6 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -2068,8 +2068,8 @@ mod tests {
             12
         );
         assert_eq!(
-            validate_editor_icon_spritesheet_price(12, Some("gpt-image-2")).unwrap(),
-            12
+            validate_editor_icon_spritesheet_price(20, Some("gpt-image-2")).unwrap(),
+            20
         );
         let error = validate_editor_icon_spritesheet_price(5, Some("gpt-image-2"))
             .expect_err("wrong icon spritesheet price should fail");
diff --git a/server-rs/crates/platform-audio/src/request.rs b/server-rs/crates/platform-audio/src/request.rs
index f3ae56f52..2ecc70265 100644
--- a/server-rs/crates/platform-audio/src/request.rs
+++ b/server-rs/crates/platform-audio/src/request.rs
@@ -47,7 +47,10 @@ pub fn build_sound_effect_task_body(request: SoundEffectTaskRequest) -> Result<V
             "model".to_string(),
             Value::String(VIDU_AUDIO_MODEL.to_string()),
         ),
-        ("prompt".to_string(), Value::String(prompt)),
+        ("prompt".to_string(), Value::String(prompt.clone())),
+        // 中文注释：VectorEngine Apifox 当前仍写 prompt，但线上 Vidu 网关曾返回
+        // missing field sound；同时发送 sound 作为同义字段，兼容网关实际反序列化。
+        ("sound".to_string(), Value::String(prompt)),
         ("duration".to_string(), json!(request.duration)),
     ]);
     if let Some(seed) = request.seed {
@@ -89,7 +92,9 @@ pub fn build_editor_sound_effect_task_body(
     }
     let mut body = Map::from_iter([
         ("model".to_string(), Value::String(model)),
-        ("prompt".to_string(), Value::String(prompt)),
+        ("prompt".to_string(), Value::String(prompt.clone())),
+        // 中文注释：同上，编辑器音效也必须带 sound，避免上游按 sound 字段解析时报缺字段。
+        ("sound".to_string(), Value::String(prompt)),
         ("duration".to_string(), json!(request.duration)),
     ]);
     if let Some(seed) = request.seed {
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 ad2d36059..bcdee944d 100644
--- a/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
+++ b/server-rs/crates/platform-audio/tests/vector_engine_audio.rs
@@ -142,6 +142,7 @@ fn vidu_sound_effect_request_body_uses_text2audio_contract() {
     assert_eq!(AudioTaskKind::SoundEffect.provider(), "vector-engine-vidu");
     assert_eq!(body["model"], VIDU_AUDIO_MODEL);
     assert_eq!(body["prompt"], "金币掉落叮当声");
+    assert_eq!(body["sound"], "金币掉落叮当声");
     assert_eq!(body["duration"], 5);
     assert!(body.get("mv").is_none());
     assert!(body.get("task").is_none());
@@ -182,6 +183,7 @@ fn editor_sound_effect_request_body_uses_vidu_text2audio_contract() {
 
     assert_eq!(body["model"], VIDU_AUDIO_MODEL);
     assert_eq!(body["prompt"], "金币掉落叮当声");
+    assert_eq!(body["sound"], "金币掉落叮当声");
     assert_eq!(body["duration"], 7);
     assert_eq!(body["seed"], 42);
     assert!(body.get("mv").is_none());
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index 8cc4bb80d..399d76c3b 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -1040,7 +1040,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
-            price_mud_points: 50,
+            price_mud_points: 100,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
             reference_audio_srcs: Vec::new(),
@@ -1049,7 +1049,7 @@ mod tests {
 
         assert_eq!(payload["aspectRatio"], json!("16:9"));
         assert_eq!(payload["durationSeconds"], json!(5));
-        assert_eq!(payload["priceMudPoints"], json!(50));
+        assert_eq!(payload["priceMudPoints"], json!(100));
         assert_eq!(payload["model"], json!("kling3.0-omni"));
     }
 
@@ -1101,7 +1101,7 @@ mod tests {
             task_id: "task-1".to_string(),
             duration_seconds: 5,
             resolution: "480p".to_string(),
-            price_mud_points: 50,
+            price_mud_points: 100,
         })
         .expect("response should serialize");
 
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
index 90677990e..c4484410c 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
@@ -183,7 +183,7 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
 
     expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
     const submitButton = within(panel).getByRole('button', { name: '生成' });
-    expect(submitButton.textContent).toBe('生成12泥点');
+    expect(submitButton.textContent).toBe('生成20泥点');
   });
 
   it('clicks the parent generation panel to collapse an opened option panel', () => {
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
index a4e1367f8..b2c162ad8 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
@@ -10,6 +10,7 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
+import { IMAGE_MODEL_GPT_IMAGE_2 } from './ImageCanvasGenerationModel';
 
 function createDialog(
   patch: Partial<GenerateDialogState> = {},
@@ -136,6 +137,33 @@ describe('ImageCanvasCharacterGenerationComposerView', () => {
     );
   });
 
+  it('updates the submit price when switching the character image model', () => {
+    const rememberImageModel = vi.fn();
+    render(
+      <CharacterGenerationHarness
+        initialDialog={createDialog({
+          imageModel: 'gemini-3.1-flash-image-preview',
+          aspectRatio: '1:1',
+          imageSize: '1K',
+        })}
+        onRememberImageModel={rememberImageModel}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: '生成' }).textContent).toBe(
+      '生成12泥点',
+    );
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片模型 nanobanana2' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
+
+    expect(rememberImageModel).toHaveBeenCalledWith(IMAGE_MODEL_GPT_IMAGE_2);
+    expect(screen.getByRole('button', { name: '生成' }).textContent).toBe(
+      '生成20泥点',
+    );
+  });
+
   it('routes character reference menus to canvas picking, spec creation and upload', () => {
     const openSpecDialog = vi.fn();
     const requestUpload = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 34d19c373..b9e4520e7 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -1095,7 +1095,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'icon-gpt-model-1',
-      priceMudPoints: 12,
+      priceMudPoints: 20,
     });
     render(<ImageCanvasEditorView />);
     await screen.findByAltText('画布图片：拼图素材');
@@ -1161,6 +1161,7 @@ describe('ImageCanvasEditorView generation integration', () => {
           model: 'gpt-image-2',
           aspectRatio: '1:1',
           imageSize: '1K',
+          priceMudPoints: 20,
         }),
       );
     });
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 0bcb5f4c8..1137a648c 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -128,6 +128,31 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('hydrates manually selected publication material tags from saved layout', () => {
+    const hydrated = hydrateLayer(
+      {
+        layerId: 'layer-publication',
+        resourceId: 'resource-publication',
+        title: '宣发图',
+        x: 10,
+        y: 20,
+        width: 1024,
+        height: 1024,
+        originalWidth: 1024,
+        originalHeight: 1024,
+        zIndex: 5,
+        sourceType: 'generated',
+        assetKind: 'publication-material',
+      },
+      new Map([['resource-publication', { imageSrc: '/read/publication.png' }]]),
+    );
+
+    expect(hydrated).toMatchObject({
+      id: 'layer-publication',
+      assetKind: 'publication-material',
+    });
+  });
+
   it('hydrates audio media type and sound effect asset kind from saved layout', () => {
     const hydrated = hydrateLayer(
       {
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 3c55776fd..eb5892d4f 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -666,6 +666,7 @@ export function canvasAssetKindOrNull(value: unknown): CanvasAssetKind | null {
     value === 'icon' ||
     value === 'icon-spritesheet' ||
     value === 'icon-spec' ||
+    value === 'publication-material' ||
     value === 'ui-design' ||
     value === 'video' ||
     value === 'sound-effect' ||
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index fde9ef05a..c12c02e04 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -159,6 +159,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     onLayerMouseEnter: vi.fn(),
     onLayerMouseLeave: vi.fn(),
     onOpenLayerMetadata: vi.fn(),
+    onUpdateLayerAssetKind: vi.fn(),
     onGenerationFramePointerDown: vi.fn(),
     onActivateGenerationDialog: vi.fn(),
     onCropExpandHandlePointerDown: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 75d87fbe6..98eb60d23 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -1031,6 +1031,37 @@ describe('ImageCanvasEditorView', () => {
     );
   });
 
+  it('saves manually selected layer tags in the canvas layout', async () => {
+    render(<ImageCanvasEditorView />);
+
+    const layerButton = await screen.findByRole('button', {
+      name: '选择拼图素材',
+    });
+    fireEvent.click(
+      within(layerButton).getByRole('button', { name: '素材标签：未知' }),
+    );
+    fireEvent.click(
+      within(screen.getByRole('menu', { name: '选择素材标签' })).getByRole(
+        'menuitem',
+        { name: '角色' },
+      ),
+    );
+
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-default',
+        expect.objectContaining({
+          layers: expect.arrayContaining([
+            expect.objectContaining({
+              title: '拼图素材',
+              assetKind: 'character',
+            }),
+          ]),
+        }),
+      );
+    });
+  });
+
   it('offers Lovart-style zoom menu commands', async () => {
     render(<ImageCanvasEditorView />);
 
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index f44139371..77b6803d5 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -18,6 +18,7 @@ import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
 import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
 import type {
   AssetPointerDragState,
+  CanvasAssetKind,
   CanvasContextMenuState,
   CanvasGenerationDialogState,
   CanvasLayer,
@@ -734,6 +735,30 @@ export function ImageCanvasEditorView() {
     setPendingGenerationDeleteDialog(null);
     removeCanvasGenerationDialog(dialog.id);
   }, [pendingGenerationDeleteDialog, removeCanvasGenerationDialog]);
+  const updateLayerAssetKind = useCallback(
+    (layerId: string, assetKind: CanvasAssetKind | null) => {
+      const targetLayer = layersRef.current.find((layer) => layer.id === layerId);
+      if (!targetLayer || targetLayer.assetKind === assetKind) {
+        return;
+      }
+      captureCanvasHistory();
+      const nextLayer = {
+        ...targetLayer,
+        assetKind,
+      };
+      setLayers((currentLayers) =>
+        currentLayers.map((layer) =>
+          layer.id === layerId ? { ...layer, assetKind } : layer,
+        ),
+      );
+      setMetadataLayer((currentLayer) =>
+        currentLayer?.id === layerId ? nextLayer : currentLayer,
+      );
+      setImageContextMenu(null);
+      setContextMenu(null);
+    },
+    [captureCanvasHistory],
+  );
 
   useImageCanvasKeyboardShortcuts({
     generateDialogRef,
@@ -967,6 +992,7 @@ export function ImageCanvasEditorView() {
       setMetadataLayer(layer);
       selectSingleLayer(layer.id);
     },
+    onUpdateLayerAssetKind: updateLayerAssetKind,
     onGenerationFramePointerDown: handleGenerationFramePointerDown,
     onActivateGenerationDialog: activateCanvasGenerationDialog,
     onCropExpandHandlePointerDown:
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 2c001c323..27d0b4901 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -274,7 +274,7 @@ describe('ImageCanvasGenerationComposerView', () => {
       panel.querySelector('.image-canvas-editor__generation-composer-footer'),
     ).toBeTruthy();
     expect(within(panel).getByRole('button', { name: '生成' }).textContent).toBe(
-      '生成12泥点',
+      '生成20泥点',
     );
   });
 
@@ -485,6 +485,9 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(screen.getByRole('menu', { name: '视频模型选项' })).toBeTruthy();
     expect(screen.getByLabelText('当前视频模型').textContent).toBe('kling3.0');
     expect(screen.getByRole('button', { name: '模型 Kling 3.0' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '生成视频' }).textContent).toBe(
+      '生成150泥点',
+    );
   });
 
   it('生成游戏音效面板使用 Vidu duration 参数且不再显示类型和 BPM', () => {
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
index c0f4acc84..9697e9e5c 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
@@ -7,6 +7,7 @@ import { describe, expect, it, vi } from 'vitest';
 import type { GenerateDialogState } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 import {
+  calculateEditorImageGenerationPrice,
   IMAGE_MODEL_GPT_IMAGE_2,
   IMAGE_MODEL_NANOBANANA2,
 } from './ImageCanvasGenerationModel';
@@ -29,7 +30,7 @@ function ImageOptionsHarness({
         setGenerateDialog={setDialog}
         includeDimensions
         onRememberImageModel={onRememberImageModel}
-        cost={12}
+        cost={calculateEditorImageGenerationPrice({ model: dialog.imageModel })}
         submitLabel="生成"
         submitAriaLabel="生成角色形象"
       />
@@ -160,6 +161,9 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     expect(
       screen.getByRole('button', { name: '生成图片模型 gpt-image-2' }),
     ).toBeTruthy();
+    expect(screen.getByRole('button', { name: '生成角色形象' }).textContent).toBe(
+      '生成20泥点',
+    );
   });
 
   it('renders option menus and shows mud point text in the submit button', () => {
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index 53591a484..e5f22bdec 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -87,6 +87,7 @@ describe('ImageCanvasGenerationModel', () => {
     expect(calculateEditorImageModelPrice(DEFAULT_IMAGE_MODEL)).toBe(
       EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[DEFAULT_IMAGE_MODEL],
     );
+    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2)).toBe(20);
     expect(
       calculateEditorImageGenerationPrice({
         kind: 'character',
@@ -111,8 +112,11 @@ describe('ImageCanvasGenerationModel', () => {
     expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3, '480p', 4)).toBe(
       EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[VIDEO_MODEL_KLING_3]['480p'] * 4,
     );
+    expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3, '720p', 5)).toBe(
+      150,
+    );
     expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3_OMNI, '720p', 5)).toBe(
-      EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[VIDEO_MODEL_KLING_3_OMNI]['720p'] * 5,
+      200,
     );
     expect(calculateCharacterAnimationPrice(CHARACTER_ANIMATION_MODEL, '720p', 6))
       .toBe(
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index b544a3e06..1b2a1809a 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -83,7 +83,8 @@ const IMAGE_MODEL_NANOBANANA_ALIASES = new Set([
 export const SPEC_GENERATION_MODEL = IMAGE_MODEL_GPT_IMAGE_2;
 export const EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG = {
   [IMAGE_MODEL_NANOBANANA2]: EDITOR_GENERATION_MUD_POINT_CONFIG.image,
-  [IMAGE_MODEL_GPT_IMAGE_2]: EDITOR_GENERATION_MUD_POINT_CONFIG.image,
+  // 中文注释：gpt-image-2 作为更高成本图片模型独立计费，避免切换模型后按钮价格不变。
+  [IMAGE_MODEL_GPT_IMAGE_2]: 20,
 } as const;
 export const EDITOR_SPEC_MODEL_MUD_POINT_CONFIG = {
   [IMAGE_MODEL_GPT_IMAGE_2]: EDITOR_GENERATION_MUD_POINT_CONFIG.spec,
@@ -284,11 +285,23 @@ const EDITOR_VIDEO_RESOLUTION_RATE_CONFIG = {
   '480p': EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond['480p'],
   '720p': EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond['720p'],
 } as const;
+const EDITOR_VIDEO_STANDARD_RESOLUTION_RATE_CONFIG = {
+  '480p': 12,
+  '720p': 24,
+} as const;
+const EDITOR_VIDEO_KLING_RESOLUTION_RATE_CONFIG = {
+  '480p': 15,
+  '720p': 30,
+} as const;
+const EDITOR_VIDEO_KLING_OMNI_RESOLUTION_RATE_CONFIG = {
+  '480p': 20,
+  '720p': 40,
+} as const;
 export const EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG = {
   [VIDEO_MODEL_SEEDANCE_2_FAST]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
-  [VIDEO_MODEL_SEEDANCE_2]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
-  [VIDEO_MODEL_KLING_3]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
-  [VIDEO_MODEL_KLING_3_OMNI]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
+  [VIDEO_MODEL_SEEDANCE_2]: EDITOR_VIDEO_STANDARD_RESOLUTION_RATE_CONFIG,
+  [VIDEO_MODEL_KLING_3]: EDITOR_VIDEO_KLING_RESOLUTION_RATE_CONFIG,
+  [VIDEO_MODEL_KLING_3_OMNI]: EDITOR_VIDEO_KLING_OMNI_RESOLUTION_RATE_CONFIG,
   // 中文注释：前端不展示 Veo 入口，但类型与后端兼容层仍可接收旧布局回放，定价表必须同步覆盖。
   [VIDEO_MODEL_VEO_3_1]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
   [VIDEO_MODEL_VEO_3_1_FAST]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index a66e6ce5d..3f3f7ab3d 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -186,6 +186,9 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
     expect(rememberImageModel).toHaveBeenCalledWith('gpt-image-2');
     expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
     expect(screen.getByLabelText('当前尺寸').textContent).toBe('1K');
+    expect(screen.getByRole('button', { name: '生成' }).textContent).toBe(
+      '生成20泥点',
+    );
   });
 
   it('disables generation controls and renders failure state', () => {
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
index f2631d588..401ab04d9 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
@@ -151,7 +151,7 @@ describe('ImageCanvasQuickEditPanelView', () => {
     );
 
     expect(screen.getByRole('button', { name: '生成' }).textContent).toBe(
-      '生成12泥点',
+      '生成20泥点',
     );
   });
 
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index b98e1e9af..12798f497 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -143,6 +143,11 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     );
     const submitButton = screen.getByRole('button', { name: '生成UI设计图' });
     expect(submitButton.textContent).toBe('生成12泥点');
+    fireEvent.click(screen.getByRole('button', { name: '生成图片模型 nanobanana2' }));
+    fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
+    expect(screen.getByRole('button', { name: '生成UI设计图' }).textContent).toBe(
+      '生成20泥点',
+    );
   });
 
   it('renders character spec fields and forwards updates', () => {
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 7512bd0b3..efd228840 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -11,6 +11,7 @@ import { ImageCanvasBottomToolbarView } from './ImageCanvasBottomToolbarView';
 import { ImageCanvasContextMenusView } from './ImageCanvasContextMenusView';
 import type {
   CanvasClipboard,
+  CanvasAssetKind,
   CanvasContextMenuState,
   CanvasGenerationDialogState,
   CanvasLayer,
@@ -88,6 +89,10 @@ export type ImageCanvasStageViewProps = {
   onLayerMouseEnter: (layerId: string) => void;
   onLayerMouseLeave: (layerId: string) => void;
   onOpenLayerMetadata: (layer: CanvasLayer) => void;
+  onUpdateLayerAssetKind: (
+    layerId: string,
+    assetKind: CanvasAssetKind | null,
+  ) => void;
   onGenerationFramePointerDown: (
     event: ReactPointerEvent<HTMLDivElement>,
     dialog: CanvasGenerationDialogState,
@@ -189,6 +194,7 @@ export function ImageCanvasStageView({
   onLayerMouseEnter,
   onLayerMouseLeave,
   onOpenLayerMetadata,
+  onUpdateLayerAssetKind,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
   onCropExpandHandlePointerDown,
@@ -271,6 +277,7 @@ export function ImageCanvasStageView({
         onLayerMouseEnter={onLayerMouseEnter}
         onLayerMouseLeave={onLayerMouseLeave}
         onOpenLayerMetadata={onOpenLayerMetadata}
+        onUpdateLayerAssetKind={onUpdateLayerAssetKind}
         onGenerationFramePointerDown={onGenerationFramePointerDown}
         onActivateGenerationDialog={onActivateGenerationDialog}
         onCropExpandHandlePointerDown={onCropExpandHandlePointerDown}
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index 1eef92801..52b5ec752 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -642,14 +642,37 @@ describe('ImageCanvasWorldView', () => {
     const layerButton = screen.getByRole('button', { name: '选择游戏音效' });
     const audio = within(layerButton).getByLabelText('画布音频：游戏音效');
     expect(audio.tagName.toLowerCase()).toBe('audio');
+    expect(audio.hasAttribute('controls')).toBe(false);
     expect(within(layerButton).queryByAltText('画布图片：游戏音效')).toBeNull();
     expect(within(layerButton).getByText('音效')).toBeTruthy();
     expect(within(layerButton).queryByText(/时长/u)).toBeNull();
+    expect(
+      within(layerButton).getAllByRole('button', { name: /播放|暂停/u }),
+    ).toHaveLength(1);
     expect(
       within(layerButton).getByRole('button', { name: '播放游戏音效' })
         .querySelector('svg')
         ?.getAttribute('class'),
     ).toContain('lucide-volume-2');
+    expect(
+      layerButton
+        .querySelector('.image-canvas-editor__audio-card-controls')
+        ?.className.includes(
+          'image-canvas-editor__audio-card-controls--integrated',
+        ),
+    ).toBe(true);
+    expect(
+      layerButton
+        .querySelector('.image-canvas-editor__audio-card')
+        ?.className.includes(
+          'image-canvas-editor__audio-card--controls-visible',
+        ),
+    ).toBe(false);
+    expect(
+      within(layerButton).getByLabelText('调整游戏音效播放进度'),
+    ).toBeTruthy();
+    expect(within(layerButton).getByLabelText('静音游戏音效')).toBeTruthy();
+    expect(within(layerButton).getByLabelText('调整游戏音效音量')).toBeTruthy();
     expect(
       within(layerButton).queryByText('420 x 120 px'),
     ).toBeNull();
@@ -696,6 +719,13 @@ describe('ImageCanvasWorldView', () => {
     const hoveredLayerButton = screen.getByRole('button', {
       name: '选择游戏背景音乐',
     });
+    expect(
+      hoveredLayerButton
+        .querySelector('.image-canvas-editor__audio-card')
+        ?.className.includes(
+          'image-canvas-editor__audio-card--controls-visible',
+        ),
+    ).toBe(true);
     expect(
       within(hoveredLayerButton)
         .getByRole('button', { name: '播放游戏背景音乐' })
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index a7f94f328..74546ccbe 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -13,8 +13,9 @@ import {
   Sparkles,
   UserRound,
   Volume2,
+  VolumeX,
 } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type {
   CSSProperties,
   KeyboardEvent as ReactKeyboardEvent,
@@ -23,11 +24,16 @@ import type {
 } from 'react';
 
 import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { CANVAS_WORLD_SIZE } from './ImageCanvasEditorModel';
 import type {
+  CanvasAssetKind,
   CanvasGenerationDialogState,
   CanvasLayer,
   CanvasMarqueeState,
@@ -40,7 +46,6 @@ import type {
 import {
   getGenerationFrameAriaLabel,
   getGenerationFrameLabel,
-  getLayerKindLabel,
 } from './ImageCanvasGenerationModel';
 
 function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) {
@@ -158,6 +163,55 @@ function buildInverseScaleStyle(
   };
 }
 
+const CANVAS_ASSET_KIND_TAG_OPTIONS: Array<{
+  value: CanvasAssetKind | null;
+  label: string;
+  className: string;
+}> = [
+  { value: null, label: '未知', className: 'unknown' },
+  { value: 'spec', label: '规范', className: 'spec' },
+  { value: 'character', label: '角色', className: 'character' },
+  {
+    value: 'character-animation',
+    label: '动作',
+    className: 'character-animation',
+  },
+  { value: 'icon', label: '图标', className: 'icon' },
+  { value: 'icon-spritesheet', label: '图集', className: 'icon-spritesheet' },
+  { value: 'icon-spec', label: '图标规范', className: 'icon-spec' },
+  {
+    value: 'publication-material',
+    label: '宣发素材',
+    className: 'publication-material',
+  },
+  { value: 'ui-design', label: 'UI设计', className: 'ui-design' },
+  { value: 'video', label: '视频', className: 'video' },
+  { value: 'sound-effect', label: '音效', className: 'sound-effect' },
+  {
+    value: 'background-music',
+    label: '背景音乐',
+    className: 'background-music',
+  },
+];
+
+const UNKNOWN_ASSET_KIND_TAG_OPTION = CANVAS_ASSET_KIND_TAG_OPTIONS[0] as {
+  value: null;
+  label: string;
+  className: string;
+};
+
+function getLayerKindTagMeta(layer: CanvasLayer) {
+  const knownKind = layer.assetKind
+    ? CANVAS_ASSET_KIND_TAG_OPTIONS.find(
+        (option) => option.value === layer.assetKind,
+      )
+    : null;
+  if (knownKind) {
+    return knownKind;
+  }
+  return UNKNOWN_ASSET_KIND_TAG_OPTION;
+}
+
 export type ImageCanvasWorldViewProps = {
   viewport: CanvasViewport;
   snapGuide: SnapGuide | null;
@@ -185,6 +239,10 @@ export type ImageCanvasWorldViewProps = {
   onLayerMouseEnter: (layerId: string) => void;
   onLayerMouseLeave: (layerId: string) => void;
   onOpenLayerMetadata: (layer: CanvasLayer) => void;
+  onUpdateLayerAssetKind: (
+    layerId: string,
+    assetKind: CanvasAssetKind | null,
+  ) => void;
   onGenerationFramePointerDown: (
     event: ReactPointerEvent<HTMLDivElement>,
     dialog: CanvasGenerationDialogState,
@@ -226,6 +284,17 @@ function handleLayerKeyboardActivation(
   event.currentTarget.click();
 }
 
+function handleLayerTagKeyboardActivation(
+  event: ReactKeyboardEvent<HTMLElement>,
+) {
+  if (event.key !== 'Enter' && event.key !== ' ') {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.click();
+}
+
 function getLayerMetricLabel(layer: CanvasLayer) {
   return `${Math.round(layer.originalWidth)} x ${Math.round(
     layer.originalHeight,
@@ -240,6 +309,25 @@ function getAudioLayerIcon(layer: CanvasLayer) {
   );
 }
 
+function getAudioDurationSeconds(durationSeconds: CanvasLayer['durationSeconds']) {
+  return typeof durationSeconds === 'number' &&
+    Number.isFinite(durationSeconds) &&
+    durationSeconds > 0
+    ? durationSeconds
+    : 0;
+}
+
+function formatAudioControlTime(seconds: number) {
+  if (!Number.isFinite(seconds) || seconds <= 0) {
+    return '0:00';
+  }
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60)
+    .toString()
+    .padStart(2, '0');
+  return `${minutes}:${remainingSeconds}`;
+}
+
 function ImageCanvasAudioLayerCard({
   layer,
   isHovered,
@@ -253,7 +341,21 @@ function ImageCanvasAudioLayerCard({
     refreshKey: layer.taskId ?? layer.resourceId,
   });
   const prompt = layer.prompt?.trim();
+  const fallbackDuration = getAudioDurationSeconds(layer.durationSeconds);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(fallbackDuration);
+  const [volume, setVolume] = useState(1);
+  const [isMuted, setIsMuted] = useState(false);
   const showPlaybackButton = isPlaying || isHovered;
+  const controlDuration = duration > 0 ? duration : fallbackDuration;
+  const safeCurrentTime =
+    controlDuration > 0 ? Math.min(currentTime, controlDuration) : 0;
+
+  useEffect(() => {
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(fallbackDuration);
+  }, [fallbackDuration, layer.src]);
 
   const togglePlayback = async () => {
     const audio = audioRef.current;
@@ -271,8 +373,49 @@ function ImageCanvasAudioLayerCard({
     }
   };
 
+  const handleSeekChange = (nextValue: string) => {
+    const nextTime = Number(nextValue);
+    if (!Number.isFinite(nextTime)) {
+      return;
+    }
+    const clampedTime =
+      controlDuration > 0
+        ? Math.min(Math.max(nextTime, 0), controlDuration)
+        : Math.max(nextTime, 0);
+    if (audioRef.current) {
+      audioRef.current.currentTime = clampedTime;
+    }
+    setCurrentTime(clampedTime);
+  };
+
+  const handleVolumeChange = (nextValue: string) => {
+    const nextVolume = Number(nextValue);
+    if (!Number.isFinite(nextVolume)) {
+      return;
+    }
+    const clampedVolume = Math.min(Math.max(nextVolume, 0), 1);
+    if (audioRef.current) {
+      audioRef.current.volume = clampedVolume;
+      audioRef.current.muted = clampedVolume === 0;
+    }
+    setVolume(clampedVolume);
+    setIsMuted(clampedVolume === 0);
+  };
+
+  const toggleMute = () => {
+    const nextMuted = !isMuted;
+    if (audioRef.current) {
+      audioRef.current.muted = nextMuted;
+    }
+    setIsMuted(nextMuted);
+  };
+
   return (
-    <div className="image-canvas-editor__audio-card">
+    <div
+      className={`image-canvas-editor__audio-card ${
+        isHovered ? 'image-canvas-editor__audio-card--controls-visible' : ''
+      }`}
+    >
       <button
         type="button"
         className="image-canvas-editor__audio-card-playback"
@@ -296,19 +439,80 @@ function ImageCanvasAudioLayerCard({
       {prompt ? (
         <span className="image-canvas-editor__audio-card-title">{prompt}</span>
       ) : null}
-      <div className="image-canvas-editor__audio-card-controls">
+      <div
+        className="image-canvas-editor__audio-card-controls image-canvas-editor__audio-card-controls--integrated"
+        onClick={stopMediaEventPropagation}
+        onKeyDown={(event) => event.stopPropagation()}
+        onPointerDown={stopMediaEventPropagation}
+      >
         <audio
           ref={audioRef}
+          className="image-canvas-editor__audio-card-native-control"
           src={resolvedUrl || undefined}
-          controls
           preload="metadata"
           aria-label={`画布音频：${layer.title}`}
           onClick={stopMediaEventPropagation}
           onPointerDown={stopMediaEventPropagation}
+          onLoadedMetadata={(event) => {
+            const nextDuration = event.currentTarget.duration;
+            setDuration(
+              Number.isFinite(nextDuration) && nextDuration > 0
+                ? nextDuration
+                : fallbackDuration,
+            );
+          }}
+          onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
+          onVolumeChange={(event) => {
+            setVolume(event.currentTarget.volume);
+            setIsMuted(event.currentTarget.muted);
+          }}
           onPlay={() => setIsPlaying(true)}
           onPause={() => setIsPlaying(false)}
           onEnded={() => setIsPlaying(false)}
         />
+        <span className="image-canvas-editor__audio-card-time">
+          {formatAudioControlTime(safeCurrentTime)}
+        </span>
+        <input
+          type="range"
+          className="image-canvas-editor__audio-card-progress"
+          min="0"
+          max={controlDuration || 0}
+          step="0.1"
+          value={safeCurrentTime}
+          disabled={!controlDuration}
+          aria-label={`调整${layer.title}播放进度`}
+          onChange={(event) => handleSeekChange(event.currentTarget.value)}
+        />
+        <span className="image-canvas-editor__audio-card-time">
+          {formatAudioControlTime(controlDuration)}
+        </span>
+        <button
+          type="button"
+          className="image-canvas-editor__audio-card-volume-toggle"
+          aria-label={isMuted ? `恢复${layer.title}音量` : `静音${layer.title}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            toggleMute();
+          }}
+          onPointerDown={stopMediaEventPropagation}
+        >
+          {isMuted ? (
+            <VolumeX className="h-3.5 w-3.5" aria-hidden="true" />
+          ) : (
+            <Volume2 className="h-3.5 w-3.5" aria-hidden="true" />
+          )}
+        </button>
+        <input
+          type="range"
+          className="image-canvas-editor__audio-card-volume"
+          min="0"
+          max="1"
+          step="0.01"
+          value={isMuted ? 0 : volume}
+          aria-label={`调整${layer.title}音量`}
+          onChange={(event) => handleVolumeChange(event.currentTarget.value)}
+        />
       </div>
     </div>
   );
@@ -332,12 +536,16 @@ export function ImageCanvasWorldView({
   onLayerMouseEnter,
   onLayerMouseLeave,
   onOpenLayerMetadata,
+  onUpdateLayerAssetKind,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
   onCropExpandHandlePointerDown,
 }: ImageCanvasWorldViewProps) {
   const inverseScale = getInverseViewportScale(viewport);
   const inverseScaleStyle = buildInverseScaleStyle(inverseScale);
+  const [openLayerKindMenuId, setOpenLayerKindMenuId] = useState<string | null>(
+    null,
+  );
 
   return (
     <div
@@ -370,7 +578,8 @@ export function ImageCanvasWorldView({
         .map((layer) => {
           const isSelected = selectedLayerIds.includes(layer.id);
           const isHovered = hoveredLayerId === layer.id;
-          const kindLabel = getLayerKindLabel(layer);
+          const kindTagMeta = getLayerKindTagMeta(layer);
+          const kindLabel = kindTagMeta.label;
           const mediaTransform =
             layer.flipX || layer.flipY
               ? `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})`
@@ -383,102 +592,153 @@ export function ImageCanvasWorldView({
               : null;
           const LayerElement = layer.mediaType === 'audio' ? 'div' : 'button';
           return (
-            <LayerElement
-              key={layer.id}
-              {...(layer.mediaType === 'audio'
-                ? { role: 'button', tabIndex: 0 }
-                : { type: 'button' })}
-              className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layerGeneratingLabel ? 'image-canvas-editor__layer--generating' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
-              style={{
-                left: layer.x,
-                top: layer.y,
-                width: layer.width,
-                height: layer.height,
-                zIndex: layer.zIndex,
-                display: layer.hidden ? 'none' : undefined,
-              }}
-              onPointerDown={(event) => onLayerPointerDown(event, layer)}
-              onClick={(event) => onLayerClick(event, layer)}
-              onContextMenu={(event) => onLayerContextMenu(event, layer)}
-              onKeyDown={
-                layer.mediaType === 'audio'
-                  ? handleLayerKeyboardActivation
-                  : undefined
-              }
-              onMouseEnter={() => onLayerMouseEnter(layer.id)}
-              onMouseLeave={() => onLayerMouseLeave(layer.id)}
-              aria-label={`选择${layer.title}`}
-            >
-              {layer.mediaType === 'audio' ? (
-                <ImageCanvasAudioLayerCard
-                  layer={layer}
-                  isHovered={isHovered}
-                />
-              ) : layer.mediaType === 'video' ? (
-                <video
-                  className="image-canvas-editor__layer-video"
-                  src={layer.src}
-                  controls
-                  playsInline
-                  preload="metadata"
-                  aria-label={`画布视频：${layer.title}`}
-                  style={{ transform: mediaTransform }}
-                  onClick={(event) => event.stopPropagation()}
-                  onPointerDown={(event) => event.stopPropagation()}
-                />
-              ) : (
-                <img
-                  src={layer.src}
-                  alt={`画布图片：${layer.title}`}
-                  style={{ transform: mediaTransform }}
-                />
-              )}
-              {kindLabel ? (
+            <div key={layer.id}>
+              <LayerElement
+                {...(layer.mediaType === 'audio'
+                  ? { role: 'button', tabIndex: 0 }
+                  : { type: 'button' })}
+                className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layerGeneratingLabel ? 'image-canvas-editor__layer--generating' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
+                style={{
+                  left: layer.x,
+                  top: layer.y,
+                  width: layer.width,
+                  height: layer.height,
+                  zIndex: layer.zIndex,
+                  display: layer.hidden ? 'none' : undefined,
+                }}
+                onPointerDown={(event) => onLayerPointerDown(event, layer)}
+                onClick={(event) => {
+                  setOpenLayerKindMenuId(null);
+                  onLayerClick(event, layer);
+                }}
+                onContextMenu={(event) => {
+                  setOpenLayerKindMenuId(null);
+                  onLayerContextMenu(event, layer);
+                }}
+                onKeyDown={
+                  layer.mediaType === 'audio'
+                    ? handleLayerKeyboardActivation
+                    : undefined
+                }
+                onMouseEnter={() => onLayerMouseEnter(layer.id)}
+                onMouseLeave={() => onLayerMouseLeave(layer.id)}
+                aria-label={`选择${layer.title}`}
+              >
+                {layer.mediaType === 'audio' ? (
+                  <ImageCanvasAudioLayerCard
+                    layer={layer}
+                    isHovered={isHovered}
+                  />
+                ) : layer.mediaType === 'video' ? (
+                  <video
+                    className="image-canvas-editor__layer-video"
+                    src={layer.src}
+                    controls
+                    playsInline
+                    preload="metadata"
+                    aria-label={`画布视频：${layer.title}`}
+                    style={{ transform: mediaTransform }}
+                    onClick={(event) => event.stopPropagation()}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  />
+                ) : (
+                  <img
+                    src={layer.src}
+                    alt={`画布图片：${layer.title}`}
+                    style={{ transform: mediaTransform }}
+                  />
+                )}
                 <span
-                  className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind} image-canvas-editor__kind-badge--beside-info`}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`素材标签：${kindLabel}`}
+                  className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${kindTagMeta.className} image-canvas-editor__kind-badge--beside-info image-canvas-editor__kind-badge--editable`}
                   style={inverseScaleStyle}
+                  onPointerDown={(event) => event.stopPropagation()}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setOpenLayerKindMenuId((currentId) =>
+                      currentId === layer.id ? null : layer.id,
+                    );
+                  }}
+                  onKeyDown={handleLayerTagKeyboardActivation}
                 >
                   {kindLabel}
                 </span>
-              ) : null}
-              <PlatformIconButton
-                asChild="spanButton"
-                variant="darkMini"
-                className="image-canvas-editor__metadata-corner"
-                label={`查看${layer.title}${
-                  layer.mediaType === 'audio'
-                    ? '音频'
-                    : layer.mediaType === 'video'
-                      ? '视频'
-                      : '图片'
-                }信息`}
-                icon={<Info className="h-3 w-3" />}
-                style={inverseScaleStyle}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onOpenLayerMetadata(layer);
-                }}
-                onPointerDown={(event) => event.stopPropagation()}
-              />
-              {isHovered && layer.mediaType !== 'audio' ? (
-                <PlatformPillBadge
-                  tone="lightOverlay"
-                  size="xs"
-                  className="image-canvas-editor__size-badge"
+                <PlatformIconButton
+                  asChild="spanButton"
+                  variant="darkMini"
+                  className="image-canvas-editor__metadata-corner"
+                  label={`查看${layer.title}${
+                    layer.mediaType === 'audio'
+                      ? '音频'
+                      : layer.mediaType === 'video'
+                        ? '视频'
+                        : '图片'
+                  }信息`}
+                  icon={<Info className="h-3 w-3" />}
                   style={inverseScaleStyle}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onOpenLayerMetadata(layer);
+                  }}
+                  onPointerDown={(event) => event.stopPropagation()}
+                />
+                {isHovered && layer.mediaType !== 'audio' ? (
+                  <PlatformPillBadge
+                    tone="lightOverlay"
+                    size="xs"
+                    className="image-canvas-editor__size-badge"
+                    style={inverseScaleStyle}
+                  >
+                    {getLayerMetricLabel(layer)}
+                  </PlatformPillBadge>
+                ) : null}
+                {layerGeneratingLabel ? (
+                  <span
+                    className="image-canvas-editor__generation-frame-progress image-canvas-editor__layer-generating-progress"
+                    role="status"
+                  >
+                    {layerGeneratingLabel}
+                  </span>
+                ) : null}
+              </LayerElement>
+              {openLayerKindMenuId === layer.id ? (
+                <div
+                  className="image-canvas-editor__kind-menu-anchor"
+                  style={{
+                    left: layer.x + layer.width,
+                    top: layer.y,
+                    zIndex: layer.zIndex + 30,
+                    ...inverseScaleStyle,
+                  }}
                 >
-                  {getLayerMetricLabel(layer)}
-                </PlatformPillBadge>
+                  <PlatformFloatingMenu
+                    label="选择素材标签"
+                    placement="bottom-end"
+                    className="image-canvas-editor__kind-menu"
+                  >
+                    {CANVAS_ASSET_KIND_TAG_OPTIONS.map((option) => (
+                      <PlatformFloatingMenuItem
+                        key={option.value ?? 'unknown'}
+                        className={
+                          option.value === (layer.assetKind ?? null)
+                            ? 'image-canvas-editor__kind-menu-item--active'
+                            : undefined
+                        }
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onUpdateLayerAssetKind(layer.id, option.value);
+                          setOpenLayerKindMenuId(null);
+                        }}
+                      >
+                        {option.label}
+                      </PlatformFloatingMenuItem>
+                    ))}
+                  </PlatformFloatingMenu>
+                </div>
               ) : null}
-              {layerGeneratingLabel ? (
-                <span
-                  className="image-canvas-editor__generation-frame-progress image-canvas-editor__layer-generating-progress"
-                  role="status"
-                >
-                  {layerGeneratingLabel}
-                </span>
-              ) : null}
-            </LayerElement>
+            </div>
           );
         })}
       {canvasMarquee ? (
@@ -605,7 +865,10 @@ export function ImageCanvasWorldView({
                       {`${dialog.placeholder.originalWidth} x ${dialog.placeholder.originalHeight}`}
                     </span>
                   ) : null}
-                  <span className="image-canvas-editor__generation-frame-icon">
+                  <span
+                    className="image-canvas-editor__generation-frame-icon"
+                    style={inverseScaleStyle}
+                  >
                     {placeholderMeta.icon}
                   </span>
                   {dialog.status === 'generating' ? (
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index e77cdb04c..47fb7cd59 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -605,7 +605,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-icons',
-      priceMudPoints: 12,
+      priceMudPoints: 20,
       iconImageSrcs: [
         createIconResult('返回按钮', 'data:image/png;base64,back'),
         createIconResult('设置按钮', 'data:image/png;base64,setting'),
@@ -647,7 +647,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
           referenceImageSrc: 'data:image/png;base64,spec',
           iconDescriptions: ['返回按钮', '设置按钮'],
           model: 'gpt-image-2',
-          priceMudPoints: 12,
+          priceMudPoints: 20,
         }),
       );
     });
@@ -683,7 +683,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
-      priceMudPoints: 12,
+      priceMudPoints: 20,
       iconImageSrcs: [
         createIconResult('素材 1', 'data:image/png;base64,asset-1'),
       ],
diff --git a/src/index.css b/src/index.css
index b2aee8900..08f09e7ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4445,25 +4445,91 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__audio-card-title {
-  position: relative;
+  position: absolute;
+  left: 0.7rem;
+  top: 0.7rem;
   z-index: 2;
   overflow: hidden;
+  max-width: min(70%, calc(100% - 1.4rem));
   color: #ffffff;
   font-size: 0.74rem;
   font-weight: 800;
   line-height: 1.1;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-shadow: 0 1px 6px rgba(15, 23, 42, 0.55);
 }
 
 .image-canvas-editor__audio-card-controls {
   position: relative;
   z-index: 2;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto minmax(2rem, 3.8rem);
+  align-items: center;
+  gap: 0.34rem;
+  min-height: 1.85rem;
+  padding: 0.18rem 0;
+  color: rgba(255, 255, 255, 0.92);
+  transform: translateY(calc(100% + 0.7rem));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease;
+}
+
+.image-canvas-editor__audio-card--controls-visible
+  .image-canvas-editor__audio-card-controls {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .image-canvas-editor__audio-card audio {
-  width: 100%;
-  height: 1.85rem;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.image-canvas-editor__audio-card-time {
+  min-width: 2.2rem;
+  font-size: 0.58rem;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: center;
+  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.42);
+}
+
+.image-canvas-editor__audio-card-progress,
+.image-canvas-editor__audio-card-volume {
+  min-width: 0;
+  height: 0.35rem;
+  accent-color: #67e8f9;
+  cursor: pointer;
+}
+
+.image-canvas-editor__audio-card-progress:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.image-canvas-editor__audio-card-volume-toggle {
+  display: grid;
+  width: 1.25rem;
+  height: 1.25rem;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.image-canvas-editor__audio-card-volume-toggle:hover {
+  background: rgba(255, 255, 255, 0.24);
 }
 
 .image-canvas-editor__layer--hovered,
@@ -4560,6 +4626,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   display: grid;
   place-items: center;
   color: #c7c7c7;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: center;
 }
 
 .image-canvas-editor__generation-frame--character {
@@ -4910,6 +4978,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   transform-origin: top right;
 }
 
+.image-canvas-editor__kind-badge--editable {
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
 .image-canvas-editor__kind-badge--beside-info {
   right: var(--image-canvas-editor-beside-kind-offset, 1.95rem);
 }
@@ -4954,6 +5028,16 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(219, 39, 119, 0.24);
 }
 
+.image-canvas-editor__kind-badge--publication-material {
+  background: rgba(219, 39, 119, 0.92);
+  box-shadow: 0 8px 18px rgba(219, 39, 119, 0.24);
+}
+
+.image-canvas-editor__kind-badge--unknown {
+  background: rgba(71, 85, 105, 0.88);
+  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.2);
+}
+
 .image-canvas-editor__kind-badge--video {
   background: rgba(37, 99, 235, 0.92);
   box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
@@ -4965,6 +5049,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(79, 70, 229, 0.24);
 }
 
+.image-canvas-editor__kind-menu-anchor {
+  position: absolute;
+  width: 0;
+  height: 0;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top right;
+}
+
+.image-canvas-editor__kind-menu {
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.image-canvas-editor__kind-menu-item--active {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
 .image-canvas-editor__size-badge {
   position: absolute;
   left: var(--image-canvas-editor-corner-offset, 0.35rem);
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index e859fa81a..415590b74 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -633,7 +633,7 @@ describe('editorProjectClient', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'icon-spritesheet-task-2',
-      priceMudPoints: 12,
+      priceMudPoints: 20,
     });
 
     await generateEditorIconSpritesheet({
@@ -642,7 +642,7 @@ describe('editorProjectClient', () => {
       model: 'gpt-image-2',
       aspectRatio: '1:1',
       imageSize: '2K',
-      priceMudPoints: 12,
+      priceMudPoints: 20,
     });
 
     expect(requestJsonMock).toHaveBeenCalledWith(
@@ -656,7 +656,7 @@ describe('editorProjectClient', () => {
           model: 'gpt-image-2',
           aspectRatio: '1:1',
           imageSize: '2K',
-          priceMudPoints: 12,
+          priceMudPoints: 20,
         }),
       }),
       '生成图标素材失败',
@@ -685,7 +685,7 @@ describe('editorProjectClient', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'ui-asset-extraction-1',
-      priceMudPoints: 12,
+      priceMudPoints: 20,
     });
 
     const result = await extractEditorUiDesignAssets({