@arronqzy/react-blueprint 1.0.7 → 1.0.8

package/src/graph/document.ts

@@ -4,6 +4,8 @@ import type {
   JsonNodeConfig,
   LogicNodeConfig,
   PageLifecyclePhase,
+  ViewEventNodeConfig,
+  ViewEventType,
 } from "@arronqzy/blueprint-dsl";
 import {
   BLUEPRINT_NODE_TYPE,
@@ -14,10 +16,13 @@ import {
   DEFAULT_JSON_NODE_CONFIG,
   DEFAULT_LOGIC_NODE_CONFIG,
   DEFAULT_LOGIC_NODE_TYPE,
+  DEFAULT_VIEW_EVENT_NODE_CONFIG,
+  EVENT_NODE_TYPE,
   FETCH_NODE_TYPE,
   JSON_NODE_TYPE,
   LIFECYCLE_NODE_TYPE,
   normalizeClockConfig,
+  normalizeViewEventConfig,
   VIEW_NODE_TYPE,
 } from "@arronqzy/blueprint-dsl";
 
@@ -25,8 +30,9 @@ export type { FetchRequestConfig as BlueprintFetchConfig } from "@arronqzy/bluep
 export type { JsonNodeConfig as BlueprintJsonConfig } from "@arronqzy/blueprint-dsl";
 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 BlueprintNodeRole = "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+export type BlueprintNodeRole = "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock" | "event";
 
 /** 决定右侧配置面板展示哪类配置 */
 export type BlueprintConfigSource =
@@ -37,7 +43,8 @@ export type BlueprintConfigSource =
   | "view"
   | "fetch"
   | "json"
-  | "clock";
+  | "clock"
+  | "event";
 
 export type BlueprintGraphNode = {
   id: string;
@@ -68,6 +75,8 @@ export type BlueprintGraphNode = {
   logicConfig?: LogicNodeConfig;
   /** 时钟节点的间隔与时间格式配置 */
   clockConfig?: ClockNodeConfig;
+  /** 视图事件节点监听的事件类型 */
+  eventConfig?: ViewEventNodeConfig;
 };
 
 export function resolveViewElementIds(
@@ -94,6 +103,7 @@ export function resolveBlueprintConfigSource(
 ): BlueprintConfigSource {
   if (node.configSource) return node.configSource;
   if (node.role === "lifecycle") return "lifecycle";
+  if (node.role === "event") return "event";
   if (node.role === "clock") return "clock";
   if (node.role === "and") return "and";
   if (node.role === "fetch") return "fetch";
@@ -101,11 +111,60 @@ export function resolveBlueprintConfigSource(
   if (node.nodeType === FETCH_NODE_TYPE) return "fetch";
   if (node.nodeType === JSON_NODE_TYPE) return "json";
   if (node.nodeType === CLOCK_NODE_TYPE) return "clock";
+  if (node.nodeType === EVENT_NODE_TYPE) return "event";
   if (node.nodeType === VIEW_NODE_TYPE) return "view";
   if (resolveViewElementIds(node).length > 0) return "view";
   return node.role === "logic" ? "logic" : "blueprint";
 }
 
+export type BlueprintConfigSourceNode = Pick<
+  BlueprintGraphNode,
+  "role" | "nodeType" | "configSource" | "viewElementId" | "viewElementIds"
+>;
+
+export type BlueprintConnectionIssue =
+  | "lifecycle-no-input"
+  | "event-requires-lifecycle";
+
+/** 连入校验：生命周期无输入；事件节点输入必须全部来自生命周期节点 */
+export function resolveBlueprintConnectionIssue(
+  source: BlueprintConfigSourceNode | undefined,
+  target: BlueprintConfigSourceNode | undefined
+): BlueprintConnectionIssue | null {
+  if (!source || !target) return null;
+  const targetSource = resolveBlueprintConfigSource(target);
+  if (targetSource === "lifecycle") return "lifecycle-no-input";
+  if (
+    targetSource === "event" &&
+    resolveBlueprintConfigSource(source) !== "lifecycle"
+  ) {
+    return "event-requires-lifecycle";
+  }
+  return null;
+}
+
+export function inspectEventNodeInputs(
+  nodeId: string,
+  nodes: Array<BlueprintConfigSourceNode & { id: string }>,
+  edges: Array<{ source: string; target: string }>
+) {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  let incomingCount = 0;
+  let lifecycleCount = 0;
+  let nonLifecycleCount = 0;
+  for (const edge of edges) {
+    if (edge.target !== nodeId) continue;
+    incomingCount += 1;
+    const source = byId.get(edge.source);
+    if (source && resolveRunnableNodeType(source) === LIFECYCLE_NODE_TYPE) {
+      lifecycleCount += 1;
+    } else {
+      nonLifecycleCount += 1;
+    }
+  }
+  return { incomingCount, lifecycleCount, nonLifecycleCount };
+}
+
 /** 可执行图节点类型：与配置类型对齐，避免文档里残留旧 nodeType */
 export function resolveRunnableNodeType(
   node: Pick<
@@ -116,6 +175,8 @@ export function resolveRunnableNodeType(
   switch (resolveBlueprintConfigSource(node)) {
     case "view":
       return VIEW_NODE_TYPE;
+    case "event":
+      return EVENT_NODE_TYPE;
     case "lifecycle":
       return LIFECYCLE_NODE_TYPE;
     case "clock":
@@ -146,6 +207,7 @@ export const BLUEPRINT_CONFIG_TYPE_LABEL_KEYS: Record<
   and: "blueprint.node.typeAnd",
   lifecycle: "blueprint.node.typeLifecycle",
   view: "blueprint.node.typeView",
+  event: "blueprint.node.typeEvent",
   fetch: "blueprint.node.typeFetch",
   json: "blueprint.node.typeJson",
   clock: "blueprint.node.typeClock",
@@ -164,6 +226,14 @@ export const BLUEPRINT_LIFECYCLE_PHASE_KEYS: Record<PageLifecyclePhase, string>
     blueprintActivated: "blueprint.node.phaseBlueprintActivated",
   };
 
+export const BLUEPRINT_VIEW_EVENT_TYPE_KEYS: Record<ViewEventType, string> = {
+  click: "blueprint.node.eventClick",
+  dblclick: "blueprint.node.eventDblclick",
+  contextmenu: "blueprint.node.eventContextmenu",
+  mouseenter: "blueprint.node.eventMouseenter",
+  mouseleave: "blueprint.node.eventMouseleave",
+};
+
 function defaultTranslate(): TranslateFn {
   return tForLocale(resolveLocale());
 }
@@ -183,6 +253,11 @@ export function getLifecyclePhaseLabel(
   return key ? t(key) : phase;
 }
 
+export function getViewEventTypeLabel(t: TranslateFn, eventType: ViewEventType): string {
+  const key = BLUEPRINT_VIEW_EVENT_TYPE_KEYS[eventType];
+  return key ? t(key) : eventType;
+}
+
 export function resolveBlueprintNodeTypeLabel(
   node: Pick<
     BlueprintGraphNode,
@@ -243,6 +318,15 @@ export function resolveNodeClockConfig(
   });
 }
 
+export function resolveNodeEventConfig(
+  node: Pick<BlueprintGraphNode, "eventConfig">
+): ViewEventNodeConfig {
+  return normalizeViewEventConfig({
+    ...DEFAULT_VIEW_EVENT_NODE_CONFIG,
+    ...node.eventConfig,
+  });
+}
+
 export type BlueprintGraphEdge = {
   id: string;
   source: string;
@@ -275,12 +359,18 @@ const noInputTargetNodeIds = (document: BlueprintDocument) =>
       .map((node) => node.id)
   );
 
-/** 生命周期节点无输入口：移除连入边，并修正节点配置 */
+function isLifecycleSourceNode(node: BlueprintGraphNode | undefined): boolean {
+  return Boolean(node) && resolveRunnableNodeType(node!) === LIFECYCLE_NODE_TYPE;
+}
+
+function isEventTargetNode(node: BlueprintGraphNode | undefined): boolean {
+  return Boolean(node) && resolveBlueprintConfigSource(node!) === "event";
+}
+
+/** 生命周期节点无输入口；事件节点输入必须来自生命周期节点 */
 export function sanitizeBlueprintDocument(
   document: BlueprintDocument
 ): BlueprintDocument {
-  const blockedTargets = noInputTargetNodeIds(document);
-
   const nodes = document.nodes.map((node) => {
     let next = node;
     if (node.viewElementId && !node.viewElementIds?.length) {
@@ -297,6 +387,9 @@ export function sanitizeBlueprintDocument(
     if (next.role === "lifecycle") {
       return { ...next, configSource: "lifecycle" as const };
     }
+    if (next.role === "event") {
+      return { ...next, configSource: "event" as const };
+    }
     if (next.role === "clock") {
       return { ...next, configSource: "clock" as const };
     }
@@ -309,13 +402,16 @@ export function sanitizeBlueprintDocument(
     if (next.role === "and") {
       return { ...next, configSource: "and" as const };
     }
-    if (next.configSource === "lifecycle" || next.configSource === "clock") {
+    if (next.configSource === "lifecycle" || next.configSource === "clock" || next.configSource === "event") {
       return { ...next, configSource: undefined };
     }
     return next;
   });
 
-  const edges = document.edges.filter((edge) => !blockedTargets.has(edge.target));
+  const edges = filterInvalidBlueprintEdges(
+    { ...document, nodes },
+    document.edges
+  );
 
   return { ...document, nodes, edges };
 }
@@ -325,7 +421,15 @@ export function filterInvalidBlueprintEdges(
   edges: BlueprintGraphEdge[]
 ): BlueprintGraphEdge[] {
   const blockedTargets = noInputTargetNodeIds(document);
-  return edges.filter((edge) => !blockedTargets.has(edge.target));
+  const byId = new Map(document.nodes.map((node) => [node.id, node]));
+  return edges.filter((edge) => {
+    if (blockedTargets.has(edge.target)) return false;
+    const target = byId.get(edge.target);
+    if (isEventTargetNode(target)) {
+      return isLifecycleSourceNode(byId.get(edge.source));
+    }
+    return true;
+  });
 }
 
 /** 切换配置类型时同步节点 role / nodeType，确保生命周期节点渲染为无输入口 */
@@ -347,6 +451,7 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: undefined,
       clockConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -363,6 +468,7 @@ export function patchNodeConfigSource(
       fetchConfig: undefined,
       jsonConfig: undefined,
       logicConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -379,6 +485,7 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: undefined,
       clockConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -395,6 +502,7 @@ export function patchNodeConfigSource(
       jsonConfig: resolveNodeJsonConfig(node),
       logicConfig: undefined,
       clockConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -411,6 +519,7 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: undefined,
       clockConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -427,6 +536,7 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: resolveNodeLogicConfig(node),
       clockConfig: undefined,
+      eventConfig: undefined,
     };
   }
 
@@ -443,6 +553,22 @@ export function patchNodeConfigSource(
       jsonConfig: undefined,
       logicConfig: undefined,
       clockConfig: undefined,
+      eventConfig: undefined,
+    };
+  }
+
+  if (configSource === "event") {
+    return {
+      role: "event",
+      nodeType: EVENT_NODE_TYPE,
+      configSource: "event",
+      eventConfig: resolveNodeEventConfig(node),
+      lifecyclePhase: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: undefined,
+      clockConfig: undefined,
     };
   }
 
@@ -456,5 +582,6 @@ export function patchNodeConfigSource(
     jsonConfig: undefined,
     logicConfig: undefined,
     clockConfig: undefined,
+    eventConfig: undefined,
   };
 }

package/src/graph/node-summary.ts

@@ -10,6 +10,8 @@ import {
   resolveNodeJsonConfig,
   resolveNodeLogicConfig,
   resolveViewElementIds,
+  resolveNodeEventConfig,
+  getViewEventTypeLabel,
 } from "./document";
 import type { BlueprintFlowNodeData } from "./react-flow-adapter";
 
@@ -94,6 +96,24 @@ export function resolveBlueprintNodeSummary(
       }
       return t("blueprint.node.summaryViewMany", { count: ids.length });
     }
+    case "event": {
+      const ids = resolveViewElementIds(data);
+      const types = resolveNodeEventConfig(data).eventTypes;
+      const typeLabel = types.map((type) => getViewEventTypeLabel(t, type)).join(" / ");
+      if (ids.length === 0) {
+        return truncate(
+          t("blueprint.node.summaryEventNoView", { events: typeLabel }),
+          44
+        );
+      }
+      return truncate(
+        t("blueprint.node.summaryEvent", {
+          events: typeLabel,
+          count: ids.length,
+        }),
+        44
+      );
+    }
     case "and":
       return t("blueprint.node.summaryAnd");
     default:

package/src/graph/node-types.ts

@@ -6,4 +6,5 @@ export {
   JSON_NODE_TYPE,
   CLOCK_NODE_TYPE,
   AND_NODE_TYPE,
+  EVENT_NODE_TYPE,
 } from "@arronqzy/blueprint-dsl";

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

@@ -20,6 +20,7 @@ export type BlueprintFlowNodeData = {
   fetchConfig?: BlueprintGraphNode["fetchConfig"];
   jsonConfig?: BlueprintGraphNode["jsonConfig"];
   clockConfig?: BlueprintGraphNode["clockConfig"];
+  eventConfig?: BlueprintGraphNode["eventConfig"];
   logicConfig?: BlueprintGraphNode["logicConfig"];
   /** 调试执行时时钟节点已发送次数 */
   clockEmitProgress?: { current: number; total: number } | null;
@@ -70,6 +71,8 @@ export function toReactFlowNodes(document: BlueprintDocument): ReactFlowNodeView
           ? "fetch"
           : n.role === "json"
             ? "json"
+            : n.role === "event"
+              ? "event"
             : "logic",
     position: { ...n.position },
     width: BP_FLOW_NODE_WIDTH,
@@ -91,6 +94,7 @@ export function toReactFlowNodes(document: BlueprintDocument): ReactFlowNodeView
       fetchConfig: n.fetchConfig,
       jsonConfig: n.jsonConfig,
       clockConfig: n.clockConfig,
+      eventConfig: n.eventConfig,
       logicConfig: n.logicConfig,
     },
   }));

package/src/graph/sync-nodes.ts

@@ -48,12 +48,13 @@ export function nodeStructureSignature(
     jsonConfig?: { jsonString?: string };
     logicConfig?: { sourceCode?: string };
     clockConfig?: { intervalSeconds?: number; timeFormat?: string; outputCount?: number; emitImmediately?: boolean };
+    eventConfig?: { eventTypes?: string[] };
   }>
 ): string {
   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.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(",")}`
     )
     .sort()
     .join("|");

package/src/hooks/useBlueprintFlowState.ts

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import { toast } from "@arronqzy/ui";
 import {
   addEdge,
   useEdgesState,
@@ -7,12 +9,16 @@ import {
   type Connection,
   type Edge,
   type EdgeChange,
+  type FinalConnectionState,
   type Node,
   type NodeChange,
 } from "@xyflow/react";
 
 import type { BlueprintGraph } from "../graph/blueprint-graph";
-import { sanitizeBlueprintDocument } from "../graph/document";
+import {
+  resolveBlueprintConnectionIssue,
+  sanitizeBlueprintDocument,
+} from "../graph/document";
 import {
   applyFlowNodePositions,
   BP_EDGE_STYLE,
@@ -452,6 +458,8 @@ export function useBlueprintFlowState({
     [getNodes, onGraphChange]
   );
 
+  const { t } = useI18n();
+
   const isValidConnection = useCallback(
     (connection: Edge | Connection) => {
       if (!connection.source || !connection.target) return false;
@@ -464,16 +472,40 @@ export function useBlueprintFlowState({
       }
 
       const targetNode = rfNodes.find((n) => n.id === connection.target);
-      // 生命周期节点无输入口，禁止连入
-      if (targetNode?.data.role === "lifecycle") {
-        return false;
-      }
-
-      return true;
+      const sourceNode = rfNodes.find((n) => n.id === connection.source);
+      return !resolveBlueprintConnectionIssue(sourceNode?.data, targetNode?.data);
     },
     [getNodes]
   );
 
+  const onConnectEnd = useCallback(
+    (_event: MouseEvent | TouchEvent, state: FinalConnectionState) => {
+      if (state.isValid) return;
+      const fromNode = state.fromNode as Node<BlueprintFlowNodeData> | null;
+      const toNode = state.toNode as Node<BlueprintFlowNodeData> | null;
+      if (!fromNode?.data || !toNode?.data) return;
+
+      const fromIsSource = state.fromHandle?.type !== "target";
+      const sourceData = fromIsSource ? fromNode.data : toNode.data;
+      const targetData = fromIsSource ? toNode.data : fromNode.data;
+      const issue = resolveBlueprintConnectionIssue(sourceData, targetData);
+      if (issue === "event-requires-lifecycle") {
+        toast({
+          title: t("blueprint.config.eventConnectNeedLifecycle"),
+          variant: "destructive",
+        });
+        return;
+      }
+      if (issue === "lifecycle-no-input") {
+        toast({
+          title: t("blueprint.config.lifecycleNoInput"),
+          variant: "destructive",
+        });
+      }
+    },
+    [t]
+  );
+
   return {
     nodes,
     edges,
@@ -481,6 +513,7 @@ export function useBlueprintFlowState({
     onEdgesChange,
     onNodeDragStop,
     onConnect,
+    onConnectEnd,
     isValidConnection,
   };
 }