From c836ac604dad2c7179bdc297405c4cf20b577034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Mon, 22 Jun 2026 13:45:20 +0800
Subject: [PATCH] Treat character-action generations as video & UI tweaks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Handle character-action generation results as real video assets: use backend previewVideoPath as layer src, set mediaType="video" and assetKind="character-animation", and store the first frame only as thumbnail/poster. Update docs to document the new behavior and preserve backend frame extraction/green-screen workflows. Update UI/UX: compact parameter labels (e.g. "16:9·1K"), quick-edit treats original image as an implicit last reference (hidden from the reference bar) and allows editable bottom capsules, and ensure exports preserve true media file types. Change upload toolbar icon to Upload and add tests to cover the icon and video-layer behavior; also add serialization/hydration test for video thumbnails and adjust many integration/unit tests to reflect new labels, sizes and generation semantics. Files touched include multiple docs under docs/, edited components and tests under src/components/image-editor/, and minor stylesheet updates.
---
 docs/project-memory/shared-memory/pitfalls.md |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   9 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |  16 +-
 ...辑器】画板角色形象生成入口设计-2026-06-15.md |   4 +-
 ...CanvasBasicGenerationComposerView.test.tsx |   8 +-
 .../ImageCanvasBottomToolbarView.test.tsx     |  25 ++
 .../ImageCanvasBottomToolbarView.tsx          |   4 +-
 ...CanvasEditorGenerationIntegration.test.tsx |  52 ++--
 .../ImageCanvasEditorModel.test.ts            |  46 +++
 .../image-editor/ImageCanvasEditorModel.ts    |   4 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |   2 +
 .../ImageCanvasExportModel.test.ts            |   7 +
 .../ImageCanvasGenerationComposerView.tsx     |   5 +-
 .../ImageCanvasGenerationDialogModel.test.ts  |   9 +-
 .../ImageCanvasGenerationDialogModel.ts       |  44 ++-
 ...eCanvasGenerationImageOptionsView.test.tsx |  12 +-
 .../ImageCanvasGenerationImageOptionsView.tsx |  29 +-
 .../ImageCanvasGenerationLayerModel.test.ts   |   8 +-
 .../ImageCanvasGenerationLayerModel.ts        |  26 +-
 .../ImageCanvasGenerationModel.test.ts        |  19 +-
 .../ImageCanvasGenerationModel.ts             |  64 +++-
 .../ImageCanvasGenerationSubmissionModel.ts   |   6 +-
 .../ImageCanvasMetadataModalView.test.tsx     |  18 ++
 .../ImageCanvasMetadataModalView.tsx          |   7 +-
 .../ImageCanvasQuickEditPanelView.test.tsx    |  59 ++--
 .../ImageCanvasQuickEditPanelView.tsx         | 274 ++++++++++++++++--
 ...ageCanvasSelectedLayerToolbarView.test.tsx |  11 +-
 .../ImageCanvasSelectedLayerToolbarView.tsx   |  14 +-
 ...mageCanvasSpecGenerationPanelView.test.tsx |   4 +-
 .../ImageCanvasSpecGenerationPanelView.tsx    |  17 +-
 ...anvasGenerationSubmissionWorkflow.test.tsx | 167 ++++++++++-
 ...ImageCanvasGenerationSubmissionWorkflow.ts | 170 ++++++++++-
 .../useImageCanvasGenerationWorkflow.test.tsx |  11 +-
 src/index.css                                 |  12 +-
 34 files changed, 987 insertions(+), 184 deletions(-)

diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 0463c496f..da76e56df 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -15,6 +15,14 @@
 - 关联：相关文件、文档、提交或 Issue
 ```
 
+## 图片画布角色动作结果不能把首帧当主媒体
+
+- 现象：画板里 `生成角色动作` 返回后显示成一张不可播放图片，点击下载或素材 ZIP 导出时拿到的也是 PNG，而不是动作视频。
+- 原因：后端已经生成 `previewVideoPath`，并继续执行抽帧、绿幕去背和帧素材 OSS 落盘；前端落层时却把 `frames[0].imageSrc` 当作图层主 `src`，且没有设置 `mediaType: "video"`，导致预览和导出都按图片处理。
+- 处理：角色动作结果图层主 `src` 必须使用 `previewVideoPath`，`mediaType` 固定为 `video`，`assetKind` 固定为 `character-animation`；首帧透明 PNG 只写入 `thumbnailSrc`，用于 `<video poster>` 和后续动作素材二次生成源。不得移除后端原有视频生成、抽帧、绿幕去背和帧落盘流程。
+- 验证：`ImageCanvasGenerationLayerModel` 应断言动作结果 `src` 为预览视频且 `thumbnailSrc` 为首帧；画布集成测试应出现 `<video controls poster=...>`；导出模型应按 `mediaType="video"` 输出 mp4/webm/mov 等真实视频扩展名。
+- 关联：`src/components/image-editor/ImageCanvasGenerationLayerModel.ts`、`src/components/image-editor/ImageCanvasWorldView.tsx`、`src/components/image-editor/ImageCanvasExportModel.ts`、`server-rs/crates/api-server/src/character_animation_assets.rs`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`。
+
 ## Vidu 文生音频线上网关可能要求 sound 字段
 
 - 现象：画板点击 `生成游戏音效` 后，请求返回 `Failed to deserialize the JSON body into the target type: missing field sound`。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index c6e6da28c..eb4431763 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` 路径；快速编辑按原图模型提交；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板底部用与可编辑面板一致的比例 / 尺寸 / 模型胶囊按钮展示固定参数，但按钮为禁用态，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。宣发素材必须按 workflow 同时提交 `outputSize`、`aspectRatio` 和 `imageSize`，其中游戏首图为 `720x540 / 4:3`、详情单图为 `720x1280 / 9:16`、运营海报为 `1280x720 / 16:9`；生成回填图层优先使用生成占位的 `originalWidth/originalHeight`，即使上游回包尺寸漂移也不得把宣发素材卡片变成随机 `1:1` 或 `4:3`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后走同一图片生成 BFF，并在原图右侧生成一张新图；普通图层重绘作为 `quick-edit` 参考图提交，角色图层重绘必须按 `kind: "character"` 提交，继续套用角色生成器提示词限定、透明 PNG 后处理和角色资产持久化。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和重绘在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
-- 快速编辑面板对齐其它生成类面板：首行支持额外参考图，最多 8 张；原图自动作为最后一张参考图展示和提交。尺寸、模型沿用原图配置，只以禁用态参数胶囊展示，不可点击修改。提交前将提示词里对原图的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写为最后一张原图编号，例如额外 1 张参考图时写成 `图2`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
+- 图片生成 / 修改统一经 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` 删除。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频`、`生成UI设计图` 和 `生成角色动作`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。
 
@@ -93,8 +93,8 @@
 - 生成器快照刷新后必须恢复；待生成、生成中、失败和已生成后跟随成品图层的生成器都不能因为刷新丢失输入、参数、参考图或占位框位置。宣发素材生成器刷新后必须继续显示正确的卡片类型、游戏名、分类、描述和已绑定参考图。
 - 画布多选语义必须同时覆盖普通图层和仍显示占位框的生成器对象：Shift 点选或框选可把生成器加入当前选择；拖动任一已选图层或生成器时，所有已选普通图层和生成器占位框同步移动；删除 / Backspace / Delete 作用于完整选择集合，移除所有已选图层和生成器对象。生成器对象在选择集合中使用稳定 `generation-dialog:<id>` 目标 ID，不把生成器伪装成普通图层，也不新增后端表。
 - 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。所有生成面板参考图槽位统一为方形图标组件；角色规范槽位只显示规范 logo 和 `角色规范` 四字，绑定来源标题只保留给可访问名称、悬浮 title 和图片信息。已有参考图槽位只有在 hover / focus 时显示右上角 `×`，点击后只解绑对应参考图。
-- 生成规范类图片面板底部必须以禁用态参数按钮显示 `16:9 · 2K` 和 `gpt-image-2`，视觉对齐可编辑面板参数控件，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
-- 快速编辑面板底部必须以禁用态参数按钮显示原图尺寸和原图模型，视觉对齐可编辑面板参数控件；参考图顺序为额外参考图在前、原图在最后。
+- 生成规范类图片面板底部必须以禁用态参数按钮显示 `16:9·2K` 和 `gpt-image-2`，视觉对齐可编辑面板参数控件，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
+- 快速编辑面板底部必须显示当前选择的比例 / 尺寸和模型，参数按钮可展开修改且视觉对齐其它可编辑面板；参考图请求顺序为额外参考图在前、原图作为隐式最后一张提交，信息面板输入快照只展示用户额外选择的参考图。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图行引用，不包含后端拼接 Prompt，不再展示独立 Size 字段，也不渲染参考图 Data URL 缩略图。
 - 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照；前端轻量去背必须复用共享 `chromaKey` 的绿幕 / 近白背景模型，不再只按四角颜色扩散，避免纯白角色主体或主体内部浅色区域被扣碎。UI设计图的提取素材固定走 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
@@ -104,6 +104,7 @@
 - 素材文件夹可以新建、折叠、重命名和删除；删除普通文件夹后，其素材移动到“项目素材”。
 - 上传按钮和拖拽上传都支持多文件；底部工具栏的上传入口选择文件后直接进入默认素材文件夹并在当前画布视口中心创建画布图层，素材栏文件夹内的上传入口只写入对应素材文件夹、不自动入画布；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入默认文件夹并在投放点创建画布图层。上传图片必须在创建占位素材、画布图层和账号级素材记录前先读取原图 Resolution，图层宽高、`originalWidth/originalHeight` 和素材库 `width/height` 都使用图片本身尺寸；仅在无法解析尺寸时才使用上传兜底尺寸。
 - 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
+- `生成角色动作` 的完成结果同样按视频素材处理：图层主 `src` 使用后端返回的 `previewVideoPath`，`mediaType` 固定为 `video`，`assetKind` 固定为 `character-animation`，首个透明帧只写入 `thumbnailSrc` 供 poster 和后续动作源使用。下载和 ZIP 导出必须因此得到 mp4/webm/mov 等真实视频文件，不能回退为首帧 PNG；后端抽帧、绿幕去背和帧素材落盘流程仍完整保留。
 - 素材面板支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
 - 图层面板支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index 26e16f826..209ff6bdd 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -40,14 +40,14 @@
    - 生成视频：`你希望生成什么视频？`
 8. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范。图标素材生成不再使用多描述列表，改为复用角色形象生成面板同款单文本输入框。
 9. 生成规范下的角色规范、图标规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
-10. 快速编辑最多允许额外绑定 8 张参考图；原图始终自动作为最后一张参考图展示，不占用额外参考图额度。
+10. 快速编辑最多允许额外绑定 8 张参考图；原图始终自动作为最后一张隐式参考图提交，不占用额外参考图额度，也不在参考图条里固定展示 `图x`。
 
 ## 参数交互
 
 画面比例、大小尺寸、模型、分辨率、时长等生成参数统一为 Lovart 式底部胶囊按钮：
 
 ```text
