@arronqzy/vue-blueprint 0.1.13 → 0.1.16

package/src/components/ScopeTemplateAutocompleteHost.vue

@@ -66,17 +66,13 @@ function closeDropdown() {
 }
 
 function refreshForInput(input: HTMLInputElement | HTMLTextAreaElement) {
-  if (props.scope === undefined) {
-    closeDropdown();
-    return;
-  }
   const cursor = input.selectionStart ?? input.value.length;
-  const parsed = parseScopeAutocomplete(input.value, cursor, props.scope);
+  const parsed = parseScopeAutocomplete(input.value, cursor, props.scope ?? {});
   if (!parsed) {
     closeDropdown();
     return;
   }
-  const suggestions = getScopeAutocompleteSuggestions(props.scope, parsed);
+  const suggestions = getScopeAutocompleteSuggestions(props.scope ?? {}, parsed);
   if (suggestions.length === 0) {
     closeDropdown();
     return;
@@ -170,7 +166,7 @@ function onPointerDown(event: MouseEvent) {
 watch(
   () => toValue(props.containerRef),
   (container, _prev, onCleanup) => {
-    if (!container || props.scope === undefined) return;
+    if (!container) return;
 
     container.addEventListener("focusin", onFocusIn);
     container.addEventListener("input", onInput, true);
@@ -194,13 +190,15 @@ watch(
 watch(
   () => props.scope,
   () => {
-    if (props.scope === undefined) closeDropdown();
+    // scope 变化时刷新；system 联想不依赖 scope，勿因 undefined 关掉
+    const current = dropdown.value;
+    if (current) refreshForInput(current.input);
   }
 );
 </script>
 
 <template>
-  <Teleport v-if="dropdown && scope !== undefined" to="body">
+  <Teleport v-if="dropdown" to="body">
     <div
       data-scope-ac-list
       class="fixed z-[10120] max-h-44 min-w-[140px] overflow-auto rounded-md border border-border bg-white py-1 text-gray-800 shadow-md"

package/src/components/StorageKeyAutocomplete.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import {
+  filterStorageKeySuggestions,
+  listBrowserStorageKeys,
+  type StorageKind,
+} from "@arronqzy/blueprint-dsl";
+import { computed, onUnmounted, ref, watch } from "vue";
+
+import { cn } from "../utils/cn";
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    value: string;
+    storages: StorageKind | readonly StorageKind[];
+    placeholder?: string;
+  }>(),
+  {
+    placeholder: "",
+  }
+);
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+const open = ref(false);
+const activeIndex = ref(0);
+const keys = ref<string[]>([]);
+const containerRef = ref<HTMLDivElement | null>(null);
+
+const storageList = computed(() =>
+  Array.isArray(props.storages) ? [...props.storages] : [props.storages]
+);
+
+function refreshKeys() {
+  keys.value = listBrowserStorageKeys(storageList.value);
+}
+
+watch(
+  storageList,
+  () => {
+    refreshKeys();
+  },
+  { immediate: true, deep: true }
+);
+
+const filtered = computed(() =>
+  filterStorageKeySuggestions(keys.value, props.value)
+);
+
+watch([() => props.value, () => filtered.value.length], () => {
+  activeIndex.value = 0;
+});
+
+let pointerCleanup: (() => void) | null = null;
+
+watch(open, (isOpen) => {
+  pointerCleanup?.();
+  pointerCleanup = null;
+  if (!isOpen) return;
+  const onPointerDown = (event: MouseEvent) => {
+    if (!containerRef.value?.contains(event.target as globalThis.Node)) {
+      open.value = false;
+    }
+  };
+  window.addEventListener("pointerdown", onPointerDown);
+  pointerCleanup = () => window.removeEventListener("pointerdown", onPointerDown);
+});
+
+onUnmounted(() => {
+  pointerCleanup?.();
+});
+
+const showSuggestions = computed(() => open.value && keys.value.length > 0);
+
+function selectSuggestion(index: number) {
+  const item = filtered.value[index];
+  if (!item) return;
+  emit("change", item);
+  open.value = false;
+}
+
+function openDropdown() {
+  refreshKeys();
+  open.value = true;
+}
+
+function handleInput(event: Event) {
+  emit("change", (event.target as HTMLInputElement).value);
+  open.value = true;
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!showSuggestions.value || filtered.value.length === 0) {
+    if (event.key === "Escape") open.value = false;
+    return;
+  }
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    activeIndex.value = Math.min(activeIndex.value + 1, filtered.value.length - 1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    activeIndex.value = Math.max(activeIndex.value - 1, 0);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    selectSuggestion(activeIndex.value);
+  } else if (event.key === "Escape") {
+    open.value = false;
+  }
+}
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <input
+      :value="value"
+      :placeholder="placeholder"
+      spellcheck="false"
+      class="flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 font-mono text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+      @input="handleInput"
+      @focus="openDropdown"
+      @click="openDropdown"
+      @keydown="handleKeyDown"
+    />
+    <div
+      v-if="showSuggestions"
+      class="absolute z-[10150] mt-1 max-h-52 w-full overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md"
+    >
+      <div
+        v-if="filtered.length === 0"
+        class="px-2 py-1.5 text-[11px] text-muted-foreground"
+      >
+        {{ t("blueprint.config.noMatchingStorageKey") }}
+      </div>
+      <button
+        v-for="(key, index) in filtered"
+        :key="key"
+        type="button"
+        class="flex w-full items-center px-2 py-1.5 text-left font-mono text-[11px] hover:bg-accent"
+        :class="cn(index === activeIndex && 'bg-accent')"
+        @mousedown.prevent
+        @click="selectSuggestion(index)"
+      >
+        {{ key }}
+      </button>
+    </div>
+    <div
+      v-else-if="open && keys.length === 0"
+      class="absolute z-[10150] mt-1 w-full rounded-md border border-border bg-popover px-2 py-1.5 text-[11px] text-muted-foreground shadow-md"
+    >
+      {{ t("blueprint.config.noStorageKeys") }}
+    </div>
+  </div>
+</template>

package/src/components/StorageNodeConfigPanel.vue

@@ -19,6 +19,7 @@ import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeStorageConfig } from "../graph/document";
 import ConfigHintIcon from "./ConfigHintIcon.vue";
 import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
+import StorageKeyAutocomplete from "./StorageKeyAutocomplete.vue";
 
 const { t } = useI18n();
 
@@ -112,6 +113,12 @@ function handleSetValueChange(value: string) {
     patchStorageConfig(props.node, { set: { value: String(value ?? "") } })
   );
 }
+
+const setKeySuggestionStorages = computed(() =>
+  storageConfig.value.set.storages.length > 0
+    ? storageConfig.value.set.storages
+    : (["session", "local"] as const)
+);
 </script>
 
 <template>
@@ -148,13 +155,11 @@ function handleSetValueChange(value: string) {
       </label>
       <label class="block space-y-1">
         <span class="text-muted-foreground">{{ t("blueprint.config.storageKey") }}</span>
-        <Input
-          size="small"
+        <StorageKeyAutocomplete
           :value="storageConfig.read.key"
-          spellcheck="false"
-          class="font-mono text-[11px]"
+          :storages="storageConfig.read.storage"
           placeholder="key"
-          @update:value="(v) => handleReadKeyChange(String(v ?? ''))"
+          @change="handleReadKeyChange"
         />
       </label>
     </div>
@@ -187,13 +192,11 @@ function handleSetValueChange(value: string) {
       </div>
       <label class="block space-y-1">
         <span class="text-muted-foreground">{{ t("blueprint.config.storageKey") }}</span>
-        <Input
-          size="small"
+        <StorageKeyAutocomplete
           :value="storageConfig.set.key"
-          spellcheck="false"
-          class="font-mono text-[11px]"
+          :storages="setKeySuggestionStorages"
           placeholder="key"
-          @update:value="(v) => handleSetKeyChange(String(v ?? ''))"
+          @change="handleSetKeyChange"
         />
       </label>
       <label class="block space-y-1">

package/src/edges/BlueprintSmoothEdge.vue

@@ -2,8 +2,8 @@
 import { BaseEdge, getSmoothStepPath, type EdgeProps } from "@vue-flow/core";
 import { computed } from "vue";
 
-const EDGE_STROKE = "#2563eb";
-const EDGE_WIDTH = 2.5;
+const EDGE_STROKE = "#94a3b8";
+const EDGE_WIDTH = 1.75;
 
 const props = defineProps<EdgeProps>();
 

package/src/graph/blueprint-graph.ts

@@ -3,6 +3,7 @@ import {
   createNodeId,
   defaultBlueprintNodeLabel,
   filterInvalidBlueprintEdges,
+  isDefaultBlueprintNodeLabel,
   patchNodeConfigSource,
   resolveNodeClockConfig,
   resolveNodeEventConfig,
@@ -218,6 +219,14 @@ export class BlueprintGraph {
       nodes: this.document.nodes.map((n) => {
         if (n.id !== nodeId) return n;
         const nextNode = { ...n, ...configPatch, ...patch };
+        if (
+          patch.configSource &&
+          patch.configSource !== exists.configSource &&
+          patch.label === undefined &&
+          isDefaultBlueprintNodeLabel(exists.label)
+        ) {
+          nextNode.label = defaultBlueprintNodeLabel(patch.configSource);
+        }
         if (
           patch.viewElementIds !== undefined ||
           patch.viewElementId !== undefined

package/src/graph/document.ts

@@ -289,6 +289,18 @@ export function defaultBlueprintNodeLabel(
   return getBlueprintNodeTypeLabel(t, configSource);
 }
 
+/** 当前名称是否仍是「类型默认名」（空或等于任一类型文案） */
+export function isDefaultBlueprintNodeLabel(
+  label: string | undefined | null,
+  t: TranslateFn = defaultTranslate()
+): boolean {
+  const trimmed = (label ?? "").trim();
+  if (!trimmed) return true;
+  return (
+    Object.keys(BLUEPRINT_CONFIG_TYPE_LABEL_KEYS) as BlueprintConfigSource[]
+  ).some((src) => getBlueprintNodeTypeLabel(t, src) === trimmed);
+}
+
 export function resolveNodeFetchConfig(
   node: Pick<BlueprintGraphNode, "fetchConfig">
 ): FetchRequestConfig {

package/src/graph/sync-edges.ts

@@ -6,8 +6,8 @@ import type { BlueprintGraph } from "./blueprint-graph";
 
 /** 边线描边（写入 edge.style；使用 hex 避免 SVG style 解析 hsl 异常） */
 export const BP_EDGE_STYLE = {
-  stroke: "#2563eb",
-  strokeWidth: 2.5,
+  stroke: "#94a3b8",
+  strokeWidth: 1.75,
 } as const;
 
 export const BP_FLOW_EDGE_TYPE = "blueprintSmooth" as const;

package/src/index.ts

@@ -15,6 +15,33 @@ export { default as BlueprintExecutionLogPanel } from "./components/BlueprintExe
 export type { BlueprintExecutionLogPanelProps } from "./components/BlueprintExecutionLogPanel.vue";
 export { default as BlueprintMetaDialog } from "./components/BlueprintMetaDialog.vue";
 export type { BlueprintMetaDialogProps } from "./components/BlueprintMetaDialog.vue";
+export { default as ApiCollectionManagerDialog } from "./components/ApiCollectionManagerDialog.vue";
+export type {
+  ApiCollectionManagerDialogProps,
+  ApiCollectionUploadStartInfo,
+  ApiCollectionUploadSuccessInfo,
+} from "./components/ApiCollectionManagerDialog.vue";
+export {
+  hydrateApiCollections,
+  getApiCollectionRecords,
+  getApiCollectionById,
+  getApiCollectionListItems,
+  upsertApiCollectionFromJson,
+  removeApiCollection,
+  subscribeApiCollections,
+  useApiCollections,
+  useApiCollectionListItems,
+} from "./library/api-collection-store";
+export type {
+  UpsertApiCollectionInput,
+  UpsertApiCollectionResult,
+} from "./library/api-collection-store";
+export {
+  listApiCollectionRecords,
+  getApiCollectionRecord,
+  putApiCollectionRecord,
+  deleteApiCollectionRecord,
+} from "./library/api-collection-db";
 export { default as BlueprintNodeSwitchTaskDialog } from "./components/BlueprintNodeSwitchTaskDialog.vue";
 export type { BlueprintNodeSwitchTaskDialogProps } from "./components/BlueprintNodeSwitchTaskDialog.vue";
 export type { ExecutionLogSettings } from "./library/execution-log-settings";

package/src/library/api-collection-db.ts

@@ -0,0 +1,98 @@
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+import type { ApiCollectionRecord } from "@arronqzy/blueprint-dsl";
+
+const DB_NAME = "arronqzy-api-collections";
+const DB_VERSION = 1;
+const STORE_NAME = "collections";
+
+function openDb(nameSpace?: string | null): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(appStorageKey(DB_NAME, nameSpace), 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: "id" });
+        store.createIndex("updatedAt", "updatedAt", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>,
+  nameSpace?: string | null
+): Promise<T> {
+  return openDb(nameSpace).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 listApiCollectionRecords(
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord[]> {
+  const records = await runTransaction<ApiCollectionRecord[]>(
+    "readonly",
+    (store) => store.getAll(),
+    nameSpace
+  );
+  return records.sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+export async function getApiCollectionRecord(
+  id: string,
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord | null> {
+  const record = await runTransaction<ApiCollectionRecord | undefined>(
+    "readonly",
+    (store) => store.get(id),
+    nameSpace
+  );
+  return record ?? null;
+}
+
+export async function putApiCollectionRecord(
+  record: ApiCollectionRecord,
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord> {
+  await runTransaction<IDBValidKey>(
+    "readwrite",
+    (store) => store.put(record),
+    nameSpace
+  );
+  return record;
+}
+
+export async function deleteApiCollectionRecord(
+  id: string,
+  nameSpace?: string | null
+): Promise<void> {
+  await runTransaction<undefined>(
+    "readwrite",
+    (store) => store.delete(id),
+    nameSpace
+  );
+}

package/src/library/api-collection-store.ts

@@ -0,0 +1,143 @@
+import { computed, onScopeDispose, ref, type ComputedRef, type Ref } from "vue";
+import {
+  apiCollectionToListItem,
+  createApiCollectionId,
+  parseApiCollectionJson,
+  type ApiCollectionDocument,
+  type ApiCollectionListItem,
+  type ApiCollectionRecord,
+} from "@arronqzy/blueprint-dsl";
+
+import {
+  deleteApiCollectionRecord,
+  listApiCollectionRecords,
+  putApiCollectionRecord,
+} from "./api-collection-db";
+
+type Listener = () => void;
+
+let nameSpaceRef: string | null | undefined = null;
+let records: ApiCollectionRecord[] = [];
+let hydrated = false;
+const listeners = new Set<Listener>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function sortRecords(list: ApiCollectionRecord[]): ApiCollectionRecord[] {
+  return [...list].sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+export function getApiCollectionRecords(): ApiCollectionRecord[] {
+  return records;
+}
+
+export function getApiCollectionListItems(): ApiCollectionListItem[] {
+  return records.map(apiCollectionToListItem);
+}
+
+export function getApiCollectionById(id: string): ApiCollectionRecord | null {
+  return records.find((item) => item.id === id) ?? null;
+}
+
+export function subscribeApiCollections(listener: Listener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export async function hydrateApiCollections(
+  nameSpace?: string | null
+): Promise<ApiCollectionRecord[]> {
+  nameSpaceRef = nameSpace;
+  const persisted = await listApiCollectionRecords(nameSpace);
+  const memoryOnly = records.filter((item) => !item.persistLocal);
+  const persistedIds = new Set(persisted.map((item) => item.id));
+  records = sortRecords([
+    ...persisted,
+    ...memoryOnly.filter((item) => !persistedIds.has(item.id)),
+  ]);
+  hydrated = true;
+  emit();
+  return records;
+}
+
+export type UpsertApiCollectionInput = {
+  id?: string;
+  rawJson: string;
+  persistLocal: boolean;
+  /** 未写 document.name 时用文件名 */
+  fallbackName?: string;
+};
+
+export type UpsertApiCollectionResult =
+  | { ok: true; record: ApiCollectionRecord }
+  | { ok: false; error: string };
+
+export async function upsertApiCollectionFromJson(
+  input: UpsertApiCollectionInput
+): Promise<UpsertApiCollectionResult> {
+  const parsed = parseApiCollectionJson(input.rawJson);
+  if (!parsed.ok) return parsed;
+
+  const document: ApiCollectionDocument = {
+    ...parsed.document,
+    name:
+      parsed.document.name.trim() ||
+      input.fallbackName?.replace(/\.json$/i, "").trim() ||
+      parsed.document.name,
+  };
+  const now = Date.now();
+  const existing = input.id
+    ? records.find((item) => item.id === input.id) ?? null
+    : null;
+  const record: ApiCollectionRecord = {
+    id: existing?.id ?? createApiCollectionId(),
+    name: document.name,
+    persistLocal: input.persistLocal,
+    document,
+    rawJson: JSON.stringify(document, null, 2),
+    createdAt: existing?.createdAt ?? now,
+    updatedAt: now,
+  };
+
+  if (record.persistLocal) {
+    await putApiCollectionRecord(record, nameSpaceRef);
+  } else if (existing?.persistLocal) {
+    await deleteApiCollectionRecord(record.id, nameSpaceRef);
+  }
+
+  const next = records.filter((item) => item.id !== record.id);
+  next.push(record);
+  records = sortRecords(next);
+  emit();
+  return { ok: true, record };
+}
+
+export async function removeApiCollection(id: string): Promise<void> {
+  const existing = records.find((item) => item.id === id);
+  if (existing?.persistLocal || hydrated) {
+    try {
+      await deleteApiCollectionRecord(id, nameSpaceRef);
+    } catch {
+      // 内存-only 记录在库里可能不存在
+    }
+  }
+  records = records.filter((item) => item.id !== id);
+  emit();
+}
+
+/** Vue composable：返回响应式集合列表 */
+export function useApiCollections(): Ref<ApiCollectionRecord[]> {
+  const list = ref<ApiCollectionRecord[]>([...records]);
+  const unsubscribe = subscribeApiCollections(() => {
+    list.value = [...records];
+  });
+  onScopeDispose(unsubscribe);
+  return list;
+}
+
+export function useApiCollectionListItems(): ComputedRef<ApiCollectionListItem[]> {
+  const list = useApiCollections();
+  return computed(() => list.value.map(apiCollectionToListItem));
+}

package/src/nodes/AndFlowNode.vue

@@ -22,6 +22,7 @@ const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
     :class="
       cn(
         'bp-node bp-node--and',
+        nodeData.isSelected && 'bp-node--selected',
         executionTone === 'success' && 'bp-node--execution-true',
         executionTone === 'error' && 'bp-node--execution-false'
       )
@@ -32,7 +33,7 @@ const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
       :position="Position.Left"
       id="inA"
       class="bp-flow-handle bp-flow-handle--target"
-      :style="{ top: '35%' }"
+      :style="{ top: '32%' }"
       :title="t('blueprint.node.andInA')"
     />
     <Handle
@@ -40,7 +41,7 @@ const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
       :position="Position.Left"
       id="inB"
       class="bp-flow-handle bp-flow-handle--target"
-      :style="{ top: '65%' }"
+      :style="{ top: '68%' }"
       :title="t('blueprint.node.andInB')"
     />
     <BlueprintNodeCard

package/src/nodes/BlueprintFlowNode.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
 import type { NodeProps } from "@vue-flow/core";
-import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { computed } from "vue";
+import {
+  resolveBlueprintConfigSource,
+  resolveBlueprintNodeTypeLabel,
+} from "../graph/document";
 import { resolveBlueprintNodeSummary } from "../graph/node-summary";
 import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
 import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
@@ -13,6 +17,9 @@ const { t } = useI18n();
 const props = defineProps<NodeProps<BlueprintFlowNodeData>>();
 const onSelect = useBlueprintNodeSelect();
 const nodeData = props.data;
+const variant = computed(() =>
+  resolveBlueprintConfigSource(nodeData) === "view" ? "view" : "blueprint"
+);
 </script>
 
 <template>
@@ -21,7 +28,7 @@ const nodeData = props.data;
     :label="nodeData.label"
     :meta="resolveBlueprintNodeTypeLabel(nodeData, t)"
     :subtitle="resolveBlueprintNodeSummary(nodeData, t)"
-    variant="blueprint"
+    :variant="variant"
     :selected="Boolean(nodeData.isSelected)"
     :execution-tone="resolveBlueprintNodeExecutionTone(nodeData)"
     @select="onSelect"