diff --git a/docs/openapi/genarrative-external-v1.openapi.json b/docs/openapi/genarrative-external-v1.openapi.json
index 60bf3100e..bf7087e02 100644
--- a/docs/openapi/genarrative-external-v1.openapi.json
+++ b/docs/openapi/genarrative-external-v1.openapi.json
@@ -2555,6 +2555,74 @@
               "string",
               "null"
             ]
+          },
+          "canvasCompletion": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/EditorCanvasGenerationCompletion"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "description": "带项目上下文生成时，服务端据此直接写入画布完成态并返回最新项目快照。"
+          }
+        },
+        "additionalProperties": false
+      },
+      "EditorCanvasGenerationCompletion": {
+        "type": "object",
+        "required": [
+          "dialogId",
+          "title",
+          "placeholder"
+        ],
+        "properties": {
+          "dialogId": {
+            "type": "string",
+            "minLength": 1
+          },
+          "title": {
+            "type": "string"
+          },
+          "placeholder": {
+            "$ref": "#/components/schemas/EditorCanvasGenerationPlaceholder"
+          }
+        },
+        "additionalProperties": false
+      },
+      "EditorCanvasGenerationPlaceholder": {
+        "type": "object",
+        "required": [
+          "x",
+          "y",
+          "width",
+          "height",
+          "originalWidth",
+          "originalHeight"
+        ],
+        "properties": {
+          "x": {
+            "type": "number"
+          },
+          "y": {
+            "type": "number"
+          },
+          "width": {
+            "type": "number",
+            "minimum": 1
+          },
+          "height": {
+            "type": "number",
+            "minimum": 1
+          },
+          "originalWidth": {
+            "type": "number",
+            "minimum": 1
+          },
+          "originalHeight": {
+            "type": "number",
+            "minimum": 1
           }
         },
         "additionalProperties": false
@@ -2687,6 +2755,17 @@
                 "type": "null"
               }
             ]
+          },
+          "project": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/EditorProject"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "description": "当请求携带 canvasCompletion 且服务端成功写入画布布局时返回最新项目快照。"
           }
         }
       },
diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 165c7343f..416adf545 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-06-21 图片画布生成完成态由后端写入画布布局
+
+- 背景：图片画布角色形象等长耗时生成在服务端完成后，如果浏览器已刷新或原 HTTP 回调丢失，前端无法再把生成结果图层和 `generation-dialog` 完成态写回 `editor_canvas.layers_json`，用户会继续看到“生成中”卡片。
+- 决策：图片生成请求在有项目上下文时携带 `canvasCompletion`（生成器 `dialogId`、结果标题和占位框）；`api-server` 在生成成功并创建 `editor_project_resource` / `editor_asset` 后，直接读取当前项目布局，只有当前布局仍存在对应生成器时才插入轻量结果图层，把生成器标记为 `idle` 并写入 `generatedLayerId`，沿用后端当前 viewport 保存 layout 后返回最新项目快照。前端只应用后端快照刷新显示，不再把生成完成态作为正式业务真相，也不在项目加载时根据资源行推断完成态。
+- 影响范围：`server-rs/crates/api-server/src/editor_project.rs`、图片画布生成提交工作流、项目快照 hydrate / persistence、图片画布技术方案和排障记录。
+- 验证方式：`cargo test -p api-server editor_canvas_generation_completion --manifest-path server-rs/Cargo.toml`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/services/image-editor/editorProjectClient.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx -- --runInBand`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
 ## 2026-06-21 图片画布参考图元数据只保存项目内行引用
 
 - 背景：参考图如果把 Data URL、signed URL 或 `objectKey` 写入 `generationInputs` 或生成器布局快照，会撑大资源 / 素材 / 画布 JSON，也无法稳定索引到项目内用户可见行数据。
@@ -59,9 +67,9 @@
 ## 2026-06-18 `/creation` 独立为陶泥儿创作工具主页
 
 - 背景：图片画布项目已经成为独立项目资产，旧“创作”站内 Tab 和一级“草稿”入口不能清晰表达桌面端创作工具主页与项目管理入口。
-- 决策：桌面端新增独立 `/creation` 创作工具主页；顶级“创作”入口跳转 `/creation`，原“草稿”入口替换为“项目”并跳转 `/project`。移动端隐藏“创作”和“项目”入口，但不拦截直接 URL。页面文案统一使用“陶泥儿”，外部品牌只作为设计参考，不进入用户可见 UI、测试名、产品文案或验收口径。`陶泥儿精选` 是用户素材瀑布流，不展示玩法入口列表；创作入口事实源继续来自 `/api/creation-entry/config`，项目入口通过 `createEditorProject` 和 `/editor/canvas?projectid=xxx` 链路进入画布。
+- 决策：桌面端新增独立 `/creation` 创作工具主页，桌面端直接打开站点首页 `/` 时也默认展示新版创作主页；顶级“创作”入口跳转 `/creation`，原“草稿”入口替换为“项目”并跳转 `/project`。移动端首页 `/` 继续保持原推荐首页，移动端隐藏“创作”和“项目”入口，但不拦截直接 URL。页面文案统一使用“陶泥儿”，外部品牌只作为设计参考，不进入用户可见 UI、测试名、产品文案或验收口径。`陶泥儿精选` 是用户素材瀑布流，不展示玩法入口列表；创作入口事实源继续来自 `/api/creation-entry/config`，项目入口通过 `createEditorProject` 和 `/editor/canvas?projectid=xxx` 链路进入画布。
 - 影响范围：平台入口导航、`SelectionStage` 路由、`/creation` 首页、`/project` 项目入口、`/editor/canvas` 项目打开链路、“我的”页快捷入口和创作入口相关测试。
-- 验证方式：`/creation` 解析为创作主页，`/creation/<play>` 仍进入对应玩法工作台；桌面导航显示“创作 / 项目”且不显示“草稿”；移动端底部不显示“创作 / 项目”；页面不出现外站品牌或 `Discord` 字样；新建项目进入 `/editor/canvas?projectid=xxx`。
+- 验证方式：桌面 `/` 初始阶段和 `/creation` 解析为创作主页，移动端 `/` 仍是推荐首页，`/creation/<play>` 仍进入对应玩法工作台；桌面导航显示“创作 / 项目”且不显示“草稿”；移动端底部不显示“创作 / 项目”；页面不出现外站品牌或 `Discord` 字样；新建项目进入 `/editor/canvas?projectid=xxx`。
 - 关联文档：`docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
 
 ## 2026-06-18 图片画布 Seedance 2.0 参考媒体提交边界
@@ -72,6 +80,14 @@
 - 验证方式：运行 `npx vitest run src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/services/image-editor/editorReferenceUploadClient.test.ts --reporter verbose`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p shared-contracts editor_video_request_supports_seedance_multimodal_references --manifest-path server-rs/Cargo.toml`，并执行 `npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、火山 Seedance 2.0 任务创建文档。
 
+## 2026-06-21 图片画布生成视频参数扩展
+
+- 背景：编辑器画布生成视频需要开放更多 Lovart 式参数，同时保留模型能力边界；`seedance2.0-fast` 不支持 `1080p`，联网搜索暂没有可确认的 Ark 视频生成 body 字段。
+- 决策：生成视频参数面板支持比例 `16:9 / 9:16 / 1:1 / 4:3 / 3:4 / 21:9`，时长为 4 到 15 秒整数 slider，清晰度支持 `480p / 720p / 1080p`；`seedance2.0-fast` 不展示可用 `1080p`，从其它模型的 `1080p` 切回 Fast 时自动降到 `720p`，后端也拒绝 `seedance2.0-fast + 1080p`。静音只作为一个 toggle 展示，默认有声并映射 `sound=on` / Ark `generate_audio=true`；关闭静音时传 `sound=off` / `generate_audio=false`。`webSearchEnabled` 默认随请求提交为 `true`，但前端不展示联网搜索开关，后端当前只接收契约字段，不向 Ark 透传未知参数。
+- 影响范围：图片画布生成视频面板、生成提交模型、画布项目快照恢复、`editorProjectClient`、`shared-contracts`、`api-server` 编辑器视频 BFF、编辑器技术文档。
+- 验证方式：运行 `npm run test -- src/components/image-editor/ImageCanvasGenerationModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx src/services/image-editor/editorProjectClient.test.ts src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts`、`cargo test -p shared-contracts editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`，并执行 `npm run typecheck`、`npm run check:encoding`。
+- 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 2026-06-18 图片画布生成音乐入口作为音频图层接入
 
 - 背景：图片画布底部生成工具需要补齐游戏音效和游戏背景音乐生成，既要复用现有 Lovart 式画布生成器快照、占位避让和持久化，又不能把音频能力并入图片素材库或视觉小说专用音频开关。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index da76e56df..627dedb8c 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -87,6 +87,22 @@
 - 验证：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "only exposes character animation"`；`cargo test -p api-server editor_character_animation_accepts_character_image_body_above_default_limit --manifest-path server-rs/Cargo.toml`。
 - 关联：`src/components/image-editor/ImageCanvasEditorView.tsx`、`server-rs/crates/api-server/src/modules/play_flow.rs`、`server-rs/crates/api-server/src/app.rs`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`。
 
+## 图片编辑器角色动画抽帧不要采到视频尾点
+
+- 现象：画板角色图点击 `生成动画` 后，Ark 视频已生成并上传 OSS，但后端返回 `ffmpeg 已执行但未产出动作帧文件(requestId:...)`。
+- 原因：FFmpeg 在 `-ss` 采样时间落到视频尾点附近时可能退出码仍为 `0`，但实际输出 `0` 帧；如果后端按 `duration - 0.001` 抽最后一帧，低帧率或短视频很容易踩到不可解码尾点。
+- 处理：角色动画抽帧按目标帧数预留一个采样步长，例如 `32帧·4秒` 最后一帧采 `3.875s`，不要采 `3.999s`；`ffmpeg` 返回成功但无输出文件时，错误 details 保留 `targetSeconds`、`stdout`、`stderr` 和输出路径，用户主文案保持简短。
+- 验证：`cargo test -p api-server editor_character_animation --manifest-path server-rs/Cargo.toml`，其中 `editor_character_animation_extracts_final_sample_from_short_video` 应覆盖本机 FFmpeg 8 的 0 帧回归。
+- 关联：`server-rs/crates/api-server/src/character_animation_assets.rs`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`。
+
+## 图片编辑器生成长请求完成态必须由后端写入画布
+
+- 现象：画板角色形象等生成请求已经在服务端返回 `200`，OSS 中也已有 `generated-character-drafts/.../image.png`，但用户刷新或页面重载后仍看到旧生成卡片停在“生成中”。
+- 原因：生成是一次长 HTTP 请求，浏览器在请求完成前刷新或重新挂载时会丢失原页面的成功回调；如果完成态只靠前端回调把结果图层写回 `editor_canvas.layers_json`，服务端虽然已经创建 `editor_project_resource` / `editor_asset`，但布局里的 `generation-dialog` 仍可能停在 `status="generating"` 且没有 `generatedLayerId`。如果之后从素材库把同一私有素材加回画布，前端再次创建项目资源时若提交 signed URL / Data URL，还会触发 `413`，进一步阻断资源行绑定。
+- 处理：图片生成提交必须在有项目上下文时携带 `canvasCompletion`（生成器 `dialogId`、标题和占位框）；`api-server` 生成成功并创建资源后，直接读取当前项目布局，只有当前布局仍存在对应生成器时才插入轻量结果图层、把生成器改回 `idle` 并写入 `generatedLayerId`，再沿用后端当前 viewport 保存 layout 并返回最新项目快照。前端只应用该快照刷新显示，不在加载时根据资源行推断完成态；有项目上下文但后端没有返回快照时也不得本地补结果图层。为已有 `objectKey` 的图层创建项目资源时，`imageSrc` 只提交 `/<objectKey>`，不要提交 signed URL / Data URL。
+- 验证：`cargo test -p api-server editor_canvas_generation_completion --manifest-path server-rs/Cargo.toml` 覆盖后端完成态写 layout；`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/services/image-editor/editorProjectClient.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx -- --runInBand` 覆盖前端提交 `canvasCompletion`、应用后端快照、项目加载不推断完成态和 `objectKey` 资源创建不提交大 URL。
+- 关联：`server-rs/crates/api-server/src/editor_project.rs`、`src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
 ## 图片编辑器 Seedance 2.0 参考媒体不要提交视频 Data URL
 
 - 现象：画板生成视频选择 Seedance 2.0 并上传参考视频后，请求体暴涨、可能返回 `413` 或上游拒绝 `video_url.url`；文档示例或测试如果写 `data:video/mp4;base64,...`，后续实现很容易照抄。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index eb4431763..9019770a5 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -18,8 +18,8 @@
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色规范 / 常规参考图 / 图标规范 / 编辑参考图等参考图卡片。参考图输入快照只保存 `refType/refId` 行引用，其中 `refType="project-resource"` 指向 `editor_project_resource.resourceId`，`refType="asset"` 指向 `editor_asset.assetId`；不得把图片 Data URL、普通 URL 或 `objectKey` 写入 `generationInputs.references`。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行重绘时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图；重绘面板不因提交成功自动关闭，便于连续改提示词。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和重绘保留既有 `gpt-image-2` 路径；快速编辑默认从原图模型和分辨率初始化，但提交使用面板当前选择的 `model/aspectRatio/imageSize`；其中生成规范类图片固定 `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 张；原图自动作为最后一张隐式参考图提交，但不在参考图条里固定展示 `图x`。尺寸和模型默认从原图配置 / 分辨率推断，底部参数胶囊可点击修改，左下角统一显示 `x:y·xK`，右下角模型胶囊紧贴生成按钮。提交前将提示词里对原图的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写为最后一张原图编号，例如额外 1 张参考图时写成 `图2`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和重绘保留既有 `gpt-image-2` 路径；图片快速编辑默认从原图模型和分辨率初始化，但提交使用面板当前选择的 `model/aspectRatio/imageSize`；其中生成规范类图片固定 `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；视频参数按当前正式面板支持的比例、时长、清晰度和声音开关提交，且 Seedance Fast 与 Seedance 标准版必须按各自真实模型 ID 独立映射，不得混用。生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。图片快速编辑和重绘在调用图片 BFF 前必须把当前图层图片源读取为图片 Data URL；视频素材快速编辑走视频生成 BFF，不允许走图片模型；角色动作快速编辑固定使用 `seedance2.0-fast` 动作 / 视频模型。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 快速编辑面板对齐其它生成类面板：首行支持额外参考图，最多 8 张；原图 / 原素材自动作为最后一张隐式参考提交，但不在参考图条里固定展示 `图x`。尺寸和模型默认从原素材配置 / 分辨率推断，底部参数胶囊可点击修改；图片快速编辑左下角统一显示 `x:y·xK`，右下角模型胶囊紧贴生成按钮。提交前将提示词里对原素材的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写为最后一张源素材编号，例如额外 1 张参考图时写成 `图2`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频`、`生成UI设计图` 和 `生成角色动作`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
 
@@ -40,11 +40,11 @@
 - 新增 `editor_canvas` 表保存工程下的画布：`canvasId`、`projectId`、`ownerUserId`、标题、viewport、图层布局 JSON、创建时间和更新时间。当前编辑器使用项目默认画布，后续可扩展为一个 project 下多个 canvas。
 - 新增 `editor_asset_folder` 表保存账号级素材文件夹：`folderId`、`ownerUserId`、名称、排序、折叠状态、系统默认标记、创建时间和更新时间。素材文件夹不归属于 project，同一个账号进入任一项目都能看到。
 - 新增 `editor_asset` 表保存账号级素材：`assetId`、`ownerUserId`、`folderId`、名称、图片读取地址、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、`assetKind`、`generationInputs`、创建时间和更新时间。素材只跟账号走，不跟 project 走；角色、图标、UI 设计图、视频和音频等生成结果的用户可见输入快照随素材保存。
-- `editor_project_resource` 表保存工程画布引用过的资源快照：`resourceId`、`projectId`、`ownerUserId`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、sourceResourceId、`assetKind`、`generationInputs`、创建时间和更新时间。上传素材被拖入画布时会复制为 project resource，图层只引用 resourceId；图片、图标和 UI 素材生成 BFF 在请求携带 `projectId` 时由后端直接创建新 resource，并把 `resourceId` 随生成响应返回给前端。
+- `editor_project_resource` 表保存工程画布引用过的资源快照：`resourceId`、`projectId`、`ownerUserId`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、sourceResourceId、`assetKind`、`generationInputs`、创建时间和更新时间。上传素材被拖入画布时会复制为 project resource，图层只引用 resourceId；图片、图标和 UI 素材生成 BFF 在请求携带 `projectId` 时由后端直接创建新 resource，并把 `resourceId` 随生成响应返回给前端。图片生成请求如果同时携带 `canvasCompletion`（生成器 `dialogId`、标题和占位框），BFF 在生成成功后必须直接读取当前项目布局，只有当前布局仍存在对应 `generation-dialog` 时才插入轻量结果图层、把生成器标记为 `idle` 并写入 `generatedLayerId`，沿用后端当前 viewport 保存布局，再返回最新项目快照；前端只应用该快照刷新显示，不把生成完成态作为本地业务真相，也不在项目加载时根据资源行推断完成态。有项目上下文但后端没有返回项目快照时，前端不得本地补结果图层，只保留当前生成器交互状态等待下一次项目刷新。
 - 图片文件本体继续走 OSS，浏览器读取私有 generated 对象仍经 `/api/assets/read-url` 换签。
 - 当前 MVP 的本地上传先以 data URL 持久化在素材记录中，保证刷新和跨项目可见；后续接入正式 OSS 上传时，只替换 `imageSrc/objectKey/assetObjectId` 的写入方式，账号级素材表和画布资源表不变。上传到生成面板参考图槽位的图片必须先创建 `editor_project_resource` 行；没有当前工程 ID 时才创建账号级 `editor_asset` 行，随后把对应 `resourceId` 或 `assetId` 写入参考图临时状态，生成请求仍使用临时状态中的图片源或 `objectKey`。
 - 资源表保存资源和素材级元数据；图层位置、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。布局 JSON 是混合数组：普通图层按 `layerId/resourceId` 保存，生成器占位和生成器对话框按 `itemType: "generation-dialog"` 保存，不新增单独表。普通图层的新保存不再把 `assetKind/generationInputs` 写入布局 JSON；刷新时优先从 `editor_project_resource` 恢复，旧布局中的同名字段只作为兼容兜底。生成器快照必须包含生成器 ID、模式、提示词、参数、参考图、状态、占位框位置和可选 `generatedLayerId`；宣发素材生成器还必须保存并恢复 `publicationWorkflowId`、`publicationGameInfo` 和 `publicationReferences`，避免刷新后生成卡片字段或参考图丢失。生成器快照中的参考图同样只保存 `resourceId/sourceAssetId` 行引用和展示所需 label，不保存图片 Data URL、signed URL 或 `objectKey`；刷新时用 `editor_project_resource` / `editor_asset` 行恢复临时生成请求所需图片源。生成成功后仍保存该快照，只是渲染时由 `generatedLayerId` 锚定到成品图层而不重复显示灰色占位框。`generationInputs.references` 是用户可见输入快照中的行级索引，只允许保存 `{ title, label, refType, refId }`；生成接口所需的图片 Data URL、signed URL 或 `objectKey` 只存在于提交前的临时参考图状态和请求体字段，不进入资源 / 素材元数据。图层展示尺寸不再作为独立 `Size` 真相保存，刷新与新建图层均按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，不单独建表。
-- 图片类生成结果除作为 `editor_project_resource` 和画布图层保存外，还要写入账号级 `editor_asset` 素材库；该写入由生成 BFF 在请求携带 `assetFolderId` 时完成，前端只把响应中的 resource / asset 快照用于落画布和更新素材栏，不再把同一生成结果二次调用素材创建接口。视频结果当前只保存为画布视频资源，不进入图片素材库。
+- 图片类生成结果除作为 `editor_project_resource` 和画布图层保存外，还要写入账号级 `editor_asset` 素材库；该写入由生成 BFF 在请求携带 `assetFolderId` 时完成。带 `canvasCompletion` 的图片生成以 BFF 返回的 `project` 快照刷新画布；无项目上下文或没有返回快照时，前端才使用响应中的 resource / asset 快照做本地落画布兜底，不再把同一生成结果二次调用素材创建接口。视频结果当前只保存为画布视频资源，不进入图片素材库。
 - 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
 - 未登录用户可以使用本地演示态，但不触发工程自动保存；真实图片生成 / 修改需要登录。编辑器 API 请求允许使用 refresh cookie 静默补 access token，但 401 / 403 只在编辑器局部提示登录，不清空整站登录态，也不把后端 requestId 直接作为生图弹窗主文案。
 
@@ -69,7 +69,7 @@
 - `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`、`priceMudPoints`、`projectId`、`assetFolderId` 和 `generationInputs`；`priceMudPoints` 必须来自编辑器生成计费配置的 `icon` 档位（首版 12 泥点），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`。后端把 spritesheet 和拆分后的 icon 都保存为 project resource / 账号素材，并随响应返回对应快照。
 - `POST /api/editor/ui-designs/assets/extractions`：以 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet` 生成素材 spritesheet，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据；请求携带 project / asset 上下文时由后端创建新 resource / asset，前端只消费响应快照。
-- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
+- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音、默认联网搜索标记和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端允许 6 类比例、4 到 15 秒整数、`480p / 720p / 1080p`，并拒绝 `seedance2.0-fast + 1080p`；`sound=on/off` 映射 Ark `generate_audio=true/false`。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
 所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
 
diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
index 805937126..547bd3249 100644
--- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
+++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
@@ -11,6 +11,7 @@
 ## 目标
 
 - 新增桌面端独立 `/creation` 创作工具主页。
+- 桌面端直接打开站点首页 `/` 时默认展示新版创作主页内容；移动端继续保持原推荐首页。
 - 顶级导航中“创作”进入 `/creation`，“草稿”改为“项目”并进入 `/project`。
 - 移动端隐藏“创作”和“项目”入口，只保留浏览和个人相关入口。
 - 登录后在创作主页展示最近项目，并通过新建项目进入 `/editor/canvas?projectid=xxx`。
@@ -82,7 +83,14 @@ Tab：
 - UI：每个列表项展示游戏 UI 图和该 UI 图拆出的子素材组合。
 - 音乐：展示背景音乐和音效。
 - 美宣：展示美宣类图片和视频素材。
-- 特效、场景、游戏：v1 只在有真实数据时展示，无数据时不造假卡片。
+- 特效、场景、游戏：v1 暂不实装生成链路，只在有真实数据时展示，无数据时不造假卡片，也不在 UI 中写“暂不实装”说明。
+
+交互口径：
+
+- 点击任一精选列表项后打开接近全屏的素材预览弹窗。
+- 弹窗中部展示当前素材，图片使用 contain 完整展示，视频和音频展示可播放控件。
+- 弹窗底部固定显示当前组合的缩略图导航，点击缩略图切换当前素材。
+- 弹窗底部同时展示该列表项的提示词、作者名和生成总成本。
 
 每个列表项需要标注：
 
@@ -112,6 +120,7 @@ Tab：
 
 - 新增 `SelectionStage = 'creation-home'`。
 - `/creation` 映射到 `creation-home`。
+- 桌面端初始打开 `/` 时也进入 `creation-home`；移动端初始打开 `/` 仍进入 `platform` 推荐首页。
 - `/creation/<play>` 现有玩法工作台路由保持原有 stage 映射。
 - 桌面端点击“创作”时调用 `pushAppHistoryPath('/creation')`。
 - 桌面端原“草稿”入口改为“项目”，点击 `pushAppHistoryPath('/project')`。
@@ -124,6 +133,7 @@ Tab：
 ### 路由与导航
 
 - 增加 `/creation` 路由映射和测试。
+- 增加桌面 `/` 初始阶段映射测试，确认不会影响移动端首页。
 - 调整桌面导航文案与点击行为。
 - 移动端导航移除“创作”和“项目”入口。
 - 保持现有 `/creation/<play>` 工作台、生成页、结果页和运行态路由不回归。
@@ -172,6 +182,7 @@ git diff --check
 
 浏览器回归：
 
+- 桌面打开站点首页 `/`，首屏显示新版创作主页。
 - 桌面打开首页，点击“创作”进入 `/creation`。
 - `/creation` 显示 `陶泥儿 - 开启全民精品游戏创作` 和 `陶泥儿精选`。
 - 页面不出现外站品牌或 `Discord` 字样。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index 209ff6bdd..e71338372 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -94,7 +94,7 @@
 - 待生成占位的空白样式按生成类型区分：视频使用视频图标和视频角标，角色形象使用角色图标和角色角标，角色动作使用角色动作图标和动作角标，音效使用音效图标和音效角标，背景音乐使用音乐图标和背景音乐角标。
 - 待生成占位的图标语义必须与底部入口或触发入口保持一致：生成图片用图片图标，生成规范用规范图标，生成角色形象用角色图标，生成图标素材用图标网格，生成 UI 设计图用应用窗口，宣发素材用宣发图标，快速编辑用闪光图标，不能默认全部回退为图片图标。
 - 图片类待生成占位尺寸必须与面板当前比例和尺寸同步：普通图片、角色形象、图标素材、UI 设计图按当前 `aspectRatio + imageSize` 计算像素尺寸；生成规范固定为 `16:9·2K`，占位为 `2048 x 1152`；宣发素材按 workflow 输出尺寸创建占位。
-- 视频待生成占位必须与面板当前比例和清晰度同步：默认 `16:9 · 480p` 为 `854 x 480`，切换到 `720p` 后同步为 `1280 x 720`；调整参数时保持占位中心点不变。
+- 视频待生成占位必须与面板当前比例和清晰度同步：默认 `16:9 · 480p` 为 `854 x 480`，切换比例、`720p` 或 `1080p` 后按比例和清晰度重算偶数宽度；调整参数时保持占位中心点不变。
 - 面板中用户修改比例、尺寸或清晰度后，已有空白待生成占位立即同步更新 `width / height / originalWidth / originalHeight`，且保持中心点不跳动。
 - 快速编辑点击生成后不在原图上播放生成中遮罩，而是立即创建独立 `Quick Edit Generator` 画布生成占位并播放生成中动画；生成成功后结果落在该占位框位置，失败时占位标记失败并恢复快速编辑面板。
 
@@ -119,7 +119,7 @@
 ```text
 生成图片 / 生成角色形象 / 生成图标素材 / 生成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
