dishui 0.0.84 → 0.0.91

package/dist/components/pro/Flow/nodes/DataNodeView.js

@@ -3,15 +3,16 @@ import t, { createColumn as n } from "../../../../data-table.js";
 import r from "../../../Chart/Chart.js";
 import { areaY as i, barX as a, barY as o, defineChart as s, dot as c, lineY as l } from "../../../../chart.js";
 import { DATA_CHART_PALETTE as u, labelFor as d } from "./dataUtils.js";
-import { useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g } from "react/jsx-runtime";
-import { scaleBand as _ } from "@tanstack/charts/scales/band";
-import { scaleLinear as v } from "@tanstack/charts/scales/linear";
-import { scalePoint as y } from "@tanstack/charts/scales/point";
-import { pie as b, polar as x, radialArc as S } from "@tanstack/charts/polar";
+import { showLinePoints as f, withChartGeometryBudget as p } from "./chartGeometryBudget.js";
+import { useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v } from "react/jsx-runtime";
+import { scaleBand as y } from "@tanstack/charts/scales/band";
+import { scaleLinear as b } from "@tanstack/charts/scales/linear";
+import { scalePoint as x } from "@tanstack/charts/scales/point";
+import { pie as S, polar as C, radialArc as w } from "@tanstack/charts/polar";
 //#region src/components/pro/Flow/nodes/DataNodeView.tsx
