@arronqzy/react-blueprint 1.0.10 → 1.0.12

package/dist/blueprint.css

@@ -0,0 +1,327 @@
+/* 画布：与 panel / next-themes 主题一致 */
+.bp-canvas,
+[data-workspace-region="blueprint"] .bp-canvas {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.bp-canvas .react-flow__pane,
+.bp-flow.react-flow__pane {
+  cursor: default;
+}
+
+.bp-canvas .react-flow,
+.bp-flow.react-flow,
+[data-workspace-region="blueprint"] .react-flow {
+  --xy-background-color: transparent;
+  --xy-edge-stroke: #2563eb;
+  --xy-edge-stroke-width: 2.5;
+  --xy-edge-stroke-selected: #1d4ed8;
+  --xy-connectionline-stroke: #2563eb;
+  --xy-connectionline-stroke-width: 2.5;
+  --xy-handle-background-color: hsl(var(--primary));
+  --xy-handle-border-color: hsl(var(--background));
+  background-color: transparent;
+}
+
+/*
+ * 全局 reset（apps/web style.css、Tailwind preflight）会给 svg 设 max-width:100%，
+ * 导致 React Flow 边线 SVG 坐标系被压扁；连线预览单独有 z-index:1001 所以能看见。
+ */
+.bp-canvas svg.react-flow__connectionline,
+.bp-canvas .react-flow__edges svg,
+.bp-flow svg.react-flow__connectionline,
+.bp-flow .react-flow__edges svg,
+[data-workspace-region="blueprint"] svg.react-flow__connectionline,
+[data-workspace-region="blueprint"] .react-flow__edges svg {
+  display: block;
+  max-width: none !important;
+  max-height: none !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/*
+ * 边层必须在节点之上：.react-flow__edges 与 .react-flow__nodes 为兄弟节点，
+ * 默认 DOM 顺序下节点后渲染会盖住边；连接线因有 z-index:1001 不受影响。
+ */
+.bp-canvas .react-flow__edges,
+.bp-flow .react-flow__edges,
+[data-workspace-region="blueprint"] .react-flow__edges {
+  z-index: 1000 !important;
+  pointer-events: none;
+}
+
+.bp-canvas .react-flow__nodes,
+.bp-flow .react-flow__nodes,
+[data-workspace-region="blueprint"] .react-flow__nodes {
+  z-index: 0 !important;
+}
+
+.bp-canvas .react-flow__edge,
+.bp-flow .react-flow__edge,
+[data-workspace-region="blueprint"] .react-flow__edge {
+  pointer-events: visibleStroke;
+}
+
+/* 持久边 path：强制描边（覆盖 currentColor / 主题色） */
+.bp-canvas .react-flow__edges path.react-flow__edge-path,
+.bp-canvas .react-flow__edges path.bp-edge-visible,
+.bp-flow .react-flow__edges path.react-flow__edge-path,
+.bp-flow .react-flow__edges path.bp-edge-visible,
+[data-workspace-region="blueprint"] .react-flow__edges path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edges path.bp-edge-visible {
+  fill: none !important;
+  stroke: #2563eb !important;
+  stroke-width: 2.5px !important;
+  opacity: 1 !important;
+}
+
+.bp-canvas .react-flow__edge.selected path.react-flow__edge-path,
+.bp-flow .react-flow__edge.selected path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.selected path.react-flow__edge-path {
+  stroke: #1d4ed8 !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path {
+  stroke: #16a34a !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path {
+  stroke: #dc2626 !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline {
+  stroke: #16a34a;
+  fill: #16a34a;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline {
+  stroke: #dc2626;
+  fill: #dc2626;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path {
+  stroke: #2563eb !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+.bp-canvas .react-flow__arrowhead polyline,
+.bp-flow .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__arrowhead polyline {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+.bp-canvas .react-flow__connection-path,
+.bp-flow .react-flow__connection-path,
+[data-workspace-region="blueprint"] .react-flow__connection-path {
+  fill: none !important;
+  stroke: #2563eb !important;
+  stroke-width: 2.5px !important;
+}
+
+.bp-canvas .react-flow__edge-interaction,
+.bp-flow .react-flow__edge-interaction,
+[data-workspace-region="blueprint"] .react-flow__edge-interaction {
+  pointer-events: stroke;
+  stroke: transparent !important;
+  stroke-opacity: 0 !important;
+  stroke-width: 18px !important;
+}
+
+.bp-canvas .react-flow__edge.selected .react-flow__edge-interaction,
+.bp-flow .react-flow__edge.selected .react-flow__edge-interaction,
+[data-workspace-region="blueprint"] .react-flow__edge.selected .react-flow__edge-interaction {
+  pointer-events: stroke;
+}
+
+/* 节点容器：去掉默认包裹样式 */
+.bp-canvas .react-flow__node,
+.bp-flow .react-flow__node,
+[data-workspace-region="blueprint"] .react-flow__node {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
+/* 连接点：禁止 transform，避免覆盖 React Flow 的 translate(-50%, -50%) 定位 */
+.bp-canvas .react-flow__handle.bp-flow-handle,
+.bp-flow .react-flow__handle.bp-flow-handle,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle {
+  z-index: 3;
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+  min-height: 10px;
+  border: 2px solid hsl(var(--background)) !important;
+  border-radius: 9999px;
+  background-color: hsl(var(--foreground) / 0.42) !important;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle:hover,
+.bp-flow .react-flow__handle.bp-flow-handle:hover,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle:hover {
+  background-color: hsl(var(--primary)) !important;
+  border-color: hsl(var(--background)) !important;
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.28);
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--target,
+.bp-flow .react-flow__handle.bp-flow-handle--target,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--target {
+  background-color: hsl(var(--foreground) / 0.48) !important;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--source,
+.bp-flow .react-flow__handle.bp-flow-handle--source,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--source {
+  background-color: hsl(var(--primary) / 0.72) !important;
+}
+
+.bp-node--selected .bp-flow-handle {
+  border-color: hsl(var(--card)) !important;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.35);
+}
+
+.bp-node--selected .bp-flow-handle--target {
+  background-color: hsl(var(--foreground) / 0.55) !important;
+}
+
+.bp-node--selected .bp-flow-handle--source {
+  background-color: hsl(var(--primary)) !important;
+}
+
+.bp-node--execution-true .bp-node-card {
+  border-color: rgb(22 163 74 / 0.65);
+  box-shadow:
+    0 0 0 1px rgb(22 163 74 / 0.35),
+    0 4px 14px rgb(22 163 74 / 0.18);
+}
+
+.bp-node--execution-true .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.45);
+}
+
+.bp-node--execution-true .bp-flow-handle--source {
+  background-color: #16a34a !important;
+}
+
+.bp-node--execution-true .bp-flow-handle--target {
+  background-color: rgb(22 163 74 / 0.55) !important;
+}
+
+.bp-node--execution-false .bp-node-card {
+  border-color: hsl(var(--destructive) / 0.65);
+  box-shadow:
+    0 0 0 1px hsl(var(--destructive) / 0.4),
+    0 4px 14px hsl(var(--destructive) / 0.16);
+}
+
+.bp-node--execution-false .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.4);
+}
+
+.bp-node--execution-false .bp-flow-handle--source {
+  background-color: hsl(var(--destructive)) !important;
+}
+
+.bp-node--execution-false .bp-flow-handle--target {
+  background-color: hsl(var(--destructive) / 0.55) !important;
+}
+
+/* 生命周期节点无输入口：隐藏任何左侧/目标连接点（含旧数据产生的幽灵 handle） */
+.bp-node--lifecycle .react-flow__handle.bp-flow-handle--target,
+.bp-node--lifecycle .react-flow__handle-left,
+.bp-node--lifecycle .react-flow__handle[data-handlepos="left"] {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  opacity: 0 !important;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--signal,
+.bp-flow .react-flow__handle.bp-flow-handle--signal,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--signal {
+  background-color: hsl(38 92% 50% / 0.75) !important;
+  width: 8px;
+  height: 8px;
+}
+
+.bp-node--selected .bp-flow-handle--signal {
+  background-color: hsl(38 92% 50%) !important;
+}
+
+/* 右键菜单 */
+.bp-context-menu {
+  position: fixed;
+  z-index: 10050;
+  min-width: 148px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.bp-context-menu__item {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+  color: inherit;
+  cursor: pointer;
+}
+
+.bp-context-menu__item:hover {
+  background: hsl(var(--accent));
+}
+
+.bp-context-menu__item--danger {
+  color: hsl(var(--destructive));
+}
+
+.bp-context-menu__item--danger:hover {
+  background: hsl(var(--destructive) / 0.1);
+}
+
+.bp-context-menu__separator {
+  height: 1px;
+  margin: 4px 0;
+  background: hsl(var(--border));
+}

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "",
+  "files": [
+    "index.ts",
+    "src",
+    "dist",
+    "README.md"
+  ],
   "main": "index.ts",
   "exports": {
     ".": "./index.ts",
-    "./blueprint.css": "./src/blueprint.css"
+    "./blueprint.css": "./dist/blueprint.css"
   },
   "dependencies": {
     "react": "^19",
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/i18n": "0.1.7",
-    "@arronqzy/blueprint-dsl": "1.0.9",
+    "@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",
@@ -29,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": "",
@@ -38,7 +44,8 @@
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "build": "pnpm run lint && pnpm run typecheck && vite build",
+    "build:css": "mkdir -p dist && cp src/blueprint.css dist/blueprint.css",
+    "build": "pnpm run lint && pnpm run typecheck && pnpm run build:css",
     "dev": "vite"
   }
 }

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,

package/.eslintrc.cjs

@@ -1,5 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ["@arronqzy/eslint-config/index.js"],
-};

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>blue-print</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/tailwind.config.ts

@@ -1,6 +0,0 @@
-import preset from "../tailwind/src/preset";
-
-export default {
-  presets: [preset],
-  content: ["./index.html", "./src/**/*.{ts,tsx}"],
-};

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "@arronqzy/typescript-config/react-library.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@arronqzy/blueprint-dsl": ["../blueprint-dsl/src/index.ts"],
-      "@arronqzy/ui": ["../ui/index.ts"]
-    }
-  },
-  "include": ["."],
-  "exclude": ["node_modules"]
-}

package/vite.config.ts

@@ -1,16 +0,0 @@
-import path from "node:path";
-
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@arronqzy/ui": path.resolve(process.cwd(), "../ui/index.ts"),
-    },
-  },
-  server: {
-    port: 31012,
-  },
-});