访客操作仅在当前页面临时生效
diff --git a/web/src/pages/canvas/use-canvas-media-tools.ts b/web/src/pages/canvas/use-canvas-media-tools.ts
index 14da960be..424d120fb 100644
--- a/web/src/pages/canvas/use-canvas-media-tools.ts
+++ b/web/src/pages/canvas/use-canvas-media-tools.ts
@@ -37,7 +37,7 @@ import { fitNodeSize, VIDEO_NODE_MAX_SIZE } from "@/lib/canvas/canvas-node-size"
import { compositeEmotionImage, emotionGenerationSize, emotionProviderMask, normalizeEmotionPromptForProvider, resolveEmotionEditPlan } from "@/lib/canvas/canvas-emotion";
import { DEFAULT_PORTRAIT_TEXTURE_SETTINGS } from "@/lib/canvas/canvas-portrait-texture";
import { IMAGE_PROMPT_REVERSE } from "@/lib/prompts";
-import { createPortraitTextureNode } from "@/lib/canvas/canvas-image-source";
+import { createPortraitTextureNode, createNineGridNode } from "@/lib/canvas/canvas-image-source";
import { captureVideoFrames } from "@/lib/canvas/canvas-video-frame";
import { buildVideoFrameNodes } from "@/lib/canvas/canvas-video-frame-nodes";
import { mergeVideos, type MergeVideoProgress } from "@/lib/canvas/canvas-video-merge";
@@ -47,6 +47,7 @@ import { modelCapabilityConfigFor } from "@/lib/model-capabilities";
import { defaultImageParamsForModel } from "@/lib/model-selection";
import { navigateToSettings } from "@/lib/settings-navigation";
import { storeGeneratedVideo } from "@/services/api/video";
+import { getTool } from "@/services/api/tools";
import { getMediaBlob, uploadMediaFile } from "@/services/file-storage";
import { uploadImage } from "@/services/image-storage";
import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
@@ -1100,6 +1101,21 @@ export function useCanvasMediaTools({
}
}, [bindGenerationTask, effectiveConfig, finishGenerationRequest, isAiConfigReady, nodesRef, persistMediaNodes, projectId, resolveImageEditStyle, setConnections, setDialogNodeId, setNodes, setRunningNodeId, setSelectedNodeIds, startGenerationRequest]);
+ const generateNineGridNode = useCallback(async (node: CanvasNodeData, toolId: number, label: string, icon: string) => {
+ if (node.type !== CanvasNodeType.Image || !node.metadata?.content) {
+ message.warning("图片节点为空，无法执行九宫格工具");
+ return;
+ }
+ const child = createNineGridNode(node, nanoid(), toolId, label, "nine_grid",icon);
+ setHoveredNodeId(null);
+ setToolbarNodeId(null);
+ setNodes((current) => [...current, child]);
+ setConnections((current) => [...current, { id: nanoid(), fromNodeId: node.id, toNodeId: child.id }]);
+ setSelectedNodeIds(new Set([child.id]));
+ setSelectedConnectionId(null);
+ setDialogNodeId(child.id);
+ }, [message, setConnections, setDialogNodeId, setHoveredNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds, setToolbarNodeId]);
+
const generateLightingNode = useCallback((node: CanvasNodeData, options: CanvasImageLightingOptions, prompt: string) => {
if (!node.metadata?.content) return;
const generationConfig = { ...buildGenerationConfig(effectiveConfig, node, "image"), count: "1" };
@@ -1211,6 +1227,7 @@ export function useCanvasMediaTools({
frameDialogNodeId,
handleSegmentConfirm,
generateAngleNode,
+ generateNineGridNode,
generateLightingNode,
openPanoramaConfig,
createPanoramaViewerWithConfig,
diff --git a/web/src/pages/canvas/use-canvas-render-model.ts b/web/src/pages/canvas/use-canvas-render-model.ts
index 24f30874e..0d494ca4f 100644
--- a/web/src/pages/canvas/use-canvas-render-model.ts
+++ b/web/src/pages/canvas/use-canvas-render-model.ts
@@ -4,7 +4,7 @@ import { buildNodeGenerationInputs, type NodeGenerationInput } from "@/component
import { isFrameNode } from "@/lib/canvas/canvas-frame";
import { sameNodeSemanticData } from "@/lib/canvas/canvas-project-domain";
import { canvasNodeRenderBudget, canvasNodeRenderPadding, CANVAS_MAX_RENDERED_CONNECTIONS, shouldReduceCanvasMediaEffects } from "@/lib/canvas/canvas-performance-mode";
-import { buildCanvasNodeMentionReferenceMap, buildCanvasResourceReferences } from "@/lib/canvas/canvas-resource-references";
+import { buildCanvasNodeMentionReferenceMap, buildCanvasResourceReferences, buildToolMentionReference, parseToolMentionTokens } from "@/lib/canvas/canvas-resource-references";
import { buildSkillMentionReferences } from "@/lib/canvas/canvas-skill-mentions";
import { buildCanvasSpatialIndex, canvasNodeBounds, type CanvasSpatialIndex, type CanvasSpatialIndexEntry } from "@/lib/canvas/canvas-spatial-index";
import type { Skill } from "@/services/api/skills";
@@ -353,12 +353,32 @@ export function useCanvasRenderModel({
);
const resourceReferenceByNodeId = useMemo(() => new Map(canvasResourceReferences.map((reference) => [reference.nodeId, reference])), [canvasResourceReferences]);
const skillMentionReferences = useMemo(() => buildSkillMentionReferences(addedSkills), [addedSkills]);
+ const toolMentionReferencesByNodeId = useMemo(() => {
+ const map = new Map
+
+
+ ),
+ onClick: () => {
+ onSelect(tool.toolId, tool.label, tool.toolIconName);
+ },
+ })),
+ }));
+}
+
+export function CanvasNineGridPicker({
+ open,
+ onOpenChange,
+ icon = "Grid3x3",
+ onSelect,
+}: {
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ /** 当前已选九宫格工具的 lucide 图标名，无选择时回退 Grid3x3。 */
+ icon?: string;
+ onSelect: (toolId: number, label: string, icon: string) => void;
+}) {
+ const [internalOpen, setInternalOpen] = useState(false);
+ const actualOpen = open ?? internalOpen;
+ const setOpen = (next: boolean) => {
+ setInternalOpen(next);
+ onOpenChange?.(next);
+ };
+ return (
+ {tool.description}
: null}
+ event.stopPropagation()}
+ onMouseDown={(event) => event.stopPropagation()}
+ onWheel={(event) => event.stopPropagation()}
+ onKeyDown={(event) => event.stopPropagation()}
+ >
+
+ )}
+ >
+
+ {menu}
+
- {!simpleMode ? ; panelWidth?: number; panelHeight?: number; dragOffset?: Position | null; isDragging?: boolean; allowOverflow?: boolean; children: ReactNode }) {
+export function CanvasNodePanelOverlay({
+ node,
+ viewport,
+ containerRef,
+ panelWidth,
+ panelHeight = 190,
+ dragOffset,
+ isDragging = false,
+ allowOverflow = false,
+ children,
+}: {
+ node: CanvasNodeData;
+ viewport: ViewportTransform;
+ containerRef: RefObject;
+ panelWidth?: number;
+ panelHeight?: number;
+ dragOffset?: Position | null;
+ isDragging?: boolean;
+ allowOverflow?: boolean;
+ children: ReactNode;
+}) {
const panelRef = useRef(null);
const { bringToFront, zIndex } = useCanvasOverlayLayer(`node-panel:${node.id}`, "var(--z-modal-overlay)");
const initialWidth = resolveNodePanelWidth(node, viewport, panelWidth);
@@ -109,9 +139,7 @@ export function CanvasNodePanelOverlay({ node, viewport, containerRef, panelWidt
const nextWidth = resolveNodePanelWidth(node, nextViewport, panelWidth);
panel.style.width = `${nextWidth}px`;
const nodeElement = container.querySelector(`[data-node-id="${CSS.escape(node.id)}"]`);
- const position = nodeElement
- ? getAttachedNodePanelPosition(nodeElement, container, nextWidth)
- : getNodePanelPosition(node, nextViewport, viewportSize, nextWidth, panelHeight, liveDragOffset);
+ const position = nodeElement ? getAttachedNodePanelPosition(nodeElement, container, nextWidth) : getNodePanelPosition(node, nextViewport, viewportSize, nextWidth, panelHeight, liveDragOffset);
panel.style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
};
update(viewport);
@@ -154,7 +182,31 @@ function resolveNodePanelWidth(node: CanvasNodeData, viewport: ViewportTransform
return clamp(Math.round(node.width * viewport.k * 1.5), 680, 920);
}
-export function CanvasConnectionCreateMenu({ pending, viewport, viewportSize, containerRef, canCreateDrawing, getDisabledReason, onCreate, onClose }: { pending: PendingConnectionCreate; viewport: ViewportTransform; viewportSize: { width: number; height: number }; containerRef: RefObject; canCreateDrawing: boolean; getDisabledReason: (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Script | CanvasNodeType.BatchTable | CanvasNodeType.Video | CanvasNodeType.Audio | CanvasNodeType.Drawing | CanvasNodeType.Config | CanvasNodeType.MediaConversion, provider?: "runninghub") => string; onCreate: (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Script | CanvasNodeType.BatchTable | CanvasNodeType.Video | CanvasNodeType.Audio | CanvasNodeType.Drawing | CanvasNodeType.Config | CanvasNodeType.MediaConversion, provider?: "runninghub") => void; onClose: () => void }) {
+export function CanvasConnectionCreateMenu({
+ pending,
+ viewport,
+ viewportSize,
+ containerRef,
+ canCreateDrawing,
+ getDisabledReason,
+ onCreate,
+ onClose,
+}: {
+ pending: PendingConnectionCreate;
+ viewport: ViewportTransform;
+ viewportSize: { width: number; height: number };
+ containerRef: RefObject;
+ canCreateDrawing: boolean;
+ getDisabledReason: (
+ type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Script | CanvasNodeType.BatchTable | CanvasNodeType.Video | CanvasNodeType.Audio | CanvasNodeType.Drawing | CanvasNodeType.Config | CanvasNodeType.MediaConversion,
+ provider?: "runninghub",
+ ) => string;
+ onCreate: (
+ type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Script | CanvasNodeType.BatchTable | CanvasNodeType.Video | CanvasNodeType.Audio | CanvasNodeType.Drawing | CanvasNodeType.Config | CanvasNodeType.MediaConversion,
+ provider?: "runninghub",
+ ) => void;
+ onClose: () => void;
+}) {
const theme = canvasThemes[useActiveTheme()];
const reducedMotion = useReducedMotion();
const menuRef = useRef(null);
@@ -226,28 +278,137 @@ export function CanvasConnectionCreateMenu({ pending, viewport, viewportSize, co
onPointerDown={(event) => event.stopPropagation()}
>
+
+
+
+
+ } loading={mediaUploading} onClick={() => mediaInputRef.current?.click()}>
+ 上传
+
+
+
+ ) : null}
+ {
+ const file = event.target.files?.[0];
+ event.target.value = "";
+ if (file) void handleCoverUpload(file);
+ }}
+ />
+ {HOVER_VIDEO_TYPES.has(activeType) ? (
+ {
+ const file = event.target.files?.[0];
+ event.target.value = "";
+ if (file) void handleMediaUpload(file);
+ }}
+ />
+ ) : null}
+ {/*
+
+ */}
+
+
+
+ );
+}
+
+const ToolGridSkeleton = memo(function ToolGridSkeleton() {
+ return (
+ (null);
+ const videoRef = useRef(null);
+ const commonStyle = { borderColor: "color-mix(in srgb, var(--foreground) 9%, transparent)", background: "color-mix(in srgb, var(--foreground) 5%, transparent)" };
+ const coverUrl = toAbsoluteUrl(tool.cover);
+ const reduceMotion = useMemo(() => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, []);
+ const mediaAbsoluteUrl = toAbsoluteUrl(tool.mediaUrl);
+ const hoverVideoUrl = mediaAbsoluteUrl && isVideoUrl(mediaAbsoluteUrl) ? mediaAbsoluteUrl : "";
+ const showHoverVideo = !reduceMotion && HOVER_VIDEO_TYPES.has(tool.type) && Boolean(hoverVideoUrl) && !videoFailed;
+
+ useEffect(() => {
+ if (!menuOpen) return;
+ const handler = (e: PointerEvent) => {
+ const target = e.target instanceof Element ? e.target : null;
+ if (target && !rootRef.current?.contains(target) && !target.closest(".ant-dropdown")) {
+ setMenuOpen(false);
+ }
+ };
+ document.addEventListener("pointerdown", handler, true);
+ return () => document.removeEventListener("pointerdown", handler, true);
+ }, [menuOpen]);
+
+ // 视频只在悬停时挂载；浏览器自动播放策略要求静音，React 首次渲染的 muted 属性不一定写入 DOM 属性，需手动赋值后再 play。
+ useEffect(() => {
+ if (!hovered || !showHoverVideo) {
+ setVideoReady(false);
+ return;
+ }
+ const video = videoRef.current;
+ if (!video) return;
+ video.muted = true;
+ // 缓存命中时 canplay 可能已派发，直接按 readyState 标记可淡入。
+ if (video.readyState >= 3) setVideoReady(true);
+ const handle = window.setTimeout(() => {
+ void video.play().catch(() => {});
+ }, 0);
+ return () => window.clearTimeout(handle);
+ }, [hovered, showHoverVideo]);
+
+ const menuItems: MenuProps["items"] = useMemo(() => {
+ const items: NonNullable = [];
+ items.push({ key: "insert", icon: ();
+ for (const match of text.matchAll(TOOL_REF_PATTERN)) {
+ const toolId = Number(match[2]);
+ if (seen.has(toolId)) continue;
+ seen.add(toolId);
+ let label = match[3];
+ try { label = decodeURIComponent(label); } catch { /* Keep readable text for malformed imported labels. */ }
+ results.push({ type: match[1], toolId, label, icon: match[4] });
+ }
+ return results;
+}
+
+export function removeToolMentions(prompt: string, type: string) {
+ return prompt.replace(new RegExp(`@\\[tool:${escapeRegExp(type)}:\\d+:[^\\]]*\\]`, "gu"), "").trim();
+}
+
+export function applyToolMention(prompt: string, tool: { id: number; type: string; label: string }, icon = "Wrench") {
+ const reference = buildToolMentionReference(tool.id, tool.label, tool.type, icon);
+ const replaced = overwriteSameTypeToolMention(prompt, reference);
+ if (replaced != null) return replaced;
+ if (parseToolMentionTokens(prompt).some((item) => item.type === tool.type && item.toolId === tool.id)) return prompt;
+ return [prompt.trim(), reference.mentionToken].filter(Boolean).join(" ");
+}
+
export function canvasNodeMentionToken(nodeId: string) {
return `@[node:${nodeId}]`;
}
+/** 这些工具类型的标签在提示词中唯一，再次选择时直接覆盖旧标签而不是追加。 */
+const UNIQUE_TOOL_MENTION_TYPES = new Set(["style", "nine_grid", "effect"]);
+
+/**
+ * 用新工具标签覆盖提示词中已有的同类型（style/nine_grid/effect）标签：
+ * 第一处原位替换，多余同类型标签连同其后一个空白一并清理。
+ * 没有同类型旧标签时返回 null，由调用方走普通插入。
+ */
+export function overwriteSameTypeToolMention(prompt: string, reference: CanvasResourceReference): string | null {
+ if (reference.kind !== "tool" || reference.toolId == null) return null;
+ const toolType = reference.toolType ?? "nine_grid";
+ if (!UNIQUE_TOOL_MENTION_TYPES.has(toolType)) return null;
+ const token = canvasResourceMentionToken(reference);
+ const pattern = new RegExp(`@\\[tool:${escapeRegExp(toolType)}:\\d+:[^\\]]*\\]`, "gu");
+ const segments = prompt.split(pattern);
+ if (segments.length === 1) return null;
+ let result = `${segments[0]}${token}${segments[1]}`;
+ for (let index = 2; index < segments.length; index += 1) {
+ result += segments[index].replace(/^\s/, "");
+ }
+ return result;
+}
+
export function canvasResourceMentionToken(reference: CanvasResourceReference) {
if (reference.mentionToken) return reference.mentionToken;
if (reference.kind === "skill" && reference.skill?.skillId) return canvasSkillMentionToken(reference.skill.skillId);
+ if (reference.kind === "tool" && reference.toolId != null) return canvasToolMentionToken(reference.toolId, reference.label, reference.toolType ?? "nine_grid", reference.toolIcon ?? "Grid3x3");
if (reference.assetId) return `@[asset:${reference.assetId}]`;
return `@${reference.label}`;
}
export function normalizeCanvasNodeMentionTokens(prompt: string, references: CanvasResourceReference[]) {
return references.reduce((value, reference) => {
- if (!reference.nodeId || reference.assetId || reference.kind === "skill") return value;
+ if (!reference.nodeId || reference.assetId || reference.kind === "skill" || reference.kind === "tool") return value;
return value.split(canvasNodeMentionToken(reference.nodeId)).join(`@${reference.label}`);
}, prompt);
}
@@ -59,7 +122,7 @@ export function normalizeCanvasNodeMentionTokens(prompt: string, references: Can
export function autoMentionCanvasResourceReferences(prompt: string, references: CanvasResourceReference[]) {
const referenceByName = new Map();
references
- .filter((reference) => reference.active && !reference.assetId && reference.kind !== "skill")
+ .filter((reference) => reference.active && !reference.assetId && reference.kind !== "skill" && reference.kind !== "tool")
.forEach((reference, index) => {
canvasResourceMentionNames(reference, index, true).forEach((name) => {
if (!referenceByName.has(name)) {
@@ -103,7 +166,7 @@ export function findCanvasResourceAutoLinkMatch(prompt: string, cursor: number,
if (/@(?:\[[^\]]*|[^\s@,.;:!?，。；：！？、)\]}】）]*)$/u.test(prefix)) return null;
const aliases = new Map();
references
- .filter((reference) => reference.active && !reference.assetId && reference.kind !== "skill")
+ .filter((reference) => reference.active && !reference.assetId && reference.kind !== "skill" && reference.kind !== "tool")
.forEach((reference, index) => {
canvasResourceMentionNames(reference, index, true).forEach((name) => {
if (!aliases.has(name)) aliases.set(name, reference);
@@ -158,7 +221,7 @@ const CANVAS_RESOURCE_MENTION_BOUNDARY = /(?:$|\s|[,.!?;:，。！？；：、)\
function canvasResourceReferenceMentionTokens(reference: CanvasResourceReference) {
const tokens = [canvasResourceMentionToken(reference), `@${reference.label}`];
- if (reference.nodeId && !reference.assetId && reference.kind !== "skill") tokens.push(canvasNodeMentionToken(reference.nodeId));
+ if (reference.nodeId && !reference.assetId && reference.kind !== "skill" && reference.kind !== "tool") tokens.push(canvasNodeMentionToken(reference.nodeId));
return [...new Set(tokens.filter(Boolean))];
}
@@ -207,7 +270,7 @@ export function applyCanvasConnectionPromptSync(previousNodes: CanvasNodeData[],
}
function canvasNodeBoundReferences(references: CanvasResourceReference[]) {
- return references.filter((reference) => reference.nodeId && !reference.assetId && reference.kind !== "skill");
+ return references.filter((reference) => reference.nodeId && !reference.assetId && reference.kind !== "skill" && reference.kind !== "tool");
}
function canvasReferenceIdentityChanged(previousReferences: CanvasResourceReference[], nextReferences: CanvasResourceReference[]) {
@@ -461,7 +524,7 @@ function getConnectedConfigResourceNodes(nodeId: string, nodes: CanvasNodeData[]
}
function labelResourceNodes(nodes: CanvasNodeData[], active: boolean) {
- const counts: Record = { image: 0, video: 0, audio: 0, text: 0, skill: 0, character: 0 };
+ const counts: Record = { image: 0, video: 0, audio: 0, text: 0, skill: 0, character: 0, tool: 0 };
let drawingCount = 0;
return nodes.flatMap((node): CanvasResourceReference[] => {
const kind = resourceKind(node);
@@ -500,6 +563,7 @@ function labelForKind(kind: CanvasResourceKind, index: number) {
if (kind === "video") return seedanceReferenceLabel("video", index);
if (kind === "audio") return seedanceReferenceLabel("audio", index);
if (kind === "skill") return `技能${index + 1}`;
+ if (kind === "tool") return `工具${index + 1}`;
return `文本${index + 1}`;
}
@@ -518,3 +582,18 @@ function skillResourceText(node: CanvasNodeData) {
if (!skill) return node.metadata?.content || "";
return [skill.name, skill.description, skill.template, skill.outputContract].filter(Boolean).join("\n\n");
}
+
+export function buildToolMentionReference(toolId: number, label: string, type: string, icon: string): CanvasResourceReference {
+ return {
+ id: `tool:${toolId}`,
+ nodeId: `tool:${toolId}`,
+ kind: "tool",
+ label,
+ title: label,
+ active: true,
+ toolId,
+ toolType: type,
+ toolIcon: icon,
+ mentionToken: canvasToolMentionToken(toolId, label, type, icon),
+ };
+}
diff --git a/web/src/lib/canvas/canvas-style-execution.ts b/web/src/lib/canvas/canvas-style-execution.ts
index e422eb57f..4e3796e12 100644
--- a/web/src/lib/canvas/canvas-style-execution.ts
+++ b/web/src/lib/canvas/canvas-style-execution.ts
@@ -1,6 +1,7 @@
import { applyStyleExecutionPlan, createStyleProfileSnapshot, parseStyleProfile, resolveStyleExecutionPlan, serializeStyleProfile, type StyleExecutionPlan, type StyleProfileSnapshot } from "@/lib/canvas/style-profile";
import { logicalModelIDForConfig, resolveModelRequestConfig, type AiConfig } from "@/stores/use-config-store";
import type { CanvasNodeData } from "@/types/canvas";
+import { parseToolMentionTokens } from "@/lib/canvas/canvas-resource-references";
export type CanvasStyleExecutionRuntime = {
profile: StyleProfileSnapshot;
@@ -10,6 +11,7 @@ export type CanvasStyleExecutionRuntime = {
};
export function resolveCanvasStyleExecution(nodes: CanvasNodeData[], sourceNode: CanvasNodeData | undefined, prompt: string, config: AiConfig, mode: "image" | "video"): CanvasStyleExecutionRuntime | null {
+ if (mode === "image" && parseToolMentionTokens(prompt).some((tool) => tool.type === "style")) return null;
const styleNode = nodes.find((node) => node.metadata?.workflowKind === "styleboard");
if (!styleNode || sourceNode?.metadata?.workflowKind === "styleboard") return null;
const profile = parseStyleProfile(styleNode.metadata?.styleProfileJson) || legacyStyleNodeProfile(styleNode);
diff --git a/web/src/lib/canvas/canvas-tool-presentation.ts b/web/src/lib/canvas/canvas-tool-presentation.ts
new file mode 100644
index 000000000..c6ef9d532
--- /dev/null
+++ b/web/src/lib/canvas/canvas-tool-presentation.ts
@@ -0,0 +1,38 @@
+import type { ToolScope } from "@/services/api/tools";
+// 各子 Tab 的独立标签集，与 backend internal/tools/seed/tools.json 的 tags 对齐
+export const SUB_TAB_TAGS: Record<"style" | "motion", Array<{ id: string; label: string }>> = {
+ style: [
+ { id: "period", label: "古装" },
+ { id: "city", label: "都市" },
+ { id: "decade", label: "年代" },
+ { id: "life", label: "生活" },
+ { id: "science_fiction", label: "科幻" },
+ { id: "type", label: "类型" },
+ { id: "poetic", label: "写意" },
+ { id: "animation", label: "动画" },
+ { id: "drawing", label: "绘画" },
+ { id: "myth", label: "神话" },
+ ],
+ motion: [
+ { id: "basic", label: "基础控制" },
+ { id: "follow", label: "人物跟拍" },
+ { id: "reveal", label: "揭示转场" },
+ { id: "emotion", label: "情绪强化" },
+ { id: "aerial", label: "空间航拍" },
+ ],
+};
+
+type FeedTab = ToolScope;
+
+export const FEED_TABS: Array<{ id: FeedTab; label: string }> = [
+ { id: "public", label: "公共" },
+ { id: "favorites", label: "收藏" },
+ { id: "custom", label: "自定义" },
+];
+
+export function toAbsoluteUrl(value?: string) {
+ const text = (value || "").trim();
+ if (/^https?:\/\//i.test(text)) return text;
+ if (text.startsWith("/") && !text.startsWith("//")) return new URL(text, window.location.origin).href;
+ return "";
+}
diff --git a/web/src/lib/canvas/tool-registry/definitions/main-toolbar-tools.tsx b/web/src/lib/canvas/tool-registry/definitions/main-toolbar-tools.tsx
index 6b4b3f7c0..ea1a74fa7 100644
--- a/web/src/lib/canvas/tool-registry/definitions/main-toolbar-tools.tsx
+++ b/web/src/lib/canvas/tool-registry/definitions/main-toolbar-tools.tsx
@@ -1,4 +1,4 @@
-import { Eraser, FolderOpen, Hand, MousePointer2, Palette, Plus, Redo2, Settings2, Trash2, Undo2 } from "lucide-react";
+import { PanelsTopLeft, Eraser, FolderOpen, Hand, MousePointer2, Palette, Plus, Redo2, Settings2, Trash2, Undo2 } from "lucide-react";
import { registerToolbarTools, type ToolDefinition } from "@/lib/canvas/tool-registry";
import type { CanvasToolMode } from "@/types/canvas";
@@ -9,6 +9,7 @@ const canvasModeOptions = [
];
export const mainToolbarTools: ToolDefinition[] = [
+ { id: "tool-workspace", toolbar: "main", category: "navigation", label: "工作区", icon: ) | null>(null);
useEffect(() => {
@@ -732,7 +733,6 @@ function InfiniteCanvasPage() {
closeUploadModal,
closeAssetPicker,
createVideoNodeFromBlob,
- createImageAssetNode,
fileDropActive,
handleAssetsInsert,
handleDrop,
@@ -848,6 +848,7 @@ function InfiniteCanvasPage() {
extractVideoFrames,
extractingVideoFramesNodeId,
frameDialogNodeId,
+ generateNineGridNode,
generateAngleNode,
generateLightingNode,
openPanoramaConfig,
@@ -1384,14 +1385,12 @@ function InfiniteCanvasPage() {
annotationNode,
batchChildCountById,
batchMotionById,
- canvasImageNodes,
configInputsById,
connectionLayerBounds,
contextMenuNode,
cropNode,
displayConnections,
frameChildrenById,
- imageAssets,
infoNode,
maskEditNode,
imageEditNode,
@@ -2439,7 +2438,15 @@ function InfiniteCanvasPage() {
跳转到画布主内容
- {!focusMode && !versions.preview && shortDramaEnabled && currentProject?.projectId ? (
+ {!focusMode && !versions.preview ? setWorkspaceOpen(true)} onInsertAssets={handleProjectAssetsInsert} projectId={projectId} nodes={nodes} selectedNodeIds={selectedNodeIds} onClose={() => setWorkspaceOpen(false)} onAssets={() => openCanvasAssetLibrary()} onProjectAssets={currentProject?.projectId ? () => openProjectAssets() : undefined} onCancelTask={cancelCanvasTask} onFocus={nodeId => {
+ const target = nodeById.get(nodeId);
+ const parent = target?.parentId ? nodeById.get(target.parentId) : null;
+ if (parent?.metadata?.frame?.collapsed) toggleFrameCollapsed(parent.id);
+ const batchRoot = target?.metadata?.batchRootId ? nodeById.get(target.metadata.batchRootId) : null;
+ if (batchRoot && !batchRoot.metadata?.imageBatchExpanded) toggleBatchExpanded(batchRoot.id);
+ const selection = new Set([nodeId]); selectedNodeIdsRef.current = selection; setSelectedNodeIds(selection); setSelectedConnectionId(null); focusCanvasNode(nodeId);
+ }} /> : null}
+ {!workspaceOpen && !focusMode && !versions.preview && shortDramaEnabled && currentProject?.projectId ? (
openProjectAssets()} />
) : null}
@@ -2691,6 +2698,7 @@ function InfiniteCanvasPage() {
onSaveAppearanceDefault={saveCanvasAppearanceDefault}
onBackgroundModeChange={setBackgroundMode}
onShowImageInfoChange={setShowImageInfo}
+ onOpenWorkspace={() => setWorkspaceOpen(value => !value)}
onOpenMyAssets={() => {
openCanvasAssetLibrary();
}}
@@ -2883,6 +2891,7 @@ function InfiniteCanvasPage() {
extractingVideoFrames={toolbarNode?.id === extractingVideoFramesNodeId}
extractingAudio={segmentRunningMode === "audio"}
trimmingVideo={segmentRunningMode === "video"}
+ onNineGrid={(node, id, label, icon) => void generateNineGridNode(node, id, label, icon)}
onReversePrompt={createImageReversePromptNodes}
onRetry={retryCanvasNode}
onToggleFreeResize={(node) => toggleNodeFreeResize(node.id)}
@@ -2913,14 +2922,6 @@ function InfiniteCanvasPage() {
onToggleMiniMap={() => setIsMiniMapOpen((value) => !value)}
onOpenShortcuts={() => setShortcutRequestNonce((value) => value + 1)}
/>
- void createImageAssetNode(asset)}
- onFocusCanvasImage={focusCanvasImageNode}
- />
) : null}
diff --git a/web/src/pages/canvas/shared.tsx b/web/src/pages/canvas/shared.tsx
index 5d6718d71..93b7e4118 100644
--- a/web/src/pages/canvas/shared.tsx
+++ b/web/src/pages/canvas/shared.tsx
@@ -282,7 +282,7 @@ export default function SharedCanvasPage() {
}} onHoverStart={keepToolbar} onHoverEnd={hideToolbar} onConnectStart={unauthorized} onResize={() => undefined} onContentChange={unauthorized} onRetry={unauthorized} onOpenTaskDetails={unauthorized} onViewImage={(target) => setInfoNodeId(target.id)} onContextMenu={(event, nodeId) => openContextMenu(event, nodeId)} />)}
- setInfoNodeId(node.id)} onEditText={unauthorized} onDecreaseFont={unauthorized} onIncreaseFont={unauthorized} onToggleDialog={unauthorized} onAnnotate={unauthorized} onAnnotationEdit={unauthorized} onTextEdit={unauthorized} onGenerateImage={unauthorized} onUpload={unauthorized} onDownload={unauthorized} onSaveAsset={unauthorized} onMaskEdit={unauthorized} onRemoveBackground={unauthorized} onLayerDecomposition={unauthorized} onEmotion={unauthorized} onPortraitTexture={unauthorized} onCrop={unauthorized} onSplit={unauthorized} onUpscale={unauthorized} onSuperResolve={unauthorized} onAngle={unauthorized} onLighting={unauthorized} onPanorama={unauthorized} onViewImage={unauthorized} onExtractVideoFrames={unauthorized} onExtractAudioFromVideo={unauthorized} onTrimVideoSegments={unauthorized} extractingVideoFrames={false} extractingAudio={false} trimmingVideo={false} onSubtitles={unauthorized} onTimeline={unauthorized} onReversePrompt={unauthorized} onRetry={unauthorized} onToggleFreeResize={unauthorized} onToggleLocked={unauthorized} onDelete={unauthorized} />
+ setInfoNodeId(node.id)} onEditText={unauthorized} onDecreaseFont={unauthorized} onIncreaseFont={unauthorized} onToggleDialog={unauthorized} onAnnotate={unauthorized} onAnnotationEdit={unauthorized} onTextEdit={unauthorized} onGenerateImage={unauthorized} onUpload={unauthorized} onDownload={unauthorized} onSaveAsset={unauthorized} onMaskEdit={unauthorized} onRemoveBackground={unauthorized} onLayerDecomposition={unauthorized} onEmotion={unauthorized} onPortraitTexture={unauthorized} onCrop={unauthorized} onSplit={unauthorized} onUpscale={unauthorized} onSuperResolve={unauthorized} onAngle={unauthorized} onLighting={unauthorized} onPanorama={unauthorized} onViewImage={unauthorized} onExtractVideoFrames={unauthorized} onExtractAudioFromVideo={unauthorized} onTrimVideoSegments={unauthorized} extractingVideoFrames={false} extractingAudio={false} trimmingVideo={false} onSubtitles={unauthorized} onTimeline={unauthorized} onReversePrompt={unauthorized} onRetry={unauthorized} onToggleFreeResize={unauthorized} onToggleLocked={unauthorized} onDelete={unauthorized} onNineGrid={unauthorized} />
[]>();
+ for (const node of semanticNodes) {
+ const text = node.metadata?.composerContent ?? node.metadata?.prompt ?? "";
+ const tokens = parseToolMentionTokens(text);
+ if (!tokens.length) continue;
+ const seen = new Set();
+ const refs: ReturnType[] = [];
+ for (const { type, toolId, label, icon } of tokens) {
+ if (seen.has(toolId)) continue;
+ seen.add(toolId);
+ refs.push(buildToolMentionReference(toolId, label, type, icon));
+ }
+ if (refs.length) map.set(node.id, refs);
+ }
+ return map;
+ }, [semanticNodes]);
const mentionReferencesByNodeId = useMemo(() => {
const map = buildCanvasNodeMentionReferenceMap(semanticNodes, connections, visibleNodes);
- if (!skillMentionReferences.length) return map;
- map.forEach((references, nodeId) => map.set(nodeId, [...references, ...skillMentionReferences]));
+ if (!skillMentionReferences.length && toolMentionReferencesByNodeId.size === 0) return map;
+ map.forEach((references, nodeId) => {
+ const extras = [...skillMentionReferences, ...(toolMentionReferencesByNodeId.get(nodeId) ?? [])];
+ if (extras.length) map.set(nodeId, [...references, ...extras]);
+ });
return map;
- }, [connections, semanticNodes, skillMentionReferences, visibleNodes]);
+ }, [connections, semanticNodes, skillMentionReferences, toolMentionReferencesByNodeId, visibleNodes]);
return {
activeDirectorNode,
diff --git a/web/src/pages/canvas/use-canvas-workspace-tasks.ts b/web/src/pages/canvas/use-canvas-workspace-tasks.ts
new file mode 100644
index 000000000..df9f83c97
--- /dev/null
+++ b/web/src/pages/canvas/use-canvas-workspace-tasks.ts
@@ -0,0 +1,51 @@
+import { useUserStore } from "@/stores/use-user-store";
+import { useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import { listGenerationTasks, type GenerationTask } from "@/services/api/task-center";
+
+export function useCanvasWorkspaceTasks(projectId: string, enabled: boolean) {
+ const userId = useUserStore((s) => s.user?.id);
+ const query = useQuery({
+ queryKey: ["canvas-workspace-tasks", userId, projectId],
+ queryFn: () => listGenerationTasks(30, { projectId }),
+ enabled: enabled && Boolean(projectId) && Boolean(userId),
+ refetchInterval: (current) => {
+ const data = current.state.data;
+ if (!data?.length) return 10_000;
+ const hasActive = data.some((task) => (task.status === "queued" || task.status === "running") && !isInternalAgentTask(task));
+ return hasActive ? 3_000 : 10_000;
+ },
+ refetchOnWindowFocus: true,
+ });
+
+ useEffect(() => {
+ if (!enabled) return;
+ const handleTaskChanged = (event: Event) => {
+ const task = (event as CustomEvent<{ task?: GenerationTask }>).detail?.task;
+ if (task?.projectId === projectId) void query.refetch();
+ };
+ window.addEventListener("canvas:task-created", handleTaskChanged);
+ window.addEventListener("canvas:task-cancelled", handleTaskChanged);
+ return () => {
+ window.removeEventListener("canvas:task-created", handleTaskChanged);
+ window.removeEventListener("canvas:task-cancelled", handleTaskChanged);
+ };
+ }, [enabled, projectId, query.refetch]);
+
+ // 任务面板隐藏 Agent 内部任务；历史面板消费全量 allTasks。
+ const tasks = useMemo(() => (query.data || []).filter((task) => !isInternalAgentTask(task)), [query.data]);
+
+ return {
+ tasks,
+ allTasks: query.data || [],
+ error: query.error,
+ loading: query.isLoading,
+ refreshing: query.isFetching,
+ refetch: query.refetch,
+ };
+}
+
+function isInternalAgentTask(task: GenerationTask) {
+ return task.operation?.startsWith("cloud_agent") === true;
+}
diff --git a/web/src/services/api/tools.ts b/web/src/services/api/tools.ts
new file mode 100644
index 000000000..8569f3b68
--- /dev/null
+++ b/web/src/services/api/tools.ts
@@ -0,0 +1,84 @@
+import { http, compactApiParams, serializeApiParams, type ApiParams, type HttpRequestConfig } from "@/services/api/request";
+
+export type ToolType = "style" | "motion" | "nine_grid" | "effect";
+export type ToolScope = "public" | "favorites" | "custom";
+export type ToolSource = "builtin" | "user";
+export type ToolVisibility = "public" | "private";
+
+// 列表摘要项：不含 prompt、extraInfo 等大字段
+export type ToolSummary = {
+ id: number;
+ type: ToolType | string;
+ labelEn: string;
+ label: string;
+ desc: string;
+ tag: string;
+ cover: string;
+ ratio: string;
+ mediaUrl: string;
+ ownerId: string;
+ source: ToolSource | string;
+ enabled: boolean;
+ visibility: ToolVisibility | string;
+ sortWeight: number;
+ favorited: boolean;
+ createdAt: string;
+ updatedAt: string;
+};
+
+// 详情/写操作返回的完整工具
+export type ToolItem = ToolSummary & {
+ extraInfo: string[];
+ prompt: string;
+};
+
+export type ToolList = {
+ tools: ToolSummary[];
+ totalCount: number;
+ page: number;
+ pageSize: number;
+ hasMore: boolean;
+};
+
+export type ListToolsInput = {
+ page?: number;
+ pageSize?: number;
+ scope?: ToolScope;
+ type?: ToolType | string;
+ tag?: string;
+ search?: string;
+};
+
+export type ToolMutationInput = {
+ type: ToolType | string;
+ label: string;
+ desc?: string;
+ tag?: string;
+ cover?: string;
+ extraInfo?: string[];
+ prompt: string;
+ ratio?: string;
+ mediaUrl?: string;
+ visibility?: ToolVisibility;
+};
+
+export function listTools(input: ListToolsInput = {}, config?: HttpRequestConfig) {
+ const params = serializeApiParams(compactApiParams(input as ApiParams));
+ return http.get(`/tools?${params.toString()}`, config);
+}
+
+export function getTool(id: number, config?: HttpRequestConfig) {
+ return http.get(`/tools/${encodeURIComponent(String(id))}`, config);
+}
+
+export function setToolFavorite(id: number, favorite: boolean) {
+ return favorite ? http.post(`/tools/${encodeURIComponent(String(id))}/favorite`) : http.delete(`/tools/${encodeURIComponent(String(id))}/favorite`);
+}
+
+export function createTool(input: ToolMutationInput) {
+ return http.post("/tools", input);
+}
+
+export function deleteTool(id: number) {
+ return http.delete<{ deleted: boolean }>(`/tools/${encodeURIComponent(String(id))}`);
+}
diff --git a/web/test/canvas-connection-create-menu.test.ts b/web/test/canvas-connection-create-menu.test.ts
index 154e31eb2..b867db94d 100644
--- a/web/test/canvas-connection-create-menu.test.ts
+++ b/web/test/canvas-connection-create-menu.test.ts
@@ -9,7 +9,7 @@ test("connection menu omits the header and provides descriptions for every optio
expect(component).not.toContain(">创建下一步");
expect(component).not.toContain("ChevronRight");
expect(component).not.toContain("absolute inset-x-8 top-0 h-px");
- const options = component.match(//g) || [];
expect(options).toHaveLength(9);
for (const option of options) expect(option).toMatch(/description="[^"]+"/);
expect(component).toContain('title="批量创作表"');
diff --git a/web/test/canvas-resource-mention-editor.test.ts b/web/test/canvas-resource-mention-editor.test.ts
index d1760f545..fdfbb672f 100644
--- a/web/test/canvas-resource-mention-editor.test.ts
+++ b/web/test/canvas-resource-mention-editor.test.ts
@@ -130,9 +130,11 @@ describe("canvas resource mention editor", () => {
const chat = source("../src/components/canvas/canvas-cloud-agent-chat-ui.tsx");
const css = source("../src/components/canvas/canvas-cloud-agent.css");
- expect(component).toContain('chip.className = `canvas-resource-inline-mention ${reference.kind === "skill" ? "is-skill" : ""}`');
- expect(component).toContain('prefix.textContent = reference.kind === "skill" ? "✦" : "@"');
- expect(component).toContain('if (reference.kind !== "skill") chip.appendChild(createInlinePreview(reference));');
+ expect(component).toContain('const isDecorated = reference.kind === "skill" || reference.kind === "tool"');
+ expect(component).toContain('chip.className = `canvas-resource-inline-mention ${isDecorated ? `is-${reference.kind}` : ""}`');
+ expect(component).toMatch(/if \(reference.kind === "skill"\)\s*\{\s*prefix.textContent = "✦"/);
+ expect(component).toContain('prefix.textContent = "@"');
+ expect(component).toContain("if (!isDecorated) chip.appendChild(createInlinePreview(reference));");
expect(component).toContain('chip.style.setProperty("--canvas-skill-mention-color", skillMentionColor(reference))');
expect(chat).toContain('sendOnEnter={canSubmit ? "both" : false}');
expect(chat).toContain("agent-composer-resize-handle");
diff --git a/web/test/canvas-tool-integration.test.ts b/web/test/canvas-tool-integration.test.ts
new file mode 100644
index 000000000..17fbb74a8
--- /dev/null
+++ b/web/test/canvas-tool-integration.test.ts
@@ -0,0 +1,72 @@
+import { expect, test } from "bun:test";
+import { applyToolMention, parseToolMentionTokens, removeToolMentions } from "../src/lib/canvas/canvas-resource-references";
+import { createNineGridNode } from "../src/lib/canvas/canvas-image-source";
+import { CanvasNodeType } from "../src/types/canvas";
+import type { CanvasNodeData } from "../src/types/canvas";
+import "../src/lib/canvas/node-registry/definitions/index";
+import { writeCanvasNodePrompt } from "../src/lib/canvas/canvas-node-prompt";
+import { canonicalGenerationMetadata } from "../src/lib/canvas/generation-contract";
+
+for (const type of ["style", "nine_grid"]) {
+ test(`${type} selection, replacement, removal and clearing persist across prompt panel reads`, () => {
+ for (const content of [undefined, "/generated-image.png"]) {
+ let node: CanvasNodeData = {
+ id: "image",
+ type: CanvasNodeType.Image,
+ title: "图片",
+ position: { x: 0, y: 0 },
+ width: 320,
+ height: 180,
+ metadata: { content, prompt: "原始生成记录" },
+ };
+ const editAndRead = (prompt: string) => {
+ node = writeCanvasNodePrompt(node, prompt);
+ node = JSON.parse(JSON.stringify(node)) as CanvasNodeData;
+ const metadata = canonicalGenerationMetadata(node, "image");
+ expect(metadata.composerContent).toBe(prompt);
+ expect(metadata.generationSpec?.prompt).toBe(prompt);
+ if (content) expect(node.metadata?.prompt).toBe("原始生成记录");
+ return metadata.composerContent!;
+ };
+ let prompt = editAndRead(applyToolMention("场景描述", { id: 1, type, label: "初始选择" }));
+ prompt = editAndRead(applyToolMention(prompt, { id: 2, type, label: "替换选择" }));
+ expect(parseToolMentionTokens(prompt).map((token) => token.toolId)).toEqual([2]);
+ prompt = editAndRead(`${prompt}\n连续编辑`);
+ prompt = editAndRead(removeToolMentions(prompt, type));
+ expect(prompt).toBe("场景描述 \n连续编辑");
+ expect(parseToolMentionTokens(prompt)).toEqual([]);
+ editAndRead(applyToolMention(prompt, { id: 3, type, label: "再次选择" }));
+ expect(parseToolMentionTokens(editAndRead(""))).toEqual([]);
+ editAndRead("清空后的新内容");
+ }
+ });
+}
+
+test("tool labels round trip; style replaces, motion deduplicates; clear preserves prose", () => {
+ const style = { id: 1, type: "style", label: "风格: [a] 中文" };
+ const first = applyToolMention("第一行\n第二行", style);
+ expect(parseToolMentionTokens(first)[0].label).toBe(style.label);
+ const changed = applyToolMention(first, { ...style, id: 2 });
+ expect(parseToolMentionTokens(changed).map((t) => t.toolId)).toEqual([2]);
+ expect(removeToolMentions(changed, "style")).toBe("第一行\n第二行");
+ const motion = { id: 46, type: "motion", label: "推镜" };
+ const combined = applyToolMention(changed, motion);
+ expect(applyToolMention(combined, motion)).toBe(combined);
+ expect(parseToolMentionTokens(combined)).toHaveLength(2);
+});
+
+test("nine grid creates idle child using stable source token, not an auto generation", () => {
+ const child = createNineGridNode({ id: "source", type: CanvasNodeType.Image, title: "图", position: { x: 0, y: 0 }, width: 320, height: 180, metadata: { content: "/image.png" } }, "child", 79, "九宫格", "nine_grid", "Grid3x3");
+ expect(child.metadata?.prompt).toContain("@[node:source]");
+ expect(parseToolMentionTokens(child.metadata?.prompt ?? "")[0].toolId).toBe(79);
+ expect(child.metadata?.content).toBeFalsy();
+});
+
+test("node style overrides project style and removing it restores inheritance", async () => {
+ const { resolveCanvasStyleExecution } = await import("../src/lib/canvas/canvas-style-execution");
+ const { defaultConfig } = await import("../src/stores/use-config-store");
+ const styleNode = { id: "style", type: CanvasNodeType.Config, title: "画风", position: { x: 0, y: 0 }, width: 300, height: 200, metadata: { workflowKind: "styleboard" as const, stylePresetId: "test", prompt: "project style" } };
+ const prompt = applyToolMention("scene", { id: 1, type: "style", label: "custom" });
+ expect(resolveCanvasStyleExecution([styleNode], undefined, prompt, defaultConfig, "image")).toBeNull();
+ expect(resolveCanvasStyleExecution([styleNode], undefined, removeToolMentions(prompt, "style"), defaultConfig, "image")).not.toBeNull();
+});
diff --git a/web/test/canvas-workspace-sidebar.test.ts b/web/test/canvas-workspace-sidebar.test.ts
new file mode 100644
index 000000000..d35a617ae
--- /dev/null
+++ b/web/test/canvas-workspace-sidebar.test.ts
@@ -0,0 +1,88 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { canvasDockStyle } from "../src/lib/canvas/canvas-aceternity-style";
+import { canvasThemes } from "../src/lib/canvas-theme";
+
+const component = (name: string) => readFileSync(new URL(`../src/components/canvas/${name}`, import.meta.url), "utf8");
+
+test("canvas removes the standalone asset tray while retaining sidebar assets and zoom controls", () => {
+ const page = readFileSync(new URL("../src/pages/canvas/project.tsx", import.meta.url), "utf8");
+ expect(page).not.toContain("CanvasAssetTray");
+ expect(page).toContain(" {
+ const source = component("canvas-workspace-panel.tsx");
+ for (const label of ["主页", "节点", "资产", "任务", "历史"]) expect(source).toContain(label);
+ expect(source).not.toContain('id: "tools"');
+ expect(source).not.toContain("CanvasWorkspaceToolPanel");
+ expect(source).not.toContain("onInsertTool");
+ expect(source).toContain('aria-label="画布左侧菜单"');
+ expect(source).toContain("aria-pressed={open && tab === id}");
+ expect(source).toContain(" {
+ const source = component("canvas-workspace-asset-panel.tsx");
+ expect(source).toContain('["canvas-workspace-assets", userId, category, kind, search]');
+ expect(source).toContain("loadAssetLibraryPage");
+ expect(source).toContain("assetPickerItemsToInsertPayloads");
+ expect(source).toContain("query.fetchNextPage()");
+ expect(source).toContain('role="alert"');
+ expect(source).toContain("disabled={!insertable || Boolean(inserting)}");
+});
+
+test("image style and presets remain visible without the prompt template picker", () => {
+ const source = component("canvas-node-prompt-panel.tsx");
+ expect(source).toContain("canvas-node-tool-controls-inline");
+ expect(source).toContain(" {
+ expect(component("canvas-workspace-history-panel.tsx")).toContain("最近 30 条（含 Agent）");
+});
+
+test("cleared tool references do not fall back to the original generation prompt", () => {
+ const source = readFileSync(new URL("../src/pages/canvas/use-canvas-render-model.ts", import.meta.url), "utf8");
+ const toolReferences = source.split("const toolMentionReferencesByNodeId = useMemo")[1].split("const tokens =")[0];
+ expect(toolReferences).toContain('node.metadata?.composerContent ?? node.metadata?.prompt ?? ""');
+ expect(toolReferences).not.toContain("||");
+});
+
+test("workspace starts collapsed and keeps separated navigation and bottom toggle", () => {
+ const page = readFileSync(new URL("../src/pages/canvas/project.tsx", import.meta.url), "utf8");
+ expect(page).toContain("const [workspaceOpen, setWorkspaceOpen] = useState(false)");
+ const panel = component("canvas-workspace-panel.tsx");
+ expect(panel).toContain('className="canvas-workspace-rail-items"');
+ expect(panel.indexOf("canvas-workspace-rail-toggle")).toBeGreaterThan(panel.indexOf("entries.map"));
+ const css = component("canvas-workspace-panel.css");
+ expect(css).toContain("gap: var(--space-3)");
+ expect(css).toContain("margin-top: auto");
+ expect(css).toContain("prefers-reduced-motion: reduce");
+});
+
+test("rail shares canvas dock colors rather than muted workspace navigation colors", () => {
+ const panel = component("canvas-workspace-panel.tsx");
+ expect(panel).toContain("canvasThemes[useActiveTheme()]");
+ expect(panel).toContain('...canvasDockStyle(theme), boxShadow: "none"');
+ const railCss = component("canvas-workspace-panel.css").split(".canvas-workspace-rail {")[1];
+ expect(railCss).not.toContain("var(--muted-foreground)");
+ expect(railCss).not.toContain("var(--workspace-navigation)");
+ for (const token of ["--dock-command-hover", "--dock-command-active", "--dock-command-active-text", "--dock-tooltip-border"]) expect(railCss).toContain(`var(${token})`);
+ for (const theme of Object.values(canvasThemes)) {
+ const style = canvasDockStyle(theme);
+ expect(style.background).toBe("var(--dock-surface)");
+ expect(style.color).toBe(theme.toolbar.item);
+ }
+});
+ {!simpleMode && (mode === "image" || mode === "video") ?
onAddReference(node.id, reference) : undefined}
includeAssetLibrary
onChange={updatePrompt}
@@ -565,6 +606,7 @@ export function CanvasNodePromptPanel({ projectId, node, isRunning, onPromptChan
destroyOnHidden
onCancel={() => {
setExpandedPresetOpen(false);
+ setExpandedNineGridOpen(false);
setExpandedPromptOpen(false);
}}
styles={{
@@ -684,7 +726,7 @@ function ConnectedReferenceShelf({
onReplaceReference?: (oldReference: CanvasResourceReference, sourceNodeId: string) => void;
onReplaceReferenceFiles?: (oldReference: CanvasResourceReference, files: File[]) => void;
}) {
- const activeReferences = references.filter((item) => item.active && item.kind !== "skill");
+ const activeReferences = references.filter((item) => item.active && item.kind !== "skill" && item.kind !== "tool");
const [imagePreview, setImagePreview] = useState(null);
const [draggedReferenceId, setDraggedReferenceId] = useState(null);
const [dropTargetReferenceId, setDropTargetReferenceId] = useState(null);
diff --git a/web/src/components/canvas/canvas-node-toolbar.tsx b/web/src/components/canvas/canvas-node-toolbar.tsx
index 5dee9017b..46a542060 100644
--- a/web/src/components/canvas/canvas-node-toolbar.tsx
+++ b/web/src/components/canvas/canvas-node-toolbar.tsx
@@ -1,7 +1,7 @@
import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
import { App, Button, Dropdown, Input, Modal, Tag, Tooltip } from "antd";
import type { MenuProps } from "antd";
-import { Camera, Check, ChevronDown, ChevronRight, Ellipsis, Images, Plus, SlidersHorizontal, UserRound } from "lucide-react";
+import { Camera, Check, ChevronDown, ChevronRight, Ellipsis, Grid3x3, Images, Plus, SlidersHorizontal, UserRound } from "lucide-react";
import { canvasDockStyle } from "@/lib/canvas/canvas-aceternity-style";
import { ASSET_CATEGORY_OPTIONS } from "@/lib/asset-category";
@@ -62,6 +62,7 @@ type CanvasNodeToolbarProps = {
onToggleFreeResize: (node: CanvasNodeData) => void;
onToggleLocked: (node: CanvasNodeData) => void;
onDelete: (node: CanvasNodeData) => void;
+ onNineGrid: (node: CanvasNodeData, toolId: number, label: string, icon: string) => void;
workspaceMode?: CanvasWorkspaceMode;
};
@@ -127,6 +128,7 @@ export function CanvasNodeToolbar({
onToggleFreeResize,
onToggleLocked,
onDelete,
+ onNineGrid,
workspaceMode = "professional",
}: CanvasNodeToolbarProps) {
const [openMenuId, setOpenMenuId] = useState(null);
@@ -229,7 +231,7 @@ export function CanvasNodeToolbar({
}
copyText(prompt, "提示词已复制");
};
- const imageTools = buildImageToolbarTools(node, { onUpload, onToggleFreeResize, onAnnotate, onAnnotationEdit, onTextEdit, onMaskEdit, onRemoveBackground, onLayerDecomposition, onEmotion, onPortraitTexture, onCrop, onUpscale, onSuperResolve, onAngle, onLighting, onPanorama, onViewImage, onCopyPrompt: copyImagePrompt, onReversePrompt });
+ const imageTools = buildImageToolbarTools(node, { onUpload, onToggleFreeResize, onAnnotate, onAnnotationEdit, onTextEdit, onMaskEdit, onRemoveBackground, onLayerDecomposition, onEmotion, onPortraitTexture, onCrop, onUpscale, onSuperResolve, onAngle, onLighting, onPanorama, onViewImage, onCopyPrompt: copyImagePrompt, onReversePrompt, onNineGrid });
// 构建 ToolContext——供注册表解析工具
const nodeHoverHandlers = {
@@ -292,6 +294,7 @@ export function CanvasNodeToolbar({
const viewpointLightingTools = compact ? [] : [...inGroup("viewpoint"), ...inGroup("lighting")];
const panoramaTools = compact ? [] : inGroup("panorama");
const processTools = compact ? [...inGroup("portrait"), ...inGroup("viewpoint"), ...inGroup("lighting"), ...inGroup("panorama"), ...inGroup("process")] : inGroup("process");
+ const nineGridTools = compact ? [] : inGroup("nine_grid");
const workspaceTools = narrow ? [] : inGroup("workspace");
const utilityTools = inGroup("utility");
const moreTools = [...(narrow ? [...primary.slice(1), ...inGroup("workspace")] : []), ...inGroup("more")];
@@ -324,6 +327,7 @@ export function CanvasNodeToolbar({
style={{ ...dockStyle, border: 0 }}
>
{primaryTools.map((tool) => includeAssetLibrary ? buildAssetMentionReferences(assets) : [], [assets, includeAssetLibrary]);
const assetReferences = useResolvedCanvasResourceReferences(rawAssetReferences);
const activeCanvasReferences = useMemo(() => canvasReferences.filter((item) => item.active), [canvasReferences]);
- const availableReferences = useMemo(() => [...(onSelectReference ? canvasReferences : activeCanvasReferences), ...assetReferences], [onSelectReference, canvasReferences, activeCanvasReferences, assetReferences]);
+ // 工具标签只能经九宫格等面板入口插入，@ 引用菜单不再重复展示。
+ const mentionCanvasReferences = useMemo(() => canvasReferences.filter((item) => item.kind !== "tool"), [canvasReferences]);
+ const activeMentionCanvasReferences = useMemo(() => mentionCanvasReferences.filter((item) => item.active), [mentionCanvasReferences]);
+ const availableReferences = useMemo(() => [...(onSelectReference ? mentionCanvasReferences : activeMentionCanvasReferences), ...assetReferences], [onSelectReference, mentionCanvasReferences, activeMentionCanvasReferences, assetReferences]);
const candidates = useMemo(() => {
if (!mention) return [];
const query = mention.query.trim().toLowerCase();
- if (!query) return onSelectReference ? canvasReferences : activeCanvasReferences;
+ if (!query) return onSelectReference ? mentionCanvasReferences : activeMentionCanvasReferences;
return availableReferences.filter((item) => `${item.label} ${item.title} ${item.kind} ${item.category || ""} ${item.text || ""}`.toLowerCase().includes(query));
- }, [onSelectReference, canvasReferences, activeCanvasReferences, availableReferences, mention]);
+ }, [onSelectReference, mentionCanvasReferences, activeMentionCanvasReferences, availableReferences, mention]);
const activeReferences = useMemo(() => {
if (!highlightLabels) return [];
return [...activeCanvasReferences, ...assetReferences.filter((item) => value.includes(canvasResourceMentionToken(item)))];
@@ -327,7 +331,7 @@ export const CanvasResourceMentionTextarea = forwardRef> = {
+ Brush, Camera, Clapperboard, Clock, Contrast, FastForward, Globe2, Grid2x2, Grid3x3, Package, Palette, PersonStanding, Rewind, ScanFace, SlidersHorizontal, Sparkles, Sun,
+};
+
+function toolIconSvg(iconName: string): string {
+ const Icon = TOOL_ICON_MAP[iconName];
+ if (!Icon) return "🔧";
+ return renderToStaticMarkup(; onManage: () => void; onProjectAssets?: () => void }) {
+ const { message } = App.useApp();
+ const userId = useUserStore((state) => state.user?.id);
+ const hydrated = useUserStore((state) => state.hydrated);
+ const [category, setCategory] = useState("material");
+ const [kind, setKind] = useState("all");
+ const [input, setInput] = useState("");
+ const [search, setSearch] = useState("");
+ const [inserting, setInserting] = useState(null);
+ useEffect(() => {
+ const timer = window.setTimeout(() => setSearch(input.trim()), 250);
+ return () => window.clearTimeout(timer);
+ }, [input]);
+ const query = useInfiniteQuery({
+ queryKey: ["canvas-workspace-assets", userId, category, kind, search],
+ initialPageParam: 1,
+ queryFn: ({ signal, pageParam }) => loadAssetLibraryPage({ page: pageParam, pageSize: 40, category, kind: kind === "all" ? undefined : kind, status: "active", query: search, signal }),
+ getNextPageParam: (page, pages) => (pages.reduce((count, item) => count + item.assets.length, 0) < page.total ? pages.length + 1 : undefined),
+ enabled: Boolean(userId) && hydrated,
+ });
+ const assets = query.data?.pages.flatMap((page) => page.assets) ?? [];
+ const insert = async (asset: Asset) => {
+ if (inserting) return;
+ setInserting(asset.id);
+ try {
+ const payloads = assetPickerItemsToInsertPayloads([asset.id], [{ id: asset.id, title: asset.title, category: asset.category || "other", kindLabel: asset.kind, asset }]);
+ await onInsert(payloads);
+ } catch (error) {
+ message.error(error instanceof Error ? error.message : "插入素材失败");
+ } finally {
+ setInserting(null);
+ }
+ };
+ return (
+ <>
+
+
+
+
+
+ ;
+ onQueryChange: (value: string) => void;
+ onFocus: (nodeId: string) => void;
+}) {
+ return (
+ <>
+
+
+ 
setFailed(true)} />;
+ }
+
+ const textPreview = node.metadata?.previewContent || node.metadata?.composerContent || node.metadata?.prompt || node.metadata?.content;
+ if (textPreview && (node.type === CanvasNodeType.Text || node.type === CanvasNodeType.Markdown || node.type === CanvasNodeType.Script)) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+function fullTime(value?: string) {
+ if (!value) return "时间未记录";
+ return new Date(value).toLocaleString("zh-CN", { hour12: false });
+}
diff --git a/web/src/components/canvas/canvas-workspace-overlays.tsx b/web/src/components/canvas/canvas-workspace-overlays.tsx
index f7b558ce5..9bb404f03 100644
--- a/web/src/components/canvas/canvas-workspace-overlays.tsx
+++ b/web/src/components/canvas/canvas-workspace-overlays.tsx
@@ -48,7 +48,7 @@ export function CanvasSelectionToolbar({ anchorRef, containerRef, count, childre
toolbarRef.current.classList.toggle("-translate-y-full", placement === "above");
return;
}
- setAnchor((current) => current?.left === left && current.top === top && current.placement === placement ? current : { left, top, placement });
+ setAnchor((current) => (current?.left === left && current.top === top && current.placement === placement ? current : { left, top, placement }));
};
update();
@@ -79,15 +79,45 @@ export function CanvasSelectionToolbar({ anchorRef, containerRef, count, childre
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
>
-
- 已选 {count}
+
+
+ 已选 {count}
+
);
}
-export function CanvasNodePanelOverlay({ node, viewport, containerRef, panelWidth, panelHeight = 190, dragOffset, isDragging = false, allowOverflow = false, children }: { node: CanvasNodeData; viewport: ViewportTransform; containerRef: RefObject e.stopPropagation()}>
+ {mode === "image" ? <>
+ updatePrompt(applyToolMention(prompt,{id,label,type:"style"},"Palette"))} onClear={() => updatePrompt(removeToolMentions(prompt,"style"))} />
+ updatePrompt(applyToolMention(prompt,{id,label,type:"nine_grid"},icon))} />
+ : <>
+ updatePrompt(applyToolMention(prompt,{id,label,type:"effect"},"Sparkles"))} onClear={() => updatePrompt(removeToolMentions(prompt,"effect"))} />
+ t.toolId)} activeLabel={activeMotionTool?.label} onSelect={(id,label) => updatePrompt(applyToolMention(prompt,{id,label,type:"motion"},"Camera"))} onClear={removeMotionToolMention} />
+ }
+
: null}
+ {showPromptTemplates ?
+ {categories.map((id) => (
+
+ ))}
+
+
+
+
+
+ } onClick={() => void query.refetch()} />
+
+ setInput(event.target.value)} />
+
+ {!userId ? (
+
+
+
+ );
+}
diff --git a/web/src/components/canvas/canvas-workspace-history-panel.tsx b/web/src/components/canvas/canvas-workspace-history-panel.tsx
new file mode 100644
index 000000000..6b95766fd
--- /dev/null
+++ b/web/src/components/canvas/canvas-workspace-history-panel.tsx
@@ -0,0 +1,35 @@
+import { History, RefreshCw } from "lucide-react";
+
+import { WorkspaceState } from "@/components/layout/workspace-state";
+import type { GenerationTask } from "@/services/api/task-center";
+import { TaskListItem } from "./canvas-workspace-task-list-item";
+
+// 历史面板：展示项目最近任务（含云端 Agent 根任务与步骤任务），与任务面板互不依赖。
+export function CanvasWorkspaceHistoryPanel({ tasks, refreshing, onRefresh, onCancelTask }: { tasks: GenerationTask[]; refreshing?: boolean; onRefresh?: () => void; onCancelTask?: (task: GenerationTask) => void }) {
+ return (
+ <>
+ 登录后查看资产。
+ ) : query.isPending ? ( ++ 正在加载资产… +
+ ) : null} + {query.isError ? ( +
+ 资产读取失败，已加载的内容仍保留。
+
+ ) : null}
+ {assets.map((asset) => {
+ const insertable = ["image", "video", "audio", "text"].includes(asset.kind);
+ const cover = asset.coverUrl || (asset.kind === "image" ? asset.data.dataUrl : "");
+ return (
+
+
+ );
+ })}
+ {query.isSuccess && !assets.length ?
+
+
+
+ }
+ onClick={() => void insert(asset)}
+ />
+
+ {asset.title}
+
+
+ {resourceStorageLabel("storageKey" in asset.data ? asset.data.storageKey : undefined)}
+ {asset.tags?.length ? ` · ${asset.tags[0]}` : ""}
+
+
+ {tasks.length ? (
+
+
+ );
+}
diff --git a/web/src/components/canvas/canvas-workspace-node-list-panel.tsx b/web/src/components/canvas/canvas-workspace-node-list-panel.tsx
new file mode 100644
index 000000000..ecbb42e13
--- /dev/null
+++ b/web/src/components/canvas/canvas-workspace-node-list-panel.tsx
@@ -0,0 +1,148 @@
+import { memo, useState } from "react";
+import { AudioLines, Clock3, FileText, Image, Layers, Pencil, Search, X } from "lucide-react";
+
+import { WorkspaceState } from "@/components/layout/workspace-state";
+import { canvasNodeMaterialSummary, canvasNodeSearchContext, canvasNodeSearchTimes } from "@/lib/canvas/canvas-node-search";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
+import { getNodeListLabel } from "@/lib/canvas/node-registry";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
+import { Video as CanvasVideoIcon } from "lucide-react";
+
+export function CanvasWorkspaceNodeListPanel({
+ nodes,
+ results,
+ query,
+ deferredQuery,
+ selectedNodeIds,
+ onQueryChange,
+ onFocus,
+}: {
+ nodes: CanvasNodeData[];
+ results: CanvasNodeData[];
+ query: string;
+ deferredQuery: string;
+ selectedNodeIds: Set
+ {tasks.map((task) => (
+
+ ) : (
+
+
+ {deferredQuery ?
+ 找到 {results.length.toLocaleString("zh-CN")} 个节点
: null}
+
+ {results.length ? (
+ results.map((node) => onFocus(node.id)} />)
+ ) : (
+
+
+ );
+}
+
+const CanvasNodeListItem = memo(function CanvasNodeListItem({ node, active, onSelect }: { node: CanvasNodeData; active: boolean; onSelect: () => void }) {
+ const times = canvasNodeSearchTimes(node);
+ const materialSummary = canvasNodeMaterialSummary(node);
+ const context = canvasNodeSearchContext(node);
+ return (
+
+ );
+});
+
+function CanvasNodeListThumbnail({ node }: { node: CanvasNodeData }) {
+ const [failed, setFailed] = useState(false);
+ const mediaSource =
+ node.type === CanvasNodeType.Video
+ ? canvasNodeVideoPreviewUrl(node)
+ : node.metadata?.drawingPreviewUrl ||
+ node.metadata?.characterCoverUrl ||
+ node.metadata?.folder?.themeCover ||
+ (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Panorama || node.type === CanvasNodeType.ColorGrade ? node.metadata?.content : undefined);
+ const commonClass = "h-9 w-11 rounded-[var(--r-sm)] border object-cover";
+ const commonStyle = { borderColor: "color-mix(in srgb, var(--foreground) 9%, transparent)", background: "color-mix(in srgb, var(--foreground) 5%, transparent)" };
+
+ if (mediaSource && !failed) {
+ return {children}
-
);
}
-function ConnectionCreateOption({ expanded, motionEnabled, icon, title, description, disabledReason, onClick }: { expanded: boolean; motionEnabled: boolean; icon: ReactNode; title: string; description: string; disabledReason?: string; onClick: () => void }) {
+function ConnectionCreateOption({
+ expanded,
+ motionEnabled,
+ icon,
+ title,
+ description,
+ disabledReason,
+ onClick,
+}: {
+ expanded: boolean;
+ motionEnabled: boolean;
+ icon: ReactNode;
+ title: string;
+ description: string;
+ disabledReason?: string;
+ onClick: () => void;
+}) {
const theme = canvasThemes[useActiveTheme()];
return (
-
+
+
+ {HOVER_VIDEO_TYPES.has(activeType) ? (
+
+ {Array.from({ length: 8 }, (_, index) => (
+
+ );
+});
+
+const ToolPresetCard = memo(function ToolPresetCard({
+ tool,
+ feedTabLabel,
+ favoritePending,
+ onInsert,
+ onView,
+ onToggleFavorite,
+ onDelete,
+}: {
+ tool: ToolSummary;
+ feedTabLabel: string;
+ favoritePending: boolean;
+ onInsert?: (tool: ToolSummary) => void;
+ onView?: (tool: ToolSummary) => void;
+ onToggleFavorite?: (tool: ToolSummary) => void;
+ onDelete?: (tool: ToolSummary) => void;
+}) {
+ const [failed, setFailed] = useState(false);
+ const [menuOpen, setMenuOpen] = useState(false);
+ const [hovered, setHovered] = useState(false);
+ const [videoReady, setVideoReady] = useState(false);
+ const [videoFailed, setVideoFailed] = useState(false);
+ const rootRef = useRef
+
+
+
+ ))}
+ {
+ if (showHoverVideo) setHovered(true);
+ }}
+ onMouseLeave={() => setHovered(false)}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ setMenuOpen(true);
+ }}
+ >
+
+ );
+});
diff --git a/web/src/lib/canvas/canvas-image-source.ts b/web/src/lib/canvas/canvas-image-source.ts
index 101cae6c9..a2eeab26b 100644
--- a/web/src/lib/canvas/canvas-image-source.ts
+++ b/web/src/lib/canvas/canvas-image-source.ts
@@ -28,3 +28,18 @@ export function createPortraitTextureNode(source: CanvasNodeData, id: string): C
},
};
}
+export function createNineGridNode(source: CanvasNodeData, id: string, toolId: number, label: string, type: string, icon: string): CanvasNodeData {
+ return {
+ id,
+ type: CanvasNodeType.Image,
+ title: `${source.title || "图片"} · ${label}`,
+ position: { x: source.position.x + source.width + 96, y: source.position.y },
+ width: source.width,
+ height: source.height,
+ metadata: {
+ prompt: `@[node:${source.id}] @[tool:${type}:${toolId}:${encodeURIComponent(label)}:${icon}]`,
+ composerContent: `@[node:${source.id}] @[tool:${type}:${toolId}:${encodeURIComponent(label)}:${icon}]`,
+ generationType: "edit",
+ },
+ };
+}
diff --git a/web/src/lib/canvas/canvas-node-prompt.test.ts b/web/src/lib/canvas/canvas-node-prompt.test.ts
index 2ae2b2266..5cc6c4846 100644
--- a/web/src/lib/canvas/canvas-node-prompt.test.ts
+++ b/web/src/lib/canvas/canvas-node-prompt.test.ts
@@ -4,6 +4,7 @@ import test from "node:test";
import "./node-registry/definitions/index.ts";
// @ts-expect-error -- Node 原生 TypeScript 测试运行器需要保留扩展名。
import { canvasNodeHasCommittedContent, writeCanvasNodePrompt } from "./canvas-node-prompt.ts";
+import { canonicalGenerationMetadata } from "./generation-contract";
// @ts-expect-error -- Node 原生 TypeScript 测试运行器需要保留扩展名。
import { CanvasNodeType, type CanvasNodeData } from "../../types/canvas.ts";
@@ -49,6 +50,28 @@ test("空媒体草稿同时初始化提交提示词和编辑提示词", () => {
assert.equal(metadata?.generationSpec?.prompt, "第一版提示词");
});
+test("模板提示词清空后重新读取和保存重载均保持为空", () => {
+ for (const type of [CanvasNodeType.Image, CanvasNodeType.Video, CanvasNodeType.Audio]) {
+ for (const content of [undefined, `https://example.com/${type}`]) {
+ const current = node(type, { content, prompt: "已提交提示词" });
+ const applied = writeCanvasNodePrompt(current, "模板预设文字");
+ const cleared = writeCanvasNodePrompt(applied, "");
+ assert.equal(cleared.metadata?.composerContent, "");
+ assert.equal(cleared.metadata?.generationSpec?.prompt, "");
+ assert.equal(cleared.metadata?.prompt, content ? "已提交提示词" : "");
+ const reloaded = JSON.parse(JSON.stringify(cleared)) as CanvasNodeData;
+ assert.equal(canonicalGenerationMetadata(reloaded, type).composerContent, "");
+ }
+ }
+});
+
+test("已有生成合同的提示词支持连续编辑而不回填旧模板", () => {
+ const applied = writeCanvasNodePrompt(node(CanvasNodeType.Image), "模板预设文字");
+ const edited = writeCanvasNodePrompt(applied, "修改后的文字");
+ assert.equal(edited.metadata?.generationSpec?.prompt, "修改后的文字");
+ assert.equal(canonicalGenerationMetadata(edited, "image").composerContent, "修改后的文字");
+});
+
test("图片仅保留 storageKey 时仍视为已有媒体结果", () => {
const current = node(CanvasNodeType.Image, {
storageKey: "canvas/image/result.png",
diff --git a/web/src/lib/canvas/canvas-node-prompt.ts b/web/src/lib/canvas/canvas-node-prompt.ts
index aa15065ab..4ac080414 100644
--- a/web/src/lib/canvas/canvas-node-prompt.ts
+++ b/web/src/lib/canvas/canvas-node-prompt.ts
@@ -29,10 +29,11 @@ export function writeCanvasNodePrompt(node: CanvasNodeData, prompt: string, opti
const promptTemplateMetadata = clearPromptTemplate
? { promptTemplateOperation: undefined, promptTemplateVariables: undefined }
: {};
- return synchronizeGenerationSpec({
- ...node,
- metadata: canvasNodeHasCommittedContent(node)
- ? { ...metadata, ...promptTemplateMetadata, composerContent: prompt }
- : { ...metadata, ...promptTemplateMetadata, prompt, composerContent: prompt },
- });
+ // 显式提交草稿补丁，否则已有 generationSpec 会把旧提示词投影回编辑框。
+ return synchronizeGenerationSpec(
+ { ...node, metadata },
+ canvasNodeHasCommittedContent(node)
+ ? { ...promptTemplateMetadata, composerContent: prompt }
+ : { ...promptTemplateMetadata, prompt, composerContent: prompt },
+ );
}
diff --git a/web/src/lib/canvas/canvas-resource-references.ts b/web/src/lib/canvas/canvas-resource-references.ts
index fd6f0a53b..ef0d02431 100644
--- a/web/src/lib/canvas/canvas-resource-references.ts
+++ b/web/src/lib/canvas/canvas-resource-references.ts
@@ -7,7 +7,7 @@ import type { Skill } from "@/services/api/skills";
import type { Asset, AssetCategory } from "@/stores/use-asset-store";
import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type CanvasNodeTypeId } from "@/types/canvas";
-export type CanvasResourceKind = "image" | "video" | "audio" | "text" | "skill" | "character";
+export type CanvasResourceKind = "image" | "video" | "audio" | "text" | "skill" | "character" | "tool";
export type CanvasResourceReference = {
id: string;
@@ -31,26 +31,89 @@ export type CanvasResourceReference = {
assetId?: string;
category?: AssetCategory;
mentionToken?: string;
+ /** 仅 kind === "tool" 时使用，对应后端工具 ID。 */
+ toolId?: number;
+ /** 仅 kind === "tool" 时使用，对应工具类型（style/nine_grid/effect/motion）。 */
+ toolType?: string;
+ /** 仅 kind === "tool" 时使用，lucide 图标名称。 */
+ toolIcon?: string;
};
export function canvasSkillMentionToken(skillId: string) {
return `@[skill:${skillId}]`;
}
+export function canvasToolMentionToken(toolId: number, label: string, type: string, icon: string) {
+ return `@[tool:${type}:${toolId}:${encodeURIComponent(label)}:${icon}]`;
+}
+
+const TOOL_REF_PATTERN = /@\[tool:(\w+):(\d+):([^:\]]+):([^\]]+)\]/g;
+
+/** 从文本中解析所有 @[tool:type:ID:label:icon] 令牌，返回去重的工具引用。 */
+export function parseToolMentionTokens(text: string): { type: string; toolId: number; label: string; icon: string }[] {
+ const results: { type: string; toolId: number; label: string; icon: string }[] = [];
+ const seen = new Set
+ {coverUrl && !failed ? (
+ 
setFailed(true)} />
+ ) : (
+
+ {tool.label}
+ {tool.desc ? {tool.desc} : null}
+
+
+ )}
+ {/* 悬停播放的预览视频：仅 hover 时挂载，静音/循环/内联满足各浏览器自动播放策略，首帧就绪后淡入覆盖封面 */}
+ {showHoverVideo && hovered ? (
+