@arronqzy/react-blueprint 1.0.0

package/src/components/FetchUrlAutocomplete.tsx

@@ -0,0 +1,190 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@arronqzy/ui";
+import {
+  buildEndpointSuggestions,
+  filterEndpointSuggestions,
+  resolveFetchRequestUrl,
+  type FetchHttpMethod,
+  type SwaggerApiEndpoint,
+} from "@arronqzy/blueprint-dsl";
+
+export type FetchUrlAutocompleteProps = {
+  value: string;
+  apiBaseUrl: string;
+  endpoints: SwaggerApiEndpoint[];
+  placeholder?: string;
+  /** 为 true 时仅能从列表选择，不可自由输入 URL */
+  selectOnly?: boolean;
+  onChange: (value: string) => void;
+  onSelectEndpoint?: (endpoint: SwaggerApiEndpoint, fullUrl: string) => void;
+};
+
+export function FetchUrlAutocomplete({
+  value,
+  apiBaseUrl,
+  endpoints,
+  placeholder,
+  selectOnly = false,
+  onChange,
+  onSelectEndpoint,
+}: FetchUrlAutocompleteProps) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [filterQuery, setFilterQuery] = useState("");
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const suggestions = useMemo(
+    () => buildEndpointSuggestions(apiBaseUrl, endpoints),
+    [apiBaseUrl, endpoints]
+  );
+
+  const query = selectOnly ? filterQuery : value;
+
+  const filtered = useMemo(
+    () => filterEndpointSuggestions(suggestions, query),
+    [suggestions, query]
+  );
+
+  const selectedSuggestion = useMemo(
+    () => suggestions.find((item) => item.path === value),
+    [suggestions, value]
+  );
+
+  const inputValue = selectOnly
+    ? open
+      ? filterQuery
+      : selectedSuggestion?.label ?? value
+    : value;
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query, filtered.length]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as globalThis.Node)) {
+        setOpen(false);
+        setFilterQuery("");
+      }
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  const showSuggestions = open && endpoints.length > 0;
+
+  const selectSuggestion = (index: number) => {
+    const item = filtered[index];
+    if (!item) return;
+    const nextValue = apiBaseUrl.trim() ? item.path : item.fullUrl;
+    onChange(nextValue);
+    onSelectEndpoint?.(item, item.fullUrl);
+    setFilterQuery("");
+    setOpen(false);
+  };
+
+  const openDropdown = () => {
+    setOpen(true);
+    if (selectOnly) {
+      setFilterQuery("");
+    }
+  };
+
+  const closeDropdown = () => {
+    setOpen(false);
+    setFilterQuery("");
+  };
+
+  return (
+    <div ref={containerRef} className="relative">
+      <input
+        value={inputValue}
+        readOnly={selectOnly && !open}
+        placeholder={placeholder}
+        onChange={(e) => {
+          if (selectOnly) {
+            setFilterQuery(e.target.value);
+            setOpen(true);
+            return;
+          }
+          onChange(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={openDropdown}
+        onBlur={() => {
+          if (selectOnly) {
+            closeDropdown();
+          }
+        }}
+        onKeyDown={(e) => {
+          if (!showSuggestions || filtered.length === 0) {
+            if (selectOnly && e.key === "Escape") {
+              closeDropdown();
+            }
+            return;
+          }
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActiveIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActiveIndex((prev) => Math.max(prev - 1, 0));
+          } else if (e.key === "Enter") {
+            e.preventDefault();
+            selectSuggestion(activeIndex);
+          } else if (e.key === "Escape") {
+            closeDropdown();
+          }
+        }}
+        className={cn(
+          "flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary",
+          selectOnly && !open ? "cursor-pointer font-medium" : "font-mono"
+        )}
+      />
+      {showSuggestions ? (
+        <div className="absolute z-[10150] mt-1 max-h-52 w-full overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md">
+          {filtered.length === 0 ? (
+            <div className="px-2 py-1.5 text-[11px] text-muted-foreground">
+              无匹配接口
+            </div>
+          ) : (
+            filtered.map((item, index) => (
+              <button
+                key={`${item.method}:${item.path}:${item.operationId ?? index}`}
+                type="button"
+                className={cn(
+                  "flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-accent",
+                  index === activeIndex && "bg-accent"
+                )}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => selectSuggestion(index)}
+              >
+                <span className="font-medium text-foreground">{item.label}</span>
+                <span className="truncate font-mono text-muted-foreground">
+                  {item.fullUrl}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function resolveFetchUrlPreview(
+  apiBaseUrl: string,
+  url: string,
+  endpoints: SwaggerApiEndpoint[]
+): string {
+  const matched = endpoints.find((item) => item.path === url);
+  const resolvedPath = matched?.path ?? url;
+  try {
+    return resolveFetchRequestUrl({ url: resolvedPath, apiBaseUrl });
+  } catch {
+    return url;
+  }
+}
+
+export type { FetchHttpMethod };

package/src/components/JsonNodeConfigPanel.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useMemo, useState, type ChangeEvent } from "react";
+import { validateJsonString } from "@arronqzy/blueprint-dsl";
+import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraphNode } from "../graph/document";
+import { resolveNodeJsonConfig } from "../graph/document";
+
+export type JsonNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "jsonConfig" | "configSource">>
+  ) => void;
+};
+
+function patchJsonConfig(
+  node: BlueprintGraphNode,
+  patch: Partial<JsonNodeConfig>
+) {
+  return {
+    jsonConfig: { ...resolveNodeJsonConfig(node), ...patch },
+    configSource: "json" as const,
+  };
+}
+
+export function JsonNodeConfigPanel({
+  node,
+  onUpdateNode,
+}: JsonNodeConfigPanelProps) {
+  const jsonConfig = resolveNodeJsonConfig(node);
+  const [draftError, setDraftError] = useState<string | null>(null);
+
+  const storedValidation = useMemo(
+    () => validateJsonString(jsonConfig.jsonString),
+    [jsonConfig.jsonString]
+  );
+
+  const parseError =
+    draftError ??
+    (storedValidation.ok ? null : storedValidation.error);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const jsonString = e.target.value;
+      const result = validateJsonString(jsonString);
+      setDraftError(result.ok ? null : result.error);
+      onUpdateNode(node.id, patchJsonConfig(node, { jsonString }));
+    },
+    [node, onUpdateNode]
+  );
+
+  return (
+    <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+      <div className="font-medium text-foreground">JSON 节点</div>
+      <p className="text-[11px] text-muted-foreground">
+        收到<strong>真信号</strong>后，将下方 JSON 解析为 JavaScript object（或
+        array）并从输出口发出<strong>真信号</strong>；解析失败则发出
+        <strong>假信号</strong>。
+      </p>
+
+      <label className="block space-y-1">
+        <span className="text-muted-foreground">JSON 内容</span>
+        <textarea
+          value={jsonConfig.jsonString}
+          onChange={handleChange}
+          rows={12}
+          spellCheck={false}
+          className="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+          placeholder={'{\n  "key": "value"\n}'}
+        />
+        {parseError ? (
+          <p className="text-[11px] text-destructive">JSON 格式错误：{parseError}</p>
+        ) : (
+          <p className="text-[11px] text-muted-foreground">JSON 格式正确</p>
+        )}
+      </label>
+    </div>
+  );
+}

package/src/components/LogicNodeConfigPanel.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useMemo, useState, type ChangeEvent } from "react";
+import { validateLogicSourceCode } from "@arronqzy/blueprint-dsl";
+import type { LogicNodeConfig } from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraphNode } from "../graph/document";
+import { resolveNodeLogicConfig } from "../graph/document";
+
+export type LogicNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "logicConfig" | "configSource">>
+  ) => void;
+};
+
+function patchLogicConfig(
+  node: BlueprintGraphNode,
+  patch: Partial<LogicNodeConfig>
+) {
+  return {
+    logicConfig: { ...resolveNodeLogicConfig(node), ...patch },
+    configSource: "logic" as const,
+  };
+}
+
+export function LogicNodeConfigPanel({
+  node,
+  onUpdateNode,
+}: LogicNodeConfigPanelProps) {
+  const logicConfig = resolveNodeLogicConfig(node);
+  const [draftError, setDraftError] = useState<string | null>(null);
+
+  const storedValidation = useMemo(
+    () => validateLogicSourceCode(logicConfig.sourceCode),
+    [logicConfig.sourceCode]
+  );
+
+  const parseError =
+    draftError ?? (storedValidation.ok ? null : storedValidation.error);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const sourceCode = e.target.value;
+      const result = validateLogicSourceCode(sourceCode);
+      setDraftError(result.ok ? null : result.error);
+      onUpdateNode(node.id, patchLogicConfig(node, { sourceCode }));
+    },
+    [node, onUpdateNode]
+  );
+
+  return (
+    <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+      <div className="font-medium text-foreground">逻辑节点</div>
+      <p className="text-[11px] text-muted-foreground">
+        收到<strong>真信号</strong>后，将输入数据传入下方 <code>update</code>{" "}
+        函数并执行；返回值作为<strong>真信号</strong>输出。代码语法错误或运行时报错则发出
+        <strong>假信号</strong>（错误信息为输出值）。
+      </p>
+
+      <label className="block space-y-1">
+        <span className="text-muted-foreground">JavaScript 代码</span>
+        <textarea
+          value={logicConfig.sourceCode}
+          onChange={handleChange}
+          rows={14}
+          spellCheck={false}
+          className="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+          placeholder={`function update(input) {\n  return input;\n}`}
+        />
+        {parseError ? (
+          <p className="text-[11px] text-destructive">
+            JavaScript 错误：{parseError}
+          </p>
+        ) : (
+          <p className="text-[11px] text-muted-foreground">JavaScript 语法正确</p>
+        )}
+      </label>
+    </div>
+  );
+}

