@arronqzy/react-blueprint 1.0.18 → 1.0.21

package/src/graph/sync-edges.ts

@@ -6,8 +6,8 @@ import type { BlueprintGraph } from "./blueprint-graph";
 
 /** 边线描边（写入 edge.style；使用 hex 避免 SVG style 解析 hsl 异常） */
 export const BP_EDGE_STYLE = {
-  stroke: "#2563eb",
-  strokeWidth: 2.5,
+  stroke: "#94a3b8",
+  strokeWidth: 1.75,
 } as const;
 
 export const BP_FLOW_EDGE_TYPE = "blueprintSmooth" as const;

package/src/hooks/useBlueprintFlowState.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { toast } from "@arronqzy/ui";
 import {
   addEdge,

package/src/index.tsx

@@ -10,10 +10,13 @@ import {
   ReactFlow,
   ReactFlowProvider,
   ConnectionMode,
+  Background,
+  BackgroundVariant,
   useReactFlow,
   type Node,
   type Edge,
 } from "@xyflow/react";
+import { EnsureI18nProvider } from "@arronqzy/i18n/react";
 import "@xyflow/react/dist/style.css";
 import "./blueprint.css";
 
@@ -216,7 +219,15 @@ function BlueprintCanvas({
         elevateNodesOnSelect={false}
         nodeClickDistance={8}
         proOptions={{ hideAttribution: true }}
-      />
+      >
+        <Background
+          id="bp-dots"
+          variant={BackgroundVariant.Dots}
+          gap={18}
+          size={1.25}
+          color="rgba(148, 163, 184, 0.45)"
+        />
+      </ReactFlow>
       <BlueprintContextMenu
         menu={menu}
         onClose={() => setMenu(null)}
@@ -241,33 +252,35 @@ export const BluePrintReactRoot: FC<BluePrintReactRootProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div
-      ref={containerRef}
-      data-workspace-region="blueprint"
-      className="bp-canvas h-full w-full bg-background text-foreground"
-      style={{
-        width: "100%",
-        height: "100%",
-        minHeight: 0,
-        ...style,
-      }}
-    >
-      <BlueprintCanvasProvider
-        onSelectNode={onSelectNode}
-        onAbortClock={onAbortClock}
+    <EnsureI18nProvider>
+      <div
+        ref={containerRef}
+        data-workspace-region="blueprint"
+        className="bp-canvas h-full w-full bg-background text-foreground"
+        style={{
+          width: "100%",
+          height: "100%",
+          minHeight: 0,
+          ...style,
+        }}
       >
-        <ReactFlowProvider>
-          <BlueprintCanvas
-            containerRef={containerRef}
-            graph={graph}
-            onGraphChange={onGraphChange}
-            selectedNodeId={selectedNodeId}
-            executionOverlay={executionOverlay}
-            onSelectNode={onSelectNode}
-            libraryNameById={libraryNameById}
-          />
-        </ReactFlowProvider>
-      </BlueprintCanvasProvider>
-    </div>
+        <BlueprintCanvasProvider
+          onSelectNode={onSelectNode}
+          onAbortClock={onAbortClock}
+        >
+          <ReactFlowProvider>
+            <BlueprintCanvas
+              containerRef={containerRef}
+              graph={graph}
+              onGraphChange={onGraphChange}
+              selectedNodeId={selectedNodeId}
+              executionOverlay={executionOverlay}
+              onSelectNode={onSelectNode}
+              libraryNameById={libraryNameById}
+            />
+          </ReactFlowProvider>
+        </BlueprintCanvasProvider>
+      </div>
+    </EnsureI18nProvider>
   );
 };

package/src/library/api-collection-db.ts

@@ -0,0 +1,98 @@
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+import type { ApiCollectionRecord } from "@arronqzy/blueprint-dsl";
+
+const DB_NAME = "arronqzy-api-collections";
+const DB_VERSION = 1;
+const STORE_NAME = "collections";
+
+function openDb(nameSpace?: string | null): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(appStorageKey(DB_NAME, nameSpace), 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("updatedAt", "updatedAt", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>,
+  nameSpace?: string | null
+): Promise<T> {
+  return openDb(nameSpace).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 listApiCollectionRecords(
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord[]> {
+  const records = await runTransaction<ApiCollectionRecord[]>(
+    "readonly",
+    (store) => store.getAll(),
+    nameSpace
+  );
+  return records.sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+export async function getApiCollectionRecord(
+  id: string,
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord | null> {
+  const record = await runTransaction<ApiCollectionRecord | undefined>(
+    "readonly",
+    (store) => store.get(id),
+    nameSpace
+  );
+  return record ?? null;
+}
+
+export async function putApiCollectionRecord(
+  record: ApiCollectionRecord,
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord> {
+  await runTransaction<IDBValidKey>(
+    "readwrite",
+    (store) => store.put(record),
+    nameSpace
+  );
+  return record;
+}
+
+export async function deleteApiCollectionRecord(
+  id: string,
+  nameSpace?: string | null
+): Promise<void> {
+  await runTransaction<undefined>(
+    "readwrite",
+    (store) => store.delete(id),
+    nameSpace
+  );
+}

package/src/library/api-collection-store.ts

@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import {
+  apiCollectionToListItem,
+  createApiCollectionId,
+  parseApiCollectionJson,
+  type ApiCollectionDocument,
+  type ApiCollectionListItem,
+  type ApiCollectionRecord,
+} from "@arronqzy/blueprint-dsl";
+
+import {
+  deleteApiCollectionRecord,
+  listApiCollectionRecords,
+  putApiCollectionRecord,
+} from "./api-collection-db";
+
+type Listener = () => void;
+
+let nameSpaceRef: string | null | undefined = null;
+let records: ApiCollectionRecord[] = [];
+let hydrated = false;
+const listeners = new Set<Listener>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function sortRecords(list: ApiCollectionRecord[]): ApiCollectionRecord[] {
+  return [...list].sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+export function getApiCollectionRecords(): ApiCollectionRecord[] {
+  return records;
+}
+
+export function getApiCollectionListItems(): ApiCollectionListItem[] {
+  return records.map(apiCollectionToListItem);
+}
+
+export function getApiCollectionById(id: string): ApiCollectionRecord | null {
+  return records.find((item) => item.id === id) ?? null;
+}
+
+export function subscribeApiCollections(listener: Listener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export async function hydrateApiCollections(
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord[]> {
+  nameSpaceRef = nameSpace;
+  const persisted = await listApiCollectionRecords(nameSpace);
+  const memoryOnly = records.filter((item) => !item.persistLocal);
+  const persistedIds = new Set(persisted.map((item) => item.id));
+  records = sortRecords([
+    ...persisted,
+    ...memoryOnly.filter((item) => !persistedIds.has(item.id)),
+  ]);
+  hydrated = true;
+  emit();
+  return records;
+}
+
+export type UpsertApiCollectionInput = {
+  id?: string;
+  rawJson: string;
+  persistLocal: boolean;
+  /** 未写 document.name 时用文件名 */
+  fallbackName?: string;
+};
+
+export type UpsertApiCollectionResult =
+  | { ok: true; record: ApiCollectionRecord }
+  | { ok: false; error: string };
+
+export async function upsertApiCollectionFromJson(
+  input: UpsertApiCollectionInput
+): Promise<UpsertApiCollectionResult> {
+  const parsed = parseApiCollectionJson(input.rawJson);
+  if (!parsed.ok) return parsed;
+
+  const document: ApiCollectionDocument = {
+    ...parsed.document,
+    name:
+      parsed.document.name.trim() ||
+      input.fallbackName?.replace(/\.json$/i, "").trim() ||
+      parsed.document.name,
+  };
+  const now = Date.now();
+  const existing = input.id
+    ? records.find((item) => item.id === input.id) ?? null
+    : null;
+  const record: ApiCollectionRecord = {
+    id: existing?.id ?? createApiCollectionId(),
+    name: document.name,
+    persistLocal: input.persistLocal,
+    document,
+    rawJson: JSON.stringify(document, null, 2),
+    createdAt: existing?.createdAt ?? now,
+    updatedAt: now,
+  };
+
+  if (record.persistLocal) {
+    await putApiCollectionRecord(record, nameSpaceRef);
+  } else if (existing?.persistLocal) {
+    await deleteApiCollectionRecord(record.id, nameSpaceRef);
+  }
+
+  const next = records.filter((item) => item.id !== record.id);
+  next.push(record);
+  records = sortRecords(next);
+  emit();
+  return { ok: true, record };
+}
+
+export async function removeApiCollection(id: string): Promise<void> {
+  const existing = records.find((item) => item.id === id);
+  if (existing?.persistLocal || hydrated) {
+    try {
+      await deleteApiCollectionRecord(id, nameSpaceRef);
+    } catch {
+      // 内存-only 记录在库里可能不存在
+    }
+  }
+  records = records.filter((item) => item.id !== id);
+  emit();
+}
+
+export function useApiCollections(): ApiCollectionRecord[] {
+  const [list, setList] = useState<ApiCollectionRecord[]>(() => records);
+  useEffect(() => subscribeApiCollections(() => setList([...records])), []);
+  return list;
+}
+
+export function useApiCollectionListItems(): ApiCollectionListItem[] {
+  const list = useApiCollections();
+  return list.map(apiCollectionToListItem);
+}

package/src/nodes/AndFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 
@@ -20,6 +20,7 @@ export function AndFlowNode({ id, data }: NodeProps) {
     <div
       className={cn(
         "bp-node bp-node--and",
+        nodeData.isSelected && "bp-node--selected",
         executionTone === "success" && "bp-node--execution-true",
         executionTone === "error" && "bp-node--execution-false"
       )}
@@ -29,7 +30,7 @@ export function AndFlowNode({ id, data }: NodeProps) {
         position={Position.Left}
         id="inA"
         className="bp-flow-handle bp-flow-handle--target"
-        style={{ top: "35%" }}
+        style={{ top: "32%" }}
         title={t("blueprint.node.andInA")}
       />
       <Handle
@@ -37,7 +38,7 @@ export function AndFlowNode({ id, data }: NodeProps) {
         position={Position.Left}
         id="inB"
         className="bp-flow-handle bp-flow-handle--target"
-        style={{ top: "65%" }}
+        style={{ top: "68%" }}
         title={t("blueprint.node.andInB")}
       />
       <BlueprintNodeCard

package/src/nodes/BlueprintFlowNode.tsx

@@ -1,7 +1,10 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
-import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import {
+  resolveBlueprintConfigSource,
+  resolveBlueprintNodeTypeLabel,
+} from "../graph/document";
 import { resolveBlueprintNodeSummary } from "../graph/node-summary";
 import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
 import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
@@ -12,6 +15,8 @@ export function BlueprintFlowNode({ id, data }: NodeProps) {
   const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
+  const configSource = resolveBlueprintConfigSource(nodeData);
+  const variant = configSource === "view" ? "view" : "blueprint";
 
   return (
     <BlueprintNodeShell
@@ -19,7 +24,7 @@ export function BlueprintFlowNode({ id, data }: NodeProps) {
       label={nodeData.label}
       meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
       subtitle={resolveBlueprintNodeSummary(nodeData, t)}
-      variant="blueprint"
+      variant={variant}
       selected={Boolean(nodeData.isSelected)}
       executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
       onSelect={onSelect}