@arronqzy/vue-blueprint 0.1.0

package/src/components/FetchUrlAutocomplete.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from "vue";
+import {
+  buildEndpointSuggestions,
+  filterEndpointSuggestions,
+  type SwaggerApiEndpoint,
+} from "@arronqzy/blueprint-dsl";
+
+import { cn } from "../utils/cn";
+
+const props = withDefaults(
+  defineProps<{
+    value: string;
+    apiBaseUrl: string;
+    endpoints: SwaggerApiEndpoint[];
+    placeholder?: string;
+    selectOnly?: boolean;
+  }>(),
+  {
+    placeholder: "",
+    selectOnly: false,
+  }
+);
+
+const emit = defineEmits<{
+  change: [value: string];
+  selectEndpoint: [endpoint: SwaggerApiEndpoint, fullUrl: string];
+}>();
+
+const open = ref(false);
+const activeIndex = ref(0);
+const filterQuery = ref("");
+const containerRef = ref<HTMLDivElement | null>(null);
+
+const suggestions = computed(() =>
+  buildEndpointSuggestions(props.apiBaseUrl, props.endpoints)
+);
+
+const query = computed(() => (props.selectOnly ? filterQuery.value : props.value));
+
+const filtered = computed(() =>
+  filterEndpointSuggestions(suggestions.value, query.value)
+);
+
+const selectedSuggestion = computed(() =>
+  suggestions.value.find((item) => item.path === props.value)
+);
+
+const inputValue = computed(() => {
+  if (!props.selectOnly) return props.value;
+  if (open.value) return filterQuery.value;
+  return selectedSuggestion.value?.label ?? props.value;
+});
+
+watch([query, () => 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;
+      filterQuery.value = "";
+    }
+  };
+  window.addEventListener("pointerdown", onPointerDown);
+  pointerCleanup = () => window.removeEventListener("pointerdown", onPointerDown);
+});
+
+onUnmounted(() => {
+  pointerCleanup?.();
+});
+
+const showSuggestions = computed(() => open.value && props.endpoints.length > 0);
+
+function selectSuggestion(index: number) {
+  const item = filtered.value[index];
+  if (!item) return;
+  const nextValue = props.apiBaseUrl.trim() ? item.path : item.fullUrl;
+  emit("change", nextValue);
+  emit("selectEndpoint", item, item.fullUrl);
+  filterQuery.value = "";
+  open.value = false;
+}
+
+function openDropdown() {
+  open.value = true;
+  if (props.selectOnly) {
+    filterQuery.value = "";
+  }
+}
+
+function closeDropdown() {
+  open.value = false;
+  filterQuery.value = "";
+}
+
+function handleInput(event: Event) {
+  const next = (event.target as HTMLInputElement).value;
+  if (props.selectOnly) {
+    filterQuery.value = next;
+    open.value = true;
+    return;
+  }
+  emit("change", next);
+  open.value = true;
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!showSuggestions.value || filtered.value.length === 0) {
+    if (props.selectOnly && event.key === "Escape") {
+      closeDropdown();
+    }
+    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") {
+    closeDropdown();
+  }
+}
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <input
+      :value="inputValue"
+      :readOnly="selectOnly && !open"
+      :placeholder="placeholder"
+      class="flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+      :class="selectOnly && !open ? 'cursor-pointer font-medium' : 'font-mono'"
+      @input="handleInput"
+      @focus="openDropdown"
+      @blur="selectOnly ? closeDropdown() : undefined"
+      @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"
+      >
+        无匹配接口
+      </div>
+      <button
+        v-for="(item, index) in filtered"
+        :key="`${item.method}:${item.path}:${item.operationId ?? index}`"
+        type="button"
+        class="flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-accent"
+        :class="cn(index === activeIndex && 'bg-accent')"
+        @mousedown.prevent
+        @click="selectSuggestion(index)"
+      >
+        <span class="font-medium text-foreground">{{ item.label }}</span>
+        <span class="truncate font-mono text-muted-foreground">{{ item.fullUrl }}</span>
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/JsonNodeConfigPanel.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { validateJsonString } from "@arronqzy/blueprint-dsl";
+import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraphNode } from "../graph/document";
+import { resolveNodeJsonConfig } from "../graph/document";
+
+export type JsonNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "jsonConfig" | "configSource">>
+  ) => void;
+};
+
+const props = defineProps<JsonNodeConfigPanelProps>();
+
+const draftError = ref<string | null>(null);
+
+function patchJsonConfig(node: BlueprintGraphNode, patch: Partial<JsonNodeConfig>) {
+  return {
+    jsonConfig: { ...resolveNodeJsonConfig(node), ...patch },
+    configSource: "json" as const,
+  };
+}
+
+const jsonConfig = computed(() => resolveNodeJsonConfig(props.node));
+
+const storedValidation = computed(() =>
+  validateJsonString(jsonConfig.value.jsonString)
+);
+
+const parseError = computed(
+  () => draftError.value ?? (storedValidation.value.ok ? null : storedValidation.value.error)
+);
+
+function handleChange(event: Event) {
+  const jsonString = (event.target as HTMLTextAreaElement).value;
+  const result = validateJsonString(jsonString);
+  draftError.value = result.ok ? null : result.error;
+  props.onUpdateNode(props.node.id, patchJsonConfig(props.node, { jsonString }));
+}
+</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">JSON 节点</div>
+    <p class="text-[11px] text-muted-foreground">
+      收到<strong>真信号</strong>后，将下方 JSON 解析为 JavaScript object（或
+      array）并从输出口发出<strong>真信号</strong>；解析失败则发出
+      <strong>假信号</strong>。
+    </p>
+
+    <label class="block space-y-1">
+      <span class="text-muted-foreground">JSON 内容</span>
+      <textarea
+        :value="jsonConfig.jsonString"
+        rows="12"
+        spellcheck="false"
+        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        placeholder='{
+  "key": "value"
+}'
+        @input="handleChange"
+      />
+      <p v-if="parseError" class="text-[11px] text-destructive">
+        JSON 格式错误：{{ parseError }}
+      </p>
+      <p v-else class="text-[11px] text-muted-foreground">JSON 格式正确</p>
+    </label>
+  </div>
+</template>

