@arronqzy/react-blueprint 1.0.21 → 1.0.22

package/index.ts

@@ -1,6 +1,7 @@
 export { BluePrintReactRoot } from "./src/index";
 export type { BluePrintReactRootProps } from "./src/index";
 export { BlueprintNodeConfigSidebar } from "./src/BlueprintNodeConfigSidebar";
+export { BlueprintDslLocaleSync } from "./src/BlueprintDslLocaleSync";
 export type {
   BlueprintNodeConfigSidebarProps,
   BlueprintViewElementOption,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "",
   "files": [
     "index.ts",
@@ -18,10 +18,10 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.16",
-    "@arronqzy/ui": "1.0.9",
-    "@arronqzy/i18n": "0.1.16",
-    "@arronqzy/react-rx-store": "1.1.8"
+    "@arronqzy/blueprint-dsl": "1.0.17",
+    "@arronqzy/react-rx-store": "1.1.8",
+    "@arronqzy/ui": "1.0.10",
+    "@arronqzy/i18n": "0.1.17"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -34,9 +34,9 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vite": "^5.1.4",
+    "@arronqzy/tailwind": "1.0.2",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.2"
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "keywords": [],
   "author": "",

package/src/BlueprintDslLocaleSync.tsx

@@ -0,0 +1,13 @@
+import { setBlueprintDslLocale } from "@arronqzy/blueprint-dsl";
+import { useI18nOptional } from "@arronqzy/i18n/react";
+import type { ReactNode } from "react";
+
+/**
+ * Keeps blueprint-dsl validation / runtime messages in the app locale. Sets it during
+ * render so descendants re-rendering for the same locale change already see it.
+ */
+export function BlueprintDslLocaleSync({ children }: { children: ReactNode }) {
+  const { locale } = useI18nOptional();
+  setBlueprintDslLocale(locale);
+  return <>{children}</>;
+}

package/src/BlueprintNodeConfigSidebar.tsx

@@ -284,18 +284,21 @@ function BlueprintNodeConfigSidebarInner({
                 {t("blueprint.config.selectLibraryFirst")}
               </p>
             ) : null}
-            <label className="flex items-start gap-2 pt-1">
+            <label className="flex items-center gap-2 pt-1">
               <input
                 type="checkbox"
                 checked={allowFalseSignalPropagation}
                 onChange={(e) =>
                   onUpdateAllowFalseSignalPropagation?.(e.target.checked)
                 }
-                className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
+                className="h-3.5 w-3.5 shrink-0 rounded border border-input"
               />
-              <span className="text-[11px] leading-relaxed text-muted-foreground">
-                {t("blueprint.config.allowFalsePropagateBlueprint")}
+              <span className="text-[11px] text-muted-foreground">
+                {t("blueprint.config.allowFalsePropagate")}
               </span>
+              <ConfigHintIcon label={t("blueprint.config.allowFalsePropagate")}>
+                {t("blueprint.config.allowFalsePropagateBlueprint")}
+              </ConfigHintIcon>
             </label>
           </div>
         ) : null}
