From 3a3cc89280e2c4fe29c6debdf0b809b9e908ea4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Tue, 16 Jun 2026 17:06:21 +0800
Subject: [PATCH] Image editor: hide raw Prompt, use Resolution

Remove backend-assembled raw Prompt and copy action from image info; render a lightweight generationInputs snapshot (user panel inputs + reference thumbnails) stored on canvas layers and shown in the image info dialog. Unify canvas display and info to use originalWidth/originalHeight (Resolution) instead of saved Size and hydrate legacy layout width/height only as fallback. Add model/aspectRatio/imageSize options for character/icon generation (frontend state, tests, and client payloads). Increase Axum JSON body limit for character animation endpoint to 12MB for compatibility and prefer submitting persisted objectKey over large Data URLs. Update tests, docs, and related server/frontend code to reflect these behaviors and validations.
---
 .hermes/shared-memory/decision-log.md         |  16 +
 .hermes/shared-memory/pitfalls.md             |   8 +
 .../2026-06-16-editor-image-model-options.md  | 146 +++++++
 ...™¨ã€‘图片信æ�¯ç”Ÿæˆ�输入快照è�½åœ°è®¡åˆ’-2026-06-16.md |  84 ++++
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   8 +-
 ...辑器】画�角色形象生�入�设计-2026-06-15.md |   3 +-
 server-rs/crates/api-server/src/app.rs        |  47 +++
 .../crates/api-server/src/editor_project.rs   |   2 +-
 .../api-server/src/modules/play_flow.rs       |   6 +-
 .../ImageCanvasEditorView.test.tsx            | 345 +++++++++++++---
 .../image-editor/ImageCanvasEditorView.tsx    | 368 +++++++++++++++---
 src/index.css                                 |  47 ++-
 .../image-editor/editorProjectClient.test.ts  |  84 ++++
 .../image-editor/editorProjectClient.ts       |  12 +-
 14 files changed, 1041 insertions(+), 135 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-06-16-editor-image-model-options.md
 create mode 100644 docs/superpowers/plans/�编辑器】图片信�生�输入快照�地计划-2026-06-16.md

diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md
index b8e86e74..5ccebe0e 100644
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -2278,3 +2278,19 @@
 - 影�范围：`src/components/image-editor/ImageCanvasEditorView.tsx`�`src/index.css`�`src/components/image-editor/ImageCanvasEditorView.test.tsx`�图片画布�端技术方案和角色形象生�设计文档。
 - 验�方�：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx`�`npm run typecheck`�`npm run check:encoding`�`git diff --check`。
 - 关�文档：`docs/�编辑器】画�角色形象生�入�设计-2026-06-15.md`�`docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-16 图片画布图片信�页�展示生图 Prompt
+
+- 背景：图片画布中�张生�图片的信�页原�展示 `Prompt` 和�制 Prompt，但该字段�能是�端组装�的生图�示�，�适�作为用户��的图片输入信�。
+- 决策：图片信�页删除生图 Prompt 展示和�制入�，改为展示生�时的用户��输入快照，包括普通生��示��规范表�字段�角色设定�图标素��述�修改�求，以�角色形象规范�常规�考图�图标素�规范和修改�考图等�考图�片。旧数�或上传图片没有输入快照时显示 `-`，�得回退展示内部 Prompt。
+- 影�范围：`src/components/image-editor/ImageCanvasEditorView.tsx`�图片画布 layout snapshot�图片画布技术方案。
+- 验�方�：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx` 应覆盖图片信�页无 `Prompt`�无 `�制Prompt`，并展示普通生��角色生��图标素�和修改结果的输入快照。
+- 关�文档：`docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-16 图片画布按 Resolution 原分辨率显示
+
+- 背景：图片画布图层曾�时维护展示 `Size` 与资� `Resolution`，旧布局快照里的 `width/height` �能把大图缩��图，导致画布视觉和图片信�里的原始分辨率�一致。
+- 决策：图片图层��把独立 `Size` 作为用户��字段或展示真相；画布图层渲染宽高�悬浮尺寸胶囊和图片信�页统一以 `originalWidth/originalHeight`（� `Resolution`）为准。旧 layout 中的 `width/height` �作为缺少 Resolution 时的兼容兜底，��优先决定展示大�。
+- 影�范围：`src/components/image-editor/ImageCanvasEditorView.tsx`�图片画布 layout hydrate�新建 / 上传 / 生� / 快速编辑 / 图标素�生�结果铺回画布逻辑，以�图片画布技术方案。
+- 验�方�：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "hydrates canvas images from Resolution instead of saved Size|opens generated image info from the corner button and creates a real right-side edit result|shows image resolution on hover"`。
+- 关�文档：`docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
diff --git a/.hermes/shared-memory/pitfalls.md b/.hermes/shared-memory/pitfalls.md
index 91a55f9c..0be1a973 100644
--- a/.hermes/shared-memory/pitfalls.md
+++ b/.hermes/shared-memory/pitfalls.md
@@ -39,6 +39,14 @@
 - 验�：`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`。
 