+生成视频：seedance2.0-fast 为 480p 每秒 10 / 720p 每秒 20，不支持 1080p；seedance2.0 为 480p 每秒 12 / 720p 每秒 24 / 1080p 每秒 48；kling3.0 为 480p 每秒 15 / 720p 每秒 30 / 1080p 每秒 60；kling3.0-omni 为 480p 每秒 20 / 720p 每秒 40 / 1080p 每秒 80
 角色动画：480p 每秒 10 泥点，720p 每秒 20 泥点
 生成音效：10 泥点
 生成背景音乐：5 泥点
@@ -139,7 +139,7 @@
 ## 生成视频模型与接口
 
 - 底部 `生成视频` 面板提交到 `POST /api/editor/videos/generations`。
-- 固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布，并在画布中使用原生 `<video>` 播放控件渲染，不再走图片元素。
+- 比例可选 `16:9`、`9:16`、`1:1`、`4:3`、`3:4`、`21:9`；时长为 4 到 15 秒整数 slider；清晰度支持 `480p`、`720p`、`1080p`，但 `seedance2.0-fast` 不支持 `1080p`。静音为单个 toggle，默认有声；`webSearchEnabled` 默认提交为 `true` 但不在前端显示，后端当前不透传未知 Ark 字段。结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布，并在画布中使用原生 `<video>` 播放控件渲染，不再走图片元素。
 - 支持模型：
   - `seedance2.0-fast`
   - `seedance2.0`
@@ -159,7 +159,7 @@
 - 参考音频支持 URL / Base64 / `asset://` / 画板资源路径；格式为 wav、mp3，单个文件不超过 15MB，单个时长 [2, 15] 秒，最多 3 段且总时长不超过 15 秒。
 - 前端上传参考视频 / 参考音频必须走 `/api/assets/direct-upload-tickets` 直传 OSS，再 `/api/assets/objects/confirm` 入库；前端状态保存 signed URL 供预览，同时保存 `objectKey` / `assetObjectId`，提交生成时优先使用 `objectKey`。
 - 后端接收画板资源 `objectKey` 后统一重新签名为 Ark 可读 URL，再按文档构造 `content`：`image_url` + `role=reference_image`、`video_url` + `role=reference_video`、`audio_url` + `role=reference_audio`。
-- 画板生成视频当前固定无声，因此 Ark 请求必须显式带 `generate_audio:false`，不能只依赖前端 `sound=off` 或上游默认值。
+- 画板生成视频按静音 toggle 映射 Ark `generate_audio`：`sound=on` 时传 `true`，`sound=off` 时传 `false`，不能只依赖上游默认值。
 - Seedance 2.0 文档提示不支持直接上传含真人人脸的参考图 / 视频；当前画板尚未做真人脸授权证明、来源声明或服务端人脸拦截，后续开放真人素材前必须补授权/来源确认链路。
 
 ## 验收
@@ -188,4 +188,4 @@
 - 生成游戏背景音乐面板右下角固定模型胶囊显示 `Suno` 并紧贴生成按钮；`make_instrumental` 不在 UI 中展示。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
 - 生成器输入、参数、参考图和占位框在刷新后仍存在；已生成对象的生成器面板继续跟随成品图层。
-- Seedance 2.0 参考视频 / 音频上传不产生 `data:video/*` / 大体积音频 JSON；提交请求优先携带 `objectKey`，后端 Ark body 含 `generate_audio:false` 且不含未确认的 `mode` 字段。
+- Seedance 2.0 参考视频 / 音频上传不产生 `data:video/*` / 大体积音频 JSON；提交请求优先携带 `objectKey`，后端 Ark body 按 `sound` 映射 `generate_audio`，且不含未确认的 `mode` 字段。
diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index 4154a4cce..728862705 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -160,6 +160,7 @@
 ### 抽帧与 OSS 存储
 
 - 视频生成完成后，后端按面板选择抽取对应帧数：`32`、`40` 或 `48`。
