@arronqzy/react-blueprint 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "",
   "main": "index.ts",
   "exports": {
@@ -12,9 +12,9 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.5",
-    "@arronqzy/i18n": "0.1.3",
+    "@arronqzy/blueprint-dsl": "1.0.7",
     "@arronqzy/react-rx-store": "1.1.4",
+    "@arronqzy/i18n": "0.1.6",
     "@arronqzy/ui": "1.0.5"
   },
   "devDependencies": {

package/src/BlueprintContextMenu.tsx

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

package/src/BlueprintNodeConfigSidebar.tsx

@@ -6,11 +6,15 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Checkbox,
 } from "@arronqzy/ui";
 import {
   LIFECYCLE_NODE_TYPE,
   PAGE_LIFECYCLE_PHASES,
+  VIEW_EVENT_TYPES,
+  type ExecutionTraceEntry,
   type PageLifecyclePhase,
+  type ViewEventType,
 } from "@arronqzy/blueprint-dsl";
 import { useI18n } from "@arronqzy/i18n/react";
 
@@ -19,13 +23,18 @@ import { ClockNodeConfigPanel } from "./components/ClockNodeConfigPanel";
 import { JsonNodeConfigPanel } from "./components/JsonNodeConfigPanel";
 import { LogicNodeConfigPanel } from "./components/LogicNodeConfigPanel";
 import { ViewElementMultiSelect } from "./components/ViewElementMultiSelect";
+import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./components/ConfigHintIcon";
 import {
   getLifecyclePhaseLabel,
+  getViewEventTypeLabel,
+  inspectEventNodeInputs,
   patchNodeConfigSource,
   pruneViewElementIds,
   resolveBlueprintConfigSource,
+  resolveNodeEventConfig,
   resolveViewElementIds,
   type BlueprintConfigSource,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type BlueprintNodeRole,
 } from "./graph/document";
