feat: add canvas resource mention references

2026-07-24 15:24:06 +08:00 · 2026-06-03 11:26:59 +08:00
parent 72ed6a043c
commit c70e7af14d
8 changed files with 444 additions and 30 deletions
@@ -39,6 +39,7 @@ import { CanvasToolbar } from "../components/canvas-toolbar";
 import { AssetPickerModal, type AssetPickerTab, type InsertAssetPayload } from "../components/asset-picker-modal";
 import { CanvasZoomControls } from "../components/canvas-zoom-controls";
 import { useCanvasStore } from "../stores/use-canvas-store";
+import { buildCanvasResourceReferences, buildInputMentionReferences, buildNodeMentionReferences } from "../utils/canvas-resource-references";
 import {
    CanvasNodeType,
    type CanvasAssistantImage,
@@ -525,7 +526,8 @@ function InfiniteCanvasPage() {
            const padding = CONNECTION_NODE_HIT_PADDING / scale;
            const handleRadius = CONNECTION_HANDLE_HIT_RADIUS / scale;
            let isNearNode = false;
-            let best: { nodeId: string; priority: number } | null = null;
+            let bestNodeId: string | null = null;
+            let bestPriority = Number.POSITIVE_INFINITY;

            [...nodesRef.current]
                .filter((node) => !isHiddenBatchChild(node, nodesRef.current))
@@ -543,10 +545,13 @@ function InfiniteCanvasPage() {
                    if (node.id === current.nodeId || !normalizeConnection(current.nodeId, node.id, nodesRef.current, current.handleType)) return;

                    const priority = hitsInside ? 0 : hitsHandle ? 1 : 2;
-                    if (!best || priority < best.priority) best = { nodeId: node.id, priority };
+                    if (priority < bestPriority) {
+                        bestNodeId = node.id;
+                        bestPriority = priority;
+                    }
                });

-            return { nodeId: best?.nodeId || null, isNearNode };
+            return { nodeId: bestNodeId, isNearNode };
        },
        [screenToCanvas],
    );
@@ -617,6 +622,19 @@ function InfiniteCanvasPage() {
        });
        return map;
    }, [connections, nodes]);