package/src/components/LogicNodeConfigPanel.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { validateLogicSourceCode } from "@arronqzy/blueprint-dsl";
+import type { LogicNodeConfig } from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraphNode } from "../graph/document";
+import { resolveNodeLogicConfig } from "../graph/document";
+
+export type LogicNodeConfigPanelProps = {
+  node: BlueprintGraphNode;
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<Pick<BlueprintGraphNode, "logicConfig" | "configSource">>
+  ) => void;
+};
+
+const props = defineProps<LogicNodeConfigPanelProps>();
+
+const draftError = ref<string | null>(null);
+
+function patchLogicConfig(node: BlueprintGraphNode, patch: Partial<LogicNodeConfig>) {
+  return {
+    logicConfig: { ...resolveNodeLogicConfig(node), ...patch },
+    configSource: "logic" as const,
+  };
+}
+
+const logicConfig = computed(() => resolveNodeLogicConfig(props.node));
+
+const storedValidation = computed(() =>
+  validateLogicSourceCode(logicConfig.value.sourceCode)
+);
+
+const parseError = computed(
+  () => draftError.value ?? (storedValidation.value.ok ? null : storedValidation.value.error)
+);
+
+function handleChange(event: Event) {
+  const sourceCode = (event.target as HTMLTextAreaElement).value;
+  const result = validateLogicSourceCode(sourceCode);
+  draftError.value = result.ok ? null : result.error;
+  props.onUpdateNode(props.node.id, patchLogicConfig(props.node, { sourceCode }));
+}
+</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>后，将输入数据传入下方 <code>update</code>
+      函数并执行；返回值作为<strong>真信号</strong>输出。代码语法错误或运行时报错则发出
+      <strong>假信号</strong>（错误信息为输出值）。
+    </p>
+
+    <label class="block space-y-1">
+      <span class="text-muted-foreground">JavaScript 代码</span>
+      <textarea
+        :value="logicConfig.sourceCode"
+        rows="14"
+        spellcheck="false"
+        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        placeholder="function update(input) {
+  return input;
+}"
+        @input="handleChange"
+      />
+      <p v-if="parseError" class="text-[11px] text-destructive">
+        JavaScript 错误：{{ parseError }}
+      </p>
+      <p v-else class="text-[11px] text-muted-foreground">JavaScript 语法正确</p>
+    </label>
+  </div>
+</template>

package/src/components/ViewElementMultiSelect.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Select } from "ant-design-vue";
+
+export type ViewElementMultiSelectOption = {
+  id: string;
+  label: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    options: ViewElementMultiSelectOption[];
+    value: string[];
+    placeholder?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    placeholder: "选择视图节点",
+    disabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  change: [next: string[]];
+}>();
+
+const selectOptions = computed(() =>
+  props.options.map((opt) => ({ value: opt.id, label: opt.label }))
+);
+
+const emptyOptions = computed(() => props.options.length === 0);
+</script>
+
+<template>
+  <Select
+    mode="multiple"
+    show-search
+    :value="value"
+    :disabled="disabled || emptyOptions"
+    :placeholder="emptyOptions ? '视图画布暂无节点' : placeholder"
+    :options="selectOptions"
+    :filter-option="
+      (input, option) =>
+        (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+    "
+    class="w-full"
+    size="small"
+    @change="(next) => emit('change', next as string[])"
+  />
+</template>