@arronqzy/react-blueprint 1.0.19 → 1.0.22

package/src/index.tsx

@@ -10,11 +10,14 @@ import {
   ReactFlow,
   ReactFlowProvider,
   ConnectionMode,
+  Background,
+  BackgroundVariant,
   useReactFlow,
   type Node,
   type Edge,
 } from "@xyflow/react";
 import { EnsureI18nProvider } from "@arronqzy/i18n/react";
+import { BlueprintDslLocaleSync } from "./BlueprintDslLocaleSync";
 import "@xyflow/react/dist/style.css";
 import "./blueprint.css";
 
@@ -37,6 +40,7 @@ export type { BlueprintExecutionOverlay } from "./runtime/execution-overlay";
 
 export type { BlueprintNodeConfigSidebarProps, BlueprintViewElementOption, BlueprintLibraryOption } from "./BlueprintNodeConfigSidebar";
 export { BlueprintNodeConfigSidebar } from "./BlueprintNodeConfigSidebar";
+export { BlueprintDslLocaleSync } from "./BlueprintDslLocaleSync";
 
 export type BluePrintReactRootProps = {
   style?: React.CSSProperties;
@@ -64,7 +68,6 @@ function BlueprintCanvas({
   selectedNodeId = null,
   executionOverlay = null,
   onSelectNode,
-  onAbortClock,
   libraryNameById,
   containerRef,
 }: BlueprintCanvasProps) {
@@ -217,7 +220,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)}
@@ -243,34 +254,36 @@ export const BluePrintReactRoot: FC<BluePrintReactRootProps> = ({
 
   return (
     <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,
-        }}
-      >
-        <BlueprintCanvasProvider
-          onSelectNode={onSelectNode}
-          onAbortClock={onAbortClock}
+      <BlueprintDslLocaleSync>
+        <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>
+      </BlueprintDslLocaleSync>
     </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

@@ -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 { 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}