@arronqzy/vue-blueprint 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Vue 3 blueprint editor for Abuilder (Vue Flow + Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -19,9 +19,9 @@
     "ant-design-vue": "^4.2.6",
     "dayjs": "^1.11.13",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.8",
-    "@arronqzy/i18n": "0.1.7",
-    "@arronqzy/vue-rx-store": "0.1.3"
+    "@arronqzy/i18n": "0.1.8",
+    "@arronqzy/vue-rx-store": "0.1.3",
+    "@arronqzy/blueprint-dsl": "1.0.10"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/BlueprintNodeConfigSidebar.vue

@@ -14,6 +14,7 @@ import {
 import FetchNodeConfigPanel from "./components/FetchNodeConfigPanel.vue";
 import ClockNodeConfigPanel from "./components/ClockNodeConfigPanel.vue";
 import JsonNodeConfigPanel from "./components/JsonNodeConfigPanel.vue";
+import StorageNodeConfigPanel from "./components/StorageNodeConfigPanel.vue";
 import LogicNodeConfigPanel from "./components/LogicNodeConfigPanel.vue";
 import ViewElementMultiSelect from "./components/ViewElementMultiSelect.vue";
 import ConfigHintIcon from "./components/ConfigHintIcon.vue";
@@ -69,6 +70,7 @@ export type BlueprintNodeConfigSidebarProps = {
         | "lifecyclePhase"
         | "fetchConfig"
         | "jsonConfig"
+        | "storageConfig"
         | "logicConfig"
         | "clockConfig"
         | "eventConfig"
@@ -102,6 +104,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",
@@ -201,6 +204,7 @@ function toggleEventType(eventType: ViewEventType, checked: boolean) {
           <Select.Option value="lifecycle">{{ t("blueprint.config.configLifecycle") }}</Select.Option>
           <Select.Option value="fetch">{{ t("blueprint.config.configFetch") }}</Select.Option>
           <Select.Option value="json">{{ t("blueprint.config.configJson") }}</Select.Option>
+          <Select.Option value="storage">{{ t("blueprint.config.configStorage") }}</Select.Option>
           <Select.Option value="clock">{{ t("blueprint.config.configClock") }}</Select.Option>
           <Select.Option value="event">{{ t("blueprint.config.configEvent") }}</Select.Option>
           <Select.Option value="view">{{ t("blueprint.config.configView") }}</Select.Option>
@@ -381,6 +385,14 @@ function toggleEventType(eventType: ViewEventType, checked: boolean) {
         :node="node"
         :on-update-node="onUpdateNode"
       />
+      <StorageNodeConfigPanel
+        v-if="configSource === 'storage'"
+        :node="node"
+        :graph-nodes="graphNodes"
+        :graph-edges="graphEdges"
+        :trace-entries="traceEntries"
+        :on-update-node="onUpdateNode"
+      />
       <ClockNodeConfigPanel
         v-if="configSource === 'clock'"
         :node="node"

package/src/blueprintNodeTypes.ts

@@ -5,6 +5,7 @@ import BlueprintFlowNode from "./nodes/BlueprintFlowNode.vue";
 import ClockFlowNode from "./nodes/ClockFlowNode.vue";
 import FetchFlowNode from "./nodes/FetchFlowNode.vue";
 import JsonFlowNode from "./nodes/JsonFlowNode.vue";
+import StorageFlowNode from "./nodes/StorageFlowNode.vue";
 import LifecycleFlowNode from "./nodes/LifecycleFlowNode.vue";
 import EventFlowNode from "./nodes/EventFlowNode.vue";
 import LogicFlowNode from "./nodes/LogicFlowNode.vue";
@@ -16,6 +17,7 @@ export const blueprintNodeTypes: Record<string, Component> = {
   clock: markRaw(ClockFlowNode),
   fetch: markRaw(FetchFlowNode),
   json: markRaw(JsonFlowNode),
+  storage: markRaw(StorageFlowNode),
   logic: markRaw(LogicFlowNode),
   lifecycle: markRaw(LifecycleFlowNode),
   event: markRaw(EventFlowNode),

package/src/components/BlueprintContextMenu.vue

@@ -14,7 +14,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/components/StorageNodeConfigPanel.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import { computed, ref } from "vue";
+import { Checkbox, Input, Select } from "ant-design-vue";
+import type {
+  ExecutionTraceEntry,
+  StorageKind,
+  StorageReadConfig,
+  StorageSetConfig,
+} from "@arronqzy/blueprint-dsl";
+import {
+  latestTraceOutputsByNode,
+  resolveFetchIncomingScope,
+  resolveFetchScopeAutocompleteRoot,
+  uniqueStorageKinds,
+} from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
+import { resolveNodeStorageConfig } from "../graph/document";
+import ConfigHintIcon from "./ConfigHintIcon.vue";
+import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
+
+const { t } = useI18n();
+
+export type StorageNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "storageConfig" | "configSource">>
+  ) => void;
+};
+
+const props = withDefaults(defineProps<StorageNodeConfigPanelProps>(), {
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
+});
+
+const formRef = ref<HTMLDivElement | null>(null);
+const storageConfig = computed(() => resolveNodeStorageConfig(props.node));
+const incomingScope = computed(() => {
+  const outputs = latestTraceOutputsByNode(props.traceEntries);
+  return resolveFetchIncomingScope({
+    fetchNodeId: props.node.id,
+    nodes: props.graphNodes,
+    edges: props.graphEdges,
+    getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+  });
+});
+const autocompleteScope = computed(() =>
+  resolveFetchScopeAutocompleteRoot(incomingScope.value)
+);
+
+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,
+  };
+}
+
+function handleReadStorageChange(value: string) {
+  props.onUpdateNode(
+    props.node.id,
+    patchStorageConfig(props.node, {
+      read: { storage: value === "session" ? "session" : "local" },
+    })
+  );
+}
+
+function handleReadKeyChange(value: string) {
+  props.onUpdateNode(
+    props.node.id,
+    patchStorageConfig(props.node, { read: { key: String(value ?? "") } })
+  );
+}
+
+function handleSetStorageToggle(kind: StorageKind, checked: boolean) {
+  const next = new Set(storageConfig.value.set.storages);
+  if (checked) next.add(kind);
+  else next.delete(kind);
+  props.onUpdateNode(
+    props.node.id,
+    patchStorageConfig(props.node, {
+      set: { storages: uniqueStorageKinds([...next]) },
+    })
+  );
+}
+
+function handleSetKeyChange(value: string) {
+  props.onUpdateNode(
+    props.node.id,
+    patchStorageConfig(props.node, { set: { key: String(value ?? "") } })
+  );
+}
+
+function handleSetValueChange(value: string) {
+  props.onUpdateNode(
+    props.node.id,
+    patchStorageConfig(props.node, { set: { value: String(value ?? "") } })
+  );
+}
+</script>
+
+<template>
+  <div
+    ref="formRef"
+    class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+  >
+    <ScopeTemplateAutocompleteHost :scope="autocompleteScope" :container-ref="formRef" />
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.storageTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.storageTitle')">
+        {{ t("blueprint.config.storageHint") }}
+      </ConfigHintIcon>
+    </div>
+
+    <div class="space-y-2 rounded-md border border-border/60 bg-background/70 p-2">
+      <div class="flex items-center gap-1.5">
+        <div class="font-medium text-foreground">{{ t("blueprint.config.storageReadTitle") }}</div>
+        <ConfigHintIcon :label="t('blueprint.config.storageReadTitle')">
+          {{ t("blueprint.config.storageReadHint") }}
+        </ConfigHintIcon>
+      </div>
+      <label class="block space-y-1">
+        <span class="text-muted-foreground">{{ t("blueprint.config.storageTarget") }}</span>
+        <Select
+          size="small"
+          class="w-full"
+          :value="storageConfig.read.storage"
+          @change="(v) => handleReadStorageChange(String(v))"
+        >
+          <Select.Option value="session">{{ t("blueprint.config.storageSession") }}</Select.Option>
+          <Select.Option value="local">{{ t("blueprint.config.storageLocal") }}</Select.Option>
+        </Select>
+      </label>
+      <label class="block space-y-1">
+        <span class="text-muted-foreground">{{ t("blueprint.config.storageKey") }}</span>
+        <Input
+          size="small"
+          :value="storageConfig.read.key"
+          spellcheck="false"
+          class="font-mono text-[11px]"
+          placeholder="key"
+          @update:value="(v) => handleReadKeyChange(String(v ?? ''))"
+        />
+      </label>
+    </div>
+
+    <div class="space-y-2 rounded-md border border-border/60 bg-background/70 p-2">
+      <div class="flex items-center gap-1.5">
+        <div class="font-medium text-foreground">{{ t("blueprint.config.storageSetTitle") }}</div>
+        <ConfigHintIcon :label="t('blueprint.config.storageSetTitle')">
+          {{ t("blueprint.config.storageSetHint") }}
+        </ConfigHintIcon>
+      </div>
+      <div class="space-y-1.5">
+        <span class="text-muted-foreground">{{ t("blueprint.config.storageTarget") }}</span>
+        <label class="flex items-center gap-2">
+          <Checkbox
+            :checked="storageConfig.set.storages.includes('session')"
+            class="mt-0.5"
+            @update:checked="(v) => handleSetStorageToggle('session', Boolean(v))"
+          />
+          <span>{{ t("blueprint.config.storageSession") }}</span>
+        </label>
+        <label class="flex items-center gap-2">
+          <Checkbox
+            :checked="storageConfig.set.storages.includes('local')"
+            class="mt-0.5"
+            @update:checked="(v) => handleSetStorageToggle('local', Boolean(v))"
+          />
+          <span>{{ t("blueprint.config.storageLocal") }}</span>
+        </label>
+      </div>
+      <label class="block space-y-1">
+        <span class="text-muted-foreground">{{ t("blueprint.config.storageKey") }}</span>
+        <Input
+          size="small"
+          :value="storageConfig.set.key"
+          spellcheck="false"
+          class="font-mono text-[11px]"
+          placeholder="key"
+          @update:value="(v) => handleSetKeyChange(String(v ?? ''))"
+        />
+      </label>
+      <label class="block space-y-1">
+        <span class="inline-flex items-center gap-1 text-muted-foreground">
+          {{ t("blueprint.config.storageValue") }}
+          <ConfigHintIcon :label="t('blueprint.config.storageValue')">
+            {{ t("blueprint.config.storageValueHint") }}
+          </ConfigHintIcon>
+        </span>
+        <Input
+          size="small"
+          :value="storageConfig.set.value"
+          spellcheck="false"
+          class="font-mono text-[11px]"
+          placeholder="{scope.value}"
+          @update:value="(v) => handleSetValueChange(String(v ?? ''))"
+        />
+      </label>
+    </div>
+  </div>
+</template>

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/sync-nodes.ts

@@ -50,6 +50,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[] };
@@ -58,7 +62,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/graph/vue-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 toVueFlowNodes(document: BlueprintDocument): VueFlowNodeView[] {
           ? "fetch"
           : n.role === "json"
             ? "json"
+            : n.role === "storage"
+              ? "storage"
             : n.role === "event"
               ? "event"
             : "logic",
@@ -93,6 +96,7 @@ export function toVueFlowNodes(document: BlueprintDocument): VueFlowNodeView[] {
       lifecyclePhase: n.lifecyclePhase,
       fetchConfig: n.fetchConfig,
       jsonConfig: n.jsonConfig,
+      storageConfig: n.storageConfig,
       clockConfig: n.clockConfig,
       eventConfig: n.eventConfig,
       logicConfig: n.logicConfig,

package/src/nodes/BlueprintNodeCard.vue

@@ -10,7 +10,7 @@ export type BlueprintNodeCardProps = {
   meta?: string;
   subtitle?: string;
   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;
 };
@@ -61,6 +61,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.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import type { NodeProps } from "@vue-flow/core";
+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.vue";
+
+const { t } = useI18n();
+
+const props = defineProps<NodeProps<BlueprintFlowNodeData>>();
+const onSelect = useBlueprintNodeSelect();
+const nodeData = props.data;
+</script>
+
+<template>
+  <BlueprintNodeShell
+    :node-id="props.id"
+    :label="nodeData.label"
+    :meta="resolveBlueprintNodeTypeLabel(nodeData, t)"
+    :subtitle="resolveBlueprintNodeSummary(nodeData, t)"
+    variant="storage"
+    :selected="Boolean(nodeData.isSelected)"
+    :execution-tone="resolveBlueprintNodeExecutionTone(nodeData)"
+    @select="onSelect"
+  />
+</template>

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,