package/src/components/ViewElementMultiSelect.tsx

@@ -0,0 +1,140 @@
+import { useMemo, useState } from "react";
+import {
+  Button,
+  cn,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@arronqzy/ui";
+
+export type ViewElementMultiSelectOption = {
+  id: string;
+  label: string;
+};
+
+export type ViewElementMultiSelectProps = {
+  options: ViewElementMultiSelectOption[];
+  value: string[];
+  onChange: (next: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+};
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden>
+      <path
+        fill="currentColor"
+        d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+      />
+    </svg>
+  );
+}
+
+function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden>
+      <path fill="currentColor" d="M7 10l5 5 5-5z" />
+    </svg>
+  );
+}
+
+function resolveTriggerText(
+  value: string[],
+  labelById: Map<string, string>,
+  placeholder: string
+): string {
+  if (value.length === 0) return placeholder;
+  const labels = value.map((id) => labelById.get(id) ?? id);
+  if (labels.length === 1) return labels[0]!;
+  const joined = labels.join("、");
+  if (joined.length <= 26) return joined;
+  return `已选 ${value.length} 项`;
+}
+
+export function ViewElementMultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "选择视图节点",
+  disabled = false,
+}: ViewElementMultiSelectProps) {
+  const [open, setOpen] = useState(false);
+  const labelById = useMemo(
+    () => new Map(options.map((opt) => [opt.id, opt.label])),
+    [options]
+  );
+  const selectedSet = useMemo(() => new Set(value), [value]);
+  const triggerText = resolveTriggerText(value, labelById, placeholder);
+  const emptyOptions = options.length === 0;
+
+  const toggle = (id: string) => {
+    onChange(
+      selectedSet.has(id)
+        ? value.filter((item) => item !== id)
+        : [...value, id]
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || emptyOptions}
+          className={cn(
+            "h-8 w-full justify-between px-3 text-xs font-normal",
+            value.length === 0 && "text-muted-foreground"
+          )}
+        >
+          <span className="min-w-0 flex-1 truncate text-left">
+            {emptyOptions ? "视图画布暂无节点" : triggerText}
+          </span>
+          <ChevronDownIcon className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="z-[10100] w-[var(--radix-popover-trigger-width)] p-0"
+        align="start"
+      >
+        <Command>
+          <CommandInput placeholder="搜索视图节点…" className="h-9 text-xs" />
+          <CommandList>
+            <CommandEmpty>无匹配节点</CommandEmpty>
+            <CommandGroup>
+              {options.map((opt) => {
+                const selected = selectedSet.has(opt.id);
+                return (
+                  <CommandItem
+                    key={opt.id}
+                    value={`${opt.label} ${opt.id}`}
+                    className="text-xs"
+                    onMouseDown={(e) => e.preventDefault()}
+                    onSelect={() => toggle(opt.id)}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        "h-4 w-4 shrink-0",
+                        selected ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <span className="min-w-0 truncate">{opt.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/createBlueprintEdgeTypes.tsx

@@ -0,0 +1,10 @@
+import type { EdgeTypes } from "@xyflow/react";
+
+import { BlueprintSmoothEdge } from "./edges/BlueprintSmoothEdge";
+import { BP_FLOW_EDGE_TYPE } from "./graph/sync-edges";
+
+export function createBlueprintEdgeTypes(): EdgeTypes {
+  return {
+    [BP_FLOW_EDGE_TYPE]: BlueprintSmoothEdge,
+  };
+}

package/src/dev-seed.ts

@@ -0,0 +1,34 @@
+import { addEdge } from "@xyflow/react";
+
+import { BlueprintGraph } from "./graph";
+import {
+  BP_EDGE_STYLE,
+  BP_FLOW_EDGE_TYPE,
+  flowEdgesToGraphEdges,
+  graphToFlowEdges,
+} from "./graph/sync-edges";
+
+/** DevApp 初始图：两个节点 + 一条连线，便于直接验证边是否渲染 */
+export function createDevBlueprintGraph(): BlueprintGraph {
+  let graph = BlueprintGraph.empty();
+  graph = graph.addBlueprintNode({ x: 40, y: 80 }, "节点 A");
+  const nodeA = graph.document.nodes[0]!;
+  graph = graph.addBlueprintNode({ x: 300, y: 80 }, "节点 B");
+  const nodeB = graph.document.nodes[1]!;
+
+  const withEdge = addEdge(
+    {
+      id: "dev-edge-1",
+      source: nodeA.id,
+      target: nodeB.id,
+      sourceHandle: "out",
+      targetHandle: "in",
+      type: BP_FLOW_EDGE_TYPE,
+      zIndex: 1000,
+      style: { ...BP_EDGE_STYLE },
+    },
+    graphToFlowEdges(graph)
+  );
+
+  return graph.replaceEdges(flowEdgesToGraphEdges(withEdge));
+}

package/src/dev.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.bp-dev-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  font-size: 12px;
+}
+
+.bp-dev-toolbar strong {
+  font-weight: 600;
+}
+
+.bp-dev-canvas {
+  flex: 1;
+  min-height: 0;
+}

package/src/edges/BlueprintSmoothEdge.tsx

@@ -0,0 +1,35 @@
+import { BaseEdge, getSmoothStepPath, type EdgeProps } from "@xyflow/react";
+
+const EDGE_STROKE = "#2563eb";
+const EDGE_WIDTH = 2.5;
+
+export function BlueprintSmoothEdge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+}: EdgeProps) {
+  const [path] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <BaseEdge
+      path={path}
+      className="bp-edge-visible"
+      style={{
+        stroke: EDGE_STROKE,
+        strokeWidth: EDGE_WIDTH,
+        ...style,
+      }}
+    />
+  );
+}