- {url ? 
event.preventDefault()} className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} /> : event.preventDefault()} onLoad={(event) => fitToImage(event.currentTarget)} className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} /> :
{loading ?
}
+ {url ? {loading ?
}
+
+ );
+ }
+
+ return (
+ event.stopPropagation()}
+ onMouseDown={(event) => event.stopPropagation()}
+ >
+
+ {asLine ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+}
diff --git a/web/src/components/canvas/nodes/color-grade-node.tsx b/web/src/components/canvas/nodes/color-grade-node.tsx
new file mode 100644
index 000000000..f1031f186
--- /dev/null
+++ b/web/src/components/canvas/nodes/color-grade-node.tsx
@@ -0,0 +1,93 @@
+import { Palette, RotateCcw } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { useCanvasNodeActions } from "@/components/canvas/canvas-node-action-context";
+import { colorGradeCssFilter, DEFAULT_COLOR_GRADE, isNeutralColorGrade, type CanvasColorGrade } from "@/lib/canvas/canvas-color-grade";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type ColorGradeNodeContentProps = {
+ node: CanvasNodeData;
+ theme: CanvasTheme;
+};
+
+const SLIDERS: Array<{ key: keyof CanvasColorGrade; label: string; min: number; max: number }> = [
+ { key: "brightness", label: "亮度", min: 0, max: 200 },
+ { key: "contrast", label: "对比", min: 0, max: 200 },
+ { key: "saturate", label: "饱和", min: 0, max: 200 },
+ { key: "hueRotate", label: "色相", min: -180, max: 180 },
+];
+
+/**
+ * 调色节点：吃上游图片，本地预览调色结果，并作为图片素材喂给下游。
+ *
+ * 预览只用 CSS filter，不上传任何东西；真正落地成资源要等到生成时——
+ * 见 canvas-color-grade.ts 的 resolveCanvasColorGradeReference。拖滑杆不产生上传，
+ * 也不消耗文件容量。
+ */
+export function ColorGradeNodeContent({ node, theme }: ColorGradeNodeContentProps) {
+ const { updateMetadata } = useCanvasNodeActions();
+ const upstream = useUpstreamNodes(node.id);
+ // 判据要与 canvas-node-generation 的 readReferenceImage 完全一致，
+ // 否则会出现「预览有图、生成却没用上」这种不报错的偏差。
+ const inherited = upstream.find((item) => getNodeResourceKind(item) === "image" && item.metadata?.content);
+ const url = inherited?.metadata?.content || "";
+ const grade = node.metadata?.colorGrade || DEFAULT_COLOR_GRADE;
+
+ if (!url) {
+ return (
+
+
+ );
+ }
+
+ const editable = Boolean(updateMetadata);
+ const update = (key: keyof CanvasColorGrade, value: number) => updateMetadata?.(node.id, { colorGrade: { ...grade, [key]: value } });
+
+ return (
+
+
+ );
+}
diff --git a/web/src/components/canvas/nodes/compare-node.tsx b/web/src/components/canvas/nodes/compare-node.tsx
new file mode 100644
index 000000000..5ab4eb0fa
--- /dev/null
+++ b/web/src/components/canvas/nodes/compare-node.tsx
@@ -0,0 +1,72 @@
+import { useRef, useState } from "react";
+import { Columns2 } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type CompareNodeContentProps = {
+ node: CanvasNodeData;
+ theme: CanvasTheme;
+};
+
+/**
+ * A/B 对比节点：吃两个图片上游，中间一根滑杆左右拖动对比。
+ *
+ * 分割位置只存组件内 state，不落 metadata——它是「看的时候临时挪一下」，
+ * 不是画布内容；CanvasNodeContentProps 也只给了 onContentChange(content)，
+ * 为它另开一条写元数据的通道不值得。
+ */
+export function CompareNodeContent({ node, theme }: CompareNodeContentProps) {
+ const upstream = useUpstreamNodes(node.id);
+ const images = upstream.filter((item) => getNodeResourceKind(item) === "image");
+ const [split, setSplit] = useState(50);
+ const hostRef = useRef
+
+ {isNeutralColorGrade(grade) ? (
+ 未调色
+ ) : null}
+
+
+ {editable ? (
+ event.stopPropagation()}
+ onMouseDown={(event) => event.stopPropagation()}
+ >
+ {SLIDERS.map((slider) => (
+
+ ))}
+
+
+ ) : null}
+
+
+ );
+ }
+
+ const moveTo = (clientX: number) => {
+ const rect = hostRef.current?.getBoundingClientRect();
+ if (!rect?.width) return;
+ setSplit(Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)));
+ };
+
+ return (
+ event.stopPropagation()}
+ onPointerDown={(event) => {
+ draggingRef.current = true;
+ event.currentTarget.setPointerCapture(event.pointerId);
+ moveTo(event.clientX);
+ }}
+ onPointerMove={(event) => { if (draggingRef.current) moveTo(event.clientX); }}
+ onPointerUp={(event) => {
+ draggingRef.current = false;
+ if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+ }}
+ >
+ 
+ {/* 上层按分割位置裁切，露出下层的 B */}
+ 
+
+ A
+ B
+
+ );
+}
diff --git a/web/src/components/canvas/nodes/html-node.tsx b/web/src/components/canvas/nodes/html-node.tsx
new file mode 100644
index 000000000..f0dc72b4b
--- /dev/null
+++ b/web/src/components/canvas/nodes/html-node.tsx
@@ -0,0 +1,47 @@
+import { Code } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+import { SandboxedFrame } from "./sandboxed-frame";
+
+type HtmlNodeContentProps = {
+ node: CanvasNodeData;
+ theme: CanvasTheme;
+};
+
+/**
+ * HTML 展示节点：在沙箱 iframe 里预览 HTML。
+ *
+ * 源码取自身 metadata.content，为空时回落上游文本（与 SVG / Markdown 一致）。
+ * 自身有源码时，上游文本作为数据填进 `{{input}}`，所以「模板 + 数据」两条线可以分开接。
+ *
+ * 脚本可执行（allow-scripts），但 SandboxedFrame 结构上不允许同时给 allow-same-origin
+ * —— 否则页面能读到本源登录态。
+ */
+export function HtmlNodeContent({ node, theme }: HtmlNodeContentProps) {
+ const upstream = useUpstreamNodes(node.id);
+ const inherited = upstream.find((item) => getNodeResourceKind(item) === "text");
+ const upstreamText = inherited?.metadata?.content || inherited?.metadata?.prompt || "";
+ const own = node.metadata?.content || "";
+ // 与 SVG / Markdown 一致：自身为空时把上游文本当源码，这样「AI 写页面 → 连线 → 看效果」
+ // 不需要先把源码搬进本节点。
+ const source = own || upstreamText;
+ // 源码本身就来自上游时，{{input}} 没有第二份数据可填——替换成空串，
+ // 否则会把同一段内容再塞回自己里。
+ const input = own ? upstreamText : "";
+
+ if (!source.trim()) {
+ return (
+
+
+ );
+ }
+
+ return
+
+ );
+ }
+
+ return (
+ // 滚动区要吞掉 wheel 并标 data-canvas-no-zoom，否则滚动会被画布缩放拦走。
+ event.stopPropagation()}
+ onMouseDown={(event) => event.stopPropagation()}
+ >
+ {source}
+
+ );
+}
diff --git a/web/src/components/canvas/nodes/panorama-node.tsx b/web/src/components/canvas/nodes/panorama-node.tsx
new file mode 100644
index 000000000..94055d497
--- /dev/null
+++ b/web/src/components/canvas/nodes/panorama-node.tsx
@@ -0,0 +1,205 @@
+import { useEffect, useRef, useState } from "react";
+import { Globe, X } from "lucide-react";
+
+import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
+import { getNodeResourceKind } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type PanoramaNodeContentProps = {
+ node: CanvasNodeData;
+ theme: CanvasTheme;
+ reduceMediaEffects?: boolean;
+};
+
+/**
+ * 360° 全景查看器节点：取上游图片，拖拽环视。
+ *
+ * 三个刻意的取舍：
+ * 1. **点击才激活 WebGL**。浏览器对同时存在的 WebGL 上下文有硬上限（十几个），
+ * 画布上可以有任意多个全景节点，自动激活必然在某个数量后整片黑。默认只显示平面预览，
+ * 与既有的 DeferredMediaLoad「点击加载」是同一套交互习惯。
+ * 2. **用原生 three 而不是 @react-three/fiber**。这里需要精确控制 dispose——
+ * 上下文/纹理/几何体漏一个就逼近上限，节点还会被频繁增删。
+ * 3. **性能模式下不提供激活入口**。错题本里多条崩溃出在画布高频渲染，
+ * reduceMediaEffects 时只给静态预览。
+ */
+export function PanoramaNodeContent({ node, theme, reduceMediaEffects }: PanoramaNodeContentProps) {
+ const upstream = useUpstreamNodes(node.id);
+ const inherited = upstream.find((item) => getNodeResourceKind(item) === "image");
+ const url = node.metadata?.content || inherited?.metadata?.content || "";
+ const [active, setActive] = useState(false);
+ const [failed, setFailed] = useState(false);
+
+ // 上游换图后退出环视，避免旧上下文继续持有已被替换的纹理。
+ useEffect(() => {
+ setActive(false);
+ setFailed(false);
+ }, [url]);
+
+ if (!url) {
+ return (
+
+
+ );
+ }
+
+ if (!active) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+ {failed ? "全景加载失败（图片可能不允许跨域读取）" : reduceMediaEffects ? "性能模式下仅显示预览" : "360° 全景"}
+
+ {reduceMediaEffects ? null : (
+
+ )}
+
+
+ { setFailed(true); setActive(false); }} />
+
+
+ );
+}
+
+function PanoramaViewport({ url, onError }: { url: string; onError: () => void }) {
+ const hostRef = useRef event.stopPropagation()} />;
+}
diff --git a/web/src/components/canvas/nodes/sandboxed-frame.tsx b/web/src/components/canvas/nodes/sandboxed-frame.tsx
new file mode 100644
index 000000000..361ac604a
--- /dev/null
+++ b/web/src/components/canvas/nodes/sandboxed-frame.tsx
@@ -0,0 +1,41 @@
+import type { CanvasTheme } from "@/lib/canvas-theme";
+
+type SandboxedFrameProps = {
+ /** 完整的 HTML 文档字符串，作为 iframe 的 srcDoc */
+ srcDoc: string;
+ theme: CanvasTheme;
+ /**
+ * 是否允许文档内脚本执行。
+ *
+ * ⚠️ 只给 allow-scripts，**绝不同时给 allow-same-origin** —— 两者并存等于取消沙箱：
+ * 文档能拿到本源 DOM 与存储（含登录态）。这里刻意不暴露 sandbox 的完整取值，
+ * 就是为了让这条约束没有被绕过的入口。
+ */
+ allowScripts?: boolean;
+};
+
+/**
+ * 沙箱 iframe —— SVG 与 HTML 节点共用。
+ *
+ * 依赖里没有 DOMPurify，手写消毒不可靠（script / on* / foreignObject 等绕法很多），
+ * 所以两种节点都不走 innerHTML，统一塞进沙箱 iframe 渲染。
+ */
+export function SandboxedFrame({ srcDoc, theme, allowScripts = false }: SandboxedFrameProps) {
+ return (
+