feat: 批量创作表增加完整生成设置对话框，参考图上限提升到10

- 新增 BatchGenerationSettingsDialog 组件：模型选择 + 图像质量/尺寸/宽高比/透明背景/生成张数 - 替换原简单确认框为完整设置面板，用户可在生成前调整参数 - 参考图列上限从 6 提升到 10，列宽调整为 72px 以适配
2026-09-19 13:35:15 +08:00
parent caa02a1307
commit 97e6b045d9
4 changed files with 360 additions and 204 deletions
--- a/web/src/components/canvas/batch-generation-settings-dialog.tsx
+++ b/web/src/components/canvas/batch-generation-settings-dialog.tsx
@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import { Button, Modal } from "antd";
+import { WandSparkles, X } from "lucide-react";
+
+import { ImageSettingsPanel } from "@/components/image-settings-panel";
+import { ModelPicker } from "@/components/model-picker";
+import { canvasThemes } from "@/lib/canvas-theme";
+import { defaultImageParamsForModel } from "@/lib/model-selection";
+import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store";
+import type { AiConfig } from "@/stores/use-config-store";
+
+export type BatchGenerationSettings = Pick<AiConfig, "model" | "imageModel" | "quality" | "size" | "transparentBackground" | "count">;
+
+type BatchGenerationSettingsDialogProps = {
+    open: boolean;
+    config: AiConfig;
+    rowCount: number;
+    concurrency: number;
+    onClose: () => void;
+    onConfirm: (settings: BatchGenerationSettings) => void;
+};
+
+export function BatchGenerationSettingsDialog({ open, config, rowCount, concurrency, onClose, onConfirm }: BatchGenerationSettingsDialogProps) {
+    const theme = canvasThemes[useActiveTheme()];
+    const [generationConfig, setGenerationConfig] = useState<AiConfig>(config);
+
+    useEffect(() => {
+        if (open) setGenerationConfig(config);
+    }, [config, open]);
+
+    const handleConfigChange = (key: "quality" | "size" | "transparentBackground" | "count", value: string) => {
+        setGenerationConfig((current) => ({ ...current, [key]: value }));
+    };
+
+    const handleModelChange = (model: string) => {
+        setGenerationConfig((current) => ({ ...current, model, imageModel: model, ...defaultImageParamsForModel(current, model) }));
+    };
+
+    const imageModel = generationConfig.imageModel || generationConfig.model;
+
+    return (
+        <Modal
+            open={open}
+            onCancel={onClose}
+            footer={null}
+            centered
+            destroyOnHidden
+            width={480}
+            title="批量生成设置"
+        >
+            <div className="flex flex-col gap-4 py-2">
+                <div className="rounded-lg bg-black/5 px-3 py-2 text-sm dark:bg-white/[0.04]">
+                    共 <span className="font-semibold">{rowCount}</span> 个未完成任务 · 并发上限 <span className="font-semibold">{concurrency}</span>
+                </div>
+
+                <div className="space-y-2">
+                    <div className="text-sm font-medium opacity-75">生成模型</div>
+                    <ModelPicker
+                        config={generationConfig}
+                        value={imageModel}
+                        capability="image"
+                        fullWidth
+                        showSelectedPrice={false}
+                        onChange={handleModelChange}
+                    />
+                </div>
+
+                <div className="border-t pt-3" style={{ borderColor: theme.node.stroke }}>
+                    <ImageSettingsPanel
+                        config={generationConfig}
+                        onConfigChange={handleConfigChange}
+                        theme={theme}
+                        showTitle={false}
+                        showCount={true}
+                        quickCount={4}
+                        maxCount={10}
+                        className="w-full space-y-3"
+                    />
+                </div>
+
+                <div className="mt-2 flex justify-end gap-2">
+                    <Button icon={<X className="size-4" />} onClick={onClose}>取消</Button>
+                    <Button
+                        type="primary"
+                        icon={<WandSparkles className="size-4" />}
+                        onClick={() => onConfirm({
+                            model: generationConfig.model,
+                            imageModel: generationConfig.imageModel,
+                            quality: generationConfig.quality,
+                            size: generationConfig.size,
+                            transparentBackground: generationConfig.transparentBackground,
+                            count: generationConfig.count,
+                        })}
+                    >
+                        开始生成 {rowCount} 个任务
+                    </Button>
+                </div>
+            </div>
+        </Modal>
+    );
+}