@arronqzy/react-blueprint 1.0.11 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "",
   "files": [
     "index.ts",
@@ -18,10 +18,10 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.9",
-    "@arronqzy/i18n": "0.1.7",
+    "@arronqzy/blueprint-dsl": "1.0.10",
     "@arronqzy/react-rx-store": "1.1.5",
-    "@arronqzy/ui": "1.0.6"
+    "@arronqzy/ui": "1.0.6",
+    "@arronqzy/i18n": "0.1.8"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -35,8 +35,8 @@
     "typescript": "^5.5.4",
     "vite": "^5.1.4",
     "@arronqzy/tailwind": "1.0.2",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "keywords": [],
   "author": "",

package/src/BlueprintContextMenu.tsx

@@ -12,7 +12,7 @@ export type BlueprintContextMenuState =
       clientX: number;
       clientY: number;
       nodeId: string;
-      role: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "clock";
+      role: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "storage" | "clock";
     }
   | {
       kind: "edge";

package/src/BlueprintNodeConfigSidebar.tsx

@@ -21,6 +21,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 import { FetchNodeConfigPanel } from "./components/FetchNodeConfigPanel";
 import { ClockNodeConfigPanel } from "./components/ClockNodeConfigPanel";
 import { JsonNodeConfigPanel } from "./components/JsonNodeConfigPanel";
+import { StorageNodeConfigPanel } from "./components/StorageNodeConfigPanel";
 import { LogicNodeConfigPanel } from "./components/LogicNodeConfigPanel";
 import { ViewElementMultiSelect } from "./components/ViewElementMultiSelect";
 import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./components/ConfigHintIcon";
@@ -74,6 +75,7 @@ export type BlueprintNodeConfigSidebarProps = {
         | "lifecyclePhase"
         | "fetchConfig"
         | "jsonConfig"
+        | "storageConfig"
         | "logicConfig"
         | "clockConfig"
         | "eventConfig"
@@ -88,6 +90,7 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
   and: "blueprint.config.roleAnd",
   fetch: "blueprint.config.roleFetch",
   json: "blueprint.config.roleJson",
+  storage: "blueprint.config.roleStorage",
   logic: "blueprint.config.roleLogic",
   clock: "blueprint.config.roleClock",
   event: "blueprint.config.roleEvent",
@@ -195,6 +198,7 @@ export function BlueprintNodeConfigSidebar({
               <SelectItem value="lifecycle">{t("blueprint.config.configLifecycle")}</SelectItem>
               <SelectItem value="fetch">{t("blueprint.config.configFetch")}</SelectItem>
               <SelectItem value="json">{t("blueprint.config.configJson")}</SelectItem>
+              <SelectItem value="storage">{t("blueprint.config.configStorage")}</SelectItem>
               <SelectItem value="clock">{t("blueprint.config.configClock")}</SelectItem>
               <SelectItem value="event">{t("blueprint.config.configEvent")}</SelectItem>
               <SelectItem value="view">{t("blueprint.config.configView")}</SelectItem>
@@ -399,6 +403,16 @@ export function BlueprintNodeConfigSidebar({
           <JsonNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
         ) : null}
 
+        {configSource === "storage" ? (
+          <StorageNodeConfigPanel
+            node={node}
+            graphNodes={graphNodes}
+            graphEdges={graphEdges}
+            traceEntries={traceEntries}
+            onUpdateNode={onUpdateNode}
+          />
+        ) : null}
+
         {configSource === "clock" ? (
           <ClockNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
         ) : null}

package/src/blueprintNodeTypes.ts

@@ -5,6 +5,7 @@ import { AndFlowNode } from "./nodes/AndFlowNode";
 import { ClockFlowNode } from "./nodes/ClockFlowNode";
 import { FetchFlowNode } from "./nodes/FetchFlowNode";
 import { JsonFlowNode } from "./nodes/JsonFlowNode";
+import { StorageFlowNode } from "./nodes/StorageFlowNode";
 import { LifecycleFlowNode } from "./nodes/LifecycleFlowNode";
 import { EventFlowNode } from "./nodes/EventFlowNode";
 import { LogicFlowNode } from "./nodes/LogicFlowNode";
@@ -16,6 +17,7 @@ export const blueprintNodeTypes = {
   clock: ClockFlowNode,
   fetch: FetchFlowNode,
   json: JsonFlowNode,
+  storage: StorageFlowNode,
   logic: LogicFlowNode,
   lifecycle: LifecycleFlowNode,
   event: EventFlowNode,

package/src/components/StorageNodeConfigPanel.tsx

@@ -0,0 +1,240 @@
+import { useCallback, useMemo, useState, type ChangeEvent } from "react";
+import {
+  Checkbox,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import type {
+  ExecutionTraceEntry,
+  StorageKind,
+  StorageReadConfig,
+  StorageSetConfig,
+} from "@arronqzy/blueprint-dsl";
+import {
+  latestTraceOutputsByNode,
+  resolveFetchIncomingScope,
+  resolveFetchScopeAutocompleteRoot,
+  uniqueStorageKinds,
+} from "@arronqzy/blueprint-dsl";
+import { useI18n } from "@arronqzy/i18n/react";
+
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
+import { resolveNodeStorageConfig } from "../graph/document";
+import { ConfigFieldLabel, ConfigSectionTitle } from "./ConfigHintIcon";
+import { ScopeTemplateAutocompleteHost } from "./ScopeTemplateAutocompleteHost";
+
+export type StorageNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "storageConfig" | "configSource">>
+  ) => void;
+};
+
+function patchStorageConfig(
+  node: BlueprintGraphNode,
+  patch: {
+    read?: Partial<StorageReadConfig>;
+    set?: Partial<StorageSetConfig>;
+  }
+) {
+  const current = resolveNodeStorageConfig(node);
+  return {
+    storageConfig: {
+      read: { ...current.read, ...patch.read },
+      set: { ...current.set, ...patch.set },
+    },
+    configSource: "storage" as const,
+  };
+}
+
+export function StorageNodeConfigPanel({
+  node,
+  graphNodes = [],
+  graphEdges = [],
+  traceEntries = [],
+  onUpdateNode,
+}: StorageNodeConfigPanelProps) {
+  const { t } = useI18n();
+  const [formEl, setFormEl] = useState<HTMLDivElement | null>(null);
+  const storageConfig = resolveNodeStorageConfig(node);
+
+  const incomingScope = useMemo(() => {
+    const outputs = latestTraceOutputsByNode(traceEntries);
+    return resolveFetchIncomingScope({
+      fetchNodeId: node.id,
+      nodes: graphNodes,
+      edges: graphEdges,
+      getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+    });
+  }, [graphEdges, graphNodes, node.id, traceEntries]);
+  const autocompleteScope = resolveFetchScopeAutocompleteRoot(incomingScope);
+
+  const handleReadStorageChange = useCallback(
+    (value: string) => {
+      onUpdateNode(
+        node.id,
+        patchStorageConfig(node, {
+          read: { storage: value === "session" ? "session" : "local" },
+        })
+      );
+    },
+    [node, onUpdateNode]
+  );
+
+  const handleReadKeyChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onUpdateNode(
+        node.id,
+        patchStorageConfig(node, { read: { key: e.target.value } })
+      );
+    },
+    [node, onUpdateNode]
+  );
+
+  const handleSetStorageToggle = useCallback(
+    (kind: StorageKind, checked: boolean) => {
+      const next = new Set(storageConfig.set.storages);
+      if (checked) next.add(kind);
+      else next.delete(kind);
+      onUpdateNode(
+        node.id,
+        patchStorageConfig(node, {
+          set: { storages: uniqueStorageKinds([...next]) },
+        })
+      );
+    },
+    [node, onUpdateNode, storageConfig.set.storages]
+  );
+
+  const handleSetKeyChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onUpdateNode(
+        node.id,
+        patchStorageConfig(node, { set: { key: e.target.value } })
+      );
+    },
+    [node, onUpdateNode]
+  );
+
+  const handleSetValueChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onUpdateNode(
+        node.id,
+        patchStorageConfig(node, { set: { value: e.target.value } })
+      );
+    },
+    [node, onUpdateNode]
+  );
+
+  return (
+    <div
+      ref={setFormEl}
+      className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+    >
+      <ScopeTemplateAutocompleteHost
+        scope={autocompleteScope}
+        container={formEl}
+      />
+      <ConfigSectionTitle
+        title={t("blueprint.config.storageTitle")}
+        hint={t("blueprint.config.storageHint")}
+      />
+
+      <div className="space-y-2 rounded-md border border-border/60 bg-background/70 p-2">
+        <ConfigSectionTitle
+          title={t("blueprint.config.storageReadTitle")}
+          hint={t("blueprint.config.storageReadHint")}
+        />
+        <label className="block space-y-1">
+          <ConfigFieldLabel label={t("blueprint.config.storageTarget")} />
+          <Select
+            value={storageConfig.read.storage}
+            onValueChange={handleReadStorageChange}
+          >
+            <SelectTrigger className="h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="session">
+                {t("blueprint.config.storageSession")}
+              </SelectItem>
+              <SelectItem value="local">
+                {t("blueprint.config.storageLocal")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </label>
+        <label className="block space-y-1">
+          <ConfigFieldLabel label={t("blueprint.config.storageKey")} />
+          <Input
+            value={storageConfig.read.key}
+            onChange={handleReadKeyChange}
+            spellCheck={false}
+            className="h-8 font-mono text-[11px]"
+            placeholder="key"
+          />
+        </label>
+      </div>
+
+      <div className="space-y-2 rounded-md border border-border/60 bg-background/70 p-2">
+        <ConfigSectionTitle
+          title={t("blueprint.config.storageSetTitle")}
+          hint={t("blueprint.config.storageSetHint")}
+        />
+        <div className="space-y-1.5">
+          <ConfigFieldLabel label={t("blueprint.config.storageTarget")} />
+          {(["session", "local"] as const).map((kind) => {
+            const checked = storageConfig.set.storages.includes(kind);
+            return (
+              <label key={kind} className="flex items-center gap-2">
+                <Checkbox
+                  checked={checked}
+                  className="h-3.5 w-3.5 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                  onCheckedChange={(nextChecked: boolean | "indeterminate") => {
+                    handleSetStorageToggle(kind, nextChecked === true);
+                  }}
+                />
+                <span>
+                  {kind === "session"
+                    ? t("blueprint.config.storageSession")
+                    : t("blueprint.config.storageLocal")}
+                </span>
+              </label>
+            );
+          })}
+        </div>
+        <label className="block space-y-1">
+          <ConfigFieldLabel label={t("blueprint.config.storageKey")} />
+          <Input
+            value={storageConfig.set.key}
+            onChange={handleSetKeyChange}
+            spellCheck={false}
+            className="h-8 font-mono text-[11px]"
+            placeholder="key"
+          />
+        </label>
+        <label className="block space-y-1">
+          <ConfigFieldLabel
+            label={t("blueprint.config.storageValue")}
+            hint={t("blueprint.config.storageValueHint")}
+          />
+          <Input
+            value={storageConfig.set.value}
+            onChange={handleSetValueChange}
+            spellCheck={false}
+            className="h-8 font-mono text-[11px]"
+            placeholder="{scope.value}"
+          />
+        </label>
+      </div>
+    </div>
+  );
+}

