+ {previewUrl ? (
+ 
+ ) : (
+
+ );
+}
+
+function LoadingContent({ node, theme, onCancelTask, onOpenTaskDetails }: Pick
+
+
+ )}
+
+
+
+
+ {node.title || "绘图"}
+ {shapeCount} 个图形 · {pageCount} 个页面
+
+
+ {node.metadata?.taskStage || (taskId ? "任务处理中" : "正在创建任务")}
+ {taskId ? (
+
+ );
+}
+
+function useTaskElapsed(createdAt?: string) {
+ const [, setTick] = useState(0);
+ useEffect(() => {
+ if (!createdAt) return;
+ const timer = window.setInterval(() => setTick((value) => value + 1), 1000);
+ return () => window.clearInterval(timer);
+ }, [createdAt]);
+ if (!createdAt) return "刚刚";
+ const seconds = Math.max(0, Math.floor((Date.now() - new Date(createdAt).getTime()) / 1000));
+ if (seconds < 60) return `${seconds}秒`;
+ const minutes = Math.floor(seconds / 60);
+ return minutes < 60 ? `${minutes}分${seconds % 60}秒` : `${Math.floor(minutes / 60)}时${minutes % 60}分`;
+}
+
+function taskStatusLabel(status?: string) {
+ if (status === "queued") return "排队中";
+ if (status === "running") return "生成中";
+ if (status === "succeeded") return "任务已完成";
+ if (status === "failed") return "任务失败";
+ if (status === "cancelled") return "任务已取消";
+ return status ? "未知任务状态" : "等待任务状态";
+}
+
+function shortTaskId(id: string) {
+ if (id.length <= 20) return id;
+ return `${id.slice(0, 14)}...${id.slice(-4)}`;
+}
+
+function ErrorContent({ node, theme, onRetry }: Pick
+
+ ) : null}
+
+ {statusLabel}
+ {progress !== null ? ` · ${progress}%` : ""}
+
+ {progress !== null ? (
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+ );
+}
+
+function UnknownNodeContent({ theme }: Pick{generationErrorMessage(node.metadata?.errorDetails)}
+ {moderationFailure ? (
+
+ 修改节点提示词后，可重新点击生成。
+
+ ) : (
+
+ )}
+ 未知节点
;
+}
+
+function TextContent({ node, theme, isEditingContent, textareaRef, mentionReferences, onContentChange, onStopEditing }: CanvasNodeContentProps) {
+ const fontSize = node.metadata?.fontSize || 14;
+ const textStyle = { fontSize: `${fontSize}px`, lineHeight: `${Math.round(fontSize * 1.65)}px`, color: theme.node.text, boxSizing: "border-box" } as CSSProperties;
+ const richTextHTML = useMemo(() => canvasRichTextHTML(node.metadata?.richText), [node.metadata?.richText]);
+
+ return (
+
+ {isEditingContent ? (
+ onContentChange(node.id, value)}
+ onBlur={onStopEditing}
+ onKeyDown={(event) => {
+ if (event.key === "Escape") onStopEditing();
+ }}
+ onMouseDown={(event) => event.stopPropagation()}
+ onPointerDown={(event) => event.stopPropagation()}
+ onWheel={(event) => event.stopPropagation()}
+ />
+ ) : richTextHTML ? (
+ {content} ;
+ }
+ if (!props.node.metadata?.content) return {content} ;
+ return content;
+}
+
+function VideoNodeContent({ node, theme, reduceMediaEffects }: CanvasNodeContentProps) {
+ const playWhenReadyRef = useRef(false);
+ const playerBoxRef = useRef(null);
+ const { url, loading, load } = useNodeResourceUrl(node, false);
+ const subtitleEntries = node.metadata?.subtitleEntries || [];
+ const subtitleStyle = node.metadata?.subtitleStyle || createDefaultSubtitleStyle();
+ const [currentTimeMs, setCurrentTimeMs] = useState(0);
+ const [videoSize, setVideoSize] = useState<{ width: number; height: number } | null>(null);
+
+ useEffect(() => {
+ const box = playerBoxRef.current;
+ const video = box?.querySelector("video");
+ if (!video) return;
+ const handleLoadedMetadata = () => {
+ if (video.videoWidth > 0 && video.videoHeight > 0) setVideoSize({ width: video.videoWidth, height: video.videoHeight });
+ };
+ video.addEventListener("loadedmetadata", handleLoadedMetadata);
+ handleLoadedMetadata();
+ if (!subtitleEntries.length) return () => video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+ const handleTimeUpdate = () => setCurrentTimeMs(Math.round(video.currentTime * 1000));
+ video.addEventListener("timeupdate", handleTimeUpdate);
+ return () => {
+ video.removeEventListener("timeupdate", handleTimeUpdate);
+ video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+ };
+ }, [subtitleEntries.length, url]);
+
+ if (!node.metadata?.content) return (null);
+ const playWhenReadyRef = useRef(false);
+ const { url, loading, load } = useNodeResourceUrl(node, false);
+ useEffect(() => {
+ if (!url || !playWhenReadyRef.current) return;
+ playWhenReadyRef.current = false;
+ void audioRef.current?.play().catch(() => undefined);
+ }, [url]);
+ if (!node.metadata?.content) return ) {
+ const imageContainerRef = useRef(null);
+ const nearViewport = useNearViewport(imageContainerRef);
+ const { url, loading } = useNodeResourceUrl(node, nearViewport);
+ return (
+
+
+ );
+}
+
+function DeferredMediaLoad({ icon, label, disabled, onClick }: { icon: ReactNode; label: string; disabled: boolean; onClick: () => void }) {
+ return ;
+}
+
+function useNodeResourceUrl(node: CanvasNodeData, eager: boolean) {
+ const storageKey = node.metadata?.storageKey || "";
+ const fallback = node.metadata?.content || "";
+ const isRemoteResource = Boolean(resourceIdFromStorageKey(storageKey));
+ const [url, setUrl] = useState(isRemoteResource ? "" : fallback);
+ const [loading, setLoading] = useState(isRemoteResource && eager);
+
+ useEffect(() => {
+ let cancelled = false;
+ if (!isRemoteResource) {
+ setUrl(fallback);
+ setLoading(false);
+ return;
+ }
+ setUrl("");
+ setLoading(eager);
+ const resolve = eager ? cacheResourceObjectUrl(storageKey) : getCachedResourceObjectUrl(storageKey);
+ void resolve.then((cached) => {
+ if (!cancelled) setUrl(cached || (eager ? fallback : ""));
+ }).catch(() => {
+ if (!cancelled && eager) setUrl(fallback);
+ }).finally(() => {
+ if (!cancelled) setLoading(false);
+ });
+ return () => { cancelled = true; };
+ }, [eager, fallback, isRemoteResource, storageKey]);
+
+ const load = useCallback(async () => {
+ if (url) return url;
+ if (!isRemoteResource) return fallback;
+ setLoading(true);
+ try {
+ const next = (await cacheResourceObjectUrl(storageKey)) || fallback;
+ setUrl(next);
+ return next;
+ } catch {
+ setUrl(fallback);
+ return fallback;
+ } finally {
+ setLoading(false);
+ }
+ }, [fallback, isRemoteResource, storageKey, url]);
+ return { url, loading, load };
+}
+
+function useNearViewport(ref: RefObject) {
+ const [nearViewport, setNearViewport] = useState(false);
+ useEffect(() => {
+ const element = ref.current;
+ if (!element || typeof IntersectionObserver === "undefined") {
+ setNearViewport(true);
+ return;
+ }
+ const observer = new IntersectionObserver((entries) => {
+ if (entries.some((entry) => entry.isIntersecting)) {
+ setNearViewport(true);
+ observer.disconnect();
+ }
+ }, { rootMargin: "600px" });
+ observer.observe(element);
+ return () => observer.disconnect();
+ }, [ref]);
+ return nearViewport;
+}
+
+export function CanvasNodeImageInfo({ node }: { node: CanvasNodeData }) {
+ const width = Math.round(node.metadata?.naturalWidth || node.width);
+ const height = Math.round(node.metadata?.naturalHeight || node.height);
+ const size = formatBytes(node.metadata?.bytes || 0);
+ return {width} x {height}{size ? ` · ${size}` : ""};
+}
+
+function BatchFrame({ batchCount, batchExpanded, batchOpening, batchRecovering, theme, onToggleBatch, children }: { batchCount: number; batchExpanded: boolean; batchOpening: boolean; batchRecovering: boolean; theme: CanvasTheme; onToggleBatch?: () => void; children: ReactNode }) {
+ const isBatchRoot = batchCount > 1;
+ return (
+ (null);
+ const [manualExpandedPromptHeight, setManualExpandedPromptHeight] = useState(null);
const [paramsExpanded, setParamsExpanded] = useState(false); // #98 决策2：B区参数区折叠状态（手风琴）
const activeReferences = mentionReferences.filter((item) => item.active && item.kind !== "skill");
const requirements: ModelRequirements = {
@@ -79,36 +91,27 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
});
const activeReferenceCount = activeReferences.length;
const videoFrameOptions = mentionReferences.filter((item) => item.active && item.kind === "image").map((item) => ({ nodeId: item.nodeId, label: item.label, title: item.title, previewUrl: item.previewUrl }));
- const darkSurface = themeName === "dark";
const monochromeAccent = theme.node.activeStroke;
- const shellBorder = darkSurface ? "rgba(255,255,255,.08)" : "rgba(15,23,42,.08)";
- const insetBorder = darkSurface ? "rgba(255,255,255,.06)" : "rgba(15,23,42,.07)";
- const shellSurface = darkSurface ? theme.canvas.background : "rgba(250,251,252,.97)";
- const composerSurface = darkSurface ? theme.canvas.background : "rgba(15,23,42,.025)";
- const controlSurface = darkSurface ? theme.canvas.background : "rgba(15,23,42,.045)";
- const controlsSurface = darkSurface ? controlSurface : "transparent";
- const shellShadow = darkSurface ? `0 22px 60px ${theme.spatial.shadow}, 0 2px 8px rgba(0,0,0,.22)` : "0 12px 32px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06)";
- const composerShadow = darkSurface ? "inset 0 1px 4px rgba(0,0,0,.22)" : "inset 0 0 0 1px rgba(15,23,42,.045)";
- const modalShadow = darkSurface ? `0 30px 90px ${theme.spatial.shadow}` : "0 24px 72px rgba(15,23,42,.16)";
- const referenceShelfHeight = activeReferenceCount ? 42 : 0;
- const composerMinHeight = activeReferenceCount ? 82 : 58;
- const composerHeight = Math.min(224, Math.max(composerMinHeight, Math.ceil(promptContentHeight + referenceShelfHeight)));
+ const controlSurface = "var(--canvas-composer-control-surface)";
+ const promptBounds = promptEditorBounds(false, activeReferenceCount > 0);
+ const expandedPromptBounds = promptEditorBounds(true, activeReferenceCount > 0);
+ const composerHeight = clampPromptHeight(manualPromptHeight ?? promptContentHeight + (activeReferenceCount ? PROMPT_REFERENCE_SHELF_HEIGHT : 0), promptBounds);
+ const expandedComposerHeight = clampPromptHeight(manualExpandedPromptHeight ?? expandedPromptContentHeight + (activeReferenceCount ? PROMPT_REFERENCE_SHELF_HEIGHT : 0), expandedPromptBounds);
const isSubmitDisabled = !isRunning && !prompt.trim();
const canExpandPrompt = mode === "image" || mode === "video";
const isPortraitTexture = mode === "image" && Boolean(node.metadata?.portraitTexture);
- const updatePromptContentHeight = useCallback((height: number) => {
- setPromptContentHeight((current) => (Math.abs(current - height) < 1 ? current : height));
- }, []);
useEffect(() => {
setPrompt(node.metadata?.composerContent ?? node.metadata?.prompt ?? "");
}, [node.id, node.metadata?.composerContent, node.metadata?.prompt]);
- useEffect(() => setPromptContentHeight(0), [node.id]);
-
useEffect(() => {
setExpandedPromptOpen(false);
setExpandedPresetOpen(false);
+ setPromptContentHeight(PROMPT_EDITOR_MIN_HEIGHT);
+ setExpandedPromptContentHeight(PROMPT_EDITOR_EXPANDED_MIN_HEIGHT);
+ setManualPromptHeight(null);
+ setManualExpandedPromptHeight(null);
}, [node.id]);
const skillReferences = useMemo(() => mentionReferences.filter((item) => item.kind === "skill"), [mentionReferences]);
@@ -154,11 +157,11 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
};
const renderComposerHeader = (expanded: boolean) => (
-
event.stopPropagation()}
+ dangerouslySetInnerHTML={{ __html: richTextHTML }}
+ />
+ ) : (
+
+ );
+}
+
+function SkillContent({ node, theme }: CanvasNodeContentProps) {
+ const skill = node.metadata?.skillSnapshot;
+ const tags = skill?.tags?.slice(0, 4) || [];
+ const template = skill?.template || node.metadata?.content || "";
+
+ return (
+ event.stopPropagation()}>
+ {node.metadata?.content || 双击编辑文字}
+
+ )}
+
+
+ );
+}
+
+function skillCategoryLabel(category?: string) {
+ if (category === "writing") return "剧情";
+ if (category === "storyboard") return "分镜";
+ if (category === "image") return "生图";
+ if (category === "video") return "视频";
+ return "通用";
+}
+
+function skillOutputModeLabel(mode?: string) {
+ if (mode === "json") return "JSON";
+ if (mode === "image_prompt") return "生图提示词";
+ if (mode === "workflow") return "工作流";
+ return "文本";
+}
+
+function ImageNodeContent(props: CanvasNodeContentProps) {
+ if (!props.node.metadata?.content && props.isBatchRoot) {
+ const content = props.node.metadata?.status === "loading"
+ ?
+
+ {skill?.description ?
+
+
+
+
+
+
+ {skill?.name || node.title || "技能"}
+
+ {skillCategoryLabel(skill?.category)}·{skillOutputModeLabel(skill?.outputMode)}
+ {skill?.version ? <>·v{skill.version} : null}
+
+ {skill.description}
: null}
+
+
+ 模板
+ {template || "未配置技能模板"}
+
+ {tags.length ? tags.map((tag) => {tag}) : 连接到图片、视频、音频或文本节点后生效}
+
+
+
+ );
+ if (isBatchRoot) return
+
+ ) : 空图片节点}
+ {node.metadata?.characterName || node.title}
+ 多视角参考 · 待生成
+
+
+ );
+}
+
+function AudioNodeContent({ node, theme }: CanvasNodeContentProps) {
+ const audioRef = useRef
+ { playWhenReadyRef.current = false; }} brandColor={theme.accent.primary} className="h-full w-full rounded-[var(--node-radius)] bg-black" dataCanvasNoZoom compactControls />
+ {activeEntry && activeEntry.text.trim() ?
+
+
+ );
+}
+
+function EmptyMediaContent({ icon, label, color }: { icon: ReactNode; label: string; color: string }) {
+ return {icon}{label}
;
+}
+
+function ImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded, batchOpening, batchRecovering, onToggleBatch }: Pick
+ {url ? 
event.preventDefault()} className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} /> :
+ {loading ?
}
+ { event.stopPropagation(); onToggleBatch?.(); } : undefined}>
+ {isBatchRoot ? (
+
+ );
+}
diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx
index 5c941e3da..145b23002 100644
--- a/web/src/components/canvas/canvas-node-prompt-panel.tsx
+++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
import { ArrowUp, AtSign, Boxes, ChevronDown, FileText, ImageIcon, ImagePlus, Maximize2, Music2, Pencil, SlidersHorizontal, Square, UserRound, Video } from "lucide-react";
import { Button, Image as AntImage, Modal, Tooltip } from "antd";
@@ -38,6 +38,15 @@ type CanvasNodePromptPanelProps = {
type CanvasTheme = (typeof canvasThemes)[keyof typeof canvasThemes];
+const PROMPT_REFERENCE_SHELF_HEIGHT = 36;
+const PROMPT_EDITOR_MIN_HEIGHT = 44;
+const PROMPT_EDITOR_EXPANDED_MIN_HEIGHT = 76;
+const PROMPT_EDITOR_LINE_HEIGHT = 20;
+const PROMPT_EDITOR_EXPANDED_LINE_HEIGHT = 24;
+const PROMPT_EDITOR_VERTICAL_PADDING = 12;
+const PROMPT_EDITOR_EXPANDED_VERTICAL_PADDING = 20;
+const PROMPT_EDITOR_MAX_LINES = 8;
+
export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onStop, mentionReferences = [], onImageSettingsOpenChange, workspaceMode = "professional" }: CanvasNodePromptPanelProps) {
const globalConfig = useEffectiveConfig();
const themeName = useThemeStore((state) => state.theme);
@@ -52,7 +61,10 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
const [presetOpen, setPresetOpen] = useState(false);
const [expandedPresetOpen, setExpandedPresetOpen] = useState(false);
const [expandedPromptOpen, setExpandedPromptOpen] = useState(false);
- const [promptContentHeight, setPromptContentHeight] = useState(0);
+ const [promptContentHeight, setPromptContentHeight] = useState(PROMPT_EDITOR_MIN_HEIGHT);
+ const [expandedPromptContentHeight, setExpandedPromptContentHeight] = useState(PROMPT_EDITOR_EXPANDED_MIN_HEIGHT);
+ const [manualPromptHeight, setManualPromptHeight] = useState
+ {Array.from({ length: Math.min(batchCount - 1, 5) }).map((_, index) => (
+
+ ))}
+
+ ) : null}
+ {children}
+
+
{isPortraitTexture ? (
onConfigChange(node.id, { portraitTexture })} />
) : (
-
+
- {activeReferenceCount ?