From 6d964937dbaa24cfbcd29917120daeee9ea6a7cc Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Wed, 17 Jun 2026 21:49:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=BB=E5=B8=83=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E9=9D=A2=E6=9D=BF=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

补齐普通生图参考图来源菜单和画布选择流程

接入UI设计图与视频生成面板的提交链路

让生成引用上传目标支持多种生成面板

统一图片信息弹窗断言并补充相关测试

修复图标按钮浮层锚点ref与视频生成类型契约
---
 src/components/common/PlatformIconButton.tsx  |  33 ++-
 ...CanvasBasicGenerationComposerView.test.tsx |   2 +-
 ...ImageCanvasBasicGenerationComposerView.tsx |  96 ++++++--
 ...CanvasEditorGenerationIntegration.test.tsx |  16 +-
 .../ImageCanvasEditorShellView.test.tsx       |   2 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |   5 +-
 .../ImageCanvasEditorView.test.tsx            |   6 +-
 .../image-editor/ImageCanvasEditorView.tsx    |  20 ++
 .../ImageCanvasGenerationComposerView.tsx     | 224 +++++++++++++++++-
 .../ImageCanvasGenerationDialogModel.ts       |  64 +++++
 .../ImageCanvasGenerationSubmissionModel.ts   |  83 ++++++-
 ...CanvasIconSpritesheetComposerView.test.tsx |   7 +-
 ...mageCanvasSpecGenerationPanelView.test.tsx |   4 +-
 .../ImageCanvasSpecGenerationPanelView.tsx    | 150 ++++++++++--
 .../image-editor/ImageCanvasUploadModel.ts    |  25 +-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  59 +++++
 .../useImageCanvasGenerationSurface.test.tsx  |   7 +-
 .../useImageCanvasGenerationSurface.tsx       |  31 +++
 .../useImageCanvasGenerationWorkflow.test.tsx |   2 +-
 .../useImageCanvasGenerationWorkflow.ts       |  94 +++++++-
 .../useImageCanvasUploadWorkflow.ts           |  69 ++++++
 21 files changed, 914 insertions(+), 85 deletions(-)