@@ -42,6 +51,9 @@ export type BlueprintLibraryOption = {
 
 export type BlueprintNodeConfigSidebarProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   viewElementOptions?: BlueprintViewElementOption[];
   blueprintLibraryOptions?: BlueprintLibraryOption[];
   allowFalseSignalPropagation?: boolean;
@@ -64,6 +76,7 @@ export type BlueprintNodeConfigSidebarProps = {
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;
@@ -77,10 +90,14 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
   json: "blueprint.config.roleJson",
   logic: "blueprint.config.roleLogic",
   clock: "blueprint.config.roleClock",
+  event: "blueprint.config.roleEvent",
 };
 
 export function BlueprintNodeConfigSidebar({
   node,
+  graphNodes = [],
+  graphEdges = [],
+  traceEntries = [],
   viewElementOptions = [],
   blueprintLibraryOptions = [],
   allowFalseSignalPropagation = false,
@@ -90,6 +107,7 @@ export function BlueprintNodeConfigSidebar({
   const { t } = useI18n();
   const configSource = resolveBlueprintConfigSource(node);
   const linkedViewElementIds = resolveViewElementIds(node);
+  const selectedEventTypes = resolveNodeEventConfig(node).eventTypes;
   const existingViewElementIdSet = useMemo(
     () => new Set(viewElementOptions.map((opt) => opt.id)),
     [viewElementOptions]
@@ -99,7 +117,7 @@ export function BlueprintNodeConfigSidebar({
   );
 
   useEffect(() => {
-    if (configSource !== "view") return;
+    if (configSource !== "view" && configSource !== "event") return;
     // 视图画布尚未就绪时不清理，避免误删有效绑定导致绑定节点「执行了但不写 scope」
     if (viewElementOptions.length === 0) return;
     const linked = resolveViewElementIds(node);
@@ -109,7 +127,7 @@ export function BlueprintNodeConfigSidebar({
     onUpdateNode(node.id, {
       viewElementIds: pruned.length > 0 ? pruned : undefined,
       viewElementId: undefined,
-      configSource: "view",
+      configSource,
     });
   }, [
     configSource,
@@ -122,6 +140,10 @@ export function BlueprintNodeConfigSidebar({
   ]);
 
   const roleLabel = t(ROLE_LABEL_KEYS[node.role] ?? "blueprint.config.roleLogic");
+  const eventInputs = useMemo(
+    () => inspectEventNodeInputs(node.id, graphNodes, graphEdges),
+    [graphEdges, graphNodes, node.id]
+  );
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
@@ -151,7 +173,7 @@ export function BlueprintNodeConfigSidebar({
               const nextSource = value as BlueprintConfigSource;
               onUpdateNode(node.id, {
                 ...patchNodeConfigSource(node, nextSource),
-                ...(nextSource === "view"
+                ...(nextSource === "view" || nextSource === "event"
                   ? {
                       viewElementIds: linkedViewElementIds,
                       viewElementId: undefined,
@@ -174,14 +196,22 @@ export function BlueprintNodeConfigSidebar({
               <SelectItem value="fetch">{t("blueprint.config.configFetch")}</SelectItem>
               <SelectItem value="json">{t("blueprint.config.configJson")}</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>
             </SelectContent>
           </Select>
         </label>
 
-        {configSource === "view" ? (
+        {configSource === "view" || configSource === "event" ? (
           <div className="block space-y-1">
-            <span className="text-muted-foreground">{t("blueprint.config.linkedViewNodes")}</span>
+            <ConfigFieldLabel
+              label={t("blueprint.config.linkedViewNodes")}
+              hint={
+                configSource === "event"
+                  ? t("blueprint.config.eventViewHint")
+                  : t("blueprint.config.viewMultiHint")
+              }
+            />
             <ViewElementMultiSelect
               options={viewElementOptions}
               value={linkedViewElementIds}
@@ -190,15 +220,11 @@ export function BlueprintNodeConfigSidebar({
                 onUpdateNode(node.id, {
                   viewElementIds: next,
                   viewElementId: undefined,
-                  configSource: "view",
+                  configSource,
                 })
               }
             />
-            {linkedViewElementIds.length === 0 ? (
-              <p className="text-[11px] text-muted-foreground">
-                {t("blueprint.config.viewMultiHint")}
-              </p>
-            ) : (
+            {linkedViewElementIds.length > 0 ? (
               <p className="text-[11px] text-muted-foreground">
                 {t("blueprint.config.linkedViewCount", {
                   count: linkedViewElementIds.length,
@@ -207,16 +233,16 @@ export function BlueprintNodeConfigSidebar({
                     .join("、"),
                 })}
               </p>
-            )}
+            ) : null}
           </div>
         ) : null}
 
         {configSource === "blueprint" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">{t("blueprint.config.blueprintAttrs")}</div>
-            <p className="text-[11px] text-muted-foreground">
-              {t("blueprint.config.blueprintAttrsHint")}
-            </p>
+            <ConfigSectionTitle
+              title={t("blueprint.config.blueprintAttrs")}
+              hint={t("blueprint.config.blueprintAttrsHint")}
+            />
             <label className="block space-y-1">
               <span className="text-muted-foreground">{t("blueprint.config.refLibrary")}</span>
               <Select
@@ -262,15 +288,70 @@ export function BlueprintNodeConfigSidebar({
           </div>
         ) : null}
 
+        {configSource === "event" ? (
+          <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+            <div className="flex items-center gap-1.5">
+              <div className="font-medium text-foreground">
+                {t("blueprint.config.eventListen")}
+              </div>
+              <ConfigHintIcon label={t("blueprint.config.eventListen")}>
+                <p>{t("blueprint.config.eventNoInput")}</p>
+                <p>{t("blueprint.config.eventHint")}</p>
+              </ConfigHintIcon>
+            </div>
+            {eventInputs.nonLifecycleCount > 0 ? (
+              <p className="rounded border border-destructive/40 bg-destructive/10 px-2 py-1.5 text-[11px] leading-relaxed text-destructive">
+                {t("blueprint.config.eventInputNotLifecycle")}
+              </p>
+            ) : eventInputs.lifecycleCount === 0 ? (
+              <p className="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-amber-700 dark:text-amber-300">
+                {t("blueprint.config.eventInputMissing")}
+              </p>
+            ) : null}
+            <div className="space-y-1.5">
+              {VIEW_EVENT_TYPES.map((eventType) => {
+                const checked = selectedEventTypes.includes(eventType);
+                return (
+                  <label key={eventType} 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") => {
+                        const nextTypes: ViewEventType[] =
+                          nextChecked === true
+                            ? [...new Set([...selectedEventTypes, eventType])]
+                            : selectedEventTypes.filter((type) => type !== eventType);
+                        onUpdateNode(node.id, {
+                          eventConfig: {
+                            eventTypes: nextTypes.length > 0 ? nextTypes : ["click"],
+                          },
+                          configSource: "event",
+                        });
+                      }}
+                    />
+                    <span>{getViewEventTypeLabel(t, eventType)}</span>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
         {configSource === "lifecycle" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">{t("blueprint.config.lifecycleHook")}</div>
-            <p className="text-[11px] text-muted-foreground">
-              {t("blueprint.config.lifecycleNoInput")}
-              {node.lifecyclePhase === "blueprintActivated"
-                ? t("blueprint.config.lifecycleBlueprintActivatedHint")
-                : t("blueprint.config.lifecyclePageHint")}
-            </p>
+            <div className="flex items-center gap-1.5">
+              <div className="font-medium text-foreground">
+                {t("blueprint.config.lifecycleHook")}
+              </div>
+              <ConfigHintIcon label={t("blueprint.config.lifecycleHook")}>
+                <p>{t("blueprint.config.lifecycleNoInput")}</p>
+                <p>
+                  {node.lifecyclePhase === "blueprintActivated"
+                    ? t("blueprint.config.lifecycleBlueprintActivatedHint")
+                    : t("blueprint.config.lifecyclePageHint")}
+                </p>
+              </ConfigHintIcon>
+            </div>
             <label className="block space-y-1">
               <span className="text-muted-foreground">{t("blueprint.config.listenPhase")}</span>
               <Select
@@ -305,7 +386,13 @@ export function BlueprintNodeConfigSidebar({
         ) : null}
 
         {configSource === "fetch" ? (
-          <FetchNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+          <FetchNodeConfigPanel
+            node={node}
+            graphNodes={graphNodes}
+            graphEdges={graphEdges}
+            traceEntries={traceEntries}
+            onUpdateNode={onUpdateNode}
+          />
         ) : null}
 
         {configSource === "json" ? (
@@ -318,10 +405,10 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "and" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">{t("blueprint.config.andTitle")}</div>
-            <p className="text-[11px] text-muted-foreground">
-              {t("blueprint.config.andHint")}
-            </p>
+            <ConfigSectionTitle
+              title={t("blueprint.config.andTitle")}
+              hint={t("blueprint.config.andHint")}
+            />
           </div>
         ) : null}
 

package/src/blueprintNodeTypes.ts

@@ -6,6 +6,7 @@ import { ClockFlowNode } from "./nodes/ClockFlowNode";
 import { FetchFlowNode } from "./nodes/FetchFlowNode";
 import { JsonFlowNode } from "./nodes/JsonFlowNode";
 import { LifecycleFlowNode } from "./nodes/LifecycleFlowNode";
+import { EventFlowNode } from "./nodes/EventFlowNode";
 import { LogicFlowNode } from "./nodes/LogicFlowNode";
 
 /** 稳定引用，避免 React Flow 因 nodeTypes 变化反复卸载节点 */
@@ -17,4 +18,5 @@ export const blueprintNodeTypes = {
   json: JsonFlowNode,
   logic: LogicFlowNode,
   lifecycle: LifecycleFlowNode,
+  event: EventFlowNode,
 } satisfies NodeTypes;

package/src/components/ClockNodeConfigPanel.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeClockConfig } from "../graph/document";
+import { ConfigFieldLabel, ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type ClockNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -73,17 +74,16 @@ export function ClockNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">
-        {t("blueprint.config.clockTitle")}
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.clockHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.clockTitle")}
+        hint={t("blueprint.config.clockHint")}
+      />
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
-          {t("blueprint.config.clockIntervalSeconds")}
-        </span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.clockIntervalSeconds")}
+          hint={t("blueprint.config.clockIntervalHint")}
+        />
         <Input
           type="number"
           min={0}
@@ -92,15 +92,13 @@ export function ClockNodeConfigPanel({
           onChange={handleIntervalChange}
           className="h-8"
         />
-        <p className="text-[11px] text-muted-foreground">
-          {t("blueprint.config.clockIntervalHint")}
-        </p>
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
-          {t("blueprint.config.outputCount")}
-        </span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.outputCount")}
+          hint={t("blueprint.config.outputCountHint")}
+        />
         <Input
           type="number"
           min={1}
@@ -109,9 +107,6 @@ export function ClockNodeConfigPanel({
           onChange={handleOutputCountChange}
           className="h-8"
         />
-        <p className="text-[11px] text-muted-foreground">
-          {t("blueprint.config.outputCountHint")}
-        </p>
       </label>
 
       <label className="flex items-start gap-2">
@@ -127,9 +122,10 @@ export function ClockNodeConfigPanel({
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
-          {t("blueprint.config.timeFormat")}
-        </span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.timeFormat")}
+          hint={t("blueprint.config.timeFormatHint")}
+        />
         <Input
           value={clockConfig.timeFormat}
           onChange={handleFormatChange}
@@ -137,9 +133,6 @@ export function ClockNodeConfigPanel({
           className="h-8 font-mono text-[11px]"
           placeholder="YYYY-MM-DD HH:mm:ss"
         />
-        <p className="text-[11px] text-muted-foreground">
-          {t("blueprint.config.timeFormatHint")}
-        </p>
       </label>
     </div>
   );

package/src/components/ConfigHintIcon.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@arronqzy/ui";
+
+export type ConfigHintIconProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function ConfigHintIcon({
+  label,
+  children,
+  className,
+  contentClassName,
+}: ConfigHintIconProps) {
+  const { t } = useI18n();
+  const resolvedLabel = label ?? t("common.hint");
+
+  return (
+    <TooltipProvider delayDuration={120}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className={
+              className ??
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border text-[10px] leading-none text-muted-foreground hover:bg-accent/50"
+            }
+            aria-label={t("common.hintAria", { label: resolvedLabel })}
+          >
+            ?
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side="top"
+          className={`z-[10120] max-w-[360px] space-y-1.5 text-[11px] leading-5 ${contentClassName ?? ""}`}
+        >
+          {children}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export function ConfigSectionTitle({
+  title,
+  hint,
+}: {
+  title: string;
+  hint: ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="font-medium text-foreground">{title}</div>
+      <ConfigHintIcon label={title}>{hint}</ConfigHintIcon>
+    </div>
+  );
+}
+
+export function ConfigFieldLabel({
+  label,
+  hint,
+}: {
+  label: string;
+  hint?: ReactNode;
+}) {
+  if (!hint) {
+    return <span className="text-muted-foreground">{label}</span>;
+  }
+  return (
+    <span className="inline-flex items-center gap-1 text-muted-foreground">
+      {label}
+      <ConfigHintIcon label={label}>{hint}</ConfigHintIcon>
+    </span>
+  );
+}