From 1575afc92c7d8e27c718aa9df82b6270e30c68ef Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Mon, 10 Aug 2026 20:14:09 +0800
Subject: [PATCH 01/15] =?UTF-8?q?Spine=E5=BA=8F=E5=88=97=E5=B8=A7=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E5=A4=9A=E6=A8=A1=E6=80=81=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md                                |    1 +
 docs/project-memory/shared-memory/pitfalls.md |    9 +
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |  829 ++++++++
 .../src/contracts/editorCharacterAnimation.ts |   12 +
 packages/shared/src/index.ts                  |    1 +
 server-rs/Cargo.lock                          |    1 +
 server-rs/crates/api-server/src/app.rs        |   25 +
 .../src/character_animation_assets.rs         | 1784 +++++++++++++----
 .../crates/api-server/src/editor_project.rs   |   38 +-
 .../src/editor_sequence_animation.rs          | 1201 +++++++++++
 .../api-server/src/external_editor_api.rs     |  123 +-
 server-rs/crates/api-server/src/main.rs       |    1 +
 .../src/modules/platform_support.rs           |    7 +
 server-rs/crates/module-assets/Cargo.toml     |    1 +
 .../module-assets/src/character_animation.rs  |   95 +
 server-rs/crates/module-assets/src/lib.rs     |    5 +
 .../crates/shared-contracts/src/assets.rs     |   97 +
 .../src/editor_project_storage.rs             |   79 +-
 .../ImageCanvasBottomToolbarView.test.tsx     |   37 +
 .../ImageCanvasBottomToolbarView.tsx          |   19 +-
 ...CanvasEditorGenerationIntegration.test.tsx |   94 +-
 .../ImageCanvasEditorModel.test.ts            |    4 +
 .../image-editor/ImageCanvasEditorModel.ts    |    8 +
 .../ImageCanvasEditorShellView.test.tsx       |    1 +
 .../image-editor/ImageCanvasEditorTypes.ts    |    9 +-
 .../image-editor/ImageCanvasEditorView.tsx    |   33 +-
 ...ImageCanvasGenerationComposerView.test.tsx |  407 +++-
 .../ImageCanvasGenerationComposerView.tsx     |  460 ++++-
 .../ImageCanvasGenerationDialogModel.test.ts  |  161 +-
 .../ImageCanvasGenerationDialogModel.ts       |  145 +-
 .../ImageCanvasGenerationModel.test.ts        |   55 +
 .../ImageCanvasGenerationModel.ts             |  260 ++-
 ...ageCanvasGenerationSubmissionModel.test.ts |   94 +-
 .../ImageCanvasGenerationSubmissionModel.ts   |   57 +-
 ...ageCanvasSelectedLayerToolbarView.test.tsx |   33 +-
 .../ImageCanvasSelectedLayerToolbarView.tsx   |   37 +
 .../ImageCanvasSequenceAnimationIcon.tsx      |   34 +
 .../image-editor/ImageCanvasStageView.tsx     |    9 +
 .../ImageCanvasUploadModel.test.ts            |   42 +
 .../image-editor/ImageCanvasUploadModel.ts    |   36 +-
 .../ImageCanvasWorldView.test.tsx             |   33 +-
 .../image-editor/ImageCanvasWorldView.tsx     |   10 +-
 ...useImageCanvasAssetExportWorkflow.test.tsx |    6 +-
 ...anvasGenerationSubmissionWorkflow.test.tsx |   54 +-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |   94 +-
 .../useImageCanvasGenerationSurface.test.tsx  |   17 +
 .../useImageCanvasGenerationSurface.tsx       |    4 +
 .../useImageCanvasGenerationWorkflow.test.tsx |  303 ++-
 .../useImageCanvasGenerationWorkflow.ts       |  178 +-
 .../useImageCanvasStageInteractions.test.tsx  |   41 +-
 .../useImageCanvasStageInteractions.ts        |    3 +-
 .../useImageCanvasUploadWorkflow.test.tsx     |  402 +++-
 .../useImageCanvasUploadWorkflow.ts           |  355 +++-
 src/index.css                                 |  299 ++-
 .../image-editor/editorProjectClient.ts       |   50 +-
 55 files changed, 7398 insertions(+), 795 deletions(-)
 create mode 100644 docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
 create mode 100644 packages/shared/src/contracts/editorCharacterAnimation.ts
 create mode 100644 server-rs/crates/api-server/src/editor_sequence_animation.rs
 create mode 100644 server-rs/crates/module-assets/src/character_animation.rs
 create mode 100644 src/components/image-editor/ImageCanvasSequenceAnimationIcon.tsx

diff --git a/docs/README.md b/docs/README.md
index e571dde87..9cfb5eead 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -20,6 +20,7 @@
 - [图片画布编辑器 MVP 接入方案](./technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md)
 - [图片画布编辑器前端拆分计划](./technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md)
 - [图片画布游戏场景生成链路](./technical/【技术方案】图片画布游戏场景生成链路-2026-08-04.md)
+- [Art Agent 多模态 Spine 序列帧动画生成](./technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md)
 - [画板音乐生成入口设计](./【编辑器】画板音乐生成入口设计-2026-06-18.md)
 - [SFX 生成优化 V2.0 任务拆解](./project-memory/plans/【实施计划】SFX生成优化V2.0任务拆解-2026-08-06.md)
 - [SFX 生成优化 V2.0 T6 测试与发布门禁](./【实施记录】SFX生成优化V2.0T6测试与发布门禁-2026-08-07.md)
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index f3a638797..189c1a34b 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -472,6 +472,8 @@
 - 现象：产品要求画板 `生成角色动作` 返回后按透明序列帧播放和下载，但旧实现或旧测试可能继续把结果当作预览视频处理。
 - 原因：后端仍需要先生成 `previewVideoPath` 再抽帧、绿幕去背和落 OSS；如果前端把预览视频当主媒体，就会绕过已经扣绿幕的 PNG 帧，也无法按序列帧打包下载。
 - 处理：角色动作结果图层主 `src` 使用 `frames[0].imageSrc`，`mediaType` 固定为 `image-sequence`，`assetKind` 固定为 `character-animation`，完整帧列表写入 `imageSequenceFrames`，`previewVideoPath` 只作为来源信息保留。生成端确认每帧对象后必须把该帧 `objectKey` 与 `assetObjectId` 一起写入正式 payload 和 `generation_inputs_json.characterAnimation.frames`。单图层下载必须生成序列帧 ZIP；画布素材 ZIP 中角色动作写入 `sequences/<编号-标题>/frames/`。不得移除后端原有视频生成、抽帧、绿幕去背和帧落盘流程。
+- 拆帧：拆帧只把正式帧对象登记成独立项目资源和账号素材，必须复用每帧已有的 `assetObjectId/objectKey`，禁止重新下载再上传 PNG。批次继续复用现有 spritesheet slice 批量事务，原子写入全部帧并完成 cohort；拆帧 task/cohort 必须按 owner + `sourceResourceId` + 规范化目标目录与标签稳定隔离，不能直接复用原生成 task，否则同一素材进入多个项目后会把多套帧归入一个错误 cohort。原帧 `asset_object.source_job_id` 继续保留原生成来源，不能为了匹配拆帧 task 伪造血缘。结果只进入素材库，不自动创建几十个画布图层。
+- 多模态参考：`inputMode/referenceMediaType` 只是客户端意图，不是媒体事实。图片或视频参考必须先按 owner 解析到权威 objectKey，再在扣费和 provider 调用前使用 OSS HEAD、权威 `asset_object.content_type` 或实际媒体探测验证 `image/*` / `video/*`；不能把上游报错和退款当作后端媒体校验。
 - 验证：`ImageCanvasGenerationLayerModel` 应断言动作结果 `src` 为首帧且 `mediaType="image-sequence"`；画布集成测试应出现 `画布序列帧：角色动作` 图片播放器，不应出现角色动作 `<video>`；导出测试应断言角色动作下载和画布素材导出都包含序列帧 ZIP / frames 目录；生成测试还应断言首帧与非首帧的稳定引用都被保留。
 - 关联：`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`。
 
@@ -4129,6 +4131,13 @@
 - 处理：资源 / 素材只保存 `image_sequence_frames_json` 与 `image_sequence_duration_ms`，精选审核快照只冻结复制这两个正式字段。角色动作要求至少两帧且毫秒时长大于 0；播放器按 `时长毫秒 / 数组长度` 计算间隔，Spine 导出时再换算秒数并推导 FPS。音频 / 视频 `durationSeconds` 不映射到这两个字段。
 - 关联：`server-rs/crates/spacetime-module/src/editor_project_storage.rs`、`src/components/image-editor/ImageCanvasWorldView.tsx`、`src/components/image-editor/ImageCanvasExportModel.ts`。
 
+## 多模态角色动作参考必须绑定上传上下文并由后端读取权威规格
+
+- 现象：普通视频与 Spine 序列帧面板共用参考上传控件时，用户在异步探测或上传期间切换面板，完成结果可能串入新面板；`same` 比例若直接采用客户端宽高，还会把省略或伪造尺寸的视频错误归一化为 `1:1`。
+- 处理：图片、视频、音频参考上传必须以 generation dialog 身份和分媒体容量建立 reservation，在探测、OSS 上传、项目资源 / 素材持久化和回填各边界复验；序列帧单参考限制按 dialog 语义判断，不依赖 `activeTool`。后端在扣费和 Provider 调用前按 owner 解析稳定对象，视频用带总超时的同一 HTTP client 做 HEAD 与 50MB 有界流式 GET，再由 FFprobe 读取 2–15 秒时长、显示方向宽高；图片按 EXIF 方向后的实际解码尺寸处理。`same` 只使用这些权威尺寸重新归一化。
+- 拆帧：省略素材目录时先转换为 owner 的正式默认文件夹 ID 并做 project/folder preflight；决定 resource、asset 与 cohort 的稳定 operation ID 属于资产领域规则，放在 `module-assets`，API 只编排调用。
+- 关联：`src/components/image-editor/useImageCanvasUploadWorkflow.ts`、`server-rs/crates/api-server/src/character_animation_assets.rs`、`server-rs/crates/module-assets/src/character_animation.rs`。
+
 ## 精选角色动作显示首帧还要检查前端 renderer 与逐帧授权
 
 - 现象：精选接口已经返回 `imageSequenceFrames` 和正确的 5 / 6 秒成本，但创作主页或后台审核仍只显示首帧；接入播放器后又可能只有第一帧成功、后续帧换签返回 404。
diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
new file mode 100644
index 000000000..71e79dc82
--- /dev/null
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -0,0 +1,829 @@
+# Art Agent 多模态 Spine 序列帧动画生成方案
+
+状态：已实施，待合并
+更新时间：`2026-08-11`
+
+## 1. 文档目的
+
+本文只讨论 Web 端 Art Agent 图片画布 `/editor/canvas` 的“Spine 序列帧动画”能力，不涉及 AI 游戏创作 Tauri Desktop App，也不新增玩法入口、公开作品、作品详情、运行态或广场 read model。
+
+目标是在现有图片画布角色动作能力上，支持：
+
+- 文本生成序列帧动画；
+- 图片 + 文本生成或改造序列帧动画；
+- 视频 + 文本转换或改造序列帧动画；
+- 在画布中播放、查看信息、改造、拆帧和下载，最终帧由生成链自动透明化；
+- 下载附件示例所示的 Spine JSON ZIP。
+
+本文所称“Spine 序列帧”不是自动拆件、骨骼绑定、mesh 权重或 IK。它是**一组等尺寸 PNG + Spine 4.2 JSON，通过单 slot attachment timeline 逐帧切换**的可导入包。
+
+## 2. 结论摘要
+
+### 2.1 推荐结论
+
+1. **不要新增平行资产体系或 SpacetimeDB 表。**继续复用 `editor_project_resource`、`editor_asset`、`asset_object`、`editor_canvas_layer`、`editor_canvas_generation_dialog` 和 `external_generation_job`。
+2. **不要新增新的序列帧媒体类型。**继续使用：
+   - `assetKind = "character-animation"`；
+   - `mediaType = "image-sequence"`；
+   - `generationInputs.action = "character-animation.generate"`。
+3. **扩展现有角色动作生成链路，而不是重写。**现有链路已经覆盖图片首帧驱动、Seedance 预览视频、抽帧、逐帧透明化、OSS、原子落库、队列恢复和失败退款。
+4. **附件 ZIP 导出已经实现。**当前 `buildSpineImageSequenceJson` 与 `useImageCanvasAssetExportWorkflow` 生成的目录、`metadata.json`、`skeleton.json`、`README.md` 和 `manifest.txt` 与附件示例一致，只需要回归验证和入口文案调整。
+5. **本期不应承诺“真正的 Spine 骨骼动画”。**UI 和文案应写“Spine 序列帧动画”或“Spine JSON 序列帧包”，避免用户误认为会自动拆件和蒙皮。
+6. **1080p 暂不开放。**当前服务端明确拒绝 `seedance2.0-fast + 1080p`；应等供应商能力、成本和逐帧处理资源验证后再开放。
+7. **关键需求口径已经冻结并完成实施。**视频模式采用“参考视频 + 文本生成新视频后抽帧”，默认 480p × 4 秒为 40 泥点，最终帧自动透明化，拆帧只进入素材库；完整决策见第 13、16 节。
+
+### 2.2 为什么不是新玩法接入
+
+本功能是现役图片画布内的素材生成工具，不具备玩法草稿、发布、公开作品码、运行态、通关统计等语义。因此不接入旧 `/api/creation-entry/config`，也不新增 `/api/creation/<play>/sessions`、作品架或公开 read model。
+
+## 3. 附件 ZIP 契约核对
+
+附件 `角色动作-SpineJSON(1).zip` 包含：
+
+```text
+frames/
+  frame-01.png ... frame-32.png
+metadata.json
+skeleton.json
+README.md
+manifest.txt
+```
+
+核对结果：
+
+- 32 张 `480 × 480` RGBA PNG；示例帧确实包含透明像素；
+- `skeleton.spine = "4.2.00"`；
+- `skeleton.images = "./frames/"`；
+- 1 个 `root` bone；
+- 1 个 `character` slot；
+- 每帧对应一个 `region` attachment；
+- `animations.animation.slots.character.attachment` 每 `0.125s` 切换一帧；
+- 32 帧、8 FPS、总时长 4 秒；
+- 时间轴在 4 秒处回到第一帧；
+- 不含 `.spine` 工程、`.atlas`、拆件、骨骼蒙皮或 mesh 权重。
+
+当前仓库下列实现已经生成相同契约：
+
+- `src/components/image-editor/ImageCanvasExportModel.ts`
+  - `buildSpineImageSequenceJson`
+  - `buildSpineImageSequenceReadme`
+- `src/components/image-editor/useImageCanvasAssetExportWorkflow.ts`
+  - `buildImageSequenceZip`
+  - 单序列 Spine ZIP 和画布集合 ZIP
+- `src/components/image-editor/ImageCanvasContextMenusView.tsx`
+  - “序列帧导出（zip）”
+  - “Spine 导出（zip）”
+
+因此本需求不需要再实现一套服务端 ZIP 生成器。浏览器端会基于已换签的稳定帧引用读取 PNG，再用 JSZip 打包。
+
+## 4. 当前代码基线
+
+### 4.1 前端现状
+
+现有角色动作能力已经包含：
+
+- 角色图片右键或浮动工具栏“生成动画”；
+- `character-animation` 生成占位框；
+- 动作描述；
+- 待机、行走、奔跑、跳跃、攻击、受击、倒下预设；
+- 480p / 720p；
+- 32 帧 4 秒、40 帧 5 秒、48 帧 6 秒；
+- Seedance 2.0 Fast；
+- 生成结果作为 `image-sequence` 图层播放；
+- 当前帧 / 总帧数、暂停 / 播放；
+- 元数据弹窗、改造恢复、素材库、项目刷新恢复；
+- 普通序列帧 ZIP 和 Spine JSON ZIP。
+
+主要文件：
+
+| 责任 | 当前文件 |
+| --- | --- |
+| 画布工具类型和状态 | `src/components/image-editor/ImageCanvasEditorTypes.ts` |
+| 底部工具栏 | `src/components/image-editor/ImageCanvasBottomToolbarView.tsx` |
+| 生成 Dialog 草稿和恢复 | `src/components/image-editor/ImageCanvasGenerationDialogModel.ts` |
+| 生成 Composer | `src/components/image-editor/ImageCanvasGenerationComposerView.tsx` |
+| 角色动作专用旧面板 | `src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx` |
+| 提交计划与前端校验 | `src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts` |
+| 画布选取与改造恢复 | `src/components/image-editor/useImageCanvasGenerationWorkflow.ts` |
+| 上传图片/视频 | `src/components/image-editor/useImageCanvasUploadWorkflow.ts` |
+| 提交、队列和回填 | `src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts` |
+| API Client 和前端 DTO | `src/services/image-editor/editorProjectClient.ts` |
+| 序列帧播放 | `src/components/image-editor/ImageCanvasWorldView.tsx` |
+| 元数据 | `src/components/image-editor/ImageCanvasMetadataModalView.tsx` |
+| ZIP / Spine JSON | `ImageCanvasExportModel.ts`、`useImageCanvasAssetExportWorkflow.ts` |
+
+通用视频面板已经提供“参考”控件，支持：
+
+- 从画布选择图片、视频；
+- 上传图片、视频；
+- 将上传文件直传并换成稳定 OSS / asset object 引用；
+- Seedance 参考素材数量、格式、大小和时长校验。
+
+新面板应复用这套参考素材交互和上传流程，不能再写一套文件上传与预览逻辑。
+
+### 4.2 后端现状
+
+当前内部路由：
+
+```text
+POST /api/editor/character-animations/generations
+```
+
+主要实现位于：
+
+- `server-rs/crates/shared-contracts/src/assets.rs`
+- `server-rs/crates/api-server/src/editor_sequence_animation.rs`
+- `server-rs/crates/api-server/src/character_animation_assets.rs`
+- `server-rs/crates/api-server/src/editor_generation_queue.rs`
+- `server-rs/crates/api-server/src/external_generation_worker.rs`
+- `server-rs/crates/api-server/src/editor_generation_config.rs`
+- `server-rs/crates/api-server/src/editor_project.rs`
+- `server-rs/crates/spacetime-client/src/editor_project.rs`
+- `server-rs/crates/spacetime-module/src/editor_project_storage.rs`
+
+当前图片模式链路：
+
+```mermaid
+flowchart LR
+  A["角色图片 + 动作描述"] --> B["校验 owner / project / folder / 稳定引用"]
+  B --> C["预扣泥点并创建任务"]
+  C --> D["背景键色决策"]
+  D --> E["Seedance 图生视频"]
+  E --> F["预览视频写 OSS"]
+  F --> G["FFmpeg 定点抽帧"]
+  G --> H["逐帧 BgFilter / 阿里云 / 本地键色兜底"]
+  H --> I["固定画布 RGBA PNG + OSS + asset object"]
+  I --> J["原子提交预览视频、最终序列、画布和 job"]
+  J --> K["Web 回填 image-sequence 图层"]
+```
+
+关键已有能力：
+
+- `external_generation_job` 队列、lease、phase、重试、结果和通知；
+- 请求幂等、运行身份、owner 隔离；
+- 生成前项目与素材目录预检；
+- 计费闭包与失败退款；
+- Seedance 2.0 Fast 图生视频；
+- FFmpeg / FFprobe 抽帧；
+- 逐帧并发抠图和全量失败关闭；
+- 每帧稳定 `assetObjectId + objectKey`；
+- 预览视频资源和最终序列资源原子落库；
+- 最终帧集不把临时签名 URL 写入 SpacetimeDB；
+- 队列完成后以完整 project 快照恢复画布。
+
+### 4.3 当前数据库事实
+
+本功能已有数据模型，不需要新表。
+
+#### `external_generation_job`
+
+保存：
+
+- `job_kind = editor_character_animation_generation`；
+- owner、source entity、请求 payload；
+- pending / running / completed / failed / cancelled；
+- generating / processing phase；
+- 价格、退款 ledger、lease、attempt；
+- 紧凑结果 payload。
+
+#### `editor_project_resource`
+
+最终序列资源保存：
+
+- `asset_kind = character-animation`；
+- `image_src/object_key/asset_object_id` 指向首帧；
+- `width/height` 为单帧尺寸；
+- `prompt/actual_prompt/model/provider/task_id`；
+- `generation_inputs_json` 保存用户可重放输入；
+- `source_resource_id` 指向预览视频资源；
+- `image_sequence_frames_json` 保存有序稳定帧引用；
+- `image_sequence_duration_ms` 保存总时长。
+
+#### `editor_asset`
+
+账号素材库保存与项目资源相同的序列帧媒体字段。当前设计中：
+
+- 预览视频作为独立 `video` 素材，承载实际生成成本；
+- 最终 `character-animation` 是派生素材，成本为 0；
+- 最终序列通过来源链追溯预览视频和原始参考素材。
+
+#### `asset_object`
+
+预览视频和每张 PNG 都有正式对象登记。数据库只保存 object key / object id，不保存大二进制或 Data URL。
+
+#### `editor_canvas_layer` 与 `editor_canvas_generation_dialog`
+
+- layer 只保存 `resource_id` 和布局，不复制序列帧、提示词和运行结果；
+- generation dialog 保存占位框和生成状态，用于刷新恢复；
+- 正式媒体真相始终从 resource 水合。
+
+## 5. 与本次需求的差距
+
+| 需求 | 当前能力 | 结论 |
+| --- | --- | --- |
+| 工具栏在视频后新增入口 | 当前只能从角色图触发 | 需要新增底部入口 |
+| 纯文本生成 | 当前必须有角色源图 | 需要扩展后端 T2V |
+| 图片 + 文本 | 已实现角色立绘图生视频再抽帧 | 主要复用 |
+| 已有序列帧改造 | 仅有部分恢复/首帧能力，来源语义不完整 | 需要明确输入形态并补全 |
+| 视频 + 文本 | 通用视频支持参考视频，角色动作链未接入 | 需要扩展 |
+| 参考支持画布/上传图片视频 | 通用视频面板已经实现 | 复用并收窄规则 |
+| 白/绿/蓝/紫背景 | 当前角色动作使用自动安全色，不是这四个纯色 | 需要专用枚举和提示词 |
+| 动作“更多”逐行展开 | 当前只有固定 7 个预设 | 需要前端扩展 |
+| 1080p | Fast 前后端均不支持 | 暂不开放 |
+| 40 泥点/次 | 当前 480p × 4 秒恰好为 40；其他组合不同 | 需确认固定价还是按秒价 |
+| 去背景 | 当前生成链自动逐帧去背景 | 与需求中的手动动作冲突 |
+| 拆帧生成单 PNG | 帧对象已有，但没有全部登记为独立账号素材 | 可复用对象、补资产绑定 |
+| ZIP 下载 | 已完成且匹配附件 | 不重做 |
+
+## 6. 目标业务模型
+
+### 6.1 统一能力，不新增平行类型
+
+产品展示名改为“Spine 序列帧动画”，内部继续沿用兼容名称：
+
+```text
+CanvasTool: character-animation（新增底部工具 ID）
+Dialog mode: character-animation
+Generation action: character-animation.generate
+Asset kind: character-animation
+Media type: image-sequence
+Queue job kind: editor_character_animation_generation
+```
+
+这样存量角色动作项目、素材、画布图层、改造配方、元数据和导出逻辑无需迁移。
+
+### 6.2 三种输入模式
+
+建议请求显式携带 `inputMode`，不要由字段是否为空隐式猜测：
+
+```text
+text  = 无参考素材，文本生成预览视频后抽帧
+image = 一张角色图或已有序列素材作为视觉参考
+video = 一段视频作为动作/外观参考
+```
+
+建议 v2 内部请求结构：
+
+```json
+{
+  "version": 2,
+  "inputMode": "text",
+  "reference": null,
+  "promptText": "让人物朝侧面原地不断快速奔跑",
+  "actionPreset": "run",
+  "backgroundColor": "green",
+  "resolution": "480p",
+  "ratio": "1:1",
+  "frameCount": 32,
+  "durationSeconds": 4,
+  "model": "seedance2.0-fast",
+  "projectId": "...",
+  "canvasCompletion": {},
+  "generationInputs": {},
+  "assetFolderId": "project",
+  "assetLabel": "角色奔跑"
+}
+```
+
+图片或视频模式的 `reference` 只接受稳定引用：
+
+```json
+{
+  "mediaType": "image",
+  "source": "editor/uploads/.../character.png",
+  "sourceLayerId": "layer-...",
+  "sourceResourceId": "resource-...",
+  "width": 480,
+  "height": 480,
+  "durationMs": null
+}
+```
+
+规则：
+
+- v1 建议只允许一个主参考，避免“哪个视频负责动作、哪个图片负责换皮”的未定义组合；
+- 浏览器不得提交 Data URL / blob URL；
+- `sourceLayerId/sourceResourceId/assetKind/width/height/duration` 只作为候选，后端必须按 owner 重新读取权威记录；
+- 文本模式 `reference = null`；
+- 图片模式 `reference.mediaType = image`；
+- 视频模式 `reference.mediaType = video`；
+- generation inputs 中只保存稳定 resource / asset ID，不保存临时签名 URL。
+
+### 6.3 兼容策略
+
+现有 `/api/editor/character-animations/generations` 和 External v1 已使用旧的图片模式 DTO。本期推荐：
+
+1. 内部 Web 路由接受 v2，并兼容旧 flat 图片请求一个滚动发布周期；
+2. worker 同时解析 v2 和旧 payload，防止部署期间已有 pending job 无法执行；
+3. `/api/external/v1/editor/character-animations/generations` 本期仍保持旧图片模式契约，由 adapter 转成内部 `inputMode=image`；
+4. 不在本任务中对外开放文本/视频模式；若以后开放，必须同次更新 `docs/openapi/genarrative-external-v1.openapi.json` 和契约测试。
+
+## 7. 数据库设计
+
+### 7.1 推荐：零 schema 变更
+
+三模态所需事实已经能放入现有字段：
+
+| 事实 | 存放位置 |
+| --- | --- |
+| 输入模式 | `generation_inputs_json.fields[inputMode]` |
+| 用户动作描述 | `generation_inputs_json.fields[prompt]` |
+| 动作预设 | `generation_inputs_json.fields[actionPreset]` |
+| 背景色 | `generation_inputs_json.fields[backgroundColor]` |
+| 清晰度/比例/时长/帧数 | `generation_inputs_json.fields[...]` |
+| 参考素材 | `generation_inputs_json.references`（稳定 resource/asset ID） |
+| 实际模型提示词 | `actual_prompt` |
+| 模型、provider、task | 现有列 |
+| 帧顺序和对象 | `image_sequence_frames_json` |
+| 总时长 | `image_sequence_duration_ms` |
+| 单帧尺寸 | `width/height` |
+| 来源链 | `source_resource_id` |
+
+不建议给 `editor_project_resource` 或 `editor_asset` 新增 `input_mode/background_color/fps/frame_count` 列：
+
+- `frame_count = frames.length`；
+- `fps = frame_count / duration`；
+- 输入模式和背景色是生成配方，不是独立资源运行真相；
+- 新列会引入 schema migration、绑定生成和线上迁移，却没有查询收益。
+
+### 7.2 来源链
+
+建议保留当前两级来源：
+
+```text
+原始参考素材（可空） -> 预览/中间视频资源 -> 最终 character-animation 序列资源
+```
+
+- 文本模式：预览视频 `source_resource_id = null`；
+- 图片模式：预览视频指向角色图或序列素材；
+- 视频改造模式：生成后的预览视频指向上传/画布视频；
+- 最终序列始终指向实际被抽帧的视频资源；
+- generation inputs 另外保留原始用户参考，供改造恢复。
+
+如果最终确认“视频模式只做原视频直接抽帧，不调用 Seedance”，最终序列可直接指向输入视频，不要复制一份相同视频资源。
+
+### 7.3 拆帧
+
+当前每帧已经有 `asset_object`，拆帧不应重复上传 PNG。建议：
+
+- 为现有每帧对象创建独立 `editor_asset` 绑定；
+- 标签为 `<序列名>-帧-01`；
+- 使用统一 `group_task_id` 和 expected count；
+- 只有全部绑定成功后标记批次完成；
+- 默认进入素材库，不自动把几十个图层铺到画布；若产品要求铺画布，另行确认布局和移动端行为。
+
+## 8. 后端业务逻辑与代码位置
+
+### 8.1 契约层
+
+`server-rs/crates/shared-contracts/src/assets.rs` 与 `packages/shared/src/contracts/editorCharacterAnimation.ts`
+
+- Rust 契约继续承载内部 v2 `inputMode/reference/backgroundColor/actionPreset` 类型并保留 External v1 的旧图片 DTO；
+- 拆帧 request/response 与 `EditorAssetPayload` 收口到 Rust `shared-contracts`，不再由 `api-server` 私有定义；
+- Web 拆帧 request/response 与素材 payload 从 `@genarrative/shared` 导出，`editorProjectClient.ts` 只负责调用现有内部路由；
+- response 继续复用 `EditorCharacterAnimationGenerateResponse`，正式 frame DTO 不写 frame index，数组位置仍是唯一顺序；
+- 客户端继续阻止 Data URL / blob URL。
+
+### 8.2 请求归一化和提示词
+
+已新增纯规则模块：
+
+```text
+server-rs/crates/api-server/src/editor_sequence_animation.rs
+```
+
+只承载：
+
+- 三种输入模式和参考媒体类型的确定性校验；
+- 白/绿/蓝/紫键色解析；
+- 分辨率、比例、时长、帧数和目标帧尺寸校验；
+- Seedance 提示词拼装；
+- 拆帧稳定 operation ID 与素材标签生成；
+- 旧图片请求到 v2 归一化。
+
+外部调用、OSS、扣费和 SpacetimeDB 不放进该 helper。
+
+`character_animation_assets.rs` 继续承载已有编排和媒体处理，避免再造第二条资产链：
+
+- handler；
+- owner/project/folder/reference 预检；
+- 计费边界；
+- Seedance 调用；
+- 视频下载和 OSS；
+- FFmpeg 抽帧；
+- 逐帧抠图；
+- 原子结果准备。
+
+### 8.3 三模态 provider 分流
+
+归一化后进入同一 `generate preview -> extract -> persist` 主链：
+
+```mermaid
+flowchart TD
+  A["Normalized sequence request"] --> B{"inputMode"}
+  B -->|text| C["Seedance text-to-video"]
+  B -->|image| D["Seedance image-to-video"]
+  B -->|video| E["Seedance reference-video / motion transfer 或直接抽帧"]
+  C --> F["统一预览视频"]
+  D --> F
+  E --> F
+  F --> G["统一抽帧、透明化、定尺寸、OSS"]
+  G --> H["统一原子持久化"]
+```
+
+应复用通用视频已有的：
+
+- text-to-video request body；
+- reference video URL 解析；
+- Seedance 模型映射；
+- provider 轮询、超时和下载；
+- 审计与错误脱敏。
+
+不得从前端直接调用模型，也不得在 SpacetimeDB procedure 中调用外部模型。
+
+### 8.4 队列和 worker
+
+`editor_generation_queue.rs`
+
+- 继续复用 `editor_character_animation_generation`；
+- 请求 payload 增加 `version=2`；
+- 定价和稳定引用门禁必须在入队前执行。
+
+`external_generation_worker.rs`
+
+- 对同一 job kind 解析 v2；
+- 对部署前旧 payload 做兼容转换；
+- phase 继续使用 `generating -> processing`；
+- 不需要新增逐帧进度列。画布上的 `15/30` 是播放帧数，不是 worker 进度。
+
+### 8.5 计费
+
+继续使用现有 `execute_billable_asset_operation_with_cost` 和 durable billing boundary：
+
+- provider、预览视频持久化、抽帧、全部帧透明化、首帧/帧对象准备均属于一次付费操作；
+- 任一必需帧失败，整项失败，不发布残缺序列；
+- 明确失败退款；
+- 原子提交结果未知时按现有对账语义处理，不能先退款再猜提交失败；
+- 拆帧只复用已有对象，不应再次收 Seedance 生成费；若逐帧去背景改为手动动作，需要另行确定费用。
+
+## 9. 提示词策略
+
+### 9.1 不建议把需求中的长 Sprite Sheet 提示词原样发给 Seedance
+
+需求 2.3、V2、V2.2、V3 的核心输出要求是：
+
+> 生成一张规则网格的大 Sprite Sheet 图片。
+
+但当前选定模型和现有链路是：
+
+> Seedance 生成视频，再由后端逐帧抽取 PNG。
+
+如果把“单张网格 Sprite Sheet”原样发给视频模型，模型可能在视频里绘制一张网格图，而不是生成角色动作视频。这与最终按时间抽帧的实现方向冲突。
+
+### 9.2 推荐做法
+
+- 保留需求长提示词中的角色一致性、动作连续性、固定镜头、完整主体、纯色背景、禁止文字/额外角色等约束；
+- 删除“单张大图、网格行列、每格一帧、直接等宽切图”等图片模型专属条款；
+- 后端构建适用于 Seedance 视频链路的完整约束提示词，注入后端归一化后的比例、清晰度、时长、目标帧数和 FPS；提示词明确约束角色身份与造型一致、固定机位和焦距、全身完整入镜、锚点和朝向稳定、动作连续及循环首尾平滑，同时明确禁止 Sprite Sheet、网格、多格画面和分镜拼图，避免把图片模型条款错误套到视频每一帧；
+- `prompt` 保存平台模板后的标准提示词；
+- `actual_prompt` 保存实际提交 provider 的提示词；
+- generation inputs 只保存用户输入和选择，不复制整段系统模板。
+
+建议结构：
+
+```text
+目标：生成可拆分为游戏角色序列帧的固定镜头动画。
+角色：同一角色、服装、配饰、武器、比例和画风全程一致。
+镜头：正交或近似正交；禁止缩放、平移、旋转、特写和镜头抖动。
+构图：单角色全身完整、始终位于中心、脚底基线稳定、不裁切。
+动作：<动作预设 + 用户描述>；默认循环，首尾自然衔接。
+背景：<白/绿/蓝/紫的确定 hex>，纯色、无纹理、无阴影、无地面和场景。
+禁止：文字、水印、HUD、额外角色、随机道具、风格漂移、闪烁和轮廓跳变。
+```
+
+说明：Seedance 只能尽量保持角色锚点稳定，不能仅靠提示词保证像专业逐帧动画一样像素级对齐。若验收要求严格固定 root/脚底，需要后续增加主体检测和逐帧锚点归一化，不应在 v1 文案中作绝对承诺。
+
+## 10. 前端设计
+
+### 10.1 入口
+
+`ImageCanvasBottomToolbarView.tsx`：
+
+- 在“生成视频”后新增“Spine 序列帧动画”；
+- 点击后在视口中心创建独立 `character-animation` generation dialog；
+- 不在当前面板下方追加内容；
+- 移动端保持横向滚动或现有工具栏收纳规则。
+
+`CanvasTool` 增加 `character-animation`，但不新增页面路由。
+
+### 10.2 Composer
+
+优先在 `ImageCanvasGenerationComposerView.tsx` 统一实现，逐步退役只支持源角色图的专用旧面板，避免同一能力维护两套 composer。
+
+布局建议：
+
+1. **参考区**
+   - 文案统一为“参考”；
+   - 可从画布选图片/视频；
+   - 可上传图片/视频；
+   - v1 只保留一个主参考；
+   - 删除参考后自动切回 text 模式。
+2. **文本区**
+   - placeholder：`请描述人物、朝向、做什么、如何做。比如：让人物朝侧面原地不断快速奔跑。`
+3. **背景色**
+   - 白 `#FFFFFF`；
+   - 绿 `#00FF00`；
+   - 蓝色和紫色必须由产品给出确定 hex，不能只存中文颜色名。
+4. **动作预设**
+   - 固定八列；首屏为行走、待机、奔跑、跳跃、攻击、受击、倒下和“更多”，正好一行；
+   - 每次点击“更多”按八个动作追加一行，最后不足八个时展示剩余动作；未全部展开时按钮继续显示“更多”，全部展开后显示“收起”，收起回到首屏；
+   - 对需求列表去重（当前“跳跃”出现两次）；
+   - 动作选择非必填；
+   - 推荐单选并把规范动作短语写入可编辑 prompt，避免 chip 状态与文本产生两套真相。
+5. **参数**
+   - 模型固定 Seedance 2.0 Fast；
+   - 默认 1:1、480p、4 秒、32 帧、8 FPS；
+   - 保留 720p；
+   - 暂不显示 1080p；
+   - 若最终固定 40 泥点，非默认规格要么隐藏，要么明确另行定价。
+6. **提交**
+   - 显示后端定价配置计算结果；
+   - 生成时关闭 composer，保留画布占位框；
+   - 队列任务显示 generating / processing；
+   - 完成后原位替换为序列帧图层。
+
+### 10.3 参考素材规则
+
+建议规则：
+
+- 从画布选择普通图片时，必须满足 `effectiveAssetKind = character`，否则提示“请选择角色图”；
+- 从画布选择现有 `character-animation` 时，只有确认“序列帧改造”的语义后才允许；
+- 上传图片是用户在该入口内显式指定的角色参考，可直接按角色参考处理，不要求先创建一个 `character` 图层；
+- 视频必须是已登记的 `video` 媒体；
+- 继续复用现有 Seedance 文件规则：图片最大 30MB，视频 mp4/mov 最大 50MB、2–15 秒；最终上限仍需结合“全部帧”决策重新评估；
+- 服务端再次验证 owner、媒体类型和稳定对象，前端标签不是安全边界。
+
+### 10.4 生成后图层
+
+继续复用 `ImageCanvasWorldView.tsx` 的序列播放器：
+
+- 标签显示“Spine 序列帧动画”；
+- 显示播放/暂停、当前帧/总帧数；
+- 信息按钮打开现有 metadata modal；
+- metadata 自动展示类型、生成输入、Model、Resolution、Task；
+- 图层 layout 不复制帧数组。
+
+### 10.5 生成后动作
+
+#### 快速编辑
+
+需求正文写“无快速编辑”，因此不展示图片快速编辑；不要把序列第一帧当作整段序列完成普通图片编辑。
+
+#### 改造
+
+- 从 `generationInputs` 恢复原 prompt、input mode、参考、动作、背景色、规格；
+- 打开新的独立 generation dialog；
+- 生成新资源，不原地覆盖旧资源；
+- 旧图层保留，可由用户删除或撤销。
+
+#### 去背景
+
+当前后端默认已经逐帧去背景。推荐方案是：
+
+- 生成结果始终为透明 RGBA；
+- 不再展示“去背景”，或仅在检测到历史不透明序列时展示；
+- 不重复对透明帧调用抠图 provider。
+
+如果产品坚持“先保留纯色背景，用户点击后再去背景”，则必须改为派生任务：
+
+- 原始不透明序列与透明序列是两个正式 resource；
+- 去背景全帧成功后一次性发布新序列；
+- 任一帧失败不产生残缺结果；
+- 需要单独确定泥点和失败退款；
+- 该选择会改变当前成熟链路，不建议作为默认。
+
+#### 拆帧
+
+推荐解释为“把现有序列中的每帧登记成独立账号素材”，不重新从视频抽取，也不复制 OSS 二进制。完成后打开素材栏或独立结果弹窗，不在当前面板下面追加内容。
+
+#### 下载
+
+- 顶部下载按钮默认执行 Spine JSON ZIP；
+- 右键“导出为”继续保留普通序列 ZIP / Spine ZIP；
+- 文件结构严格沿用附件和现有实现；
+- 禁止只下载预览视频代替序列帧。
+
+## 11. 状态、失败与恢复
+
+### 11.1 状态机
+
+```text
+idle
+  -> queued
+  -> generating（Seedance）
+  -> processing（下载 / 抽帧 / 去背景 / OSS）
+  -> completed
+  -> failed
+```
+
+- 刷新后由 external generation job 和 project canvas 恢复；
+- 登录账号切换时清理当前账号的本地 panel 状态，重新读取新 owner 数据；
+- 同一个 request/idempotency key 不重复扣费和生成；
+- failed dialog 保留输入，可改参数后重试；
+- completed 只认后端 project/resource/asset，不由前端拼接临时序列。
+
+### 11.2 部分失败
+
+生成阶段建议继续全有或全无：
+
+- 任一目标帧无法持久化，整项失败退款；
+- 不发布缺帧 `character-animation`；
+- ZIP 的 `failedFrames` 只处理下载时个别网络读取失败，不代表生成阶段允许缺帧。
+
+## 12. 实施拆分
+
+### T0：确认契约
+
+先确认第 13 节 P0 问题，冻结：输入模式、视频语义、帧率/帧数、背景结果、价格和拆帧去向。
+
+### T1：契约和纯模型
+
+- shared-contracts v2 DTO；
+- 前端 TypeScript DTO；
+- input mode / reference / background / pricing 纯校验；
+- legacy image request adapter；
+- generation inputs v2 恢复规则；
+- 提示词 builder 单测。
+
+### T2：前端入口和 Composer
+
+- 底部工具栏入口；
+- 独立 generation dialog；
+- 复用参考素材 picker 和上传；
+- 背景色、动作更多、参数和价格；
+- 文本/图片/视频模式切换；
+- 移动端布局和键盘行为。
+
+### T3：后端三模态生成
+
+- text-to-video；
+- 现有 image-to-video；
+- video 模式按最终确认语义接入；
+- 统一预览视频、抽帧、去背景、OSS；
+- queue worker v2 + legacy；
+- 原子持久化和退款。
+
+### T4：结果动作
+
+- 改造完整恢复；
+- 拆帧绑定既有 frame asset objects；
+- 条件式去背景（若最终保留）；
+- 顶部下载默认 Spine ZIP；
+- 元数据文案。
+
+### T5：验证和发布门禁
+
+- 前端定向测试和整合测试；
+- Rust contract / normalizer / handler / worker / billing 测试；
+- ZIP 与 Spine JSON validator；
+- 编码检查、typecheck、diff check；
+- 本地 api-server `/healthz` smoke；
+- 队列模式刷新恢复和失败退款 E2E。
+
+## 13. 编码前确认问题（已冻结）
+
+### P0：会改变架构或成本
+
+1. **视频模式到底是哪一种？**
+   - A：原视频直接逐帧转 PNG，不调用 Seedance；
+   - B：用视频 + 文本生成新视频（换皮/改造），再抽新视频；
+   - C：两种都要，由用户选择“直接转换/AI 改造”。
+
+   推荐 C，但 v1 若要收敛，先做 B；A 不需要动作预设、背景色或 40 泥点生成费。
+
+2. **“抽取上传视频所有帧”是否真的是源视频原始 FPS 的每一帧？**
+
+   当前和附件都是 4 秒、32 帧、8 FPS。若 15 秒 30 FPS 全抽，会产生 450 张 PNG、450 次对象登记，并可能触发 450 次抠图，成本和时延远超当前 32/40/48 帧。推荐继续固定 8 FPS 或固定 32/40/48 帧；如果坚持全帧，需要先给出视频时长、FPS、最大帧数和资源预算。
+
+3. **背景色是中间键色还是最终可见背景？**
+
+   附件 PNG 是透明 RGBA，而“生成后去背景”又暗示初始结果保留纯色。推荐背景色只作为生成与抠图的中间键色，最终自动透明；这样与当前链路和 ZIP 一致。
+
+4. **40 泥点是固定每次，还是只指默认 480p × 4 秒？**
+
+   当前定价是按秒、按清晰度：`seedance2.0-fast 480p = 10/秒`，所以默认 4 秒正好 40；720p/4 秒为 80。若固定每次 40，就不应同时开放会显著增加 provider 和逐帧成本的其他规格。
+
+5. **1080p 是否允许换模型？**
+
+   当前 `seedance2.0-fast` 明确不支持 1080p。可选：
+   - 暂不显示（推荐）；
+   - 1080p 自动切换 Seedance 2.0 标准版并重新定价；
+   - 等 provider Fast 真正支持后再开放。
+
+### P1：会改变交互或数据语义
+
+6. **“已有 Spine 序列帧 png 图片”指什么？**
+   - 已有 `character-animation` 帧集；
+   - 一张拼好的 Sprite Sheet PNG；
+   - 任意单张角色 PNG。
+
+   三者处理不同。现有 `character-animation` 可取首帧和 generation inputs；Sprite Sheet 应先走切图；单张角色图就是普通 image mode。
+
+7. **视频换皮是否还需要一张角色图片？**
+
+   若需要“视频提供动作 + 图片提供外观”，一个参考槽不够，需要两个有明确角色的槽位：`appearanceReference` 和 `motionReference`，不能用无序 references 数组猜测。
+
+8. **动作预设单选还是多选？**
+
+   列表中“速度线、运动模糊、命中帧、冲击波、粒子爆发”更像效果，不是主动作。推荐 v1 单选一个主动作；效果先只允许用户写进文本，或以后独立成多选效果组。
+
+9. **蓝色和紫色的准确 Hex 是什么？**
+
+   需要确定值，例如纯蓝 `#0000FF`、纯紫 `#8000FF`；抠图必须用确定 RGB，不能只存“蓝色/紫色”。还要确认主体颜色与键色冲突时是阻止提交、警告，还是自动换色。
+
+10. **拆帧后去哪里？**
+    - 只进入素材库（推荐）；
+    - 自动铺到画布；
+    - 弹出独立图片集面板；
+    - 只是下载普通序列 ZIP。
+
+11. **生成结果顶部是否真的显示“快速编辑”？**
+
+    需求文字明确写“与线上生成视频保持一致，无快速编辑”，截图却出现“快速编辑”。推荐以文字为准，不显示。
+
+## 14. 验收标准
+
+在 P0/P1 决策冻结后，本功能至少满足：
+
+1. 底部工具栏最右侧出现“Spine 序列帧动画”，与前一个工具之间不增加分割线。
+2. 无参考、角色图片参考、视频参考三种合法提交都由后端权威校验。
+3. 画布选择非角色图片时提示“请选择角色图”；上传图片规则按最终确认口径执行。
+4. 请求只携带稳定对象引用，不携带 Data URL / blob URL。
+5. 生成中刷新页面后任务和占位框可恢复。
+6. 失败不产生残缺序列，且按现有 durable billing 规则退款。
+7. 完成后项目 resource 和账号 asset 均为 `character-animation`，帧顺序稳定。
+8. 序列图层可循环播放并显示当前帧/总帧数。
+9. 元数据展示类型、输入、Model、Resolution、Task。
+10. 改造可恢复原输入模式、参考、动作、背景和规格，并生成新资源。
+11. 拆帧不重复上传已有 PNG。
+12. Spine ZIP 与附件目录结构一致，`skeleton.json` 能通过现有 validator。
+13. 存量角色动作项目、External v1 图片模式和普通视频生成不回归。
+
+## 15. 验证命令建议
+
+前端定向测试：
+
+```bash
+npm test -- src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+npm test -- src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+npm test -- src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+npm test -- src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+npm test -- src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+npm test -- src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+npm test -- src/components/image-editor/ImageCanvasExportModel.test.ts
+npm test -- src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+npm run spine-export-validator:typecheck
+```
+
+后端定向测试：
+
+```bash
+cd server-rs
+cargo test -p api-server character_animation
+cargo test -p api-server external_generation_worker
+cargo test -p shared-contracts character_animation
+```
+
+基础门禁：
+
+```bash
+npm run typecheck
+npm run check:encoding
+git diff --check
+```
+
+推荐方案没有 SpacetimeDB schema 变更，因此不要求 `npm run check:spacetime-schema`。如果最终为了逐帧进度或其他新事实新增表字段，字段必须追加在表结构末尾、设置明确默认值，并同步 migration、表目录、生成 bindings 和 schema check。
+
+## 16. 实施状态（2026-08-11）
+
+本方案已按推荐 v1 口径落地：
+
+- 底部工具栏已新增 `Spine序列帧动画` 入口；入口使用“播放器 + 帧格”图标，位于同一底栏的最右侧，与前一个工具之间不增加分割线，也不使用独立按钮容器；画布中的序列帧生成占位卡片复用同一个图标组件，不再显示旧的小人图标；底栏桌面宽度按完整内容自适应，不再因第十三个按钮出现横向滚动条，窄屏仍可横向滑动但不显示 scrollbar；
+- 文本、角色图片、参考视频三种模式统一使用 `character-animation` generation dialog；单参考限制按当前 dialog 语义判断而不是依赖工具栏 `activeTool`，上传前只接收一个文件；图片、视频、音频参考的异步探测、OSS 上传、持久化和回填均绑定发起时的 dialog 身份与分媒体容量 reservation，切换面板后不把结果写入新面板；其他多参考生成面板仍保持原能力；
+- Seedance 2.0 Fast 支持 480p / 720p，不开放 1080p；
+- 背景键色冻结为白 `#FFFFFF`、绿 `#00FF00`、蓝 `#0000FF`、紫 `#8000FF`，最终产物继续自动透明化；新独立面板使用显式键色，旧角色图层“生成动画”入口继续由后端自动配色，前端在没有显式键色时不再伪装成绿色已选；
+- Composer 主面板按设计稿只常驻参考、动作描述、背景键色、动作预设和底部参数摘要；点击“比例 · 时长 · 清晰度”摘要后通过独立浮层展示三列比例卡片、32/40/48 帧时长胶囊和 480p/720p 清晰度胶囊，不在主面板内逐行堆叠参数；桌面面板保持约 30rem 宽度和舒适的四周留白，动作预设使用八列浅灰圆角矩形按钮而不是紧贴的胶囊，颜色按钮保持独立圆角矩形；颜色、比例、时长和清晰度均提供明确的选中、悬停、键盘焦点与禁用反馈；比例和清晰度同时同步画布占位框及像素尺寸标签，例如 `16:9 + 480p = 480×270`、`16:9 + 720p = 720×405`，`same` 使用参考媒体真实宽高比，切换时保持占位框中心不漂移，最终图层沿用同一尺寸；提交按钮使用独立主操作样式，移动端浮层宽度受视口约束并保持可操作；
+- 视频模式采用“参考视频 + 文本生成新视频后抽帧”的 v1 语义，固定输出 32/40/48 帧；参考媒体类型、文件非空、50MB 上限和 2–15 秒时长由后端在扣费和调用 Seedance 前按 owner 权威对象、OSS HEAD 与 FFprobe 复验；实际 GET 复用带总超时的客户端并按 HEAD、响应头和流式累计字节三重限界，不信任客户端声明；
+- 稳定参考 `objectKey` 和原始宽高会写入 generation inputs，文本模式以及参考素材已离开当前画布的图片/视频模式仍可通过真实 `openRedrawPanel` 链路恢复；只有既无稳定来源、又无法从当前画布解析的旧配方才失败关闭；`same` 比例在扣费前以图片实际解码尺寸或视频 FFprobe 显示方向尺寸覆盖客户端候选宽高并重新归一化；
+- 最终 `generationInputs` 不再直接信任客户端快照，而是在扣费前按实际 input mode、owner-scoped `objectKey`、权威媒体宽高、用户请求的 `same` 语义、背景选择和规格重建完整 V2 配方并重建引用 provenance；客户端携带 `sourceResourceId` 时，同步在扣费前校验其属于当前 owner/project，且 objectKey 与本次参考素材一致；
+- 三模态执行链路已复核：文本走 Seedance 文生视频，角色图片走首尾帧生视频，参考视频走带 `reference_video` 的视频改造；图片真实尺寸、视频类型 / 大小 / 时长 / 显示方向尺寸和 owner 归属均在扣费前权威复验，Provider、预览持久化、抽帧、逐帧抠图、正式对象确认与最终原子提交继续由 durable billing boundary 统一退款或确认，不允许发布缺帧结果；
+- 账号素材跨项目改造时，参考已不在当前画布则只从稳定 `referenceSrc/objectKey` 恢复，不复用旧项目的 project-resource ID；账号级 asset ID 仍可作为素材来源恢复；
+- 从画布选取参考时按当前 dialog 给出语义化提示：Spine 序列帧面板提示选择“角色图或视频”，角色形象生成得到的原图和抠图结果都保持 `assetKind = character`，均可作为角色参考；画布图层指针分流显式包含 `character-animation`，避免选择态点击被普通图层选择逻辑吞掉，其他生成模式继续沿用各自限制；
+- 动作预设固定八列，首屏按需求显示行走、待机、奔跑、跳跃、攻击、受击、倒下和“更多”；更多动作完整包含移动、战斗、防御、待机细节以及速度线、运动模糊、命中帧、冲击波、粒子爆发五个特效词；每次“更多”按八个动作追加一行，最后不足八个时展示剩余动作，全部展开后才切换为“收起”；“更多/收起”始终位于所有已展示动作之后，DOM/键盘顺序与视觉顺序一致，同时通过独立 live status 播报显示数量；生成期间预设与展开按钮统一禁用；
+- 文本模式与参考模式统一按 dialog 草稿回显当前比例；移除参考素材时才将“同图尺寸”重置为 `1:1`，避免界面选中态与实际提交比例不一致；
+- 结果图层不提供普通图片快速编辑，保留改造、拆帧和下载；
+- 拆帧调用 `/api/editor/character-animations/frame-splits`，复用已有帧 `assetObjectId/objectKey`，通过现有批量事务登记独立项目资源和账号素材，不重复上传 PNG，也不自动铺到画布；省略目标目录时先归一化为 owner 的正式默认素材文件夹并执行 owner/project preflight；拆帧 task/cohort 按 owner + `sourceResourceId` + 规范化目标目录与标签稳定隔离，原帧对象继续保留原生成任务来源，避免同一账号素材进入多个项目后错误合并 cohort；
+- `character-animation` 图层只有在项目资源登记完成后才开放拆帧；`pending`、`local-resource-*`、`generation-dialog:*` 等本地临时资源在工具栏显示“资源保存中”并禁用操作，工作流提交层同时执行同一防御性校验；
+- 拆帧 request/response 和素材 payload 已收口到 Rust `shared-contracts` 与 Web `@genarrative/shared`；序列帧请求归一化、提示词、键色和规格规则位于 `editor_sequence_animation.rs`，决定正式 resource/asset/cohort 的拆帧稳定 operation ID 已下沉 `module-assets`，`character_animation_assets.rs` 只保留 handler、鉴权预检、计费、Provider、OSS、FFmpeg、抠图和持久化编排；
+- 顶部下载默认 Spine JSON ZIP，右键继续提供普通序列 ZIP 和 Spine ZIP；
+- 未新增 SpacetimeDB schema；`/api/external/v1` 继续维持既有图片模式契约，不暴露内部 text/video 扩展字段。
diff --git a/packages/shared/src/contracts/editorCharacterAnimation.ts b/packages/shared/src/contracts/editorCharacterAnimation.ts
new file mode 100644
index 000000000..567dbea23
--- /dev/null
+++ b/packages/shared/src/contracts/editorCharacterAnimation.ts
@@ -0,0 +1,12 @@
+export type EditorCharacterAnimationFrameSplitInput = {
+  projectId: string;
+  sourceLayerId: string;
+  sourceResourceId: string;
+  assetFolderId?: string | null;
+  assetLabel?: string | null;
+};
+
+export type EditorCharacterAnimationFrameSplitResult<TAsset> = {
+  frameCount: number;
+  assets: TAsset[];
+};
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index d9d8aee23..4dc4667fa 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -6,6 +6,7 @@ export type * from './contracts/creationAudio';
 export type * from './contracts/creativeAgent';
 export type * from './contracts/customWorldAgent';
 export type * from './contracts/editorAudio';
+export type * from './contracts/editorCharacterAnimation';
 export * from './contracts/editorScene';
 export * from './contracts/edutainmentBabyDrawing';
 export * from './contracts/edutainmentBabyObject';
diff --git a/server-rs/Cargo.lock b/server-rs/Cargo.lock
index 3c82d1717..d9f12ef32 100644
--- a/server-rs/Cargo.lock
+++ b/server-rs/Cargo.lock
@@ -2934,6 +2934,7 @@ dependencies = [
  "platform-oss",
  "reqwest",
  "serde",
+ "sha2",
  "shared-kernel",
  "spacetimedb",
 ]
diff --git a/server-rs/crates/api-server/src/app.rs b/server-rs/crates/api-server/src/app.rs
index 7a21ccf91..510018922 100644
--- a/server-rs/crates/api-server/src/app.rs
+++ b/server-rs/crates/api-server/src/app.rs
@@ -1823,6 +1823,31 @@ mod tests {
         assert_eq!(response.status(), StatusCode::UNAUTHORIZED);
     }
 
+    #[tokio::test]
+    async fn editor_character_animation_frame_split_requires_bearer_auth() {
+        let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
+        let request_body = serde_json::json!({
+            "projectId": "project-1",
+            "sourceLayerId": "layer-character-animation",
+            "sourceResourceId": "resource-character-animation"
+        })
+        .to_string();
+
+        let response = app
+            .oneshot(
+                Request::builder()
+                    .method("POST")
+                    .uri("/api/editor/character-animations/frame-splits")
+                    .header("content-type", "application/json")
+                    .body(Body::from(request_body))
+                    .expect("request should build"),
+            )
+            .await
+            .expect("request should succeed");
+
+        assert_eq!(response.status(), StatusCode::UNAUTHORIZED);
+    }
+
     #[tokio::test]
     async fn editor_ui_design_asset_extraction_rejects_inline_data_url_before_queueing() {
         let state = AppState::new(AppConfig {
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index a4ae3d50d..65454fc86 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -1,6 +1,7 @@
 use std::{
     collections::BTreeMap,
     fs,
+    io::Cursor,
     path::{Path, PathBuf},
     process::{Command, Stdio},
     thread,
@@ -14,8 +15,8 @@ use axum::{
     response::Response,
 };
 use image::{
-    ColorType, ImageEncoder, ImageFormat, Rgba, RgbaImage, codecs::png::PngEncoder,
-    imageops::FilterType,
+    ColorType, DynamicImage, ImageDecoder, ImageEncoder, ImageFormat, ImageReader, Rgba, RgbaImage,
+    codecs::png::PngEncoder, imageops::FilterType,
 };
 use module_ai::{
     AiStageCompletionInput, AiTaskCreateInput, AiTaskKind, AiTaskServiceError, AiTaskSnapshot,
@@ -23,7 +24,8 @@ use module_ai::{
 };
 use module_assets::{
     AssetObjectAccessPolicy, AssetObjectFieldError, AssetObjectUpsertInput,
-    build_asset_entity_binding_input, build_asset_object_upsert_input, generate_asset_binding_id,
+    build_asset_entity_binding_input, build_asset_object_upsert_input,
+    character_animation_frame_split_operation_id, generate_asset_binding_id,
     generate_asset_object_id,
 };
 use platform_oss::{
@@ -41,9 +43,10 @@ use shared_contracts::assets::{
     CharacterAssetJobStatusPayload, CharacterAssetJobStatusText, CharacterVisualDraftPayload,
     CharacterWorkflowCacheGetResponse, CharacterWorkflowCachePayload,
     CharacterWorkflowCacheSaveRequest, CharacterWorkflowCacheSaveResponse,
-    EDITOR_ASSET_LABEL_MAX_CHARS, EditorCharacterAnimationFramePayload,
-    EditorCharacterAnimationGenerateRequest, EditorCharacterAnimationGenerateResponse,
-    EditorVideoGenerateRequest, EditorVideoGenerateResponse,
+    EditorCharacterAnimationFramePayload, EditorCharacterAnimationFrameSplitRequest,
+    EditorCharacterAnimationFrameSplitResponse, EditorCharacterAnimationGenerateRequest,
+    EditorCharacterAnimationGenerateResponse, EditorVideoGenerateRequest,
+    EditorVideoGenerateResponse,
 };
 #[cfg(any())]
 use shared_contracts::assets::{
@@ -53,9 +56,12 @@ use shared_contracts::editor_generation::{
     editor_generation_request_fingerprint, editor_generation_stable_asset_id,
     editor_generation_stable_asset_object_id, editor_generation_stable_resource_id,
 };
+use spacetime_client::editor_project::{
+    EditorSpritesheetSliceBatchPersistRecordInput, EditorSpritesheetSlicePersistItemRecordInput,
+};
 use spacetime_client::{
-    EditorAssetCreateRecordInput, EditorProjectResourceCreateRecordInput,
-    ExternalGenerationJobRecord, SpacetimeClientError,
+    EditorAssetCreateRecordInput, EditorProjectGetRecordInput,
+    EditorProjectResourceCreateRecordInput, ExternalGenerationJobRecord, SpacetimeClientError,
 };
 
 use crate::{
@@ -73,17 +79,17 @@ use crate::{
         EditorGenerationQueuedResponse, editor_generation_queue_state,
         editor_generation_source_entity_id, enqueue_editor_generation_job_for_caller,
     },
-    editor_green_screen::{
-        EditorScreenBackgroundColor, editor_green_screen_character_prompt_clause,
-    },
+    editor_green_screen::EditorScreenBackgroundColor,
     editor_project::{
         EDITOR_ASSET_ID_PREFIX, EDITOR_BGFILTER_CROSS_CHECK_ENABLED,
         EDITOR_BGFILTER_DEFAULT_SEG_MODEL, EDITOR_RESOURCE_ID_PREFIX,
         EditorCanvasGeneratedLayerInput, EditorCanvasLayoutPlan, EditorGenerationCaller,
         EditorGenerationOperationContext, PreparedEditorGenerationResultItem,
         build_editor_canvas_generated_layer_item, editor_asset_payload_from_record,
-        editor_project_payload_from_record, editor_project_resource_payload_from_record,
-        persist_editor_generation_result_atomically, preflight_editor_billable_generation_target,
+        editor_media_src_from_object_key, editor_project_payload_from_record,
+        editor_project_resource_payload_from_record, map_editor_project_error,
+        normalize_editor_record_object_key, persist_editor_generation_result_atomically,
+        preflight_editor_billable_generation_target, rebuild_editor_generation_input_references,
         remove_editor_generated_screen_background_with_bgfilter,
         resolve_editor_reference_object_key_for_owner, sanitize_editor_client_generation_inputs,
         serialize_editor_generation_inputs, serialize_editor_image_sequence_frames,
@@ -93,6 +99,21 @@ use crate::{
         EditorScreenBackgroundDecisionInput, EditorScreenBackgroundDecisionKind,
         resolve_editor_screen_background_color,
     },
+    editor_sequence_animation::{
+        EDITOR_CHARACTER_ANIMATION_MODEL, EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_BYTES,
+        EditorCharacterAnimationInputMode, EditorCharacterAnimationReferenceMediaKind,
+        NormalizedEditorCharacterAnimationRequest,
+        apply_editor_character_animation_authoritative_reference_dimensions,
+        build_authoritative_editor_character_animation_generation_inputs,
+        build_editor_character_animation_frame_asset_label, editor_character_animation_bad_request,
+        editor_character_animation_source_asset_label,
+        normalize_editor_character_animation_request_with_pricing,
+        parse_editor_character_animation_background_color,
+        resolve_editor_character_animation_asset_label,
+        validate_editor_character_animation_reference_content_type,
+        validate_editor_character_animation_reference_video_content_length,
+        validate_editor_character_animation_reference_video_duration,
+    },
     http_error::AppError,
     platform_errors::map_oss_error,
     prompt::character_animation::normalize_animation_prompt_text_by_key,
@@ -101,6 +122,9 @@ use crate::{
 };
 use tokio::time::sleep;
 
+#[cfg(test)]
+use crate::editor_sequence_animation::normalize_editor_character_animation_request;
+
 const CHARACTER_ANIMATION_MODEL: &str = "doubao-seedance-2-0-fast-260128";
 const SEEDANCE_2_STANDARD_MODEL: &str = "doubao-seedance-2-0-260128";
 const CHARACTER_ANIMATION_ASSET_KIND: &str = "character_animation";
@@ -126,7 +150,6 @@ const FIXED_ARK_CHARACTER_VIDEO_RATIO: &str = "1:1";
 const FIXED_ARK_CHARACTER_VIDEO_DURATION_SECONDS: u32 = 4;
 const ARK_VIDEO_TASK_POLL_INTERVAL_MS: u64 = 5_000;
 const SOURCE_IMAGE_RESOLVE_TIMEOUT_MS: u64 = 30_000;
-const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0-fast";
 const EDITOR_CHARACTER_ANIMATION_ASSET_KIND: &str = "editor_character_animation";
 const EDITOR_CHARACTER_ANIMATION_RESOURCE_ASSET_KIND: &str = "character-animation";
 const EDITOR_CHARACTER_ANIMATION_PREVIEW_RESOURCE_ASSET_KIND: &str = "video";
@@ -134,6 +157,7 @@ const EDITOR_CHARACTER_ANIMATION_PROVIDER_SOURCE_SLOT: &str = "provider_source";
 const EDITOR_CHARACTER_ANIMATION_PREVIEW_RESULT_SLOT: &str = "animation-preview";
 const EDITOR_CHARACTER_ANIMATION_FINAL_SLOT: &str = "animation-final";
 const EDITOR_CHARACTER_ANIMATION_FRAME_SLOT_PREFIX: &str = "animation-frame-";
+const EDITOR_CHARACTER_ANIMATION_FRAME_SPLIT_KIND: &str = "editor_character_animation_frame_split";
 const EDITOR_VIDEO_ASSET_KIND: &str = "editor_video";
 const EDITOR_VIDEO_ENTITY_KIND: &str = "editor_canvas";
 const EDITOR_VIDEO_SLOT: &str = "video_preview";
@@ -143,6 +167,7 @@ const EDITOR_VIDEO_COVER_RESULT_SLOT: &str = "video-cover";
 const EDITOR_VIDEO_MODEL_SEEDANCE_2: &str = "seedance2.0";
 const EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST: &str = "seedance2.0-fast";
 const EDITOR_VIDEO_MODEL_KLING_3: &str = "kling3.0";
+
 const EDITOR_VIDEO_MODEL_KLING_3_OMNI: &str = "kling3.0-omni";
 const EDITOR_VIDEO_MODEL_VEO_3_1: &str = "veo3.1";
 const EDITOR_VIDEO_MODEL_VEO_3_1_FAST: &str = "veo3.1-fast";
@@ -389,6 +414,7 @@ pub async fn generate_character_animation(
                     &http_client,
                     payload.visual_source.as_str(),
                     "visualSource",
+                    EditorCharacterAnimationReferenceMediaKind::Image,
                 )
                 .await?;
                 let last_frame_data_url = resolve_media_source_as_data_url(
@@ -399,6 +425,7 @@ pub async fn generate_character_animation(
                         .as_deref()
                         .unwrap_or(payload.visual_source.as_str()),
                     "lastFrameImageDataUrl",
+                    EditorCharacterAnimationReferenceMediaKind::Image,
                 )
                 .await?;
                 let fallback_prompt = build_fallback_moderation_safe_animation_prompt(
@@ -599,11 +626,16 @@ pub async fn generate_editor_character_animation(
         )
     })?;
     let owner_user_id = authenticated.claims().user_id().to_string();
-    if matches_inline_media_source(payload.source_image_src.as_str()) {
+    if matches_inline_media_source(payload.source_image_src.as_str())
+        || payload
+            .reference_src
+            .as_deref()
+            .is_some_and(matches_inline_media_source)
+    {
         return Err(character_animation_error_response(
             &request_context,
             editor_character_animation_bad_request(
-                "sourceImageSrc 必须先上传 OSS，并使用 objectKey 或画板资源引用。",
+                "参考素材必须先上传 OSS，并使用 objectKey 或画板资源引用。",
             ),
         ));
     }
@@ -639,6 +671,315 @@ pub async fn generate_editor_character_animation(
     .await
 }
 
+pub async fn split_editor_character_animation_frames(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    Json(payload): Json<EditorCharacterAnimationFrameSplitRequest>,
+) -> Result<Json<Value>, AppError> {
+    let owner_user_id = authenticated.claims().user_id().to_string();
+    let project_id = payload.project_id.trim().to_string();
+    let source_layer_id = payload.source_layer_id.trim().to_string();
+    let source_resource_id = payload.source_resource_id.trim().to_string();
+    if project_id.is_empty() || source_layer_id.is_empty() || source_resource_id.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "projectId、sourceLayerId 和 sourceResourceId 不能为空。",
+            })),
+        );
+    }
+
+    let project = state
+        .spacetime_client()
+        .get_editor_project(EditorProjectGetRecordInput {
+            project_id: project_id.clone(),
+            owner_user_id: owner_user_id.clone(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    let source_resource = project
+        .resources
+        .iter()
+        .find(|resource| resource.resource_id == source_resource_id)
+        .cloned()
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::NOT_FOUND).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "未找到要拆帧的Spine序列帧资源。",
+            }))
+        })?;
+    if project.owner_user_id != owner_user_id
+        || source_resource.owner_user_id != owner_user_id
+        || source_resource.project_id != project_id
+    {
+        return Err(
+            AppError::from_status(StatusCode::FORBIDDEN).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "序列帧资源不属于当前账号或当前项目。",
+            })),
+        );
+    }
+    if source_resource.asset_kind.as_deref() != Some(EDITOR_CHARACTER_ANIMATION_RESOURCE_ASSET_KIND)
+        || !project.layers.as_array().is_some_and(|layers| {
+            layers.iter().any(|layer| {
+                layer.get("layerId").and_then(Value::as_str) == Some(source_layer_id.as_str())
+                    && layer.get("resourceId").and_then(Value::as_str)
+                        == Some(source_resource_id.as_str())
+            })
+        })
+    {
+        return Err(
+            AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "只有当前画布中的Spine序列帧动画可以拆帧。",
+            })),
+        );
+    }
+    let frames: Vec<EditorCharacterAnimationFramePayload> = source_resource
+        .image_sequence_frames
+        .clone()
+        .and_then(|value| serde_json::from_value(value).ok())
+        .filter(|frames: &Vec<EditorCharacterAnimationFramePayload>| !frames.is_empty())
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "序列帧资源缺少完整的正式帧列表。",
+            }))
+        })?;
+    if frames.len() > 64 {
+        return Err(
+            AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "单次最多拆分64帧。",
+            })),
+        );
+    }
+    let source_task_id = source_resource
+        .task_id
+        .clone()
+        .map(|value| value.trim().to_string())
+        .filter(|value| !value.is_empty())
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "序列帧资源缺少可信来源任务。",
+            }))
+        })?;
+    let target = preflight_editor_billable_generation_target(
+        &state,
+        owner_user_id.as_str(),
+        Some(project_id.clone()),
+        payload
+            .asset_folder_id
+            .clone()
+            .or_else(|| Some("project".to_string())),
+    )
+    .await?;
+    let folder_id = target.asset_folder_id.ok_or_else(|| {
+        AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+            "provider": "editor-character-animation-frame-split",
+            "message": "拆帧目标素材文件夹归一化失败。",
+        }))
+    })?;
+    let base_label = resolve_editor_character_animation_asset_label(payload.asset_label.as_deref());
+    // 同一账号素材复制进不同项目时会保留原生成 taskId，但 sourceResourceId 不同。
+    // 拆帧 operation 同时绑定规范化后的目标目录和标签：完全相同的目标保持幂等，
+    // 切换目录或重命名后的新目标获得独立 assetId/cohort，不能与首次结果发生内容冲突。
+    let split_operation_id = character_animation_frame_split_operation_id(
+        owner_user_id.as_str(),
+        source_resource_id.as_str(),
+        folder_id.as_str(),
+        base_label.as_str(),
+    );
+    let expected_asset_count = u32::try_from(frames.len()).map_err(|_| {
+        AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+            "provider": "editor-character-animation-frame-split",
+            "message": "序列帧数量超过支持范围。",
+        }))
+    })?;
+    let now_micros = current_utc_micros();
+    let mut items = Vec::with_capacity(frames.len());
+
+    for (index, frame) in frames.iter().enumerate() {
+        let frame_number = index + 1;
+        let slot = format!("frame-{frame_number:04}");
+        let asset_object_id = frame
+            .asset_object_id
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                    "provider": "editor-character-animation-frame-split",
+                    "message": format!("第{frame_number}帧缺少assetObjectId。"),
+                }))
+            })?;
+        let object_key = frame
+            .object_key
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                    "provider": "editor-character-animation-frame-split",
+                    "message": format!("第{frame_number}帧缺少objectKey。"),
+                }))
+            })?;
+        let asset_object = state
+            .spacetime_client()
+            .get_asset_object(asset_object_id.to_string())
+            .await
+            .map_err(map_editor_project_error)?
+            .ok_or_else(|| {
+                AppError::from_status(StatusCode::NOT_FOUND).with_details(json!({
+                    "provider": "editor-character-animation-frame-split",
+                    "message": format!("第{frame_number}帧的正式资产对象不存在。"),
+                }))
+            })?;
+        if asset_object.owner_user_id.as_deref() != Some(owner_user_id.as_str())
+            || asset_object.object_key != object_key
+            || asset_object.source_job_id.as_deref() != Some(source_task_id.as_str())
+        {
+            return Err(
+                AppError::from_status(StatusCode::FORBIDDEN).with_details(json!({
+                    "provider": "editor-character-animation-frame-split",
+                    "message": format!("第{frame_number}帧的资产对象归属或来源不一致。"),
+                })),
+            );
+        }
+        if !asset_object
+            .content_type
+            .as_deref()
+            .is_some_and(|content_type| content_type.starts_with("image/"))
+            || frame.width == 0
+            || frame.height == 0
+        {
+            return Err(
+                AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                    "provider": "editor-character-animation-frame-split",
+                    "message": format!("第{frame_number}帧不是有效的图片资产。"),
+                })),
+            );
+        }
+        let image_src = editor_media_src_from_object_key(object_key);
+        let resource_id = editor_generation_stable_resource_id(
+            owner_user_id.as_str(),
+            EDITOR_CHARACTER_ANIMATION_FRAME_SPLIT_KIND,
+            split_operation_id.as_str(),
+            slot.as_str(),
+        );
+        let label =
+            build_editor_character_animation_frame_asset_label(base_label.as_str(), frame_number);
+        items.push(EditorSpritesheetSlicePersistItemRecordInput {
+            asset_object: module_assets::AssetObjectUpsertInput {
+                asset_object_id: asset_object.asset_object_id,
+                bucket: asset_object.bucket,
+                object_key: asset_object.object_key,
+                access_policy: asset_object.access_policy,
+                content_type: asset_object.content_type,
+                content_length: asset_object.content_length,
+                content_hash: asset_object.content_hash,
+                version: asset_object.version,
+                source_job_id: asset_object.source_job_id,
+                owner_user_id: asset_object.owner_user_id,
+                profile_id: asset_object.profile_id,
+                entity_id: asset_object.entity_id,
+                asset_kind: asset_object.asset_kind,
+                updated_at_micros: now_micros,
+            },
+            project_resource: Some(EditorProjectResourceCreateRecordInput {
+                resource_id: resource_id.clone(),
+                project_id: project_id.clone(),
+                owner_user_id: owner_user_id.clone(),
+                asset_object_id: Some(asset_object_id.to_string()),
+                image_src: image_src.clone(),
+                object_key: Some(object_key.to_string()),
+                width: frame.width,
+                height: frame.height,
+                source_type: "generated".to_string(),
+                prompt: source_resource.prompt.clone(),
+                actual_prompt: source_resource.actual_prompt.clone(),
+                model: source_resource.model.clone(),
+                provider: Some("Genarrative".to_string()),
+                task_id: Some(split_operation_id.clone()),
+                source_resource_id: Some(source_resource_id.clone()),
+                asset_kind: Some("image".to_string()),
+                generation_inputs_json: None,
+                updated_at_micros: now_micros,
+                image_sequence_frames_json: None,
+                image_sequence_duration_ms: None,
+            }),
+            asset: Some(EditorAssetCreateRecordInput {
+                asset_id: editor_generation_stable_asset_id(
+                    owner_user_id.as_str(),
+                    EDITOR_CHARACTER_ANIMATION_FRAME_SPLIT_KIND,
+                    split_operation_id.as_str(),
+                    slot.as_str(),
+                ),
+                owner_user_id: owner_user_id.clone(),
+                folder_id: folder_id.clone(),
+                label,
+                asset_object_id: Some(asset_object_id.to_string()),
+                image_src: image_src.clone(),
+                object_key: Some(object_key.to_string()),
+                width: frame.width,
+                height: frame.height,
+                source_type: "generated".to_string(),
+                prompt: source_resource.prompt.clone(),
+                actual_prompt: source_resource.actual_prompt.clone(),
+                model: source_resource.model.clone(),
+                provider: Some("Genarrative".to_string()),
+                task_id: Some(split_operation_id.clone()),
+                asset_kind: Some("image".to_string()),
+                generation_inputs_json: None,
+                source_resource_id: Some(resource_id),
+                now_micros,
+                thumbnail_src: Some(image_src),
+                generation_cost_mud_points: 0,
+                group_task_id: Some(split_operation_id.clone()),
+                group_task_expected_asset_count: Some(expected_asset_count),
+                image_sequence_frames_json: None,
+                image_sequence_duration_ms: None,
+            }),
+        });
+    }
+
+    let persisted = state
+        .spacetime_client()
+        .persist_editor_spritesheet_slice_batch(EditorSpritesheetSliceBatchPersistRecordInput {
+            owner_user_id,
+            task_id: split_operation_id.clone(),
+            group_task_id: Some(split_operation_id),
+            expected_asset_count,
+            items,
+            completed_at_micros: now_micros,
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    let assets = persisted
+        .items
+        .into_iter()
+        .filter_map(|item| item.asset)
+        .map(editor_asset_payload_from_record)
+        .collect::<Vec<_>>();
+    if assets.len() != frames.len() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "editor-character-animation-frame-split",
+                "message": "序列帧批量登记返回数量不一致。",
+            })),
+        );
+    }
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorCharacterAnimationFrameSplitResponse {
+            frame_count: expected_asset_count,
+            assets,
+        },
+    ))
+}
+
 pub(crate) async fn enqueue_editor_character_animation_for_owner(
     state: &AppState,
     request_context: &RequestContext,
@@ -646,11 +987,16 @@ pub(crate) async fn enqueue_editor_character_animation_for_owner(
     mut payload: EditorCharacterAnimationGenerateRequest,
     external_idempotency_key: Option<&str>,
 ) -> Result<ExternalGenerationJobRecord, Response> {
-    if matches_inline_media_source(payload.source_image_src.as_str()) {
+    if matches_inline_media_source(payload.source_image_src.as_str())
+        || payload
+            .reference_src
+            .as_deref()
+            .is_some_and(matches_inline_media_source)
+    {
         return Err(character_animation_error_response(
             request_context,
             editor_character_animation_bad_request(
-                "sourceImageSrc 必须先上传 OSS，并使用 objectKey 或画板资源引用。",
+                "参考素材必须先上传 OSS，并使用 objectKey 或画板资源引用。",
             ),
         ));
     }
@@ -677,15 +1023,18 @@ pub(crate) async fn enqueue_editor_character_animation_for_owner(
         )
     })?;
     // 队列路径只取定价，背景色决策留到实际执行时再做，这里用默认色占位。
+    let provisional_screen_color =
+        parse_editor_character_animation_background_color(payload.background_color.as_deref())
+            .map_err(|error| character_animation_error_response(request_context, error))?;
     let normalized = normalize_editor_character_animation_request_with_pricing(
         payload.clone(),
         &pricing,
-        crate::editor_green_screen::default_editor_screen_background_color(),
+        provisional_screen_color,
     )
     .map_err(|error| character_animation_error_response(request_context, error))?;
     let source_entity_id = editor_generation_source_entity_id(
         payload.project_id.as_deref(),
-        payload.source_layer_id.as_str(),
+        normalized.source_layer_id.as_str(),
     );
     enqueue_editor_generation_job_for_caller(
         state,
@@ -731,11 +1080,16 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             editor_character_animation_bad_request("角色动作画布完成需要有效的 projectId。"),
         ));
     }
-    if matches_inline_media_source(payload.source_image_src.as_str()) {
+    if matches_inline_media_source(payload.source_image_src.as_str())
+        || payload
+            .reference_src
+            .as_deref()
+            .is_some_and(matches_inline_media_source)
+    {
         return Err(character_animation_error_response(
             &request_context,
             editor_character_animation_bad_request(
-                "sourceImageSrc 必须先上传 OSS，并使用 objectKey 或画板资源引用。",
+                "参考素材必须先上传 OSS，并使用 objectKey 或画板资源引用。",
             ),
         ));
     }
@@ -754,8 +1108,7 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
     payload.asset_folder_id = target.asset_folder_id;
     let project_id = payload.project_id.clone();
     let canvas_completion = payload.canvas_completion.clone();
-    let generation_inputs = payload.generation_inputs.clone();
-    let source_resource_id = payload.source_resource_id.clone();
+    let client_generation_inputs = payload.generation_inputs.clone();
     let asset_folder_id = payload.asset_folder_id.clone();
     let asset_label =
         resolve_editor_character_animation_asset_label(payload.asset_label.as_deref());
@@ -769,37 +1122,153 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             })),
         )
     })?;
-    // 先解析源角色图：图生视频的主体颜色完全由源图决定，背景色决策必须看到这张图。
-    let source_resolve_client = build_upstream_http_client(SOURCE_IMAGE_RESOLVE_TIMEOUT_MS)
-        .map_err(|error| character_animation_error_response(&request_context, error))?;
-    let source_object_key = resolve_editor_reference_object_key_for_owner(
-        &state,
-        owner_user_id.as_str(),
-        payload.source_image_src.trim(),
-    )
-    .await
-    .map_err(|error| character_animation_error_response(&request_context, error))?;
-    let source_data_url = resolve_media_source_as_data_url(
-        &state,
-        &source_resolve_client,
-        source_object_key.as_str(),
-        "sourceImageSrc",
-    )
-    .await
-    .map_err(|error| character_animation_error_response(&request_context, error))?;
     // 定价 / 上游设置先于扣费，且都不依赖背景色：用默认色占位归一化（与队列路径一致），
     // 把背景色决策挪到预扣泥点之后，避免余额不足 / 生成注定失败时仍白发一次 gpt-5-mini 决策。
+    let provisional_screen_color =
+        parse_editor_character_animation_background_color(payload.background_color.as_deref())
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let provisional_normalized = normalize_editor_character_animation_request_with_pricing(
+        payload.clone(),
+        &pricing,
+        provisional_screen_color,
+    )
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    // 在预扣前完成 owner-scoped 参考素材解析，避免文本模式误走源图逻辑，也避免跨账号
+    // objectKey 在扣费后才被拒绝。图片模式读取真实图片尺寸和 data URL；视频模式按 OSS
+    // HEAD + 有界下载 + FFprobe 读取时长与视频流尺寸。same 比例随后用权威尺寸重新归一化。
+    let source_resolve_client = build_upstream_http_client(SOURCE_IMAGE_RESOLVE_TIMEOUT_MS)
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let extraction_settings = resolve_backend_frame_extraction_settings(&state);
+    let (reference_object_key, source_data_url) = match provisional_normalized.input_mode {
+        EditorCharacterAnimationInputMode::Text => (None, None),
+        EditorCharacterAnimationInputMode::Image => {
+            let reference_src =
+                provisional_normalized
+                    .reference_src
+                    .as_deref()
+                    .ok_or_else(|| {
+                        character_animation_error_response(
+                            &request_context,
+                            editor_character_animation_bad_request("图片模式必须提供参考图片。"),
+                        )
+                    })?;
+            let object_key = resolve_editor_reference_object_key_for_owner(
+                &state,
+                owner_user_id.as_str(),
+                reference_src,
+            )
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            let resolved = resolve_editor_character_animation_reference_image(
+                &state,
+                &source_resolve_client,
+                object_key.as_str(),
+                "referenceSrc",
+            )
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            apply_editor_character_animation_authoritative_reference_dimensions(
+                &mut payload,
+                EditorCharacterAnimationInputMode::Image,
+                resolved.width,
+                resolved.height,
+            )
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            (Some(object_key), Some(resolved.data_url))
+        }
+        EditorCharacterAnimationInputMode::Video => {
+            let reference_src =
+                provisional_normalized
+                    .reference_src
+                    .as_deref()
+                    .ok_or_else(|| {
+                        character_animation_error_response(
+                            &request_context,
+                            editor_character_animation_bad_request("视频模式必须提供参考视频。"),
+                        )
+                    })?;
+            let object_key = resolve_editor_reference_object_key_for_owner(
+                &state,
+                owner_user_id.as_str(),
+                reference_src,
+            )
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            let metadata = validate_editor_character_animation_reference_video_object(
+                &state,
+                &source_resolve_client,
+                owner_user_id.as_str(),
+                object_key.as_str(),
+                "referenceSrc",
+                &extraction_settings,
+            )
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            apply_editor_character_animation_authoritative_reference_dimensions(
+                &mut payload,
+                EditorCharacterAnimationInputMode::Video,
+                metadata.width,
+                metadata.height,
+            )
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            (Some(object_key), None)
+        }
+    };
     let priced = normalize_editor_character_animation_request_with_pricing(
         payload.clone(),
         &pricing,
-        crate::editor_green_screen::default_editor_screen_background_color(),
+        provisional_screen_color,
     )
     .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let source_resource_id = validate_editor_character_animation_source_resource(
+        &state,
+        owner_user_id.as_str(),
+        project_id.as_deref(),
+        priced.input_mode,
+        payload.source_resource_id.as_deref(),
+        reference_object_key.as_deref(),
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let authoritative_generation_inputs =
+        build_authoritative_editor_character_animation_generation_inputs(
+            client_generation_inputs,
+            &payload,
+            priced.input_mode,
+            reference_object_key.as_deref(),
+        )
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let generation_reference_sources = reference_object_key
+        .as_ref()
+        .map(|object_key| {
+            (
+                match priced.input_mode {
+                    EditorCharacterAnimationInputMode::Image => "角色图片",
+                    EditorCharacterAnimationInputMode::Video => "参考视频",
+                    EditorCharacterAnimationInputMode::Text => unreachable!(),
+                }
+                .to_string(),
+                // 已通过当前项目校验时优先按正式 resource ID 重建 provenance；没有
+                // project-scoped 来源时才退回稳定 objectKey 做 owner-scoped 查找。
+                source_resource_id
+                    .clone()
+                    .unwrap_or_else(|| object_key.clone()),
+            )
+        })
+        .into_iter()
+        .collect();
+    let generation_inputs = rebuild_editor_generation_input_references(
+        &state,
+        owner_user_id.as_str(),
+        Some(authoritative_generation_inputs),
+        generation_reference_sources,
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
     let settings = require_editor_character_animation_settings(&state, &priced)
         .map_err(|error| character_animation_error_response(&request_context, error))?;
     let http_client = build_upstream_http_client(settings.ark.request_timeout_ms)
         .map_err(|error| character_animation_error_response(&request_context, error))?;
-    let extraction_settings = resolve_backend_frame_extraction_settings(&state);
     editor_generation_operation(&caller)
         .map_err(|error| character_animation_error_response(&request_context, error))?;
     let task_id = generate_ai_task_id(current_utc_micros());
@@ -818,53 +1287,84 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
         task_id.as_str(),
         u64::from(priced.price_mud_points),
         async {
-            // 背景色决策：预扣泥点之后才发起（显式传入 → 视觉 LLM 按源图主体配色自动决策 → 默认色）。
-            // 决策失败会让本 future 返回 Err，走 execute_billable 的失败退款，用户不损失泥点。
-            let screen_background_decision = resolve_editor_screen_background_color(
-              state.llm_client(),
-              state.vector_engine_llm_client(),
-              EditorScreenBackgroundDecisionInput {
-                    kind: EditorScreenBackgroundDecisionKind::CharacterAnimation,
-                    screen_color: payload.screen_color.clone(),
-                    prompt: payload.prompt_text.clone(),
-                    icon_descriptions: Vec::new(),
-                    reference_count: 1,
-                    source_image_data_url: Some(source_data_url.clone()),
-                },
-              Some(&crate::editor_screen_background_decision::EditorScreenBackgroundDecisionAuditContext {
-                    state: &state,
-                    context: crate::external_api_audit::ExternalApiAuditContext {
-                        user_id: Some(owner_user_id.clone()),
-                        profile_id: project_id.clone(),
-                        request_id: Some(request_context.request_id().to_string()),
-                        external_call_deadline: request_context.external_call_deadline(),
+            // 新面板显式选择键色时直接采用，不额外调用视觉 LLM；旧图片入口仍保留自动配色。
+            // 文本 / 视频模式没有可用于主体配色判断的源图，缺省统一使用绿色。
+            let screen_color = if priced.has_explicit_background_color
+                || priced.input_mode != EditorCharacterAnimationInputMode::Image
+            {
+                priced.screen_color
+            } else {
+                resolve_editor_screen_background_color(
+                    state.llm_client(),
+                    state.vector_engine_llm_client(),
+                    EditorScreenBackgroundDecisionInput {
+                        kind: EditorScreenBackgroundDecisionKind::CharacterAnimation,
+                        screen_color: payload.screen_color.clone(),
+                        prompt: payload.prompt_text.clone(),
+                        icon_descriptions: Vec::new(),
+                        reference_count: 1,
+                        source_image_data_url: source_data_url.clone(),
                     },
-                }),
-            )
-            .await?;
+                    Some(
+                        &crate::editor_screen_background_decision::EditorScreenBackgroundDecisionAuditContext {
+                            state: &state,
+                            context: crate::external_api_audit::ExternalApiAuditContext {
+                                user_id: Some(owner_user_id.clone()),
+                                profile_id: project_id.clone(),
+                                request_id: Some(request_context.request_id().to_string()),
+                                external_call_deadline: request_context.external_call_deadline(),
+                            },
+                        },
+                    ),
+                )
+                .await?
+                .color
+            };
             // 用决策色重新归一化以拿到最终提示词（价格 / 校验已在预扣前用占位色完成）。
             let normalized = normalize_editor_character_animation_request_with_pricing(
                 payload,
                 &pricing,
-                screen_background_decision.color,
+                screen_color,
             )?;
-            // 透明源图先合成到选定背景色：让视频背景确定性地等于抠图键色，而不是赌模型服从提示词。
-            let source_data_url = composite_source_image_onto_screen_color(
-                source_data_url.as_str(),
-                screen_background_decision.color,
-            )
-            .unwrap_or(source_data_url);
-            let generated = request_editor_character_animation_preview(
-                &state,
-                &http_client,
-                &settings,
-                &caller,
-                normalized.source_layer_id.as_str(),
-                task_id.as_str(),
-                normalized.prompt.as_str(),
-                source_data_url.as_str(),
-            )
-            .await?;
+            let generated = match normalized.input_mode {
+                EditorCharacterAnimationInputMode::Image => {
+                    let source_data_url = source_data_url.ok_or_else(|| {
+                        editor_character_animation_bad_request("图片模式必须提供参考图片。")
+                    })?;
+                    // 透明源图先合成到选定背景色：让视频背景确定性地等于抠图键色，
+                    // 而不是赌模型服从提示词。
+                    let source_data_url = composite_source_image_onto_screen_color(
+                        source_data_url.as_str(),
+                        screen_color,
+                    )
+                    .unwrap_or(source_data_url);
+                    request_editor_character_animation_preview(
+                        &state,
+                        &http_client,
+                        &settings,
+                        &caller,
+                        normalized.source_layer_id.as_str(),
+                        task_id.as_str(),
+                        normalized.prompt.as_str(),
+                        source_data_url.as_str(),
+                    )
+                    .await?
+                }
+                EditorCharacterAnimationInputMode::Text
+                | EditorCharacterAnimationInputMode::Video => {
+                    request_editor_sequence_animation_text_or_video_preview(
+                        &state,
+                        &http_client,
+                        &settings,
+                        &caller,
+                        normalized.source_layer_id.as_str(),
+                        task_id.as_str(),
+                        &normalized,
+                        reference_object_key.as_deref(),
+                    )
+                    .await?
+                }
+            };
             // 扣费契约（【编辑器】画板角色形象生成入口设计-2026-06-15）：角色动作的交付物是
             // 画布可用的透明序列帧，预览视频本身不是可用结果；因此预览上传与 HEAD 校验、
             // phase 上报、抽帧、逐帧抠图、首帧上传与 HEAD 校验全部留在计费闭包内，任一步失败
@@ -1827,23 +2327,352 @@ async fn resolve_media_source_as_data_url(
     http_client: &reqwest::Client,
     source: &str,
     field: &str,
+    expected_kind: EditorCharacterAnimationReferenceMediaKind,
 ) -> Result<String, AppError> {
-    let payload = load_media_source_payload(state, source).await?;
-    if !(payload.mime_type.starts_with("image/") || payload.mime_type.starts_with("video/")) {
-        return Err(
-            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
-                "provider": "character-animation",
-                "field": field,
-                "message": "媒体资源必须是图片或视频。",
-            })),
-        );
+    let payload = load_media_source_payload_with_client(state, http_client, source, None).await?;
+    validate_editor_character_animation_reference_content_type(
+        payload.mime_type.as_str(),
+        field,
+        expected_kind,
+    )?;
+    Ok(media_payload_as_data_url(&payload))
+}
+
+async fn validate_editor_character_animation_source_resource(
+    state: &AppState,
+    owner_user_id: &str,
+    project_id: Option<&str>,
+    input_mode: EditorCharacterAnimationInputMode,
+    source_resource_id: Option<&str>,
+    reference_object_key: Option<&str>,
+) -> Result<Option<String>, AppError> {
+    let Some(source_resource_id) = source_resource_id
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+    else {
+        return Ok(None);
+    };
+    if input_mode == EditorCharacterAnimationInputMode::Text {
+        return Err(editor_character_animation_bad_request(
+            "文本模式不能携带 sourceResourceId。",
+        ));
     }
-    let _ = http_client;
-    Ok(format!(
-        "data:{};base64,{}",
-        payload.mime_type,
-        encode_base64(payload.bytes.as_slice())
-    ))
+    let project_id = project_id
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .ok_or_else(|| {
+            editor_character_animation_bad_request(
+                "sourceResourceId 必须与当前 projectId 一起使用。",
+            )
+        })?;
+    let reference_object_key = reference_object_key
+        .map(str::trim)
+        .map(|value| value.trim_start_matches('/'))
+        .filter(|value| !value.is_empty())
+        .ok_or_else(|| {
+            editor_character_animation_bad_request("sourceResourceId 必须指向本次使用的参考素材。")
+        })?;
+
+    let project = state
+        .spacetime_client()
+        .get_editor_project(EditorProjectGetRecordInput {
+            project_id: project_id.to_string(),
+            owner_user_id: owner_user_id.to_string(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    let resource = project
+        .resources
+        .iter()
+        .find(|resource| resource.resource_id.trim() == source_resource_id)
+        .ok_or_else(|| {
+            editor_character_animation_bad_request("sourceResourceId 不属于当前画布项目。")
+        })?;
+    if project.owner_user_id.trim() != owner_user_id.trim()
+        || resource.owner_user_id.trim() != owner_user_id.trim()
+        || resource.project_id.trim() != project_id
+    {
+        return Err(editor_character_animation_bad_request(
+            "sourceResourceId 不属于当前账号或当前画布项目。",
+        ));
+    }
+    let resource_object_key = normalize_editor_record_object_key(
+        resource.object_key.as_deref(),
+        resource.image_src.as_str(),
+    )
+    .ok_or_else(|| {
+        editor_character_animation_bad_request("sourceResourceId 缺少稳定 objectKey。")
+    })?;
+    if resource_object_key != reference_object_key {
+        return Err(editor_character_animation_bad_request(
+            "sourceResourceId 与本次参考素材不一致。",
+        ));
+    }
+    Ok(Some(source_resource_id.to_string()))
+}
+
+async fn resolve_editor_character_animation_reference_image(
+    state: &AppState,
+    http_client: &reqwest::Client,
+    source: &str,
+    field: &str,
+) -> Result<ResolvedEditorCharacterAnimationReferenceImage, AppError> {
+    let payload = load_media_source_payload_with_client(state, http_client, source, None).await?;
+    validate_editor_character_animation_reference_content_type(
+        payload.mime_type.as_str(),
+        field,
+        EditorCharacterAnimationReferenceMediaKind::Image,
+    )?;
+    let reader = ImageReader::new(Cursor::new(payload.bytes.as_slice()))
+        .with_guessed_format()
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-character-animation",
+                "field": field,
+                "message": format!("参考图片格式无法识别：{error}"),
+            }))
+        })?;
+    let mut decoder = reader.into_decoder().map_err(|error| {
+        AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+            "provider": "editor-character-animation",
+            "field": field,
+            "message": format!("参考图片无法解码：{error}"),
+        }))
+    })?;
+    let orientation = decoder.orientation().map_err(|error| {
+        AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+            "provider": "editor-character-animation",
+            "field": field,
+            "message": format!("参考图片方向信息无法解析：{error}"),
+        }))
+    })?;
+    let mut decoded = DynamicImage::from_decoder(decoder).map_err(|error| {
+        AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+            "provider": "editor-character-animation",
+            "field": field,
+            "message": format!("参考图片无法解码：{error}"),
+        }))
+    })?;
+    decoded.apply_orientation(orientation);
+    if decoded.width() == 0 || decoded.height() == 0 {
+        return Err(editor_character_animation_bad_request(
+            "参考图片缺少可识别的媒体宽高。",
+        ));
+    }
+    Ok(ResolvedEditorCharacterAnimationReferenceImage {
+        data_url: media_payload_as_data_url(&payload),
+        width: decoded.width(),
+        height: decoded.height(),
+    })
+}
+
+async fn validate_editor_character_animation_reference_video_object(
+    state: &AppState,
+    http_client: &reqwest::Client,
+    owner_user_id: &str,
+    object_key: &str,
+    field: &str,
+    extraction_settings: &BackendFrameExtractionSettings,
+) -> Result<EditorCharacterAnimationReferenceVideoMetadata, AppError> {
+    let oss_client = require_oss_client(state)?;
+    let registered = state
+        .spacetime_client()
+        .get_asset_object_by_location(module_assets::AssetObjectLocationInput {
+            bucket: oss_client.config_bucket().to_string(),
+            object_key: object_key.to_string(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    if registered.as_ref().is_some_and(|asset_object| {
+        asset_object
+            .owner_user_id
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .is_some_and(|value| value != owner_user_id.trim())
+    }) {
+        return Err(editor_character_animation_bad_request(
+            "参考素材的资产对象归属与当前账号不一致。",
+        ));
+    }
+    let head = oss_client
+        .head_object(
+            http_client,
+            OssHeadObjectRequest {
+                object_key: object_key.to_string(),
+            },
+        )
+        .await
+        .map_err(map_character_animation_oss_error)?;
+    let content_type = head
+        .content_type
+        .as_deref()
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .or_else(|| {
+            registered
+                .as_ref()
+                .and_then(|asset_object| asset_object.content_type.as_deref())
+                .map(str::trim)
+                .filter(|value| !value.is_empty())
+        })
+        .unwrap_or("application/octet-stream");
+    validate_editor_character_animation_reference_content_type(
+        content_type,
+        field,
+        EditorCharacterAnimationReferenceMediaKind::Video,
+    )?;
+    validate_editor_character_animation_reference_video_content_length(head.content_length)?;
+
+    let payload = load_media_source_payload_with_client(
+        state,
+        http_client,
+        object_key,
+        Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_BYTES),
+    )
+    .await?;
+    validate_editor_character_animation_reference_content_type(
+        payload.mime_type.as_str(),
+        field,
+        EditorCharacterAnimationReferenceMediaKind::Video,
+    )?;
+    validate_editor_character_animation_reference_video_content_length(
+        u64::try_from(payload.bytes.len()).unwrap_or(u64::MAX),
+    )?;
+    let settings = extraction_settings.clone();
+    let metadata = tokio::task::spawn_blocking(move || {
+        probe_editor_character_animation_reference_video_metadata(payload, &settings)
+    })
+    .await
+    .map_err(|error| {
+        AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+            "provider": "editor-character-animation",
+            "message": format!("参考视频规格探测任务异常结束：{error}"),
+        }))
+    })??;
+    validate_editor_character_animation_reference_video_duration(metadata.duration_seconds)?;
+    Ok(metadata)
+}
+
+fn probe_editor_character_animation_reference_video_metadata(
+    payload: MediaPayload,
+    extraction_settings: &BackendFrameExtractionSettings,
+) -> Result<EditorCharacterAnimationReferenceVideoMetadata, AppError> {
+    let temp_dir = create_animation_temp_dir()?;
+    let input_path = temp_dir.join(format!("reference.{}", payload.extension));
+    let result = (|| {
+        fs::write(&input_path, payload.bytes).map_err(|error| {
+            AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+                "provider": "editor-character-animation",
+                "message": format!("写入参考视频临时文件失败：{error}"),
+            }))
+        })?;
+        let output = run_process_with_timeout(
+            &extraction_settings.ffprobe_path,
+            &[
+                "-v",
+                "error",
+                "-select_streams",
+                "v:0",
+                "-show_entries",
+                "stream=width,height:stream_tags=rotate:stream_side_data=rotation:format=duration",
+                "-of",
+                "json",
+                input_path.to_string_lossy().as_ref(),
+            ],
+            extraction_settings.timeout_ms,
+            "探测参考视频规格失败",
+        )?;
+        parse_editor_character_animation_reference_video_probe(output.stdout.as_slice())
+    })();
+    let _ = fs::remove_dir_all(&temp_dir);
+    result
+}
+
+fn parse_editor_character_animation_reference_video_probe(
+    stdout: &[u8],
+) -> Result<EditorCharacterAnimationReferenceVideoMetadata, AppError> {
+    let payload: Value = serde_json::from_slice(stdout).map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "editor-character-animation",
+            "message": format!("解析参考视频 FFprobe 输出失败：{error}"),
+        }))
+    })?;
+    let duration_seconds = payload
+        .get("format")
+        .and_then(|format| format.get("duration"))
+        .and_then(parse_ffprobe_f64)
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "editor-character-animation",
+                "message": "参考视频 FFprobe 输出缺少有效时长。",
+            }))
+        })?;
+    let stream = payload
+        .get("streams")
+        .and_then(Value::as_array)
+        .and_then(|streams| streams.first())
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-character-animation",
+                "message": "参考视频缺少可识别的视频流。",
+            }))
+        })?;
+    let mut width = stream
+        .get("width")
+        .and_then(parse_ffprobe_u32)
+        .filter(|value| *value > 0)
+        .ok_or_else(|| editor_character_animation_bad_request("参考视频缺少有效宽度。"))?;
+    let mut height = stream
+        .get("height")
+        .and_then(parse_ffprobe_u32)
+        .filter(|value| *value > 0)
+        .ok_or_else(|| editor_character_animation_bad_request("参考视频缺少有效高度。"))?;
+    if editor_character_animation_video_rotation_degrees(stream)
+        .is_some_and(|rotation| matches!(rotation.rem_euclid(360), 90 | 270))
+    {
+        std::mem::swap(&mut width, &mut height);
+    }
+    Ok(EditorCharacterAnimationReferenceVideoMetadata {
+        duration_seconds,
+        width,
+        height,
+    })
+}
+
+fn editor_character_animation_video_rotation_degrees(stream: &Value) -> Option<i32> {
+    stream
+        .get("side_data_list")
+        .and_then(Value::as_array)
+        .and_then(|entries| {
+            entries.iter().find_map(|entry| {
+                entry
+                    .get("rotation")
+                    .and_then(parse_ffprobe_f64)
+                    .map(|value| value.round() as i32)
+            })
+        })
+        .or_else(|| {
+            stream
+                .get("tags")
+                .and_then(|tags| tags.get("rotate"))
+                .and_then(parse_ffprobe_f64)
+                .map(|value| value.round() as i32)
+        })
+}
+
+fn parse_ffprobe_f64(value: &Value) -> Option<f64> {
+    value
+        .as_f64()
+        .or_else(|| value.as_str()?.trim().parse::<f64>().ok())
+        .filter(|value| value.is_finite())
+}
+
+fn parse_ffprobe_u32(value: &Value) -> Option<u32> {
+    value
+        .as_u64()
+        .and_then(|value| u32::try_from(value).ok())
+        .or_else(|| value.as_str()?.trim().parse::<u32>().ok())
 }
 
 async fn request_image_to_video_preview(
@@ -2241,6 +3070,97 @@ async fn request_editor_character_animation_preview(
     })
 }
 
+async fn request_editor_sequence_animation_text_or_video_preview(
+    state: &AppState,
+    http_client: &reqwest::Client,
+    settings: &EditorCharacterAnimationSettings,
+    caller: &EditorGenerationCaller,
+    source_layer_id: &str,
+    task_id: &str,
+    request: &NormalizedEditorCharacterAnimationRequest,
+    reference_object_key: Option<&str>,
+) -> Result<GeneratedAnimationPreview, AppError> {
+    let video_request =
+        build_editor_sequence_animation_video_request(settings, request, reference_object_key)?;
+    let video_settings = EditorVideoSettings {
+        ark: settings.ark.clone(),
+    };
+    let upstream_task_id = create_editor_text_to_video_task(
+        state,
+        http_client,
+        &video_settings,
+        caller.owner_user_id.as_str(),
+        &video_request,
+    )
+    .await?;
+    let video_url =
+        wait_for_ark_content_generation_task(http_client, &settings.ark, upstream_task_id.as_str())
+            .await?;
+    let preview_payload = download_generated_video(
+        http_client,
+        video_url.as_str(),
+        "下载Spine序列帧动画预览视频失败。",
+    )
+    .await?;
+    let persisted = put_generated_editor_character_animation_preview(
+        state,
+        caller,
+        source_layer_id,
+        task_id,
+        preview_payload,
+    )
+    .await?;
+
+    Ok(GeneratedAnimationPreview {
+        preview_video_path: persisted.legacy_public_path,
+        object_key: Some(persisted.object_key),
+        asset_object_id: Some(persisted.asset_object_id),
+        thumbnail_src: None,
+        prepared_asset_objects: vec![(
+            EDITOR_CHARACTER_ANIMATION_PREVIEW_RESULT_SLOT.to_string(),
+            persisted.prepared_asset_object,
+        )],
+        upstream_task_id,
+        submitted_prompt: request.prompt.clone(),
+        moderation_fallback_applied: false,
+    })
+}
+
+fn build_editor_sequence_animation_video_request(
+    settings: &EditorCharacterAnimationSettings,
+    request: &NormalizedEditorCharacterAnimationRequest,
+    reference_object_key: Option<&str>,
+) -> Result<NormalizedEditorVideoRequest, AppError> {
+    let reference_video_srcs = match request.input_mode {
+        EditorCharacterAnimationInputMode::Text => Vec::new(),
+        EditorCharacterAnimationInputMode::Video => {
+            vec![reference_object_key.map(str::to_string).ok_or_else(|| {
+                editor_character_animation_bad_request("视频模式必须提供参考视频。")
+            })?]
+        }
+        EditorCharacterAnimationInputMode::Image => {
+            return Err(editor_character_animation_bad_request(
+                "图片模式必须使用图片首尾帧生成链路。",
+            ));
+        }
+    };
+    Ok(NormalizedEditorVideoRequest {
+        prompt: request.prompt.clone(),
+        model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
+        provider_model: settings.ark.model.clone(),
+        aspect_ratio: request.ratio.clone(),
+        resolution: request.resolution.clone(),
+        duration_seconds: request.duration_seconds,
+        generate_audio: false,
+        price_mud_points: request.price_mud_points,
+        width: request.frame_width,
+        height: request.frame_height,
+        reference_image_srcs: Vec::new(),
+        reference_video_srcs,
+        reference_audio_srcs: Vec::new(),
+    })
+}
+
 async fn request_editor_video_preview(
     state: &AppState,
     http_client: &reqwest::Client,
@@ -4061,84 +4981,6 @@ fn resolve_character_animation_model(payload: &CharacterAnimationGenerateRequest
     normalize_required_text(candidate, CHARACTER_ANIMATION_MODEL)
 }
 
-#[cfg(test)]
-fn normalize_editor_character_animation_request(
-    payload: EditorCharacterAnimationGenerateRequest,
-) -> Result<NormalizedEditorCharacterAnimationRequest, AppError> {
-    let pricing = crate::editor_generation_config::load_editor_generation_pricing_from_paths(None)
-        .expect("默认模型定价配置必须合法");
-    normalize_editor_character_animation_request_with_pricing(
-        payload,
-        &pricing,
-        crate::editor_green_screen::default_editor_screen_background_color(),
-    )
-}
-
-fn normalize_editor_character_animation_request_with_pricing(
-    payload: EditorCharacterAnimationGenerateRequest,
-    pricing: &EditorGenerationPricingConfig,
-    screen_color: EditorScreenBackgroundColor,
-) -> Result<NormalizedEditorCharacterAnimationRequest, AppError> {
-    let source_layer_id = normalize_required_text(payload.source_layer_id.as_str(), "");
-    if source_layer_id.is_empty() {
-        return Err(editor_character_animation_bad_request(
-            "sourceLayerId 不能为空。",
-        ));
-    }
-    // 源图在 handler 里已提前解析（决策要看图）；这里保留空值校验，队列路径入队前也走这份校验。
-    trim_optional_text(Some(payload.source_image_src.as_str()))
-        .ok_or_else(|| editor_character_animation_bad_request("sourceImageSrc 不能为空。"))?;
-    let prompt_text = payload
-        .prompt_text
-        .trim()
-        .chars()
-        .take(4000)
-        .collect::<String>();
-    if prompt_text.is_empty() {
-        return Err(editor_character_animation_bad_request("动画描述不能为空。"));
-    }
-    let resolution = normalize_editor_character_animation_resolution(payload.resolution.as_str())?;
-    let ratio = normalize_editor_character_animation_ratio(payload.ratio.as_str())?;
-    let frame_count = normalize_editor_character_animation_frame_count(payload.frame_count)?;
-    let duration_seconds =
-        normalize_editor_character_animation_duration(payload.duration_seconds, frame_count)?;
-    let expected_price = pricing.character_animation_model_mud_points(
-        Some(payload.model.as_str()),
-        resolution,
-        duration_seconds,
-    );
-    if payload.model.trim() != EDITOR_CHARACTER_ANIMATION_MODEL {
-        return Err(editor_character_animation_bad_request(
-            "model 必须固定为 seedance2.0-fast。",
-        ));
-    }
-    let (frame_width, frame_height) = resolve_editor_character_animation_frame_size(
-        payload.source_width,
-        payload.source_height,
-        ratio,
-        resolution,
-    );
-    let prompt = build_editor_character_animation_prompt(prompt_text.as_str(), screen_color);
-
-    Ok(NormalizedEditorCharacterAnimationRequest {
-        source_layer_id,
-        prompt,
-        screen_color,
-        resolution: resolution.to_string(),
-        ratio: resolve_editor_character_animation_provider_ratio(
-            ratio,
-            payload.source_width,
-            payload.source_height,
-        ),
-        frame_count,
-        duration_seconds,
-        price_mud_points: expected_price,
-        frame_width,
-        frame_height,
-        fps: (frame_count / duration_seconds).max(1),
-    })
-}
-
 fn require_editor_character_animation_settings(
     state: &AppState,
     request: &NormalizedEditorCharacterAnimationRequest,
@@ -4664,132 +5506,6 @@ fn editor_video_bad_request(message: impl Into<String>) -> AppError {
     }))
 }
 
-fn build_editor_character_animation_prompt(
-    prompt_text: &str,
-    screen_color: EditorScreenBackgroundColor,
-) -> String {
-    format!(
-        "生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。{}；禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。\n动作描述：\n{}",
-        editor_green_screen_character_prompt_clause(screen_color),
-        prompt_text.trim()
-    )
-}
-
-fn normalize_editor_character_animation_resolution(value: &str) -> Result<&'static str, AppError> {
-    match value.trim() {
-        "480p" => Ok("480p"),
-        "720p" => Ok("720p"),
-        _ => Err(editor_character_animation_bad_request(
-            "resolution 只支持 480p 或 720p。",
-        )),
-    }
-}
-
-fn normalize_editor_character_animation_ratio(value: &str) -> Result<&'static str, AppError> {
-    match value.trim() {
-        "same" => Ok("same"),
-        "1:1" => Ok("1:1"),
-        "4:3" => Ok("4:3"),
-        "16:9" => Ok("16:9"),
-        "9:16" => Ok("9:16"),
-        "3:4" => Ok("3:4"),
-        _ => Err(editor_character_animation_bad_request(
-            "ratio 只支持 same、1:1、4:3、16:9、9:16、3:4。",
-        )),
-    }
-}
-
-fn normalize_editor_character_animation_frame_count(value: u32) -> Result<u32, AppError> {
-    match value {
-        32 | 40 | 48 => Ok(value),
-        _ => Err(editor_character_animation_bad_request(
-            "frameCount 只支持 32、40、48。",
-        )),
-    }
-}
-
-fn normalize_editor_character_animation_duration(
-    value: u32,
-    frame_count: u32,
-) -> Result<u32, AppError> {
-    let expected = match frame_count {
-        32 => 4,
-        40 => 5,
-        48 => 6,
-        _ => 0,
-    };
-    if value == expected {
-        Ok(value)
-    } else {
-        Err(editor_character_animation_bad_request(
-            "durationSeconds 必须与帧数组合为 32/4、40/5 或 48/6。",
-        ))
-    }
-}
-
-fn resolve_editor_character_animation_provider_ratio(
-    ratio: &str,
-    source_width: u32,
-    source_height: u32,
-) -> String {
-    if ratio != "same" {
-        return ratio.to_string();
-    }
-    if source_width == 0 || source_height == 0 {
-        return "1:1".to_string();
-    }
-    let normalized = source_width as f32 / source_height as f32;
-    [
-        ("1:1", 1.0f32),
-        ("4:3", 4.0 / 3.0),
-        ("16:9", 16.0 / 9.0),
-        ("9:16", 9.0 / 16.0),
-        ("3:4", 3.0 / 4.0),
-    ]
-    .into_iter()
-    .min_by(|(_, left), (_, right)| {
-        (normalized - *left)
-            .abs()
-            .partial_cmp(&(normalized - *right).abs())
-            .unwrap_or(std::cmp::Ordering::Equal)
-    })
-    .map(|(value, _)| value.to_string())
-    .unwrap_or_else(|| "1:1".to_string())
-}
-
-fn resolve_editor_character_animation_frame_size(
-    source_width: u32,
-    source_height: u32,
-    ratio: &str,
-    resolution: &str,
-) -> (u32, u32) {
-    let long_edge = if resolution == "720p" { 720 } else { 480 };
-    let (ratio_width, ratio_height) = match ratio {
-        "same" if source_width > 0 && source_height > 0 => (source_width, source_height),
-        "4:3" => (4, 3),
-        "16:9" => (16, 9),
-        "9:16" => (9, 16),
-        "3:4" => (3, 4),
-        _ => (1, 1),
-    };
-    if ratio_width >= ratio_height {
-        let height =
-            ((long_edge as f32 * ratio_height as f32 / ratio_width as f32).round() as u32).max(1);
-        (long_edge, height)
-    } else {
-        let width =
-            ((long_edge as f32 * ratio_width as f32 / ratio_height as f32).round() as u32).max(1);
-        (width, long_edge)
-    }
-}
-
-fn editor_character_animation_bad_request(message: impl Into<String>) -> AppError {
-    AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
-        "provider": "editor-character-animation",
-        "message": message.into(),
-    }))
-}
-
 fn build_animation_generate_result_payload(generated: &CharacterAnimationGeneratedDraft) -> Value {
     match generated.preview_video_path.as_ref() {
         Some(preview_video_path) => json!({
@@ -4880,12 +5596,21 @@ async fn extract_animation_frames_from_preview_video(
     })?;
 
     let extraction_result = (|| {
-        let duration_seconds = probe_video_duration_seconds_or_known(
+        let probed_duration_seconds = probe_video_duration_seconds_or_known(
             &input_path,
             extraction_settings,
             known_duration_seconds,
         )?
         .max(0.001);
+        // 采样时间轴必须映射到请求时长（付费契约与声明 fps），不能直接用
+        // provider 实际时长。provider 返回更长视频时，若按全片均匀采样，帧会被压缩播放，
+        // 超出付费窗口的动作尾段也被带入；这里用 min(请求, 实际) 截取前段。仅当请求时长
+        // 缺失时才退回探测值。
+        let duration_seconds = known_duration_seconds
+            .filter(|value| value.is_finite() && *value > 0.0)
+            .map(|value| value.min(probed_duration_seconds))
+            .unwrap_or(probed_duration_seconds)
+            .max(0.001);
         let mut target_seconds = Vec::with_capacity(plan.frame_count as usize);
         let mut raw_frame_paths = Vec::with_capacity(plan.frame_count as usize);
         for frame_index in 0..plan.frame_count {
@@ -5396,8 +6121,19 @@ fn compute_contain_dimensions(
 async fn load_media_source_payload(
     state: &AppState,
     source: &str,
+) -> Result<MediaPayload, AppError> {
+    let http_client = build_upstream_http_client(SOURCE_IMAGE_RESOLVE_TIMEOUT_MS)?;
+    load_media_source_payload_with_client(state, &http_client, source, None).await
+}
+
+async fn load_media_source_payload_with_client(
+    state: &AppState,
+    http_client: &reqwest::Client,
+    source: &str,
+    max_bytes: Option<u64>,
 ) -> Result<MediaPayload, AppError> {
     if let Some(payload) = parse_media_data_url(source) {
+        validate_media_payload_download_size(payload.bytes.len(), max_bytes)?;
         return Ok(payload);
     }
 
@@ -5405,20 +6141,29 @@ async fn load_media_source_payload(
     let oss_client = require_oss_client(state)?;
     let head = oss_client
         .head_object(
-            &reqwest::Client::new(),
+            http_client,
             OssHeadObjectRequest {
                 object_key: object_key.clone(),
             },
         )
         .await
         .map_err(map_character_animation_oss_error)?;
+    if let Some(max_bytes) = max_bytes {
+        validate_editor_character_animation_reference_video_content_length(head.content_length)?;
+        if head.content_length > max_bytes {
+            return Err(editor_character_animation_bad_request(format!(
+                "参考媒体单个不能超过{}MB。",
+                max_bytes / 1024 / 1024
+            )));
+        }
+    }
     let signed = oss_client
         .sign_get_object_url(OssSignedGetObjectUrlRequest {
             object_key,
             expire_seconds: Some(60),
         })
         .map_err(map_character_animation_oss_error)?;
-    let bytes = reqwest::Client::new()
+    let mut response = http_client
         .get(signed.signed_url)
         .send()
         .await
@@ -5434,16 +6179,43 @@ async fn load_media_source_payload(
                 "provider": "aliyun-oss",
                 "message": format!("读取角色动作帧失败：{error}"),
             }))
-        })?
-        .bytes()
-        .await
-        .map_err(|error| {
+        })?;
+    if let (Some(max_bytes), Some(response_length)) = (max_bytes, response.content_length()) {
+        validate_editor_character_animation_reference_video_content_length(response_length)?;
+        if response_length > max_bytes {
+            return Err(editor_character_animation_bad_request(format!(
+                "参考媒体单个不能超过{}MB。",
+                max_bytes / 1024 / 1024
+            )));
+        }
+    }
+    let initial_capacity = usize::try_from(head.content_length.min(8 * 1024 * 1024)).unwrap_or(0);
+    let mut bytes = Vec::with_capacity(initial_capacity);
+    while let Some(chunk) = response.chunk().await.map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "aliyun-oss",
+            "message": format!("读取角色动作帧内容失败：{error}"),
+        }))
+    })? {
+        let next_len = bytes.len().checked_add(chunk.len()).ok_or_else(|| {
             AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
                 "provider": "aliyun-oss",
-                "message": format!("读取角色动作帧内容失败：{error}"),
+                "message": "读取角色动作帧内容时大小溢出。",
             }))
-        })?
-        .to_vec();
+        })?;
+        validate_media_payload_download_size(next_len, max_bytes)?;
+        bytes.extend_from_slice(chunk.as_ref());
+    }
+    if head.content_length != u64::try_from(bytes.len()).unwrap_or(u64::MAX) {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "aliyun-oss",
+                "message": "角色动作媒体对象下载长度与 OSS HEAD 不一致。",
+                "expectedContentLength": head.content_length,
+                "actualContentLength": bytes.len(),
+            })),
+        );
+    }
     let mime_type = head
         .content_type
         .unwrap_or_else(|| "application/octet-stream".to_string());
@@ -5456,6 +6228,32 @@ async fn load_media_source_payload(
     })
 }
 
+fn validate_media_payload_download_size(
+    content_length: usize,
+    max_bytes: Option<u64>,
+) -> Result<(), AppError> {
+    let Some(max_bytes) = max_bytes else {
+        return Ok(());
+    };
+    let content_length = u64::try_from(content_length).unwrap_or(u64::MAX);
+    validate_editor_character_animation_reference_video_content_length(content_length)?;
+    if content_length > max_bytes {
+        return Err(editor_character_animation_bad_request(format!(
+            "参考媒体单个不能超过{}MB。",
+            max_bytes / 1024 / 1024
+        )));
+    }
+    Ok(())
+}
+
+fn media_payload_as_data_url(payload: &MediaPayload) -> String {
+    format!(
+        "data:{};base64,{}",
+        payload.mime_type,
+        encode_base64(payload.bytes.as_slice())
+    )
+}
+
 fn parse_media_data_url(value: &str) -> Option<MediaPayload> {
     let body = value.trim().strip_prefix("data:")?;
     let (mime_type, data) = body.split_once(";base64,")?;
@@ -5893,25 +6691,6 @@ fn trim_optional_text(value: Option<&str>) -> Option<String> {
         .map(ToOwned::to_owned)
 }
 
-fn resolve_editor_character_animation_asset_label(value: Option<&str>) -> String {
-    trim_optional_text(value)
-        .unwrap_or_else(|| "角色动作".to_string())
-        .chars()
-        .take(EDITOR_ASSET_LABEL_MAX_CHARS)
-        .collect()
-}
-
-fn editor_character_animation_source_asset_label(asset_label: &str) -> String {
-    let suffix = "（原始视频）";
-    let base_char_limit = EDITOR_ASSET_LABEL_MAX_CHARS.saturating_sub(suffix.chars().count());
-    let base = asset_label
-        .trim()
-        .chars()
-        .take(base_char_limit)
-        .collect::<String>();
-    format!("{base}{suffix}")
-}
-
 fn clamp_prompt_seed_text(value: Option<&str>) -> String {
     trim_optional_text(value)
         .unwrap_or_default()
@@ -6628,6 +7407,7 @@ struct ParsedAnimationJsonPayload {
     payload: Value,
 }
 
+#[derive(Clone)]
 struct ArkVideoSettings {
     base_url: String,
     api_key: String,
@@ -6646,21 +7426,6 @@ struct EditorVideoSettings {
     ark: ArkVideoSettings,
 }
 
-#[derive(Debug)]
-struct NormalizedEditorCharacterAnimationRequest {
-    source_layer_id: String,
-    prompt: String,
-    resolution: String,
-    ratio: String,
-    frame_count: u32,
-    duration_seconds: u32,
-    price_mud_points: u32,
-    frame_width: u32,
-    frame_height: u32,
-    fps: u32,
-    screen_color: EditorScreenBackgroundColor,
-}
-
 #[derive(Debug)]
 struct NormalizedEditorVideoRequest {
     prompt: String,
@@ -6689,6 +7454,7 @@ struct GeneratedAnimationPreview {
     moderation_fallback_applied: bool,
 }
 
+#[derive(Clone)]
 struct BackendFrameExtractionSettings {
     ffmpeg_path: String,
     ffprobe_path: String,
@@ -6736,6 +7502,19 @@ struct MediaPayload {
     bytes: Vec<u8>,
 }
 
+struct ResolvedEditorCharacterAnimationReferenceImage {
+    data_url: String,
+    width: u32,
+    height: u32,
+}
+
+#[derive(Clone, Copy, Debug, PartialEq)]
+struct EditorCharacterAnimationReferenceVideoMetadata {
+    duration_seconds: f64,
+    width: u32,
+    height: u32,
+}
+
 // 发布整套动作后，当前阶段只需要把旧前端依赖的 animationMap 返回出去。
 struct PublishedAnimationSet {
     animation_map: Value,
@@ -6752,6 +7531,32 @@ mod tests {
     use super::*;
     use crate::AppConfig;
 
+    fn editor_character_animation_test_request() -> EditorCharacterAnimationGenerateRequest {
+        EditorCharacterAnimationGenerateRequest {
+            source_layer_id: "layer-hero".to_string(),
+            source_image_src: "/generated-characters/hero/master.png".to_string(),
+            source_width: 1024,
+            source_height: 1024,
+            input_mode: None,
+            reference_media_type: None,
+            reference_src: None,
+            prompt_text: "待机呼吸".to_string(),
+            background_color: None,
+            screen_color: None,
+            resolution: "480p".to_string(),
+            ratio: "same".to_string(),
+            frame_count: 32,
+            duration_seconds: 4,
+            model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
+            project_id: None,
+            canvas_completion: None,
+            generation_inputs: None,
+            source_resource_id: None,
+            asset_folder_id: None,
+            asset_label: None,
+        }
+    }
+
     fn editor_character_animation_test_asset_object(
         asset_object_id: &str,
         object_key: &str,
@@ -6989,65 +7794,6 @@ mod tests {
         assert_eq!(resolve_character_animation_model(&payload), "wan-move");
     }
 
-    #[test]
-    fn editor_character_animation_normalizes_seedance_request_contract() {
-        let normalized =
-            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
-                source_layer_id: " layer-hero ".to_string(),
-                source_image_src: "/generated-characters/hero/master.png".to_string(),
-                source_width: 768,
-                source_height: 1024,
-                prompt_text: "待机呼吸，轻微摆动。".to_string(),
-                screen_color: None,
-                resolution: "720p".to_string(),
-                ratio: "same".to_string(),
-                frame_count: 48,
-                duration_seconds: 6,
-                model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
-                project_id: None,
-                canvas_completion: None,
-                generation_inputs: None,
-                source_resource_id: None,
-                asset_folder_id: None,
-                asset_label: Some(" 勇者待机 ".to_string()),
-            })
-            .expect("editor request should normalize");
-
-        assert_eq!(normalized.source_layer_id, "layer-hero");
-        assert_eq!(normalized.frame_count, 48);
-        assert_eq!(normalized.duration_seconds, 6);
-        assert_eq!(normalized.price_mud_points, 120);
-        assert_eq!(normalized.fps, 8);
-        assert_eq!(normalized.frame_width, 540);
-        assert_eq!(normalized.frame_height, 720);
-        assert_eq!(normalized.ratio, "3:4");
-        assert_eq!(
-            resolve_editor_character_animation_asset_label(Some(" 勇者待机 ")),
-            "勇者待机"
-        );
-        assert_eq!(
-            resolve_editor_character_animation_asset_label(Some("   ")),
-            "角色动作"
-        );
-        assert_eq!(
-            resolve_editor_character_animation_asset_label(Some("动".repeat(81).as_str()))
-                .chars()
-                .count(),
-            EDITOR_ASSET_LABEL_MAX_CHARS
-        );
-        assert_eq!(
-            editor_character_animation_source_asset_label("勇者待机"),
-            "勇者待机（原始视频）"
-        );
-        let long_source_label =
-            editor_character_animation_source_asset_label("动".repeat(80).as_str());
-        assert_eq!(
-            long_source_label.chars().count(),
-            EDITOR_ASSET_LABEL_MAX_CHARS
-        );
-        assert!(long_source_label.ends_with("（原始视频）"));
-    }
-
     #[test]
     fn editor_character_animation_uses_fast_seedance_provider_model() {
         let config = AppConfig {
@@ -7063,7 +7809,11 @@ mod tests {
                 source_image_src: "/generated-characters/hero/master.png".to_string(),
                 source_width: 1024,
                 source_height: 1024,
+                input_mode: None,
+                reference_media_type: None,
+                reference_src: None,
                 prompt_text: "待机呼吸".to_string(),
+                background_color: None,
                 screen_color: None,
                 resolution: "480p".to_string(),
                 ratio: "same".to_string(),
@@ -7086,45 +7836,81 @@ mod tests {
     }
 
     #[test]
-    fn editor_character_animation_rejects_invalid_frame_duration_pair() {
-        let error =
+    fn editor_character_animation_builds_seedance_video_reference_request() {
+        let normalized =
             normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
-                source_layer_id: "layer-hero".to_string(),
-                source_image_src: "/generated-characters/hero/master.png".to_string(),
-                source_width: 1024,
-                source_height: 1024,
-                prompt_text: "奔跑".to_string(),
-                screen_color: None,
-                resolution: "480p".to_string(),
-                ratio: "1:1".to_string(),
-                frame_count: 48,
-                duration_seconds: 4,
-                model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
-                project_id: None,
-                canvas_completion: None,
-                generation_inputs: None,
-                source_resource_id: None,
-                asset_folder_id: None,
-                asset_label: None,
+                source_layer_id: String::new(),
+                source_image_src: String::new(),
+                input_mode: Some("video".to_string()),
+                reference_media_type: Some("video".to_string()),
+                reference_src: Some("users/owner/reference/action.mp4".to_string()),
+                prompt_text: "复刻参考视频的奔跑节奏".to_string(),
+                background_color: Some("blue".to_string()),
+                ratio: "16:9".to_string(),
+                frame_count: 40,
+                duration_seconds: 5,
+                ..editor_character_animation_test_request()
             })
-            .expect_err("invalid frame/duration pair should fail");
+            .expect("video mode should normalize");
+        let config = AppConfig {
+            ark_character_video_base_url: "https://ark.example.com/api/v3".to_string(),
+            ark_character_video_api_key: Some("ark-key".to_string()),
+            ..AppConfig::default()
+        };
+        let state = AppState::new(config).expect("state should build");
+        let settings = require_editor_character_animation_settings(&state, &normalized)
+            .expect("settings should normalize");
+        let video_request = build_editor_sequence_animation_video_request(
+            &settings,
+            &normalized,
+            Some("users/owner/reference/action.mp4"),
+        )
+        .expect("video request should build");
 
-        assert!(error.body_text().contains("durationSeconds 必须与帧数组合"));
+        assert_eq!(
+            normalized.input_mode,
+            EditorCharacterAnimationInputMode::Video
+        );
+        assert_eq!(normalized.source_layer_id, "sequence-animation-video");
+        assert_eq!(normalized.screen_color.hex, "#0000FF");
+        assert_eq!(video_request.provider_model, CHARACTER_ANIMATION_MODEL);
+        assert_eq!(video_request.aspect_ratio, "16:9");
+        assert_eq!(video_request.duration_seconds, 5);
+        assert!(!video_request.generate_audio);
+        assert_eq!(
+            video_request.reference_video_srcs,
+            vec!["users/owner/reference/action.mp4".to_string()]
+        );
+        assert!(video_request.reference_image_srcs.is_empty());
+        assert!(video_request.reference_audio_srcs.is_empty());
     }
 
     #[test]
-    fn editor_character_animation_builds_required_screen_background_prompt() {
-        let color = crate::editor_green_screen::default_editor_screen_background_color();
-        let prompt = build_editor_character_animation_prompt("行走两步后回到站姿。", color);
+    fn editor_character_animation_frame_split_reuses_existing_asset_objects() {
+        let source = include_str!("character_animation_assets.rs");
+        let body = source
+            .split_once("pub async fn split_editor_character_animation_frames")
+            .and_then(|(_, tail)| {
+                tail.split_once("pub(crate) async fn enqueue_editor_character_animation_for_owner")
+                    .map(|(body, _)| body)
+            })
+            .expect("frame split handler should exist");
 
-        assert!(prompt.contains("生成游戏角色动画"));
-        assert!(prompt.contains("参考图作为首帧和尾帧"));
-        assert!(prompt.contains(color.hex));
-        assert!(prompt.contains("纯色背景必须平整无纹理、无渐变、无阴影"));
-        assert!(
-            prompt.contains("角色主体及其服饰、道具的颜色必须与背景色明显区分，不得带与背景色相同或相近的描边、投影或反光")
+        assert!(body.contains("get_asset_object("));
+        assert!(body.contains("persist_editor_spritesheet_slice_batch("));
+        assert!(body.contains("asset_object: module_assets::AssetObjectUpsertInput"));
+        assert!(!body.contains("put_character_animation_object("));
+        assert!(!body.contains("resolve_media_source_as_data_url("));
+        assert_function_contains_in_order(
+            source,
+            "pub async fn split_editor_character_animation_frames",
+            "pub(crate) async fn enqueue_editor_character_animation_for_owner",
+            &[
+                "preflight_editor_billable_generation_target",
+                "character_animation_frame_split_operation_id",
+                "persist_editor_spritesheet_slice_batch",
+            ],
         );
-        assert!(prompt.contains("动作描述：\n行走两步后回到站姿。"));
     }
 
     #[test]
@@ -7256,7 +8042,7 @@ mod tests {
             "pub async fn generate_editor_video",
             &[
                 "resolve_editor_reference_object_key_for_owner",
-                "resolve_media_source_as_data_url",
+                "resolve_editor_character_animation_reference_image",
             ],
         );
         assert!(matches_inline_media_source("data:image/png;base64,AAAA"));
@@ -7725,6 +8511,126 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_character_animation_rebuilds_authoritative_inputs_before_billing() {
+        let source = include_str!("character_animation_assets.rs");
+        assert_function_contains_in_order(
+            source,
+            "pub(crate) async fn generate_editor_character_animation_for_owner",
+            "pub async fn generate_editor_video",
+            &[
+                "validate_editor_character_animation_reference_video_object",
+                "validate_editor_character_animation_source_resource",
+                "build_authoritative_editor_character_animation_generation_inputs",
+                "rebuild_editor_generation_input_references",
+                "execute_billable_asset_operation_with_cost",
+            ],
+        );
+
+        assert_function_contains_in_order(
+            source,
+            "async fn validate_editor_character_animation_reference_video_object",
+            "fn probe_editor_character_animation_reference_video_metadata",
+            &[
+                "validate_editor_character_animation_reference_video_content_length",
+                "load_media_source_payload_with_client",
+                "probe_editor_character_animation_reference_video_metadata",
+            ],
+        );
+
+        let generation_body = source
+            .split_once("pub(crate) async fn generate_editor_character_animation_for_owner")
+            .and_then(|(_, tail)| {
+                tail.split_once("pub async fn generate_editor_video")
+                    .map(|(body, _)| body)
+            })
+            .expect("character animation generation function");
+        let video_validation = generation_body
+            .find("validate_editor_character_animation_reference_video_object")
+            .expect("video validation should exist");
+        let dimension_override = generation_body[video_validation..]
+            .find("apply_editor_character_animation_authoritative_reference_dimensions")
+            .map(|offset| video_validation + offset)
+            .expect("authoritative dimension override should follow video validation");
+        let renormalization = generation_body[dimension_override..]
+            .find("normalize_editor_character_animation_request_with_pricing")
+            .map(|offset| dimension_override + offset)
+            .expect("request should be renormalized after the authoritative override");
+        let billing = generation_body
+            .find("execute_billable_asset_operation_with_cost")
+            .expect("billing boundary should exist");
+        assert!(video_validation < dimension_override);
+        assert!(dimension_override < renormalization);
+        assert!(renormalization < billing);
+    }
+
+    #[test]
+    fn editor_character_animation_reference_download_reuses_timeout_client_and_is_bounded() {
+        let source = include_str!("character_animation_assets.rs");
+        assert_function_contains(
+            source,
+            "async fn load_media_source_payload_with_client",
+            "fn validate_media_payload_download_size",
+            &[
+                "http_client",
+                ".head_object(",
+                ".get(signed.signed_url)",
+                "response.chunk()",
+                "validate_media_payload_download_size",
+            ],
+        );
+        let body = source
+            .split_once("async fn load_media_source_payload_with_client")
+            .and_then(|(_, tail)| {
+                tail.split_once("fn validate_media_payload_download_size")
+                    .map(|(body, _)| body)
+            })
+            .expect("controlled media loader should exist");
+        assert!(!body.contains("reqwest::Client::new"));
+    }
+
+    #[test]
+    fn editor_character_animation_parses_authoritative_video_probe_metadata() {
+        let metadata = parse_editor_character_animation_reference_video_probe(
+            br#"{
+                "streams": [{"width": 1080, "height": 1920}],
+                "format": {"duration": "6.250000"}
+            }"#,
+        )
+        .expect("valid ffprobe metadata should parse");
+
+        assert_eq!(
+            metadata,
+            EditorCharacterAnimationReferenceVideoMetadata {
+                duration_seconds: 6.25,
+                width: 1080,
+                height: 1920,
+            }
+        );
+
+        let rotated = parse_editor_character_animation_reference_video_probe(
+            br#"{
+                "streams": [{
+                    "width": 1920,
+                    "height": 1080,
+                    "side_data_list": [{"rotation": -90}]
+                }],
+                "format": {"duration": "4.000000"}
+            }"#,
+        )
+        .expect("display rotation should apply to authoritative dimensions");
+        assert_eq!((rotated.width, rotated.height), (1080, 1920));
+
+        let error = parse_editor_character_animation_reference_video_probe(
+            br#"{
+                "streams": [{"width": 0, "height": 1920}],
+                "format": {"duration": 6.25}
+            }"#,
+        )
+        .expect_err("zero authoritative dimensions should fail");
+        assert!(error.body_text().contains("有效宽度"));
+    }
+
     #[test]
     fn editor_character_animation_rejects_projectless_canvas_completion_before_billing() {
         let source = include_str!("character_animation_assets.rs");
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index b263aa632..609a325d6 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -26,6 +26,7 @@ use platform_oss::{
 use serde::{Deserialize, Serialize};
 use serde_json::{Value, json};
 use sha2::{Digest as _, Sha256};
+pub use shared_contracts::assets::EditorAssetPayload;
 #[cfg(test)]
 use shared_contracts::assets::EditorAudioGenerateResponse;
 use shared_contracts::assets::{
@@ -1813,43 +1814,6 @@ pub struct EditorAssetFolderPayload {
     updated_at: String,
 }
 
-#[derive(Debug, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct EditorAssetPayload {
-    asset_id: String,
-    folder_id: String,
-    label: String,
-    image_src: String,
-    object_key: Option<String>,
-    asset_object_id: Option<String>,
-    width: u32,
-    height: u32,
-    source_type: String,
-    prompt: Option<String>,
-    actual_prompt: Option<String>,
-    #[serde(skip_serializing_if = "Option::is_none")]
-    model: Option<String>,
-    #[serde(skip_serializing_if = "Option::is_none")]
-    provider: Option<String>,
-    task_id: Option<String>,
-    asset_kind: Option<String>,
-    #[serde(skip_serializing_if = "Option::is_none")]
-    image_sequence_frames: Option<Value>,
-    #[serde(skip_serializing_if = "Option::is_none")]
-    image_sequence_duration_ms: Option<u64>,
-    generation_inputs: Option<Value>,
-    source_resource_id: Option<String>,
-    public_showcase_enabled: Option<bool>,
-    thumbnail_src: Option<String>,
-    generation_cost_mud_points: u64,
-    showcase_id: Option<String>,
-    showcase_review_status: Option<String>,
-    showcase_display_enabled: Option<bool>,
-    showcase_like_count: Option<u64>,
-    created_at: String,
-    updated_at: String,
-}
-
 pub async fn load_recent_editor_project(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
diff --git a/server-rs/crates/api-server/src/editor_sequence_animation.rs b/server-rs/crates/api-server/src/editor_sequence_animation.rs
new file mode 100644
index 000000000..ab72ddd32
--- /dev/null
+++ b/server-rs/crates/api-server/src/editor_sequence_animation.rs
@@ -0,0 +1,1201 @@
+use axum::http::StatusCode;
+use serde_json::{Value, json};
+use shared_contracts::assets::{
+    EDITOR_ASSET_LABEL_MAX_CHARS, EditorCharacterAnimationGenerateRequest,
+};
+
+use crate::{
+    editor_generation_config::EditorGenerationPricingConfig,
+    editor_green_screen::{
+        EditorScreenBackgroundColor, editor_green_screen_character_prompt_clause,
+    },
+    http_error::AppError,
+};
+
+pub(crate) const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0-fast";
+pub(crate) const EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_BYTES: u64 = 50 * 1024 * 1024;
+const EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MIN_DURATION_SECONDS: f64 = 2.0;
+const EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_DURATION_SECONDS: f64 = 15.0;
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum EditorCharacterAnimationInputMode {
+    Text,
+    Image,
+    Video,
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum EditorCharacterAnimationReferenceMediaKind {
+    Image,
+    Video,
+}
+
+#[derive(Debug)]
+pub(crate) struct NormalizedEditorCharacterAnimationRequest {
+    pub(crate) input_mode: EditorCharacterAnimationInputMode,
+    pub(crate) source_layer_id: String,
+    pub(crate) reference_src: Option<String>,
+    pub(crate) prompt: String,
+    pub(crate) resolution: String,
+    pub(crate) ratio: String,
+    pub(crate) frame_count: u32,
+    pub(crate) duration_seconds: u32,
+    pub(crate) price_mud_points: u32,
+    pub(crate) frame_width: u32,
+    pub(crate) frame_height: u32,
+    pub(crate) fps: u32,
+    pub(crate) screen_color: EditorScreenBackgroundColor,
+    pub(crate) has_explicit_background_color: bool,
+}
+
+#[cfg(test)]
+pub(crate) fn normalize_editor_character_animation_request(
+    payload: EditorCharacterAnimationGenerateRequest,
+) -> Result<NormalizedEditorCharacterAnimationRequest, AppError> {
+    let pricing = crate::editor_generation_config::load_editor_generation_pricing_from_paths(None)
+        .expect("默认模型定价配置必须合法");
+    let screen_color =
+        parse_editor_character_animation_background_color(payload.background_color.as_deref())?;
+    normalize_editor_character_animation_request_with_pricing(payload, &pricing, screen_color)
+}
+
+pub(crate) fn normalize_editor_character_animation_request_with_pricing(
+    payload: EditorCharacterAnimationGenerateRequest,
+    pricing: &EditorGenerationPricingConfig,
+    screen_color: EditorScreenBackgroundColor,
+) -> Result<NormalizedEditorCharacterAnimationRequest, AppError> {
+    let input_mode = normalize_editor_character_animation_input_mode(
+        payload.input_mode.as_deref(),
+        payload.reference_media_type.as_deref(),
+        payload.reference_src.as_deref(),
+        payload.source_image_src.as_str(),
+    )?;
+    let source_layer_id = normalize_required_text(
+        payload.source_layer_id.as_str(),
+        match input_mode {
+            EditorCharacterAnimationInputMode::Text => "sequence-animation-text",
+            EditorCharacterAnimationInputMode::Image => "sequence-animation-image",
+            EditorCharacterAnimationInputMode::Video => "sequence-animation-video",
+        },
+    );
+    let reference_src = trim_optional_text(payload.reference_src.as_deref())
+        .or_else(|| trim_optional_text(Some(payload.source_image_src.as_str())));
+    if input_mode == EditorCharacterAnimationInputMode::Text && reference_src.is_some() {
+        return Err(editor_character_animation_bad_request(
+            "文本模式不能携带参考素材。",
+        ));
+    }
+    if input_mode != EditorCharacterAnimationInputMode::Text && reference_src.is_none() {
+        return Err(editor_character_animation_bad_request(
+            "图片或视频模式必须提供参考素材。",
+        ));
+    }
+    let prompt_text = payload
+        .prompt_text
+        .trim()
+        .chars()
+        .take(4000)
+        .collect::<String>();
+    if prompt_text.is_empty() {
+        return Err(editor_character_animation_bad_request("动画描述不能为空。"));
+    }
+    let resolution = normalize_editor_character_animation_resolution(payload.resolution.as_str())?;
+    let ratio = normalize_editor_character_animation_ratio(payload.ratio.as_str())?;
+    let frame_count = normalize_editor_character_animation_frame_count(payload.frame_count)?;
+    let duration_seconds =
+        normalize_editor_character_animation_duration(payload.duration_seconds, frame_count)?;
+    let expected_price = pricing.character_animation_model_mud_points(
+        Some(payload.model.as_str()),
+        resolution,
+        duration_seconds,
+    );
+    if payload.model.trim() != EDITOR_CHARACTER_ANIMATION_MODEL {
+        return Err(editor_character_animation_bad_request(
+            "model 必须固定为 seedance2.0-fast。",
+        ));
+    }
+    let provider_ratio = resolve_editor_character_animation_provider_ratio(
+        ratio,
+        payload.source_width,
+        payload.source_height,
+    );
+    // 帧尺寸必须与 provider 实际生成的宽高比一致。此前 'same' 比例用源图原始
+    // 宽高比计算帧尺寸，而 provider 只按最近标准比例生成，导致帧内 letterbox（角色小于
+    // 声明的 frame_width/height，画布缩放与预览不一致）。
+    let (frame_width, frame_height) = resolve_editor_character_animation_frame_size(
+        payload.source_width,
+        payload.source_height,
+        provider_ratio.as_str(),
+        resolution,
+    );
+    let fps = (frame_count / duration_seconds).max(1);
+    let prompt = build_editor_character_animation_prompt(
+        prompt_text.as_str(),
+        screen_color,
+        provider_ratio.as_str(),
+        resolution,
+        frame_count,
+        duration_seconds,
+        fps,
+    );
+    let has_explicit_background_color = payload
+        .background_color
+        .as_deref()
+        .map(str::trim)
+        .is_some_and(|value| !value.is_empty());
+
+    Ok(NormalizedEditorCharacterAnimationRequest {
+        input_mode,
+        source_layer_id,
+        reference_src,
+        prompt,
+        screen_color,
+        resolution: resolution.to_string(),
+        ratio: provider_ratio.to_string(),
+        frame_count,
+        duration_seconds,
+        price_mud_points: expected_price,
+        frame_width,
+        frame_height,
+        fps,
+        has_explicit_background_color,
+    })
+}
+
+pub(crate) fn build_editor_character_animation_frame_asset_label(
+    base_label: &str,
+    frame_number: usize,
+) -> String {
+    let suffix = format!(" 第{frame_number:03}帧");
+    let prefix_limit = EDITOR_ASSET_LABEL_MAX_CHARS.saturating_sub(suffix.chars().count());
+    let prefix = base_label
+        .trim()
+        .chars()
+        .take(prefix_limit)
+        .collect::<String>();
+    format!("{prefix}{suffix}")
+}
+
+pub(crate) fn resolve_editor_character_animation_asset_label(value: Option<&str>) -> String {
+    trim_optional_text(value)
+        .unwrap_or_else(|| "角色动作".to_string())
+        .chars()
+        .take(EDITOR_ASSET_LABEL_MAX_CHARS)
+        .collect()
+}
+
+pub(crate) fn editor_character_animation_source_asset_label(asset_label: &str) -> String {
+    let suffix = "（原始视频）";
+    let base_char_limit = EDITOR_ASSET_LABEL_MAX_CHARS.saturating_sub(suffix.chars().count());
+    let base = asset_label
+        .trim()
+        .chars()
+        .take(base_char_limit)
+        .collect::<String>();
+    format!("{base}{suffix}")
+}
+
+pub(crate) fn parse_editor_character_animation_background_color(
+    value: Option<&str>,
+) -> Result<EditorScreenBackgroundColor, AppError> {
+    let value = value.map(str::trim).filter(|value| !value.is_empty());
+    let color = match value.unwrap_or("green") {
+        "white" | "#FFFFFF" | "#ffffff" => EditorScreenBackgroundColor {
+            label: "纯白色",
+            hex: "#FFFFFF",
+            red: 255,
+            green: 255,
+            blue: 255,
+        },
+        "green" | "#00FF00" | "#00ff00" => EditorScreenBackgroundColor {
+            label: "纯绿色",
+            hex: "#00FF00",
+            red: 0,
+            green: 255,
+            blue: 0,
+        },
+        "blue" | "#0000FF" | "#0000ff" => EditorScreenBackgroundColor {
+            label: "纯蓝色",
+            hex: "#0000FF",
+            red: 0,
+            green: 0,
+            blue: 255,
+        },
+        "purple" | "#8000FF" | "#8000ff" => EditorScreenBackgroundColor {
+            label: "纯紫色",
+            hex: "#8000FF",
+            red: 128,
+            green: 0,
+            blue: 255,
+        },
+        _ => {
+            return Err(editor_character_animation_bad_request(
+                "backgroundColor 只支持 white、green、blue 或 purple。",
+            ));
+        }
+    };
+    Ok(color)
+}
+
+pub(crate) fn validate_editor_character_animation_reference_content_type(
+    content_type: &str,
+    field: &str,
+    expected_kind: EditorCharacterAnimationReferenceMediaKind,
+) -> Result<(), AppError> {
+    let normalized = content_type
+        .split(';')
+        .next()
+        .unwrap_or_default()
+        .trim()
+        .to_ascii_lowercase();
+    let matches = match expected_kind {
+        EditorCharacterAnimationReferenceMediaKind::Image => normalized.starts_with("image/"),
+        EditorCharacterAnimationReferenceMediaKind::Video => normalized.starts_with("video/"),
+    };
+    if matches {
+        return Ok(());
+    }
+    let message = match expected_kind {
+        EditorCharacterAnimationReferenceMediaKind::Image => "图片模式只能使用真实图片素材。",
+        EditorCharacterAnimationReferenceMediaKind::Video => "视频模式只能使用真实视频素材。",
+    };
+    Err(
+        AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+            "provider": "editor-character-animation",
+            "field": field,
+            "message": message,
+            "contentType": normalized,
+        })),
+    )
+}
+
+pub(crate) fn validate_editor_character_animation_reference_video_content_length(
+    content_length: u64,
+) -> Result<(), AppError> {
+    if content_length == 0 {
+        return Err(editor_character_animation_bad_request(
+            "参考视频不能为空文件。",
+        ));
+    }
+    if content_length > EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_BYTES {
+        return Err(editor_character_animation_bad_request(
+            "参考视频单个不能超过 50MB。",
+        ));
+    }
+    Ok(())
+}
+
+pub(crate) fn validate_editor_character_animation_reference_video_duration(
+    duration_seconds: f64,
+) -> Result<(), AppError> {
+    if !duration_seconds.is_finite()
+        || !(EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MIN_DURATION_SECONDS
+            ..=EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_DURATION_SECONDS)
+            .contains(&duration_seconds)
+    {
+        return Err(editor_character_animation_bad_request(
+            "参考视频时长必须为 2-15 秒。",
+        ));
+    }
+    Ok(())
+}
+
+pub(crate) fn apply_editor_character_animation_authoritative_reference_dimensions(
+    payload: &mut EditorCharacterAnimationGenerateRequest,
+    input_mode: EditorCharacterAnimationInputMode,
+    width: u32,
+    height: u32,
+) -> Result<(), AppError> {
+    if input_mode == EditorCharacterAnimationInputMode::Text {
+        return Ok(());
+    }
+    if width == 0 || height == 0 {
+        return Err(editor_character_animation_bad_request(
+            "参考素材需要可识别的媒体宽高。",
+        ));
+    }
+    payload.source_width = width;
+    payload.source_height = height;
+    Ok(())
+}
+
+pub(crate) fn build_authoritative_editor_character_animation_generation_inputs(
+    client_generation_inputs: Option<Value>,
+    payload: &EditorCharacterAnimationGenerateRequest,
+    input_mode: EditorCharacterAnimationInputMode,
+    reference_object_key: Option<&str>,
+) -> Result<Value, AppError> {
+    const AUTHORITATIVE_FIELD_IDS: [&str; 11] = [
+        "inputMode",
+        "referenceSrc",
+        "referenceMediaType",
+        "referenceWidth",
+        "referenceHeight",
+        "prompt",
+        "backgroundColor",
+        "resolution",
+        "ratio",
+        "frameCount",
+        "durationSeconds",
+    ];
+
+    let prompt = payload
+        .prompt_text
+        .trim()
+        .chars()
+        .take(4000)
+        .collect::<String>();
+    if prompt.is_empty() {
+        return Err(editor_character_animation_bad_request("动画描述不能为空。"));
+    }
+    let resolution = normalize_editor_character_animation_resolution(payload.resolution.as_str())?;
+    // generationInputs 保存用户请求语义；same 不能被 provider 使用的具体比例覆盖。
+    let ratio = normalize_editor_character_animation_ratio(payload.ratio.as_str())?;
+    let frame_count = normalize_editor_character_animation_frame_count(payload.frame_count)?;
+    let duration_seconds =
+        normalize_editor_character_animation_duration(payload.duration_seconds, frame_count)?;
+
+    let input_mode_value = match input_mode {
+        EditorCharacterAnimationInputMode::Text => "text",
+        EditorCharacterAnimationInputMode::Image => "image",
+        EditorCharacterAnimationInputMode::Video => "video",
+    };
+    let mut fields = vec![json!({
+        "id": "inputMode",
+        "title": "输入模式",
+        "value": input_mode_value,
+    })];
+    let mut reference_slots = Vec::new();
+    if input_mode != EditorCharacterAnimationInputMode::Text {
+        let reference_object_key = reference_object_key
+            .map(str::trim)
+            .map(|value| value.trim_start_matches('/'))
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                editor_character_animation_bad_request("参考素材缺少稳定 objectKey。")
+            })?;
+        if payload.source_width == 0 || payload.source_height == 0 {
+            return Err(editor_character_animation_bad_request(
+                "参考素材需要可识别的媒体宽高。",
+            ));
+        }
+        let (reference_title, reference_media_type) = match input_mode {
+            EditorCharacterAnimationInputMode::Image => ("角色图片", "image"),
+            EditorCharacterAnimationInputMode::Video => ("参考视频", "video"),
+            EditorCharacterAnimationInputMode::Text => unreachable!(),
+        };
+        fields.extend([
+            json!({ "id": "referenceSrc", "title": "参考素材", "value": reference_object_key }),
+            json!({ "id": "referenceMediaType", "title": "参考类型", "value": reference_media_type }),
+            json!({ "id": "referenceWidth", "title": "参考宽度", "value": payload.source_width }),
+            json!({ "id": "referenceHeight", "title": "参考高度", "value": payload.source_height }),
+        ]);
+        reference_slots.push(json!({ "id": "source", "title": reference_title }));
+    }
+    fields.push(json!({ "id": "prompt", "title": "动作描述", "value": prompt }));
+
+    let has_explicit_background_color = payload
+        .background_color
+        .as_deref()
+        .map(str::trim)
+        .is_some_and(|value| !value.is_empty());
+    let background_color = if has_explicit_background_color {
+        let color =
+            parse_editor_character_animation_background_color(payload.background_color.as_deref())?;
+        Some(match color.hex {
+            "#FFFFFF" => "white",
+            "#00FF00" => "green",
+            "#0000FF" => "blue",
+            "#8000FF" => "purple",
+            _ => unreachable!("character animation parser only returns supported colors"),
+        })
+    } else if input_mode != EditorCharacterAnimationInputMode::Image {
+        // 新面板的文本 / 视频模式没有自动选色来源，默认绿色也必须可恢复。
+        Some("green")
+    } else {
+        // 旧图片入口缺省时仍为自动选色，不能把运行时决策误写成用户选择。
+        None
+    };
+    if let Some(background_color) = background_color {
+        fields.push(json!({
+            "id": "backgroundColor",
+            "title": "背景颜色",
+            "value": background_color,
+        }));
+    }
+    fields.extend([
+        json!({ "id": "resolution", "title": "清晰度", "value": resolution }),
+        json!({ "id": "ratio", "title": "比例", "value": ratio }),
+        json!({ "id": "frameCount", "title": "帧数", "value": frame_count }),
+        json!({ "id": "durationSeconds", "title": "时长", "value": duration_seconds }),
+    ]);
+
+    // 只保留客户端未来扩展字段；所有会影响本次执行与恢复的字段由服务端覆盖。
+    if let Some(client_fields) = client_generation_inputs
+        .as_ref()
+        .and_then(|value| value.get("fields"))
+        .and_then(Value::as_array)
+    {
+        fields.extend(
+            client_fields
+                .iter()
+                .filter(|field| {
+                    let Some(field) = field.as_object() else {
+                        return false;
+                    };
+                    let valid_title = field
+                        .get("title")
+                        .and_then(Value::as_str)
+                        .map(str::trim)
+                        .is_some_and(|title| !title.is_empty());
+                    let valid_value = field.get("value").is_some_and(|value| {
+                        value.is_string() || value.is_number() || value.is_boolean()
+                    });
+                    let valid_id = match field.get("id") {
+                        Some(Value::String(id)) => !id.trim().is_empty(),
+                        Some(_) => false,
+                        None => true,
+                    };
+                    let authoritative = field
+                        .get("id")
+                        .and_then(Value::as_str)
+                        .is_some_and(|id| AUTHORITATIVE_FIELD_IDS.contains(&id.trim()));
+                    valid_title && valid_value && valid_id && !authoritative
+                })
+                .cloned(),
+        );
+    }
+
+    let mut result = client_generation_inputs
+        .and_then(|value| value.as_object().cloned())
+        .unwrap_or_default();
+    result.insert("version".to_string(), json!(2));
+    result.insert("action".to_string(), json!("character-animation.generate"));
+    result.insert("fields".to_string(), Value::Array(fields));
+    result.insert("references".to_string(), Value::Array(reference_slots));
+    Ok(Value::Object(result))
+}
+
+pub(crate) fn editor_character_animation_bad_request(message: impl Into<String>) -> AppError {
+    AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+        "provider": "editor-character-animation",
+        "message": message.into(),
+    }))
+}
+
+fn normalize_editor_character_animation_input_mode(
+    value: Option<&str>,
+    reference_media_type: Option<&str>,
+    reference_src: Option<&str>,
+    legacy_source_image_src: &str,
+) -> Result<EditorCharacterAnimationInputMode, AppError> {
+    let reference_media_type = reference_media_type
+        .map(str::trim)
+        .filter(|value| !value.is_empty());
+    if reference_media_type.is_some_and(|value| value != "image" && value != "video") {
+        return Err(editor_character_animation_bad_request(
+            "referenceMediaType 只支持 image 或 video。",
+        ));
+    }
+    let inferred = if reference_media_type == Some("video") {
+        "video"
+    } else if reference_src.is_some_and(|value| !value.trim().is_empty())
+        || !legacy_source_image_src.trim().is_empty()
+    {
+        "image"
+    } else {
+        "text"
+    };
+    let mode = match value
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .unwrap_or(inferred)
+    {
+        "text" => Ok(EditorCharacterAnimationInputMode::Text),
+        "image" => Ok(EditorCharacterAnimationInputMode::Image),
+        "video" => Ok(EditorCharacterAnimationInputMode::Video),
+        _ => Err(editor_character_animation_bad_request(
+            "inputMode 只支持 text、image 或 video。",
+        )),
+    }?;
+    match (mode, reference_media_type) {
+        (EditorCharacterAnimationInputMode::Text, Some(_)) => Err(
+            editor_character_animation_bad_request("文本模式不能携带参考素材类型。"),
+        ),
+        (EditorCharacterAnimationInputMode::Image, Some("video")) => Err(
+            editor_character_animation_bad_request("图片模式必须使用图片参考素材。"),
+        ),
+        (EditorCharacterAnimationInputMode::Video, Some("image")) => Err(
+            editor_character_animation_bad_request("视频模式必须使用视频参考素材。"),
+        ),
+        _ => Ok(mode),
+    }
+}
+
+fn normalize_editor_character_animation_resolution(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "480p" => Ok("480p"),
+        "720p" => Ok("720p"),
+        _ => Err(editor_character_animation_bad_request(
+            "resolution 只支持 480p 或 720p。",
+        )),
+    }
+}
+
+fn normalize_editor_character_animation_ratio(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "same" => Ok("same"),
+        "1:1" => Ok("1:1"),
+        "4:3" => Ok("4:3"),
+        "16:9" => Ok("16:9"),
+        "9:16" => Ok("9:16"),
+        "3:4" => Ok("3:4"),
+        _ => Err(editor_character_animation_bad_request(
+            "ratio 只支持 same、1:1、4:3、16:9、9:16、3:4。",
+        )),
+    }
+}
+
+fn normalize_editor_character_animation_frame_count(value: u32) -> Result<u32, AppError> {
+    match value {
+        32 | 40 | 48 => Ok(value),
+        _ => Err(editor_character_animation_bad_request(
+            "frameCount 只支持 32、40、48。",
+        )),
+    }
+}
+
+fn normalize_editor_character_animation_duration(
+    value: u32,
+    frame_count: u32,
+) -> Result<u32, AppError> {
+    let expected = match frame_count {
+        32 => 4,
+        40 => 5,
+        48 => 6,
+        _ => 0,
+    };
+    if value == expected {
+        Ok(value)
+    } else {
+        Err(editor_character_animation_bad_request(
+            "durationSeconds 必须与帧数组合为 32/4、40/5 或 48/6。",
+        ))
+    }
+}
+
+fn resolve_editor_character_animation_provider_ratio(
+    ratio: &str,
+    source_width: u32,
+    source_height: u32,
+) -> String {
+    if ratio != "same" {
+        return ratio.to_string();
+    }
+    if source_width == 0 || source_height == 0 {
+        return "1:1".to_string();
+    }
+    let normalized = source_width as f32 / source_height as f32;
+    [
+        ("1:1", 1.0f32),
+        ("4:3", 4.0 / 3.0),
+        ("16:9", 16.0 / 9.0),
+        ("9:16", 9.0 / 16.0),
+        ("3:4", 3.0 / 4.0),
+    ]
+    .into_iter()
+    .min_by(|(_, left), (_, right)| {
+        (normalized - *left)
+            .abs()
+            .partial_cmp(&(normalized - *right).abs())
+            .unwrap_or(std::cmp::Ordering::Equal)
+    })
+    .map(|(value, _)| value.to_string())
+    .unwrap_or_else(|| "1:1".to_string())
+}
+
+fn resolve_editor_character_animation_frame_size(
+    source_width: u32,
+    source_height: u32,
+    ratio: &str,
+    resolution: &str,
+) -> (u32, u32) {
+    let long_edge = if resolution == "720p" { 720 } else { 480 };
+    let (ratio_width, ratio_height) = match ratio {
+        "same" if source_width > 0 && source_height > 0 => (source_width, source_height),
+        "4:3" => (4, 3),
+        "16:9" => (16, 9),
+        "9:16" => (9, 16),
+        "3:4" => (3, 4),
+        _ => (1, 1),
+    };
+    if ratio_width >= ratio_height {
+        let height =
+            ((long_edge as f32 * ratio_height as f32 / ratio_width as f32).round() as u32).max(1);
+        (long_edge, height)
+    } else {
+        let width =
+            ((long_edge as f32 * ratio_width as f32 / ratio_height as f32).round() as u32).max(1);
+        (width, long_edge)
+    }
+}
+
+fn build_editor_character_animation_prompt(
+    prompt_text: &str,
+    screen_color: EditorScreenBackgroundColor,
+    ratio: &str,
+    resolution: &str,
+    frame_count: u32,
+    duration_seconds: u32,
+    fps: u32,
+) -> String {
+    format!(
+        "生成可拆分为透明 PNG 序列帧的单人游戏角色动作视频。\n\
+角色一致性：保持角色身份、脸型、发型、五官、体型、身体比例、服装、鞋子、盔甲、配饰、武器、材质和颜色全程一致；不得增加、减少或替换角色特征，不得出现额外肢体、肢体缺失、关节错位、身体融合或异常变形。\n\
+镜头与构图：固定机位、固定焦距、固定视角，禁止镜头平移、旋转、推拉、缩放、抖动、透视变化和特写；角色全身始终完整入镜，锚点、构图中心、画面占比和朝向稳定，不得裁切头顶、手脚、武器或配饰。\n\
+动作连续性：动作包含清晰的起势、关键姿势、自然过渡和收势，相邻时刻连续，不得瞬移、跳变、换人或造型漂移；若动作适合循环，首尾姿态、重心和速度必须平滑衔接。\n\
+输出规格：画面比例为 {ratio}，清晰度为 {resolution}，视频时长 {duration_seconds} 秒；动作节奏须适合后续按 {fps} FPS 均匀抽取为 {frame_count} 帧。每个视频时刻只出现一个完整角色姿态，禁止生成 Sprite Sheet、网格、多格画面、分镜拼图、边框、帧编号或排版文字。\n\
+背景与内容限制：{background_clause}；禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字、水印、标志或其他角色以外的场景内容。\n\
+动作描述：\n{prompt}",
+        ratio = ratio,
+        resolution = resolution,
+        duration_seconds = duration_seconds,
+        fps = fps,
+        frame_count = frame_count,
+        background_clause = editor_green_screen_character_prompt_clause(screen_color),
+        prompt = prompt_text.trim(),
+    )
+}
+
+fn normalize_required_text(value: &str, fallback: &str) -> String {
+    let normalized = value
+        .trim()
+        .split_whitespace()
+        .collect::<Vec<_>>()
+        .join(" ")
+        .chars()
+        .take(180)
+        .collect::<String>()
+        .trim()
+        .to_string();
+    if normalized.is_empty() {
+        fallback.to_string()
+    } else {
+        normalized
+    }
+}
+
+fn trim_optional_text(value: Option<&str>) -> Option<String> {
+    value
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(ToOwned::to_owned)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn test_request() -> EditorCharacterAnimationGenerateRequest {
+        EditorCharacterAnimationGenerateRequest {
+            source_layer_id: "layer-hero".to_string(),
+            source_image_src: "/generated-characters/hero/master.png".to_string(),
+            source_width: 1024,
+            source_height: 1024,
+            input_mode: None,
+            reference_media_type: None,
+            reference_src: None,
+            prompt_text: "待机呼吸".to_string(),
+            background_color: None,
+            screen_color: None,
+            resolution: "480p".to_string(),
+            ratio: "same".to_string(),
+            frame_count: 32,
+            duration_seconds: 4,
+            model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
+            project_id: None,
+            canvas_completion: None,
+            generation_inputs: None,
+            source_resource_id: None,
+            asset_folder_id: None,
+            asset_label: None,
+        }
+    }
+
+    fn generation_field<'a>(inputs: &'a Value, id: &str) -> Option<&'a Value> {
+        inputs
+            .get("fields")
+            .and_then(Value::as_array)
+            .and_then(|fields| {
+                fields
+                    .iter()
+                    .find(|field| field.get("id").and_then(Value::as_str) == Some(id))
+            })
+            .and_then(|field| field.get("value"))
+    }
+
+    #[test]
+    fn character_animation_normalizes_seedance_request_contract_and_labels() {
+        let normalized =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                source_layer_id: " layer-hero ".to_string(),
+                source_width: 768,
+                source_height: 1024,
+                prompt_text: "待机呼吸，轻微摆动。".to_string(),
+                resolution: "720p".to_string(),
+                frame_count: 48,
+                duration_seconds: 6,
+                asset_label: Some(" 勇者待机 ".to_string()),
+                ..test_request()
+            })
+            .expect("editor request should normalize");
+
+        assert_eq!(normalized.source_layer_id, "layer-hero");
+        assert_eq!(normalized.frame_count, 48);
+        assert_eq!(normalized.duration_seconds, 6);
+        assert_eq!(normalized.price_mud_points, 120);
+        assert_eq!(normalized.fps, 8);
+        assert!(normalized.prompt.contains("画面比例为 3:4"));
+        assert!(normalized.prompt.contains("清晰度为 720p"));
+        assert!(normalized.prompt.contains("视频时长 6 秒"));
+        assert!(normalized.prompt.contains("按 8 FPS 均匀抽取为 48 帧"));
+        assert_eq!(
+            (normalized.frame_width, normalized.frame_height),
+            (540, 720)
+        );
+        assert_eq!(normalized.ratio, "3:4");
+        assert_eq!(
+            resolve_editor_character_animation_asset_label(Some(" 勇者待机 ")),
+            "勇者待机"
+        );
+        assert_eq!(
+            resolve_editor_character_animation_asset_label(Some("   ")),
+            "角色动作"
+        );
+        assert_eq!(
+            resolve_editor_character_animation_asset_label(Some("动".repeat(81).as_str()))
+                .chars()
+                .count(),
+            EDITOR_ASSET_LABEL_MAX_CHARS
+        );
+        assert_eq!(
+            editor_character_animation_source_asset_label("勇者待机"),
+            "勇者待机（原始视频）"
+        );
+        let long_source_label =
+            editor_character_animation_source_asset_label("动".repeat(80).as_str());
+        assert_eq!(
+            long_source_label.chars().count(),
+            EDITOR_ASSET_LABEL_MAX_CHARS
+        );
+        assert!(long_source_label.ends_with("（原始视频）"));
+    }
+
+    #[test]
+    fn character_animation_source_layer_id_keeps_legacy_identity_normalization() {
+        let normalized =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                source_layer_id: format!("  layer\t hero\n{}  ", "x".repeat(200)),
+                ..test_request()
+            })
+            .expect("source layer id should normalize");
+
+        assert!(normalized.source_layer_id.starts_with("layer hero "));
+        assert!(!normalized.source_layer_id.contains('\t'));
+        assert!(!normalized.source_layer_id.contains('\n'));
+        assert!(!normalized.source_layer_id.contains("  "));
+        assert_eq!(normalized.source_layer_id.chars().count(), 180);
+
+        let fallback =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                source_layer_id: " \t\n ".to_string(),
+                ..test_request()
+            })
+            .expect("blank source layer id should use the mode fallback");
+        assert_eq!(fallback.source_layer_id, "sequence-animation-image");
+    }
+
+    #[test]
+    fn character_animation_rejects_invalid_frame_duration_pair() {
+        let error =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                frame_count: 48,
+                duration_seconds: 4,
+                ..test_request()
+            })
+            .expect_err("invalid frame/duration pair should fail");
+
+        assert!(error.body_text().contains("durationSeconds 必须与帧数组合"));
+    }
+
+    #[test]
+    fn character_animation_normalizes_text_mode_without_reference() {
+        let normalized =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                source_layer_id: String::new(),
+                source_image_src: String::new(),
+                source_width: 0,
+                source_height: 0,
+                input_mode: Some("text".to_string()),
+                prompt_text: "原地快速挥手".to_string(),
+                background_color: Some("purple".to_string()),
+                ratio: "1:1".to_string(),
+                ..test_request()
+            })
+            .expect("text mode should normalize without a reference");
+
+        assert_eq!(
+            normalized.input_mode,
+            EditorCharacterAnimationInputMode::Text
+        );
+        assert_eq!(normalized.source_layer_id, "sequence-animation-text");
+        assert_eq!(normalized.reference_src, None);
+        assert_eq!(normalized.ratio, "1:1");
+        assert_eq!(normalized.screen_color.hex, "#8000FF");
+        assert!(normalized.has_explicit_background_color);
+    }
+
+    #[test]
+    fn character_animation_rejects_mismatched_reference_media_type() {
+        let error =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                input_mode: Some("image".to_string()),
+                reference_media_type: Some("video".to_string()),
+                reference_src: Some("users/owner/reference/action.mp4".to_string()),
+                ..test_request()
+            })
+            .expect_err("image mode should reject video references");
+
+        assert!(error.body_text().contains("图片模式必须使用图片参考素材"));
+    }
+
+    #[test]
+    fn character_animation_reference_content_type_must_match_actual_input_mode() {
+        validate_editor_character_animation_reference_content_type(
+            "image/png; charset=binary",
+            "referenceSrc",
+            EditorCharacterAnimationReferenceMediaKind::Image,
+        )
+        .expect("image mode should accept an actual image payload");
+        validate_editor_character_animation_reference_content_type(
+            "VIDEO/MP4",
+            "referenceSrc",
+            EditorCharacterAnimationReferenceMediaKind::Video,
+        )
+        .expect("video mode should accept an actual video payload");
+
+        let video_error = validate_editor_character_animation_reference_content_type(
+            "image/png",
+            "referenceSrc",
+            EditorCharacterAnimationReferenceMediaKind::Video,
+        )
+        .expect_err("video mode must reject an image object");
+        assert!(
+            video_error
+                .body_text()
+                .contains("视频模式只能使用真实视频素材")
+        );
+
+        let image_error = validate_editor_character_animation_reference_content_type(
+            "video/mp4",
+            "referenceSrc",
+            EditorCharacterAnimationReferenceMediaKind::Image,
+        )
+        .expect_err("image mode must reject a video object");
+        assert!(
+            image_error
+                .body_text()
+                .contains("图片模式只能使用真实图片素材")
+        );
+    }
+
+    #[test]
+    fn character_animation_reference_video_requires_bounded_size_and_duration() {
+        validate_editor_character_animation_reference_video_content_length(50 * 1024 * 1024)
+            .expect("50MB should be accepted");
+        validate_editor_character_animation_reference_video_duration(2.0)
+            .expect("two seconds should be accepted");
+        validate_editor_character_animation_reference_video_duration(15.0)
+            .expect("fifteen seconds should be accepted");
+
+        assert!(
+            validate_editor_character_animation_reference_video_content_length(0)
+                .expect_err("empty video should fail")
+                .body_text()
+                .contains("不能为空")
+        );
+        assert!(
+            validate_editor_character_animation_reference_video_content_length(
+                50 * 1024 * 1024 + 1,
+            )
+            .expect_err("oversized video should fail")
+            .body_text()
+            .contains("50MB")
+        );
+        for duration_seconds in [f64::NAN, 1.99, 15.01] {
+            assert!(
+                validate_editor_character_animation_reference_video_duration(duration_seconds)
+                    .expect_err("out-of-range duration should fail")
+                    .body_text()
+                    .contains("2-15 秒")
+            );
+        }
+    }
+
+    #[test]
+    fn character_animation_same_ratio_uses_authoritative_reference_dimensions() {
+        let mut request = EditorCharacterAnimationGenerateRequest {
+            source_width: 1920,
+            source_height: 1080,
+            input_mode: Some("video".to_string()),
+            reference_media_type: Some("video".to_string()),
+            reference_src: Some("users/owner/reference/action.mp4".to_string()),
+            ..test_request()
+        };
+
+        apply_editor_character_animation_authoritative_reference_dimensions(
+            &mut request,
+            EditorCharacterAnimationInputMode::Video,
+            1080,
+            1920,
+        )
+        .expect("authoritative video dimensions should apply");
+        let normalized = normalize_editor_character_animation_request(request)
+            .expect("request should be renormalized with authoritative dimensions");
+
+        assert_eq!(normalized.ratio, "9:16");
+        assert_eq!(
+            (normalized.frame_width, normalized.frame_height),
+            (270, 480)
+        );
+    }
+
+    #[test]
+    fn character_animation_dimension_override_records_authoritative_reference_size() {
+        let mut explicit_ratio = EditorCharacterAnimationGenerateRequest {
+            ratio: "16:9".to_string(),
+            source_width: 640,
+            source_height: 480,
+            ..test_request()
+        };
+        apply_editor_character_animation_authoritative_reference_dimensions(
+            &mut explicit_ratio,
+            EditorCharacterAnimationInputMode::Image,
+            1080,
+            1920,
+        )
+        .expect("explicit ratios should still record authoritative dimensions");
+        assert_eq!(
+            (explicit_ratio.source_width, explicit_ratio.source_height),
+            (1080, 1920)
+        );
+
+        let mut invalid_same = test_request();
+        let error = apply_editor_character_animation_authoritative_reference_dimensions(
+            &mut invalid_same,
+            EditorCharacterAnimationInputMode::Image,
+            0,
+            1920,
+        )
+        .expect_err("reference media should reject missing authoritative dimensions");
+        assert!(error.body_text().contains("参考素材需要可识别的媒体宽高"));
+    }
+
+    #[test]
+    fn character_animation_authoritative_recipe_is_complete_without_client_snapshot() {
+        let request = EditorCharacterAnimationGenerateRequest {
+            source_image_src: String::new(),
+            source_width: 0,
+            source_height: 0,
+            input_mode: Some("text".to_string()),
+            prompt_text: "  原地挥手  ".to_string(),
+            ..test_request()
+        };
+
+        let inputs = build_authoritative_editor_character_animation_generation_inputs(
+            None,
+            &request,
+            EditorCharacterAnimationInputMode::Text,
+            None,
+        )
+        .expect("text request should always produce a recoverable recipe");
+
+        assert_eq!(inputs.get("version"), Some(&json!(2)));
+        assert_eq!(
+            inputs.get("action"),
+            Some(&json!("character-animation.generate"))
+        );
+        assert_eq!(generation_field(&inputs, "inputMode"), Some(&json!("text")));
+        assert_eq!(
+            generation_field(&inputs, "prompt"),
+            Some(&json!("原地挥手"))
+        );
+        assert_eq!(
+            generation_field(&inputs, "backgroundColor"),
+            Some(&json!("green"))
+        );
+        assert_eq!(generation_field(&inputs, "ratio"), Some(&json!("same")));
+        assert_eq!(generation_field(&inputs, "referenceSrc"), None);
+        assert_eq!(inputs.get("references"), Some(&json!([])));
+    }
+
+    #[test]
+    fn character_animation_authoritative_recipe_overrides_forged_execution_fields() {
+        let request = EditorCharacterAnimationGenerateRequest {
+            source_width: 768,
+            source_height: 1024,
+            input_mode: Some("image".to_string()),
+            reference_media_type: Some("image".to_string()),
+            reference_src: Some("users/owner/hero.png".to_string()),
+            background_color: Some("#8000FF".to_string()),
+            generation_inputs: Some(json!({
+                "version": 2,
+                "action": "video.generate",
+                "futureFlag": true,
+                "fields": [
+                    { "id": "inputMode", "title": "输入模式", "value": "video" },
+                    { "id": "referenceSrc", "title": "参考素材", "value": "users/other/forged.mp4" },
+                    { "id": "prompt", "title": "动作描述", "value": "伪造描述" },
+                    { "id": "actionPreset", "title": "动作预设", "value": "dash" }
+                ],
+                "references": [{
+                    "id": "source",
+                    "refType": "project-resource",
+                    "refId": "foreign-resource"
+                }]
+            })),
+            ..test_request()
+        };
+
+        let inputs = build_authoritative_editor_character_animation_generation_inputs(
+            request.generation_inputs.clone(),
+            &request,
+            EditorCharacterAnimationInputMode::Image,
+            Some("/users/owner/hero.png"),
+        )
+        .expect("authoritative image recipe should build");
+
+        assert_eq!(
+            inputs.get("action"),
+            Some(&json!("character-animation.generate"))
+        );
+        assert_eq!(inputs.get("futureFlag"), Some(&json!(true)));
+        assert_eq!(
+            generation_field(&inputs, "inputMode"),
+            Some(&json!("image"))
+        );
+        assert_eq!(
+            generation_field(&inputs, "referenceSrc"),
+            Some(&json!("users/owner/hero.png"))
+        );
+        assert_eq!(
+            generation_field(&inputs, "referenceWidth"),
+            Some(&json!(768))
+        );
+        assert_eq!(
+            generation_field(&inputs, "referenceHeight"),
+            Some(&json!(1024))
+        );
+        assert_eq!(
+            generation_field(&inputs, "prompt"),
+            Some(&json!("待机呼吸"))
+        );
+        assert_eq!(
+            generation_field(&inputs, "backgroundColor"),
+            Some(&json!("purple"))
+        );
+        assert_eq!(
+            generation_field(&inputs, "actionPreset"),
+            Some(&json!("dash"))
+        );
+        assert_eq!(
+            inputs.get("references"),
+            Some(&json!([{ "id": "source", "title": "角色图片" }]))
+        );
+    }
+
+    #[test]
+    fn character_animation_image_auto_background_is_not_persisted_as_green() {
+        let request = EditorCharacterAnimationGenerateRequest {
+            source_width: 800,
+            source_height: 1200,
+            input_mode: Some("image".to_string()),
+            reference_media_type: Some("image".to_string()),
+            reference_src: Some("users/owner/hero.png".to_string()),
+            background_color: None,
+            ..test_request()
+        };
+
+        let inputs = build_authoritative_editor_character_animation_generation_inputs(
+            None,
+            &request,
+            EditorCharacterAnimationInputMode::Image,
+            Some("users/owner/hero.png"),
+        )
+        .expect("legacy image recipe should preserve automatic background semantics");
+
+        assert_eq!(generation_field(&inputs, "backgroundColor"), None);
+
+        let video_request = EditorCharacterAnimationGenerateRequest {
+            source_width: 1920,
+            source_height: 1080,
+            source_image_src: String::new(),
+            input_mode: Some("video".to_string()),
+            reference_media_type: Some("video".to_string()),
+            reference_src: Some("users/owner/action.mp4".to_string()),
+            background_color: None,
+            ..test_request()
+        };
+        let video_inputs = build_authoritative_editor_character_animation_generation_inputs(
+            None,
+            &video_request,
+            EditorCharacterAnimationInputMode::Video,
+            Some("users/owner/action.mp4"),
+        )
+        .expect("video recipe should persist the default green background");
+        assert_eq!(
+            generation_field(&video_inputs, "backgroundColor"),
+            Some(&json!("green"))
+        );
+    }
+
+    #[test]
+    fn character_animation_frame_asset_label_keeps_suffix_within_limit() {
+        let label = build_editor_character_animation_frame_asset_label(
+            "动".repeat(EDITOR_ASSET_LABEL_MAX_CHARS).as_str(),
+            32,
+        );
+
+        assert_eq!(label.chars().count(), EDITOR_ASSET_LABEL_MAX_CHARS);
+        assert!(label.ends_with("第032帧"));
+    }
+
+    #[test]
+    fn character_animation_builds_required_screen_background_prompt() {
+        let color = crate::editor_green_screen::default_editor_screen_background_color();
+        let prompt = build_editor_character_animation_prompt(
+            "行走两步后回到站姿。",
+            color,
+            "16:9",
+            "720p",
+            48,
+            6,
+            8,
+        );
+
+        assert!(prompt.contains("生成可拆分为透明 PNG 序列帧的单人游戏角色动作视频"));
+        assert!(!prompt.contains("参考图作为首帧和尾帧"));
+        assert!(prompt.contains("角色身份、脸型、发型、五官、体型"));
+        assert!(prompt.contains("固定机位、固定焦距、固定视角"));
+        assert!(prompt.contains("相邻时刻连续，不得瞬移、跳变、换人或造型漂移"));
+        assert!(prompt.contains("画面比例为 16:9，清晰度为 720p，视频时长 6 秒"));
+        assert!(prompt.contains("按 8 FPS 均匀抽取为 48 帧"));
+        assert!(prompt.contains("禁止生成 Sprite Sheet、网格、多格画面、分镜拼图"));
+        assert!(prompt.contains(color.hex));
+        assert!(prompt.contains("纯色背景必须平整无纹理、无渐变、无阴影"));
+        assert!(prompt.contains(
+            "角色主体及其服饰、道具的颜色必须与背景色明显区分，不得带与背景色相同或相近的描边、投影或反光"
+        ));
+        assert!(prompt.contains("动作描述：\n行走两步后回到站姿。"));
+    }
+}
diff --git a/server-rs/crates/api-server/src/external_editor_api.rs b/server-rs/crates/api-server/src/external_editor_api.rs
index 7ce1e9bf3..ac44a43ca 100644
--- a/server-rs/crates/api-server/src/external_editor_api.rs
+++ b/server-rs/crates/api-server/src/external_editor_api.rs
@@ -118,6 +118,58 @@ pub struct ExternalEditorAssetFolderUpdateRequest {
     collapsed: Option<bool>,
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase", deny_unknown_fields)]
+pub struct ExternalEditorCharacterAnimationGenerateRequest {
+    source_layer_id: String,
+    source_image_src: String,
+    source_width: u32,
+    source_height: u32,
+    prompt_text: String,
+    screen_color: Option<String>,
+    resolution: String,
+    ratio: String,
+    frame_count: u32,
+    duration_seconds: u32,
+    model: String,
+    project_id: Option<String>,
+    canvas_completion: Option<shared_contracts::assets::EditorCanvasGenerationCompletionPayload>,
+    generation_inputs: Option<Value>,
+    source_resource_id: Option<String>,
+    asset_folder_id: Option<String>,
+    asset_label: Option<String>,
+}
+
+impl From<ExternalEditorCharacterAnimationGenerateRequest>
+    for shared_contracts::assets::EditorCharacterAnimationGenerateRequest
+{
+    fn from(payload: ExternalEditorCharacterAnimationGenerateRequest) -> Self {
+        Self {
+            source_layer_id: payload.source_layer_id,
+            source_image_src: payload.source_image_src,
+            source_width: payload.source_width,
+            source_height: payload.source_height,
+            input_mode: None,
+            reference_media_type: None,
+            reference_src: None,
+            prompt_text: payload.prompt_text,
+            background_color: None,
+            screen_color: payload.screen_color,
+            resolution: payload.resolution,
+            ratio: payload.ratio,
+            frame_count: payload.frame_count,
+            duration_seconds: payload.duration_seconds,
+            model: payload.model,
+            project_id: payload.project_id,
+            canvas_completion: payload.canvas_completion,
+            generation_inputs: payload.generation_inputs,
+            source_resource_id: payload.source_resource_id,
+            asset_folder_id: payload.asset_folder_id,
+            asset_label: payload.asset_label,
+        }
+    }
+}
+
 #[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct ExternalEditorAssetCreateRequest {
@@ -821,10 +873,7 @@ pub async fn generate_external_editor_character_animation(
     Extension(request_context): Extension<RequestContext>,
     Extension(principal): Extension<ExternalApiPrincipal>,
     headers: HeaderMap,
-    payload: Result<
-        Json<shared_contracts::assets::EditorCharacterAnimationGenerateRequest>,
-        JsonRejection,
-    >,
+    payload: Result<Json<ExternalEditorCharacterAnimationGenerateRequest>, JsonRejection>,
 ) -> Result<Response, Response> {
     require_scope_response(&request_context, &principal, SCOPE_EDITOR_IMAGE_GENERATE)?;
     let idempotency_key = require_idempotency_key(&headers)
@@ -834,7 +883,7 @@ pub async fn generate_external_editor_character_animation(
         &state,
         &request_context,
         principal.owner_user_id(),
-        payload,
+        payload.into(),
         Some(idempotency_key),
     )
     .await?;
@@ -1458,6 +1507,70 @@ mod tests {
         assert_eq!(request.expected_revision, 7);
     }
 
+    #[test]
+    fn external_editor_character_animation_request_keeps_legacy_image_contract() {
+        let request =
+            serde_json::from_value::<ExternalEditorCharacterAnimationGenerateRequest>(json!({
+                "sourceLayerId": "layer-character",
+                "sourceImageSrc": "editor/uploads/character.png",
+                "sourceWidth": 512,
+                "sourceHeight": 512,
+                "promptText": "原地待机",
+                "resolution": "480p",
+                "ratio": "same",
+                "frameCount": 32,
+                "durationSeconds": 4,
+                "model": "seedance2.0-fast"
+            }))
+            .expect("External v1 旧图片模式请求应继续通过反序列化");
+
+        let internal: shared_contracts::assets::EditorCharacterAnimationGenerateRequest =
+            request.into();
+        assert_eq!(internal.source_layer_id, "layer-character");
+        assert_eq!(internal.source_image_src, "editor/uploads/character.png");
+        assert_eq!(internal.input_mode, None);
+        assert_eq!(internal.reference_media_type, None);
+        assert_eq!(internal.reference_src, None);
+        assert_eq!(internal.background_color, None);
+    }
+
+    #[test]
+    fn external_editor_character_animation_request_rejects_internal_multimodal_fields() {
+        let error =
+            serde_json::from_value::<ExternalEditorCharacterAnimationGenerateRequest>(json!({
+                "sourceLayerId": "layer-character",
+                "sourceImageSrc": "editor/uploads/character.png",
+                "sourceWidth": 512,
+                "sourceHeight": 512,
+                "inputMode": "video",
+                "promptText": "原地待机",
+                "resolution": "480p",
+                "ratio": "same",
+                "frameCount": 32,
+                "durationSeconds": 4,
+                "model": "seedance2.0-fast"
+            }))
+            .expect_err("External v1 不应接收内部三模态扩展字段");
+
+        assert!(error.to_string().contains("inputMode"));
+    }
+
+    #[test]
+    fn external_editor_character_animation_request_requires_legacy_source_fields() {
+        let error =
+            serde_json::from_value::<ExternalEditorCharacterAnimationGenerateRequest>(json!({
+                "promptText": "原地待机",
+                "resolution": "480p",
+                "ratio": "1:1",
+                "frameCount": 32,
+                "durationSeconds": 4,
+                "model": "seedance2.0-fast"
+            }))
+            .expect_err("External v1 文本模式不得绕过旧图片模式必填字段");
+
+        assert!(error.to_string().contains("sourceLayerId"));
+    }
+
     #[test]
     fn external_editor_generation_inputs_sanitize_audit_fields_for_regular_assets() {
         let serialized = serialize_external_editor_generation_inputs(
diff --git a/server-rs/crates/api-server/src/main.rs b/server-rs/crates/api-server/src/main.rs
index 1d73da766..799e2ed23 100644
--- a/server-rs/crates/api-server/src/main.rs
+++ b/server-rs/crates/api-server/src/main.rs
@@ -30,6 +30,7 @@ mod editor_project;
 mod editor_project_icon;
 mod editor_screen_background_decision;
 mod editor_screen_background_filter;
+mod editor_sequence_animation;
 mod editor_sound_effect_prompt_assist;
 mod error_middleware;
 mod external_api_audit;
diff --git a/server-rs/crates/api-server/src/modules/platform_support.rs b/server-rs/crates/api-server/src/modules/platform_support.rs
index f6eda9e30..9b1d4d813 100644
--- a/server-rs/crates/api-server/src/modules/platform_support.rs
+++ b/server-rs/crates/api-server/src/modules/platform_support.rs
@@ -17,6 +17,7 @@ use crate::{
         get_character_animation_job, get_character_workflow_cache,
         import_character_animation_video, list_character_animation_templates,
         publish_character_animation, save_character_workflow_cache,
+        split_editor_character_animation_frames,
     },
     character_visual_assets::{
         generate_character_visual, get_character_visual_job, publish_character_visual,
@@ -128,6 +129,12 @@ pub fn router(state: AppState) -> Router<AppState> {
                 require_bearer_auth,
             )),
         )
+        .route(
+            "/api/editor/character-animations/frame-splits",
+            post(split_editor_character_animation_frames).route_layer(
+                middleware::from_fn_with_state(state.clone(), require_bearer_auth),
+            ),
+        )
         .route(
             "/api/editor/videos/generations",
             post(generate_editor_video).route_layer(middleware::from_fn_with_state(
diff --git a/server-rs/crates/module-assets/Cargo.toml b/server-rs/crates/module-assets/Cargo.toml
index 8522ac372..f432cdeb0 100644
--- a/server-rs/crates/module-assets/Cargo.toml
+++ b/server-rs/crates/module-assets/Cargo.toml
@@ -11,6 +11,7 @@ spacetime-types = ["dep:spacetimedb"]
 
 [dependencies]
 serde = { workspace = true }
+sha2 = { workspace = true }
 reqwest = { workspace = true, features = ["rustls-tls"], optional = true }
 spacetimedb = { workspace = true, optional = true }
 platform-oss = { workspace = true, optional = true }
diff --git a/server-rs/crates/module-assets/src/character_animation.rs b/server-rs/crates/module-assets/src/character_animation.rs
new file mode 100644
index 000000000..f02d36c5a
--- /dev/null
+++ b/server-rs/crates/module-assets/src/character_animation.rs
@@ -0,0 +1,95 @@
+//! 角色动画资产的稳定身份规则。
+//!
+//! 本模块只承载可纯测的资产领域规则；HTTP 编排与 SpacetimeDB 事务适配留在外层。
+
+use sha2::{Digest as _, Sha256};
+
+pub const CHARACTER_ANIMATION_FRAME_SPLIT_OPERATION_ID_PREFIX: &str =
+    "editor-character-animation-frame-split-";
+
+/// 为一次角色动画拆帧命令生成稳定 operation ID。
+///
+/// 输入顺序、版本盐、逐字段 NUL 分隔和摘要截断长度均属于已发布兼容合同，不能随意调整。
+pub fn character_animation_frame_split_operation_id(
+    owner_user_id: &str,
+    source_resource_id: &str,
+    folder_id: &str,
+    base_label: &str,
+) -> String {
+    let mut hasher = Sha256::new();
+    hasher.update(b"editor-character-animation-frame-split-v2\0");
+    for value in [owner_user_id, source_resource_id, folder_id, base_label] {
+        hasher.update(value.trim().as_bytes());
+        hasher.update([0]);
+    }
+    let digest = format!("{:x}", hasher.finalize());
+    format!(
+        "{CHARACTER_ANIMATION_FRAME_SPLIT_OPERATION_ID_PREFIX}{}",
+        &digest[..32]
+    )
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn frame_split_operation_id_preserves_api_server_v2_compatibility_fixture() {
+        assert_eq!(
+            character_animation_frame_split_operation_id(
+                "owner-1",
+                "source-resource-project-a",
+                "project",
+                "角色动作",
+            ),
+            "editor-character-animation-frame-split-c836606cab3125ba1984176af35f8956"
+        );
+    }
+
+    #[test]
+    fn frame_split_operation_id_is_trimmed_stable_and_target_scoped() {
+        let first = character_animation_frame_split_operation_id(
+            "owner-1",
+            "source-resource-project-a",
+            "project",
+            "角色动作",
+        );
+        assert_eq!(
+            first,
+            character_animation_frame_split_operation_id(
+                " owner-1 ",
+                " source-resource-project-a ",
+                " project ",
+                " 角色动作 ",
+            )
+        );
+        assert_ne!(
+            first,
+            character_animation_frame_split_operation_id(
+                "owner-1",
+                "source-resource-project-b",
+                "project",
+                "角色动作",
+            )
+        );
+        assert_ne!(
+            first,
+            character_animation_frame_split_operation_id(
+                "owner-1",
+                "source-resource-project-a",
+                "folder-actions",
+                "角色动作",
+            )
+        );
+        assert_ne!(
+            first,
+            character_animation_frame_split_operation_id(
+                "owner-1",
+                "source-resource-project-a",
+                "project",
+                "奔跑动作",
+            )
+        );
+        assert!(first.starts_with(CHARACTER_ANIMATION_FRAME_SPLIT_OPERATION_ID_PREFIX));
+    }
+}
diff --git a/server-rs/crates/module-assets/src/lib.rs b/server-rs/crates/module-assets/src/lib.rs
index 410967b8f..3aae5ccdf 100644
--- a/server-rs/crates/module-assets/src/lib.rs
+++ b/server-rs/crates/module-assets/src/lib.rs
@@ -1,4 +1,5 @@
 mod application;
+mod character_animation;
 mod commands;
 mod domain;
 mod errors;
@@ -17,6 +18,10 @@ pub use application::{
 pub use asset_object_service::{
     AssetObjectService, ConfirmAssetObjectError, InMemoryAssetObjectStore,
 };
+pub use character_animation::{
+    CHARACTER_ANIMATION_FRAME_SPLIT_OPERATION_ID_PREFIX,
+    character_animation_frame_split_operation_id,
+};
 pub use commands::{
     AssetEntityBindingInput, AssetHistoryListInput, AssetObjectLocationInput,
     AssetObjectUpsertInput, ConfirmAssetObjectInput,
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index f06c23d9c..99827e657 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -311,11 +311,23 @@ pub struct CharacterAnimationGenerateResponse {
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorCharacterAnimationGenerateRequest {
+    #[serde(default)]
     pub source_layer_id: String,
+    #[serde(default)]
     pub source_image_src: String,
+    #[serde(default)]
     pub source_width: u32,
+    #[serde(default)]
     pub source_height: u32,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub input_mode: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub reference_media_type: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub reference_src: Option<String>,
     pub prompt_text: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub background_color: Option<String>,
     /// 纯色抠像背景色（hex）。None/auto 走自动决策；通常继承源角色图的背景色。
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub screen_color: Option<String>,
@@ -375,6 +387,62 @@ pub struct EditorCharacterAnimationGenerateResponse {
     pub queue_state: Option<ExternalGenerationJobStatusRecord>,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCharacterAnimationFrameSplitRequest {
+    pub project_id: String,
+    pub source_layer_id: String,
+    pub source_resource_id: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_folder_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_label: Option<String>,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCharacterAnimationFrameSplitResponse {
+    pub frame_count: u32,
+    pub assets: Vec<EditorAssetPayload>,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorAssetPayload {
+    pub asset_id: String,
+    pub folder_id: String,
+    pub label: String,
+    pub image_src: String,
+    pub object_key: Option<String>,
+    pub asset_object_id: Option<String>,
+    pub width: u32,
+    pub height: u32,
+    pub source_type: String,
+    pub prompt: Option<String>,
+    pub actual_prompt: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub model: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub provider: Option<String>,
+    pub task_id: Option<String>,
+    pub asset_kind: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub image_sequence_frames: Option<Value>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub image_sequence_duration_ms: Option<u64>,
+    pub generation_inputs: Option<Value>,
+    pub source_resource_id: Option<String>,
+    pub public_showcase_enabled: Option<bool>,
+    pub thumbnail_src: Option<String>,
+    pub generation_cost_mud_points: u64,
+    pub showcase_id: Option<String>,
+    pub showcase_review_status: Option<String>,
+    pub showcase_display_enabled: Option<bool>,
+    pub showcase_like_count: Option<u64>,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorSceneGenerateRequest {
@@ -1305,7 +1373,11 @@ mod tests {
             source_image_src: "/generated-characters/hero/master.png".to_string(),
             source_width: 768,
             source_height: 1024,
+            input_mode: Some("video".to_string()),
+            reference_media_type: Some("video".to_string()),
+            reference_src: Some("generated/editor/reference.mp4".to_string()),
             prompt_text: "待机呼吸".to_string(),
+            background_color: Some("purple".to_string()),
             screen_color: None,
             resolution: "720p".to_string(),
             ratio: "same".to_string(),
@@ -1333,6 +1405,13 @@ mod tests {
         .expect("request should serialize");
 
         assert_eq!(payload["sourceLayerId"], json!("layer-1"));
+        assert_eq!(payload["inputMode"], json!("video"));
+        assert_eq!(payload["referenceMediaType"], json!("video"));
+        assert_eq!(
+            payload["referenceSrc"],
+            json!("generated/editor/reference.mp4")
+        );
+        assert_eq!(payload["backgroundColor"], json!("purple"));
         assert_eq!(
             payload["sourceImageSrc"],
             json!("/generated-characters/hero/master.png")
@@ -1346,6 +1425,24 @@ mod tests {
         assert_eq!(payload["assetLabel"], json!("勇者奔跑"));
     }
 
+    #[test]
+    fn editor_character_animation_frame_split_request_uses_shared_contract_shape() {
+        let payload = serde_json::to_value(EditorCharacterAnimationFrameSplitRequest {
+            project_id: "project-1".to_string(),
+            source_layer_id: "layer-animation".to_string(),
+            source_resource_id: "resource-animation".to_string(),
+            asset_folder_id: Some("folder-actions".to_string()),
+            asset_label: Some("奔跑动作".to_string()),
+        })
+        .expect("frame split request should serialize");
+
+        assert_eq!(payload["projectId"], json!("project-1"));
+        assert_eq!(payload["sourceLayerId"], json!("layer-animation"));
+        assert_eq!(payload["sourceResourceId"], json!("resource-animation"));
+        assert_eq!(payload["assetFolderId"], json!("folder-actions"));
+        assert_eq!(payload["assetLabel"], json!("奔跑动作"));
+    }
+
     #[test]
     fn editor_character_animation_response_includes_frames_and_preview_video() {
         let payload = serde_json::to_value(EditorCharacterAnimationGenerateResponse {
diff --git a/server-rs/crates/spacetime-module/src/editor_project_storage.rs b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
index 075a62f2b..8c8e69e68 100644
--- a/server-rs/crates/spacetime-module/src/editor_project_storage.rs
+++ b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
@@ -5114,6 +5114,7 @@ fn validate_editor_spritesheet_slice_batch(
     let mut object_keys = BTreeSet::new();
     let mut resource_ids = BTreeSet::new();
     let mut asset_ids = BTreeSet::new();
+    let mut source_job_id = None::<String>;
     let mut asset_count = 0usize;
     for item in &input.items {
         let asset_object_id = normalize_required(
@@ -5130,11 +5131,23 @@ fn validate_editor_spritesheet_slice_batch(
         if !object_keys.insert(object_key.clone()) {
             return Err("图集切片批次包含重复 object_key".to_string());
         }
-        if normalize_optional_ref(item.asset_object.owner_user_id.as_ref()) != Some(owner_user_id)
-            || normalize_optional_ref(item.asset_object.source_job_id.as_ref()) != Some(task_id)
-        {
-            return Err("图集切片对象的 owner 或 task 归属不一致".to_string());
+        if normalize_optional_ref(item.asset_object.owner_user_id.as_ref()) != Some(owner_user_id) {
+            return Err("图集切片对象的 owner 归属不一致".to_string());
         }
+        let item_source_job_id = normalize_optional_ref(item.asset_object.source_job_id.as_ref())
+            .ok_or_else(|| "图集切片对象缺少来源任务".to_string())?;
+        if item_source_job_id != task_id
+            && item.asset_object.asset_kind.trim() != EDITOR_CHARACTER_ANIMATION_OBJECT_KIND
+        {
+            return Err("只有角色序列帧拆分可以复用原生成任务的资产对象".to_string());
+        }
+        if source_job_id
+            .as_deref()
+            .is_some_and(|source_job_id| source_job_id != item_source_job_id)
+        {
+            return Err("图集切片对象的来源任务不一致".to_string());
+        }
+        source_job_id.get_or_insert_with(|| item_source_job_id.to_string());
 
         let resource_identity = item
             .project_resource
@@ -15672,6 +15685,64 @@ mod tests {
             .expect("complete batch should pass before transaction writes");
     }
 
+    #[test]
+    fn spritesheet_slice_batch_accepts_reused_source_objects_under_split_operation() {
+        let mut batch = spritesheet_slice_batch();
+        batch.task_id = "character-split-source-resource-a".to_string();
+        batch.group_task_id = Some(batch.task_id.clone());
+        for item in &mut batch.items {
+            item.asset_object.source_job_id = Some("character-generation-task-1".to_string());
+            item.asset_object.asset_kind = EDITOR_CHARACTER_ANIMATION_OBJECT_KIND.to_string();
+            item.project_resource.as_mut().expect("resource").task_id = Some(batch.task_id.clone());
+            let asset = item.asset.as_mut().expect("asset");
+            asset.task_id = Some(batch.task_id.clone());
+            asset.group_task_id = Some(batch.task_id.clone());
+        }
+
+        validate_editor_spritesheet_slice_batch(
+            &batch,
+            "user-1",
+            "character-split-source-resource-a",
+            Some("character-split-source-resource-a"),
+        )
+        .expect("split operation may reuse objects produced by the original generation task");
+    }
+
+    #[test]
+    fn spritesheet_slice_batch_keeps_icon_objects_bound_to_split_task() {
+        let mut batch = spritesheet_slice_batch();
+        batch.task_id = "another-split-task".to_string();
+
+        let error = validate_editor_spritesheet_slice_batch(
+            &batch,
+            "user-1",
+            "another-split-task",
+            Some("group-task-1"),
+        )
+        .expect_err("icon slices must keep their existing source_job_id equals task invariant");
+
+        assert_eq!(error, "只有角色序列帧拆分可以复用原生成任务的资产对象");
+    }
+
+    #[test]
+    fn spritesheet_slice_batch_rejects_mixed_source_object_jobs() {
+        let mut batch = spritesheet_slice_batch();
+        for item in &mut batch.items {
+            item.asset_object.asset_kind = EDITOR_CHARACTER_ANIMATION_OBJECT_KIND.to_string();
+        }
+        batch.items[1].asset_object.source_job_id = Some("other-source-job".to_string());
+
+        let error = validate_editor_spritesheet_slice_batch(
+            &batch,
+            "user-1",
+            "task-1",
+            Some("group-task-1"),
+        )
+        .expect_err("a batch must not mix objects from unrelated source jobs");
+
+        assert_eq!(error, "图集切片对象的来源任务不一致");
+    }
+
     #[test]
     fn spritesheet_slice_batch_validation_rejects_duplicate_object_key() {
         let mut batch = spritesheet_slice_batch();
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index 16403bfba..4b1edf20a 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -73,6 +73,7 @@ describe('ImageCanvasBottomToolbarView', () => {
       ['上传工具', 'upload'],
       ['生成图片', 'generate'],
       ['生成视频', 'video'],
+      ['Spine序列帧动画', 'character-animation'],
       ['生成音乐', 'music'],
       ['生成规范', 'spec'],
       ['生成角色形象', 'character'],
@@ -90,6 +91,42 @@ describe('ImageCanvasBottomToolbarView', () => {
     expect(switchTool).toHaveBeenCalledTimes(toolExpectations.length);
   });
 
+  it('keeps the sequence animation entry right after the video tool', () => {
+    const { toolbar } = renderToolbar();
+    const sequenceEntry = within(toolbar).getByRole('button', {
+      name: 'Spine序列帧动画',
+    });
+    const videoEntry = within(toolbar).getByRole('button', {
+      name: '生成视频',
+    });
+    const musicEntry = within(toolbar).getByRole('button', {
+      name: '生成音乐',
+    });
+    const toolbarButtons = within(toolbar).getAllByRole('button');
+
+    expect(toolbarButtons.indexOf(sequenceEntry)).toBe(
+      toolbarButtons.indexOf(videoEntry) + 1,
+    );
+    expect(toolbarButtons.indexOf(musicEntry)).toBe(
+      toolbarButtons.indexOf(sequenceEntry) + 1,
+    );
+    expect(
+      sequenceEntry.parentElement?.querySelector(
+        '.image-canvas-editor__bottom-toolbar-divider',
+      ),
+    ).toBeNull();
+    expect(
+      sequenceEntry.querySelector(
+        '.image-canvas-editor__sequence-animation-icon',
+      ),
+    ).toBeTruthy();
+    expect(
+      sequenceEntry.classList.contains(
+        'image-canvas-editor__sequence-animation-entry',
+      ),
+    ).toBe(true);
+  });
+
   it('only exposes persistent pressed state for navigation tools', () => {
     const { toolbar, rerender, refs } = renderToolbar({
       effectiveTool: 'select',
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
index ac9c600fe..a9bed831c 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx
@@ -12,10 +12,11 @@ import {
   Upload,
   UserRound,
 } from 'lucide-react';
-import type { RefObject } from 'react';
+import type { ComponentType, RefObject } from 'react';
 
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type { CanvasTool } from './ImageCanvasEditorTypes';
+import { ImageCanvasSequenceAnimationIcon } from './ImageCanvasSequenceAnimationIcon';
 
 type ToolbarOptionTool = Extract<CanvasTool, 'music' | 'spec' | 'publication'>;
 
@@ -33,7 +34,7 @@ type ImageCanvasBottomToolbarViewProps = {
 const canvasTools: Array<{
   id: CanvasTool;
   label: string;
-  icon: typeof MousePointer2;
+  icon: ComponentType<{ className?: string }>;
   separatorBefore?: boolean;
 }> = [
   { id: 'select', label: '选择工具', icon: MousePointer2 },
@@ -46,6 +47,11 @@ const canvasTools: Array<{
     separatorBefore: true,
   },
   { id: 'video', label: '生成视频', icon: Clapperboard },
+  {
+    id: 'character-animation',
+    label: 'Spine序列帧动画',
+    icon: ImageCanvasSequenceAnimationIcon,
+  },
   { id: 'music', label: '生成音乐', icon: Music },
   {
     id: 'spec',
@@ -126,7 +132,9 @@ export function ImageCanvasBottomToolbarView({
                   label={label}
                   title={label}
                   icon={Icon}
-                  pressed={hasPersistentPressedState(id) && effectiveTool === id}
+                  pressed={
+                    hasPersistentPressedState(id) && effectiveTool === id
+                  }
                   onClick={() => onSwitchTool(id)}
                 />
               </span>
@@ -143,6 +151,11 @@ export function ImageCanvasBottomToolbarView({
               />
             ) : null}
             <EditorIconButton
+              className={
+                id === 'character-animation'
+                  ? 'image-canvas-editor__sequence-animation-entry'
+                  : undefined
+              }
               label={label}
               title={label}
               icon={Icon}
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 7f2ef9a4c..9f28be8b8 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -3387,8 +3387,8 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     const animationFrames = Array.from({ length: 48 }, (_, index) => ({
       imageSrc: `/generated-character-drafts/editor/frame${index + 1}.png`,
-      width: 1024,
-      height: 1024,
+      width: 720,
+      height: 405,
     }));
     generateEditorCharacterAnimationMock.mockResolvedValueOnce({
       taskId: 'character-animation-task-1',
@@ -3403,8 +3403,8 @@ describe('ImageCanvasEditorView generation integration', () => {
         resourceId: 'resource-character-animation-final',
         projectId: 'editor-project-character-animation',
         imageSrc: animationFrames[0]!.imageSrc,
-        width: 1024,
-        height: 1024,
+        width: 720,
+        height: 405,
         sourceType: 'generated',
         sourceResourceId: 'resource-character-animation-preview',
         assetKind: 'character-animation',
@@ -3455,7 +3455,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByRole('button', { name: '生成动画' })).toBeTruthy();
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
     expect(
-      screen.queryByRole('dialog', { name: '角色动画生成面板' }),
+      screen.queryByRole('dialog', { name: 'Spine序列帧动画生成' }),
     ).toBeNull();
     fireEvent.contextMenu(characterLayer.closest('button')!, {
       clientX: 260,
@@ -3470,19 +3470,36 @@ describe('ImageCanvasEditorView generation integration', () => {
       screen.getByRole('button', { name: '角色动作生成占位图' }),
     ).toBeTruthy();
     expect(screen.getByText('Action Generator')).toBeTruthy();
-    expect(screen.getByText('动作')).toBeTruthy();
-    const panel = screen.getByRole('dialog', { name: '角色动画生成面板' });
+    expect(screen.getByText('Spine序列帧动画')).toBeTruthy();
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
     expect(panel.className).toContain(
       'image-canvas-editor__generation-composer--character-animation',
     );
-    expect(
+    fireEvent.click(
       within(panel).getByRole('button', {
-        name: '动画参数 同图尺寸 · 4秒 · 480p',
+        name: '序列帧参数 同图尺寸 · 4秒 · 480p',
+      }),
+    );
+    const animationParameterMenu = screen.getByRole('group', {
+      name: '序列帧参数选项',
+    });
+    expect(
+      within(animationParameterMenu).getByRole('button', { name: '同图尺寸' }),
+    ).toBeTruthy();
+    expect(
+      within(animationParameterMenu).getByRole('button', {
+        name: '32帧·4秒',
       }),
     ).toBeTruthy();
     expect(
-      within(panel).getByRole('button', { name: '生成40泥点' }),
+      within(animationParameterMenu).getByRole('button', { name: '480p' }),
     ).toBeTruthy();
+    const submitAnimationButton = within(panel).getByRole('button', {
+      name: '生成Spine序列帧动画',
+    });
+    expect(submitAnimationButton.textContent).toBe('生成40泥点');
     for (const actionLabel of [
       '待机',
       '行走',
@@ -3514,31 +3531,39 @@ describe('ImageCanvasEditorView generation integration', () => {
       within(panel).getByLabelText('动画描述'),
       precisePrompt,
     );
-    expect(
-      within(panel).getByLabelText(`生成文本：${precisePrompt}`),
-    ).toBeTruthy();
+    expect(within(panel).getByLabelText('动画描述').textContent).toBe(
+      precisePrompt,
+    );
     fireEvent.click(
       within(panel).getByRole('button', {
-        name: '动画参数 同图尺寸 · 4秒 · 480p',
+        name: '序列帧参数 同图尺寸 · 4秒 · 480p',
       }),
     );
-    const animationMenu = screen.getByRole('menu', { name: '动画参数选项' });
     fireEvent.click(
-      within(animationMenu).getByRole('button', { name: '清晰度 720p' }),
+      within(
+        screen.getByRole('group', { name: '序列帧参数选项' }),
+      ).getByRole('button', { name: '720p' }),
     );
     fireEvent.click(
-      within(animationMenu).getByRole('button', { name: '比例 16:9' }),
+      within(
+        screen.getByRole('group', { name: '序列帧参数选项' }),
+      ).getByRole('button', { name: '16:9' }),
     );
     fireEvent.click(
-      within(animationMenu).getByRole('button', { name: '时长 48帧·6秒' }),
-    );
-    expect(screen.getByRole('menu', { name: '动画参数选项' })).toBeTruthy();
-    expect(
-      within(panel).getByRole('button', {
-        name: '动画参数 16:9 · 6秒 · 720p',
+      within(
+        screen.getByRole('group', { name: '序列帧参数选项' }),
+      ).getByRole('button', {
+        name: '48帧·6秒',
       }),
-    ).toBeTruthy();
-    fireEvent.click(within(panel).getByRole('button', { name: '生成120泥点' }));
+    );
+    const resizedPlaceholder = screen.getByRole('button', {
+      name: '角色动作生成占位图',
+    });
+    expect(resizedPlaceholder.style.width).toBe('720px');
+    expect(resizedPlaceholder.style.height).toBe('405px');
+    expect(within(resizedPlaceholder).getByText('720 x 405')).toBeTruthy();
+    expect(submitAnimationButton.textContent).toBe('生成120泥点');
+    fireEvent.click(submitAnimationButton);
 
     await waitFor(() => {
       expect(generateEditorCharacterAnimationMock).toHaveBeenCalledWith(
@@ -3553,6 +3578,14 @@ describe('ImageCanvasEditorView generation integration', () => {
           frameCount: 48,
           durationSeconds: 6,
           model: 'seedance2.0-fast',
+          canvasCompletion: expect.objectContaining({
+            placeholder: expect.objectContaining({
+              width: 720,
+              height: 405,
+              originalWidth: 720,
+              originalHeight: 405,
+            }),
+          }),
         }),
       );
     });
@@ -3564,6 +3597,11 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     const actionFrame = screen.getByAltText('画布序列帧：角色动作');
     expect(actionFrame.tagName.toLowerCase()).toBe('img');
+    const actionLayerButton = screen.getByRole('button', {
+      name: '选择角色动作',
+    });
+    expect(actionLayerButton.style.width).toBe('720px');
+    expect(actionLayerButton.style.height).toBe('405px');
     await waitFor(() => {
       expect(actionFrame.getAttribute('src')).toBe(
         'https://assets.test/generated-character-drafts/editor/frame1.png',
@@ -3575,13 +3613,13 @@ describe('ImageCanvasEditorView generation integration', () => {
     // 「按序列帧播放器渲染、总帧数 48」（下一行排除视频元素），分母才是这条断言的意义。
     expect(screen.getByText(/^\d+\/48$/u)).toBeTruthy();
     expect(screen.queryByLabelText('画布视频：角色动作')).toBeNull();
-    expect(screen.getByText('动作')).toBeTruthy();
+    expect(screen.getByText('Spine序列帧动画')).toBeTruthy();
 
-    fireEvent.click(screen.getByRole('button', { name: '选择角色动作' }));
+    fireEvent.click(actionLayerButton);
     fireEvent.click(screen.getByRole('button', { name: '改造' }));
 
     const remodelPanel = screen.getByRole('dialog', {
-      name: '角色动画生成面板',
+      name: 'Spine序列帧动画生成',
     });
     expect(within(remodelPanel).getByLabelText('动画描述').textContent).toBe(
       precisePrompt,
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 978138cba..4f160f6c4 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -1546,6 +1546,8 @@ describe('ImageCanvasEditorModel', () => {
           label: '参考图',
           src: 'data:image/png;base64,ref',
           resourceId: 'resource-reference-1',
+          width: 600,
+          height: 800,
         },
       ],
     };
@@ -1605,6 +1607,8 @@ describe('ImageCanvasEditorModel', () => {
       src: '/read/reference-1.png',
       resourceId: 'resource-reference-1',
       objectKey: 'generated/reference-1.png',
+      width: 600,
+      height: 800,
     });
   });
 
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 9aada3a0f..d063fac44 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -677,6 +677,8 @@ function serializeGenerationReference(
     mimeType: reference.mimeType,
     sizeBytes: reference.sizeBytes,
     durationSeconds: reference.durationSeconds,
+    width: reference.width,
+    height: reference.height,
     resourceId: pointer.resourceId,
     sourceAssetId: pointer.sourceAssetId,
   };
@@ -2328,6 +2330,10 @@ function hydrateCharacterReference(
   const assetObjectId =
     stringOrUndefined(snapshot.assetObjectId) ??
     stringOrUndefined(resource?.assetObjectId);
+  const width =
+    numberFromSnapshot(snapshot.width, 0) || resource?.width || undefined;
+  const height =
+    numberFromSnapshot(snapshot.height, 0) || resource?.height || undefined;
   const resolvedSrc = resource?.imageSrc || objectKey || src;
   return id && label && resolvedSrc
     ? {
@@ -2338,6 +2344,8 @@ function hydrateCharacterReference(
         mimeType,
         sizeBytes,
         durationSeconds,
+        width,
+        height,
         objectKey,
         assetObjectId,
         resourceId,
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index a5f337aa4..3d0602a4e 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -220,6 +220,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     onRemoveBackground: vi.fn(),
     onPerfectPixel: vi.fn(),
     onSplitIconSpritesheet: vi.fn(),
+    onSplitCharacterAnimation: vi.fn(),
     onExtractUiDesignAssets: vi.fn(),
     onUiAssetExtractionToolChange: vi.fn(),
     onUiAssetExtractionModelChange: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 56f3937a4..77606d46e 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -6,6 +6,7 @@ import type {
 import type { EditorSceneStylePreset } from '../../../packages/shared/src/contracts/editorScene';
 import type {
   EditorAssetSnapshot,
+  EditorCharacterAnimationBackgroundColor,
   EditorCharacterAnimationFrameCount,
   EditorCharacterAnimationGenerationResult,
   EditorCharacterAnimationRatio,
@@ -183,6 +184,7 @@ export type CanvasTool =
   | 'upload'
   | 'generate'
   | 'video'
+  | 'character-animation'
   | 'music'
   | 'spec'
   | 'character'
@@ -219,6 +221,8 @@ export type CharacterReferenceImage = {
   mimeType?: string;
   sizeBytes?: number;
   durationSeconds?: number;
+  width?: number;
+  height?: number;
   objectKey?: string | null;
   assetObjectId?: string | null;
   resourceId?: string | null;
@@ -295,6 +299,7 @@ export type GenerateDialogState = {
   characterAnimationRatio?: EditorCharacterAnimationRatio;
   characterAnimationFrameCount?: EditorCharacterAnimationFrameCount;
   characterAnimationDurationSeconds?: 4 | 5 | 6;
+  characterAnimationBackgroundColor?: EditorCharacterAnimationBackgroundColor;
   characterAnimationResult?: EditorCharacterAnimationGenerationResult;
   soundModel?: EditorSoundEffectModel | 'audio1.0';
   soundDurationMode?: EditorSoundEffectDurationMode;
@@ -488,9 +493,11 @@ export type CropExpandResizeHandle =
   | 'bottom-right';
 
 export type CharacterAnimationPanelState = {
-  sourceLayerId: string;
+  sourceLayerId?: string;
+  references?: CharacterReferenceImage[];
   promptText: string;
   assetLabel?: string;
+  backgroundColor?: EditorCharacterAnimationBackgroundColor;
   resolution: EditorCharacterAnimationResolution;
   ratio: EditorCharacterAnimationRatio;
   frameCount: EditorCharacterAnimationFrameCount;
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 3ff601c19..aa4403734 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -106,6 +106,7 @@ import { useImageCanvasStageController } from './useImageCanvasStageController';
 import { useImageCanvasStageInteractions } from './useImageCanvasStageInteractions';
 import {
   type ImageReferenceUploadCapacity,
+  resolveGenerationMediaReferenceUploadCapacity,
   useImageCanvasUploadWorkflow,
 } from './useImageCanvasUploadWorkflow';
 import {
@@ -230,10 +231,13 @@ function findSourceAnimationLayer(
   if (!sourceResourceId) {
     return null;
   }
+  // 与 useImageCanvasGenerationWorkflow 的同一实现保持一致——匹配
+  // resourceId 或历史落库的 layer id，且仅认定角色图层为动画来源。
   return (
     layers.find(
       (layer) =>
-        layer.resourceId === sourceResourceId || layer.id === sourceResourceId,
+        (layer.resourceId === sourceResourceId || layer.id === sourceResourceId) &&
+        layer.assetKind === 'character',
     ) ?? null
   );
 }
@@ -1404,6 +1408,7 @@ export function ImageCanvasEditorView({
     canvasSize,
     viewport,
     activeTool,
+    generateDialog,
     allocateUploadIndex: () => {
       layerCounterRef.current += 1;
       return layerCounterRef.current;
@@ -1596,6 +1601,8 @@ export function ImageCanvasEditorView({
     pendingPerfectPixelLayerIds,
     splitSelectedIconSpritesheet,
     splittingIconSpritesheetLayerIds,
+    splitSelectedCharacterAnimationFrames,
+    splittingCharacterAnimationLayerIds,
     extractUiDesignAssets,
     pickCharacterSpecFromLayer,
     pickGenerationReferenceFromLayer,
@@ -1658,6 +1665,21 @@ export function ImageCanvasEditorView({
       references.filter(
         (reference) => (reference.mediaType ?? 'image') === 'image',
       ).length;
+    const generationMediaCapacity =
+      resolveGenerationMediaReferenceUploadCapacity({
+        target,
+        dialog: generateDialog,
+      });
+    if (generationMediaCapacity) {
+      return generationMediaCapacity;
+    }
+    if (
+      target === 'video-reference-image' ||
+      target === 'video-reference-video' ||
+      target === 'video-reference-audio'
+    ) {
+      return null;
+    }
     const generateDialogContextId = generateDialog
       ? (generateDialog.id ??
         `${generateDialog.mode}:${generateDialog.sourceLayerId ?? 'draft'}`)
@@ -1874,6 +1896,9 @@ export function ImageCanvasEditorView({
         availableLayers: layersRef.current,
       });
       if (!restoredDraft) {
+        // 与 openRedrawPanel 的失败分支保持一致，避免从元信息面板改造失败时
+        // 静默无反馈。
+        showGenerationWarning('该生成配方当前无法恢复，无法改造。');
         return false;
       }
       openCanvasGenerationDialog(restoredDraft);
@@ -2572,6 +2597,7 @@ export function ImageCanvasEditorView({
     perfectPixelLayerIds,
     pendingPerfectPixelLayerIds,
     splittingIconSpritesheetLayerIds,
+    splittingCharacterAnimationLayerIds,
     uploadDropTarget,
     contextMenu,
     canvasClipboard,
@@ -2633,6 +2659,11 @@ export function ImageCanvasEditorView({
         splitSelectedIconSpritesheet(layer),
       );
     },
+    onSplitCharacterAnimation: (layer: CanvasLayer) => {
+      void flushProjectPersistence().then(() =>
+        splitSelectedCharacterAnimationFrames(layer),
+      );
+    },
     onExtractUiDesignAssets: extractUiDesignAssets,
     onUiAssetExtractionToolChange: changeUiAssetExtractionTool,
     onUiAssetExtractionModelChange: changeUiAssetExtractionModel,
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 1ad871478..68b1bec1a 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -122,6 +122,68 @@ function createComposerProps(
   };
 }
 
+function CharacterAnimationReferenceHarness() {
+  const [dialog, setDialog] = useState<GenerateDialogState | null>({
+    id: 'dialog-character-animation-reference',
+    mode: 'character-animation',
+    prompt: '原地挥手',
+    status: 'idle',
+    composerOpen: true,
+    sourceLayerId: 'layer-character',
+    generationReferences: [
+      {
+        id: 'canvas-layer-character',
+        label: '角色图片',
+        src: 'generated/character.png',
+        mediaType: 'image',
+        resourceId: 'resource-character',
+      },
+    ],
+    characterAnimationRatio: 'same',
+    characterAnimationResolution: '480p',
+    characterAnimationFrameCount: 32,
+    characterAnimationDurationSeconds: 4,
+  });
+  if (!dialog) {
+    return null;
+  }
+
+  return (
+    <ImageCanvasGenerationComposerView
+      {...createComposerProps(dialog, { setGenerateDialog: setDialog })}
+    />
+  );
+}
+
+function CharacterAnimationParametersHarness({
+  backgroundColor,
+}: {
+  backgroundColor?: GenerateDialogState['characterAnimationBackgroundColor'];
+}) {
+  const [dialog, setDialog] = useState<GenerateDialogState | null>({
+    id: 'dialog-character-animation-parameters',
+    mode: 'character-animation',
+    prompt: '原地奔跑',
+    status: 'idle',
+    composerOpen: true,
+    generationReferences: [],
+    characterAnimationBackgroundColor: backgroundColor,
+    characterAnimationRatio: '1:1',
+    characterAnimationResolution: '480p',
+    characterAnimationFrameCount: 32,
+    characterAnimationDurationSeconds: 4,
+  });
+  if (!dialog) {
+    return null;
+  }
+
+  return (
+    <ImageCanvasGenerationComposerView
+      {...createComposerProps(dialog, { setGenerateDialog: setDialog })}
+    />
+  );
+}
+
 function SceneValidationHarness({
   initialDialog,
 }: {
@@ -1889,7 +1951,9 @@ describe('ImageCanvasGenerationComposerView', () => {
       try {
         fireEvent.keyDown(automaticDuration, { key: 'Escape' });
 
-        expect(screen.queryByRole('group', { name: '音效时长选项' })).toBeNull();
+        expect(
+          screen.queryByRole('group', { name: '音效时长选项' }),
+        ).toBeNull();
         expect(document.activeElement).toBe(trigger);
         expect(globalEscape).not.toHaveBeenCalled();
 
@@ -1927,6 +1991,347 @@ describe('ImageCanvasGenerationComposerView', () => {
     });
   });
 
+  it('序列帧动作预设每行八个且更多动作按八个逐行展开', () => {
+    renderComposer({
+      id: 'dialog-character-animation-action-presets',
+      mode: 'character-animation',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      generationReferences: [],
+    });
+
+    const actionPresets = within(screen.getByLabelText('动作预设'));
+    const getActionButtons = () => actionPresets.getAllByRole('button');
+    const getMoreButton = () =>
+      actionPresets.getByRole('button', { name: '更多' });
+
+    expect(screen.getByLabelText('动作预设').style.gridTemplateColumns).toBe(
+      'repeat(8, minmax(0, 1fr))',
+    );
+    expect(getActionButtons()).toHaveLength(8);
+    expect(
+      getActionButtons()
+        .slice(0, 7)
+        .map((button) => button.textContent),
+    ).toEqual(['行走', '待机', '奔跑', '跳跃', '攻击', '受击', '倒下']);
+    expect(getActionButtons()[7]).toBe(getMoreButton());
+    expect(getMoreButton().getAttribute('aria-expanded')).toBe('false');
+    expect(actionPresets.queryByRole('button', { name: '冲刺' })).toBeNull();
+
+    fireEvent.click(getMoreButton());
+
+    expect(getActionButtons()).toHaveLength(16);
+    expect(getActionButtons().at(-1)).toBe(getMoreButton());
+    expect(
+      getActionButtons()
+        .slice(7, 15)
+        .map((button) => button.textContent),
+    ).toEqual(['冲刺', '飞行', '悬浮', '爬行', '劈砍', '突刺', '砸击', '拳击']);
+    expect(actionPresets.queryByRole('button', { name: '踢击' })).toBeNull();
+    expect(document.activeElement).toBe(
+      actionPresets.getByRole('button', { name: '冲刺' }),
+    );
+    expect(getMoreButton().getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByRole('status').textContent).toBe('已显示8个更多动作');
+
+    fireEvent.click(getMoreButton());
+
+    expect(getActionButtons()).toHaveLength(24);
+    expect(getActionButtons().at(-1)).toBe(getMoreButton());
+    expect(
+      getActionButtons()
+        .slice(15, 23)
+        .map((button) => button.textContent),
+    ).toEqual(['踢击', '射击', '施法', '格挡', '闪避', '招架', '举盾', '蹲下']);
+    expect(actionPresets.queryByRole('button', { name: '呼吸' })).toBeNull();
+    expect(document.activeElement).toBe(
+      actionPresets.getByRole('button', { name: '踢击' }),
+    );
+    expect(screen.getByRole('status').textContent).toBe('已显示16个更多动作');
+
+    fireEvent.click(getMoreButton());
+
+    expect(getActionButtons()).toHaveLength(32);
+    expect(actionPresets.getByRole('button', { name: '伸展' })).toBeTruthy();
+    expect(actionPresets.getByRole('button', { name: '速度线' })).toBeTruthy();
+    expect(
+      actionPresets.queryByRole('button', { name: '冲击波' }),
+    ).toBeTruthy();
+    expect(
+      actionPresets.queryByRole('button', { name: '粒子爆发' }),
+    ).toBeNull();
+    expect(actionPresets.queryByRole('button', { name: '更多' })).toBeTruthy();
+
+    fireEvent.click(getMoreButton());
+
+    expect(getActionButtons()).toHaveLength(33);
+    expect(
+      actionPresets.getByRole('button', { name: '粒子爆发' }),
+    ).toBeTruthy();
+    expect(actionPresets.queryByRole('button', { name: '更多' })).toBeNull();
+    const collapseButton = actionPresets.getByRole('button', { name: '收起' });
+    expect(getActionButtons().at(-1)).toBe(collapseButton);
+    expect(collapseButton.getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByRole('status').textContent).toBe(
+      '已显示全部25个更多动作',
+    );
+
+    fireEvent.click(collapseButton);
+
+    expect(getActionButtons()).toHaveLength(8);
+    expect(actionPresets.queryByRole('button', { name: '冲刺' })).toBeNull();
+    expect(getMoreButton().getAttribute('aria-expanded')).toBe('false');
+    expect(screen.getByRole('status').textContent).toBe('更多动作已收起');
+  });
+
+  it('序列帧画布选参考提示角色图或视频，其他模式保持原提示', () => {
+    renderComposer(
+      {
+        id: 'dialog-character-animation-picking',
+        mode: 'character-animation',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+      },
+      { isPickingGenerationReferenceFromCanvas: true },
+    );
+
+    expect(
+      screen.getByText('请选择画布中的角色图或视频作为参考，按 Esc 退出'),
+    ).toBeTruthy();
+  });
+
+  it('普通生成画布选参考仍显示图片提示', () => {
+    renderComposer(
+      {
+        id: 'dialog-image-picking',
+        mode: 'generate',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+      },
+      { isPickingGenerationReferenceFromCanvas: true },
+    );
+
+    expect(
+      screen.getByText('请选择画布中的图片作为参考图，按 Esc 退出'),
+    ).toBeTruthy();
+  });
+
+  it('序列帧背景、比例、帧数时长和清晰度可独立选中并保留其他参数', () => {
+    render(<CharacterAnimationParametersHarness backgroundColor="green" />);
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    const backgroundOptions = within(panel).getByRole('group', {
+      name: '背景颜色',
+    });
+    const parameterTrigger = within(panel).getByRole('button', {
+      name: '序列帧参数 1:1 · 4秒 · 480p',
+    });
+
+    expect(screen.queryByRole('group', { name: '画面比例' })).toBeNull();
+    fireEvent.click(
+      within(backgroundOptions).getByRole('button', {
+        name: '背景颜色 蓝色',
+      }),
+    );
+    fireEvent.click(parameterTrigger);
+
+    const parameterMenu = screen.getByRole('group', {
+      name: '序列帧参数选项',
+    });
+    const ratioOptions = within(parameterMenu).getByRole('group', {
+      name: '画面比例',
+    });
+    const durationOptions = within(parameterMenu).getByRole('group', {
+      name: '帧数和时长',
+    });
+    const resolutionOptions = within(parameterMenu).getByRole('group', {
+      name: '清晰度',
+    });
+    const greenButton = within(backgroundOptions).getByRole('button', {
+      name: '背景颜色 绿色',
+    });
+    const blueButton = within(backgroundOptions).getByRole('button', {
+      name: '背景颜色 蓝色',
+    });
+    const squareButton = within(ratioOptions).getByRole('button', {
+      name: '1:1',
+    });
+    const landscapeButton = within(ratioOptions).getByRole('button', {
+      name: '16:9',
+    });
+    const defaultDurationButton = within(durationOptions).getByRole('button', {
+      name: '32帧·4秒',
+    });
+    const extendedDurationButton = within(durationOptions).getByRole('button', {
+      name: '40帧·5秒',
+    });
+    const defaultResolutionButton = within(resolutionOptions).getByRole(
+      'button',
+      { name: '480p' },
+    );
+    const highResolutionButton = within(resolutionOptions).getByRole('button', {
+      name: '720p',
+    });
+
+    expect(greenButton.getAttribute('aria-pressed')).toBe('false');
+    expect(blueButton.getAttribute('aria-pressed')).toBe('true');
+    expect(squareButton.getAttribute('aria-pressed')).toBe('true');
+    expect(defaultDurationButton.getAttribute('aria-pressed')).toBe('true');
+    expect(defaultResolutionButton.getAttribute('aria-pressed')).toBe('true');
+
+    fireEvent.click(landscapeButton);
+    fireEvent.click(extendedDurationButton);
+    fireEvent.click(highResolutionButton);
+
+    expect(
+      within(backgroundOptions)
+        .getByRole('button', { name: '背景颜色 蓝色' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(
+      within(backgroundOptions)
+        .getByRole('button', { name: '背景颜色 绿色' })
+        .getAttribute('aria-pressed'),
+    ).toBe('false');
+    expect(
+      screen.getByRole('button', { name: '16:9' }).getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(
+      screen.getByRole('button', { name: '1:1' }).getAttribute('aria-pressed'),
+    ).toBe('false');
+    expect(
+      screen
+        .getByRole('button', { name: '40帧·5秒' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(
+      screen
+        .getByRole('button', { name: '32帧·4秒' })
+        .getAttribute('aria-pressed'),
+    ).toBe('false');
+    expect(
+      screen.getByRole('button', { name: '720p' }).getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(
+      screen.getByRole('button', { name: '480p' }).getAttribute('aria-pressed'),
+    ).toBe('false');
+    expect(
+      within(panel).getByRole('button', {
+        name: '序列帧参数 16:9 · 5秒 · 720p',
+      }),
+    ).toBeTruthy();
+    expect(
+      within(panel)
+        .getByRole('button', { name: '生成Spine序列帧动画' })
+        .classList.contains('image-canvas-editor__character-animation-submit'),
+    ).toBe(true);
+  });
+
+  it('旧角色图入口未显式选键色时不伪装成绿色已选', () => {
+    render(<CharacterAnimationParametersHarness backgroundColor={undefined} />);
+
+    const backgroundOptions = screen.getByRole('group', { name: '背景颜色' });
+    expect(
+      within(backgroundOptions)
+        .getAllByRole('button')
+        .every((button) => button.getAttribute('aria-pressed') === 'false'),
+    ).toBe(true);
+  });
+
+  it('序列帧生成中禁用动作预设和更多按钮', () => {
+    renderComposer({
+      id: 'dialog-character-animation-generating-actions',
+      mode: 'character-animation',
+      prompt: '原地奔跑',
+      status: 'generating',
+      composerOpen: true,
+      generationReferences: [],
+    });
+
+    const actionPresets = within(screen.getByLabelText('动作预设'));
+    const actionButtons = actionPresets.getAllByRole('button');
+    expect(actionButtons).toHaveLength(8);
+    expect(
+      actionButtons.every((button) => (button as HTMLButtonElement).disabled),
+    ).toBe(true);
+
+    fireEvent.click(actionPresets.getByRole('button', { name: '更多' }));
+
+    expect(actionPresets.getAllByRole('button')).toHaveLength(8);
+    expect(actionPresets.queryByRole('button', { name: '冲刺' })).toBeNull();
+
+    expect(
+      within(screen.getByRole('group', { name: '背景颜色' }))
+        .getAllByRole('button')
+        .every((button) => (button as HTMLButtonElement).disabled),
+    ).toBe(true);
+    expect(
+      (
+        screen.getByRole('button', {
+          name: '序列帧参数 1:1 · 4秒 · 480p',
+        }) as HTMLButtonElement
+      ).disabled,
+    ).toBe(true);
+    expect(screen.queryByRole('group', { name: '画面比例' })).toBeNull();
+    expect(
+      (
+        screen.getByRole('button', {
+          name: '生成Spine序列帧动画',
+        }) as HTMLButtonElement
+      ).disabled,
+    ).toBe(true);
+  });
+
+  it('移除序列帧参考素材后回到文本模式并清除同图尺寸', () => {
+    render(<CharacterAnimationReferenceHarness />);
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    fireEvent.click(
+      within(panel).getByRole('button', {
+        name: '序列帧参数 同图尺寸 · 4秒 · 480p',
+      }),
+    );
+    expect(
+      within(screen.getByRole('group', { name: '画面比例' })).getByRole(
+        'button',
+        { name: '同图尺寸' },
+      ),
+    ).toBeTruthy();
+
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '删除角色图片' }),
+    );
+
+    expect(
+      within(screen.getByRole('group', { name: '画面比例' })).queryByRole(
+        'button',
+        { name: '同图尺寸' },
+      ),
+    ).toBeNull();
+    const ratioOptions = within(
+      screen.getByRole('group', { name: '画面比例' }),
+    );
+    const squareRatioButton = ratioOptions.getByRole('button', {
+      name: '1:1',
+    });
+    const landscapeRatioButton = ratioOptions.getByRole('button', {
+      name: '16:9',
+    });
+    expect(squareRatioButton.getAttribute('aria-pressed')).toBe('true');
+
+    fireEvent.click(landscapeRatioButton);
+
+    expect(landscapeRatioButton.getAttribute('aria-pressed')).toBe('true');
+    expect(squareRatioButton.getAttribute('aria-pressed')).toBe('false');
+  });
+
   it('生成规范参考图点击先弹来源菜单，不直接打开上传', () => {
     const onRequestUpload = vi.fn();
     const setIsGenerationReferenceMenuOpen = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 313160036..b6a07d5dd 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -68,9 +68,17 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import {
+  calculateCharacterAnimationPrice,
   calculateEditorBackgroundMusicPrice,
   calculateEditorSoundEffectPrice,
   calculateEditorVideoPrice,
+  CHARACTER_ANIMATION_ACTION_PROMPTS,
+  CHARACTER_ANIMATION_BACKGROUND_OPTIONS,
+  CHARACTER_ANIMATION_DURATION_OPTIONS,
+  CHARACTER_ANIMATION_MODEL,
+  CHARACTER_ANIMATION_MORE_ACTION_PROMPTS,
+  CHARACTER_ANIMATION_RATIO_OPTIONS,
+  CHARACTER_ANIMATION_RESOLUTION_OPTIONS,
   DEFAULT_BACKGROUND_MUSIC_MODEL,
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
   DEFAULT_SOUND_EFFECT_MODEL,
@@ -81,6 +89,7 @@ import {
   EDITOR_VIDEO_ASPECT_RATIO_OPTIONS,
   EDITOR_VIDEO_MODEL_OPTIONS,
   EDITOR_VIDEO_RESOLUTION_OPTIONS,
+  resizeGenerationPlaceholderToCharacterAnimationSelection,
   resizeGenerationPlaceholderToVideoSelection,
   SPEC_TYPE_LABEL,
   VIDEO_MODEL_SEEDANCE_2_FAST,
@@ -371,6 +380,432 @@ function VideoOptionChoice({
   );
 }
 
+const CHARACTER_ANIMATION_ACTIONS_PER_ROW = 8;
+
+function ImageCanvasSequenceAnimationComposerView({
+  dialog,
+  style,
+  generationReferenceButtonRef,
+  isGenerationReferenceMenuOpen,
+  setGenerateDialog,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  renderEditorPortal,
+  buildPortalMenuStyle,
+  onRequestUpload,
+  onSubmit,
+}: {
+  dialog: GenerateDialogState;
+  style: CSSProperties;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
+  isGenerationReferenceMenuOpen: boolean;
+  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
+  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
+  renderEditorPortal: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
+  onRequestUpload: (target: UploadTarget) => void;
+  onSubmit: () => void;
+}) {
+  const [visibleMoreActionCount, setVisibleMoreActionCount] = useState(0);
+  const [actionPresetAnnouncement, setActionPresetAnnouncement] = useState('');
+  const [isParameterMenuOpen, setIsParameterMenuOpen] = useState(false);
+  const parameterMenuButtonRef = useRef<HTMLButtonElement | null>(null);
+  const pendingActionFocusIndexRef = useRef<number | null>(null);
+  const pendingActionFocusTargetRef = useRef<HTMLButtonElement | null>(null);
+  const reference = dialog.generationReferences?.[0];
+  const isGenerating = dialog.status === 'generating';
+  const resolution = dialog.characterAnimationResolution ?? '480p';
+  const ratio = dialog.characterAnimationRatio ?? '1:1';
+  const frameCount = dialog.characterAnimationFrameCount ?? 32;
+  const durationSeconds = dialog.characterAnimationDurationSeconds ?? 4;
+  const backgroundColor = dialog.characterAnimationBackgroundColor;
+  const hasExpandedActions = visibleMoreActionCount > 0;
+  const hasExpandedAllActions =
+    visibleMoreActionCount >= CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length;
+  const visibleMoreActions = CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.slice(
+    0,
+    visibleMoreActionCount,
+  );
+  const closeParameterMenu = useCallback(() => {
+    setIsParameterMenuOpen(false);
+  }, []);
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isParameterMenuOpen,
+    boundaryRefs: [parameterMenuButtonRef],
+    onDismiss: closeParameterMenu,
+    restoreFocusRef: parameterMenuButtonRef,
+  });
+  useEffect(() => {
+    if (pendingActionFocusIndexRef.current === null) {
+      return;
+    }
+    pendingActionFocusTargetRef.current?.focus();
+    pendingActionFocusIndexRef.current = null;
+  }, [visibleMoreActionCount]);
+  const price = calculateCharacterAnimationPrice(
+    CHARACTER_ANIMATION_MODEL,
+    resolution,
+    durationSeconds,
+  );
+  const updateDialog = (patch: Partial<GenerateDialogState>) => {
+    setGenerateDialog((currentDialog) =>
+      currentDialog?.mode === 'character-animation'
+        ? resizeGenerationPlaceholderToCharacterAnimationSelection({
+            ...currentDialog,
+            status:
+              currentDialog.status === 'failed' ? 'idle' : currentDialog.status,
+            errorMessage:
+              currentDialog.status === 'failed'
+                ? undefined
+                : currentDialog.errorMessage,
+            ...patch,
+          })
+        : currentDialog,
+    );
+  };
+  const applyActionPrompt = (label: string, text?: string) => {
+    updateDialog({ prompt: text ?? `${label}动作，角色完整且动作连贯。` });
+  };
+
+  return (
+    <>
+      <div
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--character-animation"
+        style={style}
+        role="dialog"
+        aria-label="Spine序列帧动画生成"
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <div className="image-canvas-editor__reference-strip">
+          {reference ? (
+            <VideoReferenceChip
+              reference={reference}
+              index={0}
+              onRemove={() => {
+                // 仅当比例是“同图尺寸”时才回落到 1:1；用户显式选过 4:3/16:9 等
+                // 比例时移除参考应保留原选择。
+                const isSameRatio = dialog.characterAnimationRatio === 'same';
+                updateDialog({
+                  sourceLayerId: undefined,
+                  generationReferences: [],
+                  ...(isSameRatio ? { characterAnimationRatio: '1:1' } : {}),
+                });
+              }}
+            />
+          ) : null}
+          <ImageCanvasReferenceSlot
+            buttonRef={generationReferenceButtonRef}
+            tone="character"
+            icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+            label="参考"
+            ariaLabel="添加序列帧参考素材"
+            disabled={isGenerating}
+            isAdd
+            onClick={() => {
+              closeParameterMenu();
+              setIsGenerationReferenceMenuOpen((open) => !open);
+            }}
+          />
+        </div>
+        <AutoGrowTextArea
+          aria-label="动画描述"
+          value={dialog.prompt}
+          maxLength={4000}
+          disabled={isGenerating}
+          placeholder="请描述人物、朝向、做什么、如何做。比如：让人物朝侧面原地不断快速奔跑。"
+          className="max-h-64 image-canvas-editor__generation-prompt image-canvas-editor__character-animation-textarea"
+          onValueChange={(prompt) => updateDialog({ prompt })}
+        />
+        <div
+          className="image-canvas-editor__character-animation-backgrounds"
+          role="group"
+          aria-label="背景颜色"
+        >
+          {CHARACTER_ANIMATION_BACKGROUND_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className={`image-canvas-editor__character-animation-color-button image-canvas-editor__character-animation-color-button--${option.value}`}
+              aria-label={`背景颜色 ${option.label}`}
+              aria-pressed={backgroundColor === option.value}
+              disabled={isGenerating}
+              onClick={() =>
+                updateDialog({
+                  characterAnimationBackgroundColor: option.value,
+                })
+              }
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+        <div
+          className="image-canvas-editor__character-animation-presets"
+          aria-label="动作预设"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: `repeat(${CHARACTER_ANIMATION_ACTIONS_PER_ROW}, minmax(0, 1fr))`,
+          }}
+        >
+          {CHARACTER_ANIMATION_ACTION_PROMPTS.map((preset) => (
+            <button
+              key={preset.label}
+              type="button"
+              className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+              disabled={isGenerating}
+              onClick={() => applyActionPrompt(preset.label, preset.text)}
+            >
+              {preset.label}
+            </button>
+          ))}
+          {visibleMoreActions.map((label, index) => (
+            <button
+              key={label}
+              ref={(button) => {
+                if (index === pendingActionFocusIndexRef.current) {
+                  pendingActionFocusTargetRef.current = button;
+                }
+              }}
+              type="button"
+              className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+              disabled={isGenerating}
+              onClick={() => applyActionPrompt(label)}
+            >
+              {label}
+            </button>
+          ))}
+          <button
+            type="button"
+            className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+            disabled={isGenerating}
+            aria-expanded={hasExpandedActions}
+            onClick={() => {
+              const nextCount = hasExpandedAllActions
+                ? 0
+                : Math.min(
+                    visibleMoreActionCount +
+                      CHARACTER_ANIMATION_ACTIONS_PER_ROW,
+                    CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length,
+                  );
+              pendingActionFocusIndexRef.current = hasExpandedAllActions
+                ? null
+                : visibleMoreActionCount;
+              setVisibleMoreActionCount(nextCount);
+              setActionPresetAnnouncement(
+                nextCount === 0
+                  ? '更多动作已收起'
+                  : nextCount >= CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length
+                    ? `已显示全部${nextCount}个更多动作`
+                    : `已显示${nextCount}个更多动作`,
+              );
+            }}
+          >
+            {hasExpandedAllActions ? '收起' : '更多'}
+          </button>
+          <span
+            className="sr-only"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            {actionPresetAnnouncement}
+          </span>
+        </div>
+        <div className="image-canvas-editor__character-animation-footer">
+          <PlatformInlineOptionButton
+            ref={parameterMenuButtonRef}
+            className="image-canvas-editor__character-animation-parameter-trigger"
+            aria-label={`序列帧参数 ${ratio === 'same' ? '同图尺寸' : ratio} · ${durationSeconds}秒 · ${resolution}`}
+            aria-expanded={isParameterMenuOpen}
+            disabled={isGenerating}
+            trailingIcon={<ChevronDown className="h-3 w-3" />}
+            onClick={() => {
+              setIsGenerationReferenceMenuOpen(false);
+              setIsParameterMenuOpen((open) => !open);
+            }}
+          >
+            {ratio === 'same' ? '同图尺寸' : ratio} · {durationSeconds}秒 ·{' '}
+            {resolution}
+          </PlatformInlineOptionButton>
+          <PlatformActionButton
+            className="image-canvas-editor__character-animation-submit"
+            type="button"
+            tone="secondary"
+            size="xs"
+            shape="pill"
+            disabled={isGenerating || !dialog.prompt.trim()}
+            aria-label="生成Spine序列帧动画"
+            onClick={() => {
+              if (!isGenerating) {
+                onSubmit();
+              }
+            }}
+          >
+            {isGenerating ? '生成中' : `生成${price}泥点`}
+          </PlatformActionButton>
+        </div>
+        {dialog.status === 'failed' ? (
+          <PlatformStatusMessage tone="error" surface="platform" size="xs">
+            {dialog.errorMessage ?? '生成Spine序列帧动画失败'}
+          </PlatformStatusMessage>
+        ) : null}
+      </div>
+      {isParameterMenuOpen
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__character-animation-parameter-menu image-canvas-editor__portal-menu"
+              label="序列帧参数选项"
+              variant="options"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                parameterMenuButtonRef.current,
+                'above',
+              )}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <section className="image-canvas-editor__character-animation-menu-section">
+                <span className="image-canvas-editor__character-animation-menu-title">
+                  比例
+                </span>
+                <div
+                  className="image-canvas-editor__character-animation-ratio-grid"
+                  role="group"
+                  aria-label="画面比例"
+                >
+                  {CHARACTER_ANIMATION_RATIO_OPTIONS.filter(
+                    (option) => reference || option.value !== 'same',
+                  ).map((option) => (
+                    <button
+                      key={option.value}
+                      type="button"
+                      className="image-canvas-editor__character-animation-ratio-choice"
+                      aria-label={
+                        option.value === 'same' ? '同图尺寸' : option.value
+                      }
+                      aria-pressed={ratio === option.value}
+                      disabled={isGenerating}
+                      onClick={() =>
+                        updateDialog({ characterAnimationRatio: option.value })
+                      }
+                    >
+                      <span
+                        className="image-canvas-editor__ratio-wireframe"
+                        data-ratio={option.value}
+                        aria-hidden="true"
+                      />
+                      <span>
+                        {option.value === 'same' ? '同图尺寸' : option.value}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </section>
+              <section className="image-canvas-editor__character-animation-menu-section">
+                <span className="image-canvas-editor__character-animation-menu-title">
+                  时长
+                </span>
+                <div
+                  className="image-canvas-editor__character-animation-menu-options"
+                  role="group"
+                  aria-label="帧数和时长"
+                >
+                  {CHARACTER_ANIMATION_DURATION_OPTIONS.map((option) => (
+                    <button
+                      key={option.frameCount}
+                      type="button"
+                      className="image-canvas-editor__character-animation-menu-pill"
+                      aria-pressed={frameCount === option.frameCount}
+                      disabled={isGenerating}
+                      onClick={() =>
+                        updateDialog({
+                          characterAnimationFrameCount: option.frameCount,
+                          characterAnimationDurationSeconds:
+                            option.durationSeconds,
+                        })
+                      }
+                    >
+                      {option.label}
+                    </button>
+                  ))}
+                </div>
+              </section>
+              <section className="image-canvas-editor__character-animation-menu-section">
+                <span className="image-canvas-editor__character-animation-menu-title">
+                  清晰度
+                </span>
+                <div
+                  className="image-canvas-editor__character-animation-menu-options"
+                  role="group"
+                  aria-label="清晰度"
+                >
+                  {CHARACTER_ANIMATION_RESOLUTION_OPTIONS.map((value) => (
+                    <button
+                      key={value}
+                      type="button"
+                      className="image-canvas-editor__character-animation-menu-pill"
+                      aria-pressed={resolution === value}
+                      disabled={isGenerating}
+                      onClick={() =>
+                        updateDialog({ characterAnimationResolution: value })
+                      }
+                    >
+                      {value}
+                    </button>
+                  ))}
+                </div>
+              </section>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+      {isGenerationReferenceMenuOpen
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="序列帧参考素材来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(false);
+                  onRequestUpload('video-reference-image');
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(false);
+                  onRequestUpload('video-reference-video');
+                }}
+              >
+                上传视频
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
+  );
+}
+
 function ImageCanvasVideoGenerationComposerView({
   dialog,
   style,
@@ -1689,6 +2124,26 @@ export function ImageCanvasGenerationComposerView({
         />
       ) : null}
 
+      {generateDialog?.mode === 'character-animation' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <ImageCanvasSequenceAnimationComposerView
+          dialog={generateDialog}
+          style={generationComposerStyle}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          setGenerateDialog={setGenerateDialog}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
+          onRequestUpload={onRequestUpload}
+          onSubmit={onSubmitCharacterAnimation}
+        />
+      ) : null}
+
       {(generateDialog?.mode === 'audio-sound-effect' ||
         generateDialog?.mode === 'audio-background-music') &&
       generateDialog.composerOpen !== false &&
@@ -1768,7 +2223,9 @@ export function ImageCanvasGenerationComposerView({
       ) : null}
       {isPickingGenerationReferenceFromCanvas ? (
         <div className="image-canvas-editor__canvas-pick-hint">
-          请选择画布中的图片作为参考图，按 Esc 退出
+          {generateDialog?.mode === 'character-animation'
+            ? '请选择画布中的角色图或视频作为参考，按 Esc 退出'
+            : '请选择画布中的图片作为参考图，按 Esc 退出'}
         </div>
       ) : null}
       {isPickingQuickEditReferenceFromCanvas ? (
@@ -1824,6 +2281,7 @@ export function ImageCanvasGenerationComposerView({
 
       {characterAnimationPanel &&
       characterAnimationSourceLayer &&
+      generateDialog?.mode !== 'character-animation' &&
       characterAnimationPanelStyle ? (
         <ImageCanvasCharacterAnimationPanelView
           panel={characterAnimationPanel}
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 7782a2ba6..0b48914ab 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -487,6 +487,19 @@ describe('ImageCanvasGenerationDialogModel', () => {
     ).toMatchObject({ mode: 'generate', prompt: '原图提示' });
     expect(createCharacterAnimationPanelDraft(sourceLayer)).toEqual({
       sourceLayerId: 'layer-source',
+      references: [
+        {
+          id: 'canvas-layer-source',
+          label: '源图',
+          src: 'data:image/png;base64,source',
+          objectKey: undefined,
+          assetObjectId: undefined,
+          resourceId: 'resource-source',
+          sourceAssetId: undefined,
+          width: 1024,
+          height: 768,
+        },
+      ],
       promptText: '',
       resolution: '480p',
       ratio: 'same',
@@ -1374,6 +1387,122 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('restores an uploaded video reference from the stable generation snapshot', () => {
+    expect(
+      createSameSourceGenerationDialogDraft({
+        sourceLayer: createLayer({
+          id: 'layer-animation-result',
+          sourceType: 'generated',
+          assetKind: 'character-animation',
+          generationInputs: {
+            version: 2,
+            action: 'character-animation.generate',
+            fields: [
+              { id: 'inputMode', title: '输入模式', value: 'video' },
+              { id: 'prompt', title: '动作描述', value: '复刻奔跑节奏' },
+              {
+                id: 'referenceSrc',
+                title: '参考素材',
+                value: 'users/user-1/action.mp4',
+              },
+              {
+                id: 'referenceMediaType',
+                title: '参考类型',
+                value: 'video',
+              },
+              { id: 'referenceWidth', title: '参考宽度', value: 1920 },
+              { id: 'referenceHeight', title: '参考高度', value: 1080 },
+              { id: 'ratio', title: '比例', value: 'same' },
+            ],
+            references: [
+              {
+                id: 'source',
+                title: '参考视频',
+                label: '奔跑动作.mp4',
+                refType: 'asset',
+                refId: 'asset-video-reference',
+              },
+            ],
+          },
+        }),
+        canvasSize: { width: 960, height: 720 },
+        viewport: { x: 0, y: 0, scale: 1 },
+        mode: 'redraw',
+        availableLayers: [],
+      }),
+    ).toMatchObject({
+      mode: 'character-animation',
+      prompt: '复刻奔跑节奏',
+      sourceLayerId: undefined,
+      characterAnimationRatio: 'same',
+      generationReferences: [
+        {
+          label: '奔跑动作.mp4',
+          src: 'users/user-1/action.mp4',
+          objectKey: 'users/user-1/action.mp4',
+          sourceAssetId: 'asset-video-reference',
+          mediaType: 'video',
+          width: 1920,
+          height: 1080,
+        },
+      ],
+    });
+  });
+
+  it('does not restore a project resource id that is unavailable in the current canvas', () => {
+    const draft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        id: 'layer-animation-result',
+        sourceType: 'generated',
+        assetKind: 'character-animation',
+        generationInputs: {
+          version: 2,
+          action: 'character-animation.generate',
+          fields: [
+            { id: 'inputMode', title: '输入模式', value: 'image' },
+            { id: 'prompt', title: '动作描述', value: '循环待机' },
+            {
+              id: 'referenceSrc',
+              title: '参考素材',
+              value: 'users/user-1/hero.png',
+            },
+            {
+              id: 'referenceMediaType',
+              title: '参考类型',
+              value: 'image',
+            },
+          ],
+          references: [
+            {
+              id: 'source',
+              title: '角色图片',
+              label: '旧项目角色',
+              refType: 'project-resource',
+              refId: 'resource-from-another-project',
+            },
+          ],
+        },
+      }),
+      canvasSize: { width: 960, height: 720 },
+      viewport: { x: 0, y: 0, scale: 1 },
+      mode: 'redraw',
+      availableLayers: [],
+    });
+
+    expect(draft).toMatchObject({
+      mode: 'character-animation',
+      generationReferences: [
+        {
+          label: '旧项目角色',
+          src: 'users/user-1/hero.png',
+          objectKey: 'users/user-1/hero.png',
+          mediaType: 'image',
+        },
+      ],
+    });
+    expect(draft?.generationReferences?.[0]?.resourceId).toBeUndefined();
+  });
+
   it('inherits and normalizes quick edit model parameters from the source', () => {
     expect(
       createQuickEditPanelDraft(
@@ -1416,13 +1545,12 @@ describe('ImageCanvasGenerationDialogModel', () => {
       assetKind: 'character',
     });
 
-    expect(
-      createCharacterAnimationGenerationDialogDraft({
-        canvasSize,
-        viewport,
-        layer: characterLayer,
-      }),
-    ).toMatchObject({
+    const characterLayerDraft = createCharacterAnimationGenerationDialogDraft({
+      canvasSize,
+      viewport,
+      layer: characterLayer,
+    });
+    expect(characterLayerDraft).toMatchObject({
       mode: 'character-animation',
       sourceLayerId: 'layer-character',
       status: 'idle',
@@ -1432,14 +1560,21 @@ describe('ImageCanvasGenerationDialogModel', () => {
       characterAnimationFrameCount: 32,
       characterAnimationDurationSeconds: 4,
       placeholder: {
-        x: 270,
-        y: 150,
-        width: 420,
-        height: 420,
-        originalWidth: 1024,
-        originalHeight: 1024,
+        x: 240,
+        y: 180,
+        width: 480,
+        height: 360,
+        originalWidth: 480,
+        originalHeight: 360,
       },
     });
+    expect(
+      characterLayerDraft?.characterAnimationBackgroundColor,
+    ).toBeUndefined();
+    expect(
+      createCharacterAnimationGenerationDialogDraft({ canvasSize, viewport })
+        ?.characterAnimationBackgroundColor,
+    ).toBe('green');
     expect(
       createCharacterAnimationGenerationDialogDraft({
         canvasSize,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 9c2bcf69e..25384baa8 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -48,6 +48,7 @@ import {
   isNormalizedCanvasGenerationInputs,
   normalizeEditorImageModel,
   PUBLICATION_FRAME_ORIGINAL_SIZE,
+  resizeGenerationPlaceholderToCharacterAnimationSelection,
   resizeGenerationPlaceholderToImageSelection,
   resizeGenerationPlaceholderToVideoSelection,
   resolveDialogExtraImageReferenceLimit,
@@ -1264,31 +1265,104 @@ function createNormalizedGenerationDialogDraft({
   }
 
   if (inputs.action === 'character-animation.generate') {
-    const animationSource = resolveNormalizedReferences(
+    const canvasReferences = resolveNormalizedReferences(
       sourceLayer,
       'source',
       availableLayers,
-    )
-      .map((reference) =>
-        (availableLayers ?? []).find(
-          (layer) => createCanvasLayerReference(layer).id === reference.id,
-        ),
-      )
-      .find((layer): layer is CanvasLayer => Boolean(layer));
-    if (!animationSource) {
+    );
+    const inputMode = getNormalizedString(sourceLayer, 'inputMode', 'image');
+    const storedReferenceSrc = getNormalizedString(
+      sourceLayer,
+      'referenceSrc',
+    ).trim();
+    const storedReferenceMediaType = getNormalizedString(
+      sourceLayer,
+      'referenceMediaType',
+      inputMode === 'video' ? 'video' : 'image',
+    );
+    const storedReferenceInput = sourceLayer.generationInputs?.references.find(
+      (reference) => reference.id === 'source',
+    );
+    const storedReferenceWidth = getNormalizedNumber(
+      sourceLayer,
+      'referenceWidth',
+      0,
+    );
+    const storedReferenceHeight = getNormalizedNumber(
+      sourceLayer,
+      'referenceHeight',
+      0,
+    );
+    const restoredReference =
+      canvasReferences[0] ??
+      (storedReferenceSrc
+        ? {
+            id: `restored-character-animation-reference:${sourceLayer.id}`,
+            label:
+              storedReferenceInput?.label ??
+              (storedReferenceMediaType === 'video' ? '参考视频' : '角色图片'),
+            src: storedReferenceSrc,
+            objectKey: storedReferenceSrc,
+            ...(storedReferenceInput?.refType === 'asset'
+              ? { sourceAssetId: storedReferenceInput.refId }
+              : {}),
+            ...(storedReferenceWidth > 0
+              ? { width: storedReferenceWidth }
+              : {}),
+            ...(storedReferenceHeight > 0
+              ? { height: storedReferenceHeight }
+              : {}),
+            mediaType:
+              storedReferenceMediaType === 'video'
+                ? ('video' as const)
+                : ('image' as const),
+          }
+        : undefined);
+    const animationSource = restoredReference
+      ? (availableLayers ?? []).find(
+          (layer) =>
+            createCanvasLayerReference(layer).id === restoredReference.id,
+        )
+      : undefined;
+    if (inputMode !== 'text' && !restoredReference) {
       return null;
     }
     const draft = createCharacterAnimationGenerationDialogDraft({
       canvasSize,
       viewport,
-      layer: animationSource,
+      ...(animationSource?.assetKind === 'character'
+        ? { layer: animationSource }
+        : {}),
     });
+    // 帧数/时长必须匹配合法配对（32/4、40/5、48/6），否则 UI 会同时高亮
+    // 冲突的选项而提交被后端拒绝。这里按合法配对校验，损坏数据回退到默认 32/4。
+    const restoredFrameCount = getNormalizedNumber(sourceLayer, 'frameCount', 32);
+    const restoredDurationSeconds = getNormalizedNumber(
+      sourceLayer,
+      'durationSeconds',
+      4,
+    );
+    const durationPairValid = CHARACTER_ANIMATION_DURATION_OPTIONS.some(
+      (option) =>
+        option.frameCount === restoredFrameCount &&
+        option.durationSeconds === restoredDurationSeconds,
+    );
+    const pairedFrameCount = durationPairValid ? restoredFrameCount : 32;
+    const pairedDurationSeconds = durationPairValid
+      ? restoredDurationSeconds
+      : 4;
     return draft
       ? placeDraftBesideSourceLayer(
-          {
+          resizeGenerationPlaceholderToCharacterAnimationSelection({
             ...draft,
             prompt,
-            sourceLayerId: animationSource.id,
+            sourceLayerId: animationSource?.id,
+            generationReferences: restoredReference ? [restoredReference] : [],
+            characterAnimationBackgroundColor: (getNormalizedString(
+              sourceLayer,
+              'backgroundColor',
+            ).trim() ||
+              undefined) as GenerateDialogState['characterAnimationBackgroundColor'],
             characterAnimationResolution: getNormalizedString(
               sourceLayer,
               'resolution',
@@ -1297,19 +1371,11 @@ function createNormalizedGenerationDialogDraft({
             characterAnimationRatio: getNormalizedString(
               sourceLayer,
               'ratio',
-              'same',
+              animationSource ? 'same' : '1:1',
             ) as GenerateDialogState['characterAnimationRatio'],
-            characterAnimationFrameCount: getNormalizedNumber(
-              sourceLayer,
-              'frameCount',
-              32,
-            ) as GenerateDialogState['characterAnimationFrameCount'],
-            characterAnimationDurationSeconds: getNormalizedNumber(
-              sourceLayer,
-              'durationSeconds',
-              4,
-            ) as GenerateDialogState['characterAnimationDurationSeconds'],
-          },
+            characterAnimationFrameCount: pairedFrameCount as GenerateDialogState['characterAnimationFrameCount'],
+            characterAnimationDurationSeconds: pairedDurationSeconds as GenerateDialogState['characterAnimationDurationSeconds'],
+          }),
           sourceLayer,
         )
       : null;
@@ -2019,6 +2085,7 @@ export function createCharacterAnimationPanelDraft(
   }
   return {
     sourceLayerId: layer.id,
+    references: [createCanvasLayerReference(layer)],
     promptText: '',
     resolution: '480p',
     ratio: 'same',
@@ -2035,20 +2102,22 @@ export function createCharacterAnimationGenerationDialogDraft({
 }: {
   canvasSize: CanvasSize;
   viewport: CanvasViewport;
-  layer: CanvasLayer;
+  layer?: CanvasLayer;
 }): Omit<CanvasGenerationDialogState, 'id'> | null {
-  if (layer.assetKind !== 'character') {
+  if (layer && layer.assetKind !== 'character') {
     return null;
   }
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
-  return {
+  const draft: Omit<CanvasGenerationDialogState, 'id'> = {
     mode: 'character-animation',
-    sourceLayerId: layer.id,
+    ...(layer ? { sourceLayerId: layer.id } : {}),
+    generationReferences: layer ? [createCanvasLayerReference(layer)] : [],
     prompt: '',
     status: 'idle',
     composerOpen: true,
     characterAnimationResolution: '480p',
-    characterAnimationRatio: 'same',
+    characterAnimationRatio: layer ? 'same' : '1:1',
+    ...(layer ? {} : { characterAnimationBackgroundColor: 'green' as const }),
     characterAnimationFrameCount: 32,
     characterAnimationDurationSeconds: 4,
     placeholder: {
@@ -2060,6 +2129,7 @@ export function createCharacterAnimationGenerationDialogDraft({
       originalHeight: CHARACTER_ANIMATION_FRAME_ORIGINAL_SIZE.height,
     },
   };
+  return resizeGenerationPlaceholderToCharacterAnimationSelection(draft);
 }
 
 export function assignCharacterSpecReference(
@@ -2111,6 +2181,23 @@ export function appendGenerationReference(
   if (dialog?.mode === 'video' && !isSeedanceVideoModel(dialog.videoModel)) {
     return dialog;
   }
+  if (dialog?.mode === 'character-animation') {
+    const mediaType = getReferenceMediaType(layer);
+    if (
+      mediaType === 'audio' ||
+      (mediaType === 'image' &&
+        layer.assetKind !== 'character' &&
+        layer.assetKind !== 'character-animation')
+    ) {
+      return dialog;
+    }
+    return resizeGenerationPlaceholderToCharacterAnimationSelection({
+      ...resetFailedGenerationDialog(dialog),
+      sourceLayerId: layer.id,
+      generationReferences: [createCanvasLayerReference(layer)],
+      composerOpen: true,
+    });
+  }
   if (
     dialog?.mode === 'generate' ||
     dialog?.mode === 'scene' ||
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index c61121c36..a7e77c300 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -8,6 +8,7 @@ import type {
 import {
   applyEditorGenerationPricingConfig,
   BACKGROUND_MUSIC_MODEL_SUNO,
+  buildCharacterAnimationGenerationInputs,
   buildCharacterGenerationInputs,
   buildEditGenerationInputs,
   buildIconGenerationInputs,
@@ -52,6 +53,7 @@ import {
   isNormalizedCanvasGenerationInputs,
   isQuickEditUnsupportedAssetKind,
   resolveCharacterAnimationSourceImageSrc,
+  resolveEditorCharacterAnimationFramePixelSize,
   resolveEditorImageGenerationPixelSize,
   resolveImageGenerationErrorMessage,
   VIDEO_MODEL_KLING_3,
@@ -62,6 +64,59 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasGenerationModel', () => {
+  it('resolves character animation pixel and display sizes from ratio and resolution', () => {
+    expect(
+      resolveEditorCharacterAnimationFramePixelSize({
+        ratio: '16:9',
+        resolution: '480p',
+      }),
+    ).toEqual({ width: 480, height: 270 });
+    expect(
+      resolveEditorCharacterAnimationFramePixelSize({
+        ratio: '16:9',
+        resolution: '720p',
+      }),
+    ).toEqual({ width: 720, height: 405 });
+    const sameRatioSize = resolveEditorCharacterAnimationFramePixelSize({
+      ratio: 'same',
+      resolution: '720p',
+      referenceWidth: 768,
+      referenceHeight: 1024,
+    });
+    expect(sameRatioSize).toEqual({ width: 540, height: 720 });
+  });
+
+  it('persists character animation reference dimensions for same-ratio redraws', () => {
+    const inputs = buildCharacterAnimationGenerationInputs(
+      '原地待机',
+      null,
+      {
+        id: 'uploaded-character',
+        label: '竖版角色.png',
+        src: '/uploads/character.png',
+        mediaType: 'image',
+        width: 768,
+        height: 1024,
+      },
+      {
+        referenceSrc: 'users/user-1/character.png',
+        referenceMediaType: 'image',
+        ratio: 'same',
+      },
+    );
+
+    expect(inputs.fields).toEqual(
+      expect.arrayContaining([
+        { id: 'referenceWidth', title: '参考宽度', value: 768 },
+        { id: 'referenceHeight', title: '参考高度', value: 1024 },
+        { id: 'ratio', title: '比例', value: 'same' },
+      ]),
+    );
+    expect(
+      inputs.fields.find((field) => field.id === 'backgroundColor'),
+    ).toBeUndefined();
+  });
+
   afterEach(() => {
     applyEditorGenerationPricingConfig({
       models: EDITOR_MODEL_MUD_POINT_CONFIG,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index a6111181f..6480ede9a 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -60,12 +60,12 @@ export const SPEC_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
 export const CHARACTER_FRAME_ORIGINAL_SIZE = { width: 2048, height: 2048 };
 export const CHARACTER_FRAME_DISPLAY_SIZE = { width: 420, height: 420 };
 export const CHARACTER_ANIMATION_FRAME_ORIGINAL_SIZE = {
-  width: 1024,
-  height: 1024,
+  width: 480,
+  height: 480,
 };
 export const CHARACTER_ANIMATION_FRAME_DISPLAY_SIZE = {
-  width: 420,
-  height: 420,
+  width: 480,
+  height: 480,
 };
 export const ICON_FRAME_ORIGINAL_SIZE = { width: 512, height: 512 };
 export const ICON_FRAME_DISPLAY_SIZE = { width: 360, height: 360 };
@@ -323,6 +323,80 @@ export function resizeGenerationPlaceholderToVideoSelection(
     },
   };
 }
+
+export function resolveEditorCharacterAnimationFramePixelSize({
+  ratio,
+  resolution,
+  referenceWidth,
+  referenceHeight,
+}: {
+  ratio: EditorCharacterAnimationRatio | null | undefined;
+  resolution: EditorCharacterAnimationResolution | null | undefined;
+  referenceWidth?: number | null;
+  referenceHeight?: number | null;
+}): EditorImageFrameSize {
+  const hasReferenceSize =
+    typeof referenceWidth === 'number' &&
+    Number.isFinite(referenceWidth) &&
+    referenceWidth > 0 &&
+    typeof referenceHeight === 'number' &&
+    Number.isFinite(referenceHeight) &&
+    referenceHeight > 0;
+  const resolvedRatio =
+    ratio === 'same' && hasReferenceSize
+      ? `${referenceWidth}:${referenceHeight}`
+      : ratio === 'same'
+        ? '1:1'
+        : ratio;
+  const ratioNumbers = resolveAspectRatioNumbers(resolvedRatio ?? '1:1');
+  const longEdge = resolution === '720p' ? 720 : 480;
+  if (ratioNumbers.width >= ratioNumbers.height) {
+    return {
+      width: longEdge,
+      height: Math.max(
+        1,
+        Math.round((longEdge * ratioNumbers.height) / ratioNumbers.width),
+      ),
+    };
+  }
+  return {
+    width: Math.max(
+      1,
+      Math.round((longEdge * ratioNumbers.width) / ratioNumbers.height),
+    ),
+    height: longEdge,
+  };
+}
+
+export function resizeGenerationPlaceholderToCharacterAnimationSelection<
+  T extends GenerateDialogState,
+>(dialog: T): T {
+  if (dialog.mode !== 'character-animation' || !dialog.placeholder) {
+    return dialog;
+  }
+  const reference = dialog.generationReferences?.[0];
+  const pixelSize = resolveEditorCharacterAnimationFramePixelSize({
+    ratio: dialog.characterAnimationRatio,
+    resolution: dialog.characterAnimationResolution,
+    referenceWidth: reference?.width,
+    referenceHeight: reference?.height,
+  });
+  const centerX = dialog.placeholder.x + dialog.placeholder.width / 2;
+  const centerY = dialog.placeholder.y + dialog.placeholder.height / 2;
+  return {
+    ...dialog,
+    placeholder: {
+      ...dialog.placeholder,
+      x: centerX - pixelSize.width / 2,
+      y: centerY - pixelSize.height / 2,
+      width: pixelSize.width,
+      height: pixelSize.height,
+      originalWidth: pixelSize.width,
+      originalHeight: pixelSize.height,
+    },
+  } as T;
+}
+
 export const VIDEO_MODEL_SEEDANCE_2 = 'seedance2.0';
 export const VIDEO_MODEL_SEEDANCE_2_FAST = 'seedance2.0-fast';
 export const VIDEO_MODEL_KLING_3 = 'kling3.0';
@@ -512,14 +586,47 @@ export function countDialogExtraImageReferences(dialog: GenerateDialogState) {
 }
 
 export const CHARACTER_ANIMATION_ACTION_PROMPTS = [
-  { label: '待机', text: '待机动作，轻微呼吸起伏。' },
   { label: '行走', text: '循环行走动作，步伐稳定。' },
+  { label: '待机', text: '待机动作，轻微呼吸起伏。' },
   { label: '奔跑', text: '循环奔跑动作，动作清晰有力。' },
   { label: '跳跃', text: '起跳、滞空、落地动作。' },
   { label: '攻击', text: '攻击动作，前摇、出手、收招清晰。' },
   { label: '受击', text: '受击后短暂后仰并恢复站姿。' },
   { label: '倒下', text: '倒下动作，重心下落自然。' },
 ] as const;
+export const CHARACTER_ANIMATION_MORE_ACTION_PROMPTS = [
+  '冲刺',
+  '飞行',
+  '悬浮',
+  '爬行',
+  '劈砍',
+  '突刺',
+  '砸击',
+  '拳击',
+  '踢击',
+  '射击',
+  '施法',
+  '格挡',
+  '闪避',
+  '招架',
+  '举盾',
+  '蹲下',
+  '呼吸',
+  '眨眼',
+  '环顾',
+  '伸展',
+  '速度线',
+  '运动模糊',
+  '命中帧',
+  '冲击波',
+  '粒子爆发',
+] as const;
+export const CHARACTER_ANIMATION_BACKGROUND_OPTIONS = [
+  { label: '白色', value: 'white', hex: '#FFFFFF' },
+  { label: '绿色', value: 'green', hex: '#00FF00' },
+  { label: '蓝色', value: 'blue', hex: '#0000FF' },
+  { label: '紫色', value: 'purple', hex: '#8000FF' },
+] as const;
 export const CHARACTER_ANIMATION_RATIO_OPTIONS: Array<{
   label: string;
   value: EditorCharacterAnimationRatio;
@@ -536,6 +643,10 @@ export const CHARACTER_ANIMATION_DURATION_OPTIONS = [
   { label: '40帧·5秒', frameCount: 40, durationSeconds: 5 },
   { label: '48帧·6秒', frameCount: 48, durationSeconds: 6 },
 ] as const;
+// 序列帧清晰度唯一来源。模型 seedance2.0-fast 不支持 1080p（与视频编辑器对该
+// 模型的 1080p 禁用一致），因此这里只有 480p/720p。新增档位需同时改
+// resolveEditorCharacterAnimationFramePixelSize 的 longEdge 与后端 normalize 校验。
+export const CHARACTER_ANIMATION_RESOLUTION_OPTIONS = ['480p', '720p'] as const;
 export const VIDEO_FRAME_ORIGINAL_SIZE = { width: 854, height: 480 };
 export const VIDEO_FRAME_DISPLAY_SIZE = { width: 854, height: 480 };
 export const AUDIO_FRAME_ORIGINAL_SIZE = { width: 420, height: 120 };
@@ -710,7 +821,9 @@ export function buildQuickEditModelOptions(currentModel: string) {
 }
 
 export function isQuickEditUnsupportedAssetKind(layer: CanvasLayer) {
-  return layer.assetKind === 'icon';
+  return (
+    layer.assetKind === 'icon' || layer.assetKind === 'character-animation'
+  );
 }
 
 export function buildCharacterSpecPrompt(values: SpecFormValues) {
@@ -750,7 +863,7 @@ export function getLayerKindLabel(layer: CanvasLayer) {
     return '角色';
   }
   if (layer.assetKind === 'character-animation') {
-    return '动作';
+    return 'Spine序列帧动画';
   }
   if (layer.assetKind === 'icon') {
     return '图标';
@@ -790,19 +903,78 @@ export function getLayerKindLabel(layer: CanvasLayer) {
 
 export function buildCharacterAnimationGenerationInputs(
   promptText: string,
-  sourceLayer: CanvasLayer,
+  sourceLayer: CanvasLayer | null,
+  reference: CharacterReferenceImage | null,
   options: {
     resolution?: string;
     ratio?: string;
     frameCount?: number;
     durationSeconds?: number;
+    backgroundColor?: string;
+    referenceSrc?: string;
+    referenceMediaType?: 'image' | 'video';
   } = {},
 ): CanvasGenerationInputs {
+  const inputMode =
+    reference?.mediaType === 'video'
+      ? 'video'
+      : reference || sourceLayer
+        ? 'image'
+        : 'text';
+  const referenceWidth =
+    typeof reference?.width === 'number' &&
+    Number.isFinite(reference.width) &&
+    reference.width > 0
+      ? Math.round(reference.width)
+      : sourceLayer?.originalWidth;
+  const referenceHeight =
+    typeof reference?.height === 'number' &&
+    Number.isFinite(reference.height) &&
+    reference.height > 0
+      ? Math.round(reference.height)
+      : sourceLayer?.originalHeight;
   return {
     version: 2,
     action: 'character-animation.generate',
     fields: [
+      ...createGenerationInputField('输入模式', inputMode, 'inputMode'),
+      ...(options.referenceSrc
+        ? createGenerationInputField(
+            '参考素材',
+            options.referenceSrc,
+            'referenceSrc',
+          )
+        : []),
+      ...(options.referenceSrc
+        ? createGenerationInputField(
+            '参考类型',
+            options.referenceMediaType ??
+              (inputMode === 'video' ? 'video' : 'image'),
+            'referenceMediaType',
+          )
+        : []),
+      ...(options.referenceSrc && referenceWidth
+        ? createGenerationInputField(
+            '参考宽度',
+            referenceWidth,
+            'referenceWidth',
+          )
+        : []),
+      ...(options.referenceSrc && referenceHeight
+        ? createGenerationInputField(
+            '参考高度',
+            referenceHeight,
+            'referenceHeight',
+          )
+        : []),
       ...createGenerationInputField('动作描述', promptText, 'prompt'),
+      ...(options.backgroundColor
+        ? createGenerationInputField(
+            '背景颜色',
+            options.backgroundColor,
+            'backgroundColor',
+          )
+        : []),
       ...createGenerationInputField(
         '清晰度',
         options.resolution ?? '480p',
@@ -820,12 +992,43 @@ export function buildCharacterAnimationGenerationInputs(
         'durationSeconds',
       ),
     ],
-    references: createLayerGenerationInputReference('角色图片', sourceLayer, {
-      id: 'source',
-    }),
+    references: sourceLayer
+      ? createLayerGenerationInputReference(
+          reference?.mediaType === 'video' ? '参考视频' : '角色图片',
+          sourceLayer,
+          { id: 'source' },
+        )
+      : reference
+        ? createGenerationInputReference(
+            reference.mediaType === 'video' ? '参考视频' : '角色图片',
+            reference,
+            { id: 'source' },
+          )
+        : [],
   };
 }
 
+export function canSplitCharacterAnimationFrames(layer: CanvasLayer) {
+  const resourceId = resolveRegisteredProjectResourceId(layer.resourceId);
+  return (
+    layer.assetKind === 'character-animation' &&
+    resourceId !== undefined &&
+    (layer.resourcePersistenceState === undefined ||
+      layer.resourcePersistenceState === 'registered')
+  );
+}
+
+export function resolveRegisteredProjectResourceId(
+  value: string | null | undefined,
+) {
+  const resourceId = value?.trim();
+  return resourceId &&
+    !resourceId.startsWith('local-') &&
+    !resourceId.startsWith('generation-dialog:')
+    ? resourceId
+    : undefined;
+}
+
 export function formatLayerImageType(layer: CanvasLayer) {
   if (layer.assetKind === 'spec') {
     return '规范图片';
@@ -834,7 +1037,7 @@ export function formatLayerImageType(layer: CanvasLayer) {
     return '角色图片';
   }
   if (layer.assetKind === 'character-animation') {
-    return '角色动作序列帧';
+    return 'Spine序列帧动画';
   }
   if (layer.assetKind === 'icon') {
     return '图标素材图片';
@@ -1075,6 +1278,8 @@ export function createCanvasLayerReference(
     assetObjectId: layer.assetObjectId ?? undefined,
     resourceId: layer.resourceId,
     sourceAssetId: layer.sourceAssetId ?? undefined,
+    width: layer.originalWidth,
+    height: layer.originalHeight,
   };
 }
 
@@ -1088,12 +1293,8 @@ export function createGenerationInputReference(
     id?: string;
   } = {},
 ): CanvasGenerationInputReference[] {
-  const resourceId = reference.resourceId?.trim();
-  if (
-    resourceId &&
-    !resourceId.startsWith('local-') &&
-    !resourceId.startsWith('generation-dialog:')
-  ) {
+  const resourceId = resolveRegisteredProjectResourceId(reference.resourceId);
+  if (resourceId) {
     return [
       {
         ...(options.id ? { id: options.id } : {}),
@@ -1533,7 +1734,30 @@ export function decodeCanvasGenerationInputs(
   } else if (action === 'audio.background-music.generate') {
     normalizeStringField('prompt', 'gpt_description_prompt');
   } else if (action === 'character-animation.generate') {
+    const inputMode = normalizeStringOption(
+      'inputMode',
+      '输入模式',
+      ['text', 'image', 'video'],
+      'image',
+    );
     normalizeStringField('prompt', '动作描述');
+    const referenceSrc = normalizeStringField('referenceSrc', '参考素材');
+    if (referenceSrc || inputMode !== 'text') {
+      normalizeStringOption(
+        'referenceMediaType',
+        '参考类型',
+        ['image', 'video'],
+        inputMode === 'video' ? 'video' : 'image',
+      );
+    }
+    if (findFieldIndex('backgroundColor') >= 0) {
+      normalizeStringOption(
+        'backgroundColor',
+        '背景颜色',
+        CHARACTER_ANIMATION_BACKGROUND_OPTIONS.map((option) => option.value),
+        'green',
+      );
+    }
     normalizeStringOption('resolution', '清晰度', ['480p', '720p'], '480p');
     normalizeStringOption(
       'ratio',
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index 92146e35f..8e9c9e244 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -1091,12 +1091,14 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
       promptText: '循环奔跑动作',
       resultTitle: '勇者奔跑',
       input: {
+        inputMode: 'image',
         sourceLayerId: 'character-layer',
         sourceImageSrc: 'generated/character.png',
         sourceWidth: 960,
         sourceHeight: 1280,
+        referenceMediaType: 'image',
+        referenceSrc: 'generated/character.png',
         promptText: '循环奔跑动作',
-        screenColor: 'auto',
         resolution: '720p',
         ratio: 'same',
         frameCount: 48,
@@ -1107,6 +1109,96 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
     });
   });
 
+  it('keeps uploaded reference dimensions for same-ratio animation requests', () => {
+    const plan = buildCharacterAnimationSubmissionPlan({
+      panel: {
+        promptText: '保持角色比例待机',
+        backgroundColor: 'blue',
+        resolution: '480p',
+        ratio: 'same',
+        frameCount: 32,
+        durationSeconds: 4,
+        status: 'idle',
+      },
+      sourceLayer: null,
+      reference: {
+        id: 'uploaded-character',
+        label: '竖版角色.png',
+        src: '/uploads/character.png',
+        objectKey: 'users/user-1/character.png',
+        mediaType: 'image',
+        width: 768,
+        height: 1024,
+      },
+    });
+
+    expect(plan.input).toMatchObject({
+      inputMode: 'image',
+      sourceWidth: 768,
+      sourceHeight: 1024,
+      ratio: 'same',
+      backgroundColor: 'blue',
+    });
+  });
+
+  it('builds text and video character animation plans', () => {
+    expect(
+      buildCharacterAnimationSubmissionPlan({
+        panel: {
+          promptText: '原地挥手',
+          backgroundColor: 'purple',
+          resolution: '480p',
+          ratio: '1:1',
+          frameCount: 32,
+          durationSeconds: 4,
+          status: 'idle',
+        },
+        sourceLayer: null,
+      }),
+    ).toMatchObject({
+      input: {
+        inputMode: 'text',
+        promptText: '原地挥手',
+        backgroundColor: 'purple',
+      },
+    });
+
+    expect(
+      buildCharacterAnimationSubmissionPlan({
+        panel: {
+          references: [],
+          promptText: '参考视频中的奔跑节奏',
+          backgroundColor: 'green',
+          resolution: '720p',
+          ratio: '16:9',
+          frameCount: 40,
+          durationSeconds: 5,
+          status: 'idle',
+        },
+        sourceLayer: null,
+        reference: {
+          id: 'video-reference',
+          label: '动作参考.mp4',
+          src: '/uploads/action.mp4',
+          objectKey: 'users/user-1/action.mp4',
+          mediaType: 'video',
+          width: 1920,
+          height: 1080,
+        },
+      }),
+    ).toMatchObject({
+      input: {
+        inputMode: 'video',
+        referenceMediaType: 'video',
+        referenceSrc: 'users/user-1/action.mp4',
+        sourceWidth: 1920,
+        sourceHeight: 1080,
+        promptText: '参考视频中的奔跑节奏',
+        backgroundColor: 'green',
+      },
+    });
+  });
+
   it('builds seedance video plans with multimodal references', () => {
     const plan = buildImageGenerationSubmissionPlan({
       dialog: {
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 82b84b6b8..049baa77f 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -20,6 +20,7 @@ import type {
   CanvasGenerationInputs,
   CanvasLayer,
   CharacterAnimationPanelState,
+  CharacterReferenceImage,
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
 import {
@@ -1146,23 +1147,65 @@ export function buildIconSpritesheetGenerationSubmissionPlan(
 export function buildCharacterAnimationSubmissionPlan({
   panel,
   sourceLayer,
+  reference = null,
 }: {
   panel: CharacterAnimationPanelState;
-  sourceLayer: CanvasLayer;
+  sourceLayer: CanvasLayer | null;
+  reference?: CharacterReferenceImage | null;
 }): CharacterAnimationSubmissionPlan {
   const promptText = panel.promptText.trim();
   const resultTitle = resolveGenerationAssetLabel(panel.assetLabel, '角色动作');
+  if (!promptText) {
+    throw new Error('动画描述不能为空。');
+  }
+  const inputMode =
+    reference?.mediaType === 'video'
+      ? ('video' as const)
+      : reference || sourceLayer
+        ? ('image' as const)
+        : ('text' as const);
+  const referenceSrc = reference
+    ? reference.objectKey?.trim() || reference.src
+    : sourceLayer
+      ? resolveCharacterAnimationSourceImageSrc(sourceLayer)
+      : undefined;
+  const referenceWidth =
+    typeof reference?.width === 'number' &&
+    Number.isFinite(reference.width) &&
+    reference.width > 0
+      ? Math.round(reference.width)
+      : sourceLayer?.originalWidth;
+  const referenceHeight =
+    typeof reference?.height === 'number' &&
+    Number.isFinite(reference.height) &&
+    reference.height > 0
+      ? Math.round(reference.height)
+      : sourceLayer?.originalHeight;
   return {
     promptText,
     resultTitle,
     input: {
-      sourceLayerId: sourceLayer.id,
-      sourceImageSrc: resolveCharacterAnimationSourceImageSrc(sourceLayer),
-      sourceWidth: sourceLayer.originalWidth,
-      sourceHeight: sourceLayer.originalHeight,
+      inputMode,
+      ...(sourceLayer ? { sourceLayerId: sourceLayer.id } : {}),
+      ...(inputMode === 'image' && referenceSrc
+        ? { sourceImageSrc: referenceSrc }
+        : {}),
+      ...(referenceWidth && referenceHeight
+        ? {
+            sourceWidth: referenceWidth,
+            sourceHeight: referenceHeight,
+          }
+        : {}),
+      ...(referenceSrc
+        ? {
+            referenceMediaType: inputMode === 'video' ? 'video' : 'image',
+            referenceSrc,
+          }
+        : {}),
       promptText,
-      // 与生图入口一致：默认 auto，由后端做背景色自动决策。
-      screenColor: DEFAULT_EDITOR_GENERATION_BACKGROUND_COLOR,
+      ...(panel.backgroundColor
+        ? { backgroundColor: panel.backgroundColor }
+        : {}),
       resolution: panel.resolution,
       ratio: panel.ratio,
       frameCount: panel.frameCount,
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index 3172f3999..35f08ecec 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -53,8 +53,10 @@ function renderSelectedToolbar(
     isPerfectPixelProcessing: false,
     isPerfectPixelPendingConfirmation: false,
     isSplittingIconSpritesheet: false,
+    isSplittingCharacterAnimation: false,
     isPersistingAssetKind: false,
     onSplitIconSpritesheet: vi.fn(),
+    onSplitCharacterAnimation: vi.fn(),
     onExtractUiDesignAssets: vi.fn(),
     onOpenCharacterAnimationPanel: vi.fn(),
     onDownloadLayer: vi.fn(),
@@ -344,7 +346,7 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
   });
 
   it('hides redraw for non-generative derived and public display-only layers', () => {
-    renderSelectedToolbar({
+    const props = renderSelectedToolbar({
       selectedLayer: createLayer({
         title: '手动裁扩结果',
         generationInputs: null,
@@ -447,7 +449,7 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     ).toEqual(['快速编辑', '改造', '下载按钮']);
 
     cleanup();
-    renderSelectedToolbar({
+    const props = renderSelectedToolbar({
       selectedLayer: createLayer({
         title: '角色动作',
         src: '/generated/action/frame-01.png',
@@ -476,7 +478,28 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
       within(actionToolbar)
         .getAllByRole('button')
         .map((button) => button.getAttribute('aria-label')),
-    ).toEqual(['快速编辑', '改造', '下载按钮']);
+    ).toEqual(['拆帧', '改造', '下载按钮']);
+    fireEvent.click(within(actionToolbar).getByRole('button', { name: '拆帧' }));
+    expect(props.onSplitCharacterAnimation).toHaveBeenCalledWith(
+      expect.objectContaining({ assetKind: 'character-animation' }),
+    );
+  });
+
+  it('disables frame splitting while a character animation resource is pending registration', () => {
+    const props = renderSelectedToolbar({
+      selectedLayer: createLayer({
+        resourceId: 'resource-character-animation-pending',
+        resourcePersistenceState: 'pending',
+        mediaType: 'image-sequence',
+        assetKind: 'character-animation',
+      }),
+    });
+
+    const splitButton = screen.getByRole('button', { name: '资源保存中' });
+    expect((splitButton as HTMLButtonElement).disabled).toBe(true);
+    expect(splitButton.getAttribute('aria-busy')).toBe('true');
+    fireEvent.click(splitButton);
+    expect(props.onSplitCharacterAnimation).not.toHaveBeenCalled();
   });
 
   it('keeps redraw visible for supported actions with a missing non-replaceable source', () => {
@@ -594,8 +617,10 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         isPerfectPixelProcessing={false}
         isPerfectPixelPendingConfirmation={false}
         isSplittingIconSpritesheet={false}
+        isSplittingCharacterAnimation={false}
         isPersistingAssetKind={false}
         onSplitIconSpritesheet={vi.fn()}
+        onSplitCharacterAnimation={vi.fn()}
         onExtractUiDesignAssets={vi.fn()}
         onOpenCharacterAnimationPanel={vi.fn()}
         onDownloadLayer={vi.fn()}
@@ -616,8 +641,10 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         isPerfectPixelProcessing={false}
         isPerfectPixelPendingConfirmation={false}
         isSplittingIconSpritesheet={false}
+        isSplittingCharacterAnimation={false}
         isPersistingAssetKind={false}
         onSplitIconSpritesheet={vi.fn()}
+        onSplitCharacterAnimation={vi.fn()}
         onExtractUiDesignAssets={vi.fn()}
         onOpenCharacterAnimationPanel={vi.fn()}
         onDownloadLayer={vi.fn()}
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index 328a96ba3..63bde75c4 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -16,6 +16,7 @@ import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import {
   canOpenRedrawPanel,
+  canSplitCharacterAnimationFrames,
   isQuickEditUnsupportedAssetKind,
 } from './ImageCanvasGenerationModel';
 
@@ -30,8 +31,10 @@ type ImageCanvasSelectedLayerToolbarViewProps = {
   isPerfectPixelProcessing: boolean;
   isPerfectPixelPendingConfirmation: boolean;
   isSplittingIconSpritesheet: boolean;
+  isSplittingCharacterAnimation: boolean;
   isPersistingAssetKind: boolean;
   onSplitIconSpritesheet: (layer: CanvasLayer) => void;
+  onSplitCharacterAnimation: (layer: CanvasLayer) => void;
   onExtractUiDesignAssets: (layer: CanvasLayer) => void;
   onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
   onDownloadLayer: (layer: CanvasLayer) => void;
@@ -48,8 +51,10 @@ export function ImageCanvasSelectedLayerToolbarView({
   isPerfectPixelProcessing,
   isPerfectPixelPendingConfirmation,
   isSplittingIconSpritesheet,
+  isSplittingCharacterAnimation,
   isPersistingAssetKind,
   onSplitIconSpritesheet,
+  onSplitCharacterAnimation,
   onExtractUiDesignAssets,
   onOpenCharacterAnimationPanel,
   onDownloadLayer,
@@ -58,6 +63,14 @@ export function ImageCanvasSelectedLayerToolbarView({
     return null;
   }
   const canRedraw = canOpenRedrawPanel(selectedLayer);
+  const isCharacterAnimationResourcePending =
+    selectedLayer.assetKind === 'character-animation' &&
+    !canSplitCharacterAnimationFrames(selectedLayer);
+  const characterAnimationSplitLabel = isCharacterAnimationResourcePending
+    ? '资源保存中'
+    : isSplittingCharacterAnimation
+      ? '拆帧中'
+      : '拆帧';
 
   if (selectedLayer.mediaType === 'audio') {
     return (
@@ -234,6 +247,30 @@ export function ImageCanvasSelectedLayerToolbarView({
           <span>提取素材</span>
         </PlatformIconButton>
       ) : null}
+      {selectedLayer.assetKind === 'character-animation' ? (
+        <PlatformIconButton
+          className="image-canvas-editor__floating-toolbar-text-button"
+          label={characterAnimationSplitLabel}
+          title={characterAnimationSplitLabel}
+          icon={
+            isCharacterAnimationResourcePending ||
+            isSplittingCharacterAnimation ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Scissors className="h-4 w-4" />
+            )
+          }
+          disabled={
+            isCharacterAnimationResourcePending || isSplittingCharacterAnimation
+          }
+          aria-busy={
+            isCharacterAnimationResourcePending || isSplittingCharacterAnimation
+          }
+          onClick={() => onSplitCharacterAnimation(selectedLayer)}
+        >
+          <span>{characterAnimationSplitLabel}</span>
+        </PlatformIconButton>
+      ) : null}
       {selectedLayer.assetKind === 'character' ? (
         <PlatformIconButton
           className="image-canvas-editor__floating-toolbar-text-button"
diff --git a/src/components/image-editor/ImageCanvasSequenceAnimationIcon.tsx b/src/components/image-editor/ImageCanvasSequenceAnimationIcon.tsx
new file mode 100644
index 000000000..4d74748e6
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasSequenceAnimationIcon.tsx
@@ -0,0 +1,34 @@
+type ImageCanvasSequenceAnimationIconProps = {
+  className?: string;
+};
+
+export function ImageCanvasSequenceAnimationIcon({
+  className,
+}: ImageCanvasSequenceAnimationIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={[
+        className,
+        'image-canvas-editor__sequence-animation-icon',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.65"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="2.75" y="3.25" width="18.5" height="17.5" rx="2.5" />
+      <path d="M2.75 15.25H21.25" />
+      <path d="M7.25 15.25V20.75M12 15.25V20.75M16.75 15.25V20.75" />
+      <path
+        className="image-canvas-editor__sequence-animation-icon-play"
+        d="M9.25 7.15L15 10.15L9.25 13.15V7.15Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 544845781..033a77339 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -80,6 +80,7 @@ export type ImageCanvasStageViewProps = {
   generationComposerStyle: CSSProperties | null;
   selectedToolbarStyle: CSSProperties | null;
   splittingIconSpritesheetLayerIds?: ReadonlySet<string>;
+  splittingCharacterAnimationLayerIds?: ReadonlySet<string>;
   perfectPixelLayerIds?: ReadonlySet<string>;
   pendingPerfectPixelLayerIds?: ReadonlySet<string>;
   persistingAssetKindLayerIds?: ReadonlySet<string>;
@@ -155,6 +156,7 @@ export type ImageCanvasStageViewProps = {
   onRemoveBackground: (layer: CanvasLayer) => void;
   onPerfectPixel: (layer: CanvasLayer) => void;
   onSplitIconSpritesheet: (layer: CanvasLayer) => void;
+  onSplitCharacterAnimation: (layer: CanvasLayer) => void;
   onExtractUiDesignAssets: (layer: CanvasLayer) => void;
   onUiAssetExtractionToolChange: (tool: UiAssetExtractionTool | null) => void;
   onUiAssetExtractionModelChange: (model: string) => void;
@@ -242,6 +244,7 @@ export function ImageCanvasStageView({
   generationComposerStyle,
   selectedToolbarStyle,
   splittingIconSpritesheetLayerIds = EMPTY_LAYER_ID_SET,
+  splittingCharacterAnimationLayerIds = EMPTY_LAYER_ID_SET,
   perfectPixelLayerIds = EMPTY_LAYER_ID_SET,
   pendingPerfectPixelLayerIds = EMPTY_LAYER_ID_SET,
   persistingAssetKindLayerIds = EMPTY_LAYER_ID_SET,
@@ -296,6 +299,7 @@ export function ImageCanvasStageView({
   onRemoveBackground,
   onPerfectPixel,
   onSplitIconSpritesheet,
+  onSplitCharacterAnimation,
   onExtractUiDesignAssets,
   onUiAssetExtractionToolChange,
   onUiAssetExtractionModelChange,
@@ -416,6 +420,10 @@ export function ImageCanvasStageView({
           selectedLayer &&
             splittingIconSpritesheetLayerIds.has(selectedLayer.id),
         )}
+        isSplittingCharacterAnimation={Boolean(
+          selectedLayer &&
+            splittingCharacterAnimationLayerIds.has(selectedLayer.id),
+        )}
         isPersistingAssetKind={Boolean(
           selectedLayer && persistingAssetKindLayerIds.has(selectedLayer.id),
         )}
@@ -431,6 +439,7 @@ export function ImageCanvasStageView({
         onRemoveBackground={onRemoveBackground}
         onPerfectPixel={onPerfectPixel}
         onSplitIconSpritesheet={onSplitIconSpritesheet}
+        onSplitCharacterAnimation={onSplitCharacterAnimation}
         onExtractUiDesignAssets={onExtractUiDesignAssets}
         onOpenCharacterAnimationPanel={onOpenCharacterAnimationPanel}
         onDownloadLayer={onDownloadLayer}
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index d63aee82c..19448362d 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -482,6 +482,48 @@ describe('ImageCanvasUploadModel', () => {
     });
   });
 
+  it('resizes a same-ratio character animation placeholder for an uploaded reference', () => {
+    const dialog = createDialog({
+      mode: 'character-animation',
+      characterAnimationRatio: 'same',
+      characterAnimationResolution: '720p',
+      placeholder: {
+        x: 100,
+        y: 80,
+        width: 420,
+        height: 420,
+        originalWidth: 480,
+        originalHeight: 480,
+      },
+    });
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog,
+        target: 'video-reference-image',
+        references: [
+          {
+            id: 'uploaded-wide-character',
+            label: '横版角色',
+            src: 'users/user-1/wide-character.png',
+            width: 1600,
+            height: 900,
+          },
+        ],
+      }),
+    ).toMatchObject({
+      generationReferences: [{ id: 'uploaded-wide-character' }],
+      placeholder: {
+        x: -50,
+        y: 87.5,
+        width: 720,
+        height: 405,
+        originalWidth: 720,
+        originalHeight: 405,
+      },
+    });
+  });
+
   it('appends all uploaded scene references', () => {
     const firstReference = {
       id: 'scene-ref-first',
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 02077fd62..3c217f643 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -14,6 +14,7 @@ import type {
 import {
   appendLimitedImageReferences,
   QUICK_EDIT_REFERENCE_LIMIT,
+  resizeGenerationPlaceholderToCharacterAnimationSelection,
   resolveDialogExtraImageReferenceLimit,
   resolveExtraImageReferenceLimit,
 } from './ImageCanvasGenerationModel';
@@ -109,6 +110,8 @@ export function createUploadedGenerationReference({
   mimeType,
   sizeBytes,
   durationSeconds,
+  width,
+  height,
   objectKey,
   assetObjectId,
   resourceId,
@@ -123,6 +126,8 @@ export function createUploadedGenerationReference({
   mimeType?: string;
   sizeBytes?: number;
   durationSeconds?: number;
+  width?: number;
+  height?: number;
   objectKey?: string | null;
   assetObjectId?: string | null;
   resourceId?: string | null;
@@ -139,6 +144,8 @@ export function createUploadedGenerationReference({
     mimeType,
     sizeBytes,
     durationSeconds,
+    width,
+    height,
     objectKey,
     assetObjectId,
     resourceId,
@@ -254,16 +261,25 @@ export function applyGenerationReferenceUpload({
         : target === 'video-reference-audio'
           ? 'audio'
           : 'image';
-    return dialog?.mode === 'video'
-      ? {
-          ...setFailedGenerationIdle(dialog),
-          generationReferences: appendLimitedVideoReferences(
-            dialog.generationReferences ?? [],
-            references,
-            mediaType,
-          ),
-          composerOpen: true,
-        }
+    return dialog?.mode === 'video' ||
+      (dialog?.mode === 'character-animation' && mediaType !== 'audio')
+      ? dialog.mode === 'character-animation'
+        ? resizeGenerationPlaceholderToCharacterAnimationSelection({
+            ...setFailedGenerationIdle(dialog),
+            sourceLayerId: undefined,
+            generationReferences: [firstReference],
+            composerOpen: true,
+          })
+        : {
+            ...setFailedGenerationIdle(dialog),
+            sourceLayerId: dialog.sourceLayerId,
+            generationReferences: appendLimitedVideoReferences(
+              dialog.generationReferences ?? [],
+              references,
+              mediaType,
+            ),
+            composerOpen: true,
+          }
       : dialog;
   }
   return dialog?.mode === 'character'
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index f97d0fb68..48eb4e353 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -503,7 +503,7 @@ describe('ImageCanvasWorldView', () => {
       mode: 'character-animation',
       ariaLabel: '角色动作生成占位图',
       generatorLabel: 'Action Generator',
-      badgeLabel: '动作',
+      badgeLabel: 'Spine序列帧动画',
       frameClassName:
         'image-canvas-editor__generation-frame--character-animation',
     },
@@ -588,6 +588,29 @@ describe('ImageCanvasWorldView', () => {
     },
   );
 
+  it('uses the bottom toolbar sequence icon for the character animation placeholder', () => {
+    const dialog = createGenerationDialog({
+      id: 'dialog-character-animation-icon',
+      mode: 'character-animation',
+    });
+
+    renderWorldView({
+      canvasGenerationDialogs: [dialog],
+      generateDialog: dialog,
+    });
+
+    const frame = screen.getByRole('button', { name: '角色动作生成占位图' });
+    const sequenceIcons = frame.querySelectorAll(
+      '.image-canvas-editor__sequence-animation-icon',
+    );
+
+    expect(sequenceIcons).toHaveLength(2);
+    expect(
+      frame.querySelector('.image-canvas-editor__generation-frame-icon svg'),
+    ).toBe(sequenceIcons[1]);
+    expect(frame.querySelector('.lucide-person-standing')).toBeNull();
+  });
+
   it.each([
     {
       mode: 'character',
@@ -599,7 +622,7 @@ describe('ImageCanvasWorldView', () => {
       mode: 'character-animation',
       ariaLabel: '角色动作生成占位图',
       generatorLabel: 'Action Generator',
-      badgeLabel: '动作',
+      badgeLabel: 'Spine序列帧动画',
     },
     {
       mode: 'publication',
@@ -677,7 +700,7 @@ describe('ImageCanvasWorldView', () => {
       mode: 'character-animation',
       ariaLabel: '角色动作生成占位图',
       generatorLabel: 'Action Generator',
-      badgeLabel: '动作',
+      badgeLabel: 'Spine序列帧动画',
     },
     {
       mode: 'publication',
@@ -1101,7 +1124,7 @@ describe('ImageCanvasWorldView', () => {
         .getByRole('menuitem', { name: '图标' })
         .hasAttribute('disabled'),
     ).toBe(false);
-    for (const label of ['动作', '视频', '音效', '背景音乐']) {
+    for (const label of ['Spine序列帧动画', '视频', '音效', '背景音乐']) {
       const item = within(menu).getByRole('menuitem', { name: label });
       expect(item.hasAttribute('disabled')).toBe(true);
       expect(item.title).toBe('该标签与素材的媒体类型不兼容');
@@ -1256,7 +1279,7 @@ describe('ImageCanvasWorldView', () => {
     expect(frame.style.opacity).toBe('1');
     expect(frame.style.transition).toBe('none');
     expect(within(layerButton).getByText('1/2')).toBeTruthy();
-    expect(within(layerButton).getByText('动作')).toBeTruthy();
+    expect(within(layerButton).getByText('Spine序列帧动画')).toBeTruthy();
 
     fireEvent.click(toggle);
     expect(
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index 6a31a76dd..5ccbcc2ed 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -9,7 +9,6 @@ import {
   Mountain,
   Music,
   Pause,
-  PersonStanding,
   Play,
   Sparkles,
   UserRound,
@@ -57,6 +56,7 @@ import {
   getCanvasMediaPreviewMarker,
 } from './ImageCanvasMediaModel';
 import { getCanvasGenerationSelectionId } from './ImageCanvasSelectionModel';
+import { ImageCanvasSequenceAnimationIcon } from './ImageCanvasSequenceAnimationIcon';
 
 function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) {
   switch (dialog.mode) {
@@ -73,9 +73,9 @@ function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) {
         frameClassName:
           'image-canvas-editor__generation-frame--character-animation',
         badgeClassName: 'character-animation',
-        badgeLabel: '动作',
-        icon: <PersonStanding className="h-8 w-8" />,
-        labelIcon: <PersonStanding className="h-4 w-4" />,
+        badgeLabel: 'Spine序列帧动画',
+        icon: <ImageCanvasSequenceAnimationIcon className="h-8 w-8" />,
+        labelIcon: <ImageCanvasSequenceAnimationIcon className="h-4 w-4" />,
       };
     case 'spec':
       return {
@@ -212,7 +212,7 @@ const CANVAS_ASSET_KIND_TAG_OPTIONS: Array<{
   { value: 'character', label: '角色', className: 'character' },
   {
     value: 'character-animation',
-    label: '动作',
+    label: 'Spine序列帧动画',
     className: 'character-animation',
   },
   { value: 'icon', label: '图标', className: 'icon' },
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 3d714997c..1fabc3008 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -839,14 +839,14 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       expect(metadata.layers[5].file).toBe(
         'sequences/005-角色动作/manifest.txt',
       );
-      expect(metadata.layers[5].visible.type).toBe('角色动作序列帧');
+      expect(metadata.layers[5].visible.type).toBe('Spine序列帧动画');
       const sequenceMetadata = JSON.parse(
         await readZipText(
           zip,
           '导出项目-画布素材/sequences/005-角色动作/metadata.json',
         ),
       );
-      expect(sequenceMetadata.visible.type).toBe('角色动作序列帧');
+      expect(sequenceMetadata.visible.type).toBe('Spine序列帧动画');
       expect(sequenceMetadata.taskId).toBeUndefined();
       expect(sequenceMetadata.previewVideoPath).toBeUndefined();
       expect(sequenceMetadata.failedFrames).toEqual([]);
@@ -1069,7 +1069,7 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       });
       const metadata = JSON.parse(await readZipText(zip, 'metadata.json'));
       expect(metadata.title).toBe('角色动作/跑步');
-      expect(metadata.visible.type).toBe('角色动作序列帧');
+      expect(metadata.visible.type).toBe('Spine序列帧动画');
       expect(metadata.visible.resolution).toBe('100 x 80 px');
       expect(metadata.taskId).toBeUndefined();
       expect(metadata.previewVideoPath).toBeUndefined();
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 95f2c5ab5..a7c2620a5 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -1581,13 +1581,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     });
   });
 
-  it('submits character action quick edits through image edits', async () => {
-    editEditorImageMock.mockResolvedValueOnce(
-      createGenerated({
-        prompt: '让当前图跳得更高',
-        imageSrc: 'data:image/png;base64,action-frame-edited',
-      }),
-    );
+  it('rejects ordinary quick edits for character animation sequences', async () => {
     render(
       <SubmissionWorkflowHarness
         initialLayers={[
@@ -1595,21 +1589,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
             title: '角色动作',
             src: 'generated-character-drafts/editor/actions/frame.png',
             mediaType: 'image-sequence',
-            thumbnailSrc: 'generated-character-drafts/editor/actions/frame.png',
-            imageSequenceFrames: [
-              {
-                imageSrc: 'generated-character-drafts/editor/actions/frame.png',
-                width: 1024,
-                height: 1024,
-              },
-            ],
-            previewVideoPath: 'https://assets.example.test/action-preview.mp4',
             assetKind: 'character-animation',
-            model: 'seedance2.0',
-            originalWidth: 1024,
-            originalHeight: 1024,
-            width: 420,
-            height: 420,
           }),
         ]}
         initialQuickEditPanel={{
@@ -1624,25 +1604,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '提交快速编辑' }));
 
-    await waitFor(() => {
-      expect(editEditorImageMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          prompt: '让当前图跳得更高',
-          sourceImageSrc: 'resource-source',
-          model: 'gpt-image-2',
-          assetLabel: '角色动作 快速编辑',
-          targetLayerId: 'layer-source',
-        }),
-      );
-    });
-    expect(generateEditorCharacterAnimationMock).not.toHaveBeenCalled();
-    expect(generateEditorImageMock).not.toHaveBeenCalled();
-    expect(generateEditorVideoMock).not.toHaveBeenCalled();
-    await waitFor(() => {
-      expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-source:角色动作 快速编辑:resource-source:character-animation:image-sequence:data:image/png;base64,action-frame-edited',
-      );
-    });
+    expect(editEditorImageMock).not.toHaveBeenCalled();
+    expect(screen.getByTestId('quick-edit').textContent).toBe(
+      'layer-source:failed:让当前图跳得更高:Spine序列帧动画不支持快速编辑',
+    );
   });
 
   it('captures a local edit fallback when the project response has no snapshot', async () => {
@@ -4482,6 +4447,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         initialLayers={[
           createLayer({
             id: 'character-layer',
+            resourceId: 'local-resource-character-layer',
+            resourcePersistenceState: 'pending',
             assetKind: 'character',
             src: 'data:image/png;base64,Y2hhcmFjdGVy',
           }),
@@ -4515,6 +4482,9 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         }),
       );
     });
+    expect(
+      generateEditorCharacterAnimationMock.mock.calls[0]?.[0].sourceResourceId,
+    ).toBeUndefined();
     await waitFor(() => {
       expect(screen.getByTestId('character-animation').textContent).toBe(
         'character-layer:completed:跑步:-:result',
@@ -4812,7 +4782,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         ]}
         initialCharacterAnimationPanel={{
           sourceLayerId: 'character-layer',
-          promptText: '',
+          promptText: '挥手',
           resolution: '480p',
           ratio: 'same',
           frameCount: 32,
@@ -4828,7 +4798,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('character-animation').textContent).toBe(
-        'character-layer:failed:-:生成角色动画失败:-',
+        'character-layer:failed:挥手:生成角色动画失败:-',
       );
     });
   });
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 38fbc9b95..414600ccd 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -76,6 +76,7 @@ import {
   normalizeEditorImageModel,
   resolveEditorImageGenerationPixelSize,
   resolveImageGenerationErrorMessage,
+  resolveRegisteredProjectResourceId,
 } from './ImageCanvasGenerationModel';
 import { chooseGenerationPlacement } from './ImageCanvasGenerationPlacementModel';
 import {
@@ -1105,8 +1106,11 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         sourceLayer: options.sourceLayer,
       });
 
+      // 结果缺少可用的正式序列帧时不能静默 return——上层已经把 dialog/面板
+      // 置为 generating，若这里不发失败分支，重试会被 generating 守卫永久阻断。抛错交给
+      // submitCharacterAnimation 的 catch 统一走 failed + composerOpen 恢复。
       if (!nextLayer) {
-        return;
+        throw new Error('角色动作生成结果缺少可用的正式序列帧，无法放置到画布。');
       }
       addGeneratedLayersToCanvas([nextLayer]);
       selectSingleLayer(nextLayer.id);
@@ -1425,7 +1429,10 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       setQuickEditPanel({
         ...quickEditPanel,
         status: 'failed',
-        errorMessage: '图标类素材不支持快速编辑',
+        errorMessage:
+          quickEditSourceLayer.assetKind === 'character-animation'
+            ? 'Spine序列帧动画不支持快速编辑'
+            : '图标类素材不支持快速编辑',
       });
       return;
     }
@@ -2681,7 +2688,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   );
 
   const submitCharacterAnimation = useCallback(async () => {
-    if (!characterAnimationPanel || !characterAnimationSourceLayer) {
+    if (!characterAnimationPanel) {
       return;
     }
     if (
@@ -2696,6 +2703,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       const submissionPlan = buildCharacterAnimationSubmissionPlan({
         panel: characterAnimationPanel,
         sourceLayer: characterAnimationSourceLayer,
+        reference: characterAnimationPanel.references?.[0] ?? null,
       });
       if (canvasDialog?.mode === 'character-animation') {
         updateCanvasGenerationDialogById(canvasDialog.id, (currentDialog) => ({
@@ -2724,35 +2732,64 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       if (!canvasDialog) {
         setCharacterAnimationPanel(nextPanel);
       }
+      const canvasCompletionPlaceholder = canvasDialog
+        ? getGeneratingDialogPlaceholder(canvasDialog)
+        : undefined;
+      const selectedReference = characterAnimationPanel.references?.[0];
+      const referenceMediaType =
+        selectedReference?.mediaType === 'video' ? 'video' : 'image';
+      const stableReferenceSrc = selectedReference
+        ? await resolveEditorGenerationMediaReference(
+            selectedReference,
+            referenceMediaType,
+            projectId,
+            {
+              allowRegisteredIds: false,
+              requireImageObjectReference: referenceMediaType === 'image',
+            },
+          )
+        : characterAnimationSourceLayer
+          ? await resolveEditorGenerationMediaReference(
+              characterAnimationSourceLayer,
+              'image',
+              projectId,
+              {
+                allowRegisteredIds: false,
+                requireImageObjectReference: true,
+              },
+            )
+          : undefined;
       const generationInputs = buildCharacterAnimationGenerationInputs(
         submissionPlan.promptText,
         characterAnimationSourceLayer,
+        selectedReference ?? null,
         {
           resolution: characterAnimationPanel.resolution,
           ratio: characterAnimationPanel.ratio,
           frameCount: characterAnimationPanel.frameCount,
           durationSeconds: characterAnimationPanel.durationSeconds,
-        },
-      );
-      const canvasCompletionPlaceholder = canvasDialog
-        ? getGeneratingDialogPlaceholder(canvasDialog)
-        : undefined;
-      const sourceImageSrc = await resolveEditorGenerationMediaReference(
-        characterAnimationSourceLayer,
-        'image',
-        projectId,
-        {
-          allowRegisteredIds: false,
-          requireImageObjectReference: true,
+          backgroundColor: characterAnimationPanel.backgroundColor,
+          referenceSrc: stableReferenceSrc,
+          referenceMediaType,
         },
       );
       const result = await runEditorGenerationWithWalletRefresh(
         generateEditorCharacterAnimation({
           ...submissionPlan.input,
-          sourceImageSrc,
+          ...(stableReferenceSrc
+            ? {
+                referenceSrc: stableReferenceSrc,
+                ...(referenceMediaType === 'image'
+                  ? { sourceImageSrc: stableReferenceSrc }
+                  : {}),
+              }
+            : {}),
           projectId,
           generationInputs,
-          sourceResourceId: characterAnimationSourceLayer.resourceId,
+          sourceResourceId: resolveRegisteredProjectResourceId(
+            selectedReference?.resourceId ??
+              characterAnimationSourceLayer?.resourceId,
+          ),
           assetFolderId,
           ...(canvasDialog && projectId && canvasCompletionPlaceholder
             ? {
@@ -2766,6 +2803,20 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         }),
         onWalletBalanceMayHaveChanged,
       );
+      // 独立面板路径没有画布 dialog，队列成功 / 直接 project 快照都要把面板
+      // 收敛到终态，否则 `isGenerating` 会让面板永久禁用提交与关闭。顺带把队列路径缺的
+      // onGenerationWarning（第 6 参）与 completionDialogId（第 7 参）补上，与图片/场景路径对齐。
+      const settleStandaloneCharacterAnimationPanel = () => {
+        setCharacterAnimationPanel((currentPanel) =>
+          currentPanel
+            ? {
+                ...currentPanel,
+                status: 'completed',
+                result,
+              }
+            : currentPanel,
+        );
+      };
       if (
         await applyQueuedEditorGenerationProject(
           result,
@@ -2773,12 +2824,16 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           applyProjectSnapshot,
           onQueuedGenerationTask,
           onWalletBalanceMayHaveChanged,
+          onGenerationWarning,
+          canvasDialog?.id,
         )
       ) {
+        settleStandaloneCharacterAnimationPanel();
         return;
       }
       if (result.project && applyProjectSnapshot) {
         applyProjectSnapshot(result.project);
+        settleStandaloneCharacterAnimationPanel();
         return;
       }
       if (canvasDialog) {
@@ -2795,7 +2850,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           canvasCompletionPlaceholder,
           canvasDialog.id,
           {
-            sourceLayer: characterAnimationSourceLayer,
+            ...(characterAnimationSourceLayer
+              ? { sourceLayer: characterAnimationSourceLayer }
+              : {}),
           },
         );
         return;
@@ -2855,6 +2912,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     updateCanvasGenerationDialogById,
     onWalletBalanceMayHaveChanged,
     onQueuedGenerationTask,
+    onGenerationWarning,
   ]);
 
   return useMemo(
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index 782e48d1c..e853cc749 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -211,6 +211,12 @@ function GenerationSurfaceHarness() {
       >
         切换视频
       </button>
+      <button
+        type="button"
+        onClick={() => surface.switchGenerationTool('character-animation')}
+      >
+        切换Spine序列帧
+      </button>
       <button
         type="button"
         onClick={() => surface.switchGenerationTool('music')}
@@ -288,6 +294,17 @@ describe('useImageCanvasGenerationSurface', () => {
       'generate:open:placeholder',
     );
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '切换Spine序列帧' }));
+    expect(screen.getByTestId('tool').textContent).toBe(
+      'character-animation',
+    );
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'character-animation:open:placeholder',
+    );
+    expect(
+      screen.getByRole('dialog', { name: 'Spine序列帧动画生成' }),
+    ).toBeTruthy();
   });
 
   it('derives composer position without rendering a standalone close button', () => {
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 763d0e87d..783de49df 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -343,6 +343,10 @@ export function useImageCanvasGenerationSurface({
         generationWorkflow.openVideoGenerationDialog();
         return true;
       }
+      if (tool === 'character-animation') {
+        generationWorkflow.openCharacterAnimationPanel();
+        return true;
+      }
       if (tool === 'music') {
         openToolbarOptionMenu('music');
         setActiveTool('music');
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 3661ce448..036b787be 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -51,6 +51,7 @@ const generateEditorBackgroundMusicMock = vi.hoisted(() => vi.fn());
 const editEditorImageMock = vi.hoisted(() => vi.fn());
 const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
 const splitEditorIconSpritesheetMock = vi.hoisted(() => vi.fn());
+const splitEditorCharacterAnimationFramesMock = vi.hoisted(() => vi.fn());
 const uploadEditorMediaAssetObjectFileMock = vi.hoisted(() => vi.fn());
 const uploadEditorMediaAssetFileMock = vi.hoisted(() => vi.fn());
 const renderCropExpandImageMock = vi.hoisted(() => vi.fn());
@@ -88,6 +89,8 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     generateEditorSoundEffect: generateEditorSoundEffectMock,
     loadEditorProject: loadEditorProjectMock,
     splitEditorIconSpritesheet: splitEditorIconSpritesheetMock,
+    splitEditorCharacterAnimationFrames:
+      splitEditorCharacterAnimationFramesMock,
   };
 });
 
@@ -603,6 +606,9 @@ function GenerationWorkflowHarness({
       <span data-testid="character-animation-price">
         {workflow.characterAnimationPrice}
       </span>
+      <span data-testid="character-animation-background">
+        {`${workflow.characterAnimationPanel?.backgroundColor ?? 'auto'}:${activeDialog?.characterAnimationBackgroundColor ?? 'auto'}`}
+      </span>
       <span data-testid="fit-count">
         {fitLayersMockRef.current.mock.calls.length}
       </span>
@@ -917,6 +923,19 @@ function GenerationWorkflowHarness({
           ? '拆图中'
           : '空闲'}
       </output>
+      <button
+        type="button"
+        onClick={() =>
+          void workflow.splitSelectedCharacterAnimationFrames(layers[0]!)
+        }
+      >
+        拆分序列帧
+      </button>
+      <output aria-label="拆帧状态">
+        {workflow.splittingCharacterAnimationLayerIds.has(layers[0]!.id)
+          ? '拆帧中'
+          : '空闲'}
+      </output>
       <button
         type="button"
         onClick={() =>
@@ -927,6 +946,40 @@ function GenerationWorkflowHarness({
       >
         打开角色动画
       </button>
+      <button
+        type="button"
+        onClick={() => workflow.openCharacterAnimationPanel()}
+      >
+        打开独立角色动画
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.pickGenerationReferenceFromLayer(
+            createLayer({
+              id: 'layer-character-source',
+              title: '角色形象原图',
+              assetKind: 'character',
+            }),
+          )
+        }
+      >
+        选择角色形象原图为动画参考
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.pickGenerationReferenceFromLayer(
+            createLayer({
+              id: 'layer-character-cutout',
+              title: '角色形象抠图结果',
+              assetKind: 'character',
+            }),
+          )
+        }
+      >
+        选择角色形象抠图为动画参考
+      </button>
       <button
         type="button"
         onClick={() => workflow.openCharacterAnimationPanel(layers[0]!)}
@@ -2024,6 +2077,27 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
   });
 
+  it('accepts both character source and cutout layers as animation references', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开独立角色动画' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '选择角色形象原图为动画参考' }),
+    );
+    expect(screen.getByTestId('generation-references').textContent).toBe(
+      '角色形象原图',
+    );
+    expect(screen.getByTestId('reference-pick-warning').textContent).toBe('-');
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '选择角色形象抠图为动画参考' }),
+    );
+    expect(screen.getByTestId('generation-references').textContent).toBe(
+      '角色形象抠图结果',
+    );
+    expect(screen.getByTestId('reference-pick-warning').textContent).toBe('-');
+  });
+
   it('keeps canvas reference picking active and warns when the next image exceeds capacity', () => {
     render(<GenerationWorkflowHarness />);
 
@@ -2728,6 +2802,81 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
   });
 
+  it('registers character animation frames as existing account assets without changing the canvas', async () => {
+    const refreshAssetLibrary = vi.fn().mockResolvedValue(undefined);
+    splitEditorCharacterAnimationFramesMock.mockResolvedValueOnce({
+      frameCount: 32,
+      assets: [],
+    });
+    render(
+      <GenerationWorkflowHarness
+        projectId="project-1"
+        refreshAssetLibrary={refreshAssetLibrary}
+        initialLayers={[
+          createLayer({
+            title: '勇者奔跑',
+            assetKind: 'character-animation',
+            mediaType: 'image-sequence',
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '拆分序列帧' }));
+
+    await waitFor(() => {
+      expect(splitEditorCharacterAnimationFramesMock).toHaveBeenCalledWith({
+        projectId: 'project-1',
+        sourceLayerId: 'layer-source',
+        sourceResourceId: 'resource-source',
+        assetFolderId: undefined,
+        assetLabel: '勇者奔跑',
+      });
+    });
+    expect(refreshAssetLibrary).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('sidebar').textContent).toBe('assets');
+    expect(screen.getByRole('status', { name: '拆帧状态' }).textContent).toBe(
+      '空闲',
+    );
+  });
+
+  it.each([
+    ['pending resource', 'resource-character-animation-pending', 'pending'],
+    ['local resource', 'local-resource-character-animation-1', undefined],
+    [
+      'dialog placeholder',
+      'generation-dialog:character-animation-1',
+      undefined,
+    ],
+  ] as const)(
+    'does not split character animation frames before the %s is registered',
+    async (_case, resourceId, resourcePersistenceState) => {
+      render(
+        <GenerationWorkflowHarness
+          projectId="project-1"
+          initialLayers={[
+            createLayer({
+              resourceId,
+              resourcePersistenceState,
+              title: '保存中的序列帧',
+              assetKind: 'character-animation',
+              mediaType: 'image-sequence',
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '拆分序列帧' }));
+
+      await waitFor(() => {
+        expect(splitEditorCharacterAnimationFramesMock).not.toHaveBeenCalled();
+      });
+      expect(screen.getByRole('status', { name: '拆帧状态' }).textContent).toBe(
+        '空闲',
+      );
+    },
+  );
+
   it('queues background removal for private character images', async () => {
     resolveEditorImageReferenceDataUrlMock.mockResolvedValueOnce(
       'data:image/png;base64,resolved-character',
@@ -3207,8 +3356,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       );
     });
     const firstRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-      | EditorPixelArtSnapInput
-      | undefined;
+      EditorPixelArtSnapInput | undefined;
     const firstDialogList =
       screen.getByTestId('generation-dialogs').textContent;
     const firstOperation = JSON.parse(
@@ -3226,8 +3374,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
 
     const retryRequest = snapImageToPerfectPixelsMock.mock.calls[1]?.[0] as
-      | EditorPixelArtSnapInput
-      | undefined;
+      EditorPixelArtSnapInput | undefined;
     expect(JSON.stringify(retryRequest)).toBe(firstRequestBytes);
     expect(retryRequest).toEqual(firstOperation.request);
     expect(retryRequest?.canvasCompletion.dialogId).toBe(
@@ -3363,8 +3510,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         });
       loadEditorProjectMock.mockImplementation(async () => {
         const request = snapImageToPerfectPixelsMock.mock.calls.at(-1)?.[0] as
-          | EditorPixelArtSnapInput
-          | undefined;
+          EditorPixelArtSnapInput | undefined;
         return createConflictingPerfectPixelProject(
           request!.canvasCompletion.dialogId,
         );
@@ -3417,8 +3563,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       expect(retried!.reconcileUntil - retried!.submittedAt).toBe(75_000);
       expect(retried?.taskId).toBe(beforeRetry.taskId);
       const firstRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        | EditorPixelArtSnapInput
-        | undefined;
+        EditorPixelArtSnapInput | undefined;
       expect(JSON.stringify(requestAtRetryPost)).toBe(
         JSON.stringify(firstRequest),
       );
@@ -3444,8 +3589,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       );
     loadEditorProjectMock.mockImplementation(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls.at(-1)?.[0] as
-        | EditorPixelArtSnapInput
-        | undefined;
+        EditorPixelArtSnapInput | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3472,8 +3616,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
 
     const firstRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-      | EditorPixelArtSnapInput
-      | undefined;
+      EditorPixelArtSnapInput | undefined;
     const firstRequestBytes = JSON.stringify(firstRequest);
     const operation = JSON.parse(
       screen.getByTestId('perfect-pixel-operation').textContent!,
@@ -3506,8 +3649,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
 
     const retryRequest = snapImageToPerfectPixelsMock.mock.calls[1]?.[0] as
-      | EditorPixelArtSnapInput
-      | undefined;
+      EditorPixelArtSnapInput | undefined;
     expect(uploadEditorMediaAssetObjectFileMock).toHaveBeenCalledTimes(1);
     expect(JSON.stringify(retryRequest)).toBe(firstRequestBytes);
     expect(retryRequest?.canvasCompletion.dialogId).toBe(operation.operationId);
@@ -3528,8 +3670,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       .mockImplementationOnce(() => retryResult.promise);
     loadEditorProjectMock.mockImplementation(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        | EditorPixelArtSnapInput
-        | undefined;
+        EditorPixelArtSnapInput | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3566,8 +3707,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       expect(snapImageToPerfectPixelsMock).toHaveBeenCalledTimes(2);
     });
     const retryRequest = snapImageToPerfectPixelsMock.mock.calls[1]?.[0] as
-      | EditorPixelArtSnapInput
-      | undefined;
+      EditorPixelArtSnapInput | undefined;
     expect(retryRequest).toBeDefined();
 
     rerender(
@@ -3603,8 +3743,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
     loadEditorProjectMock.mockImplementation(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        | EditorPixelArtSnapInput
-        | undefined;
+        EditorPixelArtSnapInput | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3678,8 +3817,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
     loadEditorProjectMock.mockImplementationOnce(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        | EditorPixelArtSnapInput
-        | undefined;
+        EditorPixelArtSnapInput | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3728,8 +3866,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       `pixel-art-snap-${postedOperation.operationId}`,
     );
     const postedRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-      | EditorPixelArtSnapInput
-      | undefined;
+      EditorPixelArtSnapInput | undefined;
     expect(JSON.stringify(postedRequest)).toBe(
       JSON.stringify(postedOperation.request),
     );
@@ -4680,8 +4817,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
       }),
     );
     const readOptions = loadEditorProjectMock.mock.calls[0]?.[1] as
-      | { deadlineAt?: number }
-      | undefined;
+      { deadlineAt?: number } | undefined;
     expect(readOptions?.deadlineAt).toBeLessThanOrEqual(Date.now() + 10_000);
     expect(readOptions?.deadlineAt).toBeLessThanOrEqual(
       hydratedDialog.perfectPixelOperation!.reconcileUntil,
@@ -4753,8 +4889,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
     expect(loadEditorProjectMock).toHaveBeenCalledTimes(1);
     const readOptions = loadEditorProjectMock.mock.calls[0]?.[1] as
-      | { deadlineAt?: number }
-      | undefined;
+      { deadlineAt?: number } | undefined;
     expect(readOptions?.deadlineAt).toBeGreaterThanOrEqual(readStartedAt);
     expect(readOptions?.deadlineAt).toBeLessThanOrEqual(Date.now() + 10_000);
     expect(snapImageToPerfectPixelsMock).not.toHaveBeenCalled();
@@ -5035,6 +5170,118 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('keeps automatic background color for character layers and explicit green for the standalone entry', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开角色动画' }));
+    expect(
+      screen.getByTestId('character-animation-background').textContent,
+    ).toBe('auto:auto');
+
+    fireEvent.click(screen.getByRole('button', { name: '打开独立角色动画' }));
+    expect(
+      screen.getByTestId('character-animation-background').textContent,
+    ).toBe('green:green');
+  });
+
+  it('restores text-mode character animation remodeling without source references', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            id: 'layer-text-animation',
+            title: '文本角色动作',
+            mediaType: 'image-sequence',
+            assetKind: 'character-animation',
+            sourceType: 'generated',
+            generationInputs: {
+              version: 2,
+              action: 'character-animation.generate',
+              fields: [
+                { id: 'inputMode', title: '输入模式', value: 'text' },
+                { id: 'prompt', title: '动作描述', value: '像素骑士原地挥手' },
+                { id: 'resolution', title: '清晰度', value: '480p' },
+                { id: 'ratio', title: '比例', value: '1:1' },
+                { id: 'frameCount', title: '帧数', value: 32 },
+                { id: 'durationSeconds', title: '时长', value: 4 },
+              ],
+              references: [],
+            },
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '打开图片改造' }));
+
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'character-animation:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-prompt').textContent).toBe(
+      '像素骑士原地挥手',
+    );
+    expect(screen.getByTestId('generation-references').textContent).toBe('');
+    expect(screen.getByTestId('reference-pick-warning').textContent).toBe('-');
+  });
+
+  it('restores an uploaded video reference from stable referenceSrc in the real remodeling workflow', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            id: 'layer-video-animation',
+            title: '视频角色动作',
+            mediaType: 'image-sequence',
+            assetKind: 'character-animation',
+            sourceType: 'generated',
+            generationInputs: {
+              version: 2,
+              action: 'character-animation.generate',
+              fields: [
+                { id: 'inputMode', title: '输入模式', value: 'video' },
+                {
+                  id: 'referenceSrc',
+                  title: '参考素材',
+                  value: 'users/user-1/run.mp4',
+                },
+                { id: 'referenceMediaType', title: '参考类型', value: 'video' },
+                { id: 'referenceWidth', title: '参考宽度', value: 1920 },
+                { id: 'referenceHeight', title: '参考高度', value: 1080 },
+                { id: 'prompt', title: '动作描述', value: '复刻奔跑节奏' },
+                { id: 'resolution', title: '清晰度', value: '720p' },
+                { id: 'ratio', title: '比例', value: 'same' },
+                { id: 'frameCount', title: '帧数', value: 40 },
+                { id: 'durationSeconds', title: '时长', value: 5 },
+              ],
+              references: [
+                {
+                  id: 'source',
+                  title: '参考视频',
+                  label: '奔跑参考.mp4',
+                  refType: 'asset',
+                  refId: 'asset-run-video',
+                },
+              ],
+            },
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '打开图片改造' }));
+
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'character-animation:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('generation-references').textContent).toBe(
+      '奔跑参考.mp4',
+    );
+    expect(screen.getByTestId('reference-pick-warning').textContent).toBe('-');
+    expect(
+      screen.getByTestId('character-animation-background').textContent,
+    ).toBe('auto:auto');
+  });
+
   it('reopens character animation remodeling from an action result layer', () => {
     render(
       <GenerationWorkflowHarness
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 8143cf448..3c35a3cc3 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -25,6 +25,7 @@ import {
   type EditorProjectResourceSnapshot,
   type EditorProjectSnapshot,
   loadEditorProject,
+  splitEditorCharacterAnimationFrames,
   splitEditorIconSpritesheet,
 } from '../../services/image-editor/editorProjectClient';
 import { resizeCropExpandFrame } from './ImageCanvasCropExpandModel';
@@ -36,6 +37,7 @@ import {
 import type {
   CanvasGenerationAction,
   CanvasGenerationDialogState,
+  CanvasGenerationInputField,
   CanvasGenerationInputReference,
   CanvasHistoryAction,
   CanvasLayer,
@@ -92,6 +94,7 @@ import {
   appendLimitedImageReferences,
   buildDeterministicGenerationInputs,
   calculateCharacterAnimationPrice,
+  canSplitCharacterAnimationFrames,
   CANVAS_GENERATION_PARAMETER_FALLBACK_WARNING,
   CHARACTER_ANIMATION_DURATION_OPTIONS,
   CHARACTER_ANIMATION_MODEL,
@@ -103,6 +106,7 @@ import {
   isCanvasGenerationDialog,
   isQuickEditUnsupportedAssetKind,
   normalizeEditorImageModel,
+  resizeGenerationPlaceholderToCharacterAnimationSelection,
   resizeGenerationPlaceholderToImageSelection,
   resolveDialogExtraImageReferenceLimit,
   resolveExtraImageReferenceLimit,
@@ -179,12 +183,31 @@ const NON_REPLACEABLE_SOURCE_WARNING_BY_ACTION: Partial<
     '原 UI 设计图不在当前画布，当前素材提取面板无法重新选择来源设计图，无法改造。',
 };
 
+function canRestoreCharacterAnimationWithoutCanvasSource(
+  action: CanvasGenerationAction,
+  fields: CanvasGenerationInputField[],
+) {
+  if (action !== 'character-animation.generate') {
+    return false;
+  }
+  const inputMode = fields.find((field) => field.id === 'inputMode')?.value;
+  const referenceSrc = fields.find(
+    (field) => field.id === 'referenceSrc',
+  )?.value;
+  return (
+    inputMode === 'text' ||
+    (typeof referenceSrc === 'string' && referenceSrc.trim().length > 0)
+  );
+}
+
 function getMissingNonReplaceableSourceWarning({
   action,
+  fields,
   references,
   unavailableReferences,
 }: {
   action: CanvasGenerationAction;
+  fields: CanvasGenerationInputField[];
   references: CanvasGenerationInputReference[];
   unavailableReferences: CanvasGenerationInputReference[];
 }) {
@@ -192,6 +215,9 @@ function getMissingNonReplaceableSourceWarning({
   if (!warning) {
     return null;
   }
+  if (canRestoreCharacterAnimationWithoutCanvasSource(action, fields)) {
+    return null;
+  }
   const unavailableSourceKeys = new Set(
     unavailableReferences
       .filter((reference) => reference.id === 'source')
@@ -702,10 +728,12 @@ function findSourceAnimationLayer(
   if (!sourceResourceId) {
     return null;
   }
+  // 与 EditorView.openLayerGenerationDialog 的同一实现保持一致，匹配
+  // resourceId 或历史落库的 layer id；仅认定角色图层为动画来源。
   return (
     layers.find(
       (layer) =>
-        layer.resourceId === sourceResourceId &&
+        (layer.resourceId === sourceResourceId || layer.id === sourceResourceId) &&
         layer.assetKind === 'character',
     ) ?? null
   );
@@ -719,7 +747,7 @@ const CANVAS_TOOL_BY_GENERATION_MODE = {
   publication: 'publication',
   'ui-design': 'ui-design',
   'quick-edit': 'generate',
-  'character-animation': 'character',
+  'character-animation': 'character-animation',
   video: 'video',
   'audio-sound-effect': 'music',
   'audio-background-music': 'music',
@@ -920,15 +948,19 @@ function writeCachedGenerationReference(
 function createCharacterAnimationPanelFromDialog(
   dialog: CanvasGenerationDialogState | null,
 ): CharacterAnimationPanelState | null {
-  if (dialog?.mode !== 'character-animation' || !dialog.sourceLayerId) {
+  if (dialog?.mode !== 'character-animation') {
     return null;
   }
   return {
     sourceLayerId: dialog.sourceLayerId,
+    references: dialog.generationReferences ?? [],
     promptText: dialog.prompt,
     assetLabel: dialog.assetLabel,
+    backgroundColor: dialog.characterAnimationBackgroundColor,
     resolution: dialog.characterAnimationResolution ?? '480p',
-    ratio: dialog.characterAnimationRatio ?? 'same',
+    // 与 composer 展示默认值保持一致（composer 用 `?? '1:1'`）。此前这里默认
+    // 'same'，缺字段的持久化 dialog 会显示 1:1 却提交 same。
+    ratio: dialog.characterAnimationRatio ?? '1:1',
     frameCount: dialog.characterAnimationFrameCount ?? 32,
     durationSeconds: dialog.characterAnimationDurationSeconds ?? 4,
     status:
@@ -957,10 +989,13 @@ function applyCharacterAnimationPanelToDialog(
       composerOpen: false,
     };
   }
-  return {
+  return resizeGenerationPlaceholderToCharacterAnimationSelection({
     ...dialog,
     prompt: panel.promptText,
     assetLabel: panel.assetLabel,
+    sourceLayerId: panel.sourceLayerId,
+    generationReferences: panel.references,
+    characterAnimationBackgroundColor: panel.backgroundColor,
     characterAnimationResolution: panel.resolution,
     characterAnimationRatio: panel.ratio,
     characterAnimationFrameCount: panel.frameCount,
@@ -973,7 +1008,7 @@ function applyCharacterAnimationPanelToDialog(
           ? 'failed'
           : 'idle',
     errorMessage: panel.errorMessage,
-  };
+  });
 }
 
 type GenerationWorkflowOptions = {
@@ -1105,6 +1140,11 @@ export function useImageCanvasGenerationWorkflow({
     splittingIconSpritesheetLayerIds,
     setSplittingIconSpritesheetLayerIds,
   ] = useState<Set<string>>(() => new Set());
+  const splittingCharacterAnimationLayerIdsRef = useRef(new Set<string>());
+  const [
+    splittingCharacterAnimationLayerIds,
+    setSplittingCharacterAnimationLayerIds,
+  ] = useState<Set<string>>(() => new Set());
   const perfectPixelLayerIdsRef = useRef(new Set<string>());
   // 中文注释：本会话仍在执行的 inline 占位 id。到期清理只该针对**别人**留下的孤儿，
   // 而它无法从 dialog 状态区分「已死会话留下的」和「本会话正在跑的」——两者都是
@@ -1439,11 +1479,13 @@ export function useImageCanvasGenerationWorkflow({
           (layer) => layer.id === quickEditSelectionState.sourceLayerId,
         ) ?? null)
       : null;
-  const characterAnimationSourceLayer = effectiveCharacterAnimationPanel
-    ? (layers.find(
-        (layer) => layer.id === effectiveCharacterAnimationPanel.sourceLayerId,
-      ) ?? null)
-    : null;
+  const characterAnimationSourceLayer =
+    effectiveCharacterAnimationPanel?.sourceLayerId
+      ? (layers.find(
+          (layer) =>
+            layer.id === effectiveCharacterAnimationPanel.sourceLayerId,
+        ) ?? null)
+      : null;
   const characterAnimationPrice = effectiveCharacterAnimationPanel
     ? calculateCharacterAnimationPrice(
         CHARACTER_ANIMATION_MODEL,
@@ -1581,7 +1623,7 @@ export function useImageCanvasGenerationWorkflow({
   );
 
   const openCharacterAnimationPanel = useCallback(
-    (layer: CanvasLayer) => {
+    (layer?: CanvasLayer) => {
       const draft = createCharacterAnimationGenerationDialogDraft({
         canvasSize,
         viewport,
@@ -1591,7 +1633,7 @@ export function useImageCanvasGenerationWorkflow({
         return;
       }
       openPlacedCanvasGenerationDialog(draft);
-      activateCanvasGenerationEntry('character');
+      activateCanvasGenerationEntry('character-animation');
     },
     [
       activateCanvasGenerationEntry,
@@ -1850,10 +1892,10 @@ export function useImageCanvasGenerationWorkflow({
       );
       const hasInvalidVersionedGenerationInputs = Boolean(
         sourceLayer.generationInputsHydrationState === 'invalid-versioned' ||
-          (sourceLayer.generationInputs &&
-            (sourceLayer.generationInputs.version !== undefined ||
-              sourceLayer.generationInputs.action !== undefined) &&
-            !decodedGenerationInputs.ok),
+        (sourceLayer.generationInputs &&
+          (sourceLayer.generationInputs.version !== undefined ||
+            sourceLayer.generationInputs.action !== undefined) &&
+          !decodedGenerationInputs.ok),
       );
       if (hasInvalidVersionedGenerationInputs) {
         showGenerationWarning(
@@ -1881,9 +1923,20 @@ export function useImageCanvasGenerationWorkflow({
             layers,
           )
         : [];
+      const unresolvedUnavailableReferences =
+        normalizedGenerationInputs &&
+        canRestoreCharacterAnimationWithoutCanvasSource(
+          normalizedGenerationInputs.action,
+          normalizedGenerationInputs.fields,
+        )
+          ? unavailableReferences.filter(
+              (reference) => reference.id !== 'source',
+            )
+          : unavailableReferences;
       const missingNonReplaceableSourceWarning = normalizedGenerationInputs
         ? getMissingNonReplaceableSourceWarning({
             action: normalizedGenerationInputs.action,
+            fields: normalizedGenerationInputs.fields,
             references: normalizedGenerationInputs.references,
             unavailableReferences,
           })
@@ -1945,7 +1998,7 @@ export function useImageCanvasGenerationWorkflow({
         setActiveTool('select');
         const redrawWarning = getCanvasGenerationRedrawWarning({
           hasParameterFallbacks,
-          unavailableReferenceCount: unavailableReferences.length,
+          unavailableReferenceCount: unresolvedUnavailableReferences.length,
           isNormalizedGenerationInputs,
         });
         if (redrawWarning) {
@@ -1977,7 +2030,7 @@ export function useImageCanvasGenerationWorkflow({
         setActiveTool(getCanvasToolForGenerationMode(sameSourceDraft.mode));
         const redrawWarning = getCanvasGenerationRedrawWarning({
           hasParameterFallbacks,
-          unavailableReferenceCount: unavailableReferences.length,
+          unavailableReferenceCount: unresolvedUnavailableReferences.length,
           isNormalizedGenerationInputs,
         });
         if (redrawWarning) {
@@ -3486,6 +3539,75 @@ export function useImageCanvasGenerationWorkflow({
     ],
   );
 
+  const splitSelectedCharacterAnimationFrames = useCallback(
+    async (sourceLayer: CanvasLayer) => {
+      if (
+        !canSplitCharacterAnimationFrames(sourceLayer) ||
+        !projectId ||
+        splittingCharacterAnimationLayerIdsRef.current.has(sourceLayer.id)
+      ) {
+        return;
+      }
+      splittingCharacterAnimationLayerIdsRef.current.add(sourceLayer.id);
+      setSplittingCharacterAnimationLayerIds((currentLayerIds) => {
+        const nextLayerIds = new Set(currentLayerIds);
+        nextLayerIds.add(sourceLayer.id);
+        return nextLayerIds;
+      });
+      closeGenerationTransientState();
+      setImageContextMenu(null);
+      setMetadataLayer(null);
+      setCropExpandPanel(null);
+      setQuickEditPanel(null);
+      try {
+        const result = await splitEditorCharacterAnimationFrames({
+          projectId,
+          sourceLayerId: sourceLayer.id,
+          sourceResourceId: sourceLayer.resourceId,
+          assetFolderId,
+          assetLabel: sourceLayer.title,
+        });
+        result.assets.forEach((asset) => upsertGeneratedAsset?.(asset));
+        try {
+          await Promise.resolve(refreshAssetLibrary?.());
+        } catch {
+          // 素材已经由服务端原子登记成功；列表刷新失败不能把成功事实伪装成拆帧失败。
+        }
+        setActiveTool('select');
+        setActiveSidebarPanel('assets');
+      } catch (error) {
+        window.alert(
+          error instanceof Error && error.message.trim()
+            ? error.message
+            : '拆分序列帧失败',
+        );
+      } finally {
+        splittingCharacterAnimationLayerIdsRef.current.delete(sourceLayer.id);
+        setSplittingCharacterAnimationLayerIds((currentLayerIds) => {
+          if (!currentLayerIds.has(sourceLayer.id)) {
+            return currentLayerIds;
+          }
+          const nextLayerIds = new Set(currentLayerIds);
+          nextLayerIds.delete(sourceLayer.id);
+          return nextLayerIds;
+        });
+      }
+    },
+    [
+      assetFolderId,
+      closeGenerationTransientState,
+      projectId,
+      refreshAssetLibrary,
+      setActiveSidebarPanel,
+      setActiveTool,
+      setCropExpandPanel,
+      setImageContextMenu,
+      setMetadataLayer,
+      setQuickEditPanel,
+      upsertGeneratedAsset,
+    ],
+  );
+
   const rejectReferenceMutationWhileUploadPending = useCallback(() => {
     if (!hasPendingImageReferenceUploads) {
       return false;
@@ -3552,7 +3674,17 @@ export function useImageCanvasGenerationWorkflow({
         return;
       }
       let rejectedLimit: number | null = null;
+      let rejectedCharacterReference = false;
       setGenerateDialog((currentDialog) => {
+        if (
+          currentDialog?.mode === 'character-animation' &&
+          layer.mediaType !== 'video' &&
+          layer.assetKind !== 'character' &&
+          layer.assetKind !== 'character-animation'
+        ) {
+          rejectedCharacterReference = true;
+          return currentDialog;
+        }
         if (
           currentDialog &&
           currentDialog.mode !== 'video' &&
@@ -3569,6 +3701,10 @@ export function useImageCanvasGenerationWorkflow({
         }
         return appendGenerationReference(currentDialog, layer);
       });
+      if (rejectedCharacterReference) {
+        showGenerationWarning('请选择角色图');
+        return;
+      }
       if (rejectedLimit !== null) {
         showGenerationWarning(`参考图最多允许 ${rejectedLimit} 张`);
         return;
@@ -4535,6 +4671,8 @@ export function useImageCanvasGenerationWorkflow({
       pendingPerfectPixelLayerIds,
       splitSelectedIconSpritesheet,
       splittingIconSpritesheetLayerIds,
+      splitSelectedCharacterAnimationFrames,
+      splittingCharacterAnimationLayerIds,
       taskListRefreshKey,
       refreshTaskList,
       isTaskSidebarOpen,
@@ -4647,6 +4785,8 @@ export function useImageCanvasGenerationWorkflow({
       pendingPerfectPixelLayerIds,
       splitSelectedIconSpritesheet,
       splittingIconSpritesheetLayerIds,
+      splitSelectedCharacterAnimationFrames,
+      splittingCharacterAnimationLayerIds,
       submitCharacterAnimation,
       submitCropExpand,
       submitIconSpritesheetGeneration,
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
index 7d62ce7f7..dd084030f 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
@@ -114,6 +114,7 @@ function StageInteractionsHarness({
   pickGenerationReferenceFromLayer = vi.fn(),
   pickIconSpecFromLayer = vi.fn(),
   isPickingGenerationReferenceFromCanvas = false,
+  generationDialogMode = 'generate',
   activateCanvasGenerationDialog = vi.fn(),
   moveViewportFromMinimapPointer = vi.fn(),
   updateViewportFromMinimapDrag = vi.fn(),
@@ -126,6 +127,7 @@ function StageInteractionsHarness({
   pickGenerationReferenceFromLayer?: (layer: CanvasLayer) => void;
   pickIconSpecFromLayer?: (layer: CanvasLayer) => void;
   isPickingGenerationReferenceFromCanvas?: boolean;
+  generationDialogMode?: GenerateDialogState['mode'];
   activateCanvasGenerationDialog?: (
     dialog: CanvasGenerationDialogState,
   ) => void;
@@ -164,7 +166,7 @@ function StageInteractionsHarness({
   const [generateDialog, setGenerateDialog] =
     useState<GenerateDialogState | null>({
       id: 'dialog-1',
-      mode: 'generate',
+      mode: generationDialogMode,
       prompt: '生成',
       status: 'idle',
       composerOpen: true,
@@ -394,6 +396,21 @@ function StageInteractionsHarness({
       <button type="button" onClick={() => setActiveTool('hand')}>
         切抓手
       </button>
+      <button
+        type="button"
+        onClick={(event) =>
+          interaction.handleLayerPointerDown(
+            createPointerEvent(event.currentTarget, {
+              pointerId: 12,
+              clientX: 40,
+              clientY: 40,
+            }),
+            firstLayer,
+          )
+        }
+      >
+        直接选择第一层为生成参考
+      </button>
       <button
         type="button"
         onClick={(event) => {
@@ -806,6 +823,28 @@ function StageInteractionsHarness({
 }
 
 describe('useImageCanvasStageInteractions', () => {
+  it('routes character animation canvas reference picks through the layer pointer path', () => {
+    const pickGenerationReferenceFromLayer = vi.fn();
+    render(
+      <StageInteractionsHarness
+        generationDialogMode="character-animation"
+        isPickingGenerationReferenceFromCanvas
+        pickGenerationReferenceFromLayer={pickGenerationReferenceFromLayer}
+      />,
+    );
+
+    act(() => {
+      screen
+        .getByRole('button', { name: '直接选择第一层为生成参考' })
+        .click();
+    });
+
+    expect(pickGenerationReferenceFromLayer).toHaveBeenCalledTimes(1);
+    expect(pickGenerationReferenceFromLayer).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'first' }),
+    );
+  });
+
   it('selects and drags multiple layers from stage pointer events', () => {
     const captureCanvasHistory = vi.fn();
     render(
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts
index d1cc7fda4..7d26bbdf0 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.ts
+++ b/src/components/image-editor/useImageCanvasStageInteractions.ts
@@ -327,7 +327,8 @@ export function useImageCanvasStageInteractions({
         (generateDialog?.mode === 'generate' ||
           generateDialog?.mode === 'scene' ||
           generateDialog?.mode === 'video' ||
-          generateDialog?.mode === 'spec')
+          generateDialog?.mode === 'spec' ||
+          generateDialog?.mode === 'character-animation')
       ) {
         focusCanvasInteractionTarget(event.currentTarget);
         event.preventDefault();
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
index 862cf19a6..1bfc1e227 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
@@ -23,6 +23,7 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   type ImageReferenceUploadCapacity,
+  resolveGenerationMediaReferenceUploadCapacity,
   useImageCanvasUploadWorkflow,
 } from './useImageCanvasUploadWorkflow';
 
@@ -136,7 +137,7 @@ function UploadWorkflowHarness({
   openEditorLoginModal = vi.fn(),
   activeTool = 'select',
   projectId = 'project-1',
-  resolveImageReferenceUploadCapacity = () => null,
+  resolveImageReferenceUploadCapacity,
   refreshAssetLibrary,
 }: {
   canAccessProtectedData?: boolean;
@@ -157,6 +158,8 @@ function UploadWorkflowHarness({
     useState<NonNullable<GenerateDialogState['generationReferences']>>([]);
   const [generateDialog, setGenerateDialog] =
     useState<GenerateDialogState | null>(null);
+  const generateDialogRef = useRef(generateDialog);
+  generateDialogRef.current = generateDialog;
   const [, setQuickEditPanel] = useState<QuickEditPanelState | null>(null);
   const [activeSidebarPanel] = useState<SidebarPanel | null>('assets');
   const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
@@ -171,6 +174,7 @@ function UploadWorkflowHarness({
     canvasSize: { width: 900, height: 640 },
     viewport: { x: 10, y: 20, scale: 2 },
     activeTool,
+    generateDialog,
     allocateUploadIndex: () => {
       uploadIndexRef.current += 1;
       return uploadIndexRef.current;
@@ -180,7 +184,12 @@ function UploadWorkflowHarness({
     setLayers,
     setGenerateDialog,
     setQuickEditPanel,
-    resolveImageReferenceUploadCapacity,
+    resolveImageReferenceUploadCapacity: (target) =>
+      resolveImageReferenceUploadCapacity?.(target) ??
+      resolveGenerationMediaReferenceUploadCapacity({
+        target,
+        dialog: generateDialogRef.current,
+      }),
     appendUiAssetExtractionReferences: (references) =>
       setUiAssetExtractionReferences((currentReferences) => [
         ...currentReferences,
@@ -349,6 +358,7 @@ function UploadWorkflowHarness({
         type="button"
         onClick={() =>
           setGenerateDialog({
+            id: 'video-dialog',
             mode: 'video',
             prompt: '',
             status: 'failed',
@@ -358,6 +368,20 @@ function UploadWorkflowHarness({
       >
         准备视频生成
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          setGenerateDialog({
+            id: 'character-animation-dialog',
+            mode: 'character-animation',
+            prompt: '',
+            status: 'failed',
+            generationReferences: [],
+          })
+        }
+      >
+        准备Spine序列帧生成
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -409,6 +433,12 @@ function UploadWorkflowHarness({
       >
         请求角色规范上传
       </button>
+      <button
+        type="button"
+        onClick={() => workflow.setUploadTarget('video-reference-image')}
+      >
+        选择视频参考图
+      </button>
       <button
         type="button"
         onClick={() => workflow.setUploadTarget('video-reference-video')}
@@ -1111,7 +1141,7 @@ describe('useImageCanvasUploadWorkflow', () => {
     expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
   });
 
-  it('rechecks capacity after object upload and before creating project resources', async () => {
+  it('rechecks capacity before object upload and project persistence', async () => {
     const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
     let capacityChecks = 0;
     render(
@@ -1143,7 +1173,7 @@ describe('useImageCanvasUploadWorkflow', () => {
         '生成参考图最多允许 5 张，当前已有 0 张，本次最多还能选择 5 张',
       );
     });
-    expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledTimes(6);
+    expect(uploadEditorMediaAssetFileMock).not.toHaveBeenCalled();
     expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
   });
 
@@ -1328,6 +1358,370 @@ describe('useImageCanvasUploadWorkflow', () => {
     expect(createEditorProjectResourceMock).toHaveBeenCalledTimes(1);
   });
 
+  it('resolves per-media capacity and dialog identity for video and character-animation', () => {
+    const videoDialog: GenerateDialogState = {
+      id: 'video-dialog',
+      mode: 'video',
+      prompt: '',
+      status: 'idle',
+      generationReferences: [
+        { id: 'image-1', label: '图片', src: 'image.png' },
+        {
+          id: 'video-1',
+          label: '视频',
+          src: 'video.mp4',
+          mediaType: 'video',
+        },
+        {
+          id: 'audio-1',
+          label: '音频',
+          src: 'audio.mp3',
+          mediaType: 'audio',
+        },
+      ],
+    };
+
+    expect(
+      resolveGenerationMediaReferenceUploadCapacity({
+        target: 'video-reference-image',
+        dialog: videoDialog,
+      }),
+    ).toMatchObject({ currentCount: 1, limit: 9, contextId: 'video-dialog' });
+    expect(
+      resolveGenerationMediaReferenceUploadCapacity({
+        target: 'video-reference-video',
+        dialog: videoDialog,
+      }),
+    ).toMatchObject({ currentCount: 1, limit: 3, contextId: 'video-dialog' });
+    expect(
+      resolveGenerationMediaReferenceUploadCapacity({
+        target: 'video-reference-audio',
+        dialog: videoDialog,
+      }),
+    ).toMatchObject({ currentCount: 1, limit: 3, contextId: 'video-dialog' });
+
+    const characterAnimationDialog: GenerateDialogState = {
+      id: 'character-animation-dialog',
+      mode: 'character-animation',
+      prompt: '',
+      status: 'idle',
+      generationReferences: [videoDialog.generationReferences![1]!],
+    };
+    expect(
+      resolveGenerationMediaReferenceUploadCapacity({
+        target: 'video-reference-image',
+        dialog: characterAnimationDialog,
+      }),
+    ).toMatchObject({
+      currentCount: 0,
+      limit: 1,
+      contextId: 'character-animation-dialog',
+    });
+    expect(
+      resolveGenerationMediaReferenceUploadCapacity({
+        target: 'video-reference-video',
+        dialog: characterAnimationDialog,
+      }),
+    ).toMatchObject({
+      currentCount: 0,
+      limit: 1,
+      contextId: 'character-animation-dialog',
+    });
+    expect(
+      resolveGenerationMediaReferenceUploadCapacity({
+        target: 'video-reference-audio',
+        dialog: characterAnimationDialog,
+      }),
+    ).toBeNull();
+  });
+
+  it('does not persist or apply a video reference after switching from video to character-animation during upload', async () => {
+    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    const uploadGate = createDeferred<{
+      src: string;
+      objectKey: string;
+      assetObjectId: string;
+    }>();
+    uploadEditorSeedanceReferenceFileMock.mockReturnValueOnce(
+      uploadGate.promise,
+    );
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备视频生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择参考视频' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [new File(['video'], '切换中的视频.mp4', { type: 'video/mp4' })],
+      },
+    });
+    act(() => {
+      createdMediaElements[0]?.onloadedmetadata?.(new Event('loadedmetadata'));
+    });
+    await waitFor(() => {
+      expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('pending-reference-uploads').textContent).toBe(
+        '1',
+      );
+    });
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '准备Spine序列帧生成' }),
+    );
+    await act(async () => {
+      uploadGate.resolve({
+        src: 'https://signed.example.com/video/switched.mp4',
+        objectKey: 'seedance/video/switched.mp4',
+        assetObjectId: 'assetobj-switched-video',
+      });
+      await uploadGate.promise;
+    });
+
+    await waitFor(() => {
+      expect(alertMock).toHaveBeenCalledWith(
+        '参考图上传目标已关闭或切换，本次结果不会添加到其他面板',
+      );
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'character-animation:failed:-:0:-:-:0',
+      );
+      expect(screen.getByTestId('pending-reference-uploads').textContent).toBe(
+        '0',
+      );
+    });
+    expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
+  it('does not persist or apply an image reference after switching from character-animation to video during upload', async () => {
+    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    const uploadGate = createDeferred<{
+      src: string;
+      legacyPublicPath: string;
+      objectKey: string;
+      assetObjectId: string;
+    }>();
+    uploadEditorMediaAssetFileMock.mockReturnValueOnce(uploadGate.promise);
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '准备Spine序列帧生成' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '选择视频参考图' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: { files: [createTestFile('切换中的参考图.png')] },
+    });
+    await waitFor(() => {
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('pending-reference-uploads').textContent).toBe(
+        '1',
+      );
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '准备视频生成' }));
+    await act(async () => {
+      uploadGate.resolve({
+        src: 'https://signed.example.com/image/switched.png',
+        legacyPublicPath: '/generated/image/switched.png',
+        objectKey: 'asset-library/image/switched.png',
+        assetObjectId: 'assetobj-switched-image',
+      });
+      await uploadGate.promise;
+    });
+
+    await waitFor(() => {
+      expect(alertMock).toHaveBeenCalledWith(
+        '参考图上传目标已关闭或切换，本次结果不会添加到其他面板',
+      );
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'video:failed:-:0:-:-:0',
+      );
+      expect(screen.getByTestId('pending-reference-uploads').textContent).toBe(
+        '0',
+      );
+    });
+    expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
+  it('does not persist or apply an audio reference after switching away from the video dialog during upload', async () => {
+    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    const uploadGate = createDeferred<{
+      src: string;
+      objectKey: string;
+      assetObjectId: string;
+    }>();
+    uploadEditorSeedanceReferenceFileMock.mockReturnValueOnce(
+      uploadGate.promise,
+    );
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备视频生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择参考音频' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [
+          new File(['audio'], '切换中的音频.mp3', { type: 'audio/mpeg' }),
+        ],
+      },
+    });
+    act(() => {
+      createdMediaElements[0]?.onloadedmetadata?.(new Event('loadedmetadata'));
+    });
+    await waitFor(() => {
+      expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('pending-reference-uploads').textContent).toBe(
+        '1',
+      );
+    });
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '准备Spine序列帧生成' }),
+    );
+    await act(async () => {
+      uploadGate.resolve({
+        src: 'https://signed.example.com/audio/switched.mp3',
+        objectKey: 'seedance/audio/switched.mp3',
+        assetObjectId: 'assetobj-switched-audio',
+      });
+      await uploadGate.promise;
+    });
+
+    await waitFor(() => {
+      expect(alertMock).toHaveBeenCalledWith(
+        '参考图上传目标已关闭或切换，本次结果不会添加到其他面板',
+      );
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'character-animation:failed:-:0:-:-:0',
+      );
+      expect(screen.getByTestId('pending-reference-uploads').textContent).toBe(
+        '0',
+      );
+    });
+    expect(createEditorProjectResourceMock).not.toHaveBeenCalled();
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
+  it('uploads and persists only the first selected character-animation image reference', async () => {
+    render(<UploadWorkflowHarness activeTool="select" />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '准备Spine序列帧生成' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '选择视频参考图' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [
+          createTestFile('序列帧参考一.png'),
+          createTestFile('序列帧参考二.png'),
+        ],
+      },
+    });
+
+    await waitFor(() => {
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledTimes(1);
+      expect(createEditorProjectResourceMock).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'character-animation:idle:-:0:-:-:1:序列帧参考一.png',
+      );
+    });
+    expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledWith(
+      expect.objectContaining({ name: '序列帧参考一.png' }),
+      'image',
+    );
+    expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
+      'project-1',
+      expect.objectContaining({
+        imageSrc:
+          '/generated-character-drafts/editor/asset-library/image/序列帧参考一.png',
+      }),
+    );
+    expect(screen.getByTestId('dialog').textContent).not.toContain(
+      '序列帧参考二.png',
+    );
+  });
+
+  it('probes, uploads, and persists only the first selected character-animation video reference', async () => {
+    render(<UploadWorkflowHarness activeTool="select" />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '准备Spine序列帧生成' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '选择参考视频' }));
+    const mediaElementStartIndex = createdMediaElements.length;
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [
+          new File(['video'], '序列帧视频一.mp4', { type: 'video/mp4' }),
+          new File(['video'], '序列帧视频二.mp4', { type: 'video/mp4' }),
+        ],
+      },
+    });
+
+    const selectedMediaElements = [
+      ...new Set(createdMediaElements.slice(mediaElementStartIndex)),
+    ];
+    expect(selectedMediaElements).toHaveLength(1);
+    setVideoElementSize(selectedMediaElements[0], 1080, 1920);
+    act(() => {
+      selectedMediaElements[0]?.onloadedmetadata?.(new Event('loadedmetadata'));
+    });
+
+    await waitFor(() => {
+      expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledTimes(1);
+      expect(createEditorProjectResourceMock).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'character-animation:idle:-:0:-:-:1:序列帧视频一.mp4',
+      );
+    });
+    expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledWith(
+      expect.objectContaining({ name: '序列帧视频一.mp4' }),
+      'video',
+    );
+    expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
+      'project-1',
+      expect.objectContaining({ width: 1080, height: 1920 }),
+    );
+    expect(screen.getByTestId('dialog').textContent).not.toContain(
+      '序列帧视频二.mp4',
+    );
+  });
+
+  it('keeps multiple reference video uploads for the video dialog', async () => {
+    render(<UploadWorkflowHarness activeTool="video" />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备视频生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择参考视频' }));
+    const mediaElementStartIndex = createdMediaElements.length;
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [
+          new File(['video'], '普通视频参考一.mp4', { type: 'video/mp4' }),
+          new File(['video'], '普通视频参考二.mp4', { type: 'video/mp4' }),
+        ],
+      },
+    });
+
+    const selectedMediaElements = [
+      ...new Set(createdMediaElements.slice(mediaElementStartIndex)),
+    ];
+    expect(selectedMediaElements).toHaveLength(2);
+    act(() => {
+      selectedMediaElements.forEach((element) => {
+        element.onloadedmetadata?.(new Event('loadedmetadata'));
+      });
+    });
+
+    await waitFor(() => {
+      expect(uploadEditorSeedanceReferenceFileMock).toHaveBeenCalledTimes(2);
+      expect(createEditorProjectResourceMock).toHaveBeenCalledTimes(2);
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'video:idle:-:0:-:-:2:普通视频参考一.mp4',
+      );
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        '普通视频参考二.mp4',
+      );
+    });
+  });
+
   it('uploads Seedance reference videos through OSS and stores object keys instead of data URLs', async () => {
     render(<UploadWorkflowHarness />);
 
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 65972054d..7a51d2cb7 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -47,6 +47,7 @@ import {
   resolveEditorAssetUploadMediaType,
   SEEDANCE_REFERENCE_FILE_LIMITS,
 } from './ImageCanvasFileModel';
+import { SEEDANCE_VIDEO_REFERENCE_LIMITS } from './ImageCanvasGenerationModel';
 import {
   applyGenerationReferenceUpload,
   applyMeasuredUploadAssetSize,
@@ -91,6 +92,84 @@ export type ImageReferenceUploadCapacity = {
   contextId?: string;
 };
 
+const GENERATION_MEDIA_REFERENCE_TARGETS = [
+  'video-reference-image',
+  'video-reference-video',
+  'video-reference-audio',
+] as const satisfies readonly UploadTarget[];
+
+type GenerationMediaReferenceTarget =
+  (typeof GENERATION_MEDIA_REFERENCE_TARGETS)[number];
+
+function isGenerationMediaReferenceTarget(
+  target: UploadTarget,
+): target is GenerationMediaReferenceTarget {
+  return GENERATION_MEDIA_REFERENCE_TARGETS.includes(
+    target as GenerationMediaReferenceTarget,
+  );
+}
+
+function countGenerationMediaReferenceFiles(
+  target: GenerationMediaReferenceTarget,
+  files: FileList | File[],
+) {
+  const isSupportedFile =
+    target === 'video-reference-video'
+      ? isSeedanceReferenceVideoFile
+      : target === 'video-reference-audio'
+        ? isSeedanceReferenceAudioFile
+        : isSeedanceReferenceImageFile;
+  return Array.from(files).filter(isSupportedFile).length;
+}
+
+export function resolveGenerationMediaReferenceUploadCapacity({
+  target,
+  dialog,
+}: {
+  target: UploadTarget;
+  dialog: GenerateDialogState | null;
+}): ImageReferenceUploadCapacity | null {
+  if (!isGenerationMediaReferenceTarget(target) || !dialog) {
+    return null;
+  }
+  const mediaType =
+    target === 'video-reference-video'
+      ? 'video'
+      : target === 'video-reference-audio'
+        ? 'audio'
+        : 'image';
+  const contextId =
+    dialog.id ?? `${dialog.mode}:${dialog.sourceLayerId ?? 'draft'}`;
+  if (dialog.mode === 'character-animation') {
+    return mediaType === 'audio'
+      ? null
+      : {
+          label: mediaType === 'video' ? '序列帧参考视频' : '序列帧参考图',
+          // 序列帧是单槽替换语义：已有参考不占用“新上传”容量；pending reservation
+          // 仍保证同一 dialog 同时最多启动一个替换上传。
+          currentCount: 0,
+          limit: 1,
+          contextId,
+        };
+  }
+  if (dialog.mode !== 'video') {
+    return null;
+  }
+  return {
+    label:
+      mediaType === 'video'
+        ? '参考视频'
+        : mediaType === 'audio'
+          ? '参考音频'
+          : '视频参考图',
+    currentCount: (dialog.generationReferences ?? []).filter(
+      (reference) => (reference.mediaType ?? 'image') === mediaType,
+    ).length,
+    limit: SEEDANCE_VIDEO_REFERENCE_LIMITS[mediaType],
+    contextId,
+  };
+}
+
 type ImageReferenceUploadReservation = {
   target: UploadTarget;
   count: number;
@@ -109,6 +188,7 @@ type UseImageCanvasUploadWorkflowOptions = {
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
   activeTool: CanvasTool;
+  generateDialog: GenerateDialogState | null;
   allocateUploadIndex: () => number;
   setAssetFolders: Dispatch<SetStateAction<EditorAssetFolder[]>>;
   setAssets: Dispatch<SetStateAction<EditorAsset[]>>;
@@ -144,6 +224,22 @@ function resolveReferenceFallbackSize(mediaType: CanvasMediaType) {
   return { width: 420, height: 315 };
 }
 
+function resolveVideoReferenceUploadFiles({
+  files,
+  target,
+  generateDialog,
+}: {
+  files: FileList | File[];
+  target: UploadTarget;
+  generateDialog: GenerateDialogState | null;
+}) {
+  const selectedFiles = Array.from(files);
+  return generateDialog?.mode === 'character-animation' &&
+    (target === 'video-reference-image' || target === 'video-reference-video')
+    ? selectedFiles.slice(0, 1)
+    : selectedFiles;
+}
+
 export function useImageCanvasUploadWorkflow({
   canAccessProtectedData,
   openEditorLoginModal,
@@ -153,6 +249,7 @@ export function useImageCanvasUploadWorkflow({
   canvasSize,
   viewport,
   activeTool,
+  generateDialog,
   allocateUploadIndex,
   setAssetFolders,
   setAssets,
@@ -206,6 +303,10 @@ export function useImageCanvasUploadWorkflow({
   const reserveImageReferenceUpload = useCallback(
     (target: UploadTarget, count: number) => {
       const capacity = resolveImageReferenceUploadCapacity(target);
+      if (!capacity && isGenerationMediaReferenceTarget(target)) {
+        window.alert('参考媒体上传目标已关闭或切换，请重新选择');
+        return null;
+      }
       const key = `${target}\u0000${capacity?.contextId ?? ''}`;
       const pending = pendingImageReferenceUploadsRef.current[key] ?? 0;
       if (capacity) {
@@ -291,6 +392,8 @@ export function useImageCanvasUploadWorkflow({
       mimeType,
       sizeBytes,
       durationSeconds,
+      mediaWidth,
+      mediaHeight,
       objectKey,
       assetObjectId,
       reservation,
@@ -305,12 +408,20 @@ export function useImageCanvasUploadWorkflow({
       mimeType?: string;
       sizeBytes?: number;
       durationSeconds?: number;
+      mediaWidth?: number;
+      mediaHeight?: number;
       objectKey?: string | null;
       assetObjectId?: string | null;
       reservation?: ImageReferenceUploadReservation;
       authoritativeAssetKind?: CanvasAssetKind;
     }): Promise<CharacterReferenceImage> => {
       const resolvedMediaType = mediaType ?? 'image';
+      if (
+        reservation &&
+        !validateImageReferenceUploadReservation(reservation)
+      ) {
+        throw new ImageReferenceCapacityChangedError();
+      }
       let persistedImageSrc = imageSrc;
       let persistedObjectKey = objectKey;
       let persistedAssetObjectId = assetObjectId;
@@ -325,8 +436,9 @@ export function useImageCanvasUploadWorkflow({
         resolvedMediaType === 'image'
           ? await probeImageFileDimensions(file).catch(() => null)
           : null;
-      const width = imageDimensions?.width ?? fallbackSize.width;
-      const height = imageDimensions?.height ?? fallbackSize.height;
+      const width = mediaWidth ?? imageDimensions?.width ?? fallbackSize.width;
+      const height =
+        mediaHeight ?? imageDimensions?.height ?? fallbackSize.height;
       if (
         reservation &&
         !validateImageReferenceUploadReservation(reservation)
@@ -352,6 +464,12 @@ export function useImageCanvasUploadWorkflow({
           assetKind,
           generationInputs,
         });
+        if (
+          reservation &&
+          !validateImageReferenceUploadReservation(reservation)
+        ) {
+          throw new ImageReferenceCapacityChangedError();
+        }
         return createUploadedGenerationReference({
           idPrefix,
           index,
@@ -362,6 +480,8 @@ export function useImageCanvasUploadWorkflow({
           mimeType,
           sizeBytes,
           durationSeconds,
+          width,
+          height,
           objectKey: persistedObjectKey,
           assetObjectId: persistedAssetObjectId,
           resourceId: resource.resourceId,
@@ -386,6 +506,12 @@ export function useImageCanvasUploadWorkflow({
         assetKind,
         generationInputs,
       });
+      if (
+        reservation &&
+        !validateImageReferenceUploadReservation(reservation)
+      ) {
+        throw new ImageReferenceCapacityChangedError();
+      }
       return createUploadedGenerationReference({
         idPrefix,
         index,
@@ -396,6 +522,8 @@ export function useImageCanvasUploadWorkflow({
         mimeType,
         sizeBytes,
         durationSeconds,
+        width,
+        height,
         objectKey: persistedObjectKey,
         assetObjectId: persistedAssetObjectId,
         sourceAssetId: asset.assetId,
@@ -421,6 +549,8 @@ export function useImageCanvasUploadWorkflow({
         mimeType?: string;
         sizeBytes?: number;
         durationSeconds?: number;
+        mediaWidth?: number;
+        mediaHeight?: number;
         objectKey?: string | null;
         assetObjectId?: string | null;
         authoritativeAssetKind?: CanvasAssetKind;
@@ -867,7 +997,10 @@ export function useImageCanvasUploadWorkflow({
   );
 
   const addVideoReferenceImageFiles = useCallback(
-    async (files: FileList | File[]) => {
+    async (
+      files: FileList | File[],
+      reservation: ImageReferenceUploadReservation,
+    ) => {
       const imageFiles = Array.from(files).filter(isSeedanceReferenceImageFile);
       if (!imageFiles.length) {
         window.alert('请选择 Seedance 支持的图片文件');
@@ -888,6 +1021,9 @@ export function useImageCanvasUploadWorkflow({
           src: await readFileAsDataUrl(file),
         })),
       );
+      if (!validateImageReferenceUploadReservation(reservation)) {
+        return;
+      }
       const persistedReferences = await persistReferenceUploads(
         references.map(({ file, src, index }) => ({
           idPrefix: 'upload-video-reference-image',
@@ -899,23 +1035,39 @@ export function useImageCanvasUploadWorkflow({
           mimeType: file.type || undefined,
           sizeBytes: file.size,
         })),
+        reservation,
       );
-      if (persistedReferences.length === 0) {
+      if (
+        persistedReferences.length === 0 ||
+        !validateImageReferenceUploadReservation(reservation)
+      ) {
         return;
       }
       setGenerateDialog((currentDialog) =>
-        applyGenerationReferenceUpload({
-          dialog: currentDialog,
+        resolveGenerationMediaReferenceUploadCapacity({
           target: 'video-reference-image',
-          references: persistedReferences,
-        }),
+          dialog: currentDialog,
+        })?.contextId === reservation.contextId
+          ? applyGenerationReferenceUpload({
+              dialog: currentDialog,
+              target: 'video-reference-image',
+              references: persistedReferences,
+            })
+          : currentDialog,
       );
     },
-    [persistReferenceUploads, setGenerateDialog],
+    [
+      persistReferenceUploads,
+      setGenerateDialog,
+      validateImageReferenceUploadReservation,
+    ],
   );
 
   const addVideoReferenceVideoFiles = useCallback(
-    async (files: FileList | File[]) => {
+    async (
+      files: FileList | File[],
+      reservation: ImageReferenceUploadReservation,
+    ) => {
       const videoFiles = Array.from(files).filter(isSeedanceReferenceVideoFile);
       if (!videoFiles.length) {
         window.alert('请选择 mp4 或 mov 视频文件');
@@ -931,17 +1083,18 @@ export function useImageCanvasUploadWorkflow({
       }
       const references = await Promise.all(
         videoFiles.map(async (file, index) => {
-          const durationSeconds = await probeMediaDurationSeconds(
-            file,
-            'video',
-          );
+          const metadata = await probeMediaFileMetadata(file, 'video');
           return {
             file,
             index,
-            durationSeconds,
+            durationSeconds: metadata.durationSeconds,
+            dimensions: metadata.dimensions,
           };
         }),
       );
+      if (!validateImageReferenceUploadReservation(reservation)) {
+        return;
+      }
       if (
         references.some(
           ({ durationSeconds }) =>
@@ -972,29 +1125,44 @@ export function useImageCanvasUploadWorkflow({
         file: File;
         index: number;
         durationSeconds: number;
+        dimensions: { width: number; height: number } | null;
         src: string;
         objectKey: string;
         assetObjectId: string;
       }>;
       try {
         uploadedReferences = await Promise.all(
-          references.map(async ({ file, index, durationSeconds }) => {
-            const uploaded = await uploadEditorSeedanceReferenceFile(
-              file,
-              'video',
-            );
-            return {
-              file,
-              index,
-              durationSeconds,
-              src: uploaded.src,
-              objectKey: uploaded.objectKey,
-              assetObjectId: uploaded.assetObjectId,
-            };
-          }),
+          references.map(
+            async ({ file, index, durationSeconds, dimensions }) => {
+              if (!validateImageReferenceUploadReservation(reservation)) {
+                throw new ImageReferenceCapacityChangedError();
+              }
+              const uploaded = await uploadEditorSeedanceReferenceFile(
+                file,
+                'video',
+              );
+              if (!validateImageReferenceUploadReservation(reservation)) {
+                throw new ImageReferenceCapacityChangedError();
+              }
+              return {
+                file,
+                index,
+                durationSeconds,
+                dimensions,
+                src: uploaded.src,
+                objectKey: uploaded.objectKey,
+                assetObjectId: uploaded.assetObjectId,
+              };
+            },
+          ),
         );
-      } catch {
-        window.alert('参考视频上传失败，请稍后重试');
+      } catch (error) {
+        if (!(error instanceof ImageReferenceCapacityChangedError)) {
+          window.alert('参考视频上传失败，请稍后重试');
+        }
+        return;
+      }
+      if (!validateImageReferenceUploadReservation(reservation)) {
         return;
       }
       const persistedReferences = await persistReferenceUploads(
@@ -1004,6 +1172,7 @@ export function useImageCanvasUploadWorkflow({
             src,
             index,
             durationSeconds,
+            dimensions,
             objectKey,
             assetObjectId,
           }) => ({
@@ -1016,27 +1185,45 @@ export function useImageCanvasUploadWorkflow({
             mimeType: file.type || undefined,
             sizeBytes: file.size,
             durationSeconds,
+            mediaWidth: dimensions?.width,
+            mediaHeight: dimensions?.height,
             objectKey,
             assetObjectId,
           }),
         ),
+        reservation,
       );
-      if (persistedReferences.length === 0) {
+      if (
+        persistedReferences.length === 0 ||
+        !validateImageReferenceUploadReservation(reservation)
+      ) {
         return;
       }
       setGenerateDialog((currentDialog) =>
-        applyGenerationReferenceUpload({
-          dialog: currentDialog,
+        resolveGenerationMediaReferenceUploadCapacity({
           target: 'video-reference-video',
-          references: persistedReferences,
-        }),
+          dialog: currentDialog,
+        })?.contextId === reservation.contextId
+          ? applyGenerationReferenceUpload({
+              dialog: currentDialog,
+              target: 'video-reference-video',
+              references: persistedReferences,
+            })
+          : currentDialog,
       );
     },
-    [persistReferenceUploads, setGenerateDialog],
+    [
+      persistReferenceUploads,
+      setGenerateDialog,
+      validateImageReferenceUploadReservation,
+    ],
   );
 
   const addVideoReferenceAudioFiles = useCallback(
-    async (files: FileList | File[]) => {
+    async (
+      files: FileList | File[],
+      reservation: ImageReferenceUploadReservation,
+    ) => {
       const audioFiles = Array.from(files).filter(isSeedanceReferenceAudioFile);
       if (!audioFiles.length) {
         window.alert('请选择 wav 或 mp3 音频文件');
@@ -1063,6 +1250,9 @@ export function useImageCanvasUploadWorkflow({
           };
         }),
       );
+      if (!validateImageReferenceUploadReservation(reservation)) {
+        return;
+      }
       if (
         references.some(
           ({ durationSeconds }) =>
@@ -1100,10 +1290,16 @@ export function useImageCanvasUploadWorkflow({
       try {
         uploadedReferences = await Promise.all(
           references.map(async ({ file, index, durationSeconds }) => {
+            if (!validateImageReferenceUploadReservation(reservation)) {
+              throw new ImageReferenceCapacityChangedError();
+            }
             const uploaded = await uploadEditorSeedanceReferenceFile(
               file,
               'audio',
             );
+            if (!validateImageReferenceUploadReservation(reservation)) {
+              throw new ImageReferenceCapacityChangedError();
+            }
             return {
               file,
               index,
@@ -1114,8 +1310,13 @@ export function useImageCanvasUploadWorkflow({
             };
           }),
         );
-      } catch {
-        window.alert('参考音频上传失败，请稍后重试');
+      } catch (error) {
+        if (!(error instanceof ImageReferenceCapacityChangedError)) {
+          window.alert('参考音频上传失败，请稍后重试');
+        }
+        return;
+      }
+      if (!validateImageReferenceUploadReservation(reservation)) {
         return;
       }
       const persistedReferences = await persistReferenceUploads(
@@ -1141,19 +1342,32 @@ export function useImageCanvasUploadWorkflow({
             assetObjectId,
           }),
         ),
+        reservation,
       );
-      if (persistedReferences.length === 0) {
+      if (
+        persistedReferences.length === 0 ||
+        !validateImageReferenceUploadReservation(reservation)
+      ) {
         return;
       }
       setGenerateDialog((currentDialog) =>
-        applyGenerationReferenceUpload({
-          dialog: currentDialog,
+        resolveGenerationMediaReferenceUploadCapacity({
           target: 'video-reference-audio',
-          references: persistedReferences,
-        }),
+          dialog: currentDialog,
+        })?.contextId === reservation.contextId
+          ? applyGenerationReferenceUpload({
+              dialog: currentDialog,
+              target: 'video-reference-audio',
+              references: persistedReferences,
+            })
+          : currentDialog,
       );
     },
-    [persistReferenceUploads, setGenerateDialog],
+    [
+      persistReferenceUploads,
+      setGenerateDialog,
+      validateImageReferenceUploadReservation,
+    ],
   );
 
   const addIconSpecReferenceFiles = useCallback(
@@ -1547,6 +1761,27 @@ export function useImageCanvasUploadWorkflow({
     [openEditorLoginModal, openUploadPicker],
   );
 
+  const startGenerationMediaReferenceUpload = useCallback(
+    (
+      target: GenerationMediaReferenceTarget,
+      files: FileList | File[],
+      upload: (
+        selectedFiles: FileList | File[],
+        reservation: ImageReferenceUploadReservation,
+      ) => Promise<void>,
+    ) => {
+      const reservation = reserveImageReferenceUpload(
+        target,
+        countGenerationMediaReferenceFiles(target, files),
+      );
+      if (!reservation) {
+        return;
+      }
+      void upload(files, reservation).finally(reservation.release);
+    },
+    [reserveImageReferenceUpload],
+  );
+
   const handleUploadInputChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       const files = event.currentTarget.files;
@@ -1563,11 +1798,31 @@ export function useImageCanvasUploadWorkflow({
         } else if (currentUploadTarget === 'publication-reference') {
           void addPublicationReferenceFiles(files);
         } else if (currentUploadTarget === 'video-reference-image') {
-          void addVideoReferenceImageFiles(files);
+          startGenerationMediaReferenceUpload(
+            currentUploadTarget,
+            resolveVideoReferenceUploadFiles({
+              files,
+              target: currentUploadTarget,
+              generateDialog,
+            }),
+            addVideoReferenceImageFiles,
+          );
         } else if (currentUploadTarget === 'video-reference-video') {
-          void addVideoReferenceVideoFiles(files);
+          startGenerationMediaReferenceUpload(
+            currentUploadTarget,
+            resolveVideoReferenceUploadFiles({
+              files,
+              target: currentUploadTarget,
+              generateDialog,
+            }),
+            addVideoReferenceVideoFiles,
+          );
         } else if (currentUploadTarget === 'video-reference-audio') {
-          void addVideoReferenceAudioFiles(files);
+          startGenerationMediaReferenceUpload(
+            currentUploadTarget,
+            files,
+            addVideoReferenceAudioFiles,
+          );
         } else if (currentUploadTarget === 'character-spec') {
           void addCharacterSpecReferenceFiles(files);
         } else if (currentUploadTarget === 'character-reference') {
@@ -1590,6 +1845,7 @@ export function useImageCanvasUploadWorkflow({
     },
     [
       activeTool,
+      generateDialog,
       addCharacterReferenceFiles,
       addCharacterSpecReferenceFiles,
       addGenerationReferenceFiles,
@@ -1604,6 +1860,7 @@ export function useImageCanvasUploadWorkflow({
       addUiDesignSpecReferenceFiles,
       addUploadedFiles,
       setUploadTarget,
+      startGenerationMediaReferenceUpload,
     ],
   );
 
diff --git a/src/index.css b/src/index.css
index c0daebe10..1bb7bdece 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6690,8 +6690,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   bottom: 0.85rem;
   z-index: 18;
   display: inline-flex;
+  width: max-content;
+  min-width: 0;
+  max-width: calc(100% - 1.5rem);
   gap: 0.35rem;
-  max-width: min(calc(100% - 6.6rem), 34rem);
   overflow-x: auto;
   border: 1px solid var(--image-canvas-brand-border-soft);
   border-radius: 0.5rem;
@@ -6699,6 +6701,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   padding: 0.35rem;
   box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
   transform: translateX(-50%);
+  scrollbar-width: none;
+}
+
+.image-canvas-editor__bottom-toolbar::-webkit-scrollbar {
+  display: none;
 }
 
 .image-canvas-editor__bottom-toolbar--guided {
@@ -6708,6 +6715,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     0 0 0 3px rgba(255, 79, 79, 0.24);
 }
 
+.image-canvas-editor__sequence-animation-icon {
+  stroke: currentColor;
+  stroke-width: 1.65;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.image-canvas-editor__sequence-animation-entry
+  .image-canvas-editor__sequence-animation-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+.image-canvas-editor__sequence-animation-icon-play {
+  fill: currentColor;
+  stroke: none;
+}
+
 .image-canvas-editor__toolbar-guide {
   position: absolute;
   left: 50%;
@@ -6811,7 +6836,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__generation-composer--character-animation {
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto auto auto auto auto;
-  width: min(42rem, calc(100% - 1.5rem));
+  width: min(30rem, calc(100% - 1.5rem));
+  gap: 0.72rem;
+  padding: 1rem 1rem 0.78rem;
 }
 
 .image-canvas-editor__generation-ref {
@@ -8773,7 +8800,7 @@ button.image-canvas-editor__reference-chip:disabled {
 
 .image-canvas-editor__character-animation-textarea {
   grid-column: 1 / -1;
-  --auto-grow-editor-min-height: 8rem;
+  --auto-grow-editor-min-height: 4rem;
   --auto-grow-editor-max-height: 16rem;
 }
 
@@ -8781,34 +8808,269 @@ button.image-canvas-editor__reference-chip:disabled {
   display: flex;
   grid-column: 1 / -1;
   flex-wrap: wrap;
-  gap: 0.38rem;
+  gap: 0.48rem;
 }
 
 .image-canvas-editor__character-animation-preset {
-  border: 1px solid rgba(148, 163, 184, 0.28);
-  border-radius: 999px;
-  background: #f8fafc;
-  padding: 0.34rem 0.58rem;
+  display: inline-flex;
+  min-height: 2.2rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 0.62rem;
+  background: #f1f2f3;
+  padding: 0.34rem 0.42rem;
   color: #334155;
-  font-size: 0.78rem;
+  font-size: 0.76rem;
+  font-weight: 760;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    border-color 150ms ease,
+    background-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.image-canvas-editor__character-animation-preset:hover:not(:disabled) {
+  border-color: rgba(100, 116, 139, 0.5);
+  background: #e8eaec;
+  color: #1f2937;
+}
+
+.image-canvas-editor__character-animation-preset[aria-pressed='true'] {
+  border-color: #334155;
+  background: #ffffff;
+  color: #111827;
+  box-shadow:
+    0 0 0 1px rgba(236, 151, 73, 0.12),
+    0 4px 12px rgba(177, 91, 35, 0.11);
+}
+
+.image-canvas-editor__character-animation-preset:focus-visible {
+  outline: 2px solid rgba(236, 151, 73, 0.72);
+  outline-offset: 2px;
+}
+
+.image-canvas-editor__character-animation-preset:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+.image-canvas-editor__character-animation-preset--action {
+  width: 100%;
+  border-radius: 0.62rem;
+}
+
+.image-canvas-editor__character-animation-backgrounds {
+  display: flex;
+  grid-column: 1 / -1;
+  flex-wrap: wrap;
+  gap: 0.48rem;
+}
+
+.image-canvas-editor__character-animation-color-button {
+  min-width: 3.1rem;
+  min-height: 2.2rem;
+  border: 1px solid transparent;
+  border-radius: 0.72rem;
+  padding: 0 0.72rem;
+  font-size: 0.76rem;
+  font-weight: 780;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.image-canvas-editor__character-animation-color-button--white {
+  border-color: rgba(148, 163, 184, 0.35);
+  background: #ffffff;
+  color: #475569;
+}
+
+.image-canvas-editor__character-animation-color-button--green {
+  background: #58ad00;
+  color: #ffffff;
+}
+
+.image-canvas-editor__character-animation-color-button--blue {
+  background: #111fd0;
+  color: #ffffff;
+}
+
+.image-canvas-editor__character-animation-color-button--purple {
+  background: #5c00a8;
+  color: #ffffff;
+}
+
+.image-canvas-editor__character-animation-color-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.image-canvas-editor__character-animation-color-button[aria-pressed='true'] {
+  border-color: #111827;
+  box-shadow:
+    0 0 0 2px #ffffff,
+    0 0 0 4px rgba(17, 24, 39, 0.78);
+}
+
+.image-canvas-editor__character-animation-color-button:focus-visible,
+.image-canvas-editor__character-animation-ratio-choice:focus-visible,
+.image-canvas-editor__character-animation-menu-pill:focus-visible {
+  outline: 2px solid var(--image-canvas-brand-accent);
+  outline-offset: 2px;
+}
+
+.image-canvas-editor__character-animation-color-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
 }
 
 .image-canvas-editor__character-animation-footer {
-  display: grid;
+  display: flex;
   grid-column: 1 / -1;
-  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  gap: 0.46rem;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-top: 0.04rem;
+}
+
+.image-canvas-editor__character-animation-parameter-trigger {
+  min-width: 0;
+  min-height: 2.25rem;
+  justify-content: flex-start;
+  border-color: transparent;
+  background: transparent;
+  padding: 0 0.24rem;
+  color: #475569;
+  font-size: 0.78rem;
+  font-weight: 780;
+}
+
+.image-canvas-editor__character-animation-parameter-trigger:hover:not(
+    :disabled
+  ),
+.image-canvas-editor__character-animation-parameter-trigger[aria-expanded='true'] {
+  border-color: transparent;
+  background: #f1f5f9;
+  color: #111827;
+}
+
+.image-canvas-editor__character-animation-parameter-menu {
+  display: grid;
+  width: 22rem;
+  max-width: calc(100vw - 1.5rem);
+  gap: 1rem;
+  overflow: visible;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 1.05rem;
+  background: #ffffff;
+  padding: 0.92rem;
+  color: #111827;
+  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.16);
+}
+
+.image-canvas-editor__character-animation-menu-section {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.image-canvas-editor__character-animation-menu-title {
+  color: #374151;
+  font-size: 0.82rem;
+  font-weight: 820;
+}
+
+.image-canvas-editor__character-animation-ratio-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.image-canvas-editor__character-animation-ratio-choice {
+  display: grid;
+  min-width: 0;
+  min-height: 4.1rem;
+  place-items: center;
+  align-content: center;
+  gap: 0.38rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.85rem;
+  background: #ffffff;
+  color: #1f2937;
+  font-size: 0.8rem;
+  font-weight: 780;
+  cursor: pointer;
+}
+
+.image-canvas-editor__character-animation-ratio-choice:hover:not(:disabled) {
+  border-color: #9ca3af;
+  background: #f8fafc;
+}
+
+.image-canvas-editor__character-animation-ratio-choice[aria-pressed='true'] {
+  border-color: #334155;
+  box-shadow: inset 0 0 0 1px #334155;
+}
+
+.image-canvas-editor__character-animation-ratio-choice
+  .image-canvas-editor__ratio-wireframe[data-ratio='same'] {
+  width: 1.74rem;
+  height: 1.16rem;
+}
+
+.image-canvas-editor__character-animation-menu-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.42rem;
+}
+
+.image-canvas-editor__character-animation-menu-pill {
+  min-height: 2.05rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 0 0.78rem;
+  color: #374151;
+  font-size: 0.8rem;
+  font-weight: 780;
+  cursor: pointer;
+}
+
+.image-canvas-editor__character-animation-menu-pill:hover:not(:disabled) {
+  border-color: #9ca3af;
+  background: #f8fafc;
+}
+
+.image-canvas-editor__character-animation-menu-pill[aria-pressed='true'] {
+  border-color: #334155;
+  box-shadow: inset 0 0 0 1px #334155;
+  color: #111827;
+}
+
+.image-canvas-editor__character-animation-ratio-choice:disabled,
+.image-canvas-editor__character-animation-menu-pill:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
 }
 
 .image-canvas-editor__character-animation-submit {
-  grid-column: 3;
-  min-width: 5.45rem;
+  min-width: 6.6rem;
   height: 2.25rem;
   gap: 0.4rem;
   border: 0;
   background: var(--image-canvas-brand-fill);
   color: var(--image-canvas-brand-text-on-fill);
+  box-shadow: 0 5px 14px rgba(213, 106, 42, 0.2);
+}
+
+.image-canvas-editor__character-animation-submit:hover:not(:disabled) {
+  background: var(--image-canvas-brand-accent);
+  color: var(--image-canvas-brand-text-on-fill);
 }
 
 .image-canvas-editor__snap-guide {
@@ -9038,6 +9300,14 @@ button.image-canvas-editor__reference-chip:disabled {
     overflow-y: hidden;
   }
 
+  .image-canvas-editor__character-animation-footer {
+    align-items: stretch;
+  }
+
+  .image-canvas-editor__character-animation-presets {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  }
+
   .image-canvas-editor__quick-edit-panel,
   .image-canvas-editor__character-animation-panel {
     position: fixed;
@@ -9254,6 +9524,7 @@ button.image-canvas-editor__reference-chip:disabled {
   .image-canvas-editor__bottom-toolbar {
     left: 0.75rem;
     right: 0.75rem;
+    width: auto;
     max-width: none;
     transform: none;
   }
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index e62a39ed3..7e003f11f 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -8,6 +8,10 @@ import {
   type SoundEffectPromptOptimizeRequest,
   type SoundEffectPromptOptimizeResponse,
 } from '../../../packages/shared/src/contracts/editorAudio';
+import type {
+  EditorCharacterAnimationFrameSplitInput as SharedEditorCharacterAnimationFrameSplitInput,
+  EditorCharacterAnimationFrameSplitResult as SharedEditorCharacterAnimationFrameSplitResult,
+} from '../../../packages/shared/src/contracts/editorCharacterAnimation';
 import type { EditorSceneGenerationRequest } from '../../../packages/shared/src/contracts/editorScene';
 import type { ExternalGenerationJobStatusRecord } from '../../../packages/shared/src/contracts/externalGeneration';
 import { requestJson } from '../apiClient';
@@ -41,6 +45,8 @@ const EDITOR_UI_DESIGN_ASSET_EXTRACTION_API =
   '/api/editor/ui-designs/assets/extractions';
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
+const EDITOR_CHARACTER_ANIMATION_FRAME_SPLIT_API =
+  '/api/editor/character-animations/frame-splits';
 const EDITOR_VIDEO_GENERATION_API = '/api/editor/videos/generations';
 const EDITOR_SOUND_EFFECT_GENERATION_API =
   '/api/editor/audios/sound-effects/generations';
@@ -527,6 +533,14 @@ export type EditorIconSpritesheetSliceResult = {
 
 export type EditorCharacterAnimationResolution = '480p' | '720p';
 
+export type EditorCharacterAnimationInputMode = 'text' | 'image' | 'video';
+
+export type EditorCharacterAnimationBackgroundColor =
+  | 'white'
+  | 'green'
+  | 'blue'
+  | 'purple';
+
 export type EditorCharacterAnimationRatio =
   'same' | '1:1' | '4:3' | '16:9' | '9:16' | '3:4';
 
@@ -535,11 +549,15 @@ export type EditorCharacterAnimationFrameCount = 32 | 40 | 48;
 export type EditorCharacterAnimationDurationSeconds = 4 | 5 | 6;
 
 export type EditorCharacterAnimationGenerationInput = {
-  sourceLayerId: string;
-  sourceImageSrc: string;
-  sourceWidth: number;
-  sourceHeight: number;
+  inputMode?: EditorCharacterAnimationInputMode;
+  sourceLayerId?: string;
+  sourceImageSrc?: string;
+  sourceWidth?: number;
+  sourceHeight?: number;
+  referenceMediaType?: 'image' | 'video';
+  referenceSrc?: string;
   promptText: string;
+  backgroundColor?: EditorCharacterAnimationBackgroundColor;
   /** 纯色抠像背景色（hex 或 'auto'），继承生图的背景色选项行为。 */
   screenColor?: string;
   resolution: EditorCharacterAnimationResolution;
@@ -579,6 +597,12 @@ export type EditorCharacterAnimationGenerationResult = {
   queueState?: ExternalGenerationJobStatusRecord | null;
 };
 
+export type EditorCharacterAnimationFrameSplitInput =
+  SharedEditorCharacterAnimationFrameSplitInput;
+
+export type EditorCharacterAnimationFrameSplitResult =
+  SharedEditorCharacterAnimationFrameSplitResult<EditorAssetSnapshot>;
+
 export type EditorVideoModel =
   | 'seedance2.0'
   | 'seedance2.0-fast'
@@ -1472,7 +1496,12 @@ export async function snapEditorImageToPixelArt(
 export async function generateEditorCharacterAnimation(
   input: EditorCharacterAnimationGenerationInput,
 ) {
-  assertStableEditorMediaReference(input.sourceImageSrc, '角色动画源图');
+  if (input.referenceSrc) {
+    assertStableEditorMediaReference(input.referenceSrc, '序列帧参考素材');
+  }
+  if (input.sourceImageSrc) {
+    assertStableEditorMediaReference(input.sourceImageSrc, '角色动画源图');
+  }
   return requestJson<EditorCharacterAnimationGenerationResult>(
     EDITOR_CHARACTER_ANIMATION_GENERATION_API,
     jsonRequest('POST', {
@@ -1496,6 +1525,17 @@ export async function generateEditorCharacterAnimation(
   );
 }
 
+export async function splitEditorCharacterAnimationFrames(
+  input: EditorCharacterAnimationFrameSplitInput,
+) {
+  return requestJson<EditorCharacterAnimationFrameSplitResult>(
+    EDITOR_CHARACTER_ANIMATION_FRAME_SPLIT_API,
+    jsonRequest('POST', input),
+    '拆分序列帧失败',
+    { timeoutMs: 120_000 },
+  );
+}
+
 export async function generateEditorVideo(input: EditorVideoGenerationInput) {
   assertStableEditorVideoReferences(input);
   return requestJson<EditorVideoGenerationResponse>(
-- 
2.52.0


From 132bf7db358a77eee44a092b421e041720a7134f Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Wed, 12 Aug 2026 18:14:25 +0800
Subject: [PATCH 02/15] =?UTF-8?q?=E8=A7=92=E8=89=B2=E5=A4=9A=E6=96=B9?=
 =?UTF-8?q?=E5=90=91=E5=9B=BE=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...��规范到多视角图集拆分与动画生成流程-2026-08-12.md |  88 ++++++++++++++
 .../api-server/src/editor_agent/tool.rs       |   3 +
 .../crates/api-server/src/editor_project.rs   | 113 +++++++++++++++++
 .../api-server/src/editor_project_icon.rs     |  51 +++++++-
 ...asCharacterGenerationComposerView.test.tsx |  64 ++++++++++
 ...eCanvasCharacterGenerationComposerView.tsx | 114 +++++++++++++++++-
 .../image-editor/ImageCanvasEditorTypes.ts    |   6 +
 .../ImageCanvasGenerationDialogModel.test.ts  |  35 ++++++
 .../ImageCanvasGenerationDialogModel.ts       |  37 ++++++
 .../ImageCanvasGenerationInputsModel.ts       |   2 +
 .../ImageCanvasGenerationModel.ts             |  52 ++++++++
 ...ageCanvasGenerationSubmissionModel.test.ts |  81 +++++++++++++
 .../ImageCanvasGenerationSubmissionModel.ts   |  62 +++++++---
 .../image-editor/ImageCanvasReferenceSlot.tsx |  11 +-
 src/index.css                                 |  22 ++++
 .../image-editor/editorProjectClient.ts       |  12 +-
 16 files changed, 727 insertions(+), 26 deletions(-)
 create mode 100644 docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md

diff --git a/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md b/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md
new file mode 100644
index 000000000..04114540d
--- /dev/null
+++ b/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md
@@ -0,0 +1,88 @@
+# 【技术方案】角色设定 → 多方向角色图 → 拆分 → 动画生成
+
+- 日期：2026-08-12
+- 状态：设计稿 v3（简化：唯一新增能力是"从角色设定生成多向角色图"，拆分与动画全走现有能力）
+- 实现状态：**核心已实现**（多向图生成：后端 `character-sheet` kind + 前端角色面板开关，2026-08-12）
+  - 拆分集成：角色多方向图（action=`character-sheet.generate`）经既有「拆分图集」切出的单视角切片按 `character` 落库，可直接作为动画参考（`editor_spritesheet_slice_record_asset_kind`，`editor_project_icon.rs`）
+- 关联：`【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md`
+
+## 1. 背景
+
+- Spine 序列帧动画（`character-animation`）是"图生视频 → 抽帧"，图生视频以首帧为准；首帧里角色越多，输出多角色概率越大。
+- 现状角色形象以多视角规范图为参考，可能产出"一个角色多个视角"的多角色图，直接当动画首帧会多角色。
+- 结论：需要从角色设定**能生成一张"多方向角色图"**（同一角色、多方向、彼此分离），拆成单张后分别做动画。
+
+## 2. 范围
+
+**唯一新增能力**：从角色设定（角色规范图 / 已有单视角角色图）生成一张**多方向角色图**（四视图默认）。
+
+**其余全部复用现有能力，不做额外保障：**
+- 图集类型：复用现有 `icon-spritesheet`（「图集」），不新增资产类型。
+- 拆分：复用现有「拆分图集」（连通块拆分，`split_editor_icon_spritesheet`），**手动触发**，不自动拆分。
+- 方向/数量：**不保证**。生成错了用户重新抽卡；方向标签用户自己看。
+- 动画：对拆分出的单视角图，按现有动画面板逐个生成。
+
+## 3. 流程
+
+```
+角色设定（规范图 / 已有角色图）
+   │  参考
+   ▼
+【新增】生成多方向角色图 → 产出 icon-spritesheet 图集
+   │
+   ▼
+【现有】用户手动「拆分图集」（连通块）→ N 张单视角图
+   │
+   ▼
+【现有】选单视角图 → 图生视频 → 抽帧 → Spine序列帧
+```
+
+## 4. 新增能力：生成多方向角色图
+
+- 入口：在「生成角色形象」面板加一个按钮「生成多方向角色图」；或复用「生成图标素材」面板切到角色多向模式。建议前者。
+- 链路：复用图集生成链路（`generate_editor_icon_spritesheet_for_owner`），模型 `nanobanana2`。
+- 输出：一张 `icon-spritesheet` 图集，四个方向（前/后/左/右），同一角色、方向之间纯色底间隔、彼此分离。
+- 提示词是质量关键（草案）：
+
+```
+根据角色设定生成游戏角色的多方向视图图集。
+画面中只有同一个角色，按四个方向排布：正面、背面、左侧、右侧，每个方向一个完整角色，方向之间相互分离、互不重叠、互不接触。
+四个方向必须是同一个角色，脸型、发型、服装、配色、武器、头身比、体型全程一致，禁止漂移、换装、变形。
+每个方向角色完整居中，不裁切头顶、手脚或武器；四个方向底部基线对齐，画面占比一致。
+背景为单一纯色（绿幕 #00FF00 / 白底 #FFFFFF），平整无纹理、无渐变、无阴影、无地面、无道具；角色之间由纯色背景间隔，便于后续拆分。
+禁止额外角色、分身、宠物、文字、水印、边框、编号、网格线。
+角色设定：{}
+```
+
+- 参考归属校验：复用 `resolve_editor_reference_object_key_for_owner` / `ensure_editor_reference_object_key_owned`，禁止跨账号 objectKey。
+
+## 5. 使用流程（全部现有）
+
+1. 生成多方向角色图 → 得到 `icon-spritesheet` 图集图层。
+2. 选中图集 → 点「拆分图集」（现有按钮）→ 得到若干单视角图。
+3. 对每个想用的方向，选对应单视角图 → 动画面板生成（默认右视图起步）。
+
+## 6. 边界
+
+- 生成质量靠提示词；图不对 → 用户重新抽卡，**不做数量/方向校验**。
+- 连通块若粘连（方向贴太近）→ 拆分数量不对 → 重新抽卡或人工处理，不自动兜底。
+- 成本：多向图一次图像生成；拆分 0 provider 成本；每个方向动画各一次（现有计价）。
+- 旧链路（直接拿单视角角色图做动画）不变。
+
+## 7. 验收
+
+1. 从角色设定能生成一张多方向角色图，各方向为同一角色。
+2. 该图可作为图集手动拆分，拆出的单视角图能进动画面板生成单角色序列帧。
+3. 旧链路回归不破。
+
+## 8. 决策点（留给产品）
+
+- 四视图 vs 八方向（当前建议四视图：前/后/左/右）。
+- 入口位置（「生成角色形象」面板按钮 vs 复用图标图集面板）。
+- 多向图背景色（绿幕/白底）。
+
+## 9. 改动文件
+
+- 前端：`ImageCanvasGenerationModel.ts`（多向图提示词/常量）、`ImageCanvasGenerationDialogModel.ts`、`ImageCanvasGenerationSubmissionModel.ts`、`ImageCanvasGenerationComposerView.tsx`（入口按钮）。
+- 后端：`editor_project_icon.rs`（多向图生成提示词分支）或 `editor_project.rs`；`shared-contracts`（如需 DTO 字段）。
+- 无需动拆分逻辑、动画逻辑、存储层。
diff --git a/server-rs/crates/api-server/src/editor_agent/tool.rs b/server-rs/crates/api-server/src/editor_agent/tool.rs
index cef77e705..f94f1678b 100644
--- a/server-rs/crates/api-server/src/editor_agent/tool.rs
+++ b/server-rs/crates/api-server/src/editor_agent/tool.rs
@@ -371,6 +371,7 @@ impl EditorAgentTool for GenerateImageTool {
             seg_model: None,
             aspect_ratio: Some(args.aspect_ratio),
             image_size: Some(args.image_size),
+            character_sheet_views: None,
             reference_image_srcs: Some(reference_image_srcs),
             project_id: Some(context.conversation.project_id.clone()),
             asset_kind: Some("editor_agent_generated_image".to_string()),
@@ -479,6 +480,7 @@ impl EditorAgentTool for GenerateCharacterTool {
             seg_model: Some("birefnet".to_string()),
             aspect_ratio: Some(args.aspect_ratio),
             image_size: Some(args.image_size),
+            character_sheet_views: None,
             reference_image_srcs: Some(reference_image_srcs),
             project_id: Some(context.conversation.project_id.clone()),
             asset_kind: Some("character".to_string()),
@@ -589,6 +591,7 @@ impl EditorAgentTool for GenerateUiDesignTool {
             seg_model: None,
             aspect_ratio: Some(args.aspect_ratio),
             image_size: Some(args.image_size),
+            character_sheet_views: None,
             reference_image_srcs: Some(reference_image_srcs),
             project_id: Some(context.conversation.project_id.clone()),
             asset_kind: Some("ui-design".to_string()),
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 609a325d6..5828ec721 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -350,6 +350,9 @@ pub struct EditorImageGenerationRequest {
     pub(crate) seg_model: Option<String>,
     pub(crate) aspect_ratio: Option<String>,
     pub(crate) image_size: Option<String>,
+    /// 角色多方向图集的视角数：4 或 8；仅 kind=character-sheet 时生效，缺省 4。
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub(crate) character_sheet_views: Option<u32>,
     pub(crate) reference_image_srcs: Option<Vec<String>>,
     pub(crate) project_id: Option<String>,
     pub(crate) asset_kind: Option<String>,
@@ -2518,6 +2521,7 @@ pub async fn generate_editor_scene(
         seg_model: None,
         aspect_ratio: Some(generation_options.aspect_ratio.to_string()),
         image_size: Some(generation_options.image_size.to_string()),
+        character_sheet_views: None,
         reference_image_srcs: (!payload.reference_image_srcs.is_empty())
             .then_some(payload.reference_image_srcs),
         project_id: payload.project_id,
@@ -2816,6 +2820,17 @@ where
     )?;
     let normalized_kind = payload.kind.as_deref().map(str::trim);
     let is_character_generation = matches!(normalized_kind, Some("character"));
+    let is_character_sheet_generation = matches!(normalized_kind, Some("character-sheet"));
+    if is_character_sheet_generation
+        && !matches!(payload.character_sheet_views.unwrap_or(4), 4 | 8)
+    {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-image-generation",
+                "message": "characterSheetViews 只支持 4 或 8。",
+            })),
+        );
+    }
     let pixel_art_supported = matches!(normalized_kind, None | Some("") | Some("character"));
     let (image_style, mut generation_warning) =
         normalize_editor_image_generation_style(payload.style.as_deref(), pixel_art_supported);
@@ -3023,6 +3038,19 @@ where
                     role_setting.as_str(),
                     screen_color.expect("character generation should have screen color"),
                 )
+            } else if is_character_sheet_generation {
+                // 多方向图集以纯绿底间隔各方向，供连通块拆分；不参与编辑器的背景自动选色。
+                build_editor_character_multi_view_sheet_prompt(
+                    role_setting.as_str(),
+                    crate::editor_green_screen::EditorScreenBackgroundColor {
+                        label: "纯绿色",
+                        hex: "#00FF00",
+                        red: 0,
+                        green: 255,
+                        blue: 0,
+                    },
+                    payload.character_sheet_views.unwrap_or(4),
+                )
             } else if is_ui_design_generation {
                 build_editor_ui_design_prompt(role_setting.as_str(), ui_has_references)
             } else {
@@ -3543,6 +3571,7 @@ fn editor_image_generation_billing_asset_kind(normalized_kind: Option<&str>) ->
     match normalized_kind {
         Some("scene") => EDITOR_SCENE_IMAGE_ASSET_KIND,
         Some("character") => EDITOR_CHARACTER_IMAGE_ASSET_KIND,
+        Some("character-sheet") => EDITOR_CHARACTER_IMAGE_ASSET_KIND,
         Some("spec") => EDITOR_SPEC_IMAGE_ASSET_KIND,
         Some("quick-edit") => EDITOR_QUICK_EDIT_IMAGE_ASSET_KIND,
         Some("ui-design") => EDITOR_UI_DESIGN_IMAGE_ASSET_KIND,
@@ -3637,6 +3666,11 @@ fn editor_generated_image_storage_profile(
             path_kind: "character-images",
             slot: EDITOR_CHARACTER_IMAGE_SLOT,
         },
+        Some("character-sheet") => EditorGeneratedImageStorageProfile {
+            asset_kind: EDITOR_CHARACTER_IMAGE_ASSET_KIND,
+            path_kind: "character-sheet-images",
+            slot: "character-sheet",
+        },
         Some("spec") => EditorGeneratedImageStorageProfile {
             asset_kind: EDITOR_SPEC_IMAGE_ASSET_KIND,
             path_kind: "spec-images",
@@ -7799,6 +7833,7 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
                     ),
                     path_kind: "ui-design-assets",
                     asset_kind: EDITOR_UI_DESIGN_ASSET_IMAGE_KIND,
+                    record_asset_kind: "icon",
                     persistence_provider: "vector-engine",
                 },
             )
@@ -10854,6 +10889,30 @@ fn build_editor_character_image_prompt(
     .join("\n")
 }
 
+/// 多方向角色图集提示词：一张图里排布同一角色的多个方向，各方向独立成块、纯色底间隔，
+/// 供用户手动「拆分图集」后逐视角生成动画。方向/数量不校验，图不对由用户重新生成。
+fn build_editor_character_multi_view_sheet_prompt(
+    role_setting: &str,
+    screen_color: EditorScreenBackgroundColor,
+    view_count: u32,
+) -> String {
+    let (view_count_text, view_layout) = match view_count {
+        8 => ("八", "正面、右前、右侧、右后、背面、左后、左侧、左前"),
+        _ => ("四", "正面、背面、左侧、右侧"),
+    };
+    vec![
+        format!(
+            "根据角色设定生成游戏角色的多方向视图图集。画面中只有同一个角色，按{view_count_text}个方向排布：{view_layout}，每个方向一个完整角色，方向之间相互分离、互不重叠、互不接触。\
+{view_count_text}个方向必须是同一个角色，脸型、发型、服装、配色、武器、头身比、体型全程一致，禁止漂移、换装、变形。\
+每个方向角色完整居中，不裁切头顶、手脚或武器；各方向底部基线对齐，画面占比一致。{}；角色之间由纯色背景间隔，便于后续拆分。\
+禁止额外角色、分身、宠物、文字、水印、边框、编号、网格线。",
+            editor_green_screen_character_prompt_clause(screen_color)
+        ),
+        format!("角色设定：{}", role_setting.trim()),
+    ]
+    .join("\n")
+}
+
 /// 中文注释：`style="pixelArt"` 此前只驱动 provider 返回后的确定性像素规整，完全不参与提示词。
 /// snapper 是几何对齐器——检测网格步长后按格重采样；provider 交一张柔和渐变图时两轴都测不到
 /// 步长，生成路径用的 legacy profile 会退到 `min(w,h)/64` 统一网格，产出的是马赛克而不是像素
@@ -16548,6 +16607,60 @@ mod tests {
         assert!(prompt.contains("角色设定：菜市场卖菜大妈"));
     }
 
+    #[test]
+    fn editor_character_multi_view_sheet_prompt_enforces_directions_and_separation() {
+        let prompt = build_editor_character_multi_view_sheet_prompt(
+            "日系魔法少女",
+            crate::editor_green_screen::EditorScreenBackgroundColor {
+                label: "纯绿色",
+                hex: "#00FF00",
+                red: 0,
+                green: 255,
+                blue: 0,
+            },
+            4,
+        );
+
+        assert!(prompt.contains("多方向视图图集"));
+        assert!(prompt.contains("四个方向排布：正面、背面、左侧、右侧"));
+        assert!(prompt.contains("方向之间相互分离、互不重叠、互不接触"));
+        assert!(prompt.contains("脸型、发型、服装、配色、武器、头身比、体型全程一致"));
+        assert!(prompt.contains("背景固定为单一纯色背景 纯绿色 #00FF00"));
+        assert!(prompt.contains("角色之间由纯色背景间隔，便于后续拆分"));
+        assert!(prompt.contains("禁止额外角色、分身、宠物、文字、水印、边框、编号、网格线"));
+        assert!(prompt.contains("角色设定：日系魔法少女"));
+    }
+
+    #[test]
+    fn editor_character_multi_view_sheet_prompt_supports_eight_directions() {
+        let prompt = build_editor_character_multi_view_sheet_prompt(
+            "日系魔法少女",
+            crate::editor_green_screen::EditorScreenBackgroundColor {
+                label: "纯绿色",
+                hex: "#00FF00",
+                red: 0,
+                green: 255,
+                blue: 0,
+            },
+            8,
+        );
+
+        assert!(prompt.contains("八个方向排布：正面、右前、右侧、右后、背面、左后、左侧、左前"));
+        assert!(prompt.contains("八个方向必须是同一个角色"));
+        assert!(prompt.contains("每个方向角色完整居中"));
+    }
+
+    #[test]
+    fn editor_character_sheet_kind_routes_to_sheet_prompt_and_icon_spritesheet_asset_kind() {
+        assert_eq!(
+            editor_image_generation_billing_asset_kind(Some("character-sheet")),
+            EDITOR_CHARACTER_IMAGE_ASSET_KIND
+        );
+        let profile = editor_generated_image_storage_profile(Some("character-sheet"));
+        assert_eq!(profile.path_kind, "character-sheet-images");
+        assert_eq!(profile.slot, "character-sheet");
+    }
+
     #[test]
     fn editor_generated_asset_persistence_keeps_user_prompt_separate_from_system_prompt() {
         let source = concat!(
diff --git a/server-rs/crates/api-server/src/editor_project_icon.rs b/server-rs/crates/api-server/src/editor_project_icon.rs
index 78aa5dd26..5126d4b39 100644
--- a/server-rs/crates/api-server/src/editor_project_icon.rs
+++ b/server-rs/crates/api-server/src/editor_project_icon.rs
@@ -638,6 +638,7 @@ fn build_icon_spec_image_request(
         seg_model: None,
         aspect_ratio: Some(ICON_SPEC_ASPECT_RATIO.to_string()),
         image_size: Some(ICON_SPEC_IMAGE_SIZE.to_string()),
+        character_sheet_views: None,
         reference_image_srcs: payload.reference_id.map(|reference_id| vec![reference_id]),
         project_id: payload.project_id,
         asset_kind: Some("icon-spec".to_string()),
@@ -840,6 +841,9 @@ pub(crate) struct PersistEditorSpritesheetSlicesInput {
     pub(crate) generation_inputs: Option<Value>,
     pub(crate) path_kind: &'static str,
     pub(crate) asset_kind: &'static str,
+    /// 切片资源/素材记录的 asset_kind（前端据此判断素材语义）。图标图集默认 "icon"；
+    /// 角色多方向图集拆分传 "character"，使单视角切片可直接作为角色动画参考。
+    pub(crate) record_asset_kind: &'static str,
     pub(crate) persistence_provider: &'static str,
 }
 
@@ -960,7 +964,7 @@ pub(crate) async fn persist_editor_spritesheet_slices(
                     provider: Some(input.provider.clone()),
                     task_id: Some(input.task_id.clone()),
                     source_resource_id: normalize_optional_string(input.source_resource_id.clone()),
-                    asset_kind: Some("icon".to_string()),
+                    asset_kind: Some(input.record_asset_kind.to_string()),
                     generation_inputs_json: generation_inputs_json.clone(),
                     updated_at_micros: now_micros,
                     image_sequence_frames_json: None,
@@ -990,7 +994,7 @@ pub(crate) async fn persist_editor_spritesheet_slices(
                     model: Some(input.model.clone()),
                     provider: Some(input.provider.clone()),
                     task_id: Some(input.task_id.clone()),
-                    asset_kind: Some("icon".to_string()),
+                    asset_kind: Some(input.record_asset_kind.to_string()),
                     generation_inputs_json: generation_inputs_json.clone(),
                     source_resource_id: resource_id.clone(),
                     generation_cost_mud_points: 0,
@@ -1963,6 +1967,7 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
                     ),
                     path_kind: "icon-spritesheet-assets",
                     asset_kind: EDITOR_ICON_SPRITESHEET_SLICE_ASSET_KIND,
+                    record_asset_kind: "icon",
                     persistence_provider: "vector-engine",
                 },
             )
@@ -2170,6 +2175,17 @@ pub(crate) fn resolve_editor_icon_spritesheet_source_layer_asset_kind<'a>(
     }
 }
 
+/// 图集切片记录 asset_kind：角色多方向图集（action=character-sheet.generate）拆出的
+/// 单视角切片按 character 落库（可直接作动画参考），其余图集按 icon。
+fn editor_spritesheet_slice_record_asset_kind(source_generation_inputs: Option<&Value>) -> &'static str {
+    source_generation_inputs
+        .and_then(|inputs| inputs.get("action"))
+        .and_then(Value::as_str)
+        .is_some_and(|action| action == "character-sheet.generate")
+        .then_some("character")
+        .unwrap_or("icon")
+}
+
 pub async fn split_editor_icon_spritesheet(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -2309,6 +2325,10 @@ pub async fn split_editor_icon_spritesheet(
         .clone()
         .unwrap_or_else(|| "Genarrative".to_string());
     let generation_inputs = source_resource.generation_inputs.clone();
+    // 中文注释：角色多方向图集（action=character-sheet.generate）拆分出的单视角切片按
+    // character 落库，使其可直接作为角色动画参考；普通图标图集仍按 icon。
+    let slice_record_asset_kind =
+        editor_spritesheet_slice_record_asset_kind(source_resource.generation_inputs.as_ref());
     let icon_image_srcs = persist_editor_spritesheet_slices(
         &state,
         slices,
@@ -2328,6 +2348,7 @@ pub async fn split_editor_icon_spritesheet(
             generation_inputs,
             path_kind: "icon-spritesheet-slices",
             asset_kind: EDITOR_ICON_SPRITESHEET_SLICE_ASSET_KIND,
+            record_asset_kind: slice_record_asset_kind,
             persistence_provider: "genarrative",
         },
     )
@@ -2677,6 +2698,32 @@ pub(crate) fn validate_editor_icon_spritesheet_dimensions(
 mod tests {
     use super::*;
 
+    #[test]
+    fn sprite_slice_record_asset_kind_marks_character_sheet_slices_as_character() {
+        assert_eq!(
+            editor_spritesheet_slice_record_asset_kind(None),
+            "icon"
+        );
+        assert_eq!(
+            editor_spritesheet_slice_record_asset_kind(Some(&json!({
+                "action": "icon.generate"
+            }))),
+            "icon"
+        );
+        assert_eq!(
+            editor_spritesheet_slice_record_asset_kind(Some(&json!({
+                "action": "character-sheet.generate"
+            }))),
+            "character"
+        );
+        assert_eq!(
+            editor_spritesheet_slice_record_asset_kind(Some(&json!({
+                "version": 2
+            }))),
+            "icon"
+        );
+    }
+
     #[test]
     fn game_genre_serde_uses_chinese_slugs() {
         for genre in GameGenre::ALL {
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
index 8946494bc..f19664276 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
@@ -90,6 +90,12 @@ function CharacterGenerationHarness({
       <output aria-label="当前角色设定">{dialog.prompt}</output>
       <output aria-label="当前状态">{dialog.status}</output>
       <output aria-label="当前错误">{dialog.errorMessage ?? '-'}</output>
+      <output aria-label="当前多方向角色图">
+        {String(dialog.characterSheetEnabled === true)}
+      </output>
+      <output aria-label="当前多方向图视角数">
+        {dialog.characterSheetViewSet ?? '4'}
+      </output>
       <output aria-label="选择角色规范">{String(isPickingSpec)}</output>
       <output aria-label="选择常规参考图">{String(isPickingReference)}</output>
     </div>
@@ -122,6 +128,64 @@ describe('ImageCanvasCharacterGenerationComposerView', () => {
     );
   });
 
+  it('toggles the multi-direction character sheet option', () => {
+    render(
+      <CharacterGenerationHarness
+        initialDialog={createDialog({ characterSheetEnabled: false })}
+      />,
+    );
+
+    const toggle = screen.getByRole('button', { name: '多方向角色图' });
+    expect(toggle.getAttribute('aria-pressed')).toBe('false');
+
+    fireEvent.click(toggle);
+
+    expect(screen.getByLabelText('当前多方向角色图').textContent).toBe('true');
+    expect(
+      screen.getByRole('button', { name: '多方向角色图' }).getAttribute(
+        'aria-pressed',
+      ),
+    ).toBe('true');
+
+    fireEvent.click(screen.getByRole('button', { name: '多方向角色图' }));
+    expect(screen.getByLabelText('当前多方向角色图').textContent).toBe('false');
+  });
+
+  it('shows the view-set dropdown only while the sheet is enabled', () => {
+    render(
+      <CharacterGenerationHarness
+        initialDialog={createDialog({ characterSheetEnabled: false })}
+      />,
+    );
+
+    expect(screen.queryByRole('button', { name: /多方向图视角/ })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '多方向角色图' }));
+
+    expect(
+      screen.getByRole('button', { name: '多方向图视角 四方向' }),
+    ).toBeTruthy();
+  });
+
+  it('switches the character sheet view set between four and eight', () => {
+    render(
+      <CharacterGenerationHarness
+        initialDialog={createDialog({
+          characterSheetEnabled: true,
+          characterSheetViewSet: '4',
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '多方向图视角 四方向' }));
+    fireEvent.click(screen.getByRole('button', { name: '八方向' }));
+
+    expect(screen.getByLabelText('当前多方向图视角数').textContent).toBe('8');
+    expect(
+      screen.getByRole('button', { name: '多方向图视角 八方向' }),
+    ).toBeTruthy();
+  });
+
   it('updates character prompt, clears failed state and submits', () => {
     const submitCharacter = vi.fn();
     render(
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
index 4fc57e50b..b77d8ef1c 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
@@ -1,10 +1,12 @@
-import { ClipboardList, ImagePlus } from 'lucide-react';
+import { ChevronDown, ClipboardList, ImagePlus, LayoutGrid } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
   type ReactNode,
   type RefObject,
   type SetStateAction,
+  useRef,
+  useState,
 } from 'react';
 
 import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
@@ -12,6 +14,7 @@ import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import type {
   CharacterReferenceImage,
@@ -101,6 +104,8 @@ export function ImageCanvasCharacterGenerationComposerView({
   hasPendingImageReferenceUploads = false,
   onSubmit,
 }: ImageCanvasCharacterGenerationComposerViewProps) {
+  const [isViewSetMenuOpen, setIsViewSetMenuOpen] = useState(false);
+  const viewSetButtonRef = useRef<HTMLButtonElement | null>(null);
   useImageCanvasFloatingOptionDismiss({
     isOpen: isCharacterSpecMenuOpen || isCharacterReferenceMenuOpen,
     boundaryRefs: [characterSpecButtonRef, characterReferenceButtonRef],
@@ -109,6 +114,25 @@ export function ImageCanvasCharacterGenerationComposerView({
       setIsCharacterReferenceMenuOpen(false);
     },
   });
+  useImageCanvasFloatingOptionDismiss({
+    isOpen: isViewSetMenuOpen,
+    boundaryRefs: [viewSetButtonRef],
+    onDismiss: () => setIsViewSetMenuOpen(false),
+    restoreFocusRef: viewSetButtonRef,
+  });
+  const setViewSet = (value: '4' | '8') => {
+    setIsViewSetMenuOpen(false);
+    setGenerateDialog((currentDialog) =>
+      currentDialog?.mode === 'character'
+        ? {
+            ...resetFailedDialogStatus(currentDialog),
+            characterSheetViewSet: value,
+          }
+        : currentDialog,
+    );
+  };
+  const selectedViewSetLabel =
+    (dialog.characterSheetViewSet ?? '4') === '8' ? '八方向' : '四方向';
 
   return (
     <div
@@ -216,6 +240,30 @@ export function ImageCanvasCharacterGenerationComposerView({
           isAdd
           onClick={() => setIsCharacterReferenceMenuOpen((open) => !open)}
         />
+        <ImageCanvasReferenceSlot
+          tone="character-sheet"
+          icon={<LayoutGrid className="h-4 w-4" aria-hidden="true" />}
+          label="多方向图"
+          ariaLabel="多方向角色图"
+          title={
+            dialog.characterSheetEnabled === true
+              ? '多方向角色图（开启）'
+              : '多方向角色图'
+          }
+          disabled={dialog.status === 'generating'}
+          pressed={dialog.characterSheetEnabled === true}
+          onClick={() =>
+            setGenerateDialog((currentDialog) =>
+              currentDialog?.mode === 'character'
+                ? {
+                    ...resetFailedDialogStatus(currentDialog),
+                    characterSheetEnabled:
+                      currentDialog.characterSheetEnabled !== true,
+                  }
+                : currentDialog,
+            )
+          }
+        />
         {isCharacterReferenceMenuOpen
           ? renderEditorPortal(
               <PlatformFloatingMenu
@@ -292,8 +340,12 @@ export function ImageCanvasCharacterGenerationComposerView({
             model: dialog.imageModel,
             imageSize: dialog.imageSize,
           })}
-          submitLabel="生成"
-          submitAriaLabel="生成"
+          submitLabel={
+            dialog.characterSheetEnabled === true ? '生成多方向图集' : '生成'
+          }
+          submitAriaLabel={
+            dialog.characterSheetEnabled === true ? '生成多方向图集' : '生成'
+          }
           onSubmitRequest={() => {
             if (dialog.status !== 'generating') {
               onSubmit(dialog);
@@ -301,6 +353,62 @@ export function ImageCanvasCharacterGenerationComposerView({
           }}
           renderEditorPortal={renderEditorPortal}
           buildPortalMenuStyle={buildPortalMenuStyle}
+          styleControl={
+            dialog.characterSheetEnabled === true ? (
+              <div className="image-canvas-editor__option-popover-anchor">
+                <PlatformInlineOptionButton
+                  ref={viewSetButtonRef}
+                  className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--viewset"
+                  aria-label={`多方向图视角 ${selectedViewSetLabel}`}
+                  aria-expanded={isViewSetMenuOpen}
+                  disabled={dialog.status === 'generating'}
+                  trailingIcon={<ChevronDown className="h-3 w-3" />}
+                  onClick={() => setIsViewSetMenuOpen((open) => !open)}
+                >
+                  {selectedViewSetLabel}
+                </PlatformInlineOptionButton>
+                {isViewSetMenuOpen
+                  ? renderEditorPortal(
+                      <PlatformFloatingMenu
+                        className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
+                        label="多方向图视角数"
+                        placement="top-start"
+                        style={buildPortalMenuStyle(
+                          viewSetButtonRef.current,
+                          'above',
+                        )}
+                        onPointerDown={(event) => event.stopPropagation()}
+                        onClick={(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">
+                              {(['4', '8'] as const).map((value) => (
+                                <button
+                                  key={value}
+                                  type="button"
+                                  className="image-canvas-editor__option-popover-choice"
+                                  aria-pressed={
+                                    (dialog.characterSheetViewSet ?? '4') ===
+                                    value
+                                  }
+                                  onClick={() => setViewSet(value)}
+                                >
+                                  {value === '4' ? '四方向' : '八方向'}
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      </PlatformFloatingMenu>,
+                    )
+                  : null}
+              </div>
+            ) : undefined
+          }
         />
       </div>
     </div>
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 77606d46e..92bbb03e0 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -82,6 +82,7 @@ export type CanvasGenerationAction =
   | 'scene.generate'
   | 'spec.generate'
   | 'character.generate'
+  | 'character-sheet.generate'
   | 'icon.generate'
   | 'ui-design.generate'
   | 'publication.generate'
@@ -278,6 +279,11 @@ export type GenerateDialogState = {
   generationReferences?: CharacterReferenceImage[];
   characterSpecReference?: CharacterReferenceImage | null;
   characterReferences?: CharacterReferenceImage[];
+  // 中文注释：角色面板的"多方向角色图"开关——开启时生成一张四方向角色图集
+  // （后端 kind=character-sheet，产物按 icon-spritesheet 落库，可走既有拆分图集）。
+  characterSheetEnabled?: boolean;
+  // 中文注释：多方向角色图的视角数（4 或 8），仅 characterSheetEnabled 时生效。
+  characterSheetViewSet?: '4' | '8';
   iconSpecReference?: CharacterReferenceImage | null;
   iconDescriptions?: string[];
   publicationWorkflowId?: PublicationMaterialsWorkflowId;
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 0b48914ab..962021fab 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -1228,6 +1228,41 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('restores a multi-direction character sheet recipe into the character composer', () => {
+    expect(
+      createSameSourceGenerationDialogDraft({
+        sourceLayer: createLayer({
+          id: 'layer-sheet-result',
+          resourceId: 'resource-sheet-result',
+          sourceType: 'generated',
+          assetKind: 'icon-spritesheet',
+          generationInputs: {
+            version: 2,
+            action: 'character-sheet.generate',
+            fields: [
+              { id: 'prompt', title: '角色设定', value: '日系魔法少女' },
+              { id: 'model', title: '模型', value: 'nanobanana2' },
+              { id: 'viewSet', title: '视角集合', value: '八视图' },
+              { id: 'aspectRatio', title: '比例', value: '1:1' },
+              { id: 'imageSize', title: '尺寸', value: '1K' },
+            ],
+            references: [],
+          },
+        }),
+        canvasSize: { width: 960, height: 720 },
+        viewport: { x: 0, y: 0, scale: 1 },
+        mode: 'redraw',
+      }),
+    ).toMatchObject({
+      mode: 'character',
+      prompt: '日系魔法少女',
+      sourceLayerId: 'layer-sheet-result',
+      style: 'none',
+      characterSheetEnabled: true,
+      characterSheetViewSet: '8',
+    });
+  });
+
   it('maps legacy ui spec.generate inputs to the unified icon spec composer', () => {
     expect(
       createSameSourceGenerationDialogDraft({
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 25384baa8..51ef28256 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -316,6 +316,8 @@ export function createCharacterGenerationDialogDraft({
     style: 'none',
     characterSpecReference: null,
     characterReferences: [],
+    characterSheetEnabled: false,
+    characterSheetViewSet: '4',
     imageModel: normalizedImageModel,
     aspectRatio: dimensionDefaults.aspectRatio,
     imageSize: dimensionDefaults.imageSize,
@@ -1061,6 +1063,41 @@ function createNormalizedGenerationDialogDraft({
     );
   }
 
+  if (inputs.action === 'character-sheet.generate') {
+    // 多方向角色图回弹到角色面板并恢复图集模式与视角数。
+    return placeDraftBesideSourceLayer(
+      resizeGenerationPlaceholderToImageSelection({
+        ...createCharacterGenerationDialogDraft({
+          canvasSize,
+          viewport,
+          imageModel: getNormalizedString(
+            sourceLayer,
+            'model',
+            DEFAULT_IMAGE_MODEL,
+          ),
+        }),
+        prompt,
+        sourceLayerId: sourceLayer.id,
+        style: 'none',
+        aspectRatio: getNormalizedString(sourceLayer, 'aspectRatio', '1:1'),
+        imageSize: getNormalizedString(sourceLayer, 'imageSize', '1K'),
+        characterSheetEnabled: true,
+        characterSheetViewSet:
+          getNormalizedString(sourceLayer, 'viewSet') === '八视图'
+            ? '8'
+            : '4',
+        characterSpecReference:
+          resolveNormalizedReferences(
+            sourceLayer,
+            'specReference',
+            availableLayers,
+          )[0] ?? null,
+        characterReferences: references,
+      }),
+      sourceLayer,
+    );
+  }
+
   if (inputs.action === 'icon.generate') {
     return placeDraftBesideSourceLayer(
       resizeGenerationPlaceholderToImageSelection({
diff --git a/src/components/image-editor/ImageCanvasGenerationInputsModel.ts b/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
index 463308b1e..f992ef982 100644
--- a/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
@@ -17,6 +17,7 @@ export const CANVAS_GENERATION_ACTIONS = [
   'scene.generate',
   'spec.generate',
   'character.generate',
+  'character-sheet.generate',
   'icon.generate',
   'ui-design.generate',
   'publication.generate',
@@ -37,6 +38,7 @@ const REMIXABLE_CANVAS_GENERATION_ACTIONS = new Set<CanvasGenerationAction>([
   'scene.generate',
   'spec.generate',
   'character.generate',
+  'character-sheet.generate',
   'icon.generate',
   'ui-design.generate',
   'publication.generate',
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 6480ede9a..0edba945b 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -2174,6 +2174,58 @@ export function buildCharacterGenerationInputs(
   };
 }
 
+export function buildCharacterSheetGenerationInputs(
+  prompt: string,
+  specReference: CharacterReferenceImage | null | undefined,
+  references: CharacterReferenceImage[] | undefined,
+  options: {
+    model?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+    viewSet?: '4' | '8';
+  } = {},
+): CanvasGenerationInputs {
+  return {
+    version: 2,
+    action: 'character-sheet.generate',
+    fields: [
+      ...createGenerationInputField('角色设定', prompt, 'prompt'),
+      ...createGenerationInputField(
+        '模型',
+        options.model ?? DEFAULT_IMAGE_MODEL,
+        'model',
+      ),
+      ...createGenerationInputField(
+        '视角集合',
+        options.viewSet === '8' ? '八视图' : '四视图',
+        'viewSet',
+      ),
+      ...createGenerationInputField(
+        '比例',
+        options.aspectRatio ?? '1:1',
+        'aspectRatio',
+      ),
+      ...createGenerationInputField(
+        '尺寸',
+        options.imageSize ?? '1K',
+        'imageSize',
+      ),
+    ],
+    references: [
+      ...(specReference
+        ? createGenerationInputReference('角色规范', specReference, {
+            id: 'specReference',
+          })
+        : []),
+      ...(references ?? []).flatMap((reference, index) =>
+        createGenerationInputReference(`常规参考图 ${index + 1}`, reference, {
+          id: 'reference',
+        }),
+      ),
+    ],
+  };
+}
+
 export function buildUiDesignGenerationInputs(
   prompt: string,
   specReference: CharacterReferenceImage | null | undefined,
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index 8e9c9e244..bcd432090 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -642,6 +642,87 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
     );
   });
 
+  it('builds character-sheet plans when multi-direction sheet is enabled', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'character',
+        prompt: '日系魔法少女',
+        status: 'idle',
+        characterSheetEnabled: true,
+        characterSpecReference: {
+          id: 'spec',
+          label: '角色规范',
+          src: 'data:image/png;base64,spec',
+          resourceId: 'resource-character-spec',
+        },
+      },
+      layers: [],
+      nextGeneratedIndex: 3,
+    });
+
+    expect(plan).toMatchObject({
+      kind: 'image',
+      normalizedPrompt: '日系魔法少女',
+      input: {
+        prompt: '日系魔法少女',
+        kind: 'character-sheet',
+        assetKind: 'icon-spritesheet',
+        style: 'none',
+      },
+      result: {
+        assetKind: 'icon-spritesheet',
+        title: '角色多方向图 3',
+      },
+    });
+    expect(plan.kind === 'image' ? plan.result.generationInputs : null).toEqual(
+      expect.objectContaining({
+        version: 2,
+        action: 'character-sheet.generate',
+        fields: expect.arrayContaining([
+          { id: 'prompt', title: '角色设定', value: '日系魔法少女' },
+          { id: 'viewSet', title: '视角集合', value: '四视图' },
+        ]),
+      }),
+    );
+    expect(plan.kind === 'image' ? plan.input : null).toMatchObject({
+      characterSheetViews: 4,
+    });
+    // 图集不做像素化、不去背景，screenColor/segModel 不携带。
+    expect(plan.kind === 'image' ? plan.input : null).not.toHaveProperty(
+      'screenColor',
+    );
+    expect(plan.kind === 'image' ? plan.input : null).not.toHaveProperty(
+      'segModel',
+    );
+  });
+
+  it('builds eight-direction character-sheet plans when view set is eight', () => {
+    const plan = buildImageGenerationSubmissionPlan({
+      dialog: {
+        mode: 'character',
+        prompt: '日系魔法少女',
+        status: 'idle',
+        characterSheetEnabled: true,
+        characterSheetViewSet: '8',
+      },
+      layers: [],
+      nextGeneratedIndex: 4,
+    });
+
+    expect(plan.kind === 'image' ? plan.input : null).toMatchObject({
+      kind: 'character-sheet',
+      characterSheetViews: 8,
+    });
+    expect(plan.kind === 'image' ? plan.result.generationInputs : null).toEqual(
+      expect.objectContaining({
+        action: 'character-sheet.generate',
+        fields: expect.arrayContaining([
+          { id: 'viewSet', title: '视角集合', value: '八视图' },
+        ]),
+      }),
+    );
+  });
+
   it('locks UI design generation submissions to gpt-image-2', () => {
     const plan = buildImageGenerationSubmissionPlan({
       dialog: {
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index 049baa77f..a825ef917 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -26,6 +26,7 @@ import type {
 import {
   buildBackgroundMusicGenerationInputs,
   buildCharacterGenerationInputs,
+  buildCharacterSheetGenerationInputs,
   buildEditGenerationInputs,
   buildIconGenerationInputs,
   buildImageGenerationInputs,
@@ -800,37 +801,64 @@ export function buildImageGenerationSubmissionPlan({
     const imageModel = normalizeEditorImageModel(dialog.imageModel);
     const screenColor = DEFAULT_EDITOR_GENERATION_BACKGROUND_COLOR;
     const segModel = DEFAULT_EDITOR_BGFILTER_SEG_MODEL;
+    const sheetEnabled = dialog.characterSheetEnabled === true;
+    const sheetViewSet = dialog.characterSheetViewSet ?? '4';
+    // 中文注释：多方向角色图走后端 kind=character-sheet（绿色间隔底，便于连通块拆分），
+    // 产物按 icon-spritesheet 落库，复用既有「拆分图集」能力；不做像素化、不去背景。
     return {
       kind: 'image',
       normalizedPrompt,
       input: {
         prompt: normalizedPrompt,
-        kind: 'character',
+        kind: sheetEnabled ? 'character-sheet' : 'character',
         model: imageModel,
-        screenColor,
-        segModel,
-        style: dialog.style === 'pixelArt' ? 'pixelArt' : 'none',
+        ...(sheetEnabled ? {} : { screenColor, segModel }),
+        style: sheetEnabled
+          ? 'none'
+          : dialog.style === 'pixelArt'
+            ? 'pixelArt'
+            : 'none',
         aspectRatio: dialog.aspectRatio ?? '1:1',
         imageSize: dialog.imageSize ?? '1K',
+        ...(sheetEnabled
+          ? {
+              assetKind: 'icon-spritesheet',
+              characterSheetViews: sheetViewSet === '8' ? 8 : 4,
+            }
+          : {}),
         ...(referenceImageSrcs.length ? { referenceImageSrcs } : {}),
       },
       result: {
-        assetKind: 'character',
+        assetKind: sheetEnabled ? 'icon-spritesheet' : 'character',
         title: resolveGenerationAssetLabel(
           dialog.assetLabel,
-          `角色形象 ${nextGeneratedIndex}`,
-        ),
-        generationInputs: buildCharacterGenerationInputs(
-          normalizedPrompt,
-          dialog.characterSpecReference,
-          dialog.characterReferences,
-          {
-            model: imageModel,
-            style: dialog.style === 'pixelArt' ? 'pixelArt' : 'none',
-            aspectRatio: dialog.aspectRatio ?? '1:1',
-            imageSize: dialog.imageSize ?? '1K',
-          },
+          sheetEnabled
+            ? `角色多方向图 ${nextGeneratedIndex}`
+            : `角色形象 ${nextGeneratedIndex}`,
         ),
+        generationInputs: sheetEnabled
+          ? buildCharacterSheetGenerationInputs(
+              normalizedPrompt,
+              dialog.characterSpecReference,
+              dialog.characterReferences,
+              {
+                model: imageModel,
+                aspectRatio: dialog.aspectRatio ?? '1:1',
+                imageSize: dialog.imageSize ?? '1K',
+                viewSet: sheetViewSet,
+              },
+            )
+          : buildCharacterGenerationInputs(
+              normalizedPrompt,
+              dialog.characterSpecReference,
+              dialog.characterReferences,
+              {
+                model: imageModel,
+                style: dialog.style === 'pixelArt' ? 'pixelArt' : 'none',
+                aspectRatio: dialog.aspectRatio ?? '1:1',
+                imageSize: dialog.imageSize ?? '1K',
+              },
+            ),
       },
       rememberImageModel: imageModel,
     };
diff --git a/src/components/image-editor/ImageCanvasReferenceSlot.tsx b/src/components/image-editor/ImageCanvasReferenceSlot.tsx
index f0304f6e2..849f48311 100644
--- a/src/components/image-editor/ImageCanvasReferenceSlot.tsx
+++ b/src/components/image-editor/ImageCanvasReferenceSlot.tsx
@@ -11,7 +11,8 @@ type ImageCanvasReferenceSlotTone =
   | 'character'
   | 'quick-edit'
   | 'video'
-  | 'audio';
+  | 'audio'
+  | 'character-sheet';
 
 type ImageCanvasReferenceSlotProps = {
   buttonRef?: RefObject<HTMLButtonElement | null>;
@@ -25,6 +26,8 @@ type ImageCanvasReferenceSlotProps = {
   objectKey?: string | null;
   disabled?: boolean;
   isAdd?: boolean;
+  /** 选中态（用于模式开关类入口）：置位时高亮边框并带 aria-pressed。 */
+  pressed?: boolean;
   onClick?: () => void;
   onRemove?: () => void;
   removeLabel?: string;
@@ -42,6 +45,7 @@ export function ImageCanvasReferenceSlot({
   objectKey,
   disabled = false,
   isAdd = false,
+  pressed,
   onClick,
   onRemove,
   removeLabel,
@@ -54,11 +58,11 @@ export function ImageCanvasReferenceSlot({
       ? 'image-canvas-editor__reference-chip--has-image'
       : 'image-canvas-editor__reference-chip--icon-only',
     isAdd ? 'image-canvas-editor__reference-chip--upload' : null,
+    pressed ? 'image-canvas-editor__reference-chip--active' : null,
     className,
   ]
     .filter(Boolean)
-    .join(' ');
-  const slotContent = (
+    .join(' ');  const slotContent = (
     <>
       <span className="image-canvas-editor__reference-chip-icon">
         {hasPreviewImage ? (
@@ -89,6 +93,7 @@ export function ImageCanvasReferenceSlot({
           className={slotClassName}
           disabled={disabled}
           aria-label={ariaLabel}
+          aria-pressed={pressed === undefined ? undefined : pressed}
           title={title ?? ariaLabel}
           onClick={onClick}
         >
diff --git a/src/index.css b/src/index.css
index 1bb7bdece..c778e0dac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7226,6 +7226,12 @@ button.image-canvas-editor__reference-chip:disabled {
   white-space: nowrap;
 }
 
+.image-canvas-editor__option-cluster--viewset {
+  width: auto;
+  max-width: 6.5rem;
+  justify-self: start;
+}
+
 .image-canvas-editor__option-popover-anchor {
   position: relative;
   min-width: 0;
@@ -7719,6 +7725,22 @@ button.image-canvas-editor__reference-chip:disabled {
   grid-column: 1 / -1;
 }
 
+.image-canvas-editor__reference-chip--character-sheet
+  .image-canvas-editor__reference-chip-icon {
+  color: #db2777;
+}
+
+.image-canvas-editor__reference-chip--active {
+  border-color: #a5b4fc;
+  background: #eef2ff;
+  color: #3730a3;
+}
+
+button.image-canvas-editor__reference-chip--active:hover:not(:disabled) {
+  border-color: #a5b4fc;
+  background: #e0e7ff;
+}
+
 .image-canvas-editor__publication-composer {
   grid-template-rows: auto auto auto;
 }
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 7e003f11f..ecde35534 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -205,6 +205,7 @@ export type EditorAssetGenerationInputs = {
     | 'scene.generate'
     | 'spec.generate'
     | 'character.generate'
+    | 'character-sheet.generate'
     | 'icon.generate'
     | 'ui-design.generate'
     | 'publication.generate'
@@ -329,13 +330,19 @@ export type EditorImageGenerationInput = {
   prompt: string;
   size?: string;
   kind?:
-    'spec' | 'character' | 'quick-edit' | 'ui-design' | 'publication-material';
+    | 'spec'
+    | 'character'
+    | 'character-sheet'
+    | 'quick-edit'
+    | 'ui-design'
+    | 'publication-material';
   model?: string;
   screenColor?: string;
   segModel?: string;
   style?: EditorImageGenerationStyle;
   aspectRatio?: string;
   imageSize?: string;
+  characterSheetViews?: 4 | 8;
   referenceImageSrcs?: string[];
   projectId?: string | null;
   assetKind?: string | null;
@@ -1194,6 +1201,9 @@ export async function generateEditorImage(input: EditorImageGenerationInput) {
       ...(input.style ? { style: input.style } : {}),
       ...(input.aspectRatio ? { aspectRatio: input.aspectRatio } : {}),
       ...(input.imageSize ? { imageSize: input.imageSize } : {}),
+      ...(input.characterSheetViews
+        ? { characterSheetViews: input.characterSheetViews }
+        : {}),
       ...(input.referenceImageSrcs?.length
         ? { referenceImageSrcs: input.referenceImageSrcs }
         : {}),
-- 
2.52.0


From d6cb68cf134a612d5d8e4f02d1fb5cc24278e809 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Thu, 13 Aug 2026 01:05:57 +0800
Subject: [PATCH 03/15] =?UTF-8?q?Spine=E5=BA=8F=E5=88=97=E5=B8=A7=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=B8=8E=E5=8A=9F=E8=83=BD=E6=94=B6=E7=B4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared-memory/decision-log.md             |    7 +
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |   58 +-
 ...��规范到多视角图集拆分与动画生成流程-2026-08-12.md |   38 +-
 server-rs/crates/api-server/src/app.rs        |   23 +
 .../crates/api-server/src/asset_billing.rs    |    2 +-
 .../src/character_animation_assets.rs         | 1771 ++++++++++++++++-
 .../api-server/src/editor_agent/tool.rs       |    3 -
 .../api-server/src/editor_generation_queue.rs |    4 +
 .../crates/api-server/src/editor_project.rs   |  135 +-
 .../api-server/src/editor_project_icon.rs     |   51 +-
 .../src/editor_sequence_animation.rs          |  232 ++-
 .../api-server/src/external_editor_api.rs     |   23 +
 .../src/external_generation_worker.rs         |   66 +-
 .../src/modules/platform_support.rs           |   21 +-
 server-rs/crates/platform-oss/src/lib.rs      |   51 +
 .../crates/shared-contracts/src/assets.rs     |  155 ++
 .../src/editor_project_storage.rs             |   72 +-
 ...CanvasCharacterAnimationPanelView.test.tsx |    1 +
 ...asCharacterGenerationComposerView.test.tsx |   51 +-
 ...eCanvasCharacterGenerationComposerView.tsx |  126 +-
 .../ImageCanvasContextMenusView.test.tsx      |   20 +-
 .../ImageCanvasContextMenusView.tsx           |   26 -
 ...CanvasEditorGenerationIntegration.test.tsx |   35 +-
 .../ImageCanvasEditorModel.test.ts            |  191 ++
 .../image-editor/ImageCanvasEditorModel.ts    |   99 +-
 .../ImageCanvasEditorShellView.test.tsx       |    2 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |   22 +-
 .../image-editor/ImageCanvasEditorView.tsx    |   15 +-
 .../image-editor/ImageCanvasExportModel.ts    |    2 +-
 ...ImageCanvasGenerationComposerView.test.tsx |  184 ++
 .../ImageCanvasGenerationComposerView.tsx     |  513 +++--
 .../ImageCanvasGenerationDialogModel.test.ts  |  166 +-
 .../ImageCanvasGenerationDialogModel.ts       |  213 +-
 .../ImageCanvasGenerationImageOptionsView.tsx |   35 +-
 .../ImageCanvasGenerationInputsModel.ts       |    2 +
 .../ImageCanvasGenerationLayerModel.test.ts   |   60 +-
 .../ImageCanvasGenerationLayerModel.ts        |   23 +-
 .../ImageCanvasGenerationModel.test.ts        |   85 +
 .../ImageCanvasGenerationModel.ts             |   75 +-
 ...ageCanvasGenerationSubmissionModel.test.ts |   31 +-
 .../ImageCanvasGenerationSubmissionModel.ts   |    9 +-
 .../image-editor/ImageCanvasReferenceSlot.tsx |   11 +-
 ...ageCanvasSelectedLayerToolbarView.test.tsx |   37 +-
 .../ImageCanvasSelectedLayerToolbarView.tsx   |  117 +-
 .../image-editor/ImageCanvasStageView.tsx     |   15 +-
 .../ImageCanvasUploadModel.test.ts            |   55 +
 .../image-editor/ImageCanvasUploadModel.ts    |   31 +-
 ...anvasGenerationSubmissionWorkflow.test.tsx |  169 ++
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  170 +-
 .../useImageCanvasGenerationSurface.test.tsx  |   44 +-
 .../useImageCanvasGenerationSurface.tsx       |   23 +-
 .../useImageCanvasGenerationWorkflow.test.tsx |  101 +-
 .../useImageCanvasGenerationWorkflow.ts       |  155 +-
 src/index.css                                 |   82 +-
 .../image-editor/editorProjectClient.test.ts  |   61 +-
 .../image-editor/editorProjectClient.ts       |  148 +-
 56 files changed, 4995 insertions(+), 922 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index d6fa72fc3..1b4d69ebb 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -6948,3 +6948,10 @@
 - Windows 锁文件决策：提升权限进程新建 `.agent/.manifest.json.lock` 时，Windows 可能把 owner 设为 `Administrators`。仅在固定锁路径已取得不共享独占句柄并确认是普通、非 reparse、单链接文件后，才初始化为当前 `TokenUser`；随后再次复核句柄并执行原有 owner/DACL 校验，不放宽既有异常对象的安全规则。
 - Provider Schema 决策：`agent.route_manifest.missingAssetSlots` 不再广告 OpenAI-compatible 代理拒绝的 `uniqueItems`；Runtime 继续排序去重，Schema 子集门禁新增该关键字，真实 Provider smoke 必须在发布前证明工具目录可被接受。
 - 运行决策：Godot 项目提交给 Project Supervisor 时使用 `standard` Run Profile，避免触发 Web 专用 `game/index.html`、HTTP preview 与自主 Web 完成门。Godot 编辑器启动和内嵌运行预览不在本切片范围。
+
+## 2026-08-13 Spine 序列帧多模态与视频直接转换
+
+- 同一 Spine 序列帧面板固定分为“AI生成/改造”和“视频直接转换”两个标签，旧项目默认恢复 AI。AI 视频以 `motion` 表示动作视频、`appearance` 表示可选角色外观图；上传序列帧 PNG 只作为一张完整参考图，不做网格识别。
+- 视频直接转换走内部 `editor_character_animation_video_conversion` durable job，FFprobe + FFmpeg 覆盖完整源时长，采样率最高 8 FPS、最低 1 FPS，产出 2–120 帧；480p/720p 是只缩不放的最大长边。该路径固定免费、保留背景，不调用 Seedance 或 BgFilter，也不复制保存源视频。
+- 直接转换仍落 `character-animation` / `image-sequence`，配方 action 为 `character-animation.convert`，来源槽位为 `source`；最多 120 帧时首帧 item 同时承载最终 resource/asset。原子生成上限和角色动画拆帧上限扩为 120，但图标图集公开切片继续保持 64，既有 JSON 大小门禁不放宽。
+- `/api/external/v1` 不开放上述内部字段或直接转换路由，不修改 OpenAPI；本次不改 SpacetimeDB 表结构、迁移或生成 bindings。
diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index 71e79dc82..f0a127682 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -1,7 +1,17 @@
 # Art Agent 多模态 Spine 序列帧动画生成方案
 
 状态：已实施，待合并
-更新时间：`2026-08-11`
+更新时间：`2026-08-13`
+
+## 2026-08-13 多模态输入与直接转换补充
+
+- 同一面板分为“AI生成/改造”和“视频直接转换”两个标签，旧配方默认恢复 AI；两个标签独立保留草稿；标签为分段按钮样式（明显可点击、带选中态），不再像标题。
+- AI 视频以 `motion` 表示动作视频、`appearance` 表示可选角色外观图（可多张）；Provider 的 `reference_video` 负责动作、`reference_image` 负责外观。动作视频已选中后，外观图是可选的普通图片参考，不要求画布图层标记为 `character`；上传序列帧 PNG 作为一张完整参考图，不识别网格或拆帧。
+- 直接转换使用内部 `/api/editor/character-animations/video-conversions` 与 durable job `editor_character_animation_video_conversion`，固定免费、保留背景，不调用 Seedance、BgFilter 或其它去背景模型，也不重复保存源视频。**去背景暂缓**：直接转换的源视频背景非纯色，本地键色抠图不适用，待确定方案后再做。
+- 源视频仅接受 owner-scoped MP4/MOV，限制 50MB、2–15 秒。FFprobe 读取旋转后的显示尺寸、精确时长与平均 FPS；FFmpeg 覆盖完整时间轴，采样率为 `clamp(min(源平均 FPS, 8), 1, 8)`，产出 2–120 帧。
+- 480p/720p 表示最大长边，只缩小不放大。正式 `imageSequenceDurationMs` 等于探测时长，播放器、普通 ZIP 与 Spine JSON 的单帧时长统一按 `imageSequenceDurationMs ÷ frameCount`。
+- 直接转换仍落 `character-animation` / `image-sequence`，配方 action 为 `character-animation.convert`，来源槽位为 `source`。最多 120 帧时第一帧同时承载最终 resource/asset；角色动画拆帧允许 120 项，图标图集公开切片继续限制 64 项，既有 512 KiB/2 MiB JSON 门禁不放宽。
+- `/api/external/v1` 保持原图片模式，不暴露内部新增字段或直接转换接口，不修改 OpenAPI。
 
 ## 1. 文档目的
 
@@ -25,12 +35,13 @@
 2. **不要新增新的序列帧媒体类型。**继续使用：
    - `assetKind = "character-animation"`；
    - `mediaType = "image-sequence"`；
-   - `generationInputs.action = "character-animation.generate"`。
+   - AI 生成使用 `generationInputs.action = "character-animation.generate"`；
+   - 视频直接转换使用 `generationInputs.action = "character-animation.convert"`。
 3. **扩展现有角色动作生成链路，而不是重写。**现有链路已经覆盖图片首帧驱动、Seedance 预览视频、抽帧、逐帧透明化、OSS、原子落库、队列恢复和失败退款。
 4. **附件 ZIP 导出已经实现。**当前 `buildSpineImageSequenceJson` 与 `useImageCanvasAssetExportWorkflow` 生成的目录、`metadata.json`、`skeleton.json`、`README.md` 和 `manifest.txt` 与附件示例一致，只需要回归验证和入口文案调整。
 5. **本期不应承诺“真正的 Spine 骨骼动画”。**UI 和文案应写“Spine 序列帧动画”或“Spine JSON 序列帧包”，避免用户误认为会自动拆件和蒙皮。
 6. **1080p 暂不开放。**当前服务端明确拒绝 `seedance2.0-fast + 1080p`；应等供应商能力、成本和逐帧处理资源验证后再开放。
-7. **关键需求口径已经冻结并完成实施。**视频模式采用“参考视频 + 文本生成新视频后抽帧”，默认 480p × 4 秒为 40 泥点，最终帧自动透明化，拆帧只进入素材库；完整决策见第 13、16 节。
+7. **关键需求口径已经冻结并完成实施。**AI 视频模式采用“动作视频 + 可选角色外观图 + 文本”生成新视频后抽帧，按现有规格计费且最终帧自动透明化；视频直接转换固定免费、保留背景；拆帧只进入素材库。完整决策见第 13、16 节。
 
 ### 2.2 为什么不是新玩法接入
 
@@ -82,7 +93,7 @@ manifest.txt
 
 现有角色动作能力已经包含：
 
-- 角色图片右键或浮动工具栏“生成动画”；
+- 统一从底部工具栏“Spine序列帧动画”进入；不再从图层右键菜单或选中图层浮动工具栏暴露独立入口；当前选中视频（或带预览视频的序列帧）时，底部入口默认打开“视频直接转换”，其它情况默认打开“AI生成/改造”；
 - `character-animation` 生成占位框；
 - 动作描述；
 - 待机、行走、奔跑、跳跃、攻击、受击、倒下预设；
@@ -509,10 +520,12 @@ flowchart TD
 
 `ImageCanvasBottomToolbarView.tsx`：
 
-- 在“生成视频”后新增“Spine 序列帧动画”；
-- 点击后在视口中心创建独立 `character-animation` generation dialog；
-- 不在当前面板下方追加内容；
-- 移动端保持横向滚动或现有工具栏收纳规则。
+- 在“生成视频”后保留唯一的“Spine 序列帧动画”入口；
+- 点击后在视口中心创建统一的 `character-animation` generation dialog；
+- 统一面板内同时承载“AI生成/改造”和“视频直接转换”两个标签；
+- 当前选中视频或带预览视频的序列帧时默认进入“视频直接转换”，当前选中角色图时默认进入“AI生成/改造”，无适用选中图层时默认进入“AI生成/改造”；
+- 右键菜单和选中图层浮动工具栏不再提供“生成动画”或“视频转换为Spine序列帧动画”平行入口；
+- 不在当前面板下方追加内容；移动端保持横向滚动或现有工具栏收纳规则。
 
 `CanvasTool` 增加 `character-animation`，但不新增页面路由。
 
@@ -755,19 +768,20 @@ idle
 
 在 P0/P1 决策冻结后，本功能至少满足：
 
-1. 底部工具栏最右侧出现“Spine 序列帧动画”，与前一个工具之间不增加分割线。
-2. 无参考、角色图片参考、视频参考三种合法提交都由后端权威校验。
-3. 画布选择非角色图片时提示“请选择角色图”；上传图片规则按最终确认口径执行。
-4. 请求只携带稳定对象引用，不携带 Data URL / blob URL。
-5. 生成中刷新页面后任务和占位框可恢复。
-6. 失败不产生残缺序列，且按现有 durable billing 规则退款。
-7. 完成后项目 resource 和账号 asset 均为 `character-animation`，帧顺序稳定。
-8. 序列图层可循环播放并显示当前帧/总帧数。
-9. 元数据展示类型、输入、Model、Resolution、Task。
-10. 改造可恢复原输入模式、参考、动作、背景和规格，并生成新资源。
-11. 拆帧不重复上传已有 PNG。
-12. Spine ZIP 与附件目录结构一致，`skeleton.json` 能通过现有 validator。
-13. 存量角色动作项目、External v1 图片模式和普通视频生成不回归。
+1. 底部工具栏最右侧出现“Spine 序列帧动画”，与前一个工具之间不增加分割线；Spine 序列帧不再从右键菜单或选中图层浮动工具栏提供平行入口。
+2. 点击底部入口后，统一面板同时提供“AI生成/改造”和“视频直接转换”；选中视频默认进入直接转换，选中角色图默认进入 AI，无适用选中图层时默认进入 AI。
+3. 无参考、角色图片参考、视频参考三种合法提交都由后端权威校验。
+4. 画布选择非角色图片时按当前多模态参考规则处理；上传图片规则按最终确认口径执行。
+5. 请求只携带稳定对象引用，不携带 Data URL / blob URL。
+6. 生成中刷新页面后任务和占位框可恢复。
+7. 失败不产生残缺序列，且按现有 durable billing 规则退款。
+8. 完成后项目 resource 和账号 asset 均为 `character-animation`，帧顺序稳定。
+9. 序列图层可循环播放并显示当前帧/总帧数。
+10. 元数据展示类型、输入、Model、Resolution、Task。
+11. 改造可恢复原输入模式、参考、动作、背景和规格，并生成新资源。
+12. 拆帧不重复上传已有 PNG。
+13. Spine ZIP 与附件目录结构一致，`skeleton.json` 能通过现有 validator。
+14. 存量角色动作项目、External v1 图片模式和普通视频生成不回归。
 
 ## 15. 验证命令建议
 
@@ -808,7 +822,7 @@ git diff --check
 
 本方案已按推荐 v1 口径落地：
 
-- 底部工具栏已新增 `Spine序列帧动画` 入口；入口使用“播放器 + 帧格”图标，位于同一底栏的最右侧，与前一个工具之间不增加分割线，也不使用独立按钮容器；画布中的序列帧生成占位卡片复用同一个图标组件，不再显示旧的小人图标；底栏桌面宽度按完整内容自适应，不再因第十三个按钮出现横向滚动条，窄屏仍可横向滑动但不显示 scrollbar；
+- 底部工具栏保留唯一的 `Spine序列帧动画` 入口；选中视频或带预览视频的序列帧时默认进入“视频直接转换”，选中角色图或无适用选中图层时默认进入“AI生成/改造”；右键菜单和选中图层浮动工具栏不再提供平行入口；入口使用“播放器 + 帧格”图标，位于同一底栏的最右侧，与前一个工具之间不增加分割线，也不使用独立按钮容器；画布中的序列帧生成占位卡片复用同一个图标组件，不再显示旧的小人图标；底栏桌面宽度按完整内容自适应，不再因第十三个按钮出现横向滚动条，窄屏仍可横向滑动但不显示 scrollbar；
 - 文本、角色图片、参考视频三种模式统一使用 `character-animation` generation dialog；单参考限制按当前 dialog 语义判断而不是依赖工具栏 `activeTool`，上传前只接收一个文件；图片、视频、音频参考的异步探测、OSS 上传、持久化和回填均绑定发起时的 dialog 身份与分媒体容量 reservation，切换面板后不把结果写入新面板；其他多参考生成面板仍保持原能力；
 - Seedance 2.0 Fast 支持 480p / 720p，不开放 1080p；
 - 背景键色冻结为白 `#FFFFFF`、绿 `#00FF00`、蓝 `#0000FF`、紫 `#8000FF`，最终产物继续自动透明化；新独立面板使用显式键色，旧角色图层“生成动画”入口继续由后端自动配色，前端在没有显式键色时不再伪装成绿色已选；
diff --git a/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md b/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md
index 04114540d..fbf65a63d 100644
--- a/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md
+++ b/docs/technical/【技术方案】角色规范到多视角图集拆分与动画生成流程-2026-08-12.md
@@ -3,7 +3,8 @@
 - 日期：2026-08-12
 - 状态：设计稿 v3（简化：唯一新增能力是"从角色设定生成多向角色图"，拆分与动画全走现有能力）
 - 实现状态：**核心已实现**（多向图生成：后端 `character-sheet` kind + 前端角色面板开关，2026-08-12）
-  - 拆分集成：角色多方向图（action=`character-sheet.generate`）经既有「拆分图集」切出的单视角切片按 `character` 落库，可直接作为动画参考（`editor_spritesheet_slice_record_asset_kind`，`editor_project_icon.rs`）
+  - 方向固定为**八方向**（上、下、左、右 + 四角，围绕一圈排布，3×3 九宫格中心留空）；提示词按八向围绕一圈约束排布，降低拆分粘连概率。
+  - 拆分：复用既有「拆分图集」的「连通块定位 + 外接矩形截图」算法（`slice_generated_icon_spritesheet_all_by_connected_components`），不新增像素级连通块掩码；切出的单视角切片按 `icon` 落库（`split_editor_icon_spritesheet`），不改 `character`。
 - 关联：`【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md`
 
 ## 1. 背景
@@ -14,11 +15,11 @@
 
 ## 2. 范围
 
-**唯一新增能力**：从角色设定（角色规范图 / 已有单视角角色图）生成一张**多方向角色图**（四视图默认）。
+**唯一新增能力**：从角色设定（角色规范图 / 已有单视角角色图）生成一张**多方向角色图**（八方向：上、下、左、右 + 四角，围绕一圈排布）。
 
 **其余全部复用现有能力，不做额外保障：**
 - 图集类型：复用现有 `icon-spritesheet`（「图集」），不新增资产类型。
-- 拆分：复用现有「拆分图集」（连通块拆分，`split_editor_icon_spritesheet`），**手动触发**，不自动拆分。
+- 拆分：复用现有「拆分图集」（`split_editor_icon_spritesheet`，连通块定位 + 外接矩形截图），**手动触发**，不自动拆分。
 - 方向/数量：**不保证**。生成错了用户重新抽卡；方向标签用户自己看。
 - 动画：对拆分出的单视角图，按现有动画面板逐个生成。
 
@@ -31,7 +32,7 @@
 【新增】生成多方向角色图 → 产出 icon-spritesheet 图集
    │
    ▼
-【现有】用户手动「拆分图集」（连通块）→ N 张单视角图
+【现有】用户手动「拆分图集」→ N 张单视角图（按 icon 落库）
    │
    ▼
 【现有】选单视角图 → 图生视频 → 抽帧 → Spine序列帧
@@ -39,17 +40,18 @@
 
 ## 4. 新增能力：生成多方向角色图
 
-- 入口：在「生成角色形象」面板加一个按钮「生成多方向角色图」；或复用「生成图标素材」面板切到角色多向模式。建议前者。
+- 入口：在「生成角色形象」面板底部，作为「多方向图」可勾选项，与「像素艺术」并列；勾选后本次生成走 `character-sheet` 图集模式。
 - 链路：复用图集生成链路（`generate_editor_icon_spritesheet_for_owner`），模型 `nanobanana2`。
-- 输出：一张 `icon-spritesheet` 图集，四个方向（前/后/左/右），同一角色、方向之间纯色底间隔、彼此分离。
+- 输出：一张 `icon-spritesheet` 图集，八个方向（正面、右前、右侧、右后、背面、左后、左侧、左前），按 3×3 九宫格围绕一圈排布、中心留空，同一角色、方向之间纯色底充分间隔、彼此分离。
 - 提示词是质量关键（草案）：
 
 ```
-根据角色设定生成游戏角色的多方向视图图集。
-画面中只有同一个角色，按四个方向排布：正面、背面、左侧、右侧，每个方向一个完整角色，方向之间相互分离、互不重叠、互不接触。
-四个方向必须是同一个角色，脸型、发型、服装、配色、武器、头身比、体型全程一致，禁止漂移、换装、变形。
-每个方向角色完整居中，不裁切头顶、手脚或武器；四个方向底部基线对齐，画面占比一致。
-背景为单一纯色（绿幕 #00FF00 / 白底 #FFFFFF），平整无纹理、无渐变、无阴影、无地面、无道具；角色之间由纯色背景间隔，便于后续拆分。
+根据角色设定生成游戏角色的八方向视图图集。
+画面中只有同一个角色，共八个方向：正面、右前、右侧、右后、背面、左后、左侧、左前，每个方向一个完整角色。
+八个方向必须是同一个角色，脸型、发型、服装、配色、武器、头身比、体型全程一致，禁止漂移、换装、变形。
+八个方向按三乘三九宫格围绕一圈排布：上、下、左、右以及四个角落各放一个方向，九宫格中心留空，不放置角色。
+每个方向角色完整居中，不裁切头顶、手脚或武器；各方向底部基线对齐，画面占比一致。
+背景为单一纯色（绿幕 #00FF00），平整无纹理、无渐变、无阴影、无地面、无道具；角色之间由纯色背景充分间隔，互不接触、互不重叠，便于后续拆分。
 禁止额外角色、分身、宠物、文字、水印、边框、编号、网格线。
 角色设定：{}
 ```
@@ -65,7 +67,7 @@
 ## 6. 边界
 
 - 生成质量靠提示词；图不对 → 用户重新抽卡，**不做数量/方向校验**。
-- 连通块若粘连（方向贴太近）→ 拆分数量不对 → 重新抽卡或人工处理，不自动兜底。
+- 外接矩形若粘连（方向贴太近）→ 拆分数量不对 → 重新抽卡或人工处理，不自动兜底；提示词以「围绕一圈 + 纯色背景充分间隔」降低粘连概率。
 - 成本：多向图一次图像生成；拆分 0 provider 成本；每个方向动画各一次（现有计价）。
 - 旧链路（直接拿单视角角色图做动画）不变。
 
@@ -77,12 +79,12 @@
 
 ## 8. 决策点（留给产品）
 
-- 四视图 vs 八方向（当前建议四视图：前/后/左/右）。
-- 入口位置（「生成角色形象」面板按钮 vs 复用图标图集面板）。
-- 多向图背景色（绿幕/白底）。
+- 方向数已定**八方向**（上、下、左、右 + 四角，围绕一圈；不再提供四视角选项）。
+- 入口已定：角色面板底部「多方向图」可勾选项，与「像素艺术」并列。
+- 多向图背景色（当前固定绿幕 #00FF00）。
 
 ## 9. 改动文件
 
-- 前端：`ImageCanvasGenerationModel.ts`（多向图提示词/常量）、`ImageCanvasGenerationDialogModel.ts`、`ImageCanvasGenerationSubmissionModel.ts`、`ImageCanvasGenerationComposerView.tsx`（入口按钮）。
-- 后端：`editor_project_icon.rs`（多向图生成提示词分支）或 `editor_project.rs`；`shared-contracts`（如需 DTO 字段）。
-- 无需动拆分逻辑、动画逻辑、存储层。
+- 前端：`ImageCanvasGenerationModel.ts`（多向图提示词/常量）、`ImageCanvasGenerationDialogModel.ts`、`ImageCanvasGenerationSubmissionModel.ts`、`ImageCanvasCharacterGenerationComposerView.tsx`（底部「多方向图」勾选项）、`ImageCanvasGenerationImageOptionsView.tsx`（`extraToggles` 插槽）。
+- 后端：`editor_project.rs`（`build_editor_character_multi_view_sheet_prompt` 八向围绕一圈提示词）。
+- 无需动拆分逻辑、动画逻辑、存储层；切片按 `icon` 落库，不加 `character` 分支。
diff --git a/server-rs/crates/api-server/src/app.rs b/server-rs/crates/api-server/src/app.rs
index 510018922..7846a328b 100644
--- a/server-rs/crates/api-server/src/app.rs
+++ b/server-rs/crates/api-server/src/app.rs
@@ -1823,6 +1823,29 @@ mod tests {
         assert_eq!(response.status(), StatusCode::UNAUTHORIZED);
     }
 
+    #[tokio::test]
+    async fn editor_character_animation_video_conversion_requires_bearer_auth() {
+        let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
+        let response = app
+            .oneshot(
+                Request::builder()
+                    .method("POST")
+                    .uri("/api/editor/character-animations/video-conversions")
+                    .header("content-type", "application/json")
+                    .body(Body::from(
+                        serde_json::json!({
+                            "sourceVideoSrc": "users/owner/source.mp4",
+                            "resolution": "480p"
+                        })
+                        .to_string(),
+                    ))
+                    .expect("request should build"),
+            )
+            .await
+            .expect("request should succeed");
+        assert_eq!(response.status(), StatusCode::UNAUTHORIZED);
+    }
+
     #[tokio::test]
     async fn editor_character_animation_frame_split_requires_bearer_auth() {
         let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
diff --git a/server-rs/crates/api-server/src/asset_billing.rs b/server-rs/crates/api-server/src/asset_billing.rs
index 11e7369eb..55410ec08 100644
--- a/server-rs/crates/api-server/src/asset_billing.rs
+++ b/server-rs/crates/api-server/src/asset_billing.rs
@@ -930,7 +930,7 @@ mod tests {
         for (source, expected_calls) in [
             (include_str!("editor_project.rs"), 4),
             (include_str!("editor_project_icon.rs"), 2),
-            (include_str!("character_animation_assets.rs"), 2),
+            (include_str!("character_animation_assets.rs"), 3),
             (
                 include_str!("vector_engine_audio_generation/generation.rs"),
                 2,
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 65454fc86..cba181a48 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -29,8 +29,8 @@ use module_assets::{
     generate_asset_object_id,
 };
 use platform_oss::{
-    LegacyAssetPrefix, OssHeadObjectRequest, OssObjectAccess, OssPutObjectRequest,
-    OssRequestAttemptContext, OssSignedGetObjectUrlRequest,
+    LegacyAssetPrefix, OssDeleteObjectRequest, OssHeadObjectRequest, OssObjectAccess,
+    OssPutObjectRequest, OssRequestAttemptContext, OssSignedGetObjectUrlRequest,
 };
 use serde::{Deserialize, Serialize};
 use serde_json::{Value, json};
@@ -45,7 +45,9 @@ use shared_contracts::assets::{
     CharacterWorkflowCacheSaveRequest, CharacterWorkflowCacheSaveResponse,
     EditorCharacterAnimationFramePayload, EditorCharacterAnimationFrameSplitRequest,
     EditorCharacterAnimationFrameSplitResponse, EditorCharacterAnimationGenerateRequest,
-    EditorCharacterAnimationGenerateResponse, EditorVideoGenerateRequest,
+    EditorCharacterAnimationGenerateResponse, EditorCharacterAnimationBackgroundRemovalRequest,
+    EditorCharacterAnimationBackgroundRemovalResponse, EditorCharacterAnimationVideoConversionRequest,
+    EditorCharacterAnimationVideoConversionResponse, EditorVideoGenerateRequest,
     EditorVideoGenerateResponse,
 };
 #[cfg(any())]
@@ -75,7 +77,9 @@ use crate::{
     },
     editor_generation_config::EditorGenerationPricingConfig,
     editor_generation_queue::{
-        EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND, EDITOR_VIDEO_GENERATION_JOB_KIND,
+        EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND,
+        EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND,
+        EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND, EDITOR_VIDEO_GENERATION_JOB_KIND,
         EditorGenerationQueuedResponse, editor_generation_queue_state,
         editor_generation_source_entity_id, enqueue_editor_generation_job_for_caller,
     },
@@ -91,9 +95,10 @@ use crate::{
         normalize_editor_record_object_key, persist_editor_generation_result_atomically,
         preflight_editor_billable_generation_target, rebuild_editor_generation_input_references,
         remove_editor_generated_screen_background_with_bgfilter,
+        request_editor_background_removal_image_with_bgfilter_worker,
         resolve_editor_reference_object_key_for_owner, sanitize_editor_client_generation_inputs,
         serialize_editor_generation_inputs, serialize_editor_image_sequence_frames,
-        with_editor_media_duration_generation_input,
+        validate_editor_generation_operation_id, with_editor_media_duration_generation_input,
     },
     editor_screen_background_decision::{
         EditorScreenBackgroundDecisionInput, EditorScreenBackgroundDecisionKind,
@@ -105,8 +110,10 @@ use crate::{
         NormalizedEditorCharacterAnimationRequest,
         apply_editor_character_animation_authoritative_reference_dimensions,
         build_authoritative_editor_character_animation_generation_inputs,
-        build_editor_character_animation_frame_asset_label, editor_character_animation_bad_request,
-        editor_character_animation_source_asset_label,
+        build_authoritative_editor_character_animation_video_conversion_inputs,
+        build_editor_character_animation_frame_asset_label,
+        build_editor_character_animation_video_conversion_plan,
+        editor_character_animation_bad_request, editor_character_animation_source_asset_label,
         normalize_editor_character_animation_request_with_pricing,
         parse_editor_character_animation_background_color,
         resolve_editor_character_animation_asset_label,
@@ -631,6 +638,10 @@ pub async fn generate_editor_character_animation(
             .reference_src
             .as_deref()
             .is_some_and(matches_inline_media_source)
+        || payload
+            .appearance_reference_srcs
+            .iter()
+            .any(|source| matches_inline_media_source(source.as_str()))
     {
         return Err(character_animation_error_response(
             &request_context,
@@ -671,6 +682,58 @@ pub async fn generate_editor_character_animation(
     .await
 }
 
+pub async fn convert_editor_character_animation_video(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    payload: Result<Json<EditorCharacterAnimationVideoConversionRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = payload.map_err(|error| {
+        character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request(error.body_text()),
+        )
+    })?;
+    if matches_inline_media_source(payload.source_video_src.as_str()) {
+        return Err(character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request("源视频必须先上传 OSS，并使用稳定媒体引用。"),
+        ));
+    }
+    let owner_user_id = authenticated.claims().user_id().to_string();
+    if !state.config.external_generation_mode.is_inline() {
+        let queue_job = enqueue_editor_character_animation_video_conversion_for_owner(
+            &state,
+            &request_context,
+            owner_user_id.as_str(),
+            payload,
+        )
+        .await?;
+        return Ok(json_success_body(
+            Some(&request_context),
+            EditorGenerationQueuedResponse {
+                queue_state: editor_generation_queue_state(queue_job),
+            },
+        ));
+    }
+    let caller = editor_inline_generation_caller(
+        owner_user_id,
+        &request_context,
+        EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND,
+        &payload,
+    )
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    with_editor_generation_durable_billing_boundary(
+        convert_editor_character_animation_video_for_owner(
+            state,
+            request_context,
+            caller,
+            Ok(Json(payload)),
+        ),
+    )
+    .await
+}
+
 pub async fn split_editor_character_animation_frames(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -747,11 +810,11 @@ pub async fn split_editor_character_animation_frames(
                 "message": "序列帧资源缺少完整的正式帧列表。",
             }))
         })?;
-    if frames.len() > 64 {
+    if frames.len() > 120 {
         return Err(
             AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
                 "provider": "editor-character-animation-frame-split",
-                "message": "单次最多拆分64帧。",
+                "message": "单次最多拆分120帧。",
             })),
         );
     }
@@ -980,6 +1043,371 @@ pub async fn split_editor_character_animation_frames(
     ))
 }
 
+pub async fn remove_editor_character_animation_background(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    Json(payload): Json<EditorCharacterAnimationBackgroundRemovalRequest>,
+) -> Result<Json<Value>, Response> {
+    let owner_user_id = authenticated.claims().user_id().to_string();
+    if !state.config.external_generation_mode.is_inline() {
+        let queue_job = enqueue_editor_character_animation_background_removal_for_owner(
+            &state,
+            &request_context,
+            owner_user_id.as_str(),
+            payload,
+        )
+        .await?;
+        return Ok(json_success_body(
+            Some(&request_context),
+            EditorGenerationQueuedResponse {
+                queue_state: editor_generation_queue_state(queue_job),
+            },
+        ));
+    }
+    let caller = editor_inline_generation_caller(
+        owner_user_id,
+        &request_context,
+        EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND,
+        &payload,
+    )
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    with_editor_generation_durable_billing_boundary(
+        remove_editor_character_animation_background_for_owner(
+            state,
+            request_context,
+            caller,
+            Ok(Json(payload)),
+        ),
+    )
+    .await
+}
+
+pub(crate) async fn enqueue_editor_character_animation_background_removal_for_owner(
+    state: &AppState,
+    request_context: &RequestContext,
+    owner_user_id: &str,
+    mut payload: EditorCharacterAnimationBackgroundRemovalRequest,
+) -> Result<ExternalGenerationJobRecord, Response> {
+    let target = preflight_editor_billable_generation_target(
+        state,
+        owner_user_id,
+        Some(payload.project_id.clone()),
+        payload
+            .asset_folder_id
+            .clone()
+            .or_else(|| Some("project".to_string())),
+    )
+    .await
+    .map_err(|error| character_animation_error_response(request_context, error))?;
+    payload.project_id = target.project_id.unwrap_or(payload.project_id);
+    payload.asset_folder_id = target.asset_folder_id;
+    let source_entity_id = editor_generation_source_entity_id(
+        Some(payload.project_id.as_str()),
+        "character-animation-background-removal",
+    );
+    enqueue_editor_generation_job_for_caller(
+        state,
+        request_context,
+        owner_user_id,
+        EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND,
+        source_entity_id,
+        "Spine序列帧去背景",
+        0,
+        &payload,
+        None,
+    )
+    .await
+    .map_err(|error| error.into_response_with_context(Some(request_context)))
+}
+
+pub(crate) async fn remove_editor_character_animation_background_for_owner(
+    state: AppState,
+    request_context: RequestContext,
+    caller: EditorGenerationCaller,
+    payload: Result<Json<EditorCharacterAnimationBackgroundRemovalRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = payload.map_err(|error| {
+        character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request(error.body_text()),
+        )
+    })?;
+    let owner_user_id = caller.owner_user_id.clone();
+    let project_id = payload.project_id.trim().to_string();
+    let source_layer_id = payload.source_layer_id.trim().to_string();
+    let source_resource_id = payload.source_resource_id.trim().to_string();
+    if project_id.is_empty() || source_layer_id.is_empty() || source_resource_id.is_empty() {
+        return Err(character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request(
+                "projectId、sourceLayerId 和 sourceResourceId 不能为空。",
+            ),
+        ));
+    }
+    let project = state
+        .spacetime_client()
+        .get_editor_project(EditorProjectGetRecordInput {
+            project_id: project_id.clone(),
+            owner_user_id: owner_user_id.clone(),
+        })
+        .await
+        .map_err(map_editor_project_error)
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let source_resource = project
+        .resources
+        .iter()
+        .find(|resource| resource.resource_id == source_resource_id)
+        .cloned()
+        .ok_or_else(|| {
+            character_animation_error_response(
+                &request_context,
+                AppError::from_status(StatusCode::NOT_FOUND).with_details(json!({
+                    "provider": "editor-character-animation-background-removal",
+                    "message": "未找到要去背景的Spine序列帧资源。",
+                })),
+            )
+        })?;
+    if project.owner_user_id != owner_user_id
+        || source_resource.owner_user_id != owner_user_id
+        || source_resource.project_id != project_id
+    {
+        return Err(character_animation_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::FORBIDDEN).with_details(json!({
+                "provider": "editor-character-animation-background-removal",
+                "message": "序列帧资源不属于当前账号或当前项目。",
+            })),
+        ));
+    }
+    if source_resource.asset_kind.as_deref()
+        != Some(EDITOR_CHARACTER_ANIMATION_RESOURCE_ASSET_KIND)
+    {
+        return Err(character_animation_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                "provider": "editor-character-animation-background-removal",
+                "message": "只有Spine序列帧动画可以去除背景。",
+            })),
+        ));
+    }
+    let frames: Vec<EditorCharacterAnimationFramePayload> = source_resource
+        .image_sequence_frames
+        .clone()
+        .and_then(|value| serde_json::from_value(value).ok())
+        .filter(|frames: &Vec<EditorCharacterAnimationFramePayload>| !frames.is_empty())
+        .ok_or_else(|| {
+            character_animation_error_response(
+                &request_context,
+                editor_character_animation_bad_request("序列帧资源缺少完整的正式帧列表。"),
+            )
+        })?;
+    if frames.len() > 120 {
+        return Err(character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request("单次最多处理120帧。"),
+        ));
+    }
+    let frame_width = source_resource.width;
+    let frame_height = source_resource.height;
+    let duration_ms = source_resource.image_sequence_duration_ms.unwrap_or(0);
+    let plan = crate::editor_sequence_animation::EditorCharacterAnimationVideoConversionPlan {
+        duration_seconds: duration_ms as f64 / 1000.0,
+        duration_ms,
+        source_fps: 0.0,
+        sampling_fps: 0.0,
+        frame_count: frames.len() as u32,
+        frame_width,
+        frame_height,
+    };
+    let asset_label =
+        resolve_editor_character_animation_asset_label(payload.asset_label.as_deref());
+    let operation = editor_generation_operation(&caller)
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let task_id = operation.operation_id.clone();
+    let storage_task_id = format!(
+        "{}-{}",
+        sanitize_storage_segment(owner_user_id.as_str(), "owner"),
+        operation.operation_fingerprint
+    );
+    if let Some(reporter) = caller.phase_reporter.as_ref() {
+        reporter
+            .report_processing(&state)
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+    }
+    let matting_audit = crate::external_api_audit::ExternalApiAuditContext {
+        user_id: Some(owner_user_id.clone()),
+        profile_id: Some(project_id.clone()),
+        request_id: Some(request_context.request_id().to_string()),
+        external_call_deadline: request_context.external_call_deadline(),
+    };
+    let persisted_frames = extract_and_prepare_background_removal_frames(
+        &state,
+        &caller,
+        &storage_task_id,
+        &frames,
+        frame_width,
+        frame_height,
+        &matting_audit,
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let result_frames = persisted_frames.frames.clone();
+    let first_frame = result_frames.first().ok_or_else(|| {
+        character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request("去背景没有产生序列帧。"),
+        )
+    })?;
+    let frame_payload_json = serde_json::to_value(&result_frames).map_err(|error| {
+        character_animation_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+                "provider": "editor-character-animation",
+                "message": format!("序列化去背景帧失败：{error}"),
+            })),
+        )
+    })?;
+    let generation_inputs = rebuild_editor_generation_input_references(
+        &state,
+        owner_user_id.as_str(),
+        payload.generation_inputs.clone(),
+        vec![("源序列帧".to_string(), source_resource_id.clone())],
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let completed_at_micros = current_utc_micros();
+    let prepared = match prepare_editor_character_animation_sequence_result(
+        &caller,
+        Some(project_id.as_str()),
+        payload.asset_folder_id.as_deref(),
+        asset_label.as_str(),
+        "BgFilter",
+        Some(source_resource_id.clone()),
+        generation_inputs,
+        plan,
+        &persisted_frames,
+        frame_payload_json,
+        completed_at_micros,
+    ) {
+        Ok(prepared) => prepared,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(
+                &state,
+                &persisted_frames.uploaded_object_keys,
+            )
+            .await;
+            return Err(character_animation_error_response(&request_context, error));
+        }
+    };
+    let layer_id = format!("layer-editor-character-animation-{task_id}");
+    let canvas_item = payload.canvas_completion.as_ref().map(|completion| {
+        build_editor_character_animation_canvas_placement_item(
+            completion,
+            prepared.final_resource_id.as_str(),
+            first_frame.width,
+            first_frame.height,
+            layer_id.as_str(),
+        )
+    });
+    let canvas_layout_plan = EditorCanvasLayoutPlan::generation(
+        owner_user_id.as_str(),
+        Some(project_id.as_str()),
+        payload.canvas_completion.as_ref(),
+        canvas_item.into_iter().collect(),
+        Some(layer_id),
+    );
+    let final_candidate = prepared
+        .items
+        .iter()
+        .find(|item| item.slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .ok_or_else(|| {
+            character_animation_error_response(
+                &request_context,
+                editor_character_animation_bad_request("去背景缺少最终候选记录。"),
+            )
+        })?;
+    let compact_resource = final_candidate
+        .project_resource
+        .as_ref()
+        .map(compact_editor_generation_candidate_resource);
+    let compact_asset = final_candidate
+        .asset
+        .as_ref()
+        .map(compact_editor_generation_candidate_asset);
+    let job_result_payload_json = editor_generation_job_result_payload_json(
+        &caller,
+        json!({
+            "ok": true,
+            "taskId": task_id,
+            "frames": &result_frames,
+            "frameCount": result_frames.len(),
+            "durationMs": duration_ms,
+            "frameWidth": frame_width,
+            "frameHeight": frame_height,
+            "priceMudPoints": 0,
+            "resource": compact_resource,
+            "asset": compact_asset,
+        }),
+    );
+    let persisted = match persist_editor_generation_result_atomically(
+        &state,
+        &caller,
+        prepared.items,
+        canvas_layout_plan,
+        job_result_payload_json,
+        completed_at_micros,
+    )
+    .await
+    {
+        Ok(persisted) => persisted,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(
+                &state,
+                &persisted_frames.uploaded_object_keys,
+            )
+            .await;
+            return Err(character_animation_error_response(&request_context, error));
+        }
+    };
+    let final_resource = persisted
+        .items
+        .iter()
+        .find(|item| item.slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .and_then(|item| item.project_resource.clone())
+        .map(editor_project_resource_payload_from_record)
+        .and_then(|resource| serde_json::to_value(resource).ok());
+    let final_asset = persisted
+        .items
+        .iter()
+        .find(|item| item.slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .and_then(|item| item.asset.clone())
+        .map(editor_asset_payload_from_record)
+        .and_then(|asset| serde_json::to_value(asset).ok());
+    let completed_project = persisted
+        .project
+        .map(editor_project_payload_from_record)
+        .and_then(|project| serde_json::to_value(project).ok());
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorCharacterAnimationBackgroundRemovalResponse {
+            ok: true,
+            task_id,
+            frames: result_frames,
+            frame_count: plan.frame_count,
+            duration_ms,
+            frame_width,
+            frame_height,
+            price_mud_points: 0,
+            project: completed_project,
+            resource: final_resource,
+            asset: final_asset,
+            queue_state: None,
+        },
+    ))
+}
+
 pub(crate) async fn enqueue_editor_character_animation_for_owner(
     state: &AppState,
     request_context: &RequestContext,
@@ -992,6 +1420,10 @@ pub(crate) async fn enqueue_editor_character_animation_for_owner(
             .reference_src
             .as_deref()
             .is_some_and(matches_inline_media_source)
+        || payload
+            .appearance_reference_srcs
+            .iter()
+            .any(|source| matches_inline_media_source(source.as_str()))
     {
         return Err(character_animation_error_response(
             request_context,
@@ -1051,6 +1483,54 @@ pub(crate) async fn enqueue_editor_character_animation_for_owner(
     .map_err(|error| error.into_response_with_context(Some(request_context)))
 }
 
+pub(crate) async fn enqueue_editor_character_animation_video_conversion_for_owner(
+    state: &AppState,
+    request_context: &RequestContext,
+    owner_user_id: &str,
+    mut payload: EditorCharacterAnimationVideoConversionRequest,
+) -> Result<ExternalGenerationJobRecord, Response> {
+    if matches_inline_media_source(payload.source_video_src.as_str()) {
+        return Err(character_animation_error_response(
+            request_context,
+            editor_character_animation_bad_request("源视频必须先上传 OSS，并使用稳定媒体引用。"),
+        ));
+    }
+    crate::editor_sequence_animation::normalize_editor_character_animation_video_conversion_resolution(
+        payload.resolution.as_str(),
+    )
+    .map_err(|error| character_animation_error_response(request_context, error))?;
+    let target = preflight_editor_billable_generation_target(
+        state,
+        owner_user_id,
+        payload.project_id.clone(),
+        payload
+            .asset_folder_id
+            .clone()
+            .or_else(|| Some("project".to_string())),
+    )
+    .await
+    .map_err(|error| character_animation_error_response(request_context, error))?;
+    payload.project_id = target.project_id;
+    payload.asset_folder_id = target.asset_folder_id;
+    let source_entity_id = editor_generation_source_entity_id(
+        payload.project_id.as_deref(),
+        "character-animation-video-conversion",
+    );
+    enqueue_editor_generation_job_for_caller(
+        state,
+        request_context,
+        owner_user_id,
+        EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND,
+        source_entity_id,
+        "视频直接转换序列帧",
+        0,
+        &payload,
+        None,
+    )
+    .await
+    .map_err(|error| error.into_response_with_context(Some(request_context)))
+}
+
 pub(crate) async fn generate_editor_character_animation_for_owner(
     state: AppState,
     request_context: RequestContext,
@@ -1085,6 +1565,10 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             .reference_src
             .as_deref()
             .is_some_and(matches_inline_media_source)
+        || payload
+            .appearance_reference_srcs
+            .iter()
+            .any(|source| matches_inline_media_source(source.as_str()))
     {
         return Err(character_animation_error_response(
             &request_context,
@@ -1214,6 +1698,39 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             (Some(object_key), None)
         }
     };
+    let mut appearance_object_keys = Vec::new();
+    if !payload.appearance_reference_srcs.is_empty() {
+        if provisional_normalized.input_mode != EditorCharacterAnimationInputMode::Video {
+            return Err(character_animation_error_response(
+                &request_context,
+                editor_character_animation_bad_request("角色外观图仅支持视频模式。"),
+            ));
+        }
+        for appearance_src in &payload.appearance_reference_srcs {
+            let appearance_src = appearance_src.trim();
+            if appearance_src.is_empty() {
+                continue;
+            }
+            let object_key = resolve_editor_reference_object_key_for_owner(
+                &state,
+                owner_user_id.as_str(),
+                appearance_src,
+            )
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            // 先下载并解码图片完成权威 MIME、尺寸和内容校验；Provider 阶段必须继续使用
+            // 稳定 objectKey，由统一视频参考解析器签发可访问 URL，不能把内部 data URL 传下去。
+            resolve_editor_character_animation_reference_image(
+                &state,
+                &source_resolve_client,
+                object_key.as_str(),
+                "appearanceReferenceSrcs",
+            )
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+            appearance_object_keys.push(object_key);
+        }
+    }
     let priced = normalize_editor_character_animation_request_with_pricing(
         payload.clone(),
         &pricing,
@@ -1230,15 +1747,33 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
     )
     .await
     .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let mut appearance_source_resource_ids = Vec::with_capacity(appearance_object_keys.len());
+    for (index, appearance_object_key) in appearance_object_keys.iter().enumerate() {
+        let appearance_source_resource_id = validate_editor_character_animation_source_resource(
+            &state,
+            owner_user_id.as_str(),
+            project_id.as_deref(),
+            EditorCharacterAnimationInputMode::Image,
+            payload
+                .appearance_source_resource_ids
+                .get(index)
+                .map(String::as_str),
+            Some(appearance_object_key.as_str()),
+        )
+        .await
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+        appearance_source_resource_ids.push(appearance_source_resource_id);
+    }
     let authoritative_generation_inputs =
         build_authoritative_editor_character_animation_generation_inputs(
             client_generation_inputs,
             &payload,
             priced.input_mode,
             reference_object_key.as_deref(),
+            &appearance_object_keys,
         )
         .map_err(|error| character_animation_error_response(&request_context, error))?;
-    let generation_reference_sources = reference_object_key
+    let mut generation_reference_sources: Vec<(String, String)> = reference_object_key
         .as_ref()
         .map(|object_key| {
             (
@@ -1257,6 +1792,16 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
         })
         .into_iter()
         .collect();
+    for (index, object_key) in appearance_object_keys.iter().enumerate() {
+        generation_reference_sources.push((
+            "参考图片".to_string(),
+            appearance_source_resource_ids
+                .get(index)
+                .cloned()
+                .flatten()
+                .unwrap_or_else(|| object_key.clone()),
+        ));
+    }
     let generation_inputs = rebuild_editor_generation_input_references(
         &state,
         owner_user_id.as_str(),
@@ -1361,6 +1906,7 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
                         task_id.as_str(),
                         &normalized,
                         reference_object_key.as_deref(),
+                        &appearance_object_keys,
                     )
                     .await?
                 }
@@ -1371,32 +1917,71 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             // 都走 execute_billable 的失败退款。数据库事实稍后与 canvas/job 一次性原子提交。
             // 有别于角色生图 / 编辑器视频（provider 产物即交付物，provider 成功即收口扣费）。
             if let Some(reporter) = caller.phase_reporter.as_ref() {
-                reporter.report_processing(&state).await?;
+                if let Err(error) = reporter.report_processing(&state).await {
+                    cleanup_generated_editor_character_animation_preview(
+                        &state,
+                        &generated,
+                        "editor_animation_preview_cleanup_failed",
+                    )
+                    .await;
+                    return Err(error);
+                }
             }
-            let persisted_frames = extract_and_prepare_editor_character_animation_frames(
-                &state,
-                &caller,
-                normalized.source_layer_id.as_str(),
-                task_id.as_str(),
-                generated.preview_video_path.as_str(),
-                &normalized,
-                &extraction_settings,
-                &matting_audit,
-            )
-            .await?;
+            let persisted_frames =
+                match extract_and_prepare_editor_character_animation_frames(
+                    &state,
+                    &caller,
+                    normalized.source_layer_id.as_str(),
+                    task_id.as_str(),
+                    generated.preview_video_path.as_str(),
+                    &normalized,
+                    &extraction_settings,
+                    &matting_audit,
+                )
+                .await
+                {
+                    Ok(persisted_frames) => persisted_frames,
+                    Err(error) => {
+                        cleanup_generated_editor_character_animation_preview(
+                            &state,
+                            &generated,
+                            "editor_animation_preview_cleanup_failed",
+                        )
+                        .await;
+                        return Err(error);
+                    }
+                };
             let frames = persisted_frames.frames.clone();
-            frames.first().ok_or_else(|| {
-                AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
-                    "provider": "editor-character-animation",
-                    "message": "角色动作抽帧完成但没有可保存的序列帧。",
-                }))
-            })?;
-            let frame_payload_json = serde_json::to_value(&frames).map_err(|error| {
-                AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
-                    "provider": "editor-character-animation",
-                    "message": format!("角色动作序列帧无法持久化：{error}"),
-                }))
-            })?;
+            if frames.first().is_none() {
+                cleanup_generated_editor_character_animation_preview(
+                    &state,
+                    &generated,
+                    "editor_animation_preview_cleanup_failed",
+                )
+                .await;
+                return Err(AppError::from_status(StatusCode::BAD_GATEWAY).with_details(
+                    json!({
+                        "provider": "editor-character-animation",
+                        "message": "角色动作抽帧完成但没有可保存的序列帧。",
+                    }),
+                ));
+            }
+            let frame_payload_json = match serde_json::to_value(&frames) {
+                Ok(frame_payload_json) => frame_payload_json,
+                Err(error) => {
+                    cleanup_generated_editor_character_animation_preview(
+                        &state,
+                        &generated,
+                        "editor_animation_preview_cleanup_failed",
+                    )
+                    .await;
+                    return Err(AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR)
+                        .with_details(json!({
+                            "provider": "editor-character-animation",
+                            "message": format!("角色动作序列帧无法持久化：{error}"),
+                        })));
+                }
+            };
             Ok::<_, AppError>((generated, frames, normalized, persisted_frames, frame_payload_json))
         },
     )
@@ -1414,7 +1999,7 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
         )
     })?;
     let completed_at_micros = current_utc_micros();
-    let prepared = prepare_editor_character_animation_result(
+    let prepared = match prepare_editor_character_animation_result(
         &caller,
         project_id.as_deref(),
         asset_folder_id.as_deref().or(Some("project")),
@@ -1426,8 +2011,17 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
         &persisted_frames,
         frame_payload_json,
         completed_at_micros,
-    )
-    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    ) {
+        Ok(prepared) => prepared,
+        Err(error) => {
+            let mut object_keys = persisted_frames.uploaded_object_keys.clone();
+            if let Some(preview_object_key) = generated.object_key.as_deref() {
+                object_keys.push(preview_object_key.to_string());
+            }
+            cleanup_uncommitted_character_animation_objects(&state, &object_keys).await;
+            return Err(character_animation_error_response(&request_context, error));
+        }
+    };
     let layer_id = format!("layer-editor-character-animation-{task_id}");
     let canvas_item = canvas_completion.as_ref().map(|completion| {
         build_editor_character_animation_canvas_placement_item(
@@ -1485,7 +2079,7 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             "asset": compact_asset,
         }),
     );
-    let persisted = persist_editor_generation_result_atomically(
+    let persisted = match persist_editor_generation_result_atomically(
         &state,
         &caller,
         prepared.items,
@@ -1494,7 +2088,17 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
         completed_at_micros,
     )
     .await
-    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    {
+        Ok(persisted) => persisted,
+        Err(error) => {
+            let mut object_keys = persisted_frames.uploaded_object_keys.clone();
+            if let Some(preview_object_key) = generated.object_key.as_deref() {
+                object_keys.push(preview_object_key.to_string());
+            }
+            cleanup_uncommitted_character_animation_objects(&state, &object_keys).await;
+            return Err(character_animation_error_response(&request_context, error));
+        }
+    };
     let final_resource = persisted
         .items
         .iter()
@@ -1554,6 +2158,303 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
     ))
 }
 
+pub(crate) async fn convert_editor_character_animation_video_for_owner(
+    state: AppState,
+    request_context: RequestContext,
+    caller: EditorGenerationCaller,
+    payload: Result<Json<EditorCharacterAnimationVideoConversionRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(mut payload) = payload.map_err(|error| {
+        character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request(error.body_text()),
+        )
+    })?;
+    if matches_inline_media_source(payload.source_video_src.as_str()) {
+        return Err(character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request("源视频必须先上传 OSS，并使用稳定媒体引用。"),
+        ));
+    }
+    if payload.canvas_completion.is_some()
+        && payload
+            .project_id
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .is_none()
+    {
+        return Err(character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request("视频直接转换画布完成需要有效的 projectId。"),
+        ));
+    }
+    let owner_user_id = caller.owner_user_id.clone();
+    let target = preflight_editor_billable_generation_target(
+        &state,
+        owner_user_id.as_str(),
+        payload.project_id.clone(),
+        payload
+            .asset_folder_id
+            .clone()
+            .or_else(|| Some("project".to_string())),
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    payload.project_id = target.project_id;
+    payload.asset_folder_id = target.asset_folder_id;
+    let project_id = payload.project_id.clone();
+    let canvas_completion = payload.canvas_completion.clone();
+    let asset_label =
+        resolve_editor_character_animation_asset_label(payload.asset_label.as_deref());
+    let source_client = build_upstream_http_client(SOURCE_IMAGE_RESOLVE_TIMEOUT_MS)
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let source_object_key = resolve_editor_reference_object_key_for_owner(
+        &state,
+        owner_user_id.as_str(),
+        payload.source_video_src.as_str(),
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let extraction_settings = resolve_backend_frame_extraction_settings(&state);
+    let metadata = validate_editor_character_animation_reference_video_object(
+        &state,
+        &source_client,
+        owner_user_id.as_str(),
+        source_object_key.as_str(),
+        "sourceVideoSrc",
+        &extraction_settings,
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let plan = build_editor_character_animation_video_conversion_plan(
+        metadata.duration_seconds,
+        metadata.source_fps,
+        metadata.width,
+        metadata.height,
+        payload.resolution.as_str(),
+    )
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let source_resource_id = validate_editor_character_animation_source_resource(
+        &state,
+        owner_user_id.as_str(),
+        project_id.as_deref(),
+        EditorCharacterAnimationInputMode::Video,
+        payload.source_resource_id.as_deref(),
+        Some(source_object_key.as_str()),
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let source_resource_id =
+        source_resource_id.or(resolve_editor_character_animation_source_asset_resource(
+            &state,
+            owner_user_id.as_str(),
+            project_id.as_deref(),
+            payload.generation_inputs.as_ref(),
+            source_object_key.as_str(),
+        )
+        .await
+        .map_err(|error| character_animation_error_response(&request_context, error))?);
+    let authoritative_inputs =
+        build_authoritative_editor_character_animation_video_conversion_inputs(
+            payload.generation_inputs.clone(),
+            &payload,
+            source_object_key.as_str(),
+            plan,
+        )
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let generation_inputs = rebuild_editor_generation_input_references(
+        &state,
+        owner_user_id.as_str(),
+        Some(authoritative_inputs),
+        vec![(
+            "源视频".to_string(),
+            source_resource_id
+                .clone()
+                .unwrap_or_else(|| source_object_key.clone()),
+        )],
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let operation = editor_generation_operation(&caller)
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let task_id = operation.operation_id.clone();
+    // operation_id 用于持久化幂等；帧对象路径还绑定请求 fingerprint。相同 request id
+    // 的不同请求不会互相覆盖，重试同一请求仍能重用路径。
+    let storage_task_id = format!(
+        "{}-{}",
+        sanitize_storage_segment(owner_user_id.as_str(), "owner"),
+        operation.operation_fingerprint
+    );
+    if let Some(reporter) = caller.phase_reporter.as_ref() {
+        reporter
+            .report_processing(&state)
+            .await
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
+    }
+    let persisted_frames = extract_and_prepare_direct_video_conversion_frames(
+        &state,
+        &caller,
+        storage_task_id.as_str(),
+        source_object_key.as_str(),
+        plan,
+        &extraction_settings,
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let frames = persisted_frames.frames.clone();
+    let first_frame = frames.first().ok_or_else(|| {
+        character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request("视频直接转换没有产生序列帧。"),
+        )
+    })?;
+    let frame_payload_json = serde_json::to_value(&frames).map_err(|error| {
+        character_animation_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+                "provider": "editor-character-animation",
+                "message": format!("序列化直接转换帧失败：{error}"),
+            })),
+        )
+    })?;
+    let completed_at_micros = current_utc_micros();
+    let prepared = match prepare_editor_character_animation_sequence_result(
+        &caller,
+        project_id.as_deref(),
+        payload.asset_folder_id.as_deref(),
+        asset_label.as_str(),
+        "FFmpeg",
+        source_resource_id,
+        generation_inputs,
+        plan,
+        &persisted_frames,
+        frame_payload_json,
+        completed_at_micros,
+    ) {
+        Ok(prepared) => prepared,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(
+                &state,
+                &persisted_frames.uploaded_object_keys,
+            )
+            .await;
+            return Err(character_animation_error_response(&request_context, error));
+        }
+    };
+    let layer_id = format!("layer-editor-character-animation-{task_id}");
+    let canvas_item = canvas_completion.as_ref().map(|completion| {
+        build_editor_character_animation_canvas_placement_item(
+            completion,
+            prepared.final_resource_id.as_str(),
+            first_frame.width,
+            first_frame.height,
+            layer_id.as_str(),
+        )
+    });
+    let canvas_layout_plan = EditorCanvasLayoutPlan::generation(
+        owner_user_id.as_str(),
+        project_id.as_deref(),
+        canvas_completion.as_ref(),
+        canvas_item.into_iter().collect(),
+        Some(layer_id),
+    );
+    let final_candidate = prepared
+        .items
+        .iter()
+        .find(|item| item.slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .ok_or_else(|| {
+            character_animation_error_response(
+                &request_context,
+                editor_character_animation_bad_request("视频直接转换缺少最终候选记录。"),
+            )
+        })?;
+    let compact_resource = final_candidate
+        .project_resource
+        .as_ref()
+        .map(compact_editor_generation_candidate_resource);
+    let compact_asset = final_candidate
+        .asset
+        .as_ref()
+        .map(compact_editor_generation_candidate_asset);
+    let job_result_payload_json = editor_generation_job_result_payload_json(
+        &caller,
+        json!({
+            "ok": true,
+            "taskId": task_id,
+            "processingMethod": "视频直接转换",
+            "frames": &frames,
+            "frameCount": frames.len(),
+            "durationMs": plan.duration_ms,
+            "frameWidth": plan.frame_width,
+            "frameHeight": plan.frame_height,
+            "sourceFps": plan.source_fps,
+            "samplingFps": plan.sampling_fps,
+            "priceMudPoints": 0,
+            "resource": compact_resource,
+            "asset": compact_asset,
+        }),
+    );
+    let persisted = match persist_editor_generation_result_atomically(
+        &state,
+        &caller,
+        prepared.items,
+        canvas_layout_plan,
+        job_result_payload_json,
+        completed_at_micros,
+    )
+    .await
+    {
+        Ok(persisted) => persisted,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(
+                &state,
+                &persisted_frames.uploaded_object_keys,
+            )
+            .await;
+            return Err(character_animation_error_response(&request_context, error));
+        }
+    };
+    let final_resource = persisted
+        .items
+        .iter()
+        .find(|item| item.slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .and_then(|item| item.project_resource.clone())
+        .map(editor_project_resource_payload_from_record)
+        .and_then(|resource| serde_json::to_value(resource).ok());
+    let final_asset = persisted
+        .items
+        .iter()
+        .find(|item| item.slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .and_then(|item| item.asset.clone())
+        .map(editor_asset_payload_from_record)
+        .and_then(|asset| serde_json::to_value(asset).ok());
+    let completed_project = persisted
+        .project
+        .map(editor_project_payload_from_record)
+        .and_then(|project| serde_json::to_value(project).ok());
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorCharacterAnimationVideoConversionResponse {
+            ok: true,
+            task_id,
+            processing_method: "视频直接转换".to_string(),
+            frames,
+            frame_count: plan.frame_count,
+            duration_ms: plan.duration_ms,
+            frame_width: plan.frame_width,
+            frame_height: plan.frame_height,
+            source_fps: plan.source_fps,
+            sampling_fps: plan.sampling_fps,
+            price_mud_points: 0,
+            project: completed_project,
+            resource: final_resource,
+            asset: final_asset,
+            queue_state: None,
+        },
+    ))
+}
+
 pub async fn generate_editor_video(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -2338,6 +3239,87 @@ async fn resolve_media_source_as_data_url(
     Ok(media_payload_as_data_url(&payload))
 }
 
+async fn resolve_editor_character_animation_source_asset_resource(
+    state: &AppState,
+    owner_user_id: &str,
+    project_id: Option<&str>,
+    generation_inputs: Option<&Value>,
+    source_object_key: &str,
+) -> Result<Option<String>, AppError> {
+    let Some(reference) = generation_inputs
+        .and_then(Value::as_object)
+        .and_then(|inputs| inputs.get("references"))
+        .and_then(Value::as_array)
+        .and_then(|references| {
+            references.iter().find(|reference| {
+                reference.get("id").and_then(Value::as_str) == Some("source")
+                    || reference.get("id").and_then(Value::as_str) == Some("motion")
+            })
+        })
+    else {
+        return Ok(None);
+    };
+    if reference.get("refType").and_then(Value::as_str) != Some("asset") {
+        return Ok(None);
+    }
+    let Some(asset_id) = reference.get("refId").and_then(Value::as_str) else {
+        return Ok(None);
+    };
+    let library = state
+        .spacetime_client()
+        .get_editor_asset_library(owner_user_id.to_string(), current_utc_micros())
+        .await
+        .map_err(map_editor_project_error)?;
+    let Some(asset) = library
+        .assets
+        .iter()
+        .find(|asset| asset.asset_id.trim() == asset_id.trim())
+    else {
+        return Err(editor_character_animation_bad_request(
+            "源视频素材不属于当前账号。",
+        ));
+    };
+    let asset_object_key = normalize_editor_record_object_key(
+        asset.object_key.as_deref(),
+        asset.image_src.as_str(),
+    )
+    .ok_or_else(|| editor_character_animation_bad_request("源视频素材缺少稳定 objectKey。"))?;
+    if asset_object_key != source_object_key.trim().trim_start_matches('/') {
+        return Err(editor_character_animation_bad_request(
+            "源视频素材与本次转换对象不一致。",
+        ));
+    }
+    let Some(source_resource_id) = asset.source_resource_id.as_deref() else {
+        return Ok(None);
+    };
+    let Some(project_id) = project_id.map(str::trim).filter(|id| !id.is_empty()) else {
+        return Ok(None);
+    };
+    let project = state
+        .spacetime_client()
+        .get_editor_project(EditorProjectGetRecordInput {
+            project_id: project_id.to_string(),
+            owner_user_id: owner_user_id.to_string(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    let resource = project
+        .resources
+        .iter()
+        .find(|resource| resource.resource_id.trim() == source_resource_id.trim())
+        .ok_or_else(|| {
+            editor_character_animation_bad_request("源视频素材来源资源不属于当前画布项目。")
+        })?;
+    if resource.owner_user_id.trim() != owner_user_id.trim()
+        || resource.project_id.trim() != project_id
+    {
+        return Err(editor_character_animation_bad_request(
+            "源视频素材来源资源不属于当前账号或当前画布项目。",
+        ));
+    }
+    Ok(Some(source_resource_id.trim().to_string()))
+}
+
 async fn validate_editor_character_animation_source_resource(
     state: &AppState,
     owner_user_id: &str,
@@ -2459,8 +3441,13 @@ async fn resolve_editor_character_animation_reference_image(
             "参考图片缺少可识别的媒体宽高。",
         ));
     }
+    // 数据 URL 必须与声明的权威宽高一致：带 EXIF 旋转（如手机竖拍）的源图在
+    // apply_orientation 后宽高已交换，若仍返回原始字节，`ratio="same"` 会用声明尺寸
+    // 去算帧尺寸而 provider 实际拿到的是未旋转图像，导致 letterbox 与预览错位。
+    let data_url = encode_rgba_image_as_png_data_url(&decoded.to_rgba8())
+        .ok_or_else(|| editor_character_animation_bad_request("参考图片重新编码失败。"))?;
     Ok(ResolvedEditorCharacterAnimationReferenceImage {
-        data_url: media_payload_as_data_url(&payload),
+        data_url,
         width: decoded.width(),
         height: decoded.height(),
     })
@@ -2575,7 +3562,7 @@ fn probe_editor_character_animation_reference_video_metadata(
                 "-select_streams",
                 "v:0",
                 "-show_entries",
-                "stream=width,height:stream_tags=rotate:stream_side_data=rotation:format=duration",
+                "stream=width,height,avg_frame_rate,r_frame_rate:stream_tags=rotate:stream_side_data=rotation:format=duration",
                 "-of",
                 "json",
                 input_path.to_string_lossy().as_ref(),
@@ -2633,10 +3620,22 @@ fn parse_editor_character_animation_reference_video_probe(
     {
         std::mem::swap(&mut width, &mut height);
     }
+    let source_fps = stream
+        .get("avg_frame_rate")
+        .and_then(Value::as_str)
+        .and_then(crate::editor_sequence_animation::parse_editor_character_animation_ffprobe_frame_rate)
+        .or_else(|| {
+            stream
+                .get("r_frame_rate")
+                .and_then(Value::as_str)
+                .and_then(crate::editor_sequence_animation::parse_editor_character_animation_ffprobe_frame_rate)
+        })
+        .unwrap_or(1.0);
     Ok(EditorCharacterAnimationReferenceVideoMetadata {
         duration_seconds,
         width,
         height,
+        source_fps,
     })
 }
 
@@ -3007,14 +4006,26 @@ async fn put_generated_editor_character_animation_preview(
         ),
     )
     .await?;
-    let prepared_asset_object = prepare_editor_character_animation_source_asset_object(
+    let prepared_asset_object = match prepare_editor_character_animation_source_asset_object(
         state,
         caller,
         source_layer_id,
         put_result.object_key.clone(),
         content_type,
     )
-    .await?;
+    .await
+    {
+        Ok(prepared_asset_object) => prepared_asset_object,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_object(
+                state,
+                put_result.object_key.as_str(),
+                "editor_animation_preview_prepare_cleanup_failed",
+            )
+            .await;
+            return Err(error);
+        }
+    };
 
     Ok(PersistedEditorCharacterAnimationPreview {
         legacy_public_path: put_result.legacy_public_path,
@@ -3079,9 +4090,14 @@ async fn request_editor_sequence_animation_text_or_video_preview(
     task_id: &str,
     request: &NormalizedEditorCharacterAnimationRequest,
     reference_object_key: Option<&str>,
+    appearance_reference_srcs: &[String],
 ) -> Result<GeneratedAnimationPreview, AppError> {
-    let video_request =
-        build_editor_sequence_animation_video_request(settings, request, reference_object_key)?;
+    let video_request = build_editor_sequence_animation_video_request(
+        settings,
+        request,
+        reference_object_key,
+        appearance_reference_srcs,
+    )?;
     let video_settings = EditorVideoSettings {
         ark: settings.ark.clone(),
     };
@@ -3130,6 +4146,7 @@ fn build_editor_sequence_animation_video_request(
     settings: &EditorCharacterAnimationSettings,
     request: &NormalizedEditorCharacterAnimationRequest,
     reference_object_key: Option<&str>,
+    appearance_reference_srcs: &[String],
 ) -> Result<NormalizedEditorVideoRequest, AppError> {
     let reference_video_srcs = match request.input_mode {
         EditorCharacterAnimationInputMode::Text => Vec::new(),
@@ -3145,7 +4162,14 @@ fn build_editor_sequence_animation_video_request(
         }
     };
     Ok(NormalizedEditorVideoRequest {
-        prompt: request.prompt.clone(),
+        prompt: if !appearance_reference_srcs.is_empty() {
+            format!(
+                "{}\n严格使用参考视频的动作、节奏与镜头；严格使用参考图片的角色外观、服装和身份，不交换两种参考的职责。",
+                request.prompt
+            )
+        } else {
+            request.prompt.clone()
+        },
         model: EDITOR_CHARACTER_ANIMATION_MODEL.to_string(),
         provider_model: settings.ark.model.clone(),
         aspect_ratio: request.ratio.clone(),
@@ -3155,7 +4179,7 @@ fn build_editor_sequence_animation_video_request(
         price_mud_points: request.price_mud_points,
         width: request.frame_width,
         height: request.frame_height,
-        reference_image_srcs: Vec::new(),
+        reference_image_srcs: appearance_reference_srcs.to_vec(),
         reference_video_srcs,
         reference_audio_srcs: Vec::new(),
     })
@@ -3532,6 +4556,11 @@ async fn extract_and_prepare_editor_character_animation_frames(
             error = %error,
             "editor_animation_frame_pipeline_failed_after_drain"
         );
+        let uploaded_object_keys = frame_payloads
+            .iter()
+            .map(|frame| frame.object_key.clone())
+            .collect::<Vec<_>>();
+        cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
         return Err(error);
     }
 
@@ -3554,9 +4583,14 @@ fn build_persisted_editor_character_animation_frame_set(
         .iter()
         .map(|frame| (frame.slot.clone(), frame.prepared_asset_object.clone()))
         .collect();
+    let uploaded_object_keys = frame_payloads
+        .iter()
+        .map(|frame| frame.object_key.clone())
+        .collect();
     Ok(PersistedEditorCharacterAnimationFrameSet {
         first_frame_object_key,
         prepared_asset_objects,
+        uploaded_object_keys,
         frames: frame_payloads
             .into_iter()
             .map(|frame| frame.payload)
@@ -3564,6 +4598,334 @@ fn build_persisted_editor_character_animation_frame_set(
     })
 }
 
+async fn cleanup_generated_editor_character_animation_preview(
+    state: &AppState,
+    generated: &GeneratedAnimationPreview,
+    reason: &'static str,
+) {
+    let Some(object_key) = generated.object_key.as_deref() else {
+        return;
+    };
+    cleanup_uncommitted_character_animation_object(state, object_key, reason).await;
+}
+
+async fn cleanup_uncommitted_character_animation_object(
+    state: &AppState,
+    object_key: &str,
+    reason: &'static str,
+) {
+    let Ok(oss_client) = require_oss_client(state) else {
+        return;
+    };
+    // 清理前必须先查正式 asset_object；首次提交成功但响应丢失后，重试失败不能把
+    // 已提交结果引用的对象删掉。查询失败时采取 fail-closed，宁可留下孤儿对象，也不能
+    // 破坏正式资产。
+    let registered = match state
+        .spacetime_client()
+        .get_asset_object_by_location(module_assets::AssetObjectLocationInput {
+            bucket: oss_client.config_bucket().to_string(),
+            object_key: object_key.to_string(),
+        })
+        .await
+    {
+        Ok(registered) => registered,
+        Err(error) => {
+            tracing::warn!(
+                object_key,
+                error = %error,
+                reason,
+                "character_animation_orphan_cleanup_registration_lookup_failed"
+            );
+            return;
+        }
+    };
+    if registered.is_some() {
+        tracing::debug!(
+            object_key,
+            reason,
+            "character_animation_orphan_cleanup_skipped_registered_object"
+        );
+        return;
+    }
+    if let Err(error) = oss_client
+        .delete_object(
+            state.character_animation_oss_http_client(),
+            OssDeleteObjectRequest {
+                object_key: object_key.to_string(),
+            },
+        )
+        .await
+    {
+        tracing::warn!(
+            object_key,
+            error = %error,
+            reason,
+            "character_animation_orphan_cleanup_failed"
+        );
+    }
+}
+
+async fn cleanup_uncommitted_character_animation_objects(state: &AppState, object_keys: &[String]) {
+    for object_key in object_keys {
+        cleanup_uncommitted_character_animation_object(
+            state,
+            object_key.as_str(),
+            "direct_video_conversion_orphan_cleanup_failed",
+        )
+        .await;
+    }
+}
+
+async fn extract_and_prepare_direct_video_conversion_frames(
+    state: &AppState,
+    caller: &EditorGenerationCaller,
+    task_id: &str,
+    source_object_key: &str,
+    plan: crate::editor_sequence_animation::EditorCharacterAnimationVideoConversionPlan,
+    extraction_settings: &BackendFrameExtractionSettings,
+) -> Result<PersistedEditorCharacterAnimationFrameSet, AppError> {
+    let payload = load_media_source_payload_with_client(
+        state,
+        state.character_animation_oss_http_client(),
+        source_object_key,
+        Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_BYTES),
+    )
+    .await?;
+    let temp_dir = create_animation_temp_dir()?;
+    let input_path = temp_dir.join(format!("source.{}", payload.extension));
+    fs::write(&input_path, payload.bytes).map_err(|error| {
+        AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+            "provider": "editor-character-animation",
+            "message": format!("写入直接转换源视频失败：{error}"),
+        }))
+    })?;
+    let extraction = (|| {
+        let target_seconds = (0..plan.frame_count)
+            .map(|index| {
+                compute_sample_time_seconds(
+                    plan.duration_seconds,
+                    index,
+                    plan.frame_count,
+                    0.0,
+                    1.0,
+                    true,
+                )
+            })
+            .collect::<Vec<_>>();
+        let output_paths = (0..plan.frame_count)
+            .map(|index| temp_dir.join(format!("frame-{:03}.png", index + 1)))
+            .collect::<Vec<_>>();
+        extract_video_frames_to_png(
+            &input_path,
+            output_paths.as_slice(),
+            target_seconds.as_slice(),
+            extraction_settings,
+        )?;
+        output_paths
+            .into_iter()
+            .map(|path| {
+                let bytes = fs::read(path).map_err(|error| {
+                    AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                        "provider": "editor-character-animation",
+                        "message": format!("读取直接转换帧失败：{error}"),
+                    }))
+                })?;
+                finalize_animation_frame_payload(
+                    bytes.as_slice(),
+                    "image/png",
+                    plan.frame_width,
+                    plan.frame_height,
+                    false,
+                )
+            })
+            .collect::<Result<Vec<_>, _>>()
+    })();
+    let _ = fs::remove_dir_all(&temp_dir);
+    let frames = extraction?;
+    let mut processed = Vec::with_capacity(frames.len());
+    let mut uploaded_object_keys = Vec::with_capacity(frames.len());
+    for (frame_index, frame) in frames.into_iter().enumerate() {
+        let content_type = frame.mime_type.clone();
+        let put_result = match put_character_animation_frame_object(
+            state,
+            frame_index + 1,
+            "conversion_frame_put",
+            LegacyAssetPrefix::Animations,
+            vec![
+                "editor".to_string(),
+                "video-conversions".to_string(),
+                task_id.to_string(),
+            ],
+            format!("frame{:03}.png", frame_index + 1),
+            frame.mime_type,
+            frame.bytes,
+            build_asset_metadata(
+                EDITOR_CHARACTER_ANIMATION_ASSET_KIND,
+                caller.owner_user_id.as_str(),
+                "editor_video_conversion",
+                task_id,
+                "animation_frame",
+                "video-direct-conversion",
+            ),
+        )
+        .await
+        {
+            Ok(result) => result,
+            Err(error) => {
+                cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+                return Err(error);
+            }
+        };
+        uploaded_object_keys.push(put_result.object_key.clone());
+        let slot = editor_character_animation_frame_slot(frame_index);
+        let prepared_asset_object = match prepare_editor_character_animation_frame_asset_object(
+            state,
+            caller,
+            task_id,
+            slot.as_str(),
+            put_result.object_key.clone(),
+            content_type,
+            frame_index + 1,
+        )
+        .await
+        {
+            Ok(result) => result,
+            Err(error) => {
+                cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+                return Err(error);
+            }
+        };
+        processed.push(ProcessedEditorCharacterAnimationFrame {
+            frame_index,
+            payload: build_editor_character_animation_frame_payload(
+                put_result.legacy_public_path,
+                put_result.object_key.clone(),
+                prepared_asset_object.asset_object_id.clone(),
+                plan.frame_width,
+                plan.frame_height,
+            ),
+            object_key: put_result.object_key,
+            prepared_asset_object,
+            slot,
+        });
+    }
+    match build_persisted_editor_character_animation_frame_set(processed) {
+        Ok(result) => Ok(result),
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+            Err(error)
+        }
+    }
+}
+
+/// 对已有序列帧逐帧做通用抠图（BgFilter complex，无键色），生成透明序列帧对象。
+/// 输入是源序列帧资源的稳定 objectKey 列表；任一帧失败即整批清理，不发布残缺结果。
+async fn extract_and_prepare_background_removal_frames(
+    state: &AppState,
+    caller: &EditorGenerationCaller,
+    task_id: &str,
+    source_frames: &[EditorCharacterAnimationFramePayload],
+    frame_width: u32,
+    frame_height: u32,
+    audit: &crate::external_api_audit::ExternalApiAuditContext,
+) -> Result<PersistedEditorCharacterAnimationFrameSet, AppError> {
+    let mut processed = Vec::with_capacity(source_frames.len());
+    let mut uploaded_object_keys = Vec::with_capacity(source_frames.len());
+    for (frame_index, source_frame) in source_frames.iter().enumerate() {
+        let source_object_key = source_frame
+            .object_key
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                editor_character_animation_bad_request("序列帧缺少稳定 objectKey，无法去背景。")
+            })?;
+        let removed = request_editor_background_removal_image_with_bgfilter_worker(
+            state,
+            source_object_key,
+            audit,
+        )
+        .await?;
+        let finalized = finalize_animation_frame_payload(
+            removed.image.bytes.as_slice(),
+            removed.image.mime_type.as_str(),
+            frame_width,
+            frame_height,
+            false,
+        )?;
+        let content_type = finalized.mime_type.clone();
+        let put_result = match put_character_animation_frame_object(
+            state,
+            frame_index + 1,
+            "background_removal_frame_put",
+            LegacyAssetPrefix::Animations,
+            vec![
+                "editor".to_string(),
+                "background-removals".to_string(),
+                task_id.to_string(),
+            ],
+            format!("frame{:03}.png", frame_index + 1),
+            finalized.mime_type,
+            finalized.bytes,
+            build_asset_metadata(
+                EDITOR_CHARACTER_ANIMATION_ASSET_KIND,
+                caller.owner_user_id.as_str(),
+                "editor_background_removal",
+                task_id,
+                "animation_frame",
+                "background-removal",
+            ),
+        )
+        .await
+        {
+            Ok(result) => result,
+            Err(error) => {
+                cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+                return Err(error);
+            }
+        };
+        uploaded_object_keys.push(put_result.object_key.clone());
+        let slot = editor_character_animation_frame_slot(frame_index);
+        let prepared_asset_object = match prepare_editor_character_animation_frame_asset_object(
+            state,
+            caller,
+            task_id,
+            slot.as_str(),
+            put_result.object_key.clone(),
+            content_type,
+            frame_index + 1,
+        )
+        .await
+        {
+            Ok(result) => result,
+            Err(error) => {
+                cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+                return Err(error);
+            }
+        };
+        processed.push(ProcessedEditorCharacterAnimationFrame {
+            frame_index,
+            payload: build_editor_character_animation_frame_payload(
+                put_result.legacy_public_path,
+                put_result.object_key.clone(),
+                prepared_asset_object.asset_object_id.clone(),
+                frame_width,
+                frame_height,
+            ),
+            object_key: put_result.object_key,
+            prepared_asset_object,
+            slot,
+        });
+    }
+    match build_persisted_editor_character_animation_frame_set(processed) {
+        Ok(result) => Ok(result),
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+            Err(error)
+        }
+    }
+}
+
 async fn process_and_persist_editor_character_animation_frame(
     state: &AppState,
     caller: &EditorGenerationCaller,
@@ -3576,7 +4938,8 @@ async fn process_and_persist_editor_character_animation_frame(
     screen_color: EditorScreenBackgroundColor,
     audit: &crate::external_api_audit::ExternalApiAuditContext,
 ) -> Result<ProcessedEditorCharacterAnimationFrame, AppError> {
-    // 中文注释：每一帧只要求自己的绿幕源图先落 OSS，不再等待整批源图全部上传完成。
+    // 每一帧的绿幕源图仅作为 BgFilter 输入，不是正式产物；无论该帧后续哪一步失败，
+    // 都必须清理它。最终 PNG 只有在整批原子登记成功后才成为正式资产对象。
     let source_put = put_character_animation_frame_object(
         state,
         frame_index + 1,
@@ -3604,10 +4967,9 @@ async fn process_and_persist_editor_character_animation_frame(
         ),
     )
     .await?;
+    let source_object_key = source_put.object_key.clone();
 
-    // 排队与调用预算由共享 helper 按 N/est 公式和父剩余预算派生，动画帧不再携带
-    // 任何按帧数放大的 timeout。
-    let removed = remove_editor_generated_screen_background_with_bgfilter(
+    let removed = match remove_editor_generated_screen_background_with_bgfilter(
         state,
         source_put.object_key.as_str(),
         screen_color,
@@ -3615,21 +4977,44 @@ async fn process_and_persist_editor_character_animation_frame(
         EDITOR_BGFILTER_CROSS_CHECK_ENABLED,
         audit,
     )
-    .await?;
+    .await
+    {
+        Ok(removed) => removed,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_object(
+                state,
+                source_object_key.as_str(),
+                "editor_animation_source_cleanup_failed",
+            )
+            .await;
+            return Err(error);
+        }
+    };
     tracing::debug!(
         frame_index,
         screen_color = screen_color.hex,
         "editor_animation_frame_background_removed"
     );
-    let finalized = finalize_animation_frame_payload(
+    let finalized = match finalize_animation_frame_payload(
         removed.image.bytes.as_slice(),
         removed.image.mime_type.as_str(),
         frame_width,
         frame_height,
         false,
-    )?;
+    ) {
+        Ok(finalized) => finalized,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_object(
+                state,
+                source_object_key.as_str(),
+                "editor_animation_source_cleanup_failed",
+            )
+            .await;
+            return Err(error);
+        }
+    };
     let content_type = finalized.mime_type.clone();
-    let put_result = put_character_animation_frame_object(
+    let put_result = match put_character_animation_frame_object(
         state,
         frame_index + 1,
         "final_put",
@@ -3651,9 +5036,21 @@ async fn process_and_persist_editor_character_animation_frame(
             "editor-character-animation",
         ),
     )
-    .await?;
+    .await
+    {
+        Ok(result) => result,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_object(
+                state,
+                source_object_key.as_str(),
+                "editor_animation_source_cleanup_failed",
+            )
+            .await;
+            return Err(error);
+        }
+    };
     let slot = editor_character_animation_frame_slot(frame_index);
-    let prepared_asset_object = prepare_editor_character_animation_frame_asset_object(
+    let prepared_asset_object = match prepare_editor_character_animation_frame_asset_object(
         state,
         caller,
         source_layer_id,
@@ -3662,7 +5059,24 @@ async fn process_and_persist_editor_character_animation_frame(
         content_type,
         frame_index + 1,
     )
-    .await?;
+    .await
+    {
+        Ok(result) => result,
+        Err(error) => {
+            cleanup_uncommitted_character_animation_objects(
+                state,
+                &[source_object_key.clone(), put_result.object_key.clone()],
+            )
+            .await;
+            return Err(error);
+        }
+    };
+    cleanup_uncommitted_character_animation_object(
+        state,
+        source_object_key.as_str(),
+        "editor_animation_source_cleanup_failed",
+    )
+    .await;
 
     Ok(ProcessedEditorCharacterAnimationFrame {
         frame_index,
@@ -4189,6 +5603,7 @@ fn editor_inline_generation_caller<T: Serialize>(
             "message": format!("序列化编辑器生成幂等请求失败：{error}"),
         }))
     })?;
+    let operation_id = validate_editor_generation_operation_id(request_context.request_id())?;
     Ok(EditorGenerationCaller {
         audit_subject_user_id: Some(owner_user_id.clone()),
         audit_project_id: None,
@@ -4196,7 +5611,7 @@ fn editor_inline_generation_caller<T: Serialize>(
         phase_reporter: None,
         operation: Some(EditorGenerationOperationContext {
             operation_kind: operation_kind.to_string(),
-            operation_id: request_context.request_id().trim().to_string(),
+            operation_id,
             operation_fingerprint: editor_generation_request_fingerprint(
                 operation_kind,
                 request_payload_json.as_str(),
@@ -4448,6 +5863,132 @@ fn prepare_editor_character_animation_result(
     })
 }
 
+#[allow(clippy::too_many_arguments)]
+fn prepare_editor_character_animation_sequence_result(
+    caller: &EditorGenerationCaller,
+    project_id: Option<&str>,
+    asset_folder_id: Option<&str>,
+    asset_label: &str,
+    provider: &str,
+    source_resource_id: Option<String>,
+    generation_inputs: Option<Value>,
+    plan: crate::editor_sequence_animation::EditorCharacterAnimationVideoConversionPlan,
+    frames: &PersistedEditorCharacterAnimationFrameSet,
+    frame_payload_json: Value,
+    completed_at_micros: i64,
+) -> Result<PreparedEditorCharacterAnimationResult, AppError> {
+    let operation = editor_generation_operation(caller)?;
+    let first_frame = frames.frames.first().ok_or_else(|| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "editor-character-animation",
+            "message": "序列帧生成没有产生可保存的帧。",
+        }))
+    })?;
+    let final_object = frames
+        .prepared_asset_objects
+        .iter()
+        .find(|(slot, _)| slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+        .map(|(_, object)| object.clone())
+        .ok_or_else(|| editor_character_animation_bad_request("序列帧生成缺少首帧对象。"))?;
+    let final_resource_id = editor_generation_stable_resource_id(
+        caller.owner_user_id.as_str(),
+        operation.operation_kind.as_str(),
+        operation.operation_id.as_str(),
+        EDITOR_CHARACTER_ANIMATION_FINAL_SLOT,
+    );
+    let generation_inputs_json = serialize_editor_generation_inputs(
+        Some(EDITOR_CHARACTER_ANIMATION_RESOURCE_ASSET_KIND),
+        sanitize_editor_client_generation_inputs(generation_inputs),
+    )?;
+    let image_sequence_frames_json =
+        serialize_editor_image_sequence_frames(Some(frame_payload_json))?;
+    let project_id = project_id
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(str::to_string);
+    let final_resource =
+        project_id
+            .as_ref()
+            .map(|project_id| EditorProjectResourceCreateRecordInput {
+                resource_id: final_resource_id.clone(),
+                project_id: project_id.clone(),
+                owner_user_id: caller.owner_user_id.clone(),
+                asset_object_id: Some(final_object.asset_object_id.clone()),
+                image_src: first_frame.image_src.clone(),
+                object_key: Some(frames.first_frame_object_key.clone()),
+                width: first_frame.width,
+                height: first_frame.height,
+                source_type: "generated".to_string(),
+                prompt: None,
+                actual_prompt: None,
+                model: None,
+                provider: Some(provider.to_string()),
+                task_id: Some(operation.operation_id.clone()),
+                source_resource_id: source_resource_id.clone(),
+                asset_kind: Some(EDITOR_CHARACTER_ANIMATION_RESOURCE_ASSET_KIND.to_string()),
+                generation_inputs_json: generation_inputs_json.clone(),
+                updated_at_micros: completed_at_micros,
+                image_sequence_frames_json: image_sequence_frames_json.clone(),
+                image_sequence_duration_ms: Some(plan.duration_ms),
+            });
+    let final_asset = asset_folder_id
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(|folder_id| EditorAssetCreateRecordInput {
+            asset_id: editor_generation_stable_asset_id(
+                caller.owner_user_id.as_str(),
+                operation.operation_kind.as_str(),
+                operation.operation_id.as_str(),
+                EDITOR_CHARACTER_ANIMATION_FINAL_SLOT,
+            ),
+            owner_user_id: caller.owner_user_id.clone(),
+            folder_id: folder_id.to_string(),
+            label: asset_label.to_string(),
+            asset_object_id: Some(final_object.asset_object_id.clone()),
+            image_src: first_frame.image_src.clone(),
+            object_key: Some(frames.first_frame_object_key.clone()),
+            width: first_frame.width,
+            height: first_frame.height,
+            source_type: "generated".to_string(),
+            prompt: None,
+            actual_prompt: None,
+            model: None,
+            provider: Some(provider.to_string()),
+            task_id: Some(operation.operation_id.clone()),
+            asset_kind: Some(EDITOR_CHARACTER_ANIMATION_RESOURCE_ASSET_KIND.to_string()),
+            generation_inputs_json,
+            source_resource_id: final_resource
+                .as_ref()
+                .map(|resource| resource.resource_id.clone()),
+            now_micros: completed_at_micros,
+            thumbnail_src: Some(first_frame.image_src.clone()),
+            generation_cost_mud_points: 0,
+            group_task_id: None,
+            group_task_expected_asset_count: None,
+            image_sequence_frames_json,
+            image_sequence_duration_ms: Some(plan.duration_ms),
+        });
+    let items = frames
+        .prepared_asset_objects
+        .iter()
+        .map(|(slot, object)| PreparedEditorGenerationResultItem {
+            slot: slot.clone(),
+            asset_object: Some(object.clone()),
+            project_resource: (slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+                .then(|| final_resource.clone())
+                .flatten(),
+            asset: (slot == EDITOR_CHARACTER_ANIMATION_FINAL_SLOT)
+                .then(|| final_asset.clone())
+                .flatten(),
+            binding: None,
+        })
+        .collect();
+    Ok(PreparedEditorCharacterAnimationResult {
+        items,
+        final_resource_id,
+    })
+}
+
 #[allow(clippy::too_many_arguments)]
 fn prepare_editor_video_result(
     caller: &EditorGenerationCaller,
@@ -6206,7 +7747,11 @@ async fn load_media_source_payload_with_client(
         validate_media_payload_download_size(next_len, max_bytes)?;
         bytes.extend_from_slice(chunk.as_ref());
     }
-    if head.content_length != u64::try_from(bytes.len()).unwrap_or(u64::MAX) {
+    // 有界下载（视频参考）才做严格的 HEAD/GET 长度一致性校验：视频路径依赖该一致性
+    // 拒绝截断或异常流。旧图片路径（max_bytes=None）不要求 HEAD 与 chunked GET 完全一致，
+    // 避免 OSS 编码 / 缓存差异导致原本可用的图片被误判失败。
+    if max_bytes.is_some() && head.content_length != u64::try_from(bytes.len()).unwrap_or(u64::MAX)
+    {
         return Err(
             AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
                 "provider": "aliyun-oss",
@@ -6254,6 +7799,25 @@ fn media_payload_as_data_url(payload: &MediaPayload) -> String {
     )
 }
 
+fn encode_rgba_image_as_png_data_url(rgba: &RgbaImage) -> Option<String> {
+    let mut bytes = Vec::new();
+    if PngEncoder::new(&mut bytes)
+        .write_image(
+            rgba.as_raw(),
+            rgba.width(),
+            rgba.height(),
+            ColorType::Rgba8.into(),
+        )
+        .is_err()
+    {
+        return None;
+    }
+    Some(format!(
+        "data:image/png;base64,{}",
+        encode_base64(bytes.as_slice())
+    ))
+}
+
 fn parse_media_data_url(value: &str) -> Option<MediaPayload> {
     let body = value.trim().strip_prefix("data:")?;
     let (mime_type, data) = body.split_once(";base64,")?;
@@ -7479,6 +9043,7 @@ struct PersistedEditorCharacterAnimationFrameSet {
     frames: Vec<EditorCharacterAnimationFramePayload>,
     first_frame_object_key: String,
     prepared_asset_objects: Vec<(String, AssetObjectUpsertInput)>,
+    uploaded_object_keys: Vec<String>,
 }
 
 struct ProcessedEditorCharacterAnimationFrame {
@@ -7513,6 +9078,7 @@ struct EditorCharacterAnimationReferenceVideoMetadata {
     duration_seconds: f64,
     width: u32,
     height: u32,
+    source_fps: f64,
 }
 
 // 发布整套动作后，当前阶段只需要把旧前端依赖的 animationMap 返回出去。
@@ -7540,6 +9106,7 @@ mod tests {
             input_mode: None,
             reference_media_type: None,
             reference_src: None,
+            appearance_reference_srcs: Vec::new(),
             prompt_text: "待机呼吸".to_string(),
             background_color: None,
             screen_color: None,
@@ -7552,6 +9119,7 @@ mod tests {
             canvas_completion: None,
             generation_inputs: None,
             source_resource_id: None,
+            appearance_source_resource_ids: Vec::new(),
             asset_folder_id: None,
             asset_label: None,
         }
@@ -7812,6 +9380,7 @@ mod tests {
                 input_mode: None,
                 reference_media_type: None,
                 reference_src: None,
+                appearance_reference_srcs: Vec::new(),
                 prompt_text: "待机呼吸".to_string(),
                 background_color: None,
                 screen_color: None,
@@ -7824,6 +9393,7 @@ mod tests {
                 canvas_completion: None,
                 generation_inputs: None,
                 source_resource_id: None,
+                appearance_source_resource_ids: Vec::new(),
                 asset_folder_id: None,
                 asset_label: None,
             })
@@ -7844,6 +9414,7 @@ mod tests {
                 input_mode: Some("video".to_string()),
                 reference_media_type: Some("video".to_string()),
                 reference_src: Some("users/owner/reference/action.mp4".to_string()),
+                appearance_reference_srcs: Vec::new(),
                 prompt_text: "复刻参考视频的奔跑节奏".to_string(),
                 background_color: Some("blue".to_string()),
                 ratio: "16:9".to_string(),
@@ -7864,6 +9435,7 @@ mod tests {
             &settings,
             &normalized,
             Some("users/owner/reference/action.mp4"),
+            &[],
         )
         .expect("video request should build");
 
@@ -7883,6 +9455,36 @@ mod tests {
         );
         assert!(video_request.reference_image_srcs.is_empty());
         assert!(video_request.reference_audio_srcs.is_empty());
+
+        let video_request_with_appearance = build_editor_sequence_animation_video_request(
+            &settings,
+            &normalized,
+            Some("users/owner/reference/action.mp4"),
+            &["generated-character-drafts/editor/seedance-references/image/appearance.png"
+                .to_string()],
+        )
+        .expect("video request with appearance reference should build");
+        assert_eq!(
+            video_request_with_appearance.reference_video_srcs,
+            vec!["users/owner/reference/action.mp4".to_string()]
+        );
+        assert_eq!(
+            video_request_with_appearance.reference_image_srcs,
+            vec![
+                "generated-character-drafts/editor/seedance-references/image/appearance.png"
+                    .to_string()
+            ]
+        );
+        assert!(
+            video_request_with_appearance
+                .reference_image_srcs
+                .iter()
+                .all(|source| !source.starts_with("data:"))
+        );
+
+        let prompt = video_request_with_appearance.prompt;
+        assert!(prompt.contains("参考视频的动作"));
+        assert!(prompt.contains("参考图片的角色外观"));
     }
 
     #[test]
@@ -8064,7 +9666,7 @@ mod tests {
             &[
                 "execute_billable_asset_operation_with_cost",
                 "request_editor_character_animation_preview",
-                "reporter.report_processing(&state).await?",
+                "reporter.report_processing(&state).await",
                 "extract_and_prepare_editor_character_animation_frames",
                 "Ok::<_, AppError>((",
                 "prepare_editor_character_animation_result",
@@ -8214,6 +9816,46 @@ mod tests {
         }
     }
 
+    #[test]
+    fn editor_character_animation_direct_video_conversion_bypasses_seedance_and_background_removal()
+    {
+        let source = include_str!("character_animation_assets.rs");
+        assert_function_contains_in_order(
+            source,
+            "pub(crate) async fn convert_editor_character_animation_video_for_owner",
+            "pub async fn generate_editor_video",
+            &[
+                "validate_editor_character_animation_reference_video_object",
+                "build_editor_character_animation_video_conversion_plan",
+                "extract_and_prepare_direct_video_conversion_frames",
+                "prepare_editor_character_animation_sequence_result",
+                "persist_editor_generation_result_atomically",
+            ],
+        );
+        let body = source
+            .split_once("pub(crate) async fn convert_editor_character_animation_video_for_owner")
+            .and_then(|(_, tail)| {
+                tail.split_once("pub async fn generate_editor_video")
+                    .map(|(body, _)| body)
+            })
+            .expect("direct conversion function should exist");
+        for forbidden in [
+            "create_ark_content_generation_task",
+            "request_seedance",
+            "remove_editor_generated_screen_background_with_bgfilter",
+            "execute_billable_asset_operation_with_cost",
+        ] {
+            assert!(
+                !body.contains(forbidden),
+                "direct conversion must not call {forbidden}"
+            );
+        }
+        assert!(body.contains("price_mud_points: 0"));
+        assert!(body.contains("let storage_task_id = format!"));
+        assert!(body.contains("storage_task_id.as_str(),"));
+        assert!(body.contains("cleanup_uncommitted_character_animation_objects"));
+    }
+
     #[test]
     fn editor_character_animation_frames_use_three_stage_matting_fallback() {
         let source = include_str!("character_animation_assets.rs");
@@ -8292,8 +9934,8 @@ mod tests {
             "pub(crate) async fn generate_editor_character_animation_for_owner",
             "pub async fn generate_editor_video",
             &[
-                "let persisted_frames = extract_and_prepare_editor_character_animation_frames",
-                "let frame_payload_json = serde_json::to_value(&frames)",
+                "extract_and_prepare_editor_character_animation_frames",
+                "serde_json::to_value(&frames)",
                 "prepare_editor_character_animation_result",
                 "persist_editor_generation_result_atomically",
                 "EDITOR_CHARACTER_ANIMATION_FINAL_SLOT",
@@ -8593,7 +10235,7 @@ mod tests {
     fn editor_character_animation_parses_authoritative_video_probe_metadata() {
         let metadata = parse_editor_character_animation_reference_video_probe(
             br#"{
-                "streams": [{"width": 1080, "height": 1920}],
+                "streams": [{"width": 1080, "height": 1920, "avg_frame_rate": "30000/1000"}],
                 "format": {"duration": "6.250000"}
             }"#,
         )
@@ -8605,6 +10247,7 @@ mod tests {
                 duration_seconds: 6.25,
                 width: 1080,
                 height: 1920,
+                source_fps: 30.0,
             }
         );
 
diff --git a/server-rs/crates/api-server/src/editor_agent/tool.rs b/server-rs/crates/api-server/src/editor_agent/tool.rs
index f94f1678b..cef77e705 100644
--- a/server-rs/crates/api-server/src/editor_agent/tool.rs
+++ b/server-rs/crates/api-server/src/editor_agent/tool.rs
@@ -371,7 +371,6 @@ impl EditorAgentTool for GenerateImageTool {
             seg_model: None,
             aspect_ratio: Some(args.aspect_ratio),
             image_size: Some(args.image_size),
-            character_sheet_views: None,
             reference_image_srcs: Some(reference_image_srcs),
             project_id: Some(context.conversation.project_id.clone()),
             asset_kind: Some("editor_agent_generated_image".to_string()),
@@ -480,7 +479,6 @@ impl EditorAgentTool for GenerateCharacterTool {
             seg_model: Some("birefnet".to_string()),
             aspect_ratio: Some(args.aspect_ratio),
             image_size: Some(args.image_size),
-            character_sheet_views: None,
             reference_image_srcs: Some(reference_image_srcs),
             project_id: Some(context.conversation.project_id.clone()),
             asset_kind: Some("character".to_string()),
@@ -591,7 +589,6 @@ impl EditorAgentTool for GenerateUiDesignTool {
             seg_model: None,
             aspect_ratio: Some(args.aspect_ratio),
             image_size: Some(args.image_size),
-            character_sheet_views: None,
             reference_image_srcs: Some(reference_image_srcs),
             project_id: Some(context.conversation.project_id.clone()),
             asset_kind: Some("ui-design".to_string()),
diff --git a/server-rs/crates/api-server/src/editor_generation_queue.rs b/server-rs/crates/api-server/src/editor_generation_queue.rs
index 3d0388147..06d2740c0 100644
--- a/server-rs/crates/api-server/src/editor_generation_queue.rs
+++ b/server-rs/crates/api-server/src/editor_generation_queue.rs
@@ -20,6 +20,10 @@ pub(crate) const EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND: &str =
     "editor_ui_design_asset_extraction";
 pub(crate) const EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND: &str =
     "editor_character_animation_generation";
+pub(crate) const EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND: &str =
+    "editor_character_animation_video_conversion";
+pub(crate) const EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND: &str =
+    "editor_character_animation_background_removal";
 pub(crate) const EDITOR_VIDEO_GENERATION_JOB_KIND: &str = "editor_video_generation";
 pub(crate) const EDITOR_SOUND_EFFECT_GENERATION_JOB_KIND: &str = "editor_sound_effect_generation";
 pub(crate) const EDITOR_BACKGROUND_MUSIC_GENERATION_JOB_KIND: &str =
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 5828ec721..1a2fd889a 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -350,9 +350,6 @@ pub struct EditorImageGenerationRequest {
     pub(crate) seg_model: Option<String>,
     pub(crate) aspect_ratio: Option<String>,
     pub(crate) image_size: Option<String>,
-    /// 角色多方向图集的视角数：4 或 8；仅 kind=character-sheet 时生效，缺省 4。
-    #[serde(default, skip_serializing_if = "Option::is_none")]
-    pub(crate) character_sheet_views: Option<u32>,
     pub(crate) reference_image_srcs: Option<Vec<String>>,
     pub(crate) project_id: Option<String>,
     pub(crate) asset_kind: Option<String>,
@@ -491,6 +488,46 @@ pub struct EditorUiDesignAssetExtractionRequest {
     pub(crate) canvas_completion: Option<EditorCanvasGenerationCompletionRequest>,
 }
 
+const EDITOR_GENERATION_OPERATION_ID_MAX_BYTES: usize = 128;
+
+/// 将请求级 request id 收敛为可持久化的编辑器 operation id。
+///
+/// request id 会进入 SpacetimeDB 幂等键、资产对象标识和画布层标识，不能把任意
+/// header 内容直接带入这些边界。这里只允许客户端和队列实际使用的稳定 ID 字符集，
+/// 超限或包含路径/控制字符时拒绝请求，而不是静默改写导致幂等键碰撞。
+pub(crate) fn validate_editor_generation_operation_id(
+    operation_id: &str,
+) -> Result<String, AppError> {
+    let operation_id = operation_id.trim();
+    if operation_id.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-generation-operation",
+                "message": "编辑器生成 request id 不能为空。",
+            })),
+        );
+    }
+    if operation_id.len() > EDITOR_GENERATION_OPERATION_ID_MAX_BYTES {
+        return Err(AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+            "provider": "editor-generation-operation",
+            "message": format!(
+                "编辑器生成 request id 不能超过 {EDITOR_GENERATION_OPERATION_ID_MAX_BYTES} 个字节。"
+            ),
+        })));
+    }
+    if !operation_id.chars().all(|character| {
+        character.is_ascii_alphanumeric() || matches!(character, '-' | '_' | '.' | ':')
+    }) {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-generation-operation",
+                "message": "编辑器生成 request id 含有不支持的字符。",
+            })),
+        );
+    }
+    Ok(operation_id.to_string())
+}
+
 #[derive(Clone, Debug)]
 pub(crate) struct EditorGenerationOperationContext {
     pub(crate) operation_kind: String,
@@ -588,9 +625,10 @@ impl EditorGenerationCaller {
                 "message": format!("序列化编辑器生成幂等请求失败：{error}"),
             }))
         })?;
+        let operation_id = validate_editor_generation_operation_id(request_context.request_id())?;
         self.operation = Some(EditorGenerationOperationContext {
             operation_kind: operation_kind.to_string(),
-            operation_id: request_context.request_id().trim().to_string(),
+            operation_id,
             operation_fingerprint: editor_generation_request_fingerprint(
                 operation_kind,
                 request_payload_json.as_str(),
@@ -2521,7 +2559,6 @@ pub async fn generate_editor_scene(
         seg_model: None,
         aspect_ratio: Some(generation_options.aspect_ratio.to_string()),
         image_size: Some(generation_options.image_size.to_string()),
-        character_sheet_views: None,
         reference_image_srcs: (!payload.reference_image_srcs.is_empty())
             .then_some(payload.reference_image_srcs),
         project_id: payload.project_id,
@@ -2821,16 +2858,6 @@ where
     let normalized_kind = payload.kind.as_deref().map(str::trim);
     let is_character_generation = matches!(normalized_kind, Some("character"));
     let is_character_sheet_generation = matches!(normalized_kind, Some("character-sheet"));
-    if is_character_sheet_generation
-        && !matches!(payload.character_sheet_views.unwrap_or(4), 4 | 8)
-    {
-        return Err(
-            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
-                "provider": "editor-image-generation",
-                "message": "characterSheetViews 只支持 4 或 8。",
-            })),
-        );
-    }
     let pixel_art_supported = matches!(normalized_kind, None | Some("") | Some("character"));
     let (image_style, mut generation_warning) =
         normalize_editor_image_generation_style(payload.style.as_deref(), pixel_art_supported);
@@ -3039,7 +3066,7 @@ where
                     screen_color.expect("character generation should have screen color"),
                 )
             } else if is_character_sheet_generation {
-                // 多方向图集以纯绿底间隔各方向，供连通块拆分；不参与编辑器的背景自动选色。
+                // 多方向图集以纯绿底间隔各方向，便于后续拆分；不参与编辑器的背景自动选色。
                 build_editor_character_multi_view_sheet_prompt(
                     role_setting.as_str(),
                     crate::editor_green_screen::EditorScreenBackgroundColor {
@@ -3049,7 +3076,6 @@ where
                         green: 255,
                         blue: 0,
                     },
-                    payload.character_sheet_views.unwrap_or(4),
                 )
             } else if is_ui_design_generation {
                 build_editor_ui_design_prompt(role_setting.as_str(), ui_has_references)
@@ -5919,10 +5945,10 @@ pub(crate) async fn remove_editor_image_background_for_owner(
     ))
 }
 
-struct EditorBackgroundRemovalImage {
-    image: DownloadedOpenAiImage,
-    width: u32,
-    height: u32,
+pub(crate) struct EditorBackgroundRemovalImage {
+    pub(crate) image: DownloadedOpenAiImage,
+    pub(crate) width: u32,
+    pub(crate) height: u32,
 }
 
 fn validate_editor_pixel_art_snap_canvas_completion(
@@ -7022,7 +7048,7 @@ fn editor_bgfilter_flat_deadline_reserve(aliyun_timeout_ms: u64) -> Duration {
         .saturating_add(EDITOR_BGFILTER_PARENT_TRANSPORT_WINDOW)
 }
 
-async fn request_editor_background_removal_image_with_bgfilter_worker(
+pub(crate) async fn request_editor_background_removal_image_with_bgfilter_worker(
     state: &AppState,
     source_object_key: &str,
     audit: &crate::external_api_audit::ExternalApiAuditContext,
@@ -7833,7 +7859,6 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
                     ),
                     path_kind: "ui-design-assets",
                     asset_kind: EDITOR_UI_DESIGN_ASSET_IMAGE_KIND,
-                    record_asset_kind: "icon",
                     persistence_provider: "vector-engine",
                 },
             )
@@ -10894,17 +10919,16 @@ fn build_editor_character_image_prompt(
 fn build_editor_character_multi_view_sheet_prompt(
     role_setting: &str,
     screen_color: EditorScreenBackgroundColor,
-    view_count: u32,
 ) -> String {
-    let (view_count_text, view_layout) = match view_count {
-        8 => ("八", "正面、右前、右侧、右后、背面、左后、左侧、左前"),
-        _ => ("四", "正面、背面、左侧、右侧"),
-    };
+    // 八方向围绕一圈：正面、右前、右侧、右后、背面、左后、左侧、左前，按 3×3 九宫格外圈
+    // 排布、中心留空，方向之间由纯色背景充分间隔，使后续外接矩形拆分不易粘连。
+    const VIEW_LAYOUT: &str = "正面、右前、右侧、右后、背面、左后、左侧、左前";
     vec![
         format!(
-            "根据角色设定生成游戏角色的多方向视图图集。画面中只有同一个角色，按{view_count_text}个方向排布：{view_layout}，每个方向一个完整角色，方向之间相互分离、互不重叠、互不接触。\
-{view_count_text}个方向必须是同一个角色，脸型、发型、服装、配色、武器、头身比、体型全程一致，禁止漂移、换装、变形。\
-每个方向角色完整居中，不裁切头顶、手脚或武器；各方向底部基线对齐，画面占比一致。{}；角色之间由纯色背景间隔，便于后续拆分。\
+            "根据角色设定生成游戏角色的八方向视图图集。画面中只有同一个角色，共八个方向：{VIEW_LAYOUT}，每个方向一个完整角色。\
+八个方向必须是同一个角色，脸型、发型、服装、配色、武器、头身比、体型全程一致，禁止漂移、换装、变形。\
+八个方向按三乘三九宫格围绕一圈排布：上、下、左、右以及四个角落各放一个方向，九宫格中心留空，不放置角色。\
+每个方向角色完整居中，不裁切头顶、手脚或武器；各方向底部基线对齐，画面占比一致。{}；角色之间由纯色背景充分间隔，互不接触、互不重叠，便于后续拆分。\
 禁止额外角色、分身、宠物、文字、水印、边框、编号、网格线。",
             editor_green_screen_character_prompt_clause(screen_color)
         ),
@@ -12351,6 +12375,25 @@ mod tests {
         thread,
     };
 
+    #[test]
+    fn editor_generation_operation_id_accepts_stable_request_id_characters() {
+        assert_eq!(
+            validate_editor_generation_operation_id(" web-abc_123.v1:retry ").unwrap(),
+            "web-abc_123.v1:retry"
+        );
+    }
+
+    #[test]
+    fn editor_generation_operation_id_rejects_unsafe_or_oversized_request_ids() {
+        for request_id in ["", "   ", "request/id", "request id", "request\n id"] {
+            assert!(
+                validate_editor_generation_operation_id(request_id).is_err(),
+                "request id should be rejected: {request_id:?}"
+            );
+        }
+        assert!(validate_editor_generation_operation_id(&"x".repeat(129)).is_err());
+    }
+
     #[test]
     fn ordinary_image_prompt_validation_stays_outside_prompt_builder_execution() {
         assert!(validate_editor_image_generation_prompt("生成森林场景").is_ok());
@@ -16618,38 +16661,20 @@ mod tests {
                 green: 255,
                 blue: 0,
             },
-            4,
         );
 
-        assert!(prompt.contains("多方向视图图集"));
-        assert!(prompt.contains("四个方向排布：正面、背面、左侧、右侧"));
-        assert!(prompt.contains("方向之间相互分离、互不重叠、互不接触"));
+        assert!(prompt.contains("八方向视图图集"));
+        assert!(prompt.contains("共八个方向：正面、右前、右侧、右后、背面、左后、左侧、左前"));
+        assert!(prompt.contains("八个方向必须是同一个角色"));
+        assert!(prompt.contains("按三乘三九宫格围绕一圈排布"));
+        assert!(prompt.contains("九宫格中心留空"));
         assert!(prompt.contains("脸型、发型、服装、配色、武器、头身比、体型全程一致"));
         assert!(prompt.contains("背景固定为单一纯色背景 纯绿色 #00FF00"));
-        assert!(prompt.contains("角色之间由纯色背景间隔，便于后续拆分"));
+        assert!(prompt.contains("角色之间由纯色背景充分间隔，互不接触、互不重叠"));
         assert!(prompt.contains("禁止额外角色、分身、宠物、文字、水印、边框、编号、网格线"));
         assert!(prompt.contains("角色设定：日系魔法少女"));
     }
 
-    #[test]
-    fn editor_character_multi_view_sheet_prompt_supports_eight_directions() {
-        let prompt = build_editor_character_multi_view_sheet_prompt(
-            "日系魔法少女",
-            crate::editor_green_screen::EditorScreenBackgroundColor {
-                label: "纯绿色",
-                hex: "#00FF00",
-                red: 0,
-                green: 255,
-                blue: 0,
-            },
-            8,
-        );
-
-        assert!(prompt.contains("八个方向排布：正面、右前、右侧、右后、背面、左后、左侧、左前"));
-        assert!(prompt.contains("八个方向必须是同一个角色"));
-        assert!(prompt.contains("每个方向角色完整居中"));
-    }
-
     #[test]
     fn editor_character_sheet_kind_routes_to_sheet_prompt_and_icon_spritesheet_asset_kind() {
         assert_eq!(
diff --git a/server-rs/crates/api-server/src/editor_project_icon.rs b/server-rs/crates/api-server/src/editor_project_icon.rs
index 5126d4b39..78aa5dd26 100644
--- a/server-rs/crates/api-server/src/editor_project_icon.rs
+++ b/server-rs/crates/api-server/src/editor_project_icon.rs
@@ -638,7 +638,6 @@ fn build_icon_spec_image_request(
         seg_model: None,
         aspect_ratio: Some(ICON_SPEC_ASPECT_RATIO.to_string()),
         image_size: Some(ICON_SPEC_IMAGE_SIZE.to_string()),
-        character_sheet_views: None,
         reference_image_srcs: payload.reference_id.map(|reference_id| vec![reference_id]),
         project_id: payload.project_id,
         asset_kind: Some("icon-spec".to_string()),
@@ -841,9 +840,6 @@ pub(crate) struct PersistEditorSpritesheetSlicesInput {
     pub(crate) generation_inputs: Option<Value>,
     pub(crate) path_kind: &'static str,
     pub(crate) asset_kind: &'static str,
-    /// 切片资源/素材记录的 asset_kind（前端据此判断素材语义）。图标图集默认 "icon"；
-    /// 角色多方向图集拆分传 "character"，使单视角切片可直接作为角色动画参考。
-    pub(crate) record_asset_kind: &'static str,
     pub(crate) persistence_provider: &'static str,
 }
 
@@ -964,7 +960,7 @@ pub(crate) async fn persist_editor_spritesheet_slices(
                     provider: Some(input.provider.clone()),
                     task_id: Some(input.task_id.clone()),
                     source_resource_id: normalize_optional_string(input.source_resource_id.clone()),
-                    asset_kind: Some(input.record_asset_kind.to_string()),
+                    asset_kind: Some("icon".to_string()),
                     generation_inputs_json: generation_inputs_json.clone(),
                     updated_at_micros: now_micros,
                     image_sequence_frames_json: None,
@@ -994,7 +990,7 @@ pub(crate) async fn persist_editor_spritesheet_slices(
                     model: Some(input.model.clone()),
                     provider: Some(input.provider.clone()),
                     task_id: Some(input.task_id.clone()),
-                    asset_kind: Some(input.record_asset_kind.to_string()),
+                    asset_kind: Some("icon".to_string()),
                     generation_inputs_json: generation_inputs_json.clone(),
                     source_resource_id: resource_id.clone(),
                     generation_cost_mud_points: 0,
@@ -1967,7 +1963,6 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
                     ),
                     path_kind: "icon-spritesheet-assets",
                     asset_kind: EDITOR_ICON_SPRITESHEET_SLICE_ASSET_KIND,
-                    record_asset_kind: "icon",
                     persistence_provider: "vector-engine",
                 },
             )
@@ -2175,17 +2170,6 @@ pub(crate) fn resolve_editor_icon_spritesheet_source_layer_asset_kind<'a>(
     }
 }
 
-/// 图集切片记录 asset_kind：角色多方向图集（action=character-sheet.generate）拆出的
-/// 单视角切片按 character 落库（可直接作动画参考），其余图集按 icon。
-fn editor_spritesheet_slice_record_asset_kind(source_generation_inputs: Option<&Value>) -> &'static str {
-    source_generation_inputs
-        .and_then(|inputs| inputs.get("action"))
-        .and_then(Value::as_str)
-        .is_some_and(|action| action == "character-sheet.generate")
-        .then_some("character")
-        .unwrap_or("icon")
-}
-
 pub async fn split_editor_icon_spritesheet(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -2325,10 +2309,6 @@ pub async fn split_editor_icon_spritesheet(
         .clone()
         .unwrap_or_else(|| "Genarrative".to_string());
     let generation_inputs = source_resource.generation_inputs.clone();
-    // 中文注释：角色多方向图集（action=character-sheet.generate）拆分出的单视角切片按
-    // character 落库，使其可直接作为角色动画参考；普通图标图集仍按 icon。
-    let slice_record_asset_kind =
-        editor_spritesheet_slice_record_asset_kind(source_resource.generation_inputs.as_ref());
     let icon_image_srcs = persist_editor_spritesheet_slices(
         &state,
         slices,
@@ -2348,7 +2328,6 @@ pub async fn split_editor_icon_spritesheet(
             generation_inputs,
             path_kind: "icon-spritesheet-slices",
             asset_kind: EDITOR_ICON_SPRITESHEET_SLICE_ASSET_KIND,
-            record_asset_kind: slice_record_asset_kind,
             persistence_provider: "genarrative",
         },
     )
@@ -2698,32 +2677,6 @@ pub(crate) fn validate_editor_icon_spritesheet_dimensions(
 mod tests {
     use super::*;
 
-    #[test]
-    fn sprite_slice_record_asset_kind_marks_character_sheet_slices_as_character() {
-        assert_eq!(
-            editor_spritesheet_slice_record_asset_kind(None),
-            "icon"
-        );
-        assert_eq!(
-            editor_spritesheet_slice_record_asset_kind(Some(&json!({
-                "action": "icon.generate"
-            }))),
-            "icon"
-        );
-        assert_eq!(
-            editor_spritesheet_slice_record_asset_kind(Some(&json!({
-                "action": "character-sheet.generate"
-            }))),
-            "character"
-        );
-        assert_eq!(
-            editor_spritesheet_slice_record_asset_kind(Some(&json!({
-                "version": 2
-            }))),
-            "icon"
-        );
-    }
-
     #[test]
     fn game_genre_serde_uses_chinese_slugs() {
         for genre in GameGenre::ALL {
diff --git a/server-rs/crates/api-server/src/editor_sequence_animation.rs b/server-rs/crates/api-server/src/editor_sequence_animation.rs
index ab72ddd32..dff23869a 100644
--- a/server-rs/crates/api-server/src/editor_sequence_animation.rs
+++ b/server-rs/crates/api-server/src/editor_sequence_animation.rs
@@ -2,6 +2,7 @@ use axum::http::StatusCode;
 use serde_json::{Value, json};
 use shared_contracts::assets::{
     EDITOR_ASSET_LABEL_MAX_CHARS, EditorCharacterAnimationGenerateRequest,
+    EditorCharacterAnimationVideoConversionRequest,
 };
 
 use crate::{
@@ -16,6 +17,131 @@ pub(crate) const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0-fast";
 pub(crate) const EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_BYTES: u64 = 50 * 1024 * 1024;
 const EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MIN_DURATION_SECONDS: f64 = 2.0;
 const EDITOR_CHARACTER_ANIMATION_REFERENCE_VIDEO_MAX_DURATION_SECONDS: f64 = 15.0;
+pub(crate) const EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_MAX_FRAMES: u32 = 120;
+
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct EditorCharacterAnimationVideoConversionPlan {
+    pub(crate) duration_seconds: f64,
+    pub(crate) duration_ms: u64,
+    pub(crate) source_fps: f64,
+    pub(crate) sampling_fps: f64,
+    pub(crate) frame_count: u32,
+    pub(crate) frame_width: u32,
+    pub(crate) frame_height: u32,
+}
+
+pub(crate) fn normalize_editor_character_animation_video_conversion_resolution(
+    value: &str,
+) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "480p" => Ok("480p"),
+        "720p" => Ok("720p"),
+        _ => Err(editor_character_animation_bad_request(
+            "resolution 只支持 480p 或 720p。",
+        )),
+    }
+}
+
+pub(crate) fn build_editor_character_animation_video_conversion_plan(
+    duration_seconds: f64,
+    source_fps: f64,
+    source_width: u32,
+    source_height: u32,
+    resolution: &str,
+) -> Result<EditorCharacterAnimationVideoConversionPlan, AppError> {
+    validate_editor_character_animation_reference_video_duration(duration_seconds)?;
+    if !source_fps.is_finite() || source_fps <= 0.0 {
+        return Err(editor_character_animation_bad_request(
+            "源视频缺少有效平均帧率。",
+        ));
+    }
+    if source_width == 0 || source_height == 0 {
+        return Err(editor_character_animation_bad_request(
+            "源视频缺少有效显示尺寸。",
+        ));
+    }
+    let max_long_edge =
+        match normalize_editor_character_animation_video_conversion_resolution(resolution)? {
+            "480p" => 480_u32,
+            "720p" => 720_u32,
+            _ => unreachable!(),
+        };
+    let source_long_edge = source_width.max(source_height);
+    let scale = (f64::from(max_long_edge) / f64::from(source_long_edge)).min(1.0);
+    let frame_width = (f64::from(source_width) * scale).round().max(1.0) as u32;
+    let frame_height = (f64::from(source_height) * scale).round().max(1.0) as u32;
+    let sampling_fps = source_fps.min(8.0).max(1.0);
+    let frame_count = (duration_seconds * sampling_fps).round().clamp(
+        2.0,
+        f64::from(EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_MAX_FRAMES),
+    ) as u32;
+    Ok(EditorCharacterAnimationVideoConversionPlan {
+        duration_seconds,
+        duration_ms: (duration_seconds * 1_000.0).round().max(1.0) as u64,
+        source_fps,
+        sampling_fps,
+        frame_count,
+        frame_width,
+        frame_height,
+    })
+}
+
+pub(crate) fn parse_editor_character_animation_ffprobe_frame_rate(value: &str) -> Option<f64> {
+    let value = value.trim();
+    if let Some((numerator, denominator)) = value.split_once('/') {
+        let numerator = numerator.trim().parse::<f64>().ok()?;
+        let denominator = denominator.trim().parse::<f64>().ok()?;
+        return (numerator.is_finite()
+            && denominator.is_finite()
+            && numerator > 0.0
+            && denominator > 0.0)
+            .then_some(numerator / denominator);
+    }
+    value
+        .parse::<f64>()
+        .ok()
+        .filter(|value| value.is_finite() && *value > 0.0)
+}
+
+pub(crate) fn build_authoritative_editor_character_animation_video_conversion_inputs(
+    client_generation_inputs: Option<Value>,
+    payload: &EditorCharacterAnimationVideoConversionRequest,
+    source_object_key: &str,
+    plan: EditorCharacterAnimationVideoConversionPlan,
+) -> Result<Value, AppError> {
+    let resolution =
+        normalize_editor_character_animation_video_conversion_resolution(&payload.resolution)?;
+    let source_object_key = source_object_key.trim().trim_start_matches('/').to_string();
+    if source_object_key.is_empty() {
+        return Err(editor_character_animation_bad_request(
+            "源视频缺少稳定 objectKey。",
+        ));
+    }
+    let mut result = client_generation_inputs
+        .and_then(|value| value.as_object().cloned())
+        .unwrap_or_default();
+    result.insert("version".to_string(), json!(2));
+    result.insert("action".to_string(), json!("character-animation.convert"));
+    result.insert(
+        "fields".to_string(),
+        json!([
+            { "id": "sourceVideoSrc", "title": "源视频", "value": source_object_key },
+            { "id": "resolution", "title": "最大长边", "value": resolution },
+            { "id": "actualWidth", "title": "实际宽度", "value": plan.frame_width },
+            { "id": "actualHeight", "title": "实际高度", "value": plan.frame_height },
+            { "id": "sourceDurationMs", "title": "源时长", "value": plan.duration_ms },
+            { "id": "sourceFps", "title": "源帧率", "value": plan.source_fps },
+            { "id": "frameCount", "title": "实际帧数", "value": plan.frame_count },
+            { "id": "samplingFps", "title": "采样率", "value": plan.sampling_fps },
+            { "id": "processingMethod", "title": "处理方式", "value": "视频直接转换" }
+        ]),
+    );
+    result.insert(
+        "references".to_string(),
+        json!([{ "id": "source", "title": "源视频" }]),
+    );
+    Ok(Value::Object(result))
+}
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 pub(crate) enum EditorCharacterAnimationInputMode {
@@ -80,6 +206,10 @@ pub(crate) fn normalize_editor_character_animation_request_with_pricing(
     );
     let reference_src = trim_optional_text(payload.reference_src.as_deref())
         .or_else(|| trim_optional_text(Some(payload.source_image_src.as_str())));
+    let has_appearance_references = payload
+        .appearance_reference_srcs
+        .iter()
+        .any(|src| !src.trim().is_empty());
     if input_mode == EditorCharacterAnimationInputMode::Text && reference_src.is_some() {
         return Err(editor_character_animation_bad_request(
             "文本模式不能携带参考素材。",
@@ -90,14 +220,21 @@ pub(crate) fn normalize_editor_character_animation_request_with_pricing(
             "图片或视频模式必须提供参考素材。",
         ));
     }
+    if has_appearance_references && input_mode != EditorCharacterAnimationInputMode::Video {
+        return Err(editor_character_animation_bad_request(
+            "appearanceReferenceSrcs 仅支持视频模式。",
+        ));
+    }
     let prompt_text = payload
         .prompt_text
         .trim()
         .chars()
         .take(4000)
         .collect::<String>();
-    if prompt_text.is_empty() {
-        return Err(editor_character_animation_bad_request("动画描述不能为空。"));
+    if prompt_text.is_empty() && reference_src.is_none() {
+        return Err(editor_character_animation_bad_request(
+            "动画描述和参考素材不能同时为空。",
+        ));
     }
     let resolution = normalize_editor_character_animation_resolution(payload.resolution.as_str())?;
     let ratio = normalize_editor_character_animation_ratio(payload.ratio.as_str())?;
@@ -250,14 +387,18 @@ pub(crate) fn validate_editor_character_animation_reference_content_type(
         .to_ascii_lowercase();
     let matches = match expected_kind {
         EditorCharacterAnimationReferenceMediaKind::Image => normalized.starts_with("image/"),
-        EditorCharacterAnimationReferenceMediaKind::Video => normalized.starts_with("video/"),
+        EditorCharacterAnimationReferenceMediaKind::Video => {
+            normalized == "video/mp4" || normalized == "video/quicktime"
+        }
     };
     if matches {
         return Ok(());
     }
     let message = match expected_kind {
         EditorCharacterAnimationReferenceMediaKind::Image => "图片模式只能使用真实图片素材。",
-        EditorCharacterAnimationReferenceMediaKind::Video => "视频模式只能使用真实视频素材。",
+        EditorCharacterAnimationReferenceMediaKind::Video => {
+            "视频模式只能使用真实 MP4 或 MOV 视频素材。"
+        }
     };
     Err(
         AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
@@ -324,13 +465,15 @@ pub(crate) fn build_authoritative_editor_character_animation_generation_inputs(
     payload: &EditorCharacterAnimationGenerateRequest,
     input_mode: EditorCharacterAnimationInputMode,
     reference_object_key: Option<&str>,
+    appearance_object_keys: &[String],
 ) -> Result<Value, AppError> {
-    const AUTHORITATIVE_FIELD_IDS: [&str; 11] = [
+    const AUTHORITATIVE_FIELD_IDS: [&str; 12] = [
         "inputMode",
         "referenceSrc",
         "referenceMediaType",
         "referenceWidth",
         "referenceHeight",
+        "appearanceReferenceSrc",
         "prompt",
         "backgroundColor",
         "resolution",
@@ -345,8 +488,10 @@ pub(crate) fn build_authoritative_editor_character_animation_generation_inputs(
         .chars()
         .take(4000)
         .collect::<String>();
-    if prompt.is_empty() {
-        return Err(editor_character_animation_bad_request("动画描述不能为空。"));
+    if prompt.is_empty() && reference_object_key.is_none() && appearance_object_keys.is_empty() {
+        return Err(editor_character_animation_bad_request(
+            "动画描述和参考素材不能同时为空。",
+        ));
     }
     let resolution = normalize_editor_character_animation_resolution(payload.resolution.as_str())?;
     // generationInputs 保存用户请求语义；same 不能被 provider 使用的具体比例覆盖。
@@ -390,7 +535,30 @@ pub(crate) fn build_authoritative_editor_character_animation_generation_inputs(
             json!({ "id": "referenceWidth", "title": "参考宽度", "value": payload.source_width }),
             json!({ "id": "referenceHeight", "title": "参考高度", "value": payload.source_height }),
         ]);
-        reference_slots.push(json!({ "id": "source", "title": reference_title }));
+        reference_slots.push(json!({
+            "id": if input_mode == EditorCharacterAnimationInputMode::Video { "motion" } else { "source" },
+            "title": reference_title
+        }));
+    }
+    if !appearance_object_keys.is_empty() {
+        if input_mode != EditorCharacterAnimationInputMode::Video {
+            return Err(editor_character_animation_bad_request(
+                "角色外观图仅支持视频模式。",
+            ));
+        }
+        for appearance_object_key in appearance_object_keys {
+            let appearance_object_key =
+                appearance_object_key.trim().trim_start_matches('/');
+            if appearance_object_key.is_empty() {
+                continue;
+            }
+            fields.push(json!({
+                "id": "appearanceReferenceSrc",
+                "title": "角色外观",
+                "value": appearance_object_key,
+            }));
+            reference_slots.push(json!({ "id": "appearance", "title": "角色外观" }));
+        }
     }
     fields.push(json!({ "id": "prompt", "title": "动作描述", "value": prompt }));
 
@@ -705,6 +873,7 @@ mod tests {
             input_mode: None,
             reference_media_type: None,
             reference_src: None,
+            appearance_reference_srcs: Vec::new(),
             prompt_text: "待机呼吸".to_string(),
             background_color: None,
             screen_color: None,
@@ -717,11 +886,52 @@ mod tests {
             canvas_completion: None,
             generation_inputs: None,
             source_resource_id: None,
+            appearance_source_resource_ids: Vec::new(),
             asset_folder_id: None,
             asset_label: None,
         }
     }
 
+    #[test]
+    fn video_conversion_plan_honors_fractional_fps_rotation_size_and_no_upscale() {
+        assert!(
+            (parse_editor_character_animation_ffprobe_frame_rate("24000/1001").unwrap() - 23.976)
+                .abs()
+                < 0.001
+        );
+        let plan = build_editor_character_animation_video_conversion_plan(
+            2.5,
+            24_000.0 / 1_001.0,
+            360,
+            640,
+            "720p",
+        )
+        .unwrap();
+        assert_eq!((plan.frame_width, plan.frame_height), (360, 640));
+        assert_eq!(plan.frame_count, 20);
+        assert_eq!(plan.duration_ms, 2_500);
+        assert_eq!(plan.sampling_fps, 8.0);
+    }
+
+    #[test]
+    fn video_conversion_plan_downscales_and_caps_at_120_frames() {
+        let plan =
+            build_editor_character_animation_video_conversion_plan(15.0, 60.0, 1920, 1080, "480p")
+                .unwrap();
+        assert_eq!((plan.frame_width, plan.frame_height), (480, 270));
+        assert_eq!(plan.frame_count, 120);
+        assert_eq!(plan.sampling_fps, 8.0);
+    }
+
+    #[test]
+    fn video_conversion_plan_uses_one_fps_floor_and_two_frame_minimum() {
+        let plan =
+            build_editor_character_animation_video_conversion_plan(2.0, 0.5, 320, 180, "480p")
+                .unwrap();
+        assert_eq!(plan.sampling_fps, 1.0);
+        assert_eq!(plan.frame_count, 2);
+    }
+
     fn generation_field<'a>(inputs: &'a Value, id: &str) -> Option<&'a Value> {
         inputs
             .get("fields")
@@ -893,7 +1103,7 @@ mod tests {
         assert!(
             video_error
                 .body_text()
-                .contains("视频模式只能使用真实视频素材")
+                .contains("视频模式只能使用真实 MP4 或 MOV 视频素材")
         );
 
         let image_error = validate_editor_character_animation_reference_content_type(
@@ -1017,6 +1227,7 @@ mod tests {
             &request,
             EditorCharacterAnimationInputMode::Text,
             None,
+            &[],
         )
         .expect("text request should always produce a recoverable recipe");
 
@@ -1072,6 +1283,7 @@ mod tests {
             &request,
             EditorCharacterAnimationInputMode::Image,
             Some("/users/owner/hero.png"),
+            &[],
         )
         .expect("authoritative image recipe should build");
 
@@ -1131,6 +1343,7 @@ mod tests {
             &request,
             EditorCharacterAnimationInputMode::Image,
             Some("users/owner/hero.png"),
+            &[],
         )
         .expect("legacy image recipe should preserve automatic background semantics");
 
@@ -1151,6 +1364,7 @@ mod tests {
             &video_request,
             EditorCharacterAnimationInputMode::Video,
             Some("users/owner/action.mp4"),
+            &[],
         )
         .expect("video recipe should persist the default green background");
         assert_eq!(
diff --git a/server-rs/crates/api-server/src/external_editor_api.rs b/server-rs/crates/api-server/src/external_editor_api.rs
index ac44a43ca..9ef70320c 100644
--- a/server-rs/crates/api-server/src/external_editor_api.rs
+++ b/server-rs/crates/api-server/src/external_editor_api.rs
@@ -152,6 +152,7 @@ impl From<ExternalEditorCharacterAnimationGenerateRequest>
             input_mode: None,
             reference_media_type: None,
             reference_src: None,
+            appearance_reference_srcs: Vec::new(),
             prompt_text: payload.prompt_text,
             background_color: None,
             screen_color: payload.screen_color,
@@ -164,6 +165,7 @@ impl From<ExternalEditorCharacterAnimationGenerateRequest>
             canvas_completion: payload.canvas_completion,
             generation_inputs: payload.generation_inputs,
             source_resource_id: payload.source_resource_id,
+            appearance_source_resource_ids: Vec::new(),
             asset_folder_id: payload.asset_folder_id,
             asset_label: payload.asset_label,
         }
@@ -1553,6 +1555,27 @@ mod tests {
             .expect_err("External v1 不应接收内部三模态扩展字段");
 
         assert!(error.to_string().contains("inputMode"));
+
+        let appearance_error =
+            serde_json::from_value::<ExternalEditorCharacterAnimationGenerateRequest>(json!({
+                "sourceLayerId": "layer-character",
+                "sourceImageSrc": "editor/uploads/character.png",
+                "sourceWidth": 512,
+                "sourceHeight": 512,
+                "promptText": "原地待机",
+                "resolution": "480p",
+                "ratio": "same",
+                "frameCount": 32,
+                "durationSeconds": 4,
+                "model": "seedance2.0-fast",
+                "appearanceReferenceSrc": "editor/uploads/appearance.png"
+            }))
+            .expect_err("External v1 不应接收内部角色外观字段");
+        assert!(
+            appearance_error
+                .to_string()
+                .contains("appearanceReferenceSrc")
+        );
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/external_generation_worker.rs b/server-rs/crates/api-server/src/external_generation_worker.rs
index f46f9c314..97945d8f3 100644
--- a/server-rs/crates/api-server/src/external_generation_worker.rs
+++ b/server-rs/crates/api-server/src/external_generation_worker.rs
@@ -29,12 +29,16 @@ const EDITOR_GENERATION_WARNING_REDACTED_MESSAGE: &str =
 use crate::{
     asset_billing::with_external_generation_billing_attempt_context,
     character_animation_assets::{
+        convert_editor_character_animation_video_for_owner,
         generate_editor_character_animation_for_owner, generate_editor_video_for_owner,
+        remove_editor_character_animation_background_for_owner,
     },
     config::AppConfig,
     editor_generation_queue::{
         EDITOR_BACKGROUND_MUSIC_GENERATION_JOB_KIND, EDITOR_BACKGROUND_REMOVAL_JOB_KIND,
-        EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND, EDITOR_ICON_SPEC_GENERATION_JOB_KIND,
+        EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND,
+        EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND,
+        EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND, EDITOR_ICON_SPEC_GENERATION_JOB_KIND,
         EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND, EDITOR_IMAGE_EDIT_JOB_KIND,
         EDITOR_IMAGE_GENERATION_JOB_KIND, EDITOR_SOUND_EFFECT_GENERATION_JOB_KIND,
         EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND, EDITOR_VIDEO_GENERATION_JOB_KIND,
@@ -958,6 +962,64 @@ async fn process_external_generation_job_once(
                 }
             }
         }
+        EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND => {
+            let payload = match serde_json::from_str::<
+                shared_contracts::assets::EditorCharacterAnimationVideoConversionRequest,
+            >(job.request_payload_json.as_str())
+            {
+                Ok(payload) => payload,
+                Err(error) => {
+                    let message = format!("视频直接转换任务参数解析失败：{error}");
+                    fail_job(&state, &worker_id, &job, message.clone()).await?;
+                    return Err(message);
+                }
+            };
+            let request_context = worker_request_context(&job, provider_deadline);
+            match convert_editor_character_animation_video_for_owner(
+                state.clone(),
+                request_context,
+                editor_generation_worker_caller(&worker_id, &job)?,
+                Ok(Json(payload)),
+            )
+            .await
+            {
+                Ok(_) => Ok(()),
+                Err(response) => {
+                    let message = response_error_message(response).await;
+                    fail_job(&state, &worker_id, &job, message.clone()).await?;
+                    Err(message)
+                }
+            }
+        }
+        EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND => {
+            let payload = match serde_json::from_str::<
+                shared_contracts::assets::EditorCharacterAnimationBackgroundRemovalRequest,
+            >(job.request_payload_json.as_str())
+            {
+                Ok(payload) => payload,
+                Err(error) => {
+                    let message = format!("Spine序列帧去背景任务参数解析失败：{error}");
+                    fail_job(&state, &worker_id, &job, message.clone()).await?;
+                    return Err(message);
+                }
+            };
+            let request_context = worker_request_context(&job, provider_deadline);
+            match remove_editor_character_animation_background_for_owner(
+                state.clone(),
+                request_context,
+                editor_generation_worker_caller(&worker_id, &job)?,
+                Ok(Json(payload)),
+            )
+            .await
+            {
+                Ok(_) => Ok(()),
+                Err(response) => {
+                    let message = response_error_message(response).await;
+                    fail_job(&state, &worker_id, &job, message.clone()).await?;
+                    Err(message)
+                }
+            }
+        }
         EDITOR_VIDEO_GENERATION_JOB_KIND => {
             let payload = match serde_json::from_str::<
                 shared_contracts::assets::EditorVideoGenerateRequest,
@@ -1633,6 +1695,8 @@ fn external_generation_worker_job_timeout(config: &AppConfig, job_kind: &str) ->
         | EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND
         | EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND
         | EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND
+        | EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND
+        | EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND
         | EDITOR_VIDEO_GENERATION_JOB_KIND => config.external_generation_worker_long_job_timeout,
         _ => config.external_generation_worker_job_timeout,
     }
diff --git a/server-rs/crates/api-server/src/modules/platform_support.rs b/server-rs/crates/api-server/src/modules/platform_support.rs
index 9b1d4d813..7777207dd 100644
--- a/server-rs/crates/api-server/src/modules/platform_support.rs
+++ b/server-rs/crates/api-server/src/modules/platform_support.rs
@@ -13,10 +13,11 @@ use crate::{
     assets::get_asset_history,
     auth::require_bearer_auth,
     character_animation_assets::{
-        generate_character_animation, generate_editor_character_animation, generate_editor_video,
-        get_character_animation_job, get_character_workflow_cache,
-        import_character_animation_video, list_character_animation_templates,
-        publish_character_animation, save_character_workflow_cache,
+        convert_editor_character_animation_video, generate_character_animation,
+        generate_editor_character_animation, generate_editor_video, get_character_animation_job,
+        get_character_workflow_cache, import_character_animation_video,
+        list_character_animation_templates, publish_character_animation,
+        remove_editor_character_animation_background, save_character_workflow_cache,
         split_editor_character_animation_frames,
     },
     character_visual_assets::{
@@ -129,12 +130,24 @@ pub fn router(state: AppState) -> Router<AppState> {
                 require_bearer_auth,
             )),
         )
+        .route(
+            "/api/editor/character-animations/video-conversions",
+            post(convert_editor_character_animation_video).route_layer(
+                middleware::from_fn_with_state(state.clone(), require_bearer_auth),
+            ),
+        )
         .route(
             "/api/editor/character-animations/frame-splits",
             post(split_editor_character_animation_frames).route_layer(
                 middleware::from_fn_with_state(state.clone(), require_bearer_auth),
             ),
         )
+        .route(
+            "/api/editor/character-animations/background-removals",
+            post(remove_editor_character_animation_background).route_layer(
+                middleware::from_fn_with_state(state.clone(), require_bearer_auth),
+            ),
+        )
         .route(
             "/api/editor/videos/generations",
             post(generate_editor_video).route_layer(middleware::from_fn_with_state(
diff --git a/server-rs/crates/platform-oss/src/lib.rs b/server-rs/crates/platform-oss/src/lib.rs
index c563ee158..15a1cea2b 100644
--- a/server-rs/crates/platform-oss/src/lib.rs
+++ b/server-rs/crates/platform-oss/src/lib.rs
@@ -104,6 +104,11 @@ pub struct OssHeadObjectRequest {
     pub object_key: String,
 }
 
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub struct OssDeleteObjectRequest {
+    pub object_key: String,
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct OssPutObjectRequest {
     pub prefix: LegacyAssetPrefix,
@@ -218,6 +223,7 @@ pub struct OssClient {
 pub enum OssRequestOperation {
     Put,
     Head,
+    Delete,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
@@ -841,6 +847,51 @@ impl OssClient {
         result
     }
 
+    /// 删除服务端生成但尚未登记为正式资产的对象。404 视为幂等成功。
+    pub async fn delete_object(
+        &self,
+        client: &reqwest::Client,
+        request: OssDeleteObjectRequest,
+    ) -> Result<(), OssError> {
+        let started_at = Instant::now();
+        let object_key = normalize_object_key(&request.object_key)?;
+        let target_url = build_object_url(&self.config.bucket, &self.config.endpoint, &object_key)
+            .map_err(|error| {
+                request_error(
+                    OssRequestOperation::Delete,
+                    &format!("构造 OSS 对象 URL 失败：{error}"),
+                )
+            })?;
+        let response = send_signed_request(
+            client,
+            &self.config,
+            Method::DELETE,
+            Some(&object_key),
+            target_url,
+            OssRequestOperation::Delete,
+        )
+        .await?;
+        let status = response.status();
+        if !status.is_success() && status != reqwest::StatusCode::NOT_FOUND {
+            return Err(request_status_error(
+                OssRequestOperation::Delete,
+                status.as_u16(),
+                format!("OSS DeleteObject 失败，状态码：{status}"),
+            ));
+        }
+        info!(
+            provider = OSS_PROVIDER,
+            operation = "delete_object",
+            bucket = %self.config.bucket(),
+            endpoint = %self.config.endpoint(),
+            object_key,
+            status = status.as_u16(),
+            elapsed_ms = elapsed_ms(started_at),
+            "OSS DeleteObject 删除完成"
+        );
+        Ok(())
+    }
+
     // AI 生成资源默认由服务端上传 OSS，Web 端只拿签名读地址，不直接持有写权限。
     pub async fn put_object(
         &self,
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index 99827e657..2d0534012 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -325,6 +325,9 @@ pub struct EditorCharacterAnimationGenerateRequest {
     pub reference_media_type: Option<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub reference_src: Option<String>,
+    /// 视频动作参考之外的可选角色外观图片。仅 inputMode=video 时允许，可多张。
+    #[serde(default, skip_serializing_if = "Vec::is_empty")]
+    pub appearance_reference_srcs: Vec<String>,
     pub prompt_text: String,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub background_color: Option<String>,
@@ -344,12 +347,57 @@ pub struct EditorCharacterAnimationGenerateRequest {
     pub generation_inputs: Option<Value>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub source_resource_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Vec::is_empty")]
+    pub appearance_source_resource_ids: Vec<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub asset_folder_id: Option<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub asset_label: Option<String>,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCharacterAnimationVideoConversionRequest {
+    pub source_video_src: String,
+    pub resolution: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub project_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub canvas_completion: Option<EditorCanvasGenerationCompletionPayload>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub generation_inputs: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub source_resource_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_folder_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_label: Option<String>,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCharacterAnimationVideoConversionResponse {
+    pub ok: bool,
+    pub task_id: String,
+    pub processing_method: String,
+    pub frames: Vec<EditorCharacterAnimationFramePayload>,
+    pub frame_count: u32,
+    pub duration_ms: u64,
+    pub frame_width: u32,
+    pub frame_height: u32,
+    pub source_fps: f64,
+    pub sampling_fps: f64,
+    pub price_mud_points: u32,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub project: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub resource: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub queue_state: Option<ExternalGenerationJobStatusRecord>,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorCharacterAnimationFramePayload {
@@ -406,6 +454,43 @@ pub struct EditorCharacterAnimationFrameSplitResponse {
     pub assets: Vec<EditorAssetPayload>,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCharacterAnimationBackgroundRemovalRequest {
+    pub project_id: String,
+    pub source_layer_id: String,
+    pub source_resource_id: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_folder_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_label: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub canvas_completion: Option<EditorCanvasGenerationCompletionPayload>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub generation_inputs: Option<Value>,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorCharacterAnimationBackgroundRemovalResponse {
+    pub ok: bool,
+    pub task_id: String,
+    pub frames: Vec<EditorCharacterAnimationFramePayload>,
+    pub frame_count: u32,
+    pub duration_ms: u64,
+    pub frame_width: u32,
+    pub frame_height: u32,
+    pub price_mud_points: u32,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub project: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub resource: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub queue_state: Option<ExternalGenerationJobStatusRecord>,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorAssetPayload {
@@ -1376,6 +1461,7 @@ mod tests {
             input_mode: Some("video".to_string()),
             reference_media_type: Some("video".to_string()),
             reference_src: Some("generated/editor/reference.mp4".to_string()),
+            appearance_reference_srcs: vec!["generated/editor/appearance.png".to_string()],
             prompt_text: "待机呼吸".to_string(),
             background_color: Some("purple".to_string()),
             screen_color: None,
@@ -1399,6 +1485,7 @@ mod tests {
             }),
             generation_inputs: None,
             source_resource_id: Some("resource-source".to_string()),
+            appearance_source_resource_ids: vec!["resource-appearance".to_string()],
             asset_folder_id: Some("project".to_string()),
             asset_label: Some("勇者奔跑".to_string()),
         })
@@ -1412,6 +1499,10 @@ mod tests {
             json!("generated/editor/reference.mp4")
         );
         assert_eq!(payload["backgroundColor"], json!("purple"));
+        assert_eq!(
+            payload["appearanceReferenceSrcs"],
+            json!(["generated/editor/appearance.png"])
+        );
         assert_eq!(
             payload["sourceImageSrc"],
             json!("/generated-characters/hero/master.png")
@@ -1421,6 +1512,10 @@ mod tests {
         assert_eq!(payload["projectId"], json!("editor-project-1"));
         assert_eq!(payload["canvasCompletion"]["dialogId"], json!("dialog-1"));
         assert_eq!(payload["sourceResourceId"], json!("resource-source"));
+        assert_eq!(
+            payload["appearanceSourceResourceIds"],
+            json!(["resource-appearance"])
+        );
         assert_eq!(payload["assetFolderId"], json!("project"));
         assert_eq!(payload["assetLabel"], json!("勇者奔跑"));
     }
@@ -1443,6 +1538,66 @@ mod tests {
         assert_eq!(payload["assetLabel"], json!("奔跑动作"));
     }
 
+    #[test]
+    fn editor_character_animation_video_conversion_uses_discriminated_shape() {
+        let payload = serde_json::to_value(EditorCharacterAnimationVideoConversionRequest {
+            source_video_src: "users/owner/source.mov".to_string(),
+            resolution: "720p".to_string(),
+            project_id: Some("project-1".to_string()),
+            canvas_completion: None,
+            generation_inputs: None,
+            source_resource_id: Some("resource-video".to_string()),
+            asset_folder_id: Some("project".to_string()),
+            asset_label: Some("跑步视频转换".to_string()),
+        })
+        .expect("request should serialize");
+        assert_eq!(payload["sourceVideoSrc"], "users/owner/source.mov");
+        assert_eq!(payload["resolution"], "720p");
+        assert!(payload.get("promptText").is_none());
+        assert!(payload.get("model").is_none());
+    }
+
+    #[test]
+    fn editor_character_animation_120_frame_response_stays_within_queue_json_gate() {
+        let frames = (0..120)
+            .map(|index| EditorCharacterAnimationFramePayload {
+                image_src: format!(
+                    "/generated-character-animations/editor/video-conversions/task/frame{:03}.png",
+                    index + 1
+                ),
+                object_key: Some(format!(
+                    "generated-character-animations/editor/video-conversions/task/frame{:03}.png",
+                    index + 1
+                )),
+                asset_object_id: Some(format!("assetobj_{:064}", index + 1)),
+                width: 720,
+                height: 405,
+            })
+            .collect();
+        let payload = EditorCharacterAnimationVideoConversionResponse {
+            ok: true,
+            task_id: "task-max-frames".to_string(),
+            processing_method: "视频直接转换".to_string(),
+            frames,
+            frame_count: 120,
+            duration_ms: 15_000,
+            frame_width: 720,
+            frame_height: 405,
+            source_fps: 29.970_029_97,
+            sampling_fps: 8.0,
+            price_mud_points: 0,
+            project: None,
+            resource: None,
+            asset: None,
+            queue_state: None,
+        };
+        let bytes = serde_json::to_vec(&payload).expect("response should serialize");
+        assert!(
+            bytes.len() < 512 * 1024,
+            "120 frame payload must fit queue gate"
+        );
+    }
+
     #[test]
     fn editor_character_animation_response_includes_frames_and_preview_video() {
         let payload = serde_json::to_value(EditorCharacterAnimationGenerateResponse {
diff --git a/server-rs/crates/spacetime-module/src/editor_project_storage.rs b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
index 8c8e69e68..bc3dbe2bb 100644
--- a/server-rs/crates/spacetime-module/src/editor_project_storage.rs
+++ b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
@@ -17,13 +17,14 @@ const EDITOR_CANVAS_LAYOUT_MIGRATION_STATUS_ACTIVE: &str = "active";
 const EDITOR_CANVAS_LAYOUT_MIGRATION_STATUS_ROLLED_BACK: &str = "rolled_back";
 const EDITOR_CANVAS_RESOURCE_REPAIR_MAX_ACTIONS: usize = 16;
 const EDITOR_SPRITESHEET_SLICE_BATCH_MAX_ITEMS: usize = 64;
+const EDITOR_CHARACTER_ANIMATION_SLICE_BATCH_MAX_ITEMS: usize = 120;
 const EDITOR_CANVAS_AUDIO_RESOURCE_WIDTH: u32 = 420;
 const EDITOR_CANVAS_AUDIO_RESOURCE_HEIGHT: u32 = 120;
 const EDITOR_CHARACTER_ANIMATION_NORMALIZATION_MAX_BATCH_SIZE: u32 = 25;
 const EDITOR_CHARACTER_ANIMATION_CANVAS_NORMALIZATION_MAX_BATCH_SIZE: u32 = 5;
-// 透明图集最多产出 64 个切片，另有 provider 原图和透明整图两个正式 item。
-const EDITOR_GENERATION_RESULT_MAX_ITEMS: usize = 66;
-const EDITOR_GENERATION_OPERATION_KINDS: [&str; 10] = [
+// 角色动画视频转换最多 120 帧，第一帧同时承载最终 resource/asset，事务正好 120 项。
+const EDITOR_GENERATION_RESULT_MAX_ITEMS: usize = 120;
+const EDITOR_GENERATION_OPERATION_KINDS: [&str; 11] = [
     "editor_image_generation",
     "editor_icon_spec_generation",
     "editor_image_edit",
@@ -31,6 +32,7 @@ const EDITOR_GENERATION_OPERATION_KINDS: [&str; 10] = [
     "editor_icon_spritesheet_generation",
     "editor_ui_design_asset_extraction",
     "editor_character_animation_generation",
+    "editor_character_animation_video_conversion",
     "editor_video_generation",
     "editor_sound_effect_generation",
     "editor_background_music_generation",
@@ -3449,7 +3451,9 @@ fn validate_editor_generation_result_shape(
         return Err("生成结果 completed_at_micros 必须为正数".to_string());
     }
     if !(1..=EDITOR_GENERATION_RESULT_MAX_ITEMS).contains(&input.items.len()) {
-        return Err("生成结果 item 数量必须在 1 到 66 之间".to_string());
+        return Err(format!(
+            "生成结果 item 数量必须在 1 到 {EDITOR_GENERATION_RESULT_MAX_ITEMS} 之间"
+        ));
     }
     let result_project_id = editor_generation_result_project_id(input)?;
     let mut slots = BTreeSet::new();
@@ -5103,8 +5107,19 @@ fn validate_editor_spritesheet_slice_batch(
     group_task_id: Option<&str>,
 ) -> Result<(), String> {
     let item_count = input.items.len();
-    if !(1..=EDITOR_SPRITESHEET_SLICE_BATCH_MAX_ITEMS).contains(&item_count) {
-        return Err("图集切片批次产物数量必须在 1 到 64 之间".to_string());
+    let is_character_animation_batch = input.items.iter().all(|item| {
+        matches!(
+            item.asset_object.asset_kind.trim(),
+            EDITOR_CHARACTER_ANIMATION_ASSET_KIND | EDITOR_CHARACTER_ANIMATION_OBJECT_KIND
+        )
+    });
+    let max_items = if is_character_animation_batch {
+        EDITOR_CHARACTER_ANIMATION_SLICE_BATCH_MAX_ITEMS
+    } else {
+        EDITOR_SPRITESHEET_SLICE_BATCH_MAX_ITEMS
+    };
+    if !(1..=max_items).contains(&item_count) {
+        return Err(format!("图集切片批次产物数量必须在 1 到 {max_items} 之间"));
     }
     if usize::try_from(input.expected_asset_count).ok() != Some(item_count) {
         return Err("图集切片批次产物数量与预期不一致".to_string());
@@ -14084,7 +14099,7 @@ mod tests {
     }
 
     #[test]
-    fn editor_generation_result_shape_accepts_sixty_four_slices_plus_two_source_items() {
+    fn editor_generation_result_shape_accepts_exactly_one_hundred_twenty_items() {
         let mut input = editor_generation_result_input();
         input.items.clear();
         for index in 0..EDITOR_GENERATION_RESULT_MAX_ITEMS {
@@ -14138,8 +14153,8 @@ mod tests {
                 "editor_image_generation",
                 "job-1",
             )
-            .expect_err("more than the full spritesheet bundle must fail")
-            .contains("1 到 66")
+            .expect_err("more than the maximum generation bundle must fail")
+            .contains("1 到 120")
         );
     }
 
@@ -15685,6 +15700,45 @@ mod tests {
             .expect("complete batch should pass before transaction writes");
     }
 
+    #[test]
+    fn character_animation_split_accepts_120_but_icon_split_remains_64() {
+        let mut character_batch = spritesheet_slice_batch();
+        character_batch.items = (0..120).map(spritesheet_slice_item).collect();
+        character_batch.expected_asset_count = 120;
+        for item in &mut character_batch.items {
+            item.asset_object.asset_kind = EDITOR_CHARACTER_ANIMATION_OBJECT_KIND.to_string();
+            let asset = item.asset.as_mut().expect("asset");
+            asset.group_task_expected_asset_count = Some(120);
+        }
+        validate_editor_spritesheet_slice_batch(
+            &character_batch,
+            "user-1",
+            "task-1",
+            Some("group-task-1"),
+        )
+        .expect("character animation should allow 120 frames");
+
+        let mut icon_batch = spritesheet_slice_batch();
+        icon_batch.items = (0..65).map(spritesheet_slice_item).collect();
+        icon_batch.expected_asset_count = 65;
+        for item in &mut icon_batch.items {
+            item.asset
+                .as_mut()
+                .expect("asset")
+                .group_task_expected_asset_count = Some(65);
+        }
+        assert!(
+            validate_editor_spritesheet_slice_batch(
+                &icon_batch,
+                "user-1",
+                "task-1",
+                Some("group-task-1"),
+            )
+            .expect_err("icon spritesheet must remain capped at 64")
+            .contains("1 到 64")
+        );
+    }
+
     #[test]
     fn spritesheet_slice_batch_accepts_reused_source_objects_under_split_operation() {
         let mut batch = spritesheet_slice_batch();
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
index ddc7fd156..e51a10fd8 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx
@@ -227,6 +227,7 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
 
   it('renders completed frame count and failed error state', () => {
     const result = {
+      resultType: 'ai' as const,
       taskId: 'task-a',
       model: 'seedance2.0-fast' as const,
       prompt: '行走动作',
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
index f19664276..01bd849f2 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx
@@ -93,9 +93,6 @@ function CharacterGenerationHarness({
       <output aria-label="当前多方向角色图">
         {String(dialog.characterSheetEnabled === true)}
       </output>
-      <output aria-label="当前多方向图视角数">
-        {dialog.characterSheetViewSet ?? '4'}
-      </output>
       <output aria-label="选择角色规范">{String(isPickingSpec)}</output>
       <output aria-label="选择常规参考图">{String(isPickingReference)}</output>
     </div>
@@ -135,57 +132,21 @@ describe('ImageCanvasCharacterGenerationComposerView', () => {
       />,
     );
 
-    const toggle = screen.getByRole('button', { name: '多方向角色图' });
-    expect(toggle.getAttribute('aria-pressed')).toBe('false');
+    const toggle = screen.getByRole('checkbox', { name: '多方向图' });
+    expect((toggle as HTMLInputElement).checked).toBe(false);
 
     fireEvent.click(toggle);
 
     expect(screen.getByLabelText('当前多方向角色图').textContent).toBe('true');
     expect(
-      screen.getByRole('button', { name: '多方向角色图' }).getAttribute(
-        'aria-pressed',
-      ),
-    ).toBe('true');
+      (screen.getByRole('checkbox', { name: '多方向图' }) as HTMLInputElement)
+        .checked,
+    ).toBe(true);
 
-    fireEvent.click(screen.getByRole('button', { name: '多方向角色图' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: '多方向图' }));
     expect(screen.getByLabelText('当前多方向角色图').textContent).toBe('false');
   });
 
-  it('shows the view-set dropdown only while the sheet is enabled', () => {
-    render(
-      <CharacterGenerationHarness
-        initialDialog={createDialog({ characterSheetEnabled: false })}
-      />,
-    );
-
-    expect(screen.queryByRole('button', { name: /多方向图视角/ })).toBeNull();
-
-    fireEvent.click(screen.getByRole('button', { name: '多方向角色图' }));
-
-    expect(
-      screen.getByRole('button', { name: '多方向图视角 四方向' }),
-    ).toBeTruthy();
-  });
-
-  it('switches the character sheet view set between four and eight', () => {
-    render(
-      <CharacterGenerationHarness
-        initialDialog={createDialog({
-          characterSheetEnabled: true,
-          characterSheetViewSet: '4',
-        })}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: '多方向图视角 四方向' }));
-    fireEvent.click(screen.getByRole('button', { name: '八方向' }));
-
-    expect(screen.getByLabelText('当前多方向图视角数').textContent).toBe('8');
-    expect(
-      screen.getByRole('button', { name: '多方向图视角 八方向' }),
-    ).toBeTruthy();
-  });
-
   it('updates character prompt, clears failed state and submits', () => {
     const submitCharacter = vi.fn();
     render(
diff --git a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
index b77d8ef1c..03e61c913 100644
--- a/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx
@@ -1,12 +1,10 @@
-import { ChevronDown, ClipboardList, ImagePlus, LayoutGrid } from 'lucide-react';
+import { ClipboardList, ImagePlus } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
   type ReactNode,
   type RefObject,
   type SetStateAction,
-  useRef,
-  useState,
 } from 'react';
 
 import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
@@ -14,7 +12,6 @@ import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
-import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import type {
   CharacterReferenceImage,
@@ -104,8 +101,6 @@ export function ImageCanvasCharacterGenerationComposerView({
   hasPendingImageReferenceUploads = false,
   onSubmit,
 }: ImageCanvasCharacterGenerationComposerViewProps) {
-  const [isViewSetMenuOpen, setIsViewSetMenuOpen] = useState(false);
-  const viewSetButtonRef = useRef<HTMLButtonElement | null>(null);
   useImageCanvasFloatingOptionDismiss({
     isOpen: isCharacterSpecMenuOpen || isCharacterReferenceMenuOpen,
     boundaryRefs: [characterSpecButtonRef, characterReferenceButtonRef],
@@ -114,25 +109,6 @@ export function ImageCanvasCharacterGenerationComposerView({
       setIsCharacterReferenceMenuOpen(false);
     },
   });
-  useImageCanvasFloatingOptionDismiss({
-    isOpen: isViewSetMenuOpen,
-    boundaryRefs: [viewSetButtonRef],
-    onDismiss: () => setIsViewSetMenuOpen(false),
-    restoreFocusRef: viewSetButtonRef,
-  });
-  const setViewSet = (value: '4' | '8') => {
-    setIsViewSetMenuOpen(false);
-    setGenerateDialog((currentDialog) =>
-      currentDialog?.mode === 'character'
-        ? {
-            ...resetFailedDialogStatus(currentDialog),
-            characterSheetViewSet: value,
-          }
-        : currentDialog,
-    );
-  };
-  const selectedViewSetLabel =
-    (dialog.characterSheetViewSet ?? '4') === '8' ? '八方向' : '四方向';
 
   return (
     <div
@@ -240,30 +216,6 @@ export function ImageCanvasCharacterGenerationComposerView({
           isAdd
           onClick={() => setIsCharacterReferenceMenuOpen((open) => !open)}
         />
-        <ImageCanvasReferenceSlot
-          tone="character-sheet"
-          icon={<LayoutGrid className="h-4 w-4" aria-hidden="true" />}
-          label="多方向图"
-          ariaLabel="多方向角色图"
-          title={
-            dialog.characterSheetEnabled === true
-              ? '多方向角色图（开启）'
-              : '多方向角色图'
-          }
-          disabled={dialog.status === 'generating'}
-          pressed={dialog.characterSheetEnabled === true}
-          onClick={() =>
-            setGenerateDialog((currentDialog) =>
-              currentDialog?.mode === 'character'
-                ? {
-                    ...resetFailedDialogStatus(currentDialog),
-                    characterSheetEnabled:
-                      currentDialog.characterSheetEnabled !== true,
-                  }
-                : currentDialog,
-            )
-          }
-        />
         {isCharacterReferenceMenuOpen
           ? renderEditorPortal(
               <PlatformFloatingMenu
@@ -351,64 +303,28 @@ export function ImageCanvasCharacterGenerationComposerView({
               onSubmit(dialog);
             }
           }}
+          extraToggles={
+            <label className="image-canvas-editor__image-style-toggle">
+              <input
+                type="checkbox"
+                checked={dialog.characterSheetEnabled === true}
+                disabled={dialog.status === 'generating'}
+                onChange={(event) =>
+                  setGenerateDialog((currentDialog) =>
+                    currentDialog?.mode === 'character'
+                      ? {
+                          ...resetFailedDialogStatus(currentDialog),
+                          characterSheetEnabled: event.target.checked,
+                        }
+                      : currentDialog,
+                  )
+                }
+              />
+              <span>多方向图</span>
+            </label>
+          }
           renderEditorPortal={renderEditorPortal}
           buildPortalMenuStyle={buildPortalMenuStyle}
-          styleControl={
-            dialog.characterSheetEnabled === true ? (
-              <div className="image-canvas-editor__option-popover-anchor">
-                <PlatformInlineOptionButton
-                  ref={viewSetButtonRef}
-                  className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--viewset"
-                  aria-label={`多方向图视角 ${selectedViewSetLabel}`}
-                  aria-expanded={isViewSetMenuOpen}
-                  disabled={dialog.status === 'generating'}
-                  trailingIcon={<ChevronDown className="h-3 w-3" />}
-                  onClick={() => setIsViewSetMenuOpen((open) => !open)}
-                >
-                  {selectedViewSetLabel}
-                </PlatformInlineOptionButton>
-                {isViewSetMenuOpen
-                  ? renderEditorPortal(
-                      <PlatformFloatingMenu
-                        className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
-                        label="多方向图视角数"
-                        placement="top-start"
-                        style={buildPortalMenuStyle(
-                          viewSetButtonRef.current,
-                          'above',
-                        )}
-                        onPointerDown={(event) => event.stopPropagation()}
-                        onClick={(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">
-                              {(['4', '8'] as const).map((value) => (
-                                <button
-                                  key={value}
-                                  type="button"
-                                  className="image-canvas-editor__option-popover-choice"
-                                  aria-pressed={
-                                    (dialog.characterSheetViewSet ?? '4') ===
-                                    value
-                                  }
-                                  onClick={() => setViewSet(value)}
-                                >
-                                  {value === '4' ? '四方向' : '八方向'}
-                                </button>
-                              ))}
-                            </div>
-                          </div>
-                        </div>
-                      </PlatformFloatingMenu>,
-                    )
-                  : null}
-              </div>
-            ) : undefined
-          }
         />
       </div>
     </div>
diff --git a/src/components/image-editor/ImageCanvasContextMenusView.test.tsx b/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
index eedc9fba6..d136ba461 100644
--- a/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
+++ b/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
@@ -56,7 +56,6 @@ function renderContextMenus(
     onFitLayers: vi.fn(),
     onOpenQuickEditPanel: vi.fn(),
     onOpenLayerMetadata: vi.fn(),
-    onOpenCharacterAnimationPanel: vi.fn(),
     ...overrides,
   };
 
@@ -160,7 +159,6 @@ describe('ImageCanvasContextMenusView', () => {
       screen.getByRole('menuitem', { name: 'Spine 导出（zip）' }),
     );
     fireEvent.click(screen.getByRole('menuitem', { name: '快速编辑' }));
-    fireEvent.click(screen.getByRole('menuitem', { name: '生成动画' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '删除' }));
 
     expect(props.onCopyContextLayers).toHaveBeenNthCalledWith(1);
@@ -179,9 +177,8 @@ describe('ImageCanvasContextMenusView', () => {
       expect.objectContaining({ mode: 'spine-json' }),
     );
     expect(props.onOpenQuickEditPanel).toHaveBeenCalledWith(layer);
-    expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
-    expect(props.onCloseContextMenu).toHaveBeenCalledTimes(2);
-    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(2);
+    expect(props.onCloseContextMenu).toHaveBeenCalledTimes(1);
+    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(1);
     expect(props.onDeleteContextLayers).toHaveBeenCalledTimes(1);
   });
 
@@ -319,19 +316,6 @@ describe('ImageCanvasContextMenusView', () => {
     }
   });
 
-  it('closes the standalone image menu after opening character animation', () => {
-    const layer = createLayer({ assetKind: 'character' });
-    const props = renderContextMenus({
-      imageContextMenu: { layerId: layer.id, x: 20, y: 22 },
-      imageContextMenuLayer: layer,
-    });
-
-    fireEvent.click(screen.getByRole('menuitem', { name: '生成动画' }));
-
-    expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
-    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(1);
-  });
-
   it('renders the image context menu when no canvas context menu is open', () => {
     const layer = createLayer({ assetKind: 'character' });
     const props = renderContextMenus({
diff --git a/src/components/image-editor/ImageCanvasContextMenusView.tsx b/src/components/image-editor/ImageCanvasContextMenusView.tsx
index e8702e976..da08d5aed 100644
--- a/src/components/image-editor/ImageCanvasContextMenusView.tsx
+++ b/src/components/image-editor/ImageCanvasContextMenusView.tsx
@@ -53,7 +53,6 @@ type ImageCanvasContextMenusViewProps = {
   onFitLayers: () => void;
   onOpenQuickEditPanel: (layer: CanvasLayer) => void;
   onOpenLayerMetadata: (layer: CanvasLayer) => void;
-  onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
 };
 
 type MeasuredMenuLayout = {
@@ -94,7 +93,6 @@ export function ImageCanvasContextMenusView({
   onFitLayers,
   onOpenQuickEditPanel,
   onOpenLayerMetadata,
-  onOpenCharacterAnimationPanel,
 }: ImageCanvasContextMenusViewProps) {
   const isImageSequenceLayer = contextMenuLayer?.mediaType === 'image-sequence';
   const layerCopyBlockedTitle =
@@ -525,19 +523,6 @@ export function ImageCanvasContextMenusView({
                   >
                     查看图片信息
                   </button>
-                  {imageContextMenuLayer.assetKind === 'character' ? (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      onClick={() => {
-                        onOpenCharacterAnimationPanel(imageContextMenuLayer);
-                        onCloseContextMenu();
-                        onCloseImageContextMenu();
-                      }}
-                    >
-                      生成动画
-                    </button>
-                  ) : null}
                   <hr />
                 </>
               ) : null}
@@ -585,17 +570,6 @@ export function ImageCanvasContextMenusView({
             >
               查看图片信息
             </PlatformFloatingMenuItem>
-            {imageContextMenuLayer.assetKind === 'character' ? (
-              <PlatformFloatingMenuItem
-                className="image-canvas-editor__context-menu-item"
-                onClick={() => {
-                  onOpenCharacterAnimationPanel(imageContextMenuLayer);
-                  onCloseImageContextMenu();
-                }}
-              >
-                生成动画
-              </PlatformFloatingMenuItem>
-            ) : null}
             <PlatformFloatingMenuItem
               className="image-canvas-editor__context-menu-item"
               onClick={() => onDeleteLayerById(imageContextMenuLayer.id)}
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 9f28be8b8..1ab91da71 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -3452,20 +3452,14 @@ describe('ImageCanvasEditorView generation integration', () => {
     const characterLayer = await screen.findByAltText('画布图片：市场老妇人');
     fireEvent.click(characterLayer.closest('button')!);
     expect(screen.getByText('角色')).toBeTruthy();
-    expect(screen.getByRole('button', { name: '生成动画' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '生成动画' })).toBeNull();
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
     expect(
       screen.queryByRole('dialog', { name: 'Spine序列帧动画生成' }),
     ).toBeNull();
-    fireEvent.contextMenu(characterLayer.closest('button')!, {
-      clientX: 260,
-      clientY: 220,
-    });
-    expect(screen.getByRole('menuitem', { name: '生成动画' })).toBeTruthy();
-
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
 
-    fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Spine序列帧动画' }));
     expect(
       screen.getByRole('button', { name: '角色动作生成占位图' }),
     ).toBeTruthy();
@@ -3540,21 +3534,24 @@ describe('ImageCanvasEditorView generation integration', () => {
       }),
     );
     fireEvent.click(
-      within(
-        screen.getByRole('group', { name: '序列帧参数选项' }),
-      ).getByRole('button', { name: '720p' }),
+      within(screen.getByRole('group', { name: '序列帧参数选项' })).getByRole(
+        'button',
+        { name: '720p' },
+      ),
     );
     fireEvent.click(
-      within(
-        screen.getByRole('group', { name: '序列帧参数选项' }),
-      ).getByRole('button', { name: '16:9' }),
+      within(screen.getByRole('group', { name: '序列帧参数选项' })).getByRole(
+        'button',
+        { name: '16:9' },
+      ),
     );
     fireEvent.click(
-      within(
-        screen.getByRole('group', { name: '序列帧参数选项' }),
-      ).getByRole('button', {
-        name: '48帧·6秒',
-      }),
+      within(screen.getByRole('group', { name: '序列帧参数选项' })).getByRole(
+        'button',
+        {
+          name: '48帧·6秒',
+        },
+      ),
     );
     const resizedPlaceholder = screen.getByRole('button', {
       name: '角色动作生成占位图',
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 4f160f6c4..696ee5196 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -1339,6 +1339,103 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('hydrates a character-animation preview video through its source resource', () => {
+    const frames = [
+      {
+        imageSrc: '/generated/sequence/frame-1.png',
+        objectKey: 'generated/sequence/frame-1.png',
+        width: 480,
+        height: 480,
+      },
+      {
+        imageSrc: '/generated/sequence/frame-2.png',
+        objectKey: 'generated/sequence/frame-2.png',
+        width: 480,
+        height: 480,
+      },
+    ];
+    const hydrated = hydrateLayer(
+      {
+        layerId: 'layer-sequence',
+        resourceId: 'resource-sequence',
+        title: '角色动作',
+        sourceType: 'generated',
+      },
+      new Map([
+        [
+          'resource-sequence',
+          {
+            resourceId: 'resource-sequence',
+            imageSrc: frames[0]!.imageSrc,
+            objectKey: frames[0]!.objectKey,
+            assetKind: 'character-animation',
+            imageSequenceFrames: frames,
+            imageSequenceDurationMs: 4_000,
+            taskId: 'animation-task-1',
+            sourceResourceId: 'resource-preview-video',
+          },
+        ],
+        [
+          'resource-preview-video',
+          {
+            resourceId: 'resource-preview-video',
+            imageSrc: '/generated/video/preview.mp4',
+            objectKey: 'generated/video/preview.mp4',
+            assetKind: 'video',
+            taskId: 'animation-task-1',
+          },
+        ],
+      ]),
+    );
+
+    expect(hydrated).toMatchObject({
+      assetKind: 'character-animation',
+      mediaType: 'image-sequence',
+      previewVideoPath: 'generated/video/preview.mp4',
+      imageSequenceFrames: frames,
+      imageSequenceDurationMs: 4_000,
+    });
+  });
+
+  it('does not hydrate an older action reference as a generated preview video', () => {
+    const frames = [
+      { imageSrc: '/generated/sequence/frame-1.png', width: 480, height: 480 },
+      { imageSrc: '/generated/sequence/frame-2.png', width: 480, height: 480 },
+    ];
+    const hydrated = hydrateLayer(
+      {
+        layerId: 'layer-sequence',
+        resourceId: 'resource-sequence',
+        title: '角色动作',
+        sourceType: 'generated',
+      },
+      new Map([
+        [
+          'resource-sequence',
+          {
+            imageSrc: frames[0]!.imageSrc,
+            assetKind: 'character-animation',
+            imageSequenceFrames: frames,
+            imageSequenceDurationMs: 4_000,
+            taskId: 'animation-task-2',
+            sourceResourceId: 'resource-action-video',
+          },
+        ],
+        [
+          'resource-action-video',
+          {
+            imageSrc: '/generated/source/action.mp4',
+            objectKey: 'generated/source/action.mp4',
+            assetKind: 'video',
+            taskId: 'source-task-1',
+          },
+        ],
+      ]),
+    );
+
+    expect(hydrated?.previewVideoPath).toBeNull();
+  });
+
   it('rejects an action layer when its project resource lacks formal sequence fields', () => {
     const frames = [
       {
@@ -1637,6 +1734,100 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('round-trips independent character animation AI and conversion drafts', () => {
+    const dialog: CanvasGenerationDialogState = {
+      id: 'dialog-character-animation-drafts',
+      mode: 'character-animation',
+      prompt: '保留 AI 提示词',
+      status: 'idle',
+      characterAnimationWorkflow: 'video-conversion',
+      characterAnimationBackgroundColor: 'green',
+      characterAnimationResolution: '480p',
+      characterAnimationConversionResolution: '720p',
+      generationReferences: [
+        {
+          id: 'motion',
+          label: '动作视频',
+          src: 'users/user-1/motion.mp4',
+          objectKey: 'users/user-1/motion.mp4',
+          mediaType: 'video',
+          resourceId: 'resource-motion',
+        },
+      ],
+      characterAnimationAppearanceReferences: [
+        {
+          id: 'appearance',
+          label: '角色外观',
+          src: 'users/user-1/appearance.png',
+          objectKey: 'users/user-1/appearance.png',
+          resourceId: 'resource-appearance',
+        },
+      ],
+      characterAnimationConversionVideoReference: {
+        id: 'conversion-source',
+        label: '直接转换源视频',
+        src: 'users/user-1/source.mov',
+        objectKey: 'users/user-1/source.mov',
+        mediaType: 'video',
+        resourceId: 'resource-conversion-source',
+      },
+    };
+
+    const layout = serializeCanvasLayout({
+      layers: [],
+      canvasGenerationDialogs: [dialog],
+    });
+    const { generationDialogs } = splitCanvasLayoutItems(
+      layout,
+      new Map([
+        [
+          'resource-motion',
+          {
+            imageSrc: 'users/user-1/motion.mp4',
+            objectKey: 'users/user-1/motion.mp4',
+          },
+        ],
+        [
+          'resource-appearance',
+          {
+            imageSrc: 'users/user-1/appearance.png',
+            objectKey: 'users/user-1/appearance.png',
+          },
+        ],
+        [
+          'resource-conversion-source',
+          {
+            imageSrc: 'users/user-1/source.mov',
+            objectKey: 'users/user-1/source.mov',
+          },
+        ],
+      ]),
+    );
+
+    expect(generationDialogs[0]).toMatchObject({
+      prompt: '保留 AI 提示词',
+      characterAnimationWorkflow: 'video-conversion',
+      characterAnimationBackgroundColor: 'green',
+      characterAnimationResolution: '480p',
+      characterAnimationConversionResolution: '720p',
+      generationReferences: [
+        expect.objectContaining({
+          objectKey: 'users/user-1/motion.mp4',
+          mediaType: 'video',
+        }),
+      ],
+      characterAnimationAppearanceReferences: [
+        expect.objectContaining({
+          objectKey: 'users/user-1/appearance.png',
+        }),
+      ],
+      characterAnimationConversionVideoReference: expect.objectContaining({
+        objectKey: 'users/user-1/source.mov',
+        mediaType: 'video',
+      }),
+    });
+  });
+
   it('keeps the operation ledger out of the layout and restores it from the local ledger', () => {
     const dialogId = 'dialog-perfect-pixel-round-trip';
     const operation = buildPerfectPixelOperation(dialogId);
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index d063fac44..a44fa39e4 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -7,7 +7,7 @@ import { isEditorSceneStylePreset } from '../../../packages/shared/src/contracts
 import type {
   EditorAssetGenerationInputs,
   EditorAssetLibrarySnapshot,
-  EditorCharacterAnimationGenerationResult,
+  EditorCharacterAnimationResult,
   EditorPixelArtSnapInput,
   EditorProjectLayerSnapshot,
   EditorProjectSnapshot,
@@ -722,6 +722,12 @@ function serializeDialogReferences(
     generationReferences: serializeGenerationReferences(
       dialog.generationReferences,
     ),
+    characterAnimationAppearanceReferences: serializeGenerationReferences(
+      dialog.characterAnimationAppearanceReferences,
+    ),
+    characterAnimationConversionVideoReference: serializeGenerationReference(
+      dialog.characterAnimationConversionVideoReference,
+    ),
     characterSpecReference: serializeGenerationReference(
       dialog.characterSpecReference,
     ),
@@ -1274,6 +1280,34 @@ export function hydrateCanvasGenerationDialog(
       typeof snapshot.videoWebSearchEnabled === 'boolean'
         ? snapshot.videoWebSearchEnabled
         : undefined,
+    characterAnimationWorkflow:
+      snapshot.characterAnimationWorkflow === 'video-conversion'
+        ? 'video-conversion'
+        : snapshot.characterAnimationWorkflow === 'ai'
+          ? 'ai'
+          : undefined,
+    characterAnimationAppearanceReferences: hydrateCharacterReferences(
+      snapshot.characterAnimationAppearanceReferences,
+      resourcesById,
+      currentUserId,
+    ),
+    characterAnimationConversionVideoReference: hydrateCharacterReference(
+      snapshot.characterAnimationConversionVideoReference,
+      resourcesById,
+      currentUserId,
+    ),
+    characterAnimationConversionResolution:
+      snapshot.characterAnimationConversionResolution === '480p' ||
+      snapshot.characterAnimationConversionResolution === '720p'
+        ? snapshot.characterAnimationConversionResolution
+        : undefined,
+    characterAnimationBackgroundColor:
+      snapshot.characterAnimationBackgroundColor === 'white' ||
+      snapshot.characterAnimationBackgroundColor === 'green' ||
+      snapshot.characterAnimationBackgroundColor === 'blue' ||
+      snapshot.characterAnimationBackgroundColor === 'purple'
+        ? snapshot.characterAnimationBackgroundColor
+        : undefined,
     characterAnimationResolution:
       snapshot.characterAnimationResolution === '480p' ||
       snapshot.characterAnimationResolution === '720p'
@@ -1409,6 +1443,33 @@ export function hydrateLayer(
   const src = isFormalCharacterAnimation
     ? firstSequenceFrame || resource?.imageSrc || ''
     : snapshotSrc || firstSequenceFrame || resource?.imageSrc || '';
+  const sequencePreviewVideoPath = isFormalCharacterAnimation
+    ? (() => {
+        const previewResourceId = stringOrNull(resource?.sourceResourceId);
+        const previewResource = previewResourceId
+          ? resourcesById.get(previewResourceId)
+          : undefined;
+        if (previewResource?.assetKind !== 'video') {
+          return undefined;
+        }
+        // 正式序列帧的 sourceResourceId 应指向同一次操作登记的预览视频。
+        // 如果它实际指向更早的动作参考视频，不能把参考视频当成生成结果播放；
+        // 这也避免历史错误 lineage 在刷新后悄悄改变“底层视频”。
+        const animationTaskId = stringOrNull(resource?.taskId);
+        const previewTaskId = stringOrNull(previewResource.taskId);
+        if (
+          animationTaskId &&
+          previewTaskId &&
+          animationTaskId !== previewTaskId
+        ) {
+          return undefined;
+        }
+        return (
+          stringOrNull(previewResource.objectKey) ??
+          stringOrNull(previewResource.imageSrc)
+        );
+      })()
+    : undefined;
   const title =
     typeof snapshot.title === 'string' ? snapshot.title : '画布图片';
   if (!resourceId || !layerId || !src) {
@@ -1503,7 +1564,7 @@ export function hydrateLayer(
       ? imageSequenceFrames
       : undefined,
     previewVideoPath: isFormalCharacterAnimation
-      ? null
+      ? (sequencePreviewVideoPath ?? null)
       : stringOrNull(snapshot.previewVideoPath),
     prompt: isFormalCharacterAnimation
       ? stringOrNull(resource?.prompt)
@@ -2023,25 +2084,43 @@ function videoAspectRatioOrUndefined(value: unknown) {
 
 function hydrateCharacterAnimationResult(
   value: unknown,
-): EditorCharacterAnimationGenerationResult | undefined {
+): EditorCharacterAnimationResult | undefined {
   if (!value || typeof value !== 'object') {
     return undefined;
   }
-  const result = value as Partial<EditorCharacterAnimationGenerationResult>;
+  const result = value as Record<string, unknown> &
+    Partial<EditorCharacterAnimationResult>;
   if (
     typeof result.taskId !== 'string' ||
-    result.model !== 'seedance2.0-fast' ||
-    typeof result.prompt !== 'string' ||
-    typeof result.previewVideoPath !== 'string' ||
     !Array.isArray(result.frames) ||
     typeof result.frameCount !== 'number' ||
-    typeof result.durationSeconds !== 'number' ||
-    typeof result.fps !== 'number' ||
     typeof result.priceMudPoints !== 'number'
   ) {
     return undefined;
   }
-  return result as EditorCharacterAnimationGenerationResult;
+  if (result.resultType === 'video-conversion') {
+    return result.processingMethod === '视频直接转换' &&
+      typeof result.durationMs === 'number' &&
+      typeof result.frameWidth === 'number' &&
+      typeof result.frameHeight === 'number' &&
+      typeof result.sourceFps === 'number' &&
+      typeof result.samplingFps === 'number' &&
+      result.priceMudPoints === 0
+      ? (result as EditorCharacterAnimationResult)
+      : undefined;
+  }
+  // 旧项目在判别字段引入前只持久化 AI 结果；按原契约恢复并补上判别字段。
+  if (
+    (result.resultType === undefined || result.resultType === 'ai') &&
+    result.model === 'seedance2.0-fast' &&
+    typeof result.prompt === 'string' &&
+    typeof result.previewVideoPath === 'string' &&
+    typeof result.durationSeconds === 'number' &&
+    typeof result.fps === 'number'
+  ) {
+    return { ...result, resultType: 'ai' } as EditorCharacterAnimationResult;
+  }
+  return undefined;
 }
 
 function hydrateImageSequenceFrames(
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 3d0602a4e..71b3671fd 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -221,6 +221,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     onPerfectPixel: vi.fn(),
     onSplitIconSpritesheet: vi.fn(),
     onSplitCharacterAnimation: vi.fn(),
+    onRemoveCharacterAnimationBackground: vi.fn(),
     onExtractUiDesignAssets: vi.fn(),
     onUiAssetExtractionToolChange: vi.fn(),
     onUiAssetExtractionModelChange: vi.fn(),
@@ -234,7 +235,6 @@ function createStageProps(): ImageCanvasStageViewProps {
     onQuickEditSelectionPointerStart: vi.fn(),
     onQuickEditSelectionPointerMove: vi.fn(),
     onQuickEditSelectionPointerEnd: vi.fn(),
-    onOpenCharacterAnimationPanel: vi.fn(),
     onDownloadLayer: vi.fn(),
     onPasteCanvasClipboard: vi.fn(),
     onCopyContextLayers: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 92bbb03e0..be70fb385 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -8,7 +8,7 @@ import type {
   EditorAssetSnapshot,
   EditorCharacterAnimationBackgroundColor,
   EditorCharacterAnimationFrameCount,
-  EditorCharacterAnimationGenerationResult,
+  EditorCharacterAnimationResult,
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
   EditorImageGenerationStyle,
@@ -90,6 +90,8 @@ export type CanvasGenerationAction =
   | 'audio.sound-effect.generate'
   | 'audio.background-music.generate'
   | 'character-animation.generate'
+  | 'character-animation.convert'
+  | 'character-animation.remove-background'
   | 'image.edit'
   | 'ui-design.extract-assets'
   | 'image.perfect-pixel'
@@ -219,6 +221,8 @@ export type CharacterReferenceImage = {
   label: string;
   src: string;
   mediaType?: CanvasMediaType;
+  /** 参考来源的画布资产类型；用于区分序列帧底层视频与独立源视频。 */
+  assetKind?: CanvasAssetKind | null;
   mimeType?: string;
   sizeBytes?: number;
   durationSeconds?: number;
@@ -279,11 +283,9 @@ export type GenerateDialogState = {
   generationReferences?: CharacterReferenceImage[];
   characterSpecReference?: CharacterReferenceImage | null;
   characterReferences?: CharacterReferenceImage[];
-  // 中文注释：角色面板的"多方向角色图"开关——开启时生成一张四方向角色图集
+  // 中文注释：角色面板的"多方向角色图"开关——开启时生成一张八方向角色图集
   // （后端 kind=character-sheet，产物按 icon-spritesheet 落库，可走既有拆分图集）。
   characterSheetEnabled?: boolean;
-  // 中文注释：多方向角色图的视角数（4 或 8），仅 characterSheetEnabled 时生效。
-  characterSheetViewSet?: '4' | '8';
   iconSpecReference?: CharacterReferenceImage | null;
   iconDescriptions?: string[];
   publicationWorkflowId?: PublicationMaterialsWorkflowId;
@@ -306,7 +308,11 @@ export type GenerateDialogState = {
   characterAnimationFrameCount?: EditorCharacterAnimationFrameCount;
   characterAnimationDurationSeconds?: 4 | 5 | 6;
   characterAnimationBackgroundColor?: EditorCharacterAnimationBackgroundColor;
-  characterAnimationResult?: EditorCharacterAnimationGenerationResult;
+  characterAnimationWorkflow?: 'ai' | 'video-conversion';
+  characterAnimationAppearanceReferences?: CharacterReferenceImage[];
+  characterAnimationConversionVideoReference?: CharacterReferenceImage | null;
+  characterAnimationConversionResolution?: EditorCharacterAnimationResolution;
+  characterAnimationResult?: EditorCharacterAnimationResult;
   soundModel?: EditorSoundEffectModel | 'audio1.0';
   soundDurationMode?: EditorSoundEffectDurationMode;
   soundDurationSeconds?: number;
@@ -501,6 +507,10 @@ export type CropExpandResizeHandle =
 export type CharacterAnimationPanelState = {
   sourceLayerId?: string;
   references?: CharacterReferenceImage[];
+  workflow?: 'ai' | 'video-conversion';
+  appearanceReferences?: CharacterReferenceImage[];
+  conversionVideoReference?: CharacterReferenceImage | null;
+  conversionResolution?: EditorCharacterAnimationResolution;
   promptText: string;
   assetLabel?: string;
   backgroundColor?: EditorCharacterAnimationBackgroundColor;
@@ -510,7 +520,7 @@ export type CharacterAnimationPanelState = {
   durationSeconds: 4 | 5 | 6;
   status: 'idle' | 'generating' | 'completed' | 'failed';
   errorMessage?: string;
-  result?: EditorCharacterAnimationGenerationResult;
+  result?: EditorCharacterAnimationResult;
 };
 
 export type UploadTarget =
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index aa4403734..86d610b7f 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -236,7 +236,8 @@ function findSourceAnimationLayer(
   return (
     layers.find(
       (layer) =>
-        (layer.resourceId === sourceResourceId || layer.id === sourceResourceId) &&
+        (layer.resourceId === sourceResourceId ||
+          layer.id === sourceResourceId) &&
         layer.assetKind === 'character',
     ) ?? null
   );
@@ -1431,6 +1432,9 @@ export function ImageCanvasEditorView({
     pendingImageReferenceUploadCount;
   const generationSurface = useImageCanvasGenerationSurface({
     layers,
+    selectedLayer: selectedLayerId
+      ? (layers.find((layer) => layer.id === selectedLayerId) ?? null)
+      : null,
     canvasSize,
     viewport,
     setViewport,
@@ -1603,6 +1607,8 @@ export function ImageCanvasEditorView({
     splittingIconSpritesheetLayerIds,
     splitSelectedCharacterAnimationFrames,
     splittingCharacterAnimationLayerIds,
+    removeSelectedCharacterAnimationBackground,
+    removingBackgroundCharacterAnimationLayerIds,
     extractUiDesignAssets,
     pickCharacterSpecFromLayer,
     pickGenerationReferenceFromLayer,
@@ -2598,6 +2604,7 @@ export function ImageCanvasEditorView({
     pendingPerfectPixelLayerIds,
     splittingIconSpritesheetLayerIds,
     splittingCharacterAnimationLayerIds,
+    removingBackgroundCharacterAnimationLayerIds,
     uploadDropTarget,
     contextMenu,
     canvasClipboard,
@@ -2664,6 +2671,11 @@ export function ImageCanvasEditorView({
         splitSelectedCharacterAnimationFrames(layer),
       );
     },
+    onRemoveCharacterAnimationBackground: (layer: CanvasLayer) => {
+      void flushProjectPersistence().then(() =>
+        removeSelectedCharacterAnimationBackground(layer),
+      );
+    },
     onExtractUiDesignAssets: extractUiDesignAssets,
     onUiAssetExtractionToolChange: changeUiAssetExtractionTool,
     onUiAssetExtractionModelChange: changeUiAssetExtractionModel,
@@ -2679,7 +2691,6 @@ export function ImageCanvasEditorView({
     onQuickEditSelectionPointerStart: startQuickEditSelectionPointer,
     onQuickEditSelectionPointerMove: moveQuickEditSelectionPointer,
     onQuickEditSelectionPointerEnd: endQuickEditSelectionPointer,
-    onOpenCharacterAnimationPanel: openCharacterAnimationPanel,
     onDownloadLayer: exportLayerImage,
     onPasteCanvasClipboard: pasteCanvasOrSystemClipboard,
     onCopyContextLayers: copyContextLayers,
diff --git a/src/components/image-editor/ImageCanvasExportModel.ts b/src/components/image-editor/ImageCanvasExportModel.ts
index 020bb627f..c9e350877 100644
--- a/src/components/image-editor/ImageCanvasExportModel.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.ts
@@ -456,7 +456,7 @@ export function buildSpineImageSequenceJson({
     skeleton: {
       spine: DEFAULT_SPINE_VERSION,
       images: './frames/',
-      fps: Math.max(1, Math.round(frames.length / durationSeconds)),
+      fps: Number((frames.length / durationSeconds).toFixed(6)),
       width: skeletonWidth,
       height: skeletonHeight,
     },
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 68b1bec1a..1a20c5d40 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -2119,6 +2119,190 @@ describe('ImageCanvasGenerationComposerView', () => {
     ).toBeTruthy();
   });
 
+  it('AI 视频从画布选中外观图后展示已选参考并支持移除', () => {
+    renderComposer({
+      id: 'dialog-character-animation-video-appearance',
+      mode: 'character-animation',
+      prompt: '原地奔跑',
+      status: 'idle',
+      composerOpen: true,
+      generationReferences: [
+        {
+          id: 'motion-video',
+          label: '动作视频',
+          src: 'generated/motion.mp4',
+          mediaType: 'video',
+        },
+      ],
+      characterAnimationAppearanceReferences: [
+        {
+          id: 'appearance-image',
+          label: '骑士角色',
+          src: 'generated/knight.png',
+          mediaType: 'image',
+        },
+      ],
+      characterAnimationWorkflow: 'ai',
+    });
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    expect(within(panel).getByText('骑士角色')).toBeTruthy();
+    expect(
+      within(panel).getByRole('button', { name: '删除骑士角色' }),
+    ).toBeTruthy();
+  });
+
+  it('删除动作视频后清空动作并保留外观图片参考', () => {
+    const dialog: GenerateDialogState = {
+      id: 'dialog-character-animation-video-remove-motion',
+      mode: 'character-animation',
+      prompt: '原地奔跑',
+      status: 'idle',
+      composerOpen: true,
+      generationReferences: [
+        {
+          id: 'motion-video',
+          label: '动作视频',
+          src: 'generated/motion.mp4',
+          mediaType: 'video',
+        },
+      ],
+      characterAnimationAppearanceReferences: [
+        {
+          id: 'appearance-image',
+          label: '骑士角色',
+          src: 'generated/knight.png',
+          mediaType: 'image',
+        },
+      ],
+      characterAnimationWorkflow: 'ai',
+    };
+    const setGenerateDialog = vi.fn();
+    renderComposer(dialog, { setGenerateDialog });
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '删除动作视频' }),
+    );
+
+    const updater = setGenerateDialog.mock.calls[0]?.[0] as (
+      currentDialog: GenerateDialogState | null,
+    ) => GenerateDialogState | null;
+    const nextDialog = updater(dialog);
+    expect(nextDialog?.generationReferences).toEqual([]);
+    expect(nextDialog?.characterAnimationAppearanceReferences).toEqual([
+      expect.objectContaining({ id: 'appearance-image', mediaType: 'image' }),
+    ]);
+  });
+
+  it('视频直接转换标签不展示 AI 外观图草稿', () => {
+    renderComposer({
+      id: 'dialog-character-animation-conversion-hidden-appearance',
+      mode: 'character-animation',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      characterAnimationWorkflow: 'video-conversion',
+      characterAnimationConversionVideoReference: {
+        id: 'conversion-video',
+        label: '源视频',
+        src: 'generated/source.mp4',
+        mediaType: 'video',
+      },
+      generationReferences: [
+        {
+          id: 'motion-video',
+          label: '动作视频',
+          src: 'generated/motion.mp4',
+          mediaType: 'video',
+        },
+      ],
+      characterAnimationAppearanceReferences: [
+        {
+          id: 'appearance-image',
+          label: '骑士角色',
+          src: 'generated/knight.png',
+          mediaType: 'image',
+        },
+      ],
+    });
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    expect(within(panel).queryByText('骑士角色')).toBeNull();
+    expect(within(panel).getAllByText('源视频')).toHaveLength(2);
+    expect(
+      within(panel).getByRole('button', { name: '删除源视频' }),
+    ).toBeTruthy();
+  });
+
+  it('视频作为 AI 参考时不展示角色外观占位符，但仍保留统一参考入口', () => {
+    renderComposer({
+      id: 'dialog-character-animation-video-reference',
+      mode: 'character-animation',
+      prompt: '原地奔跑',
+      status: 'idle',
+      composerOpen: true,
+      generationReferences: [
+        {
+          id: 'motion-video',
+          label: '动作视频',
+          src: 'generated/motion.mp4',
+          mediaType: 'video',
+        },
+      ],
+      characterAnimationWorkflow: 'ai',
+    });
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    expect(within(panel).queryByText('角色外观')).toBeNull();
+    expect(
+      within(panel).getByRole('button', { name: '添加序列帧参考素材' }),
+    ).toBeTruthy();
+  });
+
+  it('defaults to AI workflow and keeps independent drafts while switching tabs', () => {
+    render(<CharacterAnimationParametersHarness backgroundColor="green" />);
+
+    const panel = screen.getByRole('dialog', {
+      name: 'Spine序列帧动画生成',
+    });
+    const aiTab = within(panel).getByRole('tab', { name: 'AI生成/改造' });
+    const conversionTab = within(panel).getByRole('tab', {
+      name: '视频直接转换',
+    });
+    expect(aiTab.getAttribute('aria-selected')).toBe('true');
+    expect(
+      within(panel).getByRole('textbox', { name: '动画描述' }).textContent,
+    ).toBe('原地奔跑');
+
+    fireEvent.click(conversionTab);
+    expect(conversionTab.getAttribute('aria-selected')).toBe('true');
+    expect(
+      within(panel).queryByRole('textbox', { name: '动画描述' }),
+    ).toBeNull();
+    expect(within(panel).getByText('免费转换')).toBeTruthy();
+    expect(
+      (
+        within(panel).getByRole('button', {
+          name: '免费转换为Spine序列帧动画',
+        }) as HTMLButtonElement
+      ).disabled,
+    ).toBe(true);
+
+    fireEvent.click(aiTab);
+    expect(
+      within(panel).getByRole('textbox', { name: '动画描述' }).textContent,
+    ).toBe('原地奔跑');
+  });
+
   it('序列帧背景、比例、帧数时长和清晰度可独立选中并保留其他参数', () => {
     render(<CharacterAnimationParametersHarness backgroundColor="green" />);
 
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index b6a07d5dd..c9a848bd5 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -417,6 +417,9 @@ function ImageCanvasSequenceAnimationComposerView({
   const pendingActionFocusIndexRef = useRef<number | null>(null);
   const pendingActionFocusTargetRef = useRef<HTMLButtonElement | null>(null);
   const reference = dialog.generationReferences?.[0];
+  const workflow = dialog.characterAnimationWorkflow ?? 'ai';
+  const conversionReference =
+    dialog.characterAnimationConversionVideoReference ?? null;
   const isGenerating = dialog.status === 'generating';
   const resolution = dialog.characterAnimationResolution ?? '480p';
   const ratio = dialog.characterAnimationRatio ?? '1:1';
@@ -480,179 +483,316 @@ function ImageCanvasSequenceAnimationComposerView({
         aria-label="Spine序列帧动画生成"
         onPointerDown={(event) => event.stopPropagation()}
       >
-        <div className="image-canvas-editor__reference-strip">
-          {reference ? (
-            <VideoReferenceChip
-              reference={reference}
-              index={0}
-              onRemove={() => {
-                // 仅当比例是“同图尺寸”时才回落到 1:1；用户显式选过 4:3/16:9 等
-                // 比例时移除参考应保留原选择。
-                const isSameRatio = dialog.characterAnimationRatio === 'same';
-                updateDialog({
-                  sourceLayerId: undefined,
-                  generationReferences: [],
-                  ...(isSameRatio ? { characterAnimationRatio: '1:1' } : {}),
-                });
-              }}
-            />
-          ) : null}
-          <ImageCanvasReferenceSlot
-            buttonRef={generationReferenceButtonRef}
-            tone="character"
-            icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-            label="参考"
-            ariaLabel="添加序列帧参考素材"
-            disabled={isGenerating}
-            isAdd
-            onClick={() => {
-              closeParameterMenu();
-              setIsGenerationReferenceMenuOpen((open) => !open);
-            }}
-          />
-        </div>
-        <AutoGrowTextArea
-          aria-label="动画描述"
-          value={dialog.prompt}
-          maxLength={4000}
-          disabled={isGenerating}
-          placeholder="请描述人物、朝向、做什么、如何做。比如：让人物朝侧面原地不断快速奔跑。"
-          className="max-h-64 image-canvas-editor__generation-prompt image-canvas-editor__character-animation-textarea"
-          onValueChange={(prompt) => updateDialog({ prompt })}
-        />
         <div
-          className="image-canvas-editor__character-animation-backgrounds"
-          role="group"
-          aria-label="背景颜色"
+          role="tablist"
+          aria-label="序列帧处理方式"
+          className="image-canvas-editor__workflow-tabs"
         >
-          {CHARACTER_ANIMATION_BACKGROUND_OPTIONS.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              className={`image-canvas-editor__character-animation-color-button image-canvas-editor__character-animation-color-button--${option.value}`}
-              aria-label={`背景颜色 ${option.label}`}
-              aria-pressed={backgroundColor === option.value}
-              disabled={isGenerating}
-              onClick={() =>
-                updateDialog({
-                  characterAnimationBackgroundColor: option.value,
-                })
-              }
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-        <div
-          className="image-canvas-editor__character-animation-presets"
-          aria-label="动作预设"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: `repeat(${CHARACTER_ANIMATION_ACTIONS_PER_ROW}, minmax(0, 1fr))`,
-          }}
-        >
-          {CHARACTER_ANIMATION_ACTION_PROMPTS.map((preset) => (
-            <button
-              key={preset.label}
-              type="button"
-              className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
-              disabled={isGenerating}
-              onClick={() => applyActionPrompt(preset.label, preset.text)}
-            >
-              {preset.label}
-            </button>
-          ))}
-          {visibleMoreActions.map((label, index) => (
-            <button
-              key={label}
-              ref={(button) => {
-                if (index === pendingActionFocusIndexRef.current) {
-                  pendingActionFocusTargetRef.current = button;
-                }
-              }}
-              type="button"
-              className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
-              disabled={isGenerating}
-              onClick={() => applyActionPrompt(label)}
-            >
-              {label}
-            </button>
-          ))}
           <button
             type="button"
-            className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+            role="tab"
+            className="image-canvas-editor__workflow-tab"
+            aria-selected={workflow === 'ai'}
             disabled={isGenerating}
-            aria-expanded={hasExpandedActions}
-            onClick={() => {
-              const nextCount = hasExpandedAllActions
-                ? 0
-                : Math.min(
-                    visibleMoreActionCount +
-                      CHARACTER_ANIMATION_ACTIONS_PER_ROW,
-                    CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length,
-                  );
-              pendingActionFocusIndexRef.current = hasExpandedAllActions
-                ? null
-                : visibleMoreActionCount;
-              setVisibleMoreActionCount(nextCount);
-              setActionPresetAnnouncement(
-                nextCount === 0
-                  ? '更多动作已收起'
-                  : nextCount >= CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length
-                    ? `已显示全部${nextCount}个更多动作`
-                    : `已显示${nextCount}个更多动作`,
-              );
-            }}
+            onClick={() => updateDialog({ characterAnimationWorkflow: 'ai' })}
           >
-            {hasExpandedAllActions ? '收起' : '更多'}
+            AI生成/改造
           </button>
-          <span
-            className="sr-only"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            {actionPresetAnnouncement}
-          </span>
-        </div>
-        <div className="image-canvas-editor__character-animation-footer">
-          <PlatformInlineOptionButton
-            ref={parameterMenuButtonRef}
-            className="image-canvas-editor__character-animation-parameter-trigger"
-            aria-label={`序列帧参数 ${ratio === 'same' ? '同图尺寸' : ratio} · ${durationSeconds}秒 · ${resolution}`}
-            aria-expanded={isParameterMenuOpen}
-            disabled={isGenerating}
-            trailingIcon={<ChevronDown className="h-3 w-3" />}
-            onClick={() => {
-              setIsGenerationReferenceMenuOpen(false);
-              setIsParameterMenuOpen((open) => !open);
-            }}
-          >
-            {ratio === 'same' ? '同图尺寸' : ratio} · {durationSeconds}秒 ·{' '}
-            {resolution}
-          </PlatformInlineOptionButton>
-          <PlatformActionButton
-            className="image-canvas-editor__character-animation-submit"
+          <button
             type="button"
-            tone="secondary"
-            size="xs"
-            shape="pill"
-            disabled={isGenerating || !dialog.prompt.trim()}
-            aria-label="生成Spine序列帧动画"
-            onClick={() => {
-              if (!isGenerating) {
-                onSubmit();
-              }
-            }}
+            role="tab"
+            className="image-canvas-editor__workflow-tab"
+            aria-selected={workflow === 'video-conversion'}
+            disabled={isGenerating}
+            onClick={() =>
+              updateDialog({ characterAnimationWorkflow: 'video-conversion' })
+            }
           >
-            {isGenerating ? '生成中' : `生成${price}泥点`}
-          </PlatformActionButton>
+            视频直接转换
+          </button>
         </div>
-        {dialog.status === 'failed' ? (
-          <PlatformStatusMessage tone="error" surface="platform" size="xs">
-            {dialog.errorMessage ?? '生成Spine序列帧动画失败'}
-          </PlatformStatusMessage>
-        ) : null}
+        {workflow === 'video-conversion' ? (
+          <>
+            <div className="image-canvas-editor__reference-strip">
+              {conversionReference ? (
+                <VideoReferenceChip
+                  reference={conversionReference}
+                  index={0}
+                  onRemove={() =>
+                    updateDialog({
+                      characterAnimationConversionVideoReference: null,
+                    })
+                  }
+                />
+              ) : null}
+              <ImageCanvasReferenceSlot
+                buttonRef={generationReferenceButtonRef}
+                tone="character"
+                icon={<Film className="h-4 w-4" aria-hidden="true" />}
+                label="源视频"
+                ariaLabel="选择直接转换源视频"
+                disabled={isGenerating}
+                isAdd
+                onClick={() => {
+                  closeParameterMenu();
+                  setIsGenerationReferenceMenuOpen((open) => !open);
+                }}
+              />
+            </div>
+            <div className="image-canvas-editor__character-animation-conversion-resolution-field">
+              <span className="image-canvas-editor__character-animation-menu-title">
+                清晰度
+              </span>
+              <div
+                className="image-canvas-editor__character-animation-menu-options"
+                role="group"
+                aria-label="直接转换清晰度"
+              >
+                {CHARACTER_ANIMATION_RESOLUTION_OPTIONS.map((value) => (
+                  <button
+                    key={value}
+                    type="button"
+                    className="image-canvas-editor__character-animation-menu-pill"
+                    aria-pressed={
+                      (dialog.characterAnimationConversionResolution ??
+                        '480p') === value
+                    }
+                    disabled={isGenerating}
+                    onClick={() =>
+                      updateDialog({
+                        characterAnimationConversionResolution: value,
+                      })
+                    }
+                  >
+                    {value}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <PlatformActionButton
+              className="image-canvas-editor__character-animation-submit"
+              type="button"
+              tone="secondary"
+              size="xs"
+              shape="pill"
+              disabled={isGenerating || !conversionReference}
+              aria-label="免费转换为Spine序列帧动画"
+              onClick={() => !isGenerating && onSubmit()}
+            >
+              {isGenerating ? '转换中' : '免费转换'}
+            </PlatformActionButton>
+          </>
+        ) : (
+          <>
+            <div className="image-canvas-editor__reference-strip">
+              {reference ? (
+                <VideoReferenceChip
+                  reference={reference}
+                  index={0}
+                  onRemove={() => {
+                    // 仅当比例是“同图尺寸”时才回落到 1:1；用户显式选过 4:3/16:9 等
+                    // 比例时移除参考应保留原选择。
+                    const isSameRatio =
+                      dialog.characterAnimationRatio === 'same';
+                    updateDialog({
+                      sourceLayerId: undefined,
+                      generationReferences: [],
+                      ...(isSameRatio
+                        ? { characterAnimationRatio: '1:1' }
+                        : {}),
+                    });
+                  }}
+                />
+              ) : null}
+              {reference?.mediaType === 'video'
+                ? (dialog.characterAnimationAppearanceReferences ?? []).map(
+                    (appearanceReference, index) => (
+                      <VideoReferenceChip
+                        key={appearanceReference.id}
+                        reference={appearanceReference}
+                        index={index + 1}
+                        onRemove={() =>
+                          updateDialog({
+                            characterAnimationAppearanceReferences: (
+                              dialog.characterAnimationAppearanceReferences ?? []
+                            ).filter(
+                              (item) => item.id !== appearanceReference.id,
+                            ),
+                          })
+                        }
+                      />
+                    ),
+                  )
+                : null}
+              <ImageCanvasReferenceSlot
+                buttonRef={generationReferenceButtonRef}
+                tone="character"
+                icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+                label="参考"
+                ariaLabel="添加序列帧参考素材"
+                disabled={isGenerating}
+                isAdd
+                onClick={() => {
+                  closeParameterMenu();
+                  setIsGenerationReferenceMenuOpen((open) => !open);
+                }}
+              />
+            </div>
+            <AutoGrowTextArea
+              aria-label="动画描述"
+              value={dialog.prompt}
+              maxLength={4000}
+              disabled={isGenerating}
+              placeholder="请描述人物、朝向、做什么、如何做。比如：让人物朝侧面原地不断快速奔跑。"
+              className="max-h-64 image-canvas-editor__generation-prompt image-canvas-editor__character-animation-textarea"
+              onValueChange={(prompt) => updateDialog({ prompt })}
+            />
+            <div className="image-canvas-editor__character-animation-background-field">
+              <span className="image-canvas-editor__character-animation-menu-title">
+                背景色
+              </span>
+              <div
+                className="image-canvas-editor__character-animation-backgrounds"
+                role="group"
+                aria-label="背景颜色"
+              >
+                {CHARACTER_ANIMATION_BACKGROUND_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    className={`image-canvas-editor__character-animation-color-button image-canvas-editor__character-animation-color-button--${option.value}`}
+                    aria-label={`背景颜色 ${option.label}`}
+                    aria-pressed={backgroundColor === option.value}
+                    disabled={isGenerating}
+                    onClick={() =>
+                      updateDialog({
+                        characterAnimationBackgroundColor: option.value,
+                      })
+                    }
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="image-canvas-editor__character-animation-presets-field">
+              <span className="image-canvas-editor__character-animation-menu-title">
+                动作
+              </span>
+              <div
+                className="image-canvas-editor__character-animation-presets"
+                aria-label="动作预设"
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(${CHARACTER_ANIMATION_ACTIONS_PER_ROW}, minmax(0, 1fr))`,
+                }}
+              >
+                {CHARACTER_ANIMATION_ACTION_PROMPTS.map((preset) => (
+                  <button
+                    key={preset.label}
+                    type="button"
+                    className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+                    disabled={isGenerating}
+                    onClick={() => applyActionPrompt(preset.label, preset.text)}
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+                {visibleMoreActions.map((label, index) => (
+                  <button
+                    key={label}
+                    ref={(button) => {
+                      if (index === pendingActionFocusIndexRef.current) {
+                        pendingActionFocusTargetRef.current = button;
+                      }
+                    }}
+                    type="button"
+                    className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+                    disabled={isGenerating}
+                    onClick={() => applyActionPrompt(label)}
+                  >
+                    {label}
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  className="image-canvas-editor__character-animation-preset image-canvas-editor__character-animation-preset--action"
+                  disabled={isGenerating}
+                  aria-expanded={hasExpandedActions}
+                  onClick={() => {
+                    const nextCount = hasExpandedAllActions
+                      ? 0
+                      : Math.min(
+                          visibleMoreActionCount +
+                            CHARACTER_ANIMATION_ACTIONS_PER_ROW,
+                          CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length,
+                        );
+                    pendingActionFocusIndexRef.current = hasExpandedAllActions
+                      ? null
+                      : visibleMoreActionCount;
+                    setVisibleMoreActionCount(nextCount);
+                    setActionPresetAnnouncement(
+                      nextCount === 0
+                        ? '更多动作已收起'
+                        : nextCount >=
+                            CHARACTER_ANIMATION_MORE_ACTION_PROMPTS.length
+                          ? `已显示全部${nextCount}个更多动作`
+                          : `已显示${nextCount}个更多动作`,
+                    );
+                  }}
+                >
+                  {hasExpandedAllActions ? '收起' : '更多'}
+                </button>
+                <span
+                  className="sr-only"
+                  role="status"
+                  aria-live="polite"
+                  aria-atomic="true"
+                >
+                  {actionPresetAnnouncement}
+                </span>
+              </div>
+            </div>
+            <div className="image-canvas-editor__character-animation-footer">
+              <PlatformInlineOptionButton
+                ref={parameterMenuButtonRef}
+                className="image-canvas-editor__character-animation-parameter-trigger"
+                aria-label={`序列帧参数 ${ratio === 'same' ? '同图尺寸' : ratio} · ${durationSeconds}秒 · ${resolution}`}
+                aria-expanded={isParameterMenuOpen}
+                disabled={isGenerating}
+                trailingIcon={<ChevronDown className="h-3 w-3" />}
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsParameterMenuOpen((open) => !open);
+                }}
+              >
+                {ratio === 'same' ? '同图尺寸' : ratio} · {durationSeconds}秒 ·{' '}
+                {resolution}
+              </PlatformInlineOptionButton>
+              <PlatformActionButton
+                className="image-canvas-editor__character-animation-submit"
+                type="button"
+                tone="secondary"
+                size="xs"
+                shape="pill"
+                disabled={isGenerating || (!dialog.prompt.trim() && !reference)}
+                aria-label="生成Spine序列帧动画"
+                onClick={() => {
+                  if (!isGenerating) {
+                    onSubmit();
+                  }
+                }}
+              >
+                {isGenerating ? '生成中' : `生成${price}泥点`}
+              </PlatformActionButton>
+            </div>
+            {dialog.status === 'failed' ? (
+              <PlatformStatusMessage tone="error" surface="platform" size="xs">
+                {dialog.errorMessage ?? '生成Spine序列帧动画失败'}
+              </PlatformStatusMessage>
+            ) : null}
+          </>
+        )}
       </div>
       {isParameterMenuOpen
         ? renderEditorPortal(
@@ -781,24 +921,29 @@ function ImageCanvasSequenceAnimationComposerView({
               >
                 从画布中选择
               </PlatformFloatingMenuItem>
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsGenerationReferenceMenuOpen(false);
-                  setIsPickingGenerationReferenceFromCanvas(false);
-                  onRequestUpload('video-reference-image');
-                }}
-              >
-                上传图片
-              </PlatformFloatingMenuItem>
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsGenerationReferenceMenuOpen(false);
-                  setIsPickingGenerationReferenceFromCanvas(false);
-                  onRequestUpload('video-reference-video');
-                }}
-              >
-                上传视频
-              </PlatformFloatingMenuItem>
+              {workflow !== 'video-conversion' ? (
+                <PlatformFloatingMenuItem
+                  onClick={() => {
+                    setIsGenerationReferenceMenuOpen(false);
+                    setIsPickingGenerationReferenceFromCanvas(false);
+                    onRequestUpload('video-reference-image');
+                  }}
+                >
+                  上传图片
+                </PlatformFloatingMenuItem>
+              ) : null}
+              {workflow === 'video-conversion' ||
+              reference?.mediaType !== 'video' ? (
+                <PlatformFloatingMenuItem
+                  onClick={() => {
+                    setIsGenerationReferenceMenuOpen(false);
+                    setIsPickingGenerationReferenceFromCanvas(false);
+                    onRequestUpload('video-reference-video');
+                  }}
+                >
+                  上传视频
+                </PlatformFloatingMenuItem>
+              ) : null}
             </PlatformFloatingMenu>,
           )
         : null}
@@ -2224,7 +2369,11 @@ export function ImageCanvasGenerationComposerView({
       {isPickingGenerationReferenceFromCanvas ? (
         <div className="image-canvas-editor__canvas-pick-hint">
           {generateDialog?.mode === 'character-animation'
-            ? '请选择画布中的角色图或视频作为参考，按 Esc 退出'
+            ? generateDialog.characterAnimationWorkflow === 'video-conversion'
+              ? '请选择画布中的视频作为源视频，按 Esc 退出'
+              : generateDialog.generationReferences?.[0]?.mediaType === 'video'
+                ? '请选择画布中的图片作为外观参考，按 Esc 退出'
+                : '请选择画布中的角色图或视频作为参考，按 Esc 退出'
             : '请选择画布中的图片作为参考图，按 Esc 退出'}
         </div>
       ) : null}
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 962021fab..ad3a9f28e 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -1242,7 +1242,6 @@ describe('ImageCanvasGenerationDialogModel', () => {
             fields: [
               { id: 'prompt', title: '角色设定', value: '日系魔法少女' },
               { id: 'model', title: '模型', value: 'nanobanana2' },
-              { id: 'viewSet', title: '视角集合', value: '八视图' },
               { id: 'aspectRatio', title: '比例', value: '1:1' },
               { id: 'imageSize', title: '尺寸', value: '1K' },
             ],
@@ -1259,7 +1258,6 @@ describe('ImageCanvasGenerationDialogModel', () => {
       sourceLayerId: 'layer-sheet-result',
       style: 'none',
       characterSheetEnabled: true,
-      characterSheetViewSet: '8',
     });
   });
 
@@ -1484,6 +1482,136 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('restores video AI motion and appearance from named reference slots', () => {
+    const motionLayer = createLayer({
+      id: 'layer-motion',
+      resourceId: 'resource-motion',
+      title: '奔跑动作',
+      mediaType: 'video',
+      assetKind: 'video',
+      src: '/media/motion.mp4',
+    });
+    const appearanceLayer = createLayer({
+      id: 'layer-appearance',
+      resourceId: 'resource-appearance',
+      title: '骑士外观',
+      assetKind: 'character',
+      src: '/images/appearance.png',
+    });
+    const draft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        id: 'layer-animation-result',
+        sourceType: 'generated',
+        assetKind: 'character-animation',
+        generationInputs: {
+          version: 2,
+          action: 'character-animation.generate',
+          fields: [
+            { id: 'inputMode', title: '输入模式', value: 'video' },
+            { id: 'prompt', title: '动作描述', value: '复刻奔跑节奏' },
+            {
+              id: 'referenceSrc',
+              title: '参考素材',
+              value: 'users/user-1/motion.mp4',
+            },
+            {
+              id: 'referenceMediaType',
+              title: '参考类型',
+              value: 'video',
+            },
+            {
+              id: 'appearanceReferenceSrc',
+              title: '角色外观',
+              value: 'users/user-1/appearance.png',
+            },
+          ],
+          references: [
+            {
+              id: 'motion',
+              title: '动作视频',
+              refType: 'project-resource',
+              refId: 'resource-motion',
+            },
+            {
+              id: 'appearance',
+              title: '角色外观',
+              refType: 'project-resource',
+              refId: 'resource-appearance',
+            },
+          ],
+        },
+      }),
+      canvasSize: { width: 960, height: 720 },
+      viewport: { x: 0, y: 0, scale: 1 },
+      mode: 'redraw',
+      availableLayers: [motionLayer, appearanceLayer],
+    });
+
+    expect(draft).toMatchObject({
+      mode: 'character-animation',
+      characterAnimationWorkflow: 'ai',
+      generationReferences: [
+        expect.objectContaining({
+          resourceId: 'resource-motion',
+          mediaType: 'video',
+        }),
+      ],
+      characterAnimationAppearanceReferences: [
+        expect.objectContaining({
+          resourceId: 'resource-appearance',
+          label: '骑士外观',
+        }),
+      ],
+    });
+  });
+
+  it('restores video conversion results to the conversion workflow', () => {
+    const draft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        id: 'layer-converted-animation',
+        sourceType: 'generated',
+        assetKind: 'character-animation',
+        generationInputs: {
+          version: 2,
+          action: 'character-animation.convert',
+          fields: [
+            {
+              id: 'sourceVideoSrc',
+              title: '源视频',
+              value: 'users/user-1/source.mov',
+            },
+            { id: 'resolution', title: '最大长边', value: '720p' },
+          ],
+          references: [
+            {
+              id: 'source',
+              title: '源视频',
+              label: '源动作.mov',
+              refType: 'asset',
+              refId: 'asset-source-video',
+            },
+          ],
+        },
+      }),
+      canvasSize: { width: 960, height: 720 },
+      viewport: { x: 0, y: 0, scale: 1 },
+      mode: 'redraw',
+      availableLayers: [],
+    });
+
+    expect(draft).toMatchObject({
+      mode: 'character-animation',
+      characterAnimationWorkflow: 'video-conversion',
+      characterAnimationConversionResolution: '720p',
+      characterAnimationConversionVideoReference: {
+        label: '源动作.mov',
+        src: 'users/user-1/source.mov',
+        sourceAssetId: 'asset-source-video',
+        mediaType: 'video',
+      },
+    });
+  });
+
   it('does not restore a project resource id that is unavailable in the current canvas', () => {
     const draft = createSameSourceGenerationDialogDraft({
       sourceLayer: createLayer({
@@ -1875,6 +2003,40 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('allows an ordinary canvas image as appearance after a video motion reference', () => {
+    const dialog: GenerateDialogState = {
+      mode: 'character-animation',
+      prompt: '原地奔跑',
+      status: 'idle',
+      characterAnimationWorkflow: 'ai',
+      generationReferences: [
+        {
+          id: 'motion',
+          label: '动作视频',
+          src: 'generated/motion.mp4',
+          mediaType: 'video',
+        },
+      ],
+    };
+    const ordinaryImage = createLayer({
+      id: 'asset-image',
+      title: '素材1',
+      src: 'generated/asset-1.png',
+    });
+
+    expect(appendGenerationReference(dialog, ordinaryImage)).toMatchObject({
+      generationReferences: [
+        expect.objectContaining({ label: '动作视频', mediaType: 'video' }),
+      ],
+      characterAnimationAppearanceReferences: [
+        {
+          label: '素材1',
+          src: 'generated/asset-1.png',
+        },
+      ],
+    });
+  });
+
   it('caps image references before a sixth reference can enter submission state', () => {
     const existingReferences = Array.from({ length: 5 }, (_, index) => ({
       id: `reference-${index}`,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 51ef28256..51d484269 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -116,6 +116,12 @@ function getReferenceMediaType(layer: CanvasLayer) {
     : 'image';
 }
 
+function hasCharacterAnimationVideoReference(layer: CanvasLayer) {
+  return Boolean(
+    layer.assetKind === 'character-animation' && layer.previewVideoPath?.trim(),
+  );
+}
+
 export function isIconSpecReferenceLayer(layer: CanvasLayer) {
   if (layer.assetKind === 'icon-spec') {
     return true;
@@ -317,7 +323,6 @@ export function createCharacterGenerationDialogDraft({
     characterSpecReference: null,
     characterReferences: [],
     characterSheetEnabled: false,
-    characterSheetViewSet: '4',
     imageModel: normalizedImageModel,
     aspectRatio: dimensionDefaults.aspectRatio,
     imageSize: dimensionDefaults.imageSize,
@@ -861,6 +866,14 @@ function getNormalizedString(
   return typeof value === 'string' ? value : fallback;
 }
 
+function getNormalizedStringArray(sourceLayer: CanvasLayer, id: string) {
+  return (sourceLayer.generationInputs?.fields ?? [])
+    .filter((field) => field.id === id)
+    .flatMap((field) =>
+      typeof field.value === 'string' ? [field.value] : [],
+    );
+}
+
 function getNormalizedNumber(
   sourceLayer: CanvasLayer,
   id: string,
@@ -1064,7 +1077,7 @@ function createNormalizedGenerationDialogDraft({
   }
 
   if (inputs.action === 'character-sheet.generate') {
-    // 多方向角色图回弹到角色面板并恢复图集模式与视角数。
+    // 多方向角色图回弹到角色面板并恢复图集模式（固定八方向）。
     return placeDraftBesideSourceLayer(
       resizeGenerationPlaceholderToImageSelection({
         ...createCharacterGenerationDialogDraft({
@@ -1082,10 +1095,6 @@ function createNormalizedGenerationDialogDraft({
         aspectRatio: getNormalizedString(sourceLayer, 'aspectRatio', '1:1'),
         imageSize: getNormalizedString(sourceLayer, 'imageSize', '1K'),
         characterSheetEnabled: true,
-        characterSheetViewSet:
-          getNormalizedString(sourceLayer, 'viewSet') === '八视图'
-            ? '8'
-            : '4',
         characterSpecReference:
           resolveNormalizedReferences(
             sourceLayer,
@@ -1302,12 +1311,19 @@ function createNormalizedGenerationDialogDraft({
   }
 
   if (inputs.action === 'character-animation.generate') {
-    const canvasReferences = resolveNormalizedReferences(
-      sourceLayer,
-      'source',
-      availableLayers,
-    );
     const inputMode = getNormalizedString(sourceLayer, 'inputMode', 'image');
+    const primaryReferenceSlot = inputMode === 'video' ? 'motion' : 'source';
+    const canvasReferences = [
+      ...resolveNormalizedReferences(
+        sourceLayer,
+        primaryReferenceSlot,
+        availableLayers,
+      ),
+      // 新槽位上线前视频 AI 也使用 source；仅在 motion 缺失时兼容旧配方。
+      ...(inputMode === 'video' && primaryReferenceSlot === 'motion'
+        ? resolveNormalizedReferences(sourceLayer, 'source', availableLayers)
+        : []),
+    ];
     const storedReferenceSrc = getNormalizedString(
       sourceLayer,
       'referenceSrc',
@@ -1318,7 +1334,9 @@ function createNormalizedGenerationDialogDraft({
       inputMode === 'video' ? 'video' : 'image',
     );
     const storedReferenceInput = sourceLayer.generationInputs?.references.find(
-      (reference) => reference.id === 'source',
+      (reference) =>
+        reference.id === primaryReferenceSlot ||
+        (inputMode === 'video' && reference.id === 'source'),
     );
     const storedReferenceWidth = getNormalizedNumber(
       sourceLayer,
@@ -1337,7 +1355,7 @@ function createNormalizedGenerationDialogDraft({
             id: `restored-character-animation-reference:${sourceLayer.id}`,
             label:
               storedReferenceInput?.label ??
-              (storedReferenceMediaType === 'video' ? '参考视频' : '角色图片'),
+              (storedReferenceMediaType === 'video' ? '动作视频' : '角色图片'),
             src: storedReferenceSrc,
             objectKey: storedReferenceSrc,
             ...(storedReferenceInput?.refType === 'asset'
@@ -1355,6 +1373,33 @@ function createNormalizedGenerationDialogDraft({
                 : ('image' as const),
           }
         : undefined);
+    const appearanceCanvasReferences = resolveNormalizedReferences(
+      sourceLayer,
+      'appearance',
+      availableLayers,
+    );
+    const storedAppearanceSrcs = getNormalizedStringArray(
+      sourceLayer,
+      'appearanceReferenceSrc',
+    )
+      .map((src) => src.trim())
+      .filter((src) => src.length > 0);
+    const storedAppearanceInput = sourceLayer.generationInputs?.references.find(
+      (reference) => reference.id === 'appearance',
+    );
+    const restoredAppearanceReferences =
+      appearanceCanvasReferences.length > 0
+        ? appearanceCanvasReferences
+        : storedAppearanceSrcs.map((storedAppearanceSrc, index) => ({
+            id: `restored-character-animation-appearance:${sourceLayer.id}:${index}`,
+            label: storedAppearanceInput?.label ?? '参考图',
+            src: storedAppearanceSrc,
+            objectKey: storedAppearanceSrc,
+            mediaType: 'image' as const,
+            ...(storedAppearanceInput?.refType === 'asset'
+              ? { sourceAssetId: storedAppearanceInput.refId }
+              : {}),
+          }));
     const animationSource = restoredReference
       ? (availableLayers ?? []).find(
           (layer) =>
@@ -1373,7 +1418,11 @@ function createNormalizedGenerationDialogDraft({
     });
     // 帧数/时长必须匹配合法配对（32/4、40/5、48/6），否则 UI 会同时高亮
     // 冲突的选项而提交被后端拒绝。这里按合法配对校验，损坏数据回退到默认 32/4。
-    const restoredFrameCount = getNormalizedNumber(sourceLayer, 'frameCount', 32);
+    const restoredFrameCount = getNormalizedNumber(
+      sourceLayer,
+      'frameCount',
+      32,
+    );
     const restoredDurationSeconds = getNormalizedNumber(
       sourceLayer,
       'durationSeconds',
@@ -1395,6 +1444,10 @@ function createNormalizedGenerationDialogDraft({
             prompt,
             sourceLayerId: animationSource?.id,
             generationReferences: restoredReference ? [restoredReference] : [],
+            characterAnimationAppearanceReferences:
+              restoredAppearanceReferences.length
+                ? restoredAppearanceReferences
+                : undefined,
             characterAnimationBackgroundColor: (getNormalizedString(
               sourceLayer,
               'backgroundColor',
@@ -1410,14 +1463,68 @@ function createNormalizedGenerationDialogDraft({
               'ratio',
               animationSource ? 'same' : '1:1',
             ) as GenerateDialogState['characterAnimationRatio'],
-            characterAnimationFrameCount: pairedFrameCount as GenerateDialogState['characterAnimationFrameCount'],
-            characterAnimationDurationSeconds: pairedDurationSeconds as GenerateDialogState['characterAnimationDurationSeconds'],
+            characterAnimationFrameCount:
+              pairedFrameCount as GenerateDialogState['characterAnimationFrameCount'],
+            characterAnimationDurationSeconds:
+              pairedDurationSeconds as GenerateDialogState['characterAnimationDurationSeconds'],
           }),
           sourceLayer,
         )
       : null;
   }
 
+  if (inputs.action === 'character-animation.convert') {
+    const sourceReferences = resolveNormalizedReferences(
+      sourceLayer,
+      'source',
+      availableLayers,
+    );
+    const storedSource = getNormalizedString(
+      sourceLayer,
+      'sourceVideoSrc',
+    ).trim();
+    const storedReferenceInput = sourceLayer.generationInputs?.references.find(
+      (reference) => reference.id === 'source',
+    );
+    const restoredSource =
+      sourceReferences[0] ??
+      (storedSource
+        ? {
+            id: `restored-character-animation-conversion:${sourceLayer.id}`,
+            label: storedReferenceInput?.label ?? '源视频',
+            src: storedSource,
+            objectKey: storedSource,
+            mediaType: 'video' as const,
+            ...(storedReferenceInput?.refType === 'asset'
+              ? { sourceAssetId: storedReferenceInput.refId }
+              : {}),
+          }
+        : undefined);
+    if (!restoredSource) {
+      return null;
+    }
+    const draft = createCharacterAnimationGenerationDialogDraft({
+      canvasSize,
+      viewport,
+    });
+    return draft
+      ? placeDraftBesideSourceLayer(
+          {
+            ...draft,
+            sourceLayerId: undefined,
+            characterAnimationWorkflow: 'video-conversion',
+            characterAnimationConversionVideoReference: restoredSource,
+            characterAnimationConversionResolution: getNormalizedString(
+              sourceLayer,
+              'resolution',
+              '480p',
+            ) as GenerateDialogState['characterAnimationConversionResolution'],
+          },
+          sourceLayer,
+        )
+      : null;
+  }
+
   return null;
 }
 
@@ -2136,24 +2243,52 @@ export function createCharacterAnimationGenerationDialogDraft({
   canvasSize,
   viewport,
   layer,
+  workflow = 'ai',
 }: {
   canvasSize: CanvasSize;
   viewport: CanvasViewport;
   layer?: CanvasLayer;
+  workflow?: 'ai' | 'video-conversion';
 }): Omit<CanvasGenerationDialogState, 'id'> | null {
-  if (layer && layer.assetKind !== 'character') {
+  if (
+    layer &&
+    (workflow === 'video-conversion'
+      ? layer.mediaType !== 'video' &&
+        !(
+          layer.assetKind === 'character-animation' &&
+          Boolean(layer.previewVideoPath?.trim())
+        )
+      : layer.assetKind !== 'character')
+  ) {
     return null;
   }
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
   const draft: Omit<CanvasGenerationDialogState, 'id'> = {
     mode: 'character-animation',
     ...(layer ? { sourceLayerId: layer.id } : {}),
-    generationReferences: layer ? [createCanvasLayerReference(layer)] : [],
+    generationReferences:
+      layer && workflow === 'ai'
+        ? [
+            createCanvasLayerReference(layer, {
+              preferSequenceVideo: true,
+            }),
+          ]
+        : [],
+    ...(layer && workflow === 'video-conversion'
+      ? {
+          characterAnimationConversionVideoReference:
+            createCanvasLayerReference(layer, {
+              preferSequenceVideo: true,
+            }),
+        }
+      : {}),
     prompt: '',
     status: 'idle',
     composerOpen: true,
     characterAnimationResolution: '480p',
-    characterAnimationRatio: layer ? 'same' : '1:1',
+    characterAnimationWorkflow: workflow,
+    characterAnimationConversionResolution: '480p',
+    characterAnimationRatio: layer && workflow === 'ai' ? 'same' : '1:1',
     ...(layer ? {} : { characterAnimationBackgroundColor: 'green' as const }),
     characterAnimationFrameCount: 32,
     characterAnimationDurationSeconds: 4,
@@ -2220,18 +2355,42 @@ export function appendGenerationReference(
   }
   if (dialog?.mode === 'character-animation') {
     const mediaType = getReferenceMediaType(layer);
-    if (
-      mediaType === 'audio' ||
-      (mediaType === 'image' &&
-        layer.assetKind !== 'character' &&
-        layer.assetKind !== 'character-animation')
-    ) {
+    if (dialog.characterAnimationWorkflow === 'video-conversion') {
+      return mediaType === 'video' || hasCharacterAnimationVideoReference(layer)
+        ? {
+            ...resetFailedGenerationDialog(dialog),
+            sourceLayerId: layer.id,
+            characterAnimationConversionVideoReference:
+              createCanvasLayerReference(layer, {
+                preferSequenceVideo: true,
+              }),
+            composerOpen: true,
+          }
+        : dialog;
+    }
+    const hasVideoMotionReference =
+      dialog.generationReferences?.[0]?.mediaType === 'video';
+    if (mediaType === 'audio') {
       return dialog;
     }
     return resizeGenerationPlaceholderToCharacterAnimationSelection({
       ...resetFailedGenerationDialog(dialog),
-      sourceLayerId: layer.id,
-      generationReferences: [createCanvasLayerReference(layer)],
+      ...(mediaType === 'image' &&
+      dialog.generationReferences?.[0]?.mediaType === 'video'
+        ? {
+            characterAnimationAppearanceReferences: [
+              ...(dialog.characterAnimationAppearanceReferences ?? []),
+              createCanvasLayerReference(layer),
+            ],
+          }
+        : {
+            sourceLayerId: layer.id,
+            generationReferences: [
+              createCanvasLayerReference(layer, {
+                preferSequenceVideo: true,
+              }),
+            ],
+          }),
       composerOpen: true,
     });
   }
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index 800eef79a..48459717c 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -44,6 +44,7 @@ type ImageCanvasGenerationImageOptionsViewProps = {
   onSubmitRequest: () => void;
   lockedModel?: string;
   styleControl?: ReactNode;
+  extraToggles?: ReactNode;
   renderEditorPortal?: (node: ReactNode) => ReactNode;
   buildPortalMenuStyle?: (
     anchor: HTMLElement | null,
@@ -138,6 +139,7 @@ export function ImageCanvasGenerationImageOptionsView({
   onSubmitRequest,
   lockedModel,
   styleControl,
+  extraToggles,
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
 }: ImageCanvasGenerationImageOptionsViewProps) {
@@ -331,20 +333,25 @@ export function ImageCanvasGenerationImageOptionsView({
         </div>
       ) : null}
       {styleControl ??
-        (supportsImageStyle ? (
-          <label className="image-canvas-editor__image-style-toggle">
-            <input
-              type="checkbox"
-              checked={dialog.style === 'pixelArt'}
-              disabled={isGenerating}
-              onChange={(event) =>
-                updateDialog({
-                  style: event.target.checked ? 'pixelArt' : 'none',
-                })
-              }
-            />
-            <span>像素艺术</span>
-          </label>
+        (supportsImageStyle || extraToggles ? (
+          <div className="image-canvas-editor__generation-toggles">
+            {supportsImageStyle ? (
+              <label className="image-canvas-editor__image-style-toggle">
+                <input
+                  type="checkbox"
+                  checked={dialog.style === 'pixelArt'}
+                  disabled={isGenerating}
+                  onChange={(event) =>
+                    updateDialog({
+                      style: event.target.checked ? 'pixelArt' : 'none',
+                    })
+                  }
+                />
+                <span>像素艺术</span>
+              </label>
+            ) : null}
+            {extraToggles}
+          </div>
         ) : null)}
       {includeModel ? (
         <div
diff --git a/src/components/image-editor/ImageCanvasGenerationInputsModel.ts b/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
index f992ef982..e702dd991 100644
--- a/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
@@ -25,6 +25,7 @@ export const CANVAS_GENERATION_ACTIONS = [
   'audio.sound-effect.generate',
   'audio.background-music.generate',
   'character-animation.generate',
+  'character-animation.convert',
   'image.edit',
   'ui-design.extract-assets',
   'image.perfect-pixel',
@@ -46,6 +47,7 @@ const REMIXABLE_CANVAS_GENERATION_ACTIONS = new Set<CanvasGenerationAction>([
   'audio.sound-effect.generate',
   'audio.background-music.generate',
   'character-animation.generate',
+  'character-animation.convert',
   'ui-design.extract-assets',
 ]);
 
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index 9d5e8a4ef..39eba3382 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -558,6 +558,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
     ];
     const layer = createCharacterAnimationResultLayer({
       generated: {
+        resultType: 'ai',
         taskId: 'character-animation-task-1',
         model: 'seedance2.0-fast',
         prompt: '待机动作',
@@ -605,7 +606,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
       mediaType: 'image-sequence',
       thumbnailSrc: '/generated-character-drafts/editor/frame1.png',
       imageSequenceFrames: frames,
-      previewVideoPath: null,
+      previewVideoPath: '/generated-character-drafts/editor/preview.mp4',
       x: -222,
       y: -242,
       width: 1024,
@@ -625,6 +626,61 @@ describe('ImageCanvasGenerationLayerModel', () => {
     expect(layer?.provider).toBeUndefined();
   });
 
+  it('creates direct video conversion layers without fake prompt or model metadata', () => {
+    const frames = [
+      { imageSrc: '/converted/frame-1.png', width: 640, height: 360 },
+      { imageSrc: '/converted/frame-2.png', width: 640, height: 360 },
+    ];
+    const layer = createCharacterAnimationResultLayer({
+      generated: {
+        resultType: 'video-conversion',
+        taskId: 'conversion-task-1',
+        processingMethod: '视频直接转换',
+        frames,
+        frameCount: 2,
+        durationMs: 2_500,
+        frameWidth: 640,
+        frameHeight: 360,
+        sourceFps: 29.97,
+        samplingFps: 0.8,
+        priceMudPoints: 0,
+        resource: {
+          resourceId: 'resource-converted-animation',
+          projectId: 'project-1',
+          imageSrc: frames[0]!.imageSrc,
+          width: 640,
+          height: 360,
+          sourceType: 'generated',
+          assetKind: 'character-animation',
+          imageSequenceFrames: frames,
+          imageSequenceDurationMs: 2_500,
+        },
+      },
+      generatedIndex: 18,
+      title: '视频转换序列帧',
+      canvasSize: { width: 900, height: 640 },
+      viewport: { x: 0, y: 0, scale: 1 },
+      generationInputs: {
+        version: 2,
+        action: 'character-animation.convert',
+        fields: [],
+        references: [],
+      },
+    });
+
+    expect(layer).toMatchObject({
+      mediaType: 'image-sequence',
+      assetKind: 'character-animation',
+      taskId: 'conversion-task-1',
+      provider: 'FFmpeg',
+      imageSequenceDurationMs: 2_500,
+    });
+    expect(layer?.prompt).toBeUndefined();
+    expect(layer?.actualPrompt).toBeUndefined();
+    expect(layer?.model).toBeUndefined();
+    expect(layer?.previewVideoPath).toBeNull();
+  });
+
   it('links a character animation result layer to its persisted project resource', () => {
     const frames = [
       {
@@ -644,6 +700,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
     ];
     const layer = createCharacterAnimationResultLayer({
       generated: {
+        resultType: 'ai',
         taskId: 'character-animation-task-persisted',
         model: 'seedance2.0-fast',
         prompt: '奔跑动作',
@@ -704,6 +761,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
     ];
     const layer = createCharacterAnimationResultLayer({
       generated: {
+        resultType: 'ai',
         taskId: 'character-animation-task-asset-only',
         model: 'seedance2.0-fast',
         prompt: '跳跃动作',
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 5dc1e1a31..9302447e5 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -1,6 +1,6 @@
 import type {
   EditorAudioGenerationResult,
-  EditorCharacterAnimationGenerationResult,
+  EditorCharacterAnimationResult,
   EditorIconSpritesheetGenerationResult,
   EditorIconSpritesheetIconResult,
   EditorImageGenerationResult,
@@ -66,7 +66,7 @@ type AudioResultLayerOptions = {
 };
 
 type CharacterAnimationResultLayerOptions = {
-  generated: EditorCharacterAnimationGenerationResult;
+  generated: EditorCharacterAnimationResult;
   generatedIndex: number;
   title: string;
   canvasSize: CanvasSize;
@@ -497,7 +497,16 @@ export function createCharacterAnimationResultLayer({
     mediaType: 'image-sequence',
     thumbnailSrc: previewFrame.imageSrc,
     imageSequenceFrames,
-    previewVideoPath: null,
+    previewVideoPath:
+      generated.resultType === 'ai'
+        ? generated.previewVideoPath
+        : sourceLayer?.mediaType === 'video'
+          ? sourceLayer.objectKey?.trim() ||
+            sourceLayer.previewVideoPath ||
+            sourceLayer.src
+          : sourceLayer?.assetKind === 'character-animation'
+            ? (sourceLayer.previewVideoPath ?? null)
+            : null,
     x: frameX ?? worldCenter.x - width / 2,
     y: frameY ?? worldCenter.y - height / 2,
     width,
@@ -506,9 +515,11 @@ export function createCharacterAnimationResultLayer({
     originalHeight,
     zIndex: generatedIndex + 10,
     sourceType: 'generated',
-    prompt: generated.prompt,
-    actualPrompt: generated.prompt,
-    model: generated.model,
+    prompt: generated.resultType === 'ai' ? generated.prompt : undefined,
+    actualPrompt: generated.resultType === 'ai' ? generated.prompt : undefined,
+    model: generated.resultType === 'ai' ? generated.model : undefined,
+    provider:
+      generated.resultType === 'video-conversion' ? 'FFmpeg' : undefined,
     taskId: generated.taskId,
     assetKind: 'character-animation',
     imageSequenceDurationMs,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index a7e77c300..f7219d1e9 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -31,6 +31,7 @@ import {
   calculateEditorUiDesignPrice,
   calculateEditorVideoPrice,
   canOpenRedrawPanel,
+  createCanvasLayerReference,
   CANVAS_GENERATION_PARAMETER_FALLBACK_WARNING,
   CHARACTER_ANIMATION_MODEL,
   decodeCanvasGenerationInputs,
@@ -64,6 +65,37 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasGenerationModel', () => {
+  it('uses a character animation preview video when a video reference is requested', () => {
+    const reference = createCanvasLayerReference(
+      {
+        id: 'layer-sequence',
+        resourceId: 'resource-sequence',
+        sourceResourceId: 'resource-motion-video',
+        title: '序列帧动作',
+        src: '/frames/frame-001.png',
+        previewVideoPath: '/motion/preview.mp4',
+        mediaType: 'image-sequence',
+        assetKind: 'character-animation',
+        x: 0,
+        y: 0,
+        width: 480,
+        height: 480,
+        originalWidth: 480,
+        originalHeight: 480,
+        zIndex: 1,
+        sourceType: 'generated',
+      },
+      { preferSequenceVideo: true },
+    );
+
+    expect(reference).toMatchObject({
+      mediaType: 'video',
+      src: '/motion/preview.mp4',
+      objectKey: '/motion/preview.mp4',
+      resourceId: 'resource-motion-video',
+    });
+  });
+
   it('resolves character animation pixel and display sizes from ratio and resolution', () => {
     expect(
       resolveEditorCharacterAnimationFramePixelSize({
@@ -117,6 +149,59 @@ describe('ImageCanvasGenerationModel', () => {
     ).toBeUndefined();
   });
 
+  it('persists motion and appearance slots for video-guided character animation', () => {
+    const inputs = buildCharacterAnimationGenerationInputs(
+      '复刻动作并替换外观',
+      null,
+      {
+        id: 'motion-video',
+        label: '奔跑动作.mov',
+        src: 'users/user-1/motion.mov',
+        mediaType: 'video',
+        resourceId: 'resource-motion',
+        width: 1920,
+        height: 1080,
+      },
+      {
+        referenceSrc: 'users/user-1/motion.mov',
+        referenceMediaType: 'video',
+        appearanceReferences: [
+          {
+            id: 'appearance-image',
+            label: '骑士外观.png',
+            src: 'users/user-1/appearance.png',
+            mediaType: 'image',
+            sourceAssetId: 'asset-appearance',
+          },
+        ],
+        appearanceReferenceSrcs: ['users/user-1/appearance.png'],
+      },
+    );
+
+    expect(inputs.references).toEqual([
+      expect.objectContaining({
+        id: 'motion',
+        refType: 'project-resource',
+        refId: 'resource-motion',
+      }),
+      expect.objectContaining({
+        id: 'appearance',
+        refType: 'asset',
+        refId: 'asset-appearance',
+      }),
+    ]);
+    expect(inputs.fields).toEqual(
+      expect.arrayContaining([
+        { id: 'inputMode', title: '输入模式', value: 'video' },
+        {
+          id: 'appearanceReferenceSrc',
+          title: '参考图',
+          value: 'users/user-1/appearance.png',
+        },
+      ]),
+    );
+  });
+
   afterEach(() => {
     applyEditorGenerationPricingConfig({
       models: EDITOR_MODEL_MUD_POINT_CONFIG,
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 0edba945b..381b84022 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -913,6 +913,8 @@ export function buildCharacterAnimationGenerationInputs(
     backgroundColor?: string;
     referenceSrc?: string;
     referenceMediaType?: 'image' | 'video';
+    appearanceReferences?: CharacterReferenceImage[];
+    appearanceReferenceSrcs?: string[];
   } = {},
 ): CanvasGenerationInputs {
   const inputMode =
@@ -967,6 +969,15 @@ export function buildCharacterAnimationGenerationInputs(
             'referenceHeight',
           )
         : []),
+      ...(options.appearanceReferenceSrcs?.length
+        ? options.appearanceReferenceSrcs.flatMap((src) =>
+            createGenerationInputField(
+              '参考图',
+              src,
+              'appearanceReferenceSrc',
+            ),
+          )
+        : []),
       ...createGenerationInputField('动作描述', promptText, 'prompt'),
       ...(options.backgroundColor
         ? createGenerationInputField(
@@ -992,19 +1003,28 @@ export function buildCharacterAnimationGenerationInputs(
         'durationSeconds',
       ),
     ],
-    references: sourceLayer
-      ? createLayerGenerationInputReference(
-          reference?.mediaType === 'video' ? '参考视频' : '角色图片',
-          sourceLayer,
-          { id: 'source' },
-        )
-      : reference
+    references: [
+      ...(reference
         ? createGenerationInputReference(
-            reference.mediaType === 'video' ? '参考视频' : '角色图片',
+            reference.mediaType === 'video' ? '参考视频' : '参考图片',
             reference,
-            { id: 'source' },
+            { id: reference.mediaType === 'video' ? 'motion' : 'source' },
           )
-        : [],
+        : sourceLayer
+          ? createLayerGenerationInputReference('角色图片', sourceLayer, {
+              id: 'source',
+            })
+          : []),
+      ...(options.appearanceReferences?.length
+        ? options.appearanceReferences.flatMap((appearanceReference) =>
+            createGenerationInputReference(
+              '参考图',
+              appearanceReference,
+              { id: 'appearance' },
+            ),
+          )
+        : []),
+    ],
   };
 }
 
@@ -1264,19 +1284,33 @@ export function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
 
 export function createCanvasLayerReference(
   layer: CanvasLayer,
+  options: { preferSequenceVideo?: boolean } = {},
 ): CharacterReferenceImage {
-  const mediaType =
-    layer.mediaType === 'video' || layer.mediaType === 'audio'
-      ? layer.mediaType
+  // 正式序列帧资源的 PNG 是最终交付物；在动作视频/直接转换槽位中，若仍保留底层视频，
+  // 则沿用视频引用。未指定时保持旧的整张序列帧图片语义。
+  const sequenceVideoSrc =
+    options.preferSequenceVideo && layer.assetKind === 'character-animation'
+      ? layer.previewVideoPath?.trim()
       : undefined;
+  const isVideoReference =
+    Boolean(sequenceVideoSrc) || layer.mediaType === 'video';
+  const mediaType = isVideoReference
+    ? 'video'
+    : layer.mediaType === 'audio'
+      ? 'audio'
+      : undefined;
+  const src = sequenceVideoSrc || layer.objectKey?.trim() || layer.src;
   return {
     id: `canvas-${layer.id}`,
     label: layer.title,
-    src: layer.objectKey?.trim() || layer.src,
+    src,
     ...(mediaType ? { mediaType } : {}),
-    objectKey: layer.objectKey ?? undefined,
+    assetKind: layer.assetKind ?? null,
+    objectKey: sequenceVideoSrc || (layer.objectKey ?? undefined),
     assetObjectId: layer.assetObjectId ?? undefined,
-    resourceId: layer.resourceId,
+    resourceId: sequenceVideoSrc
+      ? (layer.sourceResourceId ?? layer.resourceId)
+      : layer.resourceId,
     sourceAssetId: layer.sourceAssetId ?? undefined,
     width: layer.originalWidth,
     height: layer.originalHeight,
@@ -1340,7 +1374,8 @@ export function buildDeterministicGenerationInputs(
     | 'image.perfect-pixel'
     | 'spritesheet.split'
     | 'image.remove-background'
-    | 'image.crop-expand',
+    | 'image.crop-expand'
+    | 'character-animation.remove-background',
   sourceLayer: CanvasLayer,
   sourceTitle = '原图',
 ): CanvasGenerationInputs {
@@ -2182,7 +2217,6 @@ export function buildCharacterSheetGenerationInputs(
     model?: string;
     aspectRatio?: string;
     imageSize?: string;
-    viewSet?: '4' | '8';
   } = {},
 ): CanvasGenerationInputs {
   return {
@@ -2195,11 +2229,6 @@ export function buildCharacterSheetGenerationInputs(
         options.model ?? DEFAULT_IMAGE_MODEL,
         'model',
       ),
-      ...createGenerationInputField(
-        '视角集合',
-        options.viewSet === '8' ? '八视图' : '四视图',
-        'viewSet',
-      ),
       ...createGenerationInputField(
         '比例',
         options.aspectRatio ?? '1:1',
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index bcd432090..53cbcb1ec 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -680,12 +680,12 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         action: 'character-sheet.generate',
         fields: expect.arrayContaining([
           { id: 'prompt', title: '角色设定', value: '日系魔法少女' },
-          { id: 'viewSet', title: '视角集合', value: '四视图' },
         ]),
       }),
     );
     expect(plan.kind === 'image' ? plan.input : null).toMatchObject({
-      characterSheetViews: 4,
+      kind: 'character-sheet',
+      assetKind: 'icon-spritesheet',
     });
     // 图集不做像素化、不去背景，screenColor/segModel 不携带。
     expect(plan.kind === 'image' ? plan.input : null).not.toHaveProperty(
@@ -696,33 +696,6 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
     );
   });
 
-  it('builds eight-direction character-sheet plans when view set is eight', () => {
-    const plan = buildImageGenerationSubmissionPlan({
-      dialog: {
-        mode: 'character',
-        prompt: '日系魔法少女',
-        status: 'idle',
-        characterSheetEnabled: true,
-        characterSheetViewSet: '8',
-      },
-      layers: [],
-      nextGeneratedIndex: 4,
-    });
-
-    expect(plan.kind === 'image' ? plan.input : null).toMatchObject({
-      kind: 'character-sheet',
-      characterSheetViews: 8,
-    });
-    expect(plan.kind === 'image' ? plan.result.generationInputs : null).toEqual(
-      expect.objectContaining({
-        action: 'character-sheet.generate',
-        fields: expect.arrayContaining([
-          { id: 'viewSet', title: '视角集合', value: '八视图' },
-        ]),
-      }),
-    );
-  });
-
   it('locks UI design generation submissions to gpt-image-2', () => {
     const plan = buildImageGenerationSubmissionPlan({
       dialog: {
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index a825ef917..73a8f3be7 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -802,8 +802,7 @@ export function buildImageGenerationSubmissionPlan({
     const screenColor = DEFAULT_EDITOR_GENERATION_BACKGROUND_COLOR;
     const segModel = DEFAULT_EDITOR_BGFILTER_SEG_MODEL;
     const sheetEnabled = dialog.characterSheetEnabled === true;
-    const sheetViewSet = dialog.characterSheetViewSet ?? '4';
-    // 中文注释：多方向角色图走后端 kind=character-sheet（绿色间隔底，便于连通块拆分），
+    // 中文注释：多方向角色图走后端 kind=character-sheet（绿色间隔底，便于后续拆分），
     // 产物按 icon-spritesheet 落库，复用既有「拆分图集」能力；不做像素化、不去背景。
     return {
       kind: 'image',
@@ -823,7 +822,6 @@ export function buildImageGenerationSubmissionPlan({
         ...(sheetEnabled
           ? {
               assetKind: 'icon-spritesheet',
-              characterSheetViews: sheetViewSet === '8' ? 8 : 4,
             }
           : {}),
         ...(referenceImageSrcs.length ? { referenceImageSrcs } : {}),
@@ -845,7 +843,6 @@ export function buildImageGenerationSubmissionPlan({
                 model: imageModel,
                 aspectRatio: dialog.aspectRatio ?? '1:1',
                 imageSize: dialog.imageSize ?? '1K',
-                viewSet: sheetViewSet,
               },
             )
           : buildCharacterGenerationInputs(
@@ -1183,8 +1180,8 @@ export function buildCharacterAnimationSubmissionPlan({
 }): CharacterAnimationSubmissionPlan {
   const promptText = panel.promptText.trim();
   const resultTitle = resolveGenerationAssetLabel(panel.assetLabel, '角色动作');
-  if (!promptText) {
-    throw new Error('动画描述不能为空。');
+  if (!promptText && !reference && !sourceLayer) {
+    throw new Error('动画描述和参考素材不能同时为空。');
   }
   const inputMode =
     reference?.mediaType === 'video'
diff --git a/src/components/image-editor/ImageCanvasReferenceSlot.tsx b/src/components/image-editor/ImageCanvasReferenceSlot.tsx
index 849f48311..f0304f6e2 100644
--- a/src/components/image-editor/ImageCanvasReferenceSlot.tsx
+++ b/src/components/image-editor/ImageCanvasReferenceSlot.tsx
@@ -11,8 +11,7 @@ type ImageCanvasReferenceSlotTone =
   | 'character'
   | 'quick-edit'
   | 'video'
-  | 'audio'
-  | 'character-sheet';
+  | 'audio';
 
 type ImageCanvasReferenceSlotProps = {
   buttonRef?: RefObject<HTMLButtonElement | null>;
@@ -26,8 +25,6 @@ type ImageCanvasReferenceSlotProps = {
   objectKey?: string | null;
   disabled?: boolean;
   isAdd?: boolean;
-  /** 选中态（用于模式开关类入口）：置位时高亮边框并带 aria-pressed。 */
-  pressed?: boolean;
   onClick?: () => void;
   onRemove?: () => void;
   removeLabel?: string;
@@ -45,7 +42,6 @@ export function ImageCanvasReferenceSlot({
   objectKey,
   disabled = false,
   isAdd = false,
-  pressed,
   onClick,
   onRemove,
   removeLabel,
@@ -58,11 +54,11 @@ export function ImageCanvasReferenceSlot({
       ? 'image-canvas-editor__reference-chip--has-image'
       : 'image-canvas-editor__reference-chip--icon-only',
     isAdd ? 'image-canvas-editor__reference-chip--upload' : null,
-    pressed ? 'image-canvas-editor__reference-chip--active' : null,
     className,
   ]
     .filter(Boolean)
-    .join(' ');  const slotContent = (
+    .join(' ');
+  const slotContent = (
     <>
       <span className="image-canvas-editor__reference-chip-icon">
         {hasPreviewImage ? (
@@ -93,7 +89,6 @@ export function ImageCanvasReferenceSlot({
           className={slotClassName}
           disabled={disabled}
           aria-label={ariaLabel}
-          aria-pressed={pressed === undefined ? undefined : pressed}
           title={title ?? ariaLabel}
           onClick={onClick}
         >
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index 35f08ecec..5cd3caa5c 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -54,11 +54,12 @@ function renderSelectedToolbar(
     isPerfectPixelPendingConfirmation: false,
     isSplittingIconSpritesheet: false,
     isSplittingCharacterAnimation: false,
+    isRemovingCharacterAnimationBackground: false,
     isPersistingAssetKind: false,
     onSplitIconSpritesheet: vi.fn(),
     onSplitCharacterAnimation: vi.fn(),
+    onRemoveCharacterAnimationBackground: vi.fn(),
     onExtractUiDesignAssets: vi.fn(),
-    onOpenCharacterAnimationPanel: vi.fn(),
     onDownloadLayer: vi.fn(),
     ...overrides,
   };
@@ -478,8 +479,10 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
       within(actionToolbar)
         .getAllByRole('button')
         .map((button) => button.getAttribute('aria-label')),
-    ).toEqual(['拆帧', '改造', '下载按钮']);
-    fireEvent.click(within(actionToolbar).getByRole('button', { name: '拆帧' }));
+    ).toEqual(['改造', '去背景', '拆帧', '下载按钮']);
+    fireEvent.click(
+      within(actionToolbar).getByRole('button', { name: '拆帧' }),
+    );
     expect(props.onSplitCharacterAnimation).toHaveBeenCalledWith(
       expect.objectContaining({ assetKind: 'character-animation' }),
     );
@@ -557,28 +560,6 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     expect(uiProps.onOpenRedrawPanel).toHaveBeenCalledWith(uiDesignLayer);
   });
 
-  it('renders character animation only for character layers', () => {
-    const layer = createLayer({
-      sourceType: 'generated',
-      assetKind: 'character',
-    });
-    const props = renderSelectedToolbar({ selectedLayer: layer });
-    const animationButton = screen.getByRole('button', { name: '生成动画' });
-
-    expect(animationButton.textContent).toContain('生成动画');
-    expect(
-      animationButton.querySelector('.lucide-person-standing'),
-    ).toBeTruthy();
-
-    fireEvent.click(animationButton);
-
-    expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
-
-    cleanup();
-    renderSelectedToolbar({ selectedLayer: createLayer({ id: 'layer-2' }) });
-    expect(screen.queryByRole('button', { name: '生成动画' })).toBeNull();
-  });
-
   it('hides quick edit only for individual icon assets', () => {
     renderSelectedToolbar({
       selectedLayer: createLayer({ assetKind: 'icon' }),
@@ -618,11 +599,12 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         isPerfectPixelPendingConfirmation={false}
         isSplittingIconSpritesheet={false}
         isSplittingCharacterAnimation={false}
+        isRemovingCharacterAnimationBackground={false}
         isPersistingAssetKind={false}
         onSplitIconSpritesheet={vi.fn()}
         onSplitCharacterAnimation={vi.fn()}
+        onRemoveCharacterAnimationBackground={vi.fn()}
         onExtractUiDesignAssets={vi.fn()}
-        onOpenCharacterAnimationPanel={vi.fn()}
         onDownloadLayer={vi.fn()}
       />,
     );
@@ -642,11 +624,12 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         isPerfectPixelPendingConfirmation={false}
         isSplittingIconSpritesheet={false}
         isSplittingCharacterAnimation={false}
+        isRemovingCharacterAnimationBackground={false}
         isPersistingAssetKind={false}
         onSplitIconSpritesheet={vi.fn()}
         onSplitCharacterAnimation={vi.fn()}
+        onRemoveCharacterAnimationBackground={vi.fn()}
         onExtractUiDesignAssets={vi.fn()}
-        onOpenCharacterAnimationPanel={vi.fn()}
         onDownloadLayer={vi.fn()}
       />,
     );
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index 63bde75c4..352731275 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -4,7 +4,6 @@ import {
   Grid2X2,
   ImageOff,
   Loader2,
-  PersonStanding,
   Scissors,
   Sparkles,
   WandSparkles,
@@ -32,11 +31,12 @@ type ImageCanvasSelectedLayerToolbarViewProps = {
   isPerfectPixelPendingConfirmation: boolean;
   isSplittingIconSpritesheet: boolean;
   isSplittingCharacterAnimation: boolean;
+  isRemovingCharacterAnimationBackground: boolean;
   isPersistingAssetKind: boolean;
   onSplitIconSpritesheet: (layer: CanvasLayer) => void;
   onSplitCharacterAnimation: (layer: CanvasLayer) => void;
+  onRemoveCharacterAnimationBackground: (layer: CanvasLayer) => void;
   onExtractUiDesignAssets: (layer: CanvasLayer) => void;
-  onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
   onDownloadLayer: (layer: CanvasLayer) => void;
 };
 
@@ -52,11 +52,12 @@ export function ImageCanvasSelectedLayerToolbarView({
   isPerfectPixelPendingConfirmation,
   isSplittingIconSpritesheet,
   isSplittingCharacterAnimation,
+  isRemovingCharacterAnimationBackground,
   isPersistingAssetKind,
   onSplitIconSpritesheet,
   onSplitCharacterAnimation,
+  onRemoveCharacterAnimationBackground,
   onExtractUiDesignAssets,
-  onOpenCharacterAnimationPanel,
   onDownloadLayer,
 }: ImageCanvasSelectedLayerToolbarViewProps) {
   if (!selectedLayer || !selectedToolbarStyle) {
@@ -157,7 +158,7 @@ export function ImageCanvasSelectedLayerToolbarView({
                   ? '完美像素处理中'
                   : isPerfectPixelPendingConfirmation
                     ? '完美像素结果待确认'
-                  : '完美像素'
+                    : '完美像素'
             }
             title={
               isPersistingAssetKind
@@ -166,7 +167,7 @@ export function ImageCanvasSelectedLayerToolbarView({
                   ? '完美像素处理中'
                   : isPerfectPixelPendingConfirmation
                     ? '结果待确认，双击原占位继续核对或重试'
-                  : '自动识别并规整像素网格'
+                    : '自动识别并规整像素网格'
             }
             icon={
               isPersistingAssetKind || isPerfectPixelProcessing ? (
@@ -194,7 +195,7 @@ export function ImageCanvasSelectedLayerToolbarView({
                   ? '处理中'
                   : isPerfectPixelPendingConfirmation
                     ? '待确认'
-                  : '完美像素'}
+                    : '完美像素'}
             </span>
           </PlatformIconButton>
         </>
@@ -247,55 +248,71 @@ export function ImageCanvasSelectedLayerToolbarView({
           <span>提取素材</span>
         </PlatformIconButton>
       ) : null}
-      {selectedLayer.assetKind === 'character-animation' ? (
-        <PlatformIconButton
-          className="image-canvas-editor__floating-toolbar-text-button"
-          label={characterAnimationSplitLabel}
-          title={characterAnimationSplitLabel}
-          icon={
-            isCharacterAnimationResourcePending ||
-            isSplittingCharacterAnimation ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Scissors className="h-4 w-4" />
-            )
-          }
-          disabled={
-            isCharacterAnimationResourcePending || isSplittingCharacterAnimation
-          }
-          aria-busy={
-            isCharacterAnimationResourcePending || isSplittingCharacterAnimation
-          }
-          onClick={() => onSplitCharacterAnimation(selectedLayer)}
-        >
-          <span>{characterAnimationSplitLabel}</span>
-        </PlatformIconButton>
-      ) : null}
-      {selectedLayer.assetKind === 'character' ? (
-        <PlatformIconButton
-          className="image-canvas-editor__floating-toolbar-text-button"
-          label="生成动画"
-          title="生成动画"
-          icon={<PersonStanding className="h-4 w-4" />}
-          onClick={() => onOpenCharacterAnimationPanel(selectedLayer)}
-        >
-          <span>生成动画</span>
-        </PlatformIconButton>
-      ) : null}
       {canRedraw ? (
+        <PlatformIconButton
+          className="image-canvas-editor__floating-toolbar-text-button"
+          label="改造"
+          title="改造"
+          icon={<WandSparkles className="h-4 w-4" />}
+          onClick={() => onOpenRedrawPanel(selectedLayer)}
+        >
+          <span>改造</span>
+        </PlatformIconButton>
+      ) : null}
+      {selectedLayer.assetKind === 'character-animation' ? (
         <>
-          <span
-            aria-hidden="true"
-            className="image-canvas-editor__floating-toolbar-divider"
-          />
           <PlatformIconButton
             className="image-canvas-editor__floating-toolbar-text-button"
-            label="改造"
-            title="改造"
-            icon={<WandSparkles className="h-4 w-4" />}
-            onClick={() => onOpenRedrawPanel(selectedLayer)}
+            label={
+              isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'
+            }
+            title={
+              isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'
+            }
+            icon={
+              isRemovingCharacterAnimationBackground ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <ImageOff className="h-4 w-4" />
+              )
+            }
+            disabled={
+              isCharacterAnimationResourcePending ||
+              isRemovingCharacterAnimationBackground
+            }
+            aria-busy={
+              isCharacterAnimationResourcePending ||
+              isRemovingCharacterAnimationBackground
+            }
+            onClick={() => onRemoveCharacterAnimationBackground(selectedLayer)}
           >
-            <span>改造</span>
+            <span>
+              {isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'}
+            </span>
+          </PlatformIconButton>
+          <PlatformIconButton
+            className="image-canvas-editor__floating-toolbar-text-button"
+            label={characterAnimationSplitLabel}
+            title={characterAnimationSplitLabel}
+            icon={
+              isCharacterAnimationResourcePending ||
+              isSplittingCharacterAnimation ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Scissors className="h-4 w-4" />
+              )
+            }
+            disabled={
+              isCharacterAnimationResourcePending ||
+              isSplittingCharacterAnimation
+            }
+            aria-busy={
+              isCharacterAnimationResourcePending ||
+              isSplittingCharacterAnimation
+            }
+            onClick={() => onSplitCharacterAnimation(selectedLayer)}
+          >
+            <span>{characterAnimationSplitLabel}</span>
           </PlatformIconButton>
         </>
       ) : null}
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 033a77339..93d3eff1e 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -81,6 +81,7 @@ export type ImageCanvasStageViewProps = {
   selectedToolbarStyle: CSSProperties | null;
   splittingIconSpritesheetLayerIds?: ReadonlySet<string>;
   splittingCharacterAnimationLayerIds?: ReadonlySet<string>;
+  removingBackgroundCharacterAnimationLayerIds?: ReadonlySet<string>;
   perfectPixelLayerIds?: ReadonlySet<string>;
   pendingPerfectPixelLayerIds?: ReadonlySet<string>;
   persistingAssetKindLayerIds?: ReadonlySet<string>;
@@ -157,6 +158,7 @@ export type ImageCanvasStageViewProps = {
   onPerfectPixel: (layer: CanvasLayer) => void;
   onSplitIconSpritesheet: (layer: CanvasLayer) => void;
   onSplitCharacterAnimation: (layer: CanvasLayer) => void;
+  onRemoveCharacterAnimationBackground: (layer: CanvasLayer) => void;
   onExtractUiDesignAssets: (layer: CanvasLayer) => void;
   onUiAssetExtractionToolChange: (tool: UiAssetExtractionTool | null) => void;
   onUiAssetExtractionModelChange: (model: string) => void;
@@ -170,7 +172,6 @@ export type ImageCanvasStageViewProps = {
   onQuickEditSelectionPointerStart: (point: { x: number; y: number }) => void;
   onQuickEditSelectionPointerMove: (point: { x: number; y: number }) => void;
   onQuickEditSelectionPointerEnd: () => void;
-  onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
   onDownloadLayer: (layer: CanvasLayer) => void;
   onPasteCanvasClipboard: (canvasPoint?: { x: number; y: number }) => void;
   onCopyContextLayers: (options?: { cut?: boolean }) => void;
@@ -245,6 +246,7 @@ export function ImageCanvasStageView({
   selectedToolbarStyle,
   splittingIconSpritesheetLayerIds = EMPTY_LAYER_ID_SET,
   splittingCharacterAnimationLayerIds = EMPTY_LAYER_ID_SET,
+  removingBackgroundCharacterAnimationLayerIds = EMPTY_LAYER_ID_SET,
   perfectPixelLayerIds = EMPTY_LAYER_ID_SET,
   pendingPerfectPixelLayerIds = EMPTY_LAYER_ID_SET,
   persistingAssetKindLayerIds = EMPTY_LAYER_ID_SET,
@@ -300,6 +302,7 @@ export function ImageCanvasStageView({
   onPerfectPixel,
   onSplitIconSpritesheet,
   onSplitCharacterAnimation,
+  onRemoveCharacterAnimationBackground,
   onExtractUiDesignAssets,
   onUiAssetExtractionToolChange,
   onUiAssetExtractionModelChange,
@@ -313,7 +316,6 @@ export function ImageCanvasStageView({
   onQuickEditSelectionPointerStart,
   onQuickEditSelectionPointerMove,
   onQuickEditSelectionPointerEnd,
-  onOpenCharacterAnimationPanel,
   onDownloadLayer,
   onPasteCanvasClipboard,
   onCopyContextLayers,
@@ -424,6 +426,10 @@ export function ImageCanvasStageView({
           selectedLayer &&
             splittingCharacterAnimationLayerIds.has(selectedLayer.id),
         )}
+        isRemovingCharacterAnimationBackground={Boolean(
+          selectedLayer &&
+            removingBackgroundCharacterAnimationLayerIds.has(selectedLayer.id),
+        )}
         isPersistingAssetKind={Boolean(
           selectedLayer && persistingAssetKindLayerIds.has(selectedLayer.id),
         )}
@@ -440,8 +446,10 @@ export function ImageCanvasStageView({
         onPerfectPixel={onPerfectPixel}
         onSplitIconSpritesheet={onSplitIconSpritesheet}
         onSplitCharacterAnimation={onSplitCharacterAnimation}
+        onRemoveCharacterAnimationBackground={
+          onRemoveCharacterAnimationBackground
+        }
         onExtractUiDesignAssets={onExtractUiDesignAssets}
-        onOpenCharacterAnimationPanel={onOpenCharacterAnimationPanel}
         onDownloadLayer={onDownloadLayer}
       />
 
@@ -502,7 +510,6 @@ export function ImageCanvasStageView({
         onFitLayers={onFitLayers}
         onOpenQuickEditPanel={onOpenQuickEditPanel}
         onOpenLayerMetadata={onOpenLayerMetadata}
-        onOpenCharacterAnimationPanel={onOpenCharacterAnimationPanel}
       />
 
       <ImageCanvasPanelDockView
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 19448362d..410795565 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -482,6 +482,61 @@ describe('ImageCanvasUploadModel', () => {
     });
   });
 
+  it('keeps direct-conversion uploads and AI appearance uploads in independent slots', () => {
+    const motionReference = {
+      id: 'motion-video',
+      label: '动作视频',
+      src: 'users/user-1/motion.mp4',
+      mediaType: 'video' as const,
+    };
+    const appearanceReference = {
+      id: 'appearance-image',
+      label: '角色外观',
+      src: 'users/user-1/appearance.png',
+      mediaType: 'image' as const,
+    };
+    const conversionReference = {
+      id: 'conversion-video',
+      label: '直接转换源视频',
+      src: 'users/user-1/source.mov',
+      mediaType: 'video' as const,
+    };
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({
+          mode: 'character-animation',
+          characterAnimationWorkflow: 'ai',
+          generationReferences: [motionReference],
+        }),
+        target: 'video-reference-image',
+        references: [appearanceReference],
+      }),
+    ).toMatchObject({
+      generationReferences: [motionReference],
+      characterAnimationAppearanceReferences: [appearanceReference],
+    });
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({
+          mode: 'character-animation',
+          characterAnimationWorkflow: 'video-conversion',
+          prompt: 'AI 草稿不应丢失',
+          generationReferences: [motionReference],
+          characterAnimationAppearanceReferences: [appearanceReference],
+        }),
+        target: 'video-reference-video',
+        references: [conversionReference],
+      }),
+    ).toMatchObject({
+      prompt: 'AI 草稿不应丢失',
+      generationReferences: [motionReference],
+      characterAnimationAppearanceReferences: [appearanceReference],
+      characterAnimationConversionVideoReference: conversionReference,
+    });
+  });
+
   it('resizes a same-ratio character animation placeholder for an uploaded reference', () => {
     const dialog = createDialog({
       mode: 'character-animation',
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 3c217f643..ac7711803 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -264,12 +264,31 @@ export function applyGenerationReferenceUpload({
     return dialog?.mode === 'video' ||
       (dialog?.mode === 'character-animation' && mediaType !== 'audio')
       ? dialog.mode === 'character-animation'
-        ? resizeGenerationPlaceholderToCharacterAnimationSelection({
-            ...setFailedGenerationIdle(dialog),
-            sourceLayerId: undefined,
-            generationReferences: [firstReference],
-            composerOpen: true,
-          })
+        ? resizeGenerationPlaceholderToCharacterAnimationSelection(
+            dialog.characterAnimationWorkflow === 'video-conversion' &&
+              mediaType === 'video'
+              ? {
+                  ...setFailedGenerationIdle(dialog),
+                  characterAnimationConversionVideoReference: firstReference,
+                  composerOpen: true,
+                }
+              : mediaType === 'image' &&
+                  dialog.generationReferences?.[0]?.mediaType === 'video'
+                ? {
+                    ...setFailedGenerationIdle(dialog),
+                    characterAnimationAppearanceReferences: [
+                      ...(dialog.characterAnimationAppearanceReferences ?? []),
+                      firstReference,
+                    ],
+                    composerOpen: true,
+                  }
+                : {
+                    ...setFailedGenerationIdle(dialog),
+                    sourceLayerId: undefined,
+                    generationReferences: [firstReference],
+                    composerOpen: true,
+                  },
+          )
         : {
             ...setFailedGenerationIdle(dialog),
             sourceLayerId: dialog.sourceLayerId,
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index a7c2620a5..3b381fd90 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -42,6 +42,7 @@ const uploadEditorMediaAssetFileMock = vi.hoisted(() => vi.fn());
 const editEditorImageMock = vi.hoisted(() => vi.fn());
 const extractEditorUiDesignAssetsMock = vi.hoisted(() => vi.fn());
 const renderUiDesignAssetExtractionMarkedImageMock = vi.hoisted(() => vi.fn());
+const convertEditorCharacterAnimationVideoMock = vi.hoisted(() => vi.fn());
 const generateEditorCharacterAnimationMock = vi.hoisted(() => vi.fn());
 const generateEditorIconSpecMock = vi.hoisted(() => vi.fn());
 const generateEditorIconSpritesheetMock = vi.hoisted(() => vi.fn());
@@ -67,6 +68,8 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     ...actual,
     editEditorImage: editEditorImageMock,
     extractEditorUiDesignAssets: extractEditorUiDesignAssetsMock,
+    convertEditorCharacterAnimationVideo:
+      convertEditorCharacterAnimationVideoMock,
     generateEditorCharacterAnimation: generateEditorCharacterAnimationMock,
     generateEditorIconSpec: generateEditorIconSpecMock,
     generateEditorIconSpritesheet: generateEditorIconSpritesheetMock,
@@ -615,6 +618,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     editEditorImageMock.mockReset();
     extractEditorUiDesignAssetsMock.mockReset();
     renderUiDesignAssetExtractionMarkedImageMock.mockReset();
+    convertEditorCharacterAnimationVideoMock.mockReset();
     generateEditorCharacterAnimationMock.mockReset();
     generateEditorIconSpecMock.mockReset();
     generateEditorIconSpritesheetMock.mockReset();
@@ -4435,6 +4439,171 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
+  it('submits direct video conversion without prompt or model compatibility fields', async () => {
+    const appendedLayers = vi.fn();
+    const frames = [
+      { imageSrc: '/converted/frame-1.png', width: 640, height: 360 },
+      { imageSrc: '/converted/frame-2.png', width: 640, height: 360 },
+    ];
+    convertEditorCharacterAnimationVideoMock.mockResolvedValueOnce({
+      resultType: 'video-conversion',
+      taskId: 'conversion-task-1',
+      processingMethod: '视频直接转换',
+      frames,
+      frameCount: 2,
+      durationMs: 2_500,
+      frameWidth: 640,
+      frameHeight: 360,
+      sourceFps: 29.97,
+      samplingFps: 0.8,
+      priceMudPoints: 0,
+      resource: {
+        resourceId: 'resource-converted-animation',
+        projectId: 'editor-project-1',
+        imageSrc: frames[0]!.imageSrc,
+        width: 640,
+        height: 360,
+        sourceType: 'generated',
+        assetKind: 'character-animation',
+        imageSequenceFrames: frames,
+        imageSequenceDurationMs: 2_500,
+      },
+    });
+    const sourceReference = {
+      id: 'conversion-source',
+      label: '动作源视频.mov',
+      src: 'users/user-1/source.mov',
+      objectKey: 'users/user-1/source.mov',
+      mediaType: 'video' as const,
+      resourceId: 'resource-source-video',
+    };
+
+    render(
+      <SubmissionWorkflowHarness
+        projectId="editor-project-1"
+        onAppendCanvasLayers={appendedLayers}
+        initialDialog={{
+          id: 'dialog-video-conversion',
+          mode: 'character-animation',
+          prompt: 'AI 草稿应保留但不提交',
+          status: 'idle',
+          composerOpen: true,
+          characterAnimationWorkflow: 'video-conversion',
+          characterAnimationConversionVideoReference: sourceReference,
+          characterAnimationConversionResolution: '720p',
+          placeholder: {
+            x: 80,
+            y: 60,
+            width: 420,
+            height: 420,
+            originalWidth: 640,
+            originalHeight: 360,
+          },
+        }}
+        initialCharacterAnimationPanel={{
+          workflow: 'video-conversion',
+          conversionVideoReference: sourceReference,
+          conversionResolution: '720p',
+          promptText: 'AI 草稿应保留但不提交',
+          resolution: '480p',
+          ratio: '1:1',
+          frameCount: 32,
+          durationSeconds: 4,
+          status: 'idle',
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '设置初始对话' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交角色动画' }));
+
+    await waitFor(() => {
+      expect(convertEditorCharacterAnimationVideoMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sourceVideoSrc: 'users/user-1/source.mov',
+          resolution: '720p',
+          sourceResourceId: 'resource-source-video',
+          generationInputs: expect.objectContaining({
+            action: 'character-animation.convert',
+          }),
+        }),
+      );
+    });
+    const request = convertEditorCharacterAnimationVideoMock.mock.calls[0]?.[0];
+    expect(request).not.toHaveProperty('prompt');
+    expect(request).not.toHaveProperty('promptText');
+    expect(request).not.toHaveProperty('model');
+    await waitFor(() => expect(appendedLayers).toHaveBeenCalledTimes(1));
+    const layer = appendedLayers.mock.calls[0]?.[0]?.[0];
+    expect(layer).toMatchObject({
+      taskId: 'conversion-task-1',
+      provider: 'FFmpeg',
+      imageSequenceDurationMs: 2_500,
+      assetKind: 'character-animation',
+      mediaType: 'image-sequence',
+    });
+    expect(layer.prompt).toBeUndefined();
+    expect(layer.actualPrompt).toBeUndefined();
+    expect(layer.model).toBeUndefined();
+  });
+
+  it('does not reuse animation lineage as the direct conversion source resource', async () => {
+    const sourceReference = {
+      id: 'sequence-source',
+      label: '已生成动作',
+      src: '/generated-character-drafts/editor/preview.mp4',
+      objectKey: 'generated-character-drafts/editor/preview.mp4',
+      mediaType: 'video' as const,
+      assetKind: 'character-animation' as const,
+      resourceId: 'resource-original-motion',
+    };
+    convertEditorCharacterAnimationVideoMock.mockResolvedValueOnce({
+      resultType: 'video-conversion',
+      taskId: 'conversion-from-sequence',
+      processingMethod: '视频直接转换',
+      frames: [
+        { imageSrc: '/converted/frame-1.png', width: 640, height: 360 },
+        { imageSrc: '/converted/frame-2.png', width: 640, height: 360 },
+      ],
+      frameCount: 2,
+      durationMs: 2_500,
+      frameWidth: 640,
+      frameHeight: 360,
+      sourceFps: 24,
+      samplingFps: 8,
+      priceMudPoints: 0,
+    });
+
+    render(
+      <SubmissionWorkflowHarness
+        projectId="editor-project-1"
+        initialCharacterAnimationPanel={{
+          workflow: 'video-conversion',
+          conversionVideoReference: sourceReference,
+          conversionResolution: '480p',
+          promptText: '',
+          resolution: '480p',
+          ratio: '1:1',
+          frameCount: 32,
+          durationSeconds: 4,
+          status: 'idle',
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '提交角色动画' }));
+
+    await waitFor(() => {
+      expect(convertEditorCharacterAnimationVideoMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sourceVideoSrc: 'generated-character-drafts/editor/preview.mp4',
+          sourceResourceId: undefined,
+          generationInputs: expect.objectContaining({ references: [] }),
+        }),
+      );
+    });
+  });
+
   it('moves character animation panels from generating to completed', async () => {
     generateEditorCharacterAnimationMock.mockResolvedValueOnce({
       frames: [{ imageSrc: 'data:image/png;base64,frame' }],
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 414600ccd..565af53d6 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -22,6 +22,7 @@ import type {
 } from '../../services/image-editor/editorProjectClient';
 import {
   editEditorImage,
+  convertEditorCharacterAnimationVideo,
   extractEditorUiDesignAssets,
   generateEditorBackgroundMusic,
   generateEditorCharacterAnimation,
@@ -1110,7 +1111,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       // 置为 generating，若这里不发失败分支，重试会被 generating 守卫永久阻断。抛错交给
       // submitCharacterAnimation 的 catch 统一走 failed + composerOpen 恢复。
       if (!nextLayer) {
-        throw new Error('角色动作生成结果缺少可用的正式序列帧，无法放置到画布。');
+        throw new Error(
+          '角色动作生成结果缺少可用的正式序列帧，无法放置到画布。',
+        );
       }
       addGeneratedLayersToCanvas([nextLayer]);
       selectSingleLayer(nextLayer.id);
@@ -2700,6 +2703,144 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     }
     const canvasDialog = characterAnimationDialog;
     try {
+      if ((characterAnimationPanel.workflow ?? 'ai') === 'video-conversion') {
+        const source = characterAnimationPanel.conversionVideoReference;
+        if (!source || source.mediaType !== 'video') {
+          throw new Error('请选择一个 MP4 或 MOV 源视频。');
+        }
+        const canvasCompletionPlaceholder = canvasDialog
+          ? getGeneratingDialogPlaceholder(canvasDialog)
+          : undefined;
+        if (canvasDialog?.mode === 'character-animation') {
+          updateCanvasGenerationDialogById(
+            canvasDialog.id,
+            (currentDialog) => ({
+              ...currentDialog,
+              status: 'generating',
+              composerOpen: false,
+              errorMessage: undefined,
+            }),
+          );
+        }
+        const stableSource = await resolveEditorGenerationMediaReference(
+          source,
+          'video',
+          projectId,
+          { allowRegisteredIds: false },
+        );
+        const resultTitle = resolveGenerationAssetLabel(
+          characterAnimationPanel.assetLabel,
+          '视频转换序列帧',
+        );
+        // 序列帧层的 previewVideoPath 是生成结果视频，而 sourceResourceId 通常是
+        // 动作/外观参考链上的资源 id；把两者一起提交会触发后端 objectKey 一致性校验，
+        // 使“序列帧 -> 直接转换”稳定返回 400。直接转换只需要已校验的 sourceVideoSrc；
+        // 后端会用它重建 source 槽位，不能把原动画的 lineage id 冒充源视频资源。
+        const sourceResourceId =
+          source.assetKind === 'character-animation'
+            ? undefined
+            : resolveRegisteredProjectResourceId(source.resourceId);
+        const sourceReferences =
+          source.assetKind === 'character-animation'
+            ? []
+            : source.resourceId
+              ? [
+                  {
+                    id: 'source',
+                    title: '源视频',
+                    label: '源视频',
+                    refType: 'project-resource' as const,
+                    refId: source.resourceId,
+                  },
+                ]
+              : source.sourceAssetId
+                ? [
+                    {
+                      id: 'source',
+                      title: '源视频',
+                      label: '源视频',
+                      refType: 'asset' as const,
+                      refId: source.sourceAssetId,
+                    },
+                  ]
+                : [];
+        const generationInputs: CanvasGenerationInputs = {
+          version: 2,
+          action: 'character-animation.convert',
+          fields: [
+            { id: 'sourceVideoSrc', title: '源视频', value: stableSource },
+            {
+              id: 'resolution',
+              title: '最大长边',
+              value: characterAnimationPanel.conversionResolution ?? '480p',
+            },
+            {
+              id: 'processingMethod',
+              title: '处理方式',
+              value: '视频直接转换',
+            },
+          ],
+          references: sourceReferences,
+        };
+        const result = await runEditorGenerationWithWalletRefresh(
+          convertEditorCharacterAnimationVideo({
+            sourceVideoSrc: stableSource,
+            resolution: characterAnimationPanel.conversionResolution ?? '480p',
+            projectId,
+            generationInputs,
+            sourceResourceId,
+            assetFolderId,
+            assetLabel: resultTitle,
+            ...(canvasDialog && projectId && canvasCompletionPlaceholder
+              ? {
+                  canvasCompletion: {
+                    dialogId: canvasDialog.id,
+                    title: resultTitle,
+                    placeholder: canvasCompletionPlaceholder,
+                  },
+                }
+              : {}),
+          }),
+        );
+        if (
+          await applyQueuedEditorGenerationProject(
+            result,
+            projectId,
+            applyProjectSnapshot,
+            onQueuedGenerationTask,
+            onWalletBalanceMayHaveChanged,
+            onGenerationWarning,
+            canvasDialog?.id,
+          )
+        ) {
+          setCharacterAnimationPanel((currentPanel) =>
+            currentPanel
+              ? { ...currentPanel, status: 'completed' }
+              : currentPanel,
+          );
+          return;
+        }
+        if (canvasDialog) {
+          addCharacterAnimationResultLayer(
+            result,
+            resultTitle,
+            generationInputs,
+            canvasCompletionPlaceholder,
+            canvasDialog.id,
+            {
+              ...(characterAnimationSourceLayer
+                ? { sourceLayer: characterAnimationSourceLayer }
+                : {}),
+            },
+          );
+        }
+        setCharacterAnimationPanel((currentPanel) =>
+          currentPanel
+            ? { ...currentPanel, status: 'completed', result }
+            : currentPanel,
+        );
+        return;
+      }
       const submissionPlan = buildCharacterAnimationSubmissionPlan({
         panel: characterAnimationPanel,
         sourceLayer: characterAnimationSourceLayer,
@@ -2736,6 +2877,8 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         ? getGeneratingDialogPlaceholder(canvasDialog)
         : undefined;
       const selectedReference = characterAnimationPanel.references?.[0];
+      const appearanceReferences =
+        characterAnimationPanel.appearanceReferences ?? [];
       const referenceMediaType =
         selectedReference?.mediaType === 'video' ? 'video' : 'image';
       const stableReferenceSrc = selectedReference
@@ -2759,6 +2902,18 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               },
             )
           : undefined;
+      const stableAppearanceSrcs = (
+        await Promise.all(
+          appearanceReferences.map((appearanceReference) =>
+            resolveEditorGenerationMediaReference(
+              appearanceReference,
+              'image',
+              projectId,
+              { allowRegisteredIds: false, requireImageObjectReference: true },
+            ),
+          ),
+        )
+      ).filter((src): src is string => Boolean(src));
       const generationInputs = buildCharacterAnimationGenerationInputs(
         submissionPlan.promptText,
         characterAnimationSourceLayer,
@@ -2771,6 +2926,8 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           backgroundColor: characterAnimationPanel.backgroundColor,
           referenceSrc: stableReferenceSrc,
           referenceMediaType,
+          appearanceReferences,
+          appearanceReferenceSrcs: stableAppearanceSrcs,
         },
       );
       const result = await runEditorGenerationWithWalletRefresh(
@@ -2784,12 +2941,23 @@ export function useImageCanvasGenerationSubmissionWorkflow({
                   : {}),
               }
             : {}),
+          ...(stableAppearanceSrcs.length
+            ? { appearanceReferenceSrcs: stableAppearanceSrcs }
+            : {}),
           projectId,
           generationInputs,
           sourceResourceId: resolveRegisteredProjectResourceId(
             selectedReference?.resourceId ??
               characterAnimationSourceLayer?.resourceId,
           ),
+          appearanceSourceResourceIds: appearanceReferences.flatMap(
+            (appearanceReference) => {
+              const resourceId = resolveRegisteredProjectResourceId(
+                appearanceReference?.resourceId,
+              );
+              return resourceId ? [resourceId] : [];
+            },
+          ),
           assetFolderId,
           ...(canvasDialog && projectId && canvasCompletionPlaceholder
             ? {
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index e853cc749..2c94d5c47 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -109,6 +109,7 @@ function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
 
 function GenerationSurfaceHarness() {
   const [layers, setLayers] = useState<CanvasLayer[]>([createLayer()]);
+  const [selectedLayer, setSelectedLayer] = useState<CanvasLayer | null>(null);
   const [activeTool, setActiveTool] = useState<CanvasTool>('select');
   const [activeSidebarPanel, setActiveSidebarPanel] =
     useState<SidebarPanel | null>('assets');
@@ -133,6 +134,7 @@ function GenerationSurfaceHarness() {
       : null;
   const surface = useImageCanvasGenerationSurface({
     layers,
+    selectedLayer,
     canvasSize: { width: 900, height: 640 },
     viewport,
     setViewport,
@@ -217,6 +219,20 @@ function GenerationSurfaceHarness() {
       >
         切换Spine序列帧
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          const videoLayer = createLayer({
+            id: 'selected-video',
+            mediaType: 'video',
+            src: 'editor/videos/action.mp4',
+            objectKey: 'editor/videos/action.mp4',
+          });
+          setSelectedLayer(videoLayer);
+        }}
+      >
+        选中视频
+      </button>
       <button
         type="button"
         onClick={() => surface.switchGenerationTool('music')}
@@ -296,9 +312,7 @@ describe('useImageCanvasGenerationSurface', () => {
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '切换Spine序列帧' }));
-    expect(screen.getByTestId('tool').textContent).toBe(
-      'character-animation',
-    );
+    expect(screen.getByTestId('tool').textContent).toBe('character-animation');
     expect(screen.getByTestId('dialog').textContent).toBe(
       'character-animation:open:placeholder',
     );
@@ -307,15 +321,29 @@ describe('useImageCanvasGenerationSurface', () => {
     ).toBeTruthy();
   });
 
+  it('uses the direct-conversion tab when the selected layer is a video', () => {
+    render(<GenerationSurfaceHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '选中视频' }));
+    fireEvent.click(screen.getByRole('button', { name: '切换Spine序列帧' }));
+
+    expect(
+      screen
+        .getByRole('tab', { name: '视频直接转换' })
+        .getAttribute('aria-selected'),
+    ).toBe('true');
+    expect(
+      screen.getByRole('button', { name: '选择直接转换源视频' }),
+    ).toBeTruthy();
+  });
+
   it('derives composer position without rendering a standalone close button', () => {
     render(<GenerationSurfaceHarness />);
 
     fireEvent.click(screen.getByRole('button', { name: '切换生成' }));
     expect(screen.getByTestId('composer-left').textContent).toBe('450');
     expect(screen.getByTestId('composer-top').textContent).toBe('1354');
-    expect(
-      screen.queryByRole('button', { name: '关闭生成图片' }),
-    ).toBeNull();
+    expect(screen.queryByRole('button', { name: '关闭生成图片' })).toBeNull();
     expect(screen.getByTestId('dialog').textContent).toBe(
       'generate:open:placeholder',
     );
@@ -445,9 +473,7 @@ describe('useImageCanvasGenerationSurface', () => {
     expect(screen.getByRole('dialog', { name: '生成游戏音效' })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '切换音乐' }));
-    fireEvent.click(
-      screen.getByRole('menuitem', { name: '生成游戏背景音乐' }),
-    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '生成游戏背景音乐' }));
     expect(screen.getByTestId('dialog').textContent).toBe(
       'audio-background-music:open:placeholder',
     );
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 783de49df..7aed9d762 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -53,6 +53,7 @@ type ToolbarOptionTool = Extract<CanvasTool, 'music' | 'spec' | 'publication'>;
 
 type ImageCanvasGenerationSurfaceOptions = {
   layers: CanvasLayer[];
+  selectedLayer?: CanvasLayer | null;
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
   setViewport: Dispatch<SetStateAction<CanvasViewport>>;
@@ -157,6 +158,7 @@ const TOOLBAR_OPTION_CLOSE_DELAY_MS = 160;
 
 export function useImageCanvasGenerationSurface({
   layers,
+  selectedLayer = null,
   canvasSize,
   viewport,
   setViewport,
@@ -344,7 +346,24 @@ export function useImageCanvasGenerationSurface({
         return true;
       }
       if (tool === 'character-animation') {
-        generationWorkflow.openCharacterAnimationPanel();
+        const selectedWorkflow =
+          selectedLayer?.mediaType === 'video' ||
+          (selectedLayer?.assetKind === 'character-animation' &&
+            Boolean(selectedLayer.previewVideoPath?.trim()))
+            ? 'video-conversion'
+            : 'ai';
+        const selectedSourceLayer =
+          (selectedWorkflow === 'video-conversion' &&
+            (selectedLayer?.mediaType === 'video' ||
+              (selectedLayer?.assetKind === 'character-animation' &&
+                Boolean(selectedLayer.previewVideoPath?.trim())))) ||
+          (selectedWorkflow === 'ai' &&
+            selectedLayer?.assetKind === 'character')
+            ? selectedLayer
+            : undefined;
+        generationWorkflow.openCharacterAnimationPanel(selectedSourceLayer, {
+          workflow: selectedWorkflow,
+        });
         return true;
       }
       if (tool === 'music') {
@@ -376,7 +395,7 @@ export function useImageCanvasGenerationSurface({
       }
       return false;
     },
-    [generationWorkflow, openToolbarOptionMenu, setActiveTool],
+    [generationWorkflow, openToolbarOptionMenu, selectedLayer, setActiveTool],
   );
 
   const generationComposerNode = (
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 036b787be..69fbd3723 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -552,6 +552,11 @@ function GenerationWorkflowHarness({
           ?.map((reference) => reference.label)
           .join('|') ?? '-'}
       </span>
+      <span data-testid="character-animation-appearance-reference">
+        {activeDialog?.characterAnimationAppearanceReferences
+          ?.map((reference) => reference.label)
+          .join('|') ?? '-'}
+      </span>
       <span data-testid="character-spec-reference">
         {activeDialog?.characterSpecReference?.label ?? '-'}
       </span>
@@ -986,6 +991,42 @@ function GenerationWorkflowHarness({
       >
         对当前图层生成动作
       </button>
+      <button
+        type="button"
+        onClick={() => workflow.openCharacterAnimationPanel()}
+      >
+        打开视频动画
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.pickGenerationReferenceFromLayer(
+            createLayer({
+              id: 'layer-motion-video',
+              title: '动作视频',
+              mediaType: 'video',
+              assetKind: 'video',
+              src: 'generated/motion.mp4',
+            }),
+          )
+        }
+      >
+        选择动作视频
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.pickGenerationReferenceFromLayer(
+            createLayer({
+              id: 'layer-ordinary-appearance',
+              title: '普通外观图',
+              src: 'generated/appearance.png',
+            }),
+          )
+        }
+      >
+        选择普通外观图
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -3356,7 +3397,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       );
     });
     const firstRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-      EditorPixelArtSnapInput | undefined;
+      | EditorPixelArtSnapInput
+      | undefined;
     const firstDialogList =
       screen.getByTestId('generation-dialogs').textContent;
     const firstOperation = JSON.parse(
@@ -3374,7 +3416,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
 
     const retryRequest = snapImageToPerfectPixelsMock.mock.calls[1]?.[0] as
-      EditorPixelArtSnapInput | undefined;
+      | EditorPixelArtSnapInput
+      | undefined;
     expect(JSON.stringify(retryRequest)).toBe(firstRequestBytes);
     expect(retryRequest).toEqual(firstOperation.request);
     expect(retryRequest?.canvasCompletion.dialogId).toBe(
@@ -3510,7 +3553,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
         });
       loadEditorProjectMock.mockImplementation(async () => {
         const request = snapImageToPerfectPixelsMock.mock.calls.at(-1)?.[0] as
-          EditorPixelArtSnapInput | undefined;
+          | EditorPixelArtSnapInput
+          | undefined;
         return createConflictingPerfectPixelProject(
           request!.canvasCompletion.dialogId,
         );
@@ -3563,7 +3607,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       expect(retried!.reconcileUntil - retried!.submittedAt).toBe(75_000);
       expect(retried?.taskId).toBe(beforeRetry.taskId);
       const firstRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        EditorPixelArtSnapInput | undefined;
+        | EditorPixelArtSnapInput
+        | undefined;
       expect(JSON.stringify(requestAtRetryPost)).toBe(
         JSON.stringify(firstRequest),
       );
@@ -3589,7 +3634,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       );
     loadEditorProjectMock.mockImplementation(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls.at(-1)?.[0] as
-        EditorPixelArtSnapInput | undefined;
+        | EditorPixelArtSnapInput
+        | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3616,7 +3662,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
 
     const firstRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-      EditorPixelArtSnapInput | undefined;
+      | EditorPixelArtSnapInput
+      | undefined;
     const firstRequestBytes = JSON.stringify(firstRequest);
     const operation = JSON.parse(
       screen.getByTestId('perfect-pixel-operation').textContent!,
@@ -3649,7 +3696,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
 
     const retryRequest = snapImageToPerfectPixelsMock.mock.calls[1]?.[0] as
-      EditorPixelArtSnapInput | undefined;
+      | EditorPixelArtSnapInput
+      | undefined;
     expect(uploadEditorMediaAssetObjectFileMock).toHaveBeenCalledTimes(1);
     expect(JSON.stringify(retryRequest)).toBe(firstRequestBytes);
     expect(retryRequest?.canvasCompletion.dialogId).toBe(operation.operationId);
@@ -3670,7 +3718,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       .mockImplementationOnce(() => retryResult.promise);
     loadEditorProjectMock.mockImplementation(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        EditorPixelArtSnapInput | undefined;
+        | EditorPixelArtSnapInput
+        | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3707,7 +3756,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       expect(snapImageToPerfectPixelsMock).toHaveBeenCalledTimes(2);
     });
     const retryRequest = snapImageToPerfectPixelsMock.mock.calls[1]?.[0] as
-      EditorPixelArtSnapInput | undefined;
+      | EditorPixelArtSnapInput
+      | undefined;
     expect(retryRequest).toBeDefined();
 
     rerender(
@@ -3743,7 +3793,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
     loadEditorProjectMock.mockImplementation(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        EditorPixelArtSnapInput | undefined;
+        | EditorPixelArtSnapInput
+        | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3817,7 +3868,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
     loadEditorProjectMock.mockImplementationOnce(async () => {
       const request = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-        EditorPixelArtSnapInput | undefined;
+        | EditorPixelArtSnapInput
+        | undefined;
       return createConflictingPerfectPixelProject(
         request!.canvasCompletion.dialogId,
       );
@@ -3866,7 +3918,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       `pixel-art-snap-${postedOperation.operationId}`,
     );
     const postedRequest = snapImageToPerfectPixelsMock.mock.calls[0]?.[0] as
-      EditorPixelArtSnapInput | undefined;
+      | EditorPixelArtSnapInput
+      | undefined;
     expect(JSON.stringify(postedRequest)).toBe(
       JSON.stringify(postedOperation.request),
     );
@@ -4817,7 +4870,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
       }),
     );
     const readOptions = loadEditorProjectMock.mock.calls[0]?.[1] as
-      { deadlineAt?: number } | undefined;
+      | { deadlineAt?: number }
+      | undefined;
     expect(readOptions?.deadlineAt).toBeLessThanOrEqual(Date.now() + 10_000);
     expect(readOptions?.deadlineAt).toBeLessThanOrEqual(
       hydratedDialog.perfectPixelOperation!.reconcileUntil,
@@ -4889,7 +4943,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     });
     expect(loadEditorProjectMock).toHaveBeenCalledTimes(1);
     const readOptions = loadEditorProjectMock.mock.calls[0]?.[1] as
-      { deadlineAt?: number } | undefined;
+      | { deadlineAt?: number }
+      | undefined;
     expect(readOptions?.deadlineAt).toBeGreaterThanOrEqual(readStartedAt);
     expect(readOptions?.deadlineAt).toBeLessThanOrEqual(Date.now() + 10_000);
     expect(snapImageToPerfectPixelsMock).not.toHaveBeenCalled();
@@ -5126,6 +5181,24 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('dialog').textContent).toBe('-');
   });
 
+  it('allows an ordinary canvas image as optional appearance for video AI animation', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开视频动画' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择动作视频' }));
+    expect(screen.getByTestId('generation-references').textContent).toBe(
+      '动作视频',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '选择普通外观图' }));
+
+    expect(
+      screen.getByTestId('character-animation-appearance-reference')
+        .textContent,
+    ).toBe('普通外观图');
+    expect(screen.getByTestId('reference-pick-warning').textContent).toBe('-');
+  });
+
   it('creates a placed character action generation dialog for character layers', () => {
     render(<GenerationWorkflowHarness />);
 
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 3c35a3cc3..71a5afb2f 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -25,6 +25,7 @@ import {
   type EditorProjectResourceSnapshot,
   type EditorProjectSnapshot,
   loadEditorProject,
+  removeEditorCharacterAnimationBackground,
   splitEditorCharacterAnimationFrames,
   splitEditorIconSpritesheet,
 } from '../../services/image-editor/editorProjectClient';
@@ -733,7 +734,8 @@ function findSourceAnimationLayer(
   return (
     layers.find(
       (layer) =>
-        (layer.resourceId === sourceResourceId || layer.id === sourceResourceId) &&
+        (layer.resourceId === sourceResourceId ||
+          layer.id === sourceResourceId) &&
         layer.assetKind === 'character',
     ) ?? null
   );
@@ -954,6 +956,11 @@ function createCharacterAnimationPanelFromDialog(
   return {
     sourceLayerId: dialog.sourceLayerId,
     references: dialog.generationReferences ?? [],
+    workflow: dialog.characterAnimationWorkflow ?? 'ai',
+    appearanceReferences: dialog.characterAnimationAppearanceReferences ?? [],
+    conversionVideoReference: dialog.characterAnimationConversionVideoReference,
+    conversionResolution:
+      dialog.characterAnimationConversionResolution ?? '480p',
     promptText: dialog.prompt,
     assetLabel: dialog.assetLabel,
     backgroundColor: dialog.characterAnimationBackgroundColor,
@@ -995,6 +1002,11 @@ function applyCharacterAnimationPanelToDialog(
     assetLabel: panel.assetLabel,
     sourceLayerId: panel.sourceLayerId,
     generationReferences: panel.references,
+    characterAnimationWorkflow: panel.workflow ?? 'ai',
+    characterAnimationAppearanceReferences: panel.appearanceReferences ?? [],
+    characterAnimationConversionVideoReference: panel.conversionVideoReference,
+    characterAnimationConversionResolution:
+      panel.conversionResolution ?? '480p',
     characterAnimationBackgroundColor: panel.backgroundColor,
     characterAnimationResolution: panel.resolution,
     characterAnimationRatio: panel.ratio,
@@ -1145,6 +1157,13 @@ export function useImageCanvasGenerationWorkflow({
     splittingCharacterAnimationLayerIds,
     setSplittingCharacterAnimationLayerIds,
   ] = useState<Set<string>>(() => new Set());
+  const removingBackgroundCharacterAnimationLayerIdsRef = useRef(
+    new Set<string>(),
+  );
+  const [
+    removingBackgroundCharacterAnimationLayerIds,
+    setRemovingBackgroundCharacterAnimationLayerIds,
+  ] = useState<Set<string>>(() => new Set());
   const perfectPixelLayerIdsRef = useRef(new Set<string>());
   // 中文注释：本会话仍在执行的 inline 占位 id。到期清理只该针对**别人**留下的孤儿，
   // 而它无法从 dialog 状态区分「已死会话留下的」和「本会话正在跑的」——两者都是
@@ -1623,11 +1642,15 @@ export function useImageCanvasGenerationWorkflow({
   );
 
   const openCharacterAnimationPanel = useCallback(
-    (layer?: CanvasLayer) => {
+    (
+      layer?: CanvasLayer,
+      options?: { workflow?: 'ai' | 'video-conversion' },
+    ) => {
       const draft = createCharacterAnimationGenerationDialogDraft({
         canvasSize,
         viewport,
         layer,
+        workflow: options?.workflow,
       });
       if (!draft) {
         return;
@@ -1892,10 +1915,10 @@ export function useImageCanvasGenerationWorkflow({
       );
       const hasInvalidVersionedGenerationInputs = Boolean(
         sourceLayer.generationInputsHydrationState === 'invalid-versioned' ||
-        (sourceLayer.generationInputs &&
-          (sourceLayer.generationInputs.version !== undefined ||
-            sourceLayer.generationInputs.action !== undefined) &&
-          !decodedGenerationInputs.ok),
+          (sourceLayer.generationInputs &&
+            (sourceLayer.generationInputs.version !== undefined ||
+              sourceLayer.generationInputs.action !== undefined) &&
+            !decodedGenerationInputs.ok),
       );
       if (hasInvalidVersionedGenerationInputs) {
         showGenerationWarning(
@@ -3608,6 +3631,91 @@ export function useImageCanvasGenerationWorkflow({
     ],
   );
 
+  const removeSelectedCharacterAnimationBackground = useCallback(
+    async (sourceLayer: CanvasLayer) => {
+      if (
+        !canSplitCharacterAnimationFrames(sourceLayer) ||
+        !projectId ||
+        removingBackgroundCharacterAnimationLayerIdsRef.current.has(
+          sourceLayer.id,
+        )
+      ) {
+        return;
+      }
+      removingBackgroundCharacterAnimationLayerIdsRef.current.add(
+        sourceLayer.id,
+      );
+      setRemovingBackgroundCharacterAnimationLayerIds((currentLayerIds) => {
+        const nextLayerIds = new Set(currentLayerIds);
+        nextLayerIds.add(sourceLayer.id);
+        return nextLayerIds;
+      });
+      closeGenerationTransientState();
+      setImageContextMenu(null);
+      setMetadataLayer(null);
+      setCropExpandPanel(null);
+      setQuickEditPanel(null);
+      try {
+        const result = await removeEditorCharacterAnimationBackground({
+          projectId,
+          sourceLayerId: sourceLayer.id,
+          sourceResourceId: sourceLayer.resourceId,
+          assetFolderId,
+          assetLabel: `${sourceLayer.title} 去背景`,
+          generationInputs: buildDeterministicGenerationInputs(
+            'character-animation.remove-background',
+            sourceLayer,
+          ),
+        });
+        await applyQueuedEditorGenerationProject(
+          result,
+          projectId,
+          applyProjectSnapshot,
+          refreshTaskListForQueuedGeneration,
+          onWalletBalanceMayHaveChanged,
+          showGenerationWarning,
+        );
+        try {
+          await Promise.resolve(refreshAssetLibrary?.());
+        } catch {
+          // 服务端已原子落库成功；列表刷新失败不能把成功事实伪装成去背景失败。
+        }
+      } catch (error) {
+        window.alert(
+          error instanceof Error && error.message.trim()
+            ? error.message
+            : '去除序列帧背景失败',
+        );
+      } finally {
+        removingBackgroundCharacterAnimationLayerIdsRef.current.delete(
+          sourceLayer.id,
+        );
+        setRemovingBackgroundCharacterAnimationLayerIds((currentLayerIds) => {
+          if (!currentLayerIds.has(sourceLayer.id)) {
+            return currentLayerIds;
+          }
+          const nextLayerIds = new Set(currentLayerIds);
+          nextLayerIds.delete(sourceLayer.id);
+          return nextLayerIds;
+        });
+      }
+    },
+    [
+      applyProjectSnapshot,
+      assetFolderId,
+      closeGenerationTransientState,
+      onWalletBalanceMayHaveChanged,
+      projectId,
+      refreshAssetLibrary,
+      refreshTaskListForQueuedGeneration,
+      setCropExpandPanel,
+      setImageContextMenu,
+      setMetadataLayer,
+      setQuickEditPanel,
+      showGenerationWarning,
+    ],
+  );
+
   const rejectReferenceMutationWhileUploadPending = useCallback(() => {
     if (!hasPendingImageReferenceUploads) {
       return false;
@@ -3674,16 +3782,25 @@ export function useImageCanvasGenerationWorkflow({
         return;
       }
       let rejectedLimit: number | null = null;
-      let rejectedCharacterReference = false;
+      let rejectedCharacterReference: 'video' | 'character' | null = null;
       setGenerateDialog((currentDialog) => {
-        if (
-          currentDialog?.mode === 'character-animation' &&
-          layer.mediaType !== 'video' &&
-          layer.assetKind !== 'character' &&
-          layer.assetKind !== 'character-animation'
-        ) {
-          rejectedCharacterReference = true;
-          return currentDialog;
+        if (currentDialog?.mode === 'character-animation') {
+          const isVideoAppearanceReference =
+            currentDialog.characterAnimationWorkflow !== 'video-conversion' &&
+            currentDialog.generationReferences?.[0]?.mediaType === 'video';
+          const isAllowedCharacterAnimationReference =
+            currentDialog.characterAnimationWorkflow === 'video-conversion'
+              ? layer.mediaType === 'video' ||
+                (layer.assetKind === 'character-animation' &&
+                  Boolean(layer.previewVideoPath?.trim()))
+              : layer.mediaType !== 'audio';
+          if (!isAllowedCharacterAnimationReference) {
+            rejectedCharacterReference =
+              currentDialog.characterAnimationWorkflow === 'video-conversion'
+                ? 'video'
+                : 'character';
+            return currentDialog;
+          }
         }
         if (
           currentDialog &&
@@ -3702,7 +3819,11 @@ export function useImageCanvasGenerationWorkflow({
         return appendGenerationReference(currentDialog, layer);
       });
       if (rejectedCharacterReference) {
-        showGenerationWarning('请选择角色图');
+        showGenerationWarning(
+          rejectedCharacterReference === 'video'
+            ? '请选择视频'
+            : '请选择图片、视频或序列帧动画',
+        );
         return;
       }
       if (rejectedLimit !== null) {
@@ -4673,6 +4794,8 @@ export function useImageCanvasGenerationWorkflow({
       splittingIconSpritesheetLayerIds,
       splitSelectedCharacterAnimationFrames,
       splittingCharacterAnimationLayerIds,
+      removeSelectedCharacterAnimationBackground,
+      removingBackgroundCharacterAnimationLayerIds,
       taskListRefreshKey,
       refreshTaskList,
       isTaskSidebarOpen,
diff --git a/src/index.css b/src/index.css
index c778e0dac..8b4c379aa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6841,6 +6841,55 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   padding: 1rem 1rem 0.78rem;
 }
 
+.image-canvas-editor__workflow-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.28rem;
+  grid-column: 1 / -1;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 0.72rem;
+  background: #f1f5f9;
+  padding: 0.28rem;
+}
+
+.image-canvas-editor__workflow-tab {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  border: 1px solid transparent;
+  border-radius: 0.52rem;
+  background: transparent;
+  padding: 0.5rem 0.6rem;
+  color: #64748b;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.image-canvas-editor__workflow-tab:hover {
+  color: #0f172a;
+}
+
+.image-canvas-editor__workflow-tab[aria-selected='true'] {
+  border-color: var(--image-canvas-brand-border);
+  background: #ffffff;
+  color: var(--image-canvas-brand-accent-strong);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+}
+
+.image-canvas-editor__workflow-tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .image-canvas-editor__generation-ref {
   display: flex;
   width: auto;
@@ -7249,12 +7298,18 @@ button.image-canvas-editor__reference-chip:disabled {
   width: 8.5rem;
 }
 
-.image-canvas-editor__image-style-toggle {
+.image-canvas-editor__generation-toggles {
   grid-column: 3;
+  display: inline-flex;
+  align-items: center;
+  justify-self: end;
+  gap: 0.65rem;
+}
+
+.image-canvas-editor__image-style-toggle {
   display: inline-flex;
   min-height: 2.25rem;
   align-items: center;
-  justify-self: end;
   gap: 0.38rem;
   padding: 0 0.5rem;
   color: #475569;
@@ -7725,22 +7780,6 @@ button.image-canvas-editor__reference-chip:disabled {
   grid-column: 1 / -1;
 }
 
-.image-canvas-editor__reference-chip--character-sheet
-  .image-canvas-editor__reference-chip-icon {
-  color: #db2777;
-}
-
-.image-canvas-editor__reference-chip--active {
-  border-color: #a5b4fc;
-  background: #eef2ff;
-  color: #3730a3;
-}
-
-button.image-canvas-editor__reference-chip--active:hover:not(:disabled) {
-  border-color: #a5b4fc;
-  background: #e0e7ff;
-}
-
 .image-canvas-editor__publication-composer {
   grid-template-rows: auto auto auto;
 }
@@ -8826,6 +8865,13 @@ button.image-canvas-editor__reference-chip--active:hover:not(:disabled) {
   --auto-grow-editor-max-height: 16rem;
 }
 
+.image-canvas-editor__character-animation-presets-field,
+.image-canvas-editor__character-animation-conversion-resolution-field {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: 0.5rem;
+}
+
 .image-canvas-editor__character-animation-presets {
   display: flex;
   grid-column: 1 / -1;
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index f1dbd6f5f..82db62cd1 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -19,6 +19,7 @@ import {
   EDITOR_SOUND_EFFECT_PROMPT_OPTIMIZE_TIMEOUT_MS,
   extractEditorUiDesignAssets,
   generateEditorBackgroundMusic,
+  convertEditorCharacterAnimationVideo,
   generateEditorCharacterAnimation,
   generateEditorIconSpec,
   generateEditorIconSpritesheet,
@@ -1824,7 +1825,10 @@ describe('editorProjectClient', () => {
       assetLabel: '勇者待机',
     });
 
-    expect(result.taskId).toBe('character-animation-1');
+    expect(result).toMatchObject({
+      resultType: 'ai',
+      taskId: 'character-animation-1',
+    });
     expect(requestJsonMock).toHaveBeenCalledWith(
       '/api/editor/character-animations/generations',
       expect.objectContaining({
@@ -1852,6 +1856,61 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('converts editor videos without adding AI compatibility fields', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      taskId: 'video-conversion-1',
+      processingMethod: '视频直接转换',
+      frames: [
+        {
+          imageSrc: '/converted/frame-1.png',
+          width: 640,
+          height: 360,
+        },
+        {
+          imageSrc: '/converted/frame-2.png',
+          width: 640,
+          height: 360,
+        },
+      ],
+      frameCount: 2,
+      durationMs: 2_500,
+      frameWidth: 640,
+      frameHeight: 360,
+      sourceFps: 29.97,
+      samplingFps: 0.8,
+      priceMudPoints: 0,
+    });
+
+    const result = await convertEditorCharacterAnimationVideo({
+      sourceVideoSrc: 'users/user-1/source.mov',
+      resolution: '720p',
+      assetLabel: '视频转换序列帧',
+    });
+
+    expect(result).toMatchObject({
+      resultType: 'video-conversion',
+      processingMethod: '视频直接转换',
+      priceMudPoints: 0,
+    });
+    expect(result).not.toHaveProperty('model');
+    expect(result).not.toHaveProperty('prompt');
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/character-animations/video-conversions',
+      expect.objectContaining({
+        body: JSON.stringify({
+          sourceVideoSrc: 'users/user-1/source.mov',
+          resolution: '720p',
+          assetLabel: '视频转换序列帧',
+        }),
+      }),
+      '视频直接转换序列帧失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: editorRetryOptionsExpectation,
+      }),
+    );
+  });
+
   it('generates editor videos through the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       videoSrc: '/generated-editor-videos/video-task-1/preview.mp4',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index ecde35534..d83f7850a 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -45,8 +45,12 @@ const EDITOR_UI_DESIGN_ASSET_EXTRACTION_API =
   '/api/editor/ui-designs/assets/extractions';
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
+const EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_API =
+  '/api/editor/character-animations/video-conversions';
 const EDITOR_CHARACTER_ANIMATION_FRAME_SPLIT_API =
   '/api/editor/character-animations/frame-splits';
+const EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_API =
+  '/api/editor/character-animations/background-removals';
 const EDITOR_VIDEO_GENERATION_API = '/api/editor/videos/generations';
 const EDITOR_SOUND_EFFECT_GENERATION_API =
   '/api/editor/audios/sound-effects/generations';
@@ -213,6 +217,8 @@ export type EditorAssetGenerationInputs = {
     | 'audio.sound-effect.generate'
     | 'audio.background-music.generate'
     | 'character-animation.generate'
+    | 'character-animation.convert'
+    | 'character-animation.remove-background'
     | 'image.edit'
     | 'ui-design.extract-assets'
     | 'image.perfect-pixel'
@@ -226,7 +232,9 @@ export type EditorAssetGenerationInputs = {
 };
 
 export type EditorProjectResourceSourceType =
-  'uploaded' | 'generated' | 'mock_generated';
+  | 'uploaded'
+  | 'generated'
+  | 'mock_generated';
 
 export type EditorProjectResourceSnapshot = {
   resourceId: string;
@@ -342,7 +350,6 @@ export type EditorImageGenerationInput = {
   style?: EditorImageGenerationStyle;
   aspectRatio?: string;
   imageSize?: string;
-  characterSheetViews?: 4 | 8;
   referenceImageSrcs?: string[];
   projectId?: string | null;
   assetKind?: string | null;
@@ -549,7 +556,12 @@ export type EditorCharacterAnimationBackgroundColor =
   | 'purple';
 
 export type EditorCharacterAnimationRatio =
-  'same' | '1:1' | '4:3' | '16:9' | '9:16' | '3:4';
+  | 'same'
+  | '1:1'
+  | '4:3'
+  | '16:9'
+  | '9:16'
+  | '3:4';
 
 export type EditorCharacterAnimationFrameCount = 32 | 40 | 48;
 
@@ -563,6 +575,7 @@ export type EditorCharacterAnimationGenerationInput = {
   sourceHeight?: number;
   referenceMediaType?: 'image' | 'video';
   referenceSrc?: string;
+  appearanceReferenceSrcs?: string[];
   promptText: string;
   backgroundColor?: EditorCharacterAnimationBackgroundColor;
   /** 纯色抠像背景色（hex 或 'auto'），继承生图的背景色选项行为。 */
@@ -576,10 +589,40 @@ export type EditorCharacterAnimationGenerationInput = {
   canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
   generationInputs?: EditorAssetGenerationInputs | null;
   sourceResourceId?: string | null;
+  appearanceSourceResourceIds?: string[];
   assetFolderId?: string | null;
   assetLabel?: string | null;
 };
 
+export type EditorCharacterAnimationVideoConversionInput = {
+  sourceVideoSrc: string;
+  resolution: EditorCharacterAnimationResolution;
+  projectId?: string | null;
+  canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
+  generationInputs?: EditorAssetGenerationInputs | null;
+  sourceResourceId?: string | null;
+  assetFolderId?: string | null;
+  assetLabel?: string | null;
+};
+
+export type EditorCharacterAnimationVideoConversionResult = {
+  resultType: 'video-conversion';
+  taskId: string;
+  processingMethod: '视频直接转换';
+  frames: EditorImageSequenceFrameResult[];
+  frameCount: number;
+  durationMs: number;
+  frameWidth: number;
+  frameHeight: number;
+  sourceFps: number;
+  samplingFps: number;
+  priceMudPoints: 0;
+  project?: EditorProjectSnapshot | null;
+  resource?: EditorProjectResourceSnapshot | null;
+  asset?: EditorAssetSnapshot | null;
+  queueState?: ExternalGenerationJobStatusRecord | null;
+};
+
 export type EditorImageSequenceFrameResult = {
   imageSrc: string;
   objectKey?: string | null;
@@ -588,7 +631,32 @@ export type EditorImageSequenceFrameResult = {
   height: number;
 };
 
+export type EditorCharacterAnimationBackgroundRemovalInput = {
+  projectId: string;
+  sourceLayerId: string;
+  sourceResourceId: string;
+  assetFolderId?: string | null;
+  assetLabel?: string | null;
+  canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
+  generationInputs?: EditorAssetGenerationInputs | null;
+};
+
+export type EditorCharacterAnimationBackgroundRemovalResult = {
+  taskId: string;
+  frames: EditorImageSequenceFrameResult[];
+  frameCount: number;
+  durationMs: number;
+  frameWidth: number;
+  frameHeight: number;
+  priceMudPoints: number;
+  project?: EditorProjectSnapshot | null;
+  resource?: EditorProjectResourceSnapshot | null;
+  asset?: EditorAssetSnapshot | null;
+  queueState?: ExternalGenerationJobStatusRecord | null;
+};
+
 export type EditorCharacterAnimationGenerationResult = {
+  resultType: 'ai';
   taskId: string;
   model: 'seedance2.0-fast';
   prompt: string;
@@ -604,6 +672,10 @@ export type EditorCharacterAnimationGenerationResult = {
   queueState?: ExternalGenerationJobStatusRecord | null;
 };
 
+export type EditorCharacterAnimationResult =
+  | EditorCharacterAnimationGenerationResult
+  | EditorCharacterAnimationVideoConversionResult;
+
 export type EditorCharacterAnimationFrameSplitInput =
   SharedEditorCharacterAnimationFrameSplitInput;
 
@@ -621,7 +693,12 @@ export type EditorVideoModel =
 export type EditorVideoResolution = '480p' | '720p' | '1080p';
 export type EditorVideoSoundMode = 'on' | 'off';
 export type EditorVideoAspectRatio =
-  '16:9' | '9:16' | '1:1' | '4:3' | '3:4' | '21:9';
+  | '16:9'
+  | '9:16'
+  | '1:1'
+  | '4:3'
+  | '3:4'
+  | '21:9';
 
 export type EditorVideoGenerationInput = {
   prompt: string;
@@ -1201,9 +1278,6 @@ export async function generateEditorImage(input: EditorImageGenerationInput) {
       ...(input.style ? { style: input.style } : {}),
       ...(input.aspectRatio ? { aspectRatio: input.aspectRatio } : {}),
       ...(input.imageSize ? { imageSize: input.imageSize } : {}),
-      ...(input.characterSheetViews
-        ? { characterSheetViews: input.characterSheetViews }
-        : {}),
       ...(input.referenceImageSrcs?.length
         ? { referenceImageSrcs: input.referenceImageSrcs }
         : {}),
@@ -1512,7 +1586,17 @@ export async function generateEditorCharacterAnimation(
   if (input.sourceImageSrc) {
     assertStableEditorMediaReference(input.sourceImageSrc, '角色动画源图');
   }
-  return requestJson<EditorCharacterAnimationGenerationResult>(
+  if (input.appearanceReferenceSrcs?.length) {
+    for (const appearanceReferenceSrc of input.appearanceReferenceSrcs) {
+      assertStableEditorMediaReference(
+        appearanceReferenceSrc,
+        '角色外观参考图',
+      );
+    }
+  }
+  const result = await requestJson<
+    Omit<EditorCharacterAnimationGenerationResult, 'resultType'>
+  >(
     EDITOR_CHARACTER_ANIMATION_GENERATION_API,
     jsonRequest('POST', {
       ...input,
@@ -1526,6 +1610,9 @@ export async function generateEditorCharacterAnimation(
       ...(input.sourceResourceId
         ? { sourceResourceId: input.sourceResourceId }
         : {}),
+      ...(input.appearanceSourceResourceIds?.length
+        ? { appearanceSourceResourceIds: input.appearanceSourceResourceIds }
+        : {}),
     }),
     '生成角色动画失败',
     {
@@ -1533,6 +1620,25 @@ export async function generateEditorCharacterAnimation(
       retry: EDITOR_GENERATION_REQUEST_RETRY_OPTIONS,
     },
   );
+  return { ...result, resultType: 'ai' as const };
+}
+
+export async function convertEditorCharacterAnimationVideo(
+  input: EditorCharacterAnimationVideoConversionInput,
+) {
+  assertStableEditorMediaReference(input.sourceVideoSrc, '直接转换源视频');
+  const result = await requestJson<
+    Omit<EditorCharacterAnimationVideoConversionResult, 'resultType'>
+  >(
+    EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_API,
+    jsonRequest('POST', input),
+    '视频直接转换序列帧失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: EDITOR_GENERATION_REQUEST_RETRY_OPTIONS,
+    },
+  );
+  return { ...result, resultType: 'video-conversion' as const };
 }
 
 export async function splitEditorCharacterAnimationFrames(
@@ -1546,6 +1652,32 @@ export async function splitEditorCharacterAnimationFrames(
   );
 }
 
+export async function removeEditorCharacterAnimationBackground(
+  input: EditorCharacterAnimationBackgroundRemovalInput,
+) {
+  return requestJson<EditorCharacterAnimationBackgroundRemovalResult>(
+    EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_API,
+    jsonRequest('POST', {
+      projectId: input.projectId,
+      sourceLayerId: input.sourceLayerId,
+      sourceResourceId: input.sourceResourceId,
+      ...(input.assetFolderId ? { assetFolderId: input.assetFolderId } : {}),
+      ...(input.assetLabel ? { assetLabel: input.assetLabel } : {}),
+      ...(input.canvasCompletion
+        ? { canvasCompletion: input.canvasCompletion }
+        : {}),
+      ...(input.generationInputs
+        ? { generationInputs: input.generationInputs }
+        : {}),
+    }),
+    '去除序列帧背景失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: EDITOR_GENERATION_REQUEST_RETRY_OPTIONS,
+    },
+  );
+}
+
 export async function generateEditorVideo(input: EditorVideoGenerationInput) {
   assertStableEditorVideoReferences(input);
   return requestJson<EditorVideoGenerationResponse>(
-- 
2.52.0


From 0123f3db7664e11bfbf605b4df5e6303cdcfe6db Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Thu, 13 Aug 2026 10:13:31 +0800
Subject: [PATCH 04/15] local: stash the document

---
 ...��作Agent Runtime交互边界重构实施计划-2026-08-12.md | 319 ++++++++++++++++++
 1 file changed, 319 insertions(+)
 create mode 100644 docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md

diff --git a/docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md b/docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md
new file mode 100644
index 000000000..d3dfe8d0c
--- /dev/null
+++ b/docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md	
@@ -0,0 +1,319 @@
+# AI 游戏创作 Agent Runtime 交互边界重构实施计划
+
+更新时间：`2026-08-12`
+状态：评审中
+
+## 0. 目标与范围
+
+统一 Consumer（GUI / CLI / 自动化测试）与 Runtime 之间的公开交互边界，达到：
+
+- **Consumer 只做两件事**：`render(state)` 与 `dispatch(intent)`，中间不保留决策。
+- **交互 Loop 收归后端 Supervisor Shell**：Consumer 不再根据 Runtime 状态自行选择 start / steer / confirm / retry / resume。
+- **GUI、CLI、测试夹具是同一套协议的平等 Consumer**，GUI 没有任何特权通道。
+- **Runner 自驱**：工作发现、恢复、继续执行不依赖 Consumer 在线或主动触发。
+
+本重构**不重新设计 Runtime 内部执行模型**（Part D 保持黑盒），只补充 Shell 需要的边界能力。
+
+### 不在本轮
+
+- Agent 执行状态机（main_loop / task_queue / recovery）内部重构。
+- Runner 进程生命周期策略（开机自启 / 无 GUI 常驻）——自驱只限于"Runner 存活期间"，保留 GUI 启动 + GUI-owner watchdog。
+- LLM / Provider / 提示词体系改动。
+
+---
+
+## 1. 交互 Loop 协议（Interaction Contract）
+
+这是 Consumer 与 Supervisor Shell 之间唯一的公开协议。协议不绑定 transport（Tauri 命令 / Runner 协议 / 进程内函数均可用同一套 DTO）。
+
+### 1.1 出向事件（Shell → Consumer）
+
+| 事件 | 含义 | 现状落点 | 是否新增 |
+|---|---|---|---|
+| `progress` | 运行推进 | `status/phase` + `recentEvents` + `waitingOn/nextStep`，经 `read_game_creator_agent_runtimes` 与 `game-creator-agent-progress` 事件 | 收敛 |
+| `needs_input` | 等待澄清回答 | `userInputRequest` / phase `waiting-for-user-input`（`AgentRuntimeUserInputRequest`） | 收敛 |
+| `approval_required` | 等待开发者批准工具动作 | `pendingToolAction` / phase `waiting-for-confirmation`（`AgentRuntimePendingToolActionSummary`） | 收敛 |
+| `tool_request` | 工具已请求/执行中 | 现散在 `recentToolCalls` + phase `action` | **新增派生** |
+| `artifact` | 产物 / manifest 变化 | `game-creator-manifest-invalidated` + finalization journal | 收敛 |
+| `done` | 本轮终态 | `completed` + `AgentRuntimeFinalizationJournal` + responseStream `committed` | 收敛 |
+| `error` | 失败 / 需人工核对 | `failed` / `needs-reconciliation` + `error` | 收敛 |
+
+协议 DTO（camelCase 序列化，与现有一致）：
+
+```rust
+enum AgentRuntimeOutboundEvent {
+    Progress(AgentRuntimeProgress),
+    NeedsInput { request: AgentRuntimeUserInputRequestView },
+    ApprovalRequired { action: AgentRuntimePendingToolActionSummary },
+    ToolRequest(AgentRuntimeToolRequest),          // 新增：Shell 从 recentToolCalls+phase 投影
+    Artifact(AgentRuntimeArtifactEvent),           // 收敛 manifest-invalidated + finalization
+    Done(AgentRuntimeDoneEvent),
+    Error(AgentRuntimePublicError),
+}
+
+struct AgentRuntimeProgress {
+    project_path: String, agent_id: String, run_id: String,
+    status: String, phase: String,
+    current_task: String, current_action: String,
+    plan_steps: Vec<AgentRuntimePlanStep>, active_plan_step_index: Option<u32>,
+    waiting_on: String, next_step: String,   // Shell 负责填充，Consumer 不再映射 phase→文案
+    updated_at: u64,
+}
+```
+
+> 与现状的关键差异：`progress` 里的 `waiting_on`/`next_step` 由 **Shell 填充**。当前是前端在 `model.ts:612/644` 硬编码 phase→中文文案，收归 Shell 后前端删除该映射。
+
+### 1.2 入向命令（Consumer → Shell）
+
+| 命令 | 吸收的旧命令 | 说明 |
+|---|---|---|
+| `submit_intent` | `start_*` / `steer_*` | 一条消息可能 steer 进现有 run，也可能 start 新 run，由 Shell 判定 |
+| `answer` | `answer_game_creator_agent_runtime_user_input` | 回答澄清 |
+| `approve` | `confirm_*` / `reject_*` | 批准或拒绝，含 policy 确认卡 |
+| `cancel` | `cancel_game_creator_agent_runtime_task` | 取消 |
+| `resume` | `resume_*` / `confirm_resume_*` / `retry_*` / `confirm_retry_*` / `schedule_game_creator_agent_ready_tasks` | 恢复/重试/调度统一入口 |
+
+命令签名：
+
+```rust
+#[tauri::command]
+async fn submit_game_creator_agent_intent(
+    project_path: String, session_id: String, intent: String,
+    run_profile: Option<String>, source: Option<String>,
+) -> Result<AgentRuntimeIntentResult, String>;
+
+#[tauri::command]
+async fn answer_game_creator_agent_interaction(
+    project_path: String, run_id: String, action_id: String,
+    request_id: String, response_id: String, answers: BTreeMap<String, String>,
+) -> Result<AgentRuntimeResult, String>;
+
+#[tauri::command]
+async fn approve_game_creator_agent_interaction(
+    project_path: String, run_id: String, action_id: String,
+    approved: bool, note: String,
+) -> Result<AgentRuntimeResult, String>;
+
+#[tauri::command]
+async fn cancel_game_creator_agent_run(
+    project_path: String, agent_id: String, run_id: String,
+) -> Result<AgentRuntimeResult, String>;
+
+#[tauri::command]
+async fn resume_game_creator_agent_project(
+    project_path: String,
+) -> Result<Vec<AgentRuntimeResult>, String>;
+```
+
+协议外 API（不进交互 Loop，作为管理面保留在 Shell 上）：goal CRUD、`compact`、会话管理、配置读写。
+
+### 1.3 统一 InteractionRequired 语义
+
+Shell 向 Consumer 暴露"必须等待外部回答"的单一概念，替代现在分散的 `pendingToolAction` / `userInputRequest` / policy 确认卡：
+
+```rust
+enum AgentRuntimeInteractionRequired {
+    UserInput { request: AgentRuntimeUserInputRequestView },
+    Approval { action: AgentRuntimePendingToolActionSummary },
+    PolicyApproval { policy: String },   // 新增：吸收 confirm_resume/confirm_retry 的 agent.resume 确认卡
+}
+```
+
+> 现状的 `confirm_resume`（`commands.rs:1148`）与 `confirm_retry`（`commands.rs:1020`）是"要求用户确认策略"的产物，由 GUI 弹确认卡实现。收归 Shell 后，Shell 评估 `enforce_project_auto_permission_policy`（`verification.rs:813`），需要确认时返回 `InteractionRequired::PolicyApproval`，用户确认后经统一的 `approve` 命令继续。
+
+---
+
+## 2. 现状盘点与复用清单
+
+### 2.1 可直接复用的资产（近 1 个月内形成，活跃演进期）
+
+| 资产 | 位置 | 复用方式 |
+|---|---|---|
+| CLI 交互决策状态机 | `swarm_cli/turn_dispatch.rs:245` `decide_interaction_action`、`:48` `handle_swarm_user_turn`（steer/start、Reply/Execute/Resume、goal 门禁） | **整体上提**到后端 Shell（纯 Rust、无 UI 纠缠） |
+| Runner 自驱续跑定时器 | `runtime_driver/provider_recovery.rs` 的 `schedule_waiting_provider_retry_wake_after_lane_release` 等 | 已存在，P4 直接复用 |
+| 确定性 e2e | `scripts/agent-runtime-deterministic-playable-e2e.mjs` + `deterministic-lane-defense-provider.mjs`（`expectedProviderStats`/`expectedChildReport` 断言） | P0 基线扩展（协议级 trace） |
+| 版本协商 fallback | 前端 `model.ts:1186-1226` `isMissing*CommandError` | 迁移期新旧并存的标准模式 |
+| 逐命令幂等 | `accepted_run_id`（`runtime_state.rs:1548`）、runner requestId 缓存（`runner/protocol.rs:353`）、goal CAS | P1 设计直接沿用 |
+| 进程内集成测试 | `src-tauri/tests/`（`command_runtime.rs`、`runtime_actions/`、`collaboration/`、`goal.rs`） | P1-P6 每步回归的护栏 |
+
+### 2.2 需要收敛/改造的点
+
+| 点 | 位置 | 动作 |
+|---|---|---|
+| 前端 phase→文案映射 | `model.ts:612/644/974/1498/1554` | Shell 填充 `waiting_on/next_step` 后删除 |
+| 前端 steer/start 决策 | `model.ts:849` `submitProjectSupervisorRuntimeTask`、`App.tsx:5791` | 迁入 Shell（`submit_intent`） |
+| 前端 confirm/retry/resume 门禁 | `model.ts:1131-1154`、`panels.tsx:381-497` | 由 `InteractionRequired` + `approve/resume` 取代 |
+| 前端跨轮状态修补 | `model.ts:244` `normalizeAgentRuntimeState`、`:385` `mergeAgentRuntimeStateIntoMap` | 依赖 P2 Snapshot 稳定后删除 |
+| CLI 独立状态机 | `swarm_cli/turn_dispatch.rs` | 上提 Shell，CLI 只留终端交互（stdin/stdout/observer） |
+| 重复触发恢复 | `App.tsx:2799/10341`、`useDeveloperAgentPanel.ts:684`（启动时 resume）、`App.tsx:10550`（devMode schedule 按钮） | P4 后删除，由 Runner 自驱 |
+
+---
+
+## 3. 分阶段实施计划
+
+> 主线：**先建安全网 → 建统一入口 → 统一状态读取 → 收回决策 → Runner 自驱 → 迁移全部 Consumer → 删旧面**。
+
+### P0 行为基线（安全网）
+
+**目标**：在改动前建立可判断"公开行为是否变化"的验证能力。
+
+- 复用 `deterministic-lane-defense-provider.mjs`，在现有 `agent-runtime-deterministic-playable-e2e.mjs` 基础上**增加协议级事件 trace**：
+  - 录制一条确定性完整会话的**出向事件序列**（progress/needs_input/approval_required/done/error 的顺序与关键载荷），归一化 timestamp、`run_id`/`steer_id`/`request_id` 随机 ID、`accepted_run_id` 对账值。
+  - 断言当前 master 的 trace 与预期一致（快照 diff）。
+- 建立统一的回归命令，P1-P6 每阶段结束必跑：
+  - 确定性 e2e（功能正确性）
+  - `src-tauri/tests/` 进程内集成测试（单元级护栏）
+  - 协议级 trace（迁移等价性）
+- **不动 Runtime 代码**，只建安全网。
+
+**验收**：上述三条命令在当前 master 全绿，trace 基线文件入库。
+
+### P1+P2 统一入口 + 状态读取（adapter + Snapshot 投影）
+
+**目标**：Consumer 改走新协议调用旧实现；状态读取收敛为稳定的公开 Snapshot。**旧接口全保留**为迁移期兼容路径。
+
+**P1 适配器（`submit_intent` / `approve` / `answer` / `cancel` / `resume` 新命令）**：
+
+> **P1 与 P3 的边界**：P1 只做"命令可用 + `submit_intent` 内部判定 steer/start"。`answer`/`approve`/`resume` 在 P1 **只是入口封装**（内部调旧函数），"收到交互该调哪个命令、能否重试"的判定**仍在前端**；到 P3 才把判定收走，前端只剩 `submit`/`respond` 两种动作。
+
+- 新增 `src-tauri/src/agent/supervisor_shell/`，内含：
+  - `intent.rs`：`submit_intent` 内部路由——读当前 runtime → 判定 steer/start（逻辑取自 `swarm_cli/turn_dispatch.rs` 的 steer 判定与前端 `matchingAgentRuntimeForSteer`）→ 调现有 `steer_game_creator_agent_runtime_task_for_profile_at` 或 `start_game_creator_supervisor_background_task_for_session_at` → 返回 `{ mode, accepted_run_id, runtime }`。
+  - `interaction.rs`：`approve/answer/cancel` 薄封装现有 `confirm/reject/answer/cancel` 内部函数（P1 只封装，判定仍在前端）。
+  - `resume.rs`：`resume_game_creator_agent_project` 吸收 `resume/confirm_resume/retry/confirm_retry/schedule_ready`——Shell 判定是否需 policy 确认、是否需先 cancel 再重试（`needs-reconciliation` 分支，逻辑取自 `App.tsx:6205` `handleProjectSupervisorRetry`）。
+- 新命令与旧命令**同时注册**（`main.rs` invoke_handler）。
+- 前端新增"调新命令 → 后端报 unknown command → 回退旧命令"的版本协商（复用 `isMissing*CommandError` 模式），保证打包版本不一致时旧链路可用。
+- **fallback 边界**：仅"命令不存在（版本不兼容）"确定性回退；写操作的其他错误原样呈现，不做盲目重试（防重复入队）。
+
+**P2 Snapshot 投影（状态读取收敛）**：
+
+> **投影 = 读模型**：把同一份 Runtime durable state（唯一事实来源）按一个稳定、精简、面向消费的 schema 重新导出，作为 Consumer 的权威视图。它**不是新的事实来源**，只是同一份事实的另一种呈现；Consumer 依赖投影，业务真相仍在 durable state。
+
+- 新增 `supervisor_shell/snapshot.rs`：`AgentRuntimeSnapshot` 投影。
+  - 输入：现有 `AgentRuntimeResult.state` + `recent_events`/`recent_tasks`/`response_stream`/`user_input_request`。
+  - 输出：稳定的公开视图（agent/session/run 身份、status/phase、`InteractionRequired`、progress、终态、公开错误）。
+  - **内部字段（recentToolCalls、observations、allowedTools、contextUsage 等）不进 Snapshot**。
+- 关键：**后端先补"稳定读取"**——现状前端 `normalizeAgentRuntimeState` 做跨轮 carry-forward，是因为后端 read 在恢复/竞态时字段不稳定。P2 后端投影保证同一 run 身份下字段自洽，前端才能删掉自己的修补。
+- 新增 `read_game_creator_agent_runtime_snapshot(s)` 命令（或改造现有 read 返回 Snapshot），旧 `read_game_creator_agent_runtime(s)` 保留。
+- 前端 `normalizeAgentRuntimeState` / `mergeAgentRuntimeStateIntoMap` / phase→文案映射**依赖 P2 稳定后删除**（本轮先做投影，下一阶段删前端逻辑）。
+
+**验收**：
+- 新命令与旧命令对同一场景返回的终态一致（用 P0 trace + 确定性 e2e 断言）。
+- 前端在"走新 Snapshot"下渲染与旧路径一致（组件回归）。
+- 现有 `command_runtime.rs` / `collaboration/` 测试全绿（旧逻辑未动）。
+
+### P3 Loop 收归 Supervisor Shell
+
+**目标**：Consumer 只 dispatch 意图，不再持有生命周期判断。
+
+- 完成 `submit_intent` / `approve` / `answer` / `cancel` / `resume` 对全部旧分叉的吸收（P1 已建，本轮做全）：
+  - `approve` 吸收 confirm/reject，并按 interaction kind 分派（`UserInput`/`Approval`/`PolicyApproval`）。
+  - `resume` 吸收 resume/confirm_resume/retry/confirm_retry/schedule_ready。
+- 建立 `AgentRuntimeInteractionRequired`（见 1.3），Shell 统一暴露"需等待外部回答"。
+- Shell 负责填充 `waiting_on`/`next_step`（从 phase 映射，逻辑上提自 `model.ts:612/644`）。
+- 新增派生事件 `tool_request`（Shell 从 `recentToolCalls` + phase 投影）。
+- **前端删除**：
+  - `submitProjectSupervisorRuntimeTask` 的 steer/start 决策（`model.ts:849`）。
+  - `agentRuntimeCanCancel/CanRetry/CanConfirm` 门禁（`model.ts:1131-1154`）。
+  - `App.tsx:5981/6127/6205` 的 confirm/retry/repair 路由逻辑。
+- CLI（`swarm_cli`）改为调用同一 Shell：决策逻辑上提后，CLI 只保留 stdin/stdout 终端交互与 observer 渲染。
+
+**验收**：
+- CLI 走新协议跑通完整 supervisor+子 Agent 流程（`agent-swarm-test-chat.mjs` / 确定性 e2e）。
+- GUI 提交、确认、重试、恢复均通过统一 `submit_intent/approve/resume`，无 `steer_*`/`confirm_*`/`retry_*` 直接调用。
+- P0 协议级 trace 在"新旧实现各放一遍"下事件序列一致。
+
+### P4 Runner 自驱
+
+**目标**：工作发现、恢复、继续执行不依赖 Consumer 触发。**这是重构主线的一部分，不是独立项目。**
+
+- 项目目录簿：`runner/state.rs` 的 `known_roots`（当前进程内）→ 持久化到 AppData（复用 runner 的 `--config-dir`），Runner 重启后仍知道持有过哪些项目。
+- 启动自恢复：`runner/server.rs` 启动完成后，对 known roots 调 `has_recoverable_game_creator_agent_background_tasks_at`（`recovery_scan.rs:425`），有可恢复工作则自动 `resume_game_creator_agent_background_tasks_at`。
+- 空闲自扫描：主 accept loop（`server.rs:275`，已有 25ms `EXTERNAL_AGENT_RUNNER_LOOP_INTERVAL`）内增加"是否有 pending 任务需 wake"的轻量检查，替代 Consumer 调 `schedule_game_creator_agent_ready_tasks` / `wake_pending`。
+- 吸收 `schedule_game_creator_agent_ready_tasks`：manifest ready 任务由 Runner 扫描发现并调度，删除前端 devMode 按钮（`App.tsx:10550`）。
+- **边界（不在本轮）**：Runner 仍由 GUI 启动（`main.rs:2124`），保留 GUI-owner watchdog（`server.rs:169`）与 `game_chat_release` 退出协议（`main.rs:2311`）。"自驱 = 存活期间自调度 + 启动自恢复"，**不含**开机自启/无 GUI 常驻。
+- 对应删除前端恢复触发职责：`App.tsx:2799/10341`、`useDeveloperAgentPanel.ts:684` 的启动时 resume、resume 确认卡回调。
+
+**验收**：
+- Runner 进程内：确认一个 pending 任务后无需任何 Consumer 调用即自动执行；恢复 pending 动作后自动续跑。
+- 确定性 e2e 增加"Runner 独立进程跑完整流程"用例（复用 `agent-runtime-real-e2e/harness/process.mjs` 的二进制编译能力）。
+- `confirm_resume` 恢复确认卡流程改为 `InteractionRequired::PolicyApproval` → `approve`。
+
+### P5 迁移 GUI / CLI / Tests
+
+**目标**：三类 Consumer 全部迁移到统一 Intent、Snapshot、Runtime Output。
+
+- GUI：
+  - 状态渲染改读 `AgentRuntimeSnapshot`；删除 `normalizeAgentRuntimeState` / `mergeAgentRuntimeStateIntoMap` / phase 文案映射。
+  - 交互全走 `submit_intent/approve/answer/cancel/resume`；删除 steer/confirm/retry/resume 直接调用与门禁。
+  - 保留只读消费形态：response stream 展示、对话合并、画布资产编排（这些不进 Loop 协议）。
+- CLI：`cli.rs` 与 `swarm_cli` 改用 Shell 命令；删除各自状态机（决策已上提）。
+- Tests：`src-tauri/tests/` 迁移到新命令；`agent-runtime-real-e2e` 与确定性 e2e 走同一协议。
+- 迁移顺序：先 CLI（最薄）→ 再 Tests → 最后 GUI（唯一消费 response stream / conversation 合并 / goal CAS / 委派修复路由，工作量最大）。
+
+**验收**：GUI、CLI、Tests 调用面收敛到同一组命令，代码差异只剩输入输出形式。
+
+### P6 删除旧公开面
+
+**目标**：Interaction Contract 成为唯一稳定公开边界。
+
+- 删除旧 Tauri 命令：`start_game_creator_agent_runtime_task` / `start_game_creator_supervisor_runtime_task` / `steer_*` / `confirm_*` / `reject_*` / `retry_*` / `confirm_retry_*` / `resume_game_creator_agent_runtime_tasks` / `confirm_resume_*` / `schedule_game_creator_agent_ready_tasks` / `read_game_creator_agent_runtime(s)`（`main.rs:2188-2208`）。
+- 删除对应后端 wrapper 与前端 `app/types.ts` 旧 DTO、旧事件协议、迁移期兼容逻辑。
+- 现有 start / steer / resume / recovery 能力作为 Shell 内部实现保留（改名/内联）。
+
+**验收**：`grep` 无旧命令名残留；全量回归（P0 基线 + 单元 + e2e）全绿。
+
+---
+
+## 4. 迁移策略（新旧并存 + 等价性）
+
+1. **接口即实现，不留空窗**：新命令从注册第一天起就是真实可用——内部套用现有旧函数（adapter 套旧实现是**常态、透明**，前端不知道也不关心）。不存在"接口先立、实现待填"的中间态；分阶段的不是"接口 vs 实现"，而是"谁先切到新接口"。
+2. **新旧并存**：P1 起新命令与旧命令同时注册，Consumer 逐个切换，旧路径逐条下线（strangler fig）。
+3. **版本协商 fallback（仅用于迭代空窗期）**：前端调新命令，**仅当**后端报 unknown command（前端版本 ≠ 后端版本，打包错位）时回退旧命令；其他运行错误**原样呈现，不盲目重试**（防重复入队）。后端新版随应用覆盖到位后，fallback 即死代码，P6 删除。
+4. **等价性保障**：
+   - 确定性 provider + 协议级 trace（P0）作为新旧实现的对照基线。
+   - 进程内集成测试每阶段全跑。
+   - 关键迁移点（steer/start 判定、resume 路由、needs-reconciliation 重试）用"同一输入 → 新旧实现输出一致"的单测锁定。
+
+---
+
+## 5. 里程碑与验收门禁
+
+| 里程碑 | 交付 | 门禁 |
+|---|---|---|
+| M0 | P0 基线 + trace 入库 | 回归三件套全绿 |
+| M1 | P1 新命令 + adapter（新旧并存） | 新/旧命令终态一致；现有测试全绿 |
+| M2 | P2 Snapshot 投影 + 前端读 Snapshot | 前端删 normalize 后渲染回归一致 |
+| M3 | P3 Loop 收归（Intent + InteractionRequired） | CLI 走新协议跑通完整流程；前端无 steer/confirm/retry 直调 |
+| M4 | P4 Runner 自驱 | Runner 独立进程自动跑完；resume 确认走统一 approve |
+| M5 | P5 全部 Consumer 迁移 | GUI/CLI/Tests 调用面收敛到同一协议 |
+| M6 | P6 删旧面 | 无旧命令残留；全量回归绿 |
+
+---
+
+## 6. 风险与未决问题
+
+| 风险/问题 | 影响 | 缓解 |
+|---|---|---|
+| P2 依赖"后端 read 先稳定"，否则前端不敢删 normalize | 阶段顺序敏感 | P2 后端投影先行，前端删逻辑放同一阶段尾 |
+| P4 自驱与 GUI-owner 安全模型冲突 | 若误解为"无 GUI 常驻"会引安全评审 | 计划内明确边界，实现不越界 |
+| steer/start 判定含 UX 语义（mode/source/runProfile、steerId 生成、acceptedRunId 对账） | 收归 Shell 后前端展示可能退化 | Shell 返回 `{ mode, accepted_run_id, steer_decision }` 补足展示信息 |
+| `tool_request` 无现成单一落点 | 需 Shell 派生投影 | 提前排进 P2/P3 投影工作量 |
+| 协议级 trace 的随机 ID 归一化 | 基线易碎 | 复用确定性 provider，归一化规则集中一处 |
+
+## 7. 建议实施顺序（一句话）
+
+P0 建安全网 → P1+P2（adapter + Snapshot，纯增量、旧接口全留、fallback 兜底）→ P3 收 Loop → P5 迁移（先 CLI 后 GUI）→ P6 删旧面；P4（Runner 自驱）作为主线中心件贯穿 M4，不单独立项，但边界（存活期间自调度，不含无 GUI 常驻）在计划内写死。
+
+---
+
+## 8. 相对原方案的调整点
+
+本计划在原方案基础上做了以下调整，均基于 master 现状与既有安全模型：
+
+1. **P0 基线**：原方案的 Golden Replay 改为"确定性 e2e + 协议级事件 trace"——在既有确定性 provider e2e（`deterministic-lane-defense-provider.mjs`）上扩展，录制协议级事件序列并归一化 timestamp 与随机 ID，不重建基线体系。
+
+2. **P4 定位与边界**：原方案将"Supervisor Lifecycle Coordinator"列为独立阶段；现作为主线组成部分（里程碑 M4，不单独立项）。自驱限于"Runner 存活期间自调度 + 启动自恢复"，排除"开机自启 / 无 GUI 常驻"，与既有 GUI-owner 安全模型一致。
+
+3. **术语收敛**：原方案"Interaction Contract / Intent / Snapshot"统一为本计划"交互 Loop 协议"（5 入向命令 + 7 出向事件）与"投影"（读模型），含义不变。
+
+4. **迁移原则显式化**：接口即实现（adapter 套旧逻辑为常态）；fallback 仅在版本空窗期、只认 unknown command。原方案未明确此点。
-- 
2.52.0


From 13afdd7a3b130314b8d70d79ba233f4797d62fe2 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 11:59:50 +0800
Subject: [PATCH 05/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=8E=BB=E8=83=8C=E6=99=AF=E9=98=9F=E5=88=97=E4=B8=8E?=
 =?UTF-8?q?=E5=B9=82=E7=AD=89=E5=8F=91=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

序列帧去背景改用本地绿幕算法并在 durable 父任务内并行处理。

将去背景操作加入生成结果白名单，并按 operation_id 隔离帧对象路径。

去背景结果发布为新的序列资源、素材和画布图层，同时保留原始序列。

同步前端生成占位、相关测试及队列与资源契约文档。
---
 .../shared-memory/decision-log.md             |   9 +
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |   7 +-
 ...�】server-rs与SpacetimeDB数据契约-2026-05-15.md |   2 +-
 ...发运维】本地开发验证与生产运维-2026-05-15.md |   2 +-
 .../src/character_animation_assets.rs         | 307 +++++++++++-------
 .../api-server/src/editor_green_screen.rs     |  50 +++
 .../crates/api-server/src/editor_project.rs   |   4 +-
 .../src/editor_project_storage.rs             |  42 ++-
 .../ImageCanvasGenerationDialogModel.test.ts  |  28 ++
 .../ImageCanvasGenerationDialogModel.ts       |  31 +-
 .../useImageCanvasGenerationWorkflow.ts       |  47 ++-
 11 files changed, 404 insertions(+), 125 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 7a0b2835d..96cac0b26 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -1,5 +1,13 @@
 # 决策记录
 
+## 2026-08-15 Spine 序列帧去背景复用父队列并行处理
+
+- 背景：Spine 序列帧去背景已经是 `editor_character_animation_background_removal` durable job，但父 job 内的 33 帧仍逐帧串行下载、绿幕处理、上传和帧对象准备，用户只能看到长时间的二态 loading。
+- 决策：继续只使用一个现有 `external_generation_job` 父任务，不新增逐帧子任务、表、计费或公开 DTO；worker 在父 job 内用 `buffer_unordered(frame_count.max(1))` 并行处理所有帧，必须 drain 全部已发出的 future，再按 `frame_index` 排序并一次性发布。任一帧失败时清理已成功但尚未正式提交的对象；当前帧上传后帧对象准备失败时在该 future 内立即清理，避免并行化引入孤儿对象。
+- 幂等边界：帧对象路径绑定本次 job 的 `operation_id`，同一 job 重放复用路径，不同 job 即使输入 fingerprint 相同也必须生成新的对象路径和新的 asset_object；结果作为新的 `character-animation` / `image-sequence` resource、素材和画布图层发布，原始序列保留。
+- 去背景算法边界不变：只使用本地 `screen-color-keying` 绿幕扣除，不调用 LLM、BgFilter 或阿里云；普通图片去背景链路不受影响。
+- 关联文档：`docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md`。
+
 ## 2026-08-12 Repository checks 采用 CI 与本地共用的单一门禁入口
 
 - 背景：master run 1037 的 Backend/Frontend 已通过，但 `Repository checks` 因 3 个 `simple-import-sort/imports` 错误失败。原 pre-commit 只运行 Prettier，Prettier 不处理 ESLint import 排序；推送前又未运行完整仓库 lint，因此本地与 CI 的覆盖范围长期存在漂移。
@@ -14147,4 +14155,5 @@
 - 视频直接转换走内部 `editor_character_animation_video_conversion` durable job，FFprobe + FFmpeg 覆盖完整源时长，采样率最高 8 FPS、最低 1 FPS，产出 2–66 帧；480p/720p 是只缩不放的最大长边。该路径固定免费、保留背景，不调用 Seedance 或 BgFilter，也不复制保存源视频。
 - 直接转换仍落 `character-animation` / `image-sequence`，配方 action 为 `character-animation.convert`，来源槽位为 `source`；最多 66 帧时首帧 item 同时承载最终 resource/asset。原子生成上限和角色动画拆帧上限沿用 master 的 66，但图标图集公开切片继续保持 64，既有 JSON 大小门禁不放宽。
 - merge master 后保留角色图层浮动工具栏和右键菜单中的 `生成动画` 快捷入口，统一进入同一个角色动作 dialog；`character-animation` 结果不支持快速编辑，仍保留 `改造 / 去背景 / 拆帧 / 下载`。快速编辑入口与提交门禁使用统一正向白名单，未知媒体或素材类型默认拒绝。
+- Spine 序列帧工具栏的“去背景”暂定为纯算法绿幕扣除：只读取正式序列帧 objectKey，使用本地 `screen-color-keying` 处理约定的 `#00FF00` 绿幕，不调用 BgFilter、阿里云或其它模型；普通图片 `/api/editor/images/background-removals` 的通用去背景链路不受影响。
 - `/api/external/v1` 不开放上述内部字段或直接转换路由，不修改 OpenAPI；本次不改 SpacetimeDB 表结构、迁移或生成 bindings。
diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index 8c10c6f45..f27d3195d 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -465,6 +465,7 @@ flowchart TD
 - 对同一 job kind 解析 v2；
 - 对部署前旧 payload 做兼容转换；
 - phase 继续使用 `generating -> processing`；
+- `editor_character_animation_background_removal` 与 AI 图片生成一样先入现有 durable queue；其单个父 job 内使用受控的 `buffer_unordered(frame_count.max(1))` 并行帧处理，完成后统一排序和原子发布，不拆成逐帧队列任务；
 - 不需要新增逐帧进度列。画布上的 `15/30` 是播放帧数，不是 worker 进度。
 
 ### 8.5 计费
@@ -604,9 +605,11 @@ flowchart TD
 AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。`character-animation` 浮动工具栏继续提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后必须走现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
 
 - 原始不透明序列与透明序列是两个正式 resource；
-- 去背景全帧成功后一次性发布新序列；
+- 去背景全帧成功后一次性发布新的 `character-animation` / `image-sequence` 资源、素材和画布图层，保留原始序列图层不被替换；
 - 任一帧失败不产生残缺结果；
-- 当前费用固定为 0 泥点，失败不产生不完整正式结果。
+- 当前费用固定为 0 泥点，失败不产生不完整正式结果；请求先进入现有 `external_generation_job` 队列，不能由 HTTP 请求同步执行。
+- 队列 worker 保持一个父 job，在 job 内按帧并行执行下载、纯本地绿幕扣除、最终 PNG 上传和帧对象准备；所有已发出的帧必须 drain 完成后再按帧号排序，一帧失败即清理未提交对象并整批失败，不新增逐帧子任务表或独立计费。
+- 帧对象路径绑定本次 job 的 `operationId`，同一 job 重放复用路径，不同 job 即使请求 fingerprint 相同也不得复用旧 object location，避免新 `asset_object` 与历史结果发生幂等冲突。
 
 #### 拆帧
 
diff --git a/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md b/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
index 07a0d37aa..9b562b138 100644
--- a/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
+++ b/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
@@ -345,7 +345,7 @@ Responses 的终态载荷既是工具调用的恢复源，也是正文的恢复
 - Rust 结构体：`ExternalGenerationJob`
 - 源码：`server-rs/crates/spacetime-module/src/external_generation.rs`
 - 现役覆盖：worker claim 只允许 `source_module = editor-canvas`；下述逐玩法生成和写回描述均为退役前历史。历史 pending / running 行继续保留原状态，不得领取、失败收口或改写 payload。
-- 用途：外部生成 worker 的内部持久任务队列；`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 时，`api-server` HTTP 角色只入队，`external-generation-worker` 角色通过 claim lease 领取、续租、执行，并用 `lease_token` 栅栏回写阶段、完成 / 失败。队列行继续保存 worker 执行、计费与滚动发布兼容所需字段，末尾可选 `phase` 只取 `generating / processing`；claim 写 `generating`，真实进入抠图处理时由受 `job_id + worker_id + lease_token` 保护的 procedure 写 `processing`。phase procedure 以结构化结果区分 `LeaseFencingRejected` 与 `OtherRejected`；`LeaseFencingRejected` 立即终止，`OtherRejected` 以及 SDK 的 `Procedure` / `Runtime` 错误不重试，只有 `Build` / `ConnectDropped` / `Timeout` 在同一个 job attempt 内重试一次。该重试只重新上报 phase，不把任务写回 `pending`，也不重新调用 provider；编辑器 job 入队固定 `max_attempts=1`，第二次传输失败后任务进入 `failed`，不会回到 `pending` 或从 provider 生成起点重跑。用户可见任务列表、价格、状态、阶段、未确认终态数量和通知确认时间的正式读取事实源已经迁到 `external_generation_job_summary`；BFF 不得再为列表 / 详情 / acknowledge 读取该大表。拼图 `compile_puzzle_draft` 的前置 `compile_puzzle_agent_draft`、`generate_puzzle_images` 与 `generate_puzzle_ui_background` 的业务写回也在对应 SpacetimeDB transaction 内校验 `job_id + worker_id + lease_token`、job kind、owner 和 source entity，避免过期 worker 写 session / work profile；图片画布编辑器的 `editor_image_generation`、`editor_image_edit`、`editor_background_removal`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation` 复用同一队列表。结构化 canvas 激活后，当前 worker completion 先以读取时 canvas revision 执行 CAS，并发冲突时拒绝覆盖并保留可诊断失败；目标是进一步收口为受 lease 栅栏保护的单事务幂等写入 `editor_project_resource`、结果 `editor_canvas_layer`、`editor_canvas_generation_dialog` 终态和 canvas revision。未激活 canvas 在 2 MiB 上限内继续走 legacy `editor_canvas.layers_json` 兼容写回。前端只通过 BFF job 状态轮询和项目快照读取恢复完成态。`GENARRATIVE_EXTERNAL_GENERATION_MODE=inline` 时不创建该队列行，三个 external generation guard 字段必须同时为空才允许 api-server 受控同步写回，半空 guard 仍会拒绝。worker 成功写回业务事实后才能 complete job；业务失败态写回成功后才能 fail job，失败态未写回时保留租约等待后续重领。
+- 用途：外部生成 worker 的内部持久任务队列；`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 时，`api-server` HTTP 角色只入队，`external-generation-worker` 角色通过 claim lease 领取、续租、执行，并用 `lease_token` 栅栏回写阶段、完成 / 失败。队列行继续保存 worker 执行、计费与滚动发布兼容所需字段，末尾可选 `phase` 只取 `generating / processing`；claim 写 `generating`，真实进入抠图处理时由受 `job_id + worker_id + lease_token` 保护的 procedure 写 `processing`。phase procedure 以结构化结果区分 `LeaseFencingRejected` 与 `OtherRejected`；`LeaseFencingRejected` 立即终止，`OtherRejected` 以及 SDK 的 `Procedure` / `Runtime` 错误不重试，只有 `Build` / `ConnectDropped` / `Timeout` 在同一个 job attempt 内重试一次。该重试只重新上报 phase，不把任务写回 `pending`，也不重新调用 provider；编辑器 job 入队固定 `max_attempts=1`，第二次传输失败后任务进入 `failed`，不会回到 `pending` 或从 provider 生成起点重跑。用户可见任务列表、价格、状态、阶段、未确认终态数量和通知确认时间的正式读取事实源已经迁到 `external_generation_job_summary`；BFF 不得再为列表 / 详情 / acknowledge 读取该大表。拼图 `compile_puzzle_draft` 的前置 `compile_puzzle_agent_draft`、`generate_puzzle_images` 与 `generate_puzzle_ui_background` 的业务写回也在对应 SpacetimeDB transaction 内校验 `job_id + worker_id + lease_token`、job kind、owner 和 source entity，避免过期 worker 写 session / work profile；图片画布编辑器的 `editor_image_generation`、`editor_image_edit`、`editor_background_removal`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_character_animation_video_conversion`、`editor_character_animation_background_removal`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation` 复用同一队列表。结构化 canvas 激活后，当前 worker completion 先以读取时 canvas revision 执行 CAS，并发冲突时拒绝覆盖并保留可诊断失败；目标是进一步收口为受 lease 栅栏保护的单事务幂等写入 `editor_project_resource`、结果 `editor_canvas_layer`、`editor_canvas_generation_dialog` 终态和 canvas revision。未激活 canvas 在 2 MiB 上限内继续走 legacy `editor_canvas.layers_json` 兼容写回。前端只通过 BFF job 状态轮询和项目快照读取恢复完成态。`GENARRATIVE_EXTERNAL_GENERATION_MODE=inline` 时不创建该队列行，三个 external generation guard 字段必须同时为空才允许 api-server 受控同步写回，半空 guard 仍会拒绝。worker 成功写回业务事实后才能 complete job；业务失败态写回成功后才能 fail job，失败态未写回时保留租约等待后续重领。
 - 2026-08-06 收口覆盖：上一条用途描述中“当前先 CAS、单事务仍是目标”的旧句已作废。现役编辑器生成不再组合调用 object confirm、resource create、asset create、canvas save 和 job complete。`api-server` 只准备稳定候选，再经 `spacetime-client` 调用 `persist_editor_generation_result_and_return`；procedure 在同一 `try_with_tx` 内写入可选 `asset_object`、全部 `editor_project_resource`、`editor_asset`、可选 `asset_entity_binding`、可选 canvas V2 CAS、queue job 终态和 `editor_generation_operation` receipt。结构化 canvas 的 layer / dialog / revision 与未激活 canvas 的 legacy `layers_json` 仍经既有 V2 布局验证分流，前端不直接发明正式完成态。queue 首次提交在同一快照验证 owner、job kind、request fingerprint 和有效 `job_id + worker_id + lease_token`；统一 procedure 已完成 job 后 worker 不得再单独 complete。
 - 载荷约束：本次先对 `source_module = editor-canvas` 的 `request_payload_json` / `result_payload_json` 实施有限大小合法 JSON、任意层级禁止 `data:` / `blob:` 的双层门禁，只保存 worker 执行必需的普通参数和已登记媒体引用。画布 Agent 来源的任务可在 `result_payload_json.editor-agent-tool-call-result` 中保存有界的轻量结果和已登记媒体引用，供后端按已有 `externalJobId + owner_user_id` 定向懒回填；其它编辑器任务保持元数据结果，并可保存有界的 `warning.code/reason`。其它玩法在完成各自参考图资源化之前不由本次门禁静默改变既有请求契约。该主表只供 worker claim / 执行、受控维护以及画布 Agent 的定向结果回填读取；正式用户任务列表、单任务状态、队列概览与 acknowledge 不得返回或解析这两个 payload。画布 Agent 懒回填必须经对应工具 formatter 归一为有界轻量媒体引用后写入 OSS 会话，不能把原始 payload 直接透传前端。
 - 非阻断告警：角色形象、图标图集和 UI 素材提取已保存 provider 原图、但透明背景处理最终失败时，以原图唯一主图完成任务；透明图和切片不写入画布。这个 source-only 降级只包住透明背景处理的最终失败，phase 上报、provider 原图持久化、透明处理图持久化或画布写回失败仍按任务错误传播。图标 / UI 透明图集成功但自动拆分降级时仍保留透明图集；通用 `warning` 与 `sliceWarning` 只在「透明背景最终失败」这一条上互斥，风格归一化或像素规整产生的通用 `warning` 可与 `sliceWarning` 并存。两类成功降级都以既有 `completed` 状态收口，不新增状态值：source-only 的 inline / external v1 响应使用结构化 `warning.code/reason`，仅拆分失败的 inline / external v1 响应继续使用既有 `sliceWarning.code/reason`，其 `reason` 保留原始诊断；queue worker 才把两者归一为有界的 `result_payload_json.warning`：只有一条时原样保留完整 `reason`，两条并存时按“通用在前、拆分在后”拼接且 `code` 收敛为 `multiple-generation-warnings`（两条 `code` 相同则沿用原 `code`），不允许任何一条被丢弃；`sliceWarning.reason` 无论是否并存都由 worker 添加“图集已生成，但自动拆分未完成：”前缀，拼接结果最后统一做长度上界收敛。除上述画布 Agent 定向回填的轻量结果外，队列结果不保存图片、切片列表或媒体 URL。
diff --git a/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md b/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
index 1ad4de044..329826ad6 100644
--- a/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
+++ b/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
@@ -68,7 +68,7 @@ Windows 本地如果已在 `%LOCALAPPDATA%\Genarrative\ffmpeg\bin` 安装 FFmpeg
 
 开发态 `npm run dev` 与 `npm run dev:api-server` 都会注入 `GENARRATIVE_DEV_PASSWORD_ENTRY_AUTO_REGISTER_ENABLED=true`，因此密码登录在本地开发环境可直接注册未知手机号账号。完整 `npm run dev` 会强制父 API 使用 `GENARRATIVE_PROCESS_ROLE=all`，忽略外层显式角色，确保本地 `api-server` 同时监听 HTTP 并消费外部生成队列；只有单模块 `npm run dev:api-server` 会保留显式 `GENARRATIVE_PROCESS_ROLE`，未设置时默认为 `all`。`all` 不内嵌 BgFilter worker；启动器总是先启动并验活独立 `GENARRATIVE_PROCESS_ROLE=bgfilter-worker` 进程，再启动父 API，并向两者注入同一个内部 base URL / Token。Linux 本地默认 `all` 角色启动前，dev 脚本会停止当前仓库、同一个 SpacetimeDB server / database 下遗留的 `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程，避免旧 worker 二进制继续抢同一条队列并在业务写回时制造 procedure 超时；显式拆分 `api` / `external-generation-worker` 做生产式验证时不会触发这项清理。生产环境仍按 `api-server` 配置默认关闭密码自动注册，并由独立 worker 进程消费队列。
 
-本地排查外部内容生成 worker 队列时，默认同一 Rust 进程同时监听 HTTP 并消费 `external_generation_job` 队列；更接近生产的验证应分别启动 `api`、`external-generation-worker` 和 `external-generation-controller`。生产默认 `GENARRATIVE_PROCESS_ROLE=api`，外部生成任务由独立 `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程消费；生产与容器扩缩容验证保持 `queue`。当前 worker 只领取 `source_module = editor-canvas` 的图片画布任务，包括 `editor_image_generation`、`editor_image_edit`、`editor_background_removal`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation`。旧玩法历史任务即使仍为 pending / running 也不领取、不改状态；显式把本地进程角色设为 `api` 且没有 worker 时，现役编辑器生成请求只返回 queued/running，不会兜底执行外部 provider。
+本地排查外部内容生成 worker 队列时，默认同一 Rust 进程同时监听 HTTP 并消费 `external_generation_job` 队列；更接近生产的验证应分别启动 `api`、`external-generation-worker` 和 `external-generation-controller`。生产默认 `GENARRATIVE_PROCESS_ROLE=api`，外部生成任务由独立 `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程消费；生产与容器扩缩容验证保持 `queue`。当前 worker 只领取 `source_module = editor-canvas` 的图片画布任务，包括 `editor_image_generation`、`editor_image_edit`、`editor_background_removal`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_character_animation_video_conversion`、`editor_character_animation_background_removal`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation`。旧玩法历史任务即使仍为 pending / running 也不领取、不改状态；显式把本地进程角色设为 `api` 且没有 worker 时，现役编辑器生成请求只返回 queued/running，不会兜底执行外部 provider。
 
 HTTP 角色的 `GENARRATIVE_SPACETIME_POOL_SIZE` 只表示 procedure / reducer 调用池大小；池连接不订阅 read model。HTTP 角色会额外创建 1 条共享缓存读连接，当前只保留可选的 `user_account` 读取；配置为 `8` 时基础连接拓扑是 8 条调用连接加 1 条缓存读连接。`/readyz` 同时检查调用池与缓存读连接，缓存连接未准备好时不能放量。
 
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 34f5c4589..8af4b657f 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -84,20 +84,22 @@ use crate::{
         EditorGenerationQueuedResponse, editor_generation_queue_state,
         editor_generation_source_entity_id, enqueue_editor_generation_job_for_caller,
     },
-    editor_green_screen::EditorScreenBackgroundColor,
+    editor_green_screen::{
+        EditorScreenBackgroundColor, remove_editor_character_animation_green_screen_background,
+    },
     editor_project::{
         EDITOR_ASSET_ID_PREFIX, EDITOR_BGFILTER_CROSS_CHECK_ENABLED,
-        EDITOR_BGFILTER_DEFAULT_SEG_MODEL, EDITOR_RESOURCE_ID_PREFIX,
-        EditorCanvasGeneratedLayerInput, EditorCanvasLayoutPlan, EditorGenerationCaller,
-        EditorGenerationOperationContext, PreparedEditorGenerationResultItem,
-        build_editor_canvas_generated_layer_item, editor_asset_payload_from_record,
+        EDITOR_BGFILTER_DEFAULT_SEG_MODEL, EDITOR_LOCAL_MATTING_PROVIDER,
+        EDITOR_RESOURCE_ID_PREFIX, EditorCanvasGeneratedLayerInput, EditorCanvasLayoutPlan,
+        EditorGenerationCaller, EditorGenerationOperationContext,
+        PreparedEditorGenerationResultItem, build_editor_canvas_generated_layer_item,
+        download_editor_persisted_image_object, editor_asset_payload_from_record,
         editor_media_src_from_object_key, editor_project_payload_from_record,
         editor_project_resource_payload_from_record, map_editor_project_error,
         normalize_editor_record_object_key, optional_editor_idempotency_key,
         persist_editor_generation_result_atomically, preflight_editor_billable_generation_target,
         rebuild_editor_generation_input_references,
         remove_editor_generated_screen_background_with_bgfilter,
-        request_editor_background_removal_image_with_bgfilter_worker,
         resolve_editor_reference_object_key_for_owner, sanitize_editor_client_generation_inputs,
         serialize_editor_generation_inputs, serialize_editor_image_sequence_frames,
         validate_editor_generation_operation_id, with_editor_media_duration_generation_input,
@@ -1230,10 +1232,12 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
     let operation = editor_generation_operation(&caller)
         .map_err(|error| character_animation_error_response(&request_context, error))?;
     let task_id = operation.operation_id.clone();
-    let storage_task_id = format!(
-        "{}-{}",
-        sanitize_storage_segment(owner_user_id.as_str(), "owner"),
-        operation.operation_fingerprint
+    // 同一 job 的重放必须复用对象路径；新的去背景 job 必须生成一套新序列对象。
+    // 不能使用 request fingerprint：用户再次对同一源序列执行去背景时 fingerprint 相同，
+    // 会复用上一任务已登记的 object location，并与新 job 的稳定 asset_object id 冲突。
+    let storage_task_id = editor_character_animation_background_removal_storage_task_id(
+        owner_user_id.as_str(),
+        task_id.as_str(),
     );
     if let Some(reporter) = caller.phase_reporter.as_ref() {
         reporter
@@ -1241,12 +1245,6 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
             .await
             .map_err(|error| character_animation_error_response(&request_context, error))?;
     }
-    let matting_audit = crate::external_api_audit::ExternalApiAuditContext {
-        user_id: Some(owner_user_id.clone()),
-        profile_id: Some(project_id.clone()),
-        request_id: Some(request_context.request_id().to_string()),
-        external_call_deadline: request_context.external_call_deadline(),
-    };
     let persisted_frames = extract_and_prepare_background_removal_frames(
         &state,
         &caller,
@@ -1254,7 +1252,6 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
         &frames,
         frame_width,
         frame_height,
-        &matting_audit,
     )
     .await
     .map_err(|error| character_animation_error_response(&request_context, error))?;
@@ -1288,7 +1285,7 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
         Some(project_id.as_str()),
         payload.asset_folder_id.as_deref(),
         asset_label.as_str(),
-        "BgFilter",
+        EDITOR_LOCAL_MATTING_PROVIDER,
         Some(source_resource_id.clone()),
         generation_inputs,
         plan,
@@ -4826,8 +4823,9 @@ async fn extract_and_prepare_direct_video_conversion_frames(
     }
 }
 
-/// 对已有序列帧逐帧做通用抠图（BgFilter complex，无键色），生成透明序列帧对象。
-/// 输入是源序列帧资源的稳定 objectKey 列表；任一帧失败即整批清理，不发布残缺结果。
+/// 对已有序列帧逐帧执行纯算法绿幕扣除，生成透明序列帧对象。
+/// 输入是源序列帧资源的稳定 objectKey 列表；不调用 BgFilter、阿里云或其它模型。
+/// 任一帧失败即整批清理，不发布残缺结果。
 async fn extract_and_prepare_background_removal_frames(
     state: &AppState,
     caller: &EditorGenerationCaller,
@@ -4835,103 +4833,139 @@ async fn extract_and_prepare_background_removal_frames(
     source_frames: &[EditorCharacterAnimationFramePayload],
     frame_width: u32,
     frame_height: u32,
-    audit: &crate::external_api_audit::ExternalApiAuditContext,
 ) -> Result<PersistedEditorCharacterAnimationFrameSet, AppError> {
-    let mut processed = Vec::with_capacity(source_frames.len());
-    let mut uploaded_object_keys = Vec::with_capacity(source_frames.len());
-    for (frame_index, source_frame) in source_frames.iter().enumerate() {
-        let source_object_key = source_frame
-            .object_key
-            .as_deref()
-            .map(str::trim)
-            .filter(|value| !value.is_empty())
-            .ok_or_else(|| {
-                editor_character_animation_bad_request("序列帧缺少稳定 objectKey，无法去背景。")
-            })?;
-        let removed = request_editor_background_removal_image_with_bgfilter_worker(
-            state,
-            source_object_key,
-            audit,
-        )
-        .await?;
-        let finalized = finalize_animation_frame_payload(
-            removed.image.bytes.as_slice(),
-            removed.image.mime_type.as_str(),
-            frame_width,
-            frame_height,
-            false,
-        )?;
-        let content_type = finalized.mime_type.clone();
-        let put_result = match put_character_animation_frame_object(
-            state,
-            frame_index + 1,
-            "background_removal_frame_put",
-            LegacyAssetPrefix::Animations,
-            vec![
-                "editor".to_string(),
-                "background-removals".to_string(),
-                task_id.to_string(),
-            ],
-            format!("frame{:03}.png", frame_index + 1),
-            finalized.mime_type,
-            finalized.bytes,
-            build_asset_metadata(
-                EDITOR_CHARACTER_ANIMATION_ASSET_KIND,
-                caller.owner_user_id.as_str(),
-                "editor_background_removal",
-                task_id,
-                "animation_frame",
-                "background-removal",
-            ),
-        )
-        .await
-        {
-            Ok(result) => result,
-            Err(error) => {
-                cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
-                return Err(error);
+    use futures_util::StreamExt as _;
+
+    let frame_count = source_frames.len();
+    let frame_results = futures_util::stream::iter(source_frames.iter().cloned().enumerate().map(
+        |(frame_index, source_frame)| async move {
+            let result = async {
+                let source_object_key = source_frame
+                    .object_key
+                    .as_deref()
+                    .map(str::trim)
+                    .filter(|value| !value.is_empty())
+                    .ok_or_else(|| {
+                        editor_character_animation_bad_request(
+                            "序列帧缺少稳定 objectKey，无法去背景。",
+                        )
+                    })?;
+                let source_image =
+                    download_editor_persisted_image_object(state, source_object_key).await?;
+                let removed =
+                    remove_editor_character_animation_green_screen_background(&source_image)?;
+                let finalized = finalize_animation_frame_payload(
+                    removed.bytes.as_slice(),
+                    removed.mime_type.as_str(),
+                    frame_width,
+                    frame_height,
+                    false,
+                )?;
+                let content_type = finalized.mime_type.clone();
+                let put_result = put_character_animation_frame_object(
+                    state,
+                    frame_index + 1,
+                    "background_removal_frame_put",
+                    LegacyAssetPrefix::Animations,
+                    vec![
+                        "editor".to_string(),
+                        "background-removals".to_string(),
+                        task_id.to_string(),
+                    ],
+                    format!("frame{:03}.png", frame_index + 1),
+                    finalized.mime_type,
+                    finalized.bytes,
+                    build_asset_metadata(
+                        EDITOR_CHARACTER_ANIMATION_ASSET_KIND,
+                        caller.owner_user_id.as_str(),
+                        "editor_background_removal",
+                        task_id,
+                        "animation_frame",
+                        "background-removal",
+                    ),
+                )
+                .await?;
+                let output_object_key = put_result.object_key.clone();
+                let slot = editor_character_animation_frame_slot(frame_index);
+                let prepared_asset_object =
+                    match prepare_editor_character_animation_frame_asset_object(
+                        state,
+                        caller,
+                        task_id,
+                        slot.as_str(),
+                        output_object_key.clone(),
+                        content_type,
+                        frame_index + 1,
+                    )
+                    .await
+                    {
+                        Ok(result) => result,
+                        Err(error) => {
+                            // 当前帧已经上传但还没有进入成功结果集合；必须在本帧 future
+                            // 内先清理，不能等全量 drain 后只清理其它成功帧。
+                            cleanup_uncommitted_character_animation_object(
+                                state,
+                                output_object_key.as_str(),
+                                "background_removal_frame_prepare_failed",
+                            )
+                            .await;
+                            return Err(error);
+                        }
+                    };
+                Ok::<ProcessedEditorCharacterAnimationFrame, AppError>(
+                    ProcessedEditorCharacterAnimationFrame {
+                        frame_index,
+                        payload: build_editor_character_animation_frame_payload(
+                            put_result.legacy_public_path,
+                            output_object_key.clone(),
+                            prepared_asset_object.asset_object_id.clone(),
+                            frame_width,
+                            frame_height,
+                        ),
+                        object_key: output_object_key,
+                        prepared_asset_object,
+                        slot,
+                    },
+                )
             }
-        };
-        uploaded_object_keys.push(put_result.object_key.clone());
-        let slot = editor_character_animation_frame_slot(frame_index);
-        let prepared_asset_object = match prepare_editor_character_animation_frame_asset_object(
-            state,
-            caller,
-            task_id,
-            slot.as_str(),
-            put_result.object_key.clone(),
-            content_type,
-            frame_index + 1,
-        )
-        .await
-        {
-            Ok(result) => result,
-            Err(error) => {
-                cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
-                return Err(error);
-            }
-        };
-        processed.push(ProcessedEditorCharacterAnimationFrame {
-            frame_index,
-            payload: build_editor_character_animation_frame_payload(
-                put_result.legacy_public_path,
-                put_result.object_key.clone(),
-                prepared_asset_object.asset_object_id.clone(),
-                frame_width,
-                frame_height,
-            ),
-            object_key: put_result.object_key,
-            prepared_asset_object,
-            slot,
-        });
-    }
-    match build_persisted_editor_character_animation_frame_set(processed) {
-        Ok(result) => Ok(result),
-        Err(error) => {
-            cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
-            Err(error)
+            .await;
+            result.map_err(|error| (frame_index, error))
+        },
+    ))
+    // 中文注释：去背景属于单个 durable job；帧在 job 内并行处理，且不能因首个
+    // 失败提前取消其它已经发出的帧，必须先 drain 完整批次，再统一清理并失败关闭。
+    .buffer_unordered(frame_count.max(1))
+    .collect::<Vec<_>>()
+    .await;
+
+    let mut processed = Vec::with_capacity(frame_count);
+    let mut frame_errors = Vec::new();
+    for frame_result in frame_results {
+        match frame_result {
+            Ok(frame_payload) => processed.push(frame_payload),
+            Err(frame_error) => frame_errors.push(frame_error),
         }
     }
+    processed.sort_by_key(|frame| frame.frame_index);
+    frame_errors.sort_by_key(|(frame_index, _)| *frame_index);
+
+    if let Some((frame_index, error)) = frame_errors.into_iter().next() {
+        tracing::warn!(
+            frame_index = frame_index + 1,
+            completed_frames = processed.len(),
+            expected_frames = frame_count,
+            error = %error,
+            "editor_animation_background_removal_failed_after_drain"
+        );
+        let uploaded_object_keys = processed
+            .iter()
+            .map(|frame| frame.object_key.clone())
+            .collect::<Vec<_>>();
+        cleanup_uncommitted_character_animation_objects(state, &uploaded_object_keys).await;
+        return Err(error);
+    }
+
+    build_persisted_editor_character_animation_frame_set(processed)
 }
 
 async fn process_and_persist_editor_character_animation_frame(
@@ -5631,6 +5665,17 @@ fn editor_inline_generation_caller<T: Serialize>(
     })
 }
 
+fn editor_character_animation_background_removal_storage_task_id(
+    owner_user_id: &str,
+    operation_id: &str,
+) -> String {
+    format!(
+        "{}-{}",
+        sanitize_storage_segment(owner_user_id, "owner"),
+        sanitize_storage_segment(operation_id, "task"),
+    )
+}
+
 fn editor_character_animation_frame_slot(frame_index: usize) -> String {
     if frame_index == 0 {
         EDITOR_CHARACTER_ANIMATION_FINAL_SLOT.to_string()
@@ -9936,6 +9981,42 @@ mod tests {
         assert!(!frame_pipeline.contains("DownloadedOpenAiImage"));
     }
 
+    #[test]
+    fn editor_character_animation_background_removal_storage_path_is_task_scoped() {
+        let first =
+            editor_character_animation_background_removal_storage_task_id("user-1", "task-1");
+        let replay =
+            editor_character_animation_background_removal_storage_task_id("user-1", "task-1");
+        let next_job =
+            editor_character_animation_background_removal_storage_task_id("user-1", "task-2");
+
+        assert_eq!(first, replay);
+        assert_ne!(first, next_job);
+        assert!(first.ends_with("-task-1"));
+    }
+
+    #[test]
+    fn editor_character_animation_background_removal_uses_local_green_screen_only() {
+        let source = include_str!("character_animation_assets.rs");
+        let body = source
+            .split_once("async fn extract_and_prepare_background_removal_frames")
+            .and_then(|(_, tail)| {
+                tail.split_once("async fn process_and_persist_editor_character_animation_frame")
+            })
+            .map(|(body, _)| body)
+            .expect("background removal frame function should exist");
+
+        assert!(body.contains("remove_editor_character_animation_green_screen_background"));
+        assert!(body.contains("download_editor_persisted_image_object"));
+        assert!(body.contains(".buffer_unordered(frame_count.max(1))"));
+        assert!(body.contains(".collect::<Vec<_>>()"));
+        assert!(body.contains("processed.sort_by_key"));
+        assert!(body.contains("frame_errors.sort_by_key"));
+        assert!(!body.contains("request_editor_background_removal_image_with_bgfilter_worker"));
+        assert!(!body.contains("remove_editor_generated_screen_background_with_bgfilter"));
+        assert!(!body.contains("ExternalApiAuditContext"));
+    }
+
     #[test]
     fn editor_character_animation_persists_one_final_asset_after_frame_extraction() {
         let source = include_str!("character_animation_assets.rs");
diff --git a/server-rs/crates/api-server/src/editor_green_screen.rs b/server-rs/crates/api-server/src/editor_green_screen.rs
index 6bd011bdb..cc1c1a40c 100644
--- a/server-rs/crates/api-server/src/editor_green_screen.rs
+++ b/server-rs/crates/api-server/src/editor_green_screen.rs
@@ -208,6 +208,32 @@ pub(crate) fn remove_editor_generated_green_screen_background(
     })
 }
 
+/// 角色动作手动去背景只处理约定的纯绿幕，不调用 BgFilter、阿里云或其它模型。
+/// 不启用近白背景清理，避免把白色角色内容误当成背景；低饱和绿色仅作为绿幕边缘
+/// 与压缩/抗锯齿造成的颜色变化处理。
+pub(crate) fn remove_editor_character_animation_green_screen_background(
+    image: &DownloadedOpenAiImage,
+) -> Result<DownloadedOpenAiImage, AppError> {
+    let bytes = remove_generated_asset_sheet_green_screen_background_bytes(
+        image.bytes.as_slice(),
+        GeneratedAssetSheetAlphaOptions {
+            key_color: GeneratedAssetSheetKeyColor::GREEN_SCREEN,
+            remove_near_white_background: false,
+            remove_disconnected_hard_key_background: true,
+            remove_muted_green_screen_background: true,
+            detect_internal_holes: true,
+            internal_hole_min_pixels: 16,
+        },
+    )
+    .map_err(map_editor_green_screen_error)?;
+
+    Ok(DownloadedOpenAiImage {
+        bytes,
+        mime_type: "image/png".to_string(),
+        extension: "png".to_string(),
+    })
+}
+
 fn map_editor_green_screen_error(error: GeneratedAssetSheetError) -> AppError {
     let status = match error {
         GeneratedAssetSheetError::DecodeImage { .. } => StatusCode::BAD_GATEWAY,
@@ -259,6 +285,30 @@ mod tests {
         assert_eq!(image.get_pixel(1, 1).0[3], 255);
     }
 
+    #[test]
+    fn character_animation_green_screen_removal_keeps_white_foreground() {
+        let mut source = RgbaImage::from_pixel(3, 3, Rgba([0, 255, 0, 255]));
+        source.put_pixel(1, 1, Rgba([255, 255, 255, 255]));
+        let mut bytes = Vec::new();
+        DynamicImage::ImageRgba8(source)
+            .write_to(&mut Cursor::new(&mut bytes), ImageFormat::Png)
+            .expect("test PNG should encode");
+
+        let output =
+            remove_editor_character_animation_green_screen_background(&DownloadedOpenAiImage {
+                bytes,
+                mime_type: "image/png".to_string(),
+                extension: "png".to_string(),
+            })
+            .expect("green screen should be removed");
+        let image = image::load_from_memory(output.bytes.as_slice())
+            .expect("output PNG should decode")
+            .to_rgba8();
+
+        assert_eq!(image.get_pixel(0, 0).0[3], 0);
+        assert_eq!(image.get_pixel(1, 1).0, [255, 255, 255, 255]);
+    }
+
     #[test]
     fn editor_screen_background_color_parser_uses_default_and_rejects_unknown() {
         assert_eq!(
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 2d850bbc2..e7e856857 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -231,7 +231,7 @@ const EDITOR_BGFILTER_SEG_MODEL_ANIME_SEG: &str = "anime-seg";
 const EDITOR_BGFILTER_MATTING_PROVIDER: &str = "BgFilter";
 const EDITOR_ALIYUN_MATTING_PROVIDER: &str = "Aliyun Matting";
 const EDITOR_ALIYUN_MATTING_MODEL: &str = "segment-common-image";
-const EDITOR_LOCAL_MATTING_PROVIDER: &str = "Genarrative Local";
+pub(crate) const EDITOR_LOCAL_MATTING_PROVIDER: &str = "Genarrative Local";
 const EDITOR_LOCAL_MATTING_MODEL: &str = "screen-color-keying";
 const EDITOR_MATTING_SOURCE_URL_EXPIRE_SECONDS: u64 = 600;
 pub(crate) const EDITOR_BGFILTER_CROSS_CHECK_ENABLED: bool = true;
@@ -12721,7 +12721,7 @@ pub(crate) async fn read_editor_reference_image_object_with_client(
     })
 }
 
-async fn download_editor_persisted_image_object(
+pub(crate) async fn download_editor_persisted_image_object(
     state: &AppState,
     object_key: &str,
 ) -> Result<DownloadedOpenAiImage, AppError> {
diff --git a/server-rs/crates/spacetime-module/src/editor_project_storage.rs b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
index 591eb7e49..5cc1fcb9c 100644
--- a/server-rs/crates/spacetime-module/src/editor_project_storage.rs
+++ b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
@@ -27,7 +27,7 @@ const EDITOR_IMAGE_ASSET_KIND_CLEANUP_CANVAS_MAX_BATCH_SIZE: u32 = 5;
 const EDITOR_LEGACY_IMAGE_ASSET_KIND: &str = "image";
 // 正式生成结果沿用 master 的 66 项上限；图标拆分仍由独立的 64 项门禁约束。
 const EDITOR_GENERATION_RESULT_MAX_ITEMS: usize = 66;
-const EDITOR_GENERATION_OPERATION_KINDS: [&str; 11] = [
+const EDITOR_GENERATION_OPERATION_KINDS: [&str; 12] = [
     "editor_image_generation",
     "editor_icon_spec_generation",
     "editor_image_edit",
@@ -36,6 +36,7 @@ const EDITOR_GENERATION_OPERATION_KINDS: [&str; 11] = [
     "editor_ui_design_asset_extraction",
     "editor_character_animation_generation",
     "editor_character_animation_video_conversion",
+    "editor_character_animation_background_removal",
     "editor_video_generation",
     "editor_sound_effect_generation",
     "editor_background_music_generation",
@@ -15370,6 +15371,45 @@ mod tests {
         }
     }
 
+    #[test]
+    fn editor_generation_result_shape_accepts_character_animation_background_removal() {
+        let mut input = editor_generation_result_input();
+        let operation_kind = "editor_character_animation_background_removal";
+        let operation_id = "job-1";
+        input.operation_kind = operation_kind.to_string();
+        input.items[0]
+            .project_resource
+            .as_mut()
+            .expect("resource")
+            .resource_id = shared_contracts::editor_generation_stable_resource_id(
+            "user-1",
+            operation_kind,
+            operation_id,
+            "primary",
+        );
+
+        assert!(
+            validate_editor_generation_result_shape(
+                &input,
+                "user-1",
+                operation_kind,
+                operation_id,
+            )
+            .is_ok()
+        );
+
+        assert!(
+            validate_editor_generation_result_shape(
+                &input,
+                "user-1",
+                "editor_character_animation_background_removal_unknown",
+                operation_id,
+            )
+            .expect_err("unknown operation kinds must remain rejected")
+            .contains("不在编辑器生成白名单内")
+        );
+    }
+
     #[test]
     fn editor_generation_result_shape_requires_stable_ids_and_unique_slots() {
         let input = editor_generation_result_input();
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index ad3a9f28e..2788b7c42 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -14,6 +14,7 @@ import {
   closeGenerateComposerDialog,
   createAudioRedrawGenerationDialogDraft,
   createBackgroundMusicGenerationDialogDraft,
+  createCharacterAnimationBackgroundRemovalDialogDraft,
   createCharacterAnimationGenerationDialogDraft,
   createCharacterAnimationPanelDraft,
   createCharacterGenerationDialogDraft,
@@ -559,6 +560,33 @@ describe('ImageCanvasGenerationDialogModel', () => {
     });
   });
 
+  it('creates a separate character animation placement for background removal', () => {
+    expect(
+      createCharacterAnimationBackgroundRemovalDialogDraft({
+        sourceLayer: createLayer({
+          id: 'layer-animation',
+          assetKind: 'character-animation',
+        }),
+        assetLabel: '源动画 去背景',
+      }),
+    ).toMatchObject({
+      mode: 'character-animation',
+      prompt: '去除背景',
+      assetLabel: '源动画 去背景',
+      status: 'generating',
+      composerOpen: false,
+      sourceLayerId: 'layer-animation',
+      placeholder: {
+        x: 472,
+        y: 140,
+        width: 320,
+        height: 240,
+        originalWidth: 1024,
+        originalHeight: 768,
+      },
+    });
+  });
+
   it('restores remodel prompts from user-visible generation input snapshots only', () => {
     const cases: Array<{
       fields: NonNullable<CanvasLayer['generationInputs']>['fields'];
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 51d484269..e3c5d57d7 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -869,9 +869,7 @@ function getNormalizedString(
 function getNormalizedStringArray(sourceLayer: CanvasLayer, id: string) {
   return (sourceLayer.generationInputs?.fields ?? [])
     .filter((field) => field.id === id)
-    .flatMap((field) =>
-      typeof field.value === 'string' ? [field.value] : [],
-    );
+    .flatMap((field) => (typeof field.value === 'string' ? [field.value] : []));
 }
 
 function getNormalizedNumber(
@@ -2196,6 +2194,33 @@ export function createQuickEditGenerationDialogDraft({
   };
 }
 
+export function createCharacterAnimationBackgroundRemovalDialogDraft({
+  sourceLayer,
+  assetLabel,
+  status = 'generating',
+}: {
+  sourceLayer: CanvasLayer;
+  assetLabel?: string;
+  status?: CanvasGenerationDialogState['status'];
+}): Omit<CanvasGenerationDialogState, 'id'> {
+  return {
+    mode: 'character-animation',
+    prompt: '去除背景',
+    assetLabel,
+    status,
+    composerOpen: false,
+    sourceLayerId: sourceLayer.id,
+    placeholder: {
+      x: sourceLayer.x + sourceLayer.width + 32,
+      y: sourceLayer.y,
+      width: sourceLayer.width,
+      height: sourceLayer.height,
+      originalWidth: sourceLayer.originalWidth || sourceLayer.width,
+      originalHeight: sourceLayer.originalHeight || sourceLayer.height,
+    },
+  };
+}
+
 export function createLegacyImageRedrawGenerationDialogDraft({
   sourceLayer,
   canvasSize,
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index e98c8c6c7..efe936e34 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -67,6 +67,7 @@ import {
   closeGenerateComposerDialog,
   createAudioRedrawGenerationDialogDraft,
   createBackgroundMusicGenerationDialogDraft,
+  createCharacterAnimationBackgroundRemovalDialogDraft,
   createCharacterAnimationGenerationDialogDraft,
   createCharacterGenerationDialogDraft,
   createEditDialogDraft,
@@ -3697,13 +3698,33 @@ export function useImageCanvasGenerationWorkflow({
       setMetadataLayer(null);
       setCropExpandPanel(null);
       setQuickEditPanel(null);
+      const assetLabel = `${sourceLayer.title} 去背景`;
+      const backgroundRemovalDialog = applyProjectSnapshot
+        ? createCharacterAnimationBackgroundRemovalDialogDraft({
+            sourceLayer,
+            assetLabel,
+          })
+        : null;
+      const backgroundRemovalPlacement = backgroundRemovalDialog
+        ? openPlacedCanvasGenerationDialog(backgroundRemovalDialog)
+        : undefined;
+      const backgroundRemovalDialogId = backgroundRemovalPlacement?.dialogId;
       try {
         const result = await removeEditorCharacterAnimationBackground({
           projectId,
           sourceLayerId: sourceLayer.id,
           sourceResourceId: sourceLayer.resourceId,
           assetFolderId,
-          assetLabel: `${sourceLayer.title} 去背景`,
+          assetLabel,
+          ...(backgroundRemovalPlacement?.placeholder
+            ? {
+                canvasCompletion: {
+                  dialogId: backgroundRemovalDialogId,
+                  title: assetLabel,
+                  placeholder: backgroundRemovalPlacement.placeholder,
+                },
+              }
+            : {}),
           generationInputs: buildDeterministicGenerationInputs(
             'character-animation.remove-background',
             sourceLayer,
@@ -3712,10 +3733,17 @@ export function useImageCanvasGenerationWorkflow({
         await applyQueuedEditorGenerationProject(
           result,
           projectId,
-          applyProjectSnapshot,
+          (project) =>
+            applyProjectSnapshot?.(project, {
+              type: 'remove-background',
+              count: 1,
+            }),
           refreshTaskListForQueuedGeneration,
           onWalletBalanceMayHaveChanged,
           showGenerationWarning,
+          backgroundRemovalDialogId,
+          (project) =>
+            preserveSourceLayerInProjectSnapshot(project, sourceLayer),
         );
         try {
           await Promise.resolve(refreshAssetLibrary?.());
@@ -3723,6 +3751,19 @@ export function useImageCanvasGenerationWorkflow({
           // 服务端已原子落库成功；列表刷新失败不能把成功事实伪装成去背景失败。
         }
       } catch (error) {
+        if (backgroundRemovalDialogId) {
+          updateCanvasGenerationDialogById(
+            backgroundRemovalDialogId,
+            (dialog) => ({
+              ...dialog,
+              status: 'failed',
+              errorMessage:
+                error instanceof Error && error.message.trim()
+                  ? error.message
+                  : '去除序列帧背景失败',
+            }),
+          );
+        }
         window.alert(
           error instanceof Error && error.message.trim()
             ? error.message
@@ -3747,6 +3788,7 @@ export function useImageCanvasGenerationWorkflow({
       assetFolderId,
       closeGenerationTransientState,
       onWalletBalanceMayHaveChanged,
+      openPlacedCanvasGenerationDialog,
       projectId,
       refreshAssetLibrary,
       refreshTaskListForQueuedGeneration,
@@ -3755,6 +3797,7 @@ export function useImageCanvasGenerationWorkflow({
       setMetadataLayer,
       setQuickEditPanel,
       showGenerationWarning,
+      updateCanvasGenerationDialogById,
     ],
   );
 
-- 
2.52.0


From 2c85ea0b8394110d5521f85c6e6f341db76de586 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 14:27:55 +0800
Subject: [PATCH 06/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=90=8E=E5=A4=84=E7=90=86=E7=BB=93=E6=9E=9C=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E4=B8=8E=E5=AD=98=E5=82=A8=E5=B9=82=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

视频直接转换和序列帧去背景按 operation 隔离对象存储路径
队列后处理失败统一返回脱敏用户文案
inline 转换和去背景结果直接应用服务端项目快照
修复去背景加载状态和相关前端回归测试
---
 .../src/character_animation_assets.rs         |  28 +++--
 .../api-server/src/external_generation.rs     |  37 ++++++-
 .../ImageCanvasBottomToolbarView.test.tsx     |   2 +-
 ...CanvasEditorGenerationIntegration.test.tsx |   2 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |   2 +-
 .../ImageCanvasGenerationDialogModel.test.ts  |   1 +
 .../ImageCanvasGenerationDialogModel.ts       |   2 -
 .../ImageCanvasGenerationModel.test.ts        |   2 +-
 ...anvasGenerationSubmissionWorkflow.test.tsx |  28 ++---
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  13 +++
 .../useImageCanvasGenerationWorkflow.test.tsx | 101 ++++++++++++++++++
 .../useImageCanvasGenerationWorkflow.ts       |  16 ++-
 .../image-editor/editorProjectClient.test.ts  |   2 +-
 13 files changed, 196 insertions(+), 40 deletions(-)

diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 8af4b657f..d9d018ea0 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -1235,7 +1235,7 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
     // 同一 job 的重放必须复用对象路径；新的去背景 job 必须生成一套新序列对象。
     // 不能使用 request fingerprint：用户再次对同一源序列执行去背景时 fingerprint 相同，
     // 会复用上一任务已登记的 object location，并与新 job 的稳定 asset_object id 冲突。
-    let storage_task_id = editor_character_animation_background_removal_storage_task_id(
+    let storage_task_id = editor_character_animation_operation_storage_task_id(
         owner_user_id.as_str(),
         task_id.as_str(),
     );
@@ -2281,12 +2281,11 @@ pub(crate) async fn convert_editor_character_animation_video_for_owner(
     let operation = editor_generation_operation(&caller)
         .map_err(|error| character_animation_error_response(&request_context, error))?;
     let task_id = operation.operation_id.clone();
-    // operation_id 用于持久化幂等；帧对象路径还绑定请求 fingerprint。相同 request id
-    // 的不同请求不会互相覆盖，重试同一请求仍能重用路径。
-    let storage_task_id = format!(
-        "{}-{}",
-        sanitize_storage_segment(owner_user_id.as_str(), "owner"),
-        operation.operation_fingerprint
+    // 同一 operation 的重放必须复用对象路径；新的转换 operation 即使 payload 相同，
+    // 也必须生成一套新序列对象，避免旧 object location 与新 asset_object id 冲突。
+    let storage_task_id = editor_character_animation_operation_storage_task_id(
+        owner_user_id.as_str(),
+        task_id.as_str(),
     );
     if let Some(reporter) = caller.phase_reporter.as_ref() {
         reporter
@@ -5665,7 +5664,7 @@ fn editor_inline_generation_caller<T: Serialize>(
     })
 }
 
-fn editor_character_animation_background_removal_storage_task_id(
+fn editor_character_animation_operation_storage_task_id(
     owner_user_id: &str,
     operation_id: &str,
 ) -> String {
@@ -9906,7 +9905,7 @@ mod tests {
             );
         }
         assert!(body.contains("price_mud_points: 0"));
-        assert!(body.contains("let storage_task_id = format!"));
+        assert!(body.contains("editor_character_animation_operation_storage_task_id"));
         assert!(body.contains("storage_task_id.as_str(),"));
         assert!(body.contains("cleanup_uncommitted_character_animation_objects"));
     }
@@ -9982,13 +9981,10 @@ mod tests {
     }
 
     #[test]
-    fn editor_character_animation_background_removal_storage_path_is_task_scoped() {
-        let first =
-            editor_character_animation_background_removal_storage_task_id("user-1", "task-1");
-        let replay =
-            editor_character_animation_background_removal_storage_task_id("user-1", "task-1");
-        let next_job =
-            editor_character_animation_background_removal_storage_task_id("user-1", "task-2");
+    fn editor_character_animation_operation_storage_path_is_task_scoped() {
+        let first = editor_character_animation_operation_storage_task_id("user-1", "task-1");
+        let replay = editor_character_animation_operation_storage_task_id("user-1", "task-1");
+        let next_job = editor_character_animation_operation_storage_task_id("user-1", "task-2");
 
         assert_eq!(first, replay);
         assert_ne!(first, next_job);
diff --git a/server-rs/crates/api-server/src/external_generation.rs b/server-rs/crates/api-server/src/external_generation.rs
index 76b18a708..ccbe6cea7 100644
--- a/server-rs/crates/api-server/src/external_generation.rs
+++ b/server-rs/crates/api-server/src/external_generation.rs
@@ -21,7 +21,9 @@ use spacetime_client::{
 
 use crate::editor_generation_queue::{
     EDITOR_BACKGROUND_MUSIC_GENERATION_JOB_KIND, EDITOR_BACKGROUND_REMOVAL_JOB_KIND,
-    EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND, EDITOR_SOUND_EFFECT_GENERATION_JOB_KIND,
+    EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND,
+    EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND,
+    EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND, EDITOR_SOUND_EFFECT_GENERATION_JOB_KIND,
 };
 use crate::{
     api_response::json_success_body, auth::AuthenticatedAccessToken, http_error::AppError,
@@ -226,6 +228,12 @@ pub(crate) fn user_visible_external_generation_error(
     if job_kind == EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND && error.is_some() {
         return Some("角色动作生成失败，请稍后重试。".to_string());
     }
+    if job_kind == EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND && error.is_some() {
+        return Some("视频直接转换失败，请稍后重试。".to_string());
+    }
+    if job_kind == EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND && error.is_some() {
+        return Some("序列帧去背景失败，请稍后重试。".to_string());
+    }
     // 音效失败文本来自 ElevenLabs / reqwest，会带上请求端点、底层错误链和上游状态码。
     if job_kind == EDITOR_SOUND_EFFECT_GENERATION_JOB_KIND && error.is_some() {
         return Some("音效生成失败，请稍后重试。".to_string());
@@ -511,6 +519,33 @@ mod tests {
         assert!(!lower.contains("provider"));
     }
 
+    #[test]
+    fn character_animation_postprocessing_failures_hide_internal_details_from_owner() {
+        for (job_kind, expected) in [
+            (
+                EDITOR_CHARACTER_ANIMATION_VIDEO_CONVERSION_JOB_KIND,
+                "视频直接转换失败，请稍后重试。",
+            ),
+            (
+                EDITOR_CHARACTER_ANIMATION_BACKGROUND_REMOVAL_JOB_KIND,
+                "序列帧去背景失败，请稍后重试。",
+            ),
+        ] {
+            let message = user_visible_external_generation_error(
+                job_kind,
+                Some("provider=aliyun-oss objectKey=users/user-1/private.png HTTP 502".to_string()),
+            );
+
+            assert_eq!(message.as_deref(), Some(expected));
+            let lower = message
+                .expect("失败任务应返回稳定文案")
+                .to_ascii_lowercase();
+            for forbidden in ["aliyun", "objectkey", "users/user-1", "http"] {
+                assert!(!lower.contains(forbidden));
+            }
+        }
+    }
+
     #[test]
     fn sound_effect_failure_hides_provider_and_transport_details_from_owner() {
         let job = ExternalGenerationJobSummaryRecord {
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index f887b7a81..f3ce432ef 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -73,7 +73,7 @@ describe('ImageCanvasBottomToolbarView', () => {
     );
     expect(
       toolbar.querySelectorAll('.genarrative-image-canvas__toolbar-group'),
-    ).toHaveLength(12);
+    ).toHaveLength(13);
     expect(
       toolbar.querySelectorAll('.genarrative-image-canvas__toolbar-divider'),
     ).toHaveLength(2);
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 1ab91da71..42f52166a 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -3452,7 +3452,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     const characterLayer = await screen.findByAltText('画布图片：市场老妇人');
     fireEvent.click(characterLayer.closest('button')!);
     expect(screen.getByText('角色')).toBeTruthy();
-    expect(screen.queryByRole('button', { name: '生成动画' })).toBeNull();
+    expect(screen.getByRole('button', { name: '生成动画' })).toBeTruthy();
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
     expect(
       screen.queryByRole('dialog', { name: 'Spine序列帧动画生成' }),
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 1736ac63e..149734969 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -8,9 +8,9 @@ import type {
   EditorAssetSnapshot,
   EditorCharacterAnimationBackgroundColor,
   EditorCharacterAnimationFrameCount,
-  EditorCharacterAnimationResult,
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
+  EditorCharacterAnimationResult,
   EditorImageGenerationStyle,
   EditorImageSequenceFrameResult,
   EditorPixelArtSnapInput,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 2788b7c42..3a62384ee 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -497,6 +497,7 @@ describe('ImageCanvasGenerationDialogModel', () => {
           assetObjectId: undefined,
           resourceId: 'resource-source',
           sourceAssetId: undefined,
+          assetKind: 'character',
           width: 1024,
           height: 768,
         },
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index e3c5d57d7..3771a4ab2 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -2393,8 +2393,6 @@ export function appendGenerationReference(
           }
         : dialog;
     }
-    const hasVideoMotionReference =
-      dialog.generationReferences?.[0]?.mediaType === 'video';
     if (mediaType === 'audio') {
       return dialog;
     }
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index cf5f9faff..c77ebf177 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -31,9 +31,9 @@ import {
   calculateEditorUiDesignPrice,
   calculateEditorVideoPrice,
   canOpenRedrawPanel,
-  createCanvasLayerReference,
   CANVAS_GENERATION_PARAMETER_FALLBACK_WARNING,
   CHARACTER_ANIMATION_MODEL,
+  createCanvasLayerReference,
   decodeCanvasGenerationInputs,
   DEFAULT_IMAGE_MODEL,
   DEFAULT_SOUND_EFFECT_MODEL,
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 1e767d5d4..06c1183bb 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -12,6 +12,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import backgroundMusicPromptCanonicalizationCases from '../../../packages/shared/test-fixtures/background-music-prompt-canonicalization.json';
 import { ApiClientError } from '../../services/apiClient';
+import type { EditorProjectSnapshot } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
   CanvasHistoryAction,
@@ -4532,12 +4533,21 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
-  it('submits direct video conversion without prompt or model compatibility fields', async () => {
+  it('applies the inline direct-conversion project without creating a duplicate local layer', async () => {
     const appendedLayers = vi.fn();
     const frames = [
       { imageSrc: '/converted/frame-1.png', width: 640, height: 360 },
       { imageSrc: '/converted/frame-2.png', width: 640, height: 360 },
     ];
+    const applyProjectSnapshot = vi.fn();
+    const backendProject: EditorProjectSnapshot = {
+      projectId: 'editor-project-1',
+      title: '视频转换项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [],
+      resources: [],
+      updatedAt: '2026-08-15T00:00:00.000Z',
+    };
     convertEditorCharacterAnimationVideoMock.mockResolvedValueOnce({
       resultType: 'video-conversion',
       taskId: 'conversion-task-1',
@@ -4561,6 +4571,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         imageSequenceFrames: frames,
         imageSequenceDurationMs: 2_500,
       },
+      project: backendProject,
     });
     const sourceReference = {
       id: 'conversion-source',
@@ -4574,6 +4585,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     render(
       <SubmissionWorkflowHarness
         projectId="editor-project-1"
+        applyProjectSnapshot={applyProjectSnapshot}
         onAppendCanvasLayers={appendedLayers}
         initialDialog={{
           id: 'dialog-video-conversion',
@@ -4626,18 +4638,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     expect(request).not.toHaveProperty('prompt');
     expect(request).not.toHaveProperty('promptText');
     expect(request).not.toHaveProperty('model');
-    await waitFor(() => expect(appendedLayers).toHaveBeenCalledTimes(1));
-    const layer = appendedLayers.mock.calls[0]?.[0]?.[0];
-    expect(layer).toMatchObject({
-      taskId: 'conversion-task-1',
-      provider: 'FFmpeg',
-      imageSequenceDurationMs: 2_500,
-      assetKind: 'character-animation',
-      mediaType: 'image-sequence',
+    await waitFor(() => {
+      expect(applyProjectSnapshot).toHaveBeenCalledWith(backendProject);
     });
-    expect(layer.prompt).toBeUndefined();
-    expect(layer.actualPrompt).toBeUndefined();
-    expect(layer.model).toBeUndefined();
+    expect(appendedLayers).not.toHaveBeenCalled();
   });
 
   it('does not reuse animation lineage as the direct conversion source resource', async () => {
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 694884a67..9acb0d3f9 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -2809,6 +2809,18 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           );
           return;
         }
+        if (result.project && applyProjectSnapshot) {
+          applyProjectSnapshot(result.project);
+          if (result.asset) {
+            upsertGeneratedAsset?.(result.asset);
+          }
+          setCharacterAnimationPanel((currentPanel) =>
+            currentPanel
+              ? { ...currentPanel, status: 'completed', result }
+              : currentPanel,
+          );
+          return;
+        }
         if (canvasDialog) {
           addCharacterAnimationResultLayer(
             result,
@@ -3070,6 +3082,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     onWalletBalanceMayHaveChanged,
     onQueuedGenerationTask,
     onGenerationWarning,
+    upsertGeneratedAsset,
   ]);
 
   return useMemo(
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index d4483be0b..3640ca8d5 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -52,6 +52,7 @@ const editEditorImageMock = vi.hoisted(() => vi.fn());
 const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
 const splitEditorIconSpritesheetMock = vi.hoisted(() => vi.fn());
 const splitEditorCharacterAnimationFramesMock = vi.hoisted(() => vi.fn());
+const removeEditorCharacterAnimationBackgroundMock = vi.hoisted(() => vi.fn());
 const uploadEditorMediaAssetObjectFileMock = vi.hoisted(() => vi.fn());
 const uploadEditorMediaAssetFileMock = vi.hoisted(() => vi.fn());
 const renderCropExpandImageMock = vi.hoisted(() => vi.fn());
@@ -91,6 +92,8 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     splitEditorIconSpritesheet: splitEditorIconSpritesheetMock,
     splitEditorCharacterAnimationFrames:
       splitEditorCharacterAnimationFramesMock,
+    removeEditorCharacterAnimationBackground:
+      removeEditorCharacterAnimationBackgroundMock,
   };
 });
 
@@ -941,6 +944,21 @@ function GenerationWorkflowHarness({
           ? '拆帧中'
           : '空闲'}
       </output>
+      <button
+        type="button"
+        onClick={() =>
+          void workflow.removeSelectedCharacterAnimationBackground(layers[0]!)
+        }
+      >
+        去除序列帧背景
+      </button>
+      <output aria-label="序列帧去背景状态">
+        {workflow.removingBackgroundCharacterAnimationLayerIds.has(
+          layers[0]!.id,
+        )
+          ? '去背景中'
+          : '空闲'}
+      </output>
       <button
         type="button"
         onClick={() =>
@@ -2988,6 +3006,89 @@ describe('useImageCanvasGenerationWorkflow', () => {
     },
   );
 
+  it('applies an inline character-animation background-removal project and publishes removal state', async () => {
+    const deferred = createDeferred<{
+      taskId: string;
+      frames: Array<{ imageSrc: string; width: number; height: number }>;
+      frameCount: number;
+      durationMs: number;
+      frameWidth: number;
+      frameHeight: number;
+      priceMudPoints: number;
+      project: EditorProjectSnapshot;
+    }>();
+    const applyProjectSnapshot = vi.fn();
+    const refreshAssetLibrary = vi.fn().mockResolvedValue(undefined);
+    const backendProject: EditorProjectSnapshot = {
+      projectId: 'project-1',
+      title: '序列帧去背景项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-source',
+          resourceId: 'resource-source',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-08-15T00:00:00.000Z',
+    };
+    removeEditorCharacterAnimationBackgroundMock.mockReturnValueOnce(
+      deferred.promise,
+    );
+    render(
+      <GenerationWorkflowHarness
+        projectId="project-1"
+        applyProjectSnapshot={applyProjectSnapshot}
+        refreshAssetLibrary={refreshAssetLibrary}
+        initialLayers={[
+          createLayer({
+            title: '勇者奔跑',
+            assetKind: 'character-animation',
+            mediaType: 'image-sequence',
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '去除序列帧背景' }));
+
+    expect(
+      screen.getByRole('status', { name: '序列帧去背景状态' }).textContent,
+    ).toBe('去背景中');
+    expect(removeEditorCharacterAnimationBackgroundMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        projectId: 'project-1',
+        sourceLayerId: 'layer-source',
+        sourceResourceId: 'resource-source',
+      }),
+    );
+
+    deferred.resolve({
+      taskId: 'background-removal-task',
+      frames: [
+        { imageSrc: '/frames/1.png', width: 320, height: 240 },
+        { imageSrc: '/frames/2.png', width: 320, height: 240 },
+      ],
+      frameCount: 2,
+      durationMs: 2_000,
+      frameWidth: 320,
+      frameHeight: 240,
+      priceMudPoints: 0,
+      project: backendProject,
+    });
+
+    await waitFor(() => {
+      expect(applyProjectSnapshot).toHaveBeenCalledWith(backendProject, {
+        type: 'remove-background',
+        count: 1,
+      });
+    });
+    expect(refreshAssetLibrary).toHaveBeenCalledTimes(1);
+    expect(
+      screen.getByRole('status', { name: '序列帧去背景状态' }).textContent,
+    ).toBe('空闲');
+  });
+
   it('queues background removal for private character images', async () => {
     resolveEditorImageReferenceDataUrlMock.mockResolvedValueOnce(
       'data:image/png;base64,resolved-character',
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index efe936e34..41b57f3a2 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -3730,7 +3730,7 @@ export function useImageCanvasGenerationWorkflow({
             sourceLayer,
           ),
         });
-        await applyQueuedEditorGenerationProject(
+        const queued = await applyQueuedEditorGenerationProject(
           result,
           projectId,
           (project) =>
@@ -3745,6 +3745,15 @@ export function useImageCanvasGenerationWorkflow({
           (project) =>
             preserveSourceLayerInProjectSnapshot(project, sourceLayer),
         );
+        if (!queued && result.project && applyProjectSnapshot) {
+          applyProjectSnapshot(
+            preserveSourceLayerInProjectSnapshot(result.project, sourceLayer),
+            {
+              type: 'remove-background',
+              count: 1,
+            },
+          );
+        }
         try {
           await Promise.resolve(refreshAssetLibrary?.());
         } catch {
@@ -3870,9 +3879,6 @@ export function useImageCanvasGenerationWorkflow({
       let rejectedCharacterReference: 'video' | 'character' | null = null;
       setGenerateDialog((currentDialog) => {
         if (currentDialog?.mode === 'character-animation') {
-          const isVideoAppearanceReference =
-            currentDialog.characterAnimationWorkflow !== 'video-conversion' &&
-            currentDialog.generationReferences?.[0]?.mediaType === 'video';
           const isAllowedCharacterAnimationReference =
             currentDialog.characterAnimationWorkflow === 'video-conversion'
               ? layer.mediaType === 'video' ||
@@ -4995,6 +5001,8 @@ export function useImageCanvasGenerationWorkflow({
       splittingIconSpritesheetLayerIds,
       splitSelectedCharacterAnimationFrames,
       splittingCharacterAnimationLayerIds,
+      removeSelectedCharacterAnimationBackground,
+      removingBackgroundCharacterAnimationLayerIds,
       submitCharacterAnimation,
       submitCropExpand,
       submitIconSpritesheetGeneration,
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index d60224330..37c0cd1fc 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -3,6 +3,7 @@
 import backgroundMusicPromptCanonicalizationCases from '../../../packages/shared/test-fixtures/background-music-prompt-canonicalization.json';
 import {
   completeEditorBackgroundMusicPrompt,
+  convertEditorCharacterAnimationVideo,
   createEditorAsset,
   createEditorAssetFolder,
   createEditorProject,
@@ -19,7 +20,6 @@ import {
   EDITOR_SOUND_EFFECT_PROMPT_OPTIMIZE_TIMEOUT_MS,
   extractEditorUiDesignAssets,
   generateEditorBackgroundMusic,
-  convertEditorCharacterAnimationVideo,
   generateEditorCharacterAnimation,
   generateEditorIconSpec,
   generateEditorIconSpritesheet,
-- 
2.52.0


From 101fd952d5ab0792220ace59db33e6d040edd1e1 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 14:50:18 +0800
Subject: [PATCH 07/15] =?UTF-8?q?=E6=94=B6=E7=B4=A7=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=8E=BB=E8=83=8C=E6=99=AF=E6=9D=A5=E6=BA=90=E4=B8=8E?=
 =?UTF-8?q?=E7=BB=BF=E5=B9=95=E9=97=A8=E7=A6=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

验证去背景每帧正式资产对象的用户归属、对象路径和来源任务
仅允许编辑器生成的纯绿幕角色动画执行算法去背景
补齐去背景生成 action 白名单但保持不可改造
更新工具栏门禁、回归测试和Spine序列帧技术方案
---
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |   1 +
 .../src/character_animation_assets.rs         | 186 ++++++++++++++++++
 .../ImageCanvasGenerationInputsModel.ts       |   1 +
 .../ImageCanvasGenerationModel.test.ts        |  61 ++++++
 .../ImageCanvasGenerationModel.ts             |  13 ++
 ...ageCanvasSelectedLayerToolbarView.test.tsx |  39 +++-
 .../ImageCanvasSelectedLayerToolbarView.tsx   |  65 +++---
 7 files changed, 336 insertions(+), 30 deletions(-)

diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index f27d3195d..aaa6eb312 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -607,6 +607,7 @@ AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。`c
 - 原始不透明序列与透明序列是两个正式 resource；
 - 去背景全帧成功后一次性发布新的 `character-animation` / `image-sequence` 资源、素材和画布图层，保留原始序列图层不被替换；
 - 任一帧失败不产生残缺结果；
+- v1 去背景仅支持编辑器权威生成且 `backgroundColor=green` 的纯绿幕序列帧；白 / 蓝 / 紫背景、视频直接转换结果、缺失或非法生成配方均由后端拒绝，前端不展示该入口；
 - 当前费用固定为 0 泥点，失败不产生不完整正式结果；请求先进入现有 `external_generation_job` 队列，不能由 HTTP 请求同步执行。
 - 队列 worker 保持一个父 job，在 job 内按帧并行执行下载、纯本地绿幕扣除、最终 PNG 上传和帧对象准备；所有已发出的帧必须 drain 完成后再按帧号排序，一帧失败即清理未提交对象并整批失败，不新增逐帧子任务表或独立计费。
 - 帧对象路径绑定本次 job 的 `operationId`，同一 job 重放复用路径，不同 job 即使请求 fingerprint 相同也不得复用旧 object location，避免新 `asset_object` 与历史结果发生幂等冲突。
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index d9d018ea0..eb9d1ea8d 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -1049,6 +1049,101 @@ pub async fn split_editor_character_animation_frames(
     ))
 }
 
+/// 在读取源序列帧前验证每一帧的正式资产对象归属和来源。
+///
+/// `imageSequenceFrames` 属于可持久化项目数据，不能单独作为 OSS 读取授权；
+/// 必须同时证明 assetObjectId、objectKey、账号和来源任务彼此一致。
+async fn validate_editor_character_animation_source_frames(
+    state: &AppState,
+    owner_user_id: &str,
+    source_task_id: &str,
+    frames: &[EditorCharacterAnimationFramePayload],
+    provider: &str,
+) -> Result<(), AppError> {
+    for (index, frame) in frames.iter().enumerate() {
+        let frame_number = index + 1;
+        let asset_object_id = frame
+            .asset_object_id
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                    "provider": provider,
+                    "message": format!("第{frame_number}帧缺少assetObjectId。"),
+                }))
+            })?;
+        let object_key = frame
+            .object_key
+            .as_deref()
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                    "provider": provider,
+                    "message": format!("第{frame_number}帧缺少objectKey。"),
+                }))
+            })?;
+        let asset_object = state
+            .spacetime_client()
+            .get_asset_object(asset_object_id.to_string())
+            .await
+            .map_err(map_editor_project_error)?
+            .ok_or_else(|| {
+                AppError::from_status(StatusCode::NOT_FOUND).with_details(json!({
+                    "provider": provider,
+                    "message": format!("第{frame_number}帧的正式资产对象不存在。"),
+                }))
+            })?;
+        if asset_object.owner_user_id.as_deref() != Some(owner_user_id)
+            || asset_object.object_key != object_key
+            || asset_object.source_job_id.as_deref() != Some(source_task_id)
+        {
+            return Err(
+                AppError::from_status(StatusCode::FORBIDDEN).with_details(json!({
+                    "provider": provider,
+                    "message": format!("第{frame_number}帧的资产对象归属或来源不一致。"),
+                })),
+            );
+        }
+        if !asset_object
+            .content_type
+            .as_deref()
+            .is_some_and(|content_type| content_type.starts_with("image/"))
+            || frame.width == 0
+            || frame.height == 0
+        {
+            return Err(
+                AppError::from_status(StatusCode::UNPROCESSABLE_ENTITY).with_details(json!({
+                    "provider": provider,
+                    "message": format!("第{frame_number}帧不是有效的图片资产。"),
+                })),
+            );
+        }
+    }
+    Ok(())
+}
+
+fn editor_character_animation_sequence_is_green_screen(generation_inputs: Option<&Value>) -> bool {
+    let Some(inputs) = generation_inputs.and_then(Value::as_object) else {
+        return false;
+    };
+    if inputs.get("version").and_then(Value::as_u64) != Some(2)
+        || inputs.get("action").and_then(Value::as_str) != Some("character-animation.generate")
+    {
+        return false;
+    }
+    inputs
+        .get("fields")
+        .and_then(Value::as_array)
+        .into_iter()
+        .flatten()
+        .any(|field| {
+            field.get("id").and_then(Value::as_str) == Some("backgroundColor")
+                && field.get("value").and_then(Value::as_str) == Some("green")
+        })
+}
+
 pub async fn remove_editor_character_animation_background(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1196,6 +1291,16 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
             })),
         ));
     }
+    if !editor_character_animation_sequence_is_green_screen(
+        source_resource.generation_inputs.as_ref(),
+    ) {
+        return Err(character_animation_error_response(
+            &request_context,
+            editor_character_animation_bad_request(
+                "当前仅支持由编辑器生成且背景为纯绿幕的角色动作序列帧去背景。",
+            ),
+        ));
+    }
     let frames: Vec<EditorCharacterAnimationFramePayload> = source_resource
         .image_sequence_frames
         .clone()
@@ -1215,6 +1320,26 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
             )),
         ));
     }
+    let source_task_id = source_resource
+        .task_id
+        .clone()
+        .map(|value| value.trim().to_string())
+        .filter(|value| !value.is_empty())
+        .ok_or_else(|| {
+            character_animation_error_response(
+                &request_context,
+                editor_character_animation_bad_request("序列帧资源缺少可信来源任务。"),
+            )
+        })?;
+    validate_editor_character_animation_source_frames(
+        &state,
+        owner_user_id.as_str(),
+        source_task_id.as_str(),
+        &frames,
+        "editor-character-animation-background-removal",
+    )
+    .await
+    .map_err(|error| character_animation_error_response(&request_context, error))?;
     let frame_width = source_resource.width;
     let frame_height = source_resource.height;
     let duration_ms = source_resource.image_sequence_duration_ms.unwrap_or(0);
@@ -9216,6 +9341,44 @@ mod tests {
         assert!(!lower.contains("birefnet"));
     }
 
+    #[test]
+    fn editor_character_animation_background_removal_requires_green_generated_inputs() {
+        let green_inputs = json!({
+            "version": 2,
+            "action": "character-animation.generate",
+            "fields": [{
+                "id": "backgroundColor",
+                "value": "green"
+            }]
+        });
+        assert!(editor_character_animation_sequence_is_green_screen(Some(
+            &green_inputs
+        )));
+
+        for inputs in [
+            json!({
+                "version": 2,
+                "action": "character-animation.generate",
+                "fields": [{ "id": "backgroundColor", "value": "white" }]
+            }),
+            json!({
+                "version": 2,
+                "action": "character-animation.generate",
+                "fields": [{ "id": "backgroundColor", "value": "blue" }]
+            }),
+            json!({
+                "version": 2,
+                "action": "character-animation.convert",
+                "fields": [{ "id": "backgroundColor", "value": "green" }]
+            }),
+        ] {
+            assert!(!editor_character_animation_sequence_is_green_screen(Some(
+                &inputs
+            )));
+        }
+        assert!(!editor_character_animation_sequence_is_green_screen(None));
+    }
+
     #[test]
     fn parse_video_data_url_accepts_mp4_payload() {
         let parsed =
@@ -9991,6 +10154,29 @@ mod tests {
         assert!(first.ends_with("-task-1"));
     }
 
+    #[test]
+    fn editor_character_animation_background_removal_validates_each_source_frame() {
+        let source = include_str!("character_animation_assets.rs");
+        let body = source
+            .split_once(
+                "pub(crate) async fn remove_editor_character_animation_background_for_owner",
+            )
+            .and_then(|(_, tail)| {
+                tail.split_once("async fn extract_and_prepare_background_removal_frames")
+            })
+            .map(|(body, _)| body)
+            .expect("background removal handler should exist");
+
+        assert!(body.contains("validate_editor_character_animation_source_frames"));
+        assert!(body.contains("let source_task_id = source_resource"));
+        assert!(body.contains(".task_id"));
+        assert!(body.contains("source_resource.generation_inputs"));
+        assert!(source.contains("asset_object.owner_user_id.as_deref()"));
+        assert!(source.contains("asset_object.object_key != object_key"));
+        assert!(source.contains("asset_object.source_job_id.as_deref()"));
+        assert!(source.contains("content_type.starts_with(\"image/\")"));
+    }
+
     #[test]
     fn editor_character_animation_background_removal_uses_local_green_screen_only() {
         let source = include_str!("character_animation_assets.rs");
diff --git a/src/components/image-editor/ImageCanvasGenerationInputsModel.ts b/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
index e702dd991..ec79a2b7e 100644
--- a/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationInputsModel.ts
@@ -26,6 +26,7 @@ export const CANVAS_GENERATION_ACTIONS = [
   'audio.background-music.generate',
   'character-animation.generate',
   'character-animation.convert',
+  'character-animation.remove-background',
   'image.edit',
   'ui-design.extract-assets',
   'image.perfect-pixel',
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index c77ebf177..2d421edd0 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -5,6 +5,10 @@ import type {
   CanvasGenerationDialogState,
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
+import {
+  hydrateCanvasGenerationInputsResult,
+  isRemixableCanvasGenerationAction,
+} from './ImageCanvasGenerationInputsModel';
 import {
   applyEditorGenerationPricingConfig,
   BACKGROUND_MUSIC_MODEL_SUNO,
@@ -31,6 +35,7 @@ import {
   calculateEditorUiDesignPrice,
   calculateEditorVideoPrice,
   canOpenRedrawPanel,
+  canRemoveCharacterAnimationBackground,
   CANVAS_GENERATION_PARAMETER_FALLBACK_WARNING,
   CHARACTER_ANIMATION_MODEL,
   createCanvasLayerReference,
@@ -65,6 +70,62 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasGenerationModel', () => {
+  it('allows sequence background removal only for green generated animations', () => {
+    const layer = {
+      assetKind: 'character-animation',
+      generationInputs: {
+        version: 2 as const,
+        action: 'character-animation.generate' as const,
+        fields: [
+          { id: 'backgroundColor', title: '背景颜色', value: 'green' as const },
+        ],
+        references: [],
+      },
+    } as unknown as CanvasLayer;
+    expect(canRemoveCharacterAnimationBackground(layer)).toBe(true);
+    expect(
+      canRemoveCharacterAnimationBackground({
+        ...layer,
+        generationInputs: {
+          ...layer.generationInputs!,
+          action: 'character-animation.convert',
+        },
+      }),
+    ).toBe(false);
+    expect(
+      canRemoveCharacterAnimationBackground({
+        ...layer,
+        generationInputs: {
+          ...layer.generationInputs!,
+          fields: [{ id: 'backgroundColor', title: '背景颜色', value: 'blue' }],
+        },
+      }),
+    ).toBe(false);
+    expect(
+      canRemoveCharacterAnimationBackground({
+        ...layer,
+        generationInputs: undefined,
+      }),
+    ).toBe(false);
+  });
+
+  it('hydrates remove-background as a known but non-remixable action', () => {
+    const result = hydrateCanvasGenerationInputsResult({
+      version: 2,
+      action: 'character-animation.remove-background',
+      fields: [],
+      references: [],
+    });
+
+    expect(result.state).toBe('valid');
+    expect(result.inputs?.action).toBe('character-animation.remove-background');
+    expect(
+      isRemixableCanvasGenerationAction(
+        'character-animation.remove-background',
+      ),
+    ).toBe(false);
+  });
+
   it('uses a character animation preview video when a video reference is requested', () => {
     const reference = createCanvasLayerReference(
       {
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 68f8020c5..0a2fbb8f1 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -1042,6 +1042,19 @@ export function buildCharacterAnimationGenerationInputs(
   };
 }
 
+export function canRemoveCharacterAnimationBackground(layer: CanvasLayer) {
+  if (
+    layer.assetKind !== 'character-animation' ||
+    layer.generationInputs?.version !== 2 ||
+    layer.generationInputs.action !== 'character-animation.generate'
+  ) {
+    return false;
+  }
+  return layer.generationInputs.fields.some(
+    (field) => field.id === 'backgroundColor' && field.value === 'green',
+  );
+}
+
 export function canSplitCharacterAnimationFrames(layer: CanvasLayer) {
   const resourceId = resolveRegisteredProjectResourceId(layer.resourceId);
   return (
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index 7c9693f4a..655444448 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -460,7 +460,10 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         generationInputs: {
           version: 2,
           action: 'character-animation.generate',
-          fields: [{ id: 'prompt', title: '动作描述', value: '挥手' }],
+          fields: [
+            { id: 'prompt', title: '动作描述', value: '挥手' },
+            { id: 'backgroundColor', title: '背景颜色', value: 'green' },
+          ],
           references: [],
         },
       }),
@@ -489,6 +492,40 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     );
   });
 
+  it('hides sequence background removal unless the authoritative background is green', () => {
+    const whiteLayer = createLayer({
+      mediaType: 'image-sequence',
+      assetKind: 'character-animation',
+      generationInputs: {
+        version: 2,
+        action: 'character-animation.generate',
+        fields: [
+          { id: 'prompt', title: '动作描述', value: '挥手' },
+          { id: 'backgroundColor', title: '背景颜色', value: 'white' },
+        ],
+        references: [],
+      },
+    });
+    renderSelectedToolbar({ selectedLayer: whiteLayer });
+
+    expect(screen.queryByRole('button', { name: '去背景' })).toBeNull();
+
+    cleanup();
+    const convertedLayer = createLayer({
+      mediaType: 'image-sequence',
+      assetKind: 'character-animation',
+      generationInputs: {
+        version: 2,
+        action: 'character-animation.convert',
+        fields: [{ id: 'backgroundColor', title: '背景颜色', value: 'green' }],
+        references: [],
+      },
+    });
+    renderSelectedToolbar({ selectedLayer: convertedLayer });
+
+    expect(screen.queryByRole('button', { name: '去背景' })).toBeNull();
+  });
+
   it('disables frame splitting while a character animation resource is pending registration', () => {
     const props = renderSelectedToolbar({
       selectedLayer: createLayer({
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index 1b36ec0af..e5208699e 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -16,6 +16,7 @@ import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import {
   canOpenRedrawPanel,
+  canRemoveCharacterAnimationBackground,
   canSplitCharacterAnimationFrames,
   isQuickEditSupportedLayer,
 } from './ImageCanvasGenerationModel';
@@ -67,6 +68,8 @@ export function ImageCanvasSelectedLayerToolbarView({
     return null;
   }
   const canRedraw = canOpenRedrawPanel(selectedLayer);
+  const canRemoveCharacterAnimation =
+    canRemoveCharacterAnimationBackground(selectedLayer);
   const isCharacterAnimationResourcePending =
     selectedLayer.assetKind === 'character-animation' &&
     !canSplitCharacterAnimationFrames(selectedLayer);
@@ -281,35 +284,39 @@ export function ImageCanvasSelectedLayerToolbarView({
       ) : null}
       {selectedLayer.assetKind === 'character-animation' ? (
         <>
-          <CanvasChromeButton
-            className="image-canvas-editor__floating-toolbar-text-button"
-            label={
-              isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'
-            }
-            title={
-              isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'
-            }
-            icon={
-              isRemovingCharacterAnimationBackground ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <ImageOff className="h-4 w-4" />
-              )
-            }
-            disabled={
-              isCharacterAnimationResourcePending ||
-              isRemovingCharacterAnimationBackground
-            }
-            aria-busy={
-              isCharacterAnimationResourcePending ||
-              isRemovingCharacterAnimationBackground
-            }
-            onClick={() => onRemoveCharacterAnimationBackground(selectedLayer)}
-          >
-            <span>
-              {isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'}
-            </span>
-          </CanvasChromeButton>
+          {canRemoveCharacterAnimation ? (
+            <CanvasChromeButton
+              className="image-canvas-editor__floating-toolbar-text-button"
+              label={
+                isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'
+              }
+              title={
+                isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'
+              }
+              icon={
+                isRemovingCharacterAnimationBackground ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <ImageOff className="h-4 w-4" />
+                )
+              }
+              disabled={
+                isCharacterAnimationResourcePending ||
+                isRemovingCharacterAnimationBackground
+              }
+              aria-busy={
+                isCharacterAnimationResourcePending ||
+                isRemovingCharacterAnimationBackground
+              }
+              onClick={() =>
+                onRemoveCharacterAnimationBackground(selectedLayer)
+              }
+            >
+              <span>
+                {isRemovingCharacterAnimationBackground ? '去背景中' : '去背景'}
+              </span>
+            </CanvasChromeButton>
+          ) : null}
           <CanvasChromeButton
             className="image-canvas-editor__floating-toolbar-text-button"
             label={characterAnimationSplitLabel}
-- 
2.52.0


From b5dc99e067f8d050c7040921e25f055e0de09115 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 15:08:12 +0800
Subject: [PATCH 08/15] Revert "local: stash the document"

This reverts commit 0123f3db7664e11bfbf605b4df5e6303cdcfe6db.
---
 ...��作Agent Runtime交互边界重构实施计划-2026-08-12.md | 319 ------------------
 1 file changed, 319 deletions(-)
 delete mode 100644 docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md

diff --git a/docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md b/docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md
deleted file mode 100644
index d3dfe8d0c..000000000
--- a/docs/technical/【技术方案】AI游戏创作Agent Runtime交互边界重构实施计划-2026-08-12.md	
+++ /dev/null
@@ -1,319 +0,0 @@
-# AI 游戏创作 Agent Runtime 交互边界重构实施计划
-
-更新时间：`2026-08-12`
-状态：评审中
-
-## 0. 目标与范围
-
-统一 Consumer（GUI / CLI / 自动化测试）与 Runtime 之间的公开交互边界，达到：
-
-- **Consumer 只做两件事**：`render(state)` 与 `dispatch(intent)`，中间不保留决策。
-- **交互 Loop 收归后端 Supervisor Shell**：Consumer 不再根据 Runtime 状态自行选择 start / steer / confirm / retry / resume。
-- **GUI、CLI、测试夹具是同一套协议的平等 Consumer**，GUI 没有任何特权通道。
-- **Runner 自驱**：工作发现、恢复、继续执行不依赖 Consumer 在线或主动触发。
-
-本重构**不重新设计 Runtime 内部执行模型**（Part D 保持黑盒），只补充 Shell 需要的边界能力。
-
-### 不在本轮
-
-- Agent 执行状态机（main_loop / task_queue / recovery）内部重构。
-- Runner 进程生命周期策略（开机自启 / 无 GUI 常驻）——自驱只限于"Runner 存活期间"，保留 GUI 启动 + GUI-owner watchdog。
-- LLM / Provider / 提示词体系改动。
-
----
-
-## 1. 交互 Loop 协议（Interaction Contract）
-
-这是 Consumer 与 Supervisor Shell 之间唯一的公开协议。协议不绑定 transport（Tauri 命令 / Runner 协议 / 进程内函数均可用同一套 DTO）。
-
-### 1.1 出向事件（Shell → Consumer）
-
-| 事件 | 含义 | 现状落点 | 是否新增 |
-|---|---|---|---|
-| `progress` | 运行推进 | `status/phase` + `recentEvents` + `waitingOn/nextStep`，经 `read_game_creator_agent_runtimes` 与 `game-creator-agent-progress` 事件 | 收敛 |
-| `needs_input` | 等待澄清回答 | `userInputRequest` / phase `waiting-for-user-input`（`AgentRuntimeUserInputRequest`） | 收敛 |
-| `approval_required` | 等待开发者批准工具动作 | `pendingToolAction` / phase `waiting-for-confirmation`（`AgentRuntimePendingToolActionSummary`） | 收敛 |
-| `tool_request` | 工具已请求/执行中 | 现散在 `recentToolCalls` + phase `action` | **新增派生** |
-| `artifact` | 产物 / manifest 变化 | `game-creator-manifest-invalidated` + finalization journal | 收敛 |
-| `done` | 本轮终态 | `completed` + `AgentRuntimeFinalizationJournal` + responseStream `committed` | 收敛 |
-| `error` | 失败 / 需人工核对 | `failed` / `needs-reconciliation` + `error` | 收敛 |
-
-协议 DTO（camelCase 序列化，与现有一致）：
-
-```rust
-enum AgentRuntimeOutboundEvent {
-    Progress(AgentRuntimeProgress),
-    NeedsInput { request: AgentRuntimeUserInputRequestView },
-    ApprovalRequired { action: AgentRuntimePendingToolActionSummary },
-    ToolRequest(AgentRuntimeToolRequest),          // 新增：Shell 从 recentToolCalls+phase 投影
-    Artifact(AgentRuntimeArtifactEvent),           // 收敛 manifest-invalidated + finalization
-    Done(AgentRuntimeDoneEvent),
-    Error(AgentRuntimePublicError),
-}
-
-struct AgentRuntimeProgress {
-    project_path: String, agent_id: String, run_id: String,
-    status: String, phase: String,
-    current_task: String, current_action: String,
-    plan_steps: Vec<AgentRuntimePlanStep>, active_plan_step_index: Option<u32>,
-    waiting_on: String, next_step: String,   // Shell 负责填充，Consumer 不再映射 phase→文案
-    updated_at: u64,
-}
-```
-
-> 与现状的关键差异：`progress` 里的 `waiting_on`/`next_step` 由 **Shell 填充**。当前是前端在 `model.ts:612/644` 硬编码 phase→中文文案，收归 Shell 后前端删除该映射。
-
-### 1.2 入向命令（Consumer → Shell）
-
-| 命令 | 吸收的旧命令 | 说明 |
-|---|---|---|
-| `submit_intent` | `start_*` / `steer_*` | 一条消息可能 steer 进现有 run，也可能 start 新 run，由 Shell 判定 |
-| `answer` | `answer_game_creator_agent_runtime_user_input` | 回答澄清 |
-| `approve` | `confirm_*` / `reject_*` | 批准或拒绝，含 policy 确认卡 |
-| `cancel` | `cancel_game_creator_agent_runtime_task` | 取消 |
-| `resume` | `resume_*` / `confirm_resume_*` / `retry_*` / `confirm_retry_*` / `schedule_game_creator_agent_ready_tasks` | 恢复/重试/调度统一入口 |
-
-命令签名：
-
-```rust
-#[tauri::command]
-async fn submit_game_creator_agent_intent(
-    project_path: String, session_id: String, intent: String,
-    run_profile: Option<String>, source: Option<String>,
-) -> Result<AgentRuntimeIntentResult, String>;
-
-#[tauri::command]
-async fn answer_game_creator_agent_interaction(
-    project_path: String, run_id: String, action_id: String,
-    request_id: String, response_id: String, answers: BTreeMap<String, String>,
-) -> Result<AgentRuntimeResult, String>;
-
-#[tauri::command]
-async fn approve_game_creator_agent_interaction(
-    project_path: String, run_id: String, action_id: String,
-    approved: bool, note: String,
-) -> Result<AgentRuntimeResult, String>;
-
-#[tauri::command]
-async fn cancel_game_creator_agent_run(
-    project_path: String, agent_id: String, run_id: String,
-) -> Result<AgentRuntimeResult, String>;
-
-#[tauri::command]
-async fn resume_game_creator_agent_project(
-    project_path: String,
-) -> Result<Vec<AgentRuntimeResult>, String>;
-```
-
-协议外 API（不进交互 Loop，作为管理面保留在 Shell 上）：goal CRUD、`compact`、会话管理、配置读写。
-
-### 1.3 统一 InteractionRequired 语义
-
-Shell 向 Consumer 暴露"必须等待外部回答"的单一概念，替代现在分散的 `pendingToolAction` / `userInputRequest` / policy 确认卡：
-
-```rust
-enum AgentRuntimeInteractionRequired {
-    UserInput { request: AgentRuntimeUserInputRequestView },
-    Approval { action: AgentRuntimePendingToolActionSummary },
-    PolicyApproval { policy: String },   // 新增：吸收 confirm_resume/confirm_retry 的 agent.resume 确认卡
-}
-```
-
-> 现状的 `confirm_resume`（`commands.rs:1148`）与 `confirm_retry`（`commands.rs:1020`）是"要求用户确认策略"的产物，由 GUI 弹确认卡实现。收归 Shell 后，Shell 评估 `enforce_project_auto_permission_policy`（`verification.rs:813`），需要确认时返回 `InteractionRequired::PolicyApproval`，用户确认后经统一的 `approve` 命令继续。
-
----
-
-## 2. 现状盘点与复用清单
-
-### 2.1 可直接复用的资产（近 1 个月内形成，活跃演进期）
-
-| 资产 | 位置 | 复用方式 |
-|---|---|---|
-| CLI 交互决策状态机 | `swarm_cli/turn_dispatch.rs:245` `decide_interaction_action`、`:48` `handle_swarm_user_turn`（steer/start、Reply/Execute/Resume、goal 门禁） | **整体上提**到后端 Shell（纯 Rust、无 UI 纠缠） |
-| Runner 自驱续跑定时器 | `runtime_driver/provider_recovery.rs` 的 `schedule_waiting_provider_retry_wake_after_lane_release` 等 | 已存在，P4 直接复用 |
-| 确定性 e2e | `scripts/agent-runtime-deterministic-playable-e2e.mjs` + `deterministic-lane-defense-provider.mjs`（`expectedProviderStats`/`expectedChildReport` 断言） | P0 基线扩展（协议级 trace） |
-| 版本协商 fallback | 前端 `model.ts:1186-1226` `isMissing*CommandError` | 迁移期新旧并存的标准模式 |
-| 逐命令幂等 | `accepted_run_id`（`runtime_state.rs:1548`）、runner requestId 缓存（`runner/protocol.rs:353`）、goal CAS | P1 设计直接沿用 |
-| 进程内集成测试 | `src-tauri/tests/`（`command_runtime.rs`、`runtime_actions/`、`collaboration/`、`goal.rs`） | P1-P6 每步回归的护栏 |
-
-### 2.2 需要收敛/改造的点
-
-| 点 | 位置 | 动作 |
-|---|---|---|
-| 前端 phase→文案映射 | `model.ts:612/644/974/1498/1554` | Shell 填充 `waiting_on/next_step` 后删除 |
-| 前端 steer/start 决策 | `model.ts:849` `submitProjectSupervisorRuntimeTask`、`App.tsx:5791` | 迁入 Shell（`submit_intent`） |
-| 前端 confirm/retry/resume 门禁 | `model.ts:1131-1154`、`panels.tsx:381-497` | 由 `InteractionRequired` + `approve/resume` 取代 |
-| 前端跨轮状态修补 | `model.ts:244` `normalizeAgentRuntimeState`、`:385` `mergeAgentRuntimeStateIntoMap` | 依赖 P2 Snapshot 稳定后删除 |
-| CLI 独立状态机 | `swarm_cli/turn_dispatch.rs` | 上提 Shell，CLI 只留终端交互（stdin/stdout/observer） |
-| 重复触发恢复 | `App.tsx:2799/10341`、`useDeveloperAgentPanel.ts:684`（启动时 resume）、`App.tsx:10550`（devMode schedule 按钮） | P4 后删除，由 Runner 自驱 |
-
----
-
-## 3. 分阶段实施计划
-
-> 主线：**先建安全网 → 建统一入口 → 统一状态读取 → 收回决策 → Runner 自驱 → 迁移全部 Consumer → 删旧面**。
-
-### P0 行为基线（安全网）
-
-**目标**：在改动前建立可判断"公开行为是否变化"的验证能力。
-
-- 复用 `deterministic-lane-defense-provider.mjs`，在现有 `agent-runtime-deterministic-playable-e2e.mjs` 基础上**增加协议级事件 trace**：
-  - 录制一条确定性完整会话的**出向事件序列**（progress/needs_input/approval_required/done/error 的顺序与关键载荷），归一化 timestamp、`run_id`/`steer_id`/`request_id` 随机 ID、`accepted_run_id` 对账值。
-  - 断言当前 master 的 trace 与预期一致（快照 diff）。
-- 建立统一的回归命令，P1-P6 每阶段结束必跑：
-  - 确定性 e2e（功能正确性）
-  - `src-tauri/tests/` 进程内集成测试（单元级护栏）
-  - 协议级 trace（迁移等价性）
-- **不动 Runtime 代码**，只建安全网。
-
-**验收**：上述三条命令在当前 master 全绿，trace 基线文件入库。
-
-### P1+P2 统一入口 + 状态读取（adapter + Snapshot 投影）
-
-**目标**：Consumer 改走新协议调用旧实现；状态读取收敛为稳定的公开 Snapshot。**旧接口全保留**为迁移期兼容路径。
-
-**P1 适配器（`submit_intent` / `approve` / `answer` / `cancel` / `resume` 新命令）**：
-
-> **P1 与 P3 的边界**：P1 只做"命令可用 + `submit_intent` 内部判定 steer/start"。`answer`/`approve`/`resume` 在 P1 **只是入口封装**（内部调旧函数），"收到交互该调哪个命令、能否重试"的判定**仍在前端**；到 P3 才把判定收走，前端只剩 `submit`/`respond` 两种动作。
-
-- 新增 `src-tauri/src/agent/supervisor_shell/`，内含：
-  - `intent.rs`：`submit_intent` 内部路由——读当前 runtime → 判定 steer/start（逻辑取自 `swarm_cli/turn_dispatch.rs` 的 steer 判定与前端 `matchingAgentRuntimeForSteer`）→ 调现有 `steer_game_creator_agent_runtime_task_for_profile_at` 或 `start_game_creator_supervisor_background_task_for_session_at` → 返回 `{ mode, accepted_run_id, runtime }`。
-  - `interaction.rs`：`approve/answer/cancel` 薄封装现有 `confirm/reject/answer/cancel` 内部函数（P1 只封装，判定仍在前端）。
-  - `resume.rs`：`resume_game_creator_agent_project` 吸收 `resume/confirm_resume/retry/confirm_retry/schedule_ready`——Shell 判定是否需 policy 确认、是否需先 cancel 再重试（`needs-reconciliation` 分支，逻辑取自 `App.tsx:6205` `handleProjectSupervisorRetry`）。
-- 新命令与旧命令**同时注册**（`main.rs` invoke_handler）。
-- 前端新增"调新命令 → 后端报 unknown command → 回退旧命令"的版本协商（复用 `isMissing*CommandError` 模式），保证打包版本不一致时旧链路可用。
-- **fallback 边界**：仅"命令不存在（版本不兼容）"确定性回退；写操作的其他错误原样呈现，不做盲目重试（防重复入队）。
-
-**P2 Snapshot 投影（状态读取收敛）**：
-
-> **投影 = 读模型**：把同一份 Runtime durable state（唯一事实来源）按一个稳定、精简、面向消费的 schema 重新导出，作为 Consumer 的权威视图。它**不是新的事实来源**，只是同一份事实的另一种呈现；Consumer 依赖投影，业务真相仍在 durable state。
-
-- 新增 `supervisor_shell/snapshot.rs`：`AgentRuntimeSnapshot` 投影。
-  - 输入：现有 `AgentRuntimeResult.state` + `recent_events`/`recent_tasks`/`response_stream`/`user_input_request`。
-  - 输出：稳定的公开视图（agent/session/run 身份、status/phase、`InteractionRequired`、progress、终态、公开错误）。
-  - **内部字段（recentToolCalls、observations、allowedTools、contextUsage 等）不进 Snapshot**。
-- 关键：**后端先补"稳定读取"**——现状前端 `normalizeAgentRuntimeState` 做跨轮 carry-forward，是因为后端 read 在恢复/竞态时字段不稳定。P2 后端投影保证同一 run 身份下字段自洽，前端才能删掉自己的修补。
-- 新增 `read_game_creator_agent_runtime_snapshot(s)` 命令（或改造现有 read 返回 Snapshot），旧 `read_game_creator_agent_runtime(s)` 保留。
-- 前端 `normalizeAgentRuntimeState` / `mergeAgentRuntimeStateIntoMap` / phase→文案映射**依赖 P2 稳定后删除**（本轮先做投影，下一阶段删前端逻辑）。
-
-**验收**：
-- 新命令与旧命令对同一场景返回的终态一致（用 P0 trace + 确定性 e2e 断言）。
-- 前端在"走新 Snapshot"下渲染与旧路径一致（组件回归）。
-- 现有 `command_runtime.rs` / `collaboration/` 测试全绿（旧逻辑未动）。
-
-### P3 Loop 收归 Supervisor Shell
-
-**目标**：Consumer 只 dispatch 意图，不再持有生命周期判断。
-
-- 完成 `submit_intent` / `approve` / `answer` / `cancel` / `resume` 对全部旧分叉的吸收（P1 已建，本轮做全）：
-  - `approve` 吸收 confirm/reject，并按 interaction kind 分派（`UserInput`/`Approval`/`PolicyApproval`）。
-  - `resume` 吸收 resume/confirm_resume/retry/confirm_retry/schedule_ready。
-- 建立 `AgentRuntimeInteractionRequired`（见 1.3），Shell 统一暴露"需等待外部回答"。
-- Shell 负责填充 `waiting_on`/`next_step`（从 phase 映射，逻辑上提自 `model.ts:612/644`）。
-- 新增派生事件 `tool_request`（Shell 从 `recentToolCalls` + phase 投影）。
-- **前端删除**：
-  - `submitProjectSupervisorRuntimeTask` 的 steer/start 决策（`model.ts:849`）。
-  - `agentRuntimeCanCancel/CanRetry/CanConfirm` 门禁（`model.ts:1131-1154`）。
-  - `App.tsx:5981/6127/6205` 的 confirm/retry/repair 路由逻辑。
-- CLI（`swarm_cli`）改为调用同一 Shell：决策逻辑上提后，CLI 只保留 stdin/stdout 终端交互与 observer 渲染。
-
-**验收**：
-- CLI 走新协议跑通完整 supervisor+子 Agent 流程（`agent-swarm-test-chat.mjs` / 确定性 e2e）。
-- GUI 提交、确认、重试、恢复均通过统一 `submit_intent/approve/resume`，无 `steer_*`/`confirm_*`/`retry_*` 直接调用。
-- P0 协议级 trace 在"新旧实现各放一遍"下事件序列一致。
-
-### P4 Runner 自驱
-
-**目标**：工作发现、恢复、继续执行不依赖 Consumer 触发。**这是重构主线的一部分，不是独立项目。**
-
-- 项目目录簿：`runner/state.rs` 的 `known_roots`（当前进程内）→ 持久化到 AppData（复用 runner 的 `--config-dir`），Runner 重启后仍知道持有过哪些项目。
-- 启动自恢复：`runner/server.rs` 启动完成后，对 known roots 调 `has_recoverable_game_creator_agent_background_tasks_at`（`recovery_scan.rs:425`），有可恢复工作则自动 `resume_game_creator_agent_background_tasks_at`。
-- 空闲自扫描：主 accept loop（`server.rs:275`，已有 25ms `EXTERNAL_AGENT_RUNNER_LOOP_INTERVAL`）内增加"是否有 pending 任务需 wake"的轻量检查，替代 Consumer 调 `schedule_game_creator_agent_ready_tasks` / `wake_pending`。
-- 吸收 `schedule_game_creator_agent_ready_tasks`：manifest ready 任务由 Runner 扫描发现并调度，删除前端 devMode 按钮（`App.tsx:10550`）。
-- **边界（不在本轮）**：Runner 仍由 GUI 启动（`main.rs:2124`），保留 GUI-owner watchdog（`server.rs:169`）与 `game_chat_release` 退出协议（`main.rs:2311`）。"自驱 = 存活期间自调度 + 启动自恢复"，**不含**开机自启/无 GUI 常驻。
-- 对应删除前端恢复触发职责：`App.tsx:2799/10341`、`useDeveloperAgentPanel.ts:684` 的启动时 resume、resume 确认卡回调。
-
-**验收**：
-- Runner 进程内：确认一个 pending 任务后无需任何 Consumer 调用即自动执行；恢复 pending 动作后自动续跑。
-- 确定性 e2e 增加"Runner 独立进程跑完整流程"用例（复用 `agent-runtime-real-e2e/harness/process.mjs` 的二进制编译能力）。
-- `confirm_resume` 恢复确认卡流程改为 `InteractionRequired::PolicyApproval` → `approve`。
-
-### P5 迁移 GUI / CLI / Tests
-
-**目标**：三类 Consumer 全部迁移到统一 Intent、Snapshot、Runtime Output。
-
-- GUI：
-  - 状态渲染改读 `AgentRuntimeSnapshot`；删除 `normalizeAgentRuntimeState` / `mergeAgentRuntimeStateIntoMap` / phase 文案映射。
-  - 交互全走 `submit_intent/approve/answer/cancel/resume`；删除 steer/confirm/retry/resume 直接调用与门禁。
-  - 保留只读消费形态：response stream 展示、对话合并、画布资产编排（这些不进 Loop 协议）。
-- CLI：`cli.rs` 与 `swarm_cli` 改用 Shell 命令；删除各自状态机（决策已上提）。
-- Tests：`src-tauri/tests/` 迁移到新命令；`agent-runtime-real-e2e` 与确定性 e2e 走同一协议。
-- 迁移顺序：先 CLI（最薄）→ 再 Tests → 最后 GUI（唯一消费 response stream / conversation 合并 / goal CAS / 委派修复路由，工作量最大）。
-
-**验收**：GUI、CLI、Tests 调用面收敛到同一组命令，代码差异只剩输入输出形式。
-
-### P6 删除旧公开面
-
-**目标**：Interaction Contract 成为唯一稳定公开边界。
-
-- 删除旧 Tauri 命令：`start_game_creator_agent_runtime_task` / `start_game_creator_supervisor_runtime_task` / `steer_*` / `confirm_*` / `reject_*` / `retry_*` / `confirm_retry_*` / `resume_game_creator_agent_runtime_tasks` / `confirm_resume_*` / `schedule_game_creator_agent_ready_tasks` / `read_game_creator_agent_runtime(s)`（`main.rs:2188-2208`）。
-- 删除对应后端 wrapper 与前端 `app/types.ts` 旧 DTO、旧事件协议、迁移期兼容逻辑。
-- 现有 start / steer / resume / recovery 能力作为 Shell 内部实现保留（改名/内联）。
-
-**验收**：`grep` 无旧命令名残留；全量回归（P0 基线 + 单元 + e2e）全绿。
-
----
-
-## 4. 迁移策略（新旧并存 + 等价性）
-
-1. **接口即实现，不留空窗**：新命令从注册第一天起就是真实可用——内部套用现有旧函数（adapter 套旧实现是**常态、透明**，前端不知道也不关心）。不存在"接口先立、实现待填"的中间态；分阶段的不是"接口 vs 实现"，而是"谁先切到新接口"。
-2. **新旧并存**：P1 起新命令与旧命令同时注册，Consumer 逐个切换，旧路径逐条下线（strangler fig）。
-3. **版本协商 fallback（仅用于迭代空窗期）**：前端调新命令，**仅当**后端报 unknown command（前端版本 ≠ 后端版本，打包错位）时回退旧命令；其他运行错误**原样呈现，不盲目重试**（防重复入队）。后端新版随应用覆盖到位后，fallback 即死代码，P6 删除。
-4. **等价性保障**：
-   - 确定性 provider + 协议级 trace（P0）作为新旧实现的对照基线。
-   - 进程内集成测试每阶段全跑。
-   - 关键迁移点（steer/start 判定、resume 路由、needs-reconciliation 重试）用"同一输入 → 新旧实现输出一致"的单测锁定。
-
----
-
-## 5. 里程碑与验收门禁
-
-| 里程碑 | 交付 | 门禁 |
-|---|---|---|
-| M0 | P0 基线 + trace 入库 | 回归三件套全绿 |
-| M1 | P1 新命令 + adapter（新旧并存） | 新/旧命令终态一致；现有测试全绿 |
-| M2 | P2 Snapshot 投影 + 前端读 Snapshot | 前端删 normalize 后渲染回归一致 |
-| M3 | P3 Loop 收归（Intent + InteractionRequired） | CLI 走新协议跑通完整流程；前端无 steer/confirm/retry 直调 |
-| M4 | P4 Runner 自驱 | Runner 独立进程自动跑完；resume 确认走统一 approve |
-| M5 | P5 全部 Consumer 迁移 | GUI/CLI/Tests 调用面收敛到同一协议 |
-| M6 | P6 删旧面 | 无旧命令残留；全量回归绿 |
-
----
-
-## 6. 风险与未决问题
-
-| 风险/问题 | 影响 | 缓解 |
-|---|---|---|
-| P2 依赖"后端 read 先稳定"，否则前端不敢删 normalize | 阶段顺序敏感 | P2 后端投影先行，前端删逻辑放同一阶段尾 |
-| P4 自驱与 GUI-owner 安全模型冲突 | 若误解为"无 GUI 常驻"会引安全评审 | 计划内明确边界，实现不越界 |
-| steer/start 判定含 UX 语义（mode/source/runProfile、steerId 生成、acceptedRunId 对账） | 收归 Shell 后前端展示可能退化 | Shell 返回 `{ mode, accepted_run_id, steer_decision }` 补足展示信息 |
-| `tool_request` 无现成单一落点 | 需 Shell 派生投影 | 提前排进 P2/P3 投影工作量 |
-| 协议级 trace 的随机 ID 归一化 | 基线易碎 | 复用确定性 provider，归一化规则集中一处 |
-
-## 7. 建议实施顺序（一句话）
-
-P0 建安全网 → P1+P2（adapter + Snapshot，纯增量、旧接口全留、fallback 兜底）→ P3 收 Loop → P5 迁移（先 CLI 后 GUI）→ P6 删旧面；P4（Runner 自驱）作为主线中心件贯穿 M4，不单独立项，但边界（存活期间自调度，不含无 GUI 常驻）在计划内写死。
-
----
-
-## 8. 相对原方案的调整点
-
-本计划在原方案基础上做了以下调整，均基于 master 现状与既有安全模型：
-
-1. **P0 基线**：原方案的 Golden Replay 改为"确定性 e2e + 协议级事件 trace"——在既有确定性 provider e2e（`deterministic-lane-defense-provider.mjs`）上扩展，录制协议级事件序列并归一化 timestamp 与随机 ID，不重建基线体系。
-
-2. **P4 定位与边界**：原方案将"Supervisor Lifecycle Coordinator"列为独立阶段；现作为主线组成部分（里程碑 M4，不单独立项）。自驱限于"Runner 存活期间自调度 + 启动自恢复"，排除"开机自启 / 无 GUI 常驻"，与既有 GUI-owner 安全模型一致。
-
-3. **术语收敛**：原方案"Interaction Contract / Intent / Snapshot"统一为本计划"交互 Loop 协议"（5 入向命令 + 7 出向事件）与"投影"（读模型），含义不变。
-
-4. **迁移原则显式化**：接口即实现（adapter 套旧逻辑为常态）；fallback 仅在版本空窗期、只认 unknown command。原方案未明确此点。
-- 
2.52.0


From f65a8137682b98ceeddd76fdc64cf34f3f899c05 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 15:35:27 +0800
Subject: [PATCH 09/15] =?UTF-8?q?=E9=99=90=E5=88=B6=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=8E=BB=E8=83=8C=E6=99=AF=E4=BB=85=E7=94=A8=E4=BA=8E?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=BD=AC=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后端仅接受 character-animation.convert 结果执行序列帧去背景

前端工具栏与工作流同步收紧视频转换门禁

更新相关测试与Spine序列帧技术方案
---
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |  4 +-
 .../src/character_animation_assets.rs         | 71 ++++++++-----------
 .../ImageCanvasGenerationModel.test.ts        | 12 ++--
 .../ImageCanvasGenerationModel.ts             | 13 ++--
 ...ageCanvasSelectedLayerToolbarView.test.tsx | 22 +++---
 .../useImageCanvasGenerationWorkflow.test.tsx |  6 ++
 .../useImageCanvasGenerationWorkflow.ts       |  2 +
 7 files changed, 57 insertions(+), 73 deletions(-)

diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index aaa6eb312..759e39a93 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -602,12 +602,12 @@ flowchart TD
 
 #### 去背景
 
-AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。`character-animation` 浮动工具栏继续提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后必须走现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
+AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。只有 `character-animation.convert` 的视频直接转换结果提供 `去背景`；AI 生成的序列帧已自动完成去背景，不展示也不接受重复处理。`character-animation` 浮动工具栏在适用时提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后必须走现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
 
 - 原始不透明序列与透明序列是两个正式 resource；
 - 去背景全帧成功后一次性发布新的 `character-animation` / `image-sequence` 资源、素材和画布图层，保留原始序列图层不被替换；
 - 任一帧失败不产生残缺结果；
-- v1 去背景仅支持编辑器权威生成且 `backgroundColor=green` 的纯绿幕序列帧；白 / 蓝 / 紫背景、视频直接转换结果、缺失或非法生成配方均由后端拒绝，前端不展示该入口；
+- v1 去背景仅支持编辑器权威 `character-animation.convert` 视频直接转换结果；AI 生成的序列帧、已去背景结果、缺失或非法生成配方均由后端拒绝，前端不展示该入口；
 - 当前费用固定为 0 泥点，失败不产生不完整正式结果；请求先进入现有 `external_generation_job` 队列，不能由 HTTP 请求同步执行。
 - 队列 worker 保持一个父 job，在 job 内按帧并行执行下载、纯本地绿幕扣除、最终 PNG 上传和帧对象准备；所有已发出的帧必须 drain 完成后再按帧号排序，一帧失败即清理未提交对象并整批失败，不新增逐帧子任务表或独立计费。
 - 帧对象路径绑定本次 job 的 `operationId`，同一 job 重放复用路径，不同 job 即使请求 fingerprint 相同也不得复用旧 object location，避免新 `asset_object` 与历史结果发生幂等冲突。
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index eb9d1ea8d..a272c808a 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -1124,24 +1124,14 @@ async fn validate_editor_character_animation_source_frames(
     Ok(())
 }
 
-fn editor_character_animation_sequence_is_green_screen(generation_inputs: Option<&Value>) -> bool {
+fn editor_character_animation_sequence_is_video_conversion(
+    generation_inputs: Option<&Value>,
+) -> bool {
     let Some(inputs) = generation_inputs.and_then(Value::as_object) else {
         return false;
     };
-    if inputs.get("version").and_then(Value::as_u64) != Some(2)
-        || inputs.get("action").and_then(Value::as_str) != Some("character-animation.generate")
-    {
-        return false;
-    }
-    inputs
-        .get("fields")
-        .and_then(Value::as_array)
-        .into_iter()
-        .flatten()
-        .any(|field| {
-            field.get("id").and_then(Value::as_str) == Some("backgroundColor")
-                && field.get("value").and_then(Value::as_str) == Some("green")
-        })
+    inputs.get("version").and_then(Value::as_u64) == Some(2)
+        && inputs.get("action").and_then(Value::as_str) == Some("character-animation.convert")
 }
 
 pub async fn remove_editor_character_animation_background(
@@ -1291,13 +1281,13 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
             })),
         ));
     }
-    if !editor_character_animation_sequence_is_green_screen(
+    if !editor_character_animation_sequence_is_video_conversion(
         source_resource.generation_inputs.as_ref(),
     ) {
         return Err(character_animation_error_response(
             &request_context,
             editor_character_animation_bad_request(
-                "当前仅支持由编辑器生成且背景为纯绿幕的角色动作序列帧去背景。",
+                "AI生成的角色动作序列帧已自动去背景，只有视频直接转换结果可以再次去背景。",
             ),
         ));
     }
@@ -9342,41 +9332,40 @@ mod tests {
     }
 
     #[test]
-    fn editor_character_animation_background_removal_requires_green_generated_inputs() {
-        let green_inputs = json!({
+    fn editor_character_animation_background_removal_requires_video_conversion_inputs() {
+        let converted_inputs = json!({
             "version": 2,
-            "action": "character-animation.generate",
-            "fields": [{
-                "id": "backgroundColor",
-                "value": "green"
-            }]
+            "action": "character-animation.convert",
+            "fields": []
         });
-        assert!(editor_character_animation_sequence_is_green_screen(Some(
-            &green_inputs
-        )));
+        assert!(editor_character_animation_sequence_is_video_conversion(
+            Some(&converted_inputs)
+        ));
 
         for inputs in [
             json!({
                 "version": 2,
                 "action": "character-animation.generate",
-                "fields": [{ "id": "backgroundColor", "value": "white" }]
-            }),
-            json!({
-                "version": 2,
-                "action": "character-animation.generate",
-                "fields": [{ "id": "backgroundColor", "value": "blue" }]
-            }),
-            json!({
-                "version": 2,
-                "action": "character-animation.convert",
                 "fields": [{ "id": "backgroundColor", "value": "green" }]
             }),
+            json!({
+                "version": 2,
+                "action": "character-animation.remove-background",
+                "fields": []
+            }),
+            json!({
+                "version": 1,
+                "action": "character-animation.convert",
+                "fields": []
+            }),
         ] {
-            assert!(!editor_character_animation_sequence_is_green_screen(Some(
-                &inputs
-            )));
+            assert!(!editor_character_animation_sequence_is_video_conversion(
+                Some(&inputs)
+            ));
         }
-        assert!(!editor_character_animation_sequence_is_green_screen(None));
+        assert!(!editor_character_animation_sequence_is_video_conversion(
+            None
+        ));
     }
 
     #[test]
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index 0371f104d..c87c194b3 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -70,15 +70,13 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasGenerationModel', () => {
-  it('allows sequence background removal only for green generated animations', () => {
+  it('allows sequence background removal only for direct video conversions', () => {
     const layer = {
       assetKind: 'character-animation',
       generationInputs: {
         version: 2 as const,
-        action: 'character-animation.generate' as const,
-        fields: [
-          { id: 'backgroundColor', title: '背景颜色', value: 'green' as const },
-        ],
+        action: 'character-animation.convert' as const,
+        fields: [],
         references: [],
       },
     } as unknown as CanvasLayer;
@@ -88,7 +86,7 @@ describe('ImageCanvasGenerationModel', () => {
         ...layer,
         generationInputs: {
           ...layer.generationInputs!,
-          action: 'character-animation.convert',
+          action: 'character-animation.generate',
         },
       }),
     ).toBe(false);
@@ -97,7 +95,7 @@ describe('ImageCanvasGenerationModel', () => {
         ...layer,
         generationInputs: {
           ...layer.generationInputs!,
-          fields: [{ id: 'backgroundColor', title: '背景颜色', value: 'blue' }],
+          action: 'character-animation.remove-background',
         },
       }),
     ).toBe(false);
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index c92fa81b0..9b04ac170 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -1041,15 +1041,10 @@ export function buildCharacterAnimationGenerationInputs(
 }
 
 export function canRemoveCharacterAnimationBackground(layer: CanvasLayer) {
-  if (
-    layer.assetKind !== 'character-animation' ||
-    layer.generationInputs?.version !== 2 ||
-    layer.generationInputs.action !== 'character-animation.generate'
-  ) {
-    return false;
-  }
-  return layer.generationInputs.fields.some(
-    (field) => field.id === 'backgroundColor' && field.value === 'green',
+  return (
+    layer.assetKind === 'character-animation' &&
+    layer.generationInputs?.version === 2 &&
+    layer.generationInputs.action === 'character-animation.convert'
   );
 }
 
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index d86ec8187..bae02221a 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -459,11 +459,8 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         assetKind: 'character-animation',
         generationInputs: {
           version: 2,
-          action: 'character-animation.generate',
-          fields: [
-            { id: 'prompt', title: '动作描述', value: '挥手' },
-            { id: 'backgroundColor', title: '背景颜色', value: 'green' },
-          ],
+          action: 'character-animation.convert',
+          fields: [],
           references: [],
         },
       }),
@@ -492,21 +489,18 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     );
   });
 
-  it('hides sequence background removal unless the authoritative background is green', () => {
-    const whiteLayer = createLayer({
+  it('shows sequence background removal only for direct video conversions', () => {
+    const generatedLayer = createLayer({
       mediaType: 'image-sequence',
       assetKind: 'character-animation',
       generationInputs: {
         version: 2,
         action: 'character-animation.generate',
-        fields: [
-          { id: 'prompt', title: '动作描述', value: '挥手' },
-          { id: 'backgroundColor', title: '背景颜色', value: 'white' },
-        ],
+        fields: [{ id: 'prompt', title: '动作描述', value: '挥手' }],
         references: [],
       },
     });
-    renderSelectedToolbar({ selectedLayer: whiteLayer });
+    renderSelectedToolbar({ selectedLayer: generatedLayer });
 
     expect(screen.queryByRole('button', { name: '去背景' })).toBeNull();
 
@@ -517,13 +511,13 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
       generationInputs: {
         version: 2,
         action: 'character-animation.convert',
-        fields: [{ id: 'backgroundColor', title: '背景颜色', value: 'green' }],
+        fields: [],
         references: [],
       },
     });
     renderSelectedToolbar({ selectedLayer: convertedLayer });
 
-    expect(screen.queryByRole('button', { name: '去背景' })).toBeNull();
+    expect(screen.getByRole('button', { name: '去背景' })).toBeTruthy();
   });
 
   it('disables frame splitting while a character animation resource is pending registration', () => {
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 234679f1c..24b0ae332 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -3067,6 +3067,12 @@ describe('useImageCanvasGenerationWorkflow', () => {
             title: '勇者奔跑',
             assetKind: 'character-animation',
             mediaType: 'image-sequence',
+            generationInputs: {
+              version: 2,
+              action: 'character-animation.convert',
+              fields: [],
+              references: [],
+            },
           }),
         ]}
       />,
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index db2b7d611..d673e8292 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -96,6 +96,7 @@ import {
   appendLimitedImageReferences,
   buildDeterministicGenerationInputs,
   calculateCharacterAnimationPrice,
+  canRemoveCharacterAnimationBackground,
   canSplitCharacterAnimationFrames,
   CANVAS_GENERATION_PARAMETER_FALLBACK_WARNING,
   CHARACTER_ANIMATION_DURATION_OPTIONS,
@@ -3677,6 +3678,7 @@ export function useImageCanvasGenerationWorkflow({
   const removeSelectedCharacterAnimationBackground = useCallback(
     async (sourceLayer: CanvasLayer) => {
       if (
+        !canRemoveCharacterAnimationBackground(sourceLayer) ||
         !canSplitCharacterAnimationFrames(sourceLayer) ||
         !projectId ||
         removingBackgroundCharacterAnimationLayerIdsRef.current.has(
-- 
2.52.0


From 90cfdfdf970dbc6e529b1101c3e9ce7035549d33 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 15:37:34 +0800
Subject: [PATCH 10/15] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E8=AE=A1=E8=B4=B9=E8=BE=B9=E7=95=8C=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将character_animation_assets的持久计费边界预期从3调整为4

覆盖AI生成、视频转换、去背景与视频生成四条内联路由
---
 server-rs/crates/api-server/src/asset_billing.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server-rs/crates/api-server/src/asset_billing.rs b/server-rs/crates/api-server/src/asset_billing.rs
index 55410ec08..2bcab61de 100644
--- a/server-rs/crates/api-server/src/asset_billing.rs
+++ b/server-rs/crates/api-server/src/asset_billing.rs
@@ -930,7 +930,7 @@ mod tests {
         for (source, expected_calls) in [
             (include_str!("editor_project.rs"), 4),
             (include_str!("editor_project_icon.rs"), 2),
-            (include_str!("character_animation_assets.rs"), 3),
+            (include_str!("character_animation_assets.rs"), 4),
             (
                 include_str!("vector_engine_audio_generation/generation.rs"),
                 2,
-- 
2.52.0


From 4d1c9d9b1b110b760ae81204eb84112fde10f40b Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Sat, 15 Aug 2026 17:02:52 +0800
Subject: [PATCH 11/15] =?UTF-8?q?=E6=94=B6=E7=B4=A7=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E9=A2=84=E8=A7=88=E6=81=A2=E5=A4=8D=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

taskId 缺失时不恢复关联预览视频

补充序列帧与预览任务标识缺失的恢复测试
---
 .../ImageCanvasEditorModel.test.ts            | 43 +++++++++++++++++++
 .../image-editor/ImageCanvasEditorModel.ts    |  4 +-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 015fef6cb..259731a6f 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -1398,6 +1398,49 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('does not hydrate a preview video when either task id is missing', () => {
+    const frames = [
+      { imageSrc: '/generated/sequence/frame-1.png', width: 480, height: 480 },
+      { imageSrc: '/generated/sequence/frame-2.png', width: 480, height: 480 },
+    ];
+
+    for (const [animationTaskId, previewTaskId] of [
+      [undefined, 'animation-task-1'],
+      ['animation-task-1', undefined],
+      [undefined, undefined],
+    ] as const) {
+      const sequenceResource = {
+        imageSrc: frames[0]!.imageSrc,
+        assetKind: 'character-animation' as const,
+        imageSequenceFrames: frames,
+        imageSequenceDurationMs: 4_000,
+        ...(animationTaskId ? { taskId: animationTaskId } : {}),
+        sourceResourceId: 'resource-preview-video',
+      };
+      const previewResource = {
+        imageSrc: '/generated/video/preview.mp4',
+        objectKey: 'generated/video/preview.mp4',
+        assetKind: 'video' as const,
+        ...(previewTaskId ? { taskId: previewTaskId } : {}),
+      };
+
+      const resources: Parameters<typeof hydrateLayer>[1] = new Map();
+      resources.set('resource-sequence', sequenceResource);
+      resources.set('resource-preview-video', previewResource);
+      const hydrated = hydrateLayer(
+        {
+          layerId: 'layer-sequence',
+          resourceId: 'resource-sequence',
+          title: '角色动作',
+          sourceType: 'generated',
+        },
+        resources,
+      );
+
+      expect(hydrated?.previewVideoPath).toBeNull();
+    }
+  });
+
   it('does not hydrate an older action reference as a generated preview video', () => {
     const frames = [
       { imageSrc: '/generated/sequence/frame-1.png', width: 480, height: 480 },
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index a5813b635..1bc8412df 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -1450,8 +1450,8 @@ export function hydrateLayer(
         const animationTaskId = stringOrNull(resource?.taskId);
         const previewTaskId = stringOrNull(previewResource.taskId);
         if (
-          animationTaskId &&
-          previewTaskId &&
+          !animationTaskId ||
+          !previewTaskId ||
           animationTaskId !== previewTaskId
         ) {
           return undefined;
-- 
2.52.0


From ae5c2d88211cd22e866a0d1dda4993777fcb4a86 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Mon, 17 Aug 2026 15:01:17 +0800
Subject: [PATCH 12/15] =?UTF-8?q?=E6=94=B6=E7=B4=A7=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E5=A4=96=E8=A7=82=E5=8F=82=E8=80=83=E5=9B=BE=E5=AE=B9=E9=87=8F?=
 =?UTF-8?q?=E9=97=A8=E7=A6=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

限制视频模式角色外观图最多九张，并在前端追加、恢复和提交链路统一收口。

在入队归一化和 durable worker 执行前限制单图、累计字节、解码边长与总像素。

补充九/十张、三十兆字节、累计大小和压缩炸弹像素边界回归。

同步更新 Spine 技术方案与团队决策记录。
---
 .../shared-memory/decision-log.md             |   6 +
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |   3 +-
 .../src/character_animation_assets.rs         | 147 +++++++++++++++++-
 .../src/editor_sequence_animation.rs          |  40 ++++-
 .../ImageCanvasEditorModel.test.ts            |  20 +++
 .../image-editor/ImageCanvasEditorModel.ts    |   3 +-
 .../image-editor/ImageCanvasFileModel.ts      |   3 +
 .../ImageCanvasGenerationDialogModel.ts       |   3 +-
 .../ImageCanvasUploadModel.test.ts            |  33 ++++
 .../image-editor/ImageCanvasUploadModel.ts    |   3 +-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  21 +++
 11 files changed, 274 insertions(+), 8 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index bd8566e07..872c1f78e 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -14179,3 +14179,9 @@
 - 实例与端口：分支规范化后形成稳定 `deploymentId`，同一分支换 commit 复用实例和 Web 端口；不同分支使用独立 Compose project。Web 端口在全局文件锁内从 `8400..8499` 分配，状态表与宿主监听同时空闲才可占用，卸载后释放。SpacetimeDB 与 OTLP 不映射宿主端口，Jenkins 通过受控 Compose 网络发布模块；页面只展示 Web 内网地址。
 - 来源与卸载：部署只接受 `SOURCE_BRANCH` 和可选 `COMMIT_HASH`，Jenkins 必须证明 commit 属于目标分支。卸载只接受受控状态中存在的 `deploymentId`，客户端不能传 Jenkins URL、Job、Compose project、容器名或端口。状态通过固定 `preview-result.json` artifact 返回，不解析或向浏览器暴露完整 console。
 - 关联文档：`docs/technical/【开发运维】Jenkins容器预览部署控制面技术方案-2026-08-15.md`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
+
+## 2026-08-17 Spine 视频模式外观参考图容量门禁
+
+- 背景：视频模式的 `appearanceReferenceSrcs` 原先会在 Provider 调用前逐项下载并完整解码，但该实际执行路径没有复用通用视频参考的 9 张数量上限，也没有单图、累计字节、解码边长和像素预算，可能让第 10 张或压缩炸弹图片持续占用 durable worker 资源。
+- 决策：角色外观图最多 9 张，单图最大 30MB、合计最大 64MB，编码边长最大 8192、单图总像素最大 33554432。前端上传追加与草稿恢复收口到 9 张；HTTP 入队和 worker 共用请求归一化数量门禁；worker 在 Provider 调用前按 OSS HEAD、流式下载字节上限、解码器资源限制及显式像素计算失败关闭。既有 owner、稳定 objectKey、MIME 和来源资源校验继续保留。
+- 验证：覆盖 9/10 张边界、30MB 单图字节边界、8192 边长及总像素边界，并运行角色动作 Rust 定向测试、相关前端 Vitest、类型检查、编码与 diff 门禁。
diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index 759e39a93..76134a7f9 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -574,7 +574,8 @@ flowchart TD
 - 从画布选择现有 `character-animation` 时，只有确认“序列帧改造”的语义后才允许；
 - 上传图片是用户在该入口内显式指定的角色参考，可直接按角色参考处理，不要求先创建一个 `character` 图层；
 - 视频必须是已登记的 `video` 媒体；
-- 继续复用现有 Seedance 文件规则：图片最大 30MB，视频 mp4/mov 最大 50MB、2–15 秒；最终上限仍需结合“全部帧”决策重新评估；
+- 继续复用现有 Seedance 文件规则：图片最大 30MB，视频 mp4/mov 最大 50MB、2–15 秒；
+- 视频模式的角色外观图最多 9 张，单图最大 30MB、合计最大 64MB；前端追加与草稿恢复、HTTP 入队和 durable worker 执行使用同一数量边界。worker 在 Provider 调用前逐图执行有界下载和解码校验，编码边长不得超过 8192，单图总像素不得超过 33554432，拒绝大尺寸或压缩炸弹输入；
 - 服务端再次验证 owner、媒体类型和稳定对象，前端标签不是安全边界。
 
 ### 10.4 生成后图层
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index a272c808a..07744c438 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -187,6 +187,12 @@ const EDITOR_VIDEO_REFERENCE_VIDEO_LIMIT: usize = 3;
 const EDITOR_VIDEO_REFERENCE_AUDIO_LIMIT: usize = 3;
 const EDITOR_VIDEO_REFERENCE_REQUEST_LIMIT_BYTES: usize = 256 * 1024;
 const EDITOR_VIDEO_REFERENCE_READ_EXPIRE_SECONDS: u64 = 60 * 60;
+const EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_BYTES: u64 = 30 * 1024 * 1024;
+const EDITOR_CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES: u64 = 64 * 1024 * 1024;
+const EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_DIMENSION: u32 = 8_192;
+const EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_PIXELS: u64 = 32 * 1024 * 1024;
+const EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_ALLOC_BYTES: u64 =
+    EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_PIXELS * 8;
 
 const BUILT_IN_MOTION_TEMPLATES: [MotionTemplate; 4] = [
     MotionTemplate {
@@ -1816,6 +1822,7 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
         }
     };
     let mut appearance_object_keys = Vec::new();
+    let mut appearance_total_bytes = 0_u64;
     if !payload.appearance_reference_srcs.is_empty() {
         if provisional_normalized.input_mode != EditorCharacterAnimationInputMode::Video {
             return Err(character_animation_error_response(
@@ -1837,7 +1844,7 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             .map_err(|error| character_animation_error_response(&request_context, error))?;
             // 先下载并解码图片完成权威 MIME、尺寸和内容校验；Provider 阶段必须继续使用
             // 稳定 objectKey，由统一视频参考解析器签发可访问 URL，不能把内部 data URL 传下去。
-            resolve_editor_character_animation_reference_image(
+            let resolved = resolve_editor_character_animation_reference_image(
                 &state,
                 &source_resolve_client,
                 object_key.as_str(),
@@ -1845,6 +1852,11 @@ pub(crate) async fn generate_editor_character_animation_for_owner(
             )
             .await
             .map_err(|error| character_animation_error_response(&request_context, error))?;
+            appearance_total_bytes = accumulate_editor_character_animation_appearance_bytes(
+                appearance_total_bytes,
+                resolved.source_size_bytes,
+            )
+            .map_err(|error| character_animation_error_response(&request_context, error))?;
             appearance_object_keys.push(object_key);
         }
     }
@@ -3518,7 +3530,14 @@ async fn resolve_editor_character_animation_reference_image(
     source: &str,
     field: &str,
 ) -> Result<ResolvedEditorCharacterAnimationReferenceImage, AppError> {
-    let payload = load_media_source_payload_with_client(state, http_client, source, None).await?;
+    let payload = load_media_source_payload_with_client(
+        state,
+        http_client,
+        source,
+        Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_BYTES),
+    )
+    .await?;
+    let source_size_bytes = u64::try_from(payload.bytes.len()).unwrap_or(u64::MAX);
     validate_editor_character_animation_reference_content_type(
         payload.mime_type.as_str(),
         field,
@@ -3540,6 +3559,23 @@ async fn resolve_editor_character_animation_reference_image(
             "message": format!("参考图片无法解码：{error}"),
         }))
     })?;
+    let (encoded_width, encoded_height) = decoder.dimensions();
+    validate_editor_character_animation_reference_image_dimensions(
+        encoded_width,
+        encoded_height,
+        field,
+    )?;
+    let mut limits = image::Limits::default();
+    limits.max_image_width = Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_DIMENSION);
+    limits.max_image_height = Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_DIMENSION);
+    limits.max_alloc = Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_ALLOC_BYTES);
+    decoder.set_limits(limits).map_err(|error| {
+        AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+            "provider": "editor-character-animation",
+            "field": field,
+            "message": format!("参考图片超过解码资源上限：{error}"),
+        }))
+    })?;
     let orientation = decoder.orientation().map_err(|error| {
         AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
             "provider": "editor-character-animation",
@@ -3569,9 +3605,56 @@ async fn resolve_editor_character_animation_reference_image(
         data_url,
         width: decoded.width(),
         height: decoded.height(),
+        source_size_bytes,
     })
 }
 
+fn accumulate_editor_character_animation_appearance_bytes(
+    current_bytes: u64,
+    next_bytes: u64,
+) -> Result<u64, AppError> {
+    let total_bytes = current_bytes
+        .checked_add(next_bytes)
+        .ok_or_else(|| editor_character_animation_bad_request("角色外观图总大小超过允许范围。"))?;
+    if total_bytes > EDITOR_CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES {
+        return Err(editor_character_animation_bad_request(format!(
+            "角色外观图总大小不能超过{}MB。",
+            EDITOR_CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES / 1024 / 1024
+        )));
+    }
+    Ok(total_bytes)
+}
+
+fn validate_editor_character_animation_reference_image_dimensions(
+    width: u32,
+    height: u32,
+    field: &str,
+) -> Result<(), AppError> {
+    let pixels = u64::from(width).saturating_mul(u64::from(height));
+    if width == 0 || height == 0 {
+        return Err(editor_character_animation_bad_request(
+            "参考图片缺少可识别的媒体宽高。",
+        ));
+    }
+    if width > EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_DIMENSION
+        || height > EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_DIMENSION
+        || pixels > EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_PIXELS
+    {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-character-animation",
+                "field": field,
+                "message": format!(
+                    "参考图片尺寸超过{}像素边长或{}总像素上限。",
+                    EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_DIMENSION,
+                    EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_PIXELS
+                ),
+            })),
+        );
+    }
+    Ok(())
+}
+
 async fn validate_editor_character_animation_reference_video_object(
     state: &AppState,
     http_client: &reqwest::Client,
@@ -9238,6 +9321,7 @@ struct ResolvedEditorCharacterAnimationReferenceImage {
     data_url: String,
     width: u32,
     height: u32,
+    source_size_bytes: u64,
 }
 
 #[derive(Clone, Copy, Debug, PartialEq)]
@@ -10143,6 +10227,65 @@ mod tests {
         assert!(first.ends_with("-task-1"));
     }
 
+    #[test]
+    fn editor_character_animation_appearance_reference_enforces_download_and_pixel_limits() {
+        assert!(
+            validate_media_payload_download_size(
+                EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_BYTES as usize,
+                Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_BYTES),
+            )
+            .is_ok()
+        );
+        assert!(
+            validate_media_payload_download_size(
+                EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_BYTES as usize + 1,
+                Some(EDITOR_CHARACTER_ANIMATION_REFERENCE_IMAGE_MAX_BYTES),
+            )
+            .is_err()
+        );
+
+        assert_eq!(
+            accumulate_editor_character_animation_appearance_bytes(
+                EDITOR_CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES - 1,
+                1,
+            )
+            .expect("64MB total should be allowed"),
+            EDITOR_CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES
+        );
+        assert!(
+            accumulate_editor_character_animation_appearance_bytes(
+                EDITOR_CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES,
+                1,
+            )
+            .is_err()
+        );
+
+        assert!(
+            validate_editor_character_animation_reference_image_dimensions(
+                8_192,
+                4_096,
+                "appearanceReferenceSrcs",
+            )
+            .is_ok()
+        );
+        assert!(
+            validate_editor_character_animation_reference_image_dimensions(
+                8_192,
+                4_097,
+                "appearanceReferenceSrcs",
+            )
+            .is_err()
+        );
+        assert!(
+            validate_editor_character_animation_reference_image_dimensions(
+                8_193,
+                1,
+                "appearanceReferenceSrcs",
+            )
+            .is_err()
+        );
+    }
+
     #[test]
     fn editor_character_animation_background_removal_validates_each_source_frame() {
         let source = include_str!("character_animation_assets.rs");
diff --git a/server-rs/crates/api-server/src/editor_sequence_animation.rs b/server-rs/crates/api-server/src/editor_sequence_animation.rs
index 0a8715d22..a7a3383eb 100644
--- a/server-rs/crates/api-server/src/editor_sequence_animation.rs
+++ b/server-rs/crates/api-server/src/editor_sequence_animation.rs
@@ -5,6 +5,8 @@ use shared_contracts::assets::{
     EditorCharacterAnimationVideoConversionRequest,
 };
 
+pub(crate) const EDITOR_CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT: usize = 9;
+
 use crate::{
     editor_generation_config::EditorGenerationPricingConfig,
     editor_green_screen::{
@@ -207,10 +209,17 @@ pub(crate) fn normalize_editor_character_animation_request_with_pricing(
     );
     let reference_src = trim_optional_text(payload.reference_src.as_deref())
         .or_else(|| trim_optional_text(Some(payload.source_image_src.as_str())));
-    let has_appearance_references = payload
+    let appearance_reference_count = payload
         .appearance_reference_srcs
         .iter()
-        .any(|src| !src.trim().is_empty());
+        .filter(|src| !src.trim().is_empty())
+        .count();
+    if appearance_reference_count > EDITOR_CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT {
+        return Err(editor_character_animation_bad_request(format!(
+            "角色外观图最多支持{EDITOR_CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT}张。"
+        )));
+    }
+    let has_appearance_references = appearance_reference_count > 0;
     if input_mode == EditorCharacterAnimationInputMode::Text && reference_src.is_some() {
         return Err(editor_character_animation_bad_request(
             "文本模式不能携带参考素材。",
@@ -944,6 +953,33 @@ mod tests {
             .and_then(|field| field.get("value"))
     }
 
+    #[test]
+    fn character_animation_video_appearance_references_accept_nine_and_reject_ten() {
+        let appearance_reference = |index: usize| format!("users/user-1/appearance-{index}.png");
+        let accepted =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                input_mode: Some("video".to_string()),
+                reference_media_type: Some("video".to_string()),
+                reference_src: Some("users/user-1/motion.mp4".to_string()),
+                source_image_src: String::new(),
+                appearance_reference_srcs: (0..9).map(appearance_reference).collect(),
+                ..test_request()
+            });
+        assert!(accepted.is_ok());
+
+        let rejected =
+            normalize_editor_character_animation_request(EditorCharacterAnimationGenerateRequest {
+                input_mode: Some("video".to_string()),
+                reference_media_type: Some("video".to_string()),
+                reference_src: Some("users/user-1/motion.mp4".to_string()),
+                source_image_src: String::new(),
+                appearance_reference_srcs: (0..10).map(appearance_reference).collect(),
+                ..test_request()
+            })
+            .expect_err("the tenth appearance reference must be rejected");
+        assert!(rejected.body_text().contains("最多支持9张"));
+    }
+
     #[test]
     fn character_animation_normalizes_seedance_request_contract_and_labels() {
         let normalized =
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 259731a6f..d73fe6273 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -1872,6 +1872,26 @@ describe('ImageCanvasEditorModel', () => {
     });
   });
 
+  it('drops character animation appearance references beyond the ninth during hydration', () => {
+    const snapshot = {
+      id: 'dialog-character-animation-over-limit',
+      mode: 'character-animation',
+      prompt: '奔跑',
+      status: 'idle',
+      characterAnimationAppearanceReferences: Array.from(
+        { length: 10 },
+        (_, index) => ({
+          id: `appearance-${index}`,
+          label: `角色外观${index + 1}`,
+          src: `users/user-1/appearance-${index}.png`,
+        }),
+      ),
+    };
+
+    const hydrated = hydrateCanvasGenerationDialog(snapshot);
+    expect(hydrated?.characterAnimationAppearanceReferences).toHaveLength(9);
+  });
+
   it('keeps the operation ledger out of the layout and restores it from the local ledger', () => {
     const dialogId = 'dialog-perfect-pixel-round-trip';
     const operation = buildPerfectPixelOperation(dialogId);
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 1bc8412df..a59ee2343 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -32,6 +32,7 @@ import type {
   EditorAssetFolder,
   PerfectPixelOperationSnapshot,
 } from './ImageCanvasEditorTypes';
+import { CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT } from './ImageCanvasFileModel';
 import {
   hydrateCanvasGenerationInputs,
   hydrateCanvasGenerationInputsResult,
@@ -1282,7 +1283,7 @@ export function hydrateCanvasGenerationDialog(
       snapshot.characterAnimationAppearanceReferences,
       resourcesById,
       currentUserId,
-    ),
+    )?.slice(0, CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT),
     characterAnimationConversionVideoReference: hydrateCharacterReference(
       snapshot.characterAnimationConversionVideoReference,
       resourcesById,
diff --git a/src/components/image-editor/ImageCanvasFileModel.ts b/src/components/image-editor/ImageCanvasFileModel.ts
index 335802380..709f85f0f 100644
--- a/src/components/image-editor/ImageCanvasFileModel.ts
+++ b/src/components/image-editor/ImageCanvasFileModel.ts
@@ -25,6 +25,9 @@ export function getEditorUploadAccept(target: string) {
   return EDITOR_ASSET_UPLOAD_ACCEPT;
 }
 
+export const CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT = 9;
+export const CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES = 64 * 1024 * 1024;
+
 export const SEEDANCE_REFERENCE_FILE_LIMITS = {
   imageBytes: 30 * 1024 * 1024,
   videoBytes: 50 * 1024 * 1024,
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index 3771a4ab2..7366958a5 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -19,6 +19,7 @@ import type {
   SpecFormValues,
   SpecGenerationType,
 } from './ImageCanvasEditorTypes';
+import { CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT } from './ImageCanvasFileModel';
 import {
   appendLimitedImageReferences,
   appendLimitedQuickEditReferences,
@@ -2404,7 +2405,7 @@ export function appendGenerationReference(
             characterAnimationAppearanceReferences: [
               ...(dialog.characterAnimationAppearanceReferences ?? []),
               createCanvasLayerReference(layer),
-            ],
+            ].slice(0, CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT),
           }
         : {
             sourceLayerId: layer.id,
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 410795565..2d66b875f 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -537,6 +537,39 @@ describe('ImageCanvasUploadModel', () => {
     });
   });
 
+  it('caps character animation appearance uploads at nine references', () => {
+    const motionReference = {
+      id: 'motion',
+      label: '动作视频',
+      src: 'motion.mp4',
+      mediaType: 'video' as const,
+    };
+    const existingAppearances = Array.from({ length: 9 }, (_, index) => ({
+      id: `appearance-${index}`,
+      label: `角色外观${index + 1}`,
+      src: `appearance-${index}.png`,
+      mediaType: 'image' as const,
+    }));
+    const nextAppearance = {
+      id: 'appearance-10',
+      label: '第十张角色外观',
+      src: 'appearance-10.png',
+      mediaType: 'image' as const,
+    };
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({
+          mode: 'character-animation',
+          generationReferences: [motionReference],
+          characterAnimationAppearanceReferences: existingAppearances,
+        }),
+        target: 'video-reference-image',
+        references: [nextAppearance],
+      })?.characterAnimationAppearanceReferences,
+    ).toEqual(existingAppearances);
+  });
+
   it('resizes a same-ratio character animation placeholder for an uploaded reference', () => {
     const dialog = createDialog({
       mode: 'character-animation',
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index ac7711803..71c30c3d7 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -11,6 +11,7 @@ import type {
   GenerateDialogState,
   QuickEditPanelState,
 } from './ImageCanvasEditorTypes';
+import { CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT } from './ImageCanvasFileModel';
 import {
   appendLimitedImageReferences,
   QUICK_EDIT_REFERENCE_LIMIT,
@@ -279,7 +280,7 @@ export function applyGenerationReferenceUpload({
                     characterAnimationAppearanceReferences: [
                       ...(dialog.characterAnimationAppearanceReferences ?? []),
                       firstReference,
-                    ],
+                    ].slice(0, CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT),
                     composerOpen: true,
                   }
                 : {
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 3fcfab9e8..887845f17 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -51,6 +51,10 @@ import type {
   QuickEditPanelState,
   SidebarPanel,
 } from './ImageCanvasEditorTypes';
+import {
+  CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT,
+  CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES,
+} from './ImageCanvasFileModel';
 import {
   applyImageEditResultToSourceLayer,
   createAudioResultLayer,
@@ -2703,6 +2707,23 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       const selectedReference = characterAnimationPanel.references?.[0];
       const appearanceReferences =
         characterAnimationPanel.appearanceReferences ?? [];
+      if (
+        appearanceReferences.length >
+        CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT
+      ) {
+        throw new Error(
+          `角色外观图最多支持${CHARACTER_ANIMATION_APPEARANCE_REFERENCE_LIMIT}张`,
+        );
+      }
+      const knownAppearanceBytes = appearanceReferences.reduce(
+        (total, reference) => total + (reference.sizeBytes ?? 0),
+        0,
+      );
+      if (
+        knownAppearanceBytes > CHARACTER_ANIMATION_APPEARANCE_TOTAL_MAX_BYTES
+      ) {
+        throw new Error('角色外观图总大小不能超过64MB');
+      }
       const referenceMediaType =
         selectedReference?.mediaType === 'video' ? 'video' : 'image';
       const stableReferenceSrc = selectedReference
-- 
2.52.0


From 3d145379f2c8d4d1fb6f042a712dbc007d0de727 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Mon, 17 Aug 2026 15:27:13 +0800
Subject: [PATCH 13/15] =?UTF-8?q?=E6=98=8E=E7=A1=AE=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=8E=BB=E8=83=8C=E6=99=AF=E5=A4=84=E7=90=86=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

去背景弹窗要求用户显式选择纯色键控或通用智能分割。

纯色模式支持颜色输入和吸管取色，并以本地算法处理任意键色。

通用模式逐帧使用 BgFilter complex 分割，禁止携带键色。

入队与 durable worker 统一校验模式参数并持久化权威处理元数据。

补充双色键控、模式冲突、双路径路由和前端交互回归。

同步更新 Spine 技术方案与团队决策记录。
---
 .../shared-memory/decision-log.md             |   7 +
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |  10 +-
 .../src/character_animation_assets.rs         | 297 +++++++++++++++++-
 .../api-server/src/editor_green_screen.rs     |  53 +++-
 .../crates/api-server/src/editor_project.rs   |   2 +-
 .../crates/shared-contracts/src/assets.rs     |  10 +
 ...rAnimationBackgroundRemovalDialog.test.tsx |  67 ++++
 ...racterAnimationBackgroundRemovalDialog.tsx | 137 ++++++++
 .../image-editor/ImageCanvasEditorView.tsx    |  54 +++-
 .../useImageCanvasGenerationWorkflow.test.tsx |   7 +-
 .../useImageCanvasGenerationWorkflow.ts       |  13 +-
 .../image-editor/editorProjectClient.test.ts  |  31 ++
 .../image-editor/editorProjectClient.ts       |  10 +
 13 files changed, 665 insertions(+), 33 deletions(-)
 create mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx
 create mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 872c1f78e..ec6a14157 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -14185,3 +14185,10 @@
 - 背景：视频模式的 `appearanceReferenceSrcs` 原先会在 Provider 调用前逐项下载并完整解码，但该实际执行路径没有复用通用视频参考的 9 张数量上限，也没有单图、累计字节、解码边长和像素预算，可能让第 10 张或压缩炸弹图片持续占用 durable worker 资源。
 - 决策：角色外观图最多 9 张，单图最大 30MB、合计最大 64MB，编码边长最大 8192、单图总像素最大 33554432。前端上传追加与草稿恢复收口到 9 张；HTTP 入队和 worker 共用请求归一化数量门禁；worker 在 Provider 调用前按 OSS HEAD、流式下载字节上限、解码器资源限制及显式像素计算失败关闭。既有 owner、稳定 objectKey、MIME 和来源资源校验继续保留。
 - 验证：覆盖 9/10 张边界、30MB 单图字节边界、8192 边长及总像素边界，并运行角色动作 Rust 定向测试、相关前端 Vitest、类型检查、编码与 diff 门禁。
+
+## 2026-08-17 Spine 视频转换去背景改为显式双模式
+
+- 背景：仅凭 `generationInputs.action = character-animation.convert` 无法证明源视频是绿幕；把任意转换结果固定按 `#00FF00` 键控会误处理普通背景或绿色主体。仓库已有 BgFilter `complex + birefnet` 通用分割服务，也已有可传 `screen_color` 的 flat 协议，但纯色场景不需要承担外部服务成本。
+- 决策：只有视频直接转换序列继续显示“去背景”，点击后必须在独立弹窗显式选择 `solid-color` 或 `general`。纯色模式默认 `#00FF00`，允许颜色输入及浏览器吸管，后端使用参数化本地键色算法；通用模式逐帧调用 BgFilter complex，不携带键色。HTTP 入队和 durable worker 共用白名单校验，后端在结果 `generationInputs` 中权威记录模式、颜色或 Provider/model，不能再把“视频转换”本身当作绿幕证明。两种模式仍生成新序列资源、整批失败关闭并保留源序列。
+- 费用边界：本次沿用现有手动 BgFilter 的 0 泥点内部契约；供应商成本不等于已确定的用户泥点售价，在没有正式定价决策时不自行新增价格。若后续收费，必须接入统一后端定价、入队冻结价格和 worker 扣费退款链路。
+- 验证：覆盖缺失/非法纯色、通用模式禁止颜色、任意键色透传、绿色主体在非绿色键色下保留、双模式 worker 路由、前端模式选择及吸管回填，并运行角色动作 Rust 定向测试、前端 Vitest、类型检查、编码和 diff 门禁。
diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index 76134a7f9..d42b6f366 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -603,14 +603,16 @@ flowchart TD
 
 #### 去背景
 
-AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。只有 `character-animation.convert` 的视频直接转换结果提供 `去背景`；AI 生成的序列帧已自动完成去背景，不展示也不接受重复处理。`character-animation` 浮动工具栏在适用时提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后必须走现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
+AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。只有 `character-animation.convert` 的视频直接转换结果提供 `去背景`；AI 生成的序列帧已自动完成去背景，不展示也不接受重复处理。`character-animation` 浮动工具栏在适用时提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后弹出独立选择框，用户必须显式选择处理方式，再进入现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
 
+- `solid-color` 为本地纯色键控，默认 `#00FF00`，允许颜色输入和浏览器吸管选择任意 `#RRGGBB`；该模式不调用 BgFilter、阿里云或其它外部模型。
+- `general` 为通用智能分割，不携带 `screenColor`，逐帧调用 BgFilter `complex + birefnet`；普通背景不再被隐式当作绿幕处理。当前内部接口沿用现有手动 BgFilter 的 0 泥点契约，不在缺少正式定价决策时自行发明用户收费金额；外部供应商成本与后续用户定价另行配置。
+- 前端只负责显式选择；HTTP 入队与 durable worker 共用白名单校验：纯色模式必须携带合法颜色，通用模式禁止携带颜色。worker 只读取已持久化任务参数，最终资源的 `generationInputs` 由后端写入模式、键色或 Provider/model，不信任客户端自报配方。
 - 原始不透明序列与透明序列是两个正式 resource；
 - 去背景全帧成功后一次性发布新的 `character-animation` / `image-sequence` 资源、素材和画布图层，保留原始序列图层不被替换；
 - 任一帧失败不产生残缺结果；
-- v1 去背景仅支持编辑器权威 `character-animation.convert` 视频直接转换结果；AI 生成的序列帧、已去背景结果、缺失或非法生成配方均由后端拒绝，前端不展示该入口；
-- 当前费用固定为 0 泥点，失败不产生不完整正式结果；请求先进入现有 `external_generation_job` 队列，不能由 HTTP 请求同步执行。
-- 队列 worker 保持一个父 job，在 job 内按帧并行执行下载、纯本地绿幕扣除、最终 PNG 上传和帧对象准备；所有已发出的帧必须 drain 完成后再按帧号排序，一帧失败即清理未提交对象并整批失败，不新增逐帧子任务表或独立计费。
+- 去背景仅支持编辑器权威 `character-animation.convert` 视频直接转换结果；AI 生成的序列帧、已去背景结果、缺失或非法生成配方均由后端拒绝，前端不展示该入口；
+- 请求先进入现有 `external_generation_job` 队列，不能由 HTTP 请求同步执行。队列 worker 保持一个父 job，在 job 内按帧并行执行处理、最终 PNG 上传和帧对象准备；所有已发出的帧必须 drain 完成后再按帧号排序，一帧失败即清理未提交对象并整批失败，不新增逐帧子任务表。
 - 帧对象路径绑定本次 job 的 `operationId`，同一 job 重放复用路径，不同 job 即使请求 fingerprint 相同也不得复用旧 object location，避免新 `asset_object` 与历史结果发生幂等冲突。
 
 #### 拆帧
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 07744c438..1dcc67219 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -43,6 +43,7 @@ use shared_contracts::assets::{
     CharacterAssetJobStatusPayload, CharacterAssetJobStatusText, CharacterVisualDraftPayload,
     CharacterWorkflowCacheGetResponse, CharacterWorkflowCachePayload,
     CharacterWorkflowCacheSaveRequest, CharacterWorkflowCacheSaveResponse,
+    EditorCharacterAnimationBackgroundRemovalMode,
     EditorCharacterAnimationBackgroundRemovalRequest,
     EditorCharacterAnimationBackgroundRemovalResponse, EditorCharacterAnimationFramePayload,
     EditorCharacterAnimationFrameSplitRequest, EditorCharacterAnimationFrameSplitResponse,
@@ -85,13 +86,13 @@ use crate::{
         editor_generation_source_entity_id, enqueue_editor_generation_job_for_caller,
     },
     editor_green_screen::{
-        EditorScreenBackgroundColor, remove_editor_character_animation_green_screen_background,
+        EditorScreenBackgroundColor, remove_editor_character_animation_solid_color_background,
     },
     editor_project::{
         EDITOR_ASSET_ID_PREFIX, EDITOR_BGFILTER_CROSS_CHECK_ENABLED,
-        EDITOR_BGFILTER_DEFAULT_SEG_MODEL, EDITOR_LOCAL_MATTING_PROVIDER,
-        EDITOR_RESOURCE_ID_PREFIX, EditorCanvasGeneratedLayerInput, EditorCanvasLayoutPlan,
-        EditorGenerationCaller, EditorGenerationOperationContext,
+        EDITOR_BGFILTER_DEFAULT_SEG_MODEL, EDITOR_BGFILTER_MATTING_PROVIDER,
+        EDITOR_LOCAL_MATTING_PROVIDER, EDITOR_RESOURCE_ID_PREFIX, EditorCanvasGeneratedLayerInput,
+        EditorCanvasLayoutPlan, EditorGenerationCaller, EditorGenerationOperationContext,
         PreparedEditorGenerationResultItem, build_editor_canvas_generated_layer_item,
         download_editor_persisted_image_object, editor_asset_payload_from_record,
         editor_media_src_from_object_key, editor_project_payload_from_record,
@@ -100,6 +101,7 @@ use crate::{
         persist_editor_generation_result_atomically, preflight_editor_billable_generation_target,
         rebuild_editor_generation_input_references,
         remove_editor_generated_screen_background_with_bgfilter,
+        request_editor_background_removal_image_with_bgfilter_worker,
         resolve_editor_reference_object_key_for_owner, sanitize_editor_client_generation_inputs,
         serialize_editor_generation_inputs, serialize_editor_image_sequence_frames,
         validate_editor_generation_operation_id, with_editor_media_duration_generation_input,
@@ -1140,6 +1142,118 @@ fn editor_character_animation_sequence_is_video_conversion(
         && inputs.get("action").and_then(Value::as_str) == Some("character-animation.convert")
 }
 
+#[derive(Clone, Debug, PartialEq, Eq)]
+struct NormalizedEditorCharacterAnimationBackgroundRemoval {
+    mode: EditorCharacterAnimationBackgroundRemovalMode,
+    screen_color: Option<String>,
+    key_rgb: Option<[u8; 3]>,
+}
+
+fn normalize_editor_character_animation_background_removal(
+    payload: &EditorCharacterAnimationBackgroundRemovalRequest,
+) -> Result<NormalizedEditorCharacterAnimationBackgroundRemoval, AppError> {
+    match payload.mode {
+        EditorCharacterAnimationBackgroundRemovalMode::SolidColor => {
+            let screen_color = payload
+                .screen_color
+                .as_deref()
+                .map(str::trim)
+                .filter(|value| !value.is_empty())
+                .ok_or_else(|| {
+                    editor_character_animation_bad_request("纯色背景抠图必须提供 screenColor。")
+                })?;
+            let key_rgb = parse_editor_character_animation_screen_color(screen_color)?;
+            Ok(NormalizedEditorCharacterAnimationBackgroundRemoval {
+                mode: payload.mode,
+                screen_color: Some(screen_color.to_ascii_uppercase()),
+                key_rgb: Some(key_rgb),
+            })
+        }
+        EditorCharacterAnimationBackgroundRemovalMode::General => {
+            if payload.screen_color.is_some() {
+                return Err(editor_character_animation_bad_request(
+                    "通用智能抠图不能携带 screenColor。",
+                ));
+            }
+            Ok(NormalizedEditorCharacterAnimationBackgroundRemoval {
+                mode: payload.mode,
+                screen_color: None,
+                key_rgb: None,
+            })
+        }
+    }
+}
+
+fn parse_editor_character_animation_screen_color(value: &str) -> Result<[u8; 3], AppError> {
+    let bytes = value.as_bytes();
+    if bytes.len() != 7 || bytes[0] != b'#' || !bytes[1..].iter().all(u8::is_ascii_hexdigit) {
+        return Err(editor_character_animation_bad_request(
+            "screenColor 必须是 #RRGGBB。",
+        ));
+    }
+    let parse_channel = |start: usize| {
+        u8::from_str_radix(&value[start..start + 2], 16)
+            .map_err(|_| editor_character_animation_bad_request("screenColor 必须是 #RRGGBB。"))
+    };
+    Ok([parse_channel(1)?, parse_channel(3)?, parse_channel(5)?])
+}
+
+fn apply_editor_character_animation_background_removal_metadata(
+    generation_inputs: Option<Value>,
+    options: &NormalizedEditorCharacterAnimationBackgroundRemoval,
+) -> Value {
+    let mut inputs = generation_inputs
+        .and_then(|value| value.as_object().cloned())
+        .unwrap_or_default();
+    inputs.insert("version".to_string(), json!(2));
+    inputs.insert(
+        "action".to_string(),
+        json!("character-animation.remove-background"),
+    );
+    let mut fields = inputs
+        .remove("fields")
+        .and_then(|value| value.as_array().cloned())
+        .unwrap_or_default();
+    fields.retain(|field| {
+        !matches!(
+            field.get("id").and_then(Value::as_str),
+            Some("backgroundRemovalMode" | "screenColor" | "mattingProvider" | "mattingModel")
+        )
+    });
+    fields.push(json!({
+        "id": "backgroundRemovalMode",
+        "title": "去背景方式",
+        "value": match options.mode {
+            EditorCharacterAnimationBackgroundRemovalMode::SolidColor => "solid-color",
+            EditorCharacterAnimationBackgroundRemovalMode::General => "general",
+        },
+    }));
+    if let Some(screen_color) = options.screen_color.as_deref() {
+        fields.push(json!({
+            "id": "screenColor",
+            "title": "背景色",
+            "value": screen_color,
+        }));
+    }
+    fields.push(json!({
+        "id": "mattingProvider",
+        "title": "处理服务",
+        "value": match options.mode {
+            EditorCharacterAnimationBackgroundRemovalMode::SolidColor => EDITOR_LOCAL_MATTING_PROVIDER,
+            EditorCharacterAnimationBackgroundRemovalMode::General => EDITOR_BGFILTER_MATTING_PROVIDER,
+        },
+    }));
+    if options.mode == EditorCharacterAnimationBackgroundRemovalMode::General {
+        fields.push(json!({
+            "id": "mattingModel",
+            "title": "抠图模型",
+            "value": EDITOR_BGFILTER_DEFAULT_SEG_MODEL,
+        }));
+    }
+    inputs.insert("fields".to_string(), Value::Array(fields));
+    Value::Object(inputs)
+}
+
 pub async fn remove_editor_character_animation_background(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1186,6 +1300,9 @@ pub(crate) async fn enqueue_editor_character_animation_background_removal_for_ow
     owner_user_id: &str,
     mut payload: EditorCharacterAnimationBackgroundRemovalRequest,
 ) -> Result<ExternalGenerationJobRecord, Response> {
+    let options = normalize_editor_character_animation_background_removal(&payload)
+        .map_err(|error| character_animation_error_response(request_context, error))?;
+    payload.screen_color = options.screen_color;
     let target = preflight_editor_billable_generation_target(
         state,
         owner_user_id,
@@ -1230,6 +1347,8 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
             editor_character_animation_bad_request(error.body_text()),
         )
     })?;
+    let options = normalize_editor_character_animation_background_removal(&payload)
+        .map_err(|error| character_animation_error_response(&request_context, error))?;
     let owner_user_id = caller.owner_user_id.clone();
     let project_id = payload.project_id.trim().to_string();
     let source_layer_id = payload.source_layer_id.trim().to_string();
@@ -1366,6 +1485,15 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
             .await
             .map_err(|error| character_animation_error_response(&request_context, error))?;
     }
+    let matting_audit = crate::external_api_audit::ExternalApiAuditContext {
+        user_id: caller.audit_subject_user_id.clone(),
+        profile_id: caller
+            .audit_project_id
+            .clone()
+            .or_else(|| Some(project_id.clone())),
+        request_id: Some(request_context.request_id().to_string()),
+        external_call_deadline: request_context.external_call_deadline(),
+    };
     let persisted_frames = extract_and_prepare_background_removal_frames(
         &state,
         &caller,
@@ -1373,6 +1501,8 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
         &frames,
         frame_width,
         frame_height,
+        &options,
+        &matting_audit,
     )
     .await
     .map_err(|error| character_animation_error_response(&request_context, error))?;
@@ -1400,13 +1530,23 @@ pub(crate) async fn remove_editor_character_animation_background_for_owner(
     )
     .await
     .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let generation_inputs = Some(
+        apply_editor_character_animation_background_removal_metadata(generation_inputs, &options),
+    );
     let completed_at_micros = current_utc_micros();
     let prepared = match prepare_editor_character_animation_sequence_result(
         &caller,
         Some(project_id.as_str()),
         payload.asset_folder_id.as_deref(),
         asset_label.as_str(),
-        EDITOR_LOCAL_MATTING_PROVIDER,
+        match options.mode {
+            EditorCharacterAnimationBackgroundRemovalMode::SolidColor => {
+                EDITOR_LOCAL_MATTING_PROVIDER
+            }
+            EditorCharacterAnimationBackgroundRemovalMode::General => {
+                EDITOR_BGFILTER_MATTING_PROVIDER
+            }
+        },
         Some(source_resource_id.clone()),
         generation_inputs,
         plan,
@@ -5020,8 +5160,8 @@ async fn extract_and_prepare_direct_video_conversion_frames(
     }
 }
 
-/// 对已有序列帧逐帧执行纯算法绿幕扣除，生成透明序列帧对象。
-/// 输入是源序列帧资源的稳定 objectKey 列表；不调用 BgFilter、阿里云或其它模型。
+/// 对已有序列帧按用户显式选择执行本地纯色键控或 BgFilter 通用智能分割，
+/// 生成一套新的透明序列帧对象。输入只接受源资源的正式 objectKey 列表；
 /// 任一帧失败即整批清理，不发布残缺结果。
 async fn extract_and_prepare_background_removal_frames(
     state: &AppState,
@@ -5030,6 +5170,8 @@ async fn extract_and_prepare_background_removal_frames(
     source_frames: &[EditorCharacterAnimationFramePayload],
     frame_width: u32,
     frame_height: u32,
+    options: &NormalizedEditorCharacterAnimationBackgroundRemoval,
+    matting_audit: &crate::external_api_audit::ExternalApiAuditContext,
 ) -> Result<PersistedEditorCharacterAnimationFrameSet, AppError> {
     use futures_util::StreamExt as _;
 
@@ -5047,10 +5189,28 @@ async fn extract_and_prepare_background_removal_frames(
                             "序列帧缺少稳定 objectKey，无法去背景。",
                         )
                     })?;
-                let source_image =
-                    download_editor_persisted_image_object(state, source_object_key).await?;
-                let removed =
-                    remove_editor_character_animation_green_screen_background(&source_image)?;
+                let removed = match options.mode {
+                    EditorCharacterAnimationBackgroundRemovalMode::SolidColor => {
+                        let source_image =
+                            download_editor_persisted_image_object(state, source_object_key)
+                                .await?;
+                        remove_editor_character_animation_solid_color_background(
+                            &source_image,
+                            options
+                                .key_rgb
+                                .expect("solid-color options require key RGB"),
+                        )?
+                    }
+                    EditorCharacterAnimationBackgroundRemovalMode::General => {
+                        request_editor_background_removal_image_with_bgfilter_worker(
+                            state,
+                            source_object_key,
+                            matting_audit,
+                        )
+                        .await?
+                        .image
+                    }
+                };
                 let finalized = finalize_animation_frame_payload(
                     removed.bytes.as_slice(),
                     removed.mime_type.as_str(),
@@ -10309,9 +10469,115 @@ mod tests {
         assert!(source.contains("content_type.starts_with(\"image/\")"));
     }
 
+    fn editor_character_animation_background_removal_request(
+        mode: EditorCharacterAnimationBackgroundRemovalMode,
+        screen_color: Option<&str>,
+    ) -> EditorCharacterAnimationBackgroundRemovalRequest {
+        EditorCharacterAnimationBackgroundRemovalRequest {
+            project_id: "project-1".to_string(),
+            source_layer_id: "layer-1".to_string(),
+            source_resource_id: "resource-1".to_string(),
+            mode,
+            screen_color: screen_color.map(str::to_string),
+            asset_folder_id: None,
+            asset_label: None,
+            canvas_completion: None,
+            generation_inputs: None,
+        }
+    }
+
     #[test]
-    fn editor_character_animation_background_removal_uses_local_green_screen_only() {
+    fn editor_character_animation_background_removal_requires_consistent_explicit_mode() {
+        let solid = normalize_editor_character_animation_background_removal(
+            &editor_character_animation_background_removal_request(
+                EditorCharacterAnimationBackgroundRemovalMode::SolidColor,
+                Some("#33aaFF"),
+            ),
+        )
+        .expect("solid color mode should normalize");
+        assert_eq!(solid.screen_color.as_deref(), Some("#33AAFF"));
+        assert_eq!(solid.key_rgb, Some([0x33, 0xAA, 0xFF]));
+
+        assert!(
+            normalize_editor_character_animation_background_removal(
+                &editor_character_animation_background_removal_request(
+                    EditorCharacterAnimationBackgroundRemovalMode::SolidColor,
+                    None,
+                ),
+            )
+            .is_err()
+        );
+        assert!(
+            normalize_editor_character_animation_background_removal(
+                &editor_character_animation_background_removal_request(
+                    EditorCharacterAnimationBackgroundRemovalMode::SolidColor,
+                    Some("green"),
+                ),
+            )
+            .is_err()
+        );
+        assert!(
+            normalize_editor_character_animation_background_removal(
+                &editor_character_animation_background_removal_request(
+                    EditorCharacterAnimationBackgroundRemovalMode::General,
+                    Some("#00FF00"),
+                ),
+            )
+            .is_err()
+        );
+        assert!(
+            normalize_editor_character_animation_background_removal(
+                &editor_character_animation_background_removal_request(
+                    EditorCharacterAnimationBackgroundRemovalMode::General,
+                    None,
+                ),
+            )
+            .is_ok()
+        );
+    }
+
+    #[test]
+    fn editor_character_animation_background_removal_persists_authoritative_mode_metadata() {
+        let options = normalize_editor_character_animation_background_removal(
+            &editor_character_animation_background_removal_request(
+                EditorCharacterAnimationBackgroundRemovalMode::General,
+                None,
+            ),
+        )
+        .expect("general mode should normalize");
+        let inputs = apply_editor_character_animation_background_removal_metadata(None, &options);
+        assert_eq!(inputs["version"], json!(2));
+        assert_eq!(
+            inputs["action"],
+            json!("character-animation.remove-background")
+        );
+        assert!(
+            inputs["fields"]
+                .as_array()
+                .is_some_and(|fields| fields.iter().any(|field| {
+                    field["id"] == "backgroundRemovalMode" && field["value"] == "general"
+                }))
+        );
+        assert!(
+            inputs["fields"]
+                .as_array()
+                .is_some_and(|fields| fields.iter().any(|field| {
+                    field["id"] == "mattingProvider"
+                        && field["value"] == EDITOR_BGFILTER_MATTING_PROVIDER
+                }))
+        );
+    }
+
+    #[test]
+    fn editor_character_animation_background_removal_routes_both_modes_before_provider_work() {
         let source = include_str!("character_animation_assets.rs");
+        let enqueue_body = source
+            .split_once("pub(crate) async fn enqueue_editor_character_animation_background_removal_for_owner")
+            .and_then(|(_, tail)| tail.split_once("pub(crate) async fn remove_editor_character_animation_background_for_owner"))
+            .map(|(body, _)| body)
+            .expect("background removal enqueue function should exist");
+        assert!(enqueue_body.contains("normalize_editor_character_animation_background_removal"));
+
         let body = source
             .split_once("async fn extract_and_prepare_background_removal_frames")
             .and_then(|(_, tail)| {
@@ -10320,15 +10586,16 @@ mod tests {
             .map(|(body, _)| body)
             .expect("background removal frame function should exist");
 
-        assert!(body.contains("remove_editor_character_animation_green_screen_background"));
+        assert!(body.contains("EditorCharacterAnimationBackgroundRemovalMode::SolidColor"));
+        assert!(body.contains("remove_editor_character_animation_solid_color_background"));
         assert!(body.contains("download_editor_persisted_image_object"));
+        assert!(body.contains("EditorCharacterAnimationBackgroundRemovalMode::General"));
+        assert!(body.contains("request_editor_background_removal_image_with_bgfilter_worker"));
         assert!(body.contains(".buffer_unordered(frame_count.max(1))"));
         assert!(body.contains(".collect::<Vec<_>>()"));
         assert!(body.contains("processed.sort_by_key"));
         assert!(body.contains("frame_errors.sort_by_key"));
-        assert!(!body.contains("request_editor_background_removal_image_with_bgfilter_worker"));
         assert!(!body.contains("remove_editor_generated_screen_background_with_bgfilter"));
-        assert!(!body.contains("ExternalApiAuditContext"));
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/editor_green_screen.rs b/server-rs/crates/api-server/src/editor_green_screen.rs
index cc1c1a40c..c7ab30e53 100644
--- a/server-rs/crates/api-server/src/editor_green_screen.rs
+++ b/server-rs/crates/api-server/src/editor_green_screen.rs
@@ -208,19 +208,24 @@ pub(crate) fn remove_editor_generated_green_screen_background(
     })
 }
 
-/// 角色动作手动去背景只处理约定的纯绿幕，不调用 BgFilter、阿里云或其它模型。
-/// 不启用近白背景清理，避免把白色角色内容误当成背景；低饱和绿色仅作为绿幕边缘
-/// 与压缩/抗锯齿造成的颜色变化处理。
-pub(crate) fn remove_editor_character_animation_green_screen_background(
+/// 角色动作纯色背景模式使用用户显式选择的键色执行本地算法，不调用 BgFilter、
+/// 阿里云或其它模型。不额外清理近白背景；只有精确绿幕键色启用低饱和绿边缘修复。
+pub(crate) fn remove_editor_character_animation_solid_color_background(
     image: &DownloadedOpenAiImage,
+    key_rgb: [u8; 3],
 ) -> Result<DownloadedOpenAiImage, AppError> {
+    let key_color = GeneratedAssetSheetKeyColor {
+        red: key_rgb[0],
+        green: key_rgb[1],
+        blue: key_rgb[2],
+    };
     let bytes = remove_generated_asset_sheet_green_screen_background_bytes(
         image.bytes.as_slice(),
         GeneratedAssetSheetAlphaOptions {
-            key_color: GeneratedAssetSheetKeyColor::GREEN_SCREEN,
+            key_color,
             remove_near_white_background: false,
             remove_disconnected_hard_key_background: true,
-            remove_muted_green_screen_background: true,
+            remove_muted_green_screen_background: key_color.is_green_screen(),
             detect_internal_holes: true,
             internal_hole_min_pixels: 16,
         },
@@ -294,13 +299,15 @@ mod tests {
             .write_to(&mut Cursor::new(&mut bytes), ImageFormat::Png)
             .expect("test PNG should encode");
 
-        let output =
-            remove_editor_character_animation_green_screen_background(&DownloadedOpenAiImage {
+        let output = remove_editor_character_animation_solid_color_background(
+            &DownloadedOpenAiImage {
                 bytes,
                 mime_type: "image/png".to_string(),
                 extension: "png".to_string(),
-            })
-            .expect("green screen should be removed");
+            },
+            [0, 255, 0],
+        )
+        .expect("green screen should be removed");
         let image = image::load_from_memory(output.bytes.as_slice())
             .expect("output PNG should decode")
             .to_rgba8();
@@ -309,6 +316,32 @@ mod tests {
         assert_eq!(image.get_pixel(1, 1).0, [255, 255, 255, 255]);
     }
 
+    #[test]
+    fn character_animation_custom_key_color_preserves_green_foreground() {
+        let mut source = RgbaImage::from_pixel(3, 3, Rgba([0, 0, 255, 255]));
+        source.put_pixel(1, 1, Rgba([0, 255, 0, 255]));
+        let mut bytes = Vec::new();
+        DynamicImage::ImageRgba8(source)
+            .write_to(&mut Cursor::new(&mut bytes), ImageFormat::Png)
+            .expect("test PNG should encode");
+
+        let output = remove_editor_character_animation_solid_color_background(
+            &DownloadedOpenAiImage {
+                bytes,
+                mime_type: "image/png".to_string(),
+                extension: "png".to_string(),
+            },
+            [0, 0, 255],
+        )
+        .expect("blue screen should be removed");
+        let image = image::load_from_memory(output.bytes.as_slice())
+            .expect("output PNG should decode")
+            .to_rgba8();
+
+        assert_eq!(image.get_pixel(0, 0).0[3], 0);
+        assert_eq!(image.get_pixel(1, 1).0, [0, 255, 0, 255]);
+    }
+
     #[test]
     fn editor_screen_background_color_parser_uses_default_and_rejects_unknown() {
         assert_eq!(
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index e7e856857..a03b3bf45 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -228,7 +228,7 @@ const EDITOR_LEGACY_GREEN_SCREEN_SOURCE_ASSET_KIND: &str = "editor_green_screen_
 pub(crate) const EDITOR_PROVIDER_SOURCE_SLOT: &str = "provider_source";
 pub(crate) const EDITOR_BGFILTER_DEFAULT_SEG_MODEL: &str = "birefnet";
 const EDITOR_BGFILTER_SEG_MODEL_ANIME_SEG: &str = "anime-seg";
-const EDITOR_BGFILTER_MATTING_PROVIDER: &str = "BgFilter";
+pub(crate) const EDITOR_BGFILTER_MATTING_PROVIDER: &str = "BgFilter";
 const EDITOR_ALIYUN_MATTING_PROVIDER: &str = "Aliyun Matting";
 const EDITOR_ALIYUN_MATTING_MODEL: &str = "segment-common-image";
 pub(crate) const EDITOR_LOCAL_MATTING_PROVIDER: &str = "Genarrative Local";
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index 2ee907195..350d1399e 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -454,12 +454,22 @@ pub struct EditorCharacterAnimationFrameSplitResponse {
     pub assets: Vec<EditorAssetPayload>,
 }
 
+#[derive(Clone, Copy, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "kebab-case")]
+pub enum EditorCharacterAnimationBackgroundRemovalMode {
+    SolidColor,
+    General,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorCharacterAnimationBackgroundRemovalRequest {
     pub project_id: String,
     pub source_layer_id: String,
     pub source_resource_id: String,
+    pub mode: EditorCharacterAnimationBackgroundRemovalMode,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub screen_color: Option<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub asset_folder_id: Option<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx
new file mode 100644
index 000000000..82346227a
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx
@@ -0,0 +1,67 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { EditorCharacterAnimationBackgroundRemovalMode } from '../../services/image-editor/editorProjectClient';
+import { ImageCanvasCharacterAnimationBackgroundRemovalDialog } from './ImageCanvasCharacterAnimationBackgroundRemovalDialog';
+
+function DialogHarness({ onConfirm = vi.fn() }: { onConfirm?: () => void }) {
+  const [mode, setMode] =
+    useState<EditorCharacterAnimationBackgroundRemovalMode>('solid-color');
+  const [screenColor, setScreenColor] = useState('#00FF00');
+
+  return (
+    <ImageCanvasCharacterAnimationBackgroundRemovalDialog
+      open
+      mode={mode}
+      screenColor={screenColor}
+      onModeChange={setMode}
+      onScreenColorChange={setScreenColor}
+      onClose={vi.fn()}
+      onConfirm={onConfirm}
+    />
+  );
+}
+
+afterEach(() => {
+  delete (window as typeof window & { EyeDropper?: unknown }).EyeDropper;
+});
+
+describe('ImageCanvasCharacterAnimationBackgroundRemovalDialog', () => {
+  it('requires an explicit pure-color or general mode selection', () => {
+    const onConfirm = vi.fn();
+    render(<DialogHarness onConfirm={onConfirm} />);
+
+    expect(
+      (screen.getByRole('radio', { name: /纯色背景抠图/ }) as HTMLInputElement)
+        .checked,
+    ).toBe(true);
+    expect(
+      (screen.getByLabelText('纯色背景颜色') as HTMLInputElement).value,
+    ).toBe('#00ff00');
+
+    fireEvent.click(screen.getByRole('radio', { name: /通用智能抠图/ }));
+    expect(screen.queryByLabelText('纯色背景颜色')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '开始处理' }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('uses the browser eyedropper result as the solid background color', async () => {
+    const open = vi.fn().mockResolvedValue({ sRGBHex: '#336699' });
+    (window as typeof window & { EyeDropper?: unknown }).EyeDropper = class {
+      open = open;
+    };
+    render(<DialogHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '吸取画布颜色' }));
+
+    await waitFor(() =>
+      expect(
+        (screen.getByLabelText('纯色背景颜色') as HTMLInputElement).value,
+      ).toBe('#336699'),
+    );
+    expect(open).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx
new file mode 100644
index 000000000..beee18158
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx
@@ -0,0 +1,137 @@
+import { useCallback, useState } from 'react';
+
+import type { EditorCharacterAnimationBackgroundRemovalMode } from '../../services/image-editor/editorProjectClient';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { UnifiedConfirmDialog } from '../common/UnifiedConfirmDialog';
+
+type EyeDropperConstructor = new () => {
+  open: () => Promise<{ sRGBHex: string }>;
+};
+
+type ImageCanvasCharacterAnimationBackgroundRemovalDialogProps = {
+  open: boolean;
+  mode: EditorCharacterAnimationBackgroundRemovalMode;
+  screenColor: string;
+  busy?: boolean;
+  onModeChange: (mode: EditorCharacterAnimationBackgroundRemovalMode) => void;
+  onScreenColorChange: (screenColor: string) => void;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+function resolveEyeDropper() {
+  return (window as typeof window & { EyeDropper?: EyeDropperConstructor })
+    .EyeDropper;
+}
+
+export function ImageCanvasCharacterAnimationBackgroundRemovalDialog({
+  open,
+  mode,
+  screenColor,
+  busy = false,
+  onModeChange,
+  onScreenColorChange,
+  onClose,
+  onConfirm,
+}: ImageCanvasCharacterAnimationBackgroundRemovalDialogProps) {
+  const [isPickingColor, setIsPickingColor] = useState(false);
+  const pickScreenColor = useCallback(async () => {
+    const EyeDropper = resolveEyeDropper();
+    if (!EyeDropper || isPickingColor) {
+      return;
+    }
+    setIsPickingColor(true);
+    try {
+      const result = await new EyeDropper().open();
+      if (/^#[0-9a-f]{6}$/i.test(result.sRGBHex)) {
+        onScreenColorChange(result.sRGBHex.toUpperCase());
+      }
+    } catch {
+      // 用户取消系统吸管不属于错误，保持当前颜色即可。
+    } finally {
+      setIsPickingColor(false);
+    }
+  }, [isPickingColor, onScreenColorChange]);
+
+  return (
+    <UnifiedConfirmDialog
+      open={open}
+      title="序列帧去背景"
+      onClose={onClose}
+      onConfirm={onConfirm}
+      confirmLabel="开始处理"
+      busy={busy}
+      busyConfirmLabel="提交中"
+      confirmDisabled={
+        mode === 'solid-color' && !/^#[0-9A-F]{6}$/i.test(screenColor)
+      }
+      showCancel
+      size="md"
+      panelClassName="platform-remap-surface"
+    >
+      <fieldset className="grid gap-3" aria-label="去背景方式">
+        <label className="flex cursor-pointer gap-3 rounded-xl border border-[var(--platform-border-soft)] p-3">
+          <input
+            type="radio"
+            name="character-animation-background-removal-mode"
+            value="solid-color"
+            checked={mode === 'solid-color'}
+            disabled={busy}
+            onChange={() => onModeChange('solid-color')}
+          />
+          <span>
+            <span className="block font-medium">纯色背景抠图</span>
+            <span className="block text-xs text-[var(--platform-text-muted)]">
+              使用本地键色算法
+            </span>
+          </span>
+        </label>
+        <label className="flex cursor-pointer gap-3 rounded-xl border border-[var(--platform-border-soft)] p-3">
+          <input
+            type="radio"
+            name="character-animation-background-removal-mode"
+            value="general"
+            checked={mode === 'general'}
+            disabled={busy}
+            onChange={() => onModeChange('general')}
+          />
+          <span>
+            <span className="block font-medium">通用智能抠图</span>
+            <span className="block text-xs text-[var(--platform-text-muted)]">
+              逐帧调用智能分割服务
+            </span>
+          </span>
+        </label>
+      </fieldset>
+
+      {mode === 'solid-color' ? (
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          <label className="flex items-center gap-2 text-sm font-medium">
+            背景色
+            <input
+              type="color"
+              aria-label="纯色背景颜色"
+              value={screenColor}
+              disabled={busy}
+              onChange={(event) =>
+                onScreenColorChange(event.currentTarget.value.toUpperCase())
+              }
+              className="h-9 w-12 cursor-pointer rounded border border-[var(--platform-border-soft)] bg-transparent p-0.5"
+            />
+          </label>
+          <code className="text-xs">{screenColor}</code>
+          <PlatformActionButton
+            type="button"
+            tone="secondary"
+            size="xs"
+            shape="pill"
+            disabled={busy || isPickingColor || !resolveEyeDropper()}
+            onClick={() => void pickScreenColor()}
+          >
+            {isPickingColor ? '取色中' : '吸取画布颜色'}
+          </PlatformActionButton>
+        </div>
+      ) : null}
+    </UnifiedConfirmDialog>
+  );
+}
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index aebb5fc3b..f4833ce5e 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -18,6 +18,7 @@ import {
   createEditorAsset,
   createEditorProjectResource,
   type EditorAssetSnapshot,
+  type EditorCharacterAnimationBackgroundRemovalMode,
   type EditorProjectSnapshot,
   loadEditorGenerationPricing,
   loadEditorProject,
@@ -34,6 +35,7 @@ import {
 import { usePlatformProfileCenterController } from '../platform-entry/usePlatformProfileCenterController';
 import type { ImageCanvasActionResult } from './ImageCanvasActionsContext';
 import { ImageCanvasActionsProvider } from './ImageCanvasActionsProvider';
+import { ImageCanvasCharacterAnimationBackgroundRemovalDialog } from './ImageCanvasCharacterAnimationBackgroundRemovalDialog';
 import {
   canvasAssetKindOrNull,
   DEFAULT_CANVAS_BACKGROUND_COLOR,
@@ -209,6 +211,12 @@ function openCanvasStartupTool(
   generationSurface.openGenerateDialog();
 }
 
+type CharacterAnimationBackgroundRemovalDraft = {
+  sourceLayer: CanvasLayer;
+  mode: EditorCharacterAnimationBackgroundRemovalMode;
+  screenColor: string;
+};
+
 function resolveLayerProjectResourceImageSrc(layer: CanvasLayer) {
   const objectKey = layer.objectKey?.trim();
   if (objectKey) {
@@ -507,6 +515,10 @@ export function ImageCanvasEditorView({
   const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([]);
   const [hoveredLayerId, setHoveredLayerId] = useState<string | null>(null);
   const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(null);
+  const [
+    characterAnimationBackgroundRemovalDraft,
+    setCharacterAnimationBackgroundRemovalDraft,
+  ] = useState<CharacterAnimationBackgroundRemovalDraft | null>(null);
   const [pendingGenerationDeleteDialog, setPendingGenerationDeleteDialog] =
     useState<CanvasGenerationDialogState | null>(null);
   const [imageContextMenu, setImageContextMenu] =
@@ -2673,7 +2685,11 @@ export function ImageCanvasEditorView({
     },
     onRemoveCharacterAnimationBackground: (layer: CanvasLayer) => {
       void flushProjectPersistence().then(() =>
-        removeSelectedCharacterAnimationBackground(layer),
+        setCharacterAnimationBackgroundRemovalDraft({
+          sourceLayer: layer,
+          mode: 'solid-color',
+          screenColor: '#00FF00',
+        }),
       );
     },
     onExtractUiDesignAssets: extractUiDesignAssets,
@@ -2744,6 +2760,42 @@ export function ImageCanvasEditorView({
           onClose: () => setMetadataLayer(null),
         }}
       />
+      <ImageCanvasCharacterAnimationBackgroundRemovalDialog
+        open={Boolean(characterAnimationBackgroundRemovalDraft)}
+        mode={characterAnimationBackgroundRemovalDraft?.mode ?? 'solid-color'}
+        screenColor={
+          characterAnimationBackgroundRemovalDraft?.screenColor ?? '#00FF00'
+        }
+        busy={Boolean(
+          characterAnimationBackgroundRemovalDraft &&
+            removingBackgroundCharacterAnimationLayerIds.has(
+              characterAnimationBackgroundRemovalDraft.sourceLayer.id,
+            ),
+        )}
+        onModeChange={(mode) =>
+          setCharacterAnimationBackgroundRemovalDraft((draft) =>
+            draft ? { ...draft, mode } : draft,
+          )
+        }
+        onScreenColorChange={(screenColor) =>
+          setCharacterAnimationBackgroundRemovalDraft((draft) =>
+            draft ? { ...draft, screenColor } : draft,
+          )
+        }
+        onClose={() => setCharacterAnimationBackgroundRemovalDraft(null)}
+        onConfirm={() => {
+          const draft = characterAnimationBackgroundRemovalDraft;
+          if (!draft) {
+            return;
+          }
+          void removeSelectedCharacterAnimationBackground(draft.sourceLayer, {
+            mode: draft.mode,
+            ...(draft.mode === 'solid-color'
+              ? { screenColor: draft.screenColor }
+              : {}),
+          }).then(() => setCharacterAnimationBackgroundRemovalDraft(null));
+        }}
+      />
       <PlatformDangerConfirmDialog
         open={Boolean(pendingGenerationDeleteDialog)}
         title="删除生成中的占位图"
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 24b0ae332..898101275 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -947,7 +947,10 @@ function GenerationWorkflowHarness({
       <button
         type="button"
         onClick={() =>
-          void workflow.removeSelectedCharacterAnimationBackground(layers[0]!)
+          void workflow.removeSelectedCharacterAnimationBackground(layers[0]!, {
+            mode: 'solid-color',
+            screenColor: '#00FF00',
+          })
         }
       >
         去除序列帧背景
@@ -3088,6 +3091,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
         projectId: 'project-1',
         sourceLayerId: 'layer-source',
         sourceResourceId: 'resource-source',
+        mode: 'solid-color',
+        screenColor: '#00FF00',
       }),
     );
 
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index d673e8292..f781ee7de 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -19,6 +19,7 @@ import { uploadEditorMediaAssetFile } from '../../services/image-editor/editorMe
 import {
   createEditorProjectResource,
   type EditorAssetSnapshot,
+  type EditorCharacterAnimationBackgroundRemovalMode,
   type EditorPixelArtSnapInput,
   type EditorPixelArtSnapResult,
   type EditorProjectLayerSnapshot,
@@ -3676,7 +3677,13 @@ export function useImageCanvasGenerationWorkflow({
   );
 
   const removeSelectedCharacterAnimationBackground = useCallback(
-    async (sourceLayer: CanvasLayer) => {
+    async (
+      sourceLayer: CanvasLayer,
+      options: {
+        mode: EditorCharacterAnimationBackgroundRemovalMode;
+        screenColor?: string;
+      },
+    ) => {
       if (
         !canRemoveCharacterAnimationBackground(sourceLayer) ||
         !canSplitCharacterAnimationFrames(sourceLayer) ||
@@ -3716,6 +3723,10 @@ export function useImageCanvasGenerationWorkflow({
           projectId,
           sourceLayerId: sourceLayer.id,
           sourceResourceId: sourceLayer.resourceId,
+          mode: options.mode,
+          ...(options.mode === 'solid-color' && options.screenColor
+            ? { screenColor: options.screenColor }
+            : {}),
           assetFolderId,
           assetLabel,
           ...(backgroundRemovalPlacement?.placeholder
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 37c0cd1fc..ad7f2ed40 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -36,6 +36,7 @@ import {
   optimizeEditorSoundEffectPrompt,
   refineEditorIconSpecArtStyle,
   refineEditorIconSpecPlaySetting,
+  removeEditorCharacterAnimationBackground,
   removeEditorImageBackground,
   renameEditorProject,
   saveEditorProjectLayout,
@@ -2552,6 +2553,36 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('sends explicit character animation background removal modes and only sends color for solid mode', async () => {
+    requestJsonMock.mockResolvedValue({
+      queueState: { operationId: 'character-removal-1', status: 'queued' },
+    });
+
+    await removeEditorCharacterAnimationBackground({
+      projectId: 'editor-project-1',
+      sourceLayerId: 'layer-sequence-1',
+      sourceResourceId: 'resource-sequence-1',
+      mode: 'solid-color',
+      screenColor: '#336699',
+    });
+    await removeEditorCharacterAnimationBackground({
+      projectId: 'editor-project-1',
+      sourceLayerId: 'layer-sequence-1',
+      sourceResourceId: 'resource-sequence-1',
+      mode: 'general',
+      screenColor: '#00FF00',
+    });
+
+    const solidBody = JSON.parse(requestJsonMock.mock.calls[0]?.[1]?.body);
+    const generalBody = JSON.parse(requestJsonMock.mock.calls[1]?.[1]?.body);
+    expect(solidBody).toMatchObject({
+      mode: 'solid-color',
+      screenColor: '#336699',
+    });
+    expect(generalBody).toMatchObject({ mode: 'general' });
+    expect(generalBody).not.toHaveProperty('screenColor');
+  });
+
   it('passes canvas completion context to background removal', async () => {
     requestJsonMock.mockResolvedValueOnce({
       queueState: {
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index e59418f3c..963b98525 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -634,10 +634,16 @@ export type EditorImageSequenceFrameResult = {
   height: number;
 };
 
+export type EditorCharacterAnimationBackgroundRemovalMode =
+  | 'solid-color'
+  | 'general';
+
 export type EditorCharacterAnimationBackgroundRemovalInput = {
   projectId: string;
   sourceLayerId: string;
   sourceResourceId: string;
+  mode: EditorCharacterAnimationBackgroundRemovalMode;
+  screenColor?: string | null;
   assetFolderId?: string | null;
   assetLabel?: string | null;
   canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
@@ -1672,6 +1678,10 @@ export async function removeEditorCharacterAnimationBackground(
       projectId: input.projectId,
       sourceLayerId: input.sourceLayerId,
       sourceResourceId: input.sourceResourceId,
+      mode: input.mode,
+      ...(input.mode === 'solid-color' && input.screenColor
+        ? { screenColor: input.screenColor }
+        : {}),
       ...(input.assetFolderId ? { assetFolderId: input.assetFolderId } : {}),
       ...(input.assetLabel ? { assetLabel: input.assetLabel } : {}),
       ...(input.canvasCompletion
-- 
2.52.0


From c59a912eef19949681dd03d4f3c6eda5c76b67a6 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Mon, 17 Aug 2026 20:16:16 +0800
Subject: [PATCH 14/15] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=8E=BB=E8=83=8C=E6=99=AF=E4=BA=A4=E4=BA=92=E4=B8=8E?=
 =?UTF-8?q?=E9=98=9F=E5=88=97=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将序列帧去背景选择框改为贴近画布的非模态悬浮窗

增加原始帧取色、实时色样与自适应方向的像素放大预览

区分提交接受状态与 durable 任务处理状态，入队成功后立即关闭悬浮窗

支持纯色键控轻微色差并补充通用模式与后端回归验证

同步更新Spine技术方案与项目决策记录
---
 .../shared-memory/decision-log.md             |   7 +-
 ...�ArtAgent多模态Spine序列帧动画生成-2026-08-10.md |  98 ++--
 packages/image-canvas-core/src/overlays.ts    |  76 +++
 .../api-server/src/editor_green_screen.rs     |  29 +
 ...mationBackgroundRemovalColorPickerModel.ts | 160 ++++++
 ...rAnimationBackgroundRemovalDialog.test.tsx |  67 ---
 ...racterAnimationBackgroundRemovalDialog.tsx | 137 -----
 ...ionBackgroundRemovalFloatingPanel.test.tsx | 191 +++++++
 ...nimationBackgroundRemovalFloatingPanel.tsx | 517 ++++++++++++++++++
 .../image-editor/ImageCanvasEditorView.tsx    | 102 ++--
 .../ImageCanvasOverlayModel.test.ts           |  29 +
 .../useImageCanvasGenerationWorkflow.test.tsx |  12 +
 .../useImageCanvasGenerationWorkflow.ts       |   4 +
 13 files changed, 1134 insertions(+), 295 deletions(-)
 create mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel.ts
 delete mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx
 delete mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx
 create mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.test.tsx
 create mode 100644 src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index ec6a14157..f28c4b6b3 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -24,7 +24,6 @@
 - 验证方式：覆盖 Codex 分类与敏感诱饵、失败事件公共摘要、最近任务与各正式卡片、game-chat 阶段记录、待核对状态、final-reply fallback 白名单及 malformed 响应完整重试；运行 Rust 定向测试、前端模型/AppSurface 定向测试、Shell typecheck、编码和 diff 门禁。
 - 关联文档：`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
 
-
 ## 2026-08-10 资源管理评审阻塞项按第二轮正式合同修复
 
 - 背景：资源管理第一轮实现后，人工验证继续暴露 WebView 默认缩放、预览队列饥饿、过滤后媒体残留播放、外层滚动串 scope、超深依赖坐标越过 Rust 上限和暂时错误无法重试等问题。部分 PRD / 技术方案仍描述第一轮的中央媒体预览、单全局 Overlay 和统一 section scope，已经与第二轮代码及验收结论冲突。
@@ -68,6 +67,7 @@
 - 替代关系：本条替代下方 2026-08-07 阶段二中“缩放只等于可视高度”和“只为完整可见卡片建立端点”的显示口径；其中曾采用的全局 SVG、四 viewport 联合 clip 和单全局 Observer 又由上方“依赖 SVG 改为分区 plane 所有”决定替代。高度模型、四分区、会话隔离、内外滚动和无布局 CAS 等其它决定继续有效。阶段一媒体卡、阶段三确定性聚类、Rust `dependencyDepths`、producer 截断降级、历史手动坐标与 type sidecar 均不变。
 - 验证方式：纯倍率模型覆盖按钮 / wheel 边界；AppSurface 覆盖项目、mode、section 隔离、普通 wheel、Ctrl wheel、WebKit gesture 与零布局写入；SVG 覆盖同 plane 倍率、橙色 marker、直线 / 小圆角横纵路由、自环间隙、双向边界继续线、分区原生裁剪、每区单 Observer、task-flow 零渲染和 4096 精确关系有界输出。
 - 关联文档：`docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md`、`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
+
 ## 2026-08-11 Tauri 无限画布以可证明事务和分类恢复收口
 
 - 终态与队列：资源编辑账本正式区分可继续阶段、`reconciliation-required`、`remote-failed` 和 `archived`。远端明确失败只保存稳定分类与终态时间，不得再 POST、轮询或重新扣费；只有该终态能由用户显式归档并移出活动恢复队列，归档保留账本且不伪装 `committed`。结果未知和需对账项继续失败关闭。
@@ -7192,7 +7192,6 @@
 - 决策：只有同一可信根 Supervisor 能调用 `agent.acceptance_update`，且该控制面动作必须独占一轮，不能夹带 `plan_update`、legacy plan 或回复。requiredEvidence 采用 `tool:<Runtime 工具名>`，合同冻结前必须命中 Runtime 允许的持久证据工具集合并拒绝拼错、控制面和纯协调工具；动态 MCP catalog 不得冻结为不可变 requiredEvidence。passed 节点必须引用当前根任务树中对应工具的真实成功动作回执；回执同时记录动作执行边界的 `projectRevisionBefore / projectRevisionAfter`，非 mutation evidence 必须满足 before、after 与验收时 current revision 完全相同，mutation evidence 的 after 必须等于 current revision，旧 revision 或执行后延迟落账的回执不可重放。failed、not-observed、缺失节点以及落后当前 project revision 的整图确认状态均阻断普通完成、finalization 与恢复。项目 revision 变化后由 Supervisor 只更新受影响节点并确认当前图，未提交的 passed 节点保持不变；Runtime 不替 Supervisor 推断影响范围、选择具体 Agent 或实现方式。
 - 决策：不可变 Goal Contract 的根 Run 收到 steer 时，必须按旧 rootRunId 串行化整个转换，并在持锁后重新确认该旧根仍是 Session 当前权威 Run，避免不同 steerId 并发创建多个 replacement。随后为绑定旧 rootRunId 的全部非终态静态、ready 和 isolated 后代写入取消栅栏、打断 Provider 并逐个收束，再终止旧根；所有项目修改入口在看到取消栅栏后立即失败关闭。Runtime 必须确认旧树所有成员都已进入终态或 `needs-reconciliation`，超时则保持等待并拒绝启动 replacement；只有旧树停稳后，才在同一 Session、source 和 Run Profile 启动新根 Run 重新理解完整目标。
 
-
 ## 2026-08-08 External v1 图片编辑来源字段允许原地收紧
 
 - 背景：图片编辑主来源已经从可由客户端提交 objectKey 和类型提示的 `sourceImageSrc / sourceResourceId / assetKind`，收紧为服务端按项目资源 ID 或素材 ID 解析权威对象与类型的必填 `sourceReferenceId`。这会让严格 External v1 客户端立即失败，属于现役版本策略明确列出的 breaking change；2026-07-31 的历史豁免不能自动覆盖本次变更。
@@ -8661,6 +8660,7 @@
 - 2026-06-19 桌面壳外链打开 helper 共用：Tauri WebView 外域拦截和 HostBridge `app.openExternalUrl` 都必须复用 `open_normalized_desktop_external_url` 执行系统外链打开动作；HostBridge 分支仍先用 `normalize_external_url` 保留 payload 错误语义并把 opener 错误回传给 H5，WebView 拦截保持 best-effort 静默处理。桌面壳配置检查会拒绝 `dispatch.rs` 直接调用 `app.opener().open_url` 绕过该 helper，避免两条离壳路径漂移。
 
 > 2026-07-18 覆盖说明：本段后续关于微信 `navigation.openNativePage`、生成结果订阅页、`[subscribe-message]` 日志和订阅页路由门禁的 2026-06 决策均已由旧创作模板退役决策废止，只作为历史记录。Expo / Tauri 的同源 H5 受控导航及微信登录、支付、分享能力继续有效。
+
 - 2026-06-20 H5 原生导航预校验：`navigateHostNativePage()` 在 `native_app` 下发送 `navigation.openNativePage` 前必须先拒绝空值、控制字符、协议相对 URL、外域绝对 URL 和非 `http:` / `https:` 协议目标；同源绝对 URL、`/path` 和保留给桌面壳兼容的相对 route 继续交给 Expo / Tauri 壳二次归一并补写宿主上下文。微信小程序分支仍按小程序页面 URL 语义走 `wx.miniProgram.navigateTo`，不套原生 App 同源 H5 预校验。根级 `npm run check:native-shells` 会反查 H5 facade 仍使用 `normalizeNativeAppPageUrl(...)` 且发送归一后的 URL，避免明显不安全目标触达原生壳。
 - 2026-06-20 微信受控原生页能力声明：微信小程序壳真实 capability profile 声明 `navigation.openNativePage`，用于承接已经登记并测试的小程序原生页 flow；当前订阅生成结果通知页通过 H5 `requestGenerationResultSubscribePermission()` 调用 `navigateHostNativePage()` 打开 `/pages/subscribe-message/index`，小程序页再调用真实 `wx.requestSubscribeMessage` 并按既有结果协议回灌。根级 `npm run check:native-shells` 必须把该能力反查到共享 profile、微信 `WECHAT_HOST_CAPABILITIES` 镜像、订阅页协议常量、H5 入口、小程序 host-bridge / shell / page 文件和相关测试；该能力不代表开放任意小程序页面跳转。
 - 2026-06-18 能力声明收紧：`packages/shared/src/contracts/hostBridge.ts` 提供 HostBridge method / capability 白名单，H5 的 `getHostRuntime()` 会解析并过滤 `hostCapabilities`；`openHostShare`、`writeHostClipboardText`、`requestHostHapticsImpact`、`setHostAppTitle`、`exportHostTextFile` 等 native 能力只在宿主声明对应 capability 后调用。发布分享弹窗只有声明 `share.open` 时才显示受控分享动作，并按 `hostShell` 区分 Expo 系统分享面板和 Tauri 剪贴板复制表达，避免旧壳或裁剪壳露出不可用入口。
@@ -14075,6 +14075,7 @@
 - 分类：内部稳定 reason code 固定为 `translation_invalid / translation_upstream_failed / translation_budget_exhausted / elevenlabs_http_failed / invalid_audio / duration_probe_failed / oss_failed / writeback_failed`。MIME、空 body 和大小归 `invalid_audio`；MP3 识别、帧读取和时长门禁归 `duration_probe_failed`。普通用户继续只读稳定短文案，不暴露 endpoint、上游正文或凭据。
 - 跨入口：画布 Agent `generate-sound-effect` 与站内 / External v1 共用 canonical Prompt、固定模型、nullable `0.5-30` 小数时长和 Loop；省略 duration 为手动 `5s`，显式 null 为自动。SFX 参数解析必须保留该 null，不能被通用 null-default 兼容层改写。最终仍进入相同 `editor_sound_effect_generation` queue payload，不新增 Agent 专属链路。
 - 发布边界：T6 工程实施和 mock / loopback 门禁不等于真实 provider 或生产验收。发布前关闭 SFX 入队，使用显式 `--server` / `--server-url` 只读查询 `external_generation_job` 中 pending / running 的 `editor_sound_effect_generation`，清零后按 api-server / Worker → Web 顺序部署并灰度；禁止 `--root-dir`、删除任务伪造 drain 或自动回退 Vidu。本次没有 SpacetimeDB schema、migration 或 bindings 变更。
+
 ## 2026-08-06 编辑器生成结果使用 durable receipt 与统一原子提交
 
 - 背景：图片、改图、去背景、图集 / UI 多产物、角色动作、视频、音效和背景音乐在 OSS 结果可用后，仍分段 confirm object、创建 project resource / account asset、保存 canvas 和 complete job。任一中间失败都会留下部分业务事实；只把 `external_generation_job` 当 operation journal 又无法覆盖无 job 的 inline，也无法独立证明某批 resource/asset/canvas 已作为一笔提交完成。
@@ -14189,6 +14190,6 @@
 ## 2026-08-17 Spine 视频转换去背景改为显式双模式
 
 - 背景：仅凭 `generationInputs.action = character-animation.convert` 无法证明源视频是绿幕；把任意转换结果固定按 `#00FF00` 键控会误处理普通背景或绿色主体。仓库已有 BgFilter `complex + birefnet` 通用分割服务，也已有可传 `screen_color` 的 flat 协议，但纯色场景不需要承担外部服务成本。
-- 决策：只有视频直接转换序列继续显示“去背景”，点击后必须在独立弹窗显式选择 `solid-color` 或 `general`。纯色模式默认 `#00FF00`，允许颜色输入及浏览器吸管，后端使用参数化本地键色算法；通用模式逐帧调用 BgFilter complex，不携带键色。HTTP 入队和 durable worker 共用白名单校验，后端在结果 `generationInputs` 中权威记录模式、颜色或 Provider/model，不能再把“视频转换”本身当作绿幕证明。两种模式仍生成新序列资源、整批失败关闭并保留源序列。
+- 决策：只有视频直接转换序列继续显示“去背景”，点击后必须在当前选中序列帧旁的非模态悬浮窗中显式选择 `solid-color` 或 `general`；悬浮窗随画布平移和缩放更新位置，优先置于右侧并在空间不足时翻转，不增加画布遮罩、不覆盖源画面，纯色模式不使用系统吸管；内置逐帧 viewer 从正式 objectKey 读取原始帧字节，按原始比例实际绘制，且仅在可见图像区域内采样。用户悬停时实时显示原始像素色样与 11×11 放大网格，点击才回填键色，以消除容器留白和 CSS 缩放导致的取色位移。纯色模式默认 `#00FF00`，允许颜色输入及逐帧 viewer 原始像素取样；后端使用参数化本地键色算法，对轻微压缩噪声和接近键色的平缓色差有容忍度，但不承诺处理明显渐变、阴影、纹理或与主体相近的背景，后者应选择 `general`。通用模式逐帧调用 BgFilter complex，不携带键色。悬浮窗的“提交中”只表示 HTTP 入队请求，服务端接受任务后立即关闭悬浮窗，由画布生成占位和任务列表承接 durable worker 的后续状态；HTTP 提交失败则保留悬浮窗并恢复可重试状态。HTTP 入队和 durable worker 共用白名单校验，后端在结果 `generationInputs` 中权威记录模式、颜色或 Provider/model，不能再把“视频转换”本身当作绿幕证明。两种模式仍生成新序列资源、整批失败关闭并保留源序列。
 - 费用边界：本次沿用现有手动 BgFilter 的 0 泥点内部契约；供应商成本不等于已确定的用户泥点售价，在没有正式定价决策时不自行新增价格。若后续收费，必须接入统一后端定价、入队冻结价格和 worker 扣费退款链路。
 - 验证：覆盖缺失/非法纯色、通用模式禁止颜色、任意键色透传、绿色主体在非绿色键色下保留、双模式 worker 路由、前端模式选择及吸管回填，并运行角色动作 Rust 定向测试、前端 Vitest、类型检查、编码和 diff 门禁。
diff --git a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
index d42b6f366..b29f290c8 100644
--- a/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
+++ b/docs/technical/【技术方案】ArtAgent多模态Spine序列帧动画生成-2026-08-10.md
@@ -107,21 +107,21 @@ manifest.txt
 
 主要文件：
 
-| 责任 | 当前文件 |
-| --- | --- |
-| 画布工具类型和状态 | `src/components/image-editor/ImageCanvasEditorTypes.ts` |
-| 底部工具栏 | `src/components/image-editor/ImageCanvasBottomToolbarView.tsx` |
-| 生成 Dialog 草稿和恢复 | `src/components/image-editor/ImageCanvasGenerationDialogModel.ts` |
-| 生成 Composer | `src/components/image-editor/ImageCanvasGenerationComposerView.tsx` |
-| 角色动作专用旧面板 | `src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx` |
-| 提交计划与前端校验 | `src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts` |
-| 画布选取与改造恢复 | `src/components/image-editor/useImageCanvasGenerationWorkflow.ts` |
-| 上传图片/视频 | `src/components/image-editor/useImageCanvasUploadWorkflow.ts` |
-| 提交、队列和回填 | `src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts` |
-| API Client 和前端 DTO | `src/services/image-editor/editorProjectClient.ts` |
-| 序列帧播放 | `src/components/image-editor/ImageCanvasWorldView.tsx` |
-| 元数据 | `src/components/image-editor/ImageCanvasMetadataModalView.tsx` |
-| ZIP / Spine JSON | `ImageCanvasExportModel.ts`、`useImageCanvasAssetExportWorkflow.ts` |
+| 责任                   | 当前文件                                                                    |
+| ---------------------- | --------------------------------------------------------------------------- |
+| 画布工具类型和状态     | `src/components/image-editor/ImageCanvasEditorTypes.ts`                     |
+| 底部工具栏             | `src/components/image-editor/ImageCanvasBottomToolbarView.tsx`              |
+| 生成 Dialog 草稿和恢复 | `src/components/image-editor/ImageCanvasGenerationDialogModel.ts`           |
+| 生成 Composer          | `src/components/image-editor/ImageCanvasGenerationComposerView.tsx`         |
+| 角色动作专用旧面板     | `src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx`    |
+| 提交计划与前端校验     | `src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts`       |
+| 画布选取与改造恢复     | `src/components/image-editor/useImageCanvasGenerationWorkflow.ts`           |
+| 上传图片/视频          | `src/components/image-editor/useImageCanvasUploadWorkflow.ts`               |
+| 提交、队列和回填       | `src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts` |
+| API Client 和前端 DTO  | `src/services/image-editor/editorProjectClient.ts`                          |
+| 序列帧播放             | `src/components/image-editor/ImageCanvasWorldView.tsx`                      |
+| 元数据                 | `src/components/image-editor/ImageCanvasMetadataModalView.tsx`              |
+| ZIP / Spine JSON       | `ImageCanvasExportModel.ts`、`useImageCanvasAssetExportWorkflow.ts`         |
 
 通用视频面板已经提供“参考”控件，支持：
 
@@ -230,21 +230,21 @@ flowchart LR
 
 ## 5. 与本次需求的差距
 
-| 需求 | 当前能力 | 结论 |
-| --- | --- | --- |
-| 工具栏在视频后新增入口 | 当前已有角色图 `生成动画` 快捷入口 | 新增底部通用入口并复用同一 dialog |
-| 纯文本生成 | 当前必须有角色源图 | 需要扩展后端 T2V |
-| 图片 + 文本 | 已实现角色立绘图生视频再抽帧 | 主要复用 |
-| 已有序列帧改造 | 仅有部分恢复/首帧能力，来源语义不完整 | 需要明确输入形态并补全 |
-| 视频 + 文本 | 通用视频支持参考视频，角色动作链未接入 | 需要扩展 |
-| 参考支持画布/上传图片视频 | 通用视频面板已经实现 | 复用并收窄规则 |
-| 白/绿/蓝/紫背景 | 当前角色动作使用自动安全色，不是这四个纯色 | 需要专用枚举和提示词 |
-| 动作“更多”逐行展开 | 当前只有固定 7 个预设 | 需要前端扩展 |
-| 1080p | Fast 前后端均不支持 | 暂不开放 |
-| 40 泥点/次 | 当前 480p × 4 秒恰好为 40；其他组合不同 | 需确认固定价还是按秒价 |
-| 去背景 | AI 生成链自动透明化；直接转换保留背景 | 保留零泥点手动派生任务 |
-| 拆帧生成单 PNG | 帧对象已有，但没有全部登记为独立账号素材 | 可复用对象、补资产绑定 |
-| ZIP 下载 | 已完成且匹配附件 | 不重做 |
+| 需求                      | 当前能力                                   | 结论                              |
+| ------------------------- | ------------------------------------------ | --------------------------------- |
+| 工具栏在视频后新增入口    | 当前已有角色图 `生成动画` 快捷入口         | 新增底部通用入口并复用同一 dialog |
+| 纯文本生成                | 当前必须有角色源图                         | 需要扩展后端 T2V                  |
+| 图片 + 文本               | 已实现角色立绘图生视频再抽帧               | 主要复用                          |
+| 已有序列帧改造            | 仅有部分恢复/首帧能力，来源语义不完整      | 需要明确输入形态并补全            |
+| 视频 + 文本               | 通用视频支持参考视频，角色动作链未接入     | 需要扩展                          |
+| 参考支持画布/上传图片视频 | 通用视频面板已经实现                       | 复用并收窄规则                    |
+| 白/绿/蓝/紫背景           | 当前角色动作使用自动安全色，不是这四个纯色 | 需要专用枚举和提示词              |
+| 动作“更多”逐行展开        | 当前只有固定 7 个预设                      | 需要前端扩展                      |
+| 1080p                     | Fast 前后端均不支持                        | 暂不开放                          |
+| 40 泥点/次                | 当前 480p × 4 秒恰好为 40；其他组合不同    | 需确认固定价还是按秒价            |
+| 去背景                    | AI 生成链自动透明化；直接转换保留背景      | 保留零泥点手动派生任务            |
+| 拆帧生成单 PNG            | 帧对象已有，但没有全部登记为独立账号素材   | 可复用对象、补资产绑定            |
+| ZIP 下载                  | 已完成且匹配附件                           | 不重做                            |
 
 ## 6. 目标业务模型
 
@@ -335,20 +335,20 @@ video = 一段视频作为动作/外观参考
 
 三模态所需事实已经能放入现有字段：
 
-| 事实 | 存放位置 |
-| --- | --- |
-| 输入模式 | `generation_inputs_json.fields[inputMode]` |
-| 用户动作描述 | `generation_inputs_json.fields[prompt]` |
-| 动作预设 | `generation_inputs_json.fields[actionPreset]` |
-| 背景色 | `generation_inputs_json.fields[backgroundColor]` |
-| 清晰度/比例/时长/帧数 | `generation_inputs_json.fields[...]` |
-| 参考素材 | `generation_inputs_json.references`（稳定 resource/asset ID） |
-| 实际模型提示词 | `actual_prompt` |
-| 模型、provider、task | 现有列 |
-| 帧顺序和对象 | `image_sequence_frames_json` |
-| 总时长 | `image_sequence_duration_ms` |
-| 单帧尺寸 | `width/height` |
-| 来源链 | `source_resource_id` |
+| 事实                  | 存放位置                                                      |
+| --------------------- | ------------------------------------------------------------- |
+| 输入模式              | `generation_inputs_json.fields[inputMode]`                    |
+| 用户动作描述          | `generation_inputs_json.fields[prompt]`                       |
+| 动作预设              | `generation_inputs_json.fields[actionPreset]`                 |
+| 背景色                | `generation_inputs_json.fields[backgroundColor]`              |
+| 清晰度/比例/时长/帧数 | `generation_inputs_json.fields[...]`                          |
+| 参考素材              | `generation_inputs_json.references`（稳定 resource/asset ID） |
+| 实际模型提示词        | `actual_prompt`                                               |
+| 模型、provider、task  | 现有列                                                        |
+| 帧顺序和对象          | `image_sequence_frames_json`                                  |
+| 总时长                | `image_sequence_duration_ms`                                  |
+| 单帧尺寸              | `width/height`                                                |
+| 来源链                | `source_resource_id`                                          |
 
 不建议给 `editor_project_resource` 或 `editor_asset` 新增 `input_mode/background_color/fps/frame_count` 列：
 
@@ -603,11 +603,11 @@ flowchart TD
 
 #### 去背景
 
-AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。只有 `character-animation.convert` 的视频直接转换结果提供 `去背景`；AI 生成的序列帧已自动完成去背景，不展示也不接受重复处理。`character-animation` 浮动工具栏在适用时提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后弹出独立选择框，用户必须显式选择处理方式，再进入现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
+AI 生成链默认逐帧去背景，视频直接转换固定保留源背景。只有 `character-animation.convert` 的视频直接转换结果提供 `去背景`；AI 生成的序列帧已自动完成去背景，不展示也不接受重复处理。`character-animation` 浮动工具栏在适用时提供 `去背景`，与 `改造 / 拆帧 / 下载` 并列；点击后在当前选中序列帧旁打开非模态悬浮窗；悬浮窗随画布平移和缩放更新位置，优先置于画面右侧、空间不足时翻转到其它可用侧，不增加画布遮罩或覆盖源画面；纯色模式内置逐帧 viewer，从正式 objectKey 读取原始帧字节。viewer 以原始比例实际绘制帧，鼠标仅在图像可见区域内采样；悬停实时显示原始像素颜色与放大网格，点击后才回填键色，避免容器留白或 CSS 缩放导致取样偏移。用户必须显式选择处理方式，再进入现有 durable 派生任务，不得把序列第一帧当普通图片处理。派生任务保持以下边界：
 
-- `solid-color` 为本地纯色键控，默认 `#00FF00`，允许颜色输入和浏览器吸管选择任意 `#RRGGBB`；该模式不调用 BgFilter、阿里云或其它外部模型。
+- `solid-color` 为本地纯色键控，默认 `#00FF00`，允许颜色输入和逐帧 viewer 原始像素取样选择任意 `#RRGGBB`；本地算法容忍轻微压缩噪声和接近键色的平缓色差，但不承诺处理明显渐变、阴影、纹理或与主体接近的背景，此类输入应选 `general`；该模式不调用 BgFilter、阿里云或其它外部模型。
 - `general` 为通用智能分割，不携带 `screenColor`，逐帧调用 BgFilter `complex + birefnet`；普通背景不再被隐式当作绿幕处理。当前内部接口沿用现有手动 BgFilter 的 0 泥点契约，不在缺少正式定价决策时自行发明用户收费金额；外部供应商成本与后续用户定价另行配置。
-- 前端只负责显式选择；HTTP 入队与 durable worker 共用白名单校验：纯色模式必须携带合法颜色，通用模式禁止携带颜色。worker 只读取已持久化任务参数，最终资源的 `generationInputs` 由后端写入模式、键色或 Provider/model，不信任客户端自报配方。
+- 前端只负责显式选择；HTTP 入队与 durable worker 共用白名单校验：纯色模式必须携带合法颜色，通用模式禁止携带颜色。worker 只读取已持久化任务参数，最终资源的 `generationInputs` 由后端写入模式、键色或 Provider/model，不信任客户端自报配方。悬浮窗的“提交中”只覆盖 HTTP 入队请求；服务端接受任务后立即关闭悬浮窗并交给画布生成占位/任务列表展示后续进度，不能把 durable worker 的完整处理时间继续显示为提交中。HTTP 提交失败时保留悬浮窗并恢复可重试状态。
 - 原始不透明序列与透明序列是两个正式 resource；
 - 去背景全帧成功后一次性发布新的 `character-animation` / `image-sequence` 资源、素材和画布图层，保留原始序列图层不被替换；
 - 任一帧失败不产生残缺结果；
@@ -708,6 +708,7 @@ idle
 ### P0：会改变架构或成本
 
 1. **视频模式到底是哪一种？**
+
    - A：原视频直接逐帧转 PNG，不调用 Seedance；
    - B：用视频 + 文本生成新视频（换皮/改造），再抽新视频；
    - C：两种都要，由用户选择“直接转换/AI 改造”。
@@ -729,6 +730,7 @@ idle
 5. **1080p 是否允许换模型？**
 
    当前 `seedance2.0-fast` 明确不支持 1080p。可选：
+
    - 暂不显示（推荐）；
    - 1080p 自动切换 Seedance 2.0 标准版并重新定价；
    - 等 provider Fast 真正支持后再开放。
@@ -736,6 +738,7 @@ idle
 ### P1：会改变交互或数据语义
 
 6. **“已有 Spine 序列帧 png 图片”指什么？**
+
    - 已有 `character-animation` 帧集；
    - 一张拼好的 Sprite Sheet PNG；
    - 任意单张角色 PNG。
@@ -755,6 +758,7 @@ idle
    需要确定值，例如纯蓝 `#0000FF`、纯紫 `#8000FF`；抠图必须用确定 RGB，不能只存“蓝色/紫色”。还要确认主体颜色与键色冲突时是阻止提交、警告，还是自动换色。
 
 10. **拆帧后去哪里？**
+
     - 只进入素材库（推荐）；
     - 自动铺到画布；
     - 弹出独立图片集面板；
diff --git a/packages/image-canvas-core/src/overlays.ts b/packages/image-canvas-core/src/overlays.ts
index 65d7276d0..e453d6d60 100644
--- a/packages/image-canvas-core/src/overlays.ts
+++ b/packages/image-canvas-core/src/overlays.ts
@@ -100,6 +100,82 @@ export function resolveSelectedToolbarStyle({
   };
 }
 
+export function resolveCharacterAnimationBackgroundRemovalPanelStyle({
+  sourceLayer,
+  viewport,
+  canvasSize,
+}: {
+  sourceLayer: CanvasLayer | null;
+  viewport: CanvasViewport;
+  canvasSize: CanvasSize;
+}): CanvasOverlayStyle | null {
+  if (!sourceLayer) {
+    return null;
+  }
+
+  const panelWidth = 288;
+  const panelHeight = 440;
+  const gap = 12;
+  const edge = 12;
+  const sourceLeft = viewport.x + sourceLayer.x * viewport.scale;
+  const sourceTop = viewport.y + sourceLayer.y * viewport.scale;
+  const sourceWidth = sourceLayer.width * viewport.scale;
+  const sourceHeight = sourceLayer.height * viewport.scale;
+  const sourceRight = sourceLeft + sourceWidth;
+  const sourceBottom = sourceTop + sourceHeight;
+  const clampPanelLeft = (left: number) =>
+    Math.min(Math.max(edge, left), Math.max(edge, canvasSize.width - panelWidth - edge));
+  const clampPanelTop = (top: number) =>
+    Math.min(Math.max(edge, top), Math.max(edge, canvasSize.height - panelHeight - edge));
+
+  const rightLeft = sourceRight + gap;
+  if (rightLeft + panelWidth <= canvasSize.width - edge) {
+    return { left: rightLeft, top: clampPanelTop(sourceTop) };
+  }
+
+  const leftLeft = sourceLeft - gap - panelWidth;
+  if (leftLeft >= edge) {
+    return { left: leftLeft, top: clampPanelTop(sourceTop) };
+  }
+
+  const bottomTop = sourceBottom + gap;
+  if (bottomTop + panelHeight <= canvasSize.height - edge) {
+    return {
+      left: clampPanelLeft(sourceLeft + sourceWidth / 2 - panelWidth / 2),
+      top: bottomTop,
+    };
+  }
+
+  const topTop = sourceTop - gap - panelHeight;
+  if (topTop >= edge) {
+    return {
+      left: clampPanelLeft(sourceLeft + sourceWidth / 2 - panelWidth / 2),
+      top: topTop,
+    };
+  }
+
+  // 极端缩放下四侧都放不下完整面板时，仍把面板放在可用空间最大的一侧，
+  // 保证它不覆盖源画面；viewport 会裁掉越界部分，用户可先缩小画布继续操作。
+  const availableSides = [
+    { space: canvasSize.width - sourceRight, left: rightLeft, top: clampPanelTop(sourceTop) },
+    { space: sourceLeft, left: leftLeft, top: clampPanelTop(sourceTop) },
+    {
+      space: canvasSize.height - sourceBottom,
+      left: clampPanelLeft(sourceLeft + sourceWidth / 2 - panelWidth / 2),
+      top: bottomTop,
+    },
+    {
+      space: sourceTop,
+      left: clampPanelLeft(sourceLeft + sourceWidth / 2 - panelWidth / 2),
+      top: topTop,
+    },
+  ];
+  const bestSide = availableSides.reduce((best, candidate) =>
+    candidate.space > best.space ? candidate : best,
+  );
+  return { left: bestSide.left, top: bestSide.top };
+}
+
 export function resolveQuickEditFocusViewport({
   sourceLayer,
   canvasSize,
diff --git a/server-rs/crates/api-server/src/editor_green_screen.rs b/server-rs/crates/api-server/src/editor_green_screen.rs
index c7ab30e53..9bdfdf87c 100644
--- a/server-rs/crates/api-server/src/editor_green_screen.rs
+++ b/server-rs/crates/api-server/src/editor_green_screen.rs
@@ -316,6 +316,35 @@ mod tests {
         assert_eq!(image.get_pixel(1, 1).0, [255, 255, 255, 255]);
     }
 
+    #[test]
+    fn character_animation_solid_color_removal_tolerates_small_background_color_variation() {
+        let key = [72, 161, 224];
+        let mut source = RgbaImage::from_pixel(9, 9, Rgba([82, 151, 229, 255]));
+        source.put_pixel(0, 0, Rgba([65, 168, 217, 255]));
+        source.put_pixel(4, 4, Rgba([232, 52, 48, 255]));
+        let mut bytes = Vec::new();
+        DynamicImage::ImageRgba8(source)
+            .write_to(&mut Cursor::new(&mut bytes), ImageFormat::Png)
+            .expect("test PNG should encode");
+
+        let output = remove_editor_character_animation_solid_color_background(
+            &DownloadedOpenAiImage {
+                bytes,
+                mime_type: "image/png".to_string(),
+                extension: "png".to_string(),
+            },
+            key,
+        )
+        .expect("near-key solid background should be removed");
+        let image = image::load_from_memory(output.bytes.as_slice())
+            .expect("output PNG should decode")
+            .to_rgba8();
+
+        assert_eq!(image.get_pixel(0, 0).0[3], 0);
+        assert_eq!(image.get_pixel(8, 8).0[3], 0);
+        assert_eq!(image.get_pixel(4, 4).0, [232, 52, 48, 255]);
+    }
+
     #[test]
     fn character_animation_custom_key_color_preserves_green_foreground() {
         let mut source = RgbaImage::from_pixel(3, 3, Rgba([0, 0, 255, 255]));
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel.ts b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel.ts
new file mode 100644
index 000000000..61804c8dd
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel.ts
@@ -0,0 +1,160 @@
+export type FrameCanvasPoint = {
+  x: number;
+  y: number;
+};
+
+export type FrameCanvasColor = {
+  red: number;
+  green: number;
+  blue: number;
+};
+
+/**
+ * 将指针位置映射到实际绘制出的预览 canvas，而非外层容器。
+ * 超出 canvas 可见像素区域时不取样，避免把边缘颜色误当作背景色。
+ */
+export function resolveFrameCanvasSamplePoint({
+  clientX,
+  clientY,
+  rect,
+  imageWidth,
+  imageHeight,
+}: {
+  clientX: number;
+  clientY: number;
+  rect: Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+  imageWidth: number;
+  imageHeight: number;
+}): FrameCanvasPoint | null {
+  if (
+    rect.width <= 0 ||
+    rect.height <= 0 ||
+    imageWidth <= 0 ||
+    imageHeight <= 0
+  ) {
+    return null;
+  }
+
+  const relativeX = clientX - rect.left;
+  const relativeY = clientY - rect.top;
+  if (
+    relativeX < 0 ||
+    relativeY < 0 ||
+    relativeX >= rect.width ||
+    relativeY >= rect.height
+  ) {
+    return null;
+  }
+
+  return {
+    x: Math.min(
+      imageWidth - 1,
+      Math.floor((relativeX / rect.width) * imageWidth),
+    ),
+    y: Math.min(
+      imageHeight - 1,
+      Math.floor((relativeY / rect.height) * imageHeight),
+    ),
+  };
+}
+
+export function formatFrameCanvasColorHex({
+  red,
+  green,
+  blue,
+}: FrameCanvasColor) {
+  return `#${[red, green, blue]
+    .map((channel) =>
+      Math.max(0, Math.min(255, channel)).toString(16).padStart(2, '0'),
+    )
+    .join('')}`.toUpperCase();
+}
+
+export function resolveFrameColorMagnifierSourcePoint({
+  point,
+  offsetX,
+  offsetY,
+  imageWidth,
+  imageHeight,
+}: {
+  point: FrameCanvasPoint;
+  offsetX: number;
+  offsetY: number;
+  imageWidth: number;
+  imageHeight: number;
+}): FrameCanvasPoint | null {
+  if (imageWidth <= 0 || imageHeight <= 0) {
+    return null;
+  }
+  return {
+    x: Math.min(imageWidth - 1, Math.max(0, point.x + offsetX)),
+    y: Math.min(imageHeight - 1, Math.max(0, point.y + offsetY)),
+  };
+}
+
+export type FrameColorMagnifierPlacement = {
+  left: number;
+  top: number;
+  horizontal: 'left' | 'right';
+  vertical: 'top' | 'bottom';
+};
+
+/**
+ * 放大镜始终置于指针的对角可用区域：优先沿当前可用边，空间不足即翻转。
+ * 这样即使用户停在预览边缘，放大镜也不会覆盖正在取样的像素。
+ */
+export function resolveFrameColorMagnifierPlacement({
+  pointerLeft,
+  pointerTop,
+  previewWidth,
+  previewHeight,
+  magnifierSize,
+  gap = 12,
+  edge = 4,
+}: {
+  pointerLeft: number;
+  pointerTop: number;
+  previewWidth: number;
+  previewHeight: number;
+  magnifierSize: number;
+  gap?: number;
+  edge?: number;
+}): FrameColorMagnifierPlacement | null {
+  if (previewWidth <= 0 || previewHeight <= 0 || magnifierSize <= 0) {
+    return null;
+  }
+
+  const roomRight = previewWidth - pointerLeft - gap - edge;
+  const roomLeft = pointerLeft - gap - edge;
+  const horizontal =
+    roomRight >= magnifierSize || roomRight >= roomLeft ? 'right' : 'left';
+  const roomBottom = previewHeight - pointerTop - gap - edge;
+  const roomTop = pointerTop - gap - edge;
+  const vertical =
+    roomBottom >= magnifierSize || roomBottom >= roomTop ? 'bottom' : 'top';
+  const maxLeft = Math.max(edge, previewWidth - magnifierSize - edge);
+  const maxTop = Math.max(edge, previewHeight - magnifierSize - edge);
+
+  return {
+    horizontal,
+    vertical,
+    left: Math.min(
+      maxLeft,
+      Math.max(
+        edge,
+        horizontal === 'right'
+          ? pointerLeft + gap
+          : pointerLeft - gap - magnifierSize,
+      ),
+    ),
+    top: Math.min(
+      maxTop,
+      Math.max(
+        edge,
+        vertical === 'bottom'
+          ? pointerTop + gap
+          : pointerTop - gap - magnifierSize,
+      ),
+    ),
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx
deleted file mode 100644
index 82346227a..000000000
--- a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.test.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/* @vitest-environment jsdom */
-
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useState } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import type { EditorCharacterAnimationBackgroundRemovalMode } from '../../services/image-editor/editorProjectClient';
-import { ImageCanvasCharacterAnimationBackgroundRemovalDialog } from './ImageCanvasCharacterAnimationBackgroundRemovalDialog';
-
-function DialogHarness({ onConfirm = vi.fn() }: { onConfirm?: () => void }) {
-  const [mode, setMode] =
-    useState<EditorCharacterAnimationBackgroundRemovalMode>('solid-color');
-  const [screenColor, setScreenColor] = useState('#00FF00');
-
-  return (
-    <ImageCanvasCharacterAnimationBackgroundRemovalDialog
-      open
-      mode={mode}
-      screenColor={screenColor}
-      onModeChange={setMode}
-      onScreenColorChange={setScreenColor}
-      onClose={vi.fn()}
-      onConfirm={onConfirm}
-    />
-  );
-}
-
-afterEach(() => {
-  delete (window as typeof window & { EyeDropper?: unknown }).EyeDropper;
-});
-
-describe('ImageCanvasCharacterAnimationBackgroundRemovalDialog', () => {
-  it('requires an explicit pure-color or general mode selection', () => {
-    const onConfirm = vi.fn();
-    render(<DialogHarness onConfirm={onConfirm} />);
-
-    expect(
-      (screen.getByRole('radio', { name: /纯色背景抠图/ }) as HTMLInputElement)
-        .checked,
-    ).toBe(true);
-    expect(
-      (screen.getByLabelText('纯色背景颜色') as HTMLInputElement).value,
-    ).toBe('#00ff00');
-
-    fireEvent.click(screen.getByRole('radio', { name: /通用智能抠图/ }));
-    expect(screen.queryByLabelText('纯色背景颜色')).toBeNull();
-    fireEvent.click(screen.getByRole('button', { name: '开始处理' }));
-    expect(onConfirm).toHaveBeenCalledTimes(1);
-  });
-
-  it('uses the browser eyedropper result as the solid background color', async () => {
-    const open = vi.fn().mockResolvedValue({ sRGBHex: '#336699' });
-    (window as typeof window & { EyeDropper?: unknown }).EyeDropper = class {
-      open = open;
-    };
-    render(<DialogHarness />);
-
-    fireEvent.click(screen.getByRole('button', { name: '吸取画布颜色' }));
-
-    await waitFor(() =>
-      expect(
-        (screen.getByLabelText('纯色背景颜色') as HTMLInputElement).value,
-      ).toBe('#336699'),
-    );
-    expect(open).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx
deleted file mode 100644
index beee18158..000000000
--- a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalDialog.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import type { EditorCharacterAnimationBackgroundRemovalMode } from '../../services/image-editor/editorProjectClient';
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import { UnifiedConfirmDialog } from '../common/UnifiedConfirmDialog';
-
-type EyeDropperConstructor = new () => {
-  open: () => Promise<{ sRGBHex: string }>;
-};
-
-type ImageCanvasCharacterAnimationBackgroundRemovalDialogProps = {
-  open: boolean;
-  mode: EditorCharacterAnimationBackgroundRemovalMode;
-  screenColor: string;
-  busy?: boolean;
-  onModeChange: (mode: EditorCharacterAnimationBackgroundRemovalMode) => void;
-  onScreenColorChange: (screenColor: string) => void;
-  onClose: () => void;
-  onConfirm: () => void;
-};
-
-function resolveEyeDropper() {
-  return (window as typeof window & { EyeDropper?: EyeDropperConstructor })
-    .EyeDropper;
-}
-
-export function ImageCanvasCharacterAnimationBackgroundRemovalDialog({
-  open,
-  mode,
-  screenColor,
-  busy = false,
-  onModeChange,
-  onScreenColorChange,
-  onClose,
-  onConfirm,
-}: ImageCanvasCharacterAnimationBackgroundRemovalDialogProps) {
-  const [isPickingColor, setIsPickingColor] = useState(false);
-  const pickScreenColor = useCallback(async () => {
-    const EyeDropper = resolveEyeDropper();
-    if (!EyeDropper || isPickingColor) {
-      return;
-    }
-    setIsPickingColor(true);
-    try {
-      const result = await new EyeDropper().open();
-      if (/^#[0-9a-f]{6}$/i.test(result.sRGBHex)) {
-        onScreenColorChange(result.sRGBHex.toUpperCase());
-      }
-    } catch {
-      // 用户取消系统吸管不属于错误，保持当前颜色即可。
-    } finally {
-      setIsPickingColor(false);
-    }
-  }, [isPickingColor, onScreenColorChange]);
-
-  return (
-    <UnifiedConfirmDialog
-      open={open}
-      title="序列帧去背景"
-      onClose={onClose}
-      onConfirm={onConfirm}
-      confirmLabel="开始处理"
-      busy={busy}
-      busyConfirmLabel="提交中"
-      confirmDisabled={
-        mode === 'solid-color' && !/^#[0-9A-F]{6}$/i.test(screenColor)
-      }
-      showCancel
-      size="md"
-      panelClassName="platform-remap-surface"
-    >
-      <fieldset className="grid gap-3" aria-label="去背景方式">
-        <label className="flex cursor-pointer gap-3 rounded-xl border border-[var(--platform-border-soft)] p-3">
-          <input
-            type="radio"
-            name="character-animation-background-removal-mode"
-            value="solid-color"
-            checked={mode === 'solid-color'}
-            disabled={busy}
-            onChange={() => onModeChange('solid-color')}
-          />
-          <span>
-            <span className="block font-medium">纯色背景抠图</span>
-            <span className="block text-xs text-[var(--platform-text-muted)]">
-              使用本地键色算法
-            </span>
-          </span>
-        </label>
-        <label className="flex cursor-pointer gap-3 rounded-xl border border-[var(--platform-border-soft)] p-3">
-          <input
-            type="radio"
-            name="character-animation-background-removal-mode"
-            value="general"
-            checked={mode === 'general'}
-            disabled={busy}
-            onChange={() => onModeChange('general')}
-          />
-          <span>
-            <span className="block font-medium">通用智能抠图</span>
-            <span className="block text-xs text-[var(--platform-text-muted)]">
-              逐帧调用智能分割服务
-            </span>
-          </span>
-        </label>
-      </fieldset>
-
-      {mode === 'solid-color' ? (
-        <div className="mt-4 flex flex-wrap items-center gap-3">
-          <label className="flex items-center gap-2 text-sm font-medium">
-            背景色
-            <input
-              type="color"
-              aria-label="纯色背景颜色"
-              value={screenColor}
-              disabled={busy}
-              onChange={(event) =>
-                onScreenColorChange(event.currentTarget.value.toUpperCase())
-              }
-              className="h-9 w-12 cursor-pointer rounded border border-[var(--platform-border-soft)] bg-transparent p-0.5"
-            />
-          </label>
-          <code className="text-xs">{screenColor}</code>
-          <PlatformActionButton
-            type="button"
-            tone="secondary"
-            size="xs"
-            shape="pill"
-            disabled={busy || isPickingColor || !resolveEyeDropper()}
-            onClick={() => void pickScreenColor()}
-          >
-            {isPickingColor ? '取色中' : '吸取画布颜色'}
-          </PlatformActionButton>
-        </div>
-      ) : null}
-    </UnifiedConfirmDialog>
-  );
-}
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.test.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.test.tsx
new file mode 100644
index 000000000..562d61211
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.test.tsx
@@ -0,0 +1,191 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type {
+  EditorCharacterAnimationBackgroundRemovalMode,
+  EditorImageSequenceFrameResult,
+} from '../../services/image-editor/editorProjectClient';
+import {
+  formatFrameCanvasColorHex,
+  resolveFrameCanvasSamplePoint,
+  resolveFrameColorMagnifierPlacement,
+  resolveFrameColorMagnifierSourcePoint,
+} from './ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel';
+import { ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel } from './ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel';
+
+const frames: EditorImageSequenceFrameResult[] = [
+  {
+    imageSrc: '/generated-images/editor/frame-001.png',
+    objectKey: 'generated-images/editor/frame-001.png',
+    width: 320,
+    height: 240,
+  },
+  {
+    imageSrc: '/generated-images/editor/frame-002.png',
+    objectKey: 'generated-images/editor/frame-002.png',
+    width: 320,
+    height: 240,
+  },
+];
+
+function FloatingPanelHarness({
+  onConfirm = vi.fn(),
+}: {
+  onConfirm?: () => void;
+}) {
+  const [mode, setMode] =
+    useState<EditorCharacterAnimationBackgroundRemovalMode>('solid-color');
+  const [screenColor, setScreenColor] = useState('#00FF00');
+
+  return (
+    <ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel
+      open
+      style={{ left: 352, top: 96 }}
+      frames={frames}
+      mode={mode}
+      screenColor={screenColor}
+      onModeChange={setMode}
+      onScreenColorChange={setScreenColor}
+      onClose={vi.fn()}
+      onConfirm={onConfirm}
+    />
+  );
+}
+
+describe('ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel', () => {
+  it('requires an explicit pure-color or general mode selection', () => {
+    const onConfirm = vi.fn();
+    render(<FloatingPanelHarness onConfirm={onConfirm} />);
+
+    const panel = screen.getByRole('dialog', { name: '序列帧去背景' });
+    expect(panel.getAttribute('aria-modal')).toBe('false');
+    expect(panel.className).toContain('absolute');
+    expect(panel.className).toContain('bg-white');
+    expect(panel.style.left).toBe('352px');
+    expect(panel.style.top).toBe('96px');
+
+    expect(
+      (screen.getByRole('radio', { name: /纯色背景抠图/ }) as HTMLInputElement)
+        .checked,
+    ).toBe(true);
+    expect(screen.getByLabelText('序列帧像素取色预览')).toBeTruthy();
+    expect(screen.getByText('悬停预览，点击取色')).toBeTruthy();
+    expect(screen.getByLabelText('选择序列帧')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('radio', { name: /通用智能抠图/ }));
+    expect(screen.queryByLabelText('序列帧像素取色预览')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '开始处理' }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('maps a rendered preview click back to the original frame pixel', () => {
+    expect(
+      resolveFrameCanvasSamplePoint({
+        clientX: 110,
+        clientY: 70,
+        rect: { left: 10, top: 20, width: 200, height: 100 },
+        imageWidth: 800,
+        imageHeight: 400,
+      }),
+    ).toEqual({ x: 400, y: 200 });
+
+    expect(
+      resolveFrameCanvasSamplePoint({
+        clientX: -10,
+        clientY: 300,
+        rect: { left: 10, top: 20, width: 200, height: 100 },
+        imageWidth: 800,
+        imageHeight: 400,
+      }),
+    ).toBeNull();
+  });
+
+  it('rejects a pointer in preview letterboxing instead of sampling a shifted pixel', () => {
+    expect(
+      resolveFrameCanvasSamplePoint({
+        clientX: 59,
+        clientY: 20,
+        rect: { left: 60, top: 20, width: 120, height: 160 },
+        imageWidth: 1200,
+        imageHeight: 1600,
+      }),
+    ).toBeNull();
+
+    expect(
+      resolveFrameCanvasSamplePoint({
+        clientX: 179.9,
+        clientY: 179.9,
+        rect: { left: 60, top: 20, width: 120, height: 160 },
+        imageWidth: 1200,
+        imageHeight: 1600,
+      }),
+    ).toEqual({ x: 1199, y: 1599 });
+  });
+
+  it('flips the magnifier away from the pointer when its preferred side is full', () => {
+    expect(
+      resolveFrameColorMagnifierPlacement({
+        pointerLeft: 16,
+        pointerTop: 18,
+        previewWidth: 264,
+        previewHeight: 176,
+        magnifierSize: 88,
+      }),
+    ).toMatchObject({
+      horizontal: 'right',
+      vertical: 'bottom',
+      left: 28,
+      top: 30,
+    });
+    expect(
+      resolveFrameColorMagnifierPlacement({
+        pointerLeft: 252,
+        pointerTop: 164,
+        previewWidth: 264,
+        previewHeight: 176,
+        magnifierSize: 88,
+      }),
+    ).toMatchObject({
+      horizontal: 'left',
+      vertical: 'top',
+      left: 152,
+      top: 64,
+    });
+    expect(
+      resolveFrameColorMagnifierPlacement({
+        pointerLeft: 250,
+        pointerTop: 18,
+        previewWidth: 264,
+        previewHeight: 176,
+        magnifierSize: 88,
+      }),
+    ).toMatchObject({ horizontal: 'left', vertical: 'bottom' });
+  });
+
+  it('keeps the magnifier sample clamped to the original frame and formats hover color', () => {
+    expect(
+      resolveFrameColorMagnifierSourcePoint({
+        point: { x: 0, y: 0 },
+        offsetX: -5,
+        offsetY: -5,
+        imageWidth: 320,
+        imageHeight: 240,
+      }),
+    ).toEqual({ x: 0, y: 0 });
+    expect(
+      resolveFrameColorMagnifierSourcePoint({
+        point: { x: 319, y: 239 },
+        offsetX: 5,
+        offsetY: 5,
+        imageWidth: 320,
+        imageHeight: 240,
+      }),
+    ).toEqual({ x: 319, y: 239 });
+    expect(formatFrameCanvasColorHex({ red: 4, green: 201, blue: 255 })).toBe(
+      '#04C9FF',
+    );
+  });
+});
diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx
new file mode 100644
index 000000000..925d3c6ad
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx
@@ -0,0 +1,517 @@
+import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { readAssetBytes } from '../../services/assetReadUrlService';
+import type { EditorImageSequenceFrameResult } from '../../services/image-editor/editorProjectClient';
+import type { EditorCharacterAnimationBackgroundRemovalMode } from '../../services/image-editor/editorProjectClient';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import {
+  formatFrameCanvasColorHex,
+  resolveFrameCanvasSamplePoint,
+  resolveFrameColorMagnifierPlacement,
+  resolveFrameColorMagnifierSourcePoint,
+  type FrameCanvasColor,
+  type FrameCanvasPoint,
+} from './ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel';
+
+type DecodedFrameImage = {
+  image: CanvasImageSource;
+  width: number;
+  height: number;
+  dispose: () => void;
+};
+
+type FrameHoverSample = {
+  point: FrameCanvasPoint;
+  color: FrameCanvasColor;
+  left: number;
+  top: number;
+  previewWidth: number;
+  previewHeight: number;
+};
+
+const magnifierRadius = 5;
+const magnifierCellSize = 8;
+const magnifierSize = (magnifierRadius * 2 + 1) * magnifierCellSize;
+
+type ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanelProps = {
+  open: boolean;
+  style: CSSProperties;
+  frames: readonly EditorImageSequenceFrameResult[];
+  mode: EditorCharacterAnimationBackgroundRemovalMode;
+  screenColor: string;
+  busy?: boolean;
+  onModeChange: (mode: EditorCharacterAnimationBackgroundRemovalMode) => void;
+  onScreenColorChange: (screenColor: string) => void;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+async function decodeFrameImage(blob: Blob): Promise<DecodedFrameImage> {
+  if (typeof createImageBitmap === 'function') {
+    const bitmap = await createImageBitmap(blob);
+    return {
+      image: bitmap,
+      width: bitmap.width,
+      height: bitmap.height,
+      dispose: () => bitmap.close(),
+    };
+  }
+
+  const url = URL.createObjectURL(blob);
+  const image = new Image();
+  await new Promise<void>((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error('帧图片解码失败'));
+    image.src = url;
+  });
+  return {
+    image,
+    width: image.naturalWidth || image.width,
+    height: image.naturalHeight || image.height,
+    dispose: () => URL.revokeObjectURL(url),
+  };
+}
+
+export function ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel({
+  open,
+  style,
+  frames,
+  mode,
+  screenColor,
+  busy = false,
+  onModeChange,
+  onScreenColorChange,
+  onClose,
+  onConfirm,
+}: ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanelProps) {
+  const [frameIndex, setFrameIndex] = useState(0);
+  const [isLoadingFrame, setIsLoadingFrame] = useState(false);
+  const [frameLoadError, setFrameLoadError] = useState<string | null>(null);
+  const [hoverSample, setHoverSample] = useState<FrameHoverSample | null>(null);
+  const frameCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const framePreviewContainerRef = useRef<HTMLDivElement | null>(null);
+  const magnifierCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const decodedFrameRef = useRef<DecodedFrameImage | null>(null);
+  const activeFrame =
+    frames[Math.min(frameIndex, Math.max(0, frames.length - 1))];
+
+  useEffect(() => {
+    setFrameIndex((currentIndex) =>
+      Math.min(currentIndex, Math.max(0, frames.length - 1)),
+    );
+  }, [frames.length]);
+
+  useEffect(() => {
+    setHoverSample(null);
+  }, [activeFrame, mode]);
+
+  useEffect(() => {
+    if (!open || mode !== 'solid-color' || !activeFrame) {
+      return;
+    }
+    let cancelled = false;
+    let decodedFrame: DecodedFrameImage | null = null;
+    setIsLoadingFrame(true);
+    setFrameLoadError(null);
+
+    void readAssetBytes(activeFrame.imageSrc, {
+      objectKey: activeFrame.objectKey,
+    })
+      .then((response) => response.blob())
+      .then(decodeFrameImage)
+      .then((decoded) => {
+        decodedFrame = decoded;
+        if (cancelled) {
+          decoded.dispose();
+          return;
+        }
+        decodedFrameRef.current?.dispose();
+        decodedFrameRef.current = decoded;
+        const canvas = frameCanvasRef.current;
+        const context = canvas?.getContext('2d', { willReadFrequently: true });
+        if (!canvas || !context) {
+          throw new Error('当前浏览器不支持帧像素取色');
+        }
+        canvas.width = decoded.width;
+        canvas.height = decoded.height;
+        context.clearRect(0, 0, decoded.width, decoded.height);
+        context.drawImage(decoded.image, 0, 0, decoded.width, decoded.height);
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          setFrameLoadError(
+            error instanceof Error && error.message.trim()
+              ? error.message
+              : '读取序列帧失败',
+          );
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoadingFrame(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+      if (decodedFrame && decodedFrameRef.current !== decodedFrame) {
+        decodedFrame.dispose();
+      }
+    };
+  }, [activeFrame, mode, open]);
+
+  useEffect(
+    () => () => {
+      decodedFrameRef.current?.dispose();
+      decodedFrameRef.current = null;
+    },
+    [],
+  );
+
+  const resolvePointerSample = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>): FrameHoverSample | null => {
+      const canvas = frameCanvasRef.current;
+      const context = canvas?.getContext('2d', { willReadFrequently: true });
+      if (!canvas || !context) {
+        return null;
+      }
+      const rect = event.currentTarget.getBoundingClientRect();
+      const previewRect =
+        framePreviewContainerRef.current?.getBoundingClientRect() ?? rect;
+      const point = resolveFrameCanvasSamplePoint({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        rect,
+        imageWidth: canvas.width,
+        imageHeight: canvas.height,
+      });
+      if (!point) {
+        return null;
+      }
+      const pixel = context.getImageData(point.x, point.y, 1, 1).data;
+      return {
+        point,
+        color: {
+          red: pixel[0] ?? 0,
+          green: pixel[1] ?? 0,
+          blue: pixel[2] ?? 0,
+        },
+        left: event.clientX - previewRect.left,
+        top: event.clientY - previewRect.top,
+        previewWidth: previewRect.width,
+        previewHeight: previewRect.height,
+      };
+    },
+    [],
+  );
+
+  const drawMagnifier = useCallback((point: FrameCanvasPoint) => {
+    const sourceCanvas = frameCanvasRef.current;
+    const sourceContext = sourceCanvas?.getContext('2d', {
+      willReadFrequently: true,
+    });
+    const magnifierCanvas = magnifierCanvasRef.current;
+    const magnifierContext = magnifierCanvas?.getContext('2d');
+    if (
+      !sourceCanvas ||
+      !sourceContext ||
+      !magnifierCanvas ||
+      !magnifierContext
+    ) {
+      return;
+    }
+
+    magnifierCanvas.width = magnifierSize;
+    magnifierCanvas.height = magnifierSize;
+    magnifierContext.imageSmoothingEnabled = false;
+    for (let row = -magnifierRadius; row <= magnifierRadius; row += 1) {
+      for (
+        let column = -magnifierRadius;
+        column <= magnifierRadius;
+        column += 1
+      ) {
+        const sourcePoint = resolveFrameColorMagnifierSourcePoint({
+          point,
+          offsetX: column,
+          offsetY: row,
+          imageWidth: sourceCanvas.width,
+          imageHeight: sourceCanvas.height,
+        });
+        if (!sourcePoint) {
+          continue;
+        }
+        const pixel = sourceContext.getImageData(
+          sourcePoint.x,
+          sourcePoint.y,
+          1,
+          1,
+        ).data;
+        magnifierContext.fillStyle = `rgb(${pixel[0] ?? 0}, ${pixel[1] ?? 0}, ${pixel[2] ?? 0})`;
+        magnifierContext.fillRect(
+          (column + magnifierRadius) * magnifierCellSize,
+          (row + magnifierRadius) * magnifierCellSize,
+          magnifierCellSize,
+          magnifierCellSize,
+        );
+      }
+    }
+    magnifierContext.strokeStyle = 'rgba(15, 23, 42, 0.35)';
+    magnifierContext.lineWidth = 1;
+    for (let index = 0; index <= magnifierRadius * 2 + 1; index += 1) {
+      const offset = index * magnifierCellSize + 0.5;
+      magnifierContext.beginPath();
+      magnifierContext.moveTo(offset, 0);
+      magnifierContext.lineTo(offset, magnifierSize);
+      magnifierContext.moveTo(0, offset);
+      magnifierContext.lineTo(magnifierSize, offset);
+      magnifierContext.stroke();
+    }
+    magnifierContext.strokeStyle = '#FFFFFF';
+    magnifierContext.lineWidth = 2;
+    magnifierContext.strokeRect(
+      magnifierRadius * magnifierCellSize + 1,
+      magnifierRadius * magnifierCellSize + 1,
+      magnifierCellSize - 2,
+      magnifierCellSize - 2,
+    );
+  }, []);
+
+  useEffect(() => {
+    if (hoverSample) {
+      drawMagnifier(hoverSample.point);
+    }
+  }, [drawMagnifier, hoverSample]);
+
+  const handleFramePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>) => {
+      const sample = resolvePointerSample(event);
+      if (!sample) {
+        setHoverSample(null);
+        return;
+      }
+      setHoverSample(sample);
+    },
+    [resolvePointerSample],
+  );
+
+  const sampleFrameColor = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>) => {
+      const sample = resolvePointerSample(event);
+      if (sample) {
+        onScreenColorChange(formatFrameCanvasColorHex(sample.color));
+      }
+    },
+    [onScreenColorChange, resolvePointerSample],
+  );
+
+  if (!open) {
+    return null;
+  }
+
+  const confirmDisabled =
+    busy || (mode === 'solid-color' && !/^#[0-9A-F]{6}$/i.test(screenColor));
+  const magnifierPlacement = hoverSample
+    ? resolveFrameColorMagnifierPlacement({
+        pointerLeft: hoverSample.left,
+        pointerTop: hoverSample.top,
+        previewWidth: hoverSample.previewWidth,
+        previewHeight: hoverSample.previewHeight,
+        magnifierSize,
+      })
+    : null;
+
+  return (
+    <section
+      role="dialog"
+      aria-modal="false"
+      aria-label="序列帧去背景"
+      style={style}
+      className="absolute z-30 flex max-h-[calc(100%_-_1.5rem)] w-72 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white text-slate-800 shadow-2xl"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <header className="flex items-center justify-between gap-3 border-b border-slate-200 px-3 py-2.5">
+        <h2 className="text-sm font-semibold">序列帧去背景</h2>
+        <button
+          type="button"
+          aria-label="关闭序列帧去背景悬浮窗"
+          disabled={busy}
+          className="grid h-7 w-7 place-items-center rounded-full text-lg leading-none text-slate-400 hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50"
+          onClick={onClose}
+        >
+          ×
+        </button>
+      </header>
+
+      <div className="min-h-0 overflow-y-auto p-3">
+        <fieldset className="grid gap-2" aria-label="去背景方式">
+          <label className="flex cursor-pointer gap-2 rounded-lg border border-slate-200 p-2.5">
+            <input
+              type="radio"
+              name="character-animation-background-removal-mode"
+              value="solid-color"
+              checked={mode === 'solid-color'}
+              disabled={busy}
+              onChange={() => onModeChange('solid-color')}
+            />
+            <span>
+              <span className="block text-sm font-medium">纯色背景抠图</span>
+              <span className="block text-xs text-slate-500">
+                从原始帧像素取色
+              </span>
+            </span>
+          </label>
+          <label className="flex cursor-pointer gap-2 rounded-lg border border-slate-200 p-2.5">
+            <input
+              type="radio"
+              name="character-animation-background-removal-mode"
+              value="general"
+              checked={mode === 'general'}
+              disabled={busy}
+              onChange={() => onModeChange('general')}
+            />
+            <span>
+              <span className="block text-sm font-medium">通用智能抠图</span>
+              <span className="block text-xs text-slate-500">
+                逐帧调用智能分割服务
+              </span>
+            </span>
+          </label>
+        </fieldset>
+
+        {mode === 'solid-color' ? (
+          <div className="mt-3 grid gap-2">
+            <div className="flex items-center justify-between gap-2">
+              <label className="flex items-center gap-2 text-sm font-medium">
+                背景色
+                <input
+                  type="color"
+                  aria-label="纯色背景颜色"
+                  value={screenColor}
+                  disabled={busy}
+                  onChange={(event) =>
+                    onScreenColorChange(event.currentTarget.value.toUpperCase())
+                  }
+                  className="h-8 w-10 cursor-pointer rounded border border-slate-200 bg-white p-0.5"
+                />
+              </label>
+              <code className="text-xs">{screenColor}</code>
+            </div>
+
+            {activeFrame ? (
+              <div className="grid gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2">
+                <div className="flex items-center justify-between gap-2 text-xs text-slate-600">
+                  <span>逐帧取色</span>
+                  <span>{`${frameIndex + 1}/${frames.length}`}</span>
+                </div>
+                <div
+                  ref={framePreviewContainerRef}
+                  className="relative flex h-44 items-center justify-center overflow-hidden rounded bg-[repeating-conic-gradient(#e2e8f0_0%_25%,#f8fafc_0%_50%)_50%/16px_16px]"
+                >
+                  <canvas
+                    ref={frameCanvasRef}
+                    aria-label="序列帧像素取色预览"
+                    className="block h-auto max-h-full max-w-full w-auto cursor-crosshair touch-none"
+                    onPointerMove={handleFramePointerMove}
+                    onPointerLeave={() => setHoverSample(null)}
+                    onPointerDown={sampleFrameColor}
+                  />
+                  {magnifierPlacement ? (
+                    <div
+                      aria-label="原始像素放大预览"
+                      data-placement={`${magnifierPlacement.horizontal}-${magnifierPlacement.vertical}`}
+                      className="pointer-events-none absolute z-10 overflow-hidden rounded-md border-2 border-white bg-white shadow-xl ring-1 ring-slate-300"
+                      style={{
+                        left: magnifierPlacement.left,
+                        top: magnifierPlacement.top,
+                        width: magnifierSize,
+                        height: magnifierSize,
+                      }}
+                    >
+                      <canvas
+                        ref={magnifierCanvasRef}
+                        aria-hidden="true"
+                        width={magnifierSize}
+                        height={magnifierSize}
+                        className="block"
+                      />
+                    </div>
+                  ) : null}
+                </div>
+                <div className="flex min-h-5 items-center justify-between gap-2 text-xs text-slate-600">
+                  <span>悬停预览，点击取色</span>
+                  {hoverSample ? (
+                    <span className="flex items-center gap-1.5">
+                      <span
+                        aria-label="悬停像素颜色"
+                        className="h-3.5 w-3.5 rounded-sm border border-slate-300"
+                        style={{
+                          backgroundColor: formatFrameCanvasColorHex(
+                            hoverSample.color,
+                          ),
+                        }}
+                      />
+                      <code>
+                        {formatFrameCanvasColorHex(hoverSample.color)}
+                      </code>
+                    </span>
+                  ) : null}
+                </div>
+                {isLoadingFrame ? (
+                  <span className="text-xs text-slate-500">
+                    正在读取原始帧…
+                  </span>
+                ) : null}
+                {frameLoadError ? (
+                  <span className="text-xs text-red-600">{frameLoadError}</span>
+                ) : null}
+                {frames.length > 1 ? (
+                  <input
+                    type="range"
+                    aria-label="选择序列帧"
+                    min="0"
+                    max={String(frames.length - 1)}
+                    value={frameIndex}
+                    disabled={busy}
+                    onChange={(event) =>
+                      setFrameIndex(
+                        Number.parseInt(event.currentTarget.value, 10) || 0,
+                      )
+                    }
+                  />
+                ) : null}
+              </div>
+            ) : (
+              <span className="text-xs text-red-600">
+                序列帧列表为空，无法取色。
+              </span>
+            )}
+          </div>
+        ) : null}
+      </div>
+
+      <footer className="flex justify-end gap-2 border-t border-slate-200 px-3 py-2.5">
+        <PlatformActionButton
+          type="button"
+          tone="ghost"
+          size="xs"
+          shape="pill"
+          disabled={busy}
+          onClick={onClose}
+        >
+          取消
+        </PlatformActionButton>
+        <PlatformActionButton
+          type="button"
+          tone="primary"
+          size="xs"
+          shape="pill"
+          disabled={confirmDisabled}
+          onClick={onConfirm}
+        >
+          {busy ? '提交中' : '开始处理'}
+        </PlatformActionButton>
+      </footer>
+    </section>
+  );
+}
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index f4833ce5e..a3129c193 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -35,7 +35,7 @@ import {
 import { usePlatformProfileCenterController } from '../platform-entry/usePlatformProfileCenterController';
 import type { ImageCanvasActionResult } from './ImageCanvasActionsContext';
 import { ImageCanvasActionsProvider } from './ImageCanvasActionsProvider';
-import { ImageCanvasCharacterAnimationBackgroundRemovalDialog } from './ImageCanvasCharacterAnimationBackgroundRemovalDialog';
+import { ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel } from './ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel';
 import {
   canvasAssetKindOrNull,
   DEFAULT_CANVAS_BACKGROUND_COLOR,
@@ -79,6 +79,7 @@ import { fitViewportToBounds } from './ImageCanvasInteractionModel';
 import type { CanvasLayerCopyBlockReason } from './ImageCanvasLayerCommandModel';
 import {
   isCanvasGenerationComposerVisible,
+  resolveCharacterAnimationBackgroundRemovalPanelStyle,
   resolveQuickEditFocusViewport,
 } from './ImageCanvasOverlayModel';
 import {
@@ -2684,13 +2685,13 @@ export function ImageCanvasEditorView({
       );
     },
     onRemoveCharacterAnimationBackground: (layer: CanvasLayer) => {
-      void flushProjectPersistence().then(() =>
+      void flushProjectPersistence().then(() => {
         setCharacterAnimationBackgroundRemovalDraft({
           sourceLayer: layer,
           mode: 'solid-color',
           screenColor: '#00FF00',
-        }),
-      );
+        });
+      });
     },
     onExtractUiDesignAssets: extractUiDesignAssets,
     onUiAssetExtractionToolChange: changeUiAssetExtractionTool,
@@ -2738,7 +2739,62 @@ export function ImageCanvasEditorView({
     onSwitchTool: switchTool,
     onOpenToolOptions: generationSurface.openToolbarOptionMenu,
     onCloseToolOptions: generationSurface.closeToolbarOptionMenu,
-    children: generationComposerNode,
+    children: (
+      <>
+        {generationComposerNode}
+        {characterAnimationBackgroundRemovalDraft ? (
+          <ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel
+            open
+            style={
+              resolveCharacterAnimationBackgroundRemovalPanelStyle({
+                sourceLayer:
+                  characterAnimationBackgroundRemovalDraft.sourceLayer,
+                viewport,
+                canvasSize,
+              }) ?? {}
+            }
+            frames={
+              characterAnimationBackgroundRemovalDraft.sourceLayer
+                .imageSequenceFrames ?? []
+            }
+            mode={characterAnimationBackgroundRemovalDraft.mode}
+            screenColor={characterAnimationBackgroundRemovalDraft.screenColor}
+            busy={removingBackgroundCharacterAnimationLayerIds.has(
+              characterAnimationBackgroundRemovalDraft.sourceLayer.id,
+            )}
+            onModeChange={(mode) =>
+              setCharacterAnimationBackgroundRemovalDraft((draft) =>
+                draft ? { ...draft, mode } : draft,
+              )
+            }
+            onScreenColorChange={(screenColor) =>
+              setCharacterAnimationBackgroundRemovalDraft((draft) =>
+                draft ? { ...draft, screenColor } : draft,
+              )
+            }
+            onClose={() => setCharacterAnimationBackgroundRemovalDraft(null)}
+            onConfirm={() => {
+              const draft = characterAnimationBackgroundRemovalDraft;
+              void removeSelectedCharacterAnimationBackground(
+                draft.sourceLayer,
+                {
+                  mode: draft.mode,
+                  ...(draft.mode === 'solid-color'
+                    ? { screenColor: draft.screenColor }
+                    : {}),
+                  onSubmissionAccepted: () =>
+                    setCharacterAnimationBackgroundRemovalDraft((current) =>
+                      current?.sourceLayer.id === draft.sourceLayer.id
+                        ? null
+                        : current,
+                    ),
+                },
+              );
+            }}
+          />
+        ) : null}
+      </>
+    ),
   };
 
   return (
@@ -2760,42 +2816,6 @@ export function ImageCanvasEditorView({
           onClose: () => setMetadataLayer(null),
         }}
       />
-      <ImageCanvasCharacterAnimationBackgroundRemovalDialog
-        open={Boolean(characterAnimationBackgroundRemovalDraft)}
-        mode={characterAnimationBackgroundRemovalDraft?.mode ?? 'solid-color'}
-        screenColor={
-          characterAnimationBackgroundRemovalDraft?.screenColor ?? '#00FF00'
-        }
-        busy={Boolean(
-          characterAnimationBackgroundRemovalDraft &&
-            removingBackgroundCharacterAnimationLayerIds.has(
-              characterAnimationBackgroundRemovalDraft.sourceLayer.id,
-            ),
-        )}
-        onModeChange={(mode) =>
-          setCharacterAnimationBackgroundRemovalDraft((draft) =>
-            draft ? { ...draft, mode } : draft,
-          )
-        }
-        onScreenColorChange={(screenColor) =>
-          setCharacterAnimationBackgroundRemovalDraft((draft) =>
-            draft ? { ...draft, screenColor } : draft,
-          )
-        }
-        onClose={() => setCharacterAnimationBackgroundRemovalDraft(null)}
-        onConfirm={() => {
-          const draft = characterAnimationBackgroundRemovalDraft;
-          if (!draft) {
-            return;
-          }
-          void removeSelectedCharacterAnimationBackground(draft.sourceLayer, {
-            mode: draft.mode,
-            ...(draft.mode === 'solid-color'
-              ? { screenColor: draft.screenColor }
-              : {}),
-          }).then(() => setCharacterAnimationBackgroundRemovalDraft(null));
-        }}
-      />
       <PlatformDangerConfirmDialog
         open={Boolean(pendingGenerationDeleteDialog)}
         title="删除生成中的占位图"
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.test.ts b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
index 100e4c620..aba771821 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.test.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
@@ -9,6 +9,7 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   isCanvasGenerationComposerVisible,
+  resolveCharacterAnimationBackgroundRemovalPanelStyle,
   resolveCharacterAnimationPanelStyle,
   resolveCropExpandPanelStyle,
   resolveGenerationAnchor,
@@ -132,6 +133,34 @@ describe('ImageCanvasOverlayModel', () => {
     ).toEqual({ left: 1320, top: 88 });
   });
 
+  it('places background removal beside the source and flips when the right side is full', () => {
+    expect(
+      resolveCharacterAnimationBackgroundRemovalPanelStyle({
+        sourceLayer: createLayer({ x: 100, y: 80, width: 240, height: 120 }),
+        viewport: { x: 0, y: 0, scale: 1 },
+        canvasSize: { width: 900, height: 640 },
+      }),
+    ).toEqual({ left: 352, top: 80 });
+
+    expect(
+      resolveCharacterAnimationBackgroundRemovalPanelStyle({
+        sourceLayer: createLayer({ x: 620, y: 80, width: 240, height: 120 }),
+        viewport: { x: 0, y: 0, scale: 1 },
+        canvasSize: { width: 900, height: 640 },
+      }),
+    ).toEqual({ left: 320, top: 80 });
+  });
+
+  it('keeps background removal adjacent while the canvas pans and zooms', () => {
+    expect(
+      resolveCharacterAnimationBackgroundRemovalPanelStyle({
+        sourceLayer: createLayer({ x: 40, y: 20, width: 120, height: 80 }),
+        viewport: { x: 30, y: 50, scale: 2 },
+        canvasSize: { width: 900, height: 640 },
+      }),
+    ).toEqual({ left: 362, top: 90 });
+  });
+
   it('fits tall quick edit sources above the reserved bottom composer area', () => {
     const sourceLayer = createLayer({ x: 100, y: 50, width: 360, height: 1600 });
     const viewport = resolveQuickEditFocusViewport({
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 898101275..810f40920 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -370,6 +370,7 @@ function GenerationWorkflowHarness({
   onFlushProjectPersistenceSnapshot,
   refreshAssetLibrary,
   upsertGeneratedAsset,
+  onCharacterAnimationBackgroundRemovalSubmissionAccepted,
 }: {
   initialLayers?: CanvasLayer[];
   initialCanvasGenerationDialogs?: CanvasGenerationDialogState[];
@@ -395,6 +396,7 @@ function GenerationWorkflowHarness({
   upsertGeneratedAsset?: Parameters<
     typeof useImageCanvasGenerationWorkflow
   >[0]['upsertGeneratedAsset'];
+  onCharacterAnimationBackgroundRemovalSubmissionAccepted?: () => void;
 }) {
   const [layers, setLayers] = useState<CanvasLayer[]>(initialLayers);
   const [viewport, setViewport] = useState(initialViewport);
@@ -950,6 +952,8 @@ function GenerationWorkflowHarness({
           void workflow.removeSelectedCharacterAnimationBackground(layers[0]!, {
             mode: 'solid-color',
             screenColor: '#00FF00',
+            onSubmissionAccepted:
+              onCharacterAnimationBackgroundRemovalSubmissionAccepted,
           })
         }
       >
@@ -3044,6 +3048,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     }>();
     const applyProjectSnapshot = vi.fn();
     const refreshAssetLibrary = vi.fn().mockResolvedValue(undefined);
+    const onSubmissionAccepted = vi.fn();
     const backendProject: EditorProjectSnapshot = {
       projectId: 'project-1',
       title: '序列帧去背景项目',
@@ -3065,6 +3070,9 @@ describe('useImageCanvasGenerationWorkflow', () => {
         projectId="project-1"
         applyProjectSnapshot={applyProjectSnapshot}
         refreshAssetLibrary={refreshAssetLibrary}
+        onCharacterAnimationBackgroundRemovalSubmissionAccepted={
+          onSubmissionAccepted
+        }
         initialLayers={[
           createLayer({
             title: '勇者奔跑',
@@ -3095,6 +3103,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         screenColor: '#00FF00',
       }),
     );
+    expect(onSubmissionAccepted).not.toHaveBeenCalled();
 
     deferred.resolve({
       taskId: 'background-removal-task',
@@ -3110,6 +3119,9 @@ describe('useImageCanvasGenerationWorkflow', () => {
       project: backendProject,
     });
 
+    await waitFor(() => {
+      expect(onSubmissionAccepted).toHaveBeenCalledTimes(1);
+    });
     await waitFor(() => {
       expect(applyProjectSnapshot).toHaveBeenCalledWith(backendProject, {
         type: 'remove-background',
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index f781ee7de..37732828c 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -3682,6 +3682,7 @@ export function useImageCanvasGenerationWorkflow({
       options: {
         mode: EditorCharacterAnimationBackgroundRemovalMode;
         screenColor?: string;
+        onSubmissionAccepted?: () => void;
       },
     ) => {
       if (
@@ -3743,6 +3744,9 @@ export function useImageCanvasGenerationWorkflow({
             sourceLayer,
           ),
         });
+        // 选择悬浮窗只负责提交参数；HTTP 接受任务后立即交给画布占位和任务队列，
+        // 不能等待 durable job 终态，否则整个处理周期都会被误显示为“提交中”。
+        options.onSubmissionAccepted?.();
         const queued = await applyQueuedEditorGenerationProject(
           result,
           projectId,
-- 
2.52.0


From e695cdf49968df2e478078700807468381b22df5 Mon Sep 17 00:00:00 2001
From: suzmii <suzmii@qq.com>
Date: Mon, 17 Aug 2026 21:12:13 +0800
Subject: [PATCH 15/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BA=8F=E5=88=97?=
 =?UTF-8?q?=E5=B8=A7=E5=8E=BB=E8=83=8C=E6=99=AF=E9=9D=A2=E6=9D=BF=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

按 simple-import-sort 规则调整类型导入顺序
---
 ...CanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx
index 925d3c6ad..902b931a5 100644
--- a/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx
+++ b/src/components/image-editor/ImageCanvasCharacterAnimationBackgroundRemovalFloatingPanel.tsx
@@ -7,11 +7,11 @@ import type { EditorCharacterAnimationBackgroundRemovalMode } from '../../servic
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import {
   formatFrameCanvasColorHex,
+  type FrameCanvasColor,
+  type FrameCanvasPoint,
   resolveFrameCanvasSamplePoint,
   resolveFrameColorMagnifierPlacement,
   resolveFrameColorMagnifierSourcePoint,
-  type FrameCanvasColor,
-  type FrameCanvasPoint,
 } from './ImageCanvasCharacterAnimationBackgroundRemovalColorPickerModel';
 
 type DecodedFrameImage = {
-- 
2.52.0