@arronqzy/vue-blueprint 0.1.3 → 0.1.4

package/package.json

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

package/src/BlueprintNodeConfigSidebar.vue

@@ -5,6 +5,7 @@ import { Checkbox, Input, Select } from "ant-design-vue";
 import {
   LIFECYCLE_NODE_TYPE,
   PAGE_LIFECYCLE_PHASES,
+  type ExecutionTraceEntry,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
 
@@ -13,6 +14,7 @@ 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,
   patchNodeConfigSource,
@@ -20,6 +22,7 @@ import {
   resolveBlueprintConfigSource,
   resolveViewElementIds,
   type BlueprintConfigSource,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type BlueprintNodeRole,
 } from "./graph/document";
@@ -38,6 +41,9 @@ export type BlueprintLibraryOption = {
 
 export type BlueprintNodeConfigSidebarProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   viewElementOptions?: BlueprintViewElementOption[];
   blueprintLibraryOptions?: BlueprintLibraryOption[];
   allowFalseSignalPropagation?: boolean;
@@ -68,6 +74,9 @@ export type BlueprintNodeConfigSidebarProps = {
 const props = withDefaults(defineProps<BlueprintNodeConfigSidebarProps>(), {
   viewElementOptions: () => [],
   blueprintLibraryOptions: () => [],
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
   allowFalseSignalPropagation: false,
 });
 
@@ -173,7 +182,12 @@ function handleConfigSourceChange(value: string) {
       </label>
 
       <div v-if="configSource === 'view'" class="block space-y-1">
-        <span class="text-muted-foreground">{{ t("blueprint.config.linkedViewNodes") }}</span>
+        <span class="inline-flex items-center gap-1 text-muted-foreground">
+          {{ t("blueprint.config.linkedViewNodes") }}
+          <ConfigHintIcon :label="t('blueprint.config.linkedViewNodes')">
+            {{ t("blueprint.config.viewMultiHint") }}
+          </ConfigHintIcon>
+        </span>
         <ViewElementMultiSelect
           :options="viewElementOptions"
           :value="linkedViewElementIds"
@@ -187,10 +201,7 @@ function handleConfigSourceChange(value: string) {
               })
           "
         />
-        <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 +217,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
@@ -252,15 +267,19 @@ function handleConfigSourceChange(value: string) {
         v-if="configSource === 'lifecycle'"
         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")
-          }}
-        </p>
+        <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 +309,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 +329,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/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 { useI18n } from "@arronqzy/i18n/vue";
+import { Tooltip } from "ant-design-vue";
+
+const { t } = useI18n();
+withDefaults(
+  defineProps<{
+    label?: string;
+    contentClass?: string;
+    buttonClass?: string;
+  }>(),
+  { 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 })"
+    >
+      ?
+    </button>
+  </Tooltip>
+</template>

package/src/components/FetchNodeConfigPanel.vue

@@ -3,11 +3,14 @@ import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
 import { Button, Input, Select } from "ant-design-vue";
 import type {
+  ExecutionTraceEntry,
   FetchHttpMethod,
   FetchRequestConfig,
   FetchResponseType,
 } from "@arronqzy/blueprint-dsl";
 import {
+  applyFetchConfigScope,
+  draftFetchHeadersText,
   FETCH_CACHES,
   FETCH_CREDENTIALS,
   FETCH_HTTP_METHODS,
@@ -15,9 +18,14 @@ import {
   FETCH_NODE_TYPE,
   FETCH_REDIRECTS,
   FETCH_RESPONSE_TYPES,
+  fetchConfigHasScopeTemplate,
+  latestTraceOutputsByNode,
+  parseFetchHeadersJson,
+  resolveFetchIncomingScope,
+  resolveFetchRequestUrl,
 } from "@arronqzy/blueprint-dsl";
 
-import type { BlueprintGraphNode } from "../graph/document";
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeFetchConfig } from "../graph/document";
 import {
   cancelFetchDebugTask,
@@ -27,25 +35,80 @@ import {
   useFetchDebugTask,
   useSwaggerLoadTask,
 } from "../fetch-config-task-store";
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import FetchUrlAutocomplete from "./FetchUrlAutocomplete.vue";
 
 const { t } = useI18n();
 
 export type FetchNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "fetchConfig" | "configSource">>
   ) => void;
 };
 
-const props = defineProps<FetchNodeConfigPanelProps>();
+const props = withDefaults(defineProps<FetchNodeConfigPanelProps>(), {
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
+});
 
 const validationError = ref<string | null>(null);
 const fetchValidationError = ref<string | null>(null);
 const debugExpanded = ref(false);
 
 const fetchConfig = computed(() => resolveNodeFetchConfig(props.node));
+const incomingScope = computed(() => {
+  const outputs = latestTraceOutputsByNode(props.traceEntries);
+  return resolveFetchIncomingScope({
+    fetchNodeId: props.node.id,
+    nodes: props.graphNodes,
+    edges: props.graphEdges,
+    getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+  });
+});
+const usesScopeTemplate = computed(() => fetchConfigHasScopeTemplate(fetchConfig.value));
+const resolvedFetchConfig = computed(() =>
+  applyFetchConfigScope(fetchConfig.value, incomingScope.value)
+);
+const resolvedUrlPreview = computed(() => {
+  if (!usesScopeTemplate.value) return "";
+  try {
+    return resolveFetchRequestUrl(resolvedFetchConfig.value);
+  } catch {
+    return resolvedFetchConfig.value.url?.trim() ?? "";
+  }
+});
+const incomingScopeJson = computed(() => {
+  if (incomingScope.value === undefined) return "";
+  try {
+    return JSON.stringify(incomingScope.value, null, 2);
+  } catch {
+    return String(incomingScope.value);
+  }
+});
+const headersDraft = computed(() => draftFetchHeadersText(fetchConfig.value));
+const resolvedHeadersPreview = computed(() => {
+  if (!usesScopeTemplate.value) return "";
+  const headers = resolvedFetchConfig.value.headers;
+  if (!headers || Object.keys(headers).length === 0) return "";
+  try {
+    return JSON.stringify(headers, null, 2);
+  } catch {
+    return "";
+  }
+});
+const incomingHasPendingValue = computed(() => {
+  const scope = incomingScope.value;
+  if (!scope || typeof scope !== "object") return false;
+  const entries =
+    "kind" in scope ? [scope] : Object.values(scope as Record<string, { kind?: string }>);
+  return entries.some((entry) => entry && entry.kind === "pending");
+});
 const endpoints = computed(() => fetchConfig.value.swaggerEndpoints ?? []);
 const hasSwaggerEndpoints = computed(() => endpoints.value.length > 0);
 const urlInputMode = computed(
@@ -105,16 +168,20 @@ function handleAbortSwagger() {
 }
 
 function handleSendFetchDebug() {
-  const url = fetchConfig.value.url?.trim();
+  const resolved = applyFetchConfigScope(fetchConfig.value, incomingScope.value);
+  const url = resolved.url?.trim();
   if (!url) {
-    fetchValidationError.value = t("blueprint.config.fillRequestUrlFirst");
+    fetchValidationError.value =
+      usesScopeTemplate.value && fetchConfig.value.url?.trim()
+        ? t("blueprint.config.fetchScopeUnresolved")
+        : t("blueprint.config.fillRequestUrlFirst");
     return;
   }
 
   fetchValidationError.value = null;
   startFetchDebugTask({
     nodeId: props.node.id,
-    config: fetchConfig.value,
+    config: resolved,
   });
 }
 
@@ -149,24 +216,42 @@ const debugOk = computed(() => {
 });
 
 function handleHeadersBlur(event: Event) {
-  try {
-    const headers = JSON.parse((event.target as HTMLTextAreaElement).value || "{}") as Record<
-      string,
-      string
-    >;
-    props.onUpdateNode(props.node.id, patchFetchConfig(props.node, { headers }));
-  } catch {
-    /* 保留上次有效值 */
-  }
+  const headersJson = (event.target as HTMLTextAreaElement).value;
+  const parsed = parseFetchHeadersJson(headersJson);
+  props.onUpdateNode(
+    props.node.id,
+    patchFetchConfig(props.node, {
+      headersJson,
+      ...(parsed ? { headers: parsed } : {}),
+    })
+  );
 }
 </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">{{ t("blueprint.config.fetchTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">
-      {{ t("blueprint.config.fetchHint") }}
-    </p>
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.fetchTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.fetchTitle')">
+        {{ t("blueprint.config.fetchHint") }}
+      </ConfigHintIcon>
+    </div>
+    <div class="space-y-1 rounded-md border border-gray-200/80 bg-white/80 p-2">
+      <div class="flex items-center gap-1.5 text-[11px] font-medium text-gray-800">
+        {{ t("blueprint.config.fetchScopeTitle") }}
+        <ConfigHintIcon :label="t('blueprint.config.fetchScopeTitle')">
+          <p>{{ t("blueprint.config.fetchScopeHint") }}</p>
+          <p>{{ t("blueprint.config.fetchScopeEmpty") }}</p>
+          <p>{{ t("blueprint.config.fetchScopePending") }}</p>
+        </ConfigHintIcon>
+      </div>
+      <template v-if="incomingScope !== undefined">
+        <p v-if="incomingHasPendingValue" class="text-[11px] text-amber-700">
+          {{ t("blueprint.config.fetchScopePending") }}
+        </p>
+        <pre class="max-h-[180px] overflow-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-[10px] leading-relaxed text-gray-800">{{ incomingScopeJson }}</pre>
+      </template>
+    </div>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.swaggerUrlOptional") }}</span>
@@ -254,7 +339,7 @@ function handleHeadersBlur(event: Event) {
           <Input
             size="small"
             :value="fetchConfig.apiBaseUrl ?? ''"
-            placeholder="https://api.example.com/v1"
+            placeholder="https://api.example.com/v1/{scope?.value?.tenant}"
             class="font-mono text-[11px]"
             @update:value="
               (v) => onUpdateNode(node.id, patchFetchConfig(node, { apiBaseUrl: String(v) }))
@@ -313,7 +398,7 @@ function handleHeadersBlur(event: Event) {
           size="small"
           :value="fetchConfig.url"
           :disabled="loadingFetchDebug"
-          placeholder="https://api.example.com/data"
+          placeholder="https://api.example.com/users/{scope?.value?.id}"
           class="flex-1 font-mono text-[11px]"
           @update:value="(v) => onUpdateNode(node.id, patchFetchConfig(node, { url: String(v) }))"
         />
@@ -338,6 +423,12 @@ function handleHeadersBlur(event: Event) {
         </Button>
       </div>
 
+      <p
+        v-if="usesScopeTemplate && resolvedUrlPreview"
+        class="break-all font-mono text-[10px] text-gray-500"
+      >
+        {{ t("blueprint.config.fetchScopeResolvedUrl") }}: {{ resolvedUrlPreview }}
+      </p>
       <p v-if="loadingFetchDebug" class="text-[11px] text-muted-foreground">
         {{ t("blueprint.config.sendingDebug") }}
       </p>
@@ -418,15 +509,26 @@ function handleHeadersBlur(event: Event) {
     </label>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.requestHeadersJson") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.requestHeadersJson") }}
+        <ConfigHintIcon :label="t('blueprint.config.requestHeadersJson')">
+          {{ t("blueprint.config.fetchHeadersHint") }}
+        </ConfigHintIcon>
+      </span>
       <textarea
-        :key="`${node.id}-headers-${JSON.stringify(fetchConfig.headers)}`"
-        :value="JSON.stringify(fetchConfig.headers ?? {}, null, 2)"
+        :key="`${node.id}-headers-${headersDraft}`"
+        :value="headersDraft"
         rows="4"
         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='{"Content-Type":"application/json"}'
+        placeholder='{"Authorization":"Bearer {scope?.value?.token}"}'
         @blur="handleHeadersBlur"
       />
+      <p
+        v-if="usesScopeTemplate && resolvedHeadersPreview"
+        class="whitespace-pre-wrap break-all font-mono text-[10px] text-gray-500"
+      >
+        {{ t("blueprint.config.fetchScopeResolvedHeaders") }}: {{ resolvedHeadersPreview }}
+      </p>
     </label>
 
     <label class="block space-y-1">
@@ -435,7 +537,7 @@ function handleHeadersBlur(event: Event) {
         :value="fetchConfig.body ?? ''"
         rows="4"
         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"}'
+        placeholder='{"id":"{scope?.value?.id}"}'
         @input="
           (e) =>
             onUpdateNode(

package/src/components/JsonNodeConfigPanel.vue

@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { validateJsonString } from "@arronqzy/blueprint-dsl";
 import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
 
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
 
@@ -48,8 +49,12 @@ function handleChange(event: Event) {
 
 <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.jsonTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.jsonHint") }}</p>
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.jsonTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.jsonTitle')">
+        {{ t("blueprint.config.jsonHint") }}
+      </ConfigHintIcon>
+    </div>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.jsonContent") }}</span>

package/src/components/LogicNodeConfigPanel.vue

@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { validateLogicSourceCode } from "@arronqzy/blueprint-dsl";
 import type { LogicNodeConfig } from "@arronqzy/blueprint-dsl";
 
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";
 
@@ -48,8 +49,12 @@ function handleChange(event: Event) {
 
 <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.logicTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.logicHint") }}</p>
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.logicTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.logicTitle')">
+        {{ t("blueprint.config.logicHint") }}
+      </ConfigHintIcon>
+    </div>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.jsCode") }}</span>

package/src/graph/document.ts

@@ -211,6 +211,7 @@ export function resolveNodeFetchConfig(
       ...DEFAULT_FETCH_REQUEST_CONFIG.headers,
       ...node.fetchConfig?.headers,
     },
+    headersJson: node.fetchConfig?.headersJson,
     swaggerEndpoints: node.fetchConfig?.swaggerEndpoints,
   };
 }

package/src/runtime/document-to-runnable-graph.ts

@@ -23,6 +23,8 @@ export function documentToRunnableGraph(
       return {
         id: node.id,
         nodeType,
+        label: node.label,
+        role: node.role,
         lifecyclePhase: node.lifecyclePhase,
         libraryBlueprintId: node.libraryBlueprintId,
         viewElementIds: