@arronqzy/react-view 1.0.11 → 1.0.13

package/src/panel/components/WorkspaceConfigSidebar.tsx

@@ -4,6 +4,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 import {
   BlueprintExecutionLogPanel,
   BlueprintNodeConfigSidebar,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type ExecutionLogSettings,
   type ExecutionTraceEntry,
@@ -41,6 +42,8 @@ export type WorkspaceConfigSidebarProps = Omit<
   configFocus: WorkspaceConfigFocus;
   executionLog?: BlueprintExecutionLogViewProps;
   selectedBlueprintNode: BlueprintGraphNode | null;
+  blueprintGraphNodes?: BlueprintGraphNode[];
+  blueprintGraphEdges?: BlueprintGraphEdge[];
   allowFalseSignalPropagation?: boolean;
   onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
   onUpdateBlueprintNode: (
@@ -74,6 +77,8 @@ export function WorkspaceConfigSidebar({
   configFocus,
   executionLog,
   selectedBlueprintNode,
+  blueprintGraphNodes = [],
+  blueprintGraphEdges = [],
   allowFalseSignalPropagation = false,
   onUpdateAllowFalseSignalPropagation,
   onUpdateBlueprintNode,
@@ -151,6 +156,9 @@ export function WorkspaceConfigSidebar({
   return (
     <BlueprintNodeConfigSidebar
       node={selectedBlueprintNode}
+      graphNodes={blueprintGraphNodes}
+      graphEdges={blueprintGraphEdges}
+      traceEntries={executionLog?.entries}
       allowFalseSignalPropagation={allowFalseSignalPropagation}
       onUpdateAllowFalseSignalPropagation={onUpdateAllowFalseSignalPropagation}
       viewElementOptions={viewElementOptions}

package/src/panel/utils/chartOptionBuilder.ts

@@ -84,6 +84,45 @@ function deepMerge<T extends Record<string, any>>(base: T, patch?: Record<string
   return next as T;
 }
 
+function resolveBarWidth(chart?: PanelChartConfig): number | undefined {
+  const width = chart?.barWidth;
+  return typeof width === "number" && Number.isFinite(width) && width > 0 ? width : undefined;
+}
+
+function mixHex(a: string, b: string, t: number): string {
+  const pa = parseHex(a);
+  const pb = parseHex(b);
+  if (!pa || !pb) return a;
+  const m = (i: number) => Math.round(pa[i]! * (1 - t) + pb[i]! * t);
+  return `#${[m(0), m(1), m(2)].map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+
+function parseHex(hex: string): [number, number, number] | null {
+  const s = hex.replace("#", "").trim();
+  const full =
+    s.length === 3
+      ? s
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : s.slice(0, 6);
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) return null;
+  return [
+    Number.parseInt(full.slice(0, 2), 16),
+    Number.parseInt(full.slice(2, 4), 16),
+    Number.parseInt(full.slice(4, 6), 16),
+  ];
+}
+
+function pieSliceColors(base: string, count: number): string[] {
+  const n = Math.max(count, 1);
+  if (n === 1) return [base];
+  return Array.from({ length: n }, (_, i) => {
+    const t = n === 1 ? 0 : i / (n - 1);
+    return mixHex(mixHex(base, "#111827", 0.12), "#fefce8", t * 0.45);
+  });
+}
+
 export function buildChartOption(element: PanelElement): EChartsOption {
   const chartType = (element.materialType ?? "") as ChartType;
   const labels = resolveChartLabels(element);
@@ -144,10 +183,11 @@ export function buildChartOption(element: PanelElement): EChartsOption {
   if (chartType === "pie") {
     const inner = element.chart?.pieInnerRadius ?? 30;
     const outer = element.chart?.pieOuterRadius ?? 65;
+    const sliceColors = pieSliceColors(color, labels.length);
     const baseOption: EChartsOption = {
       animation: false,
       title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
-      color: [chartColor as any],
+      color: sliceColors as any,
       tooltip: tooltipOption,
       series: [
         {
@@ -155,7 +195,11 @@ export function buildChartOption(element: PanelElement): EChartsOption {
           radius: [`${inner}%`, `${outer}%`],
           center: ["50%", "58%"],
           label: { fontSize: 10 },
-          data: labels.map((name, i) => ({ name, value: values[i] ?? 0 })),
+          data: labels.map((name, i) => ({
+            name,
+            value: values[i] ?? 0,
+            itemStyle: { color: sliceColors[i % sliceColors.length] as any },
+          })),
         },
       ],
     };
@@ -315,7 +359,8 @@ export function buildChartOption(element: PanelElement): EChartsOption {
           chartType === "line" || chartType === "area"
             ? (element.chart?.smooth ?? true)
             : undefined,
-        barWidth: chartType === "bar" ? (element.chart?.barWidth ?? 24) : undefined,
+        barWidth:
+          chartType === "bar" ? resolveBarWidth(element.chart) : undefined,
         areaStyle: chartType === "area" ? { opacity: 0.25 } : undefined,
         itemStyle: { color: chartColor as any },
         lineStyle: { color: chartColor as any },

package/src/panel/utils/outputScale.ts

@@ -0,0 +1,69 @@
+/** 产物预览是否缩放内部内容（字体等）。默认 false：块仍按视口撑满，内容保持原尺寸以免失真。 */
+export const OUTPUT_SCALE_STORAGE_KEY = "panel:outputScale";
+
+export function readOutputScale(): boolean {
+  try {
+    return localStorage.getItem(OUTPUT_SCALE_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+export function writeOutputScale(enabled: boolean) {
+  try {
+    localStorage.setItem(OUTPUT_SCALE_STORAGE_KEY, enabled ? "1" : "0");
+  } catch {
+    // ignore storage errors
+  }
+}
+
+export type PreviewFillScale = {
+  vw: number;
+  vh: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+export function getPreviewFillScale(
+  sceneWidth: number,
+  sceneHeight: number
+): PreviewFillScale {
+  const vw = window.innerWidth || 1;
+  const vh = window.innerHeight || 1;
+  const sw = Math.max(1, sceneWidth);
+  const sh = Math.max(1, sceneHeight);
+  return {
+    vw,
+    vh,
+    scaleX: vw / sw,
+    scaleY: vh / sh,
+  };
+}
+
+/**
+ * 预览始终按视口宽高比把场景块撑满。
+ * outputScale=true：CSS transform 缩放整棵内容（含字体）。
+ * outputScale=false：只把场景盒拉到视口大小，节点几何由调用方按 scale 映射，字体不跟着拉伸。
+ */
+export function applyPreviewSceneFill(
+  scene: HTMLElement | null,
+  sceneWidth: number,
+  sceneHeight: number,
+  outputScale: boolean
+): PreviewFillScale {
+  const fill = getPreviewFillScale(sceneWidth, sceneHeight);
+  if (!Number.isFinite(fill.scaleX) || !Number.isFinite(fill.scaleY)) return fill;
+  if (!scene) return fill;
+  const root = scene.parentElement;
+  if (root) root.style.overflow = "hidden";
+  if (outputScale) {
+    scene.style.width = `${Math.max(1, sceneWidth)}px`;
+    scene.style.height = `${Math.max(1, sceneHeight)}px`;
+    scene.style.transform = `translate(0px,0px) scale(${fill.scaleX},${fill.scaleY})`;
+  } else {
+    scene.style.width = `${fill.vw}px`;
+    scene.style.height = `${fill.vh}px`;
+    scene.style.transform = "none";
+  }
+  return fill;
+}

package/src/panel/utils/panelElementDefaults.ts

@@ -126,7 +126,6 @@ export function getDefaultChartConfig(
     return {
       title: t("panel.defaults.bar"),
       ...common,
-      barWidth: 24,
     };
   }
   if (materialType === "line") {