diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx index 056d08225..69e6f167d 100644 --- a/app/canvas/[id]/page.tsx +++ b/app/canvas/[id]/page.tsx @@ -293,14 +293,23 @@ export default function CanvasEditorPage({ params }: PageProps) { }); }; - // 处理图片操作(占位函数,后续实现具体逻辑) + // 处理图片操作(通过事件分发到选中图片节点执行) const handleAction = (action: string) => { if (!selectedImageNode) { toast.error("请先选择一张图片"); return; } - toast.info(`${action} 功能开发中...`); - // TODO: 实现具体的图片处理逻辑 + + if (typeof window !== "undefined") { + window.dispatchEvent( + new CustomEvent("canvas:image-action", { + detail: { + nodeId: selectedImageNode.id, + action, + }, + }), + ); + } }; // AI 生成图片 diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx index a1fd9bfa3..b06e91cfc 100644 --- a/components/canvas/nodes/ImageNode.tsx +++ b/components/canvas/nodes/ImageNode.tsx @@ -742,6 +742,24 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) { } }; + useEffect(() => { + if (typeof window === "undefined") return; + + const onExternalAction = (event: Event) => { + const customEvent = event as CustomEvent<{ nodeId?: string; action?: string }>; + const targetNodeId = customEvent.detail?.nodeId; + const action = customEvent.detail?.action; + + if (!targetNodeId || !action || targetNodeId !== node.id) return; + void handleAction(action); + }; + + window.addEventListener("canvas:image-action", onExternalAction as EventListener); + return () => { + window.removeEventListener("canvas:image-action", onExternalAction as EventListener); + }; + }, [handleAction, node.id]); + // 角度编辑完成回调 const handleAngleEditComplete = (resultUrl: string) => { // 创建新的图片节点显示结果 @@ -1437,7 +1455,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
- 自动调用 Qwen3VL 识别图片文字。确认后将调用火山生图模型替换文字,并尽可能保持原字体形状。 + 识别图片文字后可逐条修改或删除,应用后会在保持画面风格的前提下完成文字更新。
{isDetectingText && (