@arronqzy/react-blueprint 1.0.0

package/src/library/blueprint-library-db.ts

@@ -0,0 +1,112 @@
+import type {
+  BlueprintLibraryListItem,
+  BlueprintLibraryRecord,
+} from "./types";
+
+const DB_NAME = "arronqzy-blueprint-library";
+const DB_VERSION = 1;
+const STORE_NAME = "blueprints";
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+        store.createIndex("source", "source", { unique: false });
+        store.createIndex("updatedAt", "updatedAt", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+  return openDb().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, mode);
+        const store = tx.objectStore(STORE_NAME);
+        const request = runner(store);
+        let result!: T;
+
+        request.onerror = () =>
+          reject(request.error ?? new Error("indexeddb-request-failed"));
+        request.onsuccess = () => {
+          result = request.result as T;
+        };
+
+        tx.oncomplete = () => {
+          db.close();
+          resolve(result);
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+}
+
+export async function listBlueprintLibrary(): Promise<BlueprintLibraryListItem[]> {
+  const records = await runTransaction<BlueprintLibraryRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  return records
+    .map((record) => ({
+      id: record.id,
+      name: record.name,
+      remark: record.remark,
+      source: record.source,
+      updatedAt: record.updatedAt,
+    }))
+    .sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+export async function getBlueprintLibraryRecord(
+  id: string
+): Promise<BlueprintLibraryRecord | null> {
+  const record = await runTransaction<BlueprintLibraryRecord | undefined>("readonly", (store) =>
+    store.get(id)
+  );
+  return record ?? null;
+}
+
+export async function putBlueprintLibraryRecord(
+  record: BlueprintLibraryRecord
+): Promise<BlueprintLibraryRecord> {
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  return record;
+}
+
+export async function updateBlueprintLibraryMeta(
+  id: string,
+  patch: { name?: string; remark?: string }
+): Promise<BlueprintLibraryRecord | null> {
+  const existing = await getBlueprintLibraryRecord(id);
+  if (!existing) return null;
+
+  const name = patch.name?.trim() || existing.name;
+  const record: BlueprintLibraryRecord = {
+    ...existing,
+    name,
+    remark: patch.remark !== undefined ? patch.remark.trim() || undefined : existing.remark,
+    updatedAt: Date.now(),
+    document: {
+      ...existing.document,
+      name,
+    },
+  };
+
+  await putBlueprintLibraryRecord(record);
+  return record;
+}
+
+export async function deleteBlueprintLibraryRecord(id: string): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(id));
+}

package/src/library/execution-log-db.ts

