@arronqzy/react-blueprint 1.0.19 → 1.0.21

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}

package/src/nodes/BlueprintNodeCard.tsx

@@ -1,5 +1,6 @@
 import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { cn } from "@arronqzy/ui";
+import type { ReactNode } from "react";
 
 export type BlueprintNodeCardProps = {
   nodeId: string;
@@ -9,78 +10,130 @@ export type BlueprintNodeCardProps = {
   subtitle?: string;
   /** 调试执行进度（如时钟 2/3） */
   progressLabel?: string;
-  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "storage" | "clock";
+  variant?: "blueprint" | "view" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "storage" | "clock";
   selected?: boolean;
   hideLeadingDot?: boolean;
   onSelect?: (nodeId: string) => void;
 };
 
-const variantStyle = {
-  blueprint: {
-    accent: "border-l-primary",
-    badge: "bg-primary/10 text-primary",
-    dot: "bg-primary",
-  },
-  logic: {
-    accent: "border-l-sky-500 dark:border-l-sky-400",
-    badge: "bg-sky-500/10 text-sky-700 dark:text-sky-300",
-    dot: "bg-sky-500",
-  },
-  and: {
-    accent: "border-l-indigo-500 dark:border-l-indigo-400",
-    badge: "bg-indigo-500/10 text-indigo-700 dark:text-indigo-300",
-    dot: "bg-indigo-500",
-  },
-  lifecycle: {
-    accent: "border-l-amber-500 dark:border-l-amber-400",
-    badge: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
-    dot: "bg-amber-500",
-  },
-  event: {
-    accent: "border-l-fuchsia-500 dark:border-l-fuchsia-400",
-    badge: "bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300",
-    dot: "bg-fuchsia-500",
-  },
-  fetch: {
-    accent: "border-l-violet-500 dark:border-l-violet-400",
-    badge: "bg-violet-500/10 text-violet-700 dark:text-violet-300",
-    dot: "bg-violet-500",
-  },
-  json: {
-    accent: "border-l-teal-500 dark:border-l-teal-400",
-    badge: "bg-teal-500/10 text-teal-700 dark:text-teal-300",
-    dot: "bg-teal-500",
-  },
-  storage: {
-    accent: "border-l-emerald-500 dark:border-l-emerald-400",
-    badge: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
-    dot: "bg-emerald-500",
-  },
-  clock: {
-    accent: "border-l-rose-500 dark:border-l-rose-400",
-    badge: "bg-rose-500/10 text-rose-700 dark:text-rose-300",
-    dot: "bg-rose-500",
-  },
-} as const;
-
-function NodeGrip() {
+function IconSvg({ children }: { children: ReactNode }) {
   return (
-    <div
-      className="flex shrink-0 flex-col gap-[3px] opacity-35"
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       aria-hidden="true"
     >
-      <span className="flex gap-[3px]">
-        <span className="h-[3px] w-[3px] rounded-full bg-current" />
-        <span className="h-[3px] w-[3px] rounded-full bg-current" />
-      </span>
-      <span className="flex gap-[3px]">
-        <span className="h-[3px] w-[3px] rounded-full bg-current" />
-        <span className="h-[3px] w-[3px] rounded-full bg-current" />
-      </span>
-    </div>
+      {children}
+    </svg>
   );
 }
 
+function VariantIcon({
+  variant,
+}: {
+  variant: NonNullable<BlueprintNodeCardProps["variant"]>;
+}) {
+  switch (variant) {
+    case "logic":
+      return (
+        <IconSvg>
+          <path d="M6 4v6a4 4 0 0 0 4 4h4" />
+          <path d="M14 14v6" />
+          <circle cx="6" cy="4" r="1.5" fill="currentColor" stroke="none" />
+          <circle cx="14" cy="20" r="1.5" fill="currentColor" stroke="none" />
+          <circle cx="18" cy="14" r="1.5" fill="currentColor" stroke="none" />
+        </IconSvg>
+      );
+    case "and":
+      return (
+        <IconSvg>
+          <path d="M8 6v12" />
+          <path d="M8 12h8" />
+          <path d="M16 6v12" />
+        </IconSvg>
+      );
+    case "lifecycle":
+      return (
+        <IconSvg>
+          <circle cx="12" cy="12" r="7" />
+          <path d="M12 8v4l2.5 1.5" />
+        </IconSvg>
+      );
+    case "event":
+      return (
+        <IconSvg>
+          <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" />
+        </IconSvg>
+      );
+    case "fetch":
+      return (
+        <IconSvg>
+          <path d="M12 3v12" />
+          <path d="m7 10 5 5 5-5" />
+          <path d="M5 19h14" />
+        </IconSvg>
+      );
+    case "json":
+      return (
+        <IconSvg>
+          <path d="M8 4c-2 0-3 1.5-3 4s1 4 3 4" />
+          <path d="M8 12c-2 0-3 1.5-3 4s1 4 3 4" />
+          <path d="M16 4c2 0 3 1.5 3 4s-1 4-3 4" />
+          <path d="M16 12c2 0 3 1.5 3 4s-1 4-3 4" />
+        </IconSvg>
+      );
+    case "storage":
+      return (
+        <IconSvg>
+          <ellipse cx="12" cy="6" rx="7" ry="3" />
+          <path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6" />
+          <path d="M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6" />
+        </IconSvg>
+      );
+    case "clock":
+      return (
+        <IconSvg>
+          <circle cx="12" cy="12" r="8" />
+          <path d="M12 8v4.5L15 15" />
+        </IconSvg>
+      );
+    case "blueprint":
+      return (
+        <IconSvg>
+          <circle cx="7" cy="7" r="2.5" />
+          <circle cx="17" cy="7" r="2.5" />
+          <circle cx="12" cy="17" r="2.5" />
+          <path d="M9.2 8.2 14.8 8.2" />
+          <path d="M8.2 9.2 11 14.8" />
+          <path d="M15.8 9.2 13 14.8" />
+        </IconSvg>
+      );
+    case "view":
+      return (
+        <IconSvg>
+          <rect x="3" y="5" width="18" height="14" rx="2" />
+          <path d="M3 9h18" />
+          <path d="M8 14h4" />
+        </IconSvg>
+      );
+    default:
+      return (
+        <IconSvg>
+          <circle cx="7" cy="7" r="2.5" />
+          <circle cx="17" cy="7" r="2.5" />
+          <circle cx="12" cy="17" r="2.5" />
+          <path d="M9.2 8.2 14.8 8.2" />
+          <path d="M8.2 9.2 11 14.8" />
+          <path d="M15.8 9.2 13 14.8" />
+        </IconSvg>
+      );
+  }
+}
+
 export function BlueprintNodeCard({
   nodeId,
   label,
@@ -89,81 +142,42 @@ export function BlueprintNodeCard({
   progressLabel,
   variant = "blueprint",
   selected = false,
-  hideLeadingDot = false,
   onSelect,
 }: BlueprintNodeCardProps) {
   const { t } = useI18n();
-  const v = variantStyle[variant];
+  const showMeta = Boolean(meta && meta !== label);
 
   return (
     <div
       data-blueprint-node-card
       className={cn(
-        "bp-node-card w-[168px] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm",
-        "transition-[box-shadow,border-color] duration-150",
-        hideLeadingDot
-          ? cn(
-              "border-t-[3px]",
-              variant === "event"
-                ? "border-t-fuchsia-500 dark:border-t-fuchsia-400"
-                : "border-t-amber-500 dark:border-t-amber-400"
-            )
-          : cn("border-l-[3px]", v.accent),
-        selected &&
-          "border-primary/50 shadow-[0_0_0_1px_hsl(var(--primary)/0.35),0_4px_12px_hsl(var(--primary)/0.12)]"
+        "bp-node-card bp-flow-drag-handle",
+        selected && "bp-node-card--selected"
       )}
+      title={t("blueprint.node.dragToMove")}
     >
-      <div
-        className={cn(
-          "bp-flow-drag-handle flex cursor-grab items-center gap-2 border-b border-border/50 px-2 py-1.5",
-          "bg-muted/25 text-muted-foreground active:cursor-grabbing"
-        )}
-        title={t("blueprint.node.dragToMove")}
-      >
-        <NodeGrip />
-        {meta ? (
-          <span
-            className={cn(
-              "min-w-0 flex-1 truncate rounded px-1.5 py-0.5 text-[10px] font-medium leading-none tracking-wide",
-              v.badge
-            )}
-            title={meta}
-          >
-            {meta}
-          </span>
-        ) : null}
-      </div>
-
       <button
         type="button"
-        className={cn(
-          "nodrag flex w-full text-left outline-none transition-colors hover:bg-accent/30",
-          "focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset",
-          hideLeadingDot
-            ? cn("px-2.5 py-2", subtitle ? "items-start" : "items-center")
-            : "items-start gap-2 px-2.5 py-2"
-        )}
+        className="bp-node-card__body"
         onClick={(e) => {
           e.stopPropagation();
           onSelect?.(nodeId);
         }}
       >
-        {!hideLeadingDot ? (
-          <span
-            className={cn("mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full", v.dot)}
-            aria-hidden="true"
-          />
-        ) : null}
-        <div className="min-w-0 flex-1">
-          <div className="flex items-start gap-1.5">
-            <div className="min-w-0 flex-1 truncate text-[13px] font-medium leading-snug text-foreground">
-              {label}
-            </div>
+        <span
+          className={cn("bp-node-icon", `bp-node-icon--${variant}`)}
+          aria-hidden="true"
+        >
+          <VariantIcon variant={variant} />
+        </span>
+        <div className="bp-node-card__content">
+          <div className="bp-node-card__title-row">
+            <div className="bp-node-card__title">{label}</div>
             {progressLabel ? (
               <span
                 className={cn(
-                  "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold leading-none",
-                  v.badge
+                  "bp-node-card__badge",
+                  `bp-node-card__badge--${variant}`
                 )}
                 title={t("blueprint.node.signalSentCount")}
               >
@@ -171,11 +185,13 @@ export function BlueprintNodeCard({
               </span>
             ) : null}
           </div>
+          {showMeta ? (
+            <div className="bp-node-card__meta" title={meta}>
+              {meta}
+            </div>
+          ) : null}
           {subtitle ? (
-            <div
-              className="mt-0.5 truncate font-mono text-[10px] leading-tight text-muted-foreground"
-              title={subtitle}
-            >
+            <div className="bp-node-card__subtitle" title={subtitle}>
               {subtitle}
             </div>
           ) : null}

package/src/nodes/BlueprintNodeShell.tsx

@@ -27,6 +27,7 @@ export function BlueprintNodeShell({
     <div
       className={cn(
         "bp-node",
+        selected && "bp-node--selected",
         executionTone === "success" && "bp-node--execution-true",
         executionTone === "error" && "bp-node--execution-false"
       )}

package/src/nodes/LifecycleFlowNode.tsx

@@ -20,6 +20,7 @@ export function LifecycleFlowNode({ id, data }: NodeProps) {
     <div
       className={cn(
         "bp-node bp-node--lifecycle",
+        nodeData.isSelected && "bp-node--selected",
         executionTone === "success" && "bp-node--execution-true",
         executionTone === "error" && "bp-node--execution-false"
       )}