调整图片编辑器参考图选择交互

- 常规参考图入口改为先弹出来源菜单，支持从画布选择和上传图片。

- 角色规范、图标规范和常规参考图来源菜单统一向上弹出。

- 画布参考图选择拦截普通图层选中逻辑，保持生成面板不隐藏。

- 补充图片编辑器交互测试与技术文档说明。

src/components/image-editor/ImageCanvasGenerationModel.ts

@@ -23,7 +23,9 @@ export const CHARACTER_FRAME_ORIGINAL_SIZE = { width: 2048, height: 2048 };
 export const CHARACTER_FRAME_DISPLAY_SIZE = { width: 420, height: 420 };
 export const ICON_FRAME_ORIGINAL_SIZE = { width: 512, height: 512 };
 export const ICON_FRAME_DISPLAY_SIZE = { width: 360, height: 360 };
-export const DEFAULT_IMAGE_MODEL = 'gpt-image-2';
+export const IMAGE_MODEL_GPT_IMAGE_2 = 'gpt-image-2';
+export const IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
+export const DEFAULT_IMAGE_MODEL = IMAGE_MODEL_NANOBANANA2;
 export const ICON_DESCRIPTION_LIMIT = 100;
 // 图标素材面板按描述项扩宽，避免在画布子面板里做滑动列表。
 export const ICON_DESCRIPTION_CARD_WIDTH_REM = 8.4;
@@ -44,8 +46,20 @@ export const QUICK_EDIT_SIZE_PRESETS = [
   '1024x1536',
 ] as const;
 export const QUICK_EDIT_MODEL_OPTIONS = [
-  { label: 'GPT Image', value: DEFAULT_IMAGE_MODEL },
+  { label: 'nanobanana2', value: IMAGE_MODEL_NANOBANANA2 },
+  { label: 'gpt-image-2', value: IMAGE_MODEL_GPT_IMAGE_2 },
 ] as const;
+export const EDITOR_IMAGE_MODEL_OPTIONS = QUICK_EDIT_MODEL_OPTIONS;
+export const EDITOR_IMAGE_DIMENSION_OPTIONS = {
+  [IMAGE_MODEL_NANOBANANA2]: {
+    aspectRatios: ['1:1', '2:3', '3:2', '9:16', '16:9'],
+    imageSizes: ['0.5K', '1K', '2K'],
+  },
+  [IMAGE_MODEL_GPT_IMAGE_2]: {
+    aspectRatios: ['1:1', '2:3', '3:2', '9:16', '16:9'],
+    imageSizes: ['1K', '2K'],
+  },
+} as const;
 export const CHARACTER_ANIMATION_MODEL = 'seedance2.0';
 export const CHARACTER_ANIMATION_ACTION_PROMPTS = [
   { label: '待机', text: '待机动作，轻微呼吸起伏。' },
@@ -169,17 +183,23 @@ export function buildIconSpecPrompt(values: SpecFormValues) {
 export function buildSpecPrompt(
   type: SpecGenerationType,
   values: SpecFormValues,
+  hasReferenceImage = false,
 ) {
-  if (type === 'character') {
-    return buildCharacterSpecPrompt(values);
+  const prompt =
+    type === 'character'
+      ? buildCharacterSpecPrompt(values)
+      : type === 'ui'
+        ? buildUiSpecPrompt(values)
+        : type === 'icon'
+          ? buildIconSpecPrompt(values)
+          : values.customPrompt.trim();
+  if (!hasReferenceImage) {
+    return prompt;
   }
-  if (type === 'ui') {
-    return buildUiSpecPrompt(values);
-  }
-  if (type === 'icon') {
-    return buildIconSpecPrompt(values);
-  }
-  return values.customPrompt.trim();
+  return [
+    '参考图生成规范：严格参考图1的构图、风格、材质、色彩、形状语言和视觉层级生成本次规范图；参考图只作为美术方向和规范语义依据，不要直接复制参考图中的文字、水印或无关背景。',
+    prompt,
+  ].join('\n');
 }
 
 export function getLayerKindLabel(layer: CanvasLayer) {
@@ -254,11 +274,15 @@ export function buildImageGenerationInputs(prompt: string): CanvasGenerationInpu
 export function buildSpecGenerationInputs(
   specType: SpecGenerationType,
   values: SpecFormValues,
+  reference?: CharacterReferenceImage | null,
 ): CanvasGenerationInputs {
+  const references = reference
+    ? [{ title: '参考图', label: reference.label, src: reference.src }]
+    : [];
   if (specType === 'custom') {
     return {
       fields: createGenerationInputField('自定义规范提示词', values.customPrompt),
-      references: [],
+      references,
     };
   }
 
@@ -274,7 +298,7 @@ export function buildSpecGenerationInputs(
   }
   return {
     fields: baseFields,
-    references: [],
+    references,
   };
 }