From 3c125ceb86ffaff76a6f141563556593cceda0e8 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Thu, 25 Jun 2026 18:17:41 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=BF=AB=E9=80=9F=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E4=B8=8E=E6=94=B9=E9=80=A0=E7=94=9F=E6=88=90=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=BA=95=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

复用 ImageCanvasBasicGenerationComposerView 作为快速编辑面板容器

复用 ImageCanvasBasicGenerationComposerView 作为改造对话框容器

为基础底盘增加可配置化参数，覆盖标题、提示词、按钮、参考图和引用源能力

生成器参数与状态可由外层覆盖，支持快速编辑重绘等场景定制

Quick-edit 参考图使用通用参考图 Slot，不再手写组件
---
 ...ImageCanvasBasicGenerationComposerView.tsx | 347 +++++++----
 .../ImageCanvasEditGenerationModalView.tsx    |  92 +--
 .../ImageCanvasGenerationImageOptionsView.tsx | 168 +++---
 .../ImageCanvasQuickEditPanelView.tsx         | 541 ++++--------------
 4 files changed, 458 insertions(+), 690 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 2036eeb09..925907f9e 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -16,14 +16,27 @@ import { PlatformTextField } from '../common/PlatformTextField';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import {
-  calculateEditorImageGenerationPrice,
-} from './ImageCanvasGenerationModel';
+import { calculateEditorImageGenerationPrice } from './ImageCanvasGenerationModel';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
+type ReferenceLabelFormatter = (
+  reference: CharacterReferenceImage,
+  index: number,
+) => string;
+
+type ReferenceTone =
+  | 'default'
+  | 'spec'
+  | 'icon'
+  | 'ui'
+  | 'quick-edit'
+  | 'video'
+  | 'audio';
+
 type ImageCanvasBasicGenerationComposerViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
@@ -37,11 +50,41 @@ type ImageCanvasBasicGenerationComposerViewProps = {
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
-  onRequestUpload: (target: 'generation-reference') => void;
+  onRequestUpload: (target: UploadTarget) => void;
+  onPickReferenceFromCanvas?: () => void;
   onToggleReferenceMenu?: () => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
+  dialogLabel?: string;
+  includeDimensions?: boolean;
+  includeModel?: boolean;
+  includeReferences?: boolean;
+  promptLabel?: string;
+  promptPlaceholder?: string;
+  optionLabelPrefix?: string;
+  dimensionRatioAriaLabelPrefix?: string;
+  dimensionSizeAriaLabelPrefix?: string;
+  referenceUploadTarget?: UploadTarget;
+  referenceButtonIcon?: ReactNode;
+  referenceButtonLabel?: string;
+  referenceButtonAriaLabel?: string;
+  referenceMenuLabel?: string;
+  referenceSlotTone?: ReferenceTone;
+  referenceSlotDisabled?: boolean;
+  referenceLabelFormatter?: ReferenceLabelFormatter;
+  referenceAriaLabelFormatter?: ReferenceLabelFormatter;
+  referenceRemoveLabelFormatter?: ReferenceLabelFormatter;
+  showReferenceAddButton?: boolean;
+  formClassName?: string;
+  footerClassName?: string;
+  promptClassName?: string;
+  referenceSlotClassName?: string;
+  submitButtonClassName?: string;
+  submitLabel?: string;
+  submitAriaLabel?: string;
+  submittingStatusLabel?: string;
 };