-左下：[比例 · 尺寸 ˄]          右下：[模型 ˄] [生成12泥点]
+左下：[比例·尺寸 ˄]          右下：[模型 ˄] [生成12泥点]
 ```
 
 - 面板内不显示 `画面比例`、`大小尺寸`、`模型` 等字段标题，只显示当前选择值。
@@ -60,13 +60,13 @@
 - 模型子面板每行固定一个模型，不用方框包裹模型名；模型名不换行，前置对应模型类型图标，选中项在模型名后用对号标记。
 - 比例选项卡片内展示对应比例的线框。
 - 父级面板、底部选项框、弹出子面板字号保持一致。
-- 底部组合值使用 `·` 分隔，例如 `16:9 · 4秒 · 480p`、`16:9 · 1K`。
+- 底部组合值使用 `·` 分隔；图片类左下角不留空格，统一为 `x:y·xK`，例如 `16:9·1K`；视频、角色动作等多参数仍显示为 `16:9 · 4秒 · 480p`。
 - 底部参数热区与生成按钮等高，默认不显示阴影；悬停显示轻量阴影；箭头默认向下，展开后旋转向上。
 - 底边栏中会在上方弹出二级选项的入口不再依赖点击展开。鼠标悬停到入口即可打开二级面板，鼠标离开入口和二级面板后自动收起；当前范围包括 `生成规范` 和 `生成音乐`。
 - 底边栏二级选项面板必须锚定到对应入口按钮本身，不使用屏幕居中或固定底部偏移；移动端窄屏下也应保持跟随入口位置。
 - 生成图片和生成视频文本输入框紧贴参考图下方，取消旧网格预留导致的空白高度。
-- 生成规范类图片固定使用 `16:9 · 2K · gpt-image-2`。这三个参数在面板底部沿用可编辑参数按钮的胶囊样式展示，但控件保持禁用不可点击，不提供比例、尺寸或模型修改入口。
-- 快速编辑的尺寸和模型沿用原图生成配置，只在面板底部以禁用态胶囊按钮展示，不允许在快速编辑面板内修改。
+- 生成规范类图片固定使用 `16:9·2K · gpt-image-2`。这三个参数在面板底部沿用可编辑参数按钮的胶囊样式展示，但控件保持禁用不可点击，不提供比例、尺寸或模型修改入口。
+- 快速编辑默认从原图分辨率和模型初始化比例、尺寸和模型，但底部胶囊必须可点击修改；左下角统一显示 `x:y·xK`，右下角模型胶囊紧贴生成按钮。
 - 不再在底部常驻展开全部可选项。
 
 ## 泥点显示
@@ -93,7 +93,7 @@
 - 生成中的占位图允许通过键盘 `Delete` / `Backspace` 删除；不额外增加画布上的可见删除按钮。用户删除后，后续异步成功或失败回写不得重新创建该生成对象。
 - 待生成占位的空白样式按生成类型区分：视频使用视频图标和视频角标，角色形象使用角色图标和角色角标，角色动作使用角色动作图标和动作角标，音效使用音效图标和音效角标，背景音乐使用音乐图标和背景音乐角标。
 - 待生成占位的图标语义必须与底部入口或触发入口保持一致：生成图片用图片图标，生成规范用规范图标，生成角色形象用角色图标，生成图标素材用图标网格，生成 UI 设计图用应用窗口，宣发素材用宣发图标，快速编辑用闪光图标，不能默认全部回退为图片图标。
-- 图片类待生成占位尺寸必须与面板当前比例和尺寸同步：普通图片、角色形象、图标素材、UI 设计图按当前 `aspectRatio + imageSize` 计算像素尺寸；生成规范固定为 `16:9 · 2K`，占位为 `2048 x 1152`；宣发素材按 workflow 输出尺寸创建占位。
+- 图片类待生成占位尺寸必须与面板当前比例和尺寸同步：普通图片、角色形象、图标素材、UI 设计图按当前 `aspectRatio + imageSize` 计算像素尺寸；生成规范固定为 `16:9·2K`，占位为 `2048 x 1152`；宣发素材按 workflow 输出尺寸创建占位。
 - 视频待生成占位必须与面板当前比例和清晰度同步：默认 `16:9 · 480p` 为 `854 x 480`，切换到 `720p` 后同步为 `1280 x 720`；调整参数时保持占位中心点不变。
 - 面板中用户修改比例、尺寸或清晰度后，已有空白待生成占位立即同步更新 `width / height / originalWidth / originalHeight`，且保持中心点不跳动。
 - 快速编辑点击生成后不在原图上播放生成中遮罩，而是立即创建独立 `Quick Edit Generator` 画布生成占位并播放生成中动画；生成成功后结果落在该占位框位置，失败时占位标记失败并恢复快速编辑面板。
@@ -174,8 +174,8 @@
 - 底边栏 `生成规范` / `生成音乐` 悬停即可看到上方选项面板；鼠标从按钮移动到选项面板时不闪退，离开按钮和选项面板后收起。
 - `生成音乐` 选项面板出现在音乐按钮上方，不再固定在底栏中间。
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
-- 生成规范类图片底部展示禁用态参数按钮 `16:9 · 2K` 和 `gpt-image-2`，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮；提交参数也固定为这三项，不出现可展开选项。
-- 快速编辑底部展示禁用态原图尺寸和原图模型，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮；额外参考图最多 8 张，原图显示为最后一个 `图x`。
+- 生成规范类图片底部展示禁用态参数按钮 `16:9·2K` 和 `gpt-image-2`，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮；提交参数也固定为这三项，不出现可展开选项。
+- 快速编辑底部展示当前选择的比例 / 尺寸和模型，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮，并允许展开修改；额外参考图最多 8 张，原图作为隐式最后参考图参与提交但不在参考图条里固定显示 `图x`。
 - 快速编辑提交前必须把提示词里对原图的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写成最后一张原图编号，例如额外 1 张参考图时改为 `图2`。
 - 快速编辑提交给后端的参考图顺序必须是额外参考图在前、原图在最后。
 - 生成中的占位图聚焦后可用 `Delete` / `Backspace` 删除；删除后异步结果不再落回画布，也不显示额外删除 UI。
diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index 748855f58..4154a4cce 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -162,4 +162,6 @@
 - 视频生成完成后，后端按面板选择抽取对应帧数：`32`、`40` 或 `48`。
 - 每帧必须执行绿幕去背，输出透明背景 PNG。
 - 抽帧结果写入 OSS，并返回帧路径、帧尺寸、帧数、fps、预览视频路径、模型、价格和实际 prompt。
-- 画板前端首版只展示生成完成结果摘要，不把帧序列自动铺到画布上；后续若要展示逐帧图层，必须继续复用画布图层与素材库资源模型。
+- 画板前端回填角色动作结果时，必须以 `previewVideoPath` 创建 `mediaType: "video"`、`assetKind: "character-animation"` 图层，复用视频素材的 `<video controls preload="metadata" playsInline>` 预览和视频下载 / 导出口径；不得把 `frames[0].imageSrc` 作为图层主 `src`。
+- `frames[0].imageSrc` 只作为动作视频图层的 `thumbnailSrc` / poster，以及后续动作素材快速编辑或再次生成动作时的透明帧来源。该规则不得跳过后端原有的视频生成、抽帧、绿幕去背和帧素材落盘流程。
+- 画板前端不把帧序列自动铺到画布上；后续若要展示逐帧图层，必须继续复用画布图层与素材库资源模型。
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
index 82aa5f7ee..afa372f84 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
@@ -1,14 +1,14 @@
-/* @vitest-environment jsdom */
+/* @vitest-environment jsdom */
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import type {
   GenerateDialogState,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
-import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 
 function createDialog(
   patch: Partial<GenerateDialogState> = {},
@@ -157,7 +157,7 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     const panel = screen.getByRole('dialog', { name: '生成图片' });
     fireEvent.click(
       within(panel).getByRole('button', {
-        name: '生成图片尺寸 16:9 · 1K',
+        name: '生成图片尺寸 16:9·1K',
       }),
     );
     const dimensionPanel = screen.getByRole('menu', {
@@ -189,7 +189,7 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     const panel = screen.getByRole('dialog', { name: '生成图片' });
     fireEvent.click(
       within(panel).getByRole('button', {
-        name: '生成图片尺寸 16:9 · 1K',
+        name: '生成图片尺寸 16:9·1K',
       }),
     );
     expect(
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index d891e7fa9..3e714d965 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -151,6 +151,31 @@ describe('ImageCanvasBottomToolbarView', () => {
     ]);
   });
 
+  it('uses an upload-specific icon for the upload tool', () => {
+    const specToolWrapRef = createRef<HTMLSpanElement>();
+    const musicToolWrapRef = createRef<HTMLSpanElement>();
+    const publicationToolWrapRef = createRef<HTMLSpanElement>();
+    render(
+      <ImageCanvasBottomToolbarView
+        specToolWrapRef={specToolWrapRef}
+        musicToolWrapRef={musicToolWrapRef}
+        publicationToolWrapRef={publicationToolWrapRef}
+        effectiveTool="select"
+        onSwitchTool={vi.fn()}
+        onOpenToolOptions={vi.fn()}
+        onCloseToolOptions={vi.fn()}
+      />,
+    );
+
+    expect(
+      within(
+        screen.getByRole('toolbar', { name: 'AI画布工具栏' }),
+      )
+        .getByRole('button', { name: '上传工具' })
+        .querySelector('.lucide-upload'),
+    ).toBeTruthy();
+  });
+
   it('opens and closes bottom option tools on hover', () => {
     const openToolOptions = vi.fn();
     const closeToolOptions = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index cce356f53..ae198470b 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -5,10 +5,10 @@ import {
   Grid2X2,
   Hand,
   ImageIcon,
-  ImagePlus,
   Megaphone,
   MousePointer2,
   Music,
+  Upload,
   UserRound,
 } from 'lucide-react';
 import type { RefObject } from 'react';
@@ -36,7 +36,7 @@ const canvasTools: Array<{
 }> = [
   { id: 'select', label: '选择工具', icon: MousePointer2 },
   { id: 'hand', label: '抓手工具', icon: Hand },
-  { id: 'upload', label: '上传工具', icon: ImagePlus },
+  { id: 'upload', label: '上传工具', icon: Upload },
   {
     id: 'generate',
     label: '生成图片',
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 8ed1c0a03..fd15863af 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -400,7 +400,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     expect(
       within(generateDialog).getByRole('button', {
-        name: '生成图片尺寸 1:1 · 1K',
+        name: '生成图片尺寸 1:1·1K',
       }).className,
     ).toContain('platform-inline-option-button');
     expect(
@@ -1200,7 +1200,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     expect(
       within(characterPanel).getByRole('button', {
-        name: '生成图片尺寸 1:1 · 1K',
+        name: '生成图片尺寸 1:1·1K',
       }),
     ).toBeTruthy();
     expect(
@@ -1229,7 +1229,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     const iconPanel = screen.getByRole('dialog', { name: '生成图标素材' });
     expect(
       within(iconPanel).getByRole('button', {
-        name: '生成图片尺寸 1:1 · 1K',
+        name: '生成图片尺寸 1:1·1K',
       }),
     ).toBeTruthy();
     expect(
@@ -2547,8 +2547,14 @@ describe('ImageCanvasEditorView generation integration', () => {
       generateEditorCharacterAnimationMock.mock.calls[0]?.[0]?.promptText,
     ).toBe(precisePrompt);
     await waitFor(() => {
-      expect(screen.getByAltText('画布图片：角色动作')).toBeTruthy();
+      expect(screen.getByLabelText('画布视频：角色动作')).toBeTruthy();
     });
+    const actionVideo = screen.getByLabelText('画布视频：角色动作');
+    expect(actionVideo.tagName.toLowerCase()).toBe('video');
+    expect(actionVideo.getAttribute('poster')).toBe(
+      '/generated-character-drafts/editor/frame1.png',
+    );
+    expect(actionVideo.hasAttribute('controls')).toBe(true);
     expect(screen.getByText('动作')).toBeTruthy();
   });
 
@@ -2684,7 +2690,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
   });
 
-  it('opens quick edit from the floating toolbar, keeps the source as the last reference, and generates from a new frame', async () => {
+  it('opens quick edit from the floating toolbar, hides the implicit source reference, and generates from a new frame', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-quick-edit',
       title: '快速编辑画布',
@@ -2759,22 +2765,22 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(quickPanel.className).toContain(
       'image-canvas-editor__quick-edit-panel',
     );
-    expect(within(quickPanel).getByText('魔法森林')).toBeTruthy();
+    expect(within(quickPanel).queryByText('魔法森林')).toBeNull();
     expect(
       (
         within(quickPanel).getByRole('button', {
-          name: '快速编辑尺寸 1536x1024',
+          name: '快速编辑尺寸 3:2·1K',
         }) as HTMLButtonElement
       ).disabled,
-    ).toBe(true);
+    ).toBe(false);
     expect(
       (
         within(quickPanel).getByRole('button', {
           name: '快速编辑模型 gpt-image-2',
         }) as HTMLButtonElement
       ).disabled,
-    ).toBe(true);
-    expect(within(quickPanel).getByLabelText('原图 图1')).toBeTruthy();
+    ).toBe(false);
+    expect(within(quickPanel).queryByLabelText('原图 图1')).toBeNull();
 
     fireEvent.click(
       within(quickPanel).getByRole('button', {
@@ -2800,7 +2806,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       name: '快速编辑图片',
     });
     expect(within(updatedQuickPanel).getByText('星空参考')).toBeTruthy();
-    expect(within(updatedQuickPanel).getByLabelText('原图 图2')).toBeTruthy();
+    expect(within(updatedQuickPanel).queryByLabelText('原图 图2')).toBeNull();
 
     fireEvent.change(within(updatedQuickPanel).getByLabelText('快速编辑提示词'), {
       target: { value: '参考原图增加萤火虫' },
@@ -2813,7 +2819,9 @@ describe('ImageCanvasEditorView generation integration', () => {
       expect(generateEditorImageMock).toHaveBeenCalledWith(
         expect.objectContaining({
           prompt: '参考图2增加萤火虫',
-          size: '1536x1024',
+          size: '1024x683',
+          aspectRatio: '3:2',
+          imageSize: '1K',
           kind: 'quick-edit',
           model: 'gpt-image-2',
           referenceImageSrcs: [
@@ -2844,8 +2852,8 @@ describe('ImageCanvasEditorView generation integration', () => {
       .closest('button') as HTMLElement;
     expect(Number.parseFloat(generatedLayer.style.left)).toBe(1688);
     expect(Number.parseFloat(generatedLayer.style.top)).toBe(140);
-    expect(Number.parseFloat(generatedLayer.style.width)).toBe(1536);
-    expect(Number.parseFloat(generatedLayer.style.height)).toBe(1024);
+    expect(Number.parseFloat(generatedLayer.style.width)).toBe(1024);
+    expect(Number.parseFloat(generatedLayer.style.height)).toBe(683);
     await waitFor(() => {
       expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
         'editor-project-quick-edit',
@@ -2853,11 +2861,11 @@ describe('ImageCanvasEditorView generation integration', () => {
           layers: expect.arrayContaining([
             expect.objectContaining({
               title: '魔法森林 快速编辑',
-              resourceId: 'resource-editor-project-quick-edit-1536',
-              width: 1536,
-              height: 1024,
-              originalWidth: 1536,
-              originalHeight: 1024,
+              resourceId: 'resource-editor-project-quick-edit-1024',
+              width: 1024,
+              height: 683,
+              originalWidth: 1024,
+              originalHeight: 683,
               x: 1688,
               y: 140,
             }),
@@ -2918,7 +2926,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     fireEvent.click(within(menu).getByRole('menuitem', { name: '快速编辑' }));
 
     const panel = screen.getByRole('dialog', { name: '快速编辑图片' });
-    expect(within(panel).getByText('右键图片')).toBeTruthy();
+    expect(within(panel).queryByText('右键图片')).toBeNull();
     fireEvent.change(within(panel).getByLabelText('快速编辑提示词'), {
       target: { value: '换成夜晚' },
     });
@@ -2930,6 +2938,8 @@ describe('ImageCanvasEditorView generation integration', () => {
           prompt: '换成夜晚',
           referenceImageSrcs: ['data:image/png;base64,Y29udGV4dA=='],
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           model: 'gpt-image-2',
           kind: 'quick-edit',
           projectId: 'editor-project-context-quick-edit',
@@ -3118,6 +3128,8 @@ describe('ImageCanvasEditorView generation integration', () => {
         expect.objectContaining({
           prompt: '把画面改成黄昏光线',
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           kind: 'quick-edit',
           model: 'gpt-image-2',
           referenceImageSrcs: ['data:image/png;base64,ZmFrZS1pbWFnZQ=='],
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 25895a4a2..52a820a13 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -295,6 +295,52 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('serializes and hydrates video thumbnails for character animation layers', () => {
+    const layer: CanvasLayer = {
+      id: 'layer-action',
+      resourceId: 'resource-action',
+      title: '角色动作',
+      src: '/generated-character-drafts/editor/preview.mp4',
+      mediaType: 'video',
+      thumbnailSrc: '/generated-character-drafts/editor/frame01.png',
+      x: 10,
+      y: 20,
+      width: 420,
+      height: 420,
+      originalWidth: 1024,
+      originalHeight: 1024,
+      zIndex: 6,
+      sourceType: 'generated',
+      assetKind: 'character-animation',
+      durationSeconds: 4,
+    };
+
+    const snapshot = serializeLayer(layer);
+    expect(snapshot.thumbnailSrc).toBe(
+      '/generated-character-drafts/editor/frame01.png',
+    );
+
+    const hydrated = hydrateLayer(
+      snapshot,
+      new Map([
+        [
+          'resource-action',
+          {
+            imageSrc: layer.src,
+            assetKind: 'character-animation',
+          },
+        ],
+      ]),
+    );
+
+    expect(hydrated).toMatchObject({
+      mediaType: 'video',
+      thumbnailSrc: '/generated-character-drafts/editor/frame01.png',
+      assetKind: 'character-animation',
+      durationSeconds: 4,
+    });
+  });
+
   it('restores audio generation dialogs from saved layout', () => {
     const dialog: CanvasGenerationDialogState = {
       id: 'generation-dialog-audio',
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 46047668f..e19369555 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -1,6 +1,6 @@
 import type {
-  EditorCharacterAnimationGenerationResult,
   EditorAssetLibrarySnapshot,
+  EditorCharacterAnimationGenerationResult,
   EditorProjectLayerSnapshot,
 } from '../../services/image-editor/editorProjectClient';
 import type {
@@ -165,6 +165,7 @@ export function serializeLayer(
     zIndex: layer.zIndex,
     sourceType: layer.sourceType,
     mediaType: layer.mediaType,
+    thumbnailSrc: layer.thumbnailSrc,
     prompt: layer.prompt,
     actualPrompt: layer.actualPrompt,
     model: layer.model,
@@ -520,6 +521,7 @@ export function hydrateLayer(
       snapshot.mediaType === 'video' || snapshot.mediaType === 'audio'
         ? snapshot.mediaType
         : 'image',
+    thumbnailSrc: stringOrNull(snapshot.thumbnailSrc),
     prompt: stringOrNull(snapshot.prompt),
     actualPrompt: stringOrNull(snapshot.actualPrompt),
     model: stringOrNull(snapshot.model),
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index adebbf227..c8c4a700e 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -279,6 +279,8 @@ export type QuickEditPanelState = {
   sourceLayerId: string;
   prompt: string;
   size: string;
+  aspectRatio?: string;
+  imageSize?: string;
   model: string;
   quickEditReferences?: CharacterReferenceImage[];
   status: 'idle' | 'generating' | 'failed';
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index dbea6b881..31162993b 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -56,6 +56,13 @@ describe('ImageCanvasExportModel', () => {
         '/video.png',
       ),
     ).toBe('mp4');
+    expect(
+      getLayerAssetExtensionFromTypeOrSrc(
+        'video',
+        '',
+        '/generated-character-drafts/editor/preview.mp4',
+      ),
+    ).toBe('mp4');
     expect(
       getLayerAssetExtensionFromTypeOrSrc(
         'audio',
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 3d406c815..ab4c22fd4 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -24,7 +24,6 @@ import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAn
 import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
 import { ImageCanvasCropExpandPanelView } from './ImageCanvasCropExpandPanelView';
 import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationModalView';
-import { ImageCanvasPublicationMaterialsDemoPanelView } from './ImageCanvasPublicationMaterialsDemoPanelView';
 import type {
   CanvasLayer,
   CharacterAnimationPanelState,
@@ -43,13 +42,14 @@ import {
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
   EDITOR_SOUND_EFFECT_MODEL_OPTIONS,
-  SOUND_EFFECT_DURATION_OPTIONS,
   EDITOR_VIDEO_DURATION_OPTIONS,
   EDITOR_VIDEO_MODEL_OPTIONS,
   resizeGenerationPlaceholderToVideoSelection,
+  SOUND_EFFECT_DURATION_OPTIONS,
   SPEC_TYPE_LABEL,
 } from './ImageCanvasGenerationModel';
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
+import { ImageCanvasPublicationMaterialsDemoPanelView } from './ImageCanvasPublicationMaterialsDemoPanelView';
 import { getPublicationMaterialsWorkflow } from './ImageCanvasPublicationMaterialsModel';
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
 import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
@@ -1146,6 +1146,7 @@ export function ImageCanvasGenerationComposerView({
           renderEditorPortal={renderEditorPortal}
           buildPortalMenuStyle={buildPortalMenuStyle}
           onRequestUpload={onRequestUpload}
+          onRememberImageModel={onRememberImageModel}
           setQuickEditPanel={setQuickEditPanel}
           onSubmit={onSubmitQuickEdit}
         />
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 1148c92f1..de4e0099e 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -5,10 +5,6 @@ import type {
   CharacterAnimationPanelState,
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
-import {
-  IMAGE_MODEL_NANOBANANA2,
-} from './ImageCanvasGenerationModel';
-
 import {
   appendCharacterReference,
   appendGenerationReference,
@@ -37,6 +33,9 @@ import {
   updateIconDescriptionsTextInDialog,
   updateSpecFormDialogValue,
 } from './ImageCanvasGenerationDialogModel';
+import {
+  IMAGE_MODEL_NANOBANANA2,
+} from './ImageCanvasGenerationModel';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
@@ -365,6 +364,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
       sourceLayerId: 'layer-source',
       prompt: '',
       size: '1024x768',
+      aspectRatio: '4:3',
+      imageSize: '1K',
       model: 'gpt-image-2',
       quickEditReferences: [],
       status: 'idle',
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 97460098f..bc1f24598 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -11,22 +11,24 @@ import type {
   SpecGenerationType,
 } from './ImageCanvasEditorTypes';
 import {
+  appendLimitedQuickEditReferences,
   AUDIO_FRAME_DISPLAY_SIZE,
   AUDIO_FRAME_ORIGINAL_SIZE,
+  CHARACTER_ANIMATION_DURATION_OPTIONS,
   CHARACTER_ANIMATION_FRAME_DISPLAY_SIZE,
   CHARACTER_ANIMATION_FRAME_ORIGINAL_SIZE,
-  CHARACTER_ANIMATION_DURATION_OPTIONS,
-  appendLimitedQuickEditReferences,
   createCanvasLayerReference,
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_IMAGE_MODEL,
-  DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_PUBLICATION_GAME_INFO,
+  DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
   DEFAULT_SPEC_FORM_VALUES,
   DEFAULT_VIDEO_MODEL,
   EDITOR_IMAGE_DIMENSION_OPTIONS,
   ICON_DESCRIPTION_LIMIT,
+  inferEditorImageAspectRatio,
+  inferEditorImageSizeLabel,
   normalizeEditorImageModel,
   PUBLICATION_FRAME_ORIGINAL_SIZE,
   resolveEditorImageGenerationPixelSize,
@@ -567,6 +569,14 @@ export function createEditDialogDraft(
 export function createQuickEditPanelDraft(
   sourceLayer: CanvasLayer,
 ): QuickEditPanelState {
+  const aspectRatio = inferEditorImageAspectRatio(
+    sourceLayer.originalWidth,
+    sourceLayer.originalHeight,
+  );
+  const imageSize = inferEditorImageSizeLabel(
+    sourceLayer.originalWidth,
+    sourceLayer.originalHeight,
+  );
   return {
     mode: 'quick-edit',
     sourceLayerId: sourceLayer.id,
@@ -575,6 +585,8 @@ export function createQuickEditPanelDraft(
       sourceLayer.originalWidth,
       sourceLayer.originalHeight,
     ),
+    aspectRatio,
+    imageSize,
     model: normalizeEditorImageModel(sourceLayer.model),
     quickEditReferences: [],
     status: 'idle',
@@ -586,12 +598,22 @@ export function createQuickEditGenerationDialogDraft({
   prompt,
   status = 'idle',
   references = [],
+  model,
+  aspectRatio,
+  imageSize,
+  frame,
 }: {
   sourceLayer: CanvasLayer;
   prompt: string;
   status?: CanvasGenerationDialogState['status'];
   references?: NonNullable<QuickEditPanelState['quickEditReferences']>;
+  model?: string;
+  aspectRatio?: string;
+  imageSize?: string;
+  frame?: { width: number; height: number };
 }): Omit<CanvasGenerationDialogState, 'id'> {
+  const frameWidth = frame?.width ?? sourceLayer.width;
+  const frameHeight = frame?.height ?? sourceLayer.height;
   return {
     mode: 'quick-edit',
     prompt,
@@ -599,18 +621,16 @@ export function createQuickEditGenerationDialogDraft({
     composerOpen: false,
     sourceLayerId: sourceLayer.id,
     generationReferences: references.slice(0, 8),
-    imageModel: normalizeEditorImageModel(sourceLayer.model),
-    imageSize: formatImageSizeValue(
-      sourceLayer.originalWidth,
-      sourceLayer.originalHeight,
-    ),
+    imageModel: normalizeEditorImageModel(model ?? sourceLayer.model),
+    aspectRatio,
+    imageSize,
     placeholder: {
       x: sourceLayer.x + sourceLayer.width + 32,
       y: sourceLayer.y,
-      width: sourceLayer.width,
-      height: sourceLayer.height,
-      originalWidth: sourceLayer.originalWidth,
-      originalHeight: sourceLayer.originalHeight,
+      width: frameWidth,
+      height: frameHeight,
+      originalWidth: frameWidth,
+      originalHeight: frameHeight,
     },
   };
 }
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
index 4620bebba..4c9f446a5 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx
@@ -1,4 +1,4 @@
-/* @vitest-environment jsdom */
+/* @vitest-environment jsdom */
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { useState } from 'react';
@@ -74,7 +74,7 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     );
 
     fireEvent.click(
-      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+      screen.getByRole('button', { name: '生成图片尺寸 1:1·1K' }),
     );
     const panel = screen.getByRole('menu', { name: '生成图片尺寸选项' });
 
@@ -93,7 +93,7 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
         .getAttribute('aria-pressed'),
     ).toBe('true');
     expect(
-      screen.getByRole('button', { name: '生成图片尺寸 16:9 · 2K' }),
+      screen.getByRole('button', { name: '生成图片尺寸 16:9·2K' }),
     ).toBeTruthy();
     expect(screen.getByLabelText('当前比例').textContent).toBe('16:9');
     expect(screen.getByLabelText('当前尺寸').textContent).toBe('2K');
@@ -116,7 +116,7 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     );
 
     fireEvent.click(
-      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+      screen.getByRole('button', { name: '生成图片尺寸 1:1·1K' }),
     );
     expect(
       screen.getByRole('menu', { name: '生成图片尺寸选项' }),
@@ -183,7 +183,7 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     );
 
     fireEvent.click(
-      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+      screen.getByRole('button', { name: '生成图片尺寸 1:1·1K' }),
     );
 
     expect(
@@ -263,7 +263,7 @@ describe('ImageCanvasGenerationImageOptionsView', () => {
     );
 
     fireEvent.click(
-      screen.getByRole('button', { name: '生成图片尺寸 1:1 · 1K' }),
+      screen.getByRole('button', { name: '生成图片尺寸 1:1·1K' }),
     );
     const panel = screen.getByRole('menu', { name: '生成图片尺寸选项' });
     fireEvent.click(within(panel).getByRole('button', { name: '16:9' }));
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index d7360ed1e..3d7462c03 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -16,9 +16,11 @@ import type { GenerateDialogState } from './ImageCanvasEditorTypes';
 import {
   EDITOR_IMAGE_DIMENSION_OPTIONS,
   EDITOR_IMAGE_MODEL_OPTIONS,
+  getEditorImageModelDisplayName,
   IMAGE_MODEL_NANOBANANA2,
   normalizeEditorImageModel,
   resizeGenerationPlaceholderToImageSelection,
+  resolveEditorImageSizeLabel,
 } from './ImageCanvasGenerationModel';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
@@ -66,23 +68,17 @@ function normalizeImageDialogSelection(dialog: GenerateDialogState) {
     aspectRatio:
       dialog.aspectRatio && aspectRatios.includes(dialog.aspectRatio)
         ? dialog.aspectRatio
-        : options.aspectRatios[0],
+        : (options.aspectRatios[0] ?? '1:1'),
     imageSize:
       dialog.imageSize && imageSizes.includes(dialog.imageSize)
         ? dialog.imageSize
         : (options.imageSizes.find((size) => size === '1K') ??
-          options.imageSizes[0]),
+          options.imageSizes[0] ??
+          '1K'),
     options,
   };
 }
 
-function getImageModelLabel(value: string) {
-  return (
-    EDITOR_IMAGE_MODEL_OPTIONS.find((option) => option.value === value)
-      ?.label ?? value
-  );
-}
-
 function OptionChoice({
   children,
   selected,
@@ -124,7 +120,11 @@ export function ImageCanvasGenerationImageOptionsView({
   const dimensionsButtonRef = useRef<HTMLButtonElement | null>(null);
   const modelButtonRef = useRef<HTMLButtonElement | null>(null);
   const selection = normalizeImageDialogSelection(dialog);
-  const selectedModelLabel = getImageModelLabel(selection.model);
+  const selectedModelLabel = getEditorImageModelDisplayName(selection.model);
+  const selectedSizeLabel = resolveEditorImageSizeLabel({
+    aspectRatio: selection.aspectRatio,
+    imageSize: selection.imageSize,
+  });
   const isGenerating = dialog.status === 'generating';
   const labelPrefix = optionLabelPrefix ?? '生成图片';
   const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
@@ -168,13 +168,14 @@ export function ImageCanvasGenerationImageOptionsView({
           currentDialog.aspectRatio &&
           nextAspectRatios.includes(currentDialog.aspectRatio)
             ? currentDialog.aspectRatio
-            : nextOptions.aspectRatios[0],
+            : (nextOptions.aspectRatios[0] ?? '1:1'),
         imageSize:
           currentDialog.imageSize &&
           nextImageSizes.includes(currentDialog.imageSize)
             ? currentDialog.imageSize
             : (nextOptions.imageSizes.find((size) => size === '1K') ??
-              nextOptions.imageSizes[0]),
+              nextOptions.imageSizes[0] ??
+              '1K'),
       };
       return resizeGenerationPlaceholderToImageSelection(nextDialog);
     });
@@ -191,13 +192,13 @@ export function ImageCanvasGenerationImageOptionsView({
           <PlatformInlineOptionButton
             ref={dimensionsButtonRef}
             className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-            aria-label={`${labelPrefix}尺寸 ${selection.aspectRatio} · ${selection.imageSize}`}
+            aria-label={`${labelPrefix}尺寸 ${selectedSizeLabel}`}
             aria-expanded={openPanel === 'dimensions'}
             disabled={isGenerating}
             trailingIcon={<ChevronDown className="h-3 w-3" />}
             onClick={() => togglePanel('dimensions')}
           >
-            {selection.aspectRatio} · {selection.imageSize}
+            {selectedSizeLabel}
           </PlatformInlineOptionButton>
           {openPanel === 'dimensions'
             ? renderEditorPortal(
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index 269d8784a..13a4e756c 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -466,7 +466,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
     });
   });
 
-  it('creates character animation result layers with action metadata', () => {
+  it('creates character animation result layers with playable video preview and frame metadata', () => {
     const layer = createCharacterAnimationResultLayer({
       generated: {
         taskId: 'character-animation-task-1',
@@ -508,7 +508,9 @@ describe('ImageCanvasGenerationLayerModel', () => {
       id: 'layer-character-animation-15',
       resourceId: 'local-resource-character-animation-15',
       title: '角色动作',
-      src: '/generated-character-drafts/editor/frame1.png',
+      src: '/generated-character-drafts/editor/preview.mp4',
+      mediaType: 'video',
+      thumbnailSrc: '/generated-character-drafts/editor/frame1.png',
       x: -222,
       y: -242,
       width: 1024,
@@ -523,8 +525,8 @@ describe('ImageCanvasGenerationLayerModel', () => {
       provider: 'ark',
       taskId: 'character-animation-task-1',
       assetKind: 'character-animation',
+      durationSeconds: 4,
     });
-    expect(layer?.mediaType).toBeUndefined();
     expect(layer?.generationInputs?.fields[0]?.value).toBe('待机动作');
   });
 });
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 0e1d3c8ed..c72d88959 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -60,6 +60,8 @@ type VideoResultLayerOptions = {
   viewport: CanvasViewport;
   generationInputs: CanvasGenerationInputs;
   frame?: GenerateDialogState['placeholder'];
+  sourceLayer?: CanvasLayer;
+  assetKind?: CanvasLayer['assetKind'];
 };
 
 type AudioResultLayerOptions = {
@@ -80,6 +82,7 @@ type CharacterAnimationResultLayerOptions = {
   viewport: CanvasViewport;
   generationInputs: CanvasGenerationInputs;
   frame?: GenerateDialogState['placeholder'];
+  sourceLayer?: CanvasLayer;
 };
 
 function getViewportWorldCenter({
@@ -188,8 +191,13 @@ export function createQuickEditResultLayer({
   mode = 'quick-edit',
   frame,
 }: QuickEditResultLayerOptions): CanvasLayer {
-  const originalWidth = generated.width || sourceLayer.originalWidth || 1024;
-  const originalHeight = generated.height || sourceLayer.originalHeight || 1024;
+  const originalWidth =
+    frame?.originalWidth || generated.width || sourceLayer.originalWidth || 1024;
+  const originalHeight =
+    frame?.originalHeight ||
+    generated.height ||
+    sourceLayer.originalHeight ||
+    1024;
   const { width, height } = resolveLayerResolutionSize(
     originalWidth,
     originalHeight,
@@ -350,6 +358,8 @@ export function createVideoResultLayer({
   viewport,
   generationInputs,
   frame,
+  sourceLayer,
+  assetKind = 'video',
 }: VideoResultLayerOptions): CanvasLayer {
   const originalWidth = generated.width || 1280;
   const originalHeight = generated.height || 720;
@@ -374,7 +384,7 @@ export function createVideoResultLayer({
     title,
     src: generated.videoSrc,
     mediaType: 'video',
-    assetKind: 'video',
+    assetKind,
     x: frameX ?? worldCenter.x - width / 2,
     y: frameY ?? worldCenter.y - height / 2,
     width,
@@ -390,6 +400,8 @@ export function createVideoResultLayer({
     taskId: generated.taskId,
     objectKey: generated.objectKey,
     assetObjectId: generated.assetObjectId,
+    sourceResourceId: sourceLayer?.resourceId,
+    groupId: sourceLayer?.groupId,
     generationInputs,
   };
 }
@@ -455,6 +467,7 @@ export function createCharacterAnimationResultLayer({
   viewport,
   generationInputs,
   frame,
+  sourceLayer,
 }: CharacterAnimationResultLayerOptions): CanvasLayer | null {
   const previewFrame = generated.frames[0];
   if (!previewFrame) {
@@ -481,7 +494,9 @@ export function createCharacterAnimationResultLayer({
     id: `layer-character-animation-${generatedIndex}`,
     resourceId: `local-resource-character-animation-${generatedIndex}`,
     title,
-    src: previewFrame.imageSrc,
+    src: generated.previewVideoPath,
+    mediaType: 'video',
+    thumbnailSrc: previewFrame.imageSrc,
     x: frameX ?? worldCenter.x - width / 2,
     y: frameY ?? worldCenter.y - height / 2,
     width,
@@ -496,6 +511,9 @@ export function createCharacterAnimationResultLayer({
     provider: 'ark',
     taskId: generated.taskId,
     assetKind: 'character-animation',
+    durationSeconds: generated.durationSeconds,
+    sourceResourceId: sourceLayer?.resourceId,
+    groupId: sourceLayer?.groupId,
     generationInputs,
   };
 }
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index 2a6beec95..abe7fa51b 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -47,7 +47,6 @@ import {
   VIDEO_MODEL_KLING_3,
   VIDEO_MODEL_KLING_3_OMNI,
   VIDEO_MODEL_SEEDANCE_2,
-  VIDEO_MODEL_SEEDANCE_2_FAST,
   VIDEO_MODEL_VEO_3_1,
   VIDEO_MODEL_VEO_3_1_FAST,
 } from './ImageCanvasGenerationModel';
@@ -248,12 +247,6 @@ describe('ImageCanvasGenerationModel', () => {
           refType: 'project-resource',
           refId: 'resource-sky',
         },
-        {
-          title: '参考图 2',
-          label: '原图',
-          refType: 'project-resource',
-          refId: 'resource-source',
-        },
       ],
     });
   });
@@ -358,6 +351,18 @@ describe('ImageCanvasGenerationModel', () => {
     );
   });
 
+  it('uses the extracted transparent frame when reusing a playable character animation layer', () => {
+    expect(
+      resolveCharacterAnimationSourceImageSrc({
+        ...buildSourceLayer(),
+        assetKind: 'character-animation',
+        mediaType: 'video',
+        src: '/generated-character-drafts/editor/preview.mp4',
+        thumbnailSrc: '/generated-character-drafts/editor/frame01.png',
+      }),
+    ).toBe('/generated-character-drafts/editor/frame01.png');
+  });
+
   it('maps generation dialog mode and authorization errors to user-facing copy', () => {
     const iconDialog: CanvasGenerationDialogState = {
       id: 'dialog-icon',
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 8fedca382..f8019bea1 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -123,11 +123,11 @@ export const QUICK_EDIT_MODEL_OPTIONS = [
 export const EDITOR_IMAGE_MODEL_OPTIONS = QUICK_EDIT_MODEL_OPTIONS;
 export const EDITOR_IMAGE_DIMENSION_OPTIONS = {
   [IMAGE_MODEL_NANOBANANA2]: {
-    aspectRatios: ['1:1', '2:3', '3:2', '9:16', '16:9'],
+    aspectRatios: ['1:1', '4:3', '3:2', '2:3', '9:16', '16:9'],
     imageSizes: ['0.5K', '1K', '2K'],
   },
   [IMAGE_MODEL_GPT_IMAGE_2]: {
-    aspectRatios: ['1:1', '2:3', '3:2', '9:16', '16:9'],
+    aspectRatios: ['1:1', '4:3', '3:2', '2:3', '9:16', '16:9'],
     imageSizes: ['1K', '2K'],
   },
 } as const;
@@ -193,6 +193,44 @@ export function resolveEditorImageGenerationPixelSize({
   return resolveImageFrameSizeFromRatio({ aspectRatio, imageSize });
 }
 
+export function resolveEditorImageSizeLabel({
+  aspectRatio,
+  imageSize,
+}: {
+  aspectRatio: string | null | undefined;
+  imageSize: string | null | undefined;
+}) {
+  return `${aspectRatio?.trim() || '1:1'}·${getSafeImageSizeValue(imageSize)}`;
+}
+
+export function inferEditorImageAspectRatio(width: number, height: number) {
+  const safeWidth = Number.isFinite(width) && width > 0 ? Math.round(width) : 1;
+  const safeHeight =
+    Number.isFinite(height) && height > 0 ? Math.round(height) : 1;
+  const commonRatios = EDITOR_IMAGE_DIMENSION_OPTIONS[
+    IMAGE_MODEL_NANOBANANA2
+  ].aspectRatios as readonly string[];
+  const sourceRatio = safeWidth / safeHeight;
+  return commonRatios.reduce((bestRatio, ratio) => {
+    const bestNumbers = resolveAspectRatioNumbers(bestRatio);
+    const ratioNumbers = resolveAspectRatioNumbers(ratio);
+    const bestDiff = Math.abs(bestNumbers.width / bestNumbers.height - sourceRatio);
+    const ratioDiff = Math.abs(ratioNumbers.width / ratioNumbers.height - sourceRatio);
+    return ratioDiff < bestDiff ? ratio : bestRatio;
+  }, commonRatios[0] ?? '1:1');
+}
+
+export function inferEditorImageSizeLabel(width: number, height: number) {
+  const longEdge = Math.max(width, height);
+  if (longEdge <= 768) {
+    return '0.5K';
+  }
+  if (longEdge > 1536) {
+    return '2K';
+  }
+  return '1K';
+}
+
 export function resizeGenerationPlaceholderToImageSelection(
   dialog: GenerateDialogState,
 ): GenerateDialogState {
@@ -439,6 +477,16 @@ export function normalizeEditorImageModel(
   return normalizedModel;
 }
 
+export function getEditorImageModelDisplayName(
+  model: string | null | undefined,
+) {
+  const normalizedModel = normalizeEditorImageModel(model);
+  return (
+    EDITOR_IMAGE_MODEL_OPTIONS.find((option) => option.value === normalizedModel)
+      ?.label ?? normalizedModel
+  );
+}
+
 export function buildQuickEditModelOptions(currentModel: string) {
   const normalizedCurrentModel = normalizeEditorImageModel(currentModel);
   const options = [...QUICK_EDIT_MODEL_OPTIONS];
@@ -556,7 +604,7 @@ export function formatLayerImageType(layer: CanvasLayer) {
     return '角色图片';
   }
   if (layer.assetKind === 'character-animation') {
-    return '角色动作图片';
+    return '角色动作视频';
   }
   if (layer.assetKind === 'icon') {
     return '图标素材图片';
@@ -688,6 +736,9 @@ export function calculateEditorBackgroundMusicPrice(
 }
 
 export function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
+  if (layer.assetKind === 'character-animation' && layer.thumbnailSrc?.trim()) {
+    return layer.thumbnailSrc.trim();
+  }
   // 中文注释：角色图已持久化到 OSS 时优先传 objectKey，避免把大 Data URL 塞进 JSON 请求体触发 body limit。
   return layer.objectKey?.trim() || layer.src;
 }
@@ -1017,7 +1068,7 @@ export function buildEditGenerationInputs(
 export function buildQuickEditGenerationInputs(
   title: '快速编辑提示词' | '重绘提示词',
   prompt: string,
-  sourceLayer: CanvasLayer,
+  _sourceLayer: CanvasLayer,
   references: CharacterReferenceImage[] | undefined,
 ): CanvasGenerationInputs {
   const limitedReferences = (references ?? []).slice(
@@ -1027,13 +1078,10 @@ export function buildQuickEditGenerationInputs(
   return {
     fields: createGenerationInputField(title, prompt),
     references: [
+      // 中文注释：原图作为隐式最后参考图参与生成，但信息面板只展示用户额外选择的参考图。
       ...limitedReferences.flatMap((reference, index) =>
         createGenerationInputReference(`参考图 ${index + 1}`, reference),
       ),
-      ...createLayerGenerationInputReference(
-        `参考图 ${limitedReferences.length + 1}`,
-        sourceLayer,
-      ),
     ],
   };
 }
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 850ff64c0..954c3d6e6 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -31,8 +31,8 @@ import {
   calculateEditorIconSpritesheetPrice,
   calculateEditorSoundEffectPrice,
   calculateEditorVideoPrice,
-  DEFAULT_BACKGROUND_MUSIC_MODEL,
   CHARACTER_ANIMATION_MODEL,
+  DEFAULT_BACKGROUND_MUSIC_MODEL,
   DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
@@ -60,6 +60,10 @@ function isSeedanceVideoModel(model: string) {
   return model === 'seedance2.0' || model === 'seedance2.0-fast';
 }
 
+export function isSeedanceEditorVideoModel(model: string) {
+  return isSeedanceVideoModel(model);
+}
+
 function estimateReferenceRequestBytes(references: Array<{ src: string }>) {
   // 中文注释：JSON 包装字段还有少量额外字节；这里按 src 字符串长度估算，前后端都会再兜底校验 64MB。
   return references.reduce((sum, reference) => sum + reference.src.length, 0);
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
index 5c91d2b68..cdabe319f 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
@@ -67,6 +67,24 @@ describe('ImageCanvasMetadataModalView', () => {
     expect(within(dialog).getByText('generated/object.png')).toBeTruthy();
   });
 
+  it('renders nanobanana2 instead of the raw Gemini image model id', () => {
+    render(
+      <ImageCanvasMetadataModalView
+        layer={createLayer({
+          model: 'gemini-3.1-flash-image-preview',
+        })}
+        onClose={vi.fn()}
+      />,
+    );
+
+    const dialog = screen.getByRole('dialog', { name: '图片信息' });
+
+    expect(within(dialog).getByText('nanobanana2')).toBeTruthy();
+    expect(
+      within(dialog).queryByText('gemini-3.1-flash-image-preview'),
+    ).toBeNull();
+  });
+
   it('renders upload fallback values and closes through the modal shell', () => {
     const onClose = vi.fn();
     render(
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index f7e5f0f0c..093a23a7c 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -1,6 +1,9 @@
 import { UnifiedModal } from '../common/UnifiedModal';
-import { formatLayerImageType } from './ImageCanvasGenerationModel';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import {
+  formatLayerImageType,
+  getEditorImageModelDisplayName,
+} from './ImageCanvasGenerationModel';
 import { formatCanvasDurationMetric } from './ImageCanvasMediaModel';
 
 export type ImageCanvasMetadataModalViewProps = {
@@ -84,7 +87,7 @@ export function ImageCanvasMetadataModalView({
             )}
           </dd>
           <dt>Model</dt>
-          <dd>{layer.model ?? '-'}</dd>
+          <dd>{layer.model ? getEditorImageModelDisplayName(layer.model) : '-'}</dd>
           {layer.mediaType === 'audio' ? (
             <>
               <dt>时长</dt>
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
index a82c48f5a..7639dcb72 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
@@ -32,10 +32,12 @@ function QuickEditPanelHarness({
   initialPanel,
   onSubmit = vi.fn(),
   onRequestUpload = vi.fn(),
+  onRememberImageModel = vi.fn(),
 }: {
   initialPanel: QuickEditPanelState;
   onSubmit?: () => void;
   onRequestUpload?: (target: 'quick-edit-reference') => void;
+  onRememberImageModel?: (model: string) => void;
 }) {
   const [panel, setPanel] = useState<QuickEditPanelState | null>(initialPanel);
   const [isReferenceMenuOpen, setIsReferenceMenuOpen] = useState(false);
@@ -54,11 +56,14 @@ function QuickEditPanelHarness({
         setIsPickingQuickEditReferenceFromCanvas={setIsPickingReference}
         renderEditorPortal={(node) => node}
         onRequestUpload={onRequestUpload}
+        onRememberImageModel={onRememberImageModel}
         setQuickEditPanel={setPanel}
         onSubmit={onSubmit}
       />
       <output aria-label="当前提示词">{panel.prompt}</output>
       <output aria-label="当前尺寸">{panel.size}</output>
+      <output aria-label="当前比例">{panel.aspectRatio ?? '-'}</output>
+      <output aria-label="当前图片规格">{panel.imageSize ?? '-'}</output>
       <output aria-label="当前模型">{panel.model}</output>
       <output aria-label="当前状态">{panel.status}</output>
       <output aria-label="当前错误">{panel.errorMessage ?? '-'}</output>
@@ -75,17 +80,21 @@ function QuickEditPanelHarness({
 }
 
 describe('ImageCanvasQuickEditPanelView', () => {
-  it('updates prompt and clears failed state while keeping fixed options readonly', () => {
+  it('updates prompt and clears failed state while keeping options editable', () => {
+    const rememberImageModel = vi.fn();
     render(
       <QuickEditPanelHarness
         initialPanel={{
           sourceLayerId: 'layer-a',
           prompt: '旧提示',
           size: '1024x1024',
-          model: 'nano',
+          aspectRatio: '1:1',
+          imageSize: '1K',
+          model: 'gemini-3.1-flash-image-preview',
           status: 'failed',
           errorMessage: '失败原因',
         }}
+        onRememberImageModel={rememberImageModel}
       />,
     );
 
@@ -95,23 +104,21 @@ describe('ImageCanvasQuickEditPanelView', () => {
 
     expect(screen.getByLabelText('当前提示词').textContent).toBe('新提示');
     expect(screen.getByLabelText('当前尺寸').textContent).toBe('1024x1024');
-    expect(screen.getByLabelText('当前模型').textContent).toBe('nano');
+    expect(screen.getByLabelText('当前模型').textContent).toBe(
+      'gemini-3.1-flash-image-preview',
+    );
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
-    expect(
-      (
-        screen.getByRole('button', {
-          name: '快速编辑尺寸 1024x1024',
-        }) as HTMLButtonElement
-      ).disabled,
-    ).toBe(true);
-    expect(
-      (
-        screen.getByRole('button', {
-          name: '快速编辑模型 nano',
-        }) as HTMLButtonElement
-      ).disabled,
-    ).toBe(true);
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑尺寸 1:1·1K' }));
+    fireEvent.click(screen.getByRole('button', { name: '比例 16:9' }));
+    fireEvent.click(screen.getByRole('button', { name: '尺寸 2K' }));
+    expect(screen.getByLabelText('当前比例').textContent).toBe('16:9');
+    expect(screen.getByLabelText('当前图片规格').textContent).toBe('2K');
+
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑模型 nanobanana2' }));
+    fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
+    expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
+    expect(rememberImageModel).toHaveBeenCalledWith('gpt-image-2');
   });
 
   it('submits without rendering a standalone close button', () => {
@@ -122,6 +129,8 @@ describe('ImageCanvasQuickEditPanelView', () => {
           sourceLayerId: 'layer-a',
           prompt: '提示',
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           model: 'nano',
           status: 'idle',
         }}
@@ -144,6 +153,8 @@ describe('ImageCanvasQuickEditPanelView', () => {
           sourceLayerId: 'layer-a',
           prompt: '重绘提示',
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           model: 'gpt-image-2',
           status: 'idle',
           mode: 'redraw',
@@ -156,13 +167,15 @@ describe('ImageCanvasQuickEditPanelView', () => {
     );
   });
 
-  it('renders extra references before the source image and removes references from the slot', () => {
+  it('renders only extra references and keeps the implicit source image out of the strip', () => {
     render(
       <QuickEditPanelHarness
         initialPanel={{
           sourceLayerId: 'layer-a',
           prompt: '把原图改成雨天',
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           model: 'gpt-image-2',
           status: 'failed',
           errorMessage: '失败原因',
@@ -174,14 +187,14 @@ describe('ImageCanvasQuickEditPanelView', () => {
     );
 
     expect(screen.getByLabelText('图1')).toBeTruthy();
-    expect(screen.getByLabelText('原图 图2')).toBeTruthy();
+    expect(screen.queryByLabelText('原图 图2')).toBeNull();
 
     fireEvent.click(screen.getByRole('button', { name: '删除图1' }));
 
     expect(screen.getByLabelText('参考图数量').textContent).toBe('0');
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
-    expect(screen.getByLabelText('原图 图1')).toBeTruthy();
+    expect(screen.queryByLabelText('原图 图1')).toBeNull();
   });
 
   it('opens reference source menu and dispatches canvas picking or upload actions', () => {
@@ -192,6 +205,8 @@ describe('ImageCanvasQuickEditPanelView', () => {
           sourceLayerId: 'layer-a',
           prompt: '提示',
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           model: 'gpt-image-2',
           status: 'idle',
           quickEditReferences: [],
@@ -217,6 +232,8 @@ describe('ImageCanvasQuickEditPanelView', () => {
           sourceLayerId: 'layer-a',
           prompt: '提示',
           size: '1024x1024',
+          aspectRatio: '1:1',
+          imageSize: '1K',
           model: 'gpt-image-2',
           status: 'idle',
           quickEditReferences: Array.from({ length: 8 }, (_, index) => ({
@@ -233,6 +250,6 @@ describe('ImageCanvasQuickEditPanelView', () => {
         name: '添加快速编辑参考图',
       }) as HTMLButtonElement).disabled,
     ).toBe(true);
-    expect(screen.getByLabelText('原图 图9')).toBeTruthy();
+    expect(screen.queryByLabelText('原图 图9')).toBeNull();
   });
 });
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
index ab7fde03e..50ab854ac 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
@@ -1,10 +1,13 @@
-import { Cpu, ImageIcon, ImagePlus } from 'lucide-react';
+import { Check, ChevronDown, Cpu, ImageIcon, ImagePlus } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
   type ReactNode,
   type RefObject,
   type SetStateAction,
+  useCallback,
+  useRef,
+  useState,
 } from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
@@ -22,9 +25,16 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   calculateEditorImageModelPrice,
+  EDITOR_IMAGE_DIMENSION_OPTIONS,
+  EDITOR_IMAGE_MODEL_OPTIONS,
+  getEditorImageModelDisplayName,
+  IMAGE_MODEL_NANOBANANA2,
+  normalizeEditorImageModel,
   QUICK_EDIT_REFERENCE_LIMIT,
+  resolveEditorImageSizeLabel,
 } from './ImageCanvasGenerationModel';
 import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
+import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasQuickEditPanelViewProps = {
   panel: QuickEditPanelState;
@@ -41,9 +51,12 @@ type ImageCanvasQuickEditPanelViewProps = {
     placement: 'above' | 'below',
   ) => CSSProperties;
   onRequestUpload?: (target: 'quick-edit-reference') => void;
+  onRememberImageModel?: (model: string) => void;
   onSubmit: () => void;
 };
 
+type OpenPanel = 'dimensions' | 'model' | null;
+
 function resetFailedPanelStatus<T extends { status: string; errorMessage?: string }>(
   panel: T,
 ) {
@@ -78,9 +91,63 @@ function QuickEditReferenceChip({
   );
 }
 
+function getImageDimensionOptions(model: string | null | undefined) {
+  return (
+    EDITOR_IMAGE_DIMENSION_OPTIONS[
+      (normalizeEditorImageModel(model) ??
+        IMAGE_MODEL_NANOBANANA2) as keyof typeof EDITOR_IMAGE_DIMENSION_OPTIONS
+    ] ?? EDITOR_IMAGE_DIMENSION_OPTIONS[IMAGE_MODEL_NANOBANANA2]
+  );
+}
+
+function getPanelAspectRatio(panel: QuickEditPanelState) {
+  const options = getImageDimensionOptions(panel.model);
+  const aspectRatios = options.aspectRatios as readonly string[];
+  return panel.aspectRatio && aspectRatios.includes(panel.aspectRatio)
+    ? panel.aspectRatio
+    : (options.aspectRatios[0] ?? '1:1');
+}
+
+function getPanelImageSize(panel: QuickEditPanelState) {
+  const options = getImageDimensionOptions(panel.model);
+  const imageSizes = options.imageSizes as readonly string[];
+  return panel.imageSize && imageSizes.includes(panel.imageSize)
+    ? panel.imageSize
+    : (options.imageSizes.find((size) => size === '1K') ??
+        options.imageSizes[0] ??
+        '1K');
+}
+
+function QuickEditOptionChoice({
+  children,
+  selected,
+  className,
+  ariaLabel,
+  onClick,
+}: {
+  children: ReactNode;
+  selected: boolean;
+  className?: string;
+  ariaLabel?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={['image-canvas-editor__option-popover-choice', className]
+        .filter(Boolean)
+        .join(' ')}
+      aria-pressed={selected}
+      aria-label={ariaLabel}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
 export function ImageCanvasQuickEditPanelView({
   panel,
-  sourceLayer,
   style,
   referenceButtonRef,
   isReferenceMenuOpen = false,
@@ -90,16 +157,79 @@ export function ImageCanvasQuickEditPanelView({
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
   onRequestUpload = () => {},
+  onRememberImageModel = () => {},
   onSubmit,
 }: ImageCanvasQuickEditPanelViewProps) {
+  const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
+  const dimensionsButtonRef = useRef<HTMLButtonElement | null>(null);
+  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
   const isRedraw = panel.mode === 'redraw';
   const isGenerating = panel.status === 'generating';
   const panelLabel = isRedraw ? '重绘图片' : '快速编辑图片';
   const promptLabel = isRedraw ? '重绘提示词' : '快速编辑提示词';
   const references = panel.quickEditReferences ?? [];
-  const sourceReferenceIndex = references.length + 1;
+  const selectedModel = normalizeEditorImageModel(panel.model);
+  const selectedModelLabel = getEditorImageModelDisplayName(selectedModel);
+  const dimensionOptions = getImageDimensionOptions(selectedModel);
+  const selectedAspectRatio = getPanelAspectRatio(panel);
+  const selectedImageSize = getPanelImageSize(panel);
+  const dimensionLabel = resolveEditorImageSizeLabel({
+    aspectRatio: selectedAspectRatio,
+    imageSize: selectedImageSize,
+  });
   const canAddReferences =
     !isRedraw && !isGenerating && references.length < QUICK_EDIT_REFERENCE_LIMIT;
+  const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
+
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: openPanel !== null,
+    boundaryRefs: [dimensionsButtonRef, modelButtonRef],
+    onDismiss: dismissOpenPanel,
+  });
+
+  const updatePanel = (patch: Partial<QuickEditPanelState>) => {
+    setQuickEditPanel((currentPanel) =>
+      currentPanel
+        ? {
+            ...resetFailedPanelStatus(currentPanel),
+            ...patch,
+          }
+        : currentPanel,
+    );
+  };
+
+  const updateModel = (model: string) => {
+    const nextOptions = getImageDimensionOptions(model);
+    const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
+    const nextImageSizes = nextOptions.imageSizes as readonly string[];
+    onRememberImageModel(model);
+    setQuickEditPanel((currentPanel) => {
+      if (!currentPanel) {
+        return currentPanel;
+      }
+      return {
+        ...resetFailedPanelStatus(currentPanel),
+        model,
+        aspectRatio:
+          currentPanel.aspectRatio &&
+          nextAspectRatios.includes(currentPanel.aspectRatio)
+            ? currentPanel.aspectRatio
+            : (nextOptions.aspectRatios[0] ?? '1:1'),
+        imageSize:
+          currentPanel.imageSize && nextImageSizes.includes(currentPanel.imageSize)
+            ? currentPanel.imageSize
+            : (nextOptions.imageSizes.find((size) => size === '1K') ??
+              nextOptions.imageSizes[0]),
+      };
+    });
+  };
+
+  const togglePanel = (nextPanel: Exclude<OpenPanel, null>) => {
+    setOpenPanel((currentPanel) =>
+      currentPanel === nextPanel ? null : nextPanel,
+    );
+  };
+
   return (
     <>
       <form
@@ -147,14 +277,6 @@ export function ImageCanvasQuickEditPanelView({
               onClick={() => setIsReferenceMenuOpen?.((open) => !open)}
             />
           ) : null}
-          <ImageCanvasReferenceSlot
-            tone="quick-edit"
-            icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-            imageSrc={sourceLayer.src}
-            label={`图${sourceReferenceIndex}`}
-            ariaLabel={`原图 图${sourceReferenceIndex}`}
-            title={sourceLayer.title}
-          />
         </div>
         <PlatformTextField
           variant="textarea"
@@ -165,14 +287,9 @@ export function ImageCanvasQuickEditPanelView({
           density="compact"
           className="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
           onChange={(event) =>
-            setQuickEditPanel((currentPanel) =>
-              currentPanel
-                ? {
-                    ...resetFailedPanelStatus(currentPanel),
-                    prompt: event.target.value,
-                  }
-                : currentPanel,
-            )
+            updatePanel({
+              prompt: event.target.value,
+            })
           }
         />
         {panel.status === 'failed' ? (
@@ -187,20 +304,85 @@ export function ImageCanvasQuickEditPanelView({
           </PlatformStatusMessage>
         ) : null}
         <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer">
-          <div className="image-canvas-editor__readonly-generation-option">
+          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
             <PlatformInlineOptionButton
+              ref={dimensionsButtonRef}
               className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}尺寸 ${panel.size}`}
