@arronqzy/vue-blueprint 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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.5",
-    "@arronqzy/i18n": "0.1.3",
-    "@arronqzy/vue-rx-store": "0.1.2"
+    "@arronqzy/blueprint-dsl": "1.0.7",
+    "@arronqzy/vue-rx-store": "0.1.2",
+    "@arronqzy/i18n": "0.1.6"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/BlueprintNodeConfigSidebar.vue

@@ -5,7 +5,10 @@ import { Checkbox, Input, Select } from "ant-design-vue";
 import {
   LIFECYCLE_NODE_TYPE,
   PAGE_LIFECYCLE_PHASES,
+  VIEW_EVENT_TYPES,
+  type ExecutionTraceEntry,
   type PageLifecyclePhase,
+  type ViewEventType,
 } from "@arronqzy/blueprint-dsl";
 
 import FetchNodeConfigPanel from "./components/FetchNodeConfigPanel.vue";
@@ -13,13 +16,18 @@ import ClockNodeConfigPanel from "./components/ClockNodeConfigPanel.vue";
 import JsonNodeConfigPanel from "./components/JsonNodeConfigPanel.vue";
 import LogicNodeConfigPanel from "./components/LogicNodeConfigPanel.vue";
 import ViewElementMultiSelect from "./components/ViewElementMultiSelect.vue";
+import ConfigHintIcon from "./components/ConfigHintIcon.vue";
 import {
   getLifecyclePhaseLabel,
+  getViewEventTypeLabel,
+  inspectEventNodeInputs,
   patchNodeConfigSource,
   pruneViewElementIds,
   resolveBlueprintConfigSource,
+  resolveNodeEventConfig,
   resolveViewElementIds,
   type BlueprintConfigSource,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type BlueprintNodeRole,
 } from "./graph/document";