+
 function resetFailedDialogStatus(dialog: GenerateDialogState) {
   return {
     ...dialog,
@@ -50,31 +93,6 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
-function ReferenceChip({
-  reference,
-  index,
-  onRemove,
-}: {
-  reference: CharacterReferenceImage;
-  index: number;
-  onRemove: () => void;
-}) {
-  const label = reference.label || `参考图${index + 1}`;
-  return (
-    <ImageCanvasReferenceSlot
-      tone="default"
-      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-      imageSrc={reference.src}
-      objectKey={reference.objectKey}
-      label={label}
-      ariaLabel={label}
-      title={reference.label}
-      onRemove={onRemove}
-      removeLabel={`删除${label}`}
-    />
-  );
-}
-
 export function ImageCanvasBasicGenerationComposerView({
   dialog,
   style,
@@ -86,12 +104,60 @@ export function ImageCanvasBasicGenerationComposerView({
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
   onRequestUpload,
+  onPickReferenceFromCanvas,
   onToggleReferenceMenu,
   onRememberImageModel = () => {},
   onSubmit,
+  dialogLabel,
+  includeDimensions = true,
+  includeModel = true,
+  includeReferences = true,
+  promptLabel,
+  promptPlaceholder,
+  optionLabelPrefix,
+  dimensionRatioAriaLabelPrefix,
+  dimensionSizeAriaLabelPrefix,
+  referenceUploadTarget = 'generation-reference',
+  referenceButtonIcon = <ImageIcon className="h-4 w-4" aria-hidden="true" />,
+  referenceButtonLabel = '参考图',
+  referenceButtonAriaLabel = '添加参考图',
+  referenceMenuLabel = '参考图来源',
+  referenceSlotTone = 'default',
+  referenceSlotDisabled = false,
+  referenceLabelFormatter,
+  referenceAriaLabelFormatter,
+  referenceRemoveLabelFormatter,
+  showReferenceAddButton = true,
+  formClassName,
+  footerClassName,
+  promptClassName = 'image-canvas-editor__generation-prompt',
+  referenceSlotClassName,
+  submitButtonClassName = 'image-canvas-editor__generation-submit',
+  submitLabel = '生成',
+  submitAriaLabel = '生成',
+  submittingStatusLabel = '生成中',
 }: ImageCanvasBasicGenerationComposerViewProps) {
   const references = dialog.generationReferences ?? [];
   const isQuickEdit = dialog.mode === 'quick-edit';
+  const resolvedDialogLabel =
+    dialogLabel ?? optionLabelPrefix ?? (isQuickEdit ? '改造图片' : '生成图片');
+  const resolvedPromptLabel =
+    promptLabel ?? (isQuickEdit ? '改造提示词' : '生成提示词');
+  const resolvedPromptPlaceholder =
+    promptPlaceholder ??
+    (isQuickEdit ? '想怎么改造这张图？' : '今天想生成什么画面？');
+  const resolvedOptionLabelPrefix =
+    optionLabelPrefix ?? (isQuickEdit ? '改造图片' : '生成图片');
+  const resolvedReferenceButtonLabel = referenceButtonLabel;
+  const resolvedReferenceButtonAriaLabel =
+    referenceButtonAriaLabel ?? `添加${resolvedReferenceButtonLabel}`;
+  const hasReferenceMenu = includeReferences && onRequestUpload;
+  const finalFormClassName =
+    formClassName ??
+    'image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image';
+  const finalFooterClassName =
+    footerClassName ?? 'image-canvas-editor__generation-composer-footer';
+
   useImageCanvasFloatingOptionDismiss({
     isOpen: isGenerationReferenceMenuOpen,
     boundaryRefs: [generationReferenceButtonRef],
@@ -101,10 +167,10 @@ export function ImageCanvasBasicGenerationComposerView({
   return (
     <>
       <form
-        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        className={finalFormClassName}
         style={style}
         role="dialog"
-        aria-label={isQuickEdit ? '改造图片' : '生成图片'}
+        aria-label={resolvedDialogLabel}
         onPointerDown={(event) => event.stopPropagation()}
         onSubmit={(event) => {
           event.preventDefault();
@@ -113,102 +179,133 @@ export function ImageCanvasBasicGenerationComposerView({
           }
         }}
       >
-      <div className="image-canvas-editor__reference-strip">
-        {references.map((reference, index) => (
-          <ReferenceChip
-            key={reference.id}
-            reference={reference}
-            index={index}
-            onRemove={() =>
-              setGenerateDialog((currentDialog) =>
-                currentDialog
-                  ? {
-                      ...resetFailedDialogStatus(currentDialog),
-                      generationReferences: (
-                        currentDialog.generationReferences ?? []
-                      ).filter((item) => item.id !== reference.id),
-                    }
-                  : currentDialog,
-              )
-            }
-          />
-        ))}
-        <ImageCanvasReferenceSlot
-          buttonRef={generationReferenceButtonRef}
-          tone="default"
-          icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-          label="参考图"
-          ariaLabel="添加参考图"
-          disabled={dialog.status === 'generating'}
-          isAdd
-          onClick={() => onToggleReferenceMenu?.()}
-        />
-      </div>
-      <PlatformTextField
-        variant="textarea"
-        aria-label={isQuickEdit ? '改造提示词' : '生成提示词'}
-        value={dialog.prompt}
-        disabled={dialog.status === 'generating'}
-        placeholder={isQuickEdit ? '想怎么改造这张图？' : '今天想生成什么画面？'}
-        size="sm"
-        density="compact"
-        className="image-canvas-editor__generation-prompt"
-        onChange={(event) =>
-          setGenerateDialog((currentDialog) =>
-            currentDialog
-              ? {
-                  ...resetFailedDialogStatus(currentDialog),
-                  prompt: event.target.value,
+        {includeReferences ? (
+          <div className="image-canvas-editor__reference-strip">
+            {references.map((reference, index) => {
+              const label =
+                (referenceLabelFormatter?.(reference, index) ??
+                  reference.label) ||
+                `参考图${index + 1}`;
+              const ariaLabel =
+                referenceAriaLabelFormatter?.(reference, index) ?? label;
+              const removeLabel =
+                referenceRemoveLabelFormatter?.(reference, index) ??
+                `删除${ariaLabel}`;
+
+              return (
+                <ImageCanvasReferenceSlot
+                  key={reference.id}
+                  tone={referenceSlotTone}
+                  icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+                  imageSrc={reference.src}
+                  objectKey={reference.objectKey}
+                  label={label}
+                  ariaLabel={ariaLabel}
+                  title={reference.label}
+                  onRemove={() =>
+                    setGenerateDialog((currentDialog) =>
+                      currentDialog
+                        ? {
+                            ...resetFailedDialogStatus(currentDialog),
+                            generationReferences: (
+                              currentDialog.generationReferences ?? []
+                            ).filter((item) => item.id !== reference.id),
+                          }
+                        : currentDialog,
+                    )
+                  }
+                  removeLabel={removeLabel}
+                  className={referenceSlotClassName}
+                />
+              );
+            })}
+            {showReferenceAddButton ? (
+              <ImageCanvasReferenceSlot
+                buttonRef={generationReferenceButtonRef}
+                tone={referenceSlotTone}
+                icon={referenceButtonIcon}
+                label={resolvedReferenceButtonLabel}
+                ariaLabel={resolvedReferenceButtonAriaLabel}
+                disabled={
+                  dialog.status === 'generating' || referenceSlotDisabled
                 }
-              : currentDialog,
-          )
-        }
-      />
-      <div className="image-canvas-editor__generation-composer-footer">
-        <ImageCanvasGenerationImageOptionsView
-          dialog={dialog}
-          setGenerateDialog={setGenerateDialog}
-          includeDimensions
-          onRememberImageModel={onRememberImageModel}
-          optionLabelPrefix={isQuickEdit ? '改造图片' : '生成图片'}
-          cost={calculateEditorImageGenerationPrice({
-            model: dialog.imageModel,
-            imageSize: dialog.imageSize,
-          })}
-          submitLabel="生成"
-          submitAriaLabel="生成"
-          renderEditorPortal={renderEditorPortal}
-          buildPortalMenuStyle={buildPortalMenuStyle}
+                isAdd
+                onClick={() => onToggleReferenceMenu?.()}
+              />
+            ) : null}
+          </div>
+        ) : null}
+        <PlatformTextField
+          variant="textarea"
+          aria-label={resolvedPromptLabel}
+          value={dialog.prompt}
+          disabled={dialog.status === 'generating'}
+          placeholder={resolvedPromptPlaceholder}
+          size="sm"
+          density="compact"
+          className={promptClassName}
+          onChange={(event) =>
+            setGenerateDialog((currentDialog) =>
+              currentDialog
+                ? {
+                    ...resetFailedDialogStatus(currentDialog),
+                    prompt: event.target.value,
+                  }
+                : currentDialog,
+            )
+          }
         />
-      </div>
-      {dialog.status === 'generating' ? (
-        <PlatformStatusMessage
-          tone="info"
-          surface="platform"
-          size="xs"
-          className="image-canvas-editor__generate-status"
-          role="status"
-        >
-          生成中
-        </PlatformStatusMessage>
-      ) : null}
-      {dialog.status === 'failed' ? (
-        <PlatformStatusMessage
-          tone="error"
-          surface="platform"
-          size="xs"
-          className="image-canvas-editor__generate-status"
-          role="alert"
-        >
-          {dialog.errorMessage}
-        </PlatformStatusMessage>
-      ) : null}
+        <div className={finalFooterClassName}>
+          <ImageCanvasGenerationImageOptionsView
+            dialog={dialog}
+            setGenerateDialog={setGenerateDialog}
+            includeDimensions={includeDimensions}
+            includeModel={includeModel}
+            onRememberImageModel={onRememberImageModel}
+            dimensionRatioAriaLabelPrefix={dimensionRatioAriaLabelPrefix}
+            dimensionSizeAriaLabelPrefix={dimensionSizeAriaLabelPrefix}
+            optionLabelPrefix={resolvedOptionLabelPrefix}
+            cost={calculateEditorImageGenerationPrice({
+              model: dialog.imageModel,
+              imageSize: dialog.imageSize,
+            })}
+            submitLabel={submitLabel}
+            submitAriaLabel={submitAriaLabel}
+            submitButtonClassName={submitButtonClassName}
+            renderEditorPortal={renderEditorPortal}
+            buildPortalMenuStyle={buildPortalMenuStyle}
+          />
+        </div>
+        {dialog.status === 'generating' ? (
+          <PlatformStatusMessage
+            tone="info"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status"
+            role="status"
+          >
+            {submittingStatusLabel}
+          </PlatformStatusMessage>
+        ) : null}
+        {dialog.status === 'failed' ? (
+          <PlatformStatusMessage
+            tone="error"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status"
+            role="alert"
+          >
+            {dialog.errorMessage}
+          </PlatformStatusMessage>
+        ) : null}
       </form>
-      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+      {hasReferenceMenu &&
+      isGenerationReferenceMenuOpen &&
+      generationReferenceButtonRef
         ? renderEditorPortal(
             <PlatformFloatingMenu
               className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="参考图来源"
+              label={referenceMenuLabel}
               placement="top-start"
               style={buildPortalMenuStyle(
                 generationReferenceButtonRef.current,
@@ -218,7 +315,11 @@ export function ImageCanvasBasicGenerationComposerView({
               <PlatformFloatingMenuItem
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
-                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                  if (onPickReferenceFromCanvas) {
+                    onPickReferenceFromCanvas();
+                  } else {
+                    setIsPickingGenerationReferenceFromCanvas?.(true);
+                  }
                 }}
               >
                 从画布中选择
@@ -227,7 +328,7 @@ export function ImageCanvasBasicGenerationComposerView({
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
                   setIsPickingGenerationReferenceFromCanvas?.(false);
-                  onRequestUpload('generation-reference');
+                  onRequestUpload(referenceUploadTarget);
                 }}
               >
                 上传图片
diff --git a/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx b/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
index 78b2ce32b..de12533d6 100644
--- a/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
+++ b/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
@@ -1,13 +1,11 @@
 import { type Dispatch, type SetStateAction } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
 import {
   calculateEditorImageGenerationPrice,
   IMAGE_MODEL_GPT_IMAGE_2,
 } from './ImageCanvasGenerationModel';
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import type { GenerateDialogState } from './ImageCanvasEditorTypes';
 
 type ImageCanvasEditGenerationModalViewProps = {
@@ -40,70 +38,32 @@ export function ImageCanvasEditGenerationModalView({
       bodyClassName="image-canvas-editor__generate-dialog-body"
     >
       {dialog?.mode === 'edit' ? (
-        <form
-          className="image-canvas-editor__generate-form"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (dialog.status !== 'generating') {
-              onSubmit(dialog);
-            }
+        <ImageCanvasBasicGenerationComposerView
+          dialog={{
+            ...dialog,
+            mode: 'edit',
+            imageModel: IMAGE_MODEL_GPT_IMAGE_2,
+            aspectRatio: dialog.aspectRatio ?? '1:1',
+            imageSize: dialog.imageSize ?? '1K',
+            generationReferences: [],
           }}
-        >
-          <div className="image-canvas-editor__generate-body">
-            <PlatformTextField
-              variant="textarea"
-              aria-label="生成提示词"
-              value={dialog.prompt}
-              disabled={dialog.status === 'generating'}
-              size="sm"
-              density="roomy"
-              className="image-canvas-editor__generate-prompt"
-              placeholder="描述你想如何修改这张图片"
-              onChange={(event) =>
-                setGenerateDialog((currentDialog) =>
-                  currentDialog
-                    ? {
-                        ...currentDialog,
-                        prompt: event.target.value,
-                      }
-                    : currentDialog,
-                )
-              }
-            />
-            {dialog.status === 'generating' ? (
-              <PlatformStatusMessage
-                tone="info"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status"
-                role="status"
-              >
-                修改中
-              </PlatformStatusMessage>
-            ) : null}
-            {dialog.status === 'failed' ? (
-              <PlatformStatusMessage
-                tone="error"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status"
-                role="alert"
-              >
-                {dialog.errorMessage}
-              </PlatformStatusMessage>
-            ) : null}
-            <PlatformActionButton
-              type="submit"
-              size="sm"
-              className="image-canvas-editor__generate-submit"
-              disabled={dialog.status === 'generating'}
-            >
-              {dialog.status === 'generating'
-                ? '修改中'
-                : `修改${editPrice}泥点`}
-            </PlatformActionButton>
-          </div>
-        </form>
+          style={{}}
+          setGenerateDialog={setGenerateDialog}
+          onRequestUpload={() => {}}
+          onSubmit={onSubmit}
+          dialogLabel="修改图片"
+          includeDimensions={false}
+          includeModel={false}
+          includeReferences={false}
+          promptPlaceholder="描述你想如何修改这张图片"
+          submitLabel="修改"
+          submitAriaLabel={`修改${editPrice}泥点`}
+          submittingStatusLabel="修改中"
+          formClassName="image-canvas-editor__generate-form"
+          footerClassName="image-canvas-editor__generate-body"
+          promptClassName="image-canvas-editor__generate-prompt"
+          submitButtonClassName="image-canvas-editor__generate-submit"
+        />
       ) : null}
     </UnifiedModal>
   );
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index cfddaad89..1a3c89c52 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -28,8 +28,11 @@ type ImageCanvasGenerationImageOptionsViewProps = {
   dialog: GenerateDialogState;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   includeDimensions: boolean;
+  includeModel?: boolean;
   onRememberImageModel: (model: string) => void;
   optionLabelPrefix?: string;
+  dimensionRatioAriaLabelPrefix?: string;
+  dimensionSizeAriaLabelPrefix?: string;
   cost?: number;
   submitLabel?: string;
   submitAriaLabel?: string;
@@ -87,11 +90,13 @@ function OptionChoice({
   children,
   selected,
   className,
+  ariaLabel,
   onClick,
 }: {
   children: ReactNode;
   selected: boolean;
   className?: string;
+  ariaLabel?: string;
   onClick: () => void;
 }) {
   return (
@@ -100,6 +105,7 @@ function OptionChoice({
       className={['image-canvas-editor__option-popover-choice', className]
         .filter(Boolean)
         .join(' ')}
+      aria-label={ariaLabel}
       aria-pressed={selected}
       onClick={onClick}
     >
@@ -112,8 +118,11 @@ export function ImageCanvasGenerationImageOptionsView({
   dialog,
   setGenerateDialog,
   includeDimensions,
+  includeModel = true,
   onRememberImageModel,
   optionLabelPrefix,
+  dimensionRatioAriaLabelPrefix,
+  dimensionSizeAriaLabelPrefix,
   cost,
   submitLabel = '生成',
   submitAriaLabel = '生成',
@@ -138,10 +147,15 @@ export function ImageCanvasGenerationImageOptionsView({
     imageSize: selection.imageSize,
   });
   const isGenerating = dialog.status === 'generating';
-  const isModelLocked = Boolean(normalizedLockedModel);
+  const isModelLocked = Boolean(normalizedLockedModel) && includeModel;
   const labelPrefix = optionLabelPrefix ?? '生成图片';
+  const ratioAriaLabelPrefix = dimensionRatioAriaLabelPrefix?.trim() ?? '';
+  const sizeAriaLabelPrefix = dimensionSizeAriaLabelPrefix?.trim() ?? '';
   const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
 
+  const formatDimensionOptionLabel = (prefix: string, value: string) =>
+    prefix ? `${prefix} ${value}` : value;
+
   useImageCanvasFloatingOptionDismiss({
     isOpen: openPanel !== null,
     boundaryRefs: [dimensionsButtonRef, modelButtonRef],
@@ -236,6 +250,10 @@ export function ImageCanvasGenerationImageOptionsView({
                             key={aspectRatio}
                             selected={selection.aspectRatio === aspectRatio}
                             className="image-canvas-editor__option-popover-choice--ratio"
+                            ariaLabel={formatDimensionOptionLabel(
+                              ratioAriaLabelPrefix,
+                              aspectRatio,
+                            )}
                             onClick={() => updateDialog({ aspectRatio })}
                           >
                             <span
@@ -257,6 +275,10 @@ export function ImageCanvasGenerationImageOptionsView({
                           <OptionChoice
                             key={imageSize}
                             selected={selection.imageSize === imageSize}
+                            ariaLabel={formatDimensionOptionLabel(
+                              sizeAriaLabelPrefix,
+                              imageSize,
+                            )}
                             onClick={() => updateDialog({ imageSize })}
                           >
                             {imageSize}
@@ -270,80 +292,82 @@ export function ImageCanvasGenerationImageOptionsView({
             : null}
         </div>
       ) : null}
-      <div
-        className={[
-          'image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model',
-          isModelLocked
-            ? 'image-canvas-editor__readonly-generation-option'
-            : '',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <PlatformInlineOptionButton
-          ref={modelButtonRef}
-          className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-          aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
-          aria-expanded={isModelLocked ? undefined : openPanel === 'model'}
-          disabled={isGenerating || isModelLocked}
-          trailingIcon={
-            isModelLocked ? undefined : <ChevronDown className="h-3 w-3" />
-          }
-          onClick={() => {
-            if (!isModelLocked) {
-              togglePanel('model');
-            }
-          }}
+      {includeModel ? (
+        <div
+          className={[
+            'image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model',
+            isModelLocked
+              ? 'image-canvas-editor__readonly-generation-option'
+              : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
         >
-          <span className="image-canvas-editor__model-trigger-label">
-            <span
-              className="image-canvas-editor__model-icon"
-              aria-hidden="true"
-            >
-              <Cpu />
-            </span>
-            <span>{selectedModelLabel}</span>
-          </span>
-        </PlatformInlineOptionButton>
-        {!isModelLocked && openPanel === 'model'
-          ? renderEditorPortal(
-              <PlatformFloatingMenu
-                className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
-                label={`${labelPrefix}模型选项`}
-                placement="top-start"
-                style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
-                onPointerDown={(event) => event.stopPropagation()}
+          <PlatformInlineOptionButton
+            ref={modelButtonRef}
+            className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+            aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
+            aria-expanded={isModelLocked ? undefined : openPanel === 'model'}
+            disabled={isGenerating || isModelLocked}
+            trailingIcon={
+              isModelLocked ? undefined : <ChevronDown className="h-3 w-3" />
+            }
+            onClick={() => {
+              if (!isModelLocked) {
+                togglePanel('model');
+              }
+            }}
+          >
+            <span className="image-canvas-editor__model-trigger-label">
+              <span
+                className="image-canvas-editor__model-icon"
+                aria-hidden="true"
               >
-                <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
-                  {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-                    const selected = selection.model === option.value;
-                    return (
-                      <OptionChoice
-                        key={option.value}
-                        selected={selected}
-                        className="image-canvas-editor__option-popover-choice--model"
-                        onClick={() => updateImageModel(option.value)}
-                      >
-                        <span
-                          className="image-canvas-editor__model-icon"
-                          aria-hidden="true"
+                <Cpu />
+              </span>
+              <span>{selectedModelLabel}</span>
+            </span>
+          </PlatformInlineOptionButton>
+          {!isModelLocked && openPanel === 'model'
+            ? renderEditorPortal(
+                <PlatformFloatingMenu
+                  className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
+                  label={`${labelPrefix}模型选项`}
+                  placement="top-start"
+                  style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                  onPointerDown={(event) => event.stopPropagation()}
+                >
+                  <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                    {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
+                      const selected = selection.model === option.value;
+                      return (
+                        <OptionChoice
+                          key={option.value}
+                          selected={selected}
+                          className="image-canvas-editor__option-popover-choice--model"
+                          onClick={() => updateImageModel(option.value)}
                         >
-                          <Cpu />
-                        </span>
-                        <span>{option.label}</span>
-                        <Check
-                          className="image-canvas-editor__option-selected-check"
-                          data-visible={selected}
-                          aria-hidden="true"
-                        />
-                      </OptionChoice>
-                    );
-                  })}
-                </div>
-              </PlatformFloatingMenu>,
-            )
-          : null}
-      </div>
+                          <span
+                            className="image-canvas-editor__model-icon"
+                            aria-hidden="true"
+                          >
+                            <Cpu />
+                          </span>
+                          <span>{option.label}</span>
+                          <Check
+                            className="image-canvas-editor__option-selected-check"
+                            data-visible={selected}
+                            aria-hidden="true"
+                          />
+                        </OptionChoice>
+                      );
+                    })}
+                  </div>
+                </PlatformFloatingMenu>,
+              )
+            : null}
+        </div>
+      ) : null}
       {typeof cost === 'number' ? (
         <PlatformActionButton
           type="submit"
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
index b21e18524..60dfd6f91 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
@@ -1,42 +1,22 @@
-import { Check, ChevronDown, Cpu, ImageIcon, ImagePlus } from 'lucide-react';
+import { ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
-  type ReactNode,
   type RefObject,
   type SetStateAction,
-  useCallback,
-  useRef,
-  useState,
+  type ReactNode,
 } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import {
-  PlatformFloatingMenu,
-  PlatformFloatingMenuItem,
-} from '../common/PlatformFloatingMenu';
-import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
+import { QUICK_EDIT_REFERENCE_LIMIT } from './ImageCanvasGenerationModel';
 import type {
   CanvasLayer,
-  CharacterReferenceImage,
+  GenerateDialogState,
   QuickEditPanelState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
-import {
-  calculateEditorImageModelPrice,
-  EDITOR_IMAGE_DIMENSION_OPTIONS,
-  EDITOR_IMAGE_MODEL_OPTIONS,
-  getEditorImageModelDisplayName,
-  IMAGE_MODEL_NANOBANANA2,
-  normalizeEditorImageModel,
-  QUICK_EDIT_REFERENCE_LIMIT,
-  resolveEditorImageSizeLabel,
-} from './ImageCanvasGenerationModel';
-import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
-type ImageCanvasQuickEditPanelViewProps = {
+export type ImageCanvasQuickEditPanelViewProps = {
   panel: QuickEditPanelState;
   sourceLayer: CanvasLayer;
   style: CSSProperties;
@@ -50,16 +30,14 @@ type ImageCanvasQuickEditPanelViewProps = {
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
-  onRequestUpload?: (target: 'quick-edit-reference') => void;
+  onRequestUpload?: (target: UploadTarget) => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit: () => void;
 };
 
-type OpenPanel = 'dimensions' | 'model' | null;
-
-function resetFailedPanelStatus<T extends { status: string; errorMessage?: string }>(
-  panel: T,
-) {
+function resetFailedPanelStatus<
+  T extends { status: string; errorMessage?: string },
+>(panel: T) {
   return {
     ...panel,
     status: panel.status === 'failed' ? 'idle' : panel.status,
@@ -67,88 +45,44 @@ function resetFailedPanelStatus<T extends { status: string; errorMessage?: strin
   };
 }
 
-function QuickEditReferenceChip({
-  reference,
-  index,
-  onRemove,
-}: {
-  reference: CharacterReferenceImage;
-  index: number;
-  onRemove: () => void;
-}) {
-  const label = `图${index + 1}`;
-  return (
-    <ImageCanvasReferenceSlot
-      tone="quick-edit"
-      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-      imageSrc={reference.src}
-      objectKey={reference.objectKey}
-      label={label}
-      ariaLabel={label}
-      title={reference.label}
-      onRemove={onRemove}
-      removeLabel={`删除${label}`}
-    />
-  );
+function createQuickEditDialog(
+  panel: QuickEditPanelState,
+): GenerateDialogState {
+  return {
+    mode: panel.mode ?? 'quick-edit',
+    prompt: panel.prompt,
+    status: panel.status,
+    sourceLayerId: panel.sourceLayerId,
+    generationReferences: panel.quickEditReferences,
+    imageModel: panel.model,
+    aspectRatio: panel.aspectRatio,
+    imageSize: panel.imageSize,
+  };
 }
 
-function getImageDimensionOptions(model: string | null | undefined) {
-  return (
-    EDITOR_IMAGE_DIMENSION_OPTIONS[
-      (normalizeEditorImageModel(model) ??
-        IMAGE_MODEL_NANOBANANA2) as keyof typeof EDITOR_IMAGE_DIMENSION_OPTIONS
-    ] ?? EDITOR_IMAGE_DIMENSION_OPTIONS[IMAGE_MODEL_NANOBANANA2]
-  );
-}
-
-function getPanelAspectRatio(panel: QuickEditPanelState) {
-  const options = getImageDimensionOptions(panel.model);
-  const aspectRatios = options.aspectRatios as readonly string[];
-  return panel.aspectRatio && aspectRatios.includes(panel.aspectRatio)
-    ? panel.aspectRatio
-    : (options.aspectRatios[0] ?? '1:1');
-}
-
-function getPanelImageSize(panel: QuickEditPanelState) {
-  const options = getImageDimensionOptions(panel.model);
-  const imageSizes = options.imageSizes as readonly string[];
-  return panel.imageSize && imageSizes.includes(panel.imageSize)
-    ? panel.imageSize
-    : (options.imageSizes.find((size) => size === '1K') ??
-        options.imageSizes[0] ??
-        '1K');
-}
-
-function QuickEditOptionChoice({
-  children,
-  selected,
-  className,
-  ariaLabel,
-  onClick,
-}: {
-  children: ReactNode;
-  selected: boolean;
-  className?: string;
-  ariaLabel?: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      className={['image-canvas-editor__option-popover-choice', className]
-        .filter(Boolean)
-        .join(' ')}
-      aria-pressed={selected}
-      aria-label={ariaLabel}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
+function syncPanelFromDialogUpdate(
+  panel: QuickEditPanelState,
+  dialog: GenerateDialogState,
+) {
+  const normalizedPanel = resetFailedPanelStatus(panel);
+  const normalizedDialog = resetFailedPanelStatus(dialog);
+  return {
+    ...normalizedPanel,
+    size: panel.size,
+    prompt: dialog.prompt,
+    aspectRatio:
+      normalizedDialog.aspectRatio ?? normalizedPanel.aspectRatio ?? '1:1',
+    imageSize: normalizedDialog.imageSize ?? normalizedPanel.imageSize ?? '1K',
+    model: normalizedDialog.imageModel ?? normalizedPanel.model,
+    quickEditReferences: normalizedDialog.generationReferences,
+    status: normalizedDialog.status,
+    errorMessage: normalizedDialog.errorMessage,
+  };
 }
 
 export function ImageCanvasQuickEditPanelView({
   panel,
+  sourceLayer,
   style,
   referenceButtonRef,
   isReferenceMenuOpen = false,
@@ -157,333 +91,82 @@ export function ImageCanvasQuickEditPanelView({
   setQuickEditPanel,
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
-  onRequestUpload = () => {},
+  onRequestUpload,
   onRememberImageModel = () => {},
   onSubmit,
 }: ImageCanvasQuickEditPanelViewProps) {
-  const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
-  const dimensionsButtonRef = useRef<HTMLButtonElement | null>(null);
-  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
+  void sourceLayer;
+
   const isRedraw = panel.mode === 'redraw';
-  const isGenerating = panel.status === 'generating';
-  const panelLabel = isRedraw ? '重绘图片' : '快速编辑图片';
-  const promptLabel = isRedraw ? '重绘提示词' : '快速编辑提示词';
-  const references = panel.quickEditReferences ?? [];
-  const selectedModel = normalizeEditorImageModel(panel.model);
-  const selectedModelLabel = getEditorImageModelDisplayName(selectedModel);
-  const dimensionOptions = getImageDimensionOptions(selectedModel);
-  const selectedAspectRatio = getPanelAspectRatio(panel);
-  const selectedImageSize = getPanelImageSize(panel);
-  const dimensionLabel = resolveEditorImageSizeLabel({
-    aspectRatio: selectedAspectRatio,
-    imageSize: selectedImageSize,
-  });
+  const referenceCount = panel.quickEditReferences?.length ?? 0;
   const canAddReferences =
-    !isRedraw && !isGenerating && references.length < QUICK_EDIT_REFERENCE_LIMIT;
-  const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
-
-  useImageCanvasFloatingOptionDismiss({
-    isOpen: openPanel !== null,
-    boundaryRefs: [dimensionsButtonRef, modelButtonRef],
-    onDismiss: dismissOpenPanel,
-  });
-
-  const updatePanel = (patch: Partial<QuickEditPanelState>) => {
-    setQuickEditPanel((currentPanel) =>
-      currentPanel
-        ? {
-            ...resetFailedPanelStatus(currentPanel),
-            ...patch,
-          }
-        : currentPanel,
-    );
-  };
-
-  const updateModel = (model: string) => {
-    const nextOptions = getImageDimensionOptions(model);
-    const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
-    const nextImageSizes = nextOptions.imageSizes as readonly string[];
-    onRememberImageModel(model);
-    setQuickEditPanel((currentPanel) => {
-      if (!currentPanel) {
-        return currentPanel;
-      }
-      return {
-        ...resetFailedPanelStatus(currentPanel),
-        model,
-        aspectRatio:
-          currentPanel.aspectRatio &&
-          nextAspectRatios.includes(currentPanel.aspectRatio)
-            ? currentPanel.aspectRatio
-            : (nextOptions.aspectRatios[0] ?? '1:1'),
-        imageSize:
-          currentPanel.imageSize && nextImageSizes.includes(currentPanel.imageSize)
-            ? currentPanel.imageSize
-            : (nextOptions.imageSizes.find((size) => size === '1K') ??
-              nextOptions.imageSizes[0]),
-      };
-    });
-  };
-
-  const togglePanel = (nextPanel: Exclude<OpenPanel, null>) => {
-    setOpenPanel((currentPanel) =>
-      currentPanel === nextPanel ? null : nextPanel,
-    );
-  };
+    !isRedraw && referenceCount < QUICK_EDIT_REFERENCE_LIMIT;
+  const quickEditDialog = createQuickEditDialog(panel);
 
   return (
-    <>
-      <form
-        className="image-canvas-editor__quick-edit-panel image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--quick-edit"
-        style={style}
-        role="dialog"
-        aria-label={panelLabel}
-        onPointerDown={(event) => event.stopPropagation()}
-        onSubmit={(event) => {
-          event.preventDefault();
-          onSubmit();
-        }}
-      >
-        <div className="image-canvas-editor__reference-strip">
-          {!isRedraw
-            ? references.map((reference, index) => (
-                <QuickEditReferenceChip
-                  key={reference.id}
-                  reference={reference}
-                  index={index}
-                  onRemove={() =>
-                    setQuickEditPanel((currentPanel) =>
-                      currentPanel
-                        ? {
-                            ...resetFailedPanelStatus(currentPanel),
-                            quickEditReferences: (
-                              currentPanel.quickEditReferences ?? []
-                            ).filter((item) => item.id !== reference.id),
-                          }
-                        : currentPanel,
-                    )
-                  }
-                />
-              ))
-            : null}
-          {!isRedraw ? (
-            <ImageCanvasReferenceSlot
-              buttonRef={referenceButtonRef}
-              tone="quick-edit"
-              icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
-              label="参考图"
-              ariaLabel="添加快速编辑参考图"
-              disabled={!canAddReferences}
-              isAdd
-              onClick={() => setIsReferenceMenuOpen?.((open) => !open)}
-            />
-          ) : null}
-        </div>
-        <PlatformTextField
-          variant="textarea"
-          aria-label={promptLabel}
-          value={panel.prompt}
-          disabled={isGenerating}
-          size="sm"
-          density="compact"
-          className="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
-          onChange={(event) =>
-            updatePanel({
-              prompt: event.target.value,
-            })
+    <ImageCanvasBasicGenerationComposerView
+      dialog={quickEditDialog}
+      style={style}
+      setGenerateDialog={(valueOrUpdater) => {
+        setQuickEditPanel((currentPanel) => {
+          if (!currentPanel) {
+            return currentPanel;
           }
-        />
-        {panel.status === 'failed' ? (
-          <PlatformStatusMessage
-            tone="error"
-            surface="platform"
-            size="xs"
-            className="image-canvas-editor__generate-status"
-            role="alert"
-          >
-            {panel.errorMessage}
-          </PlatformStatusMessage>
-        ) : null}
-        <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer">
-          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
-            <PlatformInlineOptionButton
-              ref={dimensionsButtonRef}
-              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}尺寸 ${dimensionLabel}`}
-              aria-expanded={openPanel === 'dimensions'}
-              disabled={isGenerating}
-              trailingIcon={<ChevronDown className="h-3 w-3" />}
-              onClick={() => togglePanel('dimensions')}
-            >
-              {dimensionLabel}
-            </PlatformInlineOptionButton>
-            {openPanel === 'dimensions'
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
-                    label={`${isRedraw ? '重绘' : '快速编辑'}尺寸选项`}
-                    placement="top-start"
-                    style={buildPortalMenuStyle(
-                      dimensionsButtonRef.current,
-                      'above',
-                    )}
-                    onPointerDown={(event) => event.stopPropagation()}
-                  >
-                    <div className="image-canvas-editor__option-popover-sections">
-                      <div className="image-canvas-editor__option-popover-section">
-                        <span className="image-canvas-editor__option-popover-title">
-                          比例
-                        </span>
-                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
-                          {dimensionOptions.aspectRatios.map((aspectRatio) => (
-                            <QuickEditOptionChoice
-                              key={aspectRatio}
-                              selected={selectedAspectRatio === aspectRatio}
-                              className="image-canvas-editor__option-popover-choice--ratio"
-                              ariaLabel={`比例 ${aspectRatio}`}
-                              onClick={() => updatePanel({ aspectRatio })}
-                            >
-                              <span
-                                className="image-canvas-editor__ratio-wireframe"
-                                data-ratio={aspectRatio}
-                                aria-hidden="true"
-                              />
-                              <span>{aspectRatio}</span>
-                            </QuickEditOptionChoice>
-                          ))}
-                        </div>
-                      </div>
-                      <div className="image-canvas-editor__option-popover-section">
-                        <span className="image-canvas-editor__option-popover-title">
-                          尺寸
-                        </span>
-                        <div className="image-canvas-editor__option-popover-items">
-                          {dimensionOptions.imageSizes.map((imageSize) => (
-                            <QuickEditOptionChoice
-                              key={imageSize}
-                              selected={selectedImageSize === imageSize}
-                              ariaLabel={`尺寸 ${imageSize}`}
-                              onClick={() => updatePanel({ imageSize })}
-                            >
-                              {imageSize}
-                            </QuickEditOptionChoice>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
-            <PlatformInlineOptionButton
-              ref={modelButtonRef}
-              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}模型 ${selectedModelLabel}`}
-              aria-expanded={openPanel === 'model'}
-              disabled={isGenerating}
-              trailingIcon={<ChevronDown className="h-3 w-3" />}
-              onClick={() => togglePanel('model')}
-            >
-              <span className="image-canvas-editor__model-trigger-label">
-                <span
-                  className="image-canvas-editor__model-icon"
-                  aria-hidden="true"
-                >
-                  <Cpu />
-                </span>
-                <span>{selectedModelLabel}</span>
-              </span>
-            </PlatformInlineOptionButton>
-            {openPanel === 'model'
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
-                    label={`${isRedraw ? '重绘' : '快速编辑'}模型选项`}
-                    placement="top-start"
-                    style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
-                    onPointerDown={(event) => event.stopPropagation()}
-                  >
-                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
-                      {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-                        const selected = selectedModel === option.value;
-                        return (
-                          <QuickEditOptionChoice
-                            key={option.value}
-                            selected={selected}
-                            className="image-canvas-editor__option-popover-choice--model"
-                            onClick={() => updateModel(option.value)}
-                          >
-                            <span
-                              className="image-canvas-editor__model-icon"
-                              aria-hidden="true"
-                            >
-                              <Cpu />
-                            </span>
-                            <span>{option.label}</span>
-                            <Check
-                              className="image-canvas-editor__option-selected-check"
-                              data-visible={selected}
-                              aria-hidden="true"
-                            />
-                          </QuickEditOptionChoice>
-                        );
-                      })}
-                    </div>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-          <PlatformActionButton
-            type="submit"
-            tone="secondary"
-            size="xs"
-            shape="pill"
-            className="image-canvas-editor__generation-submit image-canvas-editor__quick-edit-submit"
-            disabled={isGenerating}
-            aria-label={isGenerating ? '生成中' : '生成'}
-          >
-            {isGenerating ? (
-              '生成中'
-            ) : (
-              <>
-                <span>生成</span>
-                <span className="image-canvas-editor__mud-point-inline">
-                  {calculateEditorImageModelPrice(panel.model, selectedImageSize)}泥点
-                </span>
-              </>
-            )}
-          </PlatformActionButton>
-        </div>
-      </form>
-      {!isRedraw && isReferenceMenuOpen && referenceButtonRef
-        ? renderEditorPortal(
-            <PlatformFloatingMenu
-              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="快速编辑参考图来源"
-              placement="top-start"
-              style={buildPortalMenuStyle(referenceButtonRef.current, 'above')}
-            >
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsReferenceMenuOpen?.(false);
-                  setIsPickingQuickEditReferenceFromCanvas?.(true);
-                }}
-              >
-                从画布中选择
-              </PlatformFloatingMenuItem>
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsReferenceMenuOpen?.(false);
-                  setIsPickingQuickEditReferenceFromCanvas?.(false);
-                  onRequestUpload('quick-edit-reference');
-                }}
-              >
-                上传图片
-              </PlatformFloatingMenuItem>
-            </PlatformFloatingMenu>,
-          )
-        : null}
-    </>
+          const currentDialog = createQuickEditDialog(currentPanel);
+          const nextDialog =
+            typeof valueOrUpdater === 'function'
+              ? valueOrUpdater(currentDialog)
+              : valueOrUpdater;
+          if (!nextDialog) {
+            return currentPanel;
+          }
+          return syncPanelFromDialogUpdate(currentPanel, nextDialog);
+        });
+      }}
+      generationReferenceButtonRef={referenceButtonRef}
+      isGenerationReferenceMenuOpen={isReferenceMenuOpen}
+      setIsGenerationReferenceMenuOpen={setIsReferenceMenuOpen}
+      setIsPickingGenerationReferenceFromCanvas={
+        setIsPickingQuickEditReferenceFromCanvas
+      }
+      onRequestUpload={onRequestUpload ?? (() => {})}
+      onPickReferenceFromCanvas={() =>
+        setIsPickingQuickEditReferenceFromCanvas?.(true)
+      }
+      onToggleReferenceMenu={() => setIsReferenceMenuOpen?.((open) => !open)}
+      onRememberImageModel={onRememberImageModel}
+      onSubmit={onSubmit}
+      dialogLabel={isRedraw ? '重绘图片' : '改造图片'}
+      includeDimensions={true}
+      includeModel={true}
+      includeReferences={!isRedraw}
+      promptLabel={isRedraw ? '重绘提示词' : '快速编辑提示词'}
+      promptPlaceholder={
+        isRedraw ? '把画面重绘成什么样？' : '想怎么改造这张图？'
+      }
+      optionLabelPrefix={isRedraw ? '重绘' : '快速编辑'}
+      dimensionRatioAriaLabelPrefix="比例"
+      dimensionSizeAriaLabelPrefix="尺寸"
+      referenceUploadTarget="quick-edit-reference"
+      referenceButtonLabel={isRedraw ? '' : '添加快速编辑参考图'}
+      referenceButtonAriaLabel={isRedraw ? undefined : '添加快速编辑参考图'}
+      referenceMenuLabel={isRedraw ? '' : '快速编辑参考图来源'}
+      referenceSlotTone="quick-edit"
+      referenceSlotDisabled={!canAddReferences}
+      showReferenceAddButton={!isRedraw}
+      referenceLabelFormatter={(_, index) => `图${index + 1}`}
+      referenceAriaLabelFormatter={(_, index) => `图${index + 1}`}
+      referenceRemoveLabelFormatter={(_, index) => `删除图${index + 1}`}
+      formClassName="image-canvas-editor__quick-edit-panel image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--quick-edit"
+      footerClassName="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer"
+      promptClassName="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
+      referenceSlotClassName="image-canvas-editor__quick-edit-reference"
+      submitButtonClassName="image-canvas-editor__generation-submit image-canvas-editor__quick-edit-submit"
+      submitLabel="生成"
+      submitAriaLabel="生成"
+      submittingStatusLabel="生成中"
+      renderEditorPortal={renderEditorPortal}
+      buildPortalMenuStyle={buildPortalMenuStyle}
+    />
   );
 }