@arronqzy/react-blueprint 1.0.1 → 1.0.4

package/src/hooks/useBlueprintFlowColorMode.ts

@@ -1,8 +1,32 @@
-import { useTheme } from "@arronqzy/ui";
+import { useSyncExternalStore } from "react";
 
-/** 与 next-themes 全局主题对齐，勿用 React Flow 的 system（会跟 OS 走） */
-export function useBlueprintFlowColorMode(): "light" | "dark" {
-  const { resolvedTheme, theme } = useTheme();
-  const current = resolvedTheme ?? theme;
-  return current === "dark" ? "dark" : "light";
+export type BlueprintColorMode = "light" | "dark";
+
+function readDocumentColorMode(): BlueprintColorMode {
+  if (typeof document === "undefined") return "light";
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+  const dataTheme = root.dataset.theme;
+  if (dataTheme === "dark" || dataTheme === "light") return dataTheme;
+  return "light";
+}
+
+function subscribeDocumentColorMode(onChange: () => void) {
+  const root = document.documentElement;
+  const observer = new MutationObserver(onChange);
+  observer.observe(root, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme"],
+  });
+  return () => observer.disconnect();
+}
+
+/** 与 document 上的全局主题（class / data-theme）对齐，避免与 panel 手动切换脱节 */
+export function useBlueprintFlowColorMode(): BlueprintColorMode {
+  return useSyncExternalStore(
+    subscribeDocumentColorMode,
+    readDocumentColorMode,
+    () => "light"
+  );
 }

package/src/hooks/useBlueprintPageLifecycle.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   BlueprintGraphRunner,
   detectBlueprintReferenceCycle,
@@ -242,4 +242,32 @@ export function useBlueprintPageLifecycle({
     if (!enabled || !bootCompleted) return;
     void emitPhases(graphRef.current, ["updated"], runnerOptionsRef.current);
   }, [bootCompleted, enabled, onUpdated]);
+
+  const triggerBlueprintNode = useCallback(
+    async (nodeId: string, inputValue?: unknown) => {
+      const id = nodeId.trim();
+      if (!id) return;
+      const opts = runnerOptionsRef.current;
+      if (opts.resolveLibraryBlueprint) {
+        const result = await detectBlueprintReferenceCycle({
+          rootGraph: documentToRunnableGraph(graphRef.current.document, {
+            libraryNameById: opts.libraryNameById,
+          }),
+          rootLibraryBlueprintId: opts.rootLibraryBlueprintId,
+          resolveLibraryBlueprint: opts.resolveLibraryBlueprint,
+          resolveBlueprintName: (libId) =>
+            resolveBlueprintName(opts.libraryNameById, libId),
+        });
+        if (!result.ok) {
+          opts.onExecutionBlocked?.(result.message);
+          return;
+        }
+      }
+      const runner = createRunner(graphRef.current, opts);
+      await runner.triggerNode(id, inputValue);
+    },
+    []
+  );
+
+  return { triggerBlueprintNode };
 }

package/src/library/blueprint-io.ts

@@ -8,6 +8,15 @@ import {
   type BlueprintLibrarySource,
   type BlueprintMetaDraft,
 } from "./types";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