@@ -0,0 +1,171 @@
+import type { ExecutionRunRecord } from "@arronqzy/blueprint-dsl";
+
+const DB_NAME = "arronqzy-blueprint-execution-log";
+const DB_VERSION = 1;
+const STORE_NAME = "runs";
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: "runId" });
+        store.createIndex("startedAt", "startedAt", { unique: false });
+        store.createIndex("blueprintId", "blueprintId", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+  return openDb().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, mode);
+        const store = tx.objectStore(STORE_NAME);
+        const request = runner(store);
+        let result!: T;
+
+        request.onerror = () =>
+          reject(request.error ?? new Error("indexeddb-request-failed"));
+        request.onsuccess = () => {
+          result = request.result as T;
+        };
+
+        tx.oncomplete = () => {
+          db.close();
+          resolve(result);
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+}
+
+export async function putExecutionRunRecord(
+  record: ExecutionRunRecord
+): Promise<ExecutionRunRecord> {
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  return record;
+}
+
+export async function getExecutionRunRecord(
+  runId: string
+): Promise<ExecutionRunRecord | null> {
+  const record = await runTransaction<ExecutionRunRecord | undefined>(
+    "readonly",
+    (store) => store.get(runId)
+  );
+  return record ?? null;
+}
+
+export async function listExecutionRunRecords(
+  blueprintId?: string | null
+): Promise<ExecutionRunRecord[]> {
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  const filtered = blueprintId
+    ? records.filter((item) => item.blueprintId === blueprintId)
+    : records;
+  return filtered.sort((a, b) => b.startedAt - a.startedAt);
+}
+
+export async function deleteExecutionRunRecord(runId: string): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(runId));
+}
+
+export async function clearAllExecutionRunRecords(): Promise<number> {
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  if (records.length === 0) return 0;
+
+  await runTransaction<undefined>("readwrite", (store) => store.clear());
+  return records.length;
+}
+
+export async function trimExecutionRunRecordsToMax(
+  maxCount: number
+): Promise<number> {
+  if (!Number.isFinite(maxCount) || maxCount < 1) return 0;
+
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  if (records.length <= maxCount) return 0;
+
+  const sorted = [...records].sort((a, b) => b.startedAt - a.startedAt);
+  const overflow = sorted.slice(maxCount);
+  if (overflow.length === 0) return 0;
+
+  await openDb().then(
+    (db) =>
+      new Promise<void>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, "readwrite");
+        const store = tx.objectStore(STORE_NAME);
+        for (const item of overflow) {
+          store.delete(item.runId);
+        }
+        tx.oncomplete = () => {
+          db.close();
+          resolve();
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+
+  return overflow.length;
+}
+
+export async function purgeExecutionRunsOlderThan(cutoffMs: number): Promise<number> {
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  const stale = records.filter((item) => item.startedAt < cutoffMs);
+  if (stale.length === 0) return 0;
+
+  await openDb().then(
+    (db) =>
+      new Promise<void>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, "readwrite");
+        const store = tx.objectStore(STORE_NAME);
+        for (const item of stale) {
+          store.delete(item.runId);
+        }
+        tx.oncomplete = () => {
+          db.close();
+          resolve();
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+
+  return stale.length;
+}
+
+export function downloadExecutionRunExport(record: ExecutionRunRecord) {
+  const blob = new Blob([JSON.stringify(record, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `blueprint-run-${record.runId}.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}

package/src/library/execution-log-settings.ts

@@ -0,0 +1,50 @@
+export type ExecutionLogSettings = {
+  retentionDays: number;
+  autoSave: boolean;
+  /** IndexedDB 中最多保留的日志条数 */
+  maxSavedRuns: number;
+};
+
+const SETTINGS_KEY = "arronqzy-blueprint-execution-log-settings";
+
+export const DEFAULT_EXECUTION_LOG_SETTINGS: ExecutionLogSettings = {
+  retentionDays: 7,
+  autoSave: true,
+  maxSavedRuns: 80,
+};
+
+export function readExecutionLogSettings(): ExecutionLogSettings {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY);
+    if (!raw) return { ...DEFAULT_EXECUTION_LOG_SETTINGS };
+    const parsed = JSON.parse(raw) as Partial<ExecutionLogSettings>;
+    return {
+      retentionDays:
+        typeof parsed.retentionDays === "number" && parsed.retentionDays > 0
+          ? parsed.retentionDays
+          : DEFAULT_EXECUTION_LOG_SETTINGS.retentionDays,
+      autoSave:
+        typeof parsed.autoSave === "boolean"
+          ? parsed.autoSave
+          : DEFAULT_EXECUTION_LOG_SETTINGS.autoSave,
+      maxSavedRuns:
+        typeof parsed.maxSavedRuns === "number" && parsed.maxSavedRuns > 0
+          ? Math.floor(parsed.maxSavedRuns)
+          : DEFAULT_EXECUTION_LOG_SETTINGS.maxSavedRuns,
+    };
+  } catch {
+    return { ...DEFAULT_EXECUTION_LOG_SETTINGS };
+  }
+}
+
+export function writeExecutionLogSettings(settings: ExecutionLogSettings) {
+  try {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+  } catch {
+    // ignore storage errors
+  }
+}
+
+export function retentionCutoffMs(retentionDays: number) {
+  return Date.now() - retentionDays * 24 * 60 * 60 * 1000;
+}

package/src/library/swagger-docs.ts

@@ -0,0 +1,56 @@
+import {
+  parseSwaggerDocument,
+  type ParsedSwaggerDocument,
+} from "@arronqzy/blueprint-dsl";
+
+export async function loadSwaggerDocument(
+  docsUrl: string,
+  signal?: AbortSignal
+): Promise<ParsedSwaggerDocument> {
+  const trimmed = docsUrl.trim();
+  if (!trimmed) {
+    throw new Error("请输入 Swagger 文档 URL");
+  }
+
+  if (signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
+
+  let response: Response;
+  try {
+    response = await fetch(trimmed, {
+      method: "GET",
+      credentials: "same-origin",
+      signal,
+    });
+  } catch (error) {
+    if (signal?.aborted || (error instanceof DOMException && error.name === "AbortError")) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    throw new Error(
+      error instanceof Error ? error.message : "无法请求 Swagger 文档"
+    );
+  }
+
+  if (signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
+
+  if (!response.ok) {
+    throw new Error(`Swagger 文档请求失败: HTTP ${response.status}`);
+  }
+
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("text/html")) {
+    throw new Error("返回内容为 HTML，请填写 OpenAPI/Swagger 的 JSON 地址");
+  }
+
+  let spec: unknown;
+  try {
+    spec = await response.json();
+  } catch {
+    throw new Error("Swagger 文档不是有效的 JSON");
+  }
+
+  return parseSwaggerDocument(spec, trimmed);
+}

package/src/library/types.ts

@@ -0,0 +1,35 @@
+import type { BlueprintDocument } from "../graph/document";
+
+export type BlueprintLibrarySource = "saved" | "imported";
+
+export type BlueprintLibraryRecord = {
+  id: string;
+  name: string;
+  remark?: string;
+  source: BlueprintLibrarySource;
+  createdAt: number;
+  updatedAt: number;
+  document: BlueprintDocument;
+};
+
+export type BlueprintLibraryListItem = Pick<
+  BlueprintLibraryRecord,
+  "id" | "name" | "remark" | "source" | "updatedAt"
+>;
+
+export const BLUEPRINT_EXPORT_KIND = "arronqzy-blueprint" as const;
+export const BLUEPRINT_EXPORT_VERSION = 1 as const;
+
+export type BlueprintExportPayload = {
+  kind: typeof BLUEPRINT_EXPORT_KIND;
+  version: typeof BLUEPRINT_EXPORT_VERSION;
+  name: string;
+  remark?: string;
+  exportedAt: number;
+  document: BlueprintDocument;
+};
+
+export type BlueprintMetaDraft = {
+  name: string;
+  remark: string;
+};

package/src/main.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "@arronqzy/ui";
+import "@arronqzy/ui/styles.css";
+import "@xyflow/react/dist/style.css";
+import "./dev.css";
+import "./blueprint.css";
+
+import { BluePrintReactRoot } from ".";
+import { createDevBlueprintGraph } from "./dev-seed";
+
+function DevApp() {
+  const [graph, setGraph] = useState(() => createDevBlueprintGraph());
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+
+  return (
+    <>
+      <header className="bp-dev-toolbar">
+        <strong>Blueprint Dev</strong>
+        <span className="text-muted-foreground">
+          右键画布添加节点 · 从右侧圆点拖到左侧圆点连线 · 初始应看到 A→B 蓝线
+        </span>
+        <span className="text-muted-foreground">
+          节点 {graph.document.nodes.length} · 边 {graph.document.edges.length}
+        </span>
+      </header>
+      <div className="bp-dev-canvas">
+        <BluePrintReactRoot
+          graph={graph}
+          onGraphChange={setGraph}
+          selectedNodeId={selectedNodeId}
+          onSelectNode={setSelectedNodeId}
+        />
+      </div>
+    </>
+  );
+}
+
+createRoot(document.getElementById("app")!).render(
+  <ThemeProvider defaultTheme="light" enableSystem={false}>
+    <DevApp />
+  </ThemeProvider>
+);

package/src/nodes/AndFlowNode.tsx

@@ -0,0 +1,59 @@
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { cn } from "@arronqzy/ui";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeCard } from "./BlueprintNodeCard";
+
+/** 并运算节点：两路输入均为真时输出真信号；单端口多连线按「或」合并 */
+export function AndFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+  const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
+
+  return (
+    <div
+      className={cn(
+        "bp-node bp-node--and",
+        executionTone === "success" && "bp-node--execution-true",
+        executionTone === "error" && "bp-node--execution-false"
+      )}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="inA"
+        className="bp-flow-handle bp-flow-handle--target"
+        style={{ top: "35%" }}
+        title="输入 A（多连线为或）"
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="inB"
+        className="bp-flow-handle bp-flow-handle--target"
+        style={{ top: "65%" }}
+        title="输入 B（多连线为或）"
+      />
+      <BlueprintNodeCard
+        nodeId={id}
+        label={nodeData.label}
+        meta={resolveBlueprintNodeTypeLabel(nodeData)}
+        subtitle={resolveBlueprintNodeSummary(nodeData)}
+        variant="and"
+        selected={Boolean(nodeData.isSelected)}
+        onSelect={onSelect}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="out"
+        className="bp-flow-handle bp-flow-handle--source"
+        title="两路均为真时输出真信号"
+      />
+    </div>
+  );
+}

package/src/nodes/BlueprintFlowNode.tsx

@@ -0,0 +1,26 @@
+import type { NodeProps } from "@xyflow/react";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeShell } from "./BlueprintNodeShell";
+
+export function BlueprintFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+
+  return (
+    <BlueprintNodeShell
+      nodeId={id}
+      label={nodeData.label}
+      meta={resolveBlueprintNodeTypeLabel(nodeData)}
+      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      variant="blueprint"
+      selected={Boolean(nodeData.isSelected)}
+      executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+      onSelect={onSelect}
+    />
+  );
+}