feat(canvas): enhance configuration node with new input handling and reference selection features

web/src/app/(user)/canvas/components/canvas-config-node-panel.tsx

@@ -1,41 +1,29 @@
 "use client";
 
 import type { CSSProperties } from "react";
-import { useState } from "react";
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Edit3, Eye, Image as ImageIcon, LoaderCircle, MessageSquare, Music2, Play, Video } from "lucide-react";
-import { App, Button, Empty, Modal, Segmented } from "antd";
+import { Image as ImageIcon, LoaderCircle, MessageSquare, Music2, Play, Settings2, Video } from "lucide-react";
+import { Button, Segmented } from "antd";
 
 import { ModelPicker } from "@/components/model-picker";
 import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
 import { CreditSymbol, requestCreditCost } from "@/constant/credits";
 import { canvasThemes } from "@/lib/canvas-theme";
-import { imageReferenceLabel } from "@/lib/image-reference-prompt";
-import { seedanceReferenceLabel } from "@/lib/seedance-video";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
 import { CanvasAudioSettingsPopover, type CanvasAudioSettingKey } from "./canvas-audio-settings-popover";
-import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
 import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
-import type { NodeGenerationInput } from "./canvas-node-generation";
 import type { CanvasGenerationMode, CanvasNodeData, CanvasNodeMetadata } from "../types";
-import type { CanvasResourceReference } from "../utils/canvas-resource-references";
 
 type CanvasConfigNodePanelProps = {
     node: CanvasNodeData;
     isRunning: boolean;
     inputSummary: { textCount: number; imageCount: number; videoCount: number; audioCount: number };
-    inputs: NodeGenerationInput[];
-    mentionReferences?: CanvasResourceReference[];
     onConfigChange: (nodeId: string, patch: Partial<CanvasNodeMetadata>) => void;
-    onTextInputChange: (nodeId: string, content: string) => void;
     onGenerate: (nodeId: string) => void;
+    onComposerToggle: () => void;
 };
 
-export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, mentionReferences = [], onConfigChange, onTextInputChange, onGenerate }: CanvasConfigNodePanelProps) {
-    const { message } = App.useApp();
-    const [previewOpen, setPreviewOpen] = useState(false);
-    const [editingTextId, setEditingTextId] = useState<string | null>(null);
-    const [editingText, setEditingText] = useState("");
+export function CanvasConfigNodePanel({ node, isRunning, inputSummary, onConfigChange, onGenerate, onComposerToggle }: CanvasConfigNodePanelProps) {
     const globalConfig = useEffectiveConfig();
     const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
@@ -45,37 +33,9 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, m
     const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
     const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: config.model, count: mode === "image" ? count : 1 });
     const chipStyle = { background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text };
-    const textInputs = inputs.filter((input) => input.type === "text");
-    const imageInputs = inputs.filter((input) => input.type === "image");
-    const videoInputs = inputs.filter((input) => input.type === "video");
-    const audioInputs = inputs.filter((input) => input.type === "audio");
-    const editingMentionReferences = editingTextId ? mentionReferences.filter((reference) => reference.nodeId !== editingTextId) : mentionReferences;
     const hasAnyInput = Boolean(inputSummary.textCount || inputSummary.imageCount || inputSummary.videoCount || inputSummary.audioCount);