@@ -38,6 +46,9 @@ export type BlueprintLibraryOption = {
 
 export type BlueprintNodeConfigSidebarProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   viewElementOptions?: BlueprintViewElementOption[];
   blueprintLibraryOptions?: BlueprintLibraryOption[];
   allowFalseSignalPropagation?: boolean;
@@ -60,6 +71,7 @@ export type BlueprintNodeConfigSidebarProps = {
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;
@@ -68,11 +80,15 @@ export type BlueprintNodeConfigSidebarProps = {
 const props = withDefaults(defineProps<BlueprintNodeConfigSidebarProps>(), {
   viewElementOptions: () => [],
   blueprintLibraryOptions: () => [],
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
   allowFalseSignalPropagation: false,
 });
 
 const configSource = computed(() => resolveBlueprintConfigSource(props.node));
 const linkedViewElementIds = computed(() => resolveViewElementIds(props.node));
+const selectedEventTypes = computed(() => resolveNodeEventConfig(props.node).eventTypes);
 const existingViewElementIdSet = computed(
   () => new Set(props.viewElementOptions.map((opt) => opt.id))
 );
@@ -88,12 +104,17 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
   json: "blueprint.config.roleJson",
   logic: "blueprint.config.roleLogic",
   clock: "blueprint.config.roleClock",
+  event: "blueprint.config.roleEvent",
 };
 
 const roleLabel = computed(() =>
   t(ROLE_LABEL_KEYS[props.node.role] ?? "blueprint.config.roleLogic")
 );
 
+const eventInputs = computed(() =>
+  inspectEventNodeInputs(props.node.id, props.graphNodes, props.graphEdges)
+);
+
 watch(
   [
     configSource,
@@ -104,7 +125,7 @@ watch(
     () => props.viewElementOptions.length,
   ],
   () => {
-    if (configSource.value !== "view") return;
+    if (configSource.value !== "view" && configSource.value !== "event") return;
     if (props.viewElementOptions.length === 0) return;
     const linked = resolveViewElementIds(props.node);
     if (linked.length === 0) return;
@@ -113,7 +134,7 @@ watch(
     props.onUpdateNode(props.node.id, {
       viewElementIds: pruned.length > 0 ? pruned : undefined,
       viewElementId: undefined,
-      configSource: "view",
+      configSource: configSource.value,
     });
   }
 );
@@ -122,7 +143,7 @@ function handleConfigSourceChange(value: string) {
   const nextSource = value as BlueprintConfigSource;
   props.onUpdateNode(props.node.id, {
     ...patchNodeConfigSource(props.node, nextSource),
-    ...(nextSource === "view"
+    ...(nextSource === "view" || nextSource === "event"
       ? {
           viewElementIds: linkedViewElementIds.value,
           viewElementId: undefined,
@@ -133,6 +154,19 @@ function handleConfigSourceChange(value: string) {
         }),
   });
 }
+
+function toggleEventType(eventType: ViewEventType, checked: boolean) {
+  const current = selectedEventTypes.value;
+  const nextTypes: ViewEventType[] = checked
+    ? [...new Set([...current, eventType])]
+    : current.filter((type) => type !== eventType);
+  props.onUpdateNode(props.node.id, {
+    eventConfig: {
+      eventTypes: nextTypes.length > 0 ? nextTypes : ["click"],
+    },
+    configSource: "event",
+  });
+}
 </script>
 
 <template>
@@ -168,12 +202,18 @@ function handleConfigSourceChange(value: string) {
           <Select.Option value="fetch">{{ t("blueprint.config.configFetch") }}</Select.Option>
           <Select.Option value="json">{{ t("blueprint.config.configJson") }}</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>
         </Select>
       </label>
 
-      <div v-if="configSource === 'view'" class="block space-y-1">
-        <span class="text-muted-foreground">{{ t("blueprint.config.linkedViewNodes") }}</span>
+      <div v-if="configSource === 'view' || configSource === 'event'" class="block space-y-1">
+        <span class="inline-flex items-center gap-1 text-muted-foreground">
+          {{ t("blueprint.config.linkedViewNodes") }}
+          <ConfigHintIcon :label="t('blueprint.config.linkedViewNodes')">
+            {{ configSource === 'event' ? t("blueprint.config.eventViewHint") : t("blueprint.config.viewMultiHint") }}
+          </ConfigHintIcon>
+        </span>
         <ViewElementMultiSelect
           :options="viewElementOptions"
           :value="linkedViewElementIds"
@@ -183,14 +223,11 @@ function handleConfigSourceChange(value: string) {
               onUpdateNode(node.id, {
                 viewElementIds: next,
                 viewElementId: undefined,
-                configSource: 'view',
+                configSource,
               })
           "
         />
-        <p v-if="linkedViewElementIds.length === 0" class="text-[11px] text-muted-foreground">
-          {{ t("blueprint.config.viewMultiHint") }}
-        </p>
-        <p v-else class="text-[11px] text-muted-foreground">
+        <p v-if="linkedViewElementIds.length > 0" class="text-[11px] text-muted-foreground">
           {{
             t("blueprint.config.linkedViewCount", {
               count: linkedViewElementIds.length,
@@ -206,8 +243,12 @@ function handleConfigSourceChange(value: string) {
         v-if="configSource === 'blueprint'"
         class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
       >
-        <div class="font-medium text-foreground">{{ t("blueprint.config.blueprintAttrs") }}</div>
-        <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.blueprintAttrsHint") }}</p>
+        <div class="flex items-center gap-1.5">
+          <div class="font-medium text-foreground">{{ t("blueprint.config.blueprintAttrs") }}</div>
+          <ConfigHintIcon :label="t('blueprint.config.blueprintAttrs')">
+            {{ t("blueprint.config.blueprintAttrsHint") }}
+          </ConfigHintIcon>
+        </div>
         <label class="block space-y-1">
           <span class="text-muted-foreground">{{ t("blueprint.config.refLibrary") }}</span>
           <Select
@@ -249,18 +290,58 @@ function handleConfigSourceChange(value: string) {
       </div>
 
       <div
-        v-if="configSource === 'lifecycle'"
+        v-if="configSource === 'event'"
         class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
       >
-        <div class="font-medium text-foreground">{{ t("blueprint.config.lifecycleHook") }}</div>
-        <p class="text-[11px] text-muted-foreground">
-          {{ t("blueprint.config.lifecycleNoInput") }}
-          {{
-            node.lifecyclePhase === "blueprintActivated"
-              ? t("blueprint.config.lifecycleBlueprintActivatedHint")
-              : t("blueprint.config.lifecyclePageHint")
-          }}
+        <div class="flex items-center gap-1.5">
+          <div class="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>
+        <p
+          v-if="eventInputs.nonLifecycleCount > 0"
+          class="rounded border border-destructive/40 bg-destructive/10 px-2 py-1.5 text-[11px] leading-relaxed text-destructive"
+        >
+          {{ t("blueprint.config.eventInputNotLifecycle") }}
         </p>
+        <p
+          v-else-if="eventInputs.lifecycleCount === 0"
+          class="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-amber-700"
+        >
+          {{ t("blueprint.config.eventInputMissing") }}
+        </p>
+        <label
+          v-for="eventType in VIEW_EVENT_TYPES"
+          :key="eventType"
+          class="flex items-center gap-2"
+        >
+          <Checkbox
+            :checked="selectedEventTypes.includes(eventType)"
+            @update:checked="(v) => toggleEventType(eventType, Boolean(v))"
+          />
+          <span>{{ getViewEventTypeLabel(t, eventType) }}</span>
+        </label>
+      </div>
+
+      <div
+        v-if="configSource === 'lifecycle'"
+        class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+      >
+        <div class="flex items-center gap-1.5">
+          <div class="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 class="block space-y-1">
           <span class="text-muted-foreground">{{ t("blueprint.config.listenPhase") }}</span>
           <Select
@@ -290,6 +371,9 @@ function handleConfigSourceChange(value: string) {
       <FetchNodeConfigPanel
         v-if="configSource === 'fetch'"
         :node="node"
+        :graph-nodes="graphNodes"
+        :graph-edges="graphEdges"
+        :trace-entries="traceEntries"
         :on-update-node="onUpdateNode"
       />
       <JsonNodeConfigPanel
@@ -307,8 +391,12 @@ function handleConfigSourceChange(value: string) {
         v-if="configSource === 'and'"
         class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
       >
-        <div class="font-medium text-foreground">{{ t("blueprint.config.andTitle") }}</div>
-        <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.andHint") }}</p>
+        <div class="flex items-center gap-1.5">
+          <div class="font-medium text-foreground">{{ t("blueprint.config.andTitle") }}</div>
+          <ConfigHintIcon :label="t('blueprint.config.andTitle')">
+            {{ t("blueprint.config.andHint") }}
+          </ConfigHintIcon>
+        </div>
       </div>
 
       <template v-if="configSource === 'logic'">

package/src/blueprintNodeTypes.ts

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

package/src/components/BlueprintCanvas.vue

@@ -105,6 +105,7 @@ const {
   onEdgesChange,
   onNodeDragStop,
   onConnect,
+  onConnectEnd,
   isValidConnection,
 } = flowState;
 
@@ -201,6 +202,7 @@ function handleDeleteEdge(edgeId: string) {
       @nodes-change="onNodesChange"
       @edges-change="onEdgesChange"
       @connect="onConnect"
+      @connect-end="onConnectEnd"
       :is-valid-connection="isValidConnection"
       @node-drag-stop="onNodeDragStop"
       @pane-context-menu="onPaneContextMenu"

package/src/components/BlueprintContextMenu.vue

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

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { Checkbox, Input } from "ant-design-vue";
 import type { ClockNodeConfig } from "@arronqzy/blueprint-dsl";
 
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeClockConfig } from "../graph/document";
 
@@ -60,11 +61,20 @@ function handleEmitImmediatelyChange(checked: boolean) {
 
 <template>
   <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-    <div class="font-medium text-foreground">{{ t("blueprint.config.clockTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.clockHint") }}</p>
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.clockTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.clockTitle')">
+        {{ t("blueprint.config.clockHint") }}
+      </ConfigHintIcon>
+    </div>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.clockIntervalSeconds") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.clockIntervalSeconds") }}
+        <ConfigHintIcon :label="t('blueprint.config.clockIntervalSeconds')">
+          {{ t("blueprint.config.clockIntervalHint") }}
+        </ConfigHintIcon>
+      </span>
       <Input
         type="number"
         :min="0"
@@ -73,13 +83,15 @@ function handleEmitImmediatelyChange(checked: boolean) {
         :value="clockConfig.intervalSeconds"
         @update:value="handleIntervalChange"
       />
-      <p class="text-[11px] text-muted-foreground">
-        {{ t("blueprint.config.clockIntervalHint") }}
-      </p>
     </label>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.outputCount") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.outputCount") }}
+        <ConfigHintIcon :label="t('blueprint.config.outputCount')">
+          {{ t("blueprint.config.outputCountHint") }}
+        </ConfigHintIcon>
+      </span>
       <Input
         type="number"
         :min="1"
@@ -88,9 +100,6 @@ function handleEmitImmediatelyChange(checked: boolean) {
         :value="clockConfig.outputCount"
         @update:value="handleOutputCountChange"
       />
-      <p class="text-[11px] text-muted-foreground">
-        {{ t("blueprint.config.outputCountHint") }}
-      </p>
     </label>
 
     <label class="flex items-start gap-2">
@@ -105,7 +114,12 @@ function handleEmitImmediatelyChange(checked: boolean) {
     </label>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.timeFormat") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.timeFormat") }}
+        <ConfigHintIcon :label="t('blueprint.config.timeFormat')">
+          {{ t("blueprint.config.timeFormatHint") }}
+        </ConfigHintIcon>
+      </span>
       <Input
         size="small"
         :value="clockConfig.timeFormat"
@@ -114,9 +128,6 @@ function handleEmitImmediatelyChange(checked: boolean) {
         placeholder="YYYY-MM-DD HH:mm:ss"
         @input="handleFormatChange"
       />
-      <p class="text-[11px] text-muted-foreground">
-        {{ t("blueprint.config.timeFormatHint") }}
-      </p>
     </label>
   </div>
 </template>

package/src/components/ConfigHintIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "@arronqzy/i18n/vue";
+import { Tooltip } from "ant-design-vue";
+
+const { t } = useI18n();
+const props = defineProps<{
+  label?: string;
+  contentClass?: string;
+  buttonClass?: string;
+}>();
+
+const resolvedLabel = computed(() => props.label || t("common.hint"));
+</script>
+
+<template>
+  <Tooltip
+    placement="top"
+    :overlay-class-name="`z-[10120] max-w-[360px] text-[11px] leading-5 ${contentClass ?? ''}`"
+    :mouse-enter-delay="0.12"
+  >
+    <template #title>
+      <div class="space-y-1.5">
+        <slot />
+      </div>
+    </template>
+    <button
+      type="button"
+      :class="
+        buttonClass ??
+        '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>
+  </Tooltip>
+</template>