diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 113f83db9..88da8aae3 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -18,7 +18,7 @@
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色规范 / 常规参考图 / 图标规范 / 编辑参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行重绘时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图；重绘面板不因提交成功自动关闭，便于连续改提示词。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和重绘保留既有 `gpt-image-2` 路径；快速编辑按原图模型提交；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板底部用与可编辑面板一致的比例 / 尺寸 / 模型胶囊按钮展示固定参数，但按钮为禁用态，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后走同一图片生成 BFF，并在原图右侧生成一张新图；普通图层重绘作为 `quick-edit` 参考图提交，角色图层重绘必须按 `kind: "character"` 提交，继续套用角色生成器提示词限定、透明 PNG 后处理和角色资产持久化。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和重绘在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和重绘保留既有 `gpt-image-2` 路径；快速编辑按原图模型提交；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板底部用与可编辑面板一致的比例 / 尺寸 / 模型胶囊按钮展示固定参数，但按钮为禁用态，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。宣发素材必须按 workflow 同时提交 `outputSize`、`aspectRatio` 和 `imageSize`，其中游戏首图为 `720x540 / 4:3`、详情单图为 `720x1280 / 9:16`、运营海报为 `1280x720 / 16:9`；生成回填图层优先使用生成占位的 `originalWidth/originalHeight`，即使上游回包尺寸漂移也不得把宣发素材卡片变成随机 `1:1` 或 `4:3`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后走同一图片生成 BFF，并在原图右侧生成一张新图；普通图层重绘作为 `quick-edit` 参考图提交，角色图层重绘必须按 `kind: "character"` 提交，继续套用角色生成器提示词限定、透明 PNG 后处理和角色资产持久化。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和重绘在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 快速编辑面板对齐其它生成类面板：首行支持额外参考图，最多 8 张；原图自动作为最后一张参考图展示和提交。尺寸、模型沿用原图配置，只以禁用态参数胶囊展示，不可点击修改。提交前将提示词里对原图的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写为最后一张原图编号，例如额外 1 张参考图时写成 `图2`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频`、`生成UI设计图` 和 `生成角色动作`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
@@ -96,12 +96,13 @@
 - 快速编辑面板底部必须以禁用态参数按钮显示原图尺寸和原图模型，视觉对齐可编辑面板参数控件；参考图顺序为额外参考图在前、原图在最后。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
-- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照。UI设计图的提取素材固定走 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
+- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照；前端轻量去背必须复用共享 `chromaKey` 的绿幕 / 近白背景模型，不再只按四角颜色扩散，避免纯白角色主体或主体内部浅色区域被扣碎。UI设计图的提取素材固定走 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
 - 重绘生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图，且重绘面板保持打开。
 - 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
 - 快速编辑的额外参考图同样必须在前端读取成图片 Data URL 后提交；后端 `referenceImageSrcs` 上限为 9 张，承载 8 张额外参考图加 1 张原图。
 - 素材文件夹可以新建、折叠、重命名和删除；删除普通文件夹后，其素材移动到“项目素材”。
 - 上传按钮和拖拽上传都支持多文件；底部工具栏的上传入口选择文件后直接进入默认素材文件夹并在当前画布视口中心创建画布图层，素材栏文件夹内的上传入口只写入对应素材文件夹、不自动入画布；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入默认文件夹并在投放点创建画布图层。上传图片必须在创建占位素材、画布图层和账号级素材记录前先读取原图 Resolution，图层宽高、`originalWidth/originalHeight` 和素材库 `width/height` 都使用图片本身尺寸；仅在无法解析尺寸时才使用上传兜底尺寸。
+- 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
 - 素材面板支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
 - 图层面板支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动。
diff --git a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
index 2d419c7dd..16e136c58 100644
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -47,6 +47,7 @@
   - 承载中央画布工作区的视觉树：viewport / world DOM、图层渲染、生成占位框、选中图片浮动工具栏、空白和图片右键菜单、左下 dock、缩放菜单、背景设置面板、小地图和底部 AI 工具栏。
   - 继续通过 props 调用主视图状态机，不接管拖拽 / 平移 / 缩放、画布坐标换算、历史 undo / redo、上传、登录、生成提交、素材持久化和右键命令实现。
   - 保持 `canvasViewportRef` 由主视图传入，确保 pointer capture、drop 坐标、滚轮缩放和小地图拖拽仍使用同一套坐标源。
+  - 图片图层渲染必须和音频、视频一样走统一资源读取解析；图层存在 `objectKey` 时优先用它换签，避免重进项目后私有上传 / 生成资源只剩旧路径而无法显示。
 
 第三阶段以后，主视图仍是画布编排入口。继续拆分前应优先选择能形成稳定边界的深模块，避免把上传链路、DataTransfer、画布坐标和历史快照拆成互相回调的小碎片。
 
@@ -84,6 +85,7 @@
   - 承载图片画布工程持久化协调：项目加载、`projectId` 维护、未就绪资源队列、工程资源创建、资源创建后即时 layout 保存、450ms 自动保存和鉴权失败登录弹窗。
   - 该 hook 以“项目持久化协调器”整体抽出，避免把加载、保存和资源创建拆成多个小 hook 后打散 `projectIdRef`、`pendingProjectResourceLayersRef`、`isProjectReady` 和 `saveTimerRef` 的时序约束。
   - 主视图继续负责项目重命名 UI、素材库管理、上传流程和用户动作触发；新增图层仍通过 `appendCanvasLayersWithResources` 先写本地图层快照，再创建 project resource 并保存带真实 `resourceId` 的 layout。
+  - 项目加载 hydrate 时必须从 project resource 回填 `objectKey`、`assetObjectId`、`sourceResourceId` 等资源元数据；layout 快照保持轻量，但重进项目后的画布图层仍要保留换签和后续编辑所需线索。
 
 ## 第九阶段模块
 
diff --git a/packages/shared/src/assets/chromaKey.test.ts b/packages/shared/src/assets/chromaKey.test.ts
new file mode 100644
index 000000000..125bb5393
--- /dev/null
+++ b/packages/shared/src/assets/chromaKey.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+
+import { removeBackgroundFromRgba } from './chromaKey';
+
+function createSolidRgbaBuffer({
+  width,
+  height,
+  color,
+}: {
+  width: number;
+  height: number;
+  color: [number, number, number, number];
+}) {
+  const pixels = new Uint8ClampedArray(width * height * 4);
+  for (let index = 0; index < width * height; index += 1) {
+    pixels.set(color, index * 4);
+  }
+  return pixels;
+}
+
+function setPixel(
+  pixels: Uint8ClampedArray,
+  width: number,
+  x: number,
+  y: number,
+  color: [number, number, number, number],
+) {
+  pixels.set(color, (y * width + x) * 4);
+}
+
+function alphaAt(
+  pixels: Uint8ClampedArray,
+  width: number,
+  x: number,
+  y: number,
+) {
+  return pixels[(y * width + x) * 4 + 3] ?? 0;
+}
+
+describe('chromaKey', () => {
+  it('removes near-white canvas background without breaking an enclosed white character', () => {
+    const width = 9;
+    const height = 9;
+    const pixels = createSolidRgbaBuffer({
+      width,
+      height,
+      color: [250, 250, 250, 255],
+    });
+
+    for (let y = 2; y <= 6; y += 1) {
+      for (let x = 2; x <= 6; x += 1) {
+        setPixel(pixels, width, x, y, [92, 80, 72, 255]);
+      }
+    }
+    for (let y = 3; y <= 5; y += 1) {
+      for (let x = 3; x <= 5; x += 1) {
+        setPixel(pixels, width, x, y, [246, 246, 244, 255]);
+      }
+    }
+
+    expect(removeBackgroundFromRgba(pixels, width, height)).toBe(true);
+
+    expect(alphaAt(pixels, width, 0, 0)).toBe(0);
+    expect(alphaAt(pixels, width, 4, 4)).toBe(255);
+    expect(alphaAt(pixels, width, 2, 2)).toBeGreaterThan(200);
+  });
+});
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 2741db010..0cfe0850c 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -1661,6 +1661,7 @@ async fn extract_and_persist_editor_character_animation_frames(
         request.frame_height,
         extraction_settings,
         &plan,
+        Some(request.duration_seconds as f64),
     )
     .await?;
 
@@ -1823,6 +1824,7 @@ async fn publish_single_animation_action(
             frame_height,
             extraction_settings,
             &frame_plan,
+            None,
         )
         .await?
     } else {
@@ -3058,6 +3060,7 @@ async fn extract_animation_frames_from_preview_video(
     frame_height: u32,
     extraction_settings: &BackendFrameExtractionSettings,
     plan: &AnimationFrameExtractionPlan,
+    known_duration_seconds: Option<f64>,
 ) -> Result<Vec<FinalizedAnimationFrame>, AppError> {
     let preview_payload = load_media_source_payload(state, preview_video_path).await?;
     if !preview_payload.mime_type.starts_with("video/") {
@@ -3079,8 +3082,12 @@ async fn extract_animation_frames_from_preview_video(
     })?;
 
     let extraction_result = (|| {
-        let duration_seconds =
-            probe_video_duration_seconds(&input_path, extraction_settings)?.max(0.001);
+        let duration_seconds = probe_video_duration_seconds_or_known(
+            &input_path,
+            extraction_settings,
+            known_duration_seconds,
+        )?
+        .max(0.001);
         let mut finalized_frames = Vec::with_capacity(plan.frame_count as usize);
         for frame_index in 0..plan.frame_count {
             let target_seconds = compute_sample_time_seconds(
@@ -3161,6 +3168,33 @@ fn probe_video_duration_seconds(
     })
 }
 
+fn probe_video_duration_seconds_or_known(
+    input_path: &Path,
+    extraction_settings: &BackendFrameExtractionSettings,
+    known_duration_seconds: Option<f64>,
+) -> Result<f64, AppError> {
+    match probe_video_duration_seconds(input_path, extraction_settings) {
+        Ok(duration_seconds) => Ok(duration_seconds),
+        Err(error)
+            if is_ffprobe_start_error(&error, extraction_settings.ffprobe_path.as_str()) =>
+        {
+            if let Some(duration_seconds) = known_duration_seconds
+                .filter(|duration_seconds| duration_seconds.is_finite() && *duration_seconds > 0.0)
+            {
+                return Ok(duration_seconds);
+            }
+            Err(error)
+        }
+        Err(error) => Err(error),
+    }
+}
+
+fn is_ffprobe_start_error(error: &AppError, ffprobe_path: &str) -> bool {
+    error.status_code() == StatusCode::SERVICE_UNAVAILABLE
+        && error.body_text().contains("无法启动进程")
+        && error.body_text().contains(ffprobe_path)
+}
+
 fn compute_sample_time_seconds(
     duration_seconds: f64,
     frame_index: u32,
@@ -4842,6 +4876,42 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_character_animation_uses_known_duration_when_ffprobe_is_missing() {
+        let settings = BackendFrameExtractionSettings {
+            ffmpeg_path: "ffmpeg".to_string(),
+            ffprobe_path: "__missing_ffprobe_for_editor_animation_test__".to_string(),
+            timeout_ms: 1_000,
+        };
+
+        let duration = probe_video_duration_seconds_or_known(
+            Path::new("preview.mp4"),
+            &settings,
+            Some(6.0),
+        )
+        .expect("known duration should cover a missing ffprobe binary");
+
+        assert_eq!(duration, 6.0);
+    }
+
+    #[test]
+    fn editor_character_animation_keeps_ffprobe_error_without_known_duration() {
+        let settings = BackendFrameExtractionSettings {
+            ffmpeg_path: "ffmpeg".to_string(),
+            ffprobe_path: "__missing_ffprobe_for_editor_animation_test__".to_string(),
+            timeout_ms: 1_000,
+        };
+
+        let error = probe_video_duration_seconds_or_known(
+            Path::new("preview.mp4"),
+            &settings,
+            None,
+        )
+        .expect_err("missing ffprobe should still fail without a trusted duration");
+
+        assert!(error.body_text().contains("无法启动进程"));
+    }
+
     #[test]
     fn editor_video_normalizes_lovart_model_contract() {
         let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 6d9502cf2..ddedaa48c 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -852,17 +852,17 @@ pub async fn generate_editor_image(
         payload.image_size.as_deref(),
     );
     let has_dimension_options = payload.aspect_ratio.is_some() || payload.image_size.is_some();
-    let legacy_size = normalize_editor_image_generation_size(payload.size.as_deref());
-    let image_size = if has_dimension_options {
-        Cow::Owned(generation_options.size.clone())
-    } else {
-        legacy_size
-    };
     let normalized_kind = payload.kind.as_deref().map(str::trim);
     let is_character_generation = matches!(normalized_kind, Some("character"));
     let is_ui_design_generation = matches!(normalized_kind, Some("ui-design"));
     let is_publication_material_generation =
         matches!(normalized_kind, Some("publication-material"));
+    let image_size = resolve_editor_image_request_size(
+        normalized_kind,
+        payload.size.as_deref(),
+        has_dimension_options,
+        &generation_options,
+    );
     let submitted_prompt = if is_character_generation {
         build_editor_character_image_prompt(role_setting.as_str())
     } else if is_ui_design_generation {
@@ -1085,6 +1085,25 @@ fn normalize_editor_image_generation_size(size: Option<&str>) -> Cow<'static, st
     }
 }
 
+fn resolve_editor_image_request_size(
+    normalized_kind: Option<&str>,
+    payload_size: Option<&str>,
+    has_dimension_options: bool,
+    generation_options: &EditorGenerationOptions,
+) -> Cow<'static, str> {
+    let legacy_size = normalize_editor_image_generation_size(payload_size);
+    let has_explicit_payload_size = payload_size
+        .map(str::trim)
+        .is_some_and(|value| !value.is_empty());
+    if matches!(normalized_kind, Some("publication-material")) && has_explicit_payload_size {
+        return legacy_size;
+    }
+    if has_dimension_options {
+        return Cow::Owned(generation_options.size.clone());
+    }
+    legacy_size
+}
+
 fn is_editor_custom_image_size(value: &str) -> bool {
     let Some((width, height)) = value.split_once('x') else {
         return false;
@@ -1137,6 +1156,7 @@ fn normalize_editor_generation_aspect_ratio(aspect_ratio: Option<&str>) -> &'sta
     {
         Some("2:3") => "2:3",
         Some("3:2") => "3:2",
+        Some("4:3") => "4:3",
         Some("9:16") => "9:16",
         Some("16:9") => "16:9",
         _ => "1:1",
@@ -1169,8 +1189,10 @@ fn editor_generation_size_for_model(model: &str, aspect_ratio: &str, image_size:
         ("2K", "1:1") => "2048x2048",
         // 中文注释：gpt-image-2 文档未列出 2K 竖版，竖版选择回落到文档明确支持的 1K 竖版。
         ("2K", "2:3") | ("2K", "9:16") => "1024x1536",
+        ("2K", "4:3") => "2048x1536",
         ("2K", "16:9") | ("2K", "3:2") => "2048x1152",
         ("1K", "2:3") | ("1K", "9:16") => "1024x1536",
+        ("1K", "4:3") => "1536x1024",
         ("1K", "3:2") | ("1K", "16:9") => "1536x1024",
         _ => "1024x1024",
     }
@@ -2274,6 +2296,18 @@ mod tests {
         assert_eq!(gpt.image_size, "1K");
         assert_eq!(gpt.provider_image_size, "1K");
 
+        let nanobanana_cover =
+            normalize_editor_generation_options(Some("nanobanana2"), Some("4:3"), Some("1K"));
+        assert_eq!(nanobanana_cover.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        assert_eq!(nanobanana_cover.size, "1024");
+        assert_eq!(nanobanana_cover.aspect_ratio, "4:3");
+
+        let gpt_cover =
+            normalize_editor_generation_options(Some("gpt-image-2"), Some("4:3"), Some("1K"));
+        assert_eq!(gpt_cover.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt_cover.size, "1536x1024");
+        assert_eq!(gpt_cover.aspect_ratio, "4:3");
+
         let gpt_landscape_2k =
             normalize_editor_generation_options(Some("gpt-image-2"), Some("16:9"), Some("2K"));
         assert_eq!(gpt_landscape_2k.model, GPT_IMAGE_2_MODEL);
@@ -2300,6 +2334,26 @@ mod tests {
         assert_eq!(fallback.provider_image_size, "1K");
     }
 
+    #[test]
+    fn publication_material_request_size_keeps_workflow_pixels() {
+        let options =
+            normalize_editor_generation_options(Some("gpt-image-2"), Some("4:3"), Some("1K"));
+
+        assert_eq!(
+            resolve_editor_image_request_size(
+                Some("publication-material"),
+                Some("720x540"),
+                true,
+                &options,
+            ),
+            "720x540"
+        );
+        assert_eq!(
+            resolve_editor_image_request_size(Some("generate"), Some("720x540"), true, &options),
+            "1536x1024"
+        );
+    }
+
     #[test]
     fn editor_ui_design_prompt_uses_fixed_user_input_block_and_optional_icon_spec() {
         let prompt = build_editor_ui_design_prompt("二消玩法，主界面和结算弹窗", true);
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index 7402dbc77..6de452d65 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -143,5 +143,25 @@ describe('ImageCanvasAssetRowView', () => {
     expect(
       document.querySelector('.image-canvas-editor__asset-media-overlay'),
     ).toBeTruthy();
+    expect(
+      document.querySelector('.image-canvas-editor__media-preview--audio'),
+    ).toBeTruthy();
+  });
+
+  it('uses a stable visual preview for video asset cards without image thumbnails', () => {
+    renderAssetRow({
+      asset: createAsset({
+        label: '生成视频.mp4',
+        src: '/generated-character-drafts/editor/asset-library/video/demo.mp4',
+        mediaType: 'video',
+      }),
+    });
+
+    expect(screen.getByText('视频')).toBeTruthy();
+    expect(screen.queryByRole('img', { name: '素材：生成视频.mp4' })).toBeNull();
+    expect(
+      document.querySelector('.image-canvas-editor__media-preview--video')
+        ?.className,
+    ).toContain('image-canvas-editor__media-preview--variant-');
   });
 });
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 9077e8292..6a738434b 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -16,6 +16,10 @@ import type {
   AssetPointerDragState,
   EditorAsset,
 } from './ImageCanvasEditorTypes';
+import {
+  getCanvasMediaPreviewClassName,
+  getCanvasMediaPreviewMarker,
+} from './ImageCanvasMediaModel';
 import type { UploadFilesOptions } from './ImageCanvasAssetLibraryPanelView';
 
 export type ImageCanvasAssetRowViewProps = {
@@ -65,6 +69,9 @@ export function ImageCanvasAssetRowView({
   const isUploadingAsset = asset.uploadStatus === 'uploading';
   const isFailedUpload = asset.uploadStatus === 'failed';
   const uploadProgress = clamp(asset.uploadProgress ?? 0, 0, 100);
+  const mediaPreviewMarker = getCanvasMediaPreviewMarker(asset);
+  const mediaPreviewClassName =
+    getCanvasMediaPreviewClassName(mediaPreviewMarker);
   const mediaDetail =
     asset.mediaType === 'audio'
       ? '音频'
@@ -73,11 +80,15 @@ export function ImageCanvasAssetRowView({
         : `${asset.width} x ${asset.height}`;
   const mediaOverlay =
     asset.mediaType === 'audio' ? (
-      <div className="image-canvas-editor__asset-media-overlay">
+      <div
+        className={`image-canvas-editor__asset-media-overlay ${mediaPreviewClassName}`}
+      >
         <Music2 className="h-5 w-5" />
       </div>
     ) : asset.mediaType === 'video' ? (
-      <div className="image-canvas-editor__asset-media-overlay">
+      <div
+        className={`image-canvas-editor__asset-media-overlay ${mediaPreviewClassName}`}
+      >
         <Video className="h-5 w-5" />
       </div>
     ) : undefined;
@@ -151,7 +162,6 @@ export function ImageCanvasAssetRowView({
       <SidebarMediaItem
         title={asset.label}
         detail={mediaDetail}
-        imageSrc={asset.mediaType === 'image' ? asset.src : ''}
         imageAlt={`素材：${asset.label}`}
         primaryLabel={
           isUploadingAsset
@@ -188,6 +198,11 @@ export function ImageCanvasAssetRowView({
         primaryClassName="image-canvas-editor__asset-button"
         thumbnailClassName="image-canvas-editor__asset-thumb"
         metaClassName="image-canvas-editor__asset-meta"
+        imageSrc={
+          asset.mediaType === 'image'
+            ? asset.src
+            : (asset.thumbnailSrc ?? '')
+        }
         titleNode={
           isUploadingAsset || isFailedUpload ? <span>{asset.label}</span> : titleNode
         }
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 1ec8e5a7b..287ba71d1 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -195,6 +195,43 @@ describe('ImageCanvasEditorModel', () => {
     expect(hydrated?.generationInputs?.fields[0]?.value).toBe('骑士');
   });
 
+  it('hydrates object metadata from project resources when the saved layer is lean', () => {
+    const hydrated = hydrateLayer(
+      {
+        layerId: 'layer-uploaded',
+        resourceId: 'resource-uploaded',
+        title: '上传图',
+        x: 10,
+        y: 20,
+        width: 640,
+        height: 360,
+        originalWidth: 640,
+        originalHeight: 360,
+        zIndex: 2,
+        sourceType: 'uploaded',
+      },
+      new Map([
+        [
+          'resource-uploaded',
+          {
+            imageSrc: '/generated-character-drafts/editor/asset-library/image.png',
+            objectKey: 'generated-character-drafts/editor/asset-library/image.png',
+            assetObjectId: 'asset-object-uploaded',
+            sourceResourceId: 'resource-source',
+          },
+        ],
+      ]),
+    );
+
+    expect(hydrated).toMatchObject({
+      id: 'layer-uploaded',
+      src: '/generated-character-drafts/editor/asset-library/image.png',
+      objectKey: 'generated-character-drafts/editor/asset-library/image.png',
+      assetObjectId: 'asset-object-uploaded',
+      sourceResourceId: 'resource-source',
+    });
+  });
+
   it('hydrates manually selected publication material tags from saved layout', () => {
     const hydrated = hydrateLayer(
       {
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index f200cfd7a..f3cd0ee7d 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -418,12 +418,15 @@ export function hydrateLayer(
     model: stringOrNull(snapshot.model),
     provider: stringOrNull(snapshot.provider),
     taskId: stringOrNull(snapshot.taskId),
-    objectKey: stringOrNull(snapshot.objectKey),
-    assetObjectId: stringOrNull(snapshot.assetObjectId),
+    objectKey: stringOrNull(snapshot.objectKey) ?? stringOrNull(resource?.objectKey),
+    assetObjectId:
+      stringOrNull(snapshot.assetObjectId) ?? stringOrNull(resource?.assetObjectId),
     durationSeconds:
       audioDurationOrNull(snapshot.durationSeconds) ??
       audioDurationOrNull(resource?.durationSeconds),
-    sourceResourceId: stringOrNull(snapshot.sourceResourceId),
+    sourceResourceId:
+      stringOrNull(snapshot.sourceResourceId) ??
+      stringOrNull(resource?.sourceResourceId),
     sourceAssetId: stringOrNull(snapshot.sourceAssetId),
     groupId: stringOrNull(snapshot.groupId),
     assetKind:
@@ -507,7 +510,10 @@ function inferAudioAssetKindFromLabel(label: string): CanvasAssetKind {
 
 export type CanvasLayerResourceMetadata = {
   imageSrc: string;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
   durationSeconds?: number | null;
+  sourceResourceId?: string | null;
   assetKind?: string | null;
   generationInputs?: unknown;
 };
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index f009b3c7f..b33731925 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -29,6 +29,7 @@ export type EditorAsset = {
   label: string;
   src: string;
   mediaType?: CanvasMediaType;
+  thumbnailSrc?: string | null;
   width: number;
   height: number;
   folderId: string;
@@ -72,6 +73,7 @@ export type CanvasLayer = {
   title: string;
   src: string;
   mediaType?: CanvasMediaType;
+  thumbnailSrc?: string | null;
   x: number;
   y: number;
   width: number;
@@ -431,6 +433,7 @@ export type CanvasAssetExportMetadata = {
     layerId: string;
     title: string;
     file: string | null;
+    mediaType?: CanvasMediaType | null;
     sourceType: CanvasSourceType;
     prompt?: string | null;
     actualPrompt?: string | null;
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 98eb60d23..c500cebf0 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -582,7 +582,7 @@ describe('ImageCanvasEditorView', () => {
     );
     fireEvent.click(screen.getByRole('button', { name: '下载按钮' }));
 
-    expect(downloadName).toBe('拼图素材.png');
+    expect(downloadName).toBe('拼图素材.webp');
     expect(downloadHref).toContain('/creation-type-references/puzzle.webp');
     expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
     expect(screen.getByAltText('画布图片：大鱼素材')).toBeTruthy();
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index 86706a6b3..dbea6b881 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -1,11 +1,13 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import {
   buildLayerExportMetadata,
   dataUrlToBlob,
   formatExportDate,
   getImageExtensionFromTypeOrSrc,
+  getLayerAssetExtensionFromTypeOrSrc,
   getLayerExportKey,
+  readLayerAssetBlob,
   sanitizeExportFilePart,
 } from './ImageCanvasExportModel';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
@@ -47,6 +49,20 @@ describe('ImageCanvasExportModel', () => {
     );
     expect(getImageExtensionFromTypeOrSrc('', '/image.webp?x=1')).toBe('webp');
     expect(getImageExtensionFromTypeOrSrc('', '/image.unknown')).toBe('png');
+    expect(
+      getLayerAssetExtensionFromTypeOrSrc(
+        'video',
+        'video/mp4',
+        '/video.png',
+      ),
+    ).toBe('mp4');
+    expect(
+      getLayerAssetExtensionFromTypeOrSrc(
+        'audio',
+        '',
+        '/generated-audios/effect.wav?token=1',
+      ),
+    ).toBe('wav');
   });
 
   it('converts data URLs and builds layer metadata for manifest files', async () => {
@@ -58,6 +74,7 @@ describe('ImageCanvasExportModel', () => {
       layerId: 'layer-1',
       title: '导出图层',
       file: 'images/001-layer.png',
+      mediaType: 'image',
       sourceType: 'generated',
       prompt: '生成提示',
       actualPrompt: '实际提示',
@@ -85,9 +102,57 @@ describe('ImageCanvasExportModel', () => {
       },
     });
   });
+
+  it('reads private object-key assets through signed URLs before exporting', async () => {
+    const originalFetch = globalThis.fetch;
+    const fetchMock = vi.fn(async (url: string) => {
+      if (url.startsWith('/api/assets/read-url?')) {
+        return new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey: 'generated/video.mp4',
+                signedUrl: 'https://oss.example.com/generated/video.mp4?x-oss-signature=1',
+                expiresAt: '2026-06-20T00:00:00.000Z',
+              },
+            },
+            error: null,
+            meta: { apiVersion: '2026-06-16' },
+          }),
+        );
+      }
+      if (url === 'https://oss.example.com/generated/video.mp4?x-oss-signature=1') {
+        return new Response(new Blob(['video'], { type: 'video/mp4' }));
+      }
+      return new Response(null, { status: 404 });
+    });
+    globalThis.fetch = fetchMock as typeof fetch;
+
+    try {
+      const blob = await readLayerAssetBlob(
+        buildLayer({
+          src: '/generated-editor-videos/video.mp4',
+          mediaType: 'video',
+          objectKey: 'generated/video.mp4',
+        }),
+      );
+
+      expect(blob.type).toBe('video/mp4');
+      expect(fetchMock).toHaveBeenCalledWith(
+        expect.stringContaining('/api/assets/read-url?objectKey=generated%2Fvideo.mp4'),
+        expect.any(Object),
+      );
+      expect(fetchMock).toHaveBeenCalledWith(
+        'https://oss.example.com/generated/video.mp4?x-oss-signature=1',
+      );
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
 });
 
-function buildLayer(): CanvasLayer {
+function buildLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
     id: 'layer-1',
     resourceId: 'resource-1',
@@ -114,5 +179,6 @@ function buildLayer(): CanvasLayer {
     locked: false,
     flipX: true,
     flipY: false,
+    ...overrides,
   };
 }
diff --git a/src/components/image-editor/ImageCanvasExportModel.ts b/src/components/image-editor/ImageCanvasExportModel.ts
index cd14ec8d9..3e5de65b1 100644
--- a/src/components/image-editor/ImageCanvasExportModel.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.ts
@@ -1,7 +1,12 @@
 import type {
   CanvasAssetExportMetadata,
+  CanvasMediaType,
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
+import {
+  getSignedAssetReadUrl,
+  resolveAssetReadUrl,
+} from '../../services/assetReadUrlService';
 
 export function sanitizeExportFilePart(value: string, fallback: string) {
   const safeValue = value
@@ -30,15 +35,80 @@ export function getLayerExportKey(layer: CanvasLayer) {
 }
 
 export function getImageExtensionFromTypeOrSrc(type: string, src: string) {
-  if (type.includes('jpeg') || /\.(jpe?g)(?:[?#].*)?$/iu.test(src)) {
+  return getLayerAssetExtensionFromTypeOrSrc('image', type, src);
+}
+
+function getExtensionFromSrc(src: string) {
+  const withoutQuery = src.split(/[?#]/u)[0] ?? '';
+  const match = /\.([a-z0-9]+)$/iu.exec(withoutQuery);
+  return match?.[1]?.toLowerCase() ?? null;
+}
+
+function pickKnownExtension(
+  extension: string | null,
+  allowedExtensions: string[],
+  fallback: string,
+) {
+  return extension && allowedExtensions.includes(extension) ? extension : fallback;
+}
+
+export function getLayerAssetExtensionFromTypeOrSrc(
+  mediaType: CanvasMediaType | undefined,
+  type: string,
+  src: string,
+) {
+  const normalizedType = type.toLowerCase();
+  const extensionFromSrc = getExtensionFromSrc(src);
+  if (mediaType === 'audio') {
+    if (normalizedType.includes('mpeg') || normalizedType.includes('mp3')) {
+      return 'mp3';
+    }
+    if (normalizedType.includes('wav')) {
+      return 'wav';
+    }
+    if (normalizedType.includes('ogg')) {
+      return 'ogg';
+    }
+    if (normalizedType.includes('aac')) {
+      return 'aac';
+    }
+    if (normalizedType.includes('flac')) {
+      return 'flac';
+    }
+    return pickKnownExtension(
+      extensionFromSrc,
+      ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a'],
+      'mp3',
+    );
+  }
+  if (mediaType === 'video') {
+    if (normalizedType.includes('mp4')) {
+      return 'mp4';
+    }
+    if (normalizedType.includes('webm')) {
+      return 'webm';
+    }
+    if (normalizedType.includes('quicktime')) {
+      return 'mov';
+    }
+    return pickKnownExtension(extensionFromSrc, ['mp4', 'webm', 'mov'], 'mp4');
+  }
+  if (
+    normalizedType.includes('jpeg') ||
+    extensionFromSrc === 'jpg' ||
+    extensionFromSrc === 'jpeg'
+  ) {
     return 'jpg';
   }
-  if (type.includes('webp') || /\.webp(?:[?#].*)?$/iu.test(src)) {
+  if (normalizedType.includes('webp') || extensionFromSrc === 'webp') {
     return 'webp';
   }
-  if (type.includes('gif') || /\.gif(?:[?#].*)?$/iu.test(src)) {
+  if (normalizedType.includes('gif') || extensionFromSrc === 'gif') {
     return 'gif';
   }
+  if (normalizedType.includes('svg') || extensionFromSrc === 'svg') {
+    return 'svg';
+  }
   return 'png';
 }
 
@@ -59,17 +129,26 @@ export function dataUrlToBlob(dataUrl: string) {
   return new Blob([bytes], { type });
 }
 
-export async function readLayerImageBlob(layer: CanvasLayer) {
+export async function readLayerAssetBlob(layer: CanvasLayer) {
   if (layer.src.startsWith('data:')) {
     return dataUrlToBlob(layer.src);
   }
-  const response = await fetch(layer.src);
+  const source = layer.objectKey
+    ? await getSignedAssetReadUrl(
+        { objectKey: layer.objectKey },
+        undefined,
+        { cacheVersion: layer.taskId ?? layer.resourceId },
+      )
+    : await resolveAssetReadUrl(layer.src);
+  const response = await fetch(source);
   if (!response.ok) {
     throw new Error(`HTTP ${response.status}`);
   }
   return response.blob();
 }
 
+export const readLayerImageBlob = readLayerAssetBlob;
+
 export async function blobToUint8Array(blob: Blob) {
   if (typeof blob.arrayBuffer === 'function') {
     return new Uint8Array(await blob.arrayBuffer());
@@ -98,6 +177,7 @@ export function buildLayerExportMetadata(
     layerId: layer.id,
     title: layer.title,
     file,
+    mediaType: layer.mediaType ?? 'image',
     sourceType: layer.sourceType,
     prompt: layer.prompt,
     actualPrompt: layer.actualPrompt,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 351fc7bf8..32c300b02 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -225,6 +225,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
     expect(createSoundEffectGenerationDialogDraft({ canvasSize, viewport }))
       .toMatchObject({
         mode: 'audio-sound-effect',
+        prompt:
+          '短促清脆的游戏交互音效，带轻微闪光质感，干净收尾，适合按钮确认或收集奖励。',
         status: 'idle',
         composerOpen: true,
         soundModel: 'audio1.0',
@@ -241,6 +243,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
     expect(createBackgroundMusicGenerationDialogDraft({ canvasSize, viewport }))
       .toMatchObject({
         mode: 'audio-background-music',
+        prompt:
+          '适合轻松冒险游戏的循环背景音乐，温暖明亮，旋律简洁，不包含人声。',
         status: 'idle',
         composerOpen: true,
         makeInstrumental: true,
@@ -311,6 +315,37 @@ describe('ImageCanvasGenerationDialogModel', () => {
     expect(createAudioRedrawGenerationDialogDraft(createLayer())).toBeNull();
   });
 
+  it('uses audio prompt templates when remodeling old audio layers without prompts', () => {
+    expect(
+      createAudioRedrawGenerationDialogDraft(
+        createLayer({
+          mediaType: 'audio',
+          assetKind: 'sound-effect',
+          prompt: '',
+          generationInputs: { fields: [], references: [] },
+        }),
+      ),
+    ).toMatchObject({
+      mode: 'audio-sound-effect',
+      prompt:
+        '短促清脆的游戏交互音效，带轻微闪光质感，干净收尾，适合按钮确认或收集奖励。',
+    });
+    expect(
+      createAudioRedrawGenerationDialogDraft(
+        createLayer({
+          mediaType: 'audio',
+          assetKind: 'background-music',
+          title: '游戏背景音乐',
+          prompt: '',
+          generationInputs: { fields: [], references: [] },
+        }),
+      ),
+    ).toMatchObject({
+      mode: 'audio-background-music',
+      prompt: '适合轻松冒险游戏的循环背景音乐，温暖明亮，旋律简洁，不包含人声。',
+    });
+  });
+
   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 988704d90..97460098f 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -40,6 +40,10 @@ const VIDEO_REFERENCE_LIMITS = {
   video: 3,
   audio: 3,
 } as const;
+const DEFAULT_SOUND_EFFECT_PROMPT =
+  '短促清脆的游戏交互音效，带轻微闪光质感，干净收尾，适合按钮确认或收集奖励。';
+const DEFAULT_BACKGROUND_MUSIC_PROMPT =
+  '适合轻松冒险游戏的循环背景音乐，温暖明亮，旋律简洁，不包含人声。';
 
 function getViewportWorldCenter({
   canvasSize,
@@ -352,7 +356,7 @@ export function createSoundEffectGenerationDialogDraft({
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
   return {
     mode: 'audio-sound-effect',
-    prompt: '',
+    prompt: DEFAULT_SOUND_EFFECT_PROMPT,
     status: 'idle',
     composerOpen: true,
     soundModel: DEFAULT_SOUND_EFFECT_MODEL,
@@ -378,7 +382,7 @@ export function createBackgroundMusicGenerationDialogDraft({
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
   return {
     mode: 'audio-background-music',
-    prompt: '',
+    prompt: DEFAULT_BACKGROUND_MUSIC_PROMPT,
     status: 'idle',
     composerOpen: true,
     makeInstrumental: true,
@@ -405,7 +409,24 @@ function findGenerationInputFieldValue(
   );
 }
 
-function resolveAudioRedrawPrompt(sourceLayer: CanvasLayer) {
+function resolveDefaultAudioPrompt(
+  mode: Extract<
+    GenerateDialogState['mode'],
+    'audio-sound-effect' | 'audio-background-music'
+  >,
+) {
+  return mode === 'audio-background-music'
+    ? DEFAULT_BACKGROUND_MUSIC_PROMPT
+    : DEFAULT_SOUND_EFFECT_PROMPT;
+}
+
+function resolveAudioRedrawPrompt(
+  sourceLayer: CanvasLayer,
+  mode: Extract<
+    GenerateDialogState['mode'],
+    'audio-sound-effect' | 'audio-background-music'
+  >,
+) {
   return (
     sourceLayer.prompt?.trim() ||
     findGenerationInputFieldValue(sourceLayer, [
@@ -417,7 +438,7 @@ function resolveAudioRedrawPrompt(sourceLayer: CanvasLayer) {
       '背景音乐提示词',
     ])?.trim() ||
     sourceLayer.generationInputs?.fields[0]?.value?.trim() ||
-    ''
+    resolveDefaultAudioPrompt(mode)
   );
 }
 
@@ -465,7 +486,7 @@ export function createAudioRedrawGenerationDialogDraft(
   const baseDraft = {
     mode,
     sourceLayerId: sourceLayer.id,
-    prompt: resolveAudioRedrawPrompt(sourceLayer),
+    prompt: resolveAudioRedrawPrompt(sourceLayer, mode),
     status: 'idle' as const,
     composerOpen: true,
     placeholder: {
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
index 9697e9e5c..4620bebba 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
@@ -14,9 +14,11 @@ import {
 
 function ImageOptionsHarness({
   initialDialog,
+  includeDimensions = true,
   onRememberImageModel = vi.fn(),
 }: {
   initialDialog: GenerateDialogState;
+  includeDimensions?: boolean;
   onRememberImageModel?: (model: string) => void;
 }) {
   const [dialog, setDialog] = useState<GenerateDialogState | null>(
@@ -28,7 +30,7 @@ function ImageOptionsHarness({
       <ImageCanvasGenerationImageOptionsView
         dialog={dialog}
         setGenerateDialog={setDialog}
-        includeDimensions
+        includeDimensions={includeDimensions}
         onRememberImageModel={onRememberImageModel}
         cost={calculateEditorImageGenerationPrice({ model: dialog.imageModel })}
         submitLabel="生成"
@@ -191,6 +193,53 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     expect(submit.textContent).toBe('生成12泥点');
   });
 
+  it('keeps fixed-card placeholders unchanged when model-only controls are shown', () => {
+    render(
+      <ImageOptionsHarness
+        includeDimensions={false}
+        initialDialog={{
+          mode: 'publication',
+          prompt: '',
+          status: 'idle',
+          imageModel: IMAGE_MODEL_NANOBANANA2,
+          aspectRatio: '4:3',
+          imageSize: '1K',
+          placeholder: {
+            x: 120,
+            y: 160,
+            width: 720,
+            height: 540,
+            originalWidth: 720,
+            originalHeight: 540,
+          },
+        }}
+      />,
+    );
+
+    expect(
+      screen.queryByRole('button', { name: /生成图片尺寸/u }),
+    ).toBeNull();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '生成图片模型 nanobanana2' }),
+    );
+    fireEvent.click(
+      within(screen.getByRole('menu', { name: '生成图片模型选项' })).getByRole(
+        'button',
+        { name: 'gpt-image-2' },
+      ),
+    );
+
+    expect(screen.getByLabelText('当前模型').textContent).toBe(
+      IMAGE_MODEL_GPT_IMAGE_2,
+    );
+    expect(screen.getByLabelText('当前比例').textContent).toBe('4:3');
+    expect(screen.getByLabelText('当前尺寸').textContent).toBe('1K');
+    expect(screen.getByLabelText('当前占位').textContent).toBe(
+      '120:160:720:540:720:540',
+    );
+  });
+
   it('keeps the canvas placeholder centered while syncing its ratio and size selection', () => {
     render(
       <ImageOptionsHarness
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index 2b54b239c..d7360ed1e 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -152,10 +152,16 @@ export function ImageCanvasGenerationImageOptionsView({
       if (!currentDialog || currentDialog.mode !== dialog.mode) {
         return currentDialog;
       }
+      if (!includeDimensions) {
+        return {
+          ...resetFailedDialogStatus(currentDialog),
+          imageModel: model,
+        };
+      }
       const nextOptions = getImageDimensionOptions(model);
       const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
       const nextImageSizes = nextOptions.imageSizes as readonly string[];
-      return resizeGenerationPlaceholderToImageSelection({
+      const nextDialog = {
         ...resetFailedDialogStatus(currentDialog),
         imageModel: model,
         aspectRatio:
@@ -169,7 +175,8 @@ export function ImageCanvasGenerationImageOptionsView({
             ? currentDialog.imageSize
             : (nextOptions.imageSizes.find((size) => size === '1K') ??
               nextOptions.imageSizes[0]),
-      });
+      };
+      return resizeGenerationPlaceholderToImageSelection(nextDialog);
     });
   };
 
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index 3e963fde9..4af033f3d 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -98,6 +98,64 @@ describe('ImageCanvasGenerationLayerModel', () => {
     expect(layer.generationInputs?.fields[0]?.value).toBe('生成提示词');
   });
 
+  it('keeps publication material result dimensions constrained by the active placeholder', () => {
+    const layer = createGeneratedResultLayer({
+      generated: createGenerated({ width: 1024, height: 1024 }),
+      generatedIndex: 8,
+      canvasSize: { width: 900, height: 640 },
+      viewport: { x: 10, y: 20, scale: 2 },
+      frame: {
+        x: 180,
+        y: 120,
+        width: 360,
+        height: 640,
+        originalWidth: 720,
+        originalHeight: 1280,
+      },
+      assetKind: 'publication-material',
+      title: '8 宣发素材',
+      generationInputs: createGenerationInputs(),
+    });
+
+    expect(layer).toMatchObject({
+      id: 'layer-generated-8',
+      title: '8 宣发素材',
+      width: 720,
+      height: 1280,
+      originalWidth: 720,
+      originalHeight: 1280,
+      assetKind: 'publication-material',
+    });
+  });
+
+  it('keeps publication cover image results at the 4:3 workflow dimensions', () => {
+    const layer = createGeneratedResultLayer({
+      generated: createGenerated({ width: 1024, height: 1024 }),
+      generatedIndex: 9,
+      canvasSize: { width: 900, height: 640 },
+      viewport: { x: 10, y: 20, scale: 2 },
+      frame: {
+        x: 100,
+        y: 100,
+        width: 480,
+        height: 360,
+        originalWidth: 720,
+        originalHeight: 540,
+      },
+      assetKind: 'publication-material',
+      title: '9 宣发素材',
+      generationInputs: createGenerationInputs(),
+    });
+
+    expect(layer).toMatchObject({
+      width: 720,
+      height: 540,
+      originalWidth: 720,
+      originalHeight: 540,
+      assetKind: 'publication-material',
+    });
+  });
+
   it('uses backend-persisted resource and asset snapshots for generated layers', () => {
     const generationInputs = createGenerationInputs();
     const layer = createGeneratedResultLayer({
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 3f1c17cc1..0e1d3c8ed 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -133,8 +133,8 @@ export function createGeneratedResultLayer({
   title,
   generationInputs,
 }: GeneratedResultLayerOptions): CanvasLayer {
-  const originalWidth = generated.width || 1024;
-  const originalHeight = generated.height || 1024;
+  const originalWidth = frame?.originalWidth || generated.width || 1024;
+  const originalHeight = frame?.originalHeight || generated.height || 1024;
   const { width, height } = resolveLayerResolutionSize(
     originalWidth,
     originalHeight,
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index 9a41257a0..8c633a021 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -306,6 +306,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         size: '720x540',
         kind: 'publication-material',
         model: 'gemini-3.1-flash-image-preview',
+        aspectRatio: '4:3',
+        imageSize: '1K',
         referenceImageSrcs: ['data:image/png;base64,ref'],
       },
       result: {
@@ -359,6 +361,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         prompt: expect.stringContaining('【宣发素材类型】详情页单图'),
         size: '720x1280',
         kind: 'publication-material',
+        aspectRatio: '9:16',
+        imageSize: '1K',
       },
       result: {
         title: '11 宣发素材',
@@ -395,6 +399,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         prompt: expect.stringContaining('【宣发素材类型】运营海报'),
         size: '1280x720',
         kind: 'publication-material',
+        aspectRatio: '16:9',
+        imageSize: '1K',
       },
       result: {
         title: '12 宣发素材',
@@ -439,6 +445,8 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         kind: 'publication-material',
         model: 'gpt-image-2',
         size: '1280x720',
+        aspectRatio: '16:9',
+        imageSize: '1K',
       }),
     );
     expect(plan.rememberImageModel).toBe('gpt-image-2');
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index b9c507bf5..850ff64c0 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -323,6 +323,8 @@ export function buildImageGenerationSubmissionPlan({
         size: workflow.outputSize,
         kind: 'publication-material',
         model: imageModel,
+        aspectRatio: workflow.aspectRatio,
+        imageSize: workflow.imageSize,
         ...(dialog.publicationReferences?.length
           ? {
               referenceImageSrcs: dialog.publicationReferences.map(
diff --git a/src/components/image-editor/ImageCanvasMediaModel.ts b/src/components/image-editor/ImageCanvasMediaModel.ts
index 36b271fd2..3eab66708 100644
--- a/src/components/image-editor/ImageCanvasMediaModel.ts
+++ b/src/components/image-editor/ImageCanvasMediaModel.ts
@@ -27,3 +27,54 @@ export function formatCanvasDurationMetric(value: unknown) {
   // 中文注释：音频对象没有视觉分辨率语义，画布角标统一显示时长。
   return `时长 ${formatCanvasDurationLabel(value)}`;
 }
+
+type MediaPreviewTone = 'audio' | 'video';
+
+type MediaPreviewMarker = {
+  tone: MediaPreviewTone;
+  variant: number;
+};
+
+const MEDIA_PREVIEW_VARIANT_COUNT = 6;
+
+function hashMediaPreviewSeed(seed: string) {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
+  }
+  return hash;
+}
+
+export function getCanvasMediaPreviewMarker({
+  mediaType,
+  assetKind,
+  title,
+  src,
+}: {
+  mediaType?: string | null;
+  assetKind?: string | null;
+  title?: string | null;
+  src?: string | null;
+}): MediaPreviewMarker | null {
+  if (mediaType !== 'audio' && mediaType !== 'video') {
+    return null;
+  }
+  const seed = `${assetKind ?? ''}|${title ?? ''}|${src ?? ''}`;
+  return {
+    tone: mediaType,
+    variant: hashMediaPreviewSeed(seed) % MEDIA_PREVIEW_VARIANT_COUNT,
+  };
+}
+
+export function getCanvasMediaPreviewClassName(
+  marker: MediaPreviewMarker | null,
+) {
+  if (!marker) {
+    return '';
+  }
+  return [
+    'image-canvas-editor__media-preview',
+    `image-canvas-editor__media-preview--${marker.tone}`,
+    `image-canvas-editor__media-preview--variant-${marker.variant}`,
+  ].join(' ');
+}
diff --git a/src/components/image-editor/ImageCanvasPublicationMaterialsModel.ts b/src/components/image-editor/ImageCanvasPublicationMaterialsModel.ts
index c757f19c8..b5ba83f84 100644
--- a/src/components/image-editor/ImageCanvasPublicationMaterialsModel.ts
+++ b/src/components/image-editor/ImageCanvasPublicationMaterialsModel.ts
@@ -8,6 +8,8 @@ export type PublicationMaterialsWorkflow = {
   outputLabel: string;
   sizeLabel: string;
   outputSize: string;
+  aspectRatio: string;
+  imageSize: string;
   scenario: string;
   fields: string[];
   framework: string[];
@@ -24,6 +26,8 @@ export const PUBLICATION_MATERIALS_WORKFLOWS: PublicationMaterialsWorkflow[] = [
     outputLabel: '单张主视觉',
     sizeLabel: '720 x 540',
     outputSize: '720x540',
+    aspectRatio: '4:3',
+    imageSize: '1K',
     scenario: '推荐流、作品卡和首屏传播位',
     fields: ['游戏名称', '玩法分类标签', '一句话玩法', '主视觉关键词', '必要文字'],
     framework: [
@@ -56,6 +60,8 @@ export const PUBLICATION_MATERIALS_WORKFLOWS: PublicationMaterialsWorkflow[] = [
     outputLabel: '单张详情图',
     sizeLabel: '720 x 1280',
     outputSize: '720x1280',
+    aspectRatio: '9:16',
+    imageSize: '1K',
     scenario: '作品详情、应用介绍和运营分发图组',
     fields: ['游戏名称', '玩法分类标签', '卖点拆解', '图组顺序', '必要文字'],
     framework: [
@@ -90,6 +96,8 @@ export const PUBLICATION_MATERIALS_WORKFLOWS: PublicationMaterialsWorkflow[] = [
     outputLabel: '单张活动海报',
     sizeLabel: '1280 x 720',
     outputSize: '1280x720',
+    aspectRatio: '16:9',
+    imageSize: '1K',
     scenario: '社群、活动、渠道投放和运营节日位',
     fields: ['游戏名称', '活动主题', '玩法标签', '主文案', '行动指令'],
     framework: [
diff --git a/src/components/image-editor/ImageCanvasRasterEditModel.ts b/src/components/image-editor/ImageCanvasRasterEditModel.ts
index 5adc5c4f4..3b5f328c0 100644
--- a/src/components/image-editor/ImageCanvasRasterEditModel.ts
+++ b/src/components/image-editor/ImageCanvasRasterEditModel.ts
@@ -1,3 +1,5 @@
+import { removeBackgroundFromRgba } from '../../../packages/shared/src/assets/chromaKey';
+
 export type CropExpandInsets = {
   left: number;
   top: number;
@@ -204,31 +206,6 @@ export async function renderCropExpandImage({
   };
 }
 
-function colorDistance(
-  pixels: Uint8ClampedArray,
-  offset: number,
-  color: [number, number, number],
-) {
-  const red = (pixels[offset] ?? 0) - color[0];
-  const green = (pixels[offset + 1] ?? 0) - color[1];
-  const blue = (pixels[offset + 2] ?? 0) - color[2];
-  return Math.sqrt(red * red + green * green + blue * blue);
-}
-
-function readPixelColor(
-  pixels: Uint8ClampedArray,
-  width: number,
-  x: number,
-  y: number,
-): [number, number, number] {
-  const offset = (y * width + x) * 4;
-  return [
-    pixels[offset] ?? 0,
-    pixels[offset + 1] ?? 0,
-    pixels[offset + 2] ?? 0,
-  ];
-}
-
 export async function removeImageBackground(
   source: string,
 ): Promise<RasterEditResult> {
@@ -237,60 +214,7 @@ export async function removeImageBackground(
   const { canvas, context } = createRasterCanvas(width, height);
   context.drawImage(image, 0, 0, width, height);
   const imageData = context.getImageData(0, 0, width, height);
-  const pixels = imageData.data;
-  const cornerColors = [
-    readPixelColor(pixels, width, 0, 0),
-    readPixelColor(pixels, width, width - 1, 0),
-    readPixelColor(pixels, width, 0, height - 1),
-    readPixelColor(pixels, width, width - 1, height - 1),
-  ];
-  const visited = new Uint8Array(width * height);
-  const queue: number[] = [];
-  const threshold = 42;
-
-  const shouldClearPixel = (index: number) => {
-    const offset = index * 4;
-    const alpha = pixels[offset + 3] ?? 0;
-    if (alpha <= 8) {
-      return true;
-    }
-    return cornerColors.some(
-      (color) => colorDistance(pixels, offset, color) <= threshold,
-    );
-  };
-
-  const enqueue = (x: number, y: number) => {
-    if (x < 0 || y < 0 || x >= width || y >= height) {
-      return;
-    }
-    const index = y * width + x;
-    if (visited[index] || !shouldClearPixel(index)) {
-      return;
-    }
-    visited[index] = 1;
-    queue.push(index);
-  };
-
-  for (let x = 0; x < width; x += 1) {
-    enqueue(x, 0);
-    enqueue(x, height - 1);
-  }
-  for (let y = 0; y < height; y += 1) {
-    enqueue(0, y);
-    enqueue(width - 1, y);
-  }
-
-  while (queue.length) {
-    const index = queue.shift()!;
-    const offset = index * 4;
-    pixels[offset + 3] = 0;
-    const x = index % width;
-    const y = Math.floor(index / width);
-    enqueue(x + 1, y);
-    enqueue(x - 1, y);
-    enqueue(x, y + 1);
-    enqueue(x, y - 1);
-  }
+  removeBackgroundFromRgba(imageData.data, width, height);
 
   context.putImageData(imageData, 0, 0);
   return {
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 64dd57db2..299201111 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -296,6 +296,7 @@ describe('ImageCanvasUploadModel', () => {
     ).toMatchObject([
       {
         id: 'layer-upload-1',
+        src: 'data:image/png;base64,persisted',
         sourceAssetId: 'asset-1',
         objectKey: 'object-key',
         assetObjectId: 'asset-object',
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index e661e65ad..ca56be713 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -481,6 +481,7 @@ export function bindUploadLayerToPersistedAsset({
     layer.id === layerId
       ? {
           ...layer,
+          src: persistedAsset.imageSrc || layer.src,
           sourceAssetId: persistedAsset.assetId,
           mediaType: persistedAsset.mediaType ?? layer.mediaType,
           objectKey: persistedAsset.objectKey ?? layer.objectKey,
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index e9729a727..75a8bdbfb 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -1,7 +1,7 @@
 /* @vitest-environment jsdom */
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type {
   CanvasGenerationDialogState,
@@ -10,6 +10,12 @@ import type {
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasWorldView } from './ImageCanvasWorldView';
 
+const useResolvedAssetReadUrlMock = vi.hoisted(() => vi.fn());
+
+vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
+  useResolvedAssetReadUrl: useResolvedAssetReadUrlMock,
+}));
+
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
     id: 'layer-1',
@@ -82,6 +88,14 @@ function renderWorldView(
 }
 
 describe('ImageCanvasWorldView', () => {
+  beforeEach(() => {
+    useResolvedAssetReadUrlMock.mockImplementation((source: string) => ({
+      resolvedUrl: source,
+      isResolving: false,
+      shouldResolve: false,
+    }));
+  });
+
   it('renders visible layers and filters hidden layers', () => {
     const visibleLayer = createLayer({ title: '可见图层', zIndex: 2 });
     const hiddenLayer = createLayer({
@@ -115,6 +129,39 @@ describe('ImageCanvasWorldView', () => {
     expect(screen.queryByRole('status', { name: '' })).toBeNull();
   });
 
+  it('resolves image layers from objectKey before falling back to src', () => {
+    useResolvedAssetReadUrlMock.mockImplementation(
+      (_source: string, options?: { objectKey?: string | null }) => ({
+      resolvedUrl:
+        options?.objectKey === 'generated-character-drafts/editor/uploaded.png'
+          ? 'https://oss.example.com/uploaded.png?signature=1'
+          : _source,
+      isResolving: false,
+      shouldResolve: true,
+      }),
+    );
+
+    renderWorldView({
+      layers: [
+        createLayer({
+          objectKey: 'generated-character-drafts/editor/uploaded.png',
+          src: '/generated-character-drafts/editor/stale.png',
+        }),
+      ],
+    });
+
+    expect(useResolvedAssetReadUrlMock).toHaveBeenCalledWith(
+      '/generated-character-drafts/editor/stale.png',
+      expect.objectContaining({
+        objectKey: 'generated-character-drafts/editor/uploaded.png',
+        refreshKey: 'resource-1',
+      }),
+    );
+    expect(screen.getByAltText('画布图片：角色主图').getAttribute('src')).toBe(
+      'https://oss.example.com/uploaded.png?signature=1',
+    );
+  });
+
   it('forwards layer pointer, hover, context menu and metadata actions', () => {
     const layer = createLayer({ assetKind: 'character' });
     const { props } = renderWorldView({ layers: [layer] });
@@ -641,7 +688,13 @@ describe('ImageCanvasWorldView', () => {
 
     const layerButton = screen.getByRole('button', { name: '选择游戏音效' });
     const audio = within(layerButton).getByLabelText('画布音频：游戏音效');
+    const preview = layerButton.querySelector(
+      '.image-canvas-editor__media-preview--audio',
+    );
     expect(audio.tagName.toLowerCase()).toBe('audio');
+    expect(preview?.className).toContain(
+      'image-canvas-editor__media-preview--variant-',
+    );
     expect(audio.hasAttribute('controls')).toBe(false);
     expect(within(layerButton).queryByAltText('画布图片：游戏音效')).toBeNull();
     expect(within(layerButton).getByText('音效')).toBeTruthy();
@@ -786,6 +839,14 @@ describe('ImageCanvasWorldView', () => {
   });
 
   it('renders video layers with a playable video element instead of an image', () => {
+    useResolvedAssetReadUrlMock.mockImplementation((source: string) => ({
+      resolvedUrl:
+        source === '/generated-character-drafts/editor-videos/video-7.mp4'
+          ? 'https://oss.example.com/video-7.mp4?signature=1'
+          : source,
+      isResolving: false,
+      shouldResolve: true,
+    }));
     const layer = createLayer({
       title: '生成视频 7',
       src: '/generated-character-drafts/editor-videos/video-7.mp4',
@@ -806,17 +867,51 @@ describe('ImageCanvasWorldView', () => {
 
     expect(video.tagName.toLowerCase()).toBe('video');
     expect(video.getAttribute('src')).toBe(
-      '/generated-character-drafts/editor-videos/video-7.mp4',
+      'https://oss.example.com/video-7.mp4?signature=1',
     );
     expect(video.hasAttribute('controls')).toBe(true);
     expect(video.hasAttribute('playsinline')).toBe(true);
     expect(video.getAttribute('preload')).toBe('metadata');
+    expect(
+      layerButton.querySelector('.image-canvas-editor__media-preview--video')
+        ?.className,
+    ).toContain('image-canvas-editor__media-preview--variant-');
     expect(within(layerButton).queryByAltText('画布视频：生成视频 7')).toBeNull();
     expect(within(layerButton).getByText('视频')).toBeTruthy();
-    expect(props.onLayerPointerDown).not.toHaveBeenCalled();
+    expect(props.onLayerPointerDown).toHaveBeenCalledWith(
+      expect.any(Object),
+      layer,
+    );
     expect(props.onLayerClick).not.toHaveBeenCalled();
   });
 
+  it('keeps private video src empty while signed url resolution fails', () => {
+    useResolvedAssetReadUrlMock.mockImplementation(() => ({
+      resolvedUrl: '',
+      isResolving: false,
+      shouldResolve: true,
+    }));
+    const layer = createLayer({
+      title: '私有视频',
+      src: '/generated-character-drafts/editor-videos/private.mp4',
+      mediaType: 'video',
+      objectKey: 'generated-character-drafts/editor-videos/private.mp4',
+      assetKind: 'video',
+    });
+
+    renderWorldView({ layers: [layer] });
+
+    const layerButton = screen.getByRole('button', { name: '选择私有视频' });
+    const video = within(layerButton).getByLabelText('画布视频：私有视频');
+    expect(video.hasAttribute('src')).toBe(false);
+    expect(useResolvedAssetReadUrlMock).toHaveBeenCalledWith(
+      '/generated-character-drafts/editor-videos/private.mp4',
+      expect.objectContaining({
+        objectKey: 'generated-character-drafts/editor-videos/private.mp4',
+      }),
+    );
+  });
+
   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 fe5e2e1f7..ad4807549 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -15,7 +15,7 @@ import {
   Volume2,
   VolumeX,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type {
   CSSProperties,
   KeyboardEvent as ReactKeyboardEvent,
@@ -47,6 +47,10 @@ import {
   getGenerationFrameAriaLabel,
   getGenerationFrameLabel,
 } from './ImageCanvasGenerationModel';
+import {
+  getCanvasMediaPreviewClassName,
+  getCanvasMediaPreviewMarker,
+} from './ImageCanvasMediaModel';
 
 function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) {
   switch (dialog.mode) {
@@ -336,8 +340,12 @@ function ImageCanvasAudioLayerCard({
   isHovered: boolean;
 }) {
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const previewClassName = getCanvasMediaPreviewClassName(
+    getCanvasMediaPreviewMarker(layer),
+  );
   const [isPlaying, setIsPlaying] = useState(false);
   const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
+    objectKey: layer.objectKey,
     refreshKey: layer.taskId ?? layer.resourceId,
   });
   const prompt = layer.prompt?.trim();
@@ -412,7 +420,7 @@ function ImageCanvasAudioLayerCard({
 
   return (
     <div
-      className={`image-canvas-editor__audio-card ${
+      className={`image-canvas-editor__audio-card ${previewClassName} ${
         isHovered ? 'image-canvas-editor__audio-card--controls-visible' : ''
       }`}
     >
@@ -526,20 +534,69 @@ function ImageCanvasVideoLayer({
   mediaTransform?: string;
 }) {
   const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
+    objectKey: layer.objectKey,
+    refreshKey: layer.taskId ?? layer.resourceId,
+  });
+  const [showGeneratedPreview, setShowGeneratedPreview] = useState(
+    !layer.thumbnailSrc,
+  );
+  const previewClassName = getCanvasMediaPreviewClassName(
+    getCanvasMediaPreviewMarker(layer),
+  );
+
+  useEffect(() => {
+    setShowGeneratedPreview(!layer.thumbnailSrc);
+  }, [layer.src, layer.thumbnailSrc]);
+
+  return (
+    <>
+      <video
+        className="image-canvas-editor__layer-video"
+        src={resolvedUrl || undefined}
+        poster={layer.thumbnailSrc ?? undefined}
+        controls
+        playsInline
+        preload="metadata"
+        aria-label={`画布视频：${layer.title}`}
+        style={{ transform: mediaTransform }}
+        onLoadedData={() => setShowGeneratedPreview(false)}
+        onPlay={() => setShowGeneratedPreview(false)}
+        onClick={(event) => event.stopPropagation()}
+        onPointerDown={(event) => {
+          if (event.target !== event.currentTarget) {
+            event.stopPropagation();
+          }
+        }}
+      />
+      <span
+        className={`image-canvas-editor__layer-video-preview ${previewClassName} ${
+          showGeneratedPreview
+            ? 'image-canvas-editor__layer-video-preview--visible'
+            : ''
+        }`}
+        aria-hidden="true"
+      />
+    </>
+  );
+}
+
+function ImageCanvasImageLayer({
+  layer,
+  mediaTransform,
+}: {
+  layer: CanvasLayer;
+  mediaTransform?: string;
+}) {
+  const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
+    objectKey: layer.objectKey,
     refreshKey: layer.taskId ?? layer.resourceId,
   });
 
   return (
-    <video
-      className="image-canvas-editor__layer-video"
-      src={resolvedUrl ?? layer.src}
-      controls
-      playsInline
-      preload="metadata"
-      aria-label={`画布视频：${layer.title}`}
+    <img
+      src={resolvedUrl || undefined}
+      alt={`画布图片：${layer.title}`}
       style={{ transform: mediaTransform }}
-      onClick={(event) => event.stopPropagation()}
-      onPointerDown={(event) => event.stopPropagation()}
     />
   );
 }
