@arronqzy/vue-blueprint 0.1.0

package/src/components/BlueprintContextMenu.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { onUnmounted, ref, watch } from "vue";
+
+export type BlueprintContextMenuState =
+  | {
+      kind: "pane";
+      clientX: number;
+      clientY: number;
+    }
+  | {
+      kind: "node";
+      clientX: number;
+      clientY: number;
+      nodeId: string;
+      role: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+    }
+  | {
+      kind: "edge";
+      clientX: number;
+      clientY: number;
+      edgeId: string;
+    };
+
+const props = defineProps<{
+  menu: BlueprintContextMenuState | null;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  addBlueprintNode: [clientX: number, clientY: number];
+  deleteNode: [nodeId: string];
+  deleteEdge: [edgeId: string];
+}>();
+
+const menuRef = ref<HTMLDivElement | null>(null);
+let cleanupListeners: (() => void) | null = null;
+
+function closeOnPointerDown(event: Event) {
+  const target = event.target as globalThis.Node | null;
+  if (target && menuRef.value?.contains(target)) return;
+  emit("close");
+}
+
+watch(
+  () => props.menu,
+  (menu) => {
+    cleanupListeners?.();
+    cleanupListeners = null;
+    if (!menu) return;
+
+    const close = () => emit("close");
+    window.addEventListener("pointerdown", closeOnPointerDown);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    cleanupListeners = () => {
+      window.removeEventListener("pointerdown", closeOnPointerDown);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  cleanupListeners?.();
+});
+</script>
+
+<template>
+  <div
+    v-if="menu"
+    ref="menuRef"
+    class="bp-context-menu"
+    :style="{ left: `${menu.clientX}px`, top: `${menu.clientY}px` }"
+    @mousedown.stop
+    @contextmenu.prevent
+  >
+    <button
+      v-if="menu.kind === 'pane'"
+      type="button"
+      class="bp-context-menu__item"
+      @click="
+        emit('addBlueprintNode', menu.clientX, menu.clientY);
+        emit('close');
+      "
+    >
+      新增节点
+    </button>
+
+    <button
+      v-else-if="menu.kind === 'node'"
+      type="button"
+      class="bp-context-menu__item bp-context-menu__item--danger"
+      @click="
+        emit('deleteNode', menu.nodeId);
+        emit('close');
+      "
+    >
+      删除节点
+    </button>
+
+    <button
+      v-else-if="menu.kind === 'edge'"
+      type="button"
+      class="bp-context-menu__item bp-context-menu__item--danger"
+      @click="
+        emit('deleteEdge', menu.edgeId);
+        emit('close');
+      "
+    >
+      删除连线
+    </button>
+  </div>
+</template>

package/src/components/BlueprintExecutionLogPanel.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import { Button, Checkbox, Input, Tooltip } from "ant-design-vue";
+import {
+  PAGE_LIFECYCLE_LABELS,
+  type ExecutionTraceEntry,
+  type PageLifecyclePhase,
+} from "@arronqzy/blueprint-dsl";
+
+import type { ExecutionLogSettings } from "../library/execution-log-settings";
+import { cn } from "../utils/cn";
+
+export type BlueprintExecutionLogPanelProps = {
+  entries: ExecutionTraceEntry[];
+  settings: ExecutionLogSettings;
+  onUpdateSettings: (patch: Partial<ExecutionLogSettings>) => void;
+  onSave: () => void;
+  onExport: () => void;
+  onClear: () => void;
+  onClearAllSaved?: () => void | Promise<void>;
+  onApplyRetention: () => void;
+  hasSavedRuns?: boolean;
+  lifecyclePhase?: string;
+};
+
+const props = withDefaults(defineProps<BlueprintExecutionLogPanelProps>(), {
+  hasSavedRuns: false,
+});
+
+const scrollRef = ref<HTMLDivElement | null>(null);
+const bottomRef = ref<HTMLDivElement | null>(null);
+const prevEntryCount = ref(props.entries.length);
+const stickToBottom = ref(true);
+const hasNewBelow = ref(false);
+
+const SCROLL_BOTTOM_THRESHOLD = 48;
+
+function isScrollNearBottom(element: HTMLElement) {
+  return (
+    element.scrollHeight - element.scrollTop - element.clientHeight <=
+    SCROLL_BOTTOM_THRESHOLD
+  );
+}
+
+function formatJson(value: unknown) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+const phaseLabel = computed(() => {
+  if (!props.lifecyclePhase) return null;
+  return (
+    PAGE_LIFECYCLE_LABELS[props.lifecyclePhase as PageLifecyclePhase] ??
+    props.lifecyclePhase
+  );
+});
+
+const latestEntryPreview = computed(() => {
+  const latest = props.entries[props.entries.length - 1];
+  if (!latest) return "";
+  return latest.nodeLabel ?? latest.nodeId;
+});
+
+async function scrollToBottom(behavior: ScrollBehavior = "smooth") {
+  await nextTick();
+  bottomRef.value?.scrollIntoView({ behavior, block: "end" });
+  stickToBottom.value = true;
+  hasNewBelow.value = false;
+}
+
+function handleScroll() {
+  const el = scrollRef.value;
+  if (!el) return;
+  const nearBottom = isScrollNearBottom(el);
+  stickToBottom.value = nearBottom;
+  if (nearBottom) {
+    hasNewBelow.value = false;
+  }
+}
+
+watch(
+  () => props.entries,
+  (entries) => {
+    const prevCount = prevEntryCount.value;
+    prevEntryCount.value = entries.length;
+
+    if (entries.length === 0) {
+      hasNewBelow.value = false;
+      stickToBottom.value = true;
+      return;
+    }
+
+    if (entries.length <= prevCount) return;
+
+    if (stickToBottom.value) {
+      void scrollToBottom(prevCount === 0 ? "auto" : "smooth");
+      return;
+    }
+
+    hasNewBelow.value = true;
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
+    <div class="shrink-0 border-b border-border px-3 py-2">
+      <div class="flex items-start justify-between gap-2">
+        <div class="min-w-0">
+          <div class="text-xs font-semibold">蓝图任务输出日志</div>
+          <div class="mt-0.5 text-[11px] text-muted-foreground">
+            {{ phaseLabel ? `模拟场景：${phaseLabel}` : "选择生命周期节点并开始调试" }}
+          </div>
+        </div>
+        <div class="flex shrink-0 items-center gap-1">
+          <Tooltip
+            v-if="onClearAllSaved"
+            title="立即清空 IndexedDB 中所有已保存的蓝图执行日志"
+          >
+            <Button
+              size="small"
+              class="h-7 w-7 shrink-0"
+              aria-label="清空 IndexedDB 日志"
+              :disabled="!hasSavedRuns"
+              @click="() => void onClearAllSaved?.()"
+            >
+              🗄✕
+            </Button>
+          </Tooltip>
+          <Tooltip title="清空当前日志，并重置画布执行高亮">
+            <Button
+              size="small"
+              class="h-7 w-7 shrink-0"
+              aria-label="清空日志"
+              :disabled="entries.length === 0"
+              @click="onClear"
+            >
+              🗑
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative min-h-0 flex-1">
+      <div ref="scrollRef" class="h-full overflow-auto p-3" @scroll="handleScroll">
+        <p v-if="entries.length === 0" class="text-[11px] text-muted-foreground">
+          暂无执行记录。使用工具栏「走完全流程」或「下一步」开始模拟。
+        </p>
+        <div v-else class="space-y-0">
+          <div v-for="(entry, index) in entries" :key="entry.id">
+            <div class="rounded-md border border-border/70 bg-muted/20 p-2.5">
+              <div class="flex items-start justify-between gap-2">
+                <div>
+                  <div class="text-xs font-medium text-foreground">
+                    {{ entry.nodeLabel ?? entry.nodeId }}
+                  </div>
+                  <div class="mt-0.5 font-mono text-[10px] text-muted-foreground">
+                    {{ entry.nodeType }} · {{ entry.nodeId }}
+                  </div>
+                </div>
+                <time class="shrink-0 text-[10px] text-muted-foreground">
+                  {{ entry.isoTime }}
+                </time>
+              </div>
+
+              <div class="mt-2 grid gap-2">
+                <div>
+                  <div class="mb-1 text-[10px] font-medium text-muted-foreground">输入</div>
+                  <pre
+                    class="max-h-32 overflow-auto rounded border border-border/60 bg-background p-2 font-mono text-[10px] leading-relaxed text-foreground"
+                  >{{ formatJson(entry.inputs) }}</pre>
+                </div>
+                <div>
+                  <div class="mb-1 text-[10px] font-medium text-muted-foreground">输出</div>
+                  <pre
+                    class="max-h-32 overflow-auto rounded border p-2 font-mono text-[10px] leading-relaxed"
+                    :class="
+                      cn(
+                        entry.error
+                          ? 'border-destructive/40 bg-destructive/5 text-destructive'
+                          : 'border-border/60 bg-background text-foreground'
+                      )
+                    "
+                  >{{ entry.error ?? formatJson(entry.outputs) }}</pre>
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="index < entries.length - 1"
+              class="flex justify-center py-1 text-muted-foreground"
+            >
+              ↓
+            </div>
+          </div>
+        </div>
+        <div ref="bottomRef" class="h-px shrink-0" aria-hidden="true" />
+      </div>
+
+      <div
+        v-if="hasNewBelow"
+        class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center px-3"
+      >
+        <button
+          type="button"
+          class="pointer-events-auto inline-flex max-w-full items-center gap-1.5 rounded-full border border-primary/30 bg-primary px-3 py-1.5 text-[11px] font-medium text-primary-foreground shadow-md transition hover:bg-primary/90"
+          @click="() => void scrollToBottom('smooth')"
+        >
+          <span class="shrink-0">↓</span>
+          <span class="truncate">有新日志</span>
+          <span v-if="latestEntryPreview" class="truncate opacity-90">
+            · {{ latestEntryPreview }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="shrink-0 space-y-2 border-t border-border p-3 text-xs">
+      <div class="grid grid-cols-2 gap-2">
+        <Tooltip title="将当前调试日志保存到 IndexedDB">
+          <Button size="small" block :disabled="entries.length === 0" @click="onSave">
+            保存日志
+          </Button>
+        </Tooltip>
+        <Tooltip title="将当前调试日志导出为 JSON 文件">
+          <Button size="small" block :disabled="entries.length === 0" @click="onExport">
+            导出 JSON
+          </Button>
+        </Tooltip>
+      </div>
+
+      <Tooltip title="调试运行完成后，自动将日志写入 IndexedDB">
+        <label class="flex cursor-default items-center gap-2">
+          <Checkbox
+            :checked="settings.autoSave"
+            @update:checked="(v) => onUpdateSettings({ autoSave: Boolean(v) })"
+          />
+          <span class="text-[11px] text-muted-foreground">
+            运行完成后自动保存到 IndexedDB
+          </span>
+        </label>
+      </Tooltip>
+
+      <div class="grid grid-cols-2 gap-2">
+        <Tooltip title="IndexedDB 中最多保留的日志条数，超出后自动删除最旧记录">
+          <div class="space-y-1">
+            <span class="text-[11px] text-muted-foreground">最多保存条数</span>
+            <Input
+              type="number"
+              size="small"
+              :min="1"
+              :step="1"
+              :value="settings.maxSavedRuns"
+              aria-label="IndexedDB 最多保存日志条数"
+              @update:value="
+                (v) =>
+                  onUpdateSettings({
+                    maxSavedRuns: Math.max(1, Number(v) || 1),
+                  })
+              "
+            />
+          </div>
+        </Tooltip>
+        <Tooltip title="超过保留天数的已保存日志将在清理时被删除">
+          <div class="space-y-1">
+            <span class="text-[11px] text-muted-foreground">保留天数</span>
+            <Input
+              type="number"
+              size="small"
+              :min="1"
+              :step="1"
+              :value="settings.retentionDays"
+              aria-label="日志保留天数"
+              @update:value="
+                (v) =>
+                  onUpdateSettings({
+                    retentionDays: Math.max(1, Number(v) || 1),
+                  })
+              "
+            />
+          </div>
+        </Tooltip>
+      </div>
+
+      <Tooltip title="按保留天数与条数上限，清理 IndexedDB 中的日志记录">
+        <Button size="small" block @click="onApplyRetention">清理过期与超额</Button>
+      </Tooltip>
+    </div>
+  </div>
+</template>

package/src/components/BlueprintMetaDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Button, Input, Modal } from "ant-design-vue";
+
+import type { BlueprintMetaDraft } from "../library/types";
+
+export type BlueprintMetaDialogProps = {
+  open: boolean;
+  mode: "export" | "save";
+  initialMeta: BlueprintMetaDraft;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (meta: BlueprintMetaDraft) => void;
+};
+
+const props = defineProps<BlueprintMetaDialogProps>();
+
+const name = ref(props.initialMeta.name);
+const remark = ref(props.initialMeta.remark);
+
+watch(
+  () => [props.open, props.initialMeta.name, props.initialMeta.remark] as const,
+  ([open, nextName, nextRemark]) => {
+    if (!open) return;
+    name.value = nextName;
+    remark.value = nextRemark;
+  }
+);
+
+const title = () => (props.mode === "export" ? "导出蓝图" : "保存蓝图");
+const description = () =>
+  props.mode === "export"
+    ? "填写蓝图名称与备注，将当前蓝图导出为 JSON 文件。"
+    : "填写蓝图名称与备注，将当前蓝图保存到本地蓝图库。";
+const confirmLabel = () => (props.mode === "export" ? "导出" : "保存");
+
+function handleConfirm() {
+  props.onConfirm({
+    name: name.value.trim() || "未命名蓝图",
+    remark: remark.value.trim(),
+  });
+  props.onOpenChange(false);
+}
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    :title="title()"
+    :ok-text="confirmLabel()"
+    cancel-text="取消"
+    @update:open="onOpenChange"
+    @ok="handleConfirm"
+  >
+    <p class="mb-3 text-xs text-muted-foreground">{{ description() }}</p>
+    <div class="space-y-3">
+      <label class="block space-y-1">
+        <span class="text-sm">蓝图名称</span>
+        <Input
+          id="blueprint-meta-name"
+          v-model:value="name"
+          placeholder="例如：首页初始化流程"
+          autofocus
+        />
+      </label>
+      <label class="block space-y-1">
+        <span class="text-sm">蓝图备注</span>
+        <Input.TextArea
+          id="blueprint-meta-remark"
+          v-model:value="remark"
+          placeholder="可选：描述蓝图用途、触发条件等"
+          :rows="3"
+        />
+      </label>
+    </div>
+    <template #footer>
+      <Button @click="onOpenChange(false)">取消</Button>
+      <Button type="primary" @click="handleConfirm">{{ confirmLabel() }}</Button>
+    </template>
+  </Modal>
+</template>

package/src/components/BlueprintNodeSwitchTaskDialog.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Button, Modal } from "ant-design-vue";
+
+export type BlueprintNodeSwitchTaskDialogProps = {
+  open: boolean;
+  fromNodeId: string;
+  toNodeId: string | null;
+  onOpenChange: (open: boolean) => void;
+  onKeepTaskAndSwitch: () => void;
+  onCancelTaskAndSwitch: () => void;
+};
+
+const props = defineProps<BlueprintNodeSwitchTaskDialogProps>();
+
+const targetLabel = computed(() =>
+  props.toNodeId === null ? "取消选中" : `节点 ${props.toNodeId}`
+);
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    title="节点正在执行任务"
+    :footer="null"
+    @update:open="onOpenChange"
+  >
+    <p class="text-sm text-muted-foreground">
+      节点 <span class="font-mono text-foreground">{{ fromNodeId }}</span>
+      正在执行任务（Swagger 解析或请求调试）。是否切换到 {{ targetLabel }}？
+    </p>
+    <p class="mt-2 text-xs text-muted-foreground">
+      选择「保留并切换」将在后台继续执行，回到该节点时仍能看到进度；选择「取消并切换」会中止当前任务。
+    </p>
+    <div class="mt-4 flex flex-wrap justify-end gap-2">
+      <Button @click="onOpenChange(false)">留在此节点</Button>
+      <Button @click="onCancelTaskAndSwitch">取消并切换</Button>
+      <Button type="primary" @click="onKeepTaskAndSwitch">保留并切换</Button>
+    </div>
+  </Modal>
+</template>

package/src/components/ClockNodeConfigPanel.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Checkbox, Input } from "ant-design-vue";
+import type { ClockNodeConfig } from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraphNode } from "../graph/document";
+import { resolveNodeClockConfig } from "../graph/document";
+
+export type ClockNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "clockConfig" | "configSource">>
+  ) => void;
+};
+
+const props = defineProps<ClockNodeConfigPanelProps>();
+
+function patchClockConfig(node: BlueprintGraphNode, patch: Partial<ClockNodeConfig>) {
+  return {
+    clockConfig: { ...resolveNodeClockConfig(node), ...patch },
+    configSource: "clock" as const,
+  };
+}
+
+const clockConfig = computed(() => resolveNodeClockConfig(props.node));
+
+function handleIntervalChange(value: string | number) {
+  const raw = Number(value);
+  const intervalSeconds =
+    Number.isFinite(raw) && raw > 0 ? Math.floor(raw) : 0;
+  props.onUpdateNode(props.node.id, patchClockConfig(props.node, { intervalSeconds }));
+}
+
+function handleOutputCountChange(value: string | number) {
+  const raw = Number(value);
+  const outputCount = Number.isFinite(raw) && raw > 0 ? Math.floor(raw) : 1;
+  props.onUpdateNode(props.node.id, patchClockConfig(props.node, { outputCount }));
+}
+
+function handleFormatChange(event: Event) {
+  props.onUpdateNode(
+    props.node.id,
+    patchClockConfig(props.node, {
+      timeFormat: (event.target as HTMLInputElement).value,
+    })
+  );
+}
+
+function handleEmitImmediatelyChange(checked: boolean) {
+  props.onUpdateNode(
+    props.node.id,
+    patchClockConfig(props.node, { emitImmediately: checked })
+  );
+}
+</script>
+
+<template>
+  <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+    <div class="font-medium text-foreground">时钟节点</div>
+    <p class="text-[11px] text-muted-foreground">
+      收到<strong>真信号</strong>后才开始计时输出；每次输出向下游发出
+      <strong>真信号</strong>，值包含当前时间（formatted / timestamp / isoTime）。
+      假信号会原样向下游传递。
+    </p>
+
+    <label class="block space-y-1">
+      <span class="text-muted-foreground">时钟信号间隔（秒）</span>
+      <Input
+        type="number"
+        :min="0"
+        :step="1"
+        size="small"
+        :value="clockConfig.intervalSeconds"
+        @update:value="handleIntervalChange"
+      />
+      <p class="text-[11px] text-muted-foreground">
+        两次输出之间的间隔 n 秒；多次输出或未开启「立即发送」时须大于 0。
+      </p>
+    </label>
+
+    <label class="block space-y-1">
+      <span class="text-muted-foreground">输出次数</span>
+      <Input
+        type="number"
+        :min="1"
+        :step="1"
+        size="small"
+        :value="clockConfig.outputCount"
+        @update:value="handleOutputCountChange"
+      />
+      <p class="text-[11px] text-muted-foreground">
+        收到真信号后总共输出的次数，默认 1。
+      </p>
+    </label>
+
+    <label class="flex items-start gap-2">
+      <Checkbox
+        :checked="clockConfig.emitImmediately"
+        class="mt-0.5"
+        @update:checked="handleEmitImmediatelyChange"
+      />
+      <span class="text-[11px] leading-relaxed text-muted-foreground">
+        收到信号立即发送：开启且输出次数大于 1 时，会立刻执行第 1 次，剩余次数按间隔 m
+        秒依次执行；仅输出 1 次时也会立刻执行。关闭则每次（含首次）都先等待 m 秒。
+      </span>
+    </label>
+
+    <label class="block space-y-1">
+      <span class="text-muted-foreground">时间格式</span>
+      <Input
+        size="small"
+        :value="clockConfig.timeFormat"
+        spellcheck="false"
+        class="font-mono text-[11px]"
+        placeholder="YYYY-MM-DD HH:mm:ss"
+        @input="handleFormatChange"
+      />
+      <p class="text-[11px] text-muted-foreground">
+        支持 YYYY、MM、DD、HH、mm、ss，默认 YYYY-MM-DD HH:mm:ss。
+      </p>
+    </label>
+  </div>
+</template>