+    const resourceContextNodeId = dialogNodeId || activeNodeId;
+    const canvasResourceReferences = useMemo(() => buildCanvasResourceReferences(nodes, connections, resourceContextNodeId), [connections, nodes, resourceContextNodeId]);
+    const resourceReferenceByNodeId = useMemo(() => new Map(canvasResourceReferences.map((reference) => [reference.nodeId, reference])), [canvasResourceReferences]);
+    const mentionReferencesByNodeId = useMemo(() => {
+        const map = new Map<string, ReturnType<typeof buildNodeMentionReferences>>();
+        nodes.forEach((node) => map.set(node.id, buildNodeMentionReferences(node, nodes, connections)));
+        return map;
+    }, [connections, nodes]);
+    const configMentionReferencesById = useMemo(() => {
+        const map = new Map<string, ReturnType<typeof buildInputMentionReferences>>();
+        configInputsById.forEach((inputs, nodeId) => map.set(nodeId, buildInputMentionReferences(inputs)));
+        return map;
+    }, [configInputsById]);

    const createNode = useCallback(
        (type: CanvasNodeType, position?: Position) => {
@@ -2190,10 +2208,13 @@ function InfiniteCanvasPage() {
                            batchRecovering={collapsingBatchIds.has(node.id)}
                            batchMotion={batchMotionById.get(node.id)}
                            showImageInfo={showImageInfo}
+                            resourceLabel={resourceReferenceByNodeId.get(node.id)}
+                            mentionReferences={mentionReferencesByNodeId.get(node.id) || []}
                            renderPanel={(panelNode) => (
                                <CanvasNodePromptPanel
                                    node={panelNode}
                                    isRunning={runningNodeId === panelNode.id}
+                                    mentionReferences={mentionReferencesByNodeId.get(panelNode.id) || []}
                                    onPromptChange={handleNodePromptChange}
                                    onConfigChange={handleConfigNodeChange}
                                    onGenerate={handleGenerateNode}
@@ -2209,6 +2230,7 @@ function InfiniteCanvasPage() {
                                    isRunning={runningNodeId === contentNode.id}
                                    inputSummary={getInputSummary(configInputsById.get(contentNode.id) || [])}
                                    inputs={configInputsById.get(contentNode.id) || []}
+                                    mentionReferences={configMentionReferencesById.get(contentNode.id) || []}
                                    onConfigChange={handleConfigNodeChange}
                                    onTextInputChange={handleNodeContentChange}
                                    onGenerate={(nodeId) => {
@@ -3,7 +3,7 @@
 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, Input, Modal, Segmented } from "antd";
+import { App, Button, Empty, Modal, Segmented } from "antd";

 import { ModelPicker } from "@/components/model-picker";
 import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
@@ -14,21 +14,24 @@ 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;
 };

-export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, onConfigChange, onTextInputChange, onGenerate }: CanvasConfigNodePanelProps) {
+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);
@@ -46,6 +49,7 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
    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;

@@ -125,12 +129,12 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
                </div>
            </div>

-            <div className="mb-2 flex flex-wrap gap-1.5" onMouseDown={(event) => event.stopPropagation()}>
+            <div className="mb-2 flex flex-wrap gap-1.5">
                <InputChip label="提示词" value={`${inputSummary.textCount} 个`} style={chipStyle} />
                <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} onClick={() => setPreviewOpen(true)}>
+                <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>
@@ -228,7 +232,7 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
                                                    收起
                                                </Button>
                                            </div>
-                                            <Input.TextArea className="thin-scrollbar !flex-1 !resize-none !text-xs !leading-5" value={editingText} onChange={(event) => setEditingText(event.target.value)} />
+                                            <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)}>
                                                    取消
@@ -2,6 +2,7 @@ import type { ChatCompletionMessage } from "@/services/api/image";
 import type { ReferenceImage } from "@/types/image";
 import type { ReferenceAudio, ReferenceVideo } from "@/types/media";
 import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "../types";
+import { getGenerationResourceNodes } from "../utils/canvas-resource-references";

 export type NodeGenerationContext = {
    prompt: string;
@@ -47,7 +48,7 @@ export function buildNodeGenerationContext(nodeId: string, nodes: CanvasNodeData
 }

 export function buildNodeGenerationInputs(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]): NodeGenerationInput[] {
-    return getOrderedUpstreamNodes(nodeId, nodes, connections).flatMap((node): NodeGenerationInput[] => {
+    return getGenerationResourceNodes(nodeId, nodes, connections).flatMap((node): NodeGenerationInput[] => {
        const image = readReferenceImage(node);
        if (image) return [{ nodeId: node.id, type: "image" as const, title: node.title, image }];
        const video = readReferenceVideo(node);
@@ -120,13 +121,3 @@ function readReferenceAudio(node: CanvasNodeData): ReferenceAudio | null {
        durationMs: node.metadata.durationMs,
    };
 }
-
-function getOrderedUpstreamNodes(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
-    const target = nodes.find((node) => node.id === nodeId);
-    const upstreamNodes = connections
-        .filter((connection) => connection.toNodeId === nodeId)
-        .map((connection) => nodes.find((node) => node.id === connection.fromNodeId))
-        .filter((node): node is CanvasNodeData => Boolean(node));
-    const order = target?.metadata?.inputOrder || [];
-    return [...order.map((id) => upstreamNodes.find((node) => node.id === id)).filter((node): node is CanvasNodeData => Boolean(node)), ...upstreamNodes.filter((node) => !order.includes(node.id))];
-}
@@ -12,8 +12,10 @@ import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
 import { CanvasPromptLibrary } from "./canvas-prompt-library";
 import { CanvasAudioSettingsPopover, type CanvasAudioSettingKey } from "./canvas-audio-settings-popover";
+import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
 import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
 import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData } from "../types";
+import type { CanvasResourceReference } from "../utils/canvas-resource-references";

 export type CanvasNodeGenerationMode = CanvasGenerationMode;

@@ -23,10 +25,11 @@ type CanvasNodePromptPanelProps = {
    onPromptChange: (nodeId: string, prompt: string) => void;
    onConfigChange: (nodeId: string, patch: Partial<CanvasNodeData["metadata"]>) => void;
    onGenerate: (nodeId: string, mode: CanvasNodeGenerationMode, prompt: string) => void;
+    mentionReferences?: CanvasResourceReference[];
    onImageSettingsOpenChange?: (open: boolean) => void;
 };

-export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onImageSettingsOpenChange }: CanvasNodePromptPanelProps) {
+export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, mentionReferences = [], onImageSettingsOpenChange }: CanvasNodePromptPanelProps) {
    const globalConfig = useEffectiveConfig();
    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
    const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
@@ -63,14 +66,11 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
            onPointerDown={(event) => event.stopPropagation()}
            onWheel={(event) => event.stopPropagation()}
        >
-            <textarea
+            <CanvasResourceMentionTextarea
                value={prompt}
-                onChange={(event) => updatePrompt(event.target.value)}
-                onKeyDown={(event) => {
-                    if (event.key !== "Enter" || event.ctrlKey || event.metaKey || event.shiftKey) return;
-                    event.preventDefault();
-                    submit();
-                }}
+                references={mentionReferences}
+                onChange={updatePrompt}
+                onSubmit={submit}
                className="thin-scrollbar h-24 w-full resize-none rounded-xl border px-3 py-2 text-sm leading-5 outline-none"
                style={{ background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text }}
                placeholder={promptPlaceholder(mode, hasImageContent, hasTextContent)}
@@ -7,7 +7,9 @@ import { ChevronRight, Image as ImageIcon, Music2, RefreshCw, Star, Video } from
 import { canvasThemes } from "@/lib/canvas-theme";
 import { formatBytes } from "@/lib/image-utils";
 import { useThemeStore } from "@/stores/use-theme-store";
+import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
 import { CanvasNodeType, type CanvasNodeData, type Position } from "../types";
+import type { CanvasResourceReference } from "../utils/canvas-resource-references";

 type ResizeCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 const selectionBlue = "#2f80ff";
@@ -23,6 +25,8 @@ type CanvasNodeProps = {
    editRequestNonce?: number;
    showPanel: boolean;
    showImageInfo: boolean;
+    resourceLabel?: CanvasResourceReference;
+    mentionReferences?: CanvasResourceReference[];
    renderPanel?: (node: CanvasNodeData) => ReactNode;
    renderNodeContent?: (node: CanvasNodeData) => ReactNode;
    batchCount?: number;
@@ -57,6 +61,7 @@ type NodeContentRendererProps = {
    renderNodeContent?: (node: CanvasNodeData) => ReactNode;
    onContentChange: (nodeId: string, content: string) => void;
    onStopEditing: () => void;
+    mentionReferences: CanvasResourceReference[];
    onRetry?: (node: CanvasNodeData) => void;
    onGenerateImage?: (node: CanvasNodeData) => void;
    onToggleBatch?: () => void;
@@ -74,6 +79,8 @@ export const CanvasNode = React.memo(function CanvasNode({
    editRequestNonce = 0,
    showPanel,
    showImageInfo,
+    resourceLabel,
+    mentionReferences = [],
    renderPanel,
    renderNodeContent,
    batchCount = 0,
@@ -291,6 +298,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                        batchOpening={batchOpening}
                        batchRecovering={batchRecovering}
                        renderNodeContent={renderNodeContent}
+                        mentionReferences={mentionReferences}
                        onContentChange={onContentChange}
                        onStopEditing={() => setIsEditingContent(false)}
                        onRetry={onRetry}
@@ -301,6 +309,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                </div>

                {showImageInfo && hasImageContent ? <ImageInfoBar node={data} /> : null}
+                {resourceLabel ? <ResourceLabelBadge reference={resourceLabel} /> : null}

                {!hasImageContent && !hasVideoContent && !hasAudioContent ? <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12" style={{ background: `linear-gradient(to top, ${theme.canvas.background}66, transparent)` }} /> : null}

@@ -366,7 +375,7 @@ function ErrorContent({ node, theme, onRetry }: Pick<NodeContentRendererProps, "
    );
 }

-function TextContent({ node, theme, isEditingContent, textareaRef, onContentChange, onStopEditing, onGenerateImage }: NodeContentRendererProps) {
+function TextContent({ node, theme, isEditingContent, textareaRef, mentionReferences, onContentChange, onStopEditing, onGenerateImage }: NodeContentRendererProps) {
    return (
        <div className="flex h-full w-full flex-col overflow-hidden pt-8">
            <button
@@ -386,12 +395,13 @@ function TextContent({ node, theme, isEditingContent, textareaRef, onContentChan
                生图
            </button>
            {isEditingContent ? (
-                <textarea
+                <CanvasResourceMentionTextarea
                    ref={textareaRef}
                    className="thin-scrollbar block h-full w-full resize-none overflow-y-auto whitespace-pre-wrap break-words border-none bg-transparent pl-4 pr-14 pt-0 pb-4 m-0 font-mono leading-relaxed outline-none select-text appearance-none"
                    style={{ fontSize: `${node.metadata?.fontSize || 14}px`, color: theme.node.text }}
                    value={node.metadata?.content || ""}
-                    onChange={(event) => onContentChange(node.id, event.target.value)}
+                    references={mentionReferences}
+                    onChange={(value) => onContentChange(node.id, value)}
                    onBlur={onStopEditing}
                    onKeyDown={(event) => {
                        if (event.key === "Escape") onStopEditing();
@@ -413,6 +423,14 @@ function TextContent({ node, theme, isEditingContent, textareaRef, onContentChan
    );
 }

+function ResourceLabelBadge({ reference }: { reference: CanvasResourceReference }) {
+    return (
+        <span className={`pointer-events-none absolute right-2 top-2 z-30 rounded-md px-1.5 py-0.5 text-[10px] font-medium ${reference.active ? "bg-[#2f80ff] text-white shadow-sm" : "bg-black/35 text-white/75"}`}>
+            {reference.label}
+        </span>
+    );
+}
+
 function ImageNodeContent(props: NodeContentRendererProps) {
    if (!props.node.metadata?.content && props.isBatchRoot) {
        const content =
@@ -0,0 +1,251 @@
+"use client";
+
+import { forwardRef, useMemo, useRef, useState } from "react";
+import type { CSSProperties, MouseEvent, PointerEvent, TextareaHTMLAttributes } from "react";
+import { createPortal } from "react-dom";
+import { FileText, Image as ImageIcon, Music2, Video } from "lucide-react";
+
+import { canvasThemes } from "@/lib/canvas-theme";
+import { useThemeStore } from "@/stores/use-theme-store";
+import type { CanvasResourceReference } from "../utils/canvas-resource-references";
+
+type MentionState = {
+    start: number;
+    query: string;
+};
+
+type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> & {
+    value: string;
+    references: CanvasResourceReference[];
+    onChange: (value: string) => void;
+    onSubmit?: () => void;
+    containerClassName?: string;
+};
+
+export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Props>(function CanvasResourceMentionTextarea({ value, references, onChange, onSubmit, onKeyDown, className, containerClassName, style, ...props }, forwardedRef) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const overlayRef = useRef<HTMLDivElement | null>(null);
+    const [mention, setMention] = useState<MentionState | null>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const candidates = useMemo(() => {
+        if (!mention) return [];
+        const query = mention.query.trim().toLowerCase();
+        const activeReferences = references.filter((item) => item.active);
+        if (!query) return activeReferences;
+        return activeReferences.filter((item) => `${item.label} ${item.title} ${item.kind} ${item.text || ""}`.toLowerCase().includes(query));
+    }, [mention, references]);
+    const activeLabels = useMemo(() => Array.from(new Set(references.filter((item) => item.active).map((item) => item.label))).sort((a, b) => b.length - a.length), [references]);
+
+    const updateValue = (next: string, selectionStart?: number) => {
+        onChange(next);
+        if (typeof selectionStart !== "number") return;
+        requestAnimationFrame(() => {
+            textareaRef.current?.focus();
+            textareaRef.current?.setSelectionRange(selectionStart, selectionStart);
+        });
+    };
+
+    const closeMention = () => {
+        setMention(null);
+        setActiveIndex(0);
+    };
+
+    const syncMention = (nextValue: string, cursor: number) => {
+        const prefix = nextValue.slice(0, cursor);
+        const match = /(^|\s)@([^\s@]*)$/.exec(prefix);
+        if (!match || !references.some((item) => item.active)) {
+            closeMention();
+            return;
+        }
+        setMention({ start: cursor - match[2].length - 1, query: match[2] });
+        setActiveIndex(0);
+    };
+
+    const insertReference = (reference: CanvasResourceReference) => {
+        if (!mention) return;
+        const textarea = textareaRef.current;
+        const end = textarea?.selectionStart ?? value.length;
+        const insertText = `${reference.label} `;
+        const next = `${value.slice(0, mention.start)}${insertText}${value.slice(end)}`;
+        closeMention();
+        updateValue(next, mention.start + insertText.length);
+    };
+
+    const syncOverlayScroll = () => {
+        if (!overlayRef.current || !textareaRef.current) return;
+        overlayRef.current.scrollTop = textareaRef.current.scrollTop;
+        overlayRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    };
+
+    const mergedStyle = {
+        ...(style || {}),
+        color: activeLabels.length ? "transparent" : style?.color,
+        caretColor: style?.color || theme.node.text,
+        ...(activeLabels.length ? { background: "transparent", backgroundColor: "transparent" } : {}),
+    } as CSSProperties;
+    const menu = mention && candidates.length && textareaRef.current ? <MentionMenu textarea={textareaRef.current} references={candidates} activeIndex={Math.min(activeIndex, candidates.length - 1)} theme={theme} onSelect={insertReference} /> : null;
+
+    return (
+        <div className={`relative h-full w-full ${containerClassName || ""}`}>
+            {activeLabels.length ? (
+                <div ref={overlayRef} className={`${className || ""} pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words`} style={{ ...style, color: theme.node.text }}>
+                    <MentionHighlightText value={value || props.placeholder?.toString() || ""} labels={activeLabels} placeholder={!value} />
+                </div>
+            ) : null}
+            <textarea
+                {...props}
+                ref={(node) => {
+                    textareaRef.current = node;
+                    if (typeof forwardedRef === "function") forwardedRef(node);
+                    else if (forwardedRef) forwardedRef.current = node;
+                }}
+                value={value}
+                className={className}
+                style={mergedStyle}
+                onChange={(event) => {
+                    const next = event.target.value;
+                    onChange(next);
+                    syncMention(next, event.target.selectionStart);
+                    requestAnimationFrame(syncOverlayScroll);
+                }}
+                onKeyDown={(event) => {
+                    if (mention && candidates.length) {
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            setActiveIndex((index) => (index + 1) % candidates.length);
+                            return;
+                        }
+                        if (event.key === "ArrowUp") {
+                            event.preventDefault();
+                            setActiveIndex((index) => (index - 1 + candidates.length) % candidates.length);
+                            return;
+                        }
+                        if (event.key === "Enter") {
+                            event.preventDefault();
+                            insertReference(candidates[Math.min(activeIndex, candidates.length - 1)]);
+                            return;
+                        }
+                        if (event.key === "Escape") {
+                            event.preventDefault();
+                            closeMention();
+                            return;
+                        }
+                    }
+                    if (event.key === "Enter" && onSubmit && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                        event.preventDefault();
+                        onSubmit();
+                        return;
+                    }
+                    onKeyDown?.(event);
+                }}
+                onScroll={(event) => {
+                    syncOverlayScroll();
+                    props.onScroll?.(event);
+                }}
+                onBlur={(event) => {
+                    window.setTimeout(closeMention, 120);
+                    props.onBlur?.(event);
+                }}
+            />
+            {menu}
+        </div>
+    );
+});
+
+function MentionHighlightText({ value, labels, placeholder }: { value: string; labels: string[]; placeholder: boolean }) {
+    if (placeholder) return <span className="opacity-45">{value}</span>;
+    if (!labels.length) return <>{value}</>;
+    const pattern = new RegExp(`(${labels.map(escapeRegExp).join("|")})`, "g");
+    return (
+        <>
+            {value.split(pattern).map((part, index) =>
+                labels.includes(part) ? (
+                    <span key={`${part}-${index}`} className="rounded-md bg-[#2f80ff]/16 px-1 py-0.5 font-medium text-[#2f80ff] ring-1 ring-[#2f80ff]/24">
+                        {part}
+                    </span>
+                ) : (
+                    <span key={`${part}-${index}`}>{part}</span>
+                ),
+            )}
+        </>
+    );
+}
+
+function MentionMenu({ textarea, references, activeIndex, theme, onSelect }: { textarea: HTMLTextAreaElement; references: CanvasResourceReference[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (reference: CanvasResourceReference) => void }) {
+    const selectedRef = useRef(false);
+    const rect = textarea.getBoundingClientRect();
+    const boundary = textarea.closest(".ant-modal-content")?.getBoundingClientRect() || { left: 8, top: 8, right: window.innerWidth - 8, bottom: window.innerHeight - 8 };
+    const menuWidth = 256;
+    const maxMenuHeight = 224;
+    const gap = 6;
+    const left = clamp(rect.left, boundary.left + 8, boundary.right - menuWidth - 8);
+    const showAbove = rect.bottom + gap + maxMenuHeight > boundary.bottom && rect.top - gap - maxMenuHeight >= boundary.top;
+    const top = clamp(showAbove ? rect.top - gap - maxMenuHeight : rect.bottom + gap, boundary.top + 8, boundary.bottom - maxMenuHeight - 8);
+
+    const stopCanvasInteraction = (event: PointerEvent | MouseEvent) => {
+        event.stopPropagation();
+    };
+    const selectReference = (reference: CanvasResourceReference) => {
+        if (selectedRef.current) return;
+        selectedRef.current = true;
+        onSelect(reference);
+    };
+
+    return createPortal(
+        <div
+            data-canvas-resource-mention-menu="true"
+            className="fixed z-[120] max-h-56 w-64 overflow-y-auto rounded-xl border p-1 shadow-2xl backdrop-blur-md"
+            style={{ left, top, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
+            onPointerDown={stopCanvasInteraction}
+            onMouseDown={stopCanvasInteraction}
+            onClick={(event) => event.stopPropagation()}
+        >
+            {references.map((reference, index) => (
+                <button
+                    key={reference.id}
+                    type="button"
+                    className="flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
+                    style={{ background: index === activeIndex ? theme.toolbar.activeBg : "transparent", color: index === activeIndex ? theme.toolbar.activeText : theme.node.text }}
+                    onPointerDown={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        selectReference(reference);
+                    }}
+                    onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        selectReference(reference);
+                    }}
+                >
+                    <ReferencePreview reference={reference} />
+                    <span className="min-w-0 flex-1">
+                        <span className="block font-medium">{reference.label}</span>
+                        <span className="block truncate opacity-65">{reference.text || reference.title}</span>
+                    </span>
+                </button>
+            ))}
+        </div>,
+        document.body,
+    );
+}
+
+function ReferencePreview({ reference }: { reference: CanvasResourceReference }) {
+    if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-9 rounded-md object-cover" />;
+    if (reference.kind === "video" && reference.previewUrl) return <video src={reference.previewUrl} className="size-9 rounded-md bg-black object-cover" muted preload="metadata" />;
+    const Icon = reference.kind === "audio" ? Music2 : reference.kind === "video" ? Video : reference.kind === "image" ? ImageIcon : FileText;
+    return (
+        <span className="grid size-9 shrink-0 place-items-center rounded-md bg-black/10">
+            <Icon className="size-4" />
+        </span>
+    );
+}
+
+function clamp(value: number, min: number, max: number) {
+    if (max < min) return min;
+    return Math.min(Math.max(value, min), max);
+}
+
+function escapeRegExp(value: string) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
@@ -0,0 +1,126 @@
+import { imageReferenceLabel } from "@/lib/image-reference-prompt";
+import { seedanceReferenceLabel } from "@/lib/seedance-video";
+import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "../types";
+
+export type CanvasResourceKind = "image" | "video" | "audio" | "text";
+
+export type CanvasResourceReference = {
+    id: string;
+    nodeId: string;
+    kind: CanvasResourceKind;
+    label: string;
+    title: string;
+    previewUrl?: string;
+    text?: string;
+    active: boolean;
+};
+
+type MentionInput = {
+    nodeId: string;
+    type: CanvasResourceKind;
+    title: string;
+    text?: string;
+    image?: { dataUrl: string };
+    video?: { url: string };
+    audio?: { url: string };
+};
+
+export function buildCanvasResourceReferences(nodes: CanvasNodeData[], connections: CanvasConnection[], contextNodeId?: string | null) {
+    const contextNodes = contextNodeId ? getMentionResourceNodes(contextNodeId, nodes, connections) : [];
+    const globalReferences = labelResourceNodes(nodes.filter(isResourceNode), false);
+    const activeByNodeId = new Map(labelResourceNodes(contextNodes, true).map((reference) => [reference.nodeId, reference]));
+    return globalReferences.map((reference) => activeByNodeId.get(reference.nodeId) || reference);
+}
+
+export function buildNodeMentionReferences(node: CanvasNodeData, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
+    return labelResourceNodes(getMentionResourceNodes(node.id, nodes, connections), true);
+}
+
+export function buildInputMentionReferences(inputs: MentionInput[]) {
+    const counts: Record<CanvasResourceKind, number> = { image: 0, video: 0, audio: 0, text: 0 };
+    return inputs.map((input): CanvasResourceReference => {
+        const index = counts[input.type]++;
+        return {
+            id: input.nodeId,
+            nodeId: input.nodeId,
+            kind: input.type,
+            label: labelForKind(input.type, index),
+            title: input.title || labelForKind(input.type, index),
+            previewUrl: input.image?.dataUrl || input.video?.url || input.audio?.url,
+            text: input.text,
+            active: true,
+        };
+    });
+}
+
+export function getMentionResourceNodes(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
+    const ownInputs = getContextResourceNodes(nodeId, nodes, connections);
+    if (ownInputs.length) return ownInputs;
+    const configInputs = getConnectedConfigResourceNodes(nodeId, nodes, connections);
+    if (configInputs.length) return configInputs;
+    const node = nodes.find((item) => item.id === nodeId);
+    return node && isResourceNode(node) ? [node] : [];
+}
+
+export function getGenerationResourceNodes(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
+    const ownInputs = getContextResourceNodes(nodeId, nodes, connections);
+    if (ownInputs.length) return ownInputs;
+    return getConnectedConfigResourceNodes(nodeId, nodes, connections);
+}
+
+function getContextResourceNodes(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
+    const target = nodes.find((node) => node.id === nodeId);
+    const upstreamNodes = connections
+        .filter((connection) => connection.toNodeId === nodeId)
+        .map((connection) => nodes.find((node) => node.id === connection.fromNodeId))
+        .filter((node): node is CanvasNodeData => Boolean(node && isResourceNode(node)));
+    const order = target?.metadata?.inputOrder || [];
+    return [...order.map((id) => upstreamNodes.find((node) => node.id === id)).filter((node): node is CanvasNodeData => Boolean(node)), ...upstreamNodes.filter((node) => !order.includes(node.id))];
+}
+
+function getConnectedConfigResourceNodes(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
+    const configConnection = connections.find((connection) => connection.fromNodeId === nodeId && nodes.find((node) => node.id === connection.toNodeId)?.type === CanvasNodeType.Config);
+    if (!configConnection) return [];
+    return getContextResourceNodes(configConnection.toNodeId, nodes, connections).filter((node) => node.id !== nodeId);
+}
+
+function labelResourceNodes(nodes: CanvasNodeData[], active: boolean) {
+    const counts: Record<CanvasResourceKind, number> = { image: 0, video: 0, audio: 0, text: 0 };
+    return nodes.flatMap((node): CanvasResourceReference[] => {
+        const kind = resourceKind(node);
+        if (!kind) return [];
+        const index = counts[kind]++;
+        const label = labelForKind(kind, index);
+        return [
+            {
+                id: node.id,
+                nodeId: node.id,
+                kind,
+                label,
+                title: node.title || label,
+                previewUrl: node.metadata?.content,
+                text: node.type === CanvasNodeType.Text ? node.metadata?.content || node.metadata?.prompt : undefined,
+                active,
+            },
+        ];
+    });
+}
+
+function labelForKind(kind: CanvasResourceKind, index: number) {
+    if (kind === "image") return imageReferenceLabel(index);
+    if (kind === "video") return seedanceReferenceLabel("video", index);
+    if (kind === "audio") return seedanceReferenceLabel("audio", index);
+    return `文本${index + 1}`;
+}
+
+function isResourceNode(node: CanvasNodeData) {
+    return Boolean(resourceKind(node));
+}
+
+function resourceKind(node: CanvasNodeData): CanvasResourceKind | null {
+    if (node.type === CanvasNodeType.Image && node.metadata?.content) return "image";
+    if (node.type === CanvasNodeType.Video && node.metadata?.content) return "video";
+    if (node.type === CanvasNodeType.Audio && node.metadata?.content) return "audio";
+    if (node.type === CanvasNodeType.Text && (node.metadata?.content || node.metadata?.prompt)) return "text";
+    return null;
+}