package/src/graph/blueprint-graph.ts

@@ -8,6 +8,7 @@ import {
   resolveNodeEventConfig,
   resolveNodeFetchConfig,
   resolveNodeJsonConfig,
+  resolveNodeStorageConfig,
   resolveNodeLogicConfig,
   resolveRunnableNodeType,
   sanitizeBlueprintDocument,
@@ -197,6 +198,7 @@ export class BlueprintGraph {
         | "lifecyclePhase"
         | "fetchConfig"
         | "jsonConfig"
+        | "storageConfig"
         | "logicConfig"
         | "clockConfig"
         | "eventConfig"
@@ -241,6 +243,20 @@ export class BlueprintGraph {
             ...patch.jsonConfig,
           };
         }
+        if (patch.storageConfig) {
+          nextNode.storageConfig = {
+            ...resolveNodeStorageConfig(n),
+            ...patch.storageConfig,
+            read: {
+              ...resolveNodeStorageConfig(n).read,
+              ...patch.storageConfig.read,
+            },
+            set: {
+              ...resolveNodeStorageConfig(n).set,
+              ...patch.storageConfig.set,
+            },
+          };
+        }
         if (patch.logicConfig) {
           nextNode.logicConfig = {
             ...resolveNodeLogicConfig(n),

package/src/graph/document.ts

@@ -4,6 +4,7 @@ import type {
   JsonNodeConfig,
   LogicNodeConfig,
   PageLifecyclePhase,
+  StorageNodeConfig,
   ViewEventNodeConfig,
   ViewEventType,
 } from "@arronqzy/blueprint-dsl";
@@ -16,13 +17,16 @@ import {
   DEFAULT_JSON_NODE_CONFIG,
   DEFAULT_LOGIC_NODE_CONFIG,
   DEFAULT_LOGIC_NODE_TYPE,
+  DEFAULT_STORAGE_NODE_CONFIG,
   DEFAULT_VIEW_EVENT_NODE_CONFIG,
   EVENT_NODE_TYPE,
   FETCH_NODE_TYPE,
   JSON_NODE_TYPE,
   LIFECYCLE_NODE_TYPE,
   normalizeClockConfig,
+  normalizeStorageConfig,
   normalizeViewEventConfig,
+  STORAGE_NODE_TYPE,
   VIEW_NODE_TYPE,
 } from "@arronqzy/blueprint-dsl";
 
@@ -31,8 +35,9 @@ export type { JsonNodeConfig as BlueprintJsonConfig } from "@arronqzy/blueprint-
 export type { LogicNodeConfig as BlueprintLogicConfig } from "@arronqzy/blueprint-dsl";
 export type { ClockNodeConfig as BlueprintClockConfig } from "@arronqzy/blueprint-dsl";
 export type { ViewEventNodeConfig as BlueprintEventConfig } from "@arronqzy/blueprint-dsl";
+export type { StorageNodeConfig as BlueprintStorageConfig } from "@arronqzy/blueprint-dsl";
 
-export type BlueprintNodeRole = "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock" | "event";
+export type BlueprintNodeRole = "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "storage" | "clock" | "event";
 
 /** 决定右侧配置面板展示哪类配置 */
 export type BlueprintConfigSource =
@@ -43,6 +48,7 @@ export type BlueprintConfigSource =
   | "view"
   | "fetch"
   | "json"
+  | "storage"
   | "clock"
   | "event";
 
@@ -71,6 +77,8 @@ export type BlueprintGraphNode = {
   fetchConfig?: FetchRequestConfig;
   /** JSON 节点的 JSON 字符串配置 */
   jsonConfig?: JsonNodeConfig;
+  /** 存储节点的读写配置 */
+  storageConfig?: StorageNodeConfig;
   /** 逻辑节点的 JavaScript 脚本配置 */
   logicConfig?: LogicNodeConfig;
   /** 时钟节点的间隔与时间格式配置 */
@@ -108,8 +116,10 @@ export function resolveBlueprintConfigSource(
   if (node.role === "and") return "and";
   if (node.role === "fetch") return "fetch";
   if (node.role === "json") return "json";
+  if (node.role === "storage") return "storage";
   if (node.nodeType === FETCH_NODE_TYPE) return "fetch";
   if (node.nodeType === JSON_NODE_TYPE) return "json";
+  if (node.nodeType === STORAGE_NODE_TYPE) return "storage";
   if (node.nodeType === CLOCK_NODE_TYPE) return "clock";
   if (node.nodeType === EVENT_NODE_TYPE) return "event";
   if (node.nodeType === VIEW_NODE_TYPE) return "view";
@@ -187,6 +197,8 @@ export function resolveRunnableNodeType(
       return FETCH_NODE_TYPE;
     case "json":
       return JSON_NODE_TYPE;
+    case "storage":
+      return STORAGE_NODE_TYPE;
     case "logic":
       return DEFAULT_LOGIC_NODE_TYPE;
     default:
@@ -210,6 +222,7 @@ export const BLUEPRINT_CONFIG_TYPE_LABEL_KEYS: Record<
   event: "blueprint.node.typeEvent",
   fetch: "blueprint.node.typeFetch",
   json: "blueprint.node.typeJson",
+  storage: "blueprint.node.typeStorage",
   clock: "blueprint.node.typeClock",
 };
 
@@ -300,6 +313,15 @@ export function resolveNodeJsonConfig(
   };
 }
 
+export function resolveNodeStorageConfig(
+  node: Pick<BlueprintGraphNode, "storageConfig">
+): StorageNodeConfig {
+  return normalizeStorageConfig({
+    ...DEFAULT_STORAGE_NODE_CONFIG,
+    ...node.storageConfig,
+  });
+}
+
 export function resolveNodeLogicConfig(
   node: Pick<BlueprintGraphNode, "logicConfig">
 ): LogicNodeConfig {
@@ -399,6 +421,9 @@ export function sanitizeBlueprintDocument(
     if (next.role === "json") {
       return { ...next, configSource: "json" as const };
     }
+    if (next.role === "storage") {
+      return { ...next, configSource: "storage" as const };
+    }
     if (next.role === "and") {
       return { ...next, configSource: "and" as const };
     }
@@ -452,6 +477,7 @@ export function patchNodeConfigSource(
       logicConfig: undefined,
       clockConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -469,6 +495,7 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -486,6 +513,7 @@ export function patchNodeConfigSource(
       logicConfig: undefined,
       clockConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -503,6 +531,25 @@ export function patchNodeConfigSource(
       logicConfig: undefined,
       clockConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
+    };
+  }
+
+  if (configSource === "storage") {
+    return {
+      role: "storage",
+      nodeType: STORAGE_NODE_TYPE,
+      configSource: "storage",
+      storageConfig: resolveNodeStorageConfig(node),
+      lifecyclePhase: undefined,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: undefined,
+      clockConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -520,6 +567,7 @@ export function patchNodeConfigSource(
       logicConfig: undefined,
       clockConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -537,6 +585,7 @@ export function patchNodeConfigSource(
       logicConfig: resolveNodeLogicConfig(node),
       clockConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -554,6 +603,7 @@ export function patchNodeConfigSource(
       logicConfig: undefined,
       clockConfig: undefined,
       eventConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -569,6 +619,7 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: undefined,
       clockConfig: undefined,
+      storageConfig: undefined,
     };
   }
 
@@ -583,5 +634,6 @@ export function patchNodeConfigSource(
     logicConfig: undefined,
     clockConfig: undefined,
     eventConfig: undefined,
+    storageConfig: undefined,
   };
 }

package/src/graph/node-summary.ts

@@ -9,6 +9,7 @@ import {
   resolveNodeFetchConfig,
   resolveNodeJsonConfig,
   resolveNodeLogicConfig,
+  resolveNodeStorageConfig,
   resolveViewElementIds,
   resolveNodeEventConfig,
   getViewEventTypeLabel,
@@ -65,6 +66,29 @@ export function resolveBlueprintNodeSummary(
       if (!json) return t("blueprint.node.summaryEmptyJson");
       return truncate(json.replace(/\s+/g, " "), 44);
     }
+    case "storage": {
+      const storage = resolveNodeStorageConfig(data);
+      const setKey = storage.set.key.trim();
+      const readKey = storage.read.key.trim();
+      const hasSet = Boolean(setKey) && storage.set.storages.length > 0;
+      const hasRead = Boolean(readKey);
+      if (hasSet && hasRead) {
+        return truncate(
+          t("blueprint.node.summaryStorageSetRead", {
+            setKey,
+            readKey,
+          }),
+          44
+        );
+      }
+      if (hasSet) {
+        return truncate(t("blueprint.node.summaryStorageSet", { key: setKey }), 44);
+      }
+      if (hasRead) {
+        return truncate(t("blueprint.node.summaryStorageRead", { key: readKey }), 44);
+      }
+      return t("blueprint.node.summaryStorageUnset");
+    }
     case "logic": {
       const code = resolveNodeLogicConfig(data).sourceCode?.trim();
       if (!code) return t("blueprint.node.summaryNoScript");

package/src/graph/node-types.ts

@@ -4,6 +4,7 @@ export {
   DEFAULT_LOGIC_NODE_TYPE,
   LIFECYCLE_NODE_TYPE,
   JSON_NODE_TYPE,
+  STORAGE_NODE_TYPE,
   CLOCK_NODE_TYPE,
   AND_NODE_TYPE,
   EVENT_NODE_TYPE,

package/src/graph/react-flow-adapter.ts

@@ -19,6 +19,7 @@ export type BlueprintFlowNodeData = {
   lifecyclePhase?: BlueprintGraphNode["lifecyclePhase"];
   fetchConfig?: BlueprintGraphNode["fetchConfig"];
   jsonConfig?: BlueprintGraphNode["jsonConfig"];
+  storageConfig?: BlueprintGraphNode["storageConfig"];
   clockConfig?: BlueprintGraphNode["clockConfig"];
   eventConfig?: BlueprintGraphNode["eventConfig"];
   logicConfig?: BlueprintGraphNode["logicConfig"];
@@ -71,6 +72,8 @@ export function toReactFlowNodes(document: BlueprintDocument): ReactFlowNodeView
           ? "fetch"
           : n.role === "json"
             ? "json"
+            : n.role === "storage"
+              ? "storage"
             : n.role === "event"
               ? "event"
             : "logic",
@@ -93,6 +96,7 @@ export function toReactFlowNodes(document: BlueprintDocument): ReactFlowNodeView
       lifecyclePhase: n.lifecyclePhase,
       fetchConfig: n.fetchConfig,
       jsonConfig: n.jsonConfig,
+      storageConfig: n.storageConfig,
       clockConfig: n.clockConfig,
       eventConfig: n.eventConfig,
       logicConfig: n.logicConfig,

package/src/graph/sync-nodes.ts

@@ -46,6 +46,10 @@ export function nodeStructureSignature(
     viewElementIds?: string[];
     fetchConfig?: { url?: string; method?: string; apiBaseUrl?: string; swaggerDocsUrl?: string };
     jsonConfig?: { jsonString?: string };
+    storageConfig?: {
+      read?: { storage?: string; key?: string };
+      set?: { storages?: string[]; key?: string; value?: string };
+    };
     logicConfig?: { sourceCode?: string };
     clockConfig?: { intervalSeconds?: number; timeFormat?: string; outputCount?: number; emitImmediately?: boolean };
     eventConfig?: { eventTypes?: string[] };
@@ -54,7 +58,7 @@ export function nodeStructureSignature(
   return nodes
     .map(
       (n) =>
-        `${n.id}:${n.role}:${n.label}:${n.configSource ?? ""}:${n.lifecyclePhase ?? ""}:${n.libraryBlueprintId ?? ""}:${n.nodeType ?? ""}:${(n.viewElementIds ?? (n.viewElementId ? [n.viewElementId] : [])).join(",")}:${n.fetchConfig?.url ?? ""}:${n.fetchConfig?.method ?? ""}:${n.fetchConfig?.apiBaseUrl ?? ""}:${n.fetchConfig?.swaggerDocsUrl ?? ""}:${n.jsonConfig?.jsonString ?? ""}:${n.logicConfig?.sourceCode ?? ""}:${n.clockConfig?.intervalSeconds ?? ""}:${n.clockConfig?.timeFormat ?? ""}:${n.clockConfig?.outputCount ?? ""}:${n.clockConfig?.emitImmediately ?? ""}:${(n.eventConfig?.eventTypes ?? []).join(",")}`
+        `${n.id}:${n.role}:${n.label}:${n.configSource ?? ""}:${n.lifecyclePhase ?? ""}:${n.libraryBlueprintId ?? ""}:${n.nodeType ?? ""}:${(n.viewElementIds ?? (n.viewElementId ? [n.viewElementId] : [])).join(",")}:${n.fetchConfig?.url ?? ""}:${n.fetchConfig?.method ?? ""}:${n.fetchConfig?.apiBaseUrl ?? ""}:${n.fetchConfig?.swaggerDocsUrl ?? ""}:${n.jsonConfig?.jsonString ?? ""}:${n.storageConfig?.read?.storage ?? ""}:${n.storageConfig?.read?.key ?? ""}:${(n.storageConfig?.set?.storages ?? []).join(",")}:${n.storageConfig?.set?.key ?? ""}:${n.storageConfig?.set?.value ?? ""}:${n.logicConfig?.sourceCode ?? ""}:${n.clockConfig?.intervalSeconds ?? ""}:${n.clockConfig?.timeFormat ?? ""}:${n.clockConfig?.outputCount ?? ""}:${n.clockConfig?.emitImmediately ?? ""}:${(n.eventConfig?.eventTypes ?? []).join(",")}`
     )
     .sort()
     .join("|");

package/src/nodes/BlueprintNodeCard.tsx

@@ -9,7 +9,7 @@ export type BlueprintNodeCardProps = {
   subtitle?: string;
   /** 调试执行进度（如时钟 2/3） */
   progressLabel?: string;
-  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "clock";
+  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "storage" | "clock";
   selected?: boolean;
   hideLeadingDot?: boolean;
   onSelect?: (nodeId: string) => void;
@@ -51,6 +51,11 @@ const variantStyle = {
     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",

package/src/nodes/StorageFlowNode.tsx

@@ -0,0 +1,28 @@
+import { useI18n } from "@arronqzy/i18n/react";
+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 StorageFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+
+  return (
+    <BlueprintNodeShell
+      nodeId={id}
+      label={nodeData.label}
+      meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+      subtitle={resolveBlueprintNodeSummary(nodeData, t)}
+      variant="storage"
+      selected={Boolean(nodeData.isSelected)}
+      executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+      onSelect={onSelect}
+    />
+  );
+}

package/src/runtime/document-to-runnable-graph.ts

@@ -1,10 +1,12 @@
 import {
   FETCH_NODE_TYPE,
+  STORAGE_NODE_TYPE,
   type RunnableGraph,
 } from "@arronqzy/blueprint-dsl";
 
 import {
   resolveNodeFetchConfig,
+  resolveNodeStorageConfig,
   resolveRunnableNodeType,
   resolveViewElementIds,
   type BlueprintDocument,
@@ -34,6 +36,10 @@ export function documentToRunnableGraph(
             ? resolveNodeFetchConfig(node)
             : node.fetchConfig,
         jsonConfig: node.jsonConfig,
+        storageConfig:
+          nodeType === STORAGE_NODE_TYPE
+            ? resolveNodeStorageConfig(node)
+            : node.storageConfig,
         logicConfig: node.logicConfig,
         clockConfig: node.clockConfig,
         eventConfig: node.eventConfig,