@arronqzy/react-blueprint 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "main": "index.ts",
   "exports": {
@@ -12,9 +12,9 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.5",
-    "@arronqzy/i18n": "0.1.3",
+    "@arronqzy/blueprint-dsl": "1.0.6",
     "@arronqzy/react-rx-store": "1.1.4",
+    "@arronqzy/i18n": "0.1.5",
     "@arronqzy/ui": "1.0.5"
   },
   "devDependencies": {
@@ -29,8 +29,8 @@
     "typescript": "^5.5.4",
     "vite": "^5.1.4",
     "@arronqzy/tailwind": "1.0.2",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "keywords": [],
   "author": "",

package/src/BlueprintNodeConfigSidebar.tsx

@@ -10,6 +10,7 @@ import {
 import {
   LIFECYCLE_NODE_TYPE,
   PAGE_LIFECYCLE_PHASES,
+  type ExecutionTraceEntry,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
 import { useI18n } from "@arronqzy/i18n/react";
@@ -19,6 +20,7 @@ import { ClockNodeConfigPanel } from "./components/ClockNodeConfigPanel";
 import { JsonNodeConfigPanel } from "./components/JsonNodeConfigPanel";
 import { LogicNodeConfigPanel } from "./components/LogicNodeConfigPanel";
 import { ViewElementMultiSelect } from "./components/ViewElementMultiSelect";
+import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./components/ConfigHintIcon";
 import {
   getLifecyclePhaseLabel,
   patchNodeConfigSource,
@@ -26,6 +28,7 @@ import {
   resolveBlueprintConfigSource,
   resolveViewElementIds,
   type BlueprintConfigSource,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type BlueprintNodeRole,
 } from "./graph/document";
@@ -42,6 +45,9 @@ export type BlueprintLibraryOption = {
 
 export type BlueprintNodeConfigSidebarProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   viewElementOptions?: BlueprintViewElementOption[];
   blueprintLibraryOptions?: BlueprintLibraryOption[];
   allowFalseSignalPropagation?: boolean;
@@ -81,6 +87,9 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
 
 export function BlueprintNodeConfigSidebar({
   node,
+  graphNodes = [],
+  graphEdges = [],
+  traceEntries = [],
   viewElementOptions = [],
   blueprintLibraryOptions = [],
   allowFalseSignalPropagation = false,
@@ -181,7 +190,10 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "view" ? (
           <div className="block space-y-1">
-            <span className="text-muted-foreground">{t("blueprint.config.linkedViewNodes")}</span>
+            <ConfigFieldLabel
+              label={t("blueprint.config.linkedViewNodes")}
+              hint={t("blueprint.config.viewMultiHint")}
+            />
             <ViewElementMultiSelect
               options={viewElementOptions}
               value={linkedViewElementIds}
@@ -194,11 +206,7 @@ export function BlueprintNodeConfigSidebar({
                 })
               }
             />
-            {linkedViewElementIds.length === 0 ? (
-              <p className="text-[11px] text-muted-foreground">
-                {t("blueprint.config.viewMultiHint")}
-              </p>
-            ) : (
+            {linkedViewElementIds.length > 0 ? (
               <p className="text-[11px] text-muted-foreground">
                 {t("blueprint.config.linkedViewCount", {
                   count: linkedViewElementIds.length,
@@ -207,16 +215,16 @@ export function BlueprintNodeConfigSidebar({
                     .join("、"),
                 })}
               </p>
-            )}
+            ) : null}
           </div>
         ) : null}
 
         {configSource === "blueprint" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">{t("blueprint.config.blueprintAttrs")}</div>
-            <p className="text-[11px] text-muted-foreground">
-              {t("blueprint.config.blueprintAttrsHint")}
-            </p>
+            <ConfigSectionTitle
+              title={t("blueprint.config.blueprintAttrs")}
+              hint={t("blueprint.config.blueprintAttrsHint")}
+            />
             <label className="block space-y-1">
               <span className="text-muted-foreground">{t("blueprint.config.refLibrary")}</span>
               <Select
@@ -264,13 +272,19 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "lifecycle" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">{t("blueprint.config.lifecycleHook")}</div>
-            <p className="text-[11px] text-muted-foreground">
-              {t("blueprint.config.lifecycleNoInput")}
-              {node.lifecyclePhase === "blueprintActivated"
-                ? t("blueprint.config.lifecycleBlueprintActivatedHint")
-                : t("blueprint.config.lifecyclePageHint")}
-            </p>
+            <div className="flex items-center gap-1.5">
+              <div className="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 className="block space-y-1">
               <span className="text-muted-foreground">{t("blueprint.config.listenPhase")}</span>
               <Select
@@ -305,7 +319,13 @@ export function BlueprintNodeConfigSidebar({
         ) : null}
 
         {configSource === "fetch" ? (
-          <FetchNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+          <FetchNodeConfigPanel
+            node={node}
+            graphNodes={graphNodes}
+            graphEdges={graphEdges}
+            traceEntries={traceEntries}
+            onUpdateNode={onUpdateNode}
+          />
         ) : null}
 
         {configSource === "json" ? (
@@ -318,10 +338,10 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "and" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">{t("blueprint.config.andTitle")}</div>
-            <p className="text-[11px] text-muted-foreground">
-              {t("blueprint.config.andHint")}
-            </p>
+            <ConfigSectionTitle
+              title={t("blueprint.config.andTitle")}
+              hint={t("blueprint.config.andHint")}
+            />
           </div>
         ) : null}
 

package/src/components/ClockNodeConfigPanel.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeClockConfig } from "../graph/document";
+import { ConfigFieldLabel, ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type ClockNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -73,17 +74,16 @@ export function ClockNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">
-        {t("blueprint.config.clockTitle")}
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.clockHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.clockTitle")}
+        hint={t("blueprint.config.clockHint")}
+      />
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
-          {t("blueprint.config.clockIntervalSeconds")}
-        </span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.clockIntervalSeconds")}
+          hint={t("blueprint.config.clockIntervalHint")}
+        />
         <Input
           type="number"
           min={0}
@@ -92,15 +92,13 @@ export function ClockNodeConfigPanel({
           onChange={handleIntervalChange}
           className="h-8"
         />
-        <p className="text-[11px] text-muted-foreground">
-          {t("blueprint.config.clockIntervalHint")}
-        </p>
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
-          {t("blueprint.config.outputCount")}
-        </span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.outputCount")}
+          hint={t("blueprint.config.outputCountHint")}
+        />
         <Input
           type="number"
           min={1}
@@ -109,9 +107,6 @@ export function ClockNodeConfigPanel({
           onChange={handleOutputCountChange}
           className="h-8"
         />
-        <p className="text-[11px] text-muted-foreground">
-          {t("blueprint.config.outputCountHint")}
-        </p>
       </label>
 
       <label className="flex items-start gap-2">
@@ -127,9 +122,10 @@ export function ClockNodeConfigPanel({
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
-          {t("blueprint.config.timeFormat")}
-        </span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.timeFormat")}
+          hint={t("blueprint.config.timeFormatHint")}
+        />
         <Input
           value={clockConfig.timeFormat}
           onChange={handleFormatChange}
@@ -137,9 +133,6 @@ export function ClockNodeConfigPanel({
           className="h-8 font-mono text-[11px]"
           placeholder="YYYY-MM-DD HH:mm:ss"
         />
-        <p className="text-[11px] text-muted-foreground">
-          {t("blueprint.config.timeFormatHint")}
-        </p>
       </label>
     </div>
   );

package/src/components/ConfigHintIcon.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@arronqzy/ui";
+
+export type ConfigHintIconProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function ConfigHintIcon({
+  label,
+  children,
+  className,
+  contentClassName,
+}: ConfigHintIconProps) {
+  const { t } = useI18n();
+  const resolvedLabel = label ?? t("common.hint");
+
+  return (
+    <TooltipProvider delayDuration={120}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className={
+              className ??
+              "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: resolvedLabel })}
+          >
+            ?
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side="top"
+          className={`z-[10120] max-w-[360px] space-y-1.5 text-[11px] leading-5 ${contentClassName ?? ""}`}
+        >
+          {children}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export function ConfigSectionTitle({
+  title,
+  hint,
+}: {
+  title: string;
+  hint: ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="font-medium text-foreground">{title}</div>
+      <ConfigHintIcon label={title}>{hint}</ConfigHintIcon>
+    </div>
+  );
+}
+
+export function ConfigFieldLabel({
+  label,
+  hint,
+}: {
+  label: string;
+  hint?: ReactNode;
+}) {
+  if (!hint) {
+    return <span className="text-muted-foreground">{label}</span>;
+  }
+  return (
+    <span className="inline-flex items-center gap-1 text-muted-foreground">
+      {label}
+      <ConfigHintIcon label={label}>{hint}</ConfigHintIcon>
+    </span>
+  );
+}

package/src/components/FetchNodeConfigPanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, type ChangeEvent } from "react";
+import { useCallback, useMemo, useState, type ChangeEvent } from "react";
 import {
   Button,
   Input,
@@ -10,11 +10,14 @@ import {
   cn,
 } from "@arronqzy/ui";
 import type {
+  ExecutionTraceEntry,
   FetchHttpMethod,
   FetchRequestConfig,
   FetchResponseType,
 } from "@arronqzy/blueprint-dsl";
 import {
+  applyFetchConfigScope,
+  draftFetchHeadersText,
   FETCH_CACHES,
   FETCH_CREDENTIALS,
   FETCH_HTTP_METHODS,
@@ -22,9 +25,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 {
   cancelSwaggerLoadTask,
@@ -36,6 +44,7 @@ import {
 } from "../fetch-config-task-store";
 import { useI18n } from "@arronqzy/i18n/react";
 
+import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./ConfigHintIcon";
 import { FetchUrlAutocomplete } from "./FetchUrlAutocomplete";
 
 function SendIcon({ className }: { className?: string }) {
@@ -231,6 +240,9 @@ function LoaderIcon({ className }: { className?: string }) {
 
 export type FetchNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "fetchConfig" | "configSource">>
@@ -251,6 +263,9 @@ function patchFetchConfig(
 
 export function FetchNodeConfigPanel({
   node,
+  graphNodes = [],
+  graphEdges = [],
+  traceEntries = [],
   onUpdateNode,
 }: FetchNodeConfigPanelProps) {
   const { t } = useI18n();
@@ -268,6 +283,55 @@ export function FetchNodeConfigPanel({
   const [validationError, setValidationError] = useState<string | null>(null);
   const [fetchValidationError, setFetchValidationError] = useState<string | null>(null);
   const swaggerError = validationError ?? swaggerTaskError;
+  const incomingScope = useMemo(() => {
+    const outputs = latestTraceOutputsByNode(traceEntries);
+    return resolveFetchIncomingScope({
+      fetchNodeId: node.id,
+      nodes: graphNodes,
+      edges: graphEdges,
+      getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+    });
+  }, [graphEdges, graphNodes, node.id, traceEntries]);
+  const usesScopeTemplate = fetchConfigHasScopeTemplate(fetchConfig);
+  const resolvedFetchConfig = useMemo(
+    () => applyFetchConfigScope(fetchConfig, incomingScope),
+    [fetchConfig, incomingScope]
+  );
+  const resolvedUrlPreview = useMemo(() => {
+    if (!usesScopeTemplate) return "";
+    try {
+      return resolveFetchRequestUrl(resolvedFetchConfig);
+    } catch {
+      return resolvedFetchConfig.url?.trim() ?? "";
+    }
+  }, [resolvedFetchConfig, usesScopeTemplate]);
+  const incomingScopeJson = useMemo(() => {
+    if (incomingScope === undefined) return "";
+    try {
+      return JSON.stringify(incomingScope, null, 2);
+    } catch {
+      return String(incomingScope);
+    }
+  }, [incomingScope]);
+  const headersDraft = draftFetchHeadersText(fetchConfig);
+  const resolvedHeadersPreview = useMemo(() => {
+    if (!usesScopeTemplate) return "";
+    const headers = resolvedFetchConfig.headers;
+    if (!headers || Object.keys(headers).length === 0) return "";
+    try {
+      return JSON.stringify(headers, null, 2);
+    } catch {
+      return "";
+    }
+  }, [resolvedFetchConfig.headers, usesScopeTemplate]);
+  const incomingHasPendingValue = useMemo(() => {
+    if (!incomingScope || typeof incomingScope !== "object") return false;
+    const entries =
+      "kind" in incomingScope
+        ? [incomingScope]
+        : Object.values(incomingScope as Record<string, { kind?: string }>);
+    return entries.some((entry) => entry && entry.kind === "pending");
+  }, [incomingScope]);
 
   const setUrlInputMode = useCallback(
     (mode: "swagger" | "manual") => {
@@ -307,30 +371,72 @@ export function FetchNodeConfigPanel({
   }, [node.id]);
 
   const handleSendFetchDebug = useCallback(() => {
-    const url = fetchConfig.url?.trim();
+    const resolved = applyFetchConfigScope(fetchConfig, incomingScope);
+    const url = resolved.url?.trim();
     if (!url) {
-      setFetchValidationError(t("blueprint.config.fillRequestUrlFirst"));
+      setFetchValidationError(
+        usesScopeTemplate && fetchConfig.url?.trim()
+          ? t("blueprint.config.fetchScopeUnresolved")
+          : t("blueprint.config.fillRequestUrlFirst")
+      );
       return;
     }
 
     setFetchValidationError(null);
     startFetchDebugTask({
       nodeId: node.id,
-      config: fetchConfig,
+      config: resolved,
     });
-  }, [fetchConfig, node.id]);
+  }, [fetchConfig, incomingScope, node.id, t, usesScopeTemplate]);
 
   const handleAbortFetchDebug = useCallback(() => {
     cancelFetchDebugTask(node.id);
     setFetchValidationError(null);
   }, [node.id]);
 
+  const handleHeadersBlur = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const headersJson = e.target.value;
+      const parsed = parseFetchHeadersJson(headersJson);
+      onUpdateNode(
+        node.id,
+        patchFetchConfig(node, {
+          headersJson,
+          ...(parsed ? { headers: parsed } : {}),
+        })
+      );
+    },
+    [node, onUpdateNode]
+  );
+
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">{t("blueprint.config.fetchTitle")}</div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.fetchHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.fetchTitle")}
+        hint={t("blueprint.config.fetchHint")}
+      />
+      <div className="space-y-1 rounded-md border border-border/60 bg-background/70 p-2">
+        <div className="flex items-center gap-1.5 text-[11px] font-medium text-foreground">
+          {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>
+        {incomingScope === undefined ? null : (
+          <>
+            {incomingHasPendingValue ? (
+              <p className="text-[11px] text-amber-700 dark:text-amber-300">
+                {t("blueprint.config.fetchScopePending")}
+              </p>
+            ) : null}
+            <pre className="max-h-[180px] overflow-auto rounded border border-border/60 bg-muted/30 p-2 font-mono text-[10px] leading-relaxed text-foreground">
+              {incomingScopeJson}
+            </pre>
+          </>
+        )}
+      </div>
 
       <label className="block space-y-1">
         <span className="text-muted-foreground">{t("blueprint.config.swaggerUrlOptional")}</span>
@@ -440,7 +546,7 @@ export function FetchNodeConfigPanel({
                     patchFetchConfig(node, { apiBaseUrl: e.target.value })
                   )
                 }
-                placeholder="https://api.example.com/v1"
+                placeholder="https://api.example.com/v1/{scope?.value?.tenant}"
                 className="h-8 font-mono text-[11px]"
               />
             </label>
@@ -489,7 +595,7 @@ export function FetchNodeConfigPanel({
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 onUpdateNode(node.id, patchFetchConfig(node, { url: e.target.value }))
               }
-              placeholder="https://api.example.com/data"
+              placeholder="https://api.example.com/users/{scope?.value?.id}"
               className="h-8 flex-1 font-mono text-[11px]"
             />
             <AsyncSendButton
@@ -504,6 +610,11 @@ export function FetchNodeConfigPanel({
             />
           </div>
         )}
+        {usesScopeTemplate && resolvedUrlPreview ? (
+          <p className="break-all font-mono text-[10px] text-muted-foreground">
+            {t("blueprint.config.fetchScopeResolvedUrl")}: {resolvedUrlPreview}
+          </p>
+        ) : null}
         {loadingFetchDebug ? (
           <p className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
             <LoaderIcon className="h-3.5 w-3.5 shrink-0" />
@@ -541,25 +652,23 @@ export function FetchNodeConfigPanel({
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">{t("blueprint.config.requestHeadersJson")}</span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.requestHeadersJson")}
+          hint={t("blueprint.config.fetchHeadersHint")}
+        />
         <textarea
-          defaultValue={JSON.stringify(fetchConfig.headers ?? {}, null, 2)}
-          key={`${node.id}-headers-${JSON.stringify(fetchConfig.headers)}`}
-          onBlur={(e) => {
-            try {
-              const headers = JSON.parse(e.target.value || "{}") as Record<
-                string,
-                string
-              >;
-              onUpdateNode(node.id, patchFetchConfig(node, { headers }));
-            } catch {
-              /* 保留上次有效值 */
-            }
-          }}
+          defaultValue={headersDraft}
+          key={`${node.id}-headers-${headersDraft}`}
+          onBlur={handleHeadersBlur}
           rows={4}
           className="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}"}'
         />
+        {usesScopeTemplate && resolvedHeadersPreview ? (
+          <p className="whitespace-pre-wrap break-all font-mono text-[10px] text-muted-foreground">
+            {t("blueprint.config.fetchScopeResolvedHeaders")}: {resolvedHeadersPreview}
+          </p>
+        ) : null}
       </label>
 
       <label className="block space-y-1">
@@ -571,7 +680,7 @@ export function FetchNodeConfigPanel({
           }
           rows={4}
           className="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}"}'
         />
       </label>
 

package/src/components/JsonNodeConfigPanel.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
+import { ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type JsonNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -53,12 +54,10 @@ export function JsonNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">
-        {t("blueprint.config.jsonTitle")}
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.jsonHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.jsonTitle")}
+        hint={t("blueprint.config.jsonHint")}
+      />
 
       <label className="block space-y-1">
         <span className="text-muted-foreground">

package/src/components/LogicNodeConfigPanel.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";
+import { ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type LogicNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -52,12 +53,10 @@ export function LogicNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">
-        {t("blueprint.config.logicTitle")}
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.logicHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.logicTitle")}
+        hint={t("blueprint.config.logicHint")}
+      />
 
       <label className="block space-y-1">
         <span className="text-muted-foreground">

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: