@arronqzy/vue-blueprint 0.1.0

package/src/library/execution-log-db.ts

@@ -0,0 +1,171 @@
+import type { ExecutionRunRecord } from "@arronqzy/blueprint-dsl";
+
+const DB_NAME = "arronqzy-blueprint-execution-log";
+const DB_VERSION = 1;
+const STORE_NAME = "runs";
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: "runId" });
+        store.createIndex("startedAt", "startedAt", { unique: false });
+        store.createIndex("blueprintId", "blueprintId", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+  return openDb().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, mode);
+        const store = tx.objectStore(STORE_NAME);
+        const request = runner(store);
+        let result!: T;
+
+        request.onerror = () =>
+          reject(request.error ?? new Error("indexeddb-request-failed"));
+        request.onsuccess = () => {
+          result = request.result as T;
+        };
+
+        tx.oncomplete = () => {
+          db.close();
+          resolve(result);
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+}
+
+export async function putExecutionRunRecord(
+  record: ExecutionRunRecord
+): Promise<ExecutionRunRecord> {
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  return record;
+}
+
+export async function getExecutionRunRecord(
+  runId: string
+): Promise<ExecutionRunRecord | null> {
+  const record = await runTransaction<ExecutionRunRecord | undefined>(
+    "readonly",
+    (store) => store.get(runId)
+  );
+  return record ?? null;
+}
+
+export async function listExecutionRunRecords(
+  blueprintId?: string | null
+): Promise<ExecutionRunRecord[]> {
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  const filtered = blueprintId
+    ? records.filter((item) => item.blueprintId === blueprintId)
+    : records;
+  return filtered.sort((a, b) => b.startedAt - a.startedAt);
+}
+
+export async function deleteExecutionRunRecord(runId: string): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(runId));
+}
+
+export async function clearAllExecutionRunRecords(): Promise<number> {
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  if (records.length === 0) return 0;
+
+  await runTransaction<undefined>("readwrite", (store) => store.clear());
+  return records.length;
+}
+
+export async function trimExecutionRunRecordsToMax(
+  maxCount: number
+): Promise<number> {
+  if (!Number.isFinite(maxCount) || maxCount < 1) return 0;
+
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  if (records.length <= maxCount) return 0;
+
+  const sorted = [...records].sort((a, b) => b.startedAt - a.startedAt);
+  const overflow = sorted.slice(maxCount);
+  if (overflow.length === 0) return 0;
+
+  await openDb().then(
+    (db) =>
+      new Promise<void>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, "readwrite");
+        const store = tx.objectStore(STORE_NAME);
+        for (const item of overflow) {
+          store.delete(item.runId);
+        }
+        tx.oncomplete = () => {
+          db.close();
+          resolve();
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+
+  return overflow.length;
+}
+
+export async function purgeExecutionRunsOlderThan(cutoffMs: number): Promise<number> {
+  const records = await runTransaction<ExecutionRunRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  const stale = records.filter((item) => item.startedAt < cutoffMs);
+  if (stale.length === 0) return 0;
+
+  await openDb().then(
+    (db) =>
+      new Promise<void>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, "readwrite");
+        const store = tx.objectStore(STORE_NAME);
+        for (const item of stale) {
+          store.delete(item.runId);
+        }
+        tx.oncomplete = () => {
+          db.close();
+          resolve();
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+
+  return stale.length;
+}
+
+export function downloadExecutionRunExport(record: ExecutionRunRecord) {
+  const blob = new Blob([JSON.stringify(record, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `blueprint-run-${record.runId}.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}

package/src/library/execution-log-settings.ts

@@ -0,0 +1,50 @@
+export type ExecutionLogSettings = {
+  retentionDays: number;
+  autoSave: boolean;
+  /** IndexedDB 中最多保留的日志条数 */
+  maxSavedRuns: number;
+};
+
+const SETTINGS_KEY = "arronqzy-blueprint-execution-log-settings";
+
+export const DEFAULT_EXECUTION_LOG_SETTINGS: ExecutionLogSettings = {
+  retentionDays: 7,
+  autoSave: true,
+  maxSavedRuns: 80,
+};
+
+export function readExecutionLogSettings(): ExecutionLogSettings {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY);
+    if (!raw) return { ...DEFAULT_EXECUTION_LOG_SETTINGS };
+    const parsed = JSON.parse(raw) as Partial<ExecutionLogSettings>;
+    return {
+      retentionDays:
+        typeof parsed.retentionDays === "number" && parsed.retentionDays > 0
+          ? parsed.retentionDays
+          : DEFAULT_EXECUTION_LOG_SETTINGS.retentionDays,
+      autoSave:
+        typeof parsed.autoSave === "boolean"
+          ? parsed.autoSave
+          : DEFAULT_EXECUTION_LOG_SETTINGS.autoSave,
+      maxSavedRuns:
+        typeof parsed.maxSavedRuns === "number" && parsed.maxSavedRuns > 0
+          ? Math.floor(parsed.maxSavedRuns)
+          : DEFAULT_EXECUTION_LOG_SETTINGS.maxSavedRuns,
+    };
+  } catch {
+    return { ...DEFAULT_EXECUTION_LOG_SETTINGS };
+  }
+}
+
+export function writeExecutionLogSettings(settings: ExecutionLogSettings) {
+  try {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+  } catch {
+    // ignore storage errors
+  }
+}
+
+export function retentionCutoffMs(retentionDays: number) {
+  return Date.now() - retentionDays * 24 * 60 * 60 * 1000;
+}

package/src/library/swagger-docs.ts

@@ -0,0 +1,56 @@
+import {
+  parseSwaggerDocument,
+  type ParsedSwaggerDocument,
+} from "@arronqzy/blueprint-dsl";
+
+export async function loadSwaggerDocument(
+  docsUrl: string,
+  signal?: AbortSignal
+): Promise<ParsedSwaggerDocument> {
+  const trimmed = docsUrl.trim();
+  if (!trimmed) {
+    throw new Error("请输入 Swagger 文档 URL");
+  }
+
+  if (signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
+
+  let response: Response;
+  try {
+    response = await fetch(trimmed, {
+      method: "GET",
+      credentials: "same-origin",
+      signal,
+    });
+  } catch (error) {
+    if (signal?.aborted || (error instanceof DOMException && error.name === "AbortError")) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    throw new Error(
+      error instanceof Error ? error.message : "无法请求 Swagger 文档"
+    );
+  }
+
+  if (signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
+
+  if (!response.ok) {
+    throw new Error(`Swagger 文档请求失败: HTTP ${response.status}`);
+  }
+
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("text/html")) {
+    throw new Error("返回内容为 HTML，请填写 OpenAPI/Swagger 的 JSON 地址");
+  }
+
+  let spec: unknown;
+  try {
+    spec = await response.json();
+  } catch {
+    throw new Error("Swagger 文档不是有效的 JSON");
+  }
+
+  return parseSwaggerDocument(spec, trimmed);
+}

package/src/library/types.ts

@@ -0,0 +1,35 @@
+import type { BlueprintDocument } from "../graph/document";
+
+export type BlueprintLibrarySource = "saved" | "imported";
+
+export type BlueprintLibraryRecord = {
+  id: string;
+  name: string;
+  remark?: string;
+  source: BlueprintLibrarySource;
+  createdAt: number;
+  updatedAt: number;
+  document: BlueprintDocument;
+};
+
+export type BlueprintLibraryListItem = Pick<
+  BlueprintLibraryRecord,
+  "id" | "name" | "remark" | "source" | "updatedAt"
+>;
+
+export const BLUEPRINT_EXPORT_KIND = "arronqzy-blueprint" as const;
+export const BLUEPRINT_EXPORT_VERSION = 1 as const;
+
+export type BlueprintExportPayload = {
+  kind: typeof BLUEPRINT_EXPORT_KIND;
+  version: typeof BLUEPRINT_EXPORT_VERSION;
+  name: string;
+  remark?: string;
+  exportedAt: number;
+  document: BlueprintDocument;
+};
+
+export type BlueprintMetaDraft = {
+  name: string;
+  remark: string;
+};

package/src/nodes/AndFlowNode.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Handle, Position, type NodeProps } from "@vue-flow/core";
+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 BlueprintNodeCard from "./BlueprintNodeCard.vue";
+import { cn } from "../utils/cn";
+
+const props = defineProps<NodeProps<BlueprintFlowNodeData>>();
+const onSelect = useBlueprintNodeSelect();
+const nodeData = props.data;
+const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'bp-node bp-node--and',
+        executionTone === 'success' && 'bp-node--execution-true',
+        executionTone === 'error' && 'bp-node--execution-false'
+      )
+    "
+  >
+    <Handle
+      type="target"
+      :position="Position.Left"
+      id="inA"
+      class="bp-flow-handle bp-flow-handle--target"
+      :style="{ top: '35%' }"
+      title="输入 A（多连线为或）"
+    />
+    <Handle
+      type="target"
+      :position="Position.Left"
+      id="inB"
+      class="bp-flow-handle bp-flow-handle--target"
+      :style="{ top: '65%' }"
+      title="输入 B（多连线为或）"
+    />
+    <BlueprintNodeCard
+      :node-id="props.id"
+      :label="nodeData.label"
+      :meta="resolveBlueprintNodeTypeLabel(nodeData)"
+      :subtitle="resolveBlueprintNodeSummary(nodeData)"
+      variant="and"
+      :selected="Boolean(nodeData.isSelected)"
+      @select="onSelect"
+    />
+    <Handle
+      type="source"
+      :position="Position.Right"
+      id="out"
+      class="bp-flow-handle bp-flow-handle--source"
+      title="两路均为真时输出真信号"
+    />
+  </div>
+</template>

package/src/nodes/BlueprintFlowNode.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NodeProps } from "@vue-flow/core";
+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.vue";
+
+const props = defineProps<NodeProps<BlueprintFlowNodeData>>();
+const onSelect = useBlueprintNodeSelect();
+const nodeData = props.data;
+</script>
+
+<template>
+  <BlueprintNodeShell
+    :node-id="props.id"
+    :label="nodeData.label"
+    :meta="resolveBlueprintNodeTypeLabel(nodeData)"
+    :subtitle="resolveBlueprintNodeSummary(nodeData)"
+    variant="blueprint"
+    :selected="Boolean(nodeData.isSelected)"
+    :execution-tone="resolveBlueprintNodeExecutionTone(nodeData)"
+    @select="onSelect"
+  />
+</template>

package/src/nodes/BlueprintNodeCard.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { cn } from "../utils/cn";
+
+export type BlueprintNodeCardProps = {
+  nodeId: string;
+  label: string;
+  meta?: string;
+  subtitle?: string;
+  progressLabel?: string;
+  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+  selected?: boolean;
+  hideLeadingDot?: boolean;
+};
+
+const props = withDefaults(defineProps<BlueprintNodeCardProps>(), {
+  variant: "blueprint",
+  selected: false,
+  hideLeadingDot: false,
+});
+
+const emit = defineEmits<{
+  select: [nodeId: string];
+}>();
+
+const variantStyle = {
+  blueprint: {
+    accent: "border-l-primary",
+    badge: "bg-primary/10 text-primary",
+    dot: "bg-primary",
+  },
+  logic: {
+    accent: "border-l-sky-500 dark:border-l-sky-400",
+    badge: "bg-sky-500/10 text-sky-700 dark:text-sky-300",
+    dot: "bg-sky-500",
+  },
+  and: {
+    accent: "border-l-indigo-500 dark:border-l-indigo-400",
+    badge: "bg-indigo-500/10 text-indigo-700 dark:text-indigo-300",
+    dot: "bg-indigo-500",
+  },
+  lifecycle: {
+    accent: "border-l-amber-500 dark:border-l-amber-400",
+    badge: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    dot: "bg-amber-500",
+  },
+  fetch: {
+    accent: "border-l-violet-500 dark:border-l-violet-400",
+    badge: "bg-violet-500/10 text-violet-700 dark:text-violet-300",
+    dot: "bg-violet-500",
+  },
+  json: {
+    accent: "border-l-teal-500 dark:border-l-teal-400",
+    badge: "bg-teal-500/10 text-teal-700 dark:text-teal-300",
+    dot: "bg-teal-500",
+  },
+  clock: {
+    accent: "border-l-rose-500 dark:border-l-rose-400",
+    badge: "bg-rose-500/10 text-rose-700 dark:text-rose-300",
+    dot: "bg-rose-500",
+  },
+} as const;
+
+const v = variantStyle[props.variant];
+</script>
+
+<template>
+  <div
+    data-blueprint-node-card
+    :class="
+      cn(
+        'bp-node-card w-[168px] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm',
+        'transition-[box-shadow,border-color] duration-150',
+        hideLeadingDot
+          ? 'border-t-[3px] border-t-amber-500 dark:border-t-amber-400'
+          : cn('border-l-[3px]', v.accent),
+        selected &&
+          'border-primary/50 shadow-[0_0_0_1px_hsl(var(--primary)/0.35),0_4px_12px_hsl(var(--primary)/0.12)]'
+      )
+    "
+  >
+    <div
+      class="bp-flow-drag-handle flex cursor-grab items-center gap-2 border-b border-border/50 px-2 py-1.5 bg-muted/25 text-muted-foreground active:cursor-grabbing"
+      title="拖拽移动"
+    >
+      <div class="flex shrink-0 flex-col gap-[3px] opacity-35" aria-hidden="true">
+        <span class="flex gap-[3px]">
+          <span class="h-[3px] w-[3px] rounded-full bg-current" />
+          <span class="h-[3px] w-[3px] rounded-full bg-current" />
+        </span>
+        <span class="flex gap-[3px]">
+          <span class="h-[3px] w-[3px] rounded-full bg-current" />
+          <span class="h-[3px] w-[3px] rounded-full bg-current" />
+        </span>
+      </div>
+      <span
+        v-if="meta"
+        :class="
+          cn(
+            'min-w-0 flex-1 truncate rounded px-1.5 py-0.5 text-[10px] font-medium leading-none tracking-wide',
+            v.badge
+          )
+        "
+        :title="meta"
+      >
+        {{ meta }}
+      </span>
+    </div>
+
+    <button
+      type="button"
+      :class="
+        cn(
+          'nodrag flex w-full text-left outline-none transition-colors hover:bg-accent/30',
+          'focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset',
+          hideLeadingDot
+            ? cn('px-2.5 py-2', subtitle ? 'items-start' : 'items-center')
+            : 'items-start gap-2 px-2.5 py-2'
+        )
+      "
+      @click.stop="emit('select', nodeId)"
+    >
+      <span
+        v-if="!hideLeadingDot"
+        :class="cn('mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full', v.dot)"
+        aria-hidden="true"
+      />
+      <div class="min-w-0 flex-1">
+        <div class="flex items-start gap-1.5">
+          <div class="min-w-0 flex-1 truncate text-[13px] font-medium leading-snug text-foreground">
+            {{ label }}
+          </div>
+          <span
+            v-if="progressLabel"
+            :class="
+              cn(
+                'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold leading-none',
+                v.badge
+              )
+            "
+            title="已发送信号次数"
+          >
+            {{ progressLabel }}
+          </span>
+        </div>
+        <div
+          v-if="subtitle"
+          class="mt-0.5 truncate font-mono text-[10px] leading-tight text-muted-foreground"
+          :title="subtitle"
+        >
+          {{ subtitle }}
+        </div>
+      </div>
+    </button>
+  </div>
+</template>

package/src/nodes/BlueprintNodeShell.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Handle, Position } from "@vue-flow/core";
+import BlueprintNodeCard, { type BlueprintNodeCardProps } from "./BlueprintNodeCard.vue";
+import type { BlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import { cn } from "../utils/cn";
+
+export type BlueprintNodeShellProps = BlueprintNodeCardProps & {
+  selected?: boolean;
+  executionTone?: BlueprintNodeExecutionTone | null;
+};
+
+const props = withDefaults(defineProps<BlueprintNodeShellProps>(), {
+  selected: false,
+  executionTone: null,
+});
+
+const {
+  nodeId,
+  label,
+  meta,
+  subtitle,
+  progressLabel,
+  variant,
+  selected,
+  hideLeadingDot,
+  executionTone,
+} = props;
+
+const emit = defineEmits<{
+  select: [nodeId: string];
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'bp-node',
+        executionTone === 'success' && 'bp-node--execution-true',
+        executionTone === 'error' && 'bp-node--execution-false'
+      )
+    "
+  >
+    <Handle
+      type="target"
+      :position="Position.Left"
+      id="in"
+      class="bp-flow-handle bp-flow-handle--target"
+      title="真/假信号输入"
+    />
+    <BlueprintNodeCard
+      :node-id="nodeId"
+      :label="label"
+      :meta="meta"
+      :subtitle="subtitle"
+      :progress-label="progressLabel"
+      :variant="variant"
+      :selected="selected"
+      :hide-leading-dot="hideLeadingDot"
+      @select="emit('select', $event)"
+    />
+    <Handle
+      type="source"
+      :position="Position.Right"
+      id="out"
+      class="bp-flow-handle bp-flow-handle--source"
+      title="真/假信号输出"
+    />
+  </div>
+</template>

package/src/nodes/ClockFlowNode.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { NodeProps } from "@vue-flow/core";
+import { computed } from "vue";
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import {
+  useBlueprintClockAbort,
+  useBlueprintNodeSelect,
+  useClockNodeCanAbort,
+} from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import BlueprintNodeShell from "./BlueprintNodeShell.vue";
+import { cn } from "../utils/cn";
+
+const props = defineProps<NodeProps<BlueprintFlowNodeData>>();
+const onSelect = useBlueprintNodeSelect();
+const onAbortClock = useBlueprintClockAbort();
+const canAbort = useClockNodeCanAbort(props.id);
+const nodeData = props.data;
+
+const progressLabel = computed(() => {
+  const progress = nodeData.clockEmitProgress;
+  return progress ? `${progress.current}/${progress.total}` : undefined;
+});
+</script>
+
+<template>
+  <div class="relative">
+    <BlueprintNodeShell
+      :node-id="props.id"
+      :label="nodeData.label"
+      :meta="resolveBlueprintNodeTypeLabel(nodeData)"
+      :subtitle="resolveBlueprintNodeSummary(nodeData)"
+      :progress-label="progressLabel"
+      variant="clock"
+      :selected="Boolean(nodeData.isSelected)"
+      :execution-tone="resolveBlueprintNodeExecutionTone(nodeData)"
+      @select="onSelect"
+    />
+    <button
+      v-if="canAbort"
+      type="button"
+      :class="
+        cn(
+          'nodrag nopan absolute right-1.5 top-1.5 z-10 flex h-5 w-5 items-center justify-center',
+          'rounded border border-rose-500/50 bg-rose-500/15 text-rose-600 shadow-sm',
+          'hover:bg-rose-500/25 dark:text-rose-300'
+        )
+      "
+      title="中止时钟：停止剩余次数与正在执行的下游任务"
+      @pointerdown.stop
+      @click.stop="onAbortClock(props.id)"
+    >
+      <svg viewBox="0 0 24 24" class="h-3 w-3" aria-hidden="true">
+        <rect x="6" y="6" width="12" height="12" rx="1.5" fill="currentColor" />
+      </svg>
+    </button>
+  </div>
+</template>