-    const canGenerate = mode === "audio" ? inputSummary.textCount > 0 : hasAnyInput;
-
-    const moveInput = (input: NodeGenerationInput, offset: number) => {
-        const sameTypeInputs = inputs.filter((item) => item.type === input.type);
-        const sameTypeIndex = sameTypeInputs.findIndex((item) => item.nodeId === input.nodeId);
-        const targetInput = sameTypeInputs[sameTypeIndex + offset];
-        if (!targetInput) return;
-        const index = inputs.findIndex((item) => item.nodeId === input.nodeId);
-        const targetIndex = inputs.findIndex((item) => item.nodeId === targetInput.nodeId);
-        const next = [...inputs];
-        [next[index], next[targetIndex]] = [next[targetIndex], next[index]];
-        onConfigChange(node.id, { inputOrder: next.map((input) => input.nodeId) });
-        message.success("已调整输入顺序");
-    };
-    const startTextEdit = (input: NodeGenerationInput) => {
-        setEditingTextId(input.nodeId);
-        setEditingText(input.text || "");
-    };
-    const saveTextEdit = () => {
-        if (!editingTextId) return;
-        onTextInputChange(editingTextId, editingText);
-        setEditingText("");
-        setEditingTextId(null);
-        message.success("已保存文本提示词");
-    };
+    const hasComposerContent = Boolean((node.metadata?.composerContent ?? node.metadata?.prompt ?? "").trim());
+    const canGenerate = hasComposerContent || (mode === "audio" ? inputSummary.textCount > 0 : hasAnyInput);
 
     return (
         <div className="flex h-full w-full cursor-move flex-col px-3 pb-3 pt-7 text-sm" style={{ color: theme.node.text }} onWheel={(event) => event.stopPropagation()}>
@@ -134,9 +94,9 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, m
                 <InputChip label="参考图" value={`${inputSummary.imageCount} 张`} style={chipStyle} />
                 <InputChip label="参考视频" value={`${inputSummary.videoCount} 个`} style={chipStyle} />
                 <InputChip label="参考音频" value={`${inputSummary.audioCount} 个`} style={chipStyle} />
-                <button type="button" className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border px-2 text-[11px]" style={chipStyle} onMouseDown={(event) => event.stopPropagation()} onClick={() => setPreviewOpen(true)}>
-                    <Eye className="size-3.5" />
-                    预览
+                <button type="button" className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border px-2 text-[11px]" style={chipStyle} onMouseDown={(event) => event.stopPropagation()} onClick={onComposerToggle}>
+                    <Settings2 className="size-3.5" />
+                    组装提示词
                 </button>
             </div>
 
@@ -167,238 +127,6 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, m
                     <span>开始生成</span>
                 </span>
             </Button>
-            <Modal
-                title="输入预览"
-                open={previewOpen}
-                onCancel={() => setPreviewOpen(false)}
-                footer={null}
-                centered
-                width={860}
-                mask={{ closable: true }}
-                keyboard
-                destroyOnHidden
-                modalRender={(modal) => (
-                    <div onClick={(event) => event.stopPropagation()} onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
-                        {modal}
-                    </div>
-                )}
-            >
-                <div onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onWheelCapture={(event) => event.stopPropagation()}>
-                    {inputs.length ? (
-                        <div className="flex h-[min(66vh,580px)] flex-col gap-3 overflow-hidden">
-                            <div className="shrink-0">
-                                <PreviewSection title="图片提示词" count={imageInputs.length} empty="暂无图片提示词">
-                                    <div className="thin-scrollbar flex gap-1.5 overflow-x-auto pb-1">
-                                        {imageInputs.map((input, index) => (
-                                            <ImageSortCard key={input.nodeId} input={input} imageIndex={index} imageTotal={imageInputs.length} inputs={inputs} theme={theme} onMove={moveInput} />
-                                        ))}
-                                    </div>
-                                </PreviewSection>
-                            </div>
-                            <div className="shrink-0">
-                                <PreviewSection title="参考视频" count={videoInputs.length} empty="暂无参考视频">
-                                    <div className="thin-scrollbar flex gap-1.5 overflow-x-auto pb-1">
-                                        {videoInputs.map((input, index) => (
-                                            <VideoSortCard key={input.nodeId} input={input} videoIndex={index} videoTotal={videoInputs.length} theme={theme} onMove={moveInput} />
-                                        ))}
-                                    </div>
-                                </PreviewSection>
-                            </div>
-                            <div className="shrink-0">
-                                <PreviewSection title="参考音频" count={audioInputs.length} empty="暂无参考音频">
-                                    <div className="thin-scrollbar flex gap-1.5 overflow-x-auto pb-1">
-                                        {audioInputs.map((input, index) => (
-                                            <AudioSortCard key={input.nodeId} input={input} audioIndex={index} audioTotal={audioInputs.length} theme={theme} onMove={moveInput} />
-                                        ))}
-                                    </div>
-                                </PreviewSection>
-                            </div>
-                            <div className="grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden">
-                                <div className="thin-scrollbar min-h-0 overflow-y-auto pr-1.5">
-                                    <PreviewSection title="文本提示词" count={textInputs.length} empty="暂无文本提示词">
-                                        <div className="space-y-1.5">
-                                            {textInputs.map((input, index) => (
-                                                <TextSortCard key={input.nodeId} input={input} textIndex={index} textTotal={textInputs.length} inputs={inputs} theme={theme} onMove={moveInput} onEdit={startTextEdit} />
-                                            ))}
-                                        </div>
-                                    </PreviewSection>
-                                </div>
-                                <div className="flex min-h-0 flex-col rounded-xl border p-2.5" style={{ background: theme.node.fill, borderColor: theme.node.stroke }}>
-                                    {editingTextId ? (
-                                        <>
-                                            <div className="mb-2 flex items-center justify-between">
-                                                <div className="text-sm font-semibold">编辑文本提示词</div>
-                                                <Button size="small" type="text" onClick={() => setEditingTextId(null)}>
-                                                    收起
-                                                </Button>
-                                            </div>
-                                            <CanvasResourceMentionTextarea containerClassName="min-h-0 flex-1" className="thin-scrollbar h-full w-full resize-none rounded-md border px-2 py-1 text-xs leading-5 outline-none" style={{ background: theme.node.panel, borderColor: theme.node.stroke, color: theme.node.text }} value={editingText} references={editingMentionReferences} onChange={setEditingText} />
-                                            <div className="mt-2 flex justify-end gap-2">
-                                                <Button size="small" onClick={() => setEditingTextId(null)}>
-                                                    取消
-                                                </Button>
-                                                <Button size="small" type="primary" onClick={saveTextEdit}>
-                                                    保存
-                                                </Button>
-                                            </div>
-                                        </>
-                                    ) : (
-                                        <div className="flex h-full flex-col justify-center rounded-xl border border-dashed px-4 text-center text-xs leading-5 opacity-45" style={{ borderColor: theme.node.stroke }}>
-                                            <Edit3 className="mx-auto mb-2 size-5" />
-                                            选择一条文本后在这里编辑
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    ) : (
-                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无提示词或参考图" className="py-8" />
-                    )}
-                </div>
-            </Modal>
-        </div>
-    );
-}
-
-function PreviewSection({ title, count, empty, children }: { title: string; count: number; empty: string; children: React.ReactNode }) {
-    return (
-        <section>
-            <div className="sticky top-0 z-10 mb-1 flex items-center justify-between px-0.5 py-0.5 backdrop-blur-sm">
-                <div className="text-xs font-semibold">{title}</div>
-                <div className="text-[11px] opacity-50">{count} 个</div>
-            </div>
-            {count ? children : <div className="rounded-xl border border-dashed px-3 py-5 text-center text-xs opacity-45">{empty}</div>}
-        </section>
-    );
-}
-
-function TextSortCard({
-    input,
-    textIndex,
-    textTotal,
-    inputs,
-    theme,
-    onMove,
-    onEdit,
-}: {
-    input: NodeGenerationInput;
-    textIndex: number;
-    textTotal: number;
-    inputs: NodeGenerationInput[];
-    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
-    onMove: (input: NodeGenerationInput, offset: number) => void;
-    onEdit: (input: NodeGenerationInput) => void;
-}) {
-    return (
-        <div className="grid grid-cols-[minmax(0,1fr)_72px] items-center gap-1.5 rounded-md border px-2 py-1" style={{ background: `${theme.node.fill}99`, borderColor: theme.node.stroke }}>
-            <div className="min-w-0">
-                <div className="truncate text-[10px] font-medium opacity-50">文本 {textIndex + 1}</div>
-                <div className="line-clamp-1 whitespace-pre-wrap break-words text-[11px] leading-4 opacity-80">{input.text}</div>
-            </div>
-            <div className="flex justify-end gap-1">
-                <Button size="small" className="!h-6 !w-6 !min-w-6 !p-0" icon={<Edit3 className="size-3" />} onClick={() => onEdit(input)} />
-                <VerticalOrderButtons index={textIndex} total={textTotal} onMove={(offset) => onMove(input, offset)} />
-            </div>
-        </div>
-    );
-}
-
-function ImageSortCard({
-    input,
-    imageIndex,
-    imageTotal,
-    inputs,
-    theme,
-    onMove,
-}: {
-    input: NodeGenerationInput;
-    imageIndex: number;
-    imageTotal: number;
-    inputs: NodeGenerationInput[];
-    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
-    onMove: (input: NodeGenerationInput, offset: number) => void;
-}) {
-    if (!input.image) return null;
-    return (
-        <div className="w-24 shrink-0 overflow-hidden rounded-lg border" style={{ background: theme.node.fill, borderColor: theme.node.stroke }}>
-            <div className="relative">
-                <img src={input.image.dataUrl} alt={input.title} className="aspect-square w-full object-cover" />
-                <span className="absolute left-1 top-1 rounded bg-black/50 px-1 py-0.5 text-[9px] font-medium text-white">{imageReferenceLabel(imageIndex)}</span>
-                <HorizontalOrderButtons index={imageIndex} total={imageTotal} onMove={(offset) => onMove(input, offset)} />
-            </div>
-        </div>
-    );
-}
-
-function VideoSortCard({
-    input,
-    videoIndex,
-    videoTotal,
-    theme,
-    onMove,
-}: {
-    input: NodeGenerationInput;
-    videoIndex: number;
-    videoTotal: number;
-    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
-    onMove: (input: NodeGenerationInput, offset: number) => void;
-}) {
-    if (!input.video) return null;
-    return (
-        <div className="w-32 shrink-0 overflow-hidden rounded-lg border" style={{ background: theme.node.fill, borderColor: theme.node.stroke }}>
-            <div className="relative">
-                <video src={input.video.url} className="aspect-video w-full bg-black object-cover" muted preload="metadata" />
-                <span className="absolute left-1 top-1 rounded bg-black/50 px-1 py-0.5 text-[9px] font-medium text-white">{seedanceReferenceLabel("video", videoIndex)}</span>
-                <HorizontalOrderButtons index={videoIndex} total={videoTotal} onMove={(offset) => onMove(input, offset)} />
-            </div>
-        </div>
-    );
-}
-
-function AudioSortCard({
-    input,
-    audioIndex,
-    audioTotal,
-    theme,
-    onMove,
-}: {
-    input: NodeGenerationInput;
-    audioIndex: number;
-    audioTotal: number;
-    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
-    onMove: (input: NodeGenerationInput, offset: number) => void;
-}) {
-    if (!input.audio) return null;
-    return (
-        <div className="w-48 shrink-0 rounded-lg border p-2" style={{ background: theme.node.fill, borderColor: theme.node.stroke }}>
-            <div className="mb-1.5 flex min-w-0 items-center gap-1.5 text-[11px] opacity-70">
-                <Music2 className="size-3.5 shrink-0" />
-                <span className="truncate">{input.title}</span>
-            </div>
-            <audio src={input.audio.url} controls className="h-8 w-full" preload="metadata" />
-            <div className="mt-1 flex justify-between">
-                <Button size="small" className="!h-6 !w-6 !min-w-6 !rounded-full !p-0" icon={<ArrowLeft className="size-3" />} disabled={audioIndex <= 0} onClick={() => onMove(input, -1)} />
-                <span className="text-[10px] opacity-45">{seedanceReferenceLabel("audio", audioIndex)}</span>
-                <Button size="small" className="!h-6 !w-6 !min-w-6 !rounded-full !p-0" icon={<ArrowRight className="size-3" />} disabled={audioIndex >= audioTotal - 1} onClick={() => onMove(input, 1)} />
-            </div>
-        </div>
-    );
-}
-
-function VerticalOrderButtons({ index, total, onMove }: { index: number; total: number; onMove: (offset: number) => void }) {
-    return (
-        <>
-            <Button size="small" className="!h-6 !w-6 !min-w-6 !p-0" icon={<ArrowUp className="size-3" />} disabled={index <= 0} onClick={() => onMove(-1)} />
-            <Button size="small" className="!h-6 !w-6 !min-w-6 !p-0" icon={<ArrowDown className="size-3" />} disabled={index >= total - 1} onClick={() => onMove(1)} />
-        </>
-    );
-}
-
-function HorizontalOrderButtons({ index, total, onMove }: { index: number; total: number; onMove: (offset: number) => void }) {
-    return (
-        <div className="absolute inset-x-1 bottom-1 flex justify-between">
-            <Button size="small" className="!h-6 !w-6 !min-w-6 !rounded-full !bg-white/85 !p-0 !shadow-sm" icon={<ArrowLeft className="size-3" />} disabled={index <= 0} onClick={() => onMove(-1)} />
-            <Button size="small" className="!h-6 !w-6 !min-w-6 !rounded-full !bg-white/85 !p-0 !shadow-sm" icon={<ArrowRight className="size-3" />} disabled={index >= total - 1} onClick={() => onMove(1)} />
         </div>
     );
 }