+- 抽帧采样必须按目标帧数预留视频尾部安全步长，例如 `32帧·4秒` 最后一帧采 `3.875s`，避免 FFmpeg 在尾点附近返回成功但输出 `0` 帧。
 - 每帧必须执行绿幕去背，输出透明背景 PNG。
 - 抽帧结果写入 OSS，并返回帧路径、帧尺寸、帧数、fps、预览视频路径、模型、价格和实际 prompt。
 - 画板前端回填角色动作结果时，必须以 `previewVideoPath` 创建 `mediaType: "video"`、`assetKind: "character-animation"` 图层，复用视频素材的 `<video controls preload="metadata" playsInline>` 预览和视频下载 / 导出口径；不得把 `frames[0].imageSrc` 作为图层主 `src`。
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 a2335986d..b258a2bb1 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -2504,8 +2504,11 @@ fn normalize_editor_video_request(
     if payload.mode.trim() != "std" {
         return Err(editor_video_bad_request("mode 只支持 std。"));
     }
-    if payload.sound.trim() != "off" {
-        return Err(editor_video_bad_request("sound 只支持 off。"));
+    let generate_audio = normalize_editor_video_sound(payload.sound.as_str())?;
+    if model == EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST && resolution == "1080p" {
+        return Err(editor_video_bad_request(
+            "seedance2.0-fast 不支持 1080p 清晰度。",
+        ));
     }
     let expected_price = crate::editor_generation_config::editor_video_model_generation_mud_points(
         Some(model),
@@ -2532,6 +2535,7 @@ fn normalize_editor_video_request(
         aspect_ratio: aspect_ratio.to_string(),
         resolution: resolution.to_string(),
         duration_seconds,
+        generate_audio,
         price_mud_points: expected_price,
         width,
         height,
@@ -2552,8 +2556,7 @@ fn build_editor_video_ark_request_body(
         "resolution": request.resolution,
         "ratio": request.aspect_ratio,
         "duration": request.duration_seconds,
-        // 中文注释：Seedance 2.0 文档里声音生成默认为开启；画板当前视频入口固定无声，必须显式关闭。
-        "generate_audio": false,
+        "generate_audio": request.generate_audio,
         "watermark": false,
     }))
 }
@@ -2821,7 +2824,14 @@ fn resolve_editor_video_provider_model(model: &str) -> &str {
 fn normalize_editor_video_aspect_ratio(value: &str) -> Result<&'static str, AppError> {
     match value.trim() {
         "16:9" => Ok("16:9"),
-        _ => Err(editor_video_bad_request("aspectRatio 只支持 16:9。")),
+        "9:16" => Ok("9:16"),
+        "1:1" => Ok("1:1"),
+        "4:3" => Ok("4:3"),
+        "3:4" => Ok("3:4"),
+        "21:9" => Ok("21:9"),
+        _ => Err(editor_video_bad_request(
+            "aspectRatio 只支持 16:9、9:16、1:1、4:3、3:4 或 21:9。",
+        )),
     }
 }
 
@@ -2829,22 +2839,48 @@ fn normalize_editor_video_resolution(value: &str) -> Result<&'static str, AppErr
     match value.trim() {
         "480p" => Ok("480p"),
         "720p" => Ok("720p"),
-        _ => Err(editor_video_bad_request("resolution 只支持 480p 或 720p。")),
+        "1080p" => Ok("1080p"),
+        _ => Err(editor_video_bad_request(
+            "resolution 只支持 480p、720p 或 1080p。",
+        )),
     }
 }
 
 fn normalize_editor_video_duration(value: u32) -> Result<u32, AppError> {
-    match value {
-        4 | 5 => Ok(value),
-        _ => Err(editor_video_bad_request("durationSeconds 只支持 4 或 5。")),
+    if (4..=15).contains(&value) {
+        Ok(value)
+    } else {
+        Err(editor_video_bad_request(
+            "durationSeconds 只支持 4 到 15 秒的整数。",
+        ))
+    }
+}
+
+fn normalize_editor_video_sound(value: &str) -> Result<bool, AppError> {
+    match value.trim() {
+        "on" => Ok(true),
+        "off" => Ok(false),
+        _ => Err(editor_video_bad_request("sound 只支持 on 或 off。")),
     }
 }
 
 fn resolve_editor_video_size(aspect_ratio: &str, resolution: &str) -> (u32, u32) {
-    match (aspect_ratio, resolution) {
-        ("16:9", "720p") => (1280, 720),
-        _ => (854, 480),
-    }
+    let height = match resolution {
+        "1080p" => 1080,
+        "720p" => 720,
+        _ => 480,
+    };
+    let (ratio_width, ratio_height) = match aspect_ratio {
+        "9:16" => (9, 16),
+        "1:1" => (1, 1),
+        "4:3" => (4, 3),
+        "3:4" => (3, 4),
+        "21:9" => (21, 9),
+        _ => (16, 9),
+    };
+    let width = ((height * ratio_width) + ratio_height / 2) / ratio_height;
+    let even_width = if width % 2 == 0 { width } else { width + 1 };
+    (even_width, height)
 }
 
 fn require_editor_video_settings(
@@ -3199,9 +3235,7 @@ fn probe_video_duration_seconds_or_known(
 ) -> 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()) =>
-        {
+        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)
             {
@@ -3231,13 +3265,20 @@ fn compute_sample_time_seconds(
     let sample_start = duration_seconds * sample_start_ratio as f64;
     let sample_end = duration_seconds * sample_end_ratio as f64;
     let sample_window = (sample_end - sample_start).max(0.001);
-    let progress = if loop_mode {
-        frame_index as f64 / frame_count.max(1) as f64
+    let frame_count_f64 = frame_count.max(1) as f64;
+    let progress = if loop_mode || frame_count <= 1 || sample_end_ratio >= 1.0 {
+        frame_index as f64 / frame_count_f64
     } else {
         frame_index as f64 / frame_count.saturating_sub(1).max(1) as f64
     };
+    let frame_margin_seconds = (sample_window / frame_count_f64)
+        .max(0.05)
+        .min(sample_window);
+    let safe_sample_end = (sample_end - frame_margin_seconds)
+        .max(sample_start)
+        .min((duration_seconds - 0.001).max(0.0));
 
-    (sample_start + sample_window * progress).min((duration_seconds - 0.001).max(0.0))
+    (sample_start + sample_window * progress).min(safe_sample_end)
 }
 
 fn extract_video_frame_to_png(
@@ -3246,7 +3287,7 @@ fn extract_video_frame_to_png(
     target_seconds: f64,
     extraction_settings: &BackendFrameExtractionSettings,
 ) -> Result<(), AppError> {
-    run_process_with_timeout(
+    let output = run_process_with_timeout(
         &extraction_settings.ffmpeg_path,
         &[
             "-y",
@@ -3265,10 +3306,16 @@ fn extract_video_frame_to_png(
     )?;
 
     if !output_path.is_file() {
+        let stderr = String::from_utf8_lossy(&output.stderr).trim().to_string();
+        let stdout = String::from_utf8_lossy(&output.stdout).trim().to_string();
         return Err(
             AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
                 "provider": "character-animation",
                 "message": "ffmpeg 已执行但未产出动作帧文件。",
+                "targetSeconds": target_seconds,
+                "outputPath": output_path.to_string_lossy(),
+                "stderr": stderr,
+                "stdout": stdout,
             })),
         );
     }
@@ -4591,6 +4638,7 @@ struct NormalizedEditorVideoRequest {
     aspect_ratio: String,
     resolution: String,
     duration_seconds: u32,
+    generate_audio: bool,
     price_mud_points: u32,
     width: u32,
     height: u32,
@@ -4891,15 +4939,73 @@ mod tests {
     #[test]
     fn editor_character_animation_price_depends_on_resolution_and_duration() {
         assert_eq!(
-            crate::editor_generation_config::editor_character_animation_mud_points("480p", 4),
+            crate::editor_generation_config::editor_character_animation_model_mud_points(
+                Some(EDITOR_CHARACTER_ANIMATION_MODEL),
+                "480p",
+                4,
+            ),
             40
         );
         assert_eq!(
-            crate::editor_generation_config::editor_character_animation_mud_points("720p", 6),
+            crate::editor_generation_config::editor_character_animation_model_mud_points(
+                Some(EDITOR_CHARACTER_ANIMATION_MODEL),
+                "720p",
+                6,
+            ),
             120
         );
     }
 
+    #[test]
+    fn editor_character_animation_samples_last_frame_before_decode_tail() {
+        let last_frame_seconds = compute_sample_time_seconds(4.0, 31, 32, 0.0, 1.0, false);
+
+        assert!((last_frame_seconds - 3.875).abs() < f64::EPSILON);
+    }
+
+    #[test]
+    fn editor_character_animation_extracts_final_sample_from_short_video() {
+        if Command::new("ffmpeg").arg("-version").output().is_err() {
+            return;
+        }
+
+        let temp_dir = create_animation_temp_dir().expect("temp dir should be created");
+        let input_path = temp_dir.join("short-preview.mp4");
+        let output_path = temp_dir.join("raw-frame-32.png");
+        let make_video_status = Command::new("ffmpeg")
+            .args([
+                "-y",
+                "-f",
+                "lavfi",
+                "-i",
+                "testsrc=size=160x120:rate=8:duration=4",
+                "-pix_fmt",
+                "yuv420p",
+                input_path.to_string_lossy().as_ref(),
+            ])
+            .stdin(Stdio::null())
+            .stdout(Stdio::null())
+            .stderr(Stdio::null())
+            .status()
+            .expect("ffmpeg should start");
+        if !make_video_status.success() {
+            let _ = fs::remove_dir_all(&temp_dir);
+            return;
+        }
+        let target_seconds = compute_sample_time_seconds(4.0, 31, 32, 0.0, 1.0, false);
+        let settings = BackendFrameExtractionSettings {
+            ffmpeg_path: "ffmpeg".to_string(),
+            ffprobe_path: "ffprobe".to_string(),
+            timeout_ms: 10_000,
+        };
+
+        let result =
+            extract_video_frame_to_png(&input_path, &output_path, target_seconds, &settings);
+
+        let _ = fs::remove_dir_all(&temp_dir);
+        result.expect("safe final sample should produce a frame");
+    }
+
     #[test]
     fn editor_character_animation_uses_known_duration_when_ffprobe_is_missing() {
         let settings = BackendFrameExtractionSettings {
@@ -4908,12 +5014,9 @@ mod tests {
             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");
+        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);
     }
@@ -4926,12 +5029,9 @@ mod tests {
             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");
+        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("无法启动进程"));
     }
@@ -4946,6 +5046,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 100,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
@@ -4971,6 +5072,7 @@ mod tests {
             resolution: "720p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 80,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
@@ -4993,6 +5095,7 @@ mod tests {
             resolution: "720p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 96,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
@@ -5005,6 +5108,51 @@ mod tests {
         assert_ne!(normalized.provider_model, CHARACTER_ANIMATION_MODEL);
     }
 
+    #[test]
+    fn editor_video_supports_extra_ratios_duration_range_and_non_fast_1080p() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "生成竖版电影感镜头。".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2.to_string(),
+            aspect_ratio: "9:16".to_string(),
+            duration_seconds: 15,
+            resolution: "1080p".to_string(),
+            mode: "std".to_string(),
+            sound: "on".to_string(),
+            web_search_enabled: true,
+            price_mud_points: 720,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
+        })
+        .expect("seedance standard 1080p request should normalize");
+
+        assert_eq!(normalized.aspect_ratio, "9:16");
+        assert_eq!(normalized.width, 608);
+        assert_eq!(normalized.height, 1080);
+        assert!(normalized.generate_audio);
+    }
+
+    #[test]
+    fn editor_video_rejects_seedance_fast_1080p() {
+        let error = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "快速生成 1080p 镜头。".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "1080p".to_string(),
+            mode: "std".to_string(),
+            sound: "on".to_string(),
+            web_search_enabled: true,
+            price_mud_points: 160,
+            reference_image_srcs: Vec::new(),
+            reference_video_srcs: Vec::new(),
+            reference_audio_srcs: Vec::new(),
+        })
+        .expect_err("seedance fast should reject 1080p");
+
+        assert!(error.body_text().contains("seedance2.0-fast 不支持 1080p"));
+    }
+
     #[test]
     fn editor_video_normalizes_seedance_multimodal_references() {
         let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
@@ -5015,6 +5163,7 @@ mod tests {
             resolution: "720p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 100,
             reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
             reference_video_srcs: vec![
@@ -5048,6 +5197,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 40,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: vec!["data:video/mp4;base64,video".to_string()],
@@ -5069,6 +5219,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 40,
             reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
             reference_video_srcs: vec!["https://assets.example.com/reference.mp4".to_string()],
@@ -5108,6 +5259,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 40,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: vec![
@@ -5145,6 +5297,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 48,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
@@ -5200,6 +5353,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 40,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
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 2cb3735be..af65fe504 100644
--- a/server-rs/crates/api-server/src/editor_generation_config.rs
+++ b/server-rs/crates/api-server/src/editor_generation_config.rs
@@ -12,6 +12,7 @@ const EDITOR_SPEC_MODEL_GPT_IMAGE_2_MUD_POINTS: u32 = 5;
 
 pub(crate) const EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
 pub(crate) const EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND: u32 = 20;
+pub(crate) const EDITOR_VIDEO_GENERATION_1080P_MUD_POINTS_PER_SECOND: u32 = 40;
 
 pub(crate) const EDITOR_CHARACTER_ANIMATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
 pub(crate) const EDITOR_CHARACTER_ANIMATION_720P_MUD_POINTS_PER_SECOND: u32 = 20;
@@ -72,19 +73,20 @@ fn editor_video_model_resolution_mud_points_per_second(
         ) => model.unwrap_or_default().trim(),
         _ => EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST,
     };
-    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),
+    let (rate_480p, rate_720p, rate_1080p) = match normalized_model {
+        EDITOR_VIDEO_MODEL_SEEDANCE_2 => (12, 24, 48),
+        EDITOR_VIDEO_MODEL_KLING_3 => (15, 30, 60),
+        EDITOR_VIDEO_MODEL_KLING_3_OMNI => (20, 40, 80),
         _ => (
             EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND,
             EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND,
+            EDITOR_VIDEO_GENERATION_1080P_MUD_POINTS_PER_SECOND,
         ),
     };
-    if resolution == "720p" {
-        rate_720p
-    } else {
-        rate_480p
+    match resolution {
+        "1080p" => rate_1080p,
+        "720p" => rate_720p,
+        _ => rate_480p,
     }
 }
 
@@ -97,11 +99,6 @@ pub(crate) fn editor_video_model_generation_mud_points(
     per_second * duration_seconds
 }
 
-pub(crate) fn editor_video_generation_mud_points(resolution: &str, duration_seconds: u32) -> u32 {
-    let per_second = editor_video_model_resolution_mud_points_per_second(None, resolution);
-    per_second * duration_seconds
-}
-
 pub(crate) fn editor_character_animation_model_mud_points(
     model: Option<&str>,
     resolution: &str,
@@ -121,13 +118,6 @@ pub(crate) fn editor_character_animation_model_mud_points(
     per_second * duration_seconds
 }
 
-pub(crate) fn editor_character_animation_mud_points(
-    resolution: &str,
-    duration_seconds: u32,
-) -> u32 {
-    editor_character_animation_model_mud_points(None, resolution, duration_seconds)
-}
-
 pub(crate) fn editor_sound_effect_model_generation_mud_points(model: Option<&str>) -> u32 {
     match model.map(str::trim).filter(|value| !value.is_empty()) {
         Some(EDITOR_SOUND_EFFECT_MODEL_VIDU) => EDITOR_SOUND_EFFECT_MODEL_VIDU_MUD_POINTS,
@@ -148,14 +138,26 @@ mod tests {
 
     #[test]
     fn editor_character_animation_price_uses_configured_resolution_rates() {
-        assert_eq!(editor_character_animation_mud_points("480p", 4), 40);
-        assert_eq!(editor_character_animation_mud_points("720p", 6), 120);
+        assert_eq!(
+            editor_character_animation_model_mud_points(Some("seedance2.0-fast"), "480p", 4),
+            40
+        );
+        assert_eq!(
+            editor_character_animation_model_mud_points(Some("seedance2.0-fast"), "720p", 6),
+            120
+        );
     }
 
     #[test]
     fn editor_video_generation_price_uses_configured_resolution_rates() {
-        assert_eq!(editor_video_generation_mud_points("480p", 4), 40);
-        assert_eq!(editor_video_generation_mud_points("720p", 5), 100);
+        assert_eq!(
+            editor_video_model_generation_mud_points(Some("seedance2.0-fast"), "480p", 4),
+            40
+        );
+        assert_eq!(
+            editor_video_model_generation_mud_points(Some("seedance2.0-fast"), "720p", 5),
+            100
+        );
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 3867d791f..d205c1f0b 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -177,6 +177,26 @@ pub struct EditorImageGenerationRequest {
     pub(crate) asset_folder_id: Option<String>,
     pub(crate) asset_label: Option<String>,
     pub(crate) source_resource_id: Option<String>,
+    pub(crate) canvas_completion: Option<EditorCanvasGenerationCompletionRequest>,
+}
+
+#[derive(Clone, Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCanvasGenerationCompletionRequest {
+    pub(crate) dialog_id: String,
+    pub(crate) title: String,
+    pub(crate) placeholder: EditorCanvasGenerationPlaceholderPayload,
+}
+
+#[derive(Clone, Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCanvasGenerationPlaceholderPayload {
+    pub(crate) x: f64,
+    pub(crate) y: f64,
+    pub(crate) width: f64,
+    pub(crate) height: f64,
+    pub(crate) original_width: f64,
+    pub(crate) original_height: f64,
 }
 
 #[derive(Debug, Deserialize)]
@@ -293,6 +313,11 @@ struct EditorGeneratedAssetRecord {
     asset: Option<EditorAssetPayload>,
 }
 
+struct EditorCanvasGenerationCompletionResult {
+    layers: Value,
+    changed: bool,
+}
+
 #[derive(Debug)]
 struct PersistEditorGeneratedAssetInput {
     project_id: Option<String>,
@@ -330,6 +355,7 @@ pub struct EditorImageGenerationResponse {
     task_id: String,
     resource: Option<EditorProjectResourcePayload>,
     asset: Option<EditorAssetPayload>,
+    project: Option<EditorProjectPayload>,
 }
 
 #[derive(Debug, Serialize)]
@@ -1062,8 +1088,8 @@ pub(crate) async fn generate_editor_image_for_owner(
     let generated_asset = persist_editor_generated_asset(
         state,
         PersistEditorGeneratedAssetInput {
-            project_id: payload.project_id,
-            owner_user_id: caller.owner_user_id,
+            project_id: payload.project_id.clone(),
+            owner_user_id: caller.owner_user_id.clone(),
             folder_id: payload.asset_folder_id,
             label: normalize_optional_string(payload.asset_label)
                 .unwrap_or_else(|| role_setting.clone()),
@@ -1085,6 +1111,14 @@ pub(crate) async fn generate_editor_image_for_owner(
         },
     )
     .await?;
+    let completed_project = complete_editor_canvas_generation(
+        state,
+        caller.owner_user_id.as_str(),
+        payload.project_id.as_deref(),
+        payload.canvas_completion.as_ref(),
+        generated_asset.resource.as_ref(),
+    )
+    .await?;
 
     Ok(json_success_body(
         Some(&request_context),
@@ -1104,6 +1138,7 @@ pub(crate) async fn generate_editor_image_for_owner(
             task_id: generated.task_id,
             resource: generated_asset.resource,
             asset: generated_asset.asset,
+            project: completed_project,
         },
     ))
 }
@@ -1356,6 +1391,7 @@ pub(crate) async fn edit_editor_image_for_owner(
             task_id: generated.task_id,
             resource: generated_asset.resource,
             asset: generated_asset.asset,
+            project: None,
         },
     ))
 }
@@ -1885,6 +1921,210 @@ async fn persist_editor_generated_asset(
     Ok(EditorGeneratedAssetRecord { resource, asset })
 }
 
+async fn complete_editor_canvas_generation(
+    state: &AppState,
+    owner_user_id: &str,
+    project_id: Option<&str>,
+    completion: Option<&EditorCanvasGenerationCompletionRequest>,
+    resource: Option<&EditorProjectResourcePayload>,
+) -> Result<Option<EditorProjectPayload>, AppError> {
+    let (Some(project_id), Some(completion), Some(resource)) = (project_id, completion, resource)
+    else {
+        return Ok(None);
+    };
+    let project_id = project_id.trim();
+    if project_id.is_empty() || completion.dialog_id.trim().is_empty() {
+        return Ok(None);
+    }
+
+    let project = state
+        .spacetime_client()
+        .get_editor_project(EditorProjectGetRecordInput {
+            project_id: project_id.to_string(),
+            owner_user_id: owner_user_id.to_string(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    let completion_result =
+        apply_editor_canvas_generation_completion(project.layers, completion, resource)?;
+    if !completion_result.changed {
+        return Ok(None);
+    }
+    let saved = state
+        .spacetime_client()
+        .save_editor_project_layout(EditorProjectLayoutSaveRecordInput {
+            project_id: project_id.to_string(),
+            owner_user_id: owner_user_id.to_string(),
+            viewport: project.viewport.clone(),
+            layers_json: serialize_editor_layers(completion_result.layers)?,
+            updated_at_micros: current_utc_micros(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+
+    Ok(Some(editor_project_payload_from_record(saved)))
+}
+
+fn apply_editor_canvas_generation_completion(
+    layers: Value,
+    completion: &EditorCanvasGenerationCompletionRequest,
+    resource: &EditorProjectResourcePayload,
+) -> Result<EditorCanvasGenerationCompletionResult, AppError> {
+    let mut items = match layers {
+        Value::Array(items) => items,
+        _ => Vec::new(),
+    };
+    let Some(placeholder) = items
+        .iter()
+        .find(|item| generation_dialog_item_matches(item, completion.dialog_id.as_str()))
+        .map(|item| {
+            generation_dialog_item_placeholder(item, completion.dialog_id.as_str())
+                .unwrap_or_else(|| completion.placeholder.clone())
+        })
+    else {
+        return Ok(EditorCanvasGenerationCompletionResult {
+            layers: Value::Array(items),
+            changed: false,
+        });
+    };
+    let generated_layer_id = generated_canvas_layer_id(resource.resource_id.as_str());
+    let completed_layer_id = if let Some(existing_layer_id) = items.iter().find_map(|item| {
+        let resource_id = item.get("resourceId").and_then(Value::as_str)?;
+        if resource_id == resource.resource_id {
+            item.get("layerId")
+                .and_then(Value::as_str)
+                .map(str::to_string)
+        } else {
+            None
+        }
+    }) {
+        existing_layer_id
+    } else {
+        let z_index = next_canvas_layer_z_index(&items);
+        items.push(build_generated_canvas_layer_item(
+            completion,
+            &placeholder,
+            resource,
+            generated_layer_id.as_str(),
+            z_index,
+        ));
+        generated_layer_id
+    };
+
+    for item in &mut items {
+        if generation_dialog_item_matches(item, completion.dialog_id.as_str()) {
+            if let Some(dialog) = item.get_mut("dialog").and_then(Value::as_object_mut) {
+                dialog.insert("status".to_string(), json!("idle"));
+                dialog.insert("composerOpen".to_string(), json!(true));
+                dialog.insert("generatedLayerId".to_string(), json!(completed_layer_id));
+                dialog.remove("errorMessage");
+            }
+        }
+    }
+
+    Ok(EditorCanvasGenerationCompletionResult {
+        layers: Value::Array(items),
+        changed: true,
+    })
+}
+
+fn build_generated_canvas_layer_item(
+    completion: &EditorCanvasGenerationCompletionRequest,
+    placeholder: &EditorCanvasGenerationPlaceholderPayload,
+    resource: &EditorProjectResourcePayload,
+    generated_layer_id: &str,
+    z_index: i64,
+) -> Value {
+    let original_width = positive_f64(resource.width as f64, placeholder.original_width);
+    let original_height = positive_f64(resource.height as f64, placeholder.original_height);
+    let width = positive_f64(original_width, placeholder.width);
+    let height = positive_f64(original_height, placeholder.height);
+    let placeholder_width = positive_f64(placeholder.width, width);
+    let placeholder_height = positive_f64(placeholder.height, height);
+    let x = placeholder.x + placeholder_width / 2.0 - width / 2.0;
+    let y = placeholder.y + placeholder_height / 2.0 - height / 2.0;
+    let asset_kind = resource.asset_kind.as_deref();
+
+    json!({
+        "layerId": generated_layer_id,
+        "resourceId": resource.resource_id,
+        "title": completion.title.trim(),
+        "x": x,
+        "y": y,
+        "width": width,
+        "height": height,
+        "originalWidth": original_width,
+        "originalHeight": original_height,
+        "zIndex": z_index,
+        "sourceType": "generated",
+        "mediaType": generated_canvas_media_type(asset_kind),
+        "prompt": resource.prompt,
+        "actualPrompt": resource.actual_prompt,
+        "model": resource.model,
+        "provider": resource.provider,
+        "taskId": resource.task_id,
+        "objectKey": resource.object_key,
+        "assetObjectId": resource.asset_object_id,
+        "sourceResourceId": resource.source_resource_id,
+    })
+}
+
+fn positive_f64(value: f64, fallback: f64) -> f64 {
+    if value.is_finite() && value > 0.0 {
+        value.round().max(1.0)
+    } else if fallback.is_finite() && fallback > 0.0 {
+        fallback.round().max(1.0)
+    } else {
+        1.0
+    }
+}
+
+fn generated_canvas_layer_id(resource_id: &str) -> String {
+    format!("layer-editor-resource-{resource_id}")
+}
+
+fn generated_canvas_media_type(asset_kind: Option<&str>) -> &'static str {
+    match asset_kind {
+        Some("video") => "video",
+        Some("sound-effect") | Some("background-music") => "audio",
+        _ => "image",
+    }
+}
+
+fn next_canvas_layer_z_index(items: &[Value]) -> i64 {
+    items
+        .iter()
+        .filter_map(|item| item.get("zIndex").and_then(Value::as_i64))
+        .max()
+        .unwrap_or(0)
+        + 1
+}
+
+fn generation_dialog_item_matches(item: &Value, dialog_id: &str) -> bool {
+    item.get("itemType").and_then(Value::as_str) == Some("generation-dialog")
+        && item
+            .get("dialog")
+            .and_then(|dialog| dialog.get("id"))
+            .and_then(Value::as_str)
+            .is_some_and(|candidate| candidate == dialog_id)
+}
+
+fn generation_dialog_item_placeholder(
+    item: &Value,
+    dialog_id: &str,
+) -> Option<EditorCanvasGenerationPlaceholderPayload> {
+    if !generation_dialog_item_matches(item, dialog_id) {
+        return None;
+    }
+    serde_json::from_value(
+        item.get("dialog")?
+            .get("placeholder")
+            .cloned()
+            .unwrap_or(Value::Null),
+    )
+    .ok()
+}
+
 fn normalize_generated_asset_folder_id(
     folder_id: Option<String>,
     owner_user_id: &str,
@@ -2563,6 +2803,321 @@ mod tests {
         assert_eq!(decoded.get_pixel(4, 4).0[3], 255);
     }
 
+    #[test]
+    fn editor_canvas_generation_completion_inserts_result_layer_and_marks_dialog_idle() {
+        let layers = json!([
+            {
+                "layerId": "layer-existing",
+                "resourceId": "resource-existing",
+                "zIndex": 4
+            },
+            {
+                "itemType": "generation-dialog",
+                "layerId": "generation-dialog:dialog-character",
+                "resourceId": "generation-dialog:dialog-character",
+                "dialog": {
+                    "id": "dialog-character",
+                    "mode": "character",
+                    "prompt": "银发游侠",
+                    "status": "generating",
+                    "composerOpen": false,
+                    "errorMessage": "旧错误",
+                    "placeholder": {
+                        "x": 200,
+                        "y": 160,
+                        "width": 420,
+                        "height": 560,
+                        "originalWidth": 1024,
+                        "originalHeight": 1536
+                    }
+                }
+            }
+        ]);
+        let completion = EditorCanvasGenerationCompletionRequest {
+            dialog_id: "dialog-character".to_string(),
+            title: "角色形象 1".to_string(),
+            placeholder: EditorCanvasGenerationPlaceholderPayload {
+                x: 200.0,
+                y: 160.0,
+                width: 420.0,
+                height: 560.0,
+                original_width: 1024.0,
+                original_height: 1536.0,
+            },
+        };
+        let resource = EditorProjectResourcePayload {
+            resource_id: "editor-resource-character".to_string(),
+            project_id: "editor-project-1".to_string(),
+            image_src: "data:image/png;base64,character".to_string(),
+            object_key: Some("generated-character-drafts/editor/character.png".to_string()),
+            asset_object_id: Some("asset-object-1".to_string()),
+            width: 1024,
+            height: 1536,
+            source_type: "generated".to_string(),
+            prompt: Some("银发游侠".to_string()),
+            actual_prompt: Some("实际提示词".to_string()),
+            model: Some("gpt-image-2".to_string()),
+            provider: Some("VectorEngine".to_string()),
+            task_id: Some("task-character".to_string()),
+            source_resource_id: Some("resource-spec".to_string()),
+            asset_kind: Some("character".to_string()),
+            generation_inputs: Some(json!({
+                "fields": [{"title": "角色设定", "value": "银发游侠"}],
+                "references": []
+            })),
+            created_at: "2026-06-21T12:16:22.000Z".to_string(),
+            updated_at: "2026-06-21T12:16:22.000Z".to_string(),
+        };
+
+        let completed = apply_editor_canvas_generation_completion(layers, &completion, &resource)
+            .expect("completion should apply");
+        assert!(completed.changed);
+        let items = completed
+            .layers
+            .as_array()
+            .expect("layers should stay array");
+        let result_layer = items
+            .iter()
+            .find(|item| item["resourceId"] == "editor-resource-character")
+            .expect("result layer should be inserted");
+
+        assert_eq!(
+            result_layer["layerId"],
+            json!("layer-editor-resource-editor-resource-character")
+        );
+        assert_eq!(result_layer["title"], json!("角色形象 1"));
+        assert_eq!(result_layer["x"], json!(-102.0));
+        assert_eq!(result_layer["y"], json!(-328.0));
+        assert_eq!(result_layer["originalWidth"], json!(1024.0));
+        assert_eq!(result_layer["originalHeight"], json!(1536.0));
+        assert_eq!(result_layer["zIndex"], json!(5));
+        assert_eq!(result_layer["mediaType"], json!("image"));
+        assert_eq!(
+            result_layer.get("src"),
+            None,
+            "layout must not embed heavy image payloads"
+        );
+
+        let dialog = items
+            .iter()
+            .find(|item| item["itemType"] == "generation-dialog")
+            .and_then(|item| item.get("dialog"))
+            .expect("dialog should remain");
+        assert_eq!(dialog["status"], json!("idle"));
+        assert_eq!(dialog["composerOpen"], json!(true));
+        assert_eq!(
+            dialog["generatedLayerId"],
+            json!("layer-editor-resource-editor-resource-character")
+        );
+        assert!(dialog.get("errorMessage").is_none());
+    }
+
+    #[test]
+    fn editor_canvas_generation_completion_is_idempotent_for_existing_resource_layer() {
+        let layers = json!([
+            {
+                "layerId": "layer-existing-result",
+                "resourceId": "editor-resource-character",
+                "zIndex": 7
+            },
+            {
+                "itemType": "generation-dialog",
+                "layerId": "generation-dialog:dialog-character",
+                "resourceId": "generation-dialog:dialog-character",
+                "dialog": {
+                    "id": "dialog-character",
+                    "mode": "character",
+                    "prompt": "银发游侠",
+                    "status": "generating",
+                    "composerOpen": false
+                }
+            }
+        ]);
+        let completion = EditorCanvasGenerationCompletionRequest {
+            dialog_id: "dialog-character".to_string(),
+            title: "角色形象 1".to_string(),
+            placeholder: EditorCanvasGenerationPlaceholderPayload {
+                x: 0.0,
+                y: 0.0,
+                width: 1.0,
+                height: 1.0,
+                original_width: 1.0,
+                original_height: 1.0,
+            },
+        };
+        let resource = EditorProjectResourcePayload {
+            resource_id: "editor-resource-character".to_string(),
+            project_id: "editor-project-1".to_string(),
+            image_src: "data:image/png;base64,character".to_string(),
+            object_key: None,
+            asset_object_id: None,
+            width: 1024,
+            height: 1024,
+            source_type: "generated".to_string(),
+            prompt: Some("银发游侠".to_string()),
+            actual_prompt: None,
+            model: Some("gpt-image-2".to_string()),
+            provider: Some("VectorEngine".to_string()),
+            task_id: Some("task-character".to_string()),
+            source_resource_id: None,
+            asset_kind: Some("character".to_string()),
+            generation_inputs: None,
+            created_at: "2026-06-21T12:16:22.000Z".to_string(),
+            updated_at: "2026-06-21T12:16:22.000Z".to_string(),
+        };
+
+        let completed = apply_editor_canvas_generation_completion(layers, &completion, &resource)
+            .expect("completion should apply");
+        assert!(completed.changed);
+        let items = completed
+            .layers
+            .as_array()
+            .expect("layers should stay array");
+
+        assert_eq!(
+            items
+                .iter()
+                .filter(|item| item["resourceId"] == "editor-resource-character")
+                .count(),
+            1
+        );
+        let dialog = items
+            .iter()
+            .find(|item| item["itemType"] == "generation-dialog")
+            .and_then(|item| item.get("dialog"))
+            .expect("dialog should remain");
+        assert_eq!(dialog["generatedLayerId"], json!("layer-existing-result"));
+    }
+
+    #[test]
+    fn editor_canvas_generation_completion_uses_latest_layout_placeholder() {
+        let layers = json!([
+            {
+                "itemType": "generation-dialog",
+                "layerId": "generation-dialog:dialog-character",
+                "resourceId": "generation-dialog:dialog-character",
+                "dialog": {
+                    "id": "dialog-character",
+                    "mode": "character",
+                    "prompt": "银发游侠",
+                    "status": "generating",
+                    "composerOpen": false,
+                    "placeholder": {
+                        "x": 500,
+                        "y": 400,
+                        "width": 420,
+                        "height": 560,
+                        "originalWidth": 1024,
+                        "originalHeight": 1536
+                    }
+                }
+            }
+        ]);
+        let completion = EditorCanvasGenerationCompletionRequest {
+            dialog_id: "dialog-character".to_string(),
+            title: "角色形象 1".to_string(),
+            placeholder: EditorCanvasGenerationPlaceholderPayload {
+                x: 0.0,
+                y: 0.0,
+                width: 1.0,
+                height: 1.0,
+                original_width: 1.0,
+                original_height: 1.0,
+            },
+        };
+        let resource = EditorProjectResourcePayload {
+            resource_id: "editor-resource-character".to_string(),
+            project_id: "editor-project-1".to_string(),
+            image_src: "data:image/png;base64,character".to_string(),
+            object_key: None,
+            asset_object_id: None,
+            width: 1024,
+            height: 1536,
+            source_type: "generated".to_string(),
+            prompt: Some("银发游侠".to_string()),
+            actual_prompt: None,
+            model: Some("gpt-image-2".to_string()),
+            provider: Some("VectorEngine".to_string()),
+            task_id: Some("task-character".to_string()),
+            source_resource_id: None,
+            asset_kind: Some("character".to_string()),
+            generation_inputs: None,
+            created_at: "2026-06-21T12:16:22.000Z".to_string(),
+            updated_at: "2026-06-21T12:16:22.000Z".to_string(),
+        };
+
+        let completed = apply_editor_canvas_generation_completion(layers, &completion, &resource)
+            .expect("completion should apply");
+        let result_layer = completed
+            .layers
+            .as_array()
+            .expect("layers should stay array")
+            .iter()
+            .find(|item| item["resourceId"] == "editor-resource-character")
+            .expect("result layer should be inserted");
+
+        assert_eq!(result_layer["x"], json!(198.0));
+        assert_eq!(result_layer["y"], json!(-88.0));
+    }
+
+    #[test]
+    fn editor_canvas_generation_completion_skips_when_dialog_was_removed() {
+        let layers = json!([
+            {
+                "layerId": "layer-existing",
+                "resourceId": "resource-existing",
+                "zIndex": 4
+            }
+        ]);
+        let completion = EditorCanvasGenerationCompletionRequest {
+            dialog_id: "dialog-character".to_string(),
+            title: "角色形象 1".to_string(),
+            placeholder: EditorCanvasGenerationPlaceholderPayload {
+                x: 200.0,
+                y: 160.0,
+                width: 420.0,
+                height: 560.0,
+                original_width: 1024.0,
+                original_height: 1536.0,
+            },
+        };
+        let resource = EditorProjectResourcePayload {
+            resource_id: "editor-resource-character".to_string(),
+            project_id: "editor-project-1".to_string(),
+            image_src: "data:image/png;base64,character".to_string(),
+            object_key: None,
+            asset_object_id: None,
+            width: 1024,
+            height: 1536,
+            source_type: "generated".to_string(),
+            prompt: Some("银发游侠".to_string()),
+            actual_prompt: None,
+            model: Some("gpt-image-2".to_string()),
+            provider: Some("VectorEngine".to_string()),
+            task_id: Some("task-character".to_string()),
+            source_resource_id: None,
+            asset_kind: Some("character".to_string()),
+            generation_inputs: None,
+            created_at: "2026-06-21T12:16:22.000Z".to_string(),
+            updated_at: "2026-06-21T12:16:22.000Z".to_string(),
+        };
+
+        let completed = apply_editor_canvas_generation_completion(layers, &completion, &resource)
+            .expect("completion should be ignored");
+
+        assert!(!completed.changed);
+        assert_eq!(
+            completed.layers,
+            json!([
+                {
+                    "layerId": "layer-existing",
+                    "resourceId": "resource-existing",
+                    "zIndex": 4
+                }
+            ])
+        );
+    }
+
     #[test]
     fn editor_icon_spritesheet_prompt_uses_ordered_descriptions_and_size_tiers() {
         let descriptions = vec![
diff --git a/server-rs/crates/api-server/src/puzzle/draft.rs b/server-rs/crates/api-server/src/puzzle/draft.rs
index 0f6e949e1..fe545dc56 100644
--- a/server-rs/crates/api-server/src/puzzle/draft.rs
+++ b/server-rs/crates/api-server/src/puzzle/draft.rs
@@ -2108,45 +2108,6 @@ pub(crate) fn apply_generated_puzzle_initial_metadata_to_session_snapshot(
     session
 }
 
-pub(crate) fn apply_generated_puzzle_metadata_to_session_snapshot(
-    mut session: PuzzleAgentSessionRecord,
-    target_level_id: &str,
-    metadata: &PuzzleLevelNaming,
-    previous_level_name: &str,
-    updated_at_micros: i64,
-) -> PuzzleAgentSessionRecord {
-    let Some(draft) = session.draft.as_mut() else {
-        return session;
-    };
-    let Some(target_index) = draft
-        .levels
-        .iter()
-        .position(|level| level.level_id == target_level_id)
-        .or_else(|| (!draft.levels.is_empty()).then_some(0))
-    else {
-        return session;
-    };
-
-    draft.levels[target_index].level_name = metadata.level_name.clone();
-    if metadata.ui_background_prompt.is_some() {
-        draft.levels[target_index].ui_background_prompt = metadata.ui_background_prompt.clone();
-    }
-
-    if target_index == 0 {
-        apply_generated_puzzle_initial_metadata_to_draft(
-            draft,
-            metadata,
-            previous_level_name,
-            updated_at_micros,
-        );
-    } else {
-        sync_puzzle_primary_draft_fields_from_level(draft);
-    }
-
-    session.updated_at = format_timestamp_micros(updated_at_micros);
-    session
-}
-
 pub(crate) fn apply_generated_puzzle_initial_metadata_to_draft(
     draft: &mut PuzzleResultDraftRecord,
     metadata: &PuzzleLevelNaming,
@@ -2196,45 +2157,3 @@ pub(crate) fn sync_puzzle_primary_draft_fields_from_level(draft: &mut PuzzleResu
         });
     }
 }
-
-pub(crate) fn replace_puzzle_session_draft_snapshot(
-    mut session: PuzzleAgentSessionRecord,
-    draft: PuzzleResultDraftRecord,
-    updated_at_micros: i64,
-) -> PuzzleAgentSessionRecord {
-    session.draft = Some(draft);
-    session.updated_at = format_timestamp_micros(updated_at_micros);
-    session
-}
-
-pub(crate) fn apply_generated_puzzle_ui_background_to_session_snapshot(
-    mut session: PuzzleAgentSessionRecord,
-    target_level_id: &str,
-    prompt: String,
-    image_src: String,
-    image_object_key: Option<String>,
-    updated_at_micros: i64,
-) -> PuzzleAgentSessionRecord {
-    let Some(draft) = session.draft.as_mut() else {
-        return session;
-    };
-    let Some(target_index) = draft
-        .levels
-        .iter()
-        .position(|level| level.level_id == target_level_id)
-        .or_else(|| (!draft.levels.is_empty()).then_some(0))
-    else {
-        return session;
-    };
-    let level = &mut draft.levels[target_index];
-    level.ui_background_prompt = Some(prompt);
-    level.ui_background_image_src = Some(image_src);
-    level.ui_background_image_object_key = image_object_key;
-    if target_index == 0 {
-        sync_puzzle_primary_draft_fields_from_level(draft);
-    }
-    session.progress_percent = session.progress_percent.max(96);
-    session.last_assistant_reply = Some("拼图 UI 背景图已生成。".to_string());
-    session.updated_at = format_timestamp_micros(updated_at_micros);
-    session
-}
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index 78ef49d04..f140204c7 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -356,6 +356,8 @@ pub struct EditorVideoGenerateRequest {
     pub resolution: String,
     pub mode: String,
     pub sound: String,
+    #[serde(default = "default_editor_video_web_search_enabled")]
+    pub web_search_enabled: bool,
     pub price_mud_points: u32,
     #[serde(default)]
     pub reference_image_srcs: Vec<String>,
@@ -365,6 +367,10 @@ pub struct EditorVideoGenerateRequest {
     pub reference_audio_srcs: Vec<String>,
 }
 
+fn default_editor_video_web_search_enabled() -> bool {
+    true
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorVideoGenerateResponse {
@@ -1048,6 +1054,7 @@ mod tests {
             resolution: "480p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 100,
             reference_image_srcs: Vec::new(),
             reference_video_srcs: Vec::new(),
@@ -1059,6 +1066,7 @@ mod tests {
         assert_eq!(payload["durationSeconds"], json!(5));
         assert_eq!(payload["priceMudPoints"], json!(100));
         assert_eq!(payload["model"], json!("kling3.0-omni"));
+        assert_eq!(payload["webSearchEnabled"], json!(true));
     }
 
     #[test]
@@ -1071,6 +1079,7 @@ mod tests {
             resolution: "720p".to_string(),
             mode: "std".to_string(),
             sound: "off".to_string(),
+            web_search_enabled: true,
             price_mud_points: 100,
             reference_image_srcs: vec!["data:image/png;base64,image".to_string()],
             reference_video_srcs: vec![
diff --git a/src/App.test.tsx b/src/App.test.tsx
index bd1bac462..1bbffb369 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -3,9 +3,27 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import App from './App';
+import { resolveInitialSelectionStageFromPath } from './routing/appPageRoutes';
+
+function mockMatchMedia(matches: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
 
 vi.mock('./components/platform-entry/PlatformEntryFlowShell', async () => {
   const React = await import('react');
@@ -14,18 +32,30 @@ vi.mock('./components/platform-entry/PlatformEntryFlowShell', async () => {
   >;
 
   return {
-    PlatformEntryFlowShell: ({ setSelectionStage }: PlatformEntryFlowShellProps) =>
+    PlatformEntryFlowShell: ({
+      selectionStage,
+      setSelectionStage,
+    }: PlatformEntryFlowShellProps) =>
       React.createElement(
-        'button',
-        {
-          type: 'button',
-          onClick: () => {
-            setSelectionStage('image-editor', {
-              path: '/editor/canvas?projectid=project-from-test',
-            });
+        'div',
+        null,
+        React.createElement(
+          'div',
+          { 'data-testid': 'selection-stage' },
+          selectionStage,
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            onClick: () => {
+              setSelectionStage('image-editor', {
+                path: '/editor/canvas?projectid=project-from-test',
+              });
+            },
           },
-        },
-        '打开最近项目',
+          '打开最近项目',
+        ),
       ),
   };
 });
@@ -34,8 +64,45 @@ vi.mock('./RpgRuntimeApp', () => ({
   RpgRuntimeApp: () => <div>运行态</div>,
 }));
 
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('resolveInitialSelectionStageFromPath', () => {
+  it('opens the desktop root route on the creation home stage', () => {
+    expect(resolveInitialSelectionStageFromPath('/', true)).toBe(
+      'creation-home',
+    );
+  });
+
+  it('keeps the mobile root route on the platform stage', () => {
+    expect(resolveInitialSelectionStageFromPath('/', false)).toBe('platform');
+  });
+
+  it('keeps explicit routes mapped to their own stages on desktop', () => {
+    expect(resolveInitialSelectionStageFromPath('/creation/puzzle', true)).toBe(
+      'puzzle-agent-workspace',
+    );
+    expect(resolveInitialSelectionStageFromPath('/creation', true)).toBe(
+      'creation-home',
+    );
+  });
+});
+
 describe('App navigation history', () => {
+  it('renders the desktop home URL with the creation home stage', () => {
+    mockMatchMedia(true);
+    window.history.replaceState(null, '', '/');
+
+    render(<App />);
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'creation-home',
+    );
+  });
+
   it('keeps project canvas navigation as one history entry with projectid', async () => {
+    mockMatchMedia(true);
     window.history.replaceState(null, '', '/creation');
     const pushStateSpy = vi.spyOn(window.history, 'pushState');
     const user = userEvent.setup();
diff --git a/src/App.tsx b/src/App.tsx
index 237fafde3..7fd3d6412 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import {
 
 import { useAuthUi } from './components/auth/AuthUiContext';
 import { PlatformEntryFlowShell } from './components/platform-entry/PlatformEntryFlowShell';
+import { getInitialPlatformDesktopLayout } from './components/platform-entry/platformEntryResponsive';
 import type {
   CustomWorldRuntimeLaunchOptions,
   SelectionStage,
@@ -19,8 +20,8 @@ import {
   normalizeAppPath,
   pushAppHistoryPath,
   readPublicWorkCodeFromLocationSearch,
+  resolveInitialSelectionStageFromPath,
   resolvePathForSelectionStage,
-  resolveSelectionStageFromPath,
 } from './routing/appPageRoutes';
 import type { RpgRuntimeAppIntent } from './RpgRuntimeApp';
 import type { CustomWorldProfile } from './types';
@@ -59,7 +60,10 @@ export default function App() {
     isRpgRuntimeRoute(window.location.pathname),
   );
   const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(() =>
-    resolveSelectionStageFromPath(window.location.pathname),
+    resolveInitialSelectionStageFromPath(
+      window.location.pathname,
+      getInitialPlatformDesktopLayout(),
+    ),
   );
   const [runtimeReturnStage, setRuntimeReturnStage] =
     useState<SelectionStage>('platform');
@@ -84,7 +88,10 @@ export default function App() {
 
       setIsRuntimeActive(false);
       setRawSelectionStage(
-        resolveSelectionStageFromPath(window.location.pathname),
+        resolveInitialSelectionStageFromPath(
+          window.location.pathname,
+          getInitialPlatformDesktopLayout(),
+        ),
       );
     };
 
diff --git a/src/components/ResolvedAssetImage.tsx b/src/components/ResolvedAssetImage.tsx
index 5f662f7b9..13060b386 100644
--- a/src/components/ResolvedAssetImage.tsx
+++ b/src/components/ResolvedAssetImage.tsx
@@ -8,12 +8,14 @@ type ResolvedAssetImageProps = Omit<
   'src'
 > & {
   src?: string | null;
+  objectKey?: string | null;
   fallbackSrc?: string | null;
   refreshKey?: string | number | null;
 };
 
 export function ResolvedAssetImage({
   src,
+  objectKey,
   fallbackSrc,
   alt,
   refreshKey,
@@ -21,6 +23,7 @@ export function ResolvedAssetImage({
   ...rest
 }: ResolvedAssetImageProps) {
   const { resolvedUrl, isResolving, shouldResolve } = useResolvedAssetReadUrl(src, {
+    objectKey,
     refreshKey,
   });
   const normalizedSource = src?.trim() ?? '';
diff --git a/src/components/ResolvedAssetVideo.tsx b/src/components/ResolvedAssetVideo.tsx
index 4f0a8b020..97658d03d 100644
--- a/src/components/ResolvedAssetVideo.tsx
+++ b/src/components/ResolvedAssetVideo.tsx
@@ -7,17 +7,20 @@ type ResolvedAssetVideoProps = Omit<
   'src'
 > & {
   src?: string | null;
+  objectKey?: string | null;
   fallbackSrc?: string | null;
   refreshKey?: string | number | null;
 };
 
 export function ResolvedAssetVideo({
   src,
+  objectKey,
   fallbackSrc,
   refreshKey,
   ...rest
 }: ResolvedAssetVideoProps) {
   const { resolvedUrl } = useResolvedAssetReadUrl(src, {
+    objectKey,
     refreshKey,
   });
   const finalSrc = resolvedUrl || fallbackSrc?.trim() || '';
diff --git a/src/components/creation-home/CreationLandingView.test.tsx b/src/components/creation-home/CreationLandingView.test.tsx
index 357decff8..ce026690d 100644
--- a/src/components/creation-home/CreationLandingView.test.tsx
+++ b/src/components/creation-home/CreationLandingView.test.tsx
@@ -258,6 +258,80 @@ describe('CreationLandingView', () => {
     expect(within(card as HTMLElement).getByText('20泥点')).toBeTruthy();
   });
 
+  it('opens a fullscreen asset preview modal with thumbnail navigation', async () => {
+    const user = userEvent.setup();
+    listEditorProjectsMock.mockResolvedValueOnce([]);
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [],
+      assets: [
+        {
+          assetId: 'asset-character',
+          folderId: 'folder-1',
+          label: '角色英雄',
+          imageSrc: 'data:image/png;base64,character',
+          width: 512,
+          height: 512,
+          sourceType: 'generated',
+          prompt: 'character hero prompt',
+          actualPrompt: null,
+          model: 'character-model',
+          provider: 'provider',
+          taskId: 'task-1',
+          assetKind: 'character',
+          authorName: '创作者A',
+          priceMudPoints: 20,
+        },
+        {
+          assetId: 'asset-animation',
+          folderId: 'folder-1',
+          label: '待机动画',
+          imageSrc: 'data:image/png;base64,animation',
+          width: 512,
+          height: 512,
+          sourceType: 'generated',
+          prompt: 'idle animation prompt',
+          actualPrompt: null,
+          model: 'seedance2.0-fast',
+          provider: 'ark',
+          taskId: 'task-2',
+          assetKind: 'character-animation',
+          priceMudPoints: 40,
+          generationInputs: {
+            fields: [{ title: '动作描述', value: '待机动作' }],
+            references: [
+              {
+                title: '角色图片',
+                label: '角色英雄',
+                refType: 'asset',
+                refId: 'asset-character',
+              },
+            ],
+          },
+        },
+      ],
+    });
+
+    renderCreationLanding();
+
+    await user.click(screen.getByRole('tab', { name: '角色' }));
+    await user.click(await screen.findByText('角色英雄'));
+
+    const dialog = await screen.findByRole('dialog', { name: '角色英雄' });
+    expect(within(dialog).getByText('生成总成本')).toBeTruthy();
+    expect(within(dialog).getByText('60泥点')).toBeTruthy();
+    expect(within(dialog).getByText('创作者A')).toBeTruthy();
+    expect(
+      within(dialog).getByLabelText('素材缩略图导航'),
+    ).toBeTruthy();
+
+    await user.click(within(dialog).getByRole('button', { name: '查看待机动画' }));
+    expect(
+      within(dialog).getByRole('button', { name: '查看待机动画' }).getAttribute(
+        'aria-current',
+      ),
+    ).toBe('true');
+  });
+
   it('uses Taonier featured as the account asset waterfall instead of creation entries', async () => {
     listEditorProjectsMock.mockResolvedValueOnce([]);
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
diff --git a/src/components/creation-home/CreationLandingView.tsx b/src/components/creation-home/CreationLandingView.tsx
index 6641d01f9..23c79b9f0 100644
--- a/src/components/creation-home/CreationLandingView.tsx
+++ b/src/components/creation-home/CreationLandingView.tsx
@@ -1,3 +1,4 @@
+import { Film, Image as ImageIcon, Music2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
@@ -5,23 +6,28 @@ import {
   listEditorProjects,
   loadEditorAssetLibrary,
   type EditorAssetLibrarySnapshot,
-  type EditorAssetSnapshot,
   type EditorProjectSnapshot,
 } from '../../services/image-editor/editorProjectClient';
 import { ApiClientError } from '../../services/apiClient';
+import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
+import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { UnifiedModal } from '../common/UnifiedModal';
 import { ProjectCanvasCover } from '../project/ProjectCanvasCover';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
+import { ResolvedAssetVideo } from '../ResolvedAssetVideo';
+import type { PlatformPublicGalleryCard } from '../rpg-entry/rpgEntryWorldPresentation';
 import {
-  resolvePlatformWorkAuthorDisplayName,
-  resolvePlatformWorldCoverImage,
-  resolvePlatformWorldCoverSlides,
-  type PlatformPublicGalleryCard,
-} from '../rpg-entry/rpgEntryWorldPresentation';
+  buildCreationShowcaseItems,
+  SHOWCASE_TABS,
+  type ShowcaseAssetItem,
+  type ShowcaseAssetPreview,
+  type ShowcaseTabId,
+} from './creationShowcaseModel';
 
 type CreationLandingViewProps = {
   onOpenProject: (projectId: string) => void;
@@ -30,33 +36,12 @@ type CreationLandingViewProps = {
   publicGalleryEntries?: PlatformPublicGalleryCard[];
 };
 
-type ShowcaseTabId =
-  | 'packs'
-  | 'characters'
-  | 'ui'
-  | 'music'
-  | 'effects'
-  | 'scenes'
-  | 'marketing'
-  | 'games';
-
 type CreationFeatureItem = {
   title: string;
   description: string;
   iconSrc: string;
 };
 
-type ShowcaseAssetItem = {
-  id: string;
-  label: string;
-  imageSrc: string;
-  width?: number;
-  height?: number;
-  prompt: string;
-  author: string;
-  cost: string;
-};
-
 const CREATION_HOME_ASSETS = {
   heroCreate: '/creation-home/hero-create.png',
   heroCommunity: '/creation-home/hero-community.png',
@@ -111,17 +96,6 @@ const CREATION_FEATURES: CreationFeatureItem[] = [
   },
 ];
 
-const SHOWCASE_TABS: Array<{ id: ShowcaseTabId; label: string }> = [
-  { id: 'packs', label: '素材包' },
-  { id: 'characters', label: '角色' },
-  { id: 'ui', label: 'UI' },
-  { id: 'music', label: '音乐' },
-  { id: 'effects', label: '特效' },
-  { id: 'scenes', label: '场景' },
-  { id: 'marketing', label: '美宣' },
-  { id: 'games', label: '游戏' },
-];
-
 function isUnauthorizedError(error: unknown) {
   return error instanceof ApiClientError && error.status === 401;
 }
@@ -139,148 +113,247 @@ function formatProjectUpdatedAt(value: string) {
   }).format(date);
 }
 
-function formatAssetCost(asset: EditorAssetSnapshot) {
-  const value = (asset as Record<string, unknown>)['priceMudPoints'];
-  return typeof value === 'number' && Number.isFinite(value)
-    ? `${value}泥点`
-    : '-';
+function getPreviewAspectRatio(preview: ShowcaseAssetPreview) {
+  return preview.width && preview.height
+    ? `${Math.max(1, preview.width)} / ${Math.max(1, preview.height)}`
+    : undefined;
 }
 
-function resolveAssetAuthor(asset: EditorAssetSnapshot) {
-  const value = (asset as Record<string, unknown>)['authorName'];
-  return typeof value === 'string' && value.trim() ? value.trim() : '-';
+function getPreviewIcon(preview: ShowcaseAssetPreview) {
+  if (preview.mediaType === 'audio') {
+    return <Music2 aria-hidden="true" />;
+  }
+  if (preview.mediaType === 'video') {
+    return <Film aria-hidden="true" />;
+  }
+  return <ImageIcon aria-hidden="true" />;
 }
 
-function matchesShowcaseTab(asset: EditorAssetSnapshot, tab: ShowcaseTabId) {
-  const haystack = [
-    asset.label,
-    asset.prompt,
-    asset.actualPrompt,
-    asset.model,
-    asset.provider,
-    asset.sourceType,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .toLowerCase();
+function ShowcaseAudioPreview({
+  preview,
+  controls = false,
+}: {
+  preview: ShowcaseAssetPreview;
+  controls?: boolean;
+}) {
+  const { resolvedUrl } = useResolvedAssetReadUrl(preview.src, {
+    objectKey: preview.objectKey,
+  });
 
-  if (tab === 'packs') {
-    return true;
-  }
-  if (tab === 'characters') {
-    return /角色|character/u.test(haystack);
-  }
-  if (tab === 'ui') {
-    return /\bui\b|界面|图标|icon/u.test(haystack);
-  }
-  if (tab === 'music') {
-    return /音乐|音效|audio|music|sound/u.test(haystack);
-  }
-  if (tab === 'marketing') {
-    return /美宣|宣传|poster|video|视频/u.test(haystack);
-  }
-  if (tab === 'effects') {
-    return /特效|effect|vfx/u.test(haystack);
-  }
-  if (tab === 'scenes') {
-    return /场景|scene|background/u.test(haystack);
-  }
-  if (tab === 'games') {
-    return /游戏|game/u.test(haystack);
-  }
-  return false;
+  return (
+    <div className="creation-landing__asset-audio-preview">
+      <Music2 aria-hidden="true" />
+      {controls && resolvedUrl ? (
+        <audio controls preload="metadata" src={resolvedUrl} />
+      ) : null}
+    </div>
+  );
 }
 
-function toLibraryShowcaseItem(asset: EditorAssetSnapshot): ShowcaseAssetItem {
-  return {
-    id: `asset:${asset.assetId}`,
-    label: asset.label,
-    imageSrc: asset.imageSrc,
-    width: asset.width,
-    height: asset.height,
-    prompt: asset.prompt?.trim() || asset.actualPrompt?.trim() || '-',
-    author: resolveAssetAuthor(asset),
-    cost: formatAssetCost(asset),
-  };
+function ShowcasePreview({
+  preview,
+  variant = 'card',
+}: {
+  preview: ShowcaseAssetPreview;
+  variant?: 'card' | 'modal' | 'thumb';
+}) {
+  if (preview.mediaType === 'audio') {
+    return (
+      <ShowcaseAudioPreview preview={preview} controls={variant === 'modal'} />
+    );
+  }
+  if (preview.mediaType === 'video') {
+    return (
+      <ShowcaseVideoPreview
+        preview={preview}
+        controls={variant === 'modal'}
+        variant={variant}
+      />
+    );
+  }
+  return <ShowcaseImagePreview preview={preview} variant={variant} />;
 }
 
-function matchesPublicGalleryTab(
-  entry: PlatformPublicGalleryCard,
-  tab: ShowcaseTabId,
-) {
-  if (tab === 'packs' || tab === 'games') {
-    return true;
-  }
-
-  const themeTags = 'themeTags' in entry ? entry.themeTags : [];
-  const haystack = [
-    entry.worldName,
-    entry.subtitle,
-    entry.summaryText,
-    entry.sourceType,
-    ...themeTags,
-  ]
-    .join(' ')
-    .toLowerCase();
-
-  if (tab === 'characters') {
-    return /角色|character|rpg|visual/u.test(haystack);
-  }
-  if (tab === 'ui') {
-    return /\bui\b|界面|图标|icon|puzzle/u.test(haystack);
-  }
-  if (tab === 'music') {
-    return /音乐|音效|audio|music|sound/u.test(haystack);
-  }
-  if (tab === 'marketing') {
-    return /美宣|宣传|poster|video|视觉|visual/u.test(haystack);
-  }
-  if (tab === 'effects') {
-    return /特效|effect|vfx/u.test(haystack);
-  }
-  if (tab === 'scenes') {
-    return /场景|scene|background|world|rpg/u.test(haystack);
-  }
-  return false;
+function ShowcaseImagePreview({
+  preview,
+  variant,
+}: {
+  preview: ShowcaseAssetPreview;
+  variant: 'card' | 'modal' | 'thumb';
+}) {
+  return (
+    <ResolvedAssetImage
+      src={preview.src}
+      objectKey={preview.objectKey}
+      alt={preview.label}
+      className={
+        variant === 'modal'
+          ? 'creation-landing__showcase-media'
+          : 'h-full w-full object-contain'
+      }
+    />
+  );
 }
 
-function toPublicGalleryShowcaseItems(
-  entries: PlatformPublicGalleryCard[],
-  tab: ShowcaseTabId,
-): ShowcaseAssetItem[] {
-  const usedImageSrcs = new Set<string>();
-  const items: ShowcaseAssetItem[] = [];
+function ShowcaseVideoPreview({
+  preview,
+  controls,
+  variant,
+}: {
+  preview: ShowcaseAssetPreview;
+  controls: boolean;
+  variant: 'card' | 'modal' | 'thumb';
+}) {
+  return (
+    <ResolvedAssetVideo
+      src={preview.src}
+      objectKey={preview.objectKey}
+      className={
+        variant === 'modal'
+          ? 'creation-landing__showcase-media'
+          : 'h-full w-full object-contain'
+      }
+      controls={controls}
+      muted={!controls}
+      loop={!controls}
+      playsInline
+    />
+  );
+}
 
-  entries
-    .filter((entry) => matchesPublicGalleryTab(entry, tab))
-    .forEach((entry) => {
-      const coverImageSrc = resolvePlatformWorldCoverImage(entry).trim();
-      const imageCandidates = [
-        ...resolvePlatformWorldCoverSlides(entry).map((slide) =>
-          slide.imageSrc.trim(),
-        ),
-        coverImageSrc,
-      ].filter(Boolean);
+function ShowcaseBundlePreview({
+  item,
+}: {
+  item: ShowcaseAssetItem;
+}) {
+  const visiblePreviews = item.previews.slice(0, 4);
+  const primaryPreview = visiblePreviews[0];
 
-      imageCandidates.forEach((imageSrc, index) => {
-        if (usedImageSrcs.has(imageSrc)) {
-          return;
-        }
-        usedImageSrcs.add(imageSrc);
-        items.push({
-          id: `public:${entry.sourceType}:${entry.profileId}:${index}`,
-          label: index === 0 ? entry.worldName : `${entry.worldName} ${index + 1}`,
-          imageSrc,
-          width: index === 0 ? 720 : 640,
-          height: index === 0 ? 480 : 720,
-          prompt: entry.summaryText || entry.subtitle || '-',
-          author: resolvePlatformWorkAuthorDisplayName(entry),
-          cost: '-',
-        });
-      });
-    });
+  if (!primaryPreview) {
+    return null;
+  }
 
-  return items.slice(0, 36);
+  return (
+    <div
+      className={
+        item.previews.length > 1
+          ? 'creation-landing__asset-preview creation-landing__asset-preview--bundle'
+          : 'creation-landing__asset-preview'
+      }
+      style={{
+        aspectRatio: getPreviewAspectRatio(primaryPreview),
+      }}
+    >
+      {visiblePreviews.map((preview) => (
+        <span
+          key={preview.id}
+          className="creation-landing__asset-preview-tile"
+          aria-label={preview.label}
+        >
+          <ShowcasePreview preview={preview} />
+        </span>
+      ))}
+      {item.previews.length > visiblePreviews.length ? (
+        <span className="creation-landing__asset-preview-more">
+          +{item.previews.length - visiblePreviews.length}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function CreationShowcaseModal({
+  item,
+  activeIndex,
+  onSelectIndex,
+  onClose,
+}: {
+  item: ShowcaseAssetItem | null;
+  activeIndex: number;
+  onSelectIndex: (index: number) => void;
+  onClose: () => void;
+}) {
+  const safeActiveIndex = item
+    ? Math.min(Math.max(activeIndex, 0), item.previews.length - 1)
+    : 0;
+  const activePreview = item?.previews[safeActiveIndex] ?? null;
+
+  return (
+    <UnifiedModal
+      open={Boolean(item && activePreview)}
+      title={item?.label ?? '素材预览'}
+      ariaLabel={item?.label ?? '素材预览'}
+      onClose={onClose}
+      showHeader={false}
+      showCloseButton={false}
+      size="fullscreen"
+      zIndexClassName="z-[120]"
+      overlayClassName="creation-landing__showcase-modal-overlay"
+      panelClassName="creation-landing__showcase-modal-panel"
+      bodyClassName="creation-landing__showcase-modal-body"
+      closeOnBackdrop
+    >
+      {item && activePreview ? (
+        <div className="creation-landing__showcase-modal">
+          <PlatformModalCloseButton
+            label="关闭素材预览"
+            variant="floating"
+            className="creation-landing__showcase-modal-close"
+            onClick={onClose}
+          />
+          <div className="creation-landing__showcase-modal-stage">
+            <div className="creation-landing__showcase-current">
+              <ShowcasePreview preview={activePreview} variant="modal" />
+            </div>
+          </div>
+          <div className="creation-landing__showcase-dock">
+            <div className="creation-landing__showcase-dock-meta">
+              <h3>{item.label}</h3>
+              <p>{item.prompt}</p>
+              <dl>
+                <div>
+                  <dt>作者</dt>
+                  <dd>{item.author}</dd>
+                </div>
+                <div>
+                  <dt>生成总成本</dt>
+                  <dd>{item.cost}</dd>
+                </div>
+              </dl>
+            </div>
+            <div
+              className="creation-landing__showcase-thumbs"
+              aria-label="素材缩略图导航"
+            >
+              {item.previews.map((preview, index) => (
+                <button
+                  key={preview.id}
+                  type="button"
+                  className={
+                    index === safeActiveIndex
+                      ? 'creation-landing__showcase-thumb creation-landing__showcase-thumb--active'
+                      : 'creation-landing__showcase-thumb'
+                  }
+                  aria-label={`查看${preview.label}`}
+                  aria-current={index === safeActiveIndex ? 'true' : undefined}
+                  onClick={() => onSelectIndex(index)}
+                >
+                  <span className="creation-landing__showcase-thumb-media">
+                    {preview.mediaType === 'image' ? (
+                      <ShowcasePreview preview={preview} variant="thumb" />
+                    ) : (
+                      getPreviewIcon(preview)
+                    )}
+                  </span>
+                  <span>{preview.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </UnifiedModal>
+  );
 }
 
 export function CreationLandingView({
@@ -303,6 +376,9 @@ export function CreationLandingView({
   const [assetError, setAssetError] = useState<string | null>(null);
   const [activeShowcaseTab, setActiveShowcaseTab] =
     useState<ShowcaseTabId>('packs');
+  const [selectedShowcaseItem, setSelectedShowcaseItem] =
+    useState<ShowcaseAssetItem | null>(null);
+  const [selectedShowcaseIndex, setSelectedShowcaseIndex] = useState(0);
 
   const refreshRecentProjects = useCallback(() => {
     if (!isAuthenticated) {
@@ -386,15 +462,16 @@ export function CreationLandingView({
       .finally(() => setIsCreatingProject(false));
   }, [authUi, onOpenProject]);
 
-  const showcaseItems = useMemo(() => {
-    const libraryItems = (assetLibrary?.assets ?? [])
-      .filter((asset) => matchesShowcaseTab(asset, activeShowcaseTab))
-      .map(toLibraryShowcaseItem);
-    if (libraryItems.length > 0) {
-      return libraryItems.slice(0, 36);
-    }
-    return toPublicGalleryShowcaseItems(publicGalleryEntries, activeShowcaseTab);
-  }, [activeShowcaseTab, assetLibrary, publicGalleryEntries]);
+  const showcaseItems = useMemo(
+    () =>
+      buildCreationShowcaseItems({
+        activeTab: activeShowcaseTab,
+        assetLibrary,
+        publicGalleryEntries,
+        fallbackAuthorName: authUi?.user?.displayName,
+      }),
+    [activeShowcaseTab, assetLibrary, authUi?.user?.displayName, publicGalleryEntries],
+  );
 
   const isShowcaseLoading = isAuthenticated && isLoadingAssets;
   const showcaseEmptyText =
@@ -426,22 +503,16 @@ export function CreationLandingView({
     return (
       <div className="creation-landing__asset-waterfall" aria-label="用户素材瀑布流">
         {showcaseItems.map((item) => (
-          <article key={item.id} className="creation-landing__asset-card">
-            <div
-              className="creation-landing__asset-preview"
-              style={{
-                aspectRatio:
-                  item.width && item.height
-                    ? `${Math.max(1, item.width)} / ${Math.max(1, item.height)}`
-                    : undefined,
-              }}
-            >
-              <ResolvedAssetImage
-                src={item.imageSrc}
-                alt={item.label}
-                className="h-full w-full object-contain"
-              />
-            </div>
+          <button
+            key={item.id}
+            type="button"
+            className="creation-landing__asset-card"
+            onClick={() => {
+              setSelectedShowcaseItem(item);
+              setSelectedShowcaseIndex(0);
+            }}
+          >
+            <ShowcaseBundlePreview item={item} />
             <div className="creation-landing__asset-meta">
               <h3>{item.label}</h3>
               <p>{item.prompt}</p>
@@ -451,12 +522,12 @@ export function CreationLandingView({
                   <dd>{item.author}</dd>
                 </div>
                 <div>
-                  <dt>成本</dt>
+                  <dt>生成总成本</dt>
                   <dd>{item.cost}</dd>
                 </div>
               </dl>
             </div>
-          </article>
+          </button>
         ))}
       </div>
     );
@@ -638,6 +709,12 @@ export function CreationLandingView({
         </div>
         {renderAssetShowcase()}
       </section>
+      <CreationShowcaseModal
+        item={selectedShowcaseItem}
+        activeIndex={selectedShowcaseIndex}
+        onSelectIndex={setSelectedShowcaseIndex}
+        onClose={() => setSelectedShowcaseItem(null)}
+      />
     </main>
   );
 }
diff --git a/src/components/creation-home/creationShowcaseModel.test.ts b/src/components/creation-home/creationShowcaseModel.test.ts
new file mode 100644
index 000000000..90ffd8089
--- /dev/null
+++ b/src/components/creation-home/creationShowcaseModel.test.ts
@@ -0,0 +1,358 @@
+import { describe, expect, it } from 'vitest';
+
+import type {
+  EditorAssetLibrarySnapshot,
+  EditorAssetSnapshot,
+} from '../../services/image-editor/editorProjectClient';
+import { buildCreationShowcaseItems } from './creationShowcaseModel';
+
+function createAsset(
+  overrides: Partial<EditorAssetSnapshot> & Record<string, unknown>,
+): EditorAssetSnapshot {
+  return {
+    assetId: 'asset-1',
+    folderId: 'folder-1',
+    label: '素材',
+    imageSrc: 'data:image/png;base64,asset',
+    width: 512,
+    height: 512,
+    sourceType: 'generated',
+    prompt: null,
+    actualPrompt: null,
+    model: null,
+    provider: null,
+    taskId: null,
+    ...overrides,
+  };
+}
+
+function createLibrary(assets: EditorAssetSnapshot[]): EditorAssetLibrarySnapshot {
+  return {
+    folders: [],
+    assets,
+  };
+}
+
+describe('creationShowcaseModel', () => {
+  it('groups pack items by the same referenced spec image and sums known cost', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'packs',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'spec-1',
+          label: '角色规范图',
+          assetKind: 'spec',
+          prompt: '规范提示词',
+          priceMudPoints: 5,
+          authorName: '创作者A',
+        }),
+        createAsset({
+          assetId: 'character-1',
+          label: '角色主图',
+          assetKind: 'character',
+          priceMudPoints: 12,
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '角色提示词' }],
+            references: [
+              {
+                title: '角色规范',
+                label: '角色规范图',
+                refType: 'asset',
+                refId: 'spec-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('角色规范图');
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '角色规范图',
+      '角色主图',
+    ]);
+    expect(items[0]?.prompt).toBe('规范提示词');
+    expect(items[0]?.author).toBe('创作者A');
+    expect(items[0]?.cost).toBe('17泥点');
+  });
+
+  it('groups assets when references point to the source project resource', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'packs',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'spec-1',
+          label: '项目规范图',
+          assetKind: 'spec',
+          sourceResourceId: 'resource-spec-1',
+        }),
+        createAsset({
+          assetId: 'character-1',
+          label: '项目角色图',
+          assetKind: 'character',
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '项目角色提示词' }],
+            references: [
+              {
+                title: '角色规范',
+                label: '项目规范图',
+                refType: 'project-resource',
+                refId: 'resource-spec-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '项目规范图',
+      '项目角色图',
+    ]);
+  });
+
+  it('groups character animations under the referenced character image', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'characters',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'character-1',
+          label: '游戏角色图',
+          assetKind: 'character',
+          prompt: '角色提示词',
+        }),
+        createAsset({
+          assetId: 'animation-1',
+          label: '待机动画',
+          assetKind: 'character-animation',
+          imageSrc: 'data:image/png;base64,animation',
+          generationInputs: {
+            fields: [{ title: '动作描述', value: '待机动作' }],
+            references: [
+              {
+                title: '角色图片',
+                label: '游戏角色图',
+                refType: 'asset',
+                refId: 'character-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('游戏角色图');
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '游戏角色图',
+      '待机动画',
+    ]);
+  });
+
+  it('groups UI design extraction assets under the referenced UI image', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'ui',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'ui-design-1',
+          label: '游戏UI图',
+          assetKind: 'ui-design',
+          prompt: 'UI提示词',
+        }),
+        createAsset({
+          assetId: 'icon-sheet-1',
+          label: 'UI子素材图集',
+          assetKind: 'icon-spritesheet',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+        createAsset({
+          assetId: 'icon-1',
+          label: '开始按钮',
+          assetKind: 'icon',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('游戏UI图');
+    expect(items[0]?.previews.map((preview) => preview.label)).toEqual([
+      '游戏UI图',
+      'UI子素材图集',
+      '开始按钮',
+    ]);
+  });
+
+  it('counts a spritesheet task only once when UI children share the same task', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'ui',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'ui-design-1',
+          label: '游戏UI图',
+          assetKind: 'ui-design',
+          model: 'gemini-3.1-flash-image-preview',
+          taskId: 'task-ui-design',
+        }),
+        createAsset({
+          assetId: 'icon-sheet-1',
+          label: 'UI子素材图集',
+          assetKind: 'icon-spritesheet',
+          model: 'gpt-image-2',
+          taskId: 'task-ui-extract',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+        createAsset({
+          assetId: 'icon-1',
+          label: '开始按钮',
+          assetKind: 'icon',
+          model: 'gpt-image-2',
+          taskId: 'task-ui-extract',
+          generationInputs: {
+            fields: [{ title: '提取提示词', value: '提取UI子素材' }],
+            references: [
+              {
+                title: 'UI设计图',
+                label: '游戏UI图',
+                refType: 'asset',
+                refId: 'ui-design-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.cost).toBe('32泥点');
+  });
+
+  it('keeps music assets as audio preview items', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'music',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'music-1',
+          label: '背景音乐',
+          imageSrc: '/generated-editor-audios/music.mp3',
+          assetKind: 'background-music',
+          prompt: '舒缓背景音乐',
+          priceMudPoints: '5',
+        }),
+      ]),
+      publicGalleryEntries: [],
+      fallbackAuthorName: '当前用户',
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.previews[0]?.mediaType).toBe('audio');
+    expect(items[0]?.author).toBe('当前用户');
+    expect(items[0]?.cost).toBe('5泥点');
+  });
+
+  it('keeps character animation videos out of the marketing tab', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'marketing',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'animation-1',
+          label: '角色动画',
+          assetKind: 'character-animation',
+          imageSrc: '/generated-editor-videos/animation.mp4',
+        }),
+        createAsset({
+          assetId: 'poster-1',
+          label: '上线美宣视频',
+          assetKind: 'publication-material',
+          imageSrc: '/generated-editor-videos/poster.mp4',
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.label).toBe('上线美宣视频');
+    expect(items[0]?.previews[0]?.mediaType).toBe('video');
+  });
+
+  it('infers costs from generated asset kinds when stored price is absent', () => {
+    const items = buildCreationShowcaseItems({
+      activeTab: 'characters',
+      assetLibrary: createLibrary([
+        createAsset({
+          assetId: 'character-1',
+          label: '游戏角色图',
+          imageSrc: '/generated-editor-assets/character.png',
+          objectKey: 'generated-editor-assets/character.png',
+          assetKind: 'character',
+          model: 'gpt-image-2',
+          prompt: '角色提示词',
+        }),
+        createAsset({
+          assetId: 'animation-1',
+          label: '待机动画',
+          assetKind: 'character-animation',
+          imageSrc: '/generated-editor-videos/animation.mp4',
+          objectKey: 'generated-editor-videos/animation.mp4',
+          model: 'seedance2.0-fast',
+          durationSeconds: 6,
+          generationInputs: {
+            fields: [{ title: '清晰度', value: '720p' }],
+            references: [
+              {
+                title: '角色图片',
+                label: '游戏角色图',
+                refType: 'asset',
+                refId: 'character-1',
+              },
+            ],
+          },
+        }),
+      ]),
+      publicGalleryEntries: [],
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.cost).toBe('140泥点');
+    expect(items[0]?.previews[0]?.objectKey).toBe(
+      'generated-editor-assets/character.png',
+    );
+  });
+});
diff --git a/src/components/creation-home/creationShowcaseModel.ts b/src/components/creation-home/creationShowcaseModel.ts
new file mode 100644
index 000000000..2e6f299c9
--- /dev/null
+++ b/src/components/creation-home/creationShowcaseModel.ts
@@ -0,0 +1,754 @@
+import type {
+  EditorAssetGenerationInputReference,
+  EditorAssetLibrarySnapshot,
+  EditorAssetSnapshot,
+} from '../../services/image-editor/editorProjectClient';
+import {
+  calculateCharacterAnimationPrice,
+  calculateEditorBackgroundMusicPrice,
+  calculateEditorImageGenerationPrice,
+  calculateEditorSoundEffectPrice,
+  calculateEditorVideoPrice,
+  CHARACTER_ANIMATION_MODEL,
+  DEFAULT_BACKGROUND_MUSIC_MODEL,
+  DEFAULT_SOUND_EFFECT_MODEL,
+  DEFAULT_VIDEO_DURATION_SECONDS,
+  DEFAULT_VIDEO_MODEL,
+} from '../image-editor/ImageCanvasGenerationModel';
+import {
+  resolvePlatformWorkAuthorDisplayName,
+  resolvePlatformWorldCoverImage,
+  resolvePlatformWorldCoverSlides,
+  type PlatformPublicGalleryCard,
+} from '../rpg-entry/rpgEntryWorldPresentation';
+
+export type ShowcaseTabId =
+  | 'packs'
+  | 'characters'
+  | 'ui'
+  | 'music'
+  | 'effects'
+  | 'scenes'
+  | 'marketing'
+  | 'games';
+
+export type ShowcaseAssetMediaType = 'image' | 'video' | 'audio';
+
+export type ShowcaseAssetPreview = {
+  id: string;
+  label: string;
+  src: string;
+  objectKey?: string | null;
+  mediaType: ShowcaseAssetMediaType;
+  width?: number;
+  height?: number;
+};
+
+export type ShowcaseAssetItem = {
+  id: string;
+  label: string;
+  previews: ShowcaseAssetPreview[];
+  prompt: string;
+  author: string;
+  cost: string;
+};
+
+type ShowcaseAssetGroup = {
+  id: string;
+  label?: string;
+  assets: EditorAssetSnapshot[];
+};
+
+const UNKNOWN_META_VALUE = '-';
+
+const SHOWCASE_COST_KEYS = [
+  'priceMudPoints',
+  'costMudPoints',
+  'generationCostMudPoints',
+  'mudPointCost',
+] as const;
+
+const SHOWCASE_AUTHOR_KEYS = [
+  'authorName',
+  'creatorName',
+  'ownerLabel',
+  'ownerName',
+  'authorDisplayName',
+] as const;
+
+export const SHOWCASE_TABS: Array<{ id: ShowcaseTabId; label: string }> = [
+  { id: 'packs', label: '素材包' },
+  { id: 'characters', label: '角色' },
+  { id: 'ui', label: 'UI' },
+  { id: 'music', label: '音乐' },
+  { id: 'effects', label: '特效' },
+  { id: 'scenes', label: '场景' },
+  { id: 'marketing', label: '美宣' },
+  { id: 'games', label: '游戏' },
+];
+
+function assetRecord(asset: EditorAssetSnapshot) {
+  return asset as Record<string, unknown>;
+}
+
+function normalizeText(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : '';
+}
+
+function normalizeNumber(value: unknown) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    const numericValue = Number(value.trim());
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  return null;
+}
+
+function normalizeInt(
+  value: unknown,
+  fallback: number,
+  minValue = 1,
+  maxValue = Number.MAX_SAFE_INTEGER,
+) {
+  const numericValue = normalizeNumber(value);
+  if (numericValue === null) {
+    return fallback;
+  }
+  return Math.min(maxValue, Math.max(minValue, Math.round(numericValue)));
+}
+
+function normalizeAssetKind(asset: EditorAssetSnapshot) {
+  return asset.assetKind?.trim() ?? '';
+}
+
+function getAssetHaystack(asset: EditorAssetSnapshot) {
+  return [
+    asset.label,
+    asset.prompt,
+    asset.actualPrompt,
+    asset.model,
+    asset.provider,
+    asset.sourceType,
+    asset.assetKind,
+    ...(asset.generationInputs?.fields ?? []).flatMap((field) => [
+      field.title,
+      field.value,
+    ]),
+    ...(asset.generationInputs?.references ?? []).flatMap((reference) => [
+      reference.title,
+      reference.label,
+      reference.refType,
+      reference.refId,
+    ]),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
+}
+
+function getAssetReferences(asset: EditorAssetSnapshot) {
+  return asset.generationInputs?.references ?? [];
+}
+
+function getReferenceKey(reference: EditorAssetGenerationInputReference) {
+  return `${reference.refType}:${reference.refId}`;
+}
+
+function getSelfAssetKey(asset: EditorAssetSnapshot) {
+  return `asset:${asset.assetId}`;
+}
+
+function getAssetReferenceKeys(asset: EditorAssetSnapshot) {
+  const keys = [getSelfAssetKey(asset)];
+  if (asset.sourceResourceId?.trim()) {
+    keys.push(`project-resource:${asset.sourceResourceId.trim()}`);
+  }
+  if (asset.assetObjectId?.trim()) {
+    keys.push(`asset-object:${asset.assetObjectId.trim()}`);
+  }
+  if (asset.objectKey?.trim()) {
+    keys.push(`object:${asset.objectKey.trim()}`);
+  }
+  return keys;
+}
+
+function findReference(
+  asset: EditorAssetSnapshot,
+  matcher: (reference: EditorAssetGenerationInputReference) => boolean,
+) {
+  return getAssetReferences(asset).find(matcher) ?? null;
+}
+
+function findSpecReference(asset: EditorAssetSnapshot) {
+  return findReference(asset, (reference) => /规范/u.test(reference.title));
+}
+
+function findCharacterReference(asset: EditorAssetSnapshot) {
+  return findReference(asset, (reference) => /角色图片|角色图/u.test(reference.title));
+}
+
+function findUiDesignReference(asset: EditorAssetSnapshot) {
+  return findReference(asset, (reference) => /UI设计图|UI 图|UI图片/u.test(reference.title));
+}
+
+function isAssetKind(asset: EditorAssetSnapshot, kinds: readonly string[]) {
+  return kinds.includes(normalizeAssetKind(asset));
+}
+
+function isAudioAsset(asset: EditorAssetSnapshot) {
+  const mediaType = normalizeText(assetRecord(asset).mediaType);
+  return (
+    mediaType === 'audio' ||
+    isAssetKind(asset, ['sound-effect', 'background-music']) ||
+    /\.(mp3|wav|m4a|aac|ogg)(?:$|\?)/iu.test(asset.imageSrc)
+  );
+}
+
+function isVideoAsset(asset: EditorAssetSnapshot) {
+  const mediaType = normalizeText(assetRecord(asset).mediaType);
+  return (
+    mediaType === 'video' ||
+    isAssetKind(asset, ['video']) ||
+    /\.(mp4|webm|mov|m4v)(?:$|\?)/iu.test(asset.imageSrc)
+  );
+}
+
+function resolveAssetMediaType(asset: EditorAssetSnapshot): ShowcaseAssetMediaType {
+  if (isAudioAsset(asset)) {
+    return 'audio';
+  }
+  if (isVideoAsset(asset)) {
+    return 'video';
+  }
+  return 'image';
+}
+
+function isSpecAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['spec', 'icon-spec']);
+}
+
+function isCharacterAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['character']);
+}
+
+function isCharacterAnimationAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['character-animation']);
+}
+
+function isUiAsset(asset: EditorAssetSnapshot) {
+  return isAssetKind(asset, ['ui-design', 'icon', 'icon-spritesheet']);
+}
+
+function isMarketingAsset(asset: EditorAssetSnapshot) {
+  const haystack = getAssetHaystack(asset);
+  return (
+    isAssetKind(asset, ['publication-material']) ||
+    /美宣|宣发|宣传|poster|promo|marketing/u.test(haystack)
+  );
+}
+
+function isSceneAsset(asset: EditorAssetSnapshot) {
+  return /场景|scene|background/u.test(getAssetHaystack(asset));
+}
+
+function isEffectAsset(asset: EditorAssetSnapshot) {
+  return /特效|effect|vfx/u.test(getAssetHaystack(asset));
+}
+
+function isGameAsset(asset: EditorAssetSnapshot) {
+  return /游戏工程|game asset|game package|导出工程/u.test(getAssetHaystack(asset));
+}
+
+function addAssetToGroup(
+  groups: Map<string, ShowcaseAssetGroup>,
+  groupId: string,
+  asset: EditorAssetSnapshot,
+  label?: string,
+) {
+  const group = groups.get(groupId);
+  if (group) {
+    if (label && !group.label) {
+      group.label = label;
+    }
+    group.assets.push(asset);
+    return;
+  }
+
+  groups.set(groupId, {
+    id: groupId,
+    label,
+    assets: [asset],
+  });
+}
+
+function mergeAssetAliasGroups(
+  groups: Map<string, ShowcaseAssetGroup>,
+  asset: EditorAssetSnapshot,
+  label?: string,
+) {
+  const aliasGroups = getAssetReferenceKeys(asset)
+    .map((key) => groups.get(key))
+    .filter((group): group is ShowcaseAssetGroup => Boolean(group))
+    .filter(
+      (group, index, list) =>
+        list.findIndex((candidate) => candidate.id === group.id) === index,
+    );
+
+  const targetGroup = aliasGroups[0] ?? null;
+  if (!targetGroup) {
+    return null;
+  }
+
+  if (label && !targetGroup.label) {
+    targetGroup.label = label;
+  }
+
+  aliasGroups.slice(1).forEach((group) => {
+    if (!targetGroup.label && group.label) {
+      targetGroup.label = group.label;
+    }
+    group.assets.forEach((assetInGroup) => {
+      if (
+        !targetGroup.assets.some(
+          (existingAsset) => existingAsset.assetId === assetInGroup.assetId,
+        )
+      ) {
+        targetGroup.assets.push(assetInGroup);
+      }
+    });
+    groups.delete(group.id);
+  });
+
+  return targetGroup;
+}
+
+function sortGroupAssets(assets: EditorAssetSnapshot[]) {
+  return [...assets].sort((left, right) => {
+    const leftRank = isSpecAsset(left) || isCharacterAsset(left) || isAssetKind(left, ['ui-design'])
+      ? 0
+      : 1;
+    const rightRank =
+      isSpecAsset(right) || isCharacterAsset(right) || isAssetKind(right, ['ui-design'])
+        ? 0
+        : 1;
+    if (leftRank !== rightRank) {
+      return leftRank - rightRank;
+    }
+    return (left.createdAt ?? '').localeCompare(right.createdAt ?? '');
+  });
+}
+
+function groupPackAssets(assets: EditorAssetSnapshot[]) {
+  const groups = new Map<string, ShowcaseAssetGroup>();
+  assets.forEach((asset) => {
+    const specReference = findSpecReference(asset);
+    if (specReference) {
+      addAssetToGroup(groups, getReferenceKey(specReference), asset, specReference.label);
+      return;
+    }
+    if (isSpecAsset(asset)) {
+      addAssetToGroup(groups, getSelfAssetKey(asset), asset, asset.label);
+      return;
+    }
+    addAssetToGroup(groups, `standalone:${asset.assetId}`, asset, asset.label);
+  });
+  const specAssets = assets.filter(isSpecAsset);
+  specAssets.forEach((asset) => {
+    const group = mergeAssetAliasGroups(groups, asset, asset.label);
+    if (group && !group.assets.some((groupAsset) => groupAsset.assetId === asset.assetId)) {
+      group.assets.unshift(asset);
+    }
+  });
+  return [...groups.values()].map((group) => ({
+    ...group,
+    assets: sortGroupAssets(group.assets),
+  }));
+}
+
+function groupCharacterAssets(assets: EditorAssetSnapshot[]) {
+  const groups = new Map<string, ShowcaseAssetGroup>();
+  assets
+    .filter(
+      (asset) =>
+        isCharacterAsset(asset) ||
+        isCharacterAnimationAsset(asset) ||
+        /角色|character/u.test(getAssetHaystack(asset)),
+    )
+    .forEach((asset) => {
+      if (isCharacterAsset(asset)) {
+        addAssetToGroup(groups, getSelfAssetKey(asset), asset, asset.label);
+        return;
+      }
+      const characterReference = findCharacterReference(asset);
+      if (characterReference) {
+        addAssetToGroup(
+          groups,
+          getReferenceKey(characterReference),
+          asset,
+          characterReference.label,
+        );
+        return;
+      }
+      addAssetToGroup(groups, `standalone:${asset.assetId}`, asset, asset.label);
+  });
+  const characterAssets = assets.filter(isCharacterAsset);
+  characterAssets.forEach((asset) => {
+    const group = mergeAssetAliasGroups(groups, asset, asset.label);
+    if (group && !group.assets.some((groupAsset) => groupAsset.assetId === asset.assetId)) {
+      group.assets.unshift(asset);
+    }
+  });
+  return [...groups.values()].map((group) => ({
+    ...group,
+    assets: sortGroupAssets(group.assets),
+  }));
+}
+
+function groupUiAssets(assets: EditorAssetSnapshot[]) {
+  const groups = new Map<string, ShowcaseAssetGroup>();
+  assets
+    .filter((asset) => isUiAsset(asset) || /\bui\b|界面|图标|icon/u.test(getAssetHaystack(asset)))
+    .forEach((asset) => {
+      if (isAssetKind(asset, ['ui-design'])) {
+        addAssetToGroup(groups, getSelfAssetKey(asset), asset, asset.label);
+        return;
+      }
+      const uiReference = findUiDesignReference(asset) ?? findSpecReference(asset);
+      if (uiReference) {
+        addAssetToGroup(groups, getReferenceKey(uiReference), asset, uiReference.label);
+        return;
+      }
+      addAssetToGroup(groups, `standalone:${asset.assetId}`, asset, asset.label);
+  });
+  const uiDesignAssets = assets.filter((asset) => isAssetKind(asset, ['ui-design']));
+  uiDesignAssets.forEach((asset) => {
+    const group = mergeAssetAliasGroups(groups, asset, asset.label);
+    if (group && !group.assets.some((groupAsset) => groupAsset.assetId === asset.assetId)) {
+      group.assets.unshift(asset);
+    }
+  });
+  return [...groups.values()].map((group) => ({
+    ...group,
+    assets: sortGroupAssets(group.assets),
+  }));
+}
+
+function groupSingleAssets(
+  assets: EditorAssetSnapshot[],
+  predicate: (asset: EditorAssetSnapshot) => boolean,
+) {
+  return assets.filter(predicate).map((asset) => ({
+    id: `asset:${asset.assetId}`,
+    label: asset.label,
+    assets: [asset],
+  }));
+}
+
+function getGroupsForTab(assets: EditorAssetSnapshot[], tab: ShowcaseTabId) {
+  if (tab === 'packs') {
+    return groupPackAssets(assets);
+  }
+  if (tab === 'characters') {
+    return groupCharacterAssets(assets);
+  }
+  if (tab === 'ui') {
+    return groupUiAssets(assets);
+  }
+  if (tab === 'music') {
+    return groupSingleAssets(assets, isAudioAsset);
+  }
+  if (tab === 'marketing') {
+    return groupSingleAssets(assets, isMarketingAsset);
+  }
+  if (tab === 'effects') {
+    return groupSingleAssets(assets, isEffectAsset);
+  }
+  if (tab === 'scenes') {
+    return groupSingleAssets(assets, isSceneAsset);
+  }
+  return groupSingleAssets(assets, isGameAsset);
+}
+
+function resolveAssetPrompt(asset: EditorAssetSnapshot) {
+  const directPrompt = asset.prompt?.trim() || asset.actualPrompt?.trim();
+  if (directPrompt) {
+    return directPrompt;
+  }
+
+  const generationFields = asset.generationInputs?.fields ?? [];
+  const firstPromptField =
+    generationFields.find((field) => /提示词|描述|设定|prompt/u.test(field.title)) ??
+    generationFields[0];
+  return firstPromptField?.value?.trim() || UNKNOWN_META_VALUE;
+}
+
+function resolveGroupPrompt(assets: EditorAssetSnapshot[]) {
+  return assets.map(resolveAssetPrompt).find((value) => value !== UNKNOWN_META_VALUE) ?? UNKNOWN_META_VALUE;
+}
+
+function resolveAssetAuthor(
+  asset: EditorAssetSnapshot,
+  fallbackAuthorName?: string | null,
+) {
+  const record = assetRecord(asset);
+  for (const key of SHOWCASE_AUTHOR_KEYS) {
+    const value = normalizeText(record[key]);
+    if (value) {
+      return value;
+    }
+  }
+  return fallbackAuthorName?.trim() || UNKNOWN_META_VALUE;
+}
+
+function resolveGroupAuthor(
+  assets: EditorAssetSnapshot[],
+  fallbackAuthorName?: string | null,
+) {
+  return (
+    assets
+      .map((asset) => resolveAssetAuthor(asset, fallbackAuthorName))
+      .find((value) => value !== UNKNOWN_META_VALUE) ?? UNKNOWN_META_VALUE
+  );
+}
+
+function resolveAssetCost(asset: EditorAssetSnapshot) {
+  const record = assetRecord(asset);
+  for (const key of SHOWCASE_COST_KEYS) {
+    const value = normalizeNumber(record[key]);
+    if (value !== null && value >= 0) {
+      return value;
+    }
+  }
+  const inferredValue = inferAssetCost(asset);
+  if (inferredValue !== null && inferredValue >= 0) {
+    return inferredValue;
+  }
+  return null;
+}
+
+function getAssetCostKey(asset: EditorAssetSnapshot) {
+  if (asset.taskId?.trim()) {
+    return `task:${asset.taskId.trim()}`;
+  }
+  if (asset.objectKey?.trim()) {
+    return `object:${asset.objectKey.trim()}`;
+  }
+  return `asset:${asset.assetId}`;
+}
+
+function inferAssetCost(asset: EditorAssetSnapshot) {
+  const kind = normalizeAssetKind(asset);
+  const model = asset.model;
+  if (kind === 'sound-effect') {
+    return calculateEditorSoundEffectPrice(model ?? DEFAULT_SOUND_EFFECT_MODEL);
+  }
+  if (kind === 'background-music') {
+    return calculateEditorBackgroundMusicPrice(
+      model ?? DEFAULT_BACKGROUND_MUSIC_MODEL,
+    );
+  }
+  if (kind === 'character-animation') {
+    return calculateCharacterAnimationPrice(
+      model ?? CHARACTER_ANIMATION_MODEL,
+      inferVideoResolution(asset, ['480p', '720p'], '480p') as '480p' | '720p',
+      normalizeInt(asset.durationSeconds, 4, 4, 6),
+    );
+  }
+  if (kind === 'video' || isVideoAsset(asset)) {
+    return calculateEditorVideoPrice(
+      model ?? DEFAULT_VIDEO_MODEL,
+      inferVideoResolution(asset, ['480p', '720p', '1080p'], '480p') as
+        | '480p'
+        | '720p'
+        | '1080p',
+      normalizeInt(asset.durationSeconds, DEFAULT_VIDEO_DURATION_SECONDS, 4, 15),
+    );
+  }
+  if (asset.sourceType === 'generated' || kind) {
+    return calculateEditorImageGenerationPrice({ kind, model });
+  }
+  return null;
+}
+
+function inferVideoResolution(
+  asset: EditorAssetSnapshot,
+  allowedValues: string[],
+  fallback: string,
+) {
+  const fields = asset.generationInputs?.fields ?? [];
+  const fieldValue = fields
+    .flatMap((field) => [field.title, field.value])
+    .map((value) => value.trim())
+    .find((value) => /\b(?:480p|720p|1080p)\b/iu.test(value));
+  const matchedValue = fieldValue?.match(/\b(480p|720p|1080p)\b/iu)?.[1];
+  if (matchedValue && allowedValues.includes(matchedValue)) {
+    return matchedValue;
+  }
+  return fallback;
+}
+
+function resolveGroupCost(assets: EditorAssetSnapshot[]) {
+  const resolvedCosts = new Map<string, number>();
+  assets.forEach((asset) => {
+    const cost = resolveAssetCost(asset);
+    if (cost !== null) {
+      resolvedCosts.set(getAssetCostKey(asset), cost);
+    }
+  });
+  const costs = [...resolvedCosts.values()];
+  if (!costs.length) {
+    return UNKNOWN_META_VALUE;
+  }
+  const totalCost = costs.reduce((sum, value) => sum + value, 0);
+  return `${totalCost}泥点`;
+}
+
+function toAssetPreview(asset: EditorAssetSnapshot): ShowcaseAssetPreview {
+  return {
+    id: asset.assetId,
+    label: asset.label,
+    src: asset.imageSrc,
+    objectKey: asset.objectKey,
+    mediaType: resolveAssetMediaType(asset),
+    width: asset.width,
+    height: asset.height,
+  };
+}
+
+function toLibraryShowcaseItem(
+  group: ShowcaseAssetGroup,
+  fallbackAuthorName?: string | null,
+): ShowcaseAssetItem | null {
+  const sortedAssets = sortGroupAssets(group.assets);
+  const previews = sortedAssets.map(toAssetPreview).filter((preview) => preview.src.trim());
+  if (!previews.length) {
+    return null;
+  }
+  const primaryAsset = sortedAssets[0];
+  const label =
+    group.label?.trim() ||
+    primaryAsset?.label?.trim() ||
+    `${previews[0]?.label ?? '素材'}组合`;
+  return {
+    id: group.id,
+    label,
+    previews,
+    prompt: resolveGroupPrompt(sortedAssets),
+    author: resolveGroupAuthor(sortedAssets, fallbackAuthorName),
+    cost: resolveGroupCost(sortedAssets),
+  };
+}
+
+function matchesPublicGalleryTab(
+  entry: PlatformPublicGalleryCard,
+  tab: ShowcaseTabId,
+) {
+  if (tab === 'packs') {
+    return true;
+  }
+  if (tab === 'games') {
+    return false;
+  }
+
+  const themeTags = 'themeTags' in entry ? entry.themeTags : [];
+  const haystack = [
+    entry.worldName,
+    entry.subtitle,
+    entry.summaryText,
+    entry.sourceType,
+    ...themeTags,
+  ]
+    .join(' ')
+    .toLowerCase();
+
+  if (tab === 'characters') {
+    return /角色|character|rpg|visual/u.test(haystack);
+  }
+  if (tab === 'ui') {
+    return /\bui\b|界面|图标|icon|puzzle/u.test(haystack);
+  }
+  if (tab === 'music') {
+    return /音乐|音效|audio|music|sound/u.test(haystack);
+  }
+  if (tab === 'marketing') {
+    return /美宣|宣传|poster|video|视觉|visual/u.test(haystack);
+  }
+  if (tab === 'effects') {
+    return /特效|effect|vfx/u.test(haystack);
+  }
+  if (tab === 'scenes') {
+    return /场景|scene|background|world|rpg/u.test(haystack);
+  }
+  return false;
+}
+
+function toPublicGalleryShowcaseItems(
+  entries: PlatformPublicGalleryCard[],
+  tab: ShowcaseTabId,
+): ShowcaseAssetItem[] {
+  const usedImageSrcs = new Set<string>();
+  const items: ShowcaseAssetItem[] = [];
+
+  entries
+    .filter((entry) => matchesPublicGalleryTab(entry, tab))
+    .forEach((entry) => {
+      const coverImageSrc = resolvePlatformWorldCoverImage(entry).trim();
+      const imageCandidates = [
+        ...resolvePlatformWorldCoverSlides(entry).map((slide) => ({
+          src: slide.imageSrc.trim(),
+          label: slide.label?.trim() || entry.worldName,
+        })),
+        { src: coverImageSrc, label: entry.worldName },
+      ].filter((candidate) => candidate.src);
+
+      imageCandidates.forEach((candidate, index) => {
+        if (usedImageSrcs.has(candidate.src)) {
+          return;
+        }
+        usedImageSrcs.add(candidate.src);
+        items.push({
+          id: `public:${entry.sourceType}:${entry.profileId}:${index}`,
+          label: index === 0 ? entry.worldName : `${entry.worldName} ${index + 1}`,
+          previews: [
+            {
+              id: `public:${entry.profileId}:${index}`,
+              label: candidate.label,
+              src: candidate.src,
+              mediaType: 'image',
+              width: index === 0 ? 720 : 640,
+              height: index === 0 ? 480 : 720,
+            },
+          ],
+          prompt: entry.summaryText || entry.subtitle || UNKNOWN_META_VALUE,
+          author: resolvePlatformWorkAuthorDisplayName(entry),
+          cost: UNKNOWN_META_VALUE,
+        });
+      });
+    });
+
+  return items.slice(0, 36);
+}
+
+export function buildCreationShowcaseItems({
+  activeTab,
+  assetLibrary,
+  publicGalleryEntries,
+  fallbackAuthorName,
+}: {
+  activeTab: ShowcaseTabId;
+  assetLibrary: EditorAssetLibrarySnapshot | null;
+  publicGalleryEntries: PlatformPublicGalleryCard[];
+  fallbackAuthorName?: string | null;
+}) {
+  const libraryItems = getGroupsForTab(assetLibrary?.assets ?? [], activeTab)
+    .map((group) => toLibraryShowcaseItem(group, fallbackAuthorName))
+    .filter((item): item is ShowcaseAssetItem => item !== null);
+
+  if (libraryItems.length > 0) {
+    return libraryItems.slice(0, 36);
+  }
+
+  return toPublicGalleryShowcaseItems(publicGalleryEntries, activeTab);
+}
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index e19369555..17e7dcd7c 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -420,18 +420,26 @@ export function hydrateCanvasGenerationDialog(
       typeof snapshot.videoModel === 'string'
         ? snapshot.videoModel
         : undefined,
-    videoAspectRatio: stringOrUndefined(snapshot.videoAspectRatio),
+    videoAspectRatio: videoAspectRatioOrUndefined(snapshot.videoAspectRatio),
     videoResolution:
-      snapshot.videoResolution === '480p' || snapshot.videoResolution === '720p'
+      snapshot.videoResolution === '480p' ||
+      snapshot.videoResolution === '720p' ||
+      snapshot.videoResolution === '1080p'
         ? snapshot.videoResolution
         : undefined,
     videoDurationSeconds:
-      snapshot.videoDurationSeconds === 4 ||
-      snapshot.videoDurationSeconds === 5
-        ? snapshot.videoDurationSeconds
+      typeof snapshot.videoDurationSeconds === 'number'
+        ? Math.min(15, Math.max(4, Math.round(snapshot.videoDurationSeconds)))
         : undefined,
     videoMode: snapshot.videoMode === 'std' ? 'std' : undefined,
-    videoSound: snapshot.videoSound === 'off' ? 'off' : undefined,
+    videoSound:
+      snapshot.videoSound === 'on' || snapshot.videoSound === 'off'
+        ? snapshot.videoSound
+        : undefined,
+    videoWebSearchEnabled:
+      typeof snapshot.videoWebSearchEnabled === 'boolean'
+        ? snapshot.videoWebSearchEnabled
+        : undefined,
     characterAnimationResolution:
       snapshot.characterAnimationResolution === '480p' ||
       snapshot.characterAnimationResolution === '720p'
@@ -618,13 +626,24 @@ function inferAudioAssetKindFromLabel(label: string): CanvasAssetKind {
 }
 
 export type CanvasLayerResourceMetadata = {
+  resourceId?: string | null;
   imageSrc: string;
   objectKey?: string | null;
   assetObjectId?: string | null;
+  width?: number | null;
+  height?: number | null;
+  sourceType?: string | null;
   durationSeconds?: number | null;
   sourceResourceId?: string | null;
   assetKind?: string | null;
+  prompt?: string | null;
+  actualPrompt?: string | null;
+  model?: string | null;
+  provider?: string | null;
+  taskId?: string | null;
   generationInputs?: unknown;
+  createdAt?: string | null;
+  updatedAt?: string | null;
 };
 
 export function normalizeAssetLibrary(library: EditorAssetLibrarySnapshot) {
@@ -699,6 +718,17 @@ export function stringOrUndefined(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : undefined;
 }
 
+function videoAspectRatioOrUndefined(value: unknown) {
+  return value === '16:9' ||
+    value === '9:16' ||
+    value === '1:1' ||
+    value === '4:3' ||
+    value === '3:4' ||
+    value === '21:9'
+    ? value
+    : undefined;
+}
+
 function hydrateCharacterAnimationResult(
   value: unknown,
 ): EditorCharacterAnimationGenerationResult | undefined {
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index c8c4a700e..7fcb13f5b 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -4,7 +4,10 @@ import type {
   EditorCharacterAnimationGenerationResult,
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
+  EditorVideoAspectRatio,
   EditorVideoModel,
+  EditorVideoResolution,
+  EditorVideoSoundMode,
 } from '../../services/image-editor/editorProjectClient';
 
 export type CanvasSourceType = 'uploaded' | 'generated' | 'mock_generated';
@@ -201,11 +204,12 @@ export type GenerateDialogState = {
   uiDesignSpecReference?: CharacterReferenceImage | null;
   imageModel?: string;
   videoModel?: EditorVideoModel;
-  videoAspectRatio?: string;
-  videoResolution?: '480p' | '720p';
-  videoDurationSeconds?: 4 | 5;
+  videoAspectRatio?: EditorVideoAspectRatio;
+  videoResolution?: EditorVideoResolution;
+  videoDurationSeconds?: number;
   videoMode?: 'std';
-  videoSound?: 'off';
+  videoSound?: EditorVideoSoundMode;
+  videoWebSearchEnabled?: boolean;
   characterAnimationResolution?: EditorCharacterAnimationResolution;
   characterAnimationRatio?: EditorCharacterAnimationRatio;
   characterAnimationFrameCount?: EditorCharacterAnimationFrameCount;
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index f6641bd49..48b2d330a 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -493,7 +493,7 @@ export function ImageCanvasEditorView() {
       setViewport,
     ],
   );
-  const { projectId, appendCanvasLayersWithResources } =
+  const { projectId, appendCanvasLayersWithResources, applyProjectSnapshot } =
     useImageCanvasProjectPersistence({
       refs: projectPersistenceRefs,
       setters: projectPersistenceSetters,
@@ -615,6 +615,7 @@ export function ImageCanvasEditorView() {
     projectId,
     assetFolderId: activeUploadFolderId,
     upsertGeneratedAsset,
+    applyProjectSnapshot,
   });
   const {
     setQuickEditPanel,
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 5a6325ba2..1f4d0f55c 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -491,7 +491,9 @@ describe('ImageCanvasGenerationComposerView', () => {
 
     const panel = screen.getByRole('dialog', { name: '生成视频' });
     expect(
-      within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }),
+      within(panel).getByRole('button', {
+        name: '视频参数 16:9 · 4秒 · 480p',
+      }),
     ).toBeTruthy();
     expect(
       within(panel).getByRole('button', { name: '模型 Seedance 2.0 Fast' }),
@@ -501,13 +503,18 @@ describe('ImageCanvasGenerationComposerView', () => {
     );
 
     fireEvent.click(
-      within(panel).getByRole('button', { name: '视频参数 16:9 · 4秒 · 480p' }),
+      within(panel).getByRole('button', {
+        name: '视频参数 16:9 · 4秒 · 480p',
+      }),
     );
     const paramsPanel = screen.getByRole('menu', {
       name: '视频参数选项',
     });
-    fireEvent.click(within(paramsPanel).getByRole('button', { name: '时长 5秒' }));
+    fireEvent.change(within(paramsPanel).getByRole('slider', { name: '视频时长' }), {
+      target: { value: '5' },
+    });
     fireEvent.click(within(paramsPanel).getByRole('button', { name: '清晰度 720p' }));
+    fireEvent.click(within(paramsPanel).getByRole('button', { name: '静音' }));
 
     expect(
       screen.getByRole('menu', { name: '视频参数选项' }),
@@ -517,7 +524,14 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(screen.getByLabelText('当前视频占位').textContent).toBe(
       '-160:0:1280:720:1280:720',
     );
-    expect(screen.getByRole('button', { name: '视频参数 16:9 · 5秒 · 720p' })).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: '视频参数 16:9 · 5秒 · 720p' }),
+    ).toBeTruthy();
+    expect(
+      within(paramsPanel)
+        .getByRole('button', { name: '清晰度 1080p' })
+        .hasAttribute('disabled'),
+    ).toBe(true);
     expect(screen.getByRole('button', { name: '生成视频' }).textContent).toBe(
       '生成100泥点',
     );
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index ab4c22fd4..3ab848b96 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -41,11 +41,17 @@ import {
   DEFAULT_BACKGROUND_MUSIC_MODEL,
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
+  DEFAULT_VIDEO_ASPECT_RATIO,
+  DEFAULT_VIDEO_DURATION_SECONDS,
+  DEFAULT_VIDEO_SOUND,
+  DEFAULT_VIDEO_WEB_SEARCH_ENABLED,
+  EDITOR_VIDEO_ASPECT_RATIO_OPTIONS,
   EDITOR_SOUND_EFFECT_MODEL_OPTIONS,
-  EDITOR_VIDEO_DURATION_OPTIONS,
-  EDITOR_VIDEO_MODEL_OPTIONS,
-  resizeGenerationPlaceholderToVideoSelection,
   SOUND_EFFECT_DURATION_OPTIONS,
+  EDITOR_VIDEO_MODEL_OPTIONS,
+  EDITOR_VIDEO_RESOLUTION_OPTIONS,
+  VIDEO_MODEL_SEEDANCE_2_FAST,
+  resizeGenerationPlaceholderToVideoSelection,
   SPEC_TYPE_LABEL,
 } from './ImageCanvasGenerationModel';
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
@@ -277,8 +283,14 @@ function ImageCanvasVideoGenerationComposerView({
   const [openPanel, setOpenPanel] = useState<'params' | 'model' | null>(null);
   const paramsButtonRef = useRef<HTMLButtonElement | null>(null);
   const modelButtonRef = useRef<HTMLButtonElement | null>(null);
+  const normalizeVideoDuration = (value: number) =>
+    Math.min(15, Math.max(4, Math.round(value)));
   const resolution = dialog.videoResolution ?? '480p';
-  const durationSeconds = dialog.videoDurationSeconds ?? 4;
+  const durationSeconds = normalizeVideoDuration(
+    dialog.videoDurationSeconds ?? DEFAULT_VIDEO_DURATION_SECONDS,
+  );
+  const soundMode = dialog.videoSound ?? DEFAULT_VIDEO_SOUND;
+  const aspectRatio = dialog.videoAspectRatio ?? DEFAULT_VIDEO_ASPECT_RATIO;
   const currentModel =
     EDITOR_VIDEO_MODEL_OPTIONS.find(
       (item) => item.value === dialog.videoModel,
@@ -319,6 +331,10 @@ function ImageCanvasVideoGenerationComposerView({
   const updateVideoModel = (model: GenerateDialogState['videoModel']) => {
     updateVideoDialog({
       videoModel: model,
+      videoResolution:
+        model === VIDEO_MODEL_SEEDANCE_2_FAST && dialog.videoResolution === '1080p'
+          ? '720p'
+          : dialog.videoResolution,
       ...(isSeedanceVideoModel(model) ? {} : { generationReferences: [] }),
     });
   };
@@ -384,7 +400,7 @@ function ImageCanvasVideoGenerationComposerView({
             <PlatformInlineOptionButton
               ref={paramsButtonRef}
               className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-              aria-label={`视频参数 16:9 · ${durationSeconds}秒 · ${resolution}`}
+              aria-label={`视频参数 ${aspectRatio} · ${durationSeconds}秒 · ${resolution}`}
               aria-expanded={openPanel === 'params'}
               disabled={isGenerating}
               trailingIcon={<ChevronDown className="h-3 w-3" />}
@@ -394,7 +410,8 @@ function ImageCanvasVideoGenerationComposerView({
                 )
               }
             >
-              16:9 · {durationSeconds}秒 · {resolution}
+              {aspectRatio} · {durationSeconds}秒 · {resolution} ·{' '}
+              {soundMode === 'off' ? '静音' : '有声'}
             </PlatformInlineOptionButton>
             {openPanel === 'params'
               ? renderEditorPortal(
@@ -413,46 +430,46 @@ function ImageCanvasVideoGenerationComposerView({
                         <span className="image-canvas-editor__option-popover-title">
                           比例
                         </span>
-                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
-                          <VideoOptionChoice
-                            selected
-                            disabled={isGenerating}
-                            className="image-canvas-editor__option-popover-choice--ratio"
-                            ariaLabel="比例 16:9"
-                          >
-                            <span
-                              className="image-canvas-editor__ratio-wireframe"
-                              data-ratio="16:9"
-                              aria-hidden="true"
-                            />
-                            <span>16:9</span>
-                          </VideoOptionChoice>
+                        <div className="image-canvas-editor__option-popover-items">
+                          {EDITOR_VIDEO_ASPECT_RATIO_OPTIONS.map((option) => (
+                            <VideoOptionChoice
+                              key={option}
+                              selected={aspectRatio === option}
+                              disabled={isGenerating}
+                              ariaLabel={`比例 ${option}`}
+                              onClick={() =>
+                                updateVideoDialog({
+                                  videoAspectRatio: option,
+                                })
+                              }
+                            >
+                              {option}
+                            </VideoOptionChoice>
+                          ))}
                         </div>
                       </section>
                       <section className="image-canvas-editor__option-popover-section">
                         <span className="image-canvas-editor__option-popover-title">
                           时长
                         </span>
-                        <div className="image-canvas-editor__option-popover-items">
-                          {EDITOR_VIDEO_DURATION_OPTIONS.map((option) => {
-                            const nextDuration =
-                              Number(option.value) === 5 ? 5 : 4;
-                            return (
-                              <VideoOptionChoice
-                                key={option.value}
-                                selected={durationSeconds === nextDuration}
-                                disabled={isGenerating}
-                                ariaLabel={`时长 ${option.label}`}
-                                onClick={() =>
-                                  updateVideoDialog({
-                                    videoDurationSeconds: nextDuration,
-                                  })
-                                }
-                              >
-                                {option.label}
-                              </VideoOptionChoice>
-                            );
-                          })}
+                        <div className="image-canvas-editor__video-duration-slider">
+                          <input
+                            type="range"
+                            min={4}
+                            max={15}
+                            step={1}
+                            value={durationSeconds}
+                            disabled={isGenerating}
+                            aria-label="视频时长"
+                            onChange={(event) =>
+                              updateVideoDialog({
+                                videoDurationSeconds: normalizeVideoDuration(
+                                  Number(event.target.value),
+                                ),
+                              })
+                            }
+                          />
+                          <span>{durationSeconds}秒</span>
                         </div>
                       </section>
                       <section className="image-canvas-editor__option-popover-section">
@@ -460,19 +477,50 @@ function ImageCanvasVideoGenerationComposerView({
                           清晰度
                         </span>
                         <div className="image-canvas-editor__option-popover-items">
-                          {(['480p', '720p'] as const).map((option) => (
-                            <VideoOptionChoice
-                              key={option}
-                              selected={resolution === option}
-                              disabled={isGenerating}
-                              ariaLabel={`清晰度 ${option}`}
-                              onClick={() =>
-                                updateVideoDialog({ videoResolution: option })
-                              }
-                            >
-                              {option}
-                            </VideoOptionChoice>
-                          ))}
+                          {EDITOR_VIDEO_RESOLUTION_OPTIONS.map((option) => {
+                            const available =
+                              currentModel.value !== VIDEO_MODEL_SEEDANCE_2_FAST ||
+                              option !== '1080p';
+                            return (
+                              <VideoOptionChoice
+                                key={option}
+                                selected={resolution === option}
+                                disabled={isGenerating || !available}
+                                ariaLabel={`清晰度 ${option}`}
+                                onClick={() =>
+                                  available
+                                    ? updateVideoDialog({
+                                        videoResolution: option,
+                                      })
+                                    : undefined
+                                }
+                              >
+                                {option}
+                              </VideoOptionChoice>
+                            );
+                          })}
+                        </div>
+                      </section>
+                      <section className="image-canvas-editor__option-popover-section">
+                        <span className="image-canvas-editor__option-popover-title">
+                          声音
+                        </span>
+                        <div className="image-canvas-editor__video-toggle-row">
+                          <button
+                            type="button"
+                            className="image-canvas-editor__video-toggle"
+                            aria-pressed={soundMode === 'off'}
+                            disabled={isGenerating}
+                            onClick={() =>
+                              updateVideoDialog({
+                                videoSound:
+                                  soundMode === 'off' ? 'on' : 'off',
+                              })
+                            }
+                          >
+                            <span aria-hidden="true" />
+                            <strong>静音</strong>
+                          </button>
                         </div>
                       </section>
                     </div>
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index de4e0099e..20f4757e4 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -186,7 +186,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
         videoResolution: '480p',
         videoDurationSeconds: 4,
         videoMode: 'std',
-        videoSound: 'off',
+        videoSound: 'on',
+        videoWebSearchEnabled: true,
         placeholder: {
           x: 53,
           y: 120,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index bc1f24598..b05b7f638 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -24,7 +24,11 @@ import {
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
   DEFAULT_SPEC_FORM_VALUES,
+  DEFAULT_VIDEO_ASPECT_RATIO,
+  DEFAULT_VIDEO_DURATION_SECONDS,
   DEFAULT_VIDEO_MODEL,
+  DEFAULT_VIDEO_SOUND,
+  DEFAULT_VIDEO_WEB_SEARCH_ENABLED,
   EDITOR_IMAGE_DIMENSION_OPTIONS,
   ICON_DESCRIPTION_LIMIT,
   inferEditorImageAspectRatio,
@@ -322,7 +326,7 @@ export function createVideoGenerationDialogDraft({
 }): Omit<CanvasGenerationDialogState, 'id'> {
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
   const placeholderSize = resolveEditorVideoGenerationPixelSize({
-    aspectRatio: '16:9',
+    aspectRatio: DEFAULT_VIDEO_ASPECT_RATIO,
     resolution: '480p',
   });
   return {
@@ -332,11 +336,12 @@ export function createVideoGenerationDialogDraft({
     composerOpen: true,
     generationReferences: [],
     videoModel: DEFAULT_VIDEO_MODEL,
-    videoAspectRatio: '16:9',
+    videoAspectRatio: DEFAULT_VIDEO_ASPECT_RATIO,
     videoResolution: '480p',
-    videoDurationSeconds: 4,
+    videoDurationSeconds: DEFAULT_VIDEO_DURATION_SECONDS,
     videoMode: 'std',
-    videoSound: 'off',
+    videoSound: DEFAULT_VIDEO_SOUND,
+    videoWebSearchEnabled: DEFAULT_VIDEO_WEB_SEARCH_ENABLED,
     placeholder: {
       x: worldCenter.x - placeholderSize.width / 2,
       y: worldCenter.y - placeholderSize.height / 2,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index f8019bea1..7b4b3b6a8 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -269,9 +269,10 @@ export function resolveEditorVideoGenerationPixelSize({
   resolution,
 }: {
   aspectRatio: string | null | undefined;
-  resolution: '480p' | '720p' | string | null | undefined;
+  resolution: '480p' | '720p' | '1080p' | string | null | undefined;
 }): EditorImageFrameSize {
-  const height = resolution === '720p' ? 720 : 480;
+  const height =
+    resolution === '1080p' ? 1080 : resolution === '720p' ? 720 : 480;
   return {
     width: resolveEvenVideoWidth(height, aspectRatio),
     height,
@@ -323,18 +324,22 @@ export const DEFAULT_BACKGROUND_MUSIC_MODEL = BACKGROUND_MUSIC_MODEL_SUNO;
 const EDITOR_VIDEO_RESOLUTION_RATE_CONFIG = {
   '480p': EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond['480p'],
   '720p': EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond['720p'],
+  '1080p': EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond['720p'] * 2,
 } as const;
 const EDITOR_VIDEO_STANDARD_RESOLUTION_RATE_CONFIG = {
   '480p': 12,
   '720p': 24,
+  '1080p': 48,
 } as const;
 const EDITOR_VIDEO_KLING_RESOLUTION_RATE_CONFIG = {
   '480p': 15,
   '720p': 30,
+  '1080p': 60,
 } as const;
 const EDITOR_VIDEO_KLING_OMNI_RESOLUTION_RATE_CONFIG = {
   '480p': 20,
   '720p': 40,
+  '1080p': 80,
 } as const;
 export const EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG = {
   [VIDEO_MODEL_SEEDANCE_2_FAST]: EDITOR_VIDEO_RESOLUTION_RATE_CONFIG,
@@ -403,9 +408,21 @@ export const EDITOR_VIDEO_MODEL_OPTIONS = [
   { label: 'Kling 3.0 Omni', value: VIDEO_MODEL_KLING_3_OMNI },
 ] as const;
 export const EDITOR_VIDEO_DURATION_OPTIONS = [
-  { label: '4秒', value: '4' },
-  { label: '5秒', value: '5' },
+  4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
 ] as const;
+export const EDITOR_VIDEO_ASPECT_RATIO_OPTIONS = [
+  '16:9',
+  '9:16',
+  '1:1',
+  '4:3',
+  '3:4',
+  '21:9',
+] as const;
+export const EDITOR_VIDEO_RESOLUTION_OPTIONS = ['480p', '720p', '1080p'] as const;
+export const DEFAULT_VIDEO_ASPECT_RATIO = '16:9';
+export const DEFAULT_VIDEO_DURATION_SECONDS = 4;
+export const DEFAULT_VIDEO_SOUND = 'on';
+export const DEFAULT_VIDEO_WEB_SEARCH_ENABLED = true;
 
 export const DEFAULT_SPEC_FORM_VALUES: Record<
   SpecGenerationType,
@@ -651,7 +668,7 @@ export function calculateCharacterAnimationPrice(
 
 export function calculateEditorVideoPrice(
   model: string | null | undefined,
-  resolution: '480p' | '720p',
+  resolution: '480p' | '720p' | '1080p',
   durationSeconds: number,
 ) {
   const normalizedModel = (model ?? DEFAULT_VIDEO_MODEL).trim();
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 954c3d6e6..f708b9373 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -37,7 +37,11 @@ import {
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
   DEFAULT_SPEC_FORM_VALUES,
+  DEFAULT_VIDEO_ASPECT_RATIO,
+  DEFAULT_VIDEO_DURATION_SECONDS,
   DEFAULT_VIDEO_MODEL,
+  DEFAULT_VIDEO_SOUND,
+  DEFAULT_VIDEO_WEB_SEARCH_ENABLED,
   ICON_DESCRIPTION_LIMIT,
   normalizeEditorImageModel,
   resolveCharacterAnimationSourceImageSrc,
@@ -350,8 +354,15 @@ export function buildImageGenerationSubmissionPlan({
 
   if (dialog.mode === 'video') {
     const resolution = dialog.videoResolution ?? '480p';
-    const durationSeconds = dialog.videoDurationSeconds ?? 4;
+    const durationSeconds =
+      typeof dialog.videoDurationSeconds === 'number'
+        ? Math.min(15, Math.max(4, Math.round(dialog.videoDurationSeconds)))
+        : DEFAULT_VIDEO_DURATION_SECONDS;
     const model = dialog.videoModel ?? DEFAULT_VIDEO_MODEL;
+    const aspectRatio = dialog.videoAspectRatio ?? DEFAULT_VIDEO_ASPECT_RATIO;
+    const sound = dialog.videoSound ?? DEFAULT_VIDEO_SOUND;
+    const webSearchEnabled =
+      dialog.videoWebSearchEnabled ?? DEFAULT_VIDEO_WEB_SEARCH_ENABLED;
     const seedanceReferences = isSeedanceVideoModel(model)
       ? buildSeedanceVideoReferenceInput(dialog.generationReferences ?? [])
       : {
@@ -365,11 +376,12 @@ export function buildImageGenerationSubmissionPlan({
       input: {
         prompt: normalizedPrompt,
         model,
-        aspectRatio: '16:9',
+        aspectRatio,
         durationSeconds,
         resolution,
         mode: 'std',
-        sound: 'off',
+        sound,
+        webSearchEnabled,
         priceMudPoints: calculateEditorVideoPrice(
           model,
           resolution,
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index a35816958..3f2739fea 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -823,6 +823,34 @@ describe('ImageCanvasWorldView', () => {
     );
   });
 
+  it('keeps the layer type menu scrollable and closes it when clicking outside', () => {
+    const layer = createLayer({ assetKind: 'character' });
+    const documentWheel = vi.fn();
+    document.addEventListener('wheel', documentWheel);
+
+    try {
+      renderWorldView({ layers: [layer] });
+
+      fireEvent.click(screen.getByRole('button', { name: '素材标签：角色' }));
+
+      const menu = screen.getByRole('menu', { name: '选择素材标签' });
+      fireEvent.wheel(menu, { deltaY: 120 });
+
+      expect(documentWheel).not.toHaveBeenCalled();
+      expect(screen.getByRole('menu', { name: '选择素材标签' })).toBeTruthy();
+
+      fireEvent.pointerDown(menu);
+      expect(screen.getByRole('menu', { name: '选择素材标签' })).toBeTruthy();
+
+      fireEvent.pointerDown(document.body);
+      expect(
+        screen.queryByRole('menu', { name: '选择素材标签' }),
+      ).toBeNull();
+    } finally {
+      document.removeEventListener('wheel', documentWheel);
+    }
+  });
+
   it('hides resolution and duration text for focused audio generation frames', () => {
     const dialog = createGenerationDialog({
       id: 'dialog-audio',
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index 759b834b5..709a0465f 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -651,6 +651,8 @@ export function ImageCanvasWorldView({
   const [openLayerKindMenuId, setOpenLayerKindMenuId] = useState<string | null>(
     null,
   );
+  const openLayerKindTriggerRef = useRef<HTMLSpanElement | null>(null);
+  const openLayerKindMenuRef = useRef<HTMLDivElement | null>(null);
   const visibleLayers = useMemo(
     () =>
       layers
@@ -660,6 +662,34 @@ export function ImageCanvasWorldView({
     [layers],
   );
 
+  useEffect(() => {
+    if (!openLayerKindMenuId) {
+      return undefined;
+    }
+
+    const closeKindMenuWhenClickingOutside = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (
+        openLayerKindMenuRef.current?.contains(target) ||
+        openLayerKindTriggerRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setOpenLayerKindMenuId(null);
+    };
+
+    document.addEventListener('pointerdown', closeKindMenuWhenClickingOutside);
+    return () => {
+      document.removeEventListener(
+        'pointerdown',
+        closeKindMenuWhenClickingOutside,
+      );
+    };
+  }, [openLayerKindMenuId]);
+
   return (
     <div
       className="image-canvas-editor__world"
@@ -755,6 +785,11 @@ export function ImageCanvasWorldView({
                 )}
                 {kindLabel ? (
                   <span
+                    ref={
+                      openLayerKindMenuId === layer.id
+                        ? openLayerKindTriggerRef
+                        : undefined
+                    }
                     role="button"
                     tabIndex={0}
                     aria-label={`素材标签：${kindLabel}`}
@@ -812,6 +847,7 @@ export function ImageCanvasWorldView({
               </LayerElement>
               {openLayerKindMenuId === layer.id ? (
                 <div
+                  ref={openLayerKindMenuRef}
                   className="image-canvas-editor__kind-menu-anchor"
                   style={{
                     left: layer.x + layer.width,
@@ -824,6 +860,8 @@ export function ImageCanvasWorldView({
                     label="选择素材标签"
                     placement="bottom-end"
                     className="image-canvas-editor__kind-menu"
+                    onWheelCapture={(event) => event.stopPropagation()}
+                    onWheel={(event) => event.stopPropagation()}
                   >
                     {CANVAS_ASSET_KIND_TAG_OPTIONS.map((option) => (
                       <PlatformFloatingMenuItem
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index d3409b1c0..e2be81057 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -118,11 +118,17 @@ function SubmissionWorkflowHarness({
   initialQuickEditPanel = null,
   initialCharacterAnimationPanel = null,
   initialLayers = [createLayer()],
+  projectId = undefined,
+  applyProjectSnapshot = undefined,
 }: {
   initialDialog?: GenerateDialogState | null;
   initialQuickEditPanel?: QuickEditPanelState | null;
   initialCharacterAnimationPanel?: CharacterAnimationPanelState | null;
   initialLayers?: CanvasLayer[];
+  projectId?: string | null;
+  applyProjectSnapshot?: Parameters<
+    typeof useImageCanvasGenerationSubmissionWorkflow
+  >[0]['applyProjectSnapshot'];
 }) {
   const [layers, setLayers] = useState<CanvasLayer[]>(initialLayers);
   const [activeTool, setActiveTool] = useState<CanvasTool>('generate');
@@ -182,6 +188,9 @@ function SubmissionWorkflowHarness({
     rememberImageModel: (imageModel) => {
       rememberedImageModelRef.current = imageModel;
     },
+    projectId,
+    assetFolderId: projectId ? 'project' : undefined,
+    applyProjectSnapshot,
   });
 
   return (
@@ -619,7 +628,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     expect(screen.getByTestId('fit-count').textContent).toBe('1');
   });
 
-  it('uses the latest moved canvas placeholder when a generation completes', async () => {
+  it('uses the latest moved canvas placeholder for local-only generation fallback', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ width: 512, height: 512 }),
     );
@@ -657,6 +666,144 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
+  it('passes canvas completion context and refreshes from the backend project snapshot', async () => {
+    const applyProjectSnapshot = vi.fn();
+    generateEditorImageMock.mockResolvedValueOnce({
+      ...createGenerated({
+        width: 1024,
+        height: 1024,
+        prompt: '银发游侠',
+      }),
+      project: {
+        projectId: 'editor-project-1',
+        title: '角色项目',
+        viewport: { x: 12, y: 24, scale: 1.5 },
+        layers: [
+          {
+            layerId: 'layer-editor-resource-character',
+            resourceId: 'editor-resource-character',
+          },
+        ],
+        resources: [],
+        updatedAt: '2026-06-21T12:16:22.000Z',
+      },
+    });
+    render(
+      <SubmissionWorkflowHarness
+        projectId="editor-project-1"
+        applyProjectSnapshot={applyProjectSnapshot}
+        initialDialog={{
+          id: 'dialog-character',
+          mode: 'character',
+          prompt: '  银发游侠  ',
+          status: 'idle',
+          composerOpen: true,
+          imageModel: 'gpt-image-2',
+          placeholder: {
+            x: 200,
+            y: 160,
+            width: 420,
+            height: 560,
+            originalWidth: 1024,
+            originalHeight: 1536,
+          },
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '设置初始对话' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交当前生成' }));
+
+    await waitFor(() => {
+      expect(generateEditorImageMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          prompt: '银发游侠',
+          kind: 'character',
+          projectId: 'editor-project-1',
+          assetKind: 'character',
+          assetFolderId: 'project',
+          canvasCompletion: {
+            dialogId: 'dialog-character',
+            title: '角色形象 1',
+            placeholder: {
+              x: 200,
+              y: 160,
+              width: 420,
+              height: 560,
+              originalWidth: 1024,
+              originalHeight: 1536,
+            },
+          },
+        }),
+      );
+    });
+    await waitFor(() => {
+      expect(applyProjectSnapshot).toHaveBeenCalledWith(
+        expect.objectContaining({
+          projectId: 'editor-project-1',
+          title: '角色项目',
+        }),
+      );
+    });
+    expect(screen.getByTestId('layers').textContent).not.toContain(
+      'layer-generated-1',
+    );
+  });
+
+  it('does not add a local layer when project generation returns without a backend snapshot', async () => {
+    generateEditorImageMock.mockResolvedValueOnce(
+      createGenerated({
+        width: 1024,
+        height: 1024,
+        prompt: '银发游侠',
+        project: null,
+      }),
+    );
+    render(
+      <SubmissionWorkflowHarness
+        projectId="editor-project-1"
+        initialDialog={{
+          id: 'dialog-character',
+          mode: 'character',
+          prompt: '银发游侠',
+          status: 'idle',
+          composerOpen: true,
+          imageModel: 'gpt-image-2',
+          placeholder: {
+            x: 200,
+            y: 160,
+            width: 420,
+            height: 560,
+            originalWidth: 1024,
+            originalHeight: 1536,
+          },
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '设置初始对话' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交当前生成' }));
+
+    await waitFor(() => {
+      expect(generateEditorImageMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          projectId: 'editor-project-1',
+          canvasCompletion: expect.objectContaining({
+            dialogId: 'dialog-character',
+          }),
+        }),
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('dialog').textContent).toBe(
+        'character:idle:open:-:placeholder:-',
+      );
+    });
+    expect(screen.getByTestId('layers').textContent).not.toContain(
+      'layer-generated-1',
+    );
+  });
+
   it('submits publication detail materials as one billable editor image and appends the result', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index b90fcd4f3..5db05a110 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -10,7 +10,10 @@ import {
   resolveEditorImageReferenceDataUrl,
   resolveEditorImageReferenceDataUrlForGeneration,
 } from '../../services/image-editor/editorImageReference';
-import type { EditorAssetSnapshot } from '../../services/image-editor/editorProjectClient';
+import type {
+  EditorAssetSnapshot,
+  EditorProjectSnapshot,
+} from '../../services/image-editor/editorProjectClient';
 import {
   editEditorImage,
   extractEditorUiDesignAssets,
@@ -109,6 +112,7 @@ type GenerationSubmissionWorkflowOptions = {
   projectId?: string | null;
   assetFolderId?: string | null;
   upsertGeneratedAsset?: (asset: EditorAssetSnapshot) => void;
+  applyProjectSnapshot?: (project: EditorProjectSnapshot) => void;
 };
 
 async function normalizePublicationReferenceImages(
@@ -165,6 +169,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   projectId,
   assetFolderId,
   upsertGeneratedAsset,
+  applyProjectSnapshot,
 }: GenerationSubmissionWorkflowOptions) {
   const addGeneratedLayersToCanvas = useCallback(
     (nextLayers: CanvasLayer[]) => {
@@ -998,10 +1003,39 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generationInputs: submissionPlan.result.generationInputs,
             assetFolderId,
             assetLabel: submissionPlan.result.title,
+            ...(canvasDialog && projectId
+              ? {
+                  canvasCompletion: {
+                    dialogId: canvasDialog.id,
+                    title: submissionPlan.result.title,
+                    placeholder: getGeneratingDialogPlaceholder(dialog),
+                  },
+                }
+              : {}),
           });
           if (submissionPlan.rememberImageModel) {
             rememberImageModel(submissionPlan.rememberImageModel);
           }
+          if (generated.project && applyProjectSnapshot) {
+            applyProjectSnapshot(generated.project);
+            if (generated.asset) {
+              upsertGeneratedAsset?.(generated.asset);
+            }
+            return;
+          }
+          if (canvasDialog && projectId) {
+            updateCanvasGenerationDialogById(canvasDialog.id, (currentDialog) =>
+              currentDialog.generatedLayerId
+                ? currentDialog
+                : {
+                    ...currentDialog,
+                    status: 'idle',
+                    composerOpen: true,
+                    errorMessage: undefined,
+                  },
+            );
+            return;
+          }
           addGeneratedResultLayer(generated, {
             frame: getGeneratingDialogPlaceholder(dialog),
             assetKind: submissionPlan.result.assetKind,
@@ -1040,8 +1074,11 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       rememberImageModel,
       projectId,
       assetFolderId,
+      applyProjectSnapshot,
       setGenerateDialog,
       updateCanvasGenerationDialogById,
+      upsertGeneratedAsset,
+      viewport,
     ],
   );
 
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 38d7dc666..06329c9ee 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -15,7 +15,10 @@ import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
-import type { EditorAssetSnapshot } from '../../services/image-editor/editorProjectClient';
+import type {
+  EditorAssetSnapshot,
+  EditorProjectSnapshot,
+} from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
   CanvasLayer,
@@ -91,6 +94,7 @@ type ImageCanvasGenerationSurfaceOptions = {
   projectId?: string | null;
   assetFolderId?: string | null;
   upsertGeneratedAsset?: (asset: EditorAssetSnapshot) => void;
+  applyProjectSnapshot?: (project: EditorProjectSnapshot) => void;
 };
 
 function renderEditorPortal(node: ReactNode) {
@@ -167,6 +171,7 @@ export function useImageCanvasGenerationSurface({
   projectId,
   assetFolderId,
   upsertGeneratedAsset,
+  applyProjectSnapshot,
 }: ImageCanvasGenerationSurfaceOptions) {
   const toolbarOptionCloseTimerRef = useRef<ReturnType<
     typeof setTimeout
@@ -200,6 +205,7 @@ export function useImageCanvasGenerationSurface({
     projectId,
     assetFolderId,
     upsertGeneratedAsset,
+    applyProjectSnapshot,
   });
 
   const activeGenerationLayer = activeCanvasGenerationDialog?.generatedLayerId
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 7ddaadcfa..bfc0d7678 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -10,7 +10,10 @@ import {
   useState,
 } from 'react';
 
-import type { EditorAssetSnapshot } from '../../services/image-editor/editorProjectClient';
+import type {
+  EditorAssetSnapshot,
+  EditorProjectSnapshot,
+} from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
   CanvasLayer,
@@ -187,6 +190,7 @@ type GenerationWorkflowOptions = {
   projectId?: string | null;
   assetFolderId?: string | null;
   upsertGeneratedAsset?: (asset: EditorAssetSnapshot) => void;
+  applyProjectSnapshot?: (project: EditorProjectSnapshot) => void;
 };
 
 export function useImageCanvasGenerationWorkflow({
@@ -218,6 +222,7 @@ export function useImageCanvasGenerationWorkflow({
   projectId,
   assetFolderId,
   upsertGeneratedAsset,
+  applyProjectSnapshot,
 }: GenerationWorkflowOptions) {
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
   const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
@@ -976,6 +981,7 @@ export function useImageCanvasGenerationWorkflow({
     projectId,
     assetFolderId,
     upsertGeneratedAsset,
+    applyProjectSnapshot,
   });
 
   const setEffectiveCharacterAnimationPanel: Dispatch<
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
index 8de81221f..de86a8a85 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
@@ -178,6 +178,21 @@ function ProjectPersistenceHarness({
       >
         append character
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          persistence.appendCanvasLayersWithResources([
+            createLayer('layer-private-object', {
+              src: 'https://signed.example.test/private.png?expires=1',
+              objectKey: 'generated-character-drafts/editor/private.png',
+              title: '私有对象素材',
+              sourceType: 'generated',
+            }),
+          ]);
+        }}
+      >
+        append private object
+      </button>
       <button
         type="button"
         onClick={() => {
@@ -391,6 +406,35 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('creates project resources from objectKey without posting heavy signed URLs', async () => {
+    createEditorProjectResourceMock.mockResolvedValueOnce({
+      resourceId: 'resource-private-object',
+      projectId: 'editor-project-default',
+      imageSrc: '/generated-character-drafts/editor/private.png',
+      objectKey: 'generated-character-drafts/editor/private.png',
+      width: 320,
+      height: 240,
+      sourceType: 'generated',
+    });
+
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    act(() => {
+      screen.getByRole('button', { name: 'append private object' }).click();
+    });
+
+    await waitFor(() => {
+      expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
+        'editor-project-default',
+        expect.objectContaining({
+          imageSrc: '/generated-character-drafts/editor/private.png',
+          objectKey: 'generated-character-drafts/editor/private.png',
+        }),
+      );
+    });
+  });
+
   it('saves generation dialogs in the project layout and restores them on load', async () => {
     const savedDialog: CanvasGenerationDialogState = {
       id: 'generation-dialog-1',
@@ -531,6 +575,71 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('keeps backend layout as the project truth when loading generating dialogs', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-default',
+      title: '角色画布项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          itemType: 'generation-dialog',
+          layerId: 'generation-dialog:generation-dialog-4',
+          resourceId: 'generation-dialog:generation-dialog-4',
+          dialog: {
+            id: 'generation-dialog-4',
+            mode: 'character',
+            prompt: '挥舞武器',
+            status: 'generating',
+            composerOpen: false,
+            imageModel: 'gpt-image-2',
+            placeholder: {
+              x: 2851,
+              y: -521,
+              width: 1024,
+              height: 1024,
+              originalWidth: 1024,
+              originalHeight: 1024,
+            },
+          },
+        },
+      ],
+      resources: [
+        {
+          resourceId: 'editor-resource-character',
+          projectId: 'editor-project-default',
+          imageSrc: '/api/assets/read-url?objectKey=character.png',
+          objectKey:
+            'generated-character-drafts/editor/character-images/vector-engine-edit/image.png',
+          assetObjectId: 'asset-object-character',
+          width: 1254,
+          height: 1254,
+          sourceType: 'generated',
+          prompt: '挥舞武器',
+          actualPrompt: '挥舞武器',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'vector-engine-edit-1',
+          assetKind: 'character',
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '挥舞武器' }],
+            references: [],
+          },
+          updatedAt: '2026-06-21T12:16:22.000Z',
+        },
+      ],
+      updatedAt: '2026-06-21T12:15:00.000Z',
+    });
+
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    expect(screen.getByTestId('layers').textContent).toBe('');
+    expect(screen.getByTestId('generation-dialogs').textContent).toBe(
+      'generation-dialog-4:挥舞武器:2851',
+    );
+    expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
+  });
+
   it('does not load protected project data before login is available', () => {
     render(<ProjectPersistenceHarness canAccessProtectedData={false} />);
 
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.ts b/src/components/image-editor/useImageCanvasProjectPersistence.ts
index d492728f3..a132588dc 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.ts
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.ts
@@ -6,6 +6,7 @@ import {
   loadEditorProject,
   loadOrCreateRecentEditorProject,
   saveEditorProjectLayout,
+  type EditorProjectSnapshot,
 } from '../../services/image-editor/editorProjectClient';
 import {
   type CanvasLayerResourceMetadata,
@@ -58,6 +59,14 @@ function isLocalProjectResourceId(resourceId: string) {
   return resourceId.startsWith('local-');
 }
 
+function resolveProjectResourceCreateImageSrc(layer: CanvasLayer) {
+  const objectKey = layer.objectKey?.trim();
+  if (objectKey) {
+    return `/${objectKey.replace(/^\/+/u, '')}`;
+  }
+  return layer.src;
+}
+
 export function useImageCanvasProjectPersistence({
   refs,
   setters,
@@ -100,7 +109,7 @@ export function useImageCanvasProjectPersistence({
         return;
       }
       createEditorProjectResource(readyProjectId, {
-        imageSrc: layer.src,
+        imageSrc: resolveProjectResourceCreateImageSrc(layer),
         objectKey: layer.objectKey,
         assetObjectId: layer.assetObjectId,
         width: layer.originalWidth,
@@ -166,6 +175,66 @@ export function useImageCanvasProjectPersistence({
     [openEditorLoginModal, refs, setLayers],
   );
 
+  const applyProjectSnapshot = useCallback(
+    (project: EditorProjectSnapshot) => {
+      projectIdRef.current = project.projectId;
+      setProjectId(project.projectId);
+      const nextProjectTitle = project.title?.trim() || '未命名画布';
+      setProjectTitle(nextProjectTitle);
+      setProjectRenameValue(nextProjectTitle);
+      setViewport(project.viewport);
+      refs.viewportRef.current = project.viewport;
+      const resourcesById = new Map<string, CanvasLayerResourceMetadata>(
+        project.resources.map((resource) => [
+          resource.resourceId,
+          {
+            imageSrc: resource.imageSrc,
+            resourceId: resource.resourceId,
+            objectKey: resource.objectKey,
+            assetObjectId: resource.assetObjectId,
+            width: resource.width,
+            height: resource.height,
+            sourceType: resource.sourceType,
+            prompt: resource.prompt,
+            actualPrompt: resource.actualPrompt,
+            model: resource.model,
+            provider: resource.provider,
+            taskId: resource.taskId,
+            durationSeconds: resource.durationSeconds,
+            sourceResourceId: resource.sourceResourceId,
+            assetKind: resource.assetKind,
+            generationInputs: resource.generationInputs,
+            createdAt: resource.createdAt,
+            updatedAt: resource.updatedAt,
+          },
+        ]),
+      );
+      const { layerItems, generationDialogs } = splitCanvasLayoutItems(
+        project.layers,
+        resourcesById,
+      );
+      const hydratedLayers = layerItems
+        .map((layer) => hydrateLayer(layer, resourcesById))
+        .filter((layer): layer is CanvasLayer => Boolean(layer));
+      setLayerCounter(hydratedLayers.length);
+      refs.layersRef.current = hydratedLayers;
+      setLayers(hydratedLayers);
+      selectSingleLayer(hydratedLayers[0]?.id ?? null);
+      refs.canvasGenerationDialogsRef.current = generationDialogs;
+      restoreCanvasGenerationDialogs(generationDialogs);
+    },
+    [
+      refs,
+      restoreCanvasGenerationDialogs,
+      selectSingleLayer,
+      setLayerCounter,
+      setLayers,
+      setProjectRenameValue,
+      setProjectTitle,
+      setViewport,
+    ],
+  );
+
   const appendCanvasLayersWithResources = useCallback(
     (nextLayers: CanvasLayer[]) => {
       if (!nextLayers.length) {
@@ -204,43 +273,11 @@ export function useImageCanvasProjectPersistence({
         if (cancelled) {
           return;
         }
-        projectIdRef.current = project.projectId;
-        setProjectId(project.projectId);
-        const nextProjectTitle = project.title?.trim() || '未命名画布';
-        setProjectTitle(nextProjectTitle);
-        setProjectRenameValue(nextProjectTitle);
+        applyProjectSnapshot(project);
         const pendingLayers = pendingProjectResourceLayersRef.current.splice(0);
         pendingLayers.forEach(({ layer, options }) => {
           createProjectResourceForLayer(layer, options);
         });
-        setViewport(project.viewport);
-        const resourcesById = new Map<string, CanvasLayerResourceMetadata>(
-          project.resources.map((resource) => [
-            resource.resourceId,
-            {
-              imageSrc: resource.imageSrc,
-              objectKey: resource.objectKey,
-              assetObjectId: resource.assetObjectId,
-              durationSeconds: resource.durationSeconds,
-              sourceResourceId: resource.sourceResourceId,
-              assetKind: resource.assetKind,
-              generationInputs: resource.generationInputs,
-            },
-          ]),
-        );
-        const { layerItems, generationDialogs } = splitCanvasLayoutItems(
-          project.layers,
-          resourcesById,
-        );
-        const hydratedLayers = layerItems
-          .map((layer) => hydrateLayer(layer, resourcesById))
-          .filter((layer): layer is CanvasLayer => Boolean(layer));
-        if (hydratedLayers.length > 0) {
-          setLayerCounter(hydratedLayers.length);
-          setLayers(hydratedLayers);
-          selectSingleLayer(hydratedLayers[0]?.id ?? null);
-        }
-        restoreCanvasGenerationDialogs(generationDialogs);
         setIsProjectReady(true);
       })
       .catch((error: unknown) => {
@@ -260,15 +297,9 @@ export function useImageCanvasProjectPersistence({
     };
   }, [
     canAccessProtectedData,
+    applyProjectSnapshot,
     createProjectResourceForLayer,
     openEditorLoginModal,
-    restoreCanvasGenerationDialogs,
-    selectSingleLayer,
-    setLayerCounter,
-    setLayers,
-    setProjectRenameValue,
-    setProjectTitle,
-    setViewport,
   ]);
 
   useEffect(() => {
@@ -314,5 +345,6 @@ export function useImageCanvasProjectPersistence({
     projectIdRef,
     createProjectResourceForLayer,
     appendCanvasLayersWithResources,
+    applyProjectSnapshot,
   };
 }
diff --git a/src/index.css b/src/index.css
index dcae4f179..ca9625088 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3617,10 +3617,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border: 1px solid rgba(220, 189, 163, 0.78);
   border-radius: 1rem;
   background: rgba(255, 254, 251, 0.88);
+  padding: 0;
+  color: inherit;
+  text-align: left;
   box-shadow: 0 16px 32px rgba(124, 72, 35, 0.1);
+  cursor: zoom-in;
+}
+
+.creation-landing__asset-card:hover {
+  border-color: rgba(195, 104, 48, 0.46);
+  box-shadow: 0 20px 40px rgba(124, 72, 35, 0.14);
 }
 
 .creation-landing__asset-preview {
+  position: relative;
   display: grid;
   min-height: 9.5rem;
   max-height: 23rem;
@@ -3629,6 +3639,64 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: linear-gradient(180deg, #fffdfa, #fff4ea);
 }
 
+.creation-landing__asset-preview--bundle {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0.18rem;
+  padding: 0.18rem;
+}
+
+.creation-landing__asset-preview-tile {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 5rem;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.66);
+}
+
+.creation-landing__asset-preview-more {
+  position: absolute;
+  right: 0.65rem;
+  bottom: 0.65rem;
+  display: inline-flex;
+  min-width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(44, 31, 22, 0.72);
+  color: #fffdf9;
+  font-size: 0.78rem;
+  font-weight: 850;
+}
+
+.creation-landing__asset-audio-preview {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 8rem;
+  place-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background:
+    linear-gradient(135deg, rgba(244, 187, 129, 0.4), rgba(255, 247, 236, 0.92)),
+    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 42%);
+  color: #9a5428;
+}
+
+.creation-landing__asset-audio-preview svg {
+  width: 2.6rem;
+  height: 2.6rem;
+}
+
+.creation-landing__asset-audio-preview audio {
+  width: min(100%, 28rem);
+}
+
 .creation-landing__asset-meta {
   display: grid;
   gap: 0.55rem;
@@ -3675,6 +3743,215 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   white-space: nowrap;
 }
 
+.creation-landing__showcase-modal-overlay {
+  padding: 0.5rem;
+  background: rgba(11, 8, 6, 0.82);
+}
+
+.creation-landing__showcase-modal-panel {
+  width: min(100vw - 1rem, 88rem);
+  height: min(96vh, 64rem);
+  max-height: calc(100vh - 1rem);
+  overflow: hidden;
+  border-radius: 1.2rem;
+  background: #100d0b;
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
+}
+
+.creation-landing__showcase-modal-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  padding: 0;
+  overflow: hidden;
+}
+
+.creation-landing__showcase-modal {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(186, 117, 65, 0.18), transparent 32%),
+    #100d0b;
+}
+
+.creation-landing__showcase-modal-close {
+  z-index: 4;
+}
+
+.creation-landing__showcase-modal-stage {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  min-height: 0;
+  overflow: hidden;
+  place-items: center;
+  padding: clamp(1rem, 3vw, 2.5rem);
+}
+
+.creation-landing__showcase-current {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  place-items: center;
+}
+
+.creation-landing__showcase-current > img,
+.creation-landing__showcase-current > video,
+.creation-landing__showcase-current .creation-landing__asset-audio-preview {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0.9rem;
+}
+
+.creation-landing__showcase-current > img,
+.creation-landing__showcase-current > video {
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  object-position: center;
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
+}
+
+.creation-landing__showcase-current > .creation-landing__showcase-media {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+
+.creation-landing__showcase-dock {
+  position: relative;
+  z-index: 3;
+  display: grid;
+  gap: 0.85rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(24, 18, 14, 0.94);
+  backdrop-filter: none;
+  padding: 0.85rem;
+}
+
+.creation-landing__showcase-dock-meta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.44fr);
+  gap: 0.75rem 1rem;
+  align-items: start;
+  color: #fff8ef;
+}
+
+.creation-landing__showcase-dock-meta h3 {
+  margin: 0;
+  overflow: hidden;
+  color: #fff8ef;
+  font-size: 1rem;
+  font-weight: 860;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.creation-landing__showcase-dock-meta p {
+  grid-column: 1 / 2;
+  display: -webkit-box;
+  min-height: 2.6em;
+  overflow: hidden;
+  margin: 0;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: rgba(255, 248, 239, 0.72);
+  font-size: 0.82rem;
+  font-weight: 620;
+  line-height: 1.32;
+}
+
+.creation-landing__showcase-dock-meta dl {
+  display: grid;
+  grid-column: 2 / 3;
+  grid-row: 1 / span 2;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.creation-landing__showcase-dock-meta div {
+  min-width: 0;
+}
+
+.creation-landing__showcase-dock-meta dt {
+  color: rgba(255, 248, 239, 0.5);
+  font-size: 0.68rem;
+  font-weight: 780;
+}
+
+.creation-landing__showcase-dock-meta dd {
+  overflow: hidden;
+  margin: 0;
+  color: #fff8ef;
+  font-size: 0.82rem;
+  font-weight: 820;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.creation-landing__showcase-thumbs {
+  display: flex;
+  gap: 0.55rem;
+  overflow-x: auto;
+  padding-bottom: 0.1rem;
+}
+
+.creation-landing__showcase-thumb {
+  display: grid;
+  flex: 0 0 6.5rem;
+  min-width: 0;
+  gap: 0.38rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.38rem;
+  color: rgba(255, 248, 239, 0.72);
+  font-size: 0.68rem;
+  font-weight: 760;
+  text-align: center;
+}
+
+.creation-landing__showcase-thumb--active {
+  border-color: rgba(242, 184, 124, 0.8);
+  background: rgba(242, 184, 124, 0.18);
+  color: #fff8ef;
+}
+
+.creation-landing__showcase-thumb-media {
+  display: grid;
+  height: 4.1rem;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 0.52rem;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.creation-landing__showcase-thumb-media svg {
+  width: 1.45rem;
+  height: 1.45rem;
+}
+
+.creation-landing__showcase-thumb > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media (max-width: 900px) {
   .creation-landing__hero,
   .creation-landing__section {
@@ -3718,6 +3995,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   .creation-landing__asset-waterfall {
     column-count: 2;
   }
+
+  .creation-landing__showcase-modal-panel {
+    width: calc(100vw - 0.7rem);
+    height: calc(100vh - 0.7rem);
+  }
+
+  .creation-landing__showcase-dock-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .creation-landing__showcase-dock-meta p,
+  .creation-landing__showcase-dock-meta dl {
+    grid-column: auto;
+    grid-row: auto;
+  }
 }
 
 @media (max-width: 560px) {
@@ -3763,6 +4055,29 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   .creation-landing__asset-waterfall {
     column-count: 1;
   }
+
+  .creation-landing__showcase-modal-overlay {
+    padding: 0;
+  }
+
+  .creation-landing__showcase-modal-panel {
+    width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .creation-landing__showcase-modal-stage {
+    padding: 3.2rem 0.75rem 0.75rem;
+  }
+
+  .creation-landing__showcase-dock {
+    padding: 0.72rem;
+  }
+
+  .creation-landing__showcase-thumb {
+    flex-basis: 5.7rem;
+  }
 }
 
 .image-canvas-editor {
@@ -6311,6 +6626,78 @@ button.image-canvas-editor__reference-chip:disabled {
   accent-color: #4f46e5;
 }
 
+.image-canvas-editor__video-duration-slider {
+  display: grid;
+  grid-template-columns: minmax(7rem, 1fr) 3.6rem;
+  align-items: center;
+  gap: 0.56rem;
+}
+
+.image-canvas-editor__video-duration-slider input[type='range'] {
+  width: 100%;
+  accent-color: #111827;
+}
+
+.image-canvas-editor__video-duration-slider span {
+  color: #111827;
+  font-size: 0.82rem;
+  font-weight: 760;
+  text-align: right;
+}
+
+.image-canvas-editor__video-toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.46rem;
+}
+
+.image-canvas-editor__video-toggle {
+  display: inline-flex;
+  min-height: 2.25rem;
+  align-items: center;
+  gap: 0.48rem;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 0 0.78rem;
+  color: #111827;
+  font-size: 0.82rem;
+  font-weight: 760;
+}
+
+.image-canvas-editor__video-toggle span {
+  position: relative;
+  width: 1.7rem;
+  height: 0.96rem;
+  border-radius: 999px;
+  background: #cbd5e1;
+}
+
+.image-canvas-editor__video-toggle span::after {
+  position: absolute;
+  top: 0.16rem;
+  left: 0.16rem;
+  width: 0.64rem;
+  height: 0.64rem;
+  border-radius: 999px;
+  background: #ffffff;
+  content: '';
+  transition: transform 0.16s ease;
+}
+
+.image-canvas-editor__video-toggle[aria-pressed='true'] {
+  border-color: #202124;
+  box-shadow: inset 0 0 0 1px #202124;
+}
+
+.image-canvas-editor__video-toggle[aria-pressed='true'] span {
+  background: #111827;
+}
+
+.image-canvas-editor__video-toggle[aria-pressed='true'] span::after {
+  transform: translateX(0.74rem);
+}
+
 .image-canvas-editor__audio-bpm-control input[type='number'] {
   min-width: 0;
   border: 1px solid rgba(15, 23, 42, 0.1);
diff --git a/src/routing/appPageRoutes.ts b/src/routing/appPageRoutes.ts
index 9ffec8560..0d8b349dc 100644
--- a/src/routing/appPageRoutes.ts
+++ b/src/routing/appPageRoutes.ts
@@ -101,6 +101,20 @@ export function resolveSelectionStageFromPath(
   return ROUTE_STAGE_BY_PATH.get(normalizeAppPath(pathname)) ?? 'platform';
 }
 
+export function resolveInitialSelectionStageFromPath(
+  pathname: string,
+  isDesktopLayout: boolean,
+): SelectionStage {
+  const normalizedPath = normalizeAppPath(pathname);
+  const selectionStage = resolveSelectionStageFromPath(pathname);
+
+  if (normalizedPath === '/' && isDesktopLayout) {
+    return 'creation-home';
+  }
+
+  return selectionStage;
+}
+
 export function resolvePathForSelectionStage(stage: SelectionStage) {
   return APP_STAGE_ROUTES[stage] ?? APP_STAGE_ROUTES.platform;
 }
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 86233f691..88f124dd0 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -612,6 +612,69 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('passes canvas completion context to editor image generation', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      imageSrc: 'data:image/png;base64,character',
+      width: 1024,
+      height: 1536,
+      sourceType: 'generated',
+      prompt: '角色设定',
+      actualPrompt: '角色设定',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'vector-character-1',
+      project: null,
+    });
+
+    await generateEditorImage({
+      prompt: '角色设定',
+      kind: 'character',
+      projectId: 'editor-project-1',
+      assetKind: 'character',
+      canvasCompletion: {
+        dialogId: 'generation-dialog-1',
+        title: '角色形象 1',
+        placeholder: {
+          x: 120,
+          y: 140,
+          width: 420,
+          height: 560,
+          originalWidth: 1024,
+          originalHeight: 1536,
+        },
+      },
+    });
+
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/images/generations',
+      expect.objectContaining({
+        body: JSON.stringify({
+          prompt: '角色设定',
+          kind: 'character',
+          projectId: 'editor-project-1',
+          assetKind: 'character',
+          canvasCompletion: {
+            dialogId: 'generation-dialog-1',
+            title: '角色形象 1',
+            placeholder: {
+              x: 120,
+              y: 140,
+              width: 420,
+              height: 560,
+              originalWidth: 1024,
+              originalHeight: 1536,
+            },
+          },
+        }),
+      }),
+      '生成图片失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('generates icon spritesheets through the dedicated backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       spritesheetImageSrc: 'data:image/png;base64,sheet',
@@ -963,6 +1026,7 @@ describe('editorProjectClient', () => {
           resolution: '480p',
           mode: 'std',
           sound: 'off',
+          webSearchEnabled: true,
           priceMudPoints: 100,
         }),
       }),
@@ -1022,6 +1086,7 @@ describe('editorProjectClient', () => {
           resolution: '720p',
           mode: 'std',
           sound: 'off',
+          webSearchEnabled: true,
           priceMudPoints: 100,
           referenceImageSrcs: ['data:image/png;base64,image'],
           referenceVideoSrcs: [
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 14749f76c..656f37efc 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -99,6 +99,7 @@ export type EditorAssetSnapshot = {
   provider?: string | null;
   taskId?: string | null;
   durationSeconds?: number | null;
+  sourceResourceId?: string | null;
   assetKind?: string | null;
   generationInputs?: EditorAssetGenerationInputs | null;
   createdAt?: string;
@@ -129,6 +130,20 @@ export type EditorImageGenerationInput = {
   assetFolderId?: string | null;
   assetLabel?: string | null;
   sourceResourceId?: string | null;
+  canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
+};
+
+export type EditorCanvasGenerationCompletionInput = {
+  dialogId: string;
+  title: string;
+  placeholder: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    originalWidth: number;
+    originalHeight: number;
+  };
 };
 
 export type EditorIconSpritesheetGenerationInput = {
@@ -178,6 +193,7 @@ export type EditorImageGenerationResult = {
   taskId: string;
   resource?: EditorProjectResourceSnapshot | null;
   asset?: EditorAssetSnapshot | null;
+  project?: EditorProjectSnapshot | null;
 };
 
 export type EditorIconSpritesheetIconResult = {
@@ -259,14 +275,19 @@ export type EditorVideoModel =
   | 'veo3.1'
   | 'veo3.1-fast';
 
+export type EditorVideoResolution = '480p' | '720p' | '1080p';
+export type EditorVideoSoundMode = 'on' | 'off';
+export type EditorVideoAspectRatio = '16:9' | '9:16' | '1:1' | '4:3' | '3:4' | '21:9';
+
 export type EditorVideoGenerationInput = {
   prompt: string;
   model: EditorVideoModel;
-  aspectRatio: '16:9';
-  durationSeconds: 4 | 5;
-  resolution: '480p' | '720p';
+  aspectRatio: EditorVideoAspectRatio;
+  durationSeconds: number;
+  resolution: EditorVideoResolution;
   mode: 'std';
-  sound: 'off';
+  sound: EditorVideoSoundMode;
+  webSearchEnabled?: boolean;
   priceMudPoints: number;
   referenceImageSrcs?: string[];
   referenceVideoSrcs?: string[];
@@ -618,6 +639,9 @@ export async function generateEditorImage(input: EditorImageGenerationInput) {
       ...(input.sourceResourceId
         ? { sourceResourceId: input.sourceResourceId }
         : {}),
+      ...(input.canvasCompletion
+        ? { canvasCompletion: input.canvasCompletion }
+        : {}),
     }),
     '生成图片失败',
     {
@@ -739,6 +763,7 @@ export async function generateEditorVideo(input: EditorVideoGenerationInput) {
       resolution: input.resolution,
       mode: input.mode,
       sound: input.sound,
+      webSearchEnabled: input.webSearchEnabled ?? true,
       priceMudPoints: input.priceMudPoints,
       ...(input.referenceImageSrcs?.length
         ? { referenceImageSrcs: input.referenceImageSrcs }