-              disabled
+              aria-label={`${isRedraw ? '重绘' : '快速编辑'}尺寸 ${dimensionLabel}`}
+              aria-expanded={openPanel === 'dimensions'}
+              disabled={isGenerating}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+              onClick={() => togglePanel('dimensions')}
             >
-              {panel.size}
+              {dimensionLabel}
             </PlatformInlineOptionButton>
+            {openPanel === 'dimensions'
+              ? renderEditorPortal(
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+                    label={`${isRedraw ? '重绘' : '快速编辑'}尺寸选项`}
+                    placement="top-start"
+                    style={buildPortalMenuStyle(
+                      dimensionsButtonRef.current,
+                      'above',
+                    )}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  >
+                    <div className="image-canvas-editor__option-popover-sections">
+                      <div className="image-canvas-editor__option-popover-section">
+                        <span className="image-canvas-editor__option-popover-title">
+                          比例
+                        </span>
+                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
+                          {dimensionOptions.aspectRatios.map((aspectRatio) => (
+                            <QuickEditOptionChoice
+                              key={aspectRatio}
+                              selected={selectedAspectRatio === aspectRatio}
+                              className="image-canvas-editor__option-popover-choice--ratio"
+                              ariaLabel={`比例 ${aspectRatio}`}
+                              onClick={() => updatePanel({ aspectRatio })}
+                            >
+                              <span
+                                className="image-canvas-editor__ratio-wireframe"
+                                data-ratio={aspectRatio}
+                                aria-hidden="true"
+                              />
+                              <span>{aspectRatio}</span>
+                            </QuickEditOptionChoice>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="image-canvas-editor__option-popover-section">
+                        <span className="image-canvas-editor__option-popover-title">
+                          尺寸
+                        </span>
+                        <div className="image-canvas-editor__option-popover-items">
+                          {dimensionOptions.imageSizes.map((imageSize) => (
+                            <QuickEditOptionChoice
+                              key={imageSize}
+                              selected={selectedImageSize === imageSize}
+                              ariaLabel={`尺寸 ${imageSize}`}
+                              onClick={() => updatePanel({ imageSize })}
+                            >
+                              {imageSize}
+                            </QuickEditOptionChoice>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </PlatformFloatingMenu>,
+                )
+              : null}
           </div>
-          <div className="image-canvas-editor__readonly-generation-option">
+          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
             <PlatformInlineOptionButton
+              ref={modelButtonRef}
               className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}模型 ${panel.model}`}
-              disabled
+              aria-label={`${isRedraw ? '重绘' : '快速编辑'}模型 ${selectedModelLabel}`}
+              aria-expanded={openPanel === 'model'}
+              disabled={isGenerating}
+              trailingIcon={<ChevronDown className="h-3 w-3" />}
+              onClick={() => togglePanel('model')}
             >
               <span className="image-canvas-editor__model-trigger-label">
                 <span
@@ -209,9 +391,47 @@ export function ImageCanvasQuickEditPanelView({
                 >
                   <Cpu />
                 </span>
-                <span>{panel.model}</span>
+                <span>{selectedModelLabel}</span>
               </span>
             </PlatformInlineOptionButton>
+            {openPanel === 'model'
+              ? renderEditorPortal(
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
+                    label={`${isRedraw ? '重绘' : '快速编辑'}模型选项`}
+                    placement="top-start"
+                    style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  >
+                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                      {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
+                        const selected = selectedModel === option.value;
+                        return (
+                          <QuickEditOptionChoice
+                            key={option.value}
+                            selected={selected}
+                            className="image-canvas-editor__option-popover-choice--model"
+                            onClick={() => updateModel(option.value)}
+                          >
+                            <span
+                              className="image-canvas-editor__model-icon"
+                              aria-hidden="true"
+                            >
+                              <Cpu />
+                            </span>
+                            <span>{option.label}</span>
+                            <Check
+                              className="image-canvas-editor__option-selected-check"
+                              data-visible={selected}
+                              aria-hidden="true"
+                            />
+                          </QuickEditOptionChoice>
+                        );
+                      })}
+                    </div>
+                  </PlatformFloatingMenu>,
+                )
+              : null}
           </div>
           <PlatformActionButton
             type="submit"
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index f1eb5f4db..d2f843139 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -92,6 +92,11 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     expect(
       within(toolbar).queryByRole('button', { name: '提取素材' }),
     ).toBeNull();
+    expect(
+      within(toolbar)
+        .getByRole('button', { name: '去除背景按钮' })
+        .querySelector('.lucide-image-off'),
+    ).toBeTruthy();
   });
 
   it('renders UI design asset extraction after remove background', () => {
@@ -156,8 +161,12 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
       assetKind: 'character',
     });
     const props = renderSelectedToolbar({ selectedLayer: layer });
+    const animationButton = screen.getByRole('button', { name: '生成动画' });
 
-    fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
+    expect(animationButton.textContent).toContain('生成动画');
+    expect(animationButton.querySelector('.lucide-person-standing')).toBeTruthy();
+
+    fireEvent.click(animationButton);
 
     expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
 
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index c248de89a..c7f22d13a 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -1,7 +1,8 @@
 import {
   Crop,
   Download,
-  Eraser,
+  ImageOff,
+  PersonStanding,
   Scissors,
   Sparkles,
   WandSparkles,
@@ -97,7 +98,7 @@ export function ImageCanvasSelectedLayerToolbarView({
       <EditorIconButton
         label="去除背景按钮"
         title="去除背景按钮"
-        icon={Eraser}
+        icon={ImageOff}
         onClick={() => onRemoveBackground(selectedLayer)}
       />
       {selectedLayer.assetKind === 'ui-design' ? (
@@ -112,12 +113,15 @@ export function ImageCanvasSelectedLayerToolbarView({
         </PlatformIconButton>
       ) : null}
       {selectedLayer.assetKind === 'character' ? (
-        <EditorIconButton
+        <PlatformIconButton
+          className="image-canvas-editor__floating-toolbar-text-button"
           label="生成动画"
           title="生成动画"
-          icon={Sparkles}
+          icon={<PersonStanding className="h-4 w-4" />}
           onClick={() => onOpenCharacterAnimationPanel(selectedLayer)}
-        />
+        >
+          <span>生成动画</span>
+        </PlatformIconButton>
       ) : null}
       <span
         aria-hidden="true"
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index 12798f497..6c93ebd9a 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -1,4 +1,4 @@
-/* @vitest-environment jsdom */
+/* @vitest-environment jsdom */
 
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { createRef, useState } from 'react';
@@ -90,7 +90,7 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     const submitButton = screen.getByRole('button', { name: '提交生成规范' });
     expect(submitButton.textContent).toBe('生成5泥点');
     const dimensionsButton = screen.getByRole('button', {
-      name: '生成图片尺寸 16:9 · 2K',
+      name: '生成图片尺寸 16:9·2K',
     }) as HTMLButtonElement;
     const modelButton = screen.getByRole('button', {
       name: '生成图片模型 gpt-image-2',
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 6f783d7a5..8860b8a57 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -26,15 +26,17 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
-import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import {
   calculateEditorSpecGenerationPrice,
   calculateEditorUiDesignPrice,
   CHARACTER_SPEC_VIEW_OPTIONS,
+  getEditorImageModelDisplayName,
+  resolveEditorImageSizeLabel,
   SPEC_GENERATION_ASPECT_RATIO,
   SPEC_GENERATION_IMAGE_SIZE,
   SPEC_GENERATION_MODEL,
 } from './ImageCanvasGenerationModel';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
 type ImageCanvasSpecGenerationPanelViewProps = {
@@ -74,6 +76,11 @@ export function ImageCanvasSpecGenerationPanelView({
   onSubmit,
 }: ImageCanvasSpecGenerationPanelViewProps) {
   const isUiDesignDialog = dialog.mode === 'ui-design';
+  const specSizeLabel = resolveEditorImageSizeLabel({
+    aspectRatio: SPEC_GENERATION_ASPECT_RATIO,
+    imageSize: SPEC_GENERATION_IMAGE_SIZE,
+  });
+  const specModelLabel = getEditorImageModelDisplayName(SPEC_GENERATION_MODEL);
   const referenceLabel = isUiDesignDialog ? 'UI设计图标规范' : '参考图';
   const referenceSlotLabel = isUiDesignDialog
     ? '图标规范'
@@ -364,16 +371,16 @@ export function ImageCanvasSpecGenerationPanelView({
             <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions image-canvas-editor__readonly-generation-option">
               <PlatformInlineOptionButton
                 className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-                aria-label={`生成图片尺寸 ${SPEC_GENERATION_ASPECT_RATIO} · ${SPEC_GENERATION_IMAGE_SIZE}`}
+                aria-label={`生成图片尺寸 ${specSizeLabel}`}
                 disabled
               >
-                {SPEC_GENERATION_ASPECT_RATIO} · {SPEC_GENERATION_IMAGE_SIZE}
+                {specSizeLabel}
               </PlatformInlineOptionButton>
             </div>
             <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model image-canvas-editor__readonly-generation-option">
               <PlatformInlineOptionButton
                 className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-                aria-label={`生成图片模型 ${SPEC_GENERATION_MODEL}`}
+                aria-label={`生成图片模型 ${specModelLabel}`}
                 disabled
               >
                 <span className="image-canvas-editor__model-trigger-label">
@@ -383,7 +390,7 @@ export function ImageCanvasSpecGenerationPanelView({
                   >
                     <Cpu />
                   </span>
-                  <span>{SPEC_GENERATION_MODEL}</span>
+                  <span>{specModelLabel}</span>
                 </span>
               </PlatformInlineOptionButton>
             </div>
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 308441501..d3409b1c0 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -32,6 +32,7 @@ const extractEditorUiDesignAssetsMock = vi.hoisted(() => vi.fn());
 const generateEditorCharacterAnimationMock = vi.hoisted(() => vi.fn());
 const generateEditorIconSpritesheetMock = vi.hoisted(() => vi.fn());
 const generateEditorImageMock = vi.hoisted(() => vi.fn());
+const generateEditorVideoMock = vi.hoisted(() => vi.fn());
 
 vi.mock('../../services/image-editor/editorImageReference', () => ({
   resolveEditorImageReferenceDataUrl: resolveEditorImageReferenceDataUrlMock,
@@ -50,6 +51,7 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     generateEditorCharacterAnimation: generateEditorCharacterAnimationMock,
     generateEditorIconSpritesheet: generateEditorIconSpritesheetMock,
     generateEditorImage: generateEditorImageMock,
+    generateEditorVideo: generateEditorVideoMock,
   };
 });
 
@@ -86,6 +88,22 @@ function createGenerated(overrides = {}) {
   };
 }
 
+function createVideoGenerated(overrides = {}) {
+  return {
+    videoSrc: 'https://assets.example.test/generated-video.mp4',
+    width: 854,
+    height: 480,
+    sourceType: 'generated' as const,
+    prompt: '视频提示词',
+    actualPrompt: '视频提示词',
+    model: 'seedance2.0-fast',
+    provider: 'ark',
+    taskId: 'task-video-generated',
+    priceMudPoints: 40,
+    ...overrides,
+  };
+}
+
 function createIconResult(name: string, imageSrc: string) {
   return {
     name,
@@ -175,7 +193,7 @@ function SubmissionWorkflowHarness({
         {layers
           .map(
             (layer) =>
-              `${layer.id}:${layer.title}:${layer.sourceResourceId ?? '-'}:${layer.assetKind ?? '-'}`,
+              `${layer.id}:${layer.title}:${layer.sourceResourceId ?? '-'}:${layer.assetKind ?? '-'}:${layer.mediaType ?? '-'}:${layer.src}:${layer.thumbnailSrc ?? '-'}:${layer.durationSeconds ?? '-'}`,
           )
           .join('|')}
       </span>
@@ -300,6 +318,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     generateEditorCharacterAnimationMock.mockReset();
     generateEditorIconSpritesheetMock.mockReset();
     generateEditorImageMock.mockReset();
+    generateEditorVideoMock.mockReset();
     resolveEditorImageReferenceDataUrlMock.mockImplementation(
       async (src: string) => `data:image/png;base64,${src.split('/').pop()}`,
     );
@@ -327,6 +346,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         expect.objectContaining({
           prompt: '快速修图',
           size: '1024x768',
+          aspectRatio: '4:3',
+          imageSize: '1K',
           kind: 'quick-edit',
           model: 'gemini-3.1-flash-image-preview',
           referenceImageSrcs: ['data:image/png;base64,source.png'],
@@ -400,6 +421,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         expect.objectContaining({
           prompt: '角色换成蓝色披风',
           size: '1024x768',
+          aspectRatio: '4:3',
+          imageSize: '1K',
           kind: 'character',
           model: 'gpt-image-2',
           referenceImageSrcs: ['data:image/png;base64,source.png'],
@@ -417,6 +440,146 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
+  it('submits video quick edits through the video API with the source video as the hidden last reference', async () => {
+    generateEditorVideoMock.mockResolvedValueOnce(
+      createVideoGenerated({ prompt: '把图2改成雨天' }),
+    );
+    render(
+      <SubmissionWorkflowHarness
+        initialLayers={[
+          createLayer({
+            title: '源视频',
+            src: 'https://assets.example.test/source.mp4',
+            objectKey: 'generated-character-drafts/editor/videos/source.mp4',
+            mediaType: 'video',
+            assetKind: 'video',
+            model: 'gpt-image-2',
+            originalWidth: 854,
+            originalHeight: 480,
+            width: 427,
+            height: 240,
+          }),
+        ]}
+        initialQuickEditPanel={{
+          mode: 'quick-edit',
+          sourceLayerId: 'layer-source',
+          prompt: '把当前图改成雨天',
+          size: '854x480',
+          model: 'gpt-image-2',
+          status: 'idle',
+          quickEditReferences: [
+            {
+              id: 'ref-style',
+              label: '风格参考',
+              src: 'https://assets.example.test/style.png',
+            },
+          ],
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '提交快速编辑' }));
+
+    await waitFor(() => {
+      expect(generateEditorVideoMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          prompt: '把图2改成雨天',
+          model: 'seedance2.0-fast',
+          aspectRatio: '16:9',
+          durationSeconds: 4,
+          resolution: '480p',
+          mode: 'std',
+          sound: 'off',
+          priceMudPoints: 40,
+          referenceImageSrcs: ['data:image/png;base64,style.png'],
+          referenceVideoSrcs: [
+            'generated-character-drafts/editor/videos/source.mp4',
+          ],
+        }),
+      );
+    });
+    expect(generateEditorImageMock).not.toHaveBeenCalled();
+    expect(generateEditorCharacterAnimationMock).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.getByTestId('layers').textContent).toContain(
+        'layer-video-1:源视频 快速编辑:resource-source:video:video:https://assets.example.test/generated-video.mp4',
+      );
+    });
+  });
+
+  it('submits character action quick edits through seedance fast character animation generation', async () => {
+    generateEditorCharacterAnimationMock.mockResolvedValueOnce({
+      taskId: 'action-quick-edit-task',
+      model: 'seedance2.0-fast',
+      prompt: '让图1跳得更高',
+      previewVideoPath: '/generated-character-drafts/editor/action-preview.mp4',
+      frames: [
+        {
+          frameIndex: 1,
+          imageSrc: 'data:image/png;base64,action-frame-edited',
+          width: 1024,
+          height: 1024,
+        },
+      ],
+      frameCount: 32,
+      durationSeconds: 4,
+      fps: 8,
+      priceMudPoints: 40,
+    });
+    render(
+      <SubmissionWorkflowHarness
+        initialLayers={[
+          createLayer({
+            title: '角色动作',
+            src: 'https://assets.example.test/action-preview.mp4',
+            mediaType: 'video',
+            thumbnailSrc:
+              'generated-character-drafts/editor/actions/frame.png',
+            assetKind: 'character-animation',
+            model: 'seedance2.0',
+            originalWidth: 1024,
+            originalHeight: 1024,
+            width: 420,
+            height: 420,
+          }),
+        ]}
+        initialQuickEditPanel={{
+          mode: 'quick-edit',
+          sourceLayerId: 'layer-source',
+          prompt: '让当前图跳得更高',
+          size: '1024x1024',
+          model: 'gpt-image-2',
+          status: 'idle',
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '提交快速编辑' }));
+
+    await waitFor(() => {
+      expect(generateEditorCharacterAnimationMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sourceLayerId: 'layer-source',
+          sourceImageSrc: 'generated-character-drafts/editor/actions/frame.png',
+          promptText: '让图1跳得更高',
+          resolution: '480p',
+          ratio: 'same',
+          frameCount: 32,
+          durationSeconds: 4,
+          priceMudPoints: 40,
+          model: 'seedance2.0-fast',
+        }),
+      );
+    });
+    expect(generateEditorImageMock).not.toHaveBeenCalled();
+    expect(generateEditorVideoMock).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.getByTestId('layers').textContent).toContain(
+        'layer-character-animation-1:角色动作 快速编辑:resource-source:character-animation:video:/generated-character-drafts/editor/action-preview.mp4:data:image/png;base64,action-frame-edited:4',
+      );
+    });
+  });
+
   it('submits edit dialogs beside the source and clears the modal state', async () => {
     editEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '修改当前图片' }),
@@ -952,7 +1115,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     });
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-character-animation-1:角色动作:-:character-animation',
+        'layer-character-animation-1:角色动作:resource-source:character-animation:video:/generated-character-drafts/editor/preview.mp4:data:image/png;base64,action-frame:4',
       );
     });
     expect(screen.getByTestId('dialog').textContent).toBe(
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index b8d1881c9..b90fcd4f3 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -10,6 +10,7 @@ import {
   resolveEditorImageReferenceDataUrl,
   resolveEditorImageReferenceDataUrlForGeneration,
 } from '../../services/image-editor/editorImageReference';
+import type { EditorAssetSnapshot } from '../../services/image-editor/editorProjectClient';
 import {
   editEditorImage,
   extractEditorUiDesignAssets,
@@ -20,7 +21,6 @@ import {
   generateEditorSoundEffect,
   generateEditorVideo,
 } from '../../services/image-editor/editorProjectClient';
-import type { EditorAssetSnapshot } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
   CanvasGenerationInputs,
@@ -32,6 +32,7 @@ import type {
   QuickEditPanelState,
   SidebarPanel,
 } from './ImageCanvasEditorTypes';
+import { createQuickEditGenerationDialogDraft } from './ImageCanvasGenerationDialogModel';
 import {
   createAudioResultLayer,
   createCharacterAnimationResultLayer,
@@ -45,14 +46,22 @@ import {
   buildEditGenerationInputs,
   buildQuickEditGenerationInputs,
   buildUiDesignAssetExtractionGenerationInputs,
+  buildVideoGenerationInputs,
+  calculateCharacterAnimationPrice,
+  calculateEditorVideoPrice,
+  CHARACTER_ANIMATION_MODEL,
+  DEFAULT_VIDEO_MODEL,
   ICON_FRAME_DISPLAY_SIZE,
   ICON_FRAME_ORIGINAL_SIZE,
+  inferEditorImageAspectRatio,
+  inferEditorImageSizeLabel,
   isCanvasGenerationDialog,
   normalizeEditorImageModel,
   normalizeQuickEditPromptSourceReference,
+  resolveCharacterAnimationSourceImageSrc,
+  resolveEditorImageGenerationPixelSize,
   resolveImageGenerationErrorMessage,
 } from './ImageCanvasGenerationModel';
-import { createQuickEditGenerationDialogDraft } from './ImageCanvasGenerationDialogModel';
 import {
   buildCharacterAnimationSubmissionPlan,
   buildIconSpritesheetGenerationSubmissionPlan,
@@ -122,6 +131,14 @@ async function normalizePublicationReferenceImages(
   };
 }
 
+function isVideoQuickEditSource(layer: CanvasLayer) {
+  return layer.mediaType === 'video' || layer.assetKind === 'video';
+}
+
+function isCharacterAnimationQuickEditSource(layer: CanvasLayer) {
+  return layer.assetKind === 'character-animation';
+}
+
 export function useImageCanvasGenerationSubmissionWorkflow({
   layers,
   canvasSize,
@@ -361,6 +378,10 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       generationInputs: CanvasGenerationInputs,
       frame?: GenerateDialogState['placeholder'],
       dialogId?: string,
+      options: {
+        sourceLayer?: CanvasLayer;
+        assetKind?: CanvasLayer['assetKind'];
+      } = {},
     ) => {
       if (dialogId && !hasCanvasGenerationDialogById(dialogId)) {
         return;
@@ -375,6 +396,8 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         viewport,
         generationInputs,
         frame,
+        sourceLayer: options.sourceLayer,
+        assetKind: options.assetKind,
       });
 
       addGeneratedLayersToCanvas([nextLayer]);
@@ -463,6 +486,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       generationInputs: CanvasGenerationInputs,
       frame?: GenerateDialogState['placeholder'],
       dialogId?: string,
+      options: {
+        sourceLayer?: CanvasLayer;
+      } = {},
     ) => {
       if (dialogId && !hasCanvasGenerationDialogById(dialogId)) {
         return;
@@ -477,6 +503,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         viewport,
         generationInputs,
         frame,
+        sourceLayer: options.sourceLayer,
       });
 
       if (!nextLayer) {
@@ -642,6 +669,24 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     const quickEditReferences =
       panelMode === 'redraw' ? [] : (quickEditPanel.quickEditReferences ?? []);
     const sourceReferenceIndex = quickEditReferences.length + 1;
+    const quickEditAspectRatio =
+      quickEditPanel.aspectRatio ??
+      inferEditorImageAspectRatio(
+        quickEditSourceLayer.originalWidth,
+        quickEditSourceLayer.originalHeight,
+      );
+    const quickEditImageSize =
+      quickEditPanel.imageSize ??
+      inferEditorImageSizeLabel(
+        quickEditSourceLayer.originalWidth,
+        quickEditSourceLayer.originalHeight,
+      );
+    const quickEditOutputSize = resolveEditorImageGenerationPixelSize({
+      model: quickEditPanel.model,
+      aspectRatio: quickEditAspectRatio,
+      imageSize: quickEditImageSize,
+    });
+    const quickEditSize = `${quickEditOutputSize.width}x${quickEditOutputSize.height}`;
     const basePrompt =
       quickEditPanel.prompt.trim() ||
       (panelMode === 'redraw' ? '重绘图片' : '快速编辑图片');
@@ -660,6 +705,13 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           prompt: normalizedPrompt,
           status: 'generating',
           references: quickEditReferences,
+          model: quickEditPanel.model,
+          aspectRatio: quickEditAspectRatio,
+          imageSize: quickEditImageSize,
+          frame: {
+            width: quickEditOutputSize.width,
+            height: quickEditOutputSize.height,
+          },
         }),
       );
       setQuickEditPanel(null);
@@ -667,6 +719,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     } else {
       setQuickEditPanel({
         ...quickEditPanel,
+        aspectRatio: quickEditAspectRatio,
+        imageSize: quickEditImageSize,
+        size: quickEditSize,
         prompt: normalizedPrompt,
         status: 'generating',
         errorMessage: undefined,
@@ -681,6 +736,97 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           ),
         ),
       );
+      const quickEditFrame = quickEditDialogId
+        ? getGeneratingDialogPlaceholder({
+            id: quickEditDialogId,
+            mode: 'quick-edit',
+            prompt: normalizedPrompt,
+            status: 'generating',
+          })
+        : undefined;
+      if (
+        panelMode === 'quick-edit' &&
+        isCharacterAnimationQuickEditSource(quickEditSourceLayer)
+      ) {
+        const animationResolution = '480p' as const;
+        const animationDurationSeconds = 4 as const;
+        const animationFrameCount = 32 as const;
+        const generationInputs = buildCharacterAnimationGenerationInputs(
+          normalizedPrompt,
+          quickEditSourceLayer,
+        );
+        const generated = await generateEditorCharacterAnimation({
+          sourceLayerId: quickEditSourceLayer.id,
+          sourceImageSrc: resolveCharacterAnimationSourceImageSrc(
+            quickEditSourceLayer,
+          ),
+          sourceWidth: quickEditSourceLayer.originalWidth,
+          sourceHeight: quickEditSourceLayer.originalHeight,
+          promptText: normalizedPrompt,
+          resolution: animationResolution,
+          ratio: 'same',
+          frameCount: animationFrameCount,
+          durationSeconds: animationDurationSeconds,
+          priceMudPoints: calculateCharacterAnimationPrice(
+            CHARACTER_ANIMATION_MODEL,
+            animationResolution,
+            animationDurationSeconds,
+          ),
+          model: CHARACTER_ANIMATION_MODEL,
+        });
+        addCharacterAnimationResultLayer(
+          generated,
+          `${quickEditSourceLayer.title} 快速编辑`,
+          generationInputs,
+          quickEditFrame,
+          quickEditDialogId,
+          {
+            sourceLayer: quickEditSourceLayer,
+          },
+        );
+        return;
+      }
+      if (panelMode === 'quick-edit' && isVideoQuickEditSource(quickEditSourceLayer)) {
+        const videoModel = DEFAULT_VIDEO_MODEL;
+        const videoResolution = '480p' as const;
+        const videoDurationSeconds = 4 as const;
+        const sourceVideoSrc =
+          quickEditSourceLayer.objectKey?.trim() || quickEditSourceLayer.src;
+        const generationInputs = buildVideoGenerationInputs(
+          normalizedPrompt,
+          quickEditReferences,
+        );
+        const generated = await generateEditorVideo({
+          prompt: normalizedPrompt,
+          model: videoModel,
+          aspectRatio: '16:9',
+          durationSeconds: videoDurationSeconds,
+          resolution: videoResolution,
+          mode: 'std',
+          sound: 'off',
+          priceMudPoints: calculateEditorVideoPrice(
+            videoModel,
+            videoResolution,
+            videoDurationSeconds,
+          ),
+          ...(extraReferenceImageSrcs.length
+            ? { referenceImageSrcs: extraReferenceImageSrcs }
+            : {}),
+          referenceVideoSrcs: [sourceVideoSrc],
+        });
+        addVideoResultLayer(
+          generated,
+          `${quickEditSourceLayer.title} 快速编辑`,
+          generationInputs,
+          quickEditFrame,
+          quickEditDialogId,
+          {
+            sourceLayer: quickEditSourceLayer,
+            assetKind: quickEditSourceLayer.assetKind,
+          },
+        );
+        return;
+      }
       const sourceReferenceImageSrc = await resolveEditorImageReferenceDataUrl(
         quickEditSourceLayer.objectKey?.trim() || quickEditSourceLayer.src,
       );
@@ -701,7 +847,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         panelMode === 'redraw' && quickEditSourceLayer.assetKind === 'character';
       const generated = await generateEditorImage({
         prompt: normalizedPrompt,
-        size: quickEditPanel.size,
+        size: quickEditSize,
+        aspectRatio: quickEditAspectRatio,
+        imageSize: quickEditImageSize,
         kind: isCharacterRedraw ? 'character' : 'quick-edit',
         model: normalizeEditorImageModel(quickEditPanel.model),
         referenceImageSrcs: [
@@ -724,12 +872,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         panelMode,
         quickEditDialogId
           ? {
-              frame: getGeneratingDialogPlaceholder({
-                id: quickEditDialogId,
-                mode: 'quick-edit',
-                prompt: normalizedPrompt,
-                status: 'generating',
-              }),
+              frame: quickEditFrame,
               dialogId: quickEditDialogId,
             }
           : {},
@@ -746,19 +889,25 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       }
       setQuickEditPanel({
         ...quickEditPanel,
+        aspectRatio: quickEditAspectRatio,
+        imageSize: quickEditImageSize,
+        size: quickEditSize,
         prompt: normalizedPrompt,
         status: 'failed',
         errorMessage: resolveImageGenerationErrorMessage(error),
       });
     }
   }, [
+    addCharacterAnimationResultLayer,
     addQuickEditResultLayer,
+    addVideoResultLayer,
     getGeneratingDialogPlaceholder,
     openCanvasGenerationDialog,
     projectId,
     assetFolderId,
     quickEditPanel,
     quickEditSourceLayer,
+    selectSingleLayer,
     setQuickEditPanel,
     updateCanvasGenerationDialogById,
   ]);
@@ -945,6 +1094,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           ),
           getGeneratingDialogPlaceholder(canvasDialog),
           canvasDialog.id,
+          {
+            sourceLayer: characterAnimationSourceLayer,
+          },
         );
         return;
       }
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index aecca849e..fb6ed3bf5 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -726,6 +726,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       expect(generateEditorImageMock).toHaveBeenCalledWith({
         prompt: '快速修图',
         size: '1024x768',
+        aspectRatio: '4:3',
+        imageSize: '1K',
         kind: 'quick-edit',
         model: 'gemini-3.1-flash-image-preview',
         referenceImageSrcs: ['data:image/png;base64,source'],
@@ -736,14 +738,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         sourceResourceId: 'resource-source',
         generationInputs: {
           fields: [{ title: '快速编辑提示词', value: '快速修图' }],
-          references: [
-            {
-              title: '参考图 1',
-              label: '源图',
-              refType: 'project-resource',
-              refId: 'resource-source',
-            },
-          ],
+          references: [],
         },
       });
     });
diff --git a/src/index.css b/src/index.css
index 1bb7c5224..dcae4f179 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6974,7 +6974,17 @@ button.image-canvas-editor__reference-chip:disabled {
 }
 
 .image-canvas-editor__quick-edit-footer {
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+}
+
+.image-canvas-editor__quick-edit-footer
+  .image-canvas-editor__option-popover-anchor--model {
+  grid-column: 3;
+}
+
+.image-canvas-editor__quick-edit-footer
+  .image-canvas-editor__generation-submit {
+  grid-column: 4;
 }
 
 .image-canvas-editor__crop-expand-panel {