@@ -572,6 +629,14 @@ export function ImageCanvasWorldView({
   const [openLayerKindMenuId, setOpenLayerKindMenuId] = useState<string | null>(
     null,
   );
+  const visibleLayers = useMemo(
+    () =>
+      layers
+        .filter((layer) => !layer.hidden)
+        .slice()
+        .sort((left, right) => left.zIndex - right.zIndex),
+    [layers],
+  );
 
   return (
     <div
@@ -597,11 +662,7 @@ export function ImageCanvasWorldView({
         />
       ) : null}
 
-      {layers
-        .slice()
-        .filter((layer) => !layer.hidden)
-        .sort((left, right) => left.zIndex - right.zIndex)
-        .map((layer) => {
+      {visibleLayers.map((layer) => {
           const isSelected = selectedLayerIds.includes(layer.id);
           const isHovered = hoveredLayerId === layer.id;
           const kindTagMeta = getLayerKindTagMeta(layer);
@@ -616,11 +677,14 @@ export function ImageCanvasWorldView({
             generateDialog.sourceLayerId === layer.id
               ? '修改中'
               : null;
-          const LayerElement = layer.mediaType === 'audio' ? 'div' : 'button';
+          const LayerElement =
+            layer.mediaType === 'audio' || layer.mediaType === 'video'
+              ? 'div'
+              : 'button';
           return (
             <div key={layer.id}>
               <LayerElement
-                {...(layer.mediaType === 'audio'
+                {...(layer.mediaType === 'audio' || layer.mediaType === 'video'
                   ? { 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' : ''}`}
@@ -642,7 +706,7 @@ export function ImageCanvasWorldView({
                   onLayerContextMenu(event, layer);
                 }}
                 onKeyDown={
-                  layer.mediaType === 'audio'
+                  layer.mediaType === 'audio' || layer.mediaType === 'video'
                     ? handleLayerKeyboardActivation
                     : undefined
                 }
@@ -661,10 +725,9 @@ export function ImageCanvasWorldView({
                     mediaTransform={mediaTransform}
                   />
                 ) : (
-                  <img
-                    src={layer.src}
-                    alt={`画布图片：${layer.title}`}
-                    style={{ transform: mediaTransform }}
+                  <ImageCanvasImageLayer
+                    layer={layer}
+                    mediaTransform={mediaTransform}
                   />
                 )}
                 {kindLabel ? (
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 682a30912..795a98e5a 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -80,6 +80,9 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       if (url === '/generated-ok.png') {
         return new Response(new Blob(['generated'], { type: 'image/png' }));
       }
+      if (url === '/generated-video.mp4') {
+        return new Response(new Blob(['video'], { type: 'video/mp4' }));
+      }
       return new Response(null, { status: 404 });
     });
     globalThis.fetch = fetchMock as typeof fetch;
@@ -126,10 +129,25 @@ describe('useImageCanvasAssetExportWorkflow', () => {
               prompt: '明亮主视觉',
               zIndex: 3,
             }),
+            createLayer('video', {
+              title: '生成视频',
+              src: '/generated-video.mp4',
+              mediaType: 'video',
+              sourceType: 'generated',
+              zIndex: 4,
+            }),
+            createLayer('audio', {
+              title: '胜利音效',
+              src: 'data:audio/wav;base64,YXVkaW8=',
+              mediaType: 'audio',
+              objectKey: 'generated-audio.wav',
+              sourceType: 'generated',
+              zIndex: 5,
+            }),
             createLayer('failed', {
               title: '失败图',
               src: '/missing.png',
-              zIndex: 4,
+              zIndex: 6,
             }),
           ]}
         />,
@@ -145,22 +163,29 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       const zip = await JSZip.loadAsync(exportedBlob!);
       expect(zip.file('导出项目-画布素材/images/001-素材 A.png')).toBeTruthy();
       expect(zip.file('导出项目-画布素材/images/002-生成图.png')).toBeTruthy();
-      expect(zip.file('导出项目-画布素材/images/003-失败图.png')).toBeNull();
+      expect(zip.file('导出项目-画布素材/media/003-生成视频.mp4')).toBeTruthy();
+      expect(zip.file('导出项目-画布素材/media/004-胜利音效.wav')).toBeTruthy();
+      expect(zip.file('导出项目-画布素材/images/005-失败图.png')).toBeNull();
 
       const metadata = JSON.parse(
         await readZipText(zip, '导出项目-画布素材/metadata.json'),
       );
       expect(metadata.projectId).toBe('project-export');
-      expect(metadata.layers).toHaveLength(4);
+      expect(metadata.layers).toHaveLength(6);
       expect(metadata.layers[0].file).toBe('images/001-素材 A.png');
       expect(metadata.layers[1].file).toBe('images/001-素材 A.png');
+      expect(metadata.layers[2].mediaType).toBe('image');
       expect(metadata.layers[0].canvas.hidden).toBe(true);
       expect(metadata.layers[0].canvas.locked).toBe(true);
       expect(metadata.layers[0].canvas.flipX).toBe(true);
       expect(metadata.layers[2].sourceType).toBe('generated');
       expect(metadata.layers[2].prompt).toBe('明亮主视觉');
-      expect(metadata.layers[3].file).toBeNull();
-      expect(metadata.layers[3].exportError).toContain('404');
+      expect(metadata.layers[3].file).toBe('media/003-生成视频.mp4');
+      expect(metadata.layers[3].mediaType).toBe('video');
+      expect(metadata.layers[4].file).toBe('media/004-胜利音效.wav');
+      expect(metadata.layers[4].mediaType).toBe('audio');
+      expect(metadata.layers[5].file).toBeNull();
+      expect(metadata.layers[5].exportError).toContain('404');
       expect(metadata.failedImages).toHaveLength(1);
       expect(
         await readZipText(zip, '导出项目-画布素材/manifest.txt'),
@@ -192,6 +217,21 @@ describe('useImageCanvasAssetExportWorkflow', () => {
 
     expect(downloadName).toBe('单图 导出.png');
 
+    render(
+      <ExportWorkflowHarness
+        layers={[
+          createLayer('single-video-export', {
+            title: '视频导出',
+            src: '/generated/video.webm?token=1',
+            mediaType: 'video',
+          }),
+        ]}
+      />,
+    );
+    fireEvent.click(screen.getAllByRole('button', { name: '导出单图' }).at(-1)!);
+
+    expect(downloadName).toBe('视频导出.webm');
+
     render(<ExportWorkflowHarness layers={[]} />);
     fireEvent.click(
       screen.getAllByRole('button', { name: '导出画布素材' }).at(-1)!,
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index 89af0ddda..515c0d4a4 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -10,9 +10,9 @@ import {
   blobToUint8Array,
   buildLayerExportMetadata,
   formatExportDate,
-  getImageExtensionFromTypeOrSrc,
+  getLayerAssetExtensionFromTypeOrSrc,
   getLayerExportKey,
-  readLayerImageBlob,
+  readLayerAssetBlob,
   sanitizeExportFilePart,
 } from './ImageCanvasExportModel';
 
@@ -42,7 +42,15 @@ export function useImageCanvasAssetExportWorkflow({
     }
     const link = document.createElement('a');
     link.href = layer.src;
-    link.download = `${sanitizeExportFilePart(layer.title, 'canvas-layer')}.png`;
+    const extension = getLayerAssetExtensionFromTypeOrSrc(
+      layer.mediaType ?? 'image',
+      '',
+      layer.objectKey ?? layer.src,
+    );
+    link.download = `${sanitizeExportFilePart(
+      layer.title,
+      'canvas-layer',
+    )}.${extension}`;
     document.body.appendChild(link);
     link.click();
     link.remove();
@@ -73,6 +81,7 @@ export function useImageCanvasAssetExportWorkflow({
       const zip = new JSZip();
       const rootFolder = zip.folder(rootFolderName) ?? zip;
       const imagesFolder = rootFolder.folder('images') ?? rootFolder;
+      const mediaFolder = rootFolder.folder('media') ?? rootFolder;
       const imageByKey = new Map<string, CanvasAssetExportImage>();
       const usedFileNames = new Map<string, number>();
 
@@ -92,28 +101,39 @@ export function useImageCanvasAssetExportWorkflow({
             : baseFileName;
 
         try {
-          const blob = await readLayerImageBlob(layer);
-          const extension = getImageExtensionFromTypeOrSrc(
+          const blob = await readLayerAssetBlob(layer);
+          const mediaType = layer.mediaType ?? 'image';
+          const extension = getLayerAssetExtensionFromTypeOrSrc(
+            mediaType,
             blob.type,
-            layer.src,
+            layer.objectKey ?? layer.src,
           );
-          const file = `images/${indexedFileName}.${extension}`;
+          const folderName = mediaType === 'image' ? 'images' : 'media';
+          const targetFolder = mediaType === 'image' ? imagesFolder : mediaFolder;
+          const file = `${folderName}/${indexedFileName}.${extension}`;
           imageByKey.set(key, {
             key,
             file,
             layer,
             blob,
           });
-          imagesFolder.file(
+          targetFolder.file(
             `${indexedFileName}.${extension}`,
             await blobToUint8Array(blob),
           );
         } catch (error) {
+          const mediaType = layer.mediaType ?? 'image';
+          const extension = getLayerAssetExtensionFromTypeOrSrc(
+            mediaType,
+            '',
+            layer.objectKey ?? layer.src,
+          );
+          const folderName = mediaType === 'image' ? 'images' : 'media';
           imageByKey.set(key, {
             key,
-            file: `images/${indexedFileName}.png`,
+            file: `${folderName}/${indexedFileName}.${extension}`,
             layer,
-            error: error instanceof Error ? error.message : '图片读取失败',
+            error: error instanceof Error ? error.message : '素材读取失败',
           });
         }
       }
@@ -148,7 +168,7 @@ export function useImageCanvasAssetExportWorkflow({
           key: image.key,
           title: image.layer.title,
           src: image.layer.src,
-          error: image.error ?? '图片读取失败',
+          error: image.error ?? '素材读取失败',
         })),
       };
       const manifest = [
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 67bc95173..308441501 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -549,6 +549,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
           size: '720x1280',
           kind: 'publication-material',
           model: 'gemini-3.1-flash-image-preview',
+          aspectRatio: '9:16',
+          imageSize: '1K',
           referenceImageSrcs: ['data:image/png;base64,large-ref'],
         }),
       );
@@ -617,6 +619,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       expect(generateEditorImageMock).toHaveBeenCalledWith(
         expect.objectContaining({
           kind: 'publication-material',
+          aspectRatio: '4:3',
+          imageSize: '1K',
           referenceImageSrcs: ['data:image/jpeg;base64,compressed-ref'],
         }),
       );
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
index ff9566569..8de81221f 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
@@ -127,7 +127,7 @@ function ProjectPersistenceHarness({
             (layer) =>
               `${layer.id}:${layer.resourceId}:${layer.assetKind ?? '-'}:${
                 layer.generationInputs?.fields[0]?.value ?? '-'
-              }`,
+              }:${layer.objectKey ?? '-'}:${layer.assetObjectId ?? '-'}`,
           )
           .join(',')}
       </span>
@@ -261,11 +261,11 @@ describe('useImageCanvasProjectPersistence', () => {
     });
 
     expect(screen.getByTestId('layers').textContent).toBe(
-      'layer-a:local-layer-a:-:-',
+      'layer-a:local-layer-a:-:-:-:-',
     );
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toBe(
-        'layer-a:resource-added-asset-a:-:-',
+        'layer-a:resource-added-asset-a:-:-:-:-',
       );
     });
     await waitFor(() => {
@@ -293,7 +293,7 @@ describe('useImageCanvasProjectPersistence', () => {
     });
 
     expect(screen.getByTestId('layers').textContent).toBe(
-      'layer-server-resource:resource-from-generation-bff:-:-',
+      'layer-server-resource:resource-from-generation-bff:-:-:-:-',
     );
     expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
     await waitFor(() => {
@@ -337,6 +337,8 @@ describe('useImageCanvasProjectPersistence', () => {
           resourceId: 'resource-character',
           projectId: 'editor-project-default',
           imageSrc: '/generated/character.png',
+          objectKey: 'generated/character.png',
+          assetObjectId: 'asset-object-character',
           width: 320,
           height: 240,
           sourceType: 'generated',
@@ -367,7 +369,7 @@ describe('useImageCanvasProjectPersistence', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toBe(
-        'layer-character:resource-character:character:银发游侠',
+        'layer-character:resource-character:character:银发游侠:generated/character.png:asset-object-character',
       );
     });
     act(() => {
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.ts b/src/components/image-editor/useImageCanvasProjectPersistence.ts
index 0e0f6c6ef..c2cd7fa3c 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.ts
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.ts
@@ -219,7 +219,10 @@ export function useImageCanvasProjectPersistence({
             resource.resourceId,
             {
               imageSrc: resource.imageSrc,
+              objectKey: resource.objectKey,
+              assetObjectId: resource.assetObjectId,
               durationSeconds: resource.durationSeconds,
+              sourceResourceId: resource.sourceResourceId,
               assetKind: resource.assetKind,
               generationInputs: resource.generationInputs,
             },
diff --git a/src/hooks/useResolvedAssetReadUrl.test.tsx b/src/hooks/useResolvedAssetReadUrl.test.tsx
index 27147c8d1..ab5efe032 100644
--- a/src/hooks/useResolvedAssetReadUrl.test.tsx
+++ b/src/hooks/useResolvedAssetReadUrl.test.tsx
@@ -4,6 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { ResolvedAssetImage } from '../components/ResolvedAssetImage';
+import { useResolvedAssetReadUrl } from './useResolvedAssetReadUrl';
 import {
   clearStoredAccessToken,
   setStoredAccessToken,
@@ -71,6 +72,55 @@ describe('useResolvedAssetReadUrl', () => {
     );
   });
 
+  test('显式 objectKey 会通过 objectKey 换签而不是当作普通路径', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          ok: true,
+          data: {
+            read: {
+              objectKey: 'oss/editor/private-image.png',
+              signedUrl: 'https://signed.example.com/private-image.png',
+              expiresAt: '2099-01-01T00:10:00Z',
+            },
+          },
+          error: null,
+          meta: {
+            apiVersion: '2026-06-16',
+            routeVersion: '2026-06-16',
+            latencyMs: 1,
+            timestamp: '2099-01-01T00:00:00Z',
+          },
+        }),
+        {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      ),
+    );
+
+    function ObjectKeyProbe() {
+      const { resolvedUrl } = useResolvedAssetReadUrl('/legacy/public.png', {
+        objectKey: 'oss/editor/private-image.png',
+        refreshKey: 'asset-1',
+      });
+      return <output aria-label="资源地址">{resolvedUrl}</output>;
+    }
+
+    render(<ObjectKeyProbe />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('资源地址').textContent).toBe(
+        'https://signed.example.com/private-image.png',
+      );
+    });
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
+      'objectKey=oss%2Feditor%2Fprivate-image.png',
+    );
+  });
+
   test('无前导斜杠的 generated 私有资源也不会裸写入 img', async () => {
     vi.spyOn(globalThis, 'fetch').mockResolvedValue(
       new Response(
diff --git a/src/hooks/useResolvedAssetReadUrl.ts b/src/hooks/useResolvedAssetReadUrl.ts
index 01e0d8939..a28114a13 100644
--- a/src/hooks/useResolvedAssetReadUrl.ts
+++ b/src/hooks/useResolvedAssetReadUrl.ts
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import {
+  getSignedAssetReadUrl,
   resolveAssetReadUrl,
   shouldResolveAssetReadUrl,
 } from '../services/assetReadUrlService';
@@ -8,6 +9,7 @@ import {
 type UseResolvedAssetReadUrlOptions = {
   enabled?: boolean;
   expireSeconds?: number;
+  objectKey?: string | null;
   refreshKey?: string | number | null;
 };
 
@@ -17,15 +19,18 @@ export function useResolvedAssetReadUrl(
 ) {
   const enabled = options.enabled !== false;
   const normalizedSource = source?.trim() ?? '';
+  const normalizedObjectKey = options.objectKey?.trim() ?? '';
   const shouldResolve =
-    enabled && shouldResolveAssetReadUrl(normalizedSource);
+    enabled &&
+    (Boolean(normalizedObjectKey) ||
+      shouldResolveAssetReadUrl(normalizedSource));
   const [resolvedUrl, setResolvedUrl] = useState(
     shouldResolve ? '' : normalizedSource,
   );
   const [isResolving, setIsResolving] = useState(shouldResolve);
 
   useEffect(() => {
-    if (!normalizedSource) {
+    if (!normalizedSource && !normalizedObjectKey) {
       setResolvedUrl('');
       setIsResolving(false);
       return;
@@ -42,10 +47,23 @@ export function useResolvedAssetReadUrl(
     setResolvedUrl('');
     setIsResolving(true);
 
-    void resolveAssetReadUrl(normalizedSource, {
-      expireSeconds: options.expireSeconds,
-      refreshKey: options.refreshKey,
-    })
+    const resolvePromise = normalizedObjectKey
+      ? getSignedAssetReadUrl(
+          {
+            objectKey: normalizedObjectKey,
+            expireSeconds: options.expireSeconds,
+          },
+          undefined,
+          {
+            cacheVersion: options.refreshKey,
+          },
+        )
+      : resolveAssetReadUrl(normalizedSource, {
+          expireSeconds: options.expireSeconds,
+          refreshKey: options.refreshKey,
+        });
+
+    void resolvePromise
       .then((nextUrl) => {
         if (!cancelled) {
           setResolvedUrl(nextUrl);
@@ -68,6 +86,7 @@ export function useResolvedAssetReadUrl(
     };
   }, [
     normalizedSource,
+    normalizedObjectKey,
     options.expireSeconds,
     options.refreshKey,
     shouldResolve,
diff --git a/src/index.css b/src/index.css
index 0656de044..4384cd480 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4232,7 +4232,63 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   width: 100%;
   height: 100%;
   color: #f8fafc;
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(20, 83, 45, 0.52));
+}
+
+.image-canvas-editor__media-preview {
+  position: relative;
+  isolation: isolate;
+  background:
+    radial-gradient(circle at 25% 24%, rgba(255, 255, 255, 0.22), transparent 0.72rem),
+    linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(20, 83, 45, 0.58));
+}
+
+.image-canvas-editor__media-preview::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: '';
+  opacity: 0.72;
+}
+
+.image-canvas-editor__media-preview--audio::before {
+  background:
+    repeating-linear-gradient(
+      90deg,
+      rgba(103, 232, 249, 0.34) 0 0.18rem,
+      transparent 0.18rem 0.52rem
+    ),
+    linear-gradient(135deg, rgba(14, 116, 144, 0.42), rgba(49, 46, 129, 0.48));
+}
+
+.image-canvas-editor__media-preview--video::before {
+  background:
+    linear-gradient(90deg, rgba(15, 23, 42, 0.42) 0 14%, transparent 14% 86%, rgba(15, 23, 42, 0.42) 86%),
+    repeating-linear-gradient(
+      0deg,
+      rgba(248, 250, 252, 0.34) 0 0.2rem,
+      transparent 0.2rem 0.58rem
+    ),
+    linear-gradient(135deg, rgba(124, 58, 237, 0.38), rgba(20, 184, 166, 0.38));
+}
+
+.image-canvas-editor__media-preview--variant-1 {
+  filter: hue-rotate(22deg);
+}
+
+.image-canvas-editor__media-preview--variant-2 {
+  filter: hue-rotate(54deg);
+}
+
+.image-canvas-editor__media-preview--variant-3 {
+  filter: hue-rotate(92deg);
+}
+
+.image-canvas-editor__media-preview--variant-4 {
+  filter: hue-rotate(138deg);
+}
+
+.image-canvas-editor__media-preview--variant-5 {
+  filter: hue-rotate(184deg);
 }
 
 .image-canvas-editor__layer img,
@@ -4601,6 +4657,27 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   pointer-events: none;
 }
 
+.image-canvas-editor__layer-video-preview {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  border-radius: 0.1rem;
+  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+.image-canvas-editor__layer-video-preview--visible {
+  opacity: 1;
+}
+
+.image-canvas-editor__layer-video {
+  position: relative;
+  z-index: 1;
+}
+
 .image-canvas-editor__audio-card {
   position: relative;
   display: flex;
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 218eb37ef..4c299b852 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -832,6 +832,8 @@ describe('editorProjectClient', () => {
       prompt: '宣发素材 prompt',
       size: '720x1280',
       kind: 'publication-material',
+      aspectRatio: '9:16',
+      imageSize: '1K',
       referenceImageSrcs: ['data:image/png;base64,ref'],
     });
 
@@ -845,6 +847,8 @@ describe('editorProjectClient', () => {
           prompt: '宣发素材 prompt',
           size: '720x1280',
           kind: 'publication-material',
+          aspectRatio: '9:16',
+          imageSize: '1K',
           referenceImageSrcs: ['data:image/png;base64,ref'],
         }),
       }),