+
+function unnamedBlueprintName() {
+  return tForLocale(resolveLocale())("blueprint.dialog.unnamedBlueprint");
+}
+
+function importedBlueprintName() {
+  return tForLocale(resolveLocale())("blueprint.dialog.importedBlueprint");
+}
 
 export function createLibraryBlueprintId() {
   return createNodeId("lib_bp");
@@ -27,7 +36,7 @@ export function buildBlueprintExportPayload(
   return {
     kind: BLUEPRINT_EXPORT_KIND,
     version: BLUEPRINT_EXPORT_VERSION,
-    name: meta.name.trim() || "未命名蓝图",
+    name: meta.name.trim() || unnamedBlueprintName(),
     remark: meta.remark.trim() || undefined,
     exportedAt: Date.now(),
     document: {
@@ -51,7 +60,7 @@ export function parseBlueprintImportFile(raw: unknown): BlueprintExportPayload {
   return {
     kind: BLUEPRINT_EXPORT_KIND,
     version: BLUEPRINT_EXPORT_VERSION,
-    name: typeof data.name === "string" ? data.name : "导入的蓝图",
+    name: typeof data.name === "string" ? data.name : importedBlueprintName(),
     remark: typeof data.remark === "string" ? data.remark : undefined,
     exportedAt: typeof data.exportedAt === "number" ? data.exportedAt : Date.now(),
     document: data.document,
@@ -81,7 +90,7 @@ export function buildLibraryRecord(args: {
   createdAt?: number;
 }): BlueprintLibraryRecord {
   const now = Date.now();
-  const name = args.meta.name.trim() || "未命名蓝图";
+  const name = args.meta.name.trim() || unnamedBlueprintName();
   return {
     id: args.id ?? createLibraryBlueprintId(),
     name,

package/src/library/swagger-docs.ts

@@ -2,14 +2,20 @@ import {
   parseSwaggerDocument,
   type ParsedSwaggerDocument,
 } from "@arronqzy/blueprint-dsl";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
+
+function t() {
+  return tForLocale(resolveLocale());
+}
 
 export async function loadSwaggerDocument(
   docsUrl: string,
   signal?: AbortSignal
 ): Promise<ParsedSwaggerDocument> {
+  const translate = t();
   const trimmed = docsUrl.trim();
   if (!trimmed) {
-    throw new Error("请输入 Swagger 文档 URL");
+    throw new Error(translate("blueprint.config.enterSwaggerUrl"));
   }
 
   if (signal?.aborted) {
@@ -28,7 +34,9 @@ export async function loadSwaggerDocument(
       throw new DOMException("Aborted", "AbortError");
     }
     throw new Error(
-      error instanceof Error ? error.message : "无法请求 Swagger 文档"
+      error instanceof Error
+        ? error.message
+        : translate("blueprint.config.cannotFetchSwagger")
     );
   }
 
@@ -37,19 +45,21 @@ export async function loadSwaggerDocument(
   }
 
   if (!response.ok) {
-    throw new Error(`Swagger 文档请求失败: HTTP ${response.status}`);
+    throw new Error(
+      translate("blueprint.config.swaggerHttpFailed", { status: response.status })
+    );
   }
 
   const contentType = response.headers.get("content-type") ?? "";
   if (contentType.includes("text/html")) {
-    throw new Error("返回内容为 HTML，请填写 OpenAPI/Swagger 的 JSON 地址");
+    throw new Error(translate("blueprint.config.swaggerHtmlReturned"));
   }
 
   let spec: unknown;
   try {
     spec = await response.json();
   } catch {
-    throw new Error("Swagger 文档不是有效的 JSON");
+    throw new Error(translate("blueprint.config.swaggerInvalidJson"));
   }
 
   return parseSwaggerDocument(spec, trimmed);

package/src/main.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createRoot } from "react-dom/client";
 import { ThemeProvider } from "@arronqzy/ui";
+import { I18nProvider, useI18n } from "@arronqzy/i18n/react";
 import "@arronqzy/ui/styles.css";
 import "@xyflow/react/dist/style.css";
 import "./dev.css";
@@ -10,6 +11,7 @@ import { BluePrintReactRoot } from ".";
 import { createDevBlueprintGraph } from "./dev-seed";
 
 function DevApp() {
+  const { t } = useI18n();
   const [graph, setGraph] = useState(() => createDevBlueprintGraph());
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
 
@@ -18,10 +20,13 @@ function DevApp() {
       <header className="bp-dev-toolbar">
         <strong>Blueprint Dev</strong>
         <span className="text-muted-foreground">
-          右键画布添加节点 · 从右侧圆点拖到左侧圆点连线 · 初始应看到 A→B 蓝线
+          {t("blueprint.dev.hint")}
         </span>
         <span className="text-muted-foreground">
-          节点 {graph.document.nodes.length} · 边 {graph.document.edges.length}
+          {t("blueprint.dev.stats", {
+            nodes: graph.document.nodes.length,
+            edges: graph.document.edges.length,
+          })}
         </span>
       </header>
       <div className="bp-dev-canvas">
@@ -37,7 +42,9 @@ function DevApp() {
 }
 
 createRoot(document.getElementById("app")!).render(
-  <ThemeProvider defaultTheme="light" enableSystem={false}>
-    <DevApp />
-  </ThemeProvider>
+  <I18nProvider>
+    <ThemeProvider defaultTheme="light" enableSystem={false}>
+      <DevApp />
+    </ThemeProvider>
+  </I18nProvider>
 );

package/src/nodes/AndFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 
@@ -10,6 +11,7 @@ import { BlueprintNodeCard } from "./BlueprintNodeCard";
 
 /** 并运算节点：两路输入均为真时输出真信号；单端口多连线按「或」合并 */
 export function AndFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
   const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
@@ -28,7 +30,7 @@ export function AndFlowNode({ id, data }: NodeProps) {
         id="inA"
         className="bp-flow-handle bp-flow-handle--target"
         style={{ top: "35%" }}
-        title="输入 A（多连线为或）"
+        title={t("blueprint.node.andInA")}
       />
       <Handle
         type="target"
@@ -36,13 +38,13 @@ export function AndFlowNode({ id, data }: NodeProps) {
         id="inB"
         className="bp-flow-handle bp-flow-handle--target"
         style={{ top: "65%" }}
-        title="输入 B（多连线为或）"
+        title={t("blueprint.node.andInB")}
       />
       <BlueprintNodeCard
         nodeId={id}
         label={nodeData.label}
-        meta={resolveBlueprintNodeTypeLabel(nodeData)}
-        subtitle={resolveBlueprintNodeSummary(nodeData)}
+        meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+        subtitle={resolveBlueprintNodeSummary(nodeData, t)}
         variant="and"
         selected={Boolean(nodeData.isSelected)}
         onSelect={onSelect}
@@ -52,7 +54,7 @@ export function AndFlowNode({ id, data }: NodeProps) {
         position={Position.Right}
         id="out"
         className="bp-flow-handle bp-flow-handle--source"
-        title="两路均为真时输出真信号"
+        title={t("blueprint.node.andOut")}
       />
     </div>
   );

package/src/nodes/BlueprintFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";
@@ -8,6 +9,7 @@ import type { BlueprintFlowNodeData } from "../types";
 import { BlueprintNodeShell } from "./BlueprintNodeShell";
 
 export function BlueprintFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
 
@@ -15,8 +17,8 @@ export function BlueprintFlowNode({ id, data }: NodeProps) {
     <BlueprintNodeShell
       nodeId={id}
       label={nodeData.label}
-      meta={resolveBlueprintNodeTypeLabel(nodeData)}
-      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+      subtitle={resolveBlueprintNodeSummary(nodeData, t)}
       variant="blueprint"
       selected={Boolean(nodeData.isSelected)}
       executionTone={resolveBlueprintNodeExecutionTone(nodeData)}

package/src/nodes/BlueprintNodeCard.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import { cn } from "@arronqzy/ui";
 
 export type BlueprintNodeCardProps = {
@@ -81,6 +82,7 @@ export function BlueprintNodeCard({
   hideLeadingDot = false,
   onSelect,
 }: BlueprintNodeCardProps) {
+  const { t } = useI18n();
   const v = variantStyle[variant];
 
   return (
@@ -101,7 +103,7 @@ export function BlueprintNodeCard({
           "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="拖拽移动"
+        title={t("blueprint.node.dragToMove")}
       >
         <NodeGrip />
         {meta ? (
@@ -148,7 +150,7 @@ export function BlueprintNodeCard({
                   "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold leading-none",
                   v.badge
                 )}
-                title="已发送信号次数"
+                title={t("blueprint.node.signalSentCount")}
               >
                 {progressLabel}
               </span>

package/src/nodes/BlueprintNodeShell.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 
@@ -17,6 +18,7 @@ export function BlueprintNodeShell({
   executionTone = null,
   ...cardProps
 }: BlueprintNodeShellProps) {
+  const { t } = useI18n();
   return (
     <div
       className={cn(
@@ -30,7 +32,7 @@ export function BlueprintNodeShell({
         position={Position.Left}
         id="in"
         className="bp-flow-handle bp-flow-handle--target"
-        title="真/假信号输入"
+        title={t("blueprint.node.signalIn")}
       />
       <BlueprintNodeCard {...cardProps} selected={selected} />
       <Handle
@@ -38,7 +40,7 @@ export function BlueprintNodeShell({
         position={Position.Right}
         id="out"
         className="bp-flow-handle bp-flow-handle--source"
-        title="真/假信号输出"
+        title={t("blueprint.node.signalOut")}
       />
     </div>
   );

package/src/nodes/ClockFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 
@@ -22,6 +23,7 @@ function ClockAbortIcon({ className }: { className?: string }) {
 
 /** 时钟节点：收到真信号后按配置间隔输出含当前时间的真信号 */
 export function ClockFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
   const onAbortClock = useBlueprintClockAbort();
@@ -36,8 +38,8 @@ export function ClockFlowNode({ id, data }: NodeProps) {
       <BlueprintNodeShell
         nodeId={id}
         label={nodeData.label}
-        meta={resolveBlueprintNodeTypeLabel(nodeData)}
-        subtitle={resolveBlueprintNodeSummary(nodeData)}
+        meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+        subtitle={resolveBlueprintNodeSummary(nodeData, t)}
         progressLabel={progressLabel}
         variant="clock"
         selected={Boolean(nodeData.isSelected)}
@@ -52,7 +54,7 @@ export function ClockFlowNode({ id, data }: NodeProps) {
             "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="中止时钟：停止剩余次数与正在执行的下游任务"
+          title={t("blueprint.node.abortClock")}
           onPointerDown={(e) => e.stopPropagation()}
           onClick={(e) => {
             e.stopPropagation();

package/src/nodes/FetchFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";
@@ -8,6 +9,7 @@ import type { BlueprintFlowNodeData } from "../types";
 import { BlueprintNodeShell } from "./BlueprintNodeShell";
 
 export function FetchFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
 
@@ -15,8 +17,8 @@ export function FetchFlowNode({ id, data }: NodeProps) {
     <BlueprintNodeShell
       nodeId={id}
       label={nodeData.label}
-      meta={resolveBlueprintNodeTypeLabel(nodeData)}
-      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+      subtitle={resolveBlueprintNodeSummary(nodeData, t)}
       variant="fetch"
       selected={Boolean(nodeData.isSelected)}
       executionTone={resolveBlueprintNodeExecutionTone(nodeData)}

package/src/nodes/JsonFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";
@@ -8,6 +9,7 @@ import type { BlueprintFlowNodeData } from "../types";
 import { BlueprintNodeShell } from "./BlueprintNodeShell";
 
 export function JsonFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
 
@@ -15,8 +17,8 @@ export function JsonFlowNode({ id, data }: NodeProps) {
     <BlueprintNodeShell
       nodeId={id}
       label={nodeData.label}
-      meta={resolveBlueprintNodeTypeLabel(nodeData)}
-      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+      subtitle={resolveBlueprintNodeSummary(nodeData, t)}
       variant="json"
       selected={Boolean(nodeData.isSelected)}
       executionTone={resolveBlueprintNodeExecutionTone(nodeData)}

package/src/nodes/LifecycleFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 
@@ -10,6 +11,7 @@ import { BlueprintNodeCard } from "./BlueprintNodeCard";
 
 /** 生命周期节点：无输入口，仅在对应生命周期触发时从右侧输出口发出信号 */
 export function LifecycleFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
   const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
@@ -25,8 +27,8 @@ export function LifecycleFlowNode({ id, data }: NodeProps) {
       <BlueprintNodeCard
         nodeId={id}
         label={nodeData.label}
-        meta={resolveBlueprintNodeTypeLabel(nodeData)}
-        subtitle={resolveBlueprintNodeSummary(nodeData)}
+        meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+        subtitle={resolveBlueprintNodeSummary(nodeData, t)}
         variant="lifecycle"
         selected={Boolean(nodeData.isSelected)}
         hideLeadingDot
@@ -37,7 +39,7 @@ export function LifecycleFlowNode({ id, data }: NodeProps) {
         position={Position.Right}
         id="out"
         className="bp-flow-handle bp-flow-handle--source"
-        title="生命周期满足时输出真/假信号"
+        title={t("blueprint.node.lifecycleOut")}
       />
     </div>
   );

package/src/nodes/LogicFlowNode.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";
@@ -8,6 +9,7 @@ import type { BlueprintFlowNodeData } from "../types";
 import { BlueprintNodeShell } from "./BlueprintNodeShell";
 
 export function LogicFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
   const nodeData = data as BlueprintFlowNodeData;
   const onSelect = useBlueprintNodeSelect();
 
@@ -15,8 +17,8 @@ export function LogicFlowNode({ id, data }: NodeProps) {
     <BlueprintNodeShell
       nodeId={id}
       label={nodeData.label}
-      meta={resolveBlueprintNodeTypeLabel(nodeData)}
-      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+      subtitle={resolveBlueprintNodeSummary(nodeData, t)}
       variant="logic"
       selected={Boolean(nodeData.isSelected)}
       executionTone={resolveBlueprintNodeExecutionTone(nodeData)}

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

@@ -1,10 +1,11 @@
 import {
-  VIEW_NODE_TYPE,
+  FETCH_NODE_TYPE,
   type RunnableGraph,
 } from "@arronqzy/blueprint-dsl";
 
 import {
-  resolveBlueprintConfigSource,
+  resolveNodeFetchConfig,
+  resolveRunnableNodeType,
   resolveViewElementIds,
   type BlueprintDocument,
 } from "../graph/document";
@@ -17,17 +18,19 @@ export function documentToRunnableGraph(
 ): RunnableGraph {
   return {
     nodes: document.nodes.map((node) => {
-      const configSource = resolveBlueprintConfigSource(node);
       const viewElementIds = resolveViewElementIds(node);
+      const nodeType = resolveRunnableNodeType(node);
       return {
         id: node.id,
-        nodeType:
-          configSource === "view" ? VIEW_NODE_TYPE : node.nodeType,
+        nodeType,
         lifecyclePhase: node.lifecyclePhase,
         libraryBlueprintId: node.libraryBlueprintId,
         viewElementIds:
           viewElementIds.length > 0 ? viewElementIds : undefined,
-        fetchConfig: node.fetchConfig,
+        fetchConfig:
+          nodeType === FETCH_NODE_TYPE
+            ? resolveNodeFetchConfig(node)
+            : node.fetchConfig,
         jsonConfig: node.jsonConfig,
         logicConfig: node.logicConfig,
         clockConfig: node.clockConfig,