@@ -454,18 +457,21 @@ function BlueprintNodeConfigSidebarInner({
         {configSource !== "blueprint" && 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.taskChain")}</div>
-            <label className="flex items-start gap-2">
+            <label className="flex items-center gap-2">
               <input
                 type="checkbox"
                 checked={allowFalseSignalPropagation}
                 onChange={(e) =>
                   onUpdateAllowFalseSignalPropagation?.(e.target.checked)
                 }
-                className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
+                className="h-3.5 w-3.5 shrink-0 rounded border border-input"
               />
-              <span className="text-[11px] leading-relaxed text-muted-foreground">
-                {t("blueprint.config.allowFalsePropagateDefault")}
+              <span className="text-[11px] text-muted-foreground">
+                {t("blueprint.config.allowFalsePropagate")}
               </span>
+              <ConfigHintIcon label={t("blueprint.config.allowFalsePropagate")}>
+                {t("blueprint.config.allowFalsePropagateDefault")}
+              </ConfigHintIcon>
             </label>
           </div>
         ) : null}

package/src/components/ApiCollectionManagerDialog.tsx

@@ -25,6 +25,7 @@ import {
   subscribeApiCollections,
   upsertApiCollectionFromJson,
 } from "../library/api-collection-store";
+import { ConfigHintIcon } from "./ConfigHintIcon";
 
 export type ApiCollectionUploadStartInfo = {
   fileNames: string[];
@@ -282,6 +283,9 @@ export function ApiCollectionManagerDialog({
                 onChange={(e) => setPersistLocalDefault(e.target.checked)}
               />
               {t("blueprint.apiCollection.persistLocal")}
+              <ConfigHintIcon label={t("blueprint.apiCollection.persistLocal")}>
+                {t("blueprint.apiCollection.persistLocalHint")}
+              </ConfigHintIcon>
             </label>
             <input
               ref={fileInputRef}
@@ -293,10 +297,6 @@ export function ApiCollectionManagerDialog({
             />
           </div>
 
-          <p className="text-[11px] text-muted-foreground">
-            {t("blueprint.apiCollection.persistLocalHint")}
-          </p>
-
           {error ? (
             <pre className="max-h-24 overflow-auto whitespace-pre-wrap rounded border border-destructive/40 bg-destructive/5 p-2 text-[11px] text-destructive">
               {error}

package/src/components/ClockNodeConfigPanel.tsx

@@ -5,7 +5,7 @@ import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeClockConfig } from "../graph/document";
-import { ConfigFieldLabel, ConfigSectionTitle } from "./ConfigHintIcon";
+import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type ClockNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -109,16 +109,19 @@ export function ClockNodeConfigPanel({
         />
       </label>
 
-      <label className="flex items-start gap-2">
+      <label className="flex items-center gap-2">
         <input
           type="checkbox"
           checked={clockConfig.emitImmediately}
           onChange={handleEmitImmediatelyChange}
-          className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
+          className="h-3.5 w-3.5 shrink-0 rounded border border-input"
         />
-        <span className="text-[11px] leading-relaxed text-muted-foreground">
+        <span className="text-[11px] text-muted-foreground">
           {t("blueprint.config.emitImmediately")}
         </span>
+        <ConfigHintIcon label={t("blueprint.config.emitImmediately")}>
+          {t("blueprint.config.emitImmediatelyHint")}
+        </ConfigHintIcon>
       </label>
 
       <label className="block space-y-1">

package/src/components/ConfigHintIcon.tsx

@@ -31,11 +31,24 @@ export function ConfigHintIcon({
             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"
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             }
             aria-label={t("common.hintAria", { label: resolvedLabel })}
           >
-            ?
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-3.5 w-3.5"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+              <path d="M12 17h.01" />
+            </svg>
           </button>
         </TooltipTrigger>
         <TooltipContent

package/src/components/FetchNodeConfigPanel.tsx

@@ -279,7 +279,7 @@ export function FetchNodeConfigPanel({
   traceEntries = [],
   onUpdateNode,
 }: FetchNodeConfigPanelProps) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const fetchConfig = resolveNodeFetchConfig(node);
   const apiCollections = useApiCollections();
   const endpoints = fetchConfig.swaggerEndpoints ?? [];
@@ -353,11 +353,11 @@ export function FetchNodeConfigPanel({
   }, [resolvedFetchConfig.body, usesScopeTemplate]);
   const headersJsonError = useMemo(
     () => getFetchHeadersValidationError(fetchConfig, incomingScope),
-    [fetchConfig, incomingScope]
+    [fetchConfig, incomingScope, locale]
   );
   const bodyJsonError = useMemo(
     () => getFetchBodyValidationError(fetchConfig.body, resolvedFetchConfig.body),
-    [fetchConfig.body, resolvedFetchConfig.body]
+    [fetchConfig.body, resolvedFetchConfig.body, locale]
   );
   const incomingHasPendingValue = useMemo(() => {
     if (!incomingScope || typeof incomingScope !== "object") return false;
@@ -599,8 +599,13 @@ export function FetchNodeConfigPanel({
       ) : null}
 
       <div className="space-y-1">
-        <span className="text-[11px] text-muted-foreground">
+        <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground">
           {t("blueprint.config.fetchSourceMode")}
+          <ConfigHintIcon label={t("blueprint.config.fetchSourceMode")}>
+            {usingCollection
+              ? t("blueprint.config.fetchSourceCollectionHint")
+              : t("blueprint.config.fetchSourceDirectHint")}
+          </ConfigHintIcon>
         </span>
         <div className="flex rounded-md border border-border p-0.5">
           <button
@@ -628,11 +633,6 @@ export function FetchNodeConfigPanel({
             {t("blueprint.config.fetchSourceCollection")}
           </button>
         </div>
-        <p className="text-[10px] text-muted-foreground">
-          {usingCollection
-            ? t("blueprint.config.fetchSourceCollectionHint")
-            : t("blueprint.config.fetchSourceDirectHint")}
-        </p>
       </div>
 
       <div className="space-y-1 rounded-md border border-border/60 bg-background/70 p-2">
@@ -689,9 +689,10 @@ export function FetchNodeConfigPanel({
             </Select>
           </label>
           <label className="block space-y-1">
-            <span className="text-muted-foreground">
-              {t("blueprint.config.apiCollectionEndpoint")}
-            </span>
+            <ConfigFieldLabel
+              label={t("blueprint.config.apiCollectionEndpoint")}
+              hint={t("blueprint.config.apiCollectionFilledHint")}
+            />
             <div className="flex gap-1.5">
               <TooltipProvider delayDuration={200}>
                 <Tooltip>
@@ -751,11 +752,6 @@ export function FetchNodeConfigPanel({
               />
             </div>
           </label>
-          {selectedCollection ? (
-            <p className="text-[10px] text-muted-foreground">
-              {t("blueprint.config.apiCollectionFilledHint")}
-            </p>
-          ) : null}
           <label className="block space-y-1">
             <span className="text-muted-foreground">{t("blueprint.config.requestUrl")}</span>
             <Input

package/src/components/LogicNodeConfigPanel.tsx

@@ -29,13 +29,13 @@ export function LogicNodeConfigPanel({
   node,
   onUpdateNode,
 }: LogicNodeConfigPanelProps) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const logicConfig = resolveNodeLogicConfig(node);
   const [draftError, setDraftError] = useState<string | null>(null);
 
   const storedValidation = useMemo(
     () => validateLogicSourceCode(logicConfig.sourceCode),
-    [logicConfig.sourceCode]
+    [logicConfig.sourceCode, locale]
   );
 
   const parseError =

package/src/graph/document.ts

@@ -207,7 +207,7 @@ export function resolveRunnableNodeType(
 }
 
 import type { TranslateFn } from "@arronqzy/i18n";
-import { resolveLocale, tForLocale } from "@arronqzy/i18n";
+import { matchMessageInAnyLocale, relocalizeMessage, resolveLocale, tForLocale } from "@arronqzy/i18n";
 
 /** 画布节点顶部（拖拽区）配置类型对应的 i18n key */
 export const BLUEPRINT_CONFIG_TYPE_LABEL_KEYS: Record<
@@ -289,16 +289,23 @@ export function defaultBlueprintNodeLabel(
   return getBlueprintNodeTypeLabel(t, configSource);
 }
 
-/** 当前名称是否仍是「类型默认名」（空或等于任一类型文案） */
+const BLUEPRINT_TYPE_LABEL_KEY_LIST = Object.values(BLUEPRINT_CONFIG_TYPE_LABEL_KEYS);
+
+/** 当前名称是否仍是「类型默认名」（空或等于任一语言下的任一类型文案） */
 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);
+  return BLUEPRINT_TYPE_LABEL_KEY_LIST.some(
+    (key) => t(key) === trimmed || matchMessageInAnyLocale(trimmed, key) !== null
+  );
+}
+
+/** 类型默认名按当前语言显示；用户自定义名称保持不变 */
+export function localizeBlueprintNodeLabel(label: string, t: TranslateFn): string {
+  return relocalizeMessage(label, BLUEPRINT_TYPE_LABEL_KEY_LIST, t);
 }
 
 export function resolveNodeFetchConfig(

package/src/index.tsx

@@ -17,6 +17,7 @@ import {
   type Edge,
 } from "@xyflow/react";
 import { EnsureI18nProvider } from "@arronqzy/i18n/react";
+import { BlueprintDslLocaleSync } from "./BlueprintDslLocaleSync";
 import "@xyflow/react/dist/style.css";
 import "./blueprint.css";
 
@@ -39,6 +40,7 @@ export type { BlueprintExecutionOverlay } from "./runtime/execution-overlay";
 
 export type { BlueprintNodeConfigSidebarProps, BlueprintViewElementOption, BlueprintLibraryOption } from "./BlueprintNodeConfigSidebar";
 export { BlueprintNodeConfigSidebar } from "./BlueprintNodeConfigSidebar";
+export { BlueprintDslLocaleSync } from "./BlueprintDslLocaleSync";
 
 export type BluePrintReactRootProps = {
   style?: React.CSSProperties;
@@ -66,7 +68,6 @@ function BlueprintCanvas({
   selectedNodeId = null,
   executionOverlay = null,
   onSelectNode,
-  onAbortClock,
   libraryNameById,
   containerRef,
 }: BlueprintCanvasProps) {
@@ -253,34 +254,36 @@ export const BluePrintReactRoot: FC<BluePrintReactRootProps> = ({
 
   return (
     <EnsureI18nProvider>
-      <div
-        ref={containerRef}
-        data-workspace-region="blueprint"
-        className="bp-canvas h-full w-full bg-background text-foreground"
-        style={{
-          width: "100%",
-          height: "100%",
-          minHeight: 0,
-          ...style,
-        }}
-      >
-        <BlueprintCanvasProvider
-          onSelectNode={onSelectNode}
-          onAbortClock={onAbortClock}
+      <BlueprintDslLocaleSync>
+        <div
+          ref={containerRef}
+          data-workspace-region="blueprint"
+          className="bp-canvas h-full w-full bg-background text-foreground"
+          style={{
+            width: "100%",
+            height: "100%",
+            minHeight: 0,
+            ...style,
+          }}
         >
-          <ReactFlowProvider>
-            <BlueprintCanvas
-              containerRef={containerRef}
-              graph={graph}
-              onGraphChange={onGraphChange}
-              selectedNodeId={selectedNodeId}
-              executionOverlay={executionOverlay}
-              onSelectNode={onSelectNode}
-              libraryNameById={libraryNameById}
-            />
-          </ReactFlowProvider>
-        </BlueprintCanvasProvider>
-      </div>
+          <BlueprintCanvasProvider
+            onSelectNode={onSelectNode}
+            onAbortClock={onAbortClock}
+          >
+            <ReactFlowProvider>
+              <BlueprintCanvas
+                containerRef={containerRef}
+                graph={graph}
+                onGraphChange={onGraphChange}
+                selectedNodeId={selectedNodeId}
+                executionOverlay={executionOverlay}
+                onSelectNode={onSelectNode}
+                libraryNameById={libraryNameById}
+              />
+            </ReactFlowProvider>
+          </BlueprintCanvasProvider>
+        </div>
+      </BlueprintDslLocaleSync>
     </EnsureI18nProvider>
   );
 };

package/src/nodes/BlueprintNodeCard.tsx

@@ -1,6 +1,7 @@
 import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { cn } from "@arronqzy/ui";
 import type { ReactNode } from "react";
+import { localizeBlueprintNodeLabel } from "../graph/document";
 
 export type BlueprintNodeCardProps = {
   nodeId: string;
@@ -145,7 +146,8 @@ export function BlueprintNodeCard({
   onSelect,
 }: BlueprintNodeCardProps) {
   const { t } = useI18n();
-  const showMeta = Boolean(meta && meta !== label);
+  const displayLabel = localizeBlueprintNodeLabel(label, t);
+  const showMeta = Boolean(meta && meta !== displayLabel);
 
   return (
     <div
@@ -172,7 +174,7 @@ export function BlueprintNodeCard({
         </span>
         <div className="bp-node-card__content">
           <div className="bp-node-card__title-row">
-            <div className="bp-node-card__title">{label}</div>
+            <div className="bp-node-card__title">{displayLabel}</div>
             {progressLabel ? (
               <span
                 className={cn(