+## 图片编辑器角色动画��默认�交大图 Data URL
+
+- 现象：图片编辑器里对角色图点击 `生�动画` �，�端返回 `Failed to buffer the request body: length limit exceeded`，请求还没进入角色动画 handler。
+- 原因：角色动画生�请求曾把角色图片 `src` 原样作为 `sourceImageSrc` 放进 JSON；角色图如果是较大的 Data URL，会超过 Axum 默认 `2MB` body limit，在 `Json` ��器阶段被拦截。
+- 处�：�端在角色图已�久化时优先�交 `objectKey`，�把 Data URL 作为未�久化本地临时图兜底；�端 `/api/editor/character-animations/generations` �独�置 `12MB` body limit 兼容旧请求，但新链路�应�赖传大图 JSON。
+- 验�：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "only exposes character animation"`；`cargo test -p api-server editor_character_animation_accepts_character_image_body_above_default_limit --manifest-path server-rs/Cargo.toml`。
+- 关�：`src/components/image-editor/ImageCanvasEditorView.tsx`�`server-rs/crates/api-server/src/modules/play_flow.rs`�`server-rs/crates/api-server/src/app.rs`�`docs/�编辑器】画�角色形象生�入�设计-2026-06-15.md`。
+
 ## 图片编辑器生�类���挂到页�级 portal
 
 - 现象：底部 `生�规范` ���角色��里的 `角色形象规范` ����点击��没有弹出�，实际被按钮所在的局部滚动容器挡�了。
diff --git a/docs/superpowers/plans/2026-06-16-editor-image-model-options.md b/docs/superpowers/plans/2026-06-16-editor-image-model-options.md
new file mode 100644
index 00000000..0d0163b3
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-16-editor-image-model-options.md
@@ -0,0 +1,146 @@
+# Editor Image Model Options Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 让图片画布的“生�角色形象�和“生�图标素��支� `nanobanana2` 与 `gpt-image-2`，并按模型�供�法的尺寸比例与大�尺寸选项。
+
+**Architecture:** �端抽出编辑器图片模型�置，生�����存模型�比例�大�三个轻�状�；�端集中归一模型和尺寸组�，角色图与图标 spritesheet 继续走现有 VectorEngine�去背�OSS 和拆分链路。用户模型�好用 localStorage 记�，默认 `nanobanana2`。
+
+**Tech Stack:** React + TypeScript + Vitest；Rust Axum api-server；platform-image VectorEngine provider；Markdown 项目文档。
+
+---
+
+## File Structure
+
+- Modify `C:\Genarrative\src\services\image-editor\editorProjectClient.ts`
+  - 扩展图片生�和图标 spritesheet 请求类型，加入 `aspectRatio` 与 `imageSize`。
+  - 默认图标模型改为 `gemini-3.1-flash-image-preview` 对应的 `nanobanana2`。
+- Modify `C:\Genarrative\src\services\image-editor\editorProjectClient.test.ts`
+  - 先补失败测试：角色 / 图标请求会带模型�比例�大�。
+- Modify `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.tsx`
+  - 增加模型�置�选项归一�localStorage �好�角色 / 图标��字段和�交 payload。
+- Modify `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.test.tsx`
+  - 先补失败测试：默认显示 nanobanana2，切�模型�比例 / 大�选项�更，并在请求中传递。
+- Modify `C:\Genarrative\server-rs\crates\platform-image\src\vector_engine\request.rs`
+  - 让 `512` �被 normalize ��法尺寸，并�留 gpt-image-2 尺寸。
+- Modify `C:\Genarrative\server-rs\crates\platform-image\tests\vector_engine.rs`
+  - 先补失败测试：nanobanana2 0.5K 请求 body �留 `512`。
+- Modify `C:\Genarrative\server-rs\crates\api-server\src\editor_project.rs`
+  - 扩展请求 DTO，集中校验 `nanobanana2 / gpt-image-2` 与尺寸组�。
+  - 角色生�按模型走 with_model 调用；图标生�按模型和组�选择尺寸。
+- Modify docs:
+  - `C:\Genarrative\docs\�编辑器】画�角色形象生�入�设计-2026-06-15.md`
+  - `C:\Genarrative\docs\�编辑器】画�图标素�生�入�设计-2026-06-15.md`
+  - `C:\Genarrative\docs\technical\��端架构】图片画布编辑器MVP接入方案-2026-06-11.md`
+
+---
+
+### Task 1: Client request contract
+
+**Files:**
+- Modify: `C:\Genarrative\src\services\image-editor\editorProjectClient.ts`
+- Test: `C:\Genarrative\src\services\image-editor\editorProjectClient.test.ts`
+
+- [ ] **Step 1: Write failing tests**
+
+Add tests asserting `generateEditorImage` and `generateEditorIconSpritesheet` serialize `model`, `aspectRatio`, and `imageSize` when supplied.
+
+- [ ] **Step 2: Run test to verify failure**
+
+Run: `npm run test -- src/services/image-editor/editorProjectClient.test.ts -t "image model options"`
+Expected: FAIL because payloads do not include `aspectRatio` / `imageSize`.
+
+- [ ] **Step 3: Minimal implementation**
+
+Extend input types and JSON body builders to include optional `aspectRatio` and `imageSize`; change icon default model constant to `gemini-3.1-flash-image-preview` if not already.
+
+- [ ] **Step 4: Verify green**
+
+Run same test command. Expected: PASS.
+
+### Task 2: Frontend panel state and local preference
+
+**Files:**
+- Modify: `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.tsx`
+- Test: `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.test.tsx`
+
+- [ ] **Step 1: Write failing tests**
+
+Add tests for:
+1. opening `生�角色形象` defaults to model `nanobanana2` and shows `尺寸比例` / `大�尺寸`;
+2. switching to `gpt-image-2` limits visible combinations and submits model + mapped size metadata;
+3. icon spritesheet defaults to `nanobanana2` and submits the chosen model.
+
+- [ ] **Step 2: Run test to verify failure**
+
+Run: `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "模型|尺寸比例|大�尺寸"`
+Expected: FAIL because current UI has placeholder model button only.
+
+- [ ] **Step 3: Minimal implementation**
+
+Add model option config, dialog fields `imageModel/aspectRatio/imageSize`, localStorage helpers, option buttons/selects, and submit payload wiring.
+
+- [ ] **Step 4: Verify green**
+
+Run same test command. Expected: PASS.
+
+### Task 3: Backend model and dimension normalization
+
+**Files:**
+- Modify: `C:\Genarrative\server-rs\crates\platform-image\src\vector_engine\request.rs`
+- Modify: `C:\Genarrative\server-rs\crates\api-server\src\editor_project.rs`
+- Test: `C:\Genarrative\server-rs\crates\platform-image\tests\vector_engine.rs`
+- Test: existing unit tests inside `editor_project.rs`
+
+- [ ] **Step 1: Write failing tests**
+
+Add tests covering:
+1. `build_vector_engine_image_request_body_with_model("gemini-3.1-flash-image-preview", ..., "512", ...)` keeps `size = "512"`.
+2. editor character model normalization defaults to nanobanana2 and maps `gpt-image-2 + 2:3 + 1K` to `1024x1536`.
+3. icon spritesheet model normalization accepts both models.
+
+- [ ] **Step 2: Run backend tests to verify failure**
+
+Run:
+`cargo test -p platform-image --manifest-path server-rs/Cargo.toml vector_engine_request_body_can_use_nanobanana2_half_k -- --nocapture`
+`cargo test -p api-server --manifest-path server-rs/Cargo.toml editor_project -- --nocapture`
+Expected: FAIL until normalization functions exist.
+
+- [ ] **Step 3: Minimal implementation**
+
+Add constants and helpers:
+- `EDITOR_IMAGE_MODEL_NANOBANANA2 = "gemini-3.1-flash-image-preview"`
+- `EDITOR_IMAGE_MODEL_GPT_IMAGE_2 = "gpt-image-2"`
+- `normalize_editor_image_model`
+- `normalize_editor_generation_dimensions`
+Use with_model calls for character and icon generation responses.
+
+- [ ] **Step 4: Verify green**
+
+Run the same backend tests. Expected: PASS.
+
+### Task 4: Documentation and final checks
+
+**Files:**
+- Modify docs listed above.
+
+- [ ] **Step 1: Update docs**
+
+Document defaults, user preference, model-specific options, and Apifox source URLs.
+
+- [ ] **Step 2: Run focused verification**
+
+Run:
+`npm run test -- src/services/image-editor/editorProjectClient.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`
+`cargo test -p platform-image --manifest-path server-rs/Cargo.toml vector_engine_request_body_can_use_nanobanana2_half_k -- --nocapture`
+`cargo test -p api-server --manifest-path server-rs/Cargo.toml editor_project -- --nocapture`
+`npm run typecheck -- --pretty false`
+`npm run check:encoding`
+
+---
+
+## Self-Review
+
+- Spec coverage: covers role generation, icon spritesheet generation, default model, user preference, model-specific dimensions, docs.
+- Placeholder scan: no unresolved placeholders.
+- Type consistency: frontend uses `model/aspectRatio/imageSize`; backend DTO mirrors camelCase fields.
diff --git a/docs/superpowers/plans/�编辑器】图片信�生�输入快照�地计划-2026-06-16.md b/docs/superpowers/plans/�编辑器】图片信�生�输入快照�地计划-2026-06-16.md
new file mode 100644
index 00000000..df28af89
--- /dev/null
+++ b/docs/superpowers/plans/�编辑器】图片信�生�输入快照�地计划-2026-06-16.md
@@ -0,0 +1,84 @@
+# 图片信�生�输入快照 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 图片画布编辑器的图片信�页删除生图 Prompt 字段，改为展示图片生�时的��输入快照，包括文本字段和�考图。
+
+**Architecture:** 在 `CanvasLayer` 上新增轻� `generationInputs` �端快照，��存用户��输入和�考图摘�；生��功时从对应��状�构建快照，�画布 layout JSON �久化。图片信�弹窗�读�该快照渲染，�回退显示�端组装 Prompt。
+
+**Tech Stack:** React + TypeScript + Vitest + Testing Library；现有 `UnifiedModal`�平�按钮和图片画布 layout snapshot。
+
+---
+
+### Task 1: 信�弹窗行为测试
+
+**Files:**
+- Test: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.test.tsx`
+
+- [ ] **Step 1: Write the failing tests**
+  - 修改已有图片信�测试，断言弹窗�出现 `Prompt` 和 `�制Prompt`。
+  - 新增普通生�图片测试：生��打开信�页，应显示 `生�输入`�`生��示�` 和用户输入值。
+  - 新增角色生�图片测试：绑定角色规范�考图�生�，信�页应显示 `角色设定`�`角色形象规范` 与�考图�称。
+  - 新增图标素�生�测试：绑定图标素�规范�生�，信�页应显示 `素��述`�具体�述和 `图标素�规范` �考图。
+
+- [ ] **Step 2: Run test to verify it fails**
+  - Run: `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx`
+  - Expected: FAIL because `generationInputs` is not yet implemented and old `Prompt` field still exists.
+
+### Task 2: 生�输入快照模型与�久化
+
+**Files:**
+- Modify: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.tsx`
+
+- [ ] **Step 1: Add minimal types**
+  - Add `CanvasGenerationInputField`, `CanvasGenerationInputReference`, `CanvasGenerationInputs`.
+  - Add optional `generationInputs` to `CanvasLayer`.
+
+- [ ] **Step 2: Serialize and hydrate**
+  - Include `generationInputs` in `serializeLayer`.
+  - Hydrate only trusted shapes: string `title`, string `value`, string `label`, string `src`.
+
+### Task 3: Build snapshots when creating generated layers
+
+**Files:**
+- Modify: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.tsx`
+
+- [ ] **Step 1: Add builders**
+  - `buildGenerationInputsForImagePrompt(prompt)`.
+  - `buildGenerationInputsForSpec(specType, specValues)`.
+  - `buildGenerationInputsForCharacter(prompt, specRef, references)`.
+  - `buildGenerationInputsForIcon(iconDescriptions, iconSpecRef)`.
+  - `buildGenerationInputsForEdit(prompt, sourceLayer)`.
+
+- [ ] **Step 2: Attach snapshots**
+  - Pass `generationInputs` into `addGeneratedResultLayer`, `addQuickEditResultLayer`, and `addIconSpritesheetResultLayers`.
+  - Keep old `prompt/actualPrompt` for backend metadata and backward compatibility, but do not render them in UI.
+
+### Task 4: Render image info without生图 Prompt
+
+**Files:**
+- Modify: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.tsx`
+- Modify: `C:/Genarrative/src/index.css` if existing metadata styles need a reference grid helper.
+
+- [ ] **Step 1: Replace Prompt row**
+  - Remove `Prompt` dt/dd and `�制Prompt` button.
+  - Render `生�输入` row.
+
+- [ ] **Step 2: Render fields and references**
+  - If `generationInputs` has fields, render each field title/value.
+  - If it has references, render thumbnail cards with title and image.
+  - If both empty or absent, render `-`.
+
+### Task 5: Documentation and verification
+
+**Files:**
+- Modify: `C:/Genarrative/docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md`
+
+- [ ] **Step 1: Update documentation**
+  - Add note: image info displays panel input snapshot and references, never assembled generation Prompt.
+
+- [ ] **Step 2: Run verification**
+  - Run: `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx`
+  - Run: `npm run typecheck`
+  - Run: `npm run check:encoding`
+  - Run: `git diff --check`
diff --git a/docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 562834d1..6f9dfa1d 100644
--- a/docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/��端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -12,11 +12,11 @@
 - 编辑器左侧为图片素��，�展开 / 收起；移动端优先��素���折�。
 - 中央画布支�背景拖拽平移�滚轮缩放�缩放百分比���显示所有元素和固定比例缩放。
 - 画布左下角�供 Lovart �状�控件：背景色圆点�素� / 图层入���地图开关；�地图显示图层缩略分布和当�视�框，点击�地图执行显示所有元素。
-- 画布中的图片�展示�悬浮显示图片尺寸与边框，点击�在图片上方显示浮动工具�。
+- 画布中的图片�展示�悬浮显示图片 Resolution 尺寸与边框，点击�在图片上方显示浮动工具�；图片��维护独立展示 `Size` 字段，画布显示宽高统一� `originalWidth/originalHeight`（图片信�中的 `Resolution`）。
 - 默认工具为选择模�；底部工具�采用 AI 画布工作�工具组：选择�抓手�上传�生��局部修改 / 蒙版�文字�形状 / 标注�导出。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模�，�开���原工具。
 - 图片拖拽时显示水平 / 垂直�附�考线，�附到其它图层或画�的边缘与中心线。
-- 生�资��上角显示元数�按钮，点击打开独立元数�窗�。
+- 生�资��上角显示元数�按钮，点击打开独立元数�窗�。图片信�页�展示�端组装�的生图 Prompt，也��供�制 Prompt；�展示该图片生�时用户在��里�交的输入快照，包括普通生��示��规范表�字段�角色设定�图标素��述�修改�求，以�角色形象规范 / 常规�考图 / 图标素�规范 / 修改�考图等�考图�片。旧数�或上传图片没有输入快照时显示 `-`，�止回退展示内部 Prompt。
 - 对生�资�执行修改时，在�侧创建新的生�结果图层，并自动调整视图显示原图和新图。
 - 图片生� / 修改统一� api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生�走 `/api/editor/images/generations`，基于当�生�图的修改走 `/api/editor/images/edits`。纯文本生�入�采用 Lovart �画布内��图 + 锚定生�输入框：点击生�工具�先在画布中心创建选中的�色��框，输入框跟���框显示；待生��生�中和失败��留的��图都必须继续支�拖动，生�完�时真实生�图�在最新��框�置，输入框继续跟�新生�图；点击所有图片生�入�并确认请求开始�，必须��对应设置��，��留画布内��图或原图预览，并在预览上显示 Lovart �生�中�罩，��“������或“预览一起消失�。快速编辑和修改图片在调用�端�必须把当�图层图片�读�为图片 Data URL，���以是本地上传 Data URL�站内 public 图片�历� `/generated-*` 路径或�读�的 OSS generated URL；�端��接收图片 Data URL，�把普通 URL 直接�传到 VectorEngine edits。�端��有 provider 密钥；上游失败或�置缺失时��当�生�设置��展示失败，�创建 mock �功图。
 - 底部生�类按钮�次点击都必须创建独立的画布生�对象；新建规范�角色形象或图标素�时，�切�当�编辑��，�得销�此�尚未生�或已生��的其它生�对象状�。归档为�当�编辑对象的生�����拖动�删除和等待异步完�，完� / 失败回写必须按生�对象 ID 读�最新��状�，�能使用�交瞬间的旧快照。
@@ -41,7 +41,7 @@
 - `editor_project_resource` 表�存工程画布引用过的资�快照：`resourceId`�`projectId`�`ownerUserId`�OSS / asset object 引用�图片尺寸���类型�prompt�actualPrompt�model�provider�taskId�sourceResourceId�创建时间和更新时间。上传素�被拖入画布时会�制为 project resource，图层�引用 resourceId。
 - 图片文件本体继续走 OSS，�览器读��有 generated 对象�� `/api/assets/read-url` �签。
 - 当� MVP 的本地上传先以 data URL �久化在素�记录中，��刷新和跨项目��；�续接入正� OSS 上传时，�替� `imageSrc/objectKey/assetObjectId` 的写入方�，账�级素�表和画布资�表��。
-- 资�表��存资�元数�；图层�置�尺寸�缩放�层级�分组选中所需 ID 和 groupId �存在 `editor_canvas` 的布局 JSON。图层组第一版是画布内布局语义，��独建表。
+- 资�表��存资�元数�；图层�置�层级�分组选中所需 ID 和 groupId �存在 `editor_canvas` 的布局 JSON。图层展示尺寸��作为独立 `Size` 真相�存，刷新与新建图层�按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，��独建表。
 - �端�直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
 - 未登录用户�以使用本地演示�，但�触�工程自动�存；真实图片生� / 修改需�登录。编辑器 API 请求�许使用 refresh cookie �默补 access token，但 401 / 403 �在编辑器局部�示登录，�清空整站登录�，也�把�端 requestId 直接作为生图弹窗主文案。
 
@@ -85,7 +85,7 @@
 - 生�工具点击�显示画布内 `Image Generator` ��框和跟���框的生�输入框，生�失败�留��和输入状�，生��功�在���置创建真实图层，并让输入框继续跟�该生�图。
 - 生�类入�打开画布内��时，底部 AI 工具�必须����；`生�规范`�角色 / 图标规范��这类轻���通过页�级 fixed portal 渲染，�能留在底部工具�或�考图横�滚动容器内部，��被局部 `overflow` �切。
 - 点击生��生�规范�生�角色形象或生�图标素��创建的��图�继续�留；点击画布空白区域让当�图片或��图失焦时，关闭当�生���并移除图片选中样�，但�删除��图本身。
-- 生�资�显示元数�按钮，元数�窗�展示���prompt�model�provider�task�尺寸和 OSS 引用。
+- 生�资�显示元数�按钮，元数�窗�展示���生�输入快照�model�provider�task�Resolution 和 OSS 引用；生�输入快照�包�用户��输入和�考图，�包��端拼接 Prompt，��展示独立 Size 字段。
 - 修改生�资��，�侧出现新生�结果图层，并自动 fit 原图 + 新图。
 - 快速编辑站内 public 示例图�历� generated 图或 OSS generated 图时，�端先读�� `data:image/*;base64,...` ��交，�端�得�收到 `/creation-type-references/*`�`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
 - 素�文件夹�以新建�折���命�和删除；删除普通文件夹�，其素�移动到“项目素��。
diff --git a/docs/�编辑器】画�角色形象生�入�设计-2026-06-15.md b/docs/�编辑器】画�角色形象生�入�设计-2026-06-15.md
index e359270a..de46aec8 100644
--- a/docs/�编辑器】画�角色形象生�入�设计-2026-06-15.md
+++ b/docs/�编辑器】画�角色形象生�入�设计-2026-06-15.md
@@ -104,8 +104,9 @@
 ### Prompt 与生�契约
 
 - �端�交到 `POST /api/editor/character-animations/generations`。
-- 请求必须带上角色图片���原始尺寸�动画�述�分辨率�画�比例�帧数和时长。
+- 请求必须带上角色图片���原始尺寸�动画�述�分辨率�画�比例�帧数和时长。角色图片已��久化到 OSS 时，`sourceImageSrc` 必须优先传 `objectKey`；�有未�久化的本地临时图片��许传 Data URL。
 - �端使用角色图片作为首帧和尾帧�考，模型固定映射到 seedance2.0 对应�端模型。
+- �端路由兼容旧 Data URL 请求并�独放宽 JSON body limit 到 `12MB`，但该���作为兼容兜底，�作为新链路默认传大图的方�。
 - �端 prompt 使用以下固定骨架，并把��输入追加到 `动作�述：` �：
 
 ```text
diff --git a/server-rs/crates/api-server/src/app.rs b/server-rs/crates/api-server/src/app.rs
index d840369e..b70568e9 100644
--- a/server-rs/crates/api-server/src/app.rs
+++ b/server-rs/crates/api-server/src/app.rs
@@ -1469,6 +1469,53 @@ mod tests {
         assert!(!body_text.contains("length limit exceeded"));
     }
 
+    #[tokio::test]
+    async fn editor_character_animation_accepts_character_image_body_above_default_limit() {
+        let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
+        let source_image_src = format!("data:image/png;base64,{}", "A".repeat(3 * 1024 * 1024));
+        let request_body = serde_json::json!({
+            "sourceLayerId": "layer-character-large",
+            "sourceImageSrc": source_image_src,
+            "sourceWidth": 1024,
+            "sourceHeight": 1024,
+            "promptText": "待机呼�循环。",
+            "resolution": "480p",
+            "ratio": "same",
+            "frameCount": 32,
+            "durationSeconds": 4,
+            "priceMudPoints": 40,
+            "model": "seedance2.0"
+        })
+        .to_string();
+        assert!(request_body.len() > 2 * 1024 * 1024);
+
+        let response = app
+            .oneshot(
+                Request::builder()
+                    .method("POST")
+                    .uri("/api/editor/character-animations/generations")
+                    .header("content-type", "application/json")
+                    .body(Body::from(request_body))
+                    .expect("request should build"),
+            )
+            .await
+            .expect("request should succeed");
+
+        assert_eq!(response.status(), StatusCode::SERVICE_UNAVAILABLE);
+        let body = response
+            .into_body()
+            .collect()
+            .await
+            .expect("response body should collect")
+            .to_bytes();
+        let body_text = String::from_utf8_lossy(&body);
+        assert!(
+            body_text.contains("ARK_CHARACTER_VIDEO_BASE_URL"),
+            "handler should parse the oversized character source image before checking Ark config: {body_text}"
+        );
+        assert!(!body_text.contains("length limit exceeded"));
+    }
+
     #[tokio::test]
     async fn password_entry_rejects_unknown_phone_without_registration() {
         let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 0181a071..5e002c9a 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -1251,7 +1251,7 @@ fn build_editor_icon_spritesheet_prompt(icon_descriptions: &[String]) -> String
 
 fn build_editor_character_image_prompt(role_setting: &str) -> String {
     vec![
-        "基于图1的角色美术视觉规范指导生�游�角色形象图。画�中心构图，角色主体完整置于画�中央，�止镜头�视，�止特写。背景固定为纯绿色绿幕，�作为抠�底色，�止生�美术视觉规范�出现建筑�室内布景�风景�地��具�漂浮物�烟雾�事元素�文字或其他角色以外的场景内容。".to_string(),
+        "严格基于图1的角色美术视觉规范指导中的美术风格�角色头身比�角色��等特�生�游�角色形象图。画�中心构图，角色主体完整置于画�中央，�止镜头�视，�止特写。背景固定为纯绿色绿幕，�作为抠�底色，�止生�美术视觉规范�出现建筑�室内布景�风景�地��具�漂浮物�烟雾�事元素�文字或其他角色以外的场景内容。".to_string(),
         format!("角色设定：{}", role_setting.trim()),
     ]
     .join("\n")
diff --git a/server-rs/crates/api-server/src/modules/play_flow.rs b/server-rs/crates/api-server/src/modules/play_flow.rs
index 283717dc..bc800e29 100644
--- a/server-rs/crates/api-server/src/modules/play_flow.rs
+++ b/server-rs/crates/api-server/src/modules/play_flow.rs
@@ -49,6 +49,7 @@ use crate::{
 };
 
 const HYPER3D_IMAGE_TO_MODEL_BODY_LIMIT_BYTES: usize = 56 * 1024 * 1024;
+const EDITOR_CHARACTER_ANIMATION_BODY_LIMIT_BYTES: usize = 12 * 1024 * 1024;
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub(crate) struct PlayFlowDomainAdapter {
@@ -455,7 +456,10 @@ fn play_flow_support_router(state: AppState) -> Router<AppState> {
         )
         .route(
             "/api/editor/character-animations/generations",
-            post(generate_editor_character_animation),
+            post(generate_editor_character_animation).layer(DefaultBodyLimit::max(
+                // 中文注释：画�角色动画首版�兼容角色图 Data URL 入�，��大于 Axum 默认 2MB 的角色图在 handler �被拦截。
+                EDITOR_CHARACTER_ANIMATION_BODY_LIMIT_BYTES,
+            )),
         )
         .route(
             "/api/assets/character-animation/jobs/{task_id}",
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 3c8cdc7f..378e7742 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -66,29 +66,6 @@ function dispatchPointerEvent(
   fireEvent(target, event);
 }
 
-function mockClipboard() {
-  const originalClipboard = Object.getOwnPropertyDescriptor(
-    navigator,
-    'clipboard',
-  );
-  const writeText = vi.fn().mockResolvedValue(undefined);
-  Object.defineProperty(navigator, 'clipboard', {
-    configurable: true,
-    value: { writeText },
-  });
-
-  return {
-    writeText,
-    restore: () => {
-      if (originalClipboard) {
-        Object.defineProperty(navigator, 'clipboard', originalClipboard);
-      } else {
-        delete (navigator as unknown as { clipboard?: Clipboard }).clipboard;
-      }
-    },
-  };
-}
-
 describe('ImageCanvasEditorView', () => {
   beforeEach(() => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValue({
@@ -557,14 +534,14 @@ describe('ImageCanvasEditorView', () => {
     expect(within(batchToolbar).getByText(/已选 2/u)).toBeTruthy();
   });
 
-  it('shows image size on hover and placeholder toolbar after selecting a layer', () => {
+  it('shows image resolution on hover and placeholder toolbar after selecting a layer', () => {
     const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
     render(<ImageCanvasEditorView />);
 
     const canvasImage = screen.getByAltText('画布图片：拼图素�');
     fireEvent.mouseEnter(canvasImage.closest('button')!);
 
-    const sizeBadge = screen.getByText('420 x 420 px');
+    const sizeBadge = screen.getByText('640 x 640 px');
     expect(sizeBadge.className).toContain('rounded-full');
     expect(sizeBadge.className).toContain('image-canvas-editor__size-badge');
 
@@ -612,10 +589,14 @@ describe('ImageCanvasEditorView', () => {
     const infoPanel = screen.getByRole('dialog', { name: '拼图素�图片信�' });
     expect(within(infoPanel).getByText('图片类型')).toBeTruthy();
     expect(within(infoPanel).getByText('上传图片')).toBeTruthy();
-    expect(within(infoPanel).getByText('Prompt')).toBeTruthy();
+    expect(within(infoPanel).getByText('生�输入')).toBeTruthy();
+    expect(
+      infoPanel.querySelector('.image-canvas-editor__metadata-inputs')
+        ?.textContent,
+    ).toBe('-');
+    expect(within(infoPanel).queryByText('Prompt')).toBeNull();
     expect(within(infoPanel).getByText('Model')).toBeTruthy();
-    expect(within(infoPanel).getByText('Size')).toBeTruthy();
-    expect(within(infoPanel).getByText('420 x 420 px')).toBeTruthy();
+    expect(within(infoPanel).queryByText('Size')).toBeNull();
     expect(within(infoPanel).getByText('Resolution')).toBeTruthy();
     expect(within(infoPanel).getByText('640 x 640 px')).toBeTruthy();
     expect(
@@ -624,6 +605,53 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '修改图片' })).toBeNull();
   });
 
+  it('hydrates canvas images from Resolution instead of saved Size', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-resolution',
+      title: '原分辨率画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-resolution',
+          resourceId: 'resource-resolution',
+          title: '旧布局图片',
+          src: 'data:image/png;base64,cmVzb2x1dGlvbg==',
+          x: 120,
+          y: 140,
+          width: 320,
+          height: 240,
+          originalWidth: 1536,
+          originalHeight: 1024,
+          zIndex: 2,
+          sourceType: 'generated',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'resolution-task-1',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-16T00:00:00.000Z',
+    });
+    render(<ImageCanvasEditorView />);
+
+    const canvasImage = await screen.findByAltText('画布图片：旧布局图片');
+    const canvasLayer = canvasImage.closest('button') as HTMLElement;
+    expect(Number.parseFloat(canvasLayer.style.width)).toBe(1536);
+    expect(Number.parseFloat(canvasLayer.style.height)).toBe(1024);
+
+    fireEvent.mouseEnter(canvasLayer);
+    expect(screen.getByText('1536 x 1024 px')).toBeTruthy();
+    fireEvent.click(
+      screen.getAllByRole('button', { name: '查看旧布局图片图片信�' })[0]!,
+    );
+    const infoPanel = screen.getByRole('dialog', {
+      name: '旧布局图片图片信�',
+    });
+    expect(within(infoPanel).queryByText('Size')).toBeNull();
+    expect(within(infoPanel).getByText('Resolution')).toBeTruthy();
+    expect(within(infoPanel).getByText('1536 x 1024 px')).toBeTruthy();
+  });
+
   it('deletes the selected layer from the floating toolbar', () => {
     render(<ImageCanvasEditorView />);
 
@@ -795,9 +823,7 @@ describe('ImageCanvasEditorView', () => {
     ).toBeTruthy();
 
     fireEvent.click(screen.getByRole('menuitem', { name: '缩放至100%' }));
-    expect(
-      screen.getByRole('button', { name: '当�缩放比例 100%' }),
-    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: /当�缩放比例 \d+%/u })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '当�缩放比例 100%' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '缩放至50%' }));
@@ -1117,6 +1143,18 @@ describe('ImageCanvasEditorView', () => {
       name: /查看生�图片 .*图片信�/,
     });
     expect(metadataButtons[0]).toBeTruthy();
+    fireEvent.click(metadataButtons[0]!);
+
+    const infoPanel = screen.getByRole('dialog', {
+      name: /生�图片 .*图片信�/,
+    });
+    expect(within(infoPanel).queryByText('Prompt')).toBeNull();
+    expect(
+      within(infoPanel).queryByRole('button', { name: '�制Prompt' }),
+    ).toBeNull();
+    expect(within(infoPanel).getByText('生�输入')).toBeTruthy();
+    expect(within(infoPanel).getByText('生��示�')).toBeTruthy();
+    expect(within(infoPanel).getByText('一张明亮的拼图主视觉')).toBeTruthy();
   });
 
   it('drags the generation placeholder and places the generated layer there', async () => {
@@ -1163,6 +1201,13 @@ describe('ImageCanvasEditorView', () => {
         .top,
     );
     expect(draggedComposerTop).toBeGreaterThan(initialComposerTop);
+    const draggedFrame = screen.getByLabelText('图�生���图') as HTMLElement;
+    const draggedFrameCenterX =
+      Number.parseFloat(draggedFrame.style.left) +
+      Number.parseFloat(draggedFrame.style.width) / 2;
+    const draggedFrameCenterY =
+      Number.parseFloat(draggedFrame.style.top) +
+      Number.parseFloat(draggedFrame.style.height) / 2;
     fireEvent.change(screen.getByLabelText('生��示�'), {
       target: { value: '拖拽�的生�图' },
     });
@@ -1186,11 +1231,13 @@ describe('ImageCanvasEditorView', () => {
     );
     expect(screen.queryByLabelText('图�生���图')).toBeNull();
     expect(
-      Number.parseFloat((generatedLayer as HTMLElement).style.left),
-    ).toBeGreaterThan(300);
+      Number.parseFloat((generatedLayer as HTMLElement).style.left) +
+        Number.parseFloat((generatedLayer as HTMLElement).style.width) / 2,
+    ).toBeCloseTo(draggedFrameCenterX, 1);
     expect(
-      Number.parseFloat((generatedLayer as HTMLElement).style.top),
-    ).toBeGreaterThan(180);
+      Number.parseFloat((generatedLayer as HTMLElement).style.top) +
+        Number.parseFloat((generatedLayer as HTMLElement).style.height) / 2,
+    ).toBeCloseTo(draggedFrameCenterY, 1);
   });
 
   it('keeps the generation placeholder draggable while the image is generating', async () => {
@@ -1264,11 +1311,21 @@ describe('ImageCanvasEditorView', () => {
       .getByAltText(/画布图片：生�图片/)
       .closest('button')!;
     expect(
-      Number.parseFloat((generatedLayer as HTMLElement).style.left),
-    ).toBeGreaterThan(initialLeft);
+      Number.parseFloat((generatedLayer as HTMLElement).style.left) +
+        Number.parseFloat((generatedLayer as HTMLElement).style.width) / 2,
+    ).toBeCloseTo(
+      Number.parseFloat((draggedFrame as HTMLElement).style.left) +
+        Number.parseFloat((draggedFrame as HTMLElement).style.width) / 2,
+      1,
+    );
     expect(
-      Number.parseFloat((generatedLayer as HTMLElement).style.top),
-    ).toBeGreaterThan(initialTop);
+      Number.parseFloat((generatedLayer as HTMLElement).style.top) +
+        Number.parseFloat((generatedLayer as HTMLElement).style.height) / 2,
+    ).toBeCloseTo(
+      Number.parseFloat((draggedFrame as HTMLElement).style.top) +
+        Number.parseFloat((draggedFrame as HTMLElement).style.height) / 2,
+      1,
+    );
   });
 
   it('hides the generation composer when selecting another image but keeps the placeholder', () => {
@@ -1677,6 +1734,116 @@ describe('ImageCanvasEditorView', () => {
     });
   });
 
+  it('defaults character and icon generation to nanobanana2 model options', async () => {
+    render(<ImageCanvasEditorView />);
+    await screen.findByAltText('画布图片：拼图素�');
+
+    fireEvent.click(screen.getByRole('button', { name: '生�角色形象' }));
+    const characterPanel = screen.getByRole('dialog', {
+      name: '生�角色形象',
+    });
+    expect(within(characterPanel).getByText('尺寸比例')).toBeTruthy();
+    expect(within(characterPanel).getByText('大�尺寸')).toBeTruthy();
+    expect(
+      (within(characterPanel).getByLabelText('角色模型') as HTMLSelectElement)
+        .selectedOptions[0]?.textContent,
+    ).toBe('nanobanana2');
+    expect(
+      (
+        within(characterPanel).getByLabelText(
+          '角色尺寸比例',
+        ) as HTMLSelectElement
+      ).value,
+    ).toBe('1:1');
+    expect(
+      (
+        within(characterPanel).getByLabelText(
+          '角色大�尺寸',
+        ) as HTMLSelectElement
+      ).value,
+    ).toBe('1K');
+    expect(
+      Array.from(
+        (
+          within(characterPanel).getByLabelText(
+            '角色尺寸比例',
+          ) as HTMLSelectElement
+        ).options,
+      ).map((option) => option.value),
+    ).toContain('1:8');
+
+    fireEvent.click(screen.getByRole('button', { name: '生�图标素�' }));
+    const iconPanel = screen.getByRole('dialog', { name: '生�图标素�' });
+    expect(
+      (within(iconPanel).getByLabelText('图标模型') as HTMLSelectElement)
+        .selectedOptions[0]?.textContent,
+    ).toBe('nanobanana2');
+    expect(
+      (within(iconPanel).getByLabelText('图标大�尺寸') as HTMLSelectElement)
+        .value,
+    ).toBe('1K');
+  });
+
+  it('remembers the edited image model and submits character dimension options', async () => {
+    generateEditorImageMock.mockResolvedValueOnce({
+      imageSrc: 'data:image/png;base64,character-model-options',
+      width: 1024,
+      height: 1536,
+      sourceType: 'generated',
+      prompt: '高个�游侠',
+      actualPrompt: '高个�游侠',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'character-model-options-1',
+    });
+    render(<ImageCanvasEditorView />);
+    await screen.findByAltText('画布图片：拼图素�');
+
+    fireEvent.click(screen.getByRole('button', { name: '生�角色形象' }));
+    const characterPanel = screen.getByRole('dialog', {
+      name: '生�角色形象',
+    });
+    fireEvent.change(within(characterPanel).getByLabelText('角色模型'), {
+      target: { value: 'gpt-image-2' },
+    });
+    expect(
+      Array.from(
+        (
+          within(characterPanel).getByLabelText(
+            '角色尺寸比例',
+          ) as HTMLSelectElement
+        ).options,
+      ).map((option) => option.value),
+    ).not.toContain('1:8');
+    fireEvent.change(within(characterPanel).getByLabelText('角色尺寸比例'), {
+      target: { value: '2:3' },
+    });
+    fireEvent.change(within(characterPanel).getByLabelText('角色大�尺寸'), {
+      target: { value: '1K' },
+    });
+    fireEvent.change(within(characterPanel).getByLabelText('角色设定'), {
+      target: { value: '高个�游侠' },
+    });
+    fireEvent.click(within(characterPanel).getByRole('button', { name: '生�' }));
+
+    await waitFor(() => {
+      expect(generateEditorImageMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          kind: 'character',
+          model: 'gpt-image-2',
+          aspectRatio: '2:3',
+          imageSize: '1K',
+        }),
+      );
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '生�图标素�' }));
+    const iconPanel = screen.getByRole('dialog', { name: '生�图标素�' });
+    expect(
+      (within(iconPanel).getByLabelText('图标模型') as HTMLSelectElement).value,
+    ).toBe('gpt-image-2');
+  });
+
   it('keeps the bottom AI toolbar visible while generation panels are open', () => {
     render(<ImageCanvasEditorView />);
 
@@ -1806,12 +1973,16 @@ describe('ImageCanvasEditorView', () => {
     const generatedLayer = screen
       .getByAltText(/画布图片：生�图片/)
       .closest('button') as HTMLElement;
+    const expectedLayerLeft =
+      movedLeft + Number.parseFloat((movedFrame as HTMLElement).style.width) / 2 - 512;
+    const expectedLayerTop =
+      movedTop + Number.parseFloat((movedFrame as HTMLElement).style.height) / 2 - 512;
     expect(Number.parseFloat(generatedLayer.style.left)).toBeCloseTo(
-      movedLeft,
+      expectedLayerLeft,
       1,
     );
     expect(Number.parseFloat(generatedLayer.style.top)).toBeCloseTo(
-      movedTop,
+      expectedLayerTop,
       1,
     );
     expect(screen.getByLabelText('角色生���图')).toBeTruthy();
@@ -2133,6 +2304,26 @@ describe('ImageCanvasEditorView', () => {
       expect(screen.getByAltText(/画布图片：角色形象/u)).toBeTruthy();
     });
     expect(screen.getByText('角色')).toBeTruthy();
+    fireEvent.click(
+      screen.getAllByRole('button', {
+        name: /查看角色形象 .*图片信�/u,
+      })[0]!,
+    );
+    const characterInfoPanel = screen.getByRole('dialog', {
+      name: /角色形象 .*图片信�/u,
+    });
+    expect(within(characterInfoPanel).queryByText('Prompt')).toBeNull();
+    expect(within(characterInfoPanel).getByText('生�输入')).toBeTruthy();
+    expect(within(characterInfoPanel).getByText('角色设定')).toBeTruthy();
+    expect(
+      within(characterInfoPanel).getByText(
+        '银�游侠，�色披风，弓箭手，适��素风战棋。',
+      ),
+    ).toBeTruthy();
+    expect(within(characterInfoPanel).getByText('角色形象规范')).toBeTruthy();
+    expect(within(characterInfoPanel).getByText('拼图素�')).toBeTruthy();
+    expect(within(characterInfoPanel).getByText('常规�考图 1')).toBeTruthy();
+    expect(within(characterInfoPanel).getByText('常规�考.png')).toBeTruthy();
     await waitFor(() => {
       expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
         'editor-project-default',
@@ -2338,6 +2529,20 @@ describe('ImageCanvasEditorView', () => {
     });
     expect(screen.queryByLabelText('图标素�生���图')).toBeNull();
     expect(screen.getAllByText('图标')).toHaveLength(2);
+    fireEvent.click(
+      screen.getAllByRole('button', { name: '查看返回按钮图片信�' })[0]!,
+    );
+    const iconInfoPanel = screen.getByRole('dialog', {
+      name: '返回按钮图片信�',
+    });
+    expect(within(iconInfoPanel).queryByText('Prompt')).toBeNull();
+    expect(within(iconInfoPanel).getByText('生�输入')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('素��述 1')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('素��述 2')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('返回按钮')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('设置按钮')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('图标素�规范')).toBeTruthy();
+    expect(within(iconInfoPanel).getByText('清爽按钮图标规范')).toBeTruthy();
     await waitFor(() => {
       expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
         'editor-project-icons',
@@ -2398,6 +2603,8 @@ describe('ImageCanvasEditorView', () => {
           originalHeight: 1024,
           zIndex: 2,
           sourceType: 'generated',
+          objectKey:
+            'generated-character-drafts/editor/character-images/source/image.png',
           assetKind: 'character',
         },
         {
@@ -2514,7 +2721,8 @@ describe('ImageCanvasEditorView', () => {
     expect(generateEditorCharacterAnimationMock).toHaveBeenCalledWith(
       expect.objectContaining({
         sourceLayerId: 'layer-character',
-        sourceImageSrc: 'data:image/png;base64,character',
+        sourceImageSrc:
+          'generated-character-drafts/editor/character-images/source/image.png',
         sourceWidth: 1024,
         sourceHeight: 1024,
         resolution: '720p',
@@ -2628,10 +2836,10 @@ describe('ImageCanvasEditorView', () => {
     const generatedLayer = screen
       .getByAltText('画布图片：魔法森林 快速编辑')
       .closest('button') as HTMLElement;
-    expect(Number.parseFloat(generatedLayer.style.left)).toBe(472);
+    expect(Number.parseFloat(generatedLayer.style.left)).toBe(1688);
     expect(Number.parseFloat(generatedLayer.style.top)).toBe(140);
-    expect(Number.parseFloat(generatedLayer.style.width)).toBe(320);
-    expect(Number.parseFloat(generatedLayer.style.height)).toBe(240);
+    expect(Number.parseFloat(generatedLayer.style.width)).toBe(1536);
+    expect(Number.parseFloat(generatedLayer.style.height)).toBe(1024);
     await waitFor(() => {
       expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
         'editor-project-quick-edit',
@@ -2640,11 +2848,11 @@ describe('ImageCanvasEditorView', () => {
             expect.objectContaining({
               title: '魔法森林 快速编辑',
               assetKind: 'spec',
-              width: 320,
-              height: 240,
+              width: 1536,
+              height: 1024,
               originalWidth: 1536,
               originalHeight: 1024,
-              x: 472,
+              x: 1688,
               y: 140,
             }),
           ]),
@@ -2940,8 +3148,7 @@ describe('ImageCanvasEditorView', () => {
     ).toBeNull();
   });
 
-  it('opens generated image info from the corner button, copies Prompt and creates a real right-side edit result', async () => {
-    const clipboard = mockClipboard();
+  it('opens generated image info from the corner button and creates a real right-side edit result', async () => {
     generateEditorImageMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
       width: 1024,
@@ -2975,13 +3182,17 @@ describe('ImageCanvasEditorView', () => {
     await waitFor(() => {
       expect(screen.getByAltText(/画布图片：生�图片/)).toBeTruthy();
     });
+    const generatedLayer = screen
+      .getByAltText(/画布图片：生�图片/)
+      .closest('button') as HTMLElement;
+    expect(Number.parseFloat(generatedLayer.style.width)).toBe(1024);
+    expect(Number.parseFloat(generatedLayer.style.height)).toBe(1024);
     expect(screen.getByRole('dialog', { name: '生�图片' })).toBeTruthy();
 
     const metadataCornerButton = screen.getAllByRole('button', {
       name: /查看生�图片 .*图片信�/,
     })[0];
     if (!metadataCornerButton) {
-      clipboard.restore();
       throw new Error('metadata corner button should exist');
     }
     expect(metadataCornerButton.className).toContain('bg-black/55');
@@ -2996,21 +3207,18 @@ describe('ImageCanvasEditorView', () => {
     expect(metadataDialog).toBeTruthy();
     expect(within(metadataDialog).getByText('图片类型')).toBeTruthy();
     expect(within(metadataDialog).getByText('生�图片')).toBeTruthy();
-    expect(within(metadataDialog).getByText('Prompt')).toBeTruthy();
+    expect(within(metadataDialog).queryByText('Prompt')).toBeNull();
+    expect(
+      within(metadataDialog).queryByRole('button', { name: '�制Prompt' }),
+    ).toBeNull();
+    expect(within(metadataDialog).getByText('生�输入')).toBeTruthy();
+    expect(within(metadataDialog).getByText('生��示�')).toBeTruthy();
     expect(within(metadataDialog).getByText('一张�修改的生�图')).toBeTruthy();
     expect(within(metadataDialog).getByText('Model')).toBeTruthy();
     expect(within(metadataDialog).getByText('gpt-image-2')).toBeTruthy();
-    expect(within(metadataDialog).getByText('Size')).toBeTruthy();
-    expect(within(metadataDialog).getByText('420 x 420 px')).toBeTruthy();
+    expect(within(metadataDialog).queryByText('Size')).toBeNull();
     expect(within(metadataDialog).getByText('Resolution')).toBeTruthy();
     expect(within(metadataDialog).getByText('1024 x 1024 px')).toBeTruthy();
-    fireEvent.click(
-      within(metadataDialog).getByRole('button', { name: '�制Prompt' }),
-    );
-    await waitFor(() => {
-      expect(clipboard.writeText).toHaveBeenCalledWith('一张�修改的生�图');
-    });
-    clipboard.restore();
 
     fireEvent.click(screen.getByRole('button', { name: '修改图片' }));
     const editDialog = screen.getByRole('dialog', { name: '修改图片' });
@@ -3037,9 +3245,22 @@ describe('ImageCanvasEditorView', () => {
       expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();
     });
     expect(screen.getByAltText(/画布图片：生�图片 .* 修改结果/)).toBeTruthy();
+    fireEvent.click(
+      screen.getAllByRole('button', {
+        name: /查看生�图片 .* 修改结果图片信�/u,
+      })[0]!,
+    );
+    const editedMetadataDialog = screen.getByRole('dialog', {
+      name: /生�图片 .* 修改结果图片信�/u,
+    });
+    expect(within(editedMetadataDialog).queryByText('Prompt')).toBeNull();
+    expect(within(editedMetadataDialog).getByText('修改�求')).toBeTruthy();
+    expect(within(editedMetadataDialog).getByText('把画�改�黄�光线')).toBeTruthy();
+    expect(within(editedMetadataDialog).getByText('�考图')).toBeTruthy();
     expect(
-      screen.getByRole('button', { name: '当�缩放比例 100%' }),
+      within(editedMetadataDialog).getByText(/^生�图片 \d+$/u),
     ).toBeTruthy();
+    expect(screen.getByRole('button', { name: /当�缩放比例 \d+%/u })).toBeTruthy();
   });
 
   it('hides the edit image panel after generation starts while keeping the source preview visible', async () => {
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 06598364..735f3e15 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -111,6 +111,22 @@ type EditorAsset = {
   assetObjectId?: string;
 };
 
+type CanvasGenerationInputField = {
+  title: string;
+  value: string;
+};
+
+type CanvasGenerationInputReference = {
+  title: string;
+  label: string;
+  src: string;
+};
+
+type CanvasGenerationInputs = {
+  fields: CanvasGenerationInputField[];
+  references: CanvasGenerationInputReference[];
+};
+
 type CanvasLayer = {
   id: string;
   resourceId: string;
@@ -134,6 +150,7 @@ type CanvasLayer = {
   sourceResourceId?: string | null;
   groupId?: string | null;
   assetKind?: 'spec' | 'character' | 'icon' | 'icon-spec' | null;
+  generationInputs?: CanvasGenerationInputs | null;
 };
 
 type CanvasViewport = {
@@ -383,8 +400,8 @@ const INITIAL_LAYERS: CanvasLayer[] = [
     src: '/creation-type-references/puzzle.webp',
     x: 470,
     y: 300,
-    width: 420,
-    height: 420,
+    width: 640,
+    height: 640,
     originalWidth: 640,
     originalHeight: 640,
     zIndex: 1,
@@ -397,8 +414,8 @@ const INITIAL_LAYERS: CanvasLayer[] = [
     src: '/creation-type-references/big-fish.webp',
     x: 930,
     y: 360,
-    width: 420,
-    height: 236,
+    width: 720,
+    height: 405,
     originalWidth: 720,
     originalHeight: 405,
     zIndex: 2,
@@ -544,6 +561,18 @@ function formatImageSizeValue(width: number, height: number) {
   return `${safeWidth}x${safeHeight}`;
 }
 
+function resolveLayerResolutionSize(
+  originalWidth: number,
+  originalHeight: number,
+  fallback: { width: number; height: number },
+) {
+  // 中文注释：画布��维护独立展示 Size，图片显示尺寸统一跟�图片原始 Resolution。
+  return {
+    width: Math.max(1, Math.round(originalWidth || fallback.width || 1)),
+    height: Math.max(1, Math.round(originalHeight || fallback.height || 1)),
+  };
+}
+
 function buildQuickEditSizeOptions(currentSize: string) {
   return Array.from(new Set([currentSize, ...QUICK_EDIT_SIZE_PRESETS]));
 }
@@ -565,10 +594,11 @@ function createLayerFromAsset(
   viewport: CanvasViewport,
   screenCenter: { x: number; y: number },
 ): CanvasLayer {
-  const longestSide = Math.max(asset.width, asset.height);
-  const sizeRatio = longestSide > 0 ? 360 / longestSide : 1;
-  const width = Math.round(asset.width * sizeRatio);
-  const height = Math.round(asset.height * sizeRatio);
+  const { width, height } = resolveLayerResolutionSize(
+    asset.width,
+    asset.height,
+    { width: 360, height: 360 },
+  );
   const worldCenterX = (screenCenter.x - viewport.x) / viewport.scale;
   const worldCenterY = (screenCenter.y - viewport.y) / viewport.scale;
   const offset = index * 34;
@@ -620,6 +650,7 @@ function serializeLayer(layer: CanvasLayer): EditorProjectLayerSnapshot {
     sourceResourceId: layer.sourceResourceId,
     groupId: layer.groupId,
     assetKind: layer.assetKind,
+    generationInputs: layer.generationInputs,
   };
 }
 
@@ -643,10 +674,18 @@ function hydrateLayer(
     src,
     x: numberFromSnapshot(snapshot.x, 0),
     y: numberFromSnapshot(snapshot.y, 0),
-    width: numberFromSnapshot(snapshot.width, 320),
-    height: numberFromSnapshot(snapshot.height, 320),
-    originalWidth: numberFromSnapshot(snapshot.originalWidth, 320),
-    originalHeight: numberFromSnapshot(snapshot.originalHeight, 320),
+    ...(() => {
+      const originalWidth = numberFromSnapshot(snapshot.originalWidth, 320);
+      const originalHeight = numberFromSnapshot(snapshot.originalHeight, 320);
+      return {
+        ...resolveLayerResolutionSize(originalWidth, originalHeight, {
+          width: numberFromSnapshot(snapshot.width, 320),
+          height: numberFromSnapshot(snapshot.height, 320),
+        }),
+        originalWidth,
+        originalHeight,
+      };
+    })(),
     zIndex: numberFromSnapshot(snapshot.zIndex, 1),
     sourceType: isCanvasSourceType(snapshot.sourceType)
       ? snapshot.sourceType
@@ -661,6 +700,7 @@ function hydrateLayer(
     sourceResourceId: stringOrNull(snapshot.sourceResourceId),
     groupId: stringOrNull(snapshot.groupId),
     assetKind: canvasAssetKindOrNull(snapshot.assetKind),
+    generationInputs: generationInputsOrNull(snapshot.generationInputs),
   };
 }
 
@@ -717,6 +757,45 @@ function stringOrNull(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : null;
 }
 
+function generationInputsOrNull(value: unknown): CanvasGenerationInputs | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const snapshot = value as {
+    fields?: unknown;
+    references?: unknown;
+  };
+  const fields = Array.isArray(snapshot.fields)
+    ? snapshot.fields.flatMap((field) => {
+        if (!field || typeof field !== 'object') {
+          return [];
+        }
+        const item = field as { title?: unknown; value?: unknown };
+        const title = stringOrNull(item.title);
+        const fieldValue = stringOrNull(item.value);
+        return title && fieldValue ? [{ title, value: fieldValue }] : [];
+      })
+    : [];
+  const references = Array.isArray(snapshot.references)
+    ? snapshot.references.flatMap((reference) => {
+        if (!reference || typeof reference !== 'object') {
+          return [];
+        }
+        const item = reference as {
+          title?: unknown;
+          label?: unknown;
+          src?: unknown;
+        };
+        const title = stringOrNull(item.title);
+        const label = stringOrNull(item.label);
+        const src = stringOrNull(item.src);
+        return title && label && src ? [{ title, label, src }] : [];
+      })
+    : [];
+
+  return fields.length || references.length ? { fields, references } : null;
+}
+
 function canvasAssetKindOrNull(value: unknown): CanvasLayer['assetKind'] {
   return value === 'spec' ||
     value === 'character' ||
@@ -821,6 +900,11 @@ function calculateCharacterAnimationPrice(
   return (resolution === '720p' ? 20 : 10) * durationSeconds;
 }
 
+function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
+  // 中文注释：角色图已�久化到 OSS 时优先传 objectKey，��把大 Data URL 塞进 JSON 请求体触� body limit。
+  return layer.objectKey?.trim() || layer.src;
+}
+
 function createCanvasLayerReference(
   layer: CanvasLayer,
 ): CharacterReferenceImage {
@@ -831,6 +915,110 @@ function createCanvasLayerReference(
   };
 }
 
+function createGenerationInputField(
+  title: string,
+  value: string | null | undefined,
+): CanvasGenerationInputField[] {
+  const normalizedValue = value?.trim();
+  return normalizedValue ? [{ title, value: normalizedValue }] : [];
+}
+
+function buildImageGenerationInputs(prompt: string): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField('生��示�', prompt),
+    references: [],
+  };
+}
+
+function buildSpecGenerationInputs(
+  specType: SpecGenerationType,
+  values: SpecFormValues,
+): CanvasGenerationInputs {
+  if (specType === 'custom') {
+    return {
+      fields: createGenerationInputField('自定义规范�示�', values.customPrompt),
+      references: [],
+    };
+  }
+
+  const baseFields = [
+    ...createGenerationInputField('玩法设定', values.playSetting),
+    ...createGenerationInputField('美术风格', values.artStyle),
+  ];
+  if (specType === 'character') {
+    baseFields.push(
+      ...createGenerationInputField('头身比', values.bodyRatio),
+      ...createGenerationInputField('角色视角', values.characterView),
+    );
+  }
+  return {
+    fields: baseFields,
+    references: [],
+  };
+}
+
+function buildCharacterGenerationInputs(
+  prompt: string,
+  specReference: CharacterReferenceImage | null | undefined,
+  references: CharacterReferenceImage[] | undefined,
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField('角色设定', prompt),
+    references: [
+      ...(specReference
+        ? [
+            {
+              title: '角色形象规范',
+              label: specReference.label,
+              src: specReference.src,
+            },
+          ]
+        : []),
+      ...(references ?? []).map((reference, index) => ({
+        title: `常规�考图 ${index + 1}`,
+        label: reference.label,
+        src: reference.src,
+      })),
+    ],
+  };
+}
+
+function buildIconGenerationInputs(
+  iconDescriptions: string[],
+  specReference: CharacterReferenceImage,
+): CanvasGenerationInputs {
+  return {
+    fields: iconDescriptions.map((description, index) => ({
+      title: `素��述 ${index + 1}`,
+      value: description,
+    })),
+    references: [
+      {
+        title: '图标素�规范',
+        label: specReference.label,
+        src: specReference.src,
+      },
+    ],
+  };
+}
+
+function buildEditGenerationInputs(
+  title: '修改�求' | '快速编辑�示�',
+  prompt: string,
+  sourceLayer: CanvasLayer,
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField(title, prompt),
+    references: [
+      {
+        title: '�考图',
+        label: sourceLayer.title,
+        src: sourceLayer.src,
+      },
+    ],
+  };
+}
+
 function buildPortalMenuStyle(
   anchor: HTMLElement | null,
   placement: 'above' | 'below',
@@ -2408,10 +2596,11 @@ export function ImageCanvasEditorView() {
       uploadedImage.onload = () => {
         const originalWidth = uploadedImage.naturalWidth || fallbackWidth;
         const originalHeight = uploadedImage.naturalHeight || fallbackHeight;
-        const longestSide = Math.max(originalWidth, originalHeight);
-        const sizeRatio = longestSide > 0 ? Math.min(1, 420 / longestSide) : 1;
-        const width = Math.round(originalWidth * sizeRatio);
-        const height = Math.round(originalHeight * sizeRatio);
+        const { width, height } = resolveLayerResolutionSize(
+          originalWidth,
+          originalHeight,
+          { width: fallbackWidth, height: fallbackHeight },
+        );
         if (options.addToCanvas) {
           setLayers((currentLayers) =>
             currentLayers.map((layer) =>
@@ -2672,19 +2861,28 @@ export function ImageCanvasEditorView() {
       assetKind?: CanvasLayer['assetKind'];
       title?: string;
       dialogId?: string;
+      generationInputs?: CanvasGenerationInputs;
     } = {},
   ) => {
     layerCounterRef.current += 1;
     const generatedIndex = layerCounterRef.current;
     const originalWidth = generated.width || 1024;
     const originalHeight = generated.height || 1024;
-    const longestSide = Math.max(originalWidth, originalHeight);
-    const sizeRatio = longestSide > 0 ? Math.min(1, 420 / longestSide) : 1;
-    const width = options.frame?.width ?? Math.round(originalWidth * sizeRatio);
-    const height =
-      options.frame?.height ?? Math.round(originalHeight * sizeRatio);
+    const { width, height } = resolveLayerResolutionSize(
+      originalWidth,
+      originalHeight,
+      { width: 1024, height: 1024 },
+    );
     const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
     const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
+    const frameX =
+      options.frame && options.frame.width > 0
+        ? options.frame.x + options.frame.width / 2 - width / 2
+        : undefined;
+    const frameY =
+      options.frame && options.frame.height > 0
+        ? options.frame.y + options.frame.height / 2 - height / 2
+        : undefined;
     const nextLayer: CanvasLayer = {
       id: options.sourceLayer
         ? `layer-edit-${generatedIndex}`
@@ -2698,10 +2896,10 @@ export function ImageCanvasEditorView() {
       src: generated.imageSrc,
       x: options.sourceLayer
         ? options.sourceLayer.x + options.sourceLayer.width + 32
-        : (options.frame?.x ?? worldCenterX - width / 2),
+        : (frameX ?? worldCenterX - width / 2),
       y: options.sourceLayer
         ? options.sourceLayer.y
-        : (options.frame?.y ?? worldCenterY - height / 2),
+        : (frameY ?? worldCenterY - height / 2),
       width,
       height,
       originalWidth,
@@ -2717,6 +2915,7 @@ export function ImageCanvasEditorView() {
       objectKey: generated.objectKey,
       assetObjectId: generated.assetObjectId,
       sourceResourceId: options.sourceLayer?.resourceId,
+      generationInputs: options.generationInputs,
     };
 
     setLayers((currentLayers) => [...currentLayers, nextLayer]);
@@ -2748,9 +2947,20 @@ export function ImageCanvasEditorView() {
   const addQuickEditResultLayer = (
     generated: EditorImageGenerationResult,
     sourceLayer: CanvasLayer,
+    generationInputs: CanvasGenerationInputs,
   ) => {
     layerCounterRef.current += 1;
     const generatedIndex = layerCounterRef.current;
+    const originalWidth = generated.width || sourceLayer.originalWidth || 1024;
+    const originalHeight = generated.height || sourceLayer.originalHeight || 1024;
+    const { width, height } = resolveLayerResolutionSize(
+      originalWidth,
+      originalHeight,
+      {
+        width: sourceLayer.width,
+        height: sourceLayer.height,
+      },
+    );
     const nextLayer: CanvasLayer = {
       id: `layer-quick-edit-${generatedIndex}`,
       resourceId: `local-resource-quick-edit-${generatedIndex}`,
@@ -2758,10 +2968,10 @@ export function ImageCanvasEditorView() {
       src: generated.imageSrc,
       x: sourceLayer.x + sourceLayer.width + 32,
       y: sourceLayer.y,
-      width: sourceLayer.width,
-      height: sourceLayer.height,
-      originalWidth: sourceLayer.originalWidth,
-      originalHeight: sourceLayer.originalHeight,
+      width,
+      height,
+      originalWidth,
+      originalHeight,
       zIndex: generatedIndex + 10,
       sourceType: generated.sourceType,
       prompt: generated.prompt,
@@ -2774,6 +2984,7 @@ export function ImageCanvasEditorView() {
       sourceResourceId: sourceLayer.resourceId,
       groupId: sourceLayer.groupId,
       assetKind: sourceLayer.assetKind,
+      generationInputs,
     };
 
     setLayers((currentLayers) => [...currentLayers, nextLayer]);
@@ -2788,6 +2999,7 @@ export function ImageCanvasEditorView() {
   const addIconSpritesheetResultLayers = (
     generated: EditorIconSpritesheetGenerationResult,
     iconResults: EditorIconSpritesheetIconResult[],
+    generationInputs: CanvasGenerationInputs,
     frame?: GenerateDialogState['placeholder'],
     dialogId?: string,
   ) => {
@@ -2809,10 +3021,11 @@ export function ImageCanvasEditorView() {
     iconResults.forEach((icon) => {
       const originalWidth = icon.width || 128;
       const originalHeight = icon.height || 128;
-      const longestSide = Math.max(originalWidth, originalHeight);
-      const sizeRatio = longestSide > 0 ? Math.min(1, 128 / longestSide) : 1;
-      const width = Math.round(originalWidth * sizeRatio);
-      const height = Math.round(originalHeight * sizeRatio);
+      const { width, height } = resolveLayerResolutionSize(
+        originalWidth,
+        originalHeight,
+        { width: 128, height: 128 },
+      );
       if (cursorX > startX && cursorX + width - startX > maxRowWidth) {
         cursorX = startX;
         cursorY += rowHeight + spacing;
@@ -2840,6 +3053,7 @@ export function ImageCanvasEditorView() {
         provider: generated.provider,
         taskId: generated.taskId,
         assetKind: 'icon',
+        generationInputs,
       });
 
       cursorX += width + spacing;
@@ -2951,6 +3165,7 @@ export function ImageCanvasEditorView() {
       addIconSpritesheetResultLayers(
         generated,
         generated.iconImageSrcs,
+        buildIconGenerationInputs(iconDescriptions, dialog.iconSpecReference),
         getGeneratingDialogPlaceholder(dialog),
         canvasDialog.id,
       );
@@ -2988,7 +3203,15 @@ export function ImageCanvasEditorView() {
         model: quickEditPanel.model,
         referenceImageSrcs: [referenceImageSrc],
       });
-      addQuickEditResultLayer(generated, quickEditSourceLayer);
+      addQuickEditResultLayer(
+        generated,
+        quickEditSourceLayer,
+        buildEditGenerationInputs(
+          '快速编辑�示�',
+          normalizedPrompt,
+          quickEditSourceLayer,
+        ),
+      );
     } catch (error) {
       setQuickEditPanel({
         ...quickEditPanel,
@@ -3035,7 +3258,14 @@ export function ImageCanvasEditorView() {
           prompt: normalizedPrompt,
           sourceImageSrc: referenceImageSrc,
         });
-        addGeneratedResultLayer(generated, { sourceLayer });
+        addGeneratedResultLayer(generated, {
+          sourceLayer,
+          generationInputs: buildEditGenerationInputs(
+            '修改�求',
+            normalizedPrompt,
+            sourceLayer,
+          ),
+        });
       } else if (dialog.mode === 'spec') {
         const specType = dialog.specType ?? 'custom';
         const specValues =
@@ -3052,6 +3282,7 @@ export function ImageCanvasEditorView() {
           assetKind: specType === 'icon' ? 'icon-spec' : 'spec',
           title: `${SPEC_TYPE_LABEL[specType]} ${layerCounterRef.current + 1}`,
           dialogId: canvasDialog?.id,
+          generationInputs: buildSpecGenerationInputs(specType, specValues),
         });
       } else if (dialog.mode === 'character') {
         const referenceImageSrcs = [
@@ -3070,6 +3301,11 @@ export function ImageCanvasEditorView() {
           assetKind: 'character',
           title: `角色形象 ${layerCounterRef.current + 1}`,
           dialogId: canvasDialog?.id,
+          generationInputs: buildCharacterGenerationInputs(
+            normalizedPrompt,
+            dialog.characterSpecReference,
+            dialog.characterReferences,
+          ),
         });
       } else {
         const generated = await generateEditorImage({
@@ -3078,6 +3314,7 @@ export function ImageCanvasEditorView() {
         addGeneratedResultLayer(generated, {
           frame: getGeneratingDialogPlaceholder(dialog),
           dialogId: canvasDialog?.id,
+          generationInputs: buildImageGenerationInputs(normalizedPrompt),
         });
       }
     } catch (error) {
@@ -3688,7 +3925,9 @@ export function ImageCanvasEditorView() {
     try {
       const result = await generateEditorCharacterAnimation({
         sourceLayerId: characterAnimationSourceLayer.id,
-        sourceImageSrc: characterAnimationSourceLayer.src,
+        sourceImageSrc: resolveCharacterAnimationSourceImageSrc(
+          characterAnimationSourceLayer,
+        ),
         sourceWidth: characterAnimationSourceLayer.originalWidth,
         sourceHeight: characterAnimationSourceLayer.originalHeight,
         promptText,
@@ -4298,8 +4537,8 @@ export function ImageCanvasEditorView() {
                         size="xs"
                         className="image-canvas-editor__size-badge"
                       >
-                        {Math.round(layer.width)} x {Math.round(layer.height)}{' '}
-                        px
+                        {Math.round(layer.originalWidth)} x{' '}
+                        {Math.round(layer.originalHeight)} px
                       </PlatformPillBadge>
                     ) : null}
                     {layerGeneratingLabel ? (
@@ -5846,24 +6085,42 @@ export function ImageCanvasEditorView() {
           <dl className="image-canvas-editor__metadata-grid">
             <dt>图片类型</dt>
             <dd>{formatLayerImageType(metadataLayer)}</dd>
-            <dt>Prompt</dt>
-            <dd className="image-canvas-editor__metadata-prompt">
-              {metadataLayer.prompt ? (
+            <dt>生�输入</dt>
+            <dd className="image-canvas-editor__metadata-inputs">
+              {metadataLayer.generationInputs?.fields.length ||
+              metadataLayer.generationInputs?.references.length ? (
                 <>
-                  <span>{metadataLayer.prompt}</span>
-                  <PlatformActionButton
-                    type="button"
-                    tone="secondary"
-                    size="xs"
-                    className="image-canvas-editor__metadata-copy"
-                    onClick={() => {
-                      void navigator.clipboard?.writeText(
-                        metadataLayer.prompt ?? '',
-                      );
-                    }}
-                  >
-                    �制Prompt
-                  </PlatformActionButton>
+                  {metadataLayer.generationInputs.fields.map((field) => (
+                    <div
+                      key={`${field.title}-${field.value}`}
+                      className="image-canvas-editor__metadata-input-field"
+                    >
+                      <span className="image-canvas-editor__metadata-input-title">
+                        {field.title}
+                      </span>
+                      <span>{field.value}</span>
+                    </div>
+                  ))}
+                  {metadataLayer.generationInputs.references.length ? (
+                    <div className="image-canvas-editor__metadata-reference-list">
+                      {metadataLayer.generationInputs.references.map(
+                        (reference) => (
+                          <div
+                            key={`${reference.title}-${reference.label}-${reference.src}`}
+                            className="image-canvas-editor__metadata-reference-card"
+                          >
+                            <img src={reference.src} alt="" aria-hidden="true" />
+                            <span className="image-canvas-editor__metadata-reference-copy">
+                              <span className="image-canvas-editor__metadata-input-title">
+                                {reference.title}
+                              </span>
+                              <span>{reference.label}</span>
+                            </span>
+                          </div>
+                        ),
+                      )}
+                    </div>
+                  ) : null}
                 </>
               ) : (
                 '-'
@@ -5871,11 +6128,6 @@ export function ImageCanvasEditorView() {
             </dd>
             <dt>Model</dt>
             <dd>{metadataLayer.model ?? '-'}</dd>
-            <dt>Size</dt>
-            <dd>
-              {Math.round(metadataLayer.width)} x{' '}
-              {Math.round(metadataLayer.height)} px
-            </dd>
             <dt>Resolution</dt>
             <dd>
               {metadataLayer.originalWidth} x {metadataLayer.originalHeight} px
diff --git a/src/index.css b/src/index.css
index 132daf9f..16b7781e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5205,18 +5205,53 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-weight: 760;
 }
 
-.image-canvas-editor__metadata-prompt {
+.image-canvas-editor__metadata-inputs {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.42rem;
 }
 
-.image-canvas-editor__metadata-copy {
-  cursor: pointer;
-  border: 1px solid rgba(148, 163, 184, 0.28);
-  background: #ffffff;
-  color: #334155;
+.image-canvas-editor__metadata-input-field {
+  display: grid;
+  gap: 0.16rem;
+}
+
+.image-canvas-editor__metadata-input-title {
+  color: #64748b;
+  font-size: 0.7rem;
+  font-weight: 820;
+}
+
+.image-canvas-editor__metadata-reference-list {
+  display: grid;
+  width: 100%;
+  gap: 0.42rem;
+}
+
+.image-canvas-editor__metadata-reference-card {
+  display: grid;
+  grid-template-columns: 2.4rem minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  border: 1px solid rgba(148, 163, 184, 0.26);
+  border-radius: 0.65rem;
+  background: rgba(248, 250, 252, 0.92);
+  padding: 0.38rem;
+}
+
+.image-canvas-editor__metadata-reference-card img {
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 0.48rem;
+  object-fit: cover;
+}
+
+.image-canvas-editor__metadata-reference-copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
 }
 
 @media (max-width: 760px) {
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index c7c07d5d..d3b5eb00 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -567,6 +567,48 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('passes image model options to editor image generation', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      imageSrc: 'data:image/png;base64,character',
+      width: 1024,
+      height: 1536,
+      sourceType: 'generated',
+      prompt: '角色设定',
+      actualPrompt: '角色设定',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'vector-character-1',
+    });
+
+    await generateEditorImage({
+      prompt: '角色设定',
+      kind: 'character',
+      model: 'gpt-image-2',
+      aspectRatio: '2:3',
+      imageSize: '1K',
+    });
+
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/images/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: '角色设定',
+          kind: 'character',
+          model: 'gpt-image-2',
+          aspectRatio: '2:3',
+          imageSize: '1K',
+        }),
+      }),
+      '生�图片失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('generates icon spritesheets through the dedicated backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       spritesheetImageSrc: 'data:image/png;base64,sheet',
@@ -614,6 +656,48 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('passes image model options to icon spritesheet generation', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      spritesheetImageSrc: 'data:image/png;base64,sheet',
+      spritesheetWidth: 1024,
+      spritesheetHeight: 1024,
+      iconImageSrcs: [],
+      prompt: '图标素� prompt',
+      actualPrompt: '图标素� prompt',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'icon-spritesheet-task-2',
+    });
+
+    await generateEditorIconSpritesheet({
+      referenceImageSrc: 'data:image/png;base64,spec',
+      iconDescriptions: ['返回按钮'],
+      model: 'gpt-image-2',
+      aspectRatio: '1:1',
+      imageSize: '2K',
+    });
+
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/icon-spritesheets/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          referenceImageSrc: 'data:image/png;base64,spec',
+          iconDescriptions: ['返回按钮'],
+          model: 'gpt-image-2',
+          aspectRatio: '1:1',
+          imageSize: '2K',
+        }),
+      }),
+      '生�图标素�失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('passes spec generation size and kind to the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,spec',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 884f3c10..3a463435 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -8,7 +8,7 @@ const EDITOR_ICON_SPRITESHEET_GENERATION_API =
   '/api/editor/icon-spritesheets/generations';
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
-const EDITOR_ICON_SPRITESHEET_MODEL = 'gemini-3.1-flash-image-preview';
+const EDITOR_IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 const DEFAULT_PROJECT_TITLE = '未命�画布';
 const EDITOR_PROJECT_REQUEST_OPTIONS = {
   clearAuthOnUnauthorized: false,
@@ -89,6 +89,8 @@ export type EditorImageGenerationInput = {
   size?: string;
   kind?: 'spec' | 'character' | 'quick-edit';
   model?: string;
+  aspectRatio?: string;
+  imageSize?: string;
   referenceImageSrcs?: string[];
 };
 
@@ -96,6 +98,8 @@ export type EditorIconSpritesheetGenerationInput = {
   referenceImageSrc: string;
   iconDescriptions: string[];
   model?: string;
+  aspectRatio?: string;
+  imageSize?: string;
 };
 
 export type EditorImageEditInput = {
@@ -477,6 +481,8 @@ export async function generateEditorImage(input: EditorImageGenerationInput) {
       ...(input.size ? { size: input.size } : {}),
       ...(input.kind ? { kind: input.kind } : {}),
       ...(input.model ? { model: input.model } : {}),
+      ...(input.aspectRatio ? { aspectRatio: input.aspectRatio } : {}),
+      ...(input.imageSize ? { imageSize: input.imageSize } : {}),
       ...(input.referenceImageSrcs?.length
         ? { referenceImageSrcs: input.referenceImageSrcs }
         : {}),
@@ -500,7 +506,9 @@ export async function generateEditorIconSpritesheet(
     jsonRequest('POST', {
       referenceImageSrc: input.referenceImageSrc,
       iconDescriptions: input.iconDescriptions,
-      model: input.model?.trim() || EDITOR_ICON_SPRITESHEET_MODEL,
+      model: input.model?.trim() || EDITOR_IMAGE_MODEL_NANOBANANA2,
+      ...(input.aspectRatio ? { aspectRatio: input.aspectRatio } : {}),
+      ...(input.imageSize ? { imageSize: input.imageSize } : {}),
     }),
     '生�图标素�失败',
     {