diff --git a/docs/README.md b/docs/README.md
index 9f4736622..33948359c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -30,7 +30,7 @@ Expo React Native 移动壳和 Tauri 桌面壳的工程结构、同源 WebView 
 
 `/editor/agent` 浏览器内 AI Web 工程编辑器的静态 SPA 沙箱预览 MVP，采用“平台编辑器壳 + api-server 控制面 + 独立 runner worker + 独立预览域”四层结构；技术方案、威胁模型和验收清单见 [【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md](./technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md)、[【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md](./technical/【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md) 和 [【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md](./technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md)。P1 先用确定性 mock Agent 生成结构化 patch、真实打通项目 / 快照 / 构建 / artifact / 预览闭环，落地拆分见 [【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md](./technical/【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md)。
 
-`/editor/canvas` 图片画布编辑器的画布素材 ZIP 导出能力，入口放在右上角标题栏下载图标内，第一版采用前端 JSZip 打包画布中有效图层引用的上传图、生成图和修改结果，方案见 [【前端架构】图片画布素材导出方案-2026-06-15.md](./technical/【前端架构】图片画布素材导出方案-2026-06-15.md)。
+`/editor/canvas` 图片画布编辑器的画布素材 ZIP 导出能力，入口放在右上角标题栏下载图标内，采用前端 JSZip 打包画布中有效图层引用的上传图、生成图、修改结果和角色动作序列帧；动作图层右键“导出为”提供序列帧 ZIP（含前端生成的 `preview.gif`）与 Spine JSON ZIP 两个二级选项，方案见 [【前端架构】图片画布素材导出方案-2026-06-15.md](./technical/【前端架构】图片画布素材导出方案-2026-06-15.md)。
 
 图片画布生成类面板的模型泥点默认 JSON、运行时 override、后台“模型定价”页面和主站动态下发口径见 [【编辑器】模型定价配置管理方案-2026-06-22.md](./%E3%80%90%E7%BC%96%E8%BE%91%E5%99%A8%E3%80%91%E6%A8%A1%E5%9E%8B%E5%AE%9A%E4%BB%B7%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88-2026-06-22.md)。
 
diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 1075149ff..90b0f6654 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -20,6 +20,7 @@
 
 - 背景：外部生成队列已经承载画板和玩法的付费生成，但前端只展示排队概览，缺少可追溯任务列表、后端确认状态、完成提示补弹和退款记录到任务的追踪关系。
 - 决策：`external_generation_job` 同时作为正式生成任务列表事实源，保存 `price_mud_points`、`refund_ledger_id` 和 `notification_acknowledged_at`；新增 `external_generation_job_event` 追加状态转换审计。BFF 新增当前账号任务列表和 acknowledge 接口；前端只展示后端任务状态，完成 / 失败提示关闭时由后端写确认时间，未确认终态任务在下次登录后按列表集中弹出。任务触发的钱包扣费 / 退款流水 metadata 必须写 `externalGenerationJobId`，本机退款 outbox 重放也保留该任务 ID。
+- 2026-06-25 追加：平台壳的当前账号任务列表只在登录、网络恢复、页面回到前台或已有 queued/running/未确认终态任务时刷新；空队列刷新一次后不保持 4 秒轮询，避免 `/api/runtime/external-generation/jobs` 在无任务时持续请求。
 - 影响范围：`spacetime-module` 外部生成 schema / procedure、`spacetime-client` bindings/facade、`api-server` 外部生成 BFF、worker 失败回写和资产计费退款链路、平台入口“我的”页任务卡和完成提示弹窗。
 - 验证方式：运行 `npm run spacetime:generate`、`npm run check:spacetime-schema`、`cargo test -p spacetime-module external_generation --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server wallet_refund_outbox --manifest-path server-rs/Cargo.toml`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/technical/【后端架构】外部生成Worker化方案-2026-06-03.md`、`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`。
@@ -131,7 +132,7 @@
 ## 2026-06-18 图片画布 UI 设计图提取素材保留图集
 
 - 背景：UI 设计图需要从成图中继续抽取可复用独立素材；原图标素材生成只把拆分后的图标放入画布，spritesheet 原图没有保留，后续追溯和二次切图不方便。
-- 决策：`assetKind="ui-design"` 图层浮动工具栏新增 `提取素材`，点击后先进入红框素材框选编辑态，默认矩形框选，并支持椭圆框选和画笔自由框选。至少存在一个框选区域后才能提交；前端把红色轮廓绘入原 UI 设计图并将合成图作为 `/api/editor/ui-designs/assets/extractions` 的参考图。后端固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet`，返回结构复用图标 spritesheet 响应。图标生成与 UI 提取都必须把 spritesheet 图集作为 `assetKind="icon-spritesheet"` 图层放到画布，再放拆分后的 `assetKind="icon"` 素材。
+- 决策：`assetKind="ui-design"` 图层浮动工具栏新增 `提取素材`，点击后先进入红框素材框选编辑态，默认矩形框选，并支持椭圆框选和画笔自由框选。至少存在一个框选区域后才能提交；前端把红色轮廓绘入原 UI 设计图并将合成图作为 `/api/editor/ui-designs/assets/extractions` 的参考图。后端固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。`，返回结构复用图标 spritesheet 响应。图标生成与 UI 提取都必须把 spritesheet 图集作为 `assetKind="icon-spritesheet"` 图层放到画布，再放拆分后的 `assetKind="icon"` 素材。
 - 影响范围：图片画布浮动工具栏、编辑器图片生成 BFF、`platform-image` 图集连通域拆分、画布图层类型和编辑器文档。
 - 验证方式：运行图片画布工具栏 / 图集落层 / 生成提交相关前端测试，`cargo test -p platform-image generated_asset_sheets --manifest-path server-rs/Cargo.toml`，以及 `cargo test -p api-server editor_ui_design_asset_extraction_prompt_is_fixed --manifest-path server-rs/Cargo.toml`。
 - 关联文档：`docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md`、`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`。
@@ -1030,6 +1031,7 @@
 
 - 背景：生成图片如果以完整 OSS 私有 bucket URL 进入前端，浏览器会裸连 OSS 并遇到 403 或绕过现有 `/api/assets/read-url` 签名缓存；同时旧对象缺少 `Cache-Control` 时只能走 `ETag` / `Last-Modified` 协商缓存，容易被误解为需要 api-server 本地磁盘缓存。
 - 决策：OSS 继续作为 generated 私有资产源站，api-server 只签发短期读 URL，不做本地磁盘静态资源兜底。前端收到同 bucket 的 `https://*.oss-*.aliyuncs.com/generated-*` 地址时，必须先归一为 legacy public path，再复用 `/api/assets/read-url` 和本地 signed URL 缓存。新上传 generated 私有对象默认写入 `Cache-Control: public, max-age=31536000, immutable`，缓存职责交给 OSS 对象头、浏览器 / WebView HTTP 缓存和后续 CDN。
+- 2026-06-25 追加：前端需要读取 generated/private 资源字节时，也应先通过 `/api/assets/read-url` 获取 signed OSS URL 并由浏览器直接下载字节；`/api/assets/read-bytes` 只作为换签或 OSS 读取失败后的 fallback，不作为默认文件代理路径。
 - 影响范围：`src/services/assetReadUrlService.ts`、`server-rs/crates/platform-oss`、`shared-contracts` direct upload form fields、`api-server` assets DTO 映射、后端契约文档和开发运维排障口径。
 - 验证方式：完整 OSS generated URL 应触发 `/api/assets/read-url?legacyPublicPath=...`，同一路径、同一 `refreshKey` 版本且未临近过期时复用本地 signed URL；`platform-oss` 的 `PostObject` policy / form fields 和 `PutObject` 请求头都应包含 immutable `Cache-Control`，且 `PutObject` V4 签名的 `AdditionalHeaders` 包含该普通请求头。
 - 关联文档：`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`、`server-rs/crates/platform-oss/README.md`。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 9f2bf1792..b621929fb 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -79,6 +79,14 @@
 - 验证：`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`。
 
+## 图片画布序列帧播放不要复用普通图片淡入样式
+
+- 现象：角色动作序列帧播放时看起来像每帧之间在渐变或闪烁。
+- 原因：序列帧播放器每帧切换可低至 40ms，默认约 125ms 一帧；如果帧 `<img>` 复用普通图片的 `image-canvas-editor__layer-image--loading/--loaded`，其中 `opacity 180ms ease` 会跨过下一帧切换，形成类似交叉淡入淡出的视觉。
+- 处理：`ImageCanvasImageSequenceFrame` 只使用序列帧专属 class，帧显隐用同步 `opacity` 硬切，并显式 `transition: none`；保留“下一帧未加载时继续显示上一帧”的 readiness gate。
+- 验证：`ImageCanvasWorldView.test.tsx` 应断言序列帧 `<img>` 不带普通图片 loading/loaded class，且 style 中 `transition` 为 `none`。
+- 关联：`src/components/image-editor/ImageCanvasWorldView.tsx`、`src/index.css`、`src/components/image-editor/ImageCanvasWorldView.test.tsx`。
+
 ## Vidu 文生音频线上网关可能要求 sound 字段
 
 - 现象：画板点击 `生成游戏音效` 后，请求返回 `Failed to deserialize the JSON body into the target type: missing field sound`。
@@ -127,6 +135,14 @@
 - 验证：`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/ImageCanvasInteractionModel.test.ts`，并在多素材画布拖拽时确认参考线仍能命中邻近图层且 pointermove 不再明显掉帧。
 - 关联：`src/components/image-editor/ImageCanvasEditorModel.ts`、`src/components/image-editor/ImageCanvasInteractionModel.ts`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
+## 图片画布视口拖动卡顿先查自动保存和小地图合帧
+
+- 现象：素材多或序列帧多时，拖动小地图视口框或手型平移明显卡顿，像是接口慢或 CSS 动画掉帧，但网络请求不一定异常。
+- 原因：`pointermove` 高频修改 `viewport` 会触发画布重渲染、小地图模型重算和工程持久化 effect；持久化链路会同步 `serializeCanvasLayout`、`JSON.stringify` 并写 sessionStorage。远端 PATCH 有防抖也挡不住本地同步缓存写入。
+- 处理：把 viewport 拖动标记为临时交互；拖动中只更新画布显示，不触发项目保存、session cache 写入或封面快照上传，`pointerup` / `pointercancel` 后保存最终 viewport。小地图拖动的 `updateViewportFromMinimapDrag` 必须用 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧。
+- 验证：`npm run test -- src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx --reporter verbose` 应覆盖小地图拖动合帧、平移 / 小地图 viewport 交互边界，以及拖动期间不写 sessionStorage / 不调用 `saveEditorProjectLayout`。
+- 关联：`src/components/image-editor/useImageCanvasViewportControls.ts`、`src/components/image-editor/useImageCanvasStageInteractions.ts`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
 ## 图片编辑器宣发素材生成器刷新后不要丢快照
 
 - 现象：图片画布刷新后，宣发素材生成卡片消失，或卡片仍在但游戏名、分类、描述和参考图丢失。
@@ -139,7 +155,7 @@
 
 - 现象：图片画布快速编辑站内示例图、历史 generated 图或 OSS generated 图时，后端返回 `修改图片参考图必须是图片 Data URL。`。
 - 原因：快速编辑直接把图层 `src` 塞进 `/api/editor/images/generations` 的 `referenceImageSrcs`；默认示例图和部分持久化图层的 `src` 是 `/creation-type-references/*.webp`、`/generated-*` 或 OSS URL，而 `api-server` 的编辑参考图解析只接收 `data:image/*;base64,...`。
-- 处理：前端统一通过 `resolveEditorImageReferenceDataUrl(...)` 在提交前读取图片字节并转成图片 Data URL；Data URL 原样透传，`/generated-*` 和 generated OSS URL 走 `/api/assets/read-bytes` 避免 CORS，普通 public 路径直接 fetch。
+- 处理：前端统一通过 `resolveEditorImageReferenceDataUrl(...)` 在提交前读取图片字节并转成图片 Data URL；Data URL 原样透传，`/generated-*` 和 generated OSS URL 先走 `/api/assets/read-url` 换签后由浏览器直读 OSS，直读失败时才 fallback 到 `/api/assets/read-bytes`，普通 public 路径直接 fetch。
 - 验证：`npm run test -- src/services/image-editor/editorImageReference.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx -t "editorImageReference|converts non-data-url quick edit source images before submitting references"`。
 - 关联：`src/services/image-editor/editorImageReference.ts`、`src/components/image-editor/ImageCanvasEditorView.tsx`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
@@ -183,6 +199,14 @@
 - 验证：Network 中 `/api/editor/projects*`、`PATCH /api/editor/projects/{id}`、素材库接口不应出现 `data:image` / `data:video` / `data:audio`；素材库和图层面板缩略图都能换签显示；`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/common/PlatformMediaFrame.test.tsx src/services/assetReadUrlService.test.ts src/services/image-editor/editorProjectClient.test.ts`，后端跑 `cargo test -p api-server editor_project --manifest-path server-rs/Cargo.toml`。
 - 关联：`server-rs/crates/api-server/src/editor_project.rs`、`src/components/image-editor/ImageCanvasEditorModel.ts`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`、`src/components/common/PlatformMediaFrame.tsx`、`src/services/assetReadUrlService.ts`。
 
+## 图片画布项目封面上传失败要有本地展示兜底
+
+- 现象：画布项目已反复打开、保存或操作，但 `/project` 列表卡片仍只显示“项目”占位，没有封面图。
+- 原因：项目封面快照需要先在浏览器生成 Blob，再上传 OSS 并创建 `assetKind: "project-cover-snapshot"` 项目资源；本地 dev 或 OSS CORS 异常时，Blob 生成成功但上传失败，服务端不会产生正式封面资源。
+- 处理：服务端 `project-cover-snapshot` 仍是跨设备正式封面；前端在生成封面 Blob 后立即把 Blob 以项目 ID 写入 IndexedDB，仅作为当前浏览器展示兜底。项目列表读取时优先使用服务端封面资源，其次使用本地 IndexedDB 封面，最后才退回可见画布图层或占位。IndexedDB 兜底不得写入项目快照、不得进入 `editor_project_resource`，也不得替代 OSS / asset object 正式持久化。
+- 验证：`npm run test -- src/components/project/ProjectCanvasCover.test.ts src/components/project/ProjectGalleryView.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx` 覆盖服务端封面优先、本地缓存兜底、上传失败仍保留本地封面缓存；浏览器 smoke 可在 `/project` 对没有服务端封面的项目写入 `genarrative-editor-project-covers` IndexedDB 记录，刷新后应显示 `blob:` 封面图。
+- 关联：`src/services/image-editor/editorProjectCoverCache.ts`、`src/components/project/ProjectGalleryView.tsx`、`src/components/project/ProjectCanvasCover.tsx`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`。
+
 ## 图片画布框选预览要复用源图换签缓存
 
 - 现象：UI 设计素材提取或快速编辑框选时，画布上的红色框选还在，但底部“框选区域预览”卡片变成空白。
@@ -247,6 +271,14 @@
 - 验证：`npm run test -- src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`。
 - 关联：`src/components/image-editor/ImageCanvasGenerationPlacementModel.ts`、`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
 
+## 图片画布生成类 composer 打开后必须自动进入可见安全区
+
+- 现象：生成器、快速编辑、裁扩或角色动作面板打开后，面板可能在当前画布视口外，或被底部工具栏 / 左下 dock 盖住，用户只看到一部分甚至完全看不到输入框。
+- 原因：placement 只负责选择画布世界坐标里的占位落点，面板实际 DOM 宽高、`translateX(-50%)`、移动端 fixed 样式和工具栏覆盖区域没有反向修正 viewport。
+- 处理：所有画布内 composer / 面板渲染后统一走 `resolveViewportForOverlayVisibility(...)`，用真实 DOM 矩形和工具栏安全边界只平移 viewport；新增入口不要在各自按钮 handler 里写独立偏移。
+- 验证：`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasGenerationSurface.test.tsx`。
+- 关联：`src/components/image-editor/ImageCanvasOverlayModel.ts`、`src/components/image-editor/useImageCanvasGenerationSurface.tsx`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 图片画布图片改造也必须创建独立生成器占位
 
 - 现象：点击图片图层的“改造”后，输入框直接挂在原图上，提交时既不像其它生成入口一样有独立占位，也容易让用户误以为会覆盖源图。
@@ -343,6 +375,14 @@
 - 验证：重启 worker 后日志应先出现“非 HTTP 进程跳过 SpacetimeDB 认证快照恢复”，随后出现 `external generation worker 已启动`；同一时间窗口不应再因为 `export_auth_store_snapshot_from_tables` 缺表而阻止 job claim。HTTP `api-server` 的认证恢复日志和 503 降级语义保持不变。
 - 关联：`server-rs/crates/api-server/src/main.rs`、`server-rs/crates/api-server/src/external_generation_worker.rs`、`server-rs/crates/api-server/src/external_generation_worker_controller.rs`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
 
+## 本地旧 external-generation-worker 会抢队列并暴露成 procedure 超时
+
+- 现象：角色 / 画布生成的外部 provider 与 OSS 上传已成功，但 worker 写回 `editor_project_resource` 等业务资源时报 `SpacetimeDB procedure 调用超时`，日志里可能还能看到旧 worker 二进制对 procedure 返回值做 BSATN 反序列化失败。
+- 原因：本地 `npm run dev` / `npm run dev:api-server` 默认 `GENARRATIVE_PROCESS_ROLE=all`，会自己消费队列；如果之前手动启动的同仓库、同 database `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程没有退出，旧二进制会继续 claim 新 job，schema / binding 已更新的当前进程反而没有拿到这次任务。
+- 处理：Linux 本地默认 `all` 角色启动前，`scripts/dev.mjs` 会扫描同仓库、同 SpacetimeDB server / database、同 `server-rs/target/debug/api-server` 的遗留 `external-generation-worker` 并停止；显式 `GENARRATIVE_PROCESS_ROLE=api` 做生产式拆分验证时不清理独立 worker。
+- 验证：`ps -eo pid,ppid,lstart,cmd | rg 'server-rs/target/debug/api-server'` 只应看到当前 `all` 或显式拆分下预期的进程；`/healthz` 和 `/readyz` 成功后，生成 job 应由当前进程消费并把业务资源写回。
+- 关联：`scripts/dev.mjs`、`scripts/dev.test.ts`、`server-rs/crates/api-server/src/external_generation_worker.rs`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
+
 ## 外部生成 worker 业务写回必须同事务校验 lease guard
 
 - 现象：worker `complete/fail` 已校验 `worker_id + lease_token`，但如果玩法 session / work profile 写回在此之前单独调用，过期 worker 仍可能先写入业务状态，随后才在 job complete/fail 阶段失败；带计费包装的旧 worker 还可能因为 stale guard 错误触发补偿退款。
diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
index 66a94e92b..d9d3a8e3f 100644
--- a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -64,7 +64,24 @@
 └─ manifest.txt
 ```
 
-角色动作单图层导出时，直接生成独立 ZIP：
+角色动作单图层右键“导出为”展开二级菜单：
+
+- `序列帧导出（zip）` 生成普通序列帧 ZIP，保留完整 `frames/`，并由前端把成功读取的帧拼成 `preview.gif`。
+- `Spine 导出（zip）` 生成 Spine JSON ZIP，保留 `frames/`，并附带 `skeleton.json`。
+
+普通序列帧 ZIP 结构：
+
+```text
+角色动作-Sequence.zip
+├─ frames/
+│  ├─ frame-01.png
+│  └─ frame-02.png
+├─ preview.gif
+├─ metadata.json
+└─ manifest.txt
+```
+
+Spine JSON ZIP 结构：
 
 ```text
 角色动作-SpineJSON.zip
@@ -149,9 +166,10 @@ assetObjectId > objectKey > sourceAssetId > src
 4. 对每个素材源读取 Blob：
    - `data:image/...` 直接转换为 Blob。
    - 同源或可访问 URL 使用 `fetch` 拉取 Blob。
-   - 私有 generated / OSS 素材必须走同源 `/api/assets/read-bytes` 读取字节；不要在导出流程里直接 `fetch` OSS 签名 URL，避免浏览器 CORS 拦截。
+   - 私有 generated / OSS 素材先走 `/api/assets/read-url` 换签并由浏览器直接 `fetch` OSS 签名 URL；只有换签或 OSS 字节读取失败时，才 fallback 到同源 `/api/assets/read-bytes`。
    - `mediaType="image-sequence"` 逐帧读取 `imageSequenceFrames`，写入 `sequences/<编号-标题>/frames/`。
-   - `mediaType="image-sequence"` 同步写入 `skeleton.json`，供 Spine Editor 或 runtime 以 slot attachment timeline 方式播放序列帧。
+   - 画布素材 ZIP 内的 `mediaType="image-sequence"` 同步写入 `skeleton.json`，供 Spine Editor 或 runtime 以 slot attachment timeline 方式播放序列帧。
+   - 单图层普通序列帧导出写入 `preview.gif`，由前端基于成功读取的帧生成动画预览，不依赖压缩包读取时再临时播放 PNG。
    - 拉取失败时记录失败项，不中断整个导出。
 5. 使用 `JSZip` 写入 `images/`、`metadata.json` 和 `manifest.txt`。
 6. `zip.generateAsync({ type: 'blob' })` 生成文件。
@@ -176,6 +194,8 @@ assetObjectId > objectKey > sourceAssetId > src
 - 图层的锁定、翻转、分组状态写入元数据。
 - `data:image` 图片不经过网络请求即可导出。
 - URL 图片 fetch 失败时不中断其他素材导出。
+- 动作图层右键菜单把 `导出为` 作为一级入口，二级菜单提供 `序列帧导出（zip）` 和 `Spine 导出（zip）`。
+- 单图层普通序列帧 ZIP 包含 `frames/`、`preview.gif`、`metadata.json` 和 `manifest.txt`，且不包含 `skeleton.json`。
 - 序列帧导出的 `skeleton.json` 可被独立验证器解析并预览。
 
 ## Spine JSON 验证器
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index baee4e762..b4f865dfc 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -35,7 +35,7 @@
 - 吸附阈值以屏幕像素为准，换算到世界坐标后参与拖拽计算；边缘 / 中心线和等距吸附共用同一阈值。拖拽结束后只保存最终图层或生成占位布局，不保存临时参考线。
 - 项目页封面和画布图片图层必须先渲染项目卡、图层外框、标题、尺寸和操作 chrome；图片换签或解码未完成时，只在图片区域显示轻量加载态，不阻塞外框和文字等低成本信息先出现。
 - 素材量增大时，拖拽吸附热路径不得对所有素材做全量两两配对。边缘 / 中心线吸附保持线性扫描；等距吸附只在跨轴相交且轴向邻近的候选图层之间计算，避免大量远处素材拖慢 pointermove。
-- 画布自动保存使用防抖 + 串行队列：图层拖拽、缩放、资源新增和修改结果创建后延迟保存工程快照；如果上一次 `PATCH /api/editor/projects/{projectId}` 尚未完成，只保留最新待保存快照，待当前请求结束后再发送下一次保存，避免慢保存请求并发堆积触发发布入口连接限流。`PATCH /api/editor/projects/{projectId}` 只返回 `{ projectId, canvasId, updatedAt }` 轻量 ack，不再返回完整 project，前端必须以后续显式读取或生成完成返回的后端快照作为项目真相。
+- 画布自动保存使用防抖 + 串行队列：图层拖拽、缩放、资源新增和修改结果创建后延迟保存工程快照；如果上一次 `PATCH /api/editor/projects/{projectId}` 尚未完成，只保留最新待保存快照，待当前请求结束后再发送下一次保存，避免慢保存请求并发堆积触发发布入口连接限流。手型平移和小地图拖动属于临时 viewport 交互，拖动中只更新画布显示，不触发 `serializeCanvasLayout`、sessionStorage 项目缓存写入或封面快照上传，`pointerup` / `pointercancel` 后再保存最终 viewport。`PATCH /api/editor/projects/{projectId}` 只返回 `{ projectId, canvasId, updatedAt }` 轻量 ack，不再返回完整 project，前端必须以后续显式读取或生成完成返回的后端快照作为项目真相。
 - 移动端保留同一套状态模型，底部工具栏可横向滚动，侧边栏默认可收起。
 - 项目页卡片默认点击打开工程；hover 项目卡片右下角显示 `...` 菜单，菜单承载重命名和删除。选择模式下项目卡片只切换选中态，不进入画布；底部批量工具栏提供全选 / 取消全选、已选数量、批量删除和退出选择模式。
 
@@ -74,7 +74,7 @@
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
 - `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`，宣发素材携带 `kind: "publication-material"` 时固定归一为 `gpt-image-2`，不支持 `nanobanana2`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；请求可携带 `projectId`、`assetFolderId`、`assetKind`、`generationInputs` 和 `sourceResourceId`，后端生成成功后创建 project resource / 账号素材并在响应中返回 resource / asset 快照。
 - `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`、`priceMudPoints`、`projectId`、`assetFolderId` 和 `generationInputs`；`priceMudPoints` 必须来自编辑器生成计费配置中对应生图模型的尺寸档位（如 `nanobanana2` 的 `0.5K / 1K / 2K` 或 `gpt-image-2` 的 `1K / 2K`），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`。后端把 spritesheet 和拆分后的 icon 都保存为 project resource / 账号素材，并随响应返回对应快照。
-- `POST /api/editor/ui-designs/assets/extractions`：以前端已绘入红色框选轮廓的 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet` 生成素材 spritesheet，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求必须携带 `aspectRatio: "1:1"`、`imageSize: "1K" | "2K"` 和 `priceMudPoints`；框选数量不超过 6 个时前端按 `1:1·1K` 与 gpt-image-2 1K 价格提交，超过 6 个时按 `1:1·2K` 与 2K 价格提交。后端必须在调用上游前校验比例、尺寸和泥点价格，只允许 `1:1 / 1K / 2K`。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
+- `POST /api/editor/ui-designs/assets/extractions`：以前端已绘入红色框选轮廓的 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。` 生成素材 spritesheet，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求必须携带 `aspectRatio: "1:1"`、`imageSize: "1K" | "2K"` 和 `priceMudPoints`；框选数量不超过 6 个时前端按 `1:1·1K` 与 gpt-image-2 1K 价格提交，超过 6 个时按 `1:1·2K` 与 2K 价格提交。后端必须在调用上游前校验比例、尺寸和泥点价格，只允许 `1:1 / 1K / 2K`。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据；请求携带 project / asset 上下文时由后端创建新 resource / asset，前端只消费响应快照。
 - `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音、默认联网搜索标记和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端允许 6 类比例、4 到 15 秒整数、`480p / 720p / 1080p`，并拒绝 `seedance2.0-fast + 1080p`；`sound=on/off` 映射 Ark `generate_audio=true/false`。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
@@ -105,7 +105,7 @@
 - 快速编辑面板底部必须显示当前选择的比例 / 尺寸和模型，参数按钮可展开修改且视觉对齐其它可编辑面板；打开时视口聚焦必须预留底部面板空间，面板位于素材下方，不得遮挡原素材，且素材在当前屏幕内完整可见。参考图请求顺序为额外参考图在前、原图作为隐式最后一张提交，信息面板输入快照只展示用户额外选择的参考图。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图行引用，不包含后端拼接 Prompt，不再展示独立 Size 字段，也不渲染参考图 Data URL 缩略图。
-- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照；前端轻量去背必须复用共享 `chromaKey` 的绿幕 / 近白背景模型，不再只按四角颜色扩散，避免纯白角色主体或主体内部浅色区域被扣碎。UI设计图的提取素材必须先进入红框素材框选状态，默认启用矩形框选，右侧框选工具与快速编辑统一且可再次点击取消启用态，当前启用工具按钮必须保持高亮。素材提取面板必须在素材下方，使用与生成新素材一致的面板宽度和底部模型 / 按钮样式，提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选区域截图预览、固定模型 `gpt-image-2`、左下角计划规格 `1:1·1K/2K` 和 `提取 · N泥点` 按钮，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。至少框选一个区域后才可提交，前端把红色轮廓绘入原图后固定走 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
+- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照；前端轻量去背必须复用共享 `chromaKey` 的绿幕 / 近白背景模型，不再只按四角颜色扩散，避免纯白角色主体或主体内部浅色区域被扣碎。UI设计图的提取素材必须先进入红框素材框选状态，默认启用矩形框选，右侧框选工具与快速编辑统一且可再次点击取消启用态，当前启用工具按钮必须保持高亮。素材提取面板必须在素材下方，使用与生成新素材一致的面板宽度和底部模型 / 按钮样式，提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选区域截图预览、固定模型 `gpt-image-2`、左下角计划规格 `1:1·1K/2K` 和 `提取 · N泥点` 按钮，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。至少框选一个区域后才可提交，前端把红色轮廓绘入原图后固定走 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
 - 重绘生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图，且重绘面板保持打开。
 - 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
 - 快速编辑的额外参考图同样必须在前端读取成图片 Data URL 后提交；后端 `referenceImageSrcs` 上限为 9 张，承载 8 张额外参考图加 1 张原图。
@@ -116,7 +116,7 @@
 - `生成角色动作` 的完成结果同样按视频素材处理：图层主 `src` 使用后端返回的 `previewVideoPath`，`mediaType` 固定为 `video`，`assetKind` 固定为 `character-animation`，首个透明帧只写入 `thumbnailSrc` 供 poster 和后续动作源使用。下载和 ZIP 导出必须因此得到 mp4/webm/mov 等真实视频文件，不能回退为首帧 PNG；后端抽帧、绿幕去背和帧素材落盘流程仍完整保留。
 - 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索，并支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
 - 图层面板支持按图层名、生成信息、模型、任务和媒体类型搜索；支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
-- 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动。
+- 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
 - 鼠标滚轮默认垂直滚动画布视口；按住 Ctrl / Cmd 滚轮才缩放画布，并阻止浏览器页面缩放。缩放比例显示保持现有换算口径，最低可缩小到 `5%`。
 - 工程刷新后能从后端恢复资源、图层布局和 viewport。
 - “我的”页项目入口能进入 `/project`；项目页能列出工程、重命名 / 删除单个工程、批量选择和批量删除；点击工程后进入 `/editor/canvas?projectid=<projectId>` 并按 query 加载该工程。
diff --git a/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md b/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
index 4cc568e2b..ecd0e4a58 100644
--- a/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
+++ b/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
@@ -53,7 +53,7 @@ Windows 本地 `npm run dev` / `npm run dev:api-server` 会用空的 `RUSTC_WRAP
 
 Windows 本地如果已在 `%LOCALAPPDATA%\Genarrative\ffmpeg\bin` 安装 FFmpeg，`npm run dev` / `npm run dev:api-server` 会自动把该目录加入本次 `api-server` 子进程 `Path`，并注入 `CHARACTER_ANIMATION_FFMPEG_PATH` / `CHARACTER_ANIMATION_FFPROBE_PATH` 的绝对路径。这样即使外层终端或长期运行的 dev 进程是在安装 FFmpeg 之前启动，角色动画抽帧也不会继续因为 `ffmpeg: program not found` 失败；若手动配置了上述环境变量或 `GENARRATIVE_CHARACTER_ANIMATION_*` 前缀变量，显式配置优先。
 
-开发态 `npm run dev` 与 `npm run dev:api-server` 会默认注入 `GENARRATIVE_DEV_PASSWORD_ENTRY_AUTO_REGISTER_ENABLED=true` 和 `GENARRATIVE_PROCESS_ROLE=all`，因此密码登录在本地开发环境可直接注册未知手机号账号，且本地 `api-server` 会同时监听 HTTP 并消费外部生成队列；显式设置 `GENARRATIVE_PROCESS_ROLE` 时保留显式值。生产环境仍按 `api-server` 配置默认关闭密码自动注册，并由独立 worker 进程消费队列。
+开发态 `npm run dev` 与 `npm run dev:api-server` 会默认注入 `GENARRATIVE_DEV_PASSWORD_ENTRY_AUTO_REGISTER_ENABLED=true` 和 `GENARRATIVE_PROCESS_ROLE=all`，因此密码登录在本地开发环境可直接注册未知手机号账号，且本地 `api-server` 会同时监听 HTTP 并消费外部生成队列；显式设置 `GENARRATIVE_PROCESS_ROLE` 时保留显式值。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`。当前进入持久队列的外部生成动作包括：拼图 `compile_puzzle_draft` / `generate_puzzle_images` / `generate_puzzle_ui_background`，跳一跳 `compile-draft` / `regenerate-tiles`，拼消消 `compile-draft` / `regenerate-atlas`，敲木鱼 `compile-draft` / `regenerate-hit-object`，以及图片画布 `editor_image_generation` / `editor_image_edit` / `editor_icon_spritesheet_generation` / `editor_ui_design_asset_extraction` / `editor_character_animation_generation` / `editor_video_generation` / `editor_sound_effect_generation` / `editor_background_music_generation`。非外部 provider 生成动作继续 inline，不进入队列。显式把本地进程角色设为 `api` 且没有 worker 时，HTTP 只返回 queued/running，不会兜底执行外部 provider。
 
diff --git a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
index ed47b3835..54e164ad9 100644
--- a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
+++ b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
@@ -202,7 +202,7 @@ RPG / 拼图等运行态存档仍以 `/api/profile/save-archives` 的后端列
 
 跳一跳作品架删除入口必须走 `/api/creation/jump-hop/works/{profile_id}`，并通过 SpacetimeDB 同步删除 work profile、源 session、运行态 run 与事件，再刷新作品架和公开广场；不得只做前端本地隐藏。
 
-推荐页匿名游玩不再限定为跳一跳。移动端一级 `推荐` Tab 是内嵌运行态刷卡流，会自动选择推荐作品并启动对应玩法；移动端首次进入或刷新 `/` 平台首页时弹出一次欢迎提示，说明移动端仅支持作品展示、体验创作工具需使用电脑端访问，用户点击 `好` 后关闭；本次页面生命周期内切换下方页签再回到首页不再弹出。桌面端首页不启动这套移动推荐运行态，而是渲染桌面发现壳，展示 `今日游戏`、`推荐`、`作品分类` 等桌面内容。推荐页候选顺序由前端轻量推荐算法 `platformRecommendation.ts` 统一生成：先按公开作品 key 去重，再使用公开读模型已有的精选来源、近 7 日游玩、点赞、改造、总游玩、发布时间新鲜度、封面和标签完整度做确定性评分，最后优先交错不同玩法类型；只要还有其它玩法候选，就不要连续推荐同一玩法，只有候选池已没有其它玩法时才允许同玩法相邻。该算法不得新增前端业务真相或绕过公开作品 read model。断点事实统一走 `platformEntryResponsive.ts` 的 `usePlatformDesktopLayout()`，平台壳和首页视图必须共用同一个判断，避免桌面发现页与移动推荐页同时挂载、重复触发请求或启动运行态。移动端推荐页拿到推荐作品列表后必须预加载每个作品的卡片封面、主封面和玩法兜底封面；启动或切换作品时先展示当前带玩法标签和标题的作品卡面遮罩，嵌入 runtime 在卡面下层加载，不得再从卡面闪切到另一层单独纯封面图。作品切换提交后，当前 runtime 遮罩接手已在屏幕上的卡面时必须瞬时贴合，不允许再执行“卡面到同一卡面”的淡入或重绘过渡；推荐页 runtime 必须通过统一 `ready` 门控等待对应运行态 run / profile、lazy runtime 组件和 runtime DOM 内图片资源都准备好，且必须持续观察后续新增图片、内联 `background-image` 和换签中的资源标记，不能只在首次挂载时扫描主图或封面；`ready` 返回 `true` 后才由外层放开游戏画面并只让卡面遮罩渐隐。遮罩层级必须高于并隔离下层 runtime，防止运行态 HUD、canvas 或高 `z-index` 子层穿透到封面上；ready 前不展示“加载中”文案，但封面内必须保留无文案加载动效或进度条，避免用户误以为卡片损坏，也不得把未准备好的运行态直接暴露给用户。切换推荐作品时，如果上一条作品的启动请求、退出收口或目标玩法 busy 状态尚未结束，应继续显示当前作品卡面遮罩并等待下一轮自动启动；只有目标作品启动明确失败时，才显示“作品暂时无法进入，请稍后再试。”这类失败态。推荐页内拼图通关后的同 run 相似作品推进不视为推荐作品切换，不能重新显示启动封面；如果需要跨公开作品进入下一关，则必须走推荐页统一切卡入口，不能复用拼图 runtime 的跨作品 handoff，也不能直接把当前 run 改写到另一个作品，`activeRecommendEntryKey` 只能由推荐页统一选择下一作品后更新。推荐页嵌入运行态启动时按真实身份分流：已登录用户或本地已有 access token 时继续使用账号 Bearer，但请求选项必须是 local auth impact，避免单卡 401 清空整站登录态；只有确认为匿名访客时才申请短期 Runtime Guest Token，并只把它作为局部请求头传给运行态客户端，不写入全局登录态、不触发 refresh，也不把匿名流量伪装成普通用户。当前覆盖矩阵为：跳一跳、视觉小说、抓大鹅 Match3D、方洞挑战、拼图、敲木鱼、大鱼吃小鱼、汪汪声浪。每个模板的启动请求、推荐页内后续运行态动作以及需要上报的 play/finish/leaderboard/next-level 类请求，都必须继续按该身份分流；公开读取入口仍可匿名读取，创作、个人作品、删除、发布、Remix 等账号/所有权动作仍保持普通用户鉴权。推荐 runtime 的 `none` / `background` / `runtime-guest` 请求计划和拼图 `default` / `isolated` runtime auth mode 由 `platformRecommendRuntimeAuthModel.ts` 统一判定，平台壳只负责读取 token、申请 Runtime Guest Token 和传递 request options。推荐 runtime 自动启动只由 `platformPublicGalleryFlow.ts` 输出 `noop` / `clear` / `start(entry)` 决策，平台壳只执行清空 state 或启动指定作品。
+推荐页匿名游玩不再限定为跳一跳。移动端一级 `推荐` Tab 是内嵌运行态刷卡流，会自动选择推荐作品并启动对应玩法；移动端首次进入或刷新站点时弹出一次欢迎提示，说明移动端仅支持作品展示、体验创作工具需使用电脑端访问，用户点击 `好` 后关闭；本次页面生命周期内站内导航或切换下方页签不再弹出。桌面端首页不启动这套移动推荐运行态，而是渲染桌面发现壳，展示 `今日游戏`、`推荐`、`作品分类` 等桌面内容。推荐页候选顺序由前端轻量推荐算法 `platformRecommendation.ts` 统一生成：先按公开作品 key 去重，再使用公开读模型已有的精选来源、近 7 日游玩、点赞、改造、总游玩、发布时间新鲜度、封面和标签完整度做确定性评分，最后优先交错不同玩法类型；只要还有其它玩法候选，就不要连续推荐同一玩法，只有候选池已没有其它玩法时才允许同玩法相邻。该算法不得新增前端业务真相或绕过公开作品 read model。断点事实统一走 `platformEntryResponsive.ts` 的 `usePlatformDesktopLayout()`，平台壳和首页视图必须共用同一个判断，避免桌面发现页与移动推荐页同时挂载、重复触发请求或启动运行态。移动端推荐页拿到推荐作品列表后必须预加载每个作品的卡片封面、主封面和玩法兜底封面；启动或切换作品时先展示当前带玩法标签和标题的作品卡面遮罩，嵌入 runtime 在卡面下层加载，不得再从卡面闪切到另一层单独纯封面图。作品切换提交后，当前 runtime 遮罩接手已在屏幕上的卡面时必须瞬时贴合，不允许再执行“卡面到同一卡面”的淡入或重绘过渡；推荐页 runtime 必须通过统一 `ready` 门控等待对应运行态 run / profile、lazy runtime 组件和 runtime DOM 内图片资源都准备好，且必须持续观察后续新增图片、内联 `background-image` 和换签中的资源标记，不能只在首次挂载时扫描主图或封面；`ready` 返回 `true` 后才由外层放开游戏画面并只让卡面遮罩渐隐。遮罩层级必须高于并隔离下层 runtime，防止运行态 HUD、canvas 或高 `z-index` 子层穿透到封面上；ready 前不展示“加载中”文案，但封面内必须保留无文案加载动效或进度条，避免用户误以为卡片损坏，也不得把未准备好的运行态直接暴露给用户。切换推荐作品时，如果上一条作品的启动请求、退出收口或目标玩法 busy 状态尚未结束，应继续显示当前作品卡面遮罩并等待下一轮自动启动；只有目标作品启动明确失败时，才显示“作品暂时无法进入，请稍后再试。”这类失败态。推荐页内拼图通关后的同 run 相似作品推进不视为推荐作品切换，不能重新显示启动封面；如果需要跨公开作品进入下一关，则必须走推荐页统一切卡入口，不能复用拼图 runtime 的跨作品 handoff，也不能直接把当前 run 改写到另一个作品，`activeRecommendEntryKey` 只能由推荐页统一选择下一作品后更新。推荐页嵌入运行态启动时按真实身份分流：已登录用户或本地已有 access token 时继续使用账号 Bearer，但请求选项必须是 local auth impact，避免单卡 401 清空整站登录态；只有确认为匿名访客时才申请短期 Runtime Guest Token，并只把它作为局部请求头传给运行态客户端，不写入全局登录态、不触发 refresh，也不把匿名流量伪装成普通用户。当前覆盖矩阵为：跳一跳、视觉小说、抓大鹅 Match3D、方洞挑战、拼图、敲木鱼、大鱼吃小鱼、汪汪声浪。每个模板的启动请求、推荐页内后续运行态动作以及需要上报的 play/finish/leaderboard/next-level 类请求，都必须继续按该身份分流；公开读取入口仍可匿名读取，创作、个人作品、删除、发布、Remix 等账号/所有权动作仍保持普通用户鉴权。推荐 runtime 的 `none` / `background` / `runtime-guest` 请求计划和拼图 `default` / `isolated` runtime auth mode 由 `platformRecommendRuntimeAuthModel.ts` 统一判定，平台壳只负责读取 token、申请 Runtime Guest Token 和传递 request options。推荐 runtime 自动启动只由 `platformPublicGalleryFlow.ts` 输出 `noop` / `clear` / `start(entry)` 决策，平台壳只执行清空 state 或启动指定作品。
 
 ## 敲木鱼
 
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index d658c012c..d89c6881c 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -99,6 +99,7 @@
 - 视频待生成占位必须与面板当前比例和清晰度同步：默认 `16:9 · 480p` 为 `854 x 480`，切换比例、`720p` 或 `1080p` 后按比例和清晰度重算偶数宽度；调整参数时保持占位中心点不变。
 - 面板中用户修改比例、尺寸或清晰度后，已有空白待生成占位立即同步更新 `width / height / originalWidth / originalHeight`，且保持中心点不跳动。
 - 快速编辑点击生成后不在原图上播放生成中遮罩，而是立即创建独立 `Quick Edit Generator` 画布生成占位并播放生成中动画；该占位必须复用新建图片的 placement 避让逻辑，和已有素材 / 生成占位至少保留 32px 画布间距，不允许固定放到原图右侧后压住其它素材；生成成功后结果落在该占位框位置，失败时占位标记失败并恢复快速编辑面板。
+- 任何会打开画布内 composer / 面板的入口，必须在面板渲染后通过统一 overlay 可见性校正检查真实 DOM 矩形；如果面板超出画布视口，或底部工具栏 / 左下 dock 会遮住面板，就只平移当前 viewport 让面板完整进入安全区域。新增生成类入口不要在按钮 handler 里手写单独的避让偏移。
 
 ## 画布悬浮信息
 
@@ -183,7 +184,7 @@
 - 生成视频 / 角色形象 / 角色动作 / 音效 / 背景音乐新建后，画布占位空白样式和右上角标签均与对应生成类型一致，不再统一使用图片占位 icon。
 - 新建空白待生成占位的尺寸必须和面板参数一致；图片类修改比例 / 尺寸、视频修改清晰度后，画布空白占位同步变更且保持中心点。
 - 点击角色图只选中图层并显示工具栏，不自动弹出重绘、快速编辑或角色动画面板；点击工具栏或右键菜单中的 `生成动画` 才创建角色动作占位和面板。
-- 点击 UI 设计图只选中图层并显示工具栏；工具栏在 `去除背景按钮` 后显示 `提取素材`，点击后画布自动缩放平移到素材完整展示，并在素材下方显示 UI 素材提取面板。UI 素材提取默认启用矩形框选，右侧工具栏与快速编辑统一，当前启用工具按钮保持高亮，点击同一工具可取消启用态；面板提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选截图预览、固定模型 `gpt-image-2`、计划规格和提取按钮泥点，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。用户至少框选一个区域后才能点击 `提取`，前端把红色轮廓绘入原图作为参考图，再固定用提示词 `仅提取被红色框框选的素材并整理成spritesheet` 生成 spritesheet。框选数量不超过阈值时提交 `1:1·1K` 参数，超过阈值时提交 `1:1·2K` 参数；后端按 gpt-image-2 对应尺寸计算扣费，后续复用图标素材拆分流程，把 spritesheet 图集和拆分素材都放到画布。
+- 点击 UI 设计图只选中图层并显示工具栏；工具栏在 `去除背景按钮` 后显示 `提取素材`，点击后画布自动缩放平移到素材完整展示，并在素材下方显示 UI 素材提取面板。UI 素材提取默认启用矩形框选，右侧工具栏与快速编辑统一，当前启用工具按钮保持高亮，点击同一工具可取消启用态；面板提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选截图预览、固定模型 `gpt-image-2`、计划规格和提取按钮泥点，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。用户至少框选一个区域后才能点击 `提取`，前端把红色轮廓绘入原图作为参考图，再固定用提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。` 生成 spritesheet。框选数量不超过阈值时提交 `1:1·1K` 参数，超过阈值时提交 `1:1·2K` 参数；后端按 gpt-image-2 对应尺寸计算扣费，后续复用图标素材拆分流程，把 spritesheet 图集和拆分素材都放到画布。
 - 生成游戏音效面板底部不显示字段标题，左下角只有一个时长参数按钮，选项为 Vidu duration `2-10` 秒；右下角固定模型胶囊显示 `Vidu` 并紧贴生成按钮。
 - 生成游戏背景音乐面板右下角固定模型胶囊显示 `Suno` 并紧贴生成按钮；`make_instrumental` 不在 UI 中展示。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
diff --git a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
index e73ec443c..19fa92399 100644
--- a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
+++ b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
@@ -54,7 +54,7 @@
 - 后端固定使用 `gpt-image-2` 图片编辑链路，并固定提示词：
 
 ```text
-仅提取被红色框框选的素材并整理成spritesheet
+仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。
 ```
 
 - 后端收到 spritesheet 后复用图标素材的连通域拆分能力；未知素材数量时按从上到下、从左到右自动命名为 `素材 1`、`素材 2`。
diff --git a/scripts/dev.mjs b/scripts/dev.mjs
index 4fcd73b11..169ec23f6 100644
--- a/scripts/dev.mjs
+++ b/scripts/dev.mjs
@@ -5,6 +5,7 @@ import {
   existsSync,
   readdirSync,
   readFileSync,
+  readlinkSync,
   realpathSync,
   statSync,
   watch,
@@ -817,6 +818,182 @@ async function stopProcess(child, label) {
   });
 }
 
+function parseProcessEnvBlock(rawEnv) {
+  return String(rawEnv ?? '')
+    .split('\0')
+    .filter(Boolean)
+    .reduce((env, entry) => {
+      const separatorIndex = entry.indexOf('=');
+      if (separatorIndex <= 0) {
+        return env;
+      }
+      env[entry.slice(0, separatorIndex)] = entry.slice(separatorIndex + 1);
+      return env;
+    }, {});
+}
+
+function normalizeProcessLinkTarget(path) {
+  return String(path ?? '').replace(/ \(deleted\)$/u, '');
+}
+
+function isSamePathForDevProcess(left, right) {
+  const normalizedLeft = normalizePath(normalizeProcessLinkTarget(left));
+  const normalizedRight = normalizePath(normalizeProcessLinkTarget(right));
+  return normalizedLeft === normalizedRight;
+}
+
+function isStaleExternalGenerationWorkerProcess({
+  cwd,
+  env,
+  exe,
+  expectedDatabase,
+  expectedExePath,
+  expectedRepoRoot,
+  expectedSpacetimeServer,
+  pid,
+}) {
+  if (!Number.isInteger(pid) || pid === process.pid) {
+    return false;
+  }
+  if (env.GENARRATIVE_PROCESS_ROLE !== 'external-generation-worker') {
+    return false;
+  }
+  if (String(env.GENARRATIVE_SPACETIME_SERVER_URL ?? '') !== expectedSpacetimeServer) {
+    return false;
+  }
+  if (String(env.GENARRATIVE_SPACETIME_DATABASE ?? '') !== expectedDatabase) {
+    return false;
+  }
+  if (!isSamePathForDevProcess(cwd, expectedRepoRoot)) {
+    return false;
+  }
+  return isSamePathForDevProcess(exe, expectedExePath);
+}
+
+function readLinuxApiServerProcessSnapshot(pid) {
+  try {
+    return {
+      cwd: readlinkSync(`/proc/${pid}/cwd`),
+      env: parseProcessEnvBlock(readFileSync(`/proc/${pid}/environ`, 'utf8')),
+      exe: readlinkSync(`/proc/${pid}/exe`),
+      pid,
+    };
+  } catch (error) {
+    if (
+      error?.code === 'ENOENT' ||
+      error?.code === 'EACCES' ||
+      error?.code === 'EPERM'
+    ) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+function listLinuxProcessIds(procDir = '/proc') {
+  try {
+    return readdirSync(procDir)
+      .map((name) => Number.parseInt(name, 10))
+      .filter(Number.isInteger);
+  } catch {
+    return [];
+  }
+}
+
+function isLinuxProcessAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function waitForLinuxProcessExit(pid, timeoutMs) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (!isLinuxProcessAlive(pid)) {
+      return true;
+    }
+    await sleep(100);
+  }
+  return !isLinuxProcessAlive(pid);
+}
+
+async function stopLinuxProcessId(pid, label) {
+  try {
+    process.kill(pid, 'SIGTERM');
+  } catch (error) {
+    if (error?.code === 'ESRCH') {
+      return true;
+    }
+    console.warn(`[dev:${label}] 停止旧进程失败 pid=${pid}: ${error.message}`);
+    return false;
+  }
+
+  if (await waitForLinuxProcessExit(pid, 5000)) {
+    return true;
+  }
+
+  try {
+    process.kill(pid, 'SIGKILL');
+  } catch (error) {
+    if (error?.code === 'ESRCH') {
+      return true;
+    }
+    console.warn(`[dev:${label}] 强制停止旧进程失败 pid=${pid}: ${error.message}`);
+    return false;
+  }
+  return waitForLinuxProcessExit(pid, 1000);
+}
+
+async function stopStaleLocalExternalGenerationWorkers({
+  database,
+  logStream = null,
+  repoRootPath = repoRoot,
+  processRole,
+  spacetimeServer,
+}) {
+  if (process.platform !== 'linux') {
+    return [];
+  }
+  if (processRole !== 'all') {
+    return [];
+  }
+
+  const expectedExePath = resolve(repoRootPath, 'server-rs/target/debug/api-server');
+  const stopped = [];
+  for (const pid of listLinuxProcessIds()) {
+    const snapshot = readLinuxApiServerProcessSnapshot(pid);
+    if (
+      !snapshot ||
+      !isStaleExternalGenerationWorkerProcess({
+        ...snapshot,
+        expectedDatabase: database,
+        expectedExePath,
+        expectedRepoRoot: repoRootPath,
+        expectedSpacetimeServer: spacetimeServer,
+      })
+    ) {
+      continue;
+    }
+
+    const label = snapshot.env.GENARRATIVE_EXTERNAL_GENERATION_WORKER_ID
+      ? `${pid}(${snapshot.env.GENARRATIVE_EXTERNAL_GENERATION_WORKER_ID})`
+      : String(pid);
+    if (await stopLinuxProcessId(pid, 'api-server')) {
+      stopped.push(label);
+    }
+  }
+
+  if (stopped.length > 0) {
+    const line = `[dev:api-server] 已停止同库旧 external-generation-worker 进程: ${stopped.join(', ')}\n`;
+    process.stdout.write(line);
+    logStream?.write(line);
+  }
+  return stopped;
+}
+
 function stopWindowsProcessTree(pid) {
   if (!pid) {
     return;
@@ -1436,6 +1613,12 @@ class DevRunner {
     mergedEnv.GENARRATIVE_API_SERVER_LOG_FILE = logFile;
 
     stopExistingWindowsApiServer(logStream);
+    await stopStaleLocalExternalGenerationWorkers({
+      database: this.options.database,
+      logStream,
+      processRole: mergedEnv.GENARRATIVE_PROCESS_ROLE,
+      spacetimeServer: this.state.spacetimeServer,
+    });
 
     console.log(`[dev:api-server] log: ${logFile}`);
     console.log(
@@ -2278,7 +2461,9 @@ export {
   DevRunner,
   isDirectModuleExecution,
   isSpacetimePublishPermissionError,
+  isStaleExternalGenerationWorkerProcess,
   normalizeCargoVersionRequirement,
+  parseProcessEnvBlock,
   parseArgs,
   parseSpacetimeToolVersion,
   resolveDevStackStatePath,
diff --git a/scripts/dev.test.ts b/scripts/dev.test.ts
index a95ff9981..18d810a85 100644
--- a/scripts/dev.test.ts
+++ b/scripts/dev.test.ts
@@ -16,7 +16,9 @@ import {
   DevRunner,
   isDirectModuleExecution,
   isSpacetimePublishPermissionError,
+  isStaleExternalGenerationWorkerProcess,
   normalizeCargoVersionRequirement,
+  parseProcessEnvBlock,
   parseArgs,
   parseSpacetimeToolVersion,
   resolveDevStackStatePath,
@@ -282,6 +284,67 @@ describe('dev scheduler api-server env', () => {
   });
 });
 
+describe('dev scheduler local worker cleanup', () => {
+  const expected = {
+    expectedDatabase: 'xushi-p4wfr',
+    expectedExePath: '/repo/Genarrative/server-rs/target/debug/api-server',
+    expectedRepoRoot: '/repo/Genarrative',
+    expectedSpacetimeServer: 'http://127.0.0.1:10002',
+  };
+
+  test('解析 /proc environ 的 NUL 分隔格式', () => {
+    expect(parseProcessEnvBlock('A=1\0B=two=parts\0\0')).toEqual({
+      A: '1',
+      B: 'two=parts',
+    });
+  });
+
+  test('识别同仓库同库的旧 external-generation-worker', () => {
+    expect(
+      isStaleExternalGenerationWorkerProcess({
+        ...expected,
+        cwd: '/repo/Genarrative',
+        env: {
+          GENARRATIVE_PROCESS_ROLE: 'external-generation-worker',
+          GENARRATIVE_SPACETIME_DATABASE: 'xushi-p4wfr',
+          GENARRATIVE_SPACETIME_SERVER_URL: 'http://127.0.0.1:10002',
+        },
+        exe: '/repo/Genarrative/server-rs/target/debug/api-server (deleted)',
+        pid: 12345,
+      }),
+    ).toBe(true);
+  });
+
+  test('不同数据库或仓库的 worker 不会被当成本地旧进程', () => {
+    expect(
+      isStaleExternalGenerationWorkerProcess({
+        ...expected,
+        cwd: '/repo/Genarrative',
+        env: {
+          GENARRATIVE_PROCESS_ROLE: 'external-generation-worker',
+          GENARRATIVE_SPACETIME_DATABASE: 'other-db',
+          GENARRATIVE_SPACETIME_SERVER_URL: 'http://127.0.0.1:10002',
+        },
+        exe: '/repo/Genarrative/server-rs/target/debug/api-server',
+        pid: 12345,
+      }),
+    ).toBe(false);
+    expect(
+      isStaleExternalGenerationWorkerProcess({
+        ...expected,
+        cwd: '/repo/Other',
+        env: {
+          GENARRATIVE_PROCESS_ROLE: 'external-generation-worker',
+          GENARRATIVE_SPACETIME_DATABASE: 'xushi-p4wfr',
+          GENARRATIVE_SPACETIME_SERVER_URL: 'http://127.0.0.1:10002',
+        },
+        exe: '/repo/Other/server-rs/target/debug/api-server',
+        pid: 12345,
+      }),
+    ).toBe(false);
+  });
+});
+
 describe('dev scheduler Rust build env', () => {
   test('local dev Rust env bypasses project sccache wrapper', () => {
     const env = buildLocalRustProcessEnv(
diff --git a/server-rs/crates/api-server/src/asset_billing.rs b/server-rs/crates/api-server/src/asset_billing.rs
index c16ded945..741665a1e 100644
--- a/server-rs/crates/api-server/src/asset_billing.rs
+++ b/server-rs/crates/api-server/src/asset_billing.rs
@@ -271,7 +271,7 @@ pub(crate) fn should_skip_asset_operation_billing_for_connectivity(
     error: &SpacetimeClientError,
 ) -> bool {
     match error {
-        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout => true,
+        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout(_) => true,
         SpacetimeClientError::Build(message)
         | SpacetimeClientError::Procedure(message)
         | SpacetimeClientError::Runtime(message) => {
diff --git a/server-rs/crates/api-server/src/big_fish.rs b/server-rs/crates/api-server/src/big_fish.rs
index e89691173..bbd974c84 100644
--- a/server-rs/crates/api-server/src/big_fish.rs
+++ b/server-rs/crates/api-server/src/big_fish.rs
@@ -935,12 +935,17 @@ fn map_big_fish_client_error(error: SpacetimeClientError) -> AppError {
             StatusCode::BAD_REQUEST
         }
         SpacetimeClientError::Runtime(_) => StatusCode::BAD_REQUEST,
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         _ => StatusCode::BAD_GATEWAY,
     };
 
     let message = match &error {
-        SpacetimeClientError::Timeout => "SpacetimeDB 会话读取超时，请稍后重试。".to_string(),
+        SpacetimeClientError::Timeout(stage) => {
+            format!(
+                "SpacetimeDB 会话读取超时（{}），请稍后重试。",
+                stage.as_str()
+            )
+        }
         SpacetimeClientError::ConnectDropped => {
             "SpacetimeDB 会话连接已断开，请稍后重试。".to_string()
         }
@@ -983,6 +988,8 @@ fn current_timestamp_micros_to_string(value: i64) -> String {
 
 #[cfg(test)]
 mod tests {
+    use spacetime_client::SpacetimeClientStage;
+
     use super::*;
 
     #[test]
@@ -1001,7 +1008,7 @@ mod tests {
     #[test]
     fn big_fish_gallery_keeps_timeout_errors_visible() {
         assert!(!should_soft_fallback_big_fish_gallery(
-            &SpacetimeClientError::Timeout
+            &SpacetimeClientError::Timeout(SpacetimeClientStage::ProcedureResult)
         ));
     }
 }
diff --git a/server-rs/crates/api-server/src/big_fish/mappers.rs b/server-rs/crates/api-server/src/big_fish/mappers.rs
index ec8bcb029..406d7ceb7 100644
--- a/server-rs/crates/api-server/src/big_fish/mappers.rs
+++ b/server-rs/crates/api-server/src/big_fish/mappers.rs
@@ -1,4 +1,5 @@
 use super::*;
+use spacetime_client::SpacetimeClientStage;
 
 pub(super) fn map_big_fish_session_response(
     session: BigFishSessionRecord,
@@ -237,7 +238,7 @@ pub(super) async fn load_big_fish_session_with_retry(
             .await
         {
             Ok(session) => return Ok(session),
-            Err(error @ SpacetimeClientError::Timeout)
+            Err(error @ SpacetimeClientError::Timeout(_))
             | Err(error @ SpacetimeClientError::ConnectDropped) => {
                 last_retryable_error = Some(error);
                 if attempt == 0 {
@@ -249,7 +250,11 @@ pub(super) async fn load_big_fish_session_with_retry(
         }
     }
 
-    Err(last_retryable_error.unwrap_or(SpacetimeClientError::Timeout))
+    Err(
+        last_retryable_error.unwrap_or(SpacetimeClientError::Timeout(
+            SpacetimeClientStage::ProcedureResult,
+        )),
+    )
 }
 
 pub(super) fn map_record_anchor_pack_to_domain(
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index f12dddd89..99e1ec0fc 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -81,7 +81,7 @@ const EDITOR_IMAGE_MODEL_NANOBANANA2_DISPLAY_ALIAS: &str = "nanobanana2";
 const EDITOR_IMAGE_MODEL_NANOBANANA_LEGACY_ALIAS: &str = "nano-banana";
 const EDITOR_ICON_DESCRIPTION_LIMIT: usize = 100;
 const EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT: &str =
-    "仅提取被红色框框选的素材并整理成spritesheet";
+    "仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。";
 const EDITOR_CHARACTER_IMAGE_ASSET_KIND: &str = "editor_character_image";
 const EDITOR_CHARACTER_IMAGE_ENTITY_KIND: &str = "editor_project";
 const EDITOR_CHARACTER_IMAGE_SLOT: &str = "character";
@@ -4847,7 +4847,7 @@ mod tests {
     fn editor_ui_design_asset_extraction_prompt_is_fixed() {
         assert_eq!(
             EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT,
-            "仅提取被红色框框选的素材并整理成spritesheet"
+            "仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。"
         );
     }
 
diff --git a/server-rs/crates/api-server/src/public_work.rs b/server-rs/crates/api-server/src/public_work.rs
index d46059feb..4c8a8650e 100644
--- a/server-rs/crates/api-server/src/public_work.rs
+++ b/server-rs/crates/api-server/src/public_work.rs
@@ -133,7 +133,7 @@ fn map_public_work_client_error(error: SpacetimeClientError) -> AppError {
         {
             StatusCode::NOT_FOUND
         }
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
         _ => StatusCode::BAD_GATEWAY,
     };
diff --git a/server-rs/crates/api-server/src/puzzle/tags.rs b/server-rs/crates/api-server/src/puzzle/tags.rs
index c6ce0693b..78509b157 100644
--- a/server-rs/crates/api-server/src/puzzle/tags.rs
+++ b/server-rs/crates/api-server/src/puzzle/tags.rs
@@ -382,7 +382,7 @@ pub(super) fn puzzle_bad_request(
 pub(super) fn map_puzzle_client_error(error: SpacetimeClientError) -> AppError {
     let status = match &error {
         SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         error if should_skip_asset_operation_billing_for_connectivity(error) => {
             StatusCode::SERVICE_UNAVAILABLE
         }
@@ -450,7 +450,7 @@ pub(super) fn map_puzzle_compile_error(error: SpacetimeClientError) -> AppError
         StatusCode::SERVICE_UNAVAILABLE
     } else if matches!(
         error,
-        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout
+        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout(_)
     ) || should_skip_asset_operation_billing_for_connectivity(&error)
     {
         StatusCode::SERVICE_UNAVAILABLE
@@ -485,7 +485,7 @@ pub(super) fn map_puzzle_compile_error(error: SpacetimeClientError) -> AppError
                 StatusCode::BAD_GATEWAY
             }
             SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
-            SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+            SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
             SpacetimeClientError::Runtime(_) => StatusCode::BAD_REQUEST,
             _ => StatusCode::BAD_GATEWAY,
         }
diff --git a/server-rs/crates/api-server/src/state.rs b/server-rs/crates/api-server/src/state.rs
index 8798c8916..1752ceceb 100644
--- a/server-rs/crates/api-server/src/state.rs
+++ b/server-rs/crates/api-server/src/state.rs
@@ -1604,6 +1604,7 @@ fn is_missing_creation_entry_config_procedure(error: &SpacetimeClientError) -> b
 #[cfg(test)]
 mod tests {
     use module_ai::{AiTaskKind, generate_ai_task_id};
+    use spacetime_client::SpacetimeClientStage;
 
     use super::*;
 
@@ -1618,7 +1619,7 @@ mod tests {
             &SpacetimeClientError::Procedure("No such procedure".to_string()),
         ));
         assert!(!is_missing_creation_entry_config_procedure(
-            &SpacetimeClientError::Timeout,
+            &SpacetimeClientError::Timeout(SpacetimeClientStage::ProcedureResult),
         ));
     }
 
diff --git a/server-rs/crates/api-server/src/visual_novel.rs b/server-rs/crates/api-server/src/visual_novel.rs
index d97ffea09..7f7469c99 100644
--- a/server-rs/crates/api-server/src/visual_novel.rs
+++ b/server-rs/crates/api-server/src/visual_novel.rs
@@ -1455,7 +1455,7 @@ fn map_spacetime_error(error: SpacetimeClientError) -> AppError {
         {
             StatusCode::FORBIDDEN
         }
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
         _ => StatusCode::BAD_GATEWAY,
     };
diff --git a/server-rs/crates/spacetime-client/src/lib.rs b/server-rs/crates/spacetime-client/src/lib.rs
index 34110353d..01215ad45 100644
--- a/server-rs/crates/spacetime-client/src/lib.rs
+++ b/server-rs/crates/spacetime-client/src/lib.rs
@@ -360,7 +360,7 @@ pub enum SpacetimeClientError {
     ConnectDropped,
     Procedure(String),
     Runtime(String),
-    Timeout,
+    Timeout(SpacetimeClientStage),
 }
 
 const DEFAULT_PROCEDURE_TIMEOUT: Duration = Duration::from_secs(30);
@@ -711,7 +711,7 @@ impl SpacetimeClient {
             .map_err(|_| {
                 SpacetimeStageError::new(
                     SpacetimeClientStage::PoolAcquire,
-                    SpacetimeClientError::Timeout,
+                    SpacetimeClientError::Timeout(SpacetimeClientStage::PoolAcquire),
                 )
             })?
             .map_err(|error| {
@@ -804,7 +804,7 @@ impl SpacetimeClient {
         .map_err(|_| {
             SpacetimeStageError::new(
                 SpacetimeClientStage::ConnectBuild,
-                SpacetimeClientError::Timeout,
+                SpacetimeClientError::Timeout(SpacetimeClientStage::ConnectBuild),
             )
         })?
         .map_err(|error| {
@@ -821,7 +821,7 @@ impl SpacetimeClient {
             .map_err(|_| {
                 SpacetimeStageError::new(
                     SpacetimeClientStage::ConnectHandshake,
-                    SpacetimeClientError::Timeout,
+                    SpacetimeClientError::Timeout(SpacetimeClientStage::ConnectHandshake),
                 )
             })?
             .map_err(|_| {
@@ -945,7 +945,7 @@ impl SpacetimeClient {
             .map_err(|_| {
                 SpacetimeStageError::new(
                     SpacetimeClientStage::ReadModelSubscribe,
-                    SpacetimeClientError::Timeout,
+                    SpacetimeClientError::Timeout(SpacetimeClientStage::ReadModelSubscribe),
                 )
             })?
             .map_err(|_| {
@@ -970,7 +970,7 @@ impl SpacetimeClient {
     // 超时后必须统一归还租约；若连接已先一步断开则回传断线，否则标记坏连接并回传超时。
     fn resolve_timeout_error(
         connection: Option<&PooledConnection>,
-        _stage: SpacetimeClientStage,
+        stage: SpacetimeClientStage,
     ) -> SpacetimeClientError {
         if let Some(connection) = connection {
             if connection.is_broken() {
@@ -979,7 +979,7 @@ impl SpacetimeClient {
             connection.mark_broken();
         }
 
-        SpacetimeClientError::Timeout
+        SpacetimeClientError::Timeout(stage)
     }
 }
 
@@ -1127,7 +1127,9 @@ impl fmt::Display for SpacetimeClientError {
                 f.write_str(message)
             }
             Self::ConnectDropped => f.write_str("SpacetimeDB 连接在返回结果前已断开"),
-            Self::Timeout => f.write_str("SpacetimeDB procedure 调用超时"),
+            Self::Timeout(stage) => {
+                f.write_str(&format!("SpacetimeDB {} 调用超时", stage.as_str()))
+            }
         }
     }
 }
@@ -1241,6 +1243,6 @@ mod tests {
             Err(error) => error,
         };
         assert_eq!(error.stage, SpacetimeClientStage::PoolAcquire);
-        assert!(matches!(error.error, SpacetimeClientError::Timeout));
+        assert!(matches!(error.error, SpacetimeClientError::Timeout(_)));
     }
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
index eb0c1cc91..65056755e 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -294,6 +294,61 @@ describe('App navigation history', () => {
     );
   });
 
+  test('缺少 projectid 的项目画布直达会替换回创作页', () => {
+    window.history.replaceState(null, '', '/editor/canvas');
+    const replaceStateSpy = vi.spyOn(window.history, 'replaceState');
+
+    renderApp();
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'creation-home',
+    );
+    expect(window.location.pathname).toBe('/creation');
+    expect(window.location.search).toBe('');
+    expect(replaceStateSpy).toHaveBeenCalledWith(
+      { [APP_HISTORY_STATE_KEY]: true },
+      '',
+      '/creation',
+    );
+
+    replaceStateSpy.mockRestore();
+  });
+
+  test('带 projectid 的项目画布直达保持编辑器阶段', () => {
+    mockMatchMedia(false);
+    window.history.replaceState(
+      null,
+      '',
+      '/editor/canvas?projectid=project-from-url',
+    );
+
+    renderApp();
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'image-editor',
+    );
+    expect(window.location.pathname).toBe('/editor/canvas');
+    expect(window.location.search).toBe('?projectid=project-from-url');
+  });
+
+  test('历史回到缺少 projectid 的项目画布时会替换回创作页', async () => {
+    mockMatchMedia(false);
+    window.history.replaceState(null, '', '/creation');
+
+    renderApp();
+
+    window.history.pushState(null, '', '/editor/canvas');
+    await act(async () => {
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'creation-home',
+    );
+    expect(window.location.pathname).toBe('/creation');
+    expect(window.location.search).toBe('');
+  });
+
   test('项目画布导航只写入一次带 projectid 的历史记录', async () => {
     mockMatchMedia(true);
     window.history.replaceState(null, '', '/creation');
diff --git a/src/App.tsx b/src/App.tsx
index 1bff59a58..9a11611d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import {
   readPublicWorkCodeFromLocationSearch,
   resolveInitialSelectionStageFromPath,
   resolvePathForSelectionStage,
+  shouldRedirectEditorCanvasWithoutProject,
 } from './routing/appPageRoutes';
 import type { RpgRuntimeAppIntent } from './RpgRuntimeApp';
 import {
@@ -62,6 +63,23 @@ function isRpgRuntimeRoute(pathname: string) {
   );
 }
 
+function resolveInitialAppSelectionStage() {
+  if (
+    shouldRedirectEditorCanvasWithoutProject(
+      window.location.pathname,
+      window.location.search,
+    )
+  ) {
+    replaceAppHistoryPath('/creation');
+    return 'creation-home';
+  }
+
+  return resolveInitialSelectionStageFromPath(
+    window.location.pathname,
+    getInitialPlatformDesktopLayout(),
+  );
+}
+
 export default function App() {
   const authUi = useAuthUi();
   const runtimeIntentTokenRef = useRef(0);
@@ -75,11 +93,8 @@ export default function App() {
   const [isRuntimeActive, setIsRuntimeActive] = useState(() =>
     isRpgRuntimeRoute(window.location.pathname),
   );
-  const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(() =>
-    resolveInitialSelectionStageFromPath(
-      window.location.pathname,
-      getInitialPlatformDesktopLayout(),
-    ),
+  const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(
+    resolveInitialAppSelectionStage,
   );
   const [runtimeReturnStage, setRuntimeReturnStage] =
     useState<SelectionStage>('platform');
@@ -111,6 +126,18 @@ export default function App() {
         window.history.state,
       );
 
+      if (
+        shouldRedirectEditorCanvasWithoutProject(
+          window.location.pathname,
+          window.location.search,
+        )
+      ) {
+        replaceAppHistoryPath('/creation');
+        setIsRuntimeActive(false);
+        setRawSelectionStage('creation-home');
+        return;
+      }
+
       if (isRpgRuntimeRoute(window.location.pathname)) {
         setIsRuntimeActive(true);
         return;
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 2036eeb09..925907f9e 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -16,14 +16,27 @@ import { PlatformTextField } from '../common/PlatformTextField';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import {
-  calculateEditorImageGenerationPrice,
-} from './ImageCanvasGenerationModel';
+import { calculateEditorImageGenerationPrice } from './ImageCanvasGenerationModel';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
+type ReferenceLabelFormatter = (
+  reference: CharacterReferenceImage,
+  index: number,
+) => string;
+
+type ReferenceTone =
+  | 'default'
+  | 'spec'
+  | 'icon'
+  | 'ui'
+  | 'quick-edit'
+  | 'video'
+  | 'audio';
+
 type ImageCanvasBasicGenerationComposerViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
@@ -37,11 +50,41 @@ type ImageCanvasBasicGenerationComposerViewProps = {
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
-  onRequestUpload: (target: 'generation-reference') => void;
+  onRequestUpload: (target: UploadTarget) => void;
+  onPickReferenceFromCanvas?: () => void;
   onToggleReferenceMenu?: () => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
+  dialogLabel?: string;
+  includeDimensions?: boolean;
+  includeModel?: boolean;
+  includeReferences?: boolean;
+  promptLabel?: string;
+  promptPlaceholder?: string;
+  optionLabelPrefix?: string;
+  dimensionRatioAriaLabelPrefix?: string;
+  dimensionSizeAriaLabelPrefix?: string;
+  referenceUploadTarget?: UploadTarget;
+  referenceButtonIcon?: ReactNode;
+  referenceButtonLabel?: string;
+  referenceButtonAriaLabel?: string;
+  referenceMenuLabel?: string;
+  referenceSlotTone?: ReferenceTone;
+  referenceSlotDisabled?: boolean;
+  referenceLabelFormatter?: ReferenceLabelFormatter;
+  referenceAriaLabelFormatter?: ReferenceLabelFormatter;
+  referenceRemoveLabelFormatter?: ReferenceLabelFormatter;
+  showReferenceAddButton?: boolean;
+  formClassName?: string;
+  footerClassName?: string;
+  promptClassName?: string;
+  referenceSlotClassName?: string;
+  submitButtonClassName?: string;
+  submitLabel?: string;
+  submitAriaLabel?: string;
+  submittingStatusLabel?: string;
 };
+
 function resetFailedDialogStatus(dialog: GenerateDialogState) {
   return {
     ...dialog,
@@ -50,31 +93,6 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
-function ReferenceChip({
-  reference,
-  index,
-  onRemove,
-}: {
-  reference: CharacterReferenceImage;
-  index: number;
-  onRemove: () => void;
-}) {
-  const label = reference.label || `参考图${index + 1}`;
-  return (
-    <ImageCanvasReferenceSlot
-      tone="default"
-      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-      imageSrc={reference.src}
-      objectKey={reference.objectKey}
-      label={label}
-      ariaLabel={label}
-      title={reference.label}
-      onRemove={onRemove}
-      removeLabel={`删除${label}`}
-    />
-  );
-}
-
 export function ImageCanvasBasicGenerationComposerView({
   dialog,
   style,
@@ -86,12 +104,60 @@ export function ImageCanvasBasicGenerationComposerView({
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
   onRequestUpload,
+  onPickReferenceFromCanvas,
   onToggleReferenceMenu,
   onRememberImageModel = () => {},
   onSubmit,
+  dialogLabel,
+  includeDimensions = true,
+  includeModel = true,
+  includeReferences = true,
+  promptLabel,
+  promptPlaceholder,
+  optionLabelPrefix,
+  dimensionRatioAriaLabelPrefix,
+  dimensionSizeAriaLabelPrefix,
+  referenceUploadTarget = 'generation-reference',
+  referenceButtonIcon = <ImageIcon className="h-4 w-4" aria-hidden="true" />,
+  referenceButtonLabel = '参考图',
+  referenceButtonAriaLabel = '添加参考图',
+  referenceMenuLabel = '参考图来源',
+  referenceSlotTone = 'default',
+  referenceSlotDisabled = false,
+  referenceLabelFormatter,
+  referenceAriaLabelFormatter,
+  referenceRemoveLabelFormatter,
+  showReferenceAddButton = true,
+  formClassName,
+  footerClassName,
+  promptClassName = 'image-canvas-editor__generation-prompt',
+  referenceSlotClassName,
+  submitButtonClassName = 'image-canvas-editor__generation-submit',
+  submitLabel = '生成',
+  submitAriaLabel = '生成',
+  submittingStatusLabel = '生成中',
 }: ImageCanvasBasicGenerationComposerViewProps) {
   const references = dialog.generationReferences ?? [];
   const isQuickEdit = dialog.mode === 'quick-edit';
+  const resolvedDialogLabel =
+    dialogLabel ?? optionLabelPrefix ?? (isQuickEdit ? '改造图片' : '生成图片');
+  const resolvedPromptLabel =
+    promptLabel ?? (isQuickEdit ? '改造提示词' : '生成提示词');
+  const resolvedPromptPlaceholder =
+    promptPlaceholder ??
+    (isQuickEdit ? '想怎么改造这张图？' : '今天想生成什么画面？');
+  const resolvedOptionLabelPrefix =
+    optionLabelPrefix ?? (isQuickEdit ? '改造图片' : '生成图片');
+  const resolvedReferenceButtonLabel = referenceButtonLabel;
+  const resolvedReferenceButtonAriaLabel =
+    referenceButtonAriaLabel ?? `添加${resolvedReferenceButtonLabel}`;
+  const hasReferenceMenu = includeReferences && onRequestUpload;
+  const finalFormClassName =
+    formClassName ??
+    'image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image';
+  const finalFooterClassName =
+    footerClassName ?? 'image-canvas-editor__generation-composer-footer';
+
   useImageCanvasFloatingOptionDismiss({
     isOpen: isGenerationReferenceMenuOpen,
     boundaryRefs: [generationReferenceButtonRef],
@@ -101,10 +167,10 @@ export function ImageCanvasBasicGenerationComposerView({
   return (
     <>
       <form
-        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        className={finalFormClassName}
         style={style}
         role="dialog"
-        aria-label={isQuickEdit ? '改造图片' : '生成图片'}
+        aria-label={resolvedDialogLabel}
         onPointerDown={(event) => event.stopPropagation()}
         onSubmit={(event) => {
           event.preventDefault();
@@ -113,102 +179,133 @@ export function ImageCanvasBasicGenerationComposerView({
           }
         }}
       >
-      <div className="image-canvas-editor__reference-strip">
-        {references.map((reference, index) => (
-          <ReferenceChip
-            key={reference.id}
-            reference={reference}
-            index={index}
-            onRemove={() =>
-              setGenerateDialog((currentDialog) =>
-                currentDialog
-                  ? {
-                      ...resetFailedDialogStatus(currentDialog),
-                      generationReferences: (
-                        currentDialog.generationReferences ?? []
-                      ).filter((item) => item.id !== reference.id),
-                    }
-                  : currentDialog,
-              )
-            }
-          />
-        ))}
-        <ImageCanvasReferenceSlot
-          buttonRef={generationReferenceButtonRef}
-          tone="default"
-          icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-          label="参考图"
-          ariaLabel="添加参考图"
-          disabled={dialog.status === 'generating'}
-          isAdd
-          onClick={() => onToggleReferenceMenu?.()}
-        />
-      </div>
-      <PlatformTextField
-        variant="textarea"
-        aria-label={isQuickEdit ? '改造提示词' : '生成提示词'}
-        value={dialog.prompt}
-        disabled={dialog.status === 'generating'}
-        placeholder={isQuickEdit ? '想怎么改造这张图？' : '今天想生成什么画面？'}
-        size="sm"
-        density="compact"
-        className="image-canvas-editor__generation-prompt"
-        onChange={(event) =>
-          setGenerateDialog((currentDialog) =>
-            currentDialog
-              ? {
-                  ...resetFailedDialogStatus(currentDialog),
-                  prompt: event.target.value,
+        {includeReferences ? (
+          <div className="image-canvas-editor__reference-strip">
+            {references.map((reference, index) => {
+              const label =
+                (referenceLabelFormatter?.(reference, index) ??
+                  reference.label) ||
+                `参考图${index + 1}`;
+              const ariaLabel =
+                referenceAriaLabelFormatter?.(reference, index) ?? label;
+              const removeLabel =
+                referenceRemoveLabelFormatter?.(reference, index) ??
+                `删除${ariaLabel}`;
+
+              return (
+                <ImageCanvasReferenceSlot
+                  key={reference.id}
+                  tone={referenceSlotTone}
+                  icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+                  imageSrc={reference.src}
+                  objectKey={reference.objectKey}
+                  label={label}
+                  ariaLabel={ariaLabel}
+                  title={reference.label}
+                  onRemove={() =>
+                    setGenerateDialog((currentDialog) =>
+                      currentDialog
+                        ? {
+                            ...resetFailedDialogStatus(currentDialog),
+                            generationReferences: (
+                              currentDialog.generationReferences ?? []
+                            ).filter((item) => item.id !== reference.id),
+                          }
+                        : currentDialog,
+                    )
+                  }
+                  removeLabel={removeLabel}
+                  className={referenceSlotClassName}
+                />
+              );
+            })}
+            {showReferenceAddButton ? (
+              <ImageCanvasReferenceSlot
+                buttonRef={generationReferenceButtonRef}
+                tone={referenceSlotTone}
+                icon={referenceButtonIcon}
+                label={resolvedReferenceButtonLabel}
+                ariaLabel={resolvedReferenceButtonAriaLabel}
+                disabled={
+                  dialog.status === 'generating' || referenceSlotDisabled
                 }
-              : currentDialog,
-          )
-        }
-      />
-      <div className="image-canvas-editor__generation-composer-footer">
-        <ImageCanvasGenerationImageOptionsView
-          dialog={dialog}
-          setGenerateDialog={setGenerateDialog}
-          includeDimensions
-          onRememberImageModel={onRememberImageModel}
-          optionLabelPrefix={isQuickEdit ? '改造图片' : '生成图片'}
-          cost={calculateEditorImageGenerationPrice({
-            model: dialog.imageModel,
-            imageSize: dialog.imageSize,
-          })}
-          submitLabel="生成"
-          submitAriaLabel="生成"
-          renderEditorPortal={renderEditorPortal}
-          buildPortalMenuStyle={buildPortalMenuStyle}
+                isAdd
+                onClick={() => onToggleReferenceMenu?.()}
+              />
+            ) : null}
+          </div>
+        ) : null}
+        <PlatformTextField
+          variant="textarea"
+          aria-label={resolvedPromptLabel}
+          value={dialog.prompt}
+          disabled={dialog.status === 'generating'}
+          placeholder={resolvedPromptPlaceholder}
+          size="sm"
+          density="compact"
+          className={promptClassName}
+          onChange={(event) =>
+            setGenerateDialog((currentDialog) =>
+              currentDialog
+                ? {
+                    ...resetFailedDialogStatus(currentDialog),
+                    prompt: event.target.value,
+                  }
+                : currentDialog,
+            )
+          }
         />
-      </div>
-      {dialog.status === 'generating' ? (
-        <PlatformStatusMessage
-          tone="info"
-          surface="platform"
-          size="xs"
-          className="image-canvas-editor__generate-status"
-          role="status"
-        >
-          生成中
-        </PlatformStatusMessage>
-      ) : null}
-      {dialog.status === 'failed' ? (
-        <PlatformStatusMessage
-          tone="error"
-          surface="platform"
-          size="xs"
-          className="image-canvas-editor__generate-status"
-          role="alert"
-        >
-          {dialog.errorMessage}
-        </PlatformStatusMessage>
-      ) : null}
+        <div className={finalFooterClassName}>
+          <ImageCanvasGenerationImageOptionsView
+            dialog={dialog}
+            setGenerateDialog={setGenerateDialog}
+            includeDimensions={includeDimensions}
+            includeModel={includeModel}
+            onRememberImageModel={onRememberImageModel}
+            dimensionRatioAriaLabelPrefix={dimensionRatioAriaLabelPrefix}
+            dimensionSizeAriaLabelPrefix={dimensionSizeAriaLabelPrefix}
+            optionLabelPrefix={resolvedOptionLabelPrefix}
+            cost={calculateEditorImageGenerationPrice({
+              model: dialog.imageModel,
+              imageSize: dialog.imageSize,
+            })}
+            submitLabel={submitLabel}
+            submitAriaLabel={submitAriaLabel}
+            submitButtonClassName={submitButtonClassName}
+            renderEditorPortal={renderEditorPortal}
+            buildPortalMenuStyle={buildPortalMenuStyle}
+          />
+        </div>
+        {dialog.status === 'generating' ? (
+          <PlatformStatusMessage
+            tone="info"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status"
+            role="status"
+          >
+            {submittingStatusLabel}
+          </PlatformStatusMessage>
+        ) : null}
+        {dialog.status === 'failed' ? (
+          <PlatformStatusMessage
+            tone="error"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status"
+            role="alert"
+          >
+            {dialog.errorMessage}
+          </PlatformStatusMessage>
+        ) : null}
       </form>
-      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+      {hasReferenceMenu &&
+      isGenerationReferenceMenuOpen &&
+      generationReferenceButtonRef
         ? renderEditorPortal(
             <PlatformFloatingMenu
               className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="参考图来源"
+              label={referenceMenuLabel}
               placement="top-start"
               style={buildPortalMenuStyle(
                 generationReferenceButtonRef.current,
@@ -218,7 +315,11 @@ export function ImageCanvasBasicGenerationComposerView({
               <PlatformFloatingMenuItem
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
-                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                  if (onPickReferenceFromCanvas) {
+                    onPickReferenceFromCanvas();
+                  } else {
+                    setIsPickingGenerationReferenceFromCanvas?.(true);
+                  }
                 }}
               >
                 从画布中选择
@@ -227,7 +328,7 @@ export function ImageCanvasBasicGenerationComposerView({
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
                   setIsPickingGenerationReferenceFromCanvas?.(false);
-                  onRequestUpload('generation-reference');
+                  onRequestUpload(referenceUploadTarget);
                 }}
               >
                 上传图片
diff --git a/src/components/image-editor/ImageCanvasContextMenusView.test.tsx b/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
index 92bba1006..3819db426 100644
--- a/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
+++ b/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
@@ -3,8 +3,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import { ImageCanvasContextMenusView } from './ImageCanvasContextMenusView';
+import type { CanvasLayer } from './ImageCanvasEditorTypes';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
@@ -33,6 +33,7 @@ function renderContextMenus(
     canvasClipboard: null,
     imageContextMenu: null,
     imageContextMenuLayer: null,
+    contextMenuLayer: null,
     contextShouldShowLayer: false,
     contextShouldUnlockLayer: false,
     onPasteCanvasClipboard: vi.fn(),
@@ -82,7 +83,10 @@ describe('ImageCanvasContextMenusView', () => {
   });
 
   it('renders layer context commands and forwards layer operations', () => {
-    const layer = createLayer({ assetKind: 'character' });
+    const layer = createLayer({
+      assetKind: 'character',
+      mediaType: 'image-sequence',
+    });
     const props = renderContextMenus({
       contextMenu: {
         kind: 'layer',
@@ -93,6 +97,7 @@ describe('ImageCanvasContextMenusView', () => {
       },
       canvasClipboard: { layers: [layer], mode: 'copy' },
       imageContextMenuLayer: layer,
+      contextMenuLayer: layer,
       contextShouldShowLayer: true,
       contextShouldUnlockLayer: true,
     });
@@ -104,6 +109,17 @@ describe('ImageCanvasContextMenusView', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '显示' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '解锁' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '水平翻转' }));
+    expect(
+      screen
+        .getByRole('menuitem', { name: '导出为' })
+        .getAttribute('aria-haspopup'),
+    ).toBe('menu');
+    fireEvent.click(
+      screen.getByRole('menuitem', { name: '序列帧导出（zip）' }),
+    );
+    fireEvent.click(
+      screen.getByRole('menuitem', { name: 'Spine 导出（zip）' }),
+    );
     fireEvent.click(screen.getByRole('menuitem', { name: '生成动画' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '删除' }));
 
@@ -114,6 +130,14 @@ describe('ImageCanvasContextMenusView', () => {
     expect(props.onToggleContextLayerVisibility).toHaveBeenCalledTimes(1);
     expect(props.onToggleContextLayerLock).toHaveBeenCalledTimes(1);
     expect(props.onFlipContextLayers).toHaveBeenCalledWith('x');
+    expect(props.onExportContextLayer).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ mode: 'sequence-with-preview' }),
+    );
+    expect(props.onExportContextLayer).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({ mode: 'spine-json' }),
+    );
     expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
     expect(props.onCloseContextMenu).toHaveBeenCalledTimes(1);
     expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(1);
diff --git a/src/components/image-editor/ImageCanvasContextMenusView.tsx b/src/components/image-editor/ImageCanvasContextMenusView.tsx
index 46cd1ad49..99c3c5182 100644
--- a/src/components/image-editor/ImageCanvasContextMenusView.tsx
+++ b/src/components/image-editor/ImageCanvasContextMenusView.tsx
@@ -1,4 +1,7 @@
-import { PlatformFloatingMenu, PlatformFloatingMenuItem } from '../common/PlatformFloatingMenu';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import type {
   CanvasClipboard,
   CanvasContextMenuState,
@@ -13,6 +16,7 @@ type ImageCanvasContextMenusViewProps = {
   canvasClipboard: CanvasClipboard | null;
   imageContextMenu: ImageContextMenuState | null;
   imageContextMenuLayer: CanvasLayer | null;
+  contextMenuLayer: CanvasLayer | null;
   contextShouldShowLayer: boolean;
   contextShouldUnlockLayer: boolean;
   onPasteCanvasClipboard: (canvasPoint?: { x: number; y: number }) => void;
@@ -24,7 +28,9 @@ type ImageCanvasContextMenusViewProps = {
   onToggleContextLayerVisibility: () => void;
   onToggleContextLayerLock: () => void;
   onFlipContextLayers: (axis: 'x' | 'y') => void;
-  onExportContextLayer: () => void;
+  onExportContextLayer: (options?: {
+    mode?: 'spine-json' | 'sequence-with-preview';
+  }) => void;
   onDeleteContextLayers: () => void;
   onDeleteLayerById: (layerId: string | null) => void;
   onCloseContextMenu: () => void;
@@ -42,6 +48,7 @@ export function ImageCanvasContextMenusView({
   canvasClipboard,
   imageContextMenu,
   imageContextMenuLayer,
+  contextMenuLayer,
   contextShouldShowLayer,
   contextShouldUnlockLayer,
   onPasteCanvasClipboard,
@@ -64,6 +71,8 @@ export function ImageCanvasContextMenusView({
   onOpenLayerMetadata,
   onOpenCharacterAnimationPanel,
 }: ImageCanvasContextMenusViewProps) {
+  const isImageSequenceLayer = contextMenuLayer?.mediaType === 'image-sequence';
+
   return (
     <>
       {contextMenu ? (
@@ -182,7 +191,11 @@ export function ImageCanvasContextMenusView({
                 移动至底层
               </button>
               <hr />
-              <button type="button" role="menuitem" onClick={onGroupContextLayers}>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={onGroupContextLayers}
+              >
                 创建组
               </button>
               <button
@@ -221,9 +234,52 @@ export function ImageCanvasContextMenusView({
               >
                 垂直翻转
               </button>
-              <button type="button" role="menuitem" onClick={onExportContextLayer}>
-                导出为
-              </button>
+              {isImageSequenceLayer ? (
+                <div className="image-canvas-editor__context-submenu">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    aria-haspopup="menu"
+                    className="image-canvas-editor__context-submenu-trigger"
+                  >
+                    <span>导出为</span>
+                    <span aria-hidden="true">›</span>
+                  </button>
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__context-submenu-panel"
+                    label="动作导出选项"
+                    placement="bottom-start"
+                    style={{ margin: 0 }}
+                  >
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() =>
+                        onExportContextLayer({
+                          mode: 'sequence-with-preview',
+                        })
+                      }
+                    >
+                      序列帧导出（zip）
+                    </PlatformFloatingMenuItem>
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() =>
+                        onExportContextLayer({ mode: 'spine-json' })
+                      }
+                    >
+                      Spine 导出（zip）
+                    </PlatformFloatingMenuItem>
+                  </PlatformFloatingMenu>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => onExportContextLayer()}
+                >
+                  导出为
+                </button>
+              )}
               <hr />
               {imageContextMenuLayer ? (
                 <>
diff --git a/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx b/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx
index c4ca42259..db0763e54 100644
--- a/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx
@@ -15,6 +15,8 @@ function createDialog(
     prompt: '旧修改提示',
     status: 'idle',
     sourceLayerId: 'layer-a',
+    imageModel: 'gpt-image-2',
+    imageSize: '1K',
     ...patch,
   };
 }
diff --git a/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx b/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
index 78b2ce32b..edc042dff 100644
--- a/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
+++ b/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
@@ -1,13 +1,10 @@
 import { type Dispatch, type SetStateAction } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
 import {
   calculateEditorImageGenerationPrice,
-  IMAGE_MODEL_GPT_IMAGE_2,
 } from './ImageCanvasGenerationModel';
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import type { GenerateDialogState } from './ImageCanvasEditorTypes';
 
 type ImageCanvasEditGenerationModalViewProps = {
@@ -22,10 +19,12 @@ export function ImageCanvasEditGenerationModalView({
   onSubmit,
 }: ImageCanvasEditGenerationModalViewProps) {
   const isOpen = dialog?.mode === 'edit' && dialog.status !== 'generating';
+  const dialogImageModel = dialog?.imageModel ?? 'gpt-image-2';
+  const dialogImageSize = dialog?.imageSize ?? '1K';
   const editPrice = calculateEditorImageGenerationPrice({
     kind: 'quick-edit',
-    model: IMAGE_MODEL_GPT_IMAGE_2,
-    imageSize: '1K',
+    model: dialogImageModel,
+    imageSize: dialogImageSize,
   });
 
   return (
@@ -40,70 +39,32 @@ export function ImageCanvasEditGenerationModalView({
       bodyClassName="image-canvas-editor__generate-dialog-body"
     >
       {dialog?.mode === 'edit' ? (
-        <form
-          className="image-canvas-editor__generate-form"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (dialog.status !== 'generating') {
-              onSubmit(dialog);
-            }
+        <ImageCanvasBasicGenerationComposerView
+          dialog={{
+            ...dialog,
+            mode: 'edit',
+            imageModel: dialogImageModel,
+            aspectRatio: dialog.aspectRatio ?? '1:1',
+            imageSize: dialogImageSize,
+            generationReferences: [],
           }}
-        >
-          <div className="image-canvas-editor__generate-body">
-            <PlatformTextField
-              variant="textarea"
-              aria-label="生成提示词"
-              value={dialog.prompt}
-              disabled={dialog.status === 'generating'}
-              size="sm"
-              density="roomy"
-              className="image-canvas-editor__generate-prompt"
-              placeholder="描述你想如何修改这张图片"
-              onChange={(event) =>
-                setGenerateDialog((currentDialog) =>
-                  currentDialog
-                    ? {
-                        ...currentDialog,
-                        prompt: event.target.value,
-                      }
-                    : currentDialog,
-                )
-              }
-            />
-            {dialog.status === 'generating' ? (
-              <PlatformStatusMessage
-                tone="info"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status"
-                role="status"
-              >
-                修改中
-              </PlatformStatusMessage>
-            ) : null}
-            {dialog.status === 'failed' ? (
-              <PlatformStatusMessage
-                tone="error"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status"
-                role="alert"
-              >
-                {dialog.errorMessage}
-              </PlatformStatusMessage>
-            ) : null}
-            <PlatformActionButton
-              type="submit"
-              size="sm"
-              className="image-canvas-editor__generate-submit"
-              disabled={dialog.status === 'generating'}
-            >
-              {dialog.status === 'generating'
-                ? '修改中'
-                : `修改${editPrice}泥点`}
-            </PlatformActionButton>
-          </div>
-        </form>
+          style={{}}
+          setGenerateDialog={setGenerateDialog}
+          onRequestUpload={() => {}}
+          onSubmit={onSubmit}
+          dialogLabel="修改图片"
+          includeDimensions={false}
+          includeModel={false}
+          includeReferences={false}
+          promptPlaceholder="描述你想如何修改这张图片"
+          submitLabel="修改"
+          submitAriaLabel={`修改${editPrice}泥点`}
+          submittingStatusLabel="修改中"
+          formClassName="image-canvas-editor__generate-form"
+          footerClassName="image-canvas-editor__generate-body"
+          promptClassName="image-canvas-editor__generate-prompt"
+          submitButtonClassName="image-canvas-editor__generate-submit"
+        />
       ) : null}
     </UnifiedModal>
   );
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 833aea8e0..157951b83 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -959,9 +959,9 @@ describe('ImageCanvasEditorView generation integration', () => {
       clientY: 120,
     });
     fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
-    expect(screen.getByRole('dialog', { name: '快速编辑图片' })).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: '改造图片' })).toBeTruthy();
     expect(
-      screen.queryByRole('button', { name: '关闭快速编辑图片' }),
+      screen.queryByRole('button', { name: '关闭改造图片' }),
     ).toBeNull();
 
     fireEvent.pointerDown(viewport, {
@@ -971,7 +971,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       clientY: 180,
     });
 
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
 
     fireEvent.pointerDown(sourceLayer, {
       button: 0,
@@ -2785,7 +2785,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByText('角色')).toBeTruthy();
     expect(screen.getByRole('button', { name: '生成动画' })).toBeTruthy();
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
     expect(
       screen.queryByRole('dialog', { name: '角色动画生成面板' }),
     ).toBeNull();
@@ -2796,7 +2796,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByRole('menuitem', { name: '生成动画' })).toBeTruthy();
 
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
 
     fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
     expect(
@@ -2945,8 +2945,10 @@ describe('ImageCanvasEditorView generation integration', () => {
           height: 96,
         },
       ],
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'ui-extract-task-1',
@@ -3048,7 +3050,8 @@ describe('ImageCanvasEditorView generation integration', () => {
             fields: expect.arrayContaining([
               expect.objectContaining({
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
               }),
             ]),
             references: expect.arrayContaining([
@@ -3076,7 +3079,8 @@ describe('ImageCanvasEditorView generation integration', () => {
             fields: expect.arrayContaining([
               expect.objectContaining({
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
               }),
             ]),
           }),
@@ -3238,7 +3242,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
 
-    const quickPanel = screen.getByRole('dialog', { name: '快速编辑图片' });
+    const quickPanel = screen.getByRole('dialog', { name: '改造图片' });
     expect(quickPanel.className).toContain(
       'image-canvas-editor__quick-edit-panel',
     );
@@ -3280,7 +3284,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
 
     const updatedQuickPanel = screen.getByRole('dialog', {
-      name: '快速编辑图片',
+      name: '改造图片',
     });
     expect(within(updatedQuickPanel).getByText('星空参考')).toBeTruthy();
     expect(within(updatedQuickPanel).queryByLabelText('原图 图2')).toBeNull();
@@ -3407,7 +3411,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     ).toBeTruthy();
     fireEvent.click(within(menu).getByRole('menuitem', { name: '快速编辑' }));
 
-    const panel = screen.getByRole('dialog', { name: '快速编辑图片' });
+    const panel = screen.getByRole('dialog', { name: '改造图片' });
     expect(within(panel).queryByText('右键图片')).toBeNull();
     fireEvent.change(within(panel).getByLabelText('快速编辑提示词'), {
       target: { value: '换成夜晚' },
@@ -3498,7 +3502,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
 
-    const quickPanel = screen.getByRole('dialog', { name: '快速编辑图片' });
+    const quickPanel = screen.getByRole('dialog', { name: '改造图片' });
     fireEvent.change(within(quickPanel).getByLabelText('快速编辑提示词'), {
       target: { value: '改成陶泥风格' },
     });
@@ -3749,13 +3753,13 @@ describe('ImageCanvasEditorView generation integration', () => {
       clientY: 180,
     });
     fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
-    const quickPanel = screen.getByRole('dialog', { name: '快速编辑图片' });
+    const quickPanel = screen.getByRole('dialog', { name: '改造图片' });
     fireEvent.change(within(quickPanel).getByLabelText('快速编辑提示词'), {
       target: { value: '加一层暖光' },
     });
     fireEvent.click(within(quickPanel).getByRole('button', { name: '生成' }));
 
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
     expect(screen.getByAltText('画布图片：快速编辑源图')).toBeTruthy();
     expect(sourceLayer.className).not.toContain(
       'image-canvas-editor__layer--generating',
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 96e038a0b..642c22568 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -146,6 +146,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     canvasClipboard: null,
     imageContextMenu: null,
     imageContextMenuLayer: null,
+    contextMenuLayer: null,
     contextShouldShowLayer: false,
     contextShouldUnlockLayer: false,
     canUndo: false,
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index c2150ec9e..ce0961810 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -35,7 +35,6 @@ import {
   resolveContextMenuPosition,
 } from './ImageCanvasEditorModel';
 import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
-import { ImageCanvasShortcutDialogView } from './ImageCanvasShortcutDialogView';
 import type {
   AssetPointerDragState,
   CanvasAssetKind,
@@ -55,6 +54,7 @@ import {
   getSelectedGenerationDialogIds,
   getSelectedLayerIds,
 } from './ImageCanvasSelectionModel';
+import { ImageCanvasShortcutDialogView } from './ImageCanvasShortcutDialogView';
 import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { useCanvasHistory } from './useCanvasHistory';
 import {
@@ -154,6 +154,7 @@ export function ImageCanvasEditorView() {
   const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
     null,
   );
+  const [isViewportInteracting, setIsViewportInteracting] = useState(false);
   const [uploadDropTarget, setUploadDropTarget] = useState<
     'canvas' | 'assets' | null
   >(null);
@@ -173,11 +174,18 @@ export function ImageCanvasEditorView() {
     getCanvasPointFromClient,
     moveViewportFromMinimapPointer,
     updateViewportFromMinimapDrag,
+    flushMinimapViewportDrag,
   } = useImageCanvasViewportControls({
     canvasViewportRef,
     layers,
     captureCanvasHistory: captureViewportHistory,
   });
+  const beginViewportInteraction = useCallback(() => {
+    setIsViewportInteracting(true);
+  }, []);
+  const endViewportInteraction = useCallback(() => {
+    setIsViewportInteracting(false);
+  }, []);
 
   selectedLayerIdRef.current = selectedLayerId;
   selectedLayerIdsRef.current = selectedLayerIds;
@@ -669,6 +677,7 @@ export function ImageCanvasEditorView() {
       layers,
       canvasGenerationDialogs,
       viewport,
+      isViewportInteracting,
       canAccessProtectedData: authUi ? authUi.canAccessProtectedData : true,
       openEditorLoginModal,
     });
@@ -763,6 +772,7 @@ export function ImageCanvasEditorView() {
     canvasSize,
     viewport,
     setViewport,
+    canvasViewportRef,
     setLayers,
     layerCounterRef,
     specToolWrapRef,
@@ -888,6 +898,10 @@ export function ImageCanvasEditorView() {
     clearGenerationPanelsAfterBlur,
     getCanvasPointFromClient,
   });
+  const contextMenuLayer =
+    contextMenu?.kind === 'layer'
+      ? layers.find((layer) => layer.id === contextMenu.layerId) ?? null
+      : null;
   const {
     canvasClipboard,
     pasteCanvasClipboard,
@@ -974,7 +988,10 @@ export function ImageCanvasEditorView() {
     updateCanvasGenerationDialogById,
     moveViewportFromMinimapPointer,
     updateViewportFromMinimapDrag,
+    flushMinimapViewportDrag,
     minimapScale: minimapModel?.scale ?? 1,
+    onViewportInteractionStart: beginViewportInteraction,
+    onViewportInteractionEnd: endViewportInteraction,
     onCloseImageContextMenu: () => setImageContextMenu(null),
   });
   resetCanvasInteractionStateRef.current = clearActiveInteraction;
@@ -1434,6 +1451,7 @@ export function ImageCanvasEditorView() {
     onUiAssetExtractionPointerMove: moveUiAssetExtractionPointer,
     onUiAssetExtractionPointerEnd: endUiAssetExtractionPointer,
     onSubmitUiAssetExtraction: () => void submitUiAssetExtraction(),
+    contextMenuLayer,
     onQuickEditSelectionToolChange: changeQuickEditSelectionTool,
     onQuickEditSelectionPointerStart: startQuickEditSelectionPointer,
     onQuickEditSelectionPointerMove: moveQuickEditSelectionPointer,
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index ba822dc14..6a3eeeb06 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import {
+  buildAnimatedGifPreviewBytes,
   buildLayerExportMetadata,
   buildSpineImageSequenceJson,
   buildSpineImageSequenceReadme,
@@ -20,6 +21,48 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasExportModel', () => {
+  it('builds a real animated GIF preview from sequence frames', () => {
+    const gifBytes = buildAnimatedGifPreviewBytes({
+      width: 2,
+      height: 1,
+      frameDelayCentiseconds: 12,
+      frames: [
+        {
+          width: 2,
+          height: 1,
+          rgba: Uint8Array.from([255, 0, 0, 255, 0, 0, 0, 0]),
+        },
+        {
+          width: 2,
+          height: 1,
+          rgba: Uint8Array.from([0, 255, 0, 255, 0, 0, 255, 255]),
+        },
+      ],
+    });
+
+    expect(readAscii(gifBytes, 0, 6)).toBe('GIF89a');
+    expect(readAscii(gifBytes, 0, gifBytes.length)).toContain('NETSCAPE2.0');
+    expect(countGifImageDescriptors(gifBytes)).toBe(2);
+    expect(gifBytes.at(-1)).toBe(0x3b);
+  });
+
+  it('rejects GIF preview frames with mismatched dimensions', () => {
+    expect(() =>
+      buildAnimatedGifPreviewBytes({
+        width: 2,
+        height: 2,
+        frameDelayCentiseconds: 12,
+        frames: [
+          {
+            width: 1,
+            height: 2,
+            rgba: Uint8Array.from([255, 0, 0, 255, 0, 0, 255, 255]),
+          },
+        ],
+      }),
+    ).toThrow('GIF 预览帧尺寸不一致');
+  });
+
   it('normalizes export file names and dates', () => {
     expect(sanitizeExportFilePart('  角色/草图:*?  ', 'fallback')).toBe(
       '角色 草图',
@@ -72,11 +115,7 @@ describe('ImageCanvasExportModel', () => {
     expect(getImageExtensionFromTypeOrSrc('', '/image.webp?x=1')).toBe('webp');
     expect(getImageExtensionFromTypeOrSrc('', '/image.unknown')).toBe('png');
     expect(
-      getLayerAssetExtensionFromTypeOrSrc(
-        'video',
-        'video/mp4',
-        '/video.png',
-      ),
+      getLayerAssetExtensionFromTypeOrSrc('video', 'video/mp4', '/video.png'),
     ).toBe('mp4');
     expect(
       getLayerAssetExtensionFromTypeOrSrc(
@@ -106,7 +145,9 @@ describe('ImageCanvasExportModel', () => {
     expect(blob.type).toBe('text/plain');
     expect(await blob.text()).toBe('Hello');
 
-    expect(buildLayerExportMetadata(buildLayer(), 'images/001-layer.png')).toEqual({
+    expect(
+      buildLayerExportMetadata(buildLayer(), 'images/001-layer.png'),
+    ).toEqual({
       title: '导出图层',
       file: 'images/001-layer.png',
       visible: {
@@ -209,9 +250,7 @@ describe('ImageCanvasExportModel', () => {
       width: 192,
       height: 256,
     });
-    expect(
-      spineJson.animations.animation.slots.character.attachment,
-    ).toEqual([
+    expect(spineJson.animations.animation.slots.character.attachment).toEqual([
       { time: 0, name: 'animation_0001' },
       { time: 0.125, name: 'animation_0002' },
       { time: 0.25, name: 'animation_0003' },
@@ -242,7 +281,9 @@ describe('ImageCanvasExportModel', () => {
 
       expect(blob.type).toBe('video/mp4');
       expect(fetchMock).toHaveBeenCalledWith(
-        expect.stringContaining('/api/assets/read-bytes?objectKey=generated%2Fvideo.mp4'),
+        expect.stringContaining(
+          '/api/assets/read-bytes?objectKey=generated%2Fvideo.mp4',
+        ),
         expect.any(Object),
       );
       expect(fetchMock).not.toHaveBeenCalledWith(
@@ -300,6 +341,62 @@ describe('ImageCanvasExportModel', () => {
   });
 });
 
+function readAscii(bytes: Uint8Array, start: number, end: number) {
+  return Array.from(bytes.slice(start, end), (byte) =>
+    String.fromCharCode(byte),
+  ).join('');
+}
+
+function skipGifDataSubBlocks(bytes: Uint8Array, offset: number) {
+  let cursor = offset;
+  while (cursor < bytes.length) {
+    const blockLength = bytes[cursor] ?? 0;
+    cursor += 1;
+    if (blockLength === 0) {
+      return cursor;
+    }
+    cursor += blockLength;
+  }
+  return cursor;
+}
+
+function countGifImageDescriptors(bytes: Uint8Array) {
+  let cursor = 13 + 256 * 3;
+  let count = 0;
+  while (cursor < bytes.length) {
+    const blockType = bytes[cursor];
+    if (blockType === 0x3b) {
+      return count;
+    }
+    if (blockType === 0x21) {
+      const label = bytes[cursor + 1];
+      if (label === 0xf9) {
+        const blockLength = bytes[cursor + 2] ?? 0;
+        cursor += 3 + blockLength + 1;
+        continue;
+      }
+      cursor = skipGifDataSubBlocks(
+        bytes,
+        cursor + 3 + (bytes[cursor + 2] ?? 0),
+      );
+      continue;
+    }
+    if (blockType === 0x2c) {
+      count += 1;
+      const packed = bytes[cursor + 9] ?? 0;
+      cursor += 10;
+      if (packed & 0x80) {
+        cursor += 3 * 2 ** ((packed & 0x07) + 1);
+      }
+      cursor += 1;
+      cursor = skipGifDataSubBlocks(bytes, cursor);
+      continue;
+    }
+    throw new Error(`Unknown GIF block: ${blockType}`);
+  }
+  return count;
+}
+
 function buildLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
     id: 'layer-1',
diff --git a/src/components/image-editor/ImageCanvasExportModel.ts b/src/components/image-editor/ImageCanvasExportModel.ts
index d1619260d..3c064986d 100644
--- a/src/components/image-editor/ImageCanvasExportModel.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.ts
@@ -217,6 +217,181 @@ export type ExportedImageSequenceFrame = {
   height: number;
 };
 
+export type AnimatedGifPreviewFrame = {
+  width: number;
+  height: number;
+  rgba: Uint8Array | Uint8ClampedArray;
+};
+
+const GIF_PREVIEW_COLOR_TABLE_SIZE = 256;
+const GIF_PREVIEW_TRANSPARENT_INDEX = 0;
+const GIF_PREVIEW_COLOR_COUNT = 252;
+const GIF_PREVIEW_LZW_MIN_CODE_SIZE = 8;
+
+function pushAscii(bytes: number[], value: string) {
+  for (let index = 0; index < value.length; index += 1) {
+    bytes.push(value.charCodeAt(index) & 0xff);
+  }
+}
+
+function pushUint16Le(bytes: number[], value: number) {
+  bytes.push(value & 0xff, (value >> 8) & 0xff);
+}
+
+function pushByteArray(bytes: number[], value: Uint8Array) {
+  for (const byte of value) {
+    bytes.push(byte);
+  }
+}
+
+function buildGifPreviewPalette() {
+  const palette = new Uint8Array(GIF_PREVIEW_COLOR_TABLE_SIZE * 3);
+  let index = 1;
+  for (let red = 0; red < 6; red += 1) {
+    for (let green = 0; green < 7; green += 1) {
+      for (let blue = 0; blue < 6; blue += 1) {
+        palette[index * 3] = Math.round((red * 255) / 5);
+        palette[index * 3 + 1] = Math.round((green * 255) / 6);
+        palette[index * 3 + 2] = Math.round((blue * 255) / 5);
+        index += 1;
+      }
+    }
+  }
+  return palette;
+}
+
+function quantizeGifPreviewColor(red: number, green: number, blue: number) {
+  const redIndex = Math.round((red * 5) / 255);
+  const greenIndex = Math.round((green * 6) / 255);
+  const blueIndex = Math.round((blue * 5) / 255);
+  return Math.min(
+    GIF_PREVIEW_COLOR_COUNT,
+    1 + (redIndex * 7 + greenIndex) * 6 + blueIndex,
+  );
+}
+
+function mapRgbaToGifPreviewIndices(frame: AnimatedGifPreviewFrame) {
+  const pixelCount = frame.width * frame.height;
+  if (frame.rgba.length < pixelCount * 4) {
+    throw new Error('GIF 预览帧像素数据不足');
+  }
+  const indices = new Uint8Array(pixelCount);
+  for (let pixelIndex = 0; pixelIndex < pixelCount; pixelIndex += 1) {
+    const rgbaIndex = pixelIndex * 4;
+    const alpha = frame.rgba[rgbaIndex + 3] ?? 255;
+    indices[pixelIndex] =
+      alpha < 128
+        ? GIF_PREVIEW_TRANSPARENT_INDEX
+        : quantizeGifPreviewColor(
+            frame.rgba[rgbaIndex] ?? 0,
+            frame.rgba[rgbaIndex + 1] ?? 0,
+            frame.rgba[rgbaIndex + 2] ?? 0,
+          );
+  }
+  return indices;
+}
+
+function encodeGifLzwData(indices: Uint8Array) {
+  const clearCode = 1 << GIF_PREVIEW_LZW_MIN_CODE_SIZE;
+  const endCode = clearCode + 1;
+  const codeSize = GIF_PREVIEW_LZW_MIN_CODE_SIZE + 1;
+  const bytes: number[] = [];
+  let bitBuffer = 0;
+  let bitLength = 0;
+
+  function writeCode(code: number) {
+    bitBuffer |= code << bitLength;
+    bitLength += codeSize;
+    while (bitLength >= 8) {
+      bytes.push(bitBuffer & 0xff);
+      bitBuffer >>= 8;
+      bitLength -= 8;
+    }
+  }
+
+  writeCode(clearCode);
+  let codesSinceClear = 0;
+  for (const index of indices) {
+    if (codesSinceClear >= 250) {
+      writeCode(clearCode);
+      codesSinceClear = 0;
+    }
+    writeCode(index);
+    codesSinceClear += 1;
+  }
+  writeCode(endCode);
+  if (bitLength > 0) {
+    bytes.push(bitBuffer & 0xff);
+  }
+
+  return Uint8Array.from(bytes);
+}
+
+function pushGifDataSubBlocks(bytes: number[], data: Uint8Array) {
+  bytes.push(GIF_PREVIEW_LZW_MIN_CODE_SIZE);
+  for (let offset = 0; offset < data.length; offset += 255) {
+    const chunk = data.slice(offset, offset + 255);
+    bytes.push(chunk.length);
+    pushByteArray(bytes, chunk);
+  }
+  bytes.push(0);
+}
+
+export function buildAnimatedGifPreviewBytes({
+  width,
+  height,
+  frames,
+  frameDelayCentiseconds,
+}: {
+  width: number;
+  height: number;
+  frames: AnimatedGifPreviewFrame[];
+  frameDelayCentiseconds: number;
+}) {
+  const gifWidth = Math.max(1, Math.round(width));
+  const gifHeight = Math.max(1, Math.round(height));
+  if (!frames.length) {
+    throw new Error('GIF 预览帧为空');
+  }
+  const delay = Math.max(
+    1,
+    Math.min(65_535, Math.round(frameDelayCentiseconds)),
+  );
+  const bytes: number[] = [];
+
+  pushAscii(bytes, 'GIF89a');
+  pushUint16Le(bytes, gifWidth);
+  pushUint16Le(bytes, gifHeight);
+  bytes.push(0xf7, 0, 0);
+  pushByteArray(bytes, buildGifPreviewPalette());
+
+  bytes.push(0x21, 0xff, 0x0b);
+  pushAscii(bytes, 'NETSCAPE2.0');
+  bytes.push(0x03, 0x01, 0x00, 0x00, 0x00);
+
+  for (const frame of frames) {
+    if (frame.width !== gifWidth || frame.height !== gifHeight) {
+      throw new Error('GIF 预览帧尺寸不一致');
+    }
+    bytes.push(0x21, 0xf9, 0x04, 0x09);
+    pushUint16Le(bytes, delay);
+    bytes.push(GIF_PREVIEW_TRANSPARENT_INDEX, 0);
+    bytes.push(0x2c);
+    pushUint16Le(bytes, 0);
+    pushUint16Le(bytes, 0);
+    pushUint16Le(bytes, gifWidth);
+    pushUint16Le(bytes, gifHeight);
+    bytes.push(0);
+    pushGifDataSubBlocks(
+      bytes,
+      encodeGifLzwData(mapRgbaToGifPreviewIndices(frame)),
+    );
+  }
+
+  bytes.push(0x3b);
+  return Uint8Array.from(bytes);
+}
+
 const DEFAULT_SPINE_VERSION = '4.2.00';
 const SPINE_SEQUENCE_BONE_NAME = 'root';
 const SPINE_SEQUENCE_SLOT_NAME = 'character';
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 5b3112d99..c00ac9ef6 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -117,6 +117,36 @@ function renderComposer(
 }
 
 describe('ImageCanvasGenerationComposerView', () => {
+  it('让快速编辑复用普通图片生成面板结构', () => {
+    renderComposer({
+      mode: 'quick-edit',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      sourceLayerId: 'layer-source',
+      generationReferences: [],
+      imageModel: 'gpt-image-2',
+      aspectRatio: '1:1',
+      imageSize: '1K',
+    });
+
+    const panel = screen.getByRole('dialog', { name: '改造图片' });
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer',
+    );
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer--image',
+    );
+    expect(panel.className).not.toContain(
+      'image-canvas-editor__quick-edit-panel',
+    );
+    expect(within(panel).getByRole('textbox', { name: '改造提示词' }))
+      .toBeTruthy();
+    expect(
+      panel.querySelector('.image-canvas-editor__generation-composer-footer'),
+    ).toBeTruthy();
+  });
+
   it('让生成UI设计图面板复用普通图片生成面板的纵向结构', () => {
     const setGenerateDialog = vi.fn();
     renderComposer({
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 6eb956973..0ad137e09 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -23,6 +23,7 @@ import {
   createPublicationGenerationDialogDraft,
   createQuickEditPanelDraft,
   createRedrawPanelDraft,
+  createSameSourceGenerationDialogDraft,
   createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
@@ -381,6 +382,9 @@ describe('ImageCanvasGenerationDialogModel', () => {
       status: 'idle',
       composerOpen: true,
       sourceLayerId: 'layer-source',
+      imageModel: 'gpt-image-2',
+      aspectRatio: '4:3',
+      imageSize: '1K',
     });
     expect(createQuickEditPanelDraft(sourceLayer)).toEqual({
       mode: 'quick-edit',
@@ -475,7 +479,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
             fields: [
               {
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
               },
               { title: 'model', value: 'gpt-image-2' },
             ],
@@ -486,6 +491,108 @@ describe('ImageCanvasGenerationDialogModel', () => {
     ).toBe('');
   });
 
+  it('creates same-source generator drafts for generated image layers', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+    const characterDraft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        assetKind: 'character',
+        generationInputs: {
+          fields: [{ title: '角色设定', value: '红发骑士' }],
+          references: [],
+        },
+      }),
+      canvasSize,
+      viewport,
+      mode: 'redraw',
+    });
+
+    expect(characterDraft).toMatchObject({
+      mode: 'character',
+      prompt: '红发骑士',
+      sourceLayerId: 'layer-source',
+      placeholder: {
+        x: 472,
+        y: 140,
+      },
+    });
+
+    const publicationDraft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        assetKind: 'publication-material',
+        originalWidth: 720,
+        originalHeight: 1280,
+        generationInputs: {
+          fields: [
+            { title: '游戏名', value: '星海远征' },
+            { title: '游戏分类', value: '冒险' },
+            { title: '一句话描述游戏', value: '驾驶飞船探索星云' },
+          ],
+          references: [],
+        },
+      }),
+      canvasSize,
+      viewport,
+      mode: 'redraw',
+    });
+
+    expect(publicationDraft).toMatchObject({
+      mode: 'publication',
+      publicationWorkflowId: 'publication-detail-gallery',
+      publicationGameInfo: {
+        gameName: '星海远征',
+        gameCategories: '冒险',
+        gameDescription: '驾驶飞船探索星云',
+      },
+    });
+
+    expect(
+      createSameSourceGenerationDialogDraft({
+        sourceLayer: createLayer(),
+        canvasSize,
+        viewport,
+        mode: 'redraw',
+      }),
+    ).toBeNull();
+  });
+
+  it('restores the plain image generator when a source generation dialog exists', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+
+    expect(
+      createSameSourceGenerationDialogDraft({
+        sourceLayer: createLayer({
+          prompt: '【系统内置】普通提示词',
+          generationInputs: {
+            fields: [{ title: '生成提示词', value: '普通图' }],
+            references: [],
+          },
+        }),
+        canvasSize,
+        viewport,
+        sourceDialog: {
+          id: 'generation-dialog-1',
+          mode: 'generate',
+          prompt: '普通图',
+          status: 'idle',
+          generatedLayerId: 'layer-source',
+          imageModel: 'gpt-image-2',
+          aspectRatio: '2:3',
+          imageSize: '2K',
+        },
+        mode: 'redraw',
+      }),
+    ).toMatchObject({
+      mode: 'generate',
+      prompt: '普通图',
+      sourceLayerId: 'layer-source',
+      imageModel: 'gpt-image-2',
+      aspectRatio: '2:3',
+      imageSize: '2K',
+    });
+  });
+
   it('normalizes legacy nanobanana model aliases in quick edit drafts', () => {
     expect(
       createQuickEditPanelDraft(
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index e08aad069..24478b689 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -18,7 +18,6 @@ import {
   CHARACTER_ANIMATION_FRAME_DISPLAY_SIZE,
   CHARACTER_ANIMATION_FRAME_ORIGINAL_SIZE,
   createCanvasLayerReference,
-  DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_IMAGE_MODEL,
   DEFAULT_PUBLICATION_GAME_INFO,
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
@@ -45,6 +44,14 @@ import {
 import { getPublicationMaterialsWorkflow } from './ImageCanvasPublicationMaterialsModel';
 
 type CanvasSize = { width: number; height: number };
+type SourceGenerationDialogDraftContext = {
+  sourceLayer: CanvasLayer;
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  sourceDialog?: CanvasGenerationDialogState | null;
+  mode: 'quick-edit' | 'redraw';
+  sourceAnimationLayer?: CanvasLayer | null;
+};
 const VIDEO_REFERENCE_LIMITS = {
   image: 9,
   video: 3,
@@ -156,6 +163,18 @@ function resolveImageDimensionDefaults(imageModel: string) {
   };
 }
 
+function getGenerationInputFieldValues(layer: CanvasLayer) {
+  const values = new Map<string, string>();
+  for (const field of layer.generationInputs?.fields ?? []) {
+    const title = field.title.trim().toLowerCase();
+    const value = field.value.trim();
+    if (title && value && !values.has(title)) {
+      values.set(title, value);
+    }
+  }
+  return values;
+}
+
 export function createGenerateDialogDraft({
   canvasSize,
   viewport,
@@ -420,7 +439,7 @@ export function createBackgroundMusicGenerationDialogDraft({
 
 function findGenerationInputFieldValue(
   layer: CanvasLayer,
-  titles: string[],
+  titles: readonly string[],
 ) {
   const normalizedTitles = new Set(titles.map((title) => title.toLowerCase()));
   return (
@@ -559,6 +578,458 @@ export function createAudioRedrawGenerationDialogDraft(
   };
 }
 
+
+export function createVideoRedrawGenerationDialogDraft(
+  sourceLayer: CanvasLayer,
+): Omit<CanvasGenerationDialogState, 'id'> | null {
+  if (sourceLayer.mediaType !== 'video') {
+    return null;
+  }
+  const placeholderSize = resolveEditorVideoGenerationPixelSize({
+    aspectRatio: DEFAULT_VIDEO_ASPECT_RATIO,
+    resolution: '480p',
+  });
+  return {
+    mode: 'video',
+    sourceLayerId: sourceLayer.id,
+    prompt: resolveUserGenerationPromptSnapshot(sourceLayer),
+    status: 'idle',
+    composerOpen: true,
+    generationReferences: [createCanvasLayerReference(sourceLayer)],
+    videoModel: DEFAULT_VIDEO_MODEL,
+    videoAspectRatio: DEFAULT_VIDEO_ASPECT_RATIO,
+    videoResolution: '480p',
+    videoDurationSeconds: DEFAULT_VIDEO_DURATION_SECONDS,
+    videoMode: 'std',
+    videoSound: DEFAULT_VIDEO_SOUND,
+    videoWebSearchEnabled: DEFAULT_VIDEO_WEB_SEARCH_ENABLED,
+    placeholder: {
+      x: sourceLayer.x + sourceLayer.width + 32,
+      y: sourceLayer.y,
+      width: placeholderSize.width,
+      height: placeholderSize.height,
+      originalWidth: placeholderSize.width,
+      originalHeight: placeholderSize.height,
+    },
+  };
+}
+
+function resolveGeneratedSourceDialogMode({
+  sourceLayer,
+  sourceDialog,
+}: {
+  sourceLayer: CanvasLayer;
+  sourceDialog?: CanvasGenerationDialogState | null;
+}): CanvasGenerationDialogState['mode'] | null {
+  if (sourceDialog) {
+    return sourceDialog.mode;
+  }
+  if (sourceLayer.assetKind === 'character') {
+    return 'character';
+  }
+  if (sourceLayer.assetKind === 'ui-design') {
+    return 'ui-design';
+  }
+  if (sourceLayer.assetKind === 'publication-material') {
+    return 'publication';
+  }
+  if (
+    sourceLayer.assetKind === 'icon' ||
+    sourceLayer.assetKind === 'icon-spritesheet'
+  ) {
+    return 'icon';
+  }
+  if (
+    sourceLayer.assetKind === 'spec' ||
+    sourceLayer.assetKind === 'icon-spec'
+  ) {
+    return 'spec';
+  }
+  if (sourceLayer.assetKind === 'character-animation') {
+    return 'character-animation';
+  }
+  return null;
+}
+
+function getSourceDraftPrompt({
+  sourceLayer,
+  mode,
+}: {
+  sourceLayer: CanvasLayer;
+  mode: SourceGenerationDialogDraftContext['mode'];
+}) {
+  if (mode === 'quick-edit') {
+    return '';
+  }
+  return resolveUserGenerationPromptSnapshot(sourceLayer);
+}
+
+function buildSourceSidePlaceholder(sourceLayer: CanvasLayer) {
+  return {
+    x: sourceLayer.x + sourceLayer.width + 32,
+    y: sourceLayer.y,
+  };
+}
+
+function placeDraftBesideSourceLayer<T extends Omit<CanvasGenerationDialogState, 'id'>>(
+  draft: T,
+  sourceLayer: CanvasLayer,
+): T {
+  if (!draft.placeholder) {
+    return draft;
+  }
+  return {
+    ...draft,
+    placeholder: {
+      ...draft.placeholder,
+      ...buildSourceSidePlaceholder(sourceLayer),
+    },
+  };
+}
+
+function restoreSharedImageOptions(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  return {
+    ...draft,
+    imageModel: sourceDialog?.imageModel ?? draft.imageModel,
+    aspectRatio:
+      sourceDialog?.aspectRatio ??
+      draft.aspectRatio ??
+      inferEditorImageAspectRatio(
+        sourceLayer.originalWidth,
+        sourceLayer.originalHeight,
+      ),
+    imageSize:
+      sourceDialog?.imageSize ??
+      draft.imageSize ??
+      inferEditorImageSizeLabel(
+        sourceLayer.originalWidth,
+        sourceLayer.originalHeight,
+      ),
+  };
+}
+
+function resolveSpecTypeFromSourceLayer(
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): SpecGenerationType {
+  if (sourceDialog?.mode === 'spec' && sourceDialog.specType) {
+    return sourceDialog.specType;
+  }
+  if (sourceLayer.assetKind === 'icon-spec' || isIconSpecReferenceLayer(sourceLayer)) {
+    return 'icon';
+  }
+  const fields = getGenerationInputFieldValues(sourceLayer);
+  if (fields.has('自定义规范提示词')) {
+    return 'custom';
+  }
+  if (fields.has('头身比') || fields.has('角色视角')) {
+    return 'character';
+  }
+  return 'ui';
+}
+
+function restoreSpecValuesFromLayer(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  specType: SpecGenerationType,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  const fields = getGenerationInputFieldValues(sourceLayer);
+  const defaultValues = DEFAULT_SPEC_FORM_VALUES[specType];
+  return {
+    ...draft,
+    specValues: {
+      ...defaultValues,
+      ...sourceDialog?.specValues,
+      playSetting:
+        fields.get('玩法设定') ??
+        sourceDialog?.specValues?.playSetting ??
+        defaultValues.playSetting,
+      artStyle:
+        fields.get('美术风格') ??
+        sourceDialog?.specValues?.artStyle ??
+        defaultValues.artStyle,
+      bodyRatio:
+        fields.get('头身比') ??
+        sourceDialog?.specValues?.bodyRatio ??
+        defaultValues.bodyRatio,
+      characterView:
+        fields.get('角色视角') ??
+        sourceDialog?.specValues?.characterView ??
+        defaultValues.characterView,
+      customPrompt:
+        fields.get('自定义规范提示词') ??
+        sourceDialog?.specValues?.customPrompt ??
+        defaultValues.customPrompt,
+    },
+  };
+}
+
+function resolvePublicationWorkflowIdFromLayer(
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): PublicationMaterialsWorkflowId {
+  if (sourceDialog?.mode === 'publication' && sourceDialog.publicationWorkflowId) {
+    return sourceDialog.publicationWorkflowId;
+  }
+  const ratio = inferEditorImageAspectRatio(
+    sourceLayer.originalWidth,
+    sourceLayer.originalHeight,
+  );
+  if (ratio === '9:16') {
+    return 'publication-detail-gallery';
+  }
+  if (ratio === '16:9') {
+    return 'publication-promo-poster';
+  }
+  return 'publication-cover-image';
+}
+
+function restorePublicationGameInfoFromLayer(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  const fields = getGenerationInputFieldValues(sourceLayer);
+  return {
+    ...draft,
+    publicationGameInfo: {
+      ...DEFAULT_PUBLICATION_GAME_INFO,
+      ...sourceDialog?.publicationGameInfo,
+      gameName:
+        fields.get('游戏名') ??
+        sourceDialog?.publicationGameInfo?.gameName ??
+        DEFAULT_PUBLICATION_GAME_INFO.gameName,
+      gameCategories:
+        fields.get('游戏分类') ??
+        sourceDialog?.publicationGameInfo?.gameCategories ??
+        DEFAULT_PUBLICATION_GAME_INFO.gameCategories,
+      gameDescription:
+        fields.get('一句话描述游戏') ??
+        sourceDialog?.publicationGameInfo?.gameDescription ??
+        DEFAULT_PUBLICATION_GAME_INFO.gameDescription,
+    },
+    publicationReferences: sourceDialog?.publicationReferences ?? [],
+  };
+}
+
+function restoreIconDescriptionsFromLayer(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  const descriptions = parseIconDescriptionsText(
+    findGenerationInputFieldValue(sourceLayer, ['素材描述']) ??
+      sourceDialog?.prompt ??
+      '',
+  );
+  return {
+    ...draft,
+    prompt: descriptions.join('\n'),
+    iconDescriptions: descriptions.length
+      ? descriptions
+      : (sourceDialog?.iconDescriptions ?? draft.iconDescriptions),
+    iconSpecReference: sourceDialog?.iconSpecReference ?? draft.iconSpecReference,
+  };
+}
+
+function createSameSourceCharacterAnimationDraft({
+  sourceLayer,
+  canvasSize,
+  viewport,
+  sourceAnimationLayer,
+  mode,
+}: SourceGenerationDialogDraftContext): Omit<CanvasGenerationDialogState, 'id'> | null {
+  const animationSourceLayer = sourceAnimationLayer ?? sourceLayer;
+  const draft = createCharacterAnimationGenerationDialogDraft({
+    canvasSize,
+    viewport,
+    layer: animationSourceLayer,
+  });
+  if (!draft) {
+    return null;
+  }
+  return placeDraftBesideSourceLayer(
+    {
+      ...draft,
+      prompt: getSourceDraftPrompt({ sourceLayer, mode }),
+      sourceLayerId: animationSourceLayer.id,
+      composerOpen: true,
+    },
+    sourceLayer,
+  );
+}
+
+export function createSameSourceGenerationDialogDraft({
+  sourceLayer,
+  canvasSize,
+  viewport,
+  sourceDialog,
+  mode,
+  sourceAnimationLayer,
+}: SourceGenerationDialogDraftContext): Omit<CanvasGenerationDialogState, 'id'> | null {
+  const sourceMode = resolveGeneratedSourceDialogMode({
+    sourceLayer,
+    sourceDialog,
+  });
+  const prompt = getSourceDraftPrompt({ sourceLayer, mode });
+
+  if (sourceMode === 'quick-edit') {
+    return null;
+  }
+
+  if (sourceMode === 'generate') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        {
+          ...createGenerateDialogDraft({ canvasSize, viewport }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          generationReferences:
+            sourceDialog?.mode === 'generate'
+              ? (sourceDialog.generationReferences ?? [])
+              : [],
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'character-animation') {
+    return createSameSourceCharacterAnimationDraft({
+      sourceLayer,
+      canvasSize,
+      viewport,
+      sourceDialog,
+      mode,
+      sourceAnimationLayer,
+    });
+  }
+
+  if (sourceMode === 'character') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        {
+          ...createCharacterGenerationDialogDraft({
+            canvasSize,
+            viewport,
+            imageModel: sourceDialog?.imageModel ?? sourceLayer.model ?? DEFAULT_IMAGE_MODEL,
+          }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          characterSpecReference:
+            sourceDialog?.mode === 'character'
+              ? sourceDialog.characterSpecReference
+              : null,
+          characterReferences:
+            sourceDialog?.mode === 'character'
+              ? (sourceDialog.characterReferences ?? [])
+              : [],
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'ui-design') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        {
+          ...createUiDesignGenerationDialogDraft({
+            canvasSize,
+            viewport,
+            imageModel: sourceDialog?.imageModel ?? IMAGE_MODEL_GPT_IMAGE_2,
+          }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          uiDesignSpecReference:
+            sourceDialog?.mode === 'ui-design'
+              ? sourceDialog.uiDesignSpecReference
+              : null,
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'publication') {
+    const workflowId = resolvePublicationWorkflowIdFromLayer(
+      sourceLayer,
+      sourceDialog,
+    );
+    return placeDraftBesideSourceLayer(
+      restorePublicationGameInfoFromLayer(
+        {
+          ...createPublicationGenerationDialogDraft({
+            canvasSize,
+            viewport,
+            workflowId,
+          }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'icon') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        restoreIconDescriptionsFromLayer(
+          {
+            ...createIconGenerationDialogDraft({
+              canvasSize,
+              viewport,
+              imageModel:
+                sourceDialog?.imageModel ?? sourceLayer.model ?? DEFAULT_IMAGE_MODEL,
+            }),
+            sourceLayerId: sourceLayer.id,
+          },
+          sourceLayer,
+          sourceDialog,
+        ),
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'spec') {
+    const specType = resolveSpecTypeFromSourceLayer(sourceLayer, sourceDialog);
+    return placeDraftBesideSourceLayer(
+      restoreSpecValuesFromLayer(
+        {
+          ...createSpecDialogDraft({ canvasSize, viewport, specType }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          specReference:
+            sourceDialog?.mode === 'spec' ? sourceDialog.specReference : null,
+        },
+        sourceLayer,
+        specType,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  return null;
+}
+
 export function createUiDesignGenerationDialogDraft({
   canvasSize,
   viewport,
@@ -598,26 +1069,53 @@ export function createUiDesignGenerationDialogDraft({
 
 export function createEditDialogDraft(
   sourceLayer: CanvasLayer,
+  options: {
+    imageModel?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+  } = {},
 ): GenerateDialogState {
+  const imageModel = normalizeEditorImageModel(
+    options.imageModel ?? sourceLayer.model,
+  );
+  const aspectRatio =
+    options.aspectRatio ??
+    inferEditorImageAspectRatio(sourceLayer.originalWidth, sourceLayer.originalHeight);
+  const imageSize =
+    options.imageSize ??
+    inferEditorImageSizeLabel(sourceLayer.originalWidth, sourceLayer.originalHeight);
   return {
     mode: 'edit',
     prompt: resolveUserGenerationPromptSnapshot(sourceLayer),
     status: 'idle',
     composerOpen: true,
     sourceLayerId: sourceLayer.id,
+    imageModel,
+    aspectRatio,
+    imageSize,
   };
 }
 
 export function createQuickEditPanelDraft(
   sourceLayer: CanvasLayer,
+  options: {
+    imageModel?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+  } = {},
 ): QuickEditPanelState {
-  const aspectRatio = inferEditorImageAspectRatio(
-    sourceLayer.originalWidth,
-    sourceLayer.originalHeight,
-  );
-  const imageSize = inferEditorImageSizeLabel(
-    sourceLayer.originalWidth,
-    sourceLayer.originalHeight,
+  const aspectRatio = options.aspectRatio ??
+    inferEditorImageAspectRatio(
+      sourceLayer.originalWidth,
+      sourceLayer.originalHeight,
+    );
+  const imageSize = options.imageSize ??
+    inferEditorImageSizeLabel(
+      sourceLayer.originalWidth,
+      sourceLayer.originalHeight,
+    );
+  const model = normalizeEditorImageModel(
+    options.imageModel ?? sourceLayer.model,
   );
   return {
     mode: 'quick-edit',
@@ -629,7 +1127,7 @@ export function createQuickEditPanelDraft(
     ),
     aspectRatio,
     imageSize,
-    model: normalizeEditorImageModel(sourceLayer.model),
+    model,
     quickEditReferences: [],
     status: 'idle',
   };
@@ -679,9 +1177,14 @@ export function createQuickEditGenerationDialogDraft({
 
 export function createRedrawPanelDraft(
   sourceLayer: CanvasLayer,
+  options: {
+    imageModel?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+  } = {},
 ): QuickEditPanelState {
   return {
-    ...createQuickEditPanelDraft(sourceLayer),
+    ...createQuickEditPanelDraft(sourceLayer, options),
     mode: 'redraw',
     prompt: resolveUserGenerationPromptSnapshot(sourceLayer),
   };
@@ -784,7 +1287,7 @@ export function appendGenerationReference(
   if (dialog?.mode === 'video' && !isSeedanceVideoModel(dialog.videoModel)) {
     return dialog;
   }
-  if (dialog?.mode === 'generate') {
+  if (dialog?.mode === 'generate' || dialog?.mode === 'quick-edit') {
     if (getReferenceMediaType(layer) !== 'image') {
       return dialog;
     }
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index cfddaad89..1a3c89c52 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -28,8 +28,11 @@ type ImageCanvasGenerationImageOptionsViewProps = {
   dialog: GenerateDialogState;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   includeDimensions: boolean;
+  includeModel?: boolean;
   onRememberImageModel: (model: string) => void;
   optionLabelPrefix?: string;
+  dimensionRatioAriaLabelPrefix?: string;
+  dimensionSizeAriaLabelPrefix?: string;
   cost?: number;
   submitLabel?: string;
   submitAriaLabel?: string;
@@ -87,11 +90,13 @@ function OptionChoice({
   children,
   selected,
   className,
+  ariaLabel,
   onClick,
 }: {
   children: ReactNode;
   selected: boolean;
   className?: string;
+  ariaLabel?: string;
   onClick: () => void;
 }) {
   return (
@@ -100,6 +105,7 @@ function OptionChoice({
       className={['image-canvas-editor__option-popover-choice', className]
         .filter(Boolean)
         .join(' ')}
+      aria-label={ariaLabel}
       aria-pressed={selected}
       onClick={onClick}
     >
@@ -112,8 +118,11 @@ export function ImageCanvasGenerationImageOptionsView({
   dialog,
   setGenerateDialog,
   includeDimensions,
+  includeModel = true,
   onRememberImageModel,
   optionLabelPrefix,
+  dimensionRatioAriaLabelPrefix,
+  dimensionSizeAriaLabelPrefix,
   cost,
   submitLabel = '生成',
   submitAriaLabel = '生成',
@@ -138,10 +147,15 @@ export function ImageCanvasGenerationImageOptionsView({
     imageSize: selection.imageSize,
   });
   const isGenerating = dialog.status === 'generating';
-  const isModelLocked = Boolean(normalizedLockedModel);
+  const isModelLocked = Boolean(normalizedLockedModel) && includeModel;
   const labelPrefix = optionLabelPrefix ?? '生成图片';
+  const ratioAriaLabelPrefix = dimensionRatioAriaLabelPrefix?.trim() ?? '';
+  const sizeAriaLabelPrefix = dimensionSizeAriaLabelPrefix?.trim() ?? '';
   const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
 
+  const formatDimensionOptionLabel = (prefix: string, value: string) =>
+    prefix ? `${prefix} ${value}` : value;
+
   useImageCanvasFloatingOptionDismiss({
     isOpen: openPanel !== null,
     boundaryRefs: [dimensionsButtonRef, modelButtonRef],
@@ -236,6 +250,10 @@ export function ImageCanvasGenerationImageOptionsView({
                             key={aspectRatio}
                             selected={selection.aspectRatio === aspectRatio}
                             className="image-canvas-editor__option-popover-choice--ratio"
+                            ariaLabel={formatDimensionOptionLabel(
+                              ratioAriaLabelPrefix,
+                              aspectRatio,
+                            )}
                             onClick={() => updateDialog({ aspectRatio })}
                           >
                             <span
@@ -257,6 +275,10 @@ export function ImageCanvasGenerationImageOptionsView({
                           <OptionChoice
                             key={imageSize}
                             selected={selection.imageSize === imageSize}
+                            ariaLabel={formatDimensionOptionLabel(
+                              sizeAriaLabelPrefix,
+                              imageSize,
+                            )}
                             onClick={() => updateDialog({ imageSize })}
                           >
                             {imageSize}
@@ -270,80 +292,82 @@ export function ImageCanvasGenerationImageOptionsView({
             : null}
         </div>
       ) : null}
-      <div
-        className={[
-          'image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model',
-          isModelLocked
-            ? 'image-canvas-editor__readonly-generation-option'
-            : '',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <PlatformInlineOptionButton
-          ref={modelButtonRef}
-          className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-          aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
-          aria-expanded={isModelLocked ? undefined : openPanel === 'model'}
-          disabled={isGenerating || isModelLocked}
-          trailingIcon={
-            isModelLocked ? undefined : <ChevronDown className="h-3 w-3" />
-          }
-          onClick={() => {
-            if (!isModelLocked) {
-              togglePanel('model');
-            }
-          }}
+      {includeModel ? (
+        <div
+          className={[
+            'image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model',
+            isModelLocked
+              ? 'image-canvas-editor__readonly-generation-option'
+              : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
         >
-          <span className="image-canvas-editor__model-trigger-label">
-            <span
-              className="image-canvas-editor__model-icon"
-              aria-hidden="true"
-            >
-              <Cpu />
-            </span>
-            <span>{selectedModelLabel}</span>
-          </span>
-        </PlatformInlineOptionButton>
-        {!isModelLocked && openPanel === 'model'
-          ? renderEditorPortal(
-              <PlatformFloatingMenu
-                className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
-                label={`${labelPrefix}模型选项`}
-                placement="top-start"
-                style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
-                onPointerDown={(event) => event.stopPropagation()}
+          <PlatformInlineOptionButton
+            ref={modelButtonRef}
+            className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+            aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
+            aria-expanded={isModelLocked ? undefined : openPanel === 'model'}
+            disabled={isGenerating || isModelLocked}
+            trailingIcon={
+              isModelLocked ? undefined : <ChevronDown className="h-3 w-3" />
+            }
+            onClick={() => {
+              if (!isModelLocked) {
+                togglePanel('model');
+              }
+            }}
+          >
+            <span className="image-canvas-editor__model-trigger-label">
+              <span
+                className="image-canvas-editor__model-icon"
+                aria-hidden="true"
               >
-                <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
-                  {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-                    const selected = selection.model === option.value;
-                    return (
-                      <OptionChoice
-                        key={option.value}
-                        selected={selected}
-                        className="image-canvas-editor__option-popover-choice--model"
-                        onClick={() => updateImageModel(option.value)}
-                      >
-                        <span
-                          className="image-canvas-editor__model-icon"
-                          aria-hidden="true"
+                <Cpu />
+              </span>
+              <span>{selectedModelLabel}</span>
+            </span>
+          </PlatformInlineOptionButton>
+          {!isModelLocked && openPanel === 'model'
+            ? renderEditorPortal(
+                <PlatformFloatingMenu
+                  className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
+                  label={`${labelPrefix}模型选项`}
+                  placement="top-start"
+                  style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                  onPointerDown={(event) => event.stopPropagation()}
+                >
+                  <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                    {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
+                      const selected = selection.model === option.value;
+                      return (
+                        <OptionChoice
+                          key={option.value}
+                          selected={selected}
+                          className="image-canvas-editor__option-popover-choice--model"
+                          onClick={() => updateImageModel(option.value)}
                         >
-                          <Cpu />
-                        </span>
-                        <span>{option.label}</span>
-                        <Check
-                          className="image-canvas-editor__option-selected-check"
-                          data-visible={selected}
-                          aria-hidden="true"
-                        />
-                      </OptionChoice>
-                    );
-                  })}
-                </div>
-              </PlatformFloatingMenu>,
-            )
-          : null}
-      </div>
+                          <span
+                            className="image-canvas-editor__model-icon"
+                            aria-hidden="true"
+                          >
+                            <Cpu />
+                          </span>
+                          <span>{option.label}</span>
+                          <Check
+                            className="image-canvas-editor__option-selected-check"
+                            data-visible={selected}
+                            aria-hidden="true"
+                          />
+                        </OptionChoice>
+                      );
+                    })}
+                  </div>
+                </PlatformFloatingMenu>,
+              )
+            : null}
+        </div>
+      ) : null}
       {typeof cost === 'number' ? (
         <PlatformActionButton
           type="submit"
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 501c3ec17..4bf585820 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -96,7 +96,7 @@ export const DEFAULT_ICON_DESCRIPTIONS = [
   '冻结按钮',
 ];
 export const UI_DESIGN_ASSET_EXTRACTION_PROMPT =
-  '仅提取被红色框框选的素材并整理成spritesheet';
+  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。';
 export const QUICK_EDIT_SIZE_PRESETS = [
   '1024x1024',
   '1536x1024',
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.test.ts b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
index 097dfbabb..ed0e2fd48 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.test.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
@@ -15,6 +15,7 @@ import {
   resolveQuickEditFocusViewport,
   resolveQuickEditPanelStyle,
   resolveSelectedToolbarStyle,
+  resolveViewportForOverlayVisibility,
 } from './ImageCanvasOverlayModel';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
@@ -182,6 +183,66 @@ describe('ImageCanvasOverlayModel', () => {
     ).toEqual({ left: 536, top: 120 });
   });
 
+  it('pans the viewport until an opened composer is inside the visible safe area', () => {
+    expect(
+      resolveViewportForOverlayVisibility({
+        viewport: { x: 10, y: 20, scale: 1 },
+        overlayBounds: {
+          left: 210,
+          top: 430,
+          right: 690,
+          bottom: 650,
+        },
+        safeBounds: {
+          left: 12,
+          top: 12,
+          right: 888,
+          bottom: 560,
+        },
+      }),
+    ).toEqual({ x: 10, y: -70, scale: 1 });
+  });
+
+  it('pans sideways when a centered composer would leave the viewport', () => {
+    expect(
+      resolveViewportForOverlayVisibility({
+        viewport: { x: 0, y: 0, scale: 1 },
+        overlayBounds: {
+          left: -80,
+          top: 120,
+          right: 420,
+          bottom: 320,
+        },
+        safeBounds: {
+          left: 12,
+          top: 12,
+          right: 888,
+          bottom: 560,
+        },
+      }),
+    ).toEqual({ x: 92, y: 0, scale: 1 });
+  });
+
+  it('centers an oversized composer within the available safe area', () => {
+    expect(
+      resolveViewportForOverlayVisibility({
+        viewport: { x: 0, y: 0, scale: 1 },
+        overlayBounds: {
+          left: 20,
+          top: 20,
+          right: 700,
+          bottom: 620,
+        },
+        safeBounds: {
+          left: 12,
+          top: 12,
+          right: 612,
+          bottom: 512,
+        },
+      }),
+    ).toEqual({ x: -48, y: -58, scale: 1 });
+  });
+
   it('recognizes canvas generation composer dialog modes', () => {
     expect(isCanvasGenerationComposerVisible(createDialog({ mode: 'generate' }))).toBe(
       true,
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.ts b/src/components/image-editor/ImageCanvasOverlayModel.ts
index be6bb684d..2d6fa63fb 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.ts
@@ -25,6 +25,7 @@ const QUICK_EDIT_FOCUS_SOURCE_TOP = 56;
 const QUICK_EDIT_PANEL_GAP = 12;
 const QUICK_EDIT_PANEL_ESTIMATED_HEIGHT = 260;
 const QUICK_EDIT_PANEL_BOTTOM_MARGIN = 4;
+const OVERLAY_VISIBILITY_EPSILON = 0.5;
 
 export type CanvasOverlayStyle = {
   left: number;
@@ -35,6 +36,72 @@ export type CanvasComposerOverlayStyle = CanvasOverlayStyle & {
   width?: string;
 };
 
+export type CanvasOverlayBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+function resolveOverlayAxisShift({
+  start,
+  end,
+  safeStart,
+  safeEnd,
+}: {
+  start: number;
+  end: number;
+  safeStart: number;
+  safeEnd: number;
+}) {
+  const size = end - start;
+  const safeSize = safeEnd - safeStart;
+  if (size > safeSize) {
+    return safeStart + (safeSize - size) / 2 - start;
+  }
+  if (start < safeStart) {
+    return safeStart - start;
+  }
+  if (end > safeEnd) {
+    return safeEnd - end;
+  }
+  return 0;
+}
+
+export function resolveViewportForOverlayVisibility({
+  viewport,
+  overlayBounds,
+  safeBounds,
+}: {
+  viewport: CanvasViewport;
+  overlayBounds: CanvasOverlayBounds;
+  safeBounds: CanvasOverlayBounds;
+}): CanvasViewport {
+  const shiftX = resolveOverlayAxisShift({
+    start: overlayBounds.left,
+    end: overlayBounds.right,
+    safeStart: safeBounds.left,
+    safeEnd: safeBounds.right,
+  });
+  const shiftY = resolveOverlayAxisShift({
+    start: overlayBounds.top,
+    end: overlayBounds.bottom,
+    safeStart: safeBounds.top,
+    safeEnd: safeBounds.bottom,
+  });
+  if (
+    Math.abs(shiftX) <= OVERLAY_VISIBILITY_EPSILON &&
+    Math.abs(shiftY) <= OVERLAY_VISIBILITY_EPSILON
+  ) {
+    return viewport;
+  }
+  return {
+    ...viewport,
+    x: viewport.x + shiftX,
+    y: viewport.y + shiftY,
+  };
+}
+
 export function resolveGenerationAnchor({
   dialog,
   generatedLayer,
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
index b21e18524..60dfd6f91 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
@@ -1,42 +1,22 @@
-import { Check, ChevronDown, Cpu, ImageIcon, ImagePlus } from 'lucide-react';
+import { ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
-  type ReactNode,
   type RefObject,
   type SetStateAction,
-  useCallback,
-  useRef,
-  useState,
+  type ReactNode,
 } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import {
-  PlatformFloatingMenu,
-  PlatformFloatingMenuItem,
-} from '../common/PlatformFloatingMenu';
-import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
+import { QUICK_EDIT_REFERENCE_LIMIT } from './ImageCanvasGenerationModel';
 import type {
   CanvasLayer,
-  CharacterReferenceImage,
+  GenerateDialogState,
   QuickEditPanelState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
-import {
-  calculateEditorImageModelPrice,
-  EDITOR_IMAGE_DIMENSION_OPTIONS,
-  EDITOR_IMAGE_MODEL_OPTIONS,
-  getEditorImageModelDisplayName,
-  IMAGE_MODEL_NANOBANANA2,
-  normalizeEditorImageModel,
-  QUICK_EDIT_REFERENCE_LIMIT,
-  resolveEditorImageSizeLabel,
-} from './ImageCanvasGenerationModel';
-import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
-type ImageCanvasQuickEditPanelViewProps = {
+export type ImageCanvasQuickEditPanelViewProps = {
   panel: QuickEditPanelState;
   sourceLayer: CanvasLayer;
   style: CSSProperties;
@@ -50,16 +30,14 @@ type ImageCanvasQuickEditPanelViewProps = {
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
-  onRequestUpload?: (target: 'quick-edit-reference') => void;
+  onRequestUpload?: (target: UploadTarget) => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit: () => void;
 };
 
-type OpenPanel = 'dimensions' | 'model' | null;
-
-function resetFailedPanelStatus<T extends { status: string; errorMessage?: string }>(
-  panel: T,
-) {
+function resetFailedPanelStatus<
+  T extends { status: string; errorMessage?: string },
+>(panel: T) {
   return {
     ...panel,
     status: panel.status === 'failed' ? 'idle' : panel.status,
@@ -67,88 +45,44 @@ function resetFailedPanelStatus<T extends { status: string; errorMessage?: strin
   };
 }
 
-function QuickEditReferenceChip({
-  reference,
-  index,
-  onRemove,
-}: {
-  reference: CharacterReferenceImage;
-  index: number;
-  onRemove: () => void;
-}) {
-  const label = `图${index + 1}`;
-  return (
-    <ImageCanvasReferenceSlot
-      tone="quick-edit"
-      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-      imageSrc={reference.src}
-      objectKey={reference.objectKey}
-      label={label}
-      ariaLabel={label}
-      title={reference.label}
-      onRemove={onRemove}
-      removeLabel={`删除${label}`}
-    />
-  );
+function createQuickEditDialog(
+  panel: QuickEditPanelState,
+): GenerateDialogState {
+  return {
+    mode: panel.mode ?? 'quick-edit',
+    prompt: panel.prompt,
+    status: panel.status,
+    sourceLayerId: panel.sourceLayerId,
+    generationReferences: panel.quickEditReferences,
+    imageModel: panel.model,
+    aspectRatio: panel.aspectRatio,
+    imageSize: panel.imageSize,
+  };
 }
 
-function getImageDimensionOptions(model: string | null | undefined) {
-  return (
-    EDITOR_IMAGE_DIMENSION_OPTIONS[
-      (normalizeEditorImageModel(model) ??
-        IMAGE_MODEL_NANOBANANA2) as keyof typeof EDITOR_IMAGE_DIMENSION_OPTIONS
-    ] ?? EDITOR_IMAGE_DIMENSION_OPTIONS[IMAGE_MODEL_NANOBANANA2]
-  );
-}
-
-function getPanelAspectRatio(panel: QuickEditPanelState) {
-  const options = getImageDimensionOptions(panel.model);
-  const aspectRatios = options.aspectRatios as readonly string[];
-  return panel.aspectRatio && aspectRatios.includes(panel.aspectRatio)
-    ? panel.aspectRatio
-    : (options.aspectRatios[0] ?? '1:1');
-}
-
-function getPanelImageSize(panel: QuickEditPanelState) {
-  const options = getImageDimensionOptions(panel.model);
-  const imageSizes = options.imageSizes as readonly string[];
-  return panel.imageSize && imageSizes.includes(panel.imageSize)
-    ? panel.imageSize
-    : (options.imageSizes.find((size) => size === '1K') ??
-        options.imageSizes[0] ??
-        '1K');
-}
-
-function QuickEditOptionChoice({
-  children,
-  selected,
-  className,
-  ariaLabel,
-  onClick,
-}: {
-  children: ReactNode;
-  selected: boolean;
-  className?: string;
-  ariaLabel?: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      className={['image-canvas-editor__option-popover-choice', className]
-        .filter(Boolean)
-        .join(' ')}
-      aria-pressed={selected}
-      aria-label={ariaLabel}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
+function syncPanelFromDialogUpdate(
+  panel: QuickEditPanelState,
+  dialog: GenerateDialogState,
+) {
+  const normalizedPanel = resetFailedPanelStatus(panel);
+  const normalizedDialog = resetFailedPanelStatus(dialog);
+  return {
+    ...normalizedPanel,
+    size: panel.size,
+    prompt: dialog.prompt,
+    aspectRatio:
+      normalizedDialog.aspectRatio ?? normalizedPanel.aspectRatio ?? '1:1',
+    imageSize: normalizedDialog.imageSize ?? normalizedPanel.imageSize ?? '1K',
+    model: normalizedDialog.imageModel ?? normalizedPanel.model,
+    quickEditReferences: normalizedDialog.generationReferences,
+    status: normalizedDialog.status,
+    errorMessage: normalizedDialog.errorMessage,
+  };
 }
 
 export function ImageCanvasQuickEditPanelView({
   panel,
+  sourceLayer,
   style,
   referenceButtonRef,
   isReferenceMenuOpen = false,
@@ -157,333 +91,82 @@ export function ImageCanvasQuickEditPanelView({
   setQuickEditPanel,
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
-  onRequestUpload = () => {},
+  onRequestUpload,
   onRememberImageModel = () => {},
   onSubmit,
 }: ImageCanvasQuickEditPanelViewProps) {
-  const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
-  const dimensionsButtonRef = useRef<HTMLButtonElement | null>(null);
-  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
+  void sourceLayer;
+
   const isRedraw = panel.mode === 'redraw';
-  const isGenerating = panel.status === 'generating';
-  const panelLabel = isRedraw ? '重绘图片' : '快速编辑图片';
-  const promptLabel = isRedraw ? '重绘提示词' : '快速编辑提示词';
-  const references = panel.quickEditReferences ?? [];
-  const selectedModel = normalizeEditorImageModel(panel.model);
-  const selectedModelLabel = getEditorImageModelDisplayName(selectedModel);
-  const dimensionOptions = getImageDimensionOptions(selectedModel);
-  const selectedAspectRatio = getPanelAspectRatio(panel);
-  const selectedImageSize = getPanelImageSize(panel);
-  const dimensionLabel = resolveEditorImageSizeLabel({
-    aspectRatio: selectedAspectRatio,
-    imageSize: selectedImageSize,
-  });
+  const referenceCount = panel.quickEditReferences?.length ?? 0;
   const canAddReferences =
-    !isRedraw && !isGenerating && references.length < QUICK_EDIT_REFERENCE_LIMIT;
-  const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
-
-  useImageCanvasFloatingOptionDismiss({
-    isOpen: openPanel !== null,
-    boundaryRefs: [dimensionsButtonRef, modelButtonRef],
-    onDismiss: dismissOpenPanel,
-  });
-
-  const updatePanel = (patch: Partial<QuickEditPanelState>) => {
-    setQuickEditPanel((currentPanel) =>
-      currentPanel
-        ? {
-            ...resetFailedPanelStatus(currentPanel),
-            ...patch,
-          }
-        : currentPanel,
-    );
-  };
-
-  const updateModel = (model: string) => {
-    const nextOptions = getImageDimensionOptions(model);
-    const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
-    const nextImageSizes = nextOptions.imageSizes as readonly string[];
-    onRememberImageModel(model);
-    setQuickEditPanel((currentPanel) => {
-      if (!currentPanel) {
-        return currentPanel;
-      }
-      return {
-        ...resetFailedPanelStatus(currentPanel),
-        model,
-        aspectRatio:
-          currentPanel.aspectRatio &&
-          nextAspectRatios.includes(currentPanel.aspectRatio)
-            ? currentPanel.aspectRatio
-            : (nextOptions.aspectRatios[0] ?? '1:1'),
-        imageSize:
-          currentPanel.imageSize && nextImageSizes.includes(currentPanel.imageSize)
-            ? currentPanel.imageSize
-            : (nextOptions.imageSizes.find((size) => size === '1K') ??
-              nextOptions.imageSizes[0]),
-      };
-    });
-  };
-
-  const togglePanel = (nextPanel: Exclude<OpenPanel, null>) => {
-    setOpenPanel((currentPanel) =>
-      currentPanel === nextPanel ? null : nextPanel,
-    );
-  };
+    !isRedraw && referenceCount < QUICK_EDIT_REFERENCE_LIMIT;
+  const quickEditDialog = createQuickEditDialog(panel);
 
   return (
-    <>
-      <form
-        className="image-canvas-editor__quick-edit-panel image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--quick-edit"
-        style={style}
-        role="dialog"
-        aria-label={panelLabel}
-        onPointerDown={(event) => event.stopPropagation()}
-        onSubmit={(event) => {
-          event.preventDefault();
-          onSubmit();
-        }}
-      >
-        <div className="image-canvas-editor__reference-strip">
-          {!isRedraw
-            ? references.map((reference, index) => (
-                <QuickEditReferenceChip
-                  key={reference.id}
-                  reference={reference}
-                  index={index}
-                  onRemove={() =>
-                    setQuickEditPanel((currentPanel) =>
-                      currentPanel
-                        ? {
-                            ...resetFailedPanelStatus(currentPanel),
-                            quickEditReferences: (
-                              currentPanel.quickEditReferences ?? []
-                            ).filter((item) => item.id !== reference.id),
-                          }
-                        : currentPanel,
-                    )
-                  }
-                />
-              ))
-            : null}
-          {!isRedraw ? (
-            <ImageCanvasReferenceSlot
-              buttonRef={referenceButtonRef}
-              tone="quick-edit"
-              icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
-              label="参考图"
-              ariaLabel="添加快速编辑参考图"
-              disabled={!canAddReferences}
-              isAdd
-              onClick={() => setIsReferenceMenuOpen?.((open) => !open)}
-            />
-          ) : null}
-        </div>
-        <PlatformTextField
-          variant="textarea"
-          aria-label={promptLabel}
-          value={panel.prompt}
-          disabled={isGenerating}
-          size="sm"
-          density="compact"
-          className="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
-          onChange={(event) =>
-            updatePanel({
-              prompt: event.target.value,
-            })
+    <ImageCanvasBasicGenerationComposerView
+      dialog={quickEditDialog}
+      style={style}
+      setGenerateDialog={(valueOrUpdater) => {
+        setQuickEditPanel((currentPanel) => {
+          if (!currentPanel) {
+            return currentPanel;
           }
-        />
-        {panel.status === 'failed' ? (
-          <PlatformStatusMessage
-            tone="error"
-            surface="platform"
-            size="xs"
-            className="image-canvas-editor__generate-status"
-            role="alert"
-          >
-            {panel.errorMessage}
-          </PlatformStatusMessage>
-        ) : null}
-        <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer">
-          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
-            <PlatformInlineOptionButton
-              ref={dimensionsButtonRef}
-              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}尺寸 ${dimensionLabel}`}
-              aria-expanded={openPanel === 'dimensions'}
-              disabled={isGenerating}
-              trailingIcon={<ChevronDown className="h-3 w-3" />}
-              onClick={() => togglePanel('dimensions')}
-            >
-              {dimensionLabel}
-            </PlatformInlineOptionButton>
-            {openPanel === 'dimensions'
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
-                    label={`${isRedraw ? '重绘' : '快速编辑'}尺寸选项`}
-                    placement="top-start"
-                    style={buildPortalMenuStyle(
-                      dimensionsButtonRef.current,
-                      'above',
-                    )}
-                    onPointerDown={(event) => event.stopPropagation()}
-                  >
-                    <div className="image-canvas-editor__option-popover-sections">
-                      <div className="image-canvas-editor__option-popover-section">
-                        <span className="image-canvas-editor__option-popover-title">
-                          比例
-                        </span>
-                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
-                          {dimensionOptions.aspectRatios.map((aspectRatio) => (
-                            <QuickEditOptionChoice
-                              key={aspectRatio}
-                              selected={selectedAspectRatio === aspectRatio}
-                              className="image-canvas-editor__option-popover-choice--ratio"
-                              ariaLabel={`比例 ${aspectRatio}`}
-                              onClick={() => updatePanel({ aspectRatio })}
-                            >
-                              <span
-                                className="image-canvas-editor__ratio-wireframe"
-                                data-ratio={aspectRatio}
-                                aria-hidden="true"
-                              />
-                              <span>{aspectRatio}</span>
-                            </QuickEditOptionChoice>
-                          ))}
-                        </div>
-                      </div>
-                      <div className="image-canvas-editor__option-popover-section">
-                        <span className="image-canvas-editor__option-popover-title">
-                          尺寸
-                        </span>
-                        <div className="image-canvas-editor__option-popover-items">
-                          {dimensionOptions.imageSizes.map((imageSize) => (
-                            <QuickEditOptionChoice
-                              key={imageSize}
-                              selected={selectedImageSize === imageSize}
-                              ariaLabel={`尺寸 ${imageSize}`}
-                              onClick={() => updatePanel({ imageSize })}
-                            >
-                              {imageSize}
-                            </QuickEditOptionChoice>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
-            <PlatformInlineOptionButton
-              ref={modelButtonRef}
-              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}模型 ${selectedModelLabel}`}
-              aria-expanded={openPanel === 'model'}
-              disabled={isGenerating}
-              trailingIcon={<ChevronDown className="h-3 w-3" />}
-              onClick={() => togglePanel('model')}
-            >
-              <span className="image-canvas-editor__model-trigger-label">
-                <span
-                  className="image-canvas-editor__model-icon"
-                  aria-hidden="true"
-                >
-                  <Cpu />
-                </span>
-                <span>{selectedModelLabel}</span>
-              </span>
-            </PlatformInlineOptionButton>
-            {openPanel === 'model'
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
-                    label={`${isRedraw ? '重绘' : '快速编辑'}模型选项`}
-                    placement="top-start"
-                    style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
-                    onPointerDown={(event) => event.stopPropagation()}
-                  >
-                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
-                      {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-                        const selected = selectedModel === option.value;
-                        return (
-                          <QuickEditOptionChoice
-                            key={option.value}
-                            selected={selected}
-                            className="image-canvas-editor__option-popover-choice--model"
-                            onClick={() => updateModel(option.value)}
-                          >
-                            <span
-                              className="image-canvas-editor__model-icon"
-                              aria-hidden="true"
-                            >
-                              <Cpu />
-                            </span>
-                            <span>{option.label}</span>
-                            <Check
-                              className="image-canvas-editor__option-selected-check"
-                              data-visible={selected}
-                              aria-hidden="true"
-                            />
-                          </QuickEditOptionChoice>
-                        );
-                      })}
-                    </div>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-          <PlatformActionButton
-            type="submit"
-            tone="secondary"
-            size="xs"
-            shape="pill"
-            className="image-canvas-editor__generation-submit image-canvas-editor__quick-edit-submit"
-            disabled={isGenerating}
-            aria-label={isGenerating ? '生成中' : '生成'}
-          >
-            {isGenerating ? (
-              '生成中'
-            ) : (
-              <>
-                <span>生成</span>
-                <span className="image-canvas-editor__mud-point-inline">
-                  {calculateEditorImageModelPrice(panel.model, selectedImageSize)}泥点
-                </span>
-              </>
-            )}
-          </PlatformActionButton>
-        </div>
-      </form>
-      {!isRedraw && isReferenceMenuOpen && referenceButtonRef
-        ? renderEditorPortal(
-            <PlatformFloatingMenu
-              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="快速编辑参考图来源"
-              placement="top-start"
-              style={buildPortalMenuStyle(referenceButtonRef.current, 'above')}
-            >
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsReferenceMenuOpen?.(false);
-                  setIsPickingQuickEditReferenceFromCanvas?.(true);
-                }}
-              >
-                从画布中选择
-              </PlatformFloatingMenuItem>
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsReferenceMenuOpen?.(false);
-                  setIsPickingQuickEditReferenceFromCanvas?.(false);
-                  onRequestUpload('quick-edit-reference');
-                }}
-              >
-                上传图片
-              </PlatformFloatingMenuItem>
-            </PlatformFloatingMenu>,
-          )
-        : null}
-    </>
+          const currentDialog = createQuickEditDialog(currentPanel);
+          const nextDialog =
+            typeof valueOrUpdater === 'function'
+              ? valueOrUpdater(currentDialog)
+              : valueOrUpdater;
+          if (!nextDialog) {
+            return currentPanel;
+          }
+          return syncPanelFromDialogUpdate(currentPanel, nextDialog);
+        });
+      }}
+      generationReferenceButtonRef={referenceButtonRef}
+      isGenerationReferenceMenuOpen={isReferenceMenuOpen}
+      setIsGenerationReferenceMenuOpen={setIsReferenceMenuOpen}
+      setIsPickingGenerationReferenceFromCanvas={
+        setIsPickingQuickEditReferenceFromCanvas
+      }
+      onRequestUpload={onRequestUpload ?? (() => {})}
+      onPickReferenceFromCanvas={() =>
+        setIsPickingQuickEditReferenceFromCanvas?.(true)
+      }
+      onToggleReferenceMenu={() => setIsReferenceMenuOpen?.((open) => !open)}
+      onRememberImageModel={onRememberImageModel}
+      onSubmit={onSubmit}
+      dialogLabel={isRedraw ? '重绘图片' : '改造图片'}
+      includeDimensions={true}
+      includeModel={true}
+      includeReferences={!isRedraw}
+      promptLabel={isRedraw ? '重绘提示词' : '快速编辑提示词'}
+      promptPlaceholder={
+        isRedraw ? '把画面重绘成什么样？' : '想怎么改造这张图？'
+      }
+      optionLabelPrefix={isRedraw ? '重绘' : '快速编辑'}
+      dimensionRatioAriaLabelPrefix="比例"
+      dimensionSizeAriaLabelPrefix="尺寸"
+      referenceUploadTarget="quick-edit-reference"
+      referenceButtonLabel={isRedraw ? '' : '添加快速编辑参考图'}
+      referenceButtonAriaLabel={isRedraw ? undefined : '添加快速编辑参考图'}
+      referenceMenuLabel={isRedraw ? '' : '快速编辑参考图来源'}
+      referenceSlotTone="quick-edit"
+      referenceSlotDisabled={!canAddReferences}
+      showReferenceAddButton={!isRedraw}
+      referenceLabelFormatter={(_, index) => `图${index + 1}`}
+      referenceAriaLabelFormatter={(_, index) => `图${index + 1}`}
+      referenceRemoveLabelFormatter={(_, index) => `删除图${index + 1}`}
+      formClassName="image-canvas-editor__quick-edit-panel image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--quick-edit"
+      footerClassName="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer"
+      promptClassName="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
+      referenceSlotClassName="image-canvas-editor__quick-edit-reference"
+      submitButtonClassName="image-canvas-editor__generation-submit image-canvas-editor__quick-edit-submit"
+      submitLabel="生成"
+      submitAriaLabel="生成"
+      submittingStatusLabel="生成中"
+      renderEditorPortal={renderEditorPortal}
+      buildPortalMenuStyle={buildPortalMenuStyle}
+    />
   );
 }
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 73d88f1aa..1ee98f767 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -66,6 +66,7 @@ export type ImageCanvasStageViewProps = {
   canvasClipboard: CanvasClipboard | null;
   imageContextMenu: ImageContextMenuState | null;
   imageContextMenuLayer: CanvasLayer | null;
+  contextMenuLayer: CanvasLayer | null;
   contextShouldShowLayer: boolean;
   contextShouldUnlockLayer: boolean;
   canUndo: boolean;
@@ -137,7 +138,9 @@ export type ImageCanvasStageViewProps = {
   onToggleContextLayerVisibility: () => void;
   onToggleContextLayerLock: () => void;
   onFlipContextLayers: (axis: 'x' | 'y') => void;
-  onExportContextLayer: () => void;
+  onExportContextLayer: (options?: {
+    mode?: 'spine-json' | 'sequence-with-preview';
+  }) => void;
   onDeleteContextLayers: () => void;
   onDeleteLayerById: (layerId: string | null) => void;
   onCloseContextMenu: () => void;
@@ -194,6 +197,7 @@ export function ImageCanvasStageView({
   canvasClipboard,
   imageContextMenu,
   imageContextMenuLayer,
+  contextMenuLayer,
   contextShouldShowLayer,
   contextShouldUnlockLayer,
   canUndo,
@@ -362,6 +366,7 @@ export function ImageCanvasStageView({
         canvasClipboard={canvasClipboard}
         imageContextMenu={imageContextMenu}
         imageContextMenuLayer={imageContextMenuLayer}
+        contextMenuLayer={contextMenuLayer}
         contextShouldShowLayer={contextShouldShowLayer}
         contextShouldUnlockLayer={contextShouldUnlockLayer}
         onPasteCanvasClipboard={onPasteCanvasClipboard}
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index 74c681bfd..59eed6cb9 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -1087,6 +1087,14 @@ describe('ImageCanvasWorldView', () => {
     expect(frame.getAttribute('src')).toBe(
       'https://oss.example.com/frame01.png?signature=1',
     );
+    expect(frame.className).toBe(
+      'image-canvas-editor__layer-image-sequence-frame',
+    );
+    expect(frame.style.opacity).toBe('0');
+    expect(frame.style.transition).toBe('none');
+    fireEvent.load(frame);
+    expect(frame.style.opacity).toBe('1');
+    expect(frame.style.transition).toBe('none');
     expect(within(layerButton).getByText('1/2')).toBeTruthy();
     expect(within(layerButton).getByText('动作')).toBeTruthy();
 
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index c21917eb4..8efee1ae5 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -755,16 +755,14 @@ function ImageCanvasImageSequenceFrame({
       alt={isVisible ? `画布序列帧：${layer.title}` : ''}
       aria-hidden={isVisible ? undefined : true}
       decoding="async"
-      className={`image-canvas-editor__layer-image-sequence-frame ${
-        isVisible && isLoaded
-          ? 'image-canvas-editor__layer-image--loaded'
-          : 'image-canvas-editor__layer-image--loading'
-      }`}
+      className="image-canvas-editor__layer-image-sequence-frame"
       style={{
         inset: 0,
         opacity: isVisible && isLoaded ? 1 : 0,
         position: 'absolute',
+        transition: 'none',
         transform: mediaTransform,
+        zIndex: 1,
       }}
       onLoad={() => onFrameReady(frameKey)}
       onError={() => onFrameReady(frameKey)}
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 081f85abc..3fa2ee919 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -36,6 +36,12 @@ async function readZipText(zip: JSZip, path: string) {
   return file.async('text');
 }
 
+function readAscii(bytes: Uint8Array, start: number, end: number) {
+  return Array.from(bytes.slice(start, end), (byte) =>
+    String.fromCharCode(byte),
+  ).join('');
+}
+
 function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
   const workflow = useImageCanvasAssetExportWorkflow({
     layers,
@@ -65,6 +71,24 @@ function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
       >
         导出单图
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.exportLayerImage(layers[0] ?? null, {
+            mode: 'sequence-with-preview',
+          })
+        }
+      >
+        导出序列帧zip
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.exportLayerImage(layers[0] ?? null, { mode: 'spine-json' })
+        }
+      >
+        导出Spine zip
+      </button>
     </div>
   );
 }
@@ -515,4 +539,100 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
     }
   });
+
+  it('downloads character animation layers as sequence zip with gif preview', async () => {
+    Object.defineProperty(globalThis, 'createImageBitmap', {
+      configurable: true,
+      value: vi.fn(async () => ({ width: 1024, height: 1024 })),
+    });
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+      clearRect: vi.fn(),
+      drawImage: vi.fn(),
+      getImageData: vi.fn(
+        (_x: number, _y: number, width: number, height: number) => {
+          const data = new Uint8ClampedArray(width * height * 4);
+          for (let index = 0; index < data.length; index += 4) {
+            data[index] = 255;
+            data[index + 3] = 255;
+          }
+          return { data };
+        },
+      ),
+    } as unknown as CanvasRenderingContext2D);
+
+    let exportedBlob: Blob | null = null;
+    let downloadName = '';
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        exportedBlob = blob;
+        return 'blob:sequence-export';
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(
+      function click(this: HTMLAnchorElement) {
+        downloadName = this.download;
+      },
+    );
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('sequence-export', {
+              title: '角色动作/跑步',
+              src: 'data:image/png;base64,c2VxMQ==',
+              mediaType: 'image-sequence',
+              assetKind: 'character-animation',
+              imageSequenceFrames: [
+                {
+                  frameIndex: 1,
+                  imageSrc: 'data:image/png;base64,c2VxMQ==',
+                  width: 1024,
+                  height: 1024,
+                },
+                {
+                  frameIndex: 2,
+                  imageSrc: 'data:image/png;base64,c2VxMg==',
+                  width: 1024,
+                  height: 1024,
+                },
+              ],
+              durationSeconds: 4,
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '导出序列帧zip' }));
+
+      await waitFor(() => {
+        expect(exportedBlob).toBeTruthy();
+      });
+      expect(downloadName).toBe('角色动作 跑步-Sequence.zip');
+      const zip = await JSZip.loadAsync(exportedBlob!);
+      expect(zip.file('frames/frame-01.png')).toBeTruthy();
+      expect(zip.file('frames/frame-02.png')).toBeTruthy();
+      const previewGif = await zip.file('preview.gif')!.async('uint8array');
+      expect(readAscii(previewGif, 0, 6)).toBe('GIF89a');
+      expect(readAscii(previewGif, 0, previewGif.length)).toContain(
+        'NETSCAPE2.0',
+      );
+      expect(await readZipText(zip, 'manifest.txt')).toContain('类型：序列帧');
+      expect(await readZipText(zip, 'metadata.json')).toContain(
+        '"frameCount": 2',
+      );
+      expect(zip.file('skeleton.json')).toBeNull();
+      expect(zip.file('README.md')).toBeNull();
+    } finally {
+      delete (globalThis as unknown as { createImageBitmap?: unknown })
+        .createImageBitmap;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index dcf9ba463..0e6245e4b 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -7,6 +7,7 @@ import type {
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
 import {
+  buildAnimatedGifPreviewBytes,
   blobToUint8Array,
   buildLayerExportMetadata,
   buildLayerVisibleExportMetadata,
@@ -28,12 +29,16 @@ export type AssetExportStatus = {
   message: string;
 };
 
+export type ImageSequenceExportMode = 'spine-json' | 'sequence-with-preview';
+
 type UseImageCanvasAssetExportWorkflowOptions = {
   layers: CanvasLayer[];
   projectId: string | null;
   projectTitle: string;
 };
 
+const GIF_PREVIEW_MAX_EDGE = 320;
+
 function triggerBrowserDownload(blob: Blob, downloadName: string) {
   if (
     typeof URL.createObjectURL !== 'function' ||
@@ -52,7 +57,97 @@ function triggerBrowserDownload(blob: Blob, downloadName: string) {
   return true;
 }
 
-async function buildImageSequenceZip(layer: CanvasLayer) {
+function createFallbackPreviewBlob(frameBlob: Blob) {
+  return frameBlob.size
+    ? new Blob([frameBlob], { type: 'image/gif' })
+    : new Blob([], { type: 'image/gif' });
+}
+
+function resolveGifPreviewSize(width: number, height: number) {
+  const safeWidth = Math.max(1, Math.round(width));
+  const safeHeight = Math.max(1, Math.round(height));
+  const scale = Math.min(
+    1,
+    GIF_PREVIEW_MAX_EDGE / Math.max(safeWidth, safeHeight),
+  );
+  return {
+    width: Math.max(1, Math.round(safeWidth * scale)),
+    height: Math.max(1, Math.round(safeHeight * scale)),
+  };
+}
+
+async function buildAnimatedSequencePreview(
+  frameBlobs: Blob[],
+  size: { width: number; height: number },
+  durationSeconds: number | null | undefined,
+) {
+  const firstFrameBlob = frameBlobs[0];
+  if (!firstFrameBlob?.size) {
+    return createFallbackPreviewBlob(firstFrameBlob ?? new Blob());
+  }
+
+  try {
+    if (typeof createImageBitmap === 'undefined') {
+      return createFallbackPreviewBlob(firstFrameBlob);
+    }
+    const firstFrameImage = await createImageBitmap(firstFrameBlob);
+    const canvas = document.createElement('canvas');
+    canvas.width = size.width || firstFrameImage.width;
+    canvas.height = size.height || firstFrameImage.height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return createFallbackPreviewBlob(firstFrameBlob);
+    }
+
+    const { width, height } = resolveGifPreviewSize(
+      size.width || firstFrameImage.width,
+      size.height || firstFrameImage.height,
+    );
+    canvas.width = width;
+    canvas.height = height;
+
+    const previewFrames = [];
+    for (const frameBlob of frameBlobs) {
+      const frameImage =
+        frameBlob === firstFrameBlob
+          ? firstFrameImage
+          : await createImageBitmap(frameBlob);
+      context.clearRect(0, 0, width, height);
+      context.drawImage(frameImage, 0, 0, width, height);
+      previewFrames.push({
+        width,
+        height,
+        rgba: context.getImageData(0, 0, width, height).data,
+      });
+    }
+
+    const duration =
+      typeof durationSeconds === 'number' && durationSeconds > 0
+        ? durationSeconds
+        : frameBlobs.length;
+    const delayCentiseconds = (duration / Math.max(1, frameBlobs.length)) * 100;
+    return new Blob(
+      [
+        buildAnimatedGifPreviewBytes({
+          width,
+          height,
+          frames: previewFrames,
+          frameDelayCentiseconds: delayCentiseconds,
+        }),
+      ],
+      {
+        type: 'image/gif',
+      },
+    );
+  } catch {
+    return createFallbackPreviewBlob(firstFrameBlob);
+  }
+}
+
+async function buildImageSequenceZip(
+  layer: CanvasLayer,
+  mode: ImageSequenceExportMode,
+) {
   const frames = getLayerImageSequenceFrames(layer);
   if (!frames.length) {
     throw new Error('序列帧为空');
@@ -65,10 +160,12 @@ async function buildImageSequenceZip(layer: CanvasLayer) {
   }> = [];
   const exportedFrames: ExportedImageSequenceFrame[] = [];
   let successCount = 0;
+  const frameBlobs: Blob[] = [];
 
   for (const [index, frame] of frames.entries()) {
     try {
       const blob = await readLayerImageSequenceFrameBlob(layer, frame);
+      frameBlobs.push(blob);
       const fileName = getImageSequenceFrameFileName(frame, index, blob.type);
       framesFolder.file(fileName, await blobToUint8Array(blob));
       exportedFrames.push({
@@ -90,6 +187,45 @@ async function buildImageSequenceZip(layer: CanvasLayer) {
     throw new Error('序列帧读取失败');
   }
 
+  const sequenceManifestLines = [
+    `素材：${layer.title}`,
+    `类型：${mode === 'spine-json' ? 'Spine JSON' : '序列帧'}`,
+    `帧数：${successCount}/${frames.length}`,
+    `时长：${layer.durationSeconds ? `${layer.durationSeconds}s` : '0s'}`,
+    failedFrames.length ? `失败帧数：${failedFrames.length}` : null,
+  ].filter(Boolean);
+
+  if (mode === 'sequence-with-preview') {
+    if (frameBlobs.length) {
+      const previewBlob = await buildAnimatedSequencePreview(
+        frameBlobs,
+        {
+          width: layer.width,
+          height: layer.height,
+        },
+        layer.durationSeconds,
+      );
+      zip.file('preview.gif', await blobToUint8Array(previewBlob));
+    }
+
+    zip.file(
+      'metadata.json',
+      JSON.stringify(
+        {
+          title: layer.title,
+          visible: buildLayerVisibleExportMetadata(layer),
+          frameCount: frames.length,
+          exportedFrameCount: successCount,
+          failedFrames,
+        },
+        null,
+        2,
+      ),
+    );
+    zip.file('manifest.txt', sequenceManifestLines.join('\n'));
+    return zip.generateAsync({ type: 'blob' });
+  }
+
   zip.file(
     'metadata.json',
     JSON.stringify(
@@ -138,16 +274,50 @@ export function useImageCanvasAssetExportWorkflow({
     useState<AssetExportStatus | null>(null);
   const [isExportingAssets, setIsExportingAssets] = useState(false);
 
-  const exportLayerImage = useCallback((layer: CanvasLayer | null) => {
-    if (!layer) {
-      return;
-    }
-    if (layer.mediaType === 'image-sequence') {
-      void buildImageSequenceZip(layer)
-        .then((zipBlob) => {
+  const exportLayerImage = useCallback(
+    (
+      layer: CanvasLayer | null,
+      options: { mode?: ImageSequenceExportMode } = {},
+    ) => {
+      const exportMode = options.mode ?? 'spine-json';
+      if (!layer) {
+        return;
+      }
+      if (layer.mediaType === 'image-sequence') {
+        void buildImageSequenceZip(layer, exportMode)
+          .then((zipBlob) => {
+            const modeName =
+              exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
+            const downloaded = triggerBrowserDownload(
+              zipBlob,
+              `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}.zip`,
+            );
+            if (!downloaded) {
+              setAssetExportStatus({
+                tone: 'error',
+                message: '当前浏览器不支持素材下载',
+              });
+            }
+          })
+          .catch(() => {
+            setAssetExportStatus({
+              tone: 'error',
+              message: '序列帧导出失败',
+            });
+          });
+        return;
+      }
+
+      void readLayerAssetBlob(layer)
+        .then((blob) => {
+          const extension = getLayerAssetExtensionFromTypeOrSrc(
+            layer.mediaType ?? 'image',
+            blob.type,
+            layer.objectKey ?? layer.src,
+          );
           const downloaded = triggerBrowserDownload(
-            zipBlob,
-            `${sanitizeExportFilePart(layer.title, '角色动作')}-SpineJSON.zip`,
+            blob,
+            `${sanitizeExportFilePart(layer.title, 'canvas-layer')}.${extension}`,
           );
           if (!downloaded) {
             setAssetExportStatus({
@@ -159,36 +329,12 @@ export function useImageCanvasAssetExportWorkflow({
         .catch(() => {
           setAssetExportStatus({
             tone: 'error',
-            message: '序列帧导出失败',
+            message: '素材导出失败',
           });
         });
-      return;
-    }
-    void readLayerAssetBlob(layer)
-      .then((blob) => {
-        const extension = getLayerAssetExtensionFromTypeOrSrc(
-          layer.mediaType ?? 'image',
-          blob.type,
-          layer.objectKey ?? layer.src,
-        );
-        const downloaded = triggerBrowserDownload(
-          blob,
-          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}.${extension}`,
-        );
-        if (!downloaded) {
-          setAssetExportStatus({
-            tone: 'error',
-            message: '当前浏览器不支持素材下载',
-          });
-        }
-      })
-      .catch(() => {
-        setAssetExportStatus({
-          tone: 'error',
-          message: '素材导出失败',
-        });
-      });
-  }, []);
+    },
+    [],
+  );
 
   const exportCanvasAssets = useCallback(async () => {
     if (isExportingAssets) {
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 4e268ff0a..6f232112c 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -1662,8 +1662,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
@@ -1715,8 +1717,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
@@ -1753,8 +1757,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
@@ -1805,7 +1811,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
             fields: expect.arrayContaining([
               expect.objectContaining({
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
               }),
             ]),
           }),
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index be112d68c..f81996560 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -2,7 +2,7 @@
 
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { useRef, useState } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type {
   CanvasGenerationDialogState,
@@ -31,6 +31,52 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   };
 });
 
+let mockedComposerRect: DOMRect | null = null;
+let originalGetBoundingClientRect: typeof Element.prototype.getBoundingClientRect;
+
+beforeEach(() => {
+  originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function getBoundingClientRect() {
+    if (
+      mockedComposerRect &&
+      this instanceof HTMLElement &&
+      this.classList.contains('image-canvas-editor__generation-composer')
+    ) {
+      return mockedComposerRect;
+    }
+    return originalGetBoundingClientRect.call(this);
+  };
+});
+
+afterEach(() => {
+  mockedComposerRect = null;
+  Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+});
+
+function createDomRect({
+  left,
+  top,
+  right,
+  bottom,
+}: {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}) {
+  return {
+    x: left,
+    y: top,
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+    toJSON: () => ({}),
+  } as DOMRect;
+}
+
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   const id = overrides.id ?? 'layer-a';
   return {
@@ -66,6 +112,7 @@ function GenerationSurfaceHarness() {
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const publicationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
+  const canvasViewportRef = useRef<HTMLDivElement | null>(null);
   const [viewport, setViewport] = useState({ x: 10, y: 20, scale: 2 });
   const dialogs = useCanvasGenerationDialogs();
   const activeDialog = dialogs.generateDialog;
@@ -78,6 +125,7 @@ function GenerationSurfaceHarness() {
     canvasSize: { width: 900, height: 640 },
     viewport,
     setViewport,
+    canvasViewportRef,
     setLayers,
     layerCounterRef,
     specToolWrapRef,
@@ -136,6 +184,8 @@ function GenerationSurfaceHarness() {
       <span data-testid="composer-top">
         {surface.generationComposerStyle?.top ?? '-'}
       </span>
+      <span data-testid="viewport-x">{viewport.x}</span>
+      <span data-testid="viewport-y">{viewport.y}</span>
       <button
         type="button"
         onClick={() => surface.switchGenerationTool('generate')}
@@ -204,7 +254,10 @@ function GenerationSurfaceHarness() {
       >
         切换选择
       </button>
-      {surface.generationComposerNode}
+      <div ref={canvasViewportRef} data-testid="viewport">
+        <div className="image-canvas-editor__bottom-toolbar">底部工具栏</div>
+        {surface.generationComposerNode}
+      </div>
     </div>
   );
 }
@@ -357,4 +410,54 @@ describe('useImageCanvasGenerationSurface', () => {
       screen.getByRole('dialog', { name: '生成游戏背景音乐' }),
     ).toBeTruthy();
   });
+
+  it('pans the canvas when an opened composer would be covered by the bottom toolbar', async () => {
+    render(<GenerationSurfaceHarness />);
+    const viewportElement = screen.getByTestId('viewport');
+    const toolbarElement = viewportElement.querySelector(
+      '.image-canvas-editor__bottom-toolbar',
+    ) as HTMLElement;
+
+    Object.defineProperty(viewportElement, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({
+        x: 0,
+        y: 0,
+        left: 0,
+        top: 0,
+        right: 900,
+        bottom: 640,
+        width: 900,
+        height: 640,
+        toJSON: () => ({}),
+      }),
+    });
+    Object.defineProperty(toolbarElement, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({
+        x: 250,
+        y: 570,
+        left: 250,
+        top: 570,
+        right: 650,
+        bottom: 620,
+        width: 400,
+        height: 50,
+        toJSON: () => ({}),
+      }),
+    });
+    mockedComposerRect = createDomRect({
+      left: 114,
+      top: 520,
+      right: 786,
+      bottom: 700,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '切换生成' }));
+    await screen.findByRole('dialog', { name: '生成图片' });
+
+    await act(async () => {});
+
+    expect(Number(screen.getByTestId('viewport-y').textContent)).toBe(1086);
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index d55924e65..d8d578d0e 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -7,6 +7,7 @@ import {
   type SetStateAction,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -40,6 +41,7 @@ import {
   resolveGenerationComposerStyle,
   resolveIconComposerStyle,
   resolveQuickEditPanelStyle,
+  resolveViewportForOverlayVisibility,
 } from './ImageCanvasOverlayModel';
 import { useImageCanvasGenerationWorkflow } from './useImageCanvasGenerationWorkflow';
 
@@ -54,6 +56,7 @@ type ImageCanvasGenerationSurfaceOptions = {
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
   setViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  canvasViewportRef: RefObject<HTMLDivElement | null>;
   setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
   layerCounterRef: MutableRefObject<number>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
@@ -133,12 +136,73 @@ function buildToolbarPortalMenuStyle(
 }
 
 const TOOLBAR_OPTION_CLOSE_DELAY_MS = 160;
+const COMPOSER_SAFE_MARGIN = 12;
+const COMPOSER_MIN_SAFE_HEIGHT = 120;
+
+function getViewportLocalBounds(
+  element: Element | null,
+  viewportRect: DOMRect,
+) {
+  const rect = element?.getBoundingClientRect();
+  if (!rect) {
+    return null;
+  }
+  return {
+    left: rect.left - viewportRect.left,
+    top: rect.top - viewportRect.top,
+    right: rect.right - viewportRect.left,
+    bottom: rect.bottom - viewportRect.top,
+  };
+}
+
+function getComposerSafeBounds(viewportElement: HTMLElement) {
+  const viewportRect = viewportElement.getBoundingClientRect();
+  const bottomToolbarBounds = getViewportLocalBounds(
+    viewportElement.querySelector('.image-canvas-editor__bottom-toolbar'),
+    viewportRect,
+  );
+  const panelDockBounds = getViewportLocalBounds(
+    viewportElement.querySelector('.image-canvas-editor__panel-dock'),
+    viewportRect,
+  );
+  const coveredBottom = Math.min(
+    viewportRect.height,
+    ...[bottomToolbarBounds, panelDockBounds]
+      .map((bounds) => bounds?.top)
+      .filter((top): top is number => typeof top === 'number'),
+  );
+  const safeBottom = Math.max(
+    COMPOSER_SAFE_MARGIN + COMPOSER_MIN_SAFE_HEIGHT,
+    coveredBottom - COMPOSER_SAFE_MARGIN,
+  );
+  return {
+    left: COMPOSER_SAFE_MARGIN,
+    top: COMPOSER_SAFE_MARGIN,
+    right: Math.max(
+      COMPOSER_SAFE_MARGIN,
+      viewportRect.width - COMPOSER_SAFE_MARGIN,
+    ),
+    bottom: safeBottom,
+  };
+}
+
+function getActiveComposerElement(viewportElement: HTMLElement) {
+  return viewportElement.querySelector<HTMLElement>(
+    [
+      '.image-canvas-editor__generation-composer[role="dialog"]',
+      '.image-canvas-editor__quick-edit-panel[role="dialog"]',
+      '.image-canvas-editor__crop-expand-panel[role="dialog"]',
+      '.image-canvas-editor__character-animation-panel[role="dialog"]',
+    ].join(', '),
+  );
+}
 
 export function useImageCanvasGenerationSurface({
   layers,
   canvasSize,
   viewport,
   setViewport,
+  canvasViewportRef,
   setLayers,
   layerCounterRef,
   specToolWrapRef,
@@ -179,6 +243,7 @@ export function useImageCanvasGenerationSurface({
   const toolbarOptionCloseTimerRef = useRef<ReturnType<
     typeof setTimeout
   > | null>(null);
+  const adjustedComposerVisibilityKeyRef = useRef<string | null>(null);
   const generationWorkflow = useImageCanvasGenerationWorkflow({
     layers,
     canvasSize,
@@ -251,6 +316,72 @@ export function useImageCanvasGenerationSurface({
           viewport,
           canvasSize,
         });
+  const activeComposerVisibilityKey =
+    activeCanvasGenerationDialog &&
+    activeCanvasGenerationDialog.status !== 'generating' &&
+    activeCanvasGenerationDialog.composerOpen !== false &&
+    generationComposerStyle
+      ? `${activeCanvasGenerationDialog.id}:${activeCanvasGenerationDialog.mode}:${activeCanvasGenerationDialog.placeholder?.x ?? '-'}:${activeCanvasGenerationDialog.placeholder?.y ?? '-'}:${activeCanvasGenerationDialog.placeholder?.width ?? '-'}:${activeCanvasGenerationDialog.placeholder?.height ?? '-'}`
+      : generationWorkflow.quickEditPanel &&
+          generationWorkflow.quickEditSourceLayer &&
+          quickEditPanelStyle
+        ? `quick-edit-panel:${generationWorkflow.quickEditPanel.sourceLayerId}:${generationWorkflow.quickEditPanel.mode ?? 'quick-edit'}`
+        : generationWorkflow.cropExpandPanel &&
+            generationWorkflow.cropExpandSourceLayer &&
+            cropExpandPanelStyle
+          ? `crop-expand-panel:${generationWorkflow.cropExpandPanel.sourceLayerId}`
+          : generationWorkflow.characterAnimationPanel &&
+              generationWorkflow.characterAnimationSourceLayer &&
+              characterAnimationPanelStyle
+            ? `character-animation-panel:${generationWorkflow.characterAnimationPanel.sourceLayerId}`
+            : null;
+
+  useLayoutEffect(() => {
+    if (!activeComposerVisibilityKey) {
+      adjustedComposerVisibilityKeyRef.current = null;
+      return;
+    }
+    if (
+      adjustedComposerVisibilityKeyRef.current === activeComposerVisibilityKey
+    ) {
+      return;
+    }
+    const viewportElement = canvasViewportRef.current;
+    if (!viewportElement) {
+      return;
+    }
+    const composerElement = getActiveComposerElement(viewportElement);
+    if (!composerElement) {
+      return;
+    }
+    const viewportRect = viewportElement.getBoundingClientRect();
+    if (viewportRect.width <= 0 || viewportRect.height <= 0) {
+      return;
+    }
+    const composerRect = composerElement.getBoundingClientRect();
+    if (composerRect.width <= 0 || composerRect.height <= 0) {
+      return;
+    }
+    const nextViewport = resolveViewportForOverlayVisibility({
+      viewport,
+      overlayBounds: {
+        left: composerRect.left - viewportRect.left,
+        top: composerRect.top - viewportRect.top,
+        right: composerRect.right - viewportRect.left,
+        bottom: composerRect.bottom - viewportRect.top,
+      },
+      safeBounds: getComposerSafeBounds(viewportElement),
+    });
+    if (nextViewport !== viewport) {
+      adjustedComposerVisibilityKeyRef.current = activeComposerVisibilityKey;
+      setViewport(nextViewport);
+    }
+  }, [
+    activeComposerVisibilityKey,
+    canvasViewportRef,
+    setViewport,
+    viewport,
+  ]);
 
   const clearToolbarOptionCloseTimer = useCallback(() => {
     if (!toolbarOptionCloseTimerRef.current) {
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 74d69df72..37c2dabfc 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -22,6 +22,8 @@ const generateEditorSoundEffectMock = vi.hoisted(() => vi.fn());
 const generateEditorBackgroundMusicMock = vi.hoisted(() => vi.fn());
 const editEditorImageMock = vi.hoisted(() => vi.fn());
 const renderCropExpandImageMock = vi.hoisted(() => vi.fn());
+const removeImageBackgroundMock = vi.hoisted(() => vi.fn());
+const resolveEditorImageReferenceDataUrlMock = vi.hoisted(() => vi.fn());
 
 vi.mock('../../services/image-editor/editorImageReference', async () => {
   const actual = await vi.importActual<
@@ -29,7 +31,7 @@ vi.mock('../../services/image-editor/editorImageReference', async () => {
   >('../../services/image-editor/editorImageReference');
   return {
     ...actual,
-    resolveEditorImageReferenceDataUrl: vi.fn(async (src: string) => src),
+    resolveEditorImageReferenceDataUrl: resolveEditorImageReferenceDataUrlMock,
     resolveEditorImageReferenceDataUrlForGeneration: vi.fn(
       async (src: string) => src,
     ),
@@ -57,6 +59,7 @@ vi.mock('./ImageCanvasRasterEditModel', async () => {
   >('./ImageCanvasRasterEditModel');
   return {
     ...actual,
+    removeImageBackground: removeImageBackgroundMock,
     renderCropExpandImage: renderCropExpandImageMock,
   };
 });
@@ -248,6 +251,23 @@ function GenerationWorkflowHarness({
       <button type="button" onClick={workflow.openGenerateDialog}>
         打开生成
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.openCanvasGenerationDialog({
+            mode: 'generate',
+            prompt: '',
+            status: 'idle',
+            composerOpen: true,
+            sourceLayerId: 'layer-source',
+            imageModel: 'gpt-image-2',
+            aspectRatio: '2:3',
+            imageSize: '2K',
+          })
+        }
+      >
+        写入源图生成参数快照
+      </button>
       <button type="button" onClick={workflow.openCharacterGenerationDialog}>
         打开角色生成
       </button>
@@ -334,6 +354,72 @@ function GenerationWorkflowHarness({
       >
         打开用户快照改造
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.openQuickEditPanel(
+            createLayer({
+              id: 'layer-character-generated',
+              title: '角色形象',
+              assetKind: 'character',
+              prompt: '【系统内置】角色提示词',
+              generationInputs: {
+                fields: [{ title: '角色设定', value: '红发骑士' }],
+                references: [],
+              },
+            }),
+          )
+        }
+      >
+        快速编辑角色图
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.openRedrawPanel(
+            createLayer({
+              id: 'layer-publication-generated',
+              title: '宣发素材',
+              assetKind: 'publication-material',
+              originalWidth: 720,
+              originalHeight: 1280,
+              width: 180,
+              height: 320,
+              prompt: '【系统内置】宣发提示词',
+              generationInputs: {
+                fields: [
+                  { title: '游戏名', value: '星海远征' },
+                  { title: '游戏分类', value: '冒险' },
+                  { title: '一句话描述游戏', value: '驾驶飞船探索星云' },
+                ],
+                references: [],
+              },
+            }),
+          )
+        }
+      >
+        改造宣发图
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.openCanvasGenerationDialog({
+            mode: 'generate',
+            prompt: '普通图',
+            status: 'idle',
+            composerOpen: true,
+            generatedLayerId: 'layer-source',
+            imageModel: 'gpt-image-2',
+            aspectRatio: '2:3',
+            imageSize: '2K',
+          })
+        }
+      >
+        写入普通图来源生成器
+      </button>
+      <button type="button" onClick={() => workflow.openQuickEditPanel(layers[0]!)}>
+        快速编辑来源普通图
+      </button>
       <button
         type="button"
         onClick={() => workflow.openCropExpandPanel(layers[0]!)}
@@ -373,6 +459,12 @@ function GenerationWorkflowHarness({
       <button type="button" onClick={() => void workflow.submitCropExpand()}>
         完成裁扩
       </button>
+      <button
+        type="button"
+        onClick={() => void workflow.removeSelectedLayerBackground(layers[0]!)}
+      >
+        去除背景
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -405,6 +497,21 @@ function GenerationWorkflowHarness({
       >
         填写生成提示词
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.setGenerateDialog((currentDialog) =>
+            currentDialog
+              ? {
+                  ...currentDialog,
+                  prompt: '快速修图',
+                }
+              : currentDialog,
+          )
+        }
+      >
+        填写快速编辑提示词
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -684,6 +791,9 @@ function GenerationWorkflowHarness({
 describe('useImageCanvasGenerationWorkflow', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    resolveEditorImageReferenceDataUrlMock.mockImplementation(
+      async (src: string) => src,
+    );
     window.localStorage.clear();
   });
 
@@ -699,6 +809,69 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('opens the source generator for generated character quick edit', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑角色图' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('character');
+    expect(screen.getByTestId('selected').textContent).toBe('-');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'character:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-prompt').textContent).toBe('-');
+    expect(screen.getByTestId('quick-edit-selection').textContent).toBe('-');
+  });
+
+  it('opens the source generator for generated publication redraw', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '改造宣发图' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('publication');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'publication:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-prompt').textContent).toBe(
+      '游戏名：星海远征\n游戏分类：冒险\n一句话描述游戏：驾驶飞船探索星云',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'publication:gpt-image-2:9:16:1K',
+    );
+  });
+
+  it('opens the source generator for plain generated images with a source dialog', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '写入普通图来源生成器' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑来源普通图' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('generate');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'generate:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'generate:gpt-image-2:2:3:2K',
+    );
+    expect(screen.getByTestId('quick-edit-selection').textContent).toBe('-');
+  });
+
+  it('keeps plain images without a source generator on quick edit generator', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('generate');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'quick-edit:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
+      'layer-source:none:0',
+    );
+  });
+
   it('calculates character animation button price from the model pricing config', () => {
     render(<GenerationWorkflowHarness />);
 
@@ -797,12 +970,12 @@ describe('useImageCanvasGenerationWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '打开生成' }));
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
 
-    expect(screen.getByTestId('dialog').textContent).toBe('-');
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:-',
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'quick-edit:idle:open:-:placeholder',
     );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     expect(screen.getByTestId('generation-dialogs').textContent).toBe(
-      'generation-dialog-1:generate:closed',
+      'generation-dialog-1:generate:closed|generation-dialog-2:quick-edit:open',
     );
   });
 
@@ -822,6 +995,58 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('keeps source image model and dimensions when opening quick edit', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          {
+            ...createLayer(),
+            originalWidth: 1537,
+            originalHeight: 1024,
+          },
+        ]}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '写入源图生成参数快照' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
+
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'generate:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'generate:gpt-image-2:2:3:2K',
+    );
+  });
+
+  it('keeps target generator options when opening redraw', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          {
+            ...createLayer(),
+            originalWidth: 1537,
+            originalHeight: 1024,
+          },
+        ]}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '写入源图生成参数快照' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '打开图片改造' }));
+
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'generate:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'generate:gpt-image-2:2:3:2K',
+    );
+  });
+
   it('submits audio remodel with restored sound parameters and appends the new audio layer', async () => {
     generateEditorSoundEffectMock.mockResolvedValueOnce({
       audioSrc: 'data:audio/mpeg;base64,generated',
@@ -1207,9 +1432,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
 
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:-',
-    );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:none:0',
     );
@@ -1244,15 +1467,15 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:none:0',
     );
-    fireEvent.click(screen.getByRole('button', { name: '选择快速编辑矩形框选' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '选择快速编辑矩形框选' }),
+    );
     fireEvent.click(screen.getByRole('button', { name: '快速编辑框选' }));
 
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:rect:1',
     );
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:对1号红色圈选框里的内容做以下修改：',
-    );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
 
     fireEvent.click(
       screen.getByRole('button', { name: '选择快速编辑椭圆框选' }),
@@ -1262,9 +1485,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:ellipse:2',
     );
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:对1号红色圈选框里的内容做以下修改：\n对2号红色圈选框里的内容做以下修改：',
-    );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
   });
 
   it('submits quick edits beside the source and fits source plus result', async () => {
@@ -1274,18 +1495,8 @@ describe('useImageCanvasGenerationWorkflow', () => {
     render(<GenerationWorkflowHarness />);
 
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
-    await waitFor(() => {
-      expect(screen.getByTestId('quick-edit').textContent).toBe(
-        'layer-source:idle:-',
-      );
-    });
-    fireEvent.click(screen.getByRole('button', { name: '填写快速编辑' }));
-    await waitFor(() => {
-      expect(screen.getByTestId('quick-edit').textContent).toBe(
-        'layer-source:idle:快速修图',
-      );
-    });
-    fireEvent.click(screen.getByRole('button', { name: '提交快速编辑' }));
+    fireEvent.click(screen.getByRole('button', { name: '填写快速编辑提示词' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交生成' }));
 
     await waitFor(() => {
       expect(generateEditorImageMock).toHaveBeenCalledWith({
@@ -1357,6 +1568,44 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('fit-count').textContent).toBe('1');
   });
 
+  it('resolves private character image before removing background', async () => {
+    resolveEditorImageReferenceDataUrlMock.mockResolvedValueOnce(
+      'data:image/png;base64,resolved-character',
+    );
+    removeImageBackgroundMock.mockResolvedValueOnce({
+      imageSrc: 'data:image/png;base64,no-background',
+      width: 512,
+      height: 768,
+    });
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            assetKind: 'character',
+            objectKey: 'generated-character-drafts/editor/private.png',
+            src: '/api/assets/read-url?objectKey=generated-character-drafts/editor/private.png',
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '去除背景' }));
+
+    await waitFor(() => {
+      expect(resolveEditorImageReferenceDataUrlMock).toHaveBeenCalledWith(
+        'generated-character-drafts/editor/private.png',
+      );
+    });
+    await waitFor(() => {
+      expect(removeImageBackgroundMock).toHaveBeenCalledWith(
+        'data:image/png;base64,resolved-character',
+      );
+    });
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'layer-source:源图:-:character',
+    );
+  });
+
   it('opens UI design extraction as a mark selection state before submitting', () => {
     render(<GenerationWorkflowHarness />);
 
@@ -1384,9 +1633,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
     await waitFor(() => {
-      expect(screen.getByTestId('quick-edit').textContent).toBe(
-        'layer-source:idle:-',
-      );
+      expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     });
     fireEvent.click(screen.getByRole('button', { name: '打开修改状态' }));
     fireEvent.click(screen.getByRole('button', { name: '打开UI素材框选' }));
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 5836af849..7a19ab3f6 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -10,6 +10,7 @@ import {
   useState,
 } from 'react';
 
+import { resolveEditorImageReferenceDataUrl } from '../../services/image-editor/editorImageReference';
 import type {
   EditorAssetSnapshot,
   EditorProjectSnapshot,
@@ -36,7 +37,6 @@ import {
   appendCharacterReference,
   appendGenerationReference,
   appendPublicationReference,
-  appendQuickEditReference,
   assignCharacterSpecReference,
   assignIconSpecReference,
   assignUiDesignSpecReference,
@@ -52,10 +52,12 @@ import {
   createQuickEditGenerationDialogDraft,
   createQuickEditPanelDraft,
   createRedrawPanelDraft,
+  createSameSourceGenerationDialogDraft,
   createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
   createVideoGenerationDialogDraft,
+  createVideoRedrawGenerationDialogDraft,
   hideGeneratedLayerComposerAfterBlur,
   isCharacterSpecReferenceLayer,
   isIconSpecReferenceLayer,
@@ -120,6 +122,60 @@ type RememberedImageGenerationOptions = {
   imageSize: string;
 };
 
+function findSourceGenerationDialog(
+  dialogs: CanvasGenerationDialogState[],
+  sourceLayer: CanvasLayer,
+) {
+  return [...dialogs].reverse().find(
+    (dialog) =>
+      dialog.generatedLayerId === sourceLayer.id ||
+      (!dialog.generatedLayerId && dialog.sourceLayerId === sourceLayer.id),
+  );
+}
+
+function findSourceAnimationLayer(layers: CanvasLayer[], sourceLayer: CanvasLayer) {
+  if (sourceLayer.assetKind !== 'character-animation') {
+    return null;
+  }
+  const sourceResourceId = sourceLayer.sourceResourceId?.trim();
+  if (!sourceResourceId) {
+    return null;
+  }
+  return (
+    layers.find(
+      (layer) =>
+        layer.resourceId === sourceResourceId && layer.assetKind === 'character',
+    ) ?? null
+  );
+}
+
+function getCanvasToolForGenerationMode(
+  mode: CanvasGenerationDialogState['mode'],
+): CanvasTool {
+  if (mode === 'video') {
+    return 'video';
+  }
+  if (mode === 'audio-sound-effect' || mode === 'audio-background-music') {
+    return 'music';
+  }
+  if (mode === 'character' || mode === 'character-animation') {
+    return 'character';
+  }
+  if (mode === 'icon') {
+    return 'icon';
+  }
+  if (mode === 'publication') {
+    return 'publication';
+  }
+  if (mode === 'ui-design') {
+    return 'ui-design';
+  }
+  if (mode === 'spec') {
+    return 'spec';
+  }
+  return 'generate';
+}
+
 const LAST_CHARACTER_SPEC_REFERENCE_CACHE_KEY =
   'genarrative.imageCanvas.lastCharacterSpecReference';
 const LAST_ICON_SPEC_REFERENCE_CACHE_KEY =
@@ -468,8 +524,9 @@ export function useImageCanvasGenerationWorkflow({
     useState<UiAssetExtractionState | null>(null);
   const [quickEditSelectionState, setQuickEditSelectionState] =
     useState<UiAssetExtractionState | null>(null);
-  const quickEditSelectionStateRef =
-    useRef<UiAssetExtractionState | null>(null);
+  const quickEditSelectionStateRef = useRef<UiAssetExtractionState | null>(
+    null,
+  );
   const cropExpandPanelRef = useRef<CropExpandPanelState | null>(null);
   const cropExpandResizeDragRef = useRef<CropExpandResizeDragState | null>(
     null,
@@ -895,16 +952,70 @@ export function useImageCanvasGenerationWorkflow({
     ],
   );
 
+  const createQuickEditModeDraft = useCallback(
+    (sourceLayer: CanvasLayer) => {
+      const sourceDialog = findSourceGenerationDialog(
+        canvasGenerationDialogs,
+        sourceLayer,
+      );
+      return createQuickEditPanelDraft(sourceLayer, {
+        imageModel: sourceDialog?.imageModel,
+        aspectRatio: sourceDialog?.aspectRatio,
+        imageSize: sourceDialog?.imageSize,
+      });
+    },
+    [canvasGenerationDialogs],
+  );
+
   const openQuickEditPanel = useCallback(
     (sourceLayer: CanvasLayer) => {
       setImageContextMenu(null);
       setMetadataLayer(null);
       setUiAssetExtractionState(null);
-      archiveActiveCanvasGenerationDialog();
-      setGenerateDialog(null);
       setCropExpandPanel(null);
       setCharacterAnimationPanel(null);
-      setQuickEditPanel(createQuickEditPanelDraft(sourceLayer));
+      const sourceDialog = findSourceGenerationDialog(
+        canvasGenerationDialogs,
+        sourceLayer,
+      );
+      const sameSourceDraft = createSameSourceGenerationDialogDraft({
+        sourceLayer,
+        canvasSize,
+        viewport,
+        sourceDialog,
+        mode: 'quick-edit',
+        sourceAnimationLayer: findSourceAnimationLayer(layers, sourceLayer),
+      });
+      if (sameSourceDraft) {
+        openPlacedCanvasGenerationDialog(sameSourceDraft);
+        setQuickEditPanel(null);
+        setQuickEditSelectionState(null);
+        selectSingleLayer(null);
+        setActiveTool(getCanvasToolForGenerationMode(sameSourceDraft.mode));
+        return;
+      }
+      const quickEditDraft = createQuickEditModeDraft(sourceLayer);
+      const quickEditSize = resolveEditorImageGenerationPixelSize({
+        model: quickEditDraft.model,
+        aspectRatio: quickEditDraft.aspectRatio,
+        imageSize: quickEditDraft.imageSize,
+      });
+      openPlacedCanvasGenerationDialog({
+        ...createQuickEditGenerationDialogDraft({
+          sourceLayer,
+          prompt: quickEditDraft.prompt,
+          references: quickEditDraft.quickEditReferences ?? [],
+          model: quickEditDraft.model,
+          aspectRatio: quickEditDraft.aspectRatio,
+          imageSize: quickEditDraft.imageSize,
+          frame: {
+            width: quickEditSize.width,
+            height: quickEditSize.height,
+          },
+        }),
+        composerOpen: true,
+      });
+      setQuickEditPanel(null);
       const nextSelectionState = createUiAssetExtractionState(sourceLayer.id, {
         initialTool: null,
       });
@@ -917,13 +1028,16 @@ export function useImageCanvasGenerationWorkflow({
     },
     [
       canvasSize,
+      createQuickEditModeDraft,
+      canvasGenerationDialogs,
+      layers,
+      openPlacedCanvasGenerationDialog,
       selectSingleLayer,
-      archiveActiveCanvasGenerationDialog,
       setActiveTool,
-      setGenerateDialog,
       setImageContextMenu,
       setMetadataLayer,
       setViewport,
+      viewport,
     ],
   );
 
@@ -973,11 +1087,45 @@ export function useImageCanvasGenerationWorkflow({
         setActiveTool('music');
         return;
       }
+      if (sourceLayer.mediaType === 'video') {
+        const videoDraft = createVideoRedrawGenerationDialogDraft(sourceLayer);
+        if (!videoDraft) {
+          return;
+        }
+        setQuickEditPanel(null);
+        selectSingleLayer(sourceLayer.id);
+        openCanvasGenerationDialog(videoDraft);
+        setActiveTool('video');
+        return;
+      }
       if (
         sourceLayer.mediaType === undefined ||
         sourceLayer.mediaType === 'image'
       ) {
-        const redrawPanel = createRedrawPanelDraft(sourceLayer);
+        const sourceDialog = findSourceGenerationDialog(
+          canvasGenerationDialogs,
+          sourceLayer,
+        );
+        const sameSourceDraft = createSameSourceGenerationDialogDraft({
+          sourceLayer,
+          canvasSize,
+          viewport,
+          sourceDialog,
+          mode: 'redraw',
+          sourceAnimationLayer: findSourceAnimationLayer(layers, sourceLayer),
+        });
+        if (sameSourceDraft) {
+          openPlacedCanvasGenerationDialog(sameSourceDraft);
+          setQuickEditPanel(null);
+          selectSingleLayer(null);
+          setActiveTool(getCanvasToolForGenerationMode(sameSourceDraft.mode));
+          return;
+        }
+        const redrawPanel = createRedrawPanelDraft(sourceLayer, {
+          imageModel: sourceDialog?.imageModel,
+          aspectRatio: sourceDialog?.aspectRatio,
+          imageSize: sourceDialog?.imageSize,
+        });
         const redrawSize = resolveEditorImageGenerationPixelSize({
           model: redrawPanel.model,
           aspectRatio: redrawPanel.aspectRatio,
@@ -1002,19 +1150,18 @@ export function useImageCanvasGenerationWorkflow({
         setActiveTool('generate');
         return;
       }
-      setGenerateDialog(null);
-      setQuickEditPanel(createRedrawPanelDraft(sourceLayer));
-      selectSingleLayer(sourceLayer.id);
-      setActiveTool('generate');
     },
     [
       openCanvasGenerationDialog,
       openPlacedCanvasGenerationDialog,
       selectSingleLayer,
       setActiveTool,
-      setGenerateDialog,
       setImageContextMenu,
       setMetadataLayer,
+      canvasGenerationDialogs,
+      canvasSize,
+      layers,
+      viewport,
     ],
   );
 
@@ -1146,8 +1293,11 @@ export function useImageCanvasGenerationWorkflow({
         status: 'processing',
         errorMessage: undefined,
       });
+      const sourceImageSrc = await resolveEditorImageReferenceDataUrl(
+        cropExpandSourceLayer.objectKey?.trim() || cropExpandSourceLayer.src,
+      );
       const result = await renderCropExpandImage({
-        source: cropExpandSourceLayer.src,
+        source: sourceImageSrc,
         insets,
       });
       layerCounterRef.current += 1;
@@ -1207,7 +1357,10 @@ export function useImageCanvasGenerationWorkflow({
       setCropExpandPanel(null);
       setQuickEditPanel(null);
       try {
-        const result = await removeImageBackground(sourceLayer.src);
+        const sourceImageSrc = await resolveEditorImageReferenceDataUrl(
+          sourceLayer.objectKey?.trim() || sourceLayer.src,
+        );
+        const result = await removeImageBackground(sourceImageSrc);
         updateSourceLayer(sourceLayer.id, (layer) => ({
           ...layer,
           src: result.imageSrc,
@@ -1229,6 +1382,7 @@ export function useImageCanvasGenerationWorkflow({
       }
     },
     [
+      resolveEditorImageReferenceDataUrl,
       setActiveSidebarPanel,
       setImageContextMenu,
       setMetadataLayer,
@@ -1275,13 +1429,14 @@ export function useImageCanvasGenerationWorkflow({
 
   const pickQuickEditReferenceFromLayer = useCallback(
     (layer: CanvasLayer) => {
-      setQuickEditPanel((currentPanel) =>
-        appendQuickEditReference(currentPanel, layer),
+      setGenerateDialog((currentDialog) =>
+        appendGenerationReference(currentDialog, layer),
       );
       setIsPickingQuickEditReferenceFromCanvas(false);
+      setIsGenerationReferenceMenuOpen(false);
       setImageContextMenu(null);
     },
-    [setImageContextMenu],
+    [setGenerateDialog, setImageContextMenu],
   );
 
   const pickCharacterReferenceFromLayer = useCallback(
@@ -1476,7 +1631,8 @@ export function useImageCanvasGenerationWorkflow({
               ...currentState,
               tool: currentState.tool === tool ? null : tool,
               draftMark: null,
-              status: currentState.status === 'failed' ? 'idle' : currentState.status,
+              status:
+                currentState.status === 'failed' ? 'idle' : currentState.status,
               errorMessage:
                 currentState.status === 'failed'
                   ? undefined
@@ -1626,31 +1782,39 @@ export function useImageCanvasGenerationWorkflow({
       draftMark: null,
       marks: [...currentSelectionState.marks, normalizedMark],
     }));
-    setQuickEditPanel((currentPanel) =>
-      currentPanel
+    setGenerateDialog((currentDialog) =>
+      currentDialog?.mode === 'quick-edit' &&
+      currentDialog.sourceLayerId === currentSelectionState.sourceLayerId
         ? {
-            ...currentPanel,
+            ...currentDialog,
             status:
-              currentPanel.status === 'failed' ? 'idle' : currentPanel.status,
+              currentDialog.status === 'failed' ? 'idle' : currentDialog.status,
             errorMessage:
-              currentPanel.status === 'failed'
+              currentDialog.status === 'failed'
                 ? undefined
-                : currentPanel.errorMessage,
+                : currentDialog.errorMessage,
             prompt: appendQuickEditSelectionPrompt(
-              currentPanel.prompt,
+              currentDialog.prompt,
               nextMarkNumber,
             ),
+            composerOpen: true,
           }
-        : currentPanel,
+        : currentDialog,
     );
-  }, [updateQuickEditSelectionState]);
+  }, [setGenerateDialog, updateQuickEditSelectionState]);
 
   useEffect(() => {
-    if (!quickEditPanel && quickEditSelectionState) {
+    if (!quickEditSelectionState) {
+      return;
+    }
+    const hasActiveQuickEditDialog =
+      generateDialog?.mode === 'quick-edit' &&
+      generateDialog.sourceLayerId === quickEditSelectionState.sourceLayerId;
+    if (!hasActiveQuickEditDialog && !quickEditPanel) {
       quickEditSelectionStateRef.current = null;
       setQuickEditSelectionState(null);
     }
-  }, [quickEditPanel, quickEditSelectionState]);
+  }, [generateDialog, quickEditPanel, quickEditSelectionState]);
 
   const cancelUiAssetExtraction = useCallback(() => {
     setUiAssetExtractionState(null);
diff --git a/src/components/image-editor/useImageCanvasLayerCommands.test.tsx b/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
index 131610bdc..b78863f17 100644
--- a/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
+++ b/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
@@ -33,7 +33,10 @@ function LayerCommandsHarness({
   onDeleteLayerSideEffects = vi.fn(),
   onDeleteGenerationDialogSideEffects = vi.fn(),
 }: {
-  exportLayerImage?: (layer: CanvasLayer | null) => void;
+  exportLayerImage?: (
+    layer: CanvasLayer | null,
+    options?: { mode?: 'spine-json' | 'sequence-with-preview' },
+  ) => void;
   onDeleteLayerSideEffects?: (layerId: string) => void;
   onDeleteGenerationDialogSideEffects?: (dialogId: string) => void;
 }) {
@@ -330,6 +333,7 @@ describe('useImageCanvasLayerCommands', () => {
     fireEvent.click(screen.getByRole('button', { name: '导出' }));
     expect(exportLayerImage).toHaveBeenCalledWith(
       expect.objectContaining({ id: 'third' }),
+      expect.any(Object),
     );
     expect(screen.getByTestId('context').textContent).toBe('closed');
     expect(screen.getByTestId('image-context-closed').textContent).toBe('1');
diff --git a/src/components/image-editor/useImageCanvasLayerCommands.ts b/src/components/image-editor/useImageCanvasLayerCommands.ts
index d16c1e741..467d648c6 100644
--- a/src/components/image-editor/useImageCanvasLayerCommands.ts
+++ b/src/components/image-editor/useImageCanvasLayerCommands.ts
@@ -1,8 +1,8 @@
 import {
-  useCallback,
-  useState,
   type Dispatch,
   type SetStateAction,
+  useCallback,
+  useState,
 } from 'react';
 
 import type {
@@ -12,6 +12,8 @@ import type {
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
 import {
+  type CanvasLayerFlipAxis,
+  type CanvasLayerMoveMode,
   createCanvasLayerClipboard,
   duplicateCanvasLayers,
   flipCanvasLayers,
@@ -24,13 +26,12 @@ import {
   toggleCanvasLayersVisibility,
   ungroupCanvasLayers,
   updateCanvasLayersByIds,
-  type CanvasLayerFlipAxis,
-  type CanvasLayerMoveMode,
 } from './ImageCanvasLayerCommandModel';
 import {
   getCanvasGenerationDialogIdFromSelectionId,
   getSelectedLayerIds,
 } from './ImageCanvasSelectionModel';
+import type { ImageSequenceExportMode } from './useImageCanvasAssetExportWorkflow';
 
 type LayerCommandsOptions = {
   layers: CanvasLayer[];
@@ -50,7 +51,10 @@ type LayerCommandsOptions = {
   selectSingleLayer: (layerId: string | null) => void;
   onDeleteLayerSideEffects: (targetLayerId: string) => void;
   onDeleteGenerationDialogSideEffects?: (targetDialogId: string) => void;
-  exportLayerImage: (layer: CanvasLayer | null) => void;
+  exportLayerImage: (
+    layer: CanvasLayer | null,
+    options?: { mode?: ImageSequenceExportMode },
+  ) => void;
 };
 
 function createGroupId() {
@@ -405,19 +409,22 @@ export function useImageCanvasLayerCommands({
     setMetadataLayer,
   ]);
 
-  const exportContextLayer = useCallback(() => {
-    const targetIds = getContextTargetLayerIds();
-    const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
-    exportLayerImage(targetLayer ?? null);
-    setContextMenu(null);
-    setImageContextMenu(null);
-  }, [
-    exportLayerImage,
-    getContextTargetLayerIds,
-    layers,
-    setContextMenu,
-    setImageContextMenu,
-  ]);
+  const exportContextLayer = useCallback(
+    (options: { mode?: ImageSequenceExportMode } = {}) => {
+      const targetIds = getContextTargetLayerIds();
+      const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
+      exportLayerImage(targetLayer ?? null, options);
+      setContextMenu(null);
+      setImageContextMenu(null);
+    },
+    [
+      exportLayerImage,
+      getContextTargetLayerIds,
+      layers,
+      setContextMenu,
+      setImageContextMenu,
+    ],
+  );
 
   const deleteLayerById = useCallback(
     (targetLayerId: string | null) => {
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
index cbcc16b40..ea78798fd 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
@@ -4,6 +4,7 @@ import { act, render, screen, waitFor } from '@testing-library/react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { ApiClientError } from '../../services/apiClient';
 import type { EditorProjectSnapshot } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
@@ -16,6 +17,7 @@ const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
 const createProjectCoverSnapshotBlobMock = vi.hoisted(() => vi.fn());
 const loadEditorProjectMock = vi.hoisted(() => vi.fn());
 const loadOrCreateRecentEditorProjectMock = vi.hoisted(() => vi.fn());
+const putEditorProjectCoverCacheMock = vi.hoisted(() => vi.fn());
 const saveEditorProjectLayoutMock = vi.hoisted(() => vi.fn());
 const uploadEditorMediaAssetFileMock = vi.hoisted(() => vi.fn());
 const EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY =
@@ -48,6 +50,10 @@ vi.mock('../../services/image-editor/editorMediaAssetUploadClient', () => ({
   uploadEditorMediaAssetFile: uploadEditorMediaAssetFileMock,
 }));
 
+vi.mock('../../services/image-editor/editorProjectCoverCache', () => ({
+  putEditorProjectCoverCache: putEditorProjectCoverCacheMock,
+}));
+
 function createLayer(
   id: string,
   overrides: Partial<CanvasLayer> = {},
@@ -96,6 +102,7 @@ function ProjectPersistenceHarness({
     y: 0,
     scale: 1,
   });
+  const [isViewportInteracting, setIsViewportInteracting] = useState(false);
   const [projectTitle, setProjectTitle] = useState('');
   const [projectRenameValue, setProjectRenameValue] = useState('');
   const layersRef = useRef(layers);
@@ -141,6 +148,7 @@ function ProjectPersistenceHarness({
     layers,
     canvasGenerationDialogs: generationDialogs,
     viewport,
+    isViewportInteracting,
     canAccessProtectedData,
     openEditorLoginModal: openEditorLoginModalRef.current,
   });
@@ -165,11 +173,45 @@ function ProjectPersistenceHarness({
       <span data-testid="viewport">
         {viewport.x},{viewport.y},{viewport.scale}
       </span>
+      <span data-testid="viewport-interacting">
+        {String(isViewportInteracting)}
+      </span>
       <span data-testid="generation-dialogs">
         {generationDialogs
-          .map((dialog) => `${dialog.id}:${dialog.prompt}:${dialog.placeholder?.x}`)
+          .map(
+            (dialog) =>
+              `${dialog.id}:${dialog.prompt}:${dialog.placeholder?.x}`,
+          )
           .join(',')}
       </span>
+      <button
+        type="button"
+        onClick={() => {
+          setViewport((currentViewport) => ({
+            ...currentViewport,
+            x: currentViewport.x + 10,
+            y: currentViewport.y + 5,
+          }));
+        }}
+      >
+        move viewport
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setIsViewportInteracting(true);
+        }}
+      >
+        begin viewport interaction
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setIsViewportInteracting(false);
+        }}
+      >
+        end viewport interaction
+      </button>
       <button
         type="button"
         onClick={() => {
@@ -390,6 +432,7 @@ describe('useImageCanvasProjectPersistence', () => {
       updatedAt: '2026-06-12T00:00:00.000Z',
     });
     createProjectCoverSnapshotBlobMock.mockResolvedValue(null);
+    putEditorProjectCoverCacheMock.mockResolvedValue(undefined);
     uploadEditorMediaAssetFileMock.mockResolvedValue({
       src: 'https://signed.example.test/project-cover.png',
       objectKey:
@@ -405,9 +448,7 @@ describe('useImageCanvasProjectPersistence', () => {
 
     expect(await screen.findByText('editor-project-default')).toBeTruthy();
     expect(screen.getByTestId('project-title').textContent).toBe('空画布项目');
-    expect(screen.getByTestId('project-rename').textContent).toBe(
-      '空画布项目',
-    );
+    expect(screen.getByTestId('project-rename').textContent).toBe('空画布项目');
 
     act(() => {
       screen.getByRole('button', { name: 'append' }).click();
@@ -521,6 +562,12 @@ describe('useImageCanvasProjectPersistence', () => {
 
     expect(await screen.findByText('editor-project-default')).toBeTruthy();
     await waitFor(() => {
+      expect(putEditorProjectCoverCacheMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          projectId: 'editor-project-default',
+          blob: expect.any(Blob),
+        }),
+      );
       expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledWith(
         expect.any(File),
         'image',
@@ -557,6 +604,66 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('keeps the local project cover cache when snapshot upload fails', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-default',
+      title: '本地封面画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-cover',
+          resourceId: 'resource-cover-source',
+          title: '封面源图',
+          x: 10,
+          y: 20,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 1,
+          sourceType: 'uploaded',
+        },
+      ],
+      resources: [
+        {
+          resourceId: 'resource-cover-source',
+          projectId: 'editor-project-default',
+          imageSrc: '/generated/source.png',
+          objectKey: 'generated/source.png',
+          assetObjectId: 'asset-object-source',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+      ],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    const coverBlob = new Blob(['cover'], { type: 'image/png' });
+    createProjectCoverSnapshotBlobMock.mockResolvedValueOnce(coverBlob);
+    uploadEditorMediaAssetFileMock.mockRejectedValueOnce(
+      new TypeError('Failed to fetch'),
+    );
+
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    await waitFor(() => {
+      expect(putEditorProjectCoverCacheMock).toHaveBeenCalledWith({
+        projectId: 'editor-project-default',
+        blob: coverBlob,
+      });
+    });
+    await waitFor(() => {
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalled();
+    });
+    expect(createEditorProjectResourceMock).not.toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        assetKind: 'project-cover-snapshot',
+      }),
+    );
+  });
+
   it('loads and saves viewport scale with display zoom semantics', async () => {
     render(<ProjectPersistenceHarness />);
 
@@ -577,6 +684,54 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('does not serialize or write session cache while viewport interactions are active', async () => {
+    const sessionSetItemSpy = vi.spyOn(
+      Storage.prototype,
+      'setItem',
+    );
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    sessionSetItemSpy.mockClear();
+    saveEditorProjectLayoutMock.mockClear();
+    vi.useFakeTimers();
+
+    act(() => {
+      screen.getByRole('button', { name: 'begin viewport interaction' }).click();
+    });
+    expect(screen.getByTestId('viewport-interacting').textContent).toBe('true');
+    act(() => {
+      screen.getByRole('button', { name: 'move viewport' }).click();
+      screen.getByRole('button', { name: 'move viewport' }).click();
+    });
+    act(() => {
+      vi.advanceTimersByTime(451);
+    });
+
+    expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
+    expect(sessionSetItemSpy).not.toHaveBeenCalled();
+
+    act(() => {
+      screen.getByRole('button', { name: 'end viewport interaction' }).click();
+    });
+    expect(screen.getByTestId('viewport-interacting').textContent).toBe(
+      'false',
+    );
+    act(() => {
+      vi.advanceTimersByTime(451);
+    });
+
+    expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        viewport: { x: 20, y: 10, scale: 1 },
+      }),
+    );
+    expect(sessionSetItemSpy).toHaveBeenCalled();
+    vi.useRealTimers();
+    sessionSetItemSpy.mockRestore();
+  });
+
   it('does not create a project resource again for backend-persisted generated layers', async () => {
     render(<ProjectPersistenceHarness />);
 
@@ -1170,4 +1325,34 @@ describe('useImageCanvasProjectPersistence', () => {
     expect(loadEditorProjectMock).not.toHaveBeenCalled();
     expect(screen.getByTestId('project-id').textContent).toBe('-');
   });
+
+  it.each([
+    [404, '项目不存在'],
+    [403, '无权访问项目'],
+  ])(
+    'returns to the project page when an explicit project fails with %i',
+    async (status, message) => {
+      window.history.replaceState(
+        null,
+        '',
+        '/editor/canvas?projectid=missing-project',
+      );
+      loadEditorProjectMock.mockRejectedValueOnce(
+        new ApiClientError({
+          message,
+          status,
+          code: status === 404 ? 'not_found' : 'forbidden',
+        }),
+      );
+
+      render(<ProjectPersistenceHarness />);
+
+      await waitFor(() => {
+        expect(window.location.pathname).toBe('/project');
+      });
+      expect(window.location.search).toBe('');
+      expect(loadEditorProjectMock).toHaveBeenCalledWith('missing-project');
+      expect(loadOrCreateRecentEditorProjectMock).not.toHaveBeenCalled();
+    },
+  );
 });
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.ts b/src/components/image-editor/useImageCanvasProjectPersistence.ts
index 86a967509..bcc2b75ab 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.ts
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.ts
@@ -1,7 +1,15 @@
-import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { ApiClientError } from '../../services/apiClient';
+import { replaceAppHistoryPath } from '../../routing/appPageRoutes';
 import { uploadEditorMediaAssetFile } from '../../services/image-editor/editorMediaAssetUploadClient';
+import { putEditorProjectCoverCache } from '../../services/image-editor/editorProjectCoverCache';
 import {
   createEditorProjectResource,
   type EditorProjectResourceSnapshot,
@@ -73,7 +81,14 @@ type ImageCanvasProjectPersistenceSetters = {
 function isEditorAuthError(error: unknown) {
   return (
     error instanceof ApiClientError &&
-    (error.status === 401 || error.status === 403)
+    error.status === 401
+  );
+}
+
+function isEditorProjectAccessError(error: unknown) {
+  return (
+    error instanceof ApiClientError &&
+    (error.status === 403 || error.status === 404)
   );
 }
 
@@ -159,6 +174,18 @@ function readEditorProjectSessionCache(projectId: string | null) {
   }
 }
 
+function removeEditorProjectSessionCache(projectId: string) {
+  const storage = getEditorProjectSessionStorage();
+  if (!storage) {
+    return;
+  }
+  try {
+    storage.removeItem(editorProjectSessionCacheKey(projectId));
+  } catch {
+    // ignore storage cleanup errors
+  }
+}
+
 function writeEditorProjectSessionCache(project: EditorProjectSnapshot) {
   if (projectSnapshotContainsInlineMedia(project)) {
     return;
@@ -173,7 +200,10 @@ function writeEditorProjectSessionCache(project: EditorProjectSnapshot) {
   };
   try {
     const serialized = JSON.stringify(cached);
-    storage.setItem(editorProjectSessionCacheKey(project.projectId), serialized);
+    storage.setItem(
+      editorProjectSessionCacheKey(project.projectId),
+      serialized,
+    );
     storage.setItem(EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY, serialized);
   } catch {
     // ignore quota or privacy mode failures
@@ -250,6 +280,7 @@ export function useImageCanvasProjectPersistence({
   layers,
   canvasGenerationDialogs,
   viewport,
+  isViewportInteracting,
   canAccessProtectedData,
   openEditorLoginModal,
 }: {
@@ -258,6 +289,7 @@ export function useImageCanvasProjectPersistence({
   layers: CanvasLayer[];
   canvasGenerationDialogs: CanvasGenerationDialogState[];
   viewport: CanvasViewport;
+  isViewportInteracting: boolean;
   canAccessProtectedData: boolean;
   openEditorLoginModal: (postLoginAction?: (() => void) | null) => void;
 }) {
@@ -265,8 +297,9 @@ export function useImageCanvasProjectPersistence({
   const pendingProjectResourceLayersRef = useRef<PendingProjectResourceLayer[]>(
     [],
   );
-  const pendingProjectLayoutSaveRef =
-    useRef<PendingProjectLayoutSave | null>(null);
+  const pendingProjectLayoutSaveRef = useRef<PendingProjectLayoutSave | null>(
+    null,
+  );
   const isProjectLayoutSaveRunningRef = useRef(false);
   const skipNextProjectLayoutSaveRef = useRef(false);
   const saveTimerRef = useRef<number | null>(null);
@@ -360,6 +393,10 @@ export function useImageCanvasProjectPersistence({
           if (coverSnapshotUploadRequestRef.current !== requestId) {
             return;
           }
+          void putEditorProjectCoverCache({
+            projectId: nextProjectId,
+            blob,
+          });
           const coverFile = new File([blob], `${nextProjectId}-cover.png`, {
             type: 'image/png',
           });
@@ -510,7 +547,9 @@ export function useImageCanvasProjectPersistence({
           setLayers(nextLayers);
           if (nextLayers.length) {
             queueProjectLayoutSave(readyProjectId, {
-              viewport: viewportToCanvasDisplayViewport(refs.viewportRef.current),
+              viewport: viewportToCanvasDisplayViewport(
+                refs.viewportRef.current,
+              ),
               layers: serializeCanvasLayout({
                 layers: nextLayers,
                 canvasGenerationDialogs:
@@ -656,6 +695,11 @@ export function useImageCanvasProjectPersistence({
           openEditorLoginModal(() => {
             window.location.reload();
           });
+          return;
+        }
+        if (projectIdFromQuery && isEditorProjectAccessError(error)) {
+          removeEditorProjectSessionCache(projectIdFromQuery);
+          replaceAppHistoryPath('/project');
         }
       });
 
@@ -669,17 +713,31 @@ export function useImageCanvasProjectPersistence({
     openEditorLoginModal,
   ]);
 
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) {
+        window.clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (!projectId || !isProjectReady) {
       return undefined;
     }
     if (skipNextProjectLayoutSaveRef.current) {
       skipNextProjectLayoutSaveRef.current = false;
-      persistProjectCoverSnapshot(
-        projectId,
-        viewportToCanvasDisplayViewport(viewport),
-        layers,
-      );
+      if (!isViewportInteracting) {
+        persistProjectCoverSnapshot(
+          projectId,
+          viewportToCanvasDisplayViewport(viewport),
+          layers,
+        );
+      }
+      return undefined;
+    }
+    if (isViewportInteracting) {
       return undefined;
     }
     queueProjectLayoutSave(
@@ -693,16 +751,11 @@ export function useImageCanvasProjectPersistence({
       },
       { delayMs: 450 },
     );
-
-    return () => {
-      if (saveTimerRef.current) {
-        window.clearTimeout(saveTimerRef.current);
-        saveTimerRef.current = null;
-      }
-    };
+    return undefined;
   }, [
     isProjectReady,
     canvasGenerationDialogs,
+    isViewportInteracting,
     layers,
     persistProjectCoverSnapshot,
     projectId,
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
index 8fe34a582..84389c114 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
@@ -115,6 +115,9 @@ function StageInteractionsHarness({
   activateCanvasGenerationDialog = vi.fn(),
   moveViewportFromMinimapPointer = vi.fn(),
   updateViewportFromMinimapDrag = vi.fn(),
+  flushMinimapViewportDrag = vi.fn(),
+  onViewportInteractionStart = vi.fn(),
+  onViewportInteractionEnd = vi.fn(),
 }: {
   pickCharacterSpecFromLayer?: (layer: CanvasLayer) => void;
   pickGenerationReferenceFromLayer?: (layer: CanvasLayer) => void;
@@ -133,6 +136,9 @@ function StageInteractionsHarness({
     clientX: number,
     clientY: number,
   ) => void;
+  flushMinimapViewportDrag?: () => void;
+  onViewportInteractionStart?: () => void;
+  onViewportInteractionEnd?: () => void;
 }) {
   const canvasViewportRef = useRef<HTMLDivElement | null>(null);
   const worldRef = useRef<HTMLDivElement | null>(null);
@@ -227,7 +233,10 @@ function StageInteractionsHarness({
         clientX,
         clientY,
       ),
+    flushMinimapViewportDrag,
     minimapScale: 0.5,
+    onViewportInteractionStart,
+    onViewportInteractionEnd,
     onCloseImageContextMenu: () =>
       setImageMenuCloseCount((currentCount) => currentCount + 1),
   });
@@ -614,6 +623,20 @@ function StageInteractionsHarness({
       >
         直接拖小地图
       </button>
+      <button
+        type="button"
+        onClick={(event) => {
+          interaction.finishDrag(
+            createPointerEvent(getViewportElement(), {
+              pointerId: 7,
+              clientX: 130,
+              clientY: 95,
+            }),
+          );
+        }}
+      >
+        直接结束小地图拖拽
+      </button>
     </div>
   );
 }
@@ -685,9 +708,12 @@ describe('useImageCanvasStageInteractions', () => {
       screen.getByRole('button', { name: '直接移动平移' }).click();
     });
     expect(screen.getByTestId('viewport-state').textContent).toBe('30.0,25.0,1');
-
     act(() => {
       screen.getByRole('button', { name: '清理交互' }).click();
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('false');
+
+    act(() => {
       screen.getByRole('button', { name: '松开空格' }).click();
     });
     act(() => {
@@ -763,4 +789,40 @@ describe('useImageCanvasStageInteractions', () => {
       95,
     );
   });
+
+  it('marks viewport interactions for pan and minimap drags', () => {
+    const onViewportInteractionStart = vi.fn();
+    const onViewportInteractionEnd = vi.fn();
+    const flushMinimapViewportDrag = vi.fn();
+    render(
+      <StageInteractionsHarness
+        flushMinimapViewportDrag={flushMinimapViewportDrag}
+        onViewportInteractionStart={onViewportInteractionStart}
+        onViewportInteractionEnd={onViewportInteractionEnd}
+      />,
+    );
+
+    act(() => {
+      screen.getByRole('button', { name: '切抓手' }).click();
+    });
+    act(() => {
+      screen.getByRole('button', { name: '直接开始平移' }).click();
+    });
+    expect(onViewportInteractionStart).toHaveBeenCalledTimes(1);
+    act(() => {
+      screen.getByRole('button', { name: '清理交互' }).click();
+    });
+    expect(onViewportInteractionEnd).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      screen.getByRole('button', { name: '直接拖小地图' }).click();
+    });
+    expect(onViewportInteractionStart).toHaveBeenCalledTimes(2);
+    act(() => {
+      screen.getByRole('button', { name: '直接结束小地图拖拽' }).click();
+    });
+
+    expect(flushMinimapViewportDrag).toHaveBeenCalledTimes(1);
+    expect(onViewportInteractionEnd).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts
index 2d9ead0c1..26a6366f7 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.ts
+++ b/src/components/image-editor/useImageCanvasStageInteractions.ts
@@ -85,7 +85,10 @@ type UseImageCanvasStageInteractionsOptions = {
     clientX: number,
     clientY: number,
   ) => void;
+  flushMinimapViewportDrag: () => void;
   minimapScale: number;
+  onViewportInteractionStart?: () => void;
+  onViewportInteractionEnd?: () => void;
   onCloseImageContextMenu: () => void;
 };
 
@@ -121,12 +124,16 @@ export function useImageCanvasStageInteractions({
   updateCanvasGenerationDialogById,
   moveViewportFromMinimapPointer,
   updateViewportFromMinimapDrag,
+  flushMinimapViewportDrag,
   minimapScale,
+  onViewportInteractionStart,
+  onViewportInteractionEnd,
   onCloseImageContextMenu,
 }: UseImageCanvasStageInteractionsOptions) {
   const dragStateRef = useRef<DragState | null>(null);
   const isShiftPressedRef = useRef(false);
   const suppressNextLayerClickRef = useRef(false);
+  const isViewportInteractionActiveRef = useRef(false);
   const [canvasMarquee, setCanvasMarquee] = useState<CanvasMarqueeState | null>(
     null,
   );
@@ -135,12 +142,35 @@ export function useImageCanvasStageInteractions({
   const [snapGuide, setSnapGuide] = useState<SnapGuide | null>(null);
   const effectiveTool: CanvasTool = isSpacePanning ? 'hand' : activeTool;
 
+  const finishViewportInteraction = useCallback(() => {
+    if (!isViewportInteractionActiveRef.current) {
+      return;
+    }
+    isViewportInteractionActiveRef.current = false;
+    onViewportInteractionEnd?.();
+  }, [onViewportInteractionEnd]);
+
+  const startViewportInteraction = useCallback(() => {
+    if (isViewportInteractionActiveRef.current) {
+      return;
+    }
+    isViewportInteractionActiveRef.current = true;
+    onViewportInteractionStart?.();
+  }, [onViewportInteractionStart]);
+
   const clearActiveInteraction = useCallback(() => {
+    const dragState = dragStateRef.current;
+    if (dragState?.kind === 'minimap') {
+      flushMinimapViewportDrag();
+    }
     dragStateRef.current = null;
     setCanvasMarquee(null);
     setIsPanning(false);
     setSnapGuide(null);
-  }, []);
+    if (dragState?.kind === 'pan' || dragState?.kind === 'minimap') {
+      finishViewportInteraction();
+    }
+  }, [finishViewportInteraction, flushMinimapViewportDrag]);
 
   const setShiftPressed = useCallback((pressed: boolean) => {
     isShiftPressedRef.current = pressed;
@@ -152,13 +182,14 @@ export function useImageCanvasStageInteractions({
       const pointer = getPointerClient(event);
       canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
       setIsPanning(true);
+      startViewportInteraction();
       dragStateRef.current = createPanDragState({
         pointerId: getPointerId(event),
         pointer,
         viewport,
       });
     },
-    [canvasViewportRef, viewport],
+    [canvasViewportRef, startViewportInteraction, viewport],
   );
 
   const handleCanvasPointerDown = useCallback(
@@ -437,6 +468,7 @@ export function useImageCanvasStageInteractions({
       event.stopPropagation();
       const pointer = getPointerClient(event);
       canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
+      startViewportInteraction();
       dragStateRef.current = createMinimapDragState({
         pointerId: getPointerId(event),
         pointer,
@@ -444,7 +476,7 @@ export function useImageCanvasStageInteractions({
         minimapScale,
       });
     },
-    [canvasViewportRef, minimapScale, viewport],
+    [canvasViewportRef, minimapScale, startViewportInteraction, viewport],
   );
 
   const handlePointerMove = useCallback(
@@ -600,15 +632,27 @@ export function useImageCanvasStageInteractions({
           const pointer = getPointerClient(event);
           moveViewportFromMinimapPointer(pointer.x, pointer.y);
         }
+        if (dragState.kind === 'minimap') {
+          flushMinimapViewportDrag();
+        }
         dragStateRef.current = null;
         setIsPanning(false);
         setSnapGuide(null);
+        if (dragState.kind === 'pan' || dragState.kind === 'minimap') {
+          finishViewportInteraction();
+        }
         if (canvasViewportRef.current?.hasPointerCapture?.(event.pointerId)) {
           canvasViewportRef.current.releasePointerCapture?.(event.pointerId);
         }
       }
     },
-    [canvasMarquee, canvasViewportRef, moveViewportFromMinimapPointer],
+    [
+      canvasMarquee,
+      canvasViewportRef,
+      finishViewportInteraction,
+      flushMinimapViewportDrag,
+      moveViewportFromMinimapPointer,
+    ],
   );
 
   return useMemo(
diff --git a/src/components/image-editor/useImageCanvasViewportControls.test.tsx b/src/components/image-editor/useImageCanvasViewportControls.test.tsx
index a4fcc240d..90f04fb43 100644
--- a/src/components/image-editor/useImageCanvasViewportControls.test.tsx
+++ b/src/components/image-editor/useImageCanvasViewportControls.test.tsx
@@ -2,7 +2,7 @@
 
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { useRef } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import { useImageCanvasViewportControls } from './useImageCanvasViewportControls';
@@ -135,6 +135,30 @@ function ViewportHarness({
       >
         minimap drag
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          const dragState = {
+            kind: 'minimap' as const,
+            pointerId: 2,
+            startClientX: 100,
+            startClientY: 100,
+            startViewport: { x: -100, y: -50, scale: 1 },
+            minimapScale: controls.minimapModel?.scale ?? 1,
+            moved: true,
+          };
+          controls.updateViewportFromMinimapDrag(dragState, 104, 103);
+          controls.updateViewportFromMinimapDrag(dragState, 112, 109);
+        }}
+      >
+        minimap drag twice
+      </button>
+      <button
+        type="button"
+        onClick={() => controls.flushMinimapViewportDrag()}
+      >
+        flush minimap drag
+      </button>
       <button
         type="button"
         onClick={() => controls.moveViewportFromMinimapPointer(100, 90)}
@@ -146,6 +170,10 @@ function ViewportHarness({
 }
 
 describe('useImageCanvasViewportControls', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('owns canvas size, fit view, center zoom and canvas point helpers', () => {
     const captureCanvasHistory = vi.fn();
     render(
@@ -181,6 +209,14 @@ describe('useImageCanvasViewportControls', () => {
   });
 
   it('handles vertical wheel scroll, ctrl wheel zoom and minimap movement', () => {
+    const rafCallbacks: FrameRequestCallback[] = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(
+      (callback: FrameRequestCallback) => {
+        rafCallbacks.push(callback);
+        return rafCallbacks.length;
+      },
+    );
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
     render(<ViewportHarness />);
     const viewportElement = screen.getByTestId('viewport-element');
 
@@ -206,6 +242,9 @@ describe('useImageCanvasViewportControls', () => {
     act(() => {
       screen.getByRole('button', { name: 'minimap drag' }).click();
     });
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
     expect(screen.getByTestId('viewport').textContent).toContain('-');
 
     const beforeClick = screen.getByTestId('viewport').textContent;
@@ -214,4 +253,71 @@ describe('useImageCanvasViewportControls', () => {
     });
     expect(screen.getByTestId('viewport').textContent).not.toBe(beforeClick);
   });
+
+  it('coalesces minimap drag viewport updates into one animation frame', () => {
+    const rafCallbacks: FrameRequestCallback[] = [];
+    const requestAnimationFrameSpy = vi
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((callback: FrameRequestCallback) => {
+        rafCallbacks.push(callback);
+        return rafCallbacks.length;
+      });
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+    render(<ViewportHarness />);
+
+    const initialViewport = screen.getByTestId('viewport').textContent;
+    act(() => {
+      screen.getByRole('button', { name: 'minimap drag twice' }).click();
+    });
+
+    expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('viewport').textContent).toBe(initialViewport);
+
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    const coalescedViewport = screen.getByTestId('viewport').textContent;
+    expect(coalescedViewport).not.toBe(initialViewport);
+
+    act(() => {
+      screen.getByRole('button', { name: 'minimap drag' }).click();
+    });
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    expect(screen.getByTestId('viewport').textContent).not.toBe(
+      coalescedViewport,
+    );
+  });
+
+  it('flushes a pending minimap drag before the next animation frame', () => {
+    const rafCallbacks: FrameRequestCallback[] = [];
+    const cancelAnimationFrameSpy = vi
+      .spyOn(window, 'cancelAnimationFrame')
+      .mockImplementation(() => {});
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(
+      (callback: FrameRequestCallback) => {
+        rafCallbacks.push(callback);
+        return rafCallbacks.length;
+      },
+    );
+    render(<ViewportHarness />);
+    const initialViewport = screen.getByTestId('viewport').textContent;
+
+    act(() => {
+      screen.getByRole('button', { name: 'minimap drag twice' }).click();
+    });
+    act(() => {
+      screen.getByRole('button', { name: 'flush minimap drag' }).click();
+    });
+
+    expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(1);
+    const flushedViewport = screen.getByTestId('viewport').textContent;
+    expect(flushedViewport).not.toBe(initialViewport);
+
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    expect(screen.getByTestId('viewport').textContent).toBe(flushedViewport);
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasViewportControls.ts b/src/components/image-editor/useImageCanvasViewportControls.ts
index c8c9ffff5..9cbf6b30c 100644
--- a/src/components/image-editor/useImageCanvasViewportControls.ts
+++ b/src/components/image-editor/useImageCanvasViewportControls.ts
@@ -3,6 +3,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -48,6 +49,12 @@ export function useImageCanvasViewportControls({
     DEFAULT_IMAGE_CANVAS_VIEWPORT,
   );
   const [canvasSize, setCanvasSize] = useState(DEFAULT_CANVAS_SIZE);
+  const pendingMinimapDragRef = useRef<{
+    dragState: Extract<DragState, { kind: 'minimap' }>;
+    clientX: number;
+    clientY: number;
+  } | null>(null);
+  const minimapDragFrameRef = useRef<number | null>(null);
 
   const minimapModel = useMemo(
     () => createMinimapModel({ layers, viewport, canvasSize }),
@@ -182,18 +189,59 @@ export function useImageCanvasViewportControls({
     [canvasSize, minimapModel],
   );
 
+  const flushMinimapViewportDrag = useCallback(() => {
+    if (minimapDragFrameRef.current !== null) {
+      window.cancelAnimationFrame(minimapDragFrameRef.current);
+      minimapDragFrameRef.current = null;
+    }
+    const pendingDrag = pendingMinimapDragRef.current;
+    pendingMinimapDragRef.current = null;
+    if (!pendingDrag) {
+      return;
+    }
+    setViewport(
+      resolveViewportFromMinimapDrag(pendingDrag.dragState, {
+        x: pendingDrag.clientX,
+        y: pendingDrag.clientY,
+      }),
+    );
+  }, []);
+
   const updateViewportFromMinimapDrag = useCallback(
     (
       dragState: Extract<DragState, { kind: 'minimap' }>,
       clientX: number,
       clientY: number,
     ) => {
-      setViewport(
-        resolveViewportFromMinimapDrag(dragState, {
-          x: clientX,
-          y: clientY,
-        }),
-      );
+      pendingMinimapDragRef.current = { dragState, clientX, clientY };
+      if (minimapDragFrameRef.current !== null) {
+        return;
+      }
+      minimapDragFrameRef.current = window.requestAnimationFrame(() => {
+        minimapDragFrameRef.current = null;
+        const pendingDrag = pendingMinimapDragRef.current;
+        pendingMinimapDragRef.current = null;
+        if (!pendingDrag) {
+          return;
+        }
+        setViewport(
+          resolveViewportFromMinimapDrag(pendingDrag.dragState, {
+            x: pendingDrag.clientX,
+            y: pendingDrag.clientY,
+          }),
+        );
+      });
+    },
+    [],
+  );
+
+  useEffect(
+    () => () => {
+      if (minimapDragFrameRef.current !== null) {
+        window.cancelAnimationFrame(minimapDragFrameRef.current);
+        minimapDragFrameRef.current = null;
+      }
+      pendingMinimapDragRef.current = null;
     },
     [],
   );
@@ -254,5 +302,6 @@ export function useImageCanvasViewportControls({
     getCanvasPointFromClient,
     moveViewportFromMinimapPointer,
     updateViewportFromMinimapDrag,
+    flushMinimapViewportDrag,
   };
 }
diff --git a/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts b/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
index d59d0d094..1f6943ef1 100644
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
@@ -4,6 +4,7 @@ import { createMiniGameDraftGenerationState } from '../../services/miniGameDraft
 import {
   buildExternalGenerationQueuePresentation,
   buildExternalGenerationQueueStatus,
+  shouldUseFastExternalGenerationTaskPolling,
 } from './platformExternalGenerationQueueStatusModel';
 import {
   resolveFinishedMiniGameDraftGenerationState,
@@ -129,4 +130,50 @@ describe('buildExternalGenerationQueueStatus', () => {
       }).shouldShow,
     ).toBe(false);
   });
+
+  test('只在队列活跃或存在未确认终态任务时使用快速轮询', () => {
+    expect(
+      shouldUseFastExternalGenerationTaskPolling({
+        pendingCount: 0,
+        runningCount: 0,
+        unacknowledgedTerminalCount: 0,
+        tasks: [],
+      }),
+    ).toBe(false);
+
+    expect(
+      shouldUseFastExternalGenerationTaskPolling({
+        currentStatus: 'queued',
+        pendingCount: 0,
+        runningCount: 0,
+        unacknowledgedTerminalCount: 0,
+        tasks: [],
+      }),
+    ).toBe(true);
+
+    expect(
+      shouldUseFastExternalGenerationTaskPolling({
+        pendingCount: 0,
+        runningCount: 0,
+        unacknowledgedTerminalCount: 0,
+        tasks: [
+          {
+            jobId: 'extgen-completed',
+            jobKind: 'editor_image_generation',
+            sourceModule: 'editor',
+            sourceEntityId: 'project-1',
+            requestLabel: '图片生成',
+            status: 'completed',
+            phaseLabel: '已完成',
+            phaseDetail: '已完成',
+            progress: 100,
+            priceMudPoints: 1,
+            createdAt: '2026-06-25T00:00:00.000Z',
+            updatedAt: '2026-06-25T00:00:00.000Z',
+            updatedAtMicros: 1_782_348_800_000_000,
+          },
+        ],
+      }),
+    ).toBe(true);
+  });
 });
diff --git a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
index 75a224df3..4efb76616 100644
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
@@ -544,7 +544,10 @@ import type {
 } from './platformEntryTypes';
 import { PlatformEntryWorldDetailView } from './PlatformEntryWorldDetailView';
 import { PlatformErrorDialog } from './PlatformErrorDialog';
-import { buildExternalGenerationQueueStatus } from './platformExternalGenerationQueueStatusModel';
+import {
+  buildExternalGenerationQueueStatus,
+  shouldUseFastExternalGenerationTaskPolling,
+} from './platformExternalGenerationQueueStatusModel';
 import { resolvePlatformGenerationProgressTickDecision } from './platformGenerationProgressTickModel';
 import {
   sendPlatformHostDraftNotificationToHost,
@@ -707,6 +710,7 @@ type PuzzleBackgroundCompileTask = {
   generationState: MiniGameDraftGenerationState;
   error: string | null;
 };
+const EXTERNAL_GENERATION_TASK_FAST_POLL_INTERVAL_MS = 4_000;
 
 function isUnacknowledgedExternalGenerationTerminalTask(
   task: ExternalGenerationTaskRecord,
@@ -4967,6 +4971,15 @@ export function PlatformEntryFlowShellImpl({
     woodenFishGenerationState,
   );
   const isHostNetworkOnline = useHostNetworkOnline();
+  const shouldFastPollKnownExternalGenerationTask =
+    puzzleOperation?.queueState?.status === 'queued' ||
+    puzzleOperation?.queueState?.status === 'running' ||
+    jumpHopQueueState?.status === 'queued' ||
+    jumpHopQueueState?.status === 'running' ||
+    puzzleClearQueueState?.status === 'queued' ||
+    puzzleClearQueueState?.status === 'running' ||
+    woodenFishQueueState?.status === 'queued' ||
+    woodenFishQueueState?.status === 'running';
   const shouldPollExternalGenerationTasks =
     platformBootstrap.canReadProtectedData && Boolean(authUi?.user?.id);
   const externalGenerationQueueOwnerKey =
@@ -4991,6 +5004,21 @@ export function PlatformEntryFlowShellImpl({
 
     let disposed = false;
     let controller: AbortController | null = null;
+    let timerId: number | null = null;
+
+    const scheduleNextRefresh = (delayMs: number) => {
+      if (disposed) {
+        return;
+      }
+      if (timerId != null) {
+        window.clearTimeout(timerId);
+        timerId = null;
+      }
+      if (delayMs <= 0) {
+        return;
+      }
+      timerId = window.setTimeout(refreshTaskList, delayMs);
+    };
 
     const refreshTaskList = () => {
       controller?.abort();
@@ -5010,6 +5038,18 @@ export function PlatformEntryFlowShellImpl({
               ),
             );
             setExternalGenerationTaskOverview(response.overview);
+            scheduleNextRefresh(
+              shouldFastPollKnownExternalGenerationTask ||
+                shouldUseFastExternalGenerationTaskPolling(
+                  buildExternalGenerationQueueStatus(
+                    response.overview,
+                    null,
+                    response.tasks,
+                  ),
+                )
+                ? EXTERNAL_GENERATION_TASK_FAST_POLL_INTERVAL_MS
+                : 0,
+            );
           }
         })
         .catch(() => {
@@ -5021,16 +5061,28 @@ export function PlatformEntryFlowShellImpl({
     };
 
     refreshTaskList();
-    const intervalId = window.setInterval(refreshTaskList, 4000);
+    const handleResume = () => {
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      refreshTaskList();
+    };
+    window.addEventListener('focus', handleResume);
+    document.addEventListener('visibilitychange', handleResume);
 
     return () => {
       disposed = true;
       controller?.abort();
-      window.clearInterval(intervalId);
+      if (timerId != null) {
+        window.clearTimeout(timerId);
+      }
+      window.removeEventListener('focus', handleResume);
+      document.removeEventListener('visibilitychange', handleResume);
     };
   }, [
     externalGenerationQueueOwnerKey,
     isHostNetworkOnline,
+    shouldFastPollKnownExternalGenerationTask,
     shouldPollExternalGenerationTasks,
   ]);
   const activeExternalGenerationJobState = useMemo(() => {
diff --git a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx
index 0092e09d3..325954933 100644
--- a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx
+++ b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx
@@ -9,7 +9,7 @@ import {
   shouldShowMobileHomeWelcomeDialog,
 } from './PlatformMobileHomeWelcomeDialog';
 
-test('shows mobile home welcome only for the mobile platform home route', () => {
+test('shows mobile home welcome when entering the mobile site shell', () => {
   expect(
     shouldShowMobileHomeWelcomeDialog({
       isDesktopLayout: false,
@@ -33,7 +33,7 @@ test('shows mobile home welcome only for the mobile platform home route', () =>
       platformTab: 'category',
       pathname: '/',
     }),
-  ).toBe(false);
+  ).toBe(true);
   expect(
     shouldShowMobileHomeWelcomeDialog({
       isDesktopLayout: false,
@@ -41,10 +41,10 @@ test('shows mobile home welcome only for the mobile platform home route', () =>
       platformTab: 'home',
       pathname: '/creation',
     }),
-  ).toBe(false);
+  ).toBe(true);
 });
 
-test('keeps mobile home welcome dismissed across bottom tab switches until refresh', () => {
+test('keeps mobile home welcome dismissed across site navigation until refresh', () => {
   expect(
     shouldOpenMobileHomeWelcomeDialog({
       isDesktopLayout: false,
diff --git a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx
index 97e3afe27..3948e92b6 100644
--- a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx
+++ b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx
@@ -1,4 +1,3 @@
-import { normalizeAppPath } from '../../routing/appPageRoutes';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { UnifiedModal } from '../common/UnifiedModal';
 import type { SelectionStage } from './platformEntryTypes';
@@ -22,16 +21,8 @@ type PlatformMobileHomeWelcomeDialogProps = {
 
 export function shouldShowMobileHomeWelcomeDialog({
   isDesktopLayout,
-  selectionStage,
-  platformTab,
-  pathname,
 }: MobileHomeWelcomeDecisionInput) {
-  return (
-    !isDesktopLayout &&
-    selectionStage === 'platform' &&
-    platformTab === 'home' &&
-    normalizeAppPath(pathname) === '/'
-  );
+  return !isDesktopLayout;
 }
 
 export function shouldOpenMobileHomeWelcomeDialog({
diff --git a/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts b/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts
index 3cbcc8e58..fede09ff4 100644
--- a/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts
+++ b/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts
@@ -55,6 +55,48 @@ export function buildExternalGenerationQueueStatus(
   };
 }
 
+function isActiveExternalGenerationStatus(
+  status: ExternalGenerationQueueStatus['currentStatus'],
+) {
+  return status === 'queued' || status === 'running';
+}
+
+function isUnacknowledgedExternalGenerationTerminalTask(
+  task: ExternalGenerationTaskRecord,
+) {
+  return (
+    (task.status === 'completed' || task.status === 'failed') &&
+    !task.notificationAcknowledgedAt
+  );
+}
+
+export function shouldUseFastExternalGenerationTaskPolling(
+  status: ExternalGenerationQueueStatus | null | undefined,
+) {
+  const pendingCount = normalizeExternalGenerationQueueCount(
+    status?.pendingCount,
+  );
+  const runningCount = normalizeExternalGenerationQueueCount(
+    status?.runningCount,
+  );
+  const unacknowledgedTerminalCount = normalizeExternalGenerationQueueCount(
+    status?.unacknowledgedTerminalCount,
+  );
+
+  return Boolean(
+    isActiveExternalGenerationStatus(status?.currentStatus ?? null) ||
+      pendingCount > 0 ||
+      runningCount > 0 ||
+      unacknowledgedTerminalCount > 0 ||
+      (status?.tasks ?? []).some(
+        (task) =>
+          task.status === 'queued' ||
+          task.status === 'running' ||
+          isUnacknowledgedExternalGenerationTerminalTask(task),
+      ),
+  );
+}
+
 export function resolveExternalGenerationQueueStatusLabel(
   status: ExternalGenerationQueueStatus['currentStatus'],
 ) {
diff --git a/src/components/project/ProjectCanvasCover.test.ts b/src/components/project/ProjectCanvasCover.test.ts
index d12d2221f..3b208078c 100644
--- a/src/components/project/ProjectCanvasCover.test.ts
+++ b/src/components/project/ProjectCanvasCover.test.ts
@@ -1,16 +1,21 @@
 import { describe, expect, it } from 'vitest';
 
 import type { EditorProjectSnapshot } from '../../services/image-editor/editorProjectClient';
-import { resolveProjectCoverSnapshotResource } from './ProjectCanvasCover';
+import {
+  LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+  resolveProjectCoverResource,
+  resolveProjectCoverSnapshotResource,
+} from './ProjectCanvasCover';
 
 function project(
   resources: EditorProjectSnapshot['resources'],
+  layers: EditorProjectSnapshot['layers'] = [],
 ): EditorProjectSnapshot {
   return {
     projectId: 'editor-project-cover',
     title: '封面项目',
     viewport: { x: 0, y: 0, scale: 1 },
-    layers: [],
+    layers,
     resources,
     updatedAt: '2026-06-12T00:00:00.000Z',
   };
@@ -78,4 +83,230 @@ describe('resolveProjectCoverSnapshotResource', () => {
 
     expect(cover).toBeNull();
   });
+
+  it('supports legacy editor object asset kind identifier', () => {
+    const cover = resolveProjectCoverSnapshotResource(
+      project([
+        {
+          resourceId: 'resource-legacy-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: '',
+          objectKey:
+            'generated-character-drafts/editor/project-covers/editor-project-cover/1771400000200/cover.png',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: 'editor_project_cover_snapshot',
+        },
+      ]),
+    );
+
+    expect(cover?.resourceId).toBe('resource-legacy-cover');
+  });
+
+  it('supports legacy snake-case project cover resource payload', () => {
+    const cover = resolveProjectCoverSnapshotResource(
+      project([
+        {
+          resourceId: 'resource-snake-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: '',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          asset_kind: 'project-cover-snapshot',
+          src: '/generated-character-drafts/editor/project-covers/editor-project-cover/1771400000300/cover.png',
+        } as EditorProjectSnapshot['resources'][number],
+      ]),
+    );
+
+    expect(cover?.resourceId).toBe('resource-snake-cover');
+  });
+});
+
+describe('resolveProjectCoverResource', () => {
+  it('prefers the saved cover snapshot over canvas layer resources', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-layer',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/layer.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-cover',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/cover.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+            assetKind: 'project-cover-snapshot',
+          },
+        ],
+        [{ layerId: 'layer-top', resourceId: 'resource-layer', zIndex: 9 }],
+      ),
+    );
+
+    expect(cover?.resourceId).toBe('resource-cover');
+  });
+
+  it('uses local cached covers only when no saved cover snapshot exists', () => {
+    const cover = resolveProjectCoverResource(
+      project([
+        {
+          resourceId: 'resource-local-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: 'blob:local-cover',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+          updatedAt: '2026-06-12T09:10:00.000Z',
+        },
+        {
+          resourceId: 'resource-saved-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: '/generated/cover.png',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: 'project-cover-snapshot',
+          updatedAt: '2026-06-12T09:00:00.000Z',
+        },
+      ]),
+    );
+
+    expect(cover?.resourceId).toBe('resource-saved-cover');
+
+    const localCover = resolveProjectCoverResource(
+      project([
+        {
+          resourceId: 'resource-local-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: 'blob:local-cover',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+        },
+      ]),
+    );
+
+    expect(localCover?.resourceId).toBe('resource-local-cover');
+  });
+
+  it('falls back to the top visible canvas layer resource', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-back',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/back.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/front.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+        ],
+        [
+          { layerId: 'layer-back', resourceId: 'resource-back', zIndex: 1 },
+          { layerId: 'layer-front', resourceId: 'resource-front', zIndex: 3 },
+        ],
+      ),
+    );
+
+    expect(cover?.resourceId).toBe('resource-front');
+  });
+
+  it('ignores hidden and audio layers when falling back', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-hidden',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/hidden.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-audio',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/audio.mp3',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-visible',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/visible.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+        ],
+        [
+          {
+            layerId: 'layer-hidden',
+            resourceId: 'resource-hidden',
+            hidden: true,
+            zIndex: 9,
+          },
+          {
+            layerId: 'layer-audio',
+            resourceId: 'resource-audio',
+            mediaType: 'audio',
+            zIndex: 8,
+          },
+          {
+            layerId: 'layer-visible',
+            resourceId: 'resource-visible',
+            zIndex: 1,
+          },
+        ],
+      ),
+    );
+
+    expect(cover?.resourceId).toBe('resource-visible');
+  });
+
+  it('returns null when the project has no visible layer image resource', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-hidden',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/hidden.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+        ],
+        [
+          {
+            layerId: 'layer-hidden',
+            resourceId: 'resource-hidden',
+            hidden: true,
+          },
+        ],
+      ),
+    );
+
+    expect(cover).toBeNull();
+  });
 });
diff --git a/src/components/project/ProjectCanvasCover.tsx b/src/components/project/ProjectCanvasCover.tsx
index f6b656eb2..9f3c84eef 100644
--- a/src/components/project/ProjectCanvasCover.tsx
+++ b/src/components/project/ProjectCanvasCover.tsx
@@ -1,17 +1,89 @@
 import type {
+  EditorProjectLayerSnapshot,
   EditorProjectResourceSnapshot,
   EditorProjectSnapshot,
 } from '../../services/image-editor/editorProjectClient';
 import { PROJECT_COVER_SNAPSHOT_ASSET_KIND } from '../image-editor/ImageCanvasProjectCoverSnapshotModel';
 
-function hasProjectCoverSnapshotSource(resource: EditorProjectResourceSnapshot) {
-  return Boolean(resource.objectKey?.trim() || resource.imageSrc.trim());
+const PROJECT_COVER_SNAPSHOT_ASSET_KIND_LEGACY =
+  'editor_project_cover_snapshot';
+export const LOCAL_PROJECT_COVER_CACHE_ASSET_KIND = 'local-project-cover-cache';
+
+type ProjectResourceSnakeKind = {
+  asset_kind?: string | null;
+  src?: string | null;
+};
+
+type ProjectCoverResourceCandidate = EditorProjectResourceSnapshot & {
+  imageSrc: string;
+};
+
+function stringFromUnknown(value: unknown) {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function numberFromUnknown(value: unknown, fallback: number) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+function readProjectCoverSnapshotKind(resource: EditorProjectResourceSnapshot) {
+  const legacyResource = resource as ProjectResourceSnakeKind;
+  return (
+    resource.assetKind?.trim() ||
+    legacyResource.asset_kind?.trim() ||
+    ''
+  ).trim();
+}
+
+function readProjectCoverSnapshotImageSrc(
+  resource: EditorProjectResourceSnapshot,
+) {
+  const legacyResource = resource as ProjectResourceSnakeKind;
+  return (
+    (typeof resource.imageSrc === 'string' ? resource.imageSrc.trim() : '') ||
+    (typeof legacyResource.src === 'string' ? legacyResource.src.trim() : '')
+  );
+}
+
+function hasProjectCoverSnapshotSource(
+  resource: EditorProjectResourceSnapshot,
+) {
+  const resourceObjectKey = resource.objectKey?.trim() || '';
+  const resourceImageSrc = readProjectCoverSnapshotImageSrc(resource);
+  return Boolean(resourceObjectKey || resourceImageSrc);
+}
+
+function hasProjectCoverSource(
+  resource: EditorProjectResourceSnapshot,
+): resource is ProjectCoverResourceCandidate {
+  return hasProjectCoverSnapshotSource(resource);
+}
+
+function isDedicatedProjectCoverSnapshot(
+  resource: EditorProjectResourceSnapshot,
+) {
+  return [
+    PROJECT_COVER_SNAPSHOT_ASSET_KIND,
+    PROJECT_COVER_SNAPSHOT_ASSET_KIND_LEGACY,
+    LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+  ].includes(readProjectCoverSnapshotKind(resource));
+}
+
+function isLocalProjectCoverCacheResource(
+  resource: EditorProjectResourceSnapshot,
+) {
+  return (
+    readProjectCoverSnapshotKind(resource) ===
+    LOCAL_PROJECT_COVER_CACHE_ASSET_KIND
+  );
 }
 
 function projectCoverSnapshotObjectTimestamp(
   resource: EditorProjectResourceSnapshot,
 ) {
-  const snapshotPath = resource.objectKey?.trim() || resource.imageSrc.trim();
+  const objectKey = resource.objectKey?.trim() || '';
+  const imageSrc = readProjectCoverSnapshotImageSrc(resource);
+  const snapshotPath = objectKey || imageSrc;
   const timestampSegment = snapshotPath.match(
     /\/project-covers\/[^/]+\/(\d{10,})\//u,
   )?.[1];
@@ -19,7 +91,9 @@ function projectCoverSnapshotObjectTimestamp(
   return Number.isFinite(timestampMs) ? timestampMs : 0;
 }
 
-function projectCoverSnapshotSortScore(resource: EditorProjectResourceSnapshot) {
+function projectCoverSnapshotSortScore(
+  resource: EditorProjectResourceSnapshot,
+) {
   const objectTimestamp = projectCoverSnapshotObjectTimestamp(resource);
   if (objectTimestamp > 0) {
     return objectTimestamp;
@@ -32,16 +106,69 @@ function projectCoverSnapshotSortScore(resource: EditorProjectResourceSnapshot)
 export function resolveProjectCoverSnapshotResource(
   project: EditorProjectSnapshot,
 ) {
-  return [...project.resources]
-    .filter(
-      (resource) =>
-        resource.assetKind === PROJECT_COVER_SNAPSHOT_ASSET_KIND &&
-        hasProjectCoverSnapshotSource(resource),
-    )
-    .sort((left, right) => {
-      const byUpdatedAt =
-        projectCoverSnapshotSortScore(right) -
-        projectCoverSnapshotSortScore(left);
-      return byUpdatedAt || right.resourceId.localeCompare(left.resourceId);
-    })[0] ?? null;
+  return (
+    [...project.resources]
+      .filter(
+        (resource) =>
+          isDedicatedProjectCoverSnapshot(resource) &&
+          hasProjectCoverSource(resource),
+      )
+      .sort((left, right) => {
+        if (
+          isLocalProjectCoverCacheResource(left) !==
+          isLocalProjectCoverCacheResource(right)
+        ) {
+          return isLocalProjectCoverCacheResource(left) ? 1 : -1;
+        }
+        const byUpdatedAt =
+          projectCoverSnapshotSortScore(right) -
+          projectCoverSnapshotSortScore(left);
+        return byUpdatedAt || right.resourceId.localeCompare(left.resourceId);
+      })[0] ?? null
+  );
+}
+
+function readLayerResourceId(layer: EditorProjectLayerSnapshot) {
+  return stringFromUnknown(layer.resourceId);
+}
+
+function isLayerVisible(layer: EditorProjectLayerSnapshot) {
+  return layer.hidden !== true && layer.mediaType !== 'audio';
+}
+
+function layerCoverSortScore(layer: EditorProjectLayerSnapshot, index: number) {
+  return {
+    zIndex: numberFromUnknown(layer.zIndex, 0),
+    index,
+  };
+}
+
+export function resolveProjectCoverResource(project: EditorProjectSnapshot) {
+  const snapshot = resolveProjectCoverSnapshotResource(project);
+  if (snapshot) {
+    return snapshot;
+  }
+
+  const resourcesById = new Map(
+    project.resources
+      .filter((resource) => !isDedicatedProjectCoverSnapshot(resource))
+      .filter(hasProjectCoverSource)
+      .map((resource) => [resource.resourceId, resource]),
+  );
+
+  return (
+    project.layers
+      .map((layer, index) => ({ layer, index }))
+      .filter(({ layer }) => isLayerVisible(layer))
+      .flatMap(({ layer, index }) => {
+        const resource = resourcesById.get(readLayerResourceId(layer));
+        return resource
+          ? [{ resource, score: layerCoverSortScore(layer, index) }]
+          : [];
+      })
+      .sort((left, right) => {
+        const byZIndex = right.score.zIndex - left.score.zIndex;
+        return byZIndex || right.score.index - left.score.index;
+      })[0]?.resource ?? null
+  );
 }
diff --git a/src/components/project/ProjectGalleryView.test.tsx b/src/components/project/ProjectGalleryView.test.tsx
index 4d16c791b..139114adf 100644
--- a/src/components/project/ProjectGalleryView.test.tsx
+++ b/src/components/project/ProjectGalleryView.test.tsx
@@ -3,7 +3,7 @@
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps, ContextType } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ApiClientError } from '../../services/apiClient';
 import { AuthUiContext } from '../auth/AuthUiContext';
@@ -13,6 +13,7 @@ const listEditorProjectsMock = vi.hoisted(() => vi.fn());
 const createEditorProjectMock = vi.hoisted(() => vi.fn());
 const renameEditorProjectMock = vi.hoisted(() => vi.fn());
 const deleteEditorProjectMock = vi.hoisted(() => vi.fn());
+const readEditorProjectCoverCacheMock = vi.hoisted(() => vi.fn());
 
 type AuthValue = NonNullable<ContextType<typeof AuthUiContext>>;
 
@@ -44,6 +45,10 @@ vi.mock('../../services/image-editor/editorProjectClient', () => ({
   deleteEditorProject: deleteEditorProjectMock,
 }));
 
+vi.mock('../../services/image-editor/editorProjectCoverCache', () => ({
+  readEditorProjectCoverCache: readEditorProjectCoverCacheMock,
+}));
+
 const projectItems = [
   {
     projectId: 'editor-project-1',
@@ -75,20 +80,22 @@ const projectItems = [
 function renderProjectGalleryView(
   props: Partial<ComponentProps<typeof ProjectGalleryView>> = {},
 ) {
-  return render(
-    <ProjectGalleryView
-      onOpenProject={vi.fn()}
-      {...props}
-    />,
-  );
+  return render(<ProjectGalleryView onOpenProject={vi.fn()} {...props} />);
 }
 
 describe('ProjectGalleryView', () => {
+  beforeEach(() => {
+    readEditorProjectCoverCacheMock.mockResolvedValue(new Map());
+    URL.createObjectURL = vi.fn(() => 'blob:project-cover-cache');
+    URL.revokeObjectURL = vi.fn();
+  });
+
   afterEach(() => {
     listEditorProjectsMock.mockReset();
     createEditorProjectMock.mockReset();
     renameEditorProjectMock.mockReset();
     deleteEditorProjectMock.mockReset();
+    readEditorProjectCoverCacheMock.mockReset();
   });
 
   it('opens a project from the gallery card', async () => {
@@ -99,7 +106,9 @@ describe('ProjectGalleryView', () => {
     renderProjectGalleryView({ onOpenProject });
 
     await screen.findByText('角色设定板');
-    await user.click(screen.getByRole('button', { name: '打开项目角色设定板' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目角色设定板' }),
+    );
 
     expect(onOpenProject).toHaveBeenCalledWith('editor-project-1');
   });
@@ -168,9 +177,7 @@ describe('ProjectGalleryView', () => {
 
     await screen.findByText('封面项目');
 
-    expect(
-      document.querySelector('.project-gallery__canvas-cover'),
-    ).toBeNull();
+    expect(document.querySelector('.project-gallery__canvas-cover')).toBeNull();
     expect(
       document
         .querySelector('.project-gallery__preview img')
@@ -178,6 +185,115 @@ describe('ProjectGalleryView', () => {
     ).toBe('data:image/png;base64,cover');
   });
 
+  it('falls back to a visible canvas layer image when no cover snapshot exists', async () => {
+    listEditorProjectsMock.mockResolvedValueOnce([
+      {
+        projectId: 'editor-project-layer-cover',
+        title: '图层封面项目',
+        viewport: { x: 0, y: 0, scale: 1 },
+        layers: [
+          {
+            layerId: 'layer-back',
+            resourceId: 'resource-back',
+            title: '背景图',
+            zIndex: 1,
+          },
+          {
+            layerId: 'layer-front',
+            resourceId: 'resource-front',
+            title: '前景图',
+            zIndex: 2,
+          },
+        ],
+        resources: [
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-layer-cover',
+            imageSrc: 'data:image/png;base64,front',
+            width: 160,
+            height: 120,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-back',
+            projectId: 'editor-project-layer-cover',
+            imageSrc: 'data:image/png;base64,back',
+            width: 300,
+            height: 180,
+            sourceType: 'uploaded',
+          },
+        ],
+        updatedAt: '2026-06-12T08:00:00.000Z',
+      },
+    ]);
+
+    renderProjectGalleryView();
+
+    await screen.findByText('图层封面项目');
+
+    expect(
+      document
+        .querySelector('.project-gallery__preview img')
+        ?.getAttribute('src'),
+    ).toBe('data:image/png;base64,front');
+  });
+
+  it('uses locally cached cover snapshots before falling back to canvas layers', async () => {
+    readEditorProjectCoverCacheMock.mockResolvedValueOnce(
+      new Map([
+        [
+          'editor-project-local-cover',
+          {
+            projectId: 'editor-project-local-cover',
+            blob: new Blob(['cover'], { type: 'image/png' }),
+            updatedAt: '2026-06-12T09:30:00.000Z',
+            cachedAt: Date.now(),
+          },
+        ],
+      ]),
+    );
+    listEditorProjectsMock.mockResolvedValueOnce([
+      {
+        projectId: 'editor-project-local-cover',
+        title: '本地封面项目',
+        viewport: { x: 0, y: 0, scale: 1 },
+        layers: [
+          {
+            layerId: 'layer-front',
+            resourceId: 'resource-front',
+            title: '前景图',
+            zIndex: 2,
+          },
+        ],
+        resources: [
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-local-cover',
+            imageSrc: 'data:image/png;base64,front',
+            width: 160,
+            height: 120,
+            sourceType: 'uploaded',
+          },
+        ],
+        updatedAt: '2026-06-12T08:00:00.000Z',
+      },
+    ]);
+
+    renderProjectGalleryView();
+
+    await screen.findByText('本地封面项目');
+    await waitFor(() => {
+      expect(
+        document
+          .querySelector('.project-gallery__preview img')
+          ?.getAttribute('src'),
+      ).toBe('blob:project-cover-cache');
+    });
+    expect(readEditorProjectCoverCacheMock).toHaveBeenCalledWith([
+      'editor-project-local-cover',
+    ]);
+  });
+
   it('opens the login modal when project list loading is unauthorized', async () => {
     const openLoginModal = vi.fn();
     listEditorProjectsMock.mockRejectedValueOnce(
@@ -190,9 +306,7 @@ describe('ProjectGalleryView', () => {
 
     render(
       <AuthUiContext.Provider value={createAuthValue({ openLoginModal })}>
-        <ProjectGalleryView
-          onOpenProject={vi.fn()}
-        />
+        <ProjectGalleryView onOpenProject={vi.fn()} />
       </AuthUiContext.Provider>,
     );
 
@@ -211,14 +325,14 @@ describe('ProjectGalleryView', () => {
 
     render(
       <AuthUiContext.Provider value={createAuthValue({ requireAuth })}>
-        <ProjectGalleryView
-          onOpenProject={onOpenProject}
-        />
+        <ProjectGalleryView onOpenProject={onOpenProject} />
       </AuthUiContext.Provider>,
     );
 
     await screen.findByText('角色设定板');
-    await user.click(screen.getByRole('button', { name: '打开项目角色设定板' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目角色设定板' }),
+    );
 
     expect(requireAuth).toHaveBeenCalledWith(expect.any(Function));
     expect(onOpenProject).not.toHaveBeenCalled();
@@ -248,7 +362,9 @@ describe('ProjectGalleryView', () => {
     renderProjectGalleryView();
 
     await screen.findByText('角色设定板');
-    await user.click(screen.getByRole('button', { name: '打开项目角色设定板菜单' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目角色设定板菜单' }),
+    );
     await user.click(screen.getByRole('menuitem', { name: /重命名/u }));
     await user.clear(screen.getByLabelText('项目名称'));
     await user.type(screen.getByLabelText('项目名称'), '新角色设定板');
@@ -260,7 +376,9 @@ describe('ProjectGalleryView', () => {
     );
     await screen.findByText('新角色设定板');
 
-    await user.click(screen.getByRole('button', { name: '打开项目场景草图菜单' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目场景草图菜单' }),
+    );
     await user.click(screen.getByRole('menuitem', { name: /删除/u }));
 
     expect(deleteEditorProjectMock).toHaveBeenCalledWith('editor-project-2');
diff --git a/src/components/project/ProjectGalleryView.tsx b/src/components/project/ProjectGalleryView.tsx
index a90b750f6..03e2b92a4 100644
--- a/src/components/project/ProjectGalleryView.tsx
+++ b/src/components/project/ProjectGalleryView.tsx
@@ -7,7 +7,7 @@ import {
   Square,
   Trash2,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ApiClientError } from '../../services/apiClient';
 import {
@@ -17,6 +17,7 @@ import {
   listEditorProjects,
   renameEditorProject,
 } from '../../services/image-editor/editorProjectClient';
+import { readEditorProjectCoverCache } from '../../services/image-editor/editorProjectCoverCache';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
@@ -30,7 +31,10 @@ import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
-import { resolveProjectCoverSnapshotResource } from './ProjectCanvasCover';
+import {
+  LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+  resolveProjectCoverResource,
+} from './ProjectCanvasCover';
 
 type ProjectGalleryViewProps = {
   onOpenProject: (projectId: string) => void;
@@ -41,6 +45,12 @@ type RenameDraft = {
   title: string;
 };
 
+type ProjectCoverObjectUrl = {
+  projectId: string;
+  url: string;
+  updatedAt: string;
+};
+
 function isUnauthorizedError(error: unknown) {
   return error instanceof ApiClientError && error.status === 401;
 }
@@ -58,9 +68,7 @@ function formatProjectUpdatedAt(value: string) {
   }).format(date);
 }
 
-export function ProjectGalleryView({
-  onOpenProject,
-}: ProjectGalleryViewProps) {
+export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
   const authUi = useAuthUi();
   const [projects, setProjects] = useState<EditorProjectSnapshot[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -72,19 +80,60 @@ export function ProjectGalleryView({
   const [selectedProjectIds, setSelectedProjectIds] = useState<Set<string>>(
     () => new Set(),
   );
+  const [localCoverObjectUrls, setLocalCoverObjectUrls] = useState<
+    ProjectCoverObjectUrl[]
+  >([]);
+  const localCoverObjectUrlsRef = useRef<ProjectCoverObjectUrl[]>([]);
   const [isSelectionMode, setIsSelectionMode] = useState(false);
   const selectedCount = selectedProjectIds.size;
   const allSelected =
     projects.length > 0 && selectedProjectIds.size === projects.length;
 
+  const localCoverUrlByProjectId = useMemo(
+    () =>
+      new Map(
+        localCoverObjectUrls.map((cover) => [cover.projectId, cover] as const),
+      ),
+    [localCoverObjectUrls],
+  );
+
+  const replaceLocalCoverObjectUrls = useCallback(
+    (nextCoverObjectUrls: ProjectCoverObjectUrl[]) => {
+      localCoverObjectUrlsRef.current.forEach((cover) =>
+        URL.revokeObjectURL(cover.url),
+      );
+      localCoverObjectUrlsRef.current = nextCoverObjectUrls;
+      setLocalCoverObjectUrls(nextCoverObjectUrls);
+    },
+    [],
+  );
+
   const refreshProjects = useCallback(() => {
     setIsLoading(true);
     setErrorMessage(null);
     listEditorProjects()
       .then((items) => {
         setProjects(items);
+        void readEditorProjectCoverCache(
+          items.map((project) => project.projectId),
+        )
+          .then((cachedCovers) => {
+            const nextCoverObjectUrls = [...cachedCovers.values()].map(
+              (cover) => ({
+                projectId: cover.projectId,
+                url: URL.createObjectURL(cover.blob),
+                updatedAt: cover.updatedAt,
+              }),
+            );
+            replaceLocalCoverObjectUrls(nextCoverObjectUrls);
+          })
+          .catch(() => {
+            replaceLocalCoverObjectUrls([]);
+          });
         setSelectedProjectIds((currentIds) => {
-          const availableIds = new Set(items.map((project) => project.projectId));
+          const availableIds = new Set(
+            items.map((project) => project.projectId),
+          );
           return new Set(
             [...currentIds].filter((projectId) => availableIds.has(projectId)),
           );
@@ -100,7 +149,16 @@ export function ProjectGalleryView({
         );
       })
       .finally(() => setIsLoading(false));
-  }, [authUi]);
+  }, [authUi, replaceLocalCoverObjectUrls]);
+
+  useEffect(() => {
+    return () => {
+      localCoverObjectUrlsRef.current.forEach((cover) =>
+        URL.revokeObjectURL(cover.url),
+      );
+      localCoverObjectUrlsRef.current = [];
+    };
+  }, []);
 
   useEffect(() => {
     refreshProjects();
@@ -138,34 +196,33 @@ export function ProjectGalleryView({
     });
   }, []);
 
-  const deleteProjects = useCallback(
-    (projectIds: string[]) => {
-      if (projectIds.length === 0) {
-        return;
-      }
-      setErrorMessage(null);
-      void Promise.all(projectIds.map((projectId) => deleteEditorProject(projectId)))
-        .then(() => {
-          setProjects((currentProjects) =>
-            currentProjects.filter(
-              (project) => !projectIds.includes(project.projectId),
-            ),
-          );
-          setSelectedProjectIds((currentIds) => {
-            const nextIds = new Set(currentIds);
-            projectIds.forEach((projectId) => nextIds.delete(projectId));
-            return nextIds;
-          });
-          setActiveMenuProjectId(null);
-        })
-        .catch((error: unknown) => {
-          setErrorMessage(
-            error instanceof Error ? error.message : '删除项目失败',
-          );
+  const deleteProjects = useCallback((projectIds: string[]) => {
+    if (projectIds.length === 0) {
+      return;
+    }
+    setErrorMessage(null);
+    void Promise.all(
+      projectIds.map((projectId) => deleteEditorProject(projectId)),
+    )
+      .then(() => {
+        setProjects((currentProjects) =>
+          currentProjects.filter(
+            (project) => !projectIds.includes(project.projectId),
+          ),
+        );
+        setSelectedProjectIds((currentIds) => {
+          const nextIds = new Set(currentIds);
+          projectIds.forEach((projectId) => nextIds.delete(projectId));
+          return nextIds;
         });
-    },
-    [],
-  );
+        setActiveMenuProjectId(null);
+      })
+      .catch((error: unknown) => {
+        setErrorMessage(
+          error instanceof Error ? error.message : '删除项目失败',
+        );
+      });
+  }, []);
 
   const submitRename = useCallback(() => {
     if (!renameDraft) {
@@ -197,7 +254,28 @@ export function ProjectGalleryView({
     () =>
       projects.map((project) => {
         const selected = selectedProjectIds.has(project.projectId);
-        const coverSnapshot = resolveProjectCoverSnapshotResource(project);
+        const localCover = localCoverUrlByProjectId.get(project.projectId);
+        const projectWithLocalCover = localCover
+          ? {
+              ...project,
+              resources: [
+                ...project.resources,
+                {
+                  resourceId: `local-cover-cache:${project.projectId}`,
+                  projectId: project.projectId,
+                  imageSrc: localCover.url,
+                  width: 320,
+                  height: 240,
+                  sourceType: 'uploaded' as const,
+                  assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+                  updatedAt: localCover.updatedAt,
+                },
+              ],
+            }
+          : project;
+        const coverResource = resolveProjectCoverResource(
+          projectWithLocalCover,
+        );
         return (
           <article
             key={project.projectId}
@@ -225,16 +303,16 @@ export function ProjectGalleryView({
               aria-label={`打开项目${project.title}`}
             >
               <PlatformMediaFrame
-                src={coverSnapshot?.imageSrc ?? null}
-                objectKey={coverSnapshot?.objectKey ?? null}
+                src={coverResource?.imageSrc ?? null}
+                objectKey={coverResource?.objectKey ?? null}
                 alt=""
                 fallbackLabel="项目"
                 aspect="standard"
                 surface="bright"
                 refreshKey={
-                  coverSnapshot?.updatedAt ??
-                  coverSnapshot?.createdAt ??
-                  coverSnapshot?.resourceId ??
+                  coverResource?.updatedAt ??
+                  coverResource?.createdAt ??
+                  coverResource?.resourceId ??
                   null
                 }
                 className="project-gallery__preview"
@@ -297,6 +375,7 @@ export function ProjectGalleryView({
       authUi,
       deleteProjects,
       isSelectionMode,
+      localCoverUrlByProjectId,
       onOpenProject,
       projects,
       selectedProjectIds,
@@ -372,7 +451,10 @@ export function ProjectGalleryView({
             >
               取消
             </PlatformActionButton>
-            <PlatformActionButton type="submit" form="project-gallery-rename-form">
+            <PlatformActionButton
+              type="submit"
+              form="project-gallery-rename-form"
+            >
               保存
             </PlatformActionButton>
           </>
@@ -433,7 +515,11 @@ export function ProjectGalleryView({
             <Trash2 className="h-4 w-4" />
             删除
           </PlatformActionButton>
-          <PlatformActionButton tone="secondary" size="sm" onClick={closeSelectionMode}>
+          <PlatformActionButton
+            tone="secondary"
+            size="sm"
+            onClick={closeSelectionMode}
+          >
             取消
           </PlatformActionButton>
         </PlatformBatchActionToolbar>
diff --git a/src/components/square-hole-result/SquareHoleResultView.tsx b/src/components/square-hole-result/SquareHoleResultView.tsx
index b91e3eb20..0178b4999 100644
--- a/src/components/square-hole-result/SquareHoleResultView.tsx
+++ b/src/components/square-hole-result/SquareHoleResultView.tsx
@@ -9,13 +9,7 @@ import {
   Send,
   Trash2,
 } from 'lucide-react';
-import {
-  type ChangeEvent,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { SquareHoleResultDraft } from '../../../packages/shared/src/contracts/squareHoleAgent';
 import type {
@@ -24,6 +18,11 @@ import type {
   SquareHoleShapeOption,
   SquareHoleWorkProfile,
 } from '../../../packages/shared/src/contracts/squareHoleWorks';
+import {
+  canUseNativeHostCapability,
+  type HostFileImportImageResult,
+  importHostImageFile,
+} from '../../services/host-bridge/hostBridge';
 import {
   publishSquareHoleWork,
   regenerateSquareHoleWorkImage,
@@ -32,14 +31,9 @@ import {
   type SquareHoleImageAssetKind,
   updateSquareHoleWork,
 } from '../../services/square-hole-works';
-import {
-  canUseNativeHostCapability,
-  type HostFileImportImageResult,
-  importHostImageFile,
-} from '../../services/host-bridge/hostBridge';
 import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
 import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
+import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
@@ -47,11 +41,11 @@ import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatGrid } from '../common/PlatformStatGrid';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
-import { PlatformToolModalShell } from '../common/PlatformToolModalShell';
 import {
   PlatformSelectField,
   PlatformTextField,
 } from '../common/PlatformTextField';
+import { PlatformToolModalShell } from '../common/PlatformToolModalShell';
 
 type SquareHoleResultViewProps = {
   profile: SquareHoleWorkProfile;
@@ -792,6 +786,9 @@ export function SquareHoleResultView({
       setEditState((current) => applyImageSlotSrc(current, slot, dataUrl));
       setLocalError(null);
     } catch (caughtError) {
+      if (slot.kind === 'background') {
+        return;
+      }
       setLocalError(
         caughtError instanceof Error ? caughtError.message : '图片读取失败。',
       );
@@ -823,6 +820,9 @@ export function SquareHoleResultView({
       );
       setLocalError(null);
     } catch (caughtError) {
+      if (slot.kind === 'background') {
+        return;
+      }
       setLocalError(
         caughtError instanceof Error ? caughtError.message : '图片读取失败。',
       );
diff --git a/src/index.css b/src/index.css
index 7cef72c05..af2729776 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7743,6 +7743,51 @@ button.image-canvas-editor__reference-chip:disabled {
   color: #a3acba;
 }
 
+.image-canvas-editor__context-submenu {
+  position: relative;
+}
+
+.image-canvas-editor__context-submenu-trigger {
+  justify-content: space-between !important;
+  gap: 0.85rem;
+}
+
+.image-canvas-editor__context-submenu-panel {
+  top: -0.32rem;
+  left: calc(100% + 0.42rem);
+  width: max-content;
+  min-width: 9.5rem;
+  overflow: visible;
+  padding: 0.32rem;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-0.12rem);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease,
+    visibility 120ms linear;
+  visibility: hidden;
+}
+
+.image-canvas-editor__context-submenu:hover
+  .image-canvas-editor__context-submenu-panel,
+.image-canvas-editor__context-submenu:focus-within
+  .image-canvas-editor__context-submenu-panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  visibility: visible;
+}
+
+.image-canvas-editor__context-submenu-panel::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -0.55rem;
+  width: 0.55rem;
+  content: '';
+}
+
 .image-canvas-editor__asset-context-menu {
   z-index: 42;
 }
diff --git a/src/main.tsx b/src/main.tsx
index c730f9992..4a16f2c5a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,9 +6,13 @@ import {StrictMode, Suspense} from 'react';
 import {createRoot} from 'react-dom/client';
 
 import {FloatingFeedbackEntry} from './components/common/FloatingFeedbackEntry';
+import {getInitialPlatformDesktopLayout} from './components/platform-entry/platformEntryResponsive';
 import {stabilizeMobileViewportKeyboardFocus} from './mobileViewportKeyboardFocus';
 import {lockMobileViewportZoom} from './mobileViewportZoomLock';
-import {resolveAppRoute} from './routing/appRoutes';
+import {
+  resolveAppRoute,
+  shouldUseRecommendationRouteLoading,
+} from './routing/appRoutes';
 import {RouteImageReadyGate} from './routing/RouteImageReadyGate';
 import {RouteLoadingScreen} from './routing/RouteLoadingScreen';
 import {
@@ -39,6 +43,11 @@ function markWechatMiniProgramRuntime() {
 
 const root = window.__tavernRealmsRoot__ ??= createRoot(rootElement);
 const RouteComponent = route.Component;
+const routeElement = <RouteComponent {...(route.componentProps ?? {})} />;
+const shouldGateRouteImages = shouldUseRecommendationRouteLoading(
+  window.location.pathname,
+  getInitialPlatformDesktopLayout(),
+);
 
 lockMobileViewportZoom();
 stabilizeMobileViewportKeyboardFocus();
@@ -47,13 +56,26 @@ void refreshNativeAppHostRuntime();
 
 root.render(
   <StrictMode>
-    <Suspense fallback={<RouteLoadingScreen eyebrow={route.loadingEyebrow} text={route.loadingText} />}>
-      <RouteImageReadyGate
-        eyebrow={route.loadingEyebrow}
-        text={route.loadingText}
-      >
-        <RouteComponent {...(route.componentProps ?? {})} />
-      </RouteImageReadyGate>
+    <Suspense
+      fallback={
+        shouldGateRouteImages ? (
+          <RouteLoadingScreen
+            eyebrow={route.loadingEyebrow}
+            text={route.loadingText}
+          />
+        ) : null
+      }
+    >
+      {shouldGateRouteImages ? (
+        <RouteImageReadyGate
+          eyebrow={route.loadingEyebrow}
+          text={route.loadingText}
+        >
+          {routeElement}
+        </RouteImageReadyGate>
+      ) : (
+        routeElement
+      )}
     </Suspense>
     <FloatingFeedbackEntry />
   </StrictMode>,
diff --git a/src/routing/appPageRoutes.test.ts b/src/routing/appPageRoutes.test.ts
index c77578138..d08b2c784 100644
--- a/src/routing/appPageRoutes.test.ts
+++ b/src/routing/appPageRoutes.test.ts
@@ -5,9 +5,11 @@ import { describe, expect, it } from 'vitest';
 import {
   isAppHistoryState,
   pushAppHistoryPath,
+  readEditorCanvasProjectIdFromLocationSearch,
   replaceAppHistoryPath,
   resolvePathForSelectionStage,
   resolveSelectionStageFromPath,
+  shouldRedirectEditorCanvasWithoutProject,
 } from './appPageRoutes';
 
 describe('appPageRoutes', () => {
@@ -39,6 +41,27 @@ describe('appPageRoutes', () => {
     expect(window.location.search).toBe('?projectid=project-from-route-test');
   });
 
+  it('detects editor canvas routes that are missing project id', () => {
+    expect(readEditorCanvasProjectIdFromLocationSearch('?projectid=abc')).toBe(
+      'abc',
+    );
+    expect(shouldRedirectEditorCanvasWithoutProject('/editor/canvas', '')).toBe(
+      true,
+    );
+    expect(
+      shouldRedirectEditorCanvasWithoutProject('/EDITOR/CANVAS/', '?foo=bar'),
+    ).toBe(true);
+    expect(
+      shouldRedirectEditorCanvasWithoutProject(
+        '/editor/canvas',
+        '?projectid=project-from-route-test',
+      ),
+    ).toBe(false);
+    expect(shouldRedirectEditorCanvasWithoutProject('/creation', '')).toBe(
+      false,
+    );
+  });
+
   it('resolves the project route', () => {
     expect(resolveSelectionStageFromPath('/project')).toBe('project');
     expect(resolveSelectionStageFromPath('/PROJECT/')).toBe('project');
diff --git a/src/routing/appPageRoutes.ts b/src/routing/appPageRoutes.ts
index f1bfbe7a9..7b5186859 100644
--- a/src/routing/appPageRoutes.ts
+++ b/src/routing/appPageRoutes.ts
@@ -9,6 +9,7 @@ import {
 export type RuntimePageRoute = 'rpg-character-select' | 'rpg-adventure';
 
 export const PUBLIC_WORK_QUERY_PARAM = 'work';
+export const EDITOR_CANVAS_PROJECT_ID_QUERY_PARAM = 'projectid';
 
 const STAGE_ROUTE_ENTRIES = [
   ['platform', '/'],
@@ -122,6 +123,21 @@ export function readPublicWorkCodeFromLocationSearch(search: string) {
   return params.get(PUBLIC_WORK_QUERY_PARAM)?.trim() || null;
 }
 
+export function readEditorCanvasProjectIdFromLocationSearch(search: string) {
+  const params = new URLSearchParams(search);
+  return params.get(EDITOR_CANVAS_PROJECT_ID_QUERY_PARAM)?.trim() || null;
+}
+
+export function shouldRedirectEditorCanvasWithoutProject(
+  pathname: string,
+  search: string,
+) {
+  return (
+    normalizeAppPath(pathname) === APP_STAGE_ROUTES['image-editor'] &&
+    !readEditorCanvasProjectIdFromLocationSearch(search)
+  );
+}
+
 export function buildPublicWorkDetailPath(publicWorkCode: string) {
   return buildPublicWorkStagePath('work-detail', publicWorkCode);
 }
diff --git a/src/routing/appRoutes.test.ts b/src/routing/appRoutes.test.ts
index 05f3dd53f..8980eabed 100644
--- a/src/routing/appRoutes.test.ts
+++ b/src/routing/appRoutes.test.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { matchAppRoute } from './appRoutes';
+import { matchAppRoute, shouldUseRecommendationRouteLoading } from './appRoutes';
 
 afterEach(() => {
   vi.unstubAllEnvs();
@@ -89,3 +89,15 @@ describe('matchAppRoute', () => {
     });
   });
 });
+
+describe('shouldUseRecommendationRouteLoading', () => {
+  it('only enables the dark recommendation loading screen for mobile root route', () => {
+    expect(shouldUseRecommendationRouteLoading('/', false)).toBe(true);
+    expect(shouldUseRecommendationRouteLoading('/', true)).toBe(false);
+    expect(shouldUseRecommendationRouteLoading('/creation', false)).toBe(false);
+    expect(shouldUseRecommendationRouteLoading('/project', false)).toBe(false);
+    expect(shouldUseRecommendationRouteLoading('/editor/canvas', false)).toBe(
+      false,
+    );
+  });
+});
diff --git a/src/routing/appRoutes.tsx b/src/routing/appRoutes.tsx
index 27ffa541e..a253667db 100644
--- a/src/routing/appRoutes.tsx
+++ b/src/routing/appRoutes.tsx
@@ -54,6 +54,13 @@ function normalizeRoutePath(pathname: string) {
   return normalizeAppPath(pathname);
 }
 
+export function shouldUseRecommendationRouteLoading(
+  pathname: string,
+  isDesktopLayout: boolean,
+) {
+  return normalizeRoutePath(pathname) === '/' && !isDesktopLayout;
+}
+
 export function matchAppRoute(pathname: string): AppRouteMatch {
   const normalizedPath = normalizeRoutePath(pathname);
 
diff --git a/src/services/assetReadUrlService.test.ts b/src/services/assetReadUrlService.test.ts
index 8e557e15d..48a794928 100644
--- a/src/services/assetReadUrlService.test.ts
+++ b/src/services/assetReadUrlService.test.ts
@@ -496,15 +496,44 @@ describe('assetReadUrlService', () => {
     expect(window.dispatchEvent).not.toHaveBeenCalled();
   });
 
-  test('readAssetBytes reads generated resources through same-origin bytes endpoint', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([104, 101, 108, 108, 111]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      }),
-    );
+  test('readAssetBytes reads generated resources through signed OSS url first', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey:
+                  'generated-match3d-assets/session/profile/items/match3d-item-1-item/image.png',
+                signedUrl: 'https://signed.example.com/match3d-item.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([104, 101, 108, 108, 111]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
 
     const response = await readAssetBytes(
       '/generated-match3d-assets/session/profile/items/match3d-item-1-item/image.png',
@@ -515,22 +544,53 @@ describe('assetReadUrlService', () => {
     expect(Array.from(bytes)).toEqual([104, 101, 108, 108, 111]);
     expect(response.headers.get('content-type')).toBe('image/png');
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
-      '/api/assets/read-bytes?',
+      '/api/assets/read-url?',
     );
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
       'legacyPublicPath=%2Fgenerated-match3d-assets%2Fsession%2Fprofile%2Fitems%2Fmatch3d-item-1-item%2Fimage.png',
     );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/match3d-item.png',
+    );
   });
 
-  test('readAssetBytes reads object-key resources through same-origin bytes endpoint', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([1, 2, 3]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      }),
-    );
+  test('readAssetBytes reads object-key resources through signed OSS url first', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey: 'generated-editor-images/project/image.png',
+                signedUrl: 'https://signed.example.com/editor-image.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([1, 2, 3]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
 
     const response = await readAssetBytes('/generated-editor-images/image.png', {
       objectKey: 'generated-editor-images/project/image.png',
@@ -540,7 +600,7 @@ describe('assetReadUrlService', () => {
 
     expect(Array.from(bytes)).toEqual([1, 2, 3]);
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
-      '/api/assets/read-bytes?',
+      '/api/assets/read-url?',
     );
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
       'objectKey=generated-editor-images%2Fproject%2Fimage.png',
@@ -548,17 +608,49 @@ describe('assetReadUrlService', () => {
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).not.toContain(
       'legacyPublicPath=',
     );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/editor-image.png',
+    );
   });
 
-  test('readAssetBytes normalizes full OSS generated urls through bytes endpoint', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([1, 2, 3]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      }),
-    );
+  test('readAssetBytes normalizes full OSS generated urls through signed read url', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey:
+                  'generated-puzzle-assets/session/profile/covers/main.png',
+                signedUrl: 'https://signed.example.com/main.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([1, 2, 3]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
 
     const response = await readAssetBytes(
       'https://genarrative.oss-cn-shanghai.aliyuncs.com/generated-puzzle-assets/session/profile/covers/main.png?x-oss-signature=abc',
@@ -567,10 +659,70 @@ describe('assetReadUrlService', () => {
 
     expect(response.headers.get('content-type')).toBe('image/png');
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
-      '/api/assets/read-bytes?',
+      '/api/assets/read-url?',
     );
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
       'legacyPublicPath=%2Fgenerated-puzzle-assets%2Fsession%2Fprofile%2Fcovers%2Fmain.png',
     );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/main.png',
+    );
+  });
+
+  test('readAssetBytes falls back to same-origin bytes endpoint when OSS read fails', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey: 'generated-editor-images/project/image.png',
+                signedUrl: 'https://signed.example.com/editor-image.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(new Response('', { status: 403 }))
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([9, 8, 7]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
+
+    const response = await readAssetBytes('/generated-editor-images/image.png', {
+      objectKey: 'generated-editor-images/project/image.png',
+      expireSeconds: 300,
+    });
+    const bytes = new Uint8Array(await response.arrayBuffer());
+
+    expect(Array.from(bytes)).toEqual([9, 8, 7]);
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
+      '/api/assets/read-url?',
+    );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/editor-image.png',
+    );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[2]?.[0])).toContain(
+      '/api/assets/read-bytes?',
+    );
   });
 });
diff --git a/src/services/assetReadUrlService.ts b/src/services/assetReadUrlService.ts
index 839baafb1..85feb9380 100644
--- a/src/services/assetReadUrlService.ts
+++ b/src/services/assetReadUrlService.ts
@@ -548,17 +548,41 @@ export async function readAssetBytes(
     return response;
   }
 
-  // 中文注释：这里要拿图片字节转 Data URL，不能直接 fetch OSS 签名 URL，否则浏览器会受 bucket CORS 限制。
-  const searchParams = buildAssetReadSearchParams({
+  const readRequest = {
     objectKey,
     legacyPublicPath: objectKey ? undefined : legacyPath,
     expireSeconds: options.expireSeconds,
+  };
+  try {
+    const signedUrl = await getSignedAssetReadUrl(readRequest, options.signal);
+    const response = await fetch(signedUrl, { signal: options.signal });
+    if (response.ok) {
+      return response;
+    }
+  } catch {
+    if (options.signal?.aborted) {
+      throw createSignedReadUrlAbortError();
+    }
+    // 中文注释：浏览器直读 OSS 失败时再走同源字节代理兜底。
+  }
+
+  return readAssetBytesViaFallbackApi(readRequest, options.signal);
+}
+
+async function readAssetBytesViaFallbackApi(
+  request: AssetReadUrlRequest,
+  signal?: AbortSignal,
+) {
+  const searchParams = buildAssetReadSearchParams({
+    objectKey: request.objectKey,
+    legacyPublicPath: request.legacyPublicPath,
+    expireSeconds: request.expireSeconds,
   });
   const response = await fetchWithApiAuth(
     `${ASSET_READ_BYTES_API_PATH}?${searchParams.toString()}`,
     {
       method: 'GET',
-      signal: options.signal,
+      signal,
     },
     {
       ...ASSET_READ_URL_BACKGROUND_OPTIONS,
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 75e00ed44..4d426029b 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -887,8 +887,10 @@ describe('editorProjectClient', () => {
           height: 128,
         },
       ],
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'ui-asset-extraction-1',
diff --git a/src/services/image-editor/editorProjectCoverCache.ts b/src/services/image-editor/editorProjectCoverCache.ts
new file mode 100644
index 000000000..d1bdaf1e1
--- /dev/null
+++ b/src/services/image-editor/editorProjectCoverCache.ts
@@ -0,0 +1,152 @@
+const PROJECT_COVER_CACHE_DB_NAME = 'genarrative-editor-project-covers';
+const PROJECT_COVER_CACHE_DB_VERSION = 1;
+const PROJECT_COVER_CACHE_STORE_NAME = 'covers';
+const PROJECT_COVER_CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+
+export type CachedEditorProjectCover = {
+  projectId: string;
+  blob: Blob;
+  updatedAt: string;
+  cachedAt: number;
+};
+
+function canUseIndexedDb() {
+  return typeof indexedDB !== 'undefined';
+}
+
+function idbRequestToPromise<T>(request: IDBRequest<T>) {
+  return new Promise<T>((resolve, reject) => {
+    request.addEventListener('success', () => resolve(request.result));
+    request.addEventListener('error', () => {
+      reject(request.error ?? new Error('IndexedDB request failed'));
+    });
+  });
+}
+
+function openProjectCoverCacheDb() {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    if (!canUseIndexedDb()) {
+      reject(new Error('IndexedDB unavailable'));
+      return;
+    }
+
+    const request = indexedDB.open(
+      PROJECT_COVER_CACHE_DB_NAME,
+      PROJECT_COVER_CACHE_DB_VERSION,
+    );
+    request.addEventListener('upgradeneeded', () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(PROJECT_COVER_CACHE_STORE_NAME)) {
+        db.createObjectStore(PROJECT_COVER_CACHE_STORE_NAME, {
+          keyPath: 'projectId',
+        });
+      }
+    });
+    request.addEventListener('success', () => resolve(request.result));
+    request.addEventListener('error', () => {
+      reject(request.error ?? new Error('IndexedDB open failed'));
+    });
+  });
+}
+
+async function withProjectCoverCacheStore<T>(
+  mode: IDBTransactionMode,
+  run: (store: IDBObjectStore) => IDBRequest<T>,
+) {
+  const db = await openProjectCoverCacheDb();
+  try {
+    const transaction = db.transaction(PROJECT_COVER_CACHE_STORE_NAME, mode);
+    const result = await idbRequestToPromise(
+      run(transaction.objectStore(PROJECT_COVER_CACHE_STORE_NAME)),
+    );
+    await new Promise<void>((resolve, reject) => {
+      transaction.addEventListener('complete', () => resolve());
+      transaction.addEventListener('abort', () => {
+        reject(transaction.error ?? new Error('IndexedDB transaction aborted'));
+      });
+      transaction.addEventListener('error', () => {
+        reject(transaction.error ?? new Error('IndexedDB transaction failed'));
+      });
+    });
+    return result;
+  } finally {
+    db.close();
+  }
+}
+
+function isFreshCachedCover(
+  cover: CachedEditorProjectCover | undefined,
+): cover is CachedEditorProjectCover {
+  return Boolean(
+    cover?.projectId &&
+      cover.blob instanceof Blob &&
+      cover.cachedAt > Date.now() - PROJECT_COVER_CACHE_MAX_AGE_MS,
+  );
+}
+
+export async function putEditorProjectCoverCache({
+  projectId,
+  blob,
+  updatedAt = new Date().toISOString(),
+}: {
+  projectId: string;
+  blob: Blob;
+  updatedAt?: string;
+}) {
+  const normalizedProjectId = projectId.trim();
+  if (!normalizedProjectId || !canUseIndexedDb()) {
+    return;
+  }
+
+  try {
+    await withProjectCoverCacheStore('readwrite', (store) =>
+      store.put({
+        projectId: normalizedProjectId,
+        blob,
+        updatedAt,
+        cachedAt: Date.now(),
+      } satisfies CachedEditorProjectCover),
+    );
+  } catch {
+    // IndexedDB is best-effort local fallback only.
+  }
+}
+
+export async function readEditorProjectCoverCache(
+  projectIds: readonly string[],
+) {
+  const normalizedProjectIds = [
+    ...new Set(projectIds.map((id) => id.trim())),
+  ].filter(Boolean);
+  if (!normalizedProjectIds.length || !canUseIndexedDb()) {
+    return new Map<string, CachedEditorProjectCover>();
+  }
+
+  let db: IDBDatabase | null = null;
+  try {
+    db = await openProjectCoverCacheDb();
+    const transaction = db.transaction(
+      PROJECT_COVER_CACHE_STORE_NAME,
+      'readonly',
+    );
+    const store = transaction.objectStore(PROJECT_COVER_CACHE_STORE_NAME);
+    const covers = await Promise.all(
+      normalizedProjectIds.map((projectId) =>
+        idbRequestToPromise(
+          store.get(projectId) as IDBRequest<
+            CachedEditorProjectCover | undefined
+          >,
+        ),
+      ),
+    );
+    return new Map(
+      covers
+        .filter(isFreshCachedCover)
+        .map((cover) => [cover.projectId, cover]),
+    );
+  } catch {
+    return new Map<string, CachedEditorProjectCover>();
+  } finally {
+    db?.close();
+  }
+}
diff --git a/src/services/match3dGeneratedModelCache.test.ts b/src/services/match3dGeneratedModelCache.test.ts
index b20ca8aa8..598d03a6a 100644
--- a/src/services/match3dGeneratedModelCache.test.ts
+++ b/src/services/match3dGeneratedModelCache.test.ts
@@ -27,14 +27,29 @@ describe('match3dGeneratedModelCache', () => {
 
   test('预加载生成模型字节并复用本地缓存', async () => {
     setStoredAccessToken('test-access-token', { emit: false });
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([103, 108, 84, 70]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'model/gltf-binary',
-        },
-      }),
-    );
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            read: {
+              signedUrl: 'https://oss.example.com/model.glb',
+              expiresAt: new Date(Date.now() + 60_000).toISOString(),
+            },
+          }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([103, 108, 84, 70]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'model/gltf-binary',
+          },
+        }),
+      );
 
     await preloadMatch3DGeneratedModelAssets(
       [
@@ -61,7 +76,13 @@ describe('match3dGeneratedModelCache', () => {
     );
 
     expect(Array.from(new Uint8Array(bytes))).toEqual([103, 108, 84, 70]);
-    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(2);
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
+      '/api/assets/read-url',
+    );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://oss.example.com/model.glb',
+    );
   });
 
   test('模型源列表会去重并兼容 modelObjectKey', () => {