diff --git a/src/components/common/PlatformIconButton.tsx b/src/components/common/PlatformIconButton.tsx
index 2f567136..4cf90c7f 100644
--- a/src/components/common/PlatformIconButton.tsx
+++ b/src/components/common/PlatformIconButton.tsx
@@ -1,9 +1,11 @@
+import { forwardRef } from 'react';
 import type {
   ButtonHTMLAttributes,
   HTMLAttributes,
   KeyboardEvent,
   LabelHTMLAttributes,
   ReactNode,
+  Ref,
 } from 'react';
 
 type PlatformIconButtonBaseProps = {
@@ -52,16 +54,22 @@ type PlatformIconButtonProps =
  * 平台通用图标动作按钮。
  * 统一承接纯图标动作、图标上传 label 和带短标签的浮动图标动作。
  */
-export function PlatformIconButton({
-  label,
-  icon,
-  children,
-  variant = 'platformIcon',
-  title,
-  className,
-  asChild,
-  ...actionProps
-}: PlatformIconButtonProps) {
+export const PlatformIconButton = forwardRef<
+  HTMLButtonElement | HTMLLabelElement | HTMLSpanElement,
+  PlatformIconButtonProps
+>(function PlatformIconButton(
+  {
+    label,
+    icon,
+    children,
+    variant = 'platformIcon',
+    title,
+    className,
+    asChild,
+    ...actionProps
+  },
+  ref,
+) {
   const variantClassName = {
     platformIcon: 'platform-icon-button',
     surfaceFloating:
@@ -78,6 +86,7 @@ export function PlatformIconButton({
     return (
       <label
         {...(actionProps as LabelHTMLAttributes<HTMLLabelElement>)}
+        ref={ref as Ref<HTMLLabelElement>}
         title={title}
         className={actionClassName}
       >
@@ -112,6 +121,7 @@ export function PlatformIconButton({
     return (
       <span
         {...spanProps}
+        ref={ref as Ref<HTMLSpanElement>}
         aria-disabled={disabled}
         aria-label={label}
         className={actionClassName}
@@ -133,6 +143,7 @@ export function PlatformIconButton({
   return (
     <button
       {...buttonProps}
+      ref={ref as Ref<HTMLButtonElement>}
       type={type}
       aria-label={label}
       title={title}
@@ -142,4 +153,4 @@ export function PlatformIconButton({
       {children}
     </button>
   );
-}
+});
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
index 39861f18..212a5029 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx
@@ -77,7 +77,7 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
     expect(screen.getByLabelText('当前提示词').textContent).toBe('新的提示');
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
-    expect(requestUpload).toHaveBeenCalledWith('asset');
+    expect(requestUpload).not.toHaveBeenCalled();
     expect(submitGeneration).toHaveBeenCalledWith(
       expect.objectContaining({ prompt: '新的提示', status: 'idle' }),
     );
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 913597dd..003e1420 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -1,7 +1,17 @@
 import { ChevronDown, ImageIcon, X } from 'lucide-react';
-import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
@@ -9,14 +19,23 @@ import { PlatformTextField } from '../common/PlatformTextField';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type {
   GenerateDialogState,
-  UploadTarget,
 } from './ImageCanvasEditorTypes';
 
 type ImageCanvasBasicGenerationComposerViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
-  onRequestUpload: (target: UploadTarget) => void;
+  generationReferenceButtonRef?: RefObject<HTMLButtonElement | null>;
+  isGenerationReferenceMenuOpen?: boolean;
+  setIsGenerationReferenceMenuOpen?: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas?: Dispatch<SetStateAction<boolean>>;
+  renderEditorPortal?: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle?: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
+  onRequestUpload: (target: 'generation-reference') => void;
+  onToggleReferenceMenu?: () => void;
   onSubmit: (dialog: GenerateDialogState) => void;
   onClose: () => void;
 };
@@ -37,30 +56,39 @@ export function ImageCanvasBasicGenerationComposerView({
   dialog,
   style,
   setGenerateDialog,
+  generationReferenceButtonRef,
+  isGenerationReferenceMenuOpen = false,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  renderEditorPortal = (node) => node,
+  buildPortalMenuStyle = () => ({}),
   onRequestUpload,
+  onToggleReferenceMenu,
   onSubmit,
   onClose,
 }: ImageCanvasBasicGenerationComposerViewProps) {
   return (
-    <form
-      className="image-canvas-editor__generation-composer"
-      style={style}
-      role="dialog"
-      aria-label="生成图片"
-      onPointerDown={(event) => event.stopPropagation()}
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (dialog.status !== 'generating') {
-          onSubmit(dialog);
-        }
-      }}
-    >
+    <>
+      <form
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        style={style}
+        role="dialog"
+        aria-label="生成图片"
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (dialog.status !== 'generating') {
+            onSubmit(dialog);
+          }
+        }}
+      >
       <PlatformIconButton
+        ref={generationReferenceButtonRef}
         variant="surfaceFloating"
         className="image-canvas-editor__generation-ref"
         label="添加参考图"
         disabled={dialog.status === 'generating'}
-        onClick={() => onRequestUpload('asset')}
+        onClick={() => onToggleReferenceMenu?.()}
         icon={<ImageIcon className="h-4 w-4" />}
       >
         <span>参考图</span>
@@ -146,6 +174,38 @@ export function ImageCanvasBasicGenerationComposerView({
         disabled={dialog.status === 'generating'}
         onClick={onClose}
       />
-    </form>
+      </form>
+      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="参考图来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(false);
+                  onRequestUpload('generation-reference');
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 08059010..6577a72d 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -173,9 +173,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(metadataButtons[0]).toBeTruthy();
     fireEvent.click(metadataButtons[0]!);
 
-    const infoPanel = screen.getByRole('dialog', {
-      name: /生成图片 .*图片信息/,
-    });
+    const infoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(infoPanel).queryByText('Prompt')).toBeNull();
     expect(
       within(infoPanel).queryByRole('button', { name: '复制Prompt' }),
@@ -1452,7 +1450,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       })[0]!,
     );
     const characterInfoPanel = screen.getByRole('dialog', {
-      name: /角色形象 .*图片信息/u,
+      name: '图片信息',
     });
     expect(within(characterInfoPanel).queryByText('Prompt')).toBeNull();
     expect(within(characterInfoPanel).getByText('生成输入')).toBeTruthy();
@@ -1679,9 +1677,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     fireEvent.click(
       screen.getAllByRole('button', { name: '查看返回按钮图片信息' })[0]!,
     );
-    const iconInfoPanel = screen.getByRole('dialog', {
-      name: '返回按钮图片信息',
-    });
+    const iconInfoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(iconInfoPanel).queryByText('Prompt')).toBeNull();
     expect(within(iconInfoPanel).getByText('生成输入')).toBeTruthy();
     expect(within(iconInfoPanel).getByText('素材描述 1')).toBeTruthy();
@@ -2216,9 +2212,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     fireEvent.click(metadataCornerButton);
 
-    const metadataDialog = screen.getByRole('dialog', {
-      name: /生成图片 .*图片信息/,
-    });
+    const metadataDialog = screen.getByRole('dialog', { name: '图片信息' });
     expect(metadataDialog).toBeTruthy();
     expect(within(metadataDialog).getByText('图片类型')).toBeTruthy();
     expect(within(metadataDialog).getByText('生成图片')).toBeTruthy();
@@ -2266,7 +2260,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       })[0]!,
     );
     const editedMetadataDialog = screen.getByRole('dialog', {
-      name: /生成图片 .* 修改结果图片信息/u,
+      name: '图片信息',
     });
     expect(within(editedMetadataDialog).queryByText('Prompt')).toBeNull();
     expect(within(editedMetadataDialog).getByText('修改要求')).toBeTruthy();
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 06234ede..dc89bdf5 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -225,7 +225,7 @@ describe('ImageCanvasEditorShellView', () => {
     expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
     expect(screen.getByLabelText('画布工作区')).toBeTruthy();
     expect(screen.getByRole('toolbar', { name: 'AI画布工具栏' })).toBeTruthy();
-    expect(screen.getByRole('dialog', { name: '测试图片图片信息' })).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: '图片信息' })).toBeTruthy();
 
     const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
     fireEvent.change(uploadInput);
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index a0a56d24..4da5459c 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -3,6 +3,7 @@ import type {
   EditorCharacterAnimationGenerationResult,
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
+  EditorVideoModel,
 } from '../../services/image-editor/editorProjectClient';
 
 export type CanvasSourceType = 'uploaded' | 'generated' | 'mock_generated';
@@ -159,9 +160,9 @@ export type GenerateDialogState = {
   iconDescriptions?: string[];
   uiDesignSpecReference?: CharacterReferenceImage | null;
   imageModel?: string;
-  videoModel?: string;
+  videoModel?: EditorVideoModel;
   videoAspectRatio?: string;
-  videoResolution?: string;
+  videoResolution?: '480p' | '720p';
   videoDurationSeconds?: 4 | 5;
   videoMode?: 'std';
   videoSound?: 'off';
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 816b63bd..90689363 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -489,7 +489,7 @@ describe('ImageCanvasEditorView', () => {
     );
     fireEvent.click(infoButton);
 
-    const infoPanel = screen.getByRole('dialog', { name: '拼图素材图片信息' });
+    const infoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(infoPanel).getByText('图片类型')).toBeTruthy();
     expect(within(infoPanel).getByText('上传图片')).toBeTruthy();
     expect(within(infoPanel).getByText('生成输入')).toBeTruthy();
@@ -547,9 +547,7 @@ describe('ImageCanvasEditorView', () => {
     fireEvent.click(
       screen.getAllByRole('button', { name: '查看旧布局图片图片信息' })[0]!,
     );
-    const infoPanel = screen.getByRole('dialog', {
-      name: '旧布局图片图片信息',
-    });
+    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();
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index a3621262..c61a0f54 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -49,6 +49,7 @@ export function ImageCanvasEditorView() {
   const specToolWrapRef = useRef<HTMLSpanElement | null>(null);
   const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const characterReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
+  const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const selectedLayerIdRef = useRef<string | null>(null);
   const selectedLayerIdsRef = useRef<string[]>([]);
@@ -350,14 +351,17 @@ export function ImageCanvasEditorView() {
     layers,
     canvasSize,
     viewport,
+    setViewport,
     layerCounterRef,
     specToolWrapRef,
     characterSpecButtonRef,
     characterReferenceButtonRef,
+    generationReferenceButtonRef,
     iconSpecButtonRef,
     generateDialog,
     setGenerateDialog,
     activeCanvasGenerationDialog,
+    canvasGenerationDialogs,
     openCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
     removeCanvasGenerationDialogById,
@@ -376,8 +380,11 @@ export function ImageCanvasEditorView() {
     quickEditPanel,
     setQuickEditPanel,
     setIsSpecMenuOpen,
+    setIsGenerationReferenceMenuOpen,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
+    isPickingGenerationReferenceFromCanvas,
+    setIsPickingGenerationReferenceFromCanvas,
     isPickingCharacterSpecFromCanvas,
     setIsPickingCharacterSpecFromCanvas,
     isPickingCharacterReferenceFromCanvas,
@@ -385,12 +392,17 @@ export function ImageCanvasEditorView() {
     setIsIconSpecMenuOpen,
     isPickingIconSpecFromCanvas,
     setIsPickingIconSpecFromCanvas,
+    setIsUiDesignSpecMenuOpen,
+    isPickingUiDesignSpecFromCanvas,
+    setIsPickingUiDesignSpecFromCanvas,
     openCharacterAnimationPanel,
     openEditDialog,
     openQuickEditPanel,
     pickCharacterSpecFromLayer,
+    pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer,
     pickIconSpecFromLayer,
+    pickUiDesignSpecFromLayer,
     hideGeneratedLayerPanelAfterBlur,
     clearDeletedLayerGenerationState,
     generationComposerStyle,
@@ -482,12 +494,16 @@ export function ImageCanvasEditorView() {
     generateDialog,
     setGenerateDialog,
     isPickingCharacterSpecFromCanvas,
+    isPickingGenerationReferenceFromCanvas,
     isPickingCharacterReferenceFromCanvas,
     isPickingIconSpecFromCanvas,
+    isPickingUiDesignSpecFromCanvas,
     clearCanvasFocus,
     pickCharacterSpecFromLayer,
+    pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer,
     pickIconSpecFromLayer,
+    pickUiDesignSpecFromLayer,
     activateCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
     moveViewportFromMinimapPointer,
@@ -514,12 +530,16 @@ export function ImageCanvasEditorView() {
     setQuickEditPanel,
     closeEditorChromePanels,
     setIsSpecMenuOpen,
+    setIsGenerationReferenceMenuOpen,
+    setIsPickingGenerationReferenceFromCanvas,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
     setIsPickingCharacterSpecFromCanvas,
     setIsPickingCharacterReferenceFromCanvas,
     setIsIconSpecMenuOpen,
     setIsPickingIconSpecFromCanvas,
+    setIsUiDesignSpecMenuOpen,
+    setIsPickingUiDesignSpecFromCanvas,
     setIsSpacePanning,
     setShiftPressed,
   });
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
index 9e646bda..668ba6dc 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.tsx
@@ -1,3 +1,4 @@
+import { ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -11,6 +12,9 @@ import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
 import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
@@ -18,7 +22,10 @@ import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationM
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
 import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
-import { SPEC_TYPE_LABEL } from './ImageCanvasGenerationModel';
+import {
+  SPEC_TYPE_LABEL,
+  calculateEditorVideoPrice,
+} from './ImageCanvasGenerationModel';
 import type {
   CharacterAnimationPanelState,
   CanvasLayer,
@@ -33,14 +40,19 @@ type ImageCanvasGenerationComposerViewProps = {
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
   characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
   characterReferenceButtonRef: RefObject<HTMLButtonElement | null>;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
   isSpecMenuOpen: boolean;
+  isGenerationReferenceMenuOpen: boolean;
   isCharacterSpecMenuOpen: boolean;
   isCharacterReferenceMenuOpen: boolean;
   isIconSpecMenuOpen: boolean;
+  isUiDesignSpecMenuOpen: boolean;
+  isPickingGenerationReferenceFromCanvas: boolean;
   isPickingCharacterSpecFromCanvas: boolean;
   isPickingCharacterReferenceFromCanvas: boolean;
   isPickingIconSpecFromCanvas: boolean;
+  isPickingUiDesignSpecFromCanvas: boolean;
   generateDialog: GenerateDialogState | null;
   generationComposerStyle: CSSProperties | null;
   iconComposerStyle: CSSProperties | null;
@@ -58,12 +70,16 @@ type ImageCanvasGenerationComposerViewProps = {
   setCharacterAnimationPanel: Dispatch<
     SetStateAction<CharacterAnimationPanelState | null>
   >;
+  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsCharacterSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsCharacterReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
   setIsIconSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsUiDesignSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
   setIsPickingCharacterSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
   setIsPickingCharacterReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
   setIsPickingIconSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
+  setIsPickingUiDesignSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
   onOpenSpecDialog: (specType: SpecGenerationType) => void;
   onRequestUpload: (target: UploadTarget) => void;
   onSubmitImageGeneration: (dialog: GenerateDialogState) => void;
@@ -116,18 +132,153 @@ function renderEditorPortal(node: ReactNode) {
   return createPortal(node, document.body);
 }
 
+function ImageCanvasVideoGenerationComposerView({
+  dialog,
+  style,
+  generationReferenceButtonRef,
+  isGenerationReferenceMenuOpen,
+  setGenerateDialog,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  onRequestUpload,
+  onSubmit,
+}: {
+  dialog: GenerateDialogState;
+  style: CSSProperties;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
+  isGenerationReferenceMenuOpen: boolean;
+  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
+  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
+  onRequestUpload: (target: UploadTarget) => void;
+  onSubmit: (dialog: GenerateDialogState) => void;
+}) {
+  const resolution = dialog.videoResolution ?? '480p';
+  const durationSeconds = dialog.videoDurationSeconds ?? 4;
+  const price = calculateEditorVideoPrice(resolution, durationSeconds);
+  return (
+    <>
+      <form
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        style={style}
+        role="dialog"
+        aria-label="生成视频"
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (dialog.status !== 'generating') {
+            onSubmit(dialog);
+          }
+        }}
+      >
+        <PlatformIconButton
+          ref={generationReferenceButtonRef}
+          variant="surfaceFloating"
+          className="image-canvas-editor__generation-ref"
+          label="添加视频参考图"
+          disabled={dialog.status === 'generating'}
+          onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
+          icon={<ImageIcon className="h-4 w-4" />}
+        >
+          <span>参考图</span>
+        </PlatformIconButton>
+        <PlatformTextField
+          variant="textarea"
+          aria-label="视频描述"
+          value={dialog.prompt}
+          disabled={dialog.status === 'generating'}
+          placeholder="描述视频画面"
+          size="sm"
+          density="compact"
+          className="image-canvas-editor__generation-prompt"
+          onChange={(event) =>
+            setGenerateDialog((currentDialog) =>
+              currentDialog
+                ? {
+                    ...currentDialog,
+                    prompt: event.target.value,
+                    status:
+                      currentDialog.status === 'failed'
+                        ? 'idle'
+                        : currentDialog.status,
+                    errorMessage:
+                      currentDialog.status === 'failed'
+                        ? undefined
+                        : currentDialog.errorMessage,
+                  }
+                : currentDialog,
+            )
+          }
+        />
+        <div className="image-canvas-editor__generation-composer-footer">
+          <span className="image-canvas-editor__generation-ratio">
+            16:9 · {resolution} · {durationSeconds}秒
+          </span>
+          <PlatformActionButton
+            type="submit"
+            tone="secondary"
+            size="xs"
+            shape="pill"
+            className="image-canvas-editor__generation-submit"
+            disabled={dialog.status === 'generating'}
+            aria-label="生成视频"
+          >
+            {dialog.status === 'generating' ? '生成中' : `${price}`}
+          </PlatformActionButton>
+        </div>
+      </form>
+      {isGenerationReferenceMenuOpen
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="参考图来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen(false);
+                  setIsPickingGenerationReferenceFromCanvas(false);
+                  onRequestUpload('generation-reference');
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
+  );
+}
+
 export function ImageCanvasGenerationComposerView({
   specToolWrapRef,
   characterSpecButtonRef,
   characterReferenceButtonRef,
+  generationReferenceButtonRef,
   iconSpecButtonRef,
   isSpecMenuOpen,
+  isGenerationReferenceMenuOpen,
   isCharacterSpecMenuOpen,
   isCharacterReferenceMenuOpen,
   isIconSpecMenuOpen,
+  isUiDesignSpecMenuOpen,
+  isPickingGenerationReferenceFromCanvas,
   isPickingCharacterSpecFromCanvas,
   isPickingCharacterReferenceFromCanvas,
   isPickingIconSpecFromCanvas,
+  isPickingUiDesignSpecFromCanvas,
   generateDialog,
   generationComposerStyle,
   iconComposerStyle,
@@ -143,12 +294,16 @@ export function ImageCanvasGenerationComposerView({
   setGenerateDialog,
   setQuickEditPanel,
   setCharacterAnimationPanel,
+  setIsGenerationReferenceMenuOpen,
   setIsCharacterSpecMenuOpen,
   setIsCharacterReferenceMenuOpen,
   setIsIconSpecMenuOpen,
+  setIsUiDesignSpecMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
   setIsPickingCharacterSpecFromCanvas,
   setIsPickingCharacterReferenceFromCanvas,
   setIsPickingIconSpecFromCanvas,
+  setIsPickingUiDesignSpecFromCanvas,
   onOpenSpecDialog,
   onRequestUpload,
   onSubmitImageGeneration,
@@ -192,7 +347,18 @@ export function ImageCanvasGenerationComposerView({
           dialog={generateDialog}
           style={generationComposerStyle}
           setGenerateDialog={setGenerateDialog}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
           onRequestUpload={onRequestUpload}
+          onToggleReferenceMenu={() =>
+            setIsGenerationReferenceMenuOpen((open) => !open)
+          }
           onSubmit={onSubmitImageGeneration}
           onClose={onCloseGenerateComposer}
         />
@@ -204,12 +370,58 @@ export function ImageCanvasGenerationComposerView({
         <ImageCanvasSpecGenerationPanelView
           dialog={generateDialog}
           style={generationComposerStyle}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
           onUpdateSpecFormValue={onUpdateSpecFormValue}
           onRequestUpload={onRequestUpload}
           onSubmit={onSubmitImageGeneration}
         />
       ) : null}
 
+      {generateDialog?.mode === 'ui-design' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <ImageCanvasSpecGenerationPanelView
+          dialog={generateDialog}
+          style={generationComposerStyle}
+          isGenerationReferenceMenuOpen={isUiDesignSpecMenuOpen}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          setIsGenerationReferenceMenuOpen={setIsUiDesignSpecMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingUiDesignSpecFromCanvas
+          }
+          renderEditorPortal={renderEditorPortal}
+          buildPortalMenuStyle={buildPortalMenuStyle}
+          onUpdateSpecFormValue={onUpdateSpecFormValue}
+          onRequestUpload={onRequestUpload}
+          onSubmit={onSubmitImageGeneration}
+        />
+      ) : null}
+
+      {generateDialog?.mode === 'video' &&
+      generateDialog.composerOpen !== false &&
+      generationComposerStyle ? (
+        <ImageCanvasVideoGenerationComposerView
+          dialog={generateDialog}
+          style={generationComposerStyle}
+          generationReferenceButtonRef={generationReferenceButtonRef}
+          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
+          setGenerateDialog={setGenerateDialog}
+          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
+          setIsPickingGenerationReferenceFromCanvas={
+            setIsPickingGenerationReferenceFromCanvas
+          }
+          onRequestUpload={onRequestUpload}
+          onSubmit={onSubmitImageGeneration}
+        />
+      ) : null}
+
       {generateDialog?.mode === 'character' && generationComposerStyle ? (
         <ImageCanvasCharacterGenerationComposerView
           dialog={generateDialog}
@@ -268,11 +480,21 @@ export function ImageCanvasGenerationComposerView({
           请选择画布中的图片作为常规参考图，按 Esc 退出
         </div>
       ) : null}
+      {isPickingGenerationReferenceFromCanvas ? (
+        <div className="image-canvas-editor__canvas-pick-hint">
+          请选择画布中的图片作为参考图，按 Esc 退出
+        </div>
+      ) : null}
       {isPickingIconSpecFromCanvas ? (
         <div className="image-canvas-editor__canvas-pick-hint">
           请选择画布中的图标素材规范，按 Esc 退出
         </div>
       ) : null}
+      {isPickingUiDesignSpecFromCanvas ? (
+        <div className="image-canvas-editor__canvas-pick-hint">
+          请选择画布中的图标素材规范，按 Esc 退出
+        </div>
+      ) : null}
 
       {quickEditPanel &&
       quickEditPanel.status !== 'generating' &&
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index c0342128..cb0e63a1 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -23,6 +23,8 @@ import {
   ICON_FRAME_ORIGINAL_SIZE,
   SPEC_FRAME_DISPLAY_SIZE,
   SPEC_FRAME_ORIGINAL_SIZE,
+  UI_DESIGN_FRAME_DISPLAY_SIZE,
+  UI_DESIGN_FRAME_ORIGINAL_SIZE,
 } from './ImageCanvasGenerationModel';
 
 type CanvasSize = { width: number; height: number };
@@ -180,6 +182,37 @@ export function createIconGenerationDialogDraft({
   };
 }
 
+export function createUiDesignGenerationDialogDraft({
+  canvasSize,
+  viewport,
+  imageModel,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  imageModel: string;
+}): Omit<CanvasGenerationDialogState, 'id'> {
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  const dimensionDefaults = resolveImageDimensionDefaults(imageModel);
+  return {
+    mode: 'ui-design',
+    prompt: '',
+    status: 'idle',
+    composerOpen: true,
+    uiDesignSpecReference: null,
+    imageModel,
+    aspectRatio: dimensionDefaults.aspectRatio,
+    imageSize: dimensionDefaults.imageSize,
+    placeholder: {
+      x: worldCenter.x - UI_DESIGN_FRAME_DISPLAY_SIZE.width / 2,
+      y: worldCenter.y - UI_DESIGN_FRAME_DISPLAY_SIZE.height / 2,
+      width: UI_DESIGN_FRAME_DISPLAY_SIZE.width,
+      height: UI_DESIGN_FRAME_DISPLAY_SIZE.height,
+      originalWidth: UI_DESIGN_FRAME_ORIGINAL_SIZE.width,
+      originalHeight: UI_DESIGN_FRAME_ORIGINAL_SIZE.height,
+    },
+  };
+}
+
 export function createEditDialogDraft(
   sourceLayer: CanvasLayer,
 ): GenerateDialogState {
@@ -255,6 +288,24 @@ export function appendCharacterReference(
     : dialog;
 }
 
+export function appendGenerationReference(
+  dialog: GenerateDialogState | null,
+  layer: CanvasLayer,
+): GenerateDialogState | null {
+  return dialog?.mode === 'generate' ||
+    dialog?.mode === 'video' ||
+    dialog?.mode === 'spec'
+    ? {
+        ...resetFailedGenerationDialog(dialog),
+        generationReferences: [
+          ...(dialog.generationReferences ?? []),
+          createCanvasLayerReference(layer),
+        ],
+        composerOpen: true,
+      }
+    : dialog;
+}
+
 export function assignIconSpecReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
@@ -271,6 +322,19 @@ export function assignIconSpecReference(
     : dialog;
 }
 
+export function assignUiDesignSpecReference(
+  dialog: GenerateDialogState | null,
+  layer: CanvasLayer,
+): GenerateDialogState | null {
+  return dialog?.mode === 'ui-design'
+    ? {
+        ...resetFailedGenerationDialog(dialog),
+        uiDesignSpecReference: createCanvasLayerReference(layer),
+        composerOpen: true,
+      }
+    : dialog;
+}
+
 export function updateSpecFormDialogValue(
   dialog: GenerateDialogState | null,
   key: keyof SpecFormValues,
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index c92bc16f..65697cd2 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -2,6 +2,7 @@ import type {
   EditorCharacterAnimationGenerationInput,
   EditorIconSpritesheetGenerationInput,
   EditorImageGenerationInput,
+  EditorVideoGenerationInput,
 } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationInputs,
@@ -22,7 +23,10 @@ import {
   buildImageGenerationInputs,
   buildSpecGenerationInputs,
   buildSpecPrompt,
+  buildUiDesignGenerationInputs,
+  buildVideoGenerationInputs,
   calculateCharacterAnimationPrice,
+  calculateEditorVideoPrice,
   resolveCharacterAnimationSourceImageSrc,
 } from './ImageCanvasGenerationModel';
 
@@ -49,6 +53,15 @@ export type ImageGenerationSubmissionPlan =
         generationInputs: CanvasGenerationInputs;
       };
       rememberImageModel?: string;
+    }
+  | {
+      kind: 'video';
+      normalizedPrompt: string;
+      input: EditorVideoGenerationInput;
+      result: {
+        title: string;
+        generationInputs: CanvasGenerationInputs;
+      };
     };
 
 export type IconSpritesheetGenerationSubmissionPlan =
@@ -156,14 +169,82 @@ export function buildImageGenerationSubmissionPlan({
     };
   }
 
+  if (dialog.mode === 'ui-design') {
+    const imageModel = dialog.imageModel ?? DEFAULT_IMAGE_MODEL;
+    const referenceImageSrcs = [dialog.uiDesignSpecReference?.src].filter(
+      (src): src is string => Boolean(src),
+    );
+    return {
+      kind: 'image',
+      normalizedPrompt,
+      input: {
+        prompt: normalizedPrompt,
+        kind: 'ui-design',
+        model: imageModel,
+        aspectRatio: dialog.aspectRatio ?? '16:9',
+        imageSize: dialog.imageSize ?? '1K',
+        ...(referenceImageSrcs.length ? { referenceImageSrcs } : {}),
+      },
+      result: {
+        assetKind: 'ui-design',
+        title: `UI设计图 ${nextGeneratedIndex}`,
+        generationInputs: buildUiDesignGenerationInputs(
+          normalizedPrompt,
+          dialog.uiDesignSpecReference,
+        ),
+      },
+      rememberImageModel: imageModel,
+    };
+  }
+
+  if (dialog.mode === 'video') {
+    const resolution = dialog.videoResolution ?? '480p';
+    const durationSeconds = dialog.videoDurationSeconds ?? 4;
+    const model = dialog.videoModel ?? 'seedance2.0';
+    return {
+      kind: 'video',
+      normalizedPrompt,
+      input: {
+        prompt: normalizedPrompt,
+        model,
+        aspectRatio: '16:9',
+        durationSeconds,
+        resolution,
+        mode: 'std',
+        sound: 'off',
+        priceMudPoints: calculateEditorVideoPrice(
+          resolution,
+          durationSeconds,
+        ),
+      },
+      result: {
+        title: `生成视频 ${nextGeneratedIndex}`,
+        generationInputs: buildVideoGenerationInputs(
+          normalizedPrompt,
+          dialog.generationReferences,
+        ),
+      },
+    };
+  }
+
   return {
     kind: 'image',
     normalizedPrompt,
     input: {
       prompt: normalizedPrompt,
+      ...(dialog.generationReferences?.length
+        ? {
+            referenceImageSrcs: dialog.generationReferences.map(
+              (reference) => reference.src,
+            ),
+          }
+        : {}),
     },
     result: {
-      generationInputs: buildImageGenerationInputs(normalizedPrompt),
+      generationInputs: buildImageGenerationInputs(
+        normalizedPrompt,
+        dialog.generationReferences,
+      ),
     },
   };
 }
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index a0b025d9..eb10fbae 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -4,7 +4,10 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { createRef, useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-import type { GenerateDialogState } from './ImageCanvasEditorTypes';
+import type {
+  GenerateDialogState,
+  UploadTarget,
+} from './ImageCanvasEditorTypes';
 import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
 
 function createIconDialog(
@@ -35,7 +38,7 @@ function IconComposerHarness({
   initialDialog: GenerateDialogState;
   initialMenuOpen?: boolean;
   onOpenSpecDialog?: (specType: 'character' | 'ui' | 'icon' | 'custom') => void;
-  onRequestUpload?: (target: 'asset' | 'spec-reference' | 'character-spec' | 'character-reference' | 'icon-spec') => void;
+  onRequestUpload?: (target: UploadTarget) => void;
   onUpdateIconDescription?: (index: number, value: string) => void;
   onAddIconDescription?: () => void;
   onRememberImageModel?: (model: string) => void;
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index f2af6a66..eada5c47 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -109,7 +109,7 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     cleanup();
     renderPanel({ dialog: createSpecDialog({ specType: 'icon' }) });
 
-    expect(screen.queryByText('添加参考图')).toBeNull();
+    expect(screen.getByRole('button', { name: '参考图' })).toBeTruthy();
   });
 
   it('requests reference upload and submits while idle', () => {
@@ -122,7 +122,7 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
       onSubmit: submitSpec,
     });
 
-    fireEvent.click(screen.getByRole('button', { name: '添加参考图' }));
+    fireEvent.click(screen.getByRole('button', { name: '参考图' }));
     fireEvent.click(screen.getByRole('button', { name: '提交生成规范' }));
 
     expect(requestUpload).toHaveBeenCalledWith('spec-reference');
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 5d2aeb72..2fef0779 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -1,8 +1,18 @@
-import { type CSSProperties } from 'react';
+import {
+  type CSSProperties,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
 import { ImagePlus } from 'lucide-react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import {
   PlatformSelectField,
@@ -21,6 +31,15 @@ import type {
 type ImageCanvasSpecGenerationPanelViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
+  isGenerationReferenceMenuOpen?: boolean;
+  generationReferenceButtonRef?: RefObject<HTMLButtonElement | null>;
+  setIsGenerationReferenceMenuOpen?: Dispatch<SetStateAction<boolean>>;
+  setIsPickingGenerationReferenceFromCanvas?: Dispatch<SetStateAction<boolean>>;
+  renderEditorPortal?: (node: ReactNode) => ReactNode;
+  buildPortalMenuStyle?: (
+    anchor: HTMLElement | null,
+    placement: 'above' | 'below',
+  ) => CSSProperties;
   onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
   onRequestUpload: (target: UploadTarget) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
@@ -29,26 +48,71 @@ type ImageCanvasSpecGenerationPanelViewProps = {
 export function ImageCanvasSpecGenerationPanelView({
   dialog,
   style,
+  isGenerationReferenceMenuOpen = false,
+  generationReferenceButtonRef,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
+  renderEditorPortal = (node) => node,
+  buildPortalMenuStyle = () => ({}),
   onUpdateSpecFormValue,
   onRequestUpload,
   onSubmit,
 }: ImageCanvasSpecGenerationPanelViewProps) {
+  const isUiDesignDialog = dialog.mode === 'ui-design';
+  const referenceLabel = isUiDesignDialog ? 'UI设计图标素材规范' : '参考图';
+  const uploadTarget: UploadTarget = isUiDesignDialog
+    ? 'ui-design-icon-spec'
+    : 'spec-reference';
+  const reference = isUiDesignDialog
+    ? dialog.uiDesignSpecReference
+    : dialog.specReference;
+  const openReferenceMenu = () => {
+    if (setIsGenerationReferenceMenuOpen) {
+      setIsGenerationReferenceMenuOpen((open) => !open);
+      return;
+    }
+    onRequestUpload(uploadTarget);
+  };
+
   return (
-    <form
-      className="image-canvas-editor__generation-composer image-canvas-editor__spec-composer"
-      style={style}
-      role="dialog"
-      aria-label="生成规范"
-      onPointerDown={(event) => event.stopPropagation()}
-      onSubmit={(event) => {
-        event.preventDefault();
-        if (dialog.status !== 'generating') {
-          onSubmit(dialog);
-        }
-      }}
-    >
+    <>
+      <form
+        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__spec-composer"
+        style={style}
+        role="dialog"
+        aria-label={isUiDesignDialog ? '生成UI设计图' : '生成规范'}
+        onPointerDown={(event) => event.stopPropagation()}
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (dialog.status !== 'generating') {
+            onSubmit(dialog);
+          }
+        }}
+      >
       <div className="image-canvas-editor__spec-fields">
-        {dialog.specType === 'custom' ? (
+        {isUiDesignDialog ? (
+          <label className="image-canvas-editor__field-block">
+            <PlatformFieldLabel
+              variant="form"
+              className="image-canvas-editor__field-title"
+            >
+              UI设计要求
+            </PlatformFieldLabel>
+            <PlatformTextField
+              variant="textarea"
+              aria-label="UI设计要求"
+              value={dialog.prompt}
+              disabled={dialog.status === 'generating'}
+              placeholder="描述要生成的UI界面"
+              size="sm"
+              density="compact"
+              className="image-canvas-editor__generation-prompt"
+              onChange={(event) =>
+                onUpdateSpecFormValue('customPrompt', event.target.value)
+              }
+            />
+          </label>
+        ) : dialog.specType === 'custom' ? (
           <label className="image-canvas-editor__field-block">
             <PlatformFieldLabel
               variant="form"
@@ -165,29 +229,31 @@ export function ImageCanvasSpecGenerationPanelView({
             ) : null}
           </>
         )}
-        {dialog.specType !== 'icon' ? (
-          <div className="image-canvas-editor__field-block">
+        {isUiDesignDialog || dialog.specType ? (
+          <div className="image-canvas-editor__field-block image-canvas-editor__generation-ref">
             <PlatformFieldLabel
               variant="form"
               className="image-canvas-editor__field-title"
             >
-              参考图
+              {referenceLabel}
             </PlatformFieldLabel>
             <button
+              ref={generationReferenceButtonRef}
               type="button"
               className="image-canvas-editor__character-spec-ref image-canvas-editor__reference-tile image-canvas-editor__reference-tile--spec"
               disabled={dialog.status === 'generating'}
-              onClick={() => onRequestUpload('spec-reference')}
+              onClick={openReferenceMenu}
+              aria-label={referenceLabel}
             >
               <span className="image-canvas-editor__reference-tile-visual">
-                {dialog.specReference ? (
-                  <img src={dialog.specReference.src} alt="" aria-hidden="true" />
+                {reference ? (
+                  <img src={reference.src} alt="" aria-hidden="true" />
                 ) : (
                   <ImagePlus className="h-4 w-4" aria-hidden="true" />
                 )}
               </span>
               <span className="image-canvas-editor__reference-tile-copy">
-                {dialog.specReference?.label ?? '添加参考图'}
+                {reference?.label ?? '添加参考图'}
               </span>
             </button>
           </div>
@@ -204,20 +270,52 @@ export function ImageCanvasSpecGenerationPanelView({
           {dialog.errorMessage}
         </PlatformStatusMessage>
       ) : null}
-      <div className="image-canvas-editor__spec-footer">
+      <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__spec-footer">
         <PlatformActionButton
           type="submit"
           tone="secondary"
           size="sm"
-          className="image-canvas-editor__spec-submit"
+          className="image-canvas-editor__generation-submit image-canvas-editor__spec-submit"
           disabled={dialog.status === 'generating'}
-          aria-label="提交生成规范"
+          aria-label={isUiDesignDialog ? '生成UI设计图' : '提交生成规范'}
         >
           {dialog.status === 'generating'
             ? '生成中'
             : `消耗${SPEC_GENERATION_COST}泥点 · 生成`}
         </PlatformActionButton>
       </div>
-    </form>
+      </form>
+      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+        ? renderEditorPortal(
+            <PlatformFloatingMenu
+              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
+              label="参考图来源"
+              placement="top-start"
+              style={buildPortalMenuStyle(
+                generationReferenceButtonRef.current,
+                'above',
+              )}
+            >
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                }}
+              >
+                从画布中选择
+              </PlatformFloatingMenuItem>
+              <PlatformFloatingMenuItem
+                onClick={() => {
+                  setIsGenerationReferenceMenuOpen?.(false);
+                  setIsPickingGenerationReferenceFromCanvas?.(false);
+                  onRequestUpload(uploadTarget);
+                }}
+              >
+                上传图片
+              </PlatformFloatingMenuItem>
+            </PlatformFloatingMenu>,
+          )
+        : null}
+    </>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 7d5a1026..898ca48b 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -23,8 +23,10 @@ type PersistedUploadAsset = {
 type GenerationReferenceUploadTarget =
   | 'character-reference'
   | 'character-spec'
+  | 'generation-reference'
   | 'icon-spec'
-  | 'spec-reference';
+  | 'spec-reference'
+  | 'ui-design-icon-spec';
 
 export const UPLOAD_LAYER_FALLBACK_SIZE = {
   width: 420,
@@ -114,6 +116,27 @@ export function applyGenerationReferenceUpload({
         }
       : dialog;
   }
+  if (target === 'ui-design-icon-spec') {
+    return dialog?.mode === 'ui-design'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          uiDesignSpecReference: firstReference,
+        }
+      : dialog;
+  }
+  if (target === 'generation-reference') {
+    return dialog?.mode === 'generate' ||
+      dialog?.mode === 'video' ||
+      dialog?.mode === 'spec'
+      ? {
+          ...setFailedGenerationIdle(dialog),
+          generationReferences: [
+            ...(dialog.generationReferences ?? []),
+            ...references,
+          ],
+        }
+      : dialog;
+  }
   return dialog?.mode === 'character'
     ? {
         ...setFailedGenerationIdle(dialog),
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 443babc9..322b8196 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -12,6 +12,7 @@ import {
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
   generateEditorImage,
+  generateEditorVideo,
 } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
@@ -28,6 +29,7 @@ import {
   createGeneratedResultLayer,
   createIconSpritesheetResultLayers,
   createQuickEditResultLayer,
+  createVideoResultLayer,
 } from './ImageCanvasGenerationLayerModel';
 import {
   buildEditGenerationInputs,
@@ -242,6 +244,53 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     ],
   );
 
+  const addVideoResultLayer = useCallback(
+    (
+      generated: Parameters<typeof createVideoResultLayer>[0]['generated'],
+      title: string,
+      generationInputs: CanvasGenerationInputs,
+      frame?: GenerateDialogState['placeholder'],
+      dialogId?: string,
+    ) => {
+      layerCounterRef.current += 1;
+      const generatedIndex = layerCounterRef.current;
+      const nextLayer = createVideoResultLayer({
+        generated,
+        generatedIndex,
+        title,
+        canvasSize,
+        viewport,
+        generationInputs,
+        frame,
+      });
+
+      appendCanvasLayersWithResources([nextLayer]);
+      selectSingleLayer(nextLayer.id);
+      setActiveSidebarPanel('layers');
+      if (dialogId) {
+        updateCanvasGenerationDialogById(dialogId, (currentDialog) => ({
+          ...currentDialog,
+          status: 'idle',
+          composerOpen: true,
+          generatedLayerId: nextLayer.id,
+          placeholder: undefined,
+          errorMessage: undefined,
+        }));
+      }
+      setActiveTool('select');
+    },
+    [
+      appendCanvasLayersWithResources,
+      canvasSize,
+      layerCounterRef,
+      selectSingleLayer,
+      setActiveSidebarPanel,
+      setActiveTool,
+      updateCanvasGenerationDialogById,
+      viewport,
+    ],
+  );
+
   const submitIconSpritesheetGeneration = useCallback(
     async (dialog: GenerateDialogState) => {
       if (dialog.mode !== 'icon') {
@@ -397,6 +446,15 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             sourceLayer: submissionPlan.sourceLayer,
             generationInputs: submissionPlan.generationInputs,
           });
+        } else if (submissionPlan.kind === 'video') {
+          const generated = await generateEditorVideo(submissionPlan.input);
+          addVideoResultLayer(
+            generated,
+            submissionPlan.result.title,
+            submissionPlan.result.generationInputs,
+            getGeneratingDialogPlaceholder(dialog),
+            canvasDialog?.id,
+          );
         } else {
           const generated = await generateEditorImage(submissionPlan.input);
           if (submissionPlan.rememberImageModel) {
@@ -432,6 +490,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     },
     [
       addGeneratedResultLayer,
+      addVideoResultLayer,
       getGeneratingDialogPlaceholder,
       layerCounterRef,
       layers,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index b379ff00..da0919ec 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -63,6 +63,8 @@ function GenerationSurfaceHarness() {
   const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const characterReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
+  const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [viewport, setViewport] = useState({ x: 10, y: 20, scale: 2 });
   const dialogs = useCanvasGenerationDialogs();
   const activeDialog = dialogs.generateDialog;
   const activeCanvasDialog =
@@ -72,15 +74,18 @@ function GenerationSurfaceHarness() {
   const surface = useImageCanvasGenerationSurface({
     layers,
     canvasSize: { width: 900, height: 640 },
-    viewport: { x: 10, y: 20, scale: 2 },
+    viewport,
+    setViewport,
     layerCounterRef,
     specToolWrapRef,
     characterSpecButtonRef,
     characterReferenceButtonRef,
     iconSpecButtonRef,
+    generationReferenceButtonRef,
     generateDialog: dialogs.generateDialog,
     setGenerateDialog: dialogs.setGenerateDialog,
     activeCanvasGenerationDialog: activeCanvasDialog,
+    canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     openCanvasGenerationDialog: dialogs.openCanvasGenerationDialog,
     updateCanvasGenerationDialogById: dialogs.updateCanvasGenerationDialogById,
     removeCanvasGenerationDialogById: dialogs.removeCanvasGenerationDialogById,
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index 14f7204a..05da7096 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -34,14 +34,17 @@ type ImageCanvasGenerationSurfaceOptions = {
   layers: CanvasLayer[];
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
+  setViewport: Dispatch<SetStateAction<CanvasViewport>>;
   layerCounterRef: MutableRefObject<number>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
   characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
   characterReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
+  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
   generateDialog: GenerateDialogState | null;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   activeCanvasGenerationDialog: CanvasGenerationDialogState | null;
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
   openCanvasGenerationDialog: (
     dialog: Omit<CanvasGenerationDialogState, 'id'>,
   ) => void;
@@ -68,14 +71,17 @@ export function useImageCanvasGenerationSurface({
   layers,
   canvasSize,
   viewport,
+  setViewport,
   layerCounterRef,
   specToolWrapRef,
   characterSpecButtonRef,
   characterReferenceButtonRef,
   iconSpecButtonRef,
+  generationReferenceButtonRef,
   generateDialog,
   setGenerateDialog,
   activeCanvasGenerationDialog,
+  canvasGenerationDialogs,
   openCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
   removeCanvasGenerationDialogById,
@@ -94,6 +100,8 @@ export function useImageCanvasGenerationSurface({
     layers,
     canvasSize,
     viewport,
+    setViewport,
+    canvasGenerationDialogs,
     layerCounterRef,
     generateDialog,
     setGenerateDialog,
@@ -173,13 +181,21 @@ export function useImageCanvasGenerationSurface({
       specToolWrapRef={specToolWrapRef}
       characterSpecButtonRef={characterSpecButtonRef}
       characterReferenceButtonRef={characterReferenceButtonRef}
+      generationReferenceButtonRef={generationReferenceButtonRef}
       iconSpecButtonRef={iconSpecButtonRef}
       isSpecMenuOpen={generationWorkflow.isSpecMenuOpen}
+      isGenerationReferenceMenuOpen={
+        generationWorkflow.isGenerationReferenceMenuOpen
+      }
       isCharacterSpecMenuOpen={generationWorkflow.isCharacterSpecMenuOpen}
       isCharacterReferenceMenuOpen={
         generationWorkflow.isCharacterReferenceMenuOpen
       }
       isIconSpecMenuOpen={generationWorkflow.isIconSpecMenuOpen}
+      isUiDesignSpecMenuOpen={generationWorkflow.isUiDesignSpecMenuOpen}
+      isPickingGenerationReferenceFromCanvas={
+        generationWorkflow.isPickingGenerationReferenceFromCanvas
+      }
       isPickingCharacterSpecFromCanvas={
         generationWorkflow.isPickingCharacterSpecFromCanvas
       }
@@ -189,6 +205,9 @@ export function useImageCanvasGenerationSurface({
       isPickingIconSpecFromCanvas={
         generationWorkflow.isPickingIconSpecFromCanvas
       }
+      isPickingUiDesignSpecFromCanvas={
+        generationWorkflow.isPickingUiDesignSpecFromCanvas
+      }
       generateDialog={generateDialog}
       generationComposerStyle={generationComposerStyle}
       iconComposerStyle={iconComposerStyle}
@@ -214,7 +233,16 @@ export function useImageCanvasGenerationSurface({
       setIsCharacterReferenceMenuOpen={
         generationWorkflow.setIsCharacterReferenceMenuOpen
       }
+      setIsGenerationReferenceMenuOpen={
+        generationWorkflow.setIsGenerationReferenceMenuOpen
+      }
       setIsIconSpecMenuOpen={generationWorkflow.setIsIconSpecMenuOpen}
+      setIsUiDesignSpecMenuOpen={
+        generationWorkflow.setIsUiDesignSpecMenuOpen
+      }
+      setIsPickingGenerationReferenceFromCanvas={
+        generationWorkflow.setIsPickingGenerationReferenceFromCanvas
+      }
       setIsPickingCharacterSpecFromCanvas={
         generationWorkflow.setIsPickingCharacterSpecFromCanvas
       }
@@ -224,6 +252,9 @@ export function useImageCanvasGenerationSurface({
       setIsPickingIconSpecFromCanvas={
         generationWorkflow.setIsPickingIconSpecFromCanvas
       }
+      setIsPickingUiDesignSpecFromCanvas={
+        generationWorkflow.setIsPickingUiDesignSpecFromCanvas
+      }
       onOpenSpecDialog={generationWorkflow.openSpecDialog}
       onRequestUpload={requestUpload}
       onSubmitImageGeneration={(dialog) =>
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index ef29319e..95b62d8c 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -426,7 +426,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         expect.objectContaining({
           size: '2048x1152',
           kind: 'spec',
-          model: 'gpt-image-2',
+          model: 'gemini-3.1-flash-image-preview',
           referenceImageSrcs: ['data:image/png;base64,ref'],
           prompt: expect.stringContaining('参考图生成规范'),
         }),
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 07633ff4..cdbb6542 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -22,7 +22,9 @@ import type {
 } from './ImageCanvasEditorTypes';
 import {
   appendCharacterReference,
+  appendGenerationReference,
   appendIconDescriptionToDialog,
+  assignUiDesignSpecReference,
   assignCharacterSpecReference,
   assignIconSpecReference,
   closeGenerateComposerDialog,
@@ -38,6 +40,10 @@ import {
   updateIconDescriptionInDialog,
   updateSpecFormDialogValue,
 } from './ImageCanvasGenerationDialogModel';
+import {
+  centerViewportOnPlacement,
+  chooseGenerationPlacement,
+} from './ImageCanvasGenerationPlacementModel';
 import {
   buildQuickEditModelOptions,
   buildQuickEditSizeOptions,
@@ -57,6 +63,8 @@ type GenerationWorkflowOptions = {
   layers: CanvasLayer[];
   canvasSize: CanvasSize;
   viewport: CanvasViewport;
+  setViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  canvasGenerationDialogs: CanvasGenerationDialogState[];
   layerCounterRef: MutableRefObject<number>;
   generateDialog: GenerateDialogState | null;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
@@ -85,6 +93,8 @@ export function useImageCanvasGenerationWorkflow({
   layers,
   canvasSize,
   viewport,
+  setViewport,
+  canvasGenerationDialogs,
   layerCounterRef,
   generateDialog,
   setGenerateDialog,
@@ -102,9 +112,15 @@ export function useImageCanvasGenerationWorkflow({
   setImageContextMenu,
 }: GenerationWorkflowOptions) {
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
+  const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
+    useState(false);
   const [isCharacterSpecMenuOpen, setIsCharacterSpecMenuOpen] = useState(false);
   const [isCharacterReferenceMenuOpen, setIsCharacterReferenceMenuOpen] =
     useState(false);
+  const [
+    isPickingGenerationReferenceFromCanvas,
+    setIsPickingGenerationReferenceFromCanvas,
+  ] = useState(false);
   const [
     isPickingCharacterSpecFromCanvas,
     setIsPickingCharacterSpecFromCanvas,
@@ -116,6 +132,9 @@ export function useImageCanvasGenerationWorkflow({
   const [isIconSpecMenuOpen, setIsIconSpecMenuOpen] = useState(false);
   const [isPickingIconSpecFromCanvas, setIsPickingIconSpecFromCanvas] =
     useState(false);
+  const [isUiDesignSpecMenuOpen, setIsUiDesignSpecMenuOpen] = useState(false);
+  const [isPickingUiDesignSpecFromCanvas, setIsPickingUiDesignSpecFromCanvas] =
+    useState(false);
   const [quickEditPanel, setQuickEditPanel] =
     useState<QuickEditPanelState | null>(null);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
@@ -153,17 +172,40 @@ export function useImageCanvasGenerationWorkflow({
       : DEFAULT_ICON_DESCRIPTIONS;
 
   const openGenerateDialog = useCallback(() => {
-    openCanvasGenerationDialog(
-      createGenerateDialogDraft({ canvasSize, viewport }),
+    const draft = createGenerateDialogDraft({ canvasSize, viewport });
+    const draftPlaceholder = draft.placeholder;
+    if (!draftPlaceholder) {
+      return;
+    }
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame: draftPlaceholder,
+      layers,
+      generationDialogs: canvasGenerationDialogs,
+    }) ?? draftPlaceholder;
+    openCanvasGenerationDialog({
+      ...draft,
+      placeholder: placement,
+    });
+    setViewport(
+      centerViewportOnPlacement({
+        canvasSize,
+        viewport,
+        placement,
+      }),
     );
     setActiveTool('generate');
     selectSingleLayer(null);
     setQuickEditPanel(null);
   }, [
     canvasSize,
+    canvasGenerationDialogs,
+    layers,
     openCanvasGenerationDialog,
     selectSingleLayer,
     setActiveTool,
+    setViewport,
     viewport,
   ]);
 
@@ -202,9 +244,13 @@ export function useImageCanvasGenerationWorkflow({
 
   const openCharacterGenerationDialog = useCallback(() => {
     setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
     setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
     setIsPickingCharacterSpecFromCanvas(false);
     setIsPickingCharacterReferenceFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
     openCanvasGenerationDialog(
       createCharacterGenerationDialogDraft({
         canvasSize,
@@ -226,9 +272,13 @@ export function useImageCanvasGenerationWorkflow({
 
   const openIconGenerationDialog = useCallback(() => {
     setIsSpecMenuOpen(false);
+    setIsGenerationReferenceMenuOpen(false);
     setIsCharacterReferenceMenuOpen(false);
+    setIsPickingGenerationReferenceFromCanvas(false);
     setIsPickingCharacterSpecFromCanvas(false);
     setIsPickingCharacterReferenceFromCanvas(false);
+    setIsUiDesignSpecMenuOpen(false);
+    setIsPickingUiDesignSpecFromCanvas(false);
     setIsPickingIconSpecFromCanvas(false);
     openCanvasGenerationDialog(
       createIconGenerationDialogDraft({
@@ -292,6 +342,18 @@ export function useImageCanvasGenerationWorkflow({
     [setGenerateDialog, setImageContextMenu],
   );
 
+  const pickGenerationReferenceFromLayer = useCallback(
+    (layer: CanvasLayer) => {
+      setGenerateDialog((currentDialog) =>
+        appendGenerationReference(currentDialog, layer),
+      );
+      setIsPickingGenerationReferenceFromCanvas(false);
+      setIsGenerationReferenceMenuOpen(false);
+      setImageContextMenu(null);
+    },
+    [setGenerateDialog, setImageContextMenu],
+  );
+
   const pickCharacterReferenceFromLayer = useCallback(
     (layer: CanvasLayer) => {
       setGenerateDialog((currentDialog) =>
@@ -318,6 +380,18 @@ export function useImageCanvasGenerationWorkflow({
     [setGenerateDialog, setImageContextMenu],
   );
 
+  const pickUiDesignSpecFromLayer = useCallback(
+    (layer: CanvasLayer) => {
+      setGenerateDialog((currentDialog) =>
+        assignUiDesignSpecReference(currentDialog, layer),
+      );
+      setIsPickingUiDesignSpecFromCanvas(false);
+      setIsUiDesignSpecMenuOpen(false);
+      setImageContextMenu(null);
+    },
+    [setGenerateDialog, setImageContextMenu],
+  );
+
   const updateIconDescription = useCallback(
     (index: number, value: string) => {
       setGenerateDialog((currentDialog) =>
@@ -422,10 +496,14 @@ export function useImageCanvasGenerationWorkflow({
       iconDescriptionValues,
       isSpecMenuOpen,
       setIsSpecMenuOpen,
+      isGenerationReferenceMenuOpen,
+      setIsGenerationReferenceMenuOpen,
       isCharacterSpecMenuOpen,
       setIsCharacterSpecMenuOpen,
       isCharacterReferenceMenuOpen,
       setIsCharacterReferenceMenuOpen,
+      isPickingGenerationReferenceFromCanvas,
+      setIsPickingGenerationReferenceFromCanvas,
       isPickingCharacterSpecFromCanvas,
       setIsPickingCharacterSpecFromCanvas,
       isPickingCharacterReferenceFromCanvas,
@@ -434,6 +512,10 @@ export function useImageCanvasGenerationWorkflow({
       setIsIconSpecMenuOpen,
       isPickingIconSpecFromCanvas,
       setIsPickingIconSpecFromCanvas,
+      isUiDesignSpecMenuOpen,
+      setIsUiDesignSpecMenuOpen,
+      isPickingUiDesignSpecFromCanvas,
+      setIsPickingUiDesignSpecFromCanvas,
       openGenerateDialog,
       openSpecDialog,
       openCharacterAnimationPanel,
@@ -442,8 +524,10 @@ export function useImageCanvasGenerationWorkflow({
       openEditDialog,
       openQuickEditPanel,
       pickCharacterSpecFromLayer,
+      pickGenerationReferenceFromLayer,
       pickCharacterReferenceFromLayer,
       pickIconSpecFromLayer,
+      pickUiDesignSpecFromLayer,
       submitIconSpritesheetGeneration,
       submitQuickEdit,
       submitImageGeneration,
@@ -469,9 +553,13 @@ export function useImageCanvasGenerationWorkflow({
       isCharacterReferenceMenuOpen,
       isCharacterSpecMenuOpen,
       isIconSpecMenuOpen,
+      isGenerationReferenceMenuOpen,
       isPickingCharacterReferenceFromCanvas,
       isPickingCharacterSpecFromCanvas,
+      isPickingGenerationReferenceFromCanvas,
       isPickingIconSpecFromCanvas,
+      isPickingUiDesignSpecFromCanvas,
+      isUiDesignSpecMenuOpen,
       isSpecMenuOpen,
       openCharacterAnimationPanel,
       openCharacterGenerationDialog,
@@ -482,7 +570,9 @@ export function useImageCanvasGenerationWorkflow({
       openSpecDialog,
       pickCharacterReferenceFromLayer,
       pickCharacterSpecFromLayer,
+      pickGenerationReferenceFromLayer,
       pickIconSpecFromLayer,
+      pickUiDesignSpecFromLayer,
       quickEditModelOptions,
       quickEditPanel,
       quickEditSizeOptions,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 61168d7c..27eac768 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -193,6 +193,40 @@ export function useImageCanvasUploadWorkflow({
     [setGenerateDialog],
   );
 
+  const addGenerationReferenceFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const imageFiles = Array.from(files).filter(isImageFile);
+      if (!imageFiles.length) {
+        window.alert('请选择图片文件');
+        return;
+      }
+
+      const references = await Promise.all(
+        imageFiles.map(async (file, index) => ({
+          file,
+          index,
+          imageSrc: await readImageFileAsDataUrl(file),
+        })),
+      );
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'generation-reference',
+          references: references.map(({ file, imageSrc, index }) =>
+            createUploadedGenerationReference({
+              idPrefix: 'upload-generation-reference',
+              index,
+              fileName: file.name,
+              fallbackLabel: `参考图${index + 1}`,
+              imageSrc,
+            }),
+          ),
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
   const addIconSpecReferenceFiles = useCallback(
     async (files: FileList | File[]) => {
       const imageFile = Array.from(files).find(isImageFile);
@@ -220,6 +254,33 @@ export function useImageCanvasUploadWorkflow({
     [setGenerateDialog],
   );
 
+  const addUiDesignSpecReferenceFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const imageFile = Array.from(files).find(isImageFile);
+      if (!imageFile) {
+        window.alert('请选择图片文件');
+        return;
+      }
+
+      const imageSrc = await readImageFileAsDataUrl(imageFile);
+      setGenerateDialog((currentDialog) =>
+        applyGenerationReferenceUpload({
+          dialog: currentDialog,
+          target: 'ui-design-icon-spec',
+          references: [
+            createUploadedGenerationReference({
+              idPrefix: 'upload-ui-design-icon-spec',
+              fileName: imageFile.name,
+              fallbackLabel: 'UI设计图标素材规范',
+              imageSrc,
+            }),
+          ],
+        }),
+      );
+    },
+    [setGenerateDialog],
+  );
+
   const uploadAssetFile = useCallback(
     async (file: File, options: UploadAssetFileOptions) => {
       if (!isImageFile(file)) {
@@ -435,12 +496,16 @@ export function useImageCanvasUploadWorkflow({
       if (files?.length) {
         if (currentUploadTarget === 'spec-reference') {
           void addSpecReferenceFiles(files);
+        } else if (currentUploadTarget === 'generation-reference') {
+          void addGenerationReferenceFiles(files);
         } else if (currentUploadTarget === 'character-spec') {
           void addCharacterSpecReferenceFiles(files);
         } else if (currentUploadTarget === 'character-reference') {
           void addCharacterReferenceFiles(files);
         } else if (currentUploadTarget === 'icon-spec') {
           void addIconSpecReferenceFiles(files);
+        } else if (currentUploadTarget === 'ui-design-icon-spec') {
+          void addUiDesignSpecReferenceFiles(files);
         } else {
           addUploadedFiles(files, { addToCanvas: activeTool === 'upload' });
         }
@@ -452,8 +517,10 @@ export function useImageCanvasUploadWorkflow({
       activeTool,
       addCharacterReferenceFiles,
       addCharacterSpecReferenceFiles,
+      addGenerationReferenceFiles,
       addSpecReferenceFiles,
       addIconSpecReferenceFiles,
+      addUiDesignSpecReferenceFiles,
       addUploadedFiles,
       setUploadTarget,
     ],
@@ -469,6 +536,8 @@ export function useImageCanvasUploadWorkflow({
     addSpecReferenceFiles,
     addCharacterSpecReferenceFiles,
     addCharacterReferenceFiles,
+    addGenerationReferenceFiles,
     addIconSpecReferenceFiles,
+    addUiDesignSpecReferenceFiles,
   };
 }