-function C({ config: e }) {
-	let t = p(() => e.columns.map((e) => n(e.key, e.label ?? e.key, { enableSorting: !0 })), [e.columns]), r = p(() => e.columns.map((e) => ({
+function T({ config: e }) {
+	let t = h(() => e.columns.map((e) => n(e.key, e.label ?? e.key, { enableSorting: !0 })), [e.columns]), r = h(() => e.columns.map((e) => ({
 		field: e.key,
 		label: e.label ?? e.key,
 		numeric: e.type === "number"
@@ -21,16 +22,16 @@ function C({ config: e }) {
 		c: i?.colFields ?? [],
 		v: i?.values ?? []
 	});
-	return /* @__PURE__ */ g("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "flow-data-table",
-		children: /* @__PURE__ */ g(w, {
+		children: /* @__PURE__ */ v(E, {
 			config: e,
 			columns: t,
 			pivotFields: r
 		}, a)
 	});
 }
-function w({ config: n, columns: r, pivotFields: i }) {
+function E({ config: n, columns: r, pivotFields: i }) {
 	let a = n.pivot, o = e({
 		fields: i,
 		initialActive: !!a?.enabled,
@@ -41,7 +42,7 @@ function w({ config: n, columns: r, pivotFields: i }) {
 		lang: "zh",
 		hideModeToggle: !0
 	});
-	return /* @__PURE__ */ g(t, {
+	return /* @__PURE__ */ v(t, {
 		data: n.rows,
 		columns: r,
 		enableSorting: !0,
@@ -50,83 +51,83 @@ function w({ config: n, columns: r, pivotFields: i }) {
 		extensions: [o]
 	});
 }
-function T(e, t) {
-	return p(() => {
-		let n = e.chart;
-		if (!n) return null;
-		let r = n.xField, d = (n.yFields ?? []).filter(Boolean);
-		if (!r || d.length === 0) return null;
-		let f = e.rows, p = n.palette?.length ? n.palette : null, m = (e, r) => n.seriesColors?.[e] ?? p?.[r % p.length] ?? t ?? u[r % u.length];
-		switch (n.type) {
+function D(e, t, n) {
+	return h(() => {
+		let r = e.chart;
+		if (!r) return null;
+		let d = r.xField, m = (r.yFields ?? []).filter(Boolean);
+		if (!d || m.length === 0) return null;
+		let h = e.rows, g = r.palette?.length ? r.palette : null, _ = (e, t) => r.seriesColors?.[e] ?? g?.[t % g.length] ?? n ?? u[t % u.length];
+		switch (r.type) {
 			case "line": return s({
-				marks: d.map((e, t) => l(f, {
+				marks: m.map((e, n) => p(l(h, {
 					id: e,
-					x: r,
+					x: d,
 					y: e,
-					stroke: m(e, t),
-					points: !0
-				})),
+					stroke: _(e, n),
+					points: f(h.length, m.length, t)
+				}))),
 				scales: {
-					x: { scale: () => y().padding(.35) },
+					x: { scale: () => x().padding(.35) },
 					y: {
-						scale: v,
+						scale: b,
 						nice: !0,
 						grid: !0
 					}
 				}
 			});
 			case "area": return s({
-				marks: d.map((e, t) => i(f, {
+				marks: m.map((e, t) => p(i(h, {
 					id: e,
-					x: r,
+					x: d,
 					y: e,
-					fill: m(e, t),
+					fill: _(e, t),
 					fillOpacity: .35,
-					stroke: m(e, t)
-				})),
+					stroke: _(e, t)
+				}))),
 				scales: {
-					x: { scale: () => y().padding(.35) },
+					x: { scale: () => x().padding(.35) },
 					y: {
-						scale: v,
+						scale: b,
 						nice: !0,
 						grid: !0
 					}
 				}
 			});
 			case "scatter": return s({
-				marks: [c(f, {
+				marks: [c(h, {
 					id: "points",
-					x: r,
-					y: d[0],
+					x: d,
+					y: m[0],
 					r: 6,
-					fill: m(d[0], 0)
+					fill: _(m[0], 0)
 				})],
 				scales: {
 					x: {
-						scale: v,
+						scale: b,
 						nice: !0,
 						grid: !0
 					},
 					y: {
-						scale: v,
+						scale: b,
 						nice: !0,
 						grid: !0
 					}
 				}
 			});
 			case "pie": {
-				let e = d[0], t = /* @__PURE__ */ new Map();
-				for (let n of f) {
-					let i = String(n[r] ?? "");
-					t.set(i, (t.get(i) ?? 0) + (Number(n[e]) || 0));
+				let e = m[0], t = /* @__PURE__ */ new Map();
+				for (let n of h) {
+					let r = String(n[d] ?? "");
+					t.set(r, (t.get(r) ?? 0) + (Number(n[e]) || 0));
 				}
-				let i = Array.from(t, ([e, t]) => ({
+				let n = Array.from(t, ([e, t]) => ({
 					cat: e,
 					value: t
-				})), a = b(i, { value: "value" }), o = n.palette?.length ? n.palette : u;
+				})), i = S(n, { value: "value" }), a = r.palette?.length ? r.palette : u;
 				return s({
-					marks: [x({
-						marks: [S(a, {
+					marks: [C({
+						marks: [w(i, {
 							startAngle: "startAngle",
 							endAngle: "endAngle",
 							padAngle: "padAngle",
@@ -144,79 +145,83 @@ function T(e, t) {
 						y: null
 					},
 					color: {
-						domain: i.map((e) => e.cat),
-						range: o
+						domain: n.map((e) => e.cat),
+						range: a
 					}
 				});
 			}
 			case "barHorizontal": return s({
-				marks: d.map((e, t) => a(f, {
+				marks: m.map((e, t) => a(h, {
 					id: e,
-					y: r,
+					y: d,
 					x: e,
-					fill: m(e, t),
+					fill: _(e, t),
 					radius: 4
 				})),
 				scales: {
-					y: { scale: () => _().padding(.25) },
+					y: { scale: () => y().padding(.25) },
 					x: {
-						scale: v,
+						scale: b,
 						nice: !0,
 						grid: !0
 					}
 				}
 			});
 			default: return s({
-				marks: d.map((e, t) => o(f, {
+				marks: m.map((e, t) => o(h, {
 					id: e,
-					x: r,
+					x: d,
 					y: e,
-					fill: m(e, t),
+					fill: _(e, t),
 					radius: 4
 				})),
 				scales: {
-					x: { scale: () => _().padding(.25) },
+					x: { scale: () => y().padding(.25) },
 					y: {
-						scale: v,
+						scale: b,
 						nice: !0,
 						grid: !0
 					}
 				}
 			});
 		}
-	}, [e, t]);
+	}, [
+		e,
+		t,
+		n
+	]);
 }
-function E({ config: e, surfaceColor: t, textColor: n, primaryColor: i }) {
-	let a = T(e, i), o = e.chart, s = m(null), [c, l] = h({
+function O({ config: e, surfaceColor: t, textColor: n, primaryColor: i }) {
+	let a = e.chart, o = g(null), [s, c] = _({
 		w: 0,
 		h: 0
-	});
-	if (f(() => {
-		let e = s.current;
+	}), l = D(e, s.w, i);
+	if (m(() => {
+		let e = o.current;
 		if (!e) return;
 		let t = () => {
-			let t = e.getBoundingClientRect(), n = t.width && e.offsetWidth ? t.width / e.offsetWidth : 1;
-			l({
-				w: Math.max(1, Math.round(t.width / (n || 1))),
-				h: Math.max(1, Math.round(t.height / (n || 1)))
+			let t = e.getBoundingClientRect(), n = t.width && e.offsetWidth ? t.width / e.offsetWidth : 1, r = Math.max(1, Math.round(t.width / (n || 1))), i = Math.max(1, Math.round(t.height / (n || 1)));
+			c((e) => e.w === r && e.h === i ? e : {
+				w: r,
+				h: i
 			});
 		};
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, []), !a) return /* @__PURE__ */ g("div", {
+	}, []), !l) return /* @__PURE__ */ v("div", {
 		className: "flow-data-empty",
 		children: e.columns.length === 0 ? "尚无数据，请在属性面板上传或填写数据" : "请在属性面板选择 X 轴与至少一个数值字段"
 	});
-	let u = o && o.xField ? `${d(e.columns, o.xField)} · ${(o.yFields ?? []).map((t) => d(e.columns, t)).join(", ")}` : "Chart";
-	return /* @__PURE__ */ g("div", {
+	let u = a && a.xField ? `${d(e.columns, a.xField)} · ${(a.yFields ?? []).map((t) => d(e.columns, t)).join(", ")}` : "Chart";
+	return /* @__PURE__ */ v("div", {
 		className: "flow-data-chart",
-		ref: s,
+		ref: o,
 		style: n ? { color: n } : void 0,
-		children: c.h > 0 && /* @__PURE__ */ g(r, {
-			definition: a,
+		children: s.h > 0 && /* @__PURE__ */ v(r, {
+			definition: l,
 			"aria-label": u,
-			height: c.h,
+			height: s.h,
 			style: {
 				background: t ?? "transparent",
 				borderColor: "transparent",
@@ -226,18 +231,18 @@ function E({ config: e, surfaceColor: t, textColor: n, primaryColor: i }) {
 		})
 	});
 }
-function D({ config: e, surfaceColor: t, textColor: n, primaryColor: r }) {
-	return !e || e.columns.length === 0 ? /* @__PURE__ */ g("div", {
+function k({ config: e, surfaceColor: t, textColor: n, primaryColor: r }) {
+	return !e || e.columns.length === 0 ? /* @__PURE__ */ v("div", {
 		className: "flow-data-empty",
 		children: "尚无数据，请在属性面板上传或填写数据"
-	}) : e.view === "chart" ? /* @__PURE__ */ g(E, {
+	}) : e.view === "chart" ? /* @__PURE__ */ v(O, {
 		config: e,
 		surfaceColor: t,
 		textColor: n,
 		primaryColor: r
-	}) : /* @__PURE__ */ g(C, { config: e });
+	}) : /* @__PURE__ */ v(T, { config: e });
 }
 //#endregion
-export { D as DataNodeView, D as default };
+export { k as DataNodeView, k as default };
 
 //# sourceMappingURL=DataNodeView.js.map

package/dist/components/pro/Flow/nodes/DataNodeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataNodeView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/DataNodeView.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport Chart, {\n  areaY,\n  barX,\n  barY,\n  defineChart,\n  dot,\n  lineY,\n} from '../../../Chart';\nimport { scaleBand } from '@tanstack/charts/scales/band';\nimport { scaleLinear } from '@tanstack/charts/scales/linear';\nimport { scalePoint } from '@tanstack/charts/scales/point';\nimport { polar, pie, radialArc } from '@tanstack/charts/polar';\nimport DataTable, {\n  createColumn,\n  usePivotExtension,\n  type ColumnDef,\n  type PivotField,\n  type PivotValue,\n} from '../../DataTable';\nimport type { FlowDataConfig } from '../types';\nimport { DATA_CHART_PALETTE, labelFor } from './dataUtils';\n\n/** Renders the table (optionally pivoted) surface of a Data node. */\nfunction DataTableView({ config }: { config: FlowDataConfig }) {\n  const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(\n    () =>\n      config.columns.map((col) =>\n        createColumn<Record<string, unknown>>(col.key, col.label ?? col.key, {\n          enableSorting: true,\n        }),\n      ),\n    [config.columns],\n  );\n\n  const pivotFields = useMemo<PivotField[]>(\n    () =>\n      config.columns.map((col) => ({\n        field: col.key,\n        label: col.label ?? col.key,\n        numeric: col.type === 'number',\n      })),\n    [config.columns],\n  );\n\n  const pivot = config.pivot;\n  // Remount the pivot extension when the inspector-controlled bits change, so\n  // the enabled toggle / initial fields take effect (the extension keeps its\n  // own interactive state otherwise). Panel placement stays reactive.\n  const pivotKey = JSON.stringify({\n    e: !!pivot?.enabled,\n    r: pivot?.rowFields ?? [],\n    c: pivot?.colFields ?? [],\n    v: pivot?.values ?? [],\n  });\n\n  return (\n    <div className=\"flow-data-table\">\n      <PivotableTable\n        key={pivotKey}\n        config={config}\n        columns={columns}\n        pivotFields={pivotFields}\n      />\n    </div>\n  );\n}\n\nfunction PivotableTable({\n  config,\n  columns,\n  pivotFields,\n}: {\n  config: FlowDataConfig;\n  columns: ColumnDef<Record<string, unknown>>[];\n  pivotFields: PivotField[];\n}) {\n  const pivot = config.pivot;\n  const pivotExtension = usePivotExtension<Record<string, unknown>>({\n    fields: pivotFields,\n    initialActive: !!pivot?.enabled,\n    initialRowFields: pivot?.rowFields ?? [],\n    initialColFields: pivot?.colFields ?? [],\n    initialValues: (pivot?.values as PivotValue[] | undefined) ?? [],\n    panelPlacement: pivot?.panelPlacement ?? 'top',\n    lang: 'zh',\n    // 透视开关由 Inspector 统一控制，节点内不再渲染开关，避免占用空间。\n    hideModeToggle: true,\n  });\n\n  return (\n    <DataTable<Record<string, unknown>>\n      data={config.rows}\n      columns={columns}\n      enableSorting\n      enablePagination={config.rows.length > 50}\n      pageSize={50}\n      extensions={[pivotExtension]}\n    />\n  );\n}\n\n/** Builds a TanStack Charts definition from the Data node's chart config. */\nfunction useChartDefinition(config: FlowDataConfig, primaryColor?: string) {\n  return useMemo(() => {\n    const chart = config.chart;\n    if (!chart) return null;\n    const xField = chart.xField;\n    const yFields = (chart.yFields ?? []).filter(Boolean);\n    if (!xField || yFields.length === 0) return null;\n\n    const rows = config.rows as any[];\n    // Series color resolution order: an explicit per-series override, then a\n    // configured chart palette, then the node's own `color` (the drawing's\n    // primary color), then the built-in default palette.\n    const paletteRange = chart.palette?.length ? chart.palette : null;\n    const seriesColor = (field: string, i: number) =>\n      chart.seriesColors?.[field]\n      ?? paletteRange?.[i % paletteRange.length]\n      ?? primaryColor\n      ?? DATA_CHART_PALETTE[i % DATA_CHART_PALETTE.length];\n\n    switch (chart.type) {\n      case 'line':\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            lineY(rows, { id: yf, x: xField, y: yf, stroke: seriesColor(yf, i), points: true }),\n          ),\n          scales: {\n            x: { scale: () => scalePoint<string>().padding(0.35) },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'area':\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            areaY(rows, {\n              id: yf,\n              x: xField,\n              y: yf,\n              fill: seriesColor(yf, i),\n              fillOpacity: 0.35,\n              stroke: seriesColor(yf, i),\n            }),\n          ),\n          scales: {\n            x: { scale: () => scalePoint<string>().padding(0.35) },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'scatter':\n        // Scatter uses the first two numeric fields as x/y.\n        return defineChart({\n          marks: [\n            dot(rows, {\n              id: 'points',\n              x: xField,\n              y: yFields[0],\n              r: 6,\n              fill: seriesColor(yFields[0], 0),\n            }),\n          ],\n          scales: {\n            x: { scale: scaleLinear, nice: true, grid: true },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'pie': {\n        // Part-to-whole via a polar pie over the first measure. Duplicate\n        // categories are aggregated (summed) so slices are unique.\n        const yf = yFields[0];\n        const totals = new Map<string, number>();\n        for (const r of rows) {\n          const k = String(r[xField] ?? '');\n          totals.set(k, (totals.get(k) ?? 0) + (Number(r[yf]) || 0));\n        }\n        const pieRows = Array.from(totals, ([cat, value]) => ({ cat, value }));\n        const arranged = pie(pieRows, { value: 'value' });\n        const range = chart.palette?.length ? chart.palette : DATA_CHART_PALETTE;\n        return defineChart({\n          marks: [\n            polar({\n              marks: [\n                radialArc(arranged, {\n                  startAngle: 'startAngle',\n                  endAngle: 'endAngle',\n                  padAngle: 'padAngle',\n                  innerRadius: 0,\n                  color: 'cat',\n                  key: 'cat',\n                }),\n              ],\n              scales: { angle: null, radius: null },\n            }),\n          ],\n          scales: { x: null, y: null },\n          color: { domain: pieRows.map((d) => d.cat), range },\n        });\n      }\n\n      case 'barHorizontal':\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            barX(rows, { id: yf, y: xField, x: yf, fill: seriesColor(yf, i), radius: 4 }),\n          ),\n          scales: {\n            y: { scale: () => scaleBand<string>().padding(0.25) },\n            x: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'bar':\n      default:\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            barY(rows, { id: yf, x: xField, y: yf, fill: seriesColor(yf, i), radius: 4 }),\n          ),\n          scales: {\n            x: { scale: () => scaleBand<string>().padding(0.25) },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n    }\n  }, [config, primaryColor]);\n}\n\n/** Renders the chart surface of a Data node. */\nfunction DataChartView({ config, surfaceColor, textColor, primaryColor }: { config: FlowDataConfig; surfaceColor?: string; textColor?: string; primaryColor?: string }) {\n  const definition = useChartDefinition(config, primaryColor);\n  const chart = config.chart;\n\n  // TanStack Charts needs a concrete pixel height; inside the media overlay the\n  // node box is a fixed size but percentage heights don't always resolve before\n  // first paint (esp. in read-only / preview renders), leaving the chart blank.\n  // Measure the container and pass an explicit height.\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n  useLayoutEffect(() => {\n    const el = wrapRef.current;\n    if (!el) return;\n    const measure = () => {\n      const rect = el.getBoundingClientRect();\n      // getBoundingClientRect includes the overlay's zoom scale; divide it out\n      // so the chart is laid out in unscaled (world) pixels.\n      const scale = rect.width && el.offsetWidth ? rect.width / el.offsetWidth : 1;\n      setSize({\n        w: Math.max(1, Math.round(rect.width / (scale || 1))),\n        h: Math.max(1, Math.round(rect.height / (scale || 1))),\n      });\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  if (!definition) {\n    return (\n      <div className=\"flow-data-empty\">\n        {config.columns.length === 0\n          ? '尚无数据，请在属性面板上传或填写数据'\n          : '请在属性面板选择 X 轴与至少一个数值字段'}\n      </div>\n    );\n  }\n\n  const label =\n    chart && chart.xField\n      ? `${labelFor(config.columns, chart.xField)} · ${(chart.yFields ?? [])\n          .map((f) => labelFor(config.columns, f))\n          .join(', ')}`\n      : 'Chart';\n\n  return (\n    <div\n      className=\"flow-data-chart\"\n      ref={wrapRef}\n      style={textColor ? ({ color: textColor } as React.CSSProperties) : undefined}\n    >\n      {size.h > 0 && (\n        <Chart\n          definition={definition as any}\n          aria-label={label}\n          height={size.h}\n          // Let the media node's fill show through instead of the Chart's\n          // default opaque white card, and let axis/label text inherit the\n          // node's text color so the chart matches Archify (or any) theming.\n          style={{\n            background: surfaceColor ?? 'transparent',\n            borderColor: 'transparent',\n            color: textColor ?? 'inherit',\n            padding: 0,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\n/** Dispatches to the table or chart surface based on the node's view. */\nexport function DataNodeView({\n  config,\n  surfaceColor,\n  textColor,\n  primaryColor,\n}: {\n  config: FlowDataConfig;\n  surfaceColor?: string;\n  textColor?: string;\n  primaryColor?: string;\n}) {\n  if (!config || config.columns.length === 0) {\n    return <div className=\"flow-data-empty\">尚无数据，请在属性面板上传或填写数据</div>;\n  }\n  return config.view === 'chart' ? (\n    <DataChartView config={config} surfaceColor={surfaceColor} textColor={textColor} primaryColor={primaryColor} />\n  ) : (\n    <DataTableView config={config} />\n  );\n}\n\nexport default DataNodeView;\n"],"mappings":"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"}
+{"version":3,"file":"DataNodeView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/DataNodeView.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport Chart, {\n  areaY,\n  barX,\n  barY,\n  defineChart,\n  dot,\n  lineY,\n} from '../../../Chart';\nimport { scaleBand } from '@tanstack/charts/scales/band';\nimport { scaleLinear } from '@tanstack/charts/scales/linear';\nimport { scalePoint } from '@tanstack/charts/scales/point';\nimport { polar, pie, radialArc } from '@tanstack/charts/polar';\nimport DataTable, {\n  createColumn,\n  usePivotExtension,\n  type ColumnDef,\n  type PivotField,\n  type PivotValue,\n} from '../../DataTable';\nimport type { FlowDataConfig } from '../types';\nimport { DATA_CHART_PALETTE, labelFor } from './dataUtils';\nimport { showLinePoints, withChartGeometryBudget } from './chartGeometryBudget';\n\n/** Renders the table (optionally pivoted) surface of a Data node. */\nfunction DataTableView({ config }: { config: FlowDataConfig }) {\n  const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(\n    () =>\n      config.columns.map((col) =>\n        createColumn<Record<string, unknown>>(col.key, col.label ?? col.key, {\n          enableSorting: true,\n        }),\n      ),\n    [config.columns],\n  );\n\n  const pivotFields = useMemo<PivotField[]>(\n    () =>\n      config.columns.map((col) => ({\n        field: col.key,\n        label: col.label ?? col.key,\n        numeric: col.type === 'number',\n      })),\n    [config.columns],\n  );\n\n  const pivot = config.pivot;\n  // Remount the pivot extension when the inspector-controlled bits change, so\n  // the enabled toggle / initial fields take effect (the extension keeps its\n  // own interactive state otherwise). Panel placement stays reactive.\n  const pivotKey = JSON.stringify({\n    e: !!pivot?.enabled,\n    r: pivot?.rowFields ?? [],\n    c: pivot?.colFields ?? [],\n    v: pivot?.values ?? [],\n  });\n\n  return (\n    <div className=\"flow-data-table\">\n      <PivotableTable\n        key={pivotKey}\n        config={config}\n        columns={columns}\n        pivotFields={pivotFields}\n      />\n    </div>\n  );\n}\n\nfunction PivotableTable({\n  config,\n  columns,\n  pivotFields,\n}: {\n  config: FlowDataConfig;\n  columns: ColumnDef<Record<string, unknown>>[];\n  pivotFields: PivotField[];\n}) {\n  const pivot = config.pivot;\n  const pivotExtension = usePivotExtension<Record<string, unknown>>({\n    fields: pivotFields,\n    initialActive: !!pivot?.enabled,\n    initialRowFields: pivot?.rowFields ?? [],\n    initialColFields: pivot?.colFields ?? [],\n    initialValues: (pivot?.values as PivotValue[] | undefined) ?? [],\n    panelPlacement: pivot?.panelPlacement ?? 'top',\n    lang: 'zh',\n    // 透视开关由 Inspector 统一控制，节点内不再渲染开关，避免占用空间。\n    hideModeToggle: true,\n  });\n\n  return (\n    <DataTable<Record<string, unknown>>\n      data={config.rows}\n      columns={columns}\n      enableSorting\n      enablePagination={config.rows.length > 50}\n      pageSize={50}\n      extensions={[pivotExtension]}\n    />\n  );\n}\n\n/** Builds a TanStack Charts definition from the Data node's chart config. */\nfunction useChartDefinition(config: FlowDataConfig, width: number, primaryColor?: string) {\n  return useMemo(() => {\n    const chart = config.chart;\n    if (!chart) return null;\n    const xField = chart.xField;\n    const yFields = (chart.yFields ?? []).filter(Boolean);\n    if (!xField || yFields.length === 0) return null;\n\n    const rows = config.rows as any[];\n    // Series color resolution order: an explicit per-series override, then a\n    // configured chart palette, then the node's own `color` (the drawing's\n    // primary color), then the built-in default palette.\n    const paletteRange = chart.palette?.length ? chart.palette : null;\n    const seriesColor = (field: string, i: number) =>\n      chart.seriesColors?.[field]\n      ?? paletteRange?.[i % paletteRange.length]\n      ?? primaryColor\n      ?? DATA_CHART_PALETTE[i % DATA_CHART_PALETTE.length];\n\n    switch (chart.type) {\n      case 'line':\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            withChartGeometryBudget(lineY(rows, {\n              id: yf, x: xField, y: yf, stroke: seriesColor(yf, i),\n              points: showLinePoints(rows.length, yFields.length, width),\n            })),\n          ),\n          scales: {\n            x: { scale: () => scalePoint<string>().padding(0.35) },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'area':\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            withChartGeometryBudget(areaY(rows, {\n              id: yf,\n              x: xField,\n              y: yf,\n              fill: seriesColor(yf, i),\n              fillOpacity: 0.35,\n              stroke: seriesColor(yf, i),\n            })),\n          ),\n          scales: {\n            x: { scale: () => scalePoint<string>().padding(0.35) },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'scatter':\n        // Scatter uses the first two numeric fields as x/y.\n        return defineChart({\n          marks: [\n            dot(rows, {\n              id: 'points',\n              x: xField,\n              y: yFields[0],\n              r: 6,\n              fill: seriesColor(yFields[0], 0),\n            }),\n          ],\n          scales: {\n            x: { scale: scaleLinear, nice: true, grid: true },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'pie': {\n        // Part-to-whole via a polar pie over the first measure. Duplicate\n        // categories are aggregated (summed) so slices are unique.\n        const yf = yFields[0];\n        const totals = new Map<string, number>();\n        for (const r of rows) {\n          const k = String(r[xField] ?? '');\n          totals.set(k, (totals.get(k) ?? 0) + (Number(r[yf]) || 0));\n        }\n        const pieRows = Array.from(totals, ([cat, value]) => ({ cat, value }));\n        const arranged = pie(pieRows, { value: 'value' });\n        const range = chart.palette?.length ? chart.palette : DATA_CHART_PALETTE;\n        return defineChart({\n          marks: [\n            polar({\n              marks: [\n                radialArc(arranged, {\n                  startAngle: 'startAngle',\n                  endAngle: 'endAngle',\n                  padAngle: 'padAngle',\n                  innerRadius: 0,\n                  color: 'cat',\n                  key: 'cat',\n                }),\n              ],\n              scales: { angle: null, radius: null },\n            }),\n          ],\n          scales: { x: null, y: null },\n          color: { domain: pieRows.map((d) => d.cat), range },\n        });\n      }\n\n      case 'barHorizontal':\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            barX(rows, { id: yf, y: xField, x: yf, fill: seriesColor(yf, i), radius: 4 }),\n          ),\n          scales: {\n            y: { scale: () => scaleBand<string>().padding(0.25) },\n            x: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n\n      case 'bar':\n      default:\n        return defineChart({\n          marks: yFields.map((yf, i) =>\n            barY(rows, { id: yf, x: xField, y: yf, fill: seriesColor(yf, i), radius: 4 }),\n          ),\n          scales: {\n            x: { scale: () => scaleBand<string>().padding(0.25) },\n            y: { scale: scaleLinear, nice: true, grid: true },\n          },\n        });\n    }\n  }, [config, width, primaryColor]);\n}\n\n/** Renders the chart surface of a Data node. */\nfunction DataChartView({ config, surfaceColor, textColor, primaryColor }: { config: FlowDataConfig; surfaceColor?: string; textColor?: string; primaryColor?: string }) {\n  const chart = config.chart;\n\n  // TanStack Charts needs a concrete pixel height; inside the media overlay the\n  // node box is a fixed size but percentage heights don't always resolve before\n  // first paint (esp. in read-only / preview renders), leaving the chart blank.\n  // Measure the container and pass an explicit height.\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n  const definition = useChartDefinition(config, size.w, primaryColor);\n  useLayoutEffect(() => {\n    const el = wrapRef.current;\n    if (!el) return;\n    const measure = () => {\n      const rect = el.getBoundingClientRect();\n      // getBoundingClientRect includes the overlay's zoom scale; divide it out\n      // so the chart is laid out in unscaled (world) pixels.\n      const scale = rect.width && el.offsetWidth ? rect.width / el.offsetWidth : 1;\n      const w = Math.max(1, Math.round(rect.width / (scale || 1)));\n      const h = Math.max(1, Math.round(rect.height / (scale || 1)));\n      setSize(previous => previous.w === w && previous.h === h ? previous : { w, h });\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  if (!definition) {\n    return (\n      <div className=\"flow-data-empty\">\n        {config.columns.length === 0\n          ? '尚无数据，请在属性面板上传或填写数据'\n          : '请在属性面板选择 X 轴与至少一个数值字段'}\n      </div>\n    );\n  }\n\n  const label =\n    chart && chart.xField\n      ? `${labelFor(config.columns, chart.xField)} · ${(chart.yFields ?? [])\n          .map((f) => labelFor(config.columns, f))\n          .join(', ')}`\n      : 'Chart';\n\n  return (\n    <div\n      className=\"flow-data-chart\"\n      ref={wrapRef}\n      style={textColor ? ({ color: textColor } as React.CSSProperties) : undefined}\n    >\n      {size.h > 0 && (\n        <Chart\n          definition={definition as any}\n          aria-label={label}\n          height={size.h}\n          // Let the media node's fill show through instead of the Chart's\n          // default opaque white card, and let axis/label text inherit the\n          // node's text color so the chart matches Archify (or any) theming.\n          style={{\n            background: surfaceColor ?? 'transparent',\n            borderColor: 'transparent',\n            color: textColor ?? 'inherit',\n            padding: 0,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\n/** Dispatches to the table or chart surface based on the node's view. */\nexport function DataNodeView({\n  config,\n  surfaceColor,\n  textColor,\n  primaryColor,\n}: {\n  config: FlowDataConfig;\n  surfaceColor?: string;\n  textColor?: string;\n  primaryColor?: string;\n}) {\n  if (!config || config.columns.length === 0) {\n    return <div className=\"flow-data-empty\">尚无数据，请在属性面板上传或填写数据</div>;\n  }\n  return config.view === 'chart' ? (\n    <DataChartView config={config} surfaceColor={surfaceColor} textColor={textColor} primaryColor={primaryColor} />\n  ) : (\n    <DataTableView config={config} />\n  );\n}\n\nexport default DataNodeView;\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/MediaContent.js

@@ -84,7 +84,7 @@ function y({ content: e, interactive: t, color: n, fontSize: r }) {
 		title: "html-media",
 		className: "flow-media-iframe",
 		style: { pointerEvents: t ? "auto" : "none" },
-		sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+		sandbox: "allow-scripts",
 		srcDoc: i
 	});
 }

package/dist/components/pro/Flow/nodes/MediaContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport { resolveThemeColorCss, resolveThemeColor } from '../utils/themeColor';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n  import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n  if (mermaidReady) return;\n  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n  mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. */\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n  const [svg, setSvg] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureMermaid();\n    const src = content.trim();\n    if (!src) { setSvg(''); setError(null); return; }\n    mermaid\n      .render(idRef.current, src)\n      .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n      .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n    return () => { cancelled = true; };\n  }, [content]);\n\n  if (error) return <div className=\"flow-media-error\">{error}</div>;\n  return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/** Renders a LaTeX formula (display mode) via KaTeX. */\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n  const html = useMemo(() => {\n    try {\n      return katex.renderToString(content.trim() || '\\\\;', { displayMode: true, throwOnError: false });\n    } catch (e: any) {\n      return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n    }\n  }, [content]);\n  return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/** Renders raw HTML in a sandboxed iframe (isolated from the host document).\n *  A base stylesheet is injected so the fragment inherits the node's themed\n *  text color / font size and a transparent background, keeping it readable on\n *  any theme without the author having to set colors. */\nfunction HtmlView({ content, interactive, color, fontSize }: { content: string; interactive: boolean; color?: string; fontSize?: number }) {\n  const srcDoc = useMemo(() => {\n    const base = `<!doctype html><html><head><meta charset=\"utf-8\"><style>\n      :root { color-scheme: light dark; }\n      html, body { margin: 0; background: transparent; }\n      body {\n        color: ${color ?? '#111827'};\n        font-size: ${fontSize ?? 13}px;\n        font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n        line-height: 1.5;\n        padding: 0;\n      }\n      a { color: inherit; }\n    </style></head><body>${content}</body></html>`;\n    return base;\n  }, [content, color, fontSize]);\n  return (\n    <iframe\n      title=\"html-media\"\n      className=\"flow-media-iframe\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n      sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\n      srcDoc={srcDoc}\n    />\n  );\n}\n\nfunction ImageView({ content }: { content: string }) {\n  const src = content.trim();\n  if (!src) {\n    return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n  }\n  return (\n    <img\n      className=\"flow-media-image\"\n      src={src}\n      alt=\"\"\n      draggable={false}\n      referrerPolicy=\"no-referrer\"\n    />\n  );\n}\n\n/** Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. */\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n  const [messages, setMessages] = useState<AIChatMessage[]>([]);\n  const [input, setInput] = useState('');\n  const [streaming, setStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n  }, [messages, streaming]);\n\n  useEffect(() => () => abortRef.current?.abort(), []);\n\n  const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n  const send = async () => {\n    const text = input.trim();\n    if (!text || !config?.gateway) return;\n    setError(null);\n    // Only keep non-empty assistant messages in history; an aborted/errored\n    // request can leave an empty assistant placeholder behind, which the API\n    // then rejects (\"assistant message must not be empty\").\n    const history = messages.filter(\n      (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n    );\n    const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n    setMessages(next);\n    setInput('');\n    setStreaming(true);\n    const ac = new AbortController();\n    abortRef.current = ac;\n    let acc = '';\n    setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n    try {\n      for await (const delta of streamAIChat(config, next, ac.signal)) {\n        acc += delta;\n        setMessages((m) => {\n          const copy = m.slice();\n          copy[copy.length - 1] = { role: 'assistant', content: acc };\n          return copy;\n        });\n      }\n    } catch (e: any) {\n      if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n    } finally {\n      // Drop the trailing assistant placeholder if nothing streamed in.\n      setMessages((m) => {\n        const last = m[m.length - 1];\n        if (last && last.role === 'assistant' && last.content.trim() === '') {\n          return m.slice(0, -1);\n        }\n        return m;\n      });\n      setStreaming(false);\n      abortRef.current = null;\n    }\n  };\n\n  return (\n    <div className=\"flow-media-ai\" style={{ color }}>\n      <div className=\"flow-media-ai-header\">\n        {config?.model ? `AI · ${config.model}` : (node.data.label || 'AI')}\n      </div>\n      <div className=\"flow-media-ai-log\" ref={scrollRef}>\n        {messages.length === 0 && (\n          <div className=\"flow-media-ai-empty\">\n            {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n          </div>\n        )}\n        {messages.map((m, i) => (\n          <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n            {m.role === 'assistant'\n              ? <Markdown content={m.content || '…'} enableMermaid={false} enableMarkmap={false} />\n              : <span>{m.content}</span>}\n          </div>\n        ))}\n        {error && <div className=\"flow-media-error\">{error}</div>}\n      </div>\n      <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n        <textarea\n          value={input}\n          placeholder=\"输入消息，Enter 发送\"\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n          }}\n          onPointerDown={(e) => e.stopPropagation()}\n        />\n        {streaming ? (\n          <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n        ) : (\n          <button type=\"button\" disabled={!canSend || !input.trim()} onClick={send}>发送</button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n  const kind = node.data.mediaKind ?? 'markdown';\n  const content = node.data.mediaContent ?? '';\n  const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n\n  switch (kind) {\n    case 'markdown':\n      return (\n        <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n          <Markdown content={content} />\n        </div>\n      );\n    case 'html':\n      // The iframe is an isolated document with no access to the parent's CSS\n      // variables, so pass a concrete resolved color instead of a var().\n      return (\n        <HtmlView\n          content={content}\n          interactive={interactive}\n          color={resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827')}\n          fontSize={node.data.fontSize}\n        />\n      );\n    case 'mermaid':\n      return <MermaidView content={content} color={textColor} />;\n    case 'math':\n      return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n    case 'image':\n      return <ImageView content={content} />;\n    case 'model3d':\n      return (\n        <Model3DView\n          content={content}\n          format={node.data.modelFormat ?? 'stl'}\n          interactive={interactive}\n        />\n      );\n    case 'ai':\n      return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n    case 'data':\n      return (\n        <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n          <DataNodeView\n            config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }}\n            surfaceColor={node.data.fill === 'transparent' ? undefined : resolveThemeColorCss(node.data.fill, '')}\n            textColor={textColor}\n            primaryColor={resolveThemeColorCss(node.data.color, '')}\n          />\n        </div>\n      );\n    default:\n      return null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport { resolveThemeColorCss, resolveThemeColor } from '../utils/themeColor';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n  import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n  if (mermaidReady) return;\n  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n  mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. */\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n  const [svg, setSvg] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureMermaid();\n    const src = content.trim();\n    if (!src) { setSvg(''); setError(null); return; }\n    mermaid\n      .render(idRef.current, src)\n      .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n      .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n    return () => { cancelled = true; };\n  }, [content]);\n\n  if (error) return <div className=\"flow-media-error\">{error}</div>;\n  return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/** Renders a LaTeX formula (display mode) via KaTeX. */\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n  const html = useMemo(() => {\n    try {\n      return katex.renderToString(content.trim() || '\\\\;', { displayMode: true, throwOnError: false });\n    } catch (e: any) {\n      return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n    }\n  }, [content]);\n  return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/** Renders raw HTML in a sandboxed iframe (isolated from the host document).\n *  A base stylesheet is injected so the fragment inherits the node's themed\n *  text color / font size and a transparent background, keeping it readable on\n *  any theme without the author having to set colors.\n *  Content is always untrusted: scripts can drive the preview, but the opaque\n *  sandbox origin prevents host DOM/storage access. Do not add allow-same-origin\n *  alongside allow-scripts; interactive only controls pointer input. */\nfunction HtmlView({ content, interactive, color, fontSize }: { content: string; interactive: boolean; color?: string; fontSize?: number }) {\n  const srcDoc = useMemo(() => {\n    const base = `<!doctype html><html><head><meta charset=\"utf-8\"><style>\n      :root { color-scheme: light dark; }\n      html, body { margin: 0; background: transparent; }\n      body {\n        color: ${color ?? '#111827'};\n        font-size: ${fontSize ?? 13}px;\n        font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n        line-height: 1.5;\n        padding: 0;\n      }\n      a { color: inherit; }\n    </style></head><body>${content}</body></html>`;\n    return base;\n  }, [content, color, fontSize]);\n  return (\n    <iframe\n      title=\"html-media\"\n      className=\"flow-media-iframe\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n      sandbox=\"allow-scripts\"\n      srcDoc={srcDoc}\n    />\n  );\n}\n\nfunction ImageView({ content }: { content: string }) {\n  const src = content.trim();\n  if (!src) {\n    return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n  }\n  return (\n    <img\n      className=\"flow-media-image\"\n      src={src}\n      alt=\"\"\n      draggable={false}\n      referrerPolicy=\"no-referrer\"\n    />\n  );\n}\n\n/** Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. */\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n  const [messages, setMessages] = useState<AIChatMessage[]>([]);\n  const [input, setInput] = useState('');\n  const [streaming, setStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n  }, [messages, streaming]);\n\n  useEffect(() => () => abortRef.current?.abort(), []);\n\n  const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n  const send = async () => {\n    const text = input.trim();\n    if (!text || !config?.gateway) return;\n    setError(null);\n    // Only keep non-empty assistant messages in history; an aborted/errored\n    // request can leave an empty assistant placeholder behind, which the API\n    // then rejects (\"assistant message must not be empty\").\n    const history = messages.filter(\n      (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n    );\n    const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n    setMessages(next);\n    setInput('');\n    setStreaming(true);\n    const ac = new AbortController();\n    abortRef.current = ac;\n    let acc = '';\n    setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n    try {\n      for await (const delta of streamAIChat(config, next, ac.signal)) {\n        acc += delta;\n        setMessages((m) => {\n          const copy = m.slice();\n          copy[copy.length - 1] = { role: 'assistant', content: acc };\n          return copy;\n        });\n      }\n    } catch (e: any) {\n      if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n    } finally {\n      // Drop the trailing assistant placeholder if nothing streamed in.\n      setMessages((m) => {\n        const last = m[m.length - 1];\n        if (last && last.role === 'assistant' && last.content.trim() === '') {\n          return m.slice(0, -1);\n        }\n        return m;\n      });\n      setStreaming(false);\n      abortRef.current = null;\n    }\n  };\n\n  return (\n    <div className=\"flow-media-ai\" style={{ color }}>\n      <div className=\"flow-media-ai-header\">\n        {config?.model ? `AI · ${config.model}` : (node.data.label || 'AI')}\n      </div>\n      <div className=\"flow-media-ai-log\" ref={scrollRef}>\n        {messages.length === 0 && (\n          <div className=\"flow-media-ai-empty\">\n            {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n          </div>\n        )}\n        {messages.map((m, i) => (\n          <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n            {m.role === 'assistant'\n              ? <Markdown content={m.content || '…'} enableMermaid={false} enableMarkmap={false} />\n              : <span>{m.content}</span>}\n          </div>\n        ))}\n        {error && <div className=\"flow-media-error\">{error}</div>}\n      </div>\n      <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n        <textarea\n          value={input}\n          placeholder=\"输入消息，Enter 发送\"\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n          }}\n          onPointerDown={(e) => e.stopPropagation()}\n        />\n        {streaming ? (\n          <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n        ) : (\n          <button type=\"button\" disabled={!canSend || !input.trim()} onClick={send}>发送</button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n  const kind = node.data.mediaKind ?? 'markdown';\n  const content = node.data.mediaContent ?? '';\n  const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n\n  switch (kind) {\n    case 'markdown':\n      return (\n        <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n          <Markdown content={content} />\n        </div>\n      );\n    case 'html':\n      // The iframe is an isolated document with no access to the parent's CSS\n      // variables, so pass a concrete resolved color instead of a var().\n      return (\n        <HtmlView\n          content={content}\n          interactive={interactive}\n          color={resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827')}\n          fontSize={node.data.fontSize}\n        />\n      );\n    case 'mermaid':\n      return <MermaidView content={content} color={textColor} />;\n    case 'math':\n      return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n    case 'image':\n      return <ImageView content={content} />;\n    case 'model3d':\n      return (\n        <Model3DView\n          content={content}\n          format={node.data.modelFormat ?? 'stl'}\n          interactive={interactive}\n        />\n      );\n    case 'ai':\n      return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n    case 'data':\n      return (\n        <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n          <DataNodeView\n            config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }}\n            surfaceColor={node.data.fill === 'transparent' ? undefined : resolveThemeColorCss(node.data.fill, '')}\n            textColor={textColor}\n            primaryColor={resolveThemeColorCss(node.data.color, '')}\n          />\n        </div>\n      );\n    default:\n      return null;\n  }\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/MediaOverlay.js

@@ -4,7 +4,7 @@ import { resolveThemeColorCss as n } from "../utils/themeColor.js";
 import r, { Suspense as i, useMemo as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/components/pro/Flow/nodes/MediaOverlay.tsx
-var s = r.lazy(() => import("./MediaContent.js").then((e) => ({ default: e.MediaContent }))), c = class extends r.Component {
+var s = r.memo(r.lazy(() => import("./MediaContent.js").then((e) => ({ default: e.MediaContent })))), c = class extends r.Component {
 	constructor(e) {
 		super(e), this.state = { error: null };
 	}

package/dist/components/pro/Flow/nodes/MediaOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { resolveThemeColorCss } from '../utils/themeColor';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\nconst MediaContent = React.lazy(() =>\n  import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n);\n\n/** Isolates media render/load failures so one bad node never blanks the editor. */\nclass MediaErrorBoundary extends React.Component<\n  { children: React.ReactNode },\n  { error: Error | null }\n> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  render() {\n    if (this.state.error) {\n      return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n *\n * Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n */\nexport function MediaOverlay() {\n  const { currentCanvas, selection } = useFlowContext();\n  const { viewport, isNodeDragging } = useFlowUI();\n\n  const mediaNodes = useMemo(\n    () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n    [currentCanvas.nodes],\n  );\n\n  if (mediaNodes.length === 0) return null;\n\n  const { x: vx, y: vy, zoom } = viewport;\n\n  return (\n    <div className=\"flow-media-layer\">\n      {mediaNodes.map((node) => {\n        // World → screen (CSS px, matching ViewportManager.worldToScreen).\n        const left = node.position.x * zoom + vx;\n        const top = node.position.y * zoom + vy;\n        // Interactive only while selected, so the canvas stays draggable.\n        // Suppress entirely during a drag: an interactive iframe would swallow\n        // the pointer and the canvas would never receive pointerup (stuck drag).\n        const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n        // Drive the overlay's background / text from the node's own color data.\n        // Theme tokens (`theme:*`) resolve to CSS variables so the media content\n        // follows theme switches natively; literal colors are used as-is. This\n        // keeps html / ai / data (which render opaque content) in sync with the\n        // fill/color chosen in the inspector, matching the PixiJS frame drawn\n        // underneath. The border is owned by the Pixi frame (also what PNG/PDF\n        // export captures), so we don't redraw it here.\n        const fillCss = node.data.fill === 'transparent'\n          ? 'transparent'\n          : resolveThemeColorCss(node.data.fill, 'transparent');\n        const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n        return (\n          <div\n            key={node.id}\n            className=\"flow-media-node\"\n            data-media-node={node.id}\n            style={{\n              position: 'absolute',\n              left,\n              top,\n              width: node.width,\n              height: node.height,\n              // Scale the fixed-size content box to match zoom without\n              // reflowing text on every zoom step.\n              transform: `scale(${zoom})`,\n              transformOrigin: 'top left',\n              // Below the frame's selection outline but above the canvas.\n              pointerEvents: 'none',\n            }}\n          >\n            <div\n              className=\"flow-media-surface\"\n              onWheel={(e) => e.stopPropagation()}\n              style={{\n                background: fillCss,\n                color: textColor,\n              }}\n            >\n              <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n                <MediaErrorBoundary>\n                  <MediaContent node={node} interactive={interactive} />\n                </MediaErrorBoundary>\n              </Suspense>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AASA,IAAM,IAAe,EAAM,WACzB,OAAO,oBAAiB,CAAC,MAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;CACA,YAAY,GAAsC;EAEhD,AADA,MAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;CAC7B;CACA,OAAO,yBAAyB,GAAc;EAC5C,OAAO,EAAE,SAAM;CACjB;CACA,SAAS;EAIP,OAHI,KAAK,MAAM,QACN,kBAAC,OAAD;GAAK,WAAU;GAAoB,UAAA,KAAK,MAAM,MAAM;EAAa,CAAA,IAEnE,KAAK,MAAM;CACpB;AACF;AAaA,SAAgB,IAAe;CAC7B,IAAM,EAAE,kBAAe,iBAAc,EAAe,GAC9C,EAAE,aAAU,sBAAmB,EAAU,GAEzC,IAAa,QACX,EAAc,MAAM,QAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;CAEA,IAAI,EAAW,WAAW,GAAG,OAAO;CAEpC,IAAM,EAAE,GAAG,GAAI,GAAG,GAAI,YAAS;CAE/B,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,EAAW,KAAK,MAAS;GAExB,IAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC,GAQjD,IAAU,EAAK,KAAK,SAAS,gBAC/B,gBACA,EAAqB,EAAK,KAAK,MAAM,aAAa,GAChD,IAAY,EAAqB,EAAK,KAAK,cAAc,EAAK,KAAK,OAAO,SAAS;GACzF,OACE,kBAAC,OAAD;IAEE,WAAU;IACV,mBAAiB,EAAK;IACtB,OAAO;KACL,UAAU;KACV;KACA;KACA,OAAO,EAAK;KACZ,QAAQ,EAAK;KAGb,WAAW,SAAS,EAAK;KACzB,iBAAiB;KAEjB,eAAe;IACjB;IAEA,UAAA,kBAAC,OAAD;KACE,WAAU;KACV,UAAU,MAAM,EAAE,gBAAgB;KAClC,OAAO;MACL,YAAY;MACZ,OAAO;KACT;KAEA,UAAA,kBAAC,GAAD;MAAU,UAAU,kBAAC,OAAD;OAAK,WAAU;OAAqB,UAAA;MAAM,CAAA;MAC5D,UAAA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAoB;OAAmB;MAAc,CAAA,EACnC,CAAA;KACZ,CAAA;IACP,CAAA;GACF,GA/BE,EAAK,EA+BP;EAET,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { resolveThemeColorCss } from '../utils/themeColor';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\n// Viewport-only updates move the outer box, not the live media subtree. Keep\n// nodes mounted offscreen so iframe/AI state and model camera state survive.\nconst MediaContent = React.memo(React.lazy(() =>\n  import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n));\n\n/** Isolates media render/load failures so one bad node never blanks the editor. */\nclass MediaErrorBoundary extends React.Component<\n  { children: React.ReactNode },\n  { error: Error | null }\n> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  render() {\n    if (this.state.error) {\n      return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n *\n * Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n */\nexport function MediaOverlay() {\n  const { currentCanvas, selection } = useFlowContext();\n  const { viewport, isNodeDragging } = useFlowUI();\n\n  const mediaNodes = useMemo(\n    () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n    [currentCanvas.nodes],\n  );\n\n  if (mediaNodes.length === 0) return null;\n\n  const { x: vx, y: vy, zoom } = viewport;\n\n  return (\n    <div className=\"flow-media-layer\">\n      {mediaNodes.map((node) => {\n        // World → screen (CSS px, matching ViewportManager.worldToScreen).\n        const left = node.position.x * zoom + vx;\n        const top = node.position.y * zoom + vy;\n        // Interactive only while selected, so the canvas stays draggable.\n        // Suppress entirely during a drag: an interactive iframe would swallow\n        // the pointer and the canvas would never receive pointerup (stuck drag).\n        const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n        // Drive the overlay's background / text from the node's own color data.\n        // Theme tokens (`theme:*`) resolve to CSS variables so the media content\n        // follows theme switches natively; literal colors are used as-is. This\n        // keeps html / ai / data (which render opaque content) in sync with the\n        // fill/color chosen in the inspector, matching the PixiJS frame drawn\n        // underneath. The border is owned by the Pixi frame (also what PNG/PDF\n        // export captures), so we don't redraw it here.\n        const fillCss = node.data.fill === 'transparent'\n          ? 'transparent'\n          : resolveThemeColorCss(node.data.fill, 'transparent');\n        const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n        return (\n          <div\n            key={node.id}\n            className=\"flow-media-node\"\n            data-media-node={node.id}\n            style={{\n              position: 'absolute',\n              left,\n              top,\n              width: node.width,\n              height: node.height,\n              // Scale the fixed-size content box to match zoom without\n              // reflowing text on every zoom step.\n              transform: `scale(${zoom})`,\n              transformOrigin: 'top left',\n              // Below the frame's selection outline but above the canvas.\n              pointerEvents: 'none',\n            }}\n          >\n            <div\n              className=\"flow-media-surface\"\n              onWheel={(e) => e.stopPropagation()}\n              style={{\n                background: fillCss,\n                color: textColor,\n              }}\n            >\n              <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n                <MediaErrorBoundary>\n                  <MediaContent node={node} interactive={interactive} />\n                </MediaErrorBoundary>\n              </Suspense>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,IAAM,IAAe,EAAM,KAAK,EAAM,WACpC,OAAO,oBAAiB,CAAC,MAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,CAAC,GAGK,IAAN,cAAiC,EAAM,UAGrC;CACA,YAAY,GAAsC;EAEhD,AADA,MAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;CAC7B;CACA,OAAO,yBAAyB,GAAc;EAC5C,OAAO,EAAE,SAAM;CACjB;CACA,SAAS;EAIP,OAHI,KAAK,MAAM,QACN,kBAAC,OAAD;GAAK,WAAU;GAAoB,UAAA,KAAK,MAAM,MAAM;EAAa,CAAA,IAEnE,KAAK,MAAM;CACpB;AACF;AAaA,SAAgB,IAAe;CAC7B,IAAM,EAAE,kBAAe,iBAAc,EAAe,GAC9C,EAAE,aAAU,sBAAmB,EAAU,GAEzC,IAAa,QACX,EAAc,MAAM,QAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;CAEA,IAAI,EAAW,WAAW,GAAG,OAAO;CAEpC,IAAM,EAAE,GAAG,GAAI,GAAG,GAAI,YAAS;CAE/B,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,EAAW,KAAK,MAAS;GAExB,IAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC,GAQjD,IAAU,EAAK,KAAK,SAAS,gBAC/B,gBACA,EAAqB,EAAK,KAAK,MAAM,aAAa,GAChD,IAAY,EAAqB,EAAK,KAAK,cAAc,EAAK,KAAK,OAAO,SAAS;GACzF,OACE,kBAAC,OAAD;IAEE,WAAU;IACV,mBAAiB,EAAK;IACtB,OAAO;KACL,UAAU;KACV;KACA;KACA,OAAO,EAAK;KACZ,QAAQ,EAAK;KAGb,WAAW,SAAS,EAAK;KACzB,iBAAiB;KAEjB,eAAe;IACjB;IAEA,UAAA,kBAAC,OAAD;KACE,WAAU;KACV,UAAU,MAAM,EAAE,gBAAgB;KAClC,OAAO;MACL,YAAY;MACZ,OAAO;KACT;KAEA,UAAA,kBAAC,GAAD;MAAU,UAAU,kBAAC,OAAD;OAAK,WAAU;OAAqB,UAAA;MAAM,CAAA;MAC5D,UAAA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAoB;OAAmB;MAAc,CAAA,EACnC,CAAA;KACZ,CAAA;IACP,CAAA;GACF,GA/BE,EAAK,EA+BP;EAET,CAAC;CACE,CAAA;AAET"}