@arronqzy/vue-blueprint 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "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.16",
-    "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/i18n": "0.1.16"
+    "@arronqzy/blueprint-dsl": "1.0.17",
+    "@arronqzy/i18n": "0.1.17",
+    "@arronqzy/vue-rx-store": "0.1.6"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -31,8 +31,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/eslint-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/BlueprintNodeConfigSidebar.vue

@@ -281,15 +281,17 @@ function toggleEventType(eventType: ViewEventType, checked: boolean) {
         <p v-if="!node.libraryBlueprintId" class="text-[11px] text-muted-foreground">
           {{ t("blueprint.config.selectLibraryFirst") }}
         </p>
-        <label class="flex items-start gap-2 pt-1">
+        <label class="flex items-center gap-2 pt-1">
           <Checkbox
             :checked="allowFalseSignalPropagation"
-            class="mt-0.5"
             @update:checked="(v) => onUpdateAllowFalseSignalPropagation?.(Boolean(v))"
           />
-          <span class="text-[11px] leading-relaxed text-muted-foreground">
-            {{ t("blueprint.config.allowFalsePropagateBlueprint") }}
+          <span class="text-[11px] text-muted-foreground">
+            {{ t("blueprint.config.allowFalsePropagate") }}
           </span>
+          <ConfigHintIcon :label="t('blueprint.config.allowFalsePropagate')">
+            {{ t("blueprint.config.allowFalsePropagateBlueprint") }}
+          </ConfigHintIcon>
         </label>
       </div>
 
@@ -426,15 +428,17 @@ function toggleEventType(eventType: ViewEventType, checked: boolean) {
         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.taskChain") }}</div>
-        <label class="flex items-start gap-2">
+        <label class="flex items-center gap-2">
           <Checkbox
             :checked="allowFalseSignalPropagation"
-            class="mt-0.5"
             @update:checked="(v) => onUpdateAllowFalseSignalPropagation?.(Boolean(v))"
           />
-          <span class="text-[11px] leading-relaxed text-muted-foreground">
-            {{ t("blueprint.config.allowFalsePropagateDefault") }}
+          <span class="text-[11px] text-muted-foreground">
+            {{ t("blueprint.config.allowFalsePropagate") }}
           </span>
+          <ConfigHintIcon :label="t('blueprint.config.allowFalsePropagate')">
+            {{ t("blueprint.config.allowFalsePropagateDefault") }}
+          </ConfigHintIcon>
         </label>
       </div>
     </div>

package/src/components/ApiCollectionManagerDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Button, Checkbox, Input, Modal } from "ant-design-vue";
 import {
@@ -263,6 +264,9 @@ async function handleFiles(files: FileList | null) {
       <label class="ml-auto flex cursor-pointer items-center gap-2 text-[11px] text-muted-foreground">
         <Checkbox v-model:checked="persistLocalDefault" />
         {{ t("blueprint.apiCollection.persistLocal") }}
+        <ConfigHintIcon :label="t('blueprint.apiCollection.persistLocal')">
+          {{ t("blueprint.apiCollection.persistLocalHint") }}
+        </ConfigHintIcon>
       </label>
       <input
         ref="fileInputRef"
@@ -273,11 +277,6 @@ async function handleFiles(files: FileList | null) {
         @change="(e) => void handleFiles((e.target as HTMLInputElement).files)"
       />
     </div>
-
-    <p class="mb-2 text-[11px] text-muted-foreground">
-      {{ t("blueprint.apiCollection.persistLocalHint") }}
-    </p>
-
     <pre
       v-if="error"
       class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded border border-destructive/40 bg-destructive/5 p-2 text-[11px] text-destructive"

package/src/components/BluePrintVueRoot.vue

@@ -2,6 +2,9 @@
 import type { BlueprintGraph } from "../graph/blueprint-graph";
 import type { BlueprintExecutionOverlay } from "../runtime/execution-overlay";
 import BlueprintCanvas from "./BlueprintCanvas.vue";
+import { useBlueprintDslLocaleSync } from "../composables/useBlueprintDslLocaleSync";
+
+useBlueprintDslLocaleSync();
 
 const props = withDefaults(
   defineProps<{

package/src/components/ClockNodeConfigPanel.vue

@@ -102,15 +102,17 @@ function handleEmitImmediatelyChange(checked: boolean) {
       />
     </label>
 
-    <label class="flex items-start gap-2">
+    <label class="flex items-center gap-2">
       <Checkbox
         :checked="clockConfig.emitImmediately"
-        class="mt-0.5"
         @update:checked="handleEmitImmediatelyChange"
       />
-      <span class="text-[11px] leading-relaxed text-muted-foreground">
+      <span class="text-[11px] text-muted-foreground">
         {{ t("blueprint.config.emitImmediately") }}
       </span>
+      <ConfigHintIcon :label="t('blueprint.config.emitImmediately')">
+        {{ t("blueprint.config.emitImmediatelyHint") }}
+      </ConfigHintIcon>
     </label>
 
     <label class="block space-y-1">

package/src/components/ConfigHintIcon.vue

@@ -28,11 +28,24 @@ const resolvedLabel = computed(() => props.label || t("common.hint"));
       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'
+        '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"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="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>
   </Tooltip>
 </template>

package/src/components/FetchNodeConfigPanel.vue

@@ -45,7 +45,7 @@ import ConfigHintIcon from "./ConfigHintIcon.vue";
 import FetchUrlAutocomplete from "./FetchUrlAutocomplete.vue";
 import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 export type FetchNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -113,12 +113,14 @@ const resolvedBodyPreview = computed(() => {
   if (!usesScopeTemplate.value) return "";
   return resolvedFetchConfig.value.body?.trim() ?? "";
 });
-const headersJsonError = computed(() =>
-  getFetchHeadersValidationError(fetchConfig.value, incomingScope.value)
-);
-const bodyJsonError = computed(() =>
-  getFetchBodyValidationError(fetchConfig.value.body, resolvedFetchConfig.value.body)
-);
+const headersJsonError = computed(() => {
+  void locale.value;
+  return getFetchHeadersValidationError(fetchConfig.value, incomingScope.value);
+});
+const bodyJsonError = computed(() => {
+  void locale.value;
+  return getFetchBodyValidationError(fetchConfig.value.body, resolvedFetchConfig.value.body);
+});
 const incomingHasPendingValue = computed(() => {
   const scope = incomingScope.value;
   if (!scope || typeof scope !== "object") return false;
@@ -411,8 +413,15 @@ function handleHeadersInput(event: Event) {
     </div>
 
     <div class="space-y-1">
-      <span class="text-[11px] text-muted-foreground">
+      <span class="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 class="flex rounded-md border border-border p-0.5">
         <button
@@ -440,13 +449,6 @@ function handleHeadersInput(event: Event) {
           {{ t("blueprint.config.fetchSourceCollection") }}
         </button>
       </div>
-      <p class="text-[10px] text-muted-foreground">
-        {{
-          usingCollection
-            ? t("blueprint.config.fetchSourceCollectionHint")
-            : t("blueprint.config.fetchSourceDirectHint")
-        }}
-      </p>
     </div>
 
     <div class="space-y-1 rounded-md border border-gray-200/80 bg-white/80 p-2">
@@ -491,7 +493,12 @@ function handleHeadersInput(event: Event) {
           </Select>
         </label>
         <label class="block space-y-1">
-          <span class="text-muted-foreground">{{ t("blueprint.config.apiCollectionEndpoint") }}</span>
+          <span class="inline-flex items-center gap-1 text-muted-foreground">
+            {{ t("blueprint.config.apiCollectionEndpoint") }}
+            <ConfigHintIcon :label="t('blueprint.config.apiCollectionEndpoint')">
+              {{ t("blueprint.config.apiCollectionFilledHint") }}
+            </ConfigHintIcon>
+          </span>
           <div class="flex gap-1.5">
             <Tooltip
               :title="selectedEndpointDescription || undefined"
@@ -544,9 +551,6 @@ function handleHeadersInput(event: Event) {
             </Button>
           </div>
         </label>
-        <p v-if="selectedCollection" class="text-[10px] text-muted-foreground">
-          {{ t("blueprint.config.apiCollectionFilledHint") }}
-        </p>
         <label class="block space-y-1">
           <span class="text-muted-foreground">{{ t("blueprint.config.requestUrl") }}</span>
           <Input

package/src/components/LogicNodeConfigPanel.vue

@@ -8,7 +8,7 @@ import ConfigHintIcon from "./ConfigHintIcon.vue";
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 export type LogicNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -31,9 +31,10 @@ function patchLogicConfig(node: BlueprintGraphNode, patch: Partial<LogicNodeConf
 
 const logicConfig = computed(() => resolveNodeLogicConfig(props.node));
 
-const storedValidation = computed(() =>
-  validateLogicSourceCode(logicConfig.value.sourceCode)
-);
+const storedValidation = computed(() => {
+  void locale.value;
+  return validateLogicSourceCode(logicConfig.value.sourceCode);
+});
 
 const parseError = computed(
   () => draftError.value ?? (storedValidation.value.ok ? null : storedValidation.value.error)

package/src/composables/useBlueprintDslLocaleSync.ts

@@ -0,0 +1,12 @@
+import { setBlueprintDslLocale } from "@arronqzy/blueprint-dsl";
+import { useI18nOptional } from "@arronqzy/i18n/vue";
+import { watch } from "vue";
+
+/**
+ * Keeps blueprint-dsl validation / runtime messages in the app locale. `flush: "sync"`
+ * updates it before computeds that track the locale are re-evaluated.
+ */
+export function useBlueprintDslLocaleSync(): void {
+  const { locale } = useI18nOptional();
+  watch(locale, (next) => setBlueprintDslLocale(next), { immediate: true, flush: "sync" });
+}

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.ts

@@ -4,6 +4,7 @@ export { documentToRunnableGraph } from "./runtime/document-to-runnable-graph";
 export type { BlueprintExecutionOverlay } from "./runtime/execution-overlay";
 export type { BlueprintFlowNodeData } from "./types";
 export { default as BluePrintVueRoot } from "./components/BluePrintVueRoot.vue";
+export { useBlueprintDslLocaleSync } from "./composables/useBlueprintDslLocaleSync";
 export { default as BlueprintCanvas } from "./components/BlueprintCanvas.vue";
 export { default as BlueprintNodeConfigSidebar } from "./BlueprintNodeConfigSidebar.vue";
 export type {

package/src/nodes/BlueprintNodeCard.vue

@@ -2,8 +2,9 @@
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed } from "vue";
 import { cn } from "../utils/cn";
+import { localizeBlueprintNodeLabel } from "../graph/document";
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 export type BlueprintNodeCardProps = {
   nodeId: string;
@@ -26,7 +27,11 @@ const emit = defineEmits<{
   select: [nodeId: string];
 }>();
 
-const showMeta = computed(() => Boolean(props.meta && props.meta !== props.label));
+const displayLabel = computed(() => {
+  void locale.value;
+  return localizeBlueprintNodeLabel(props.label, t);
+});
+const showMeta = computed(() => Boolean(props.meta && props.meta !== displayLabel.value));
 </script>
 
 <template>
@@ -108,7 +113,7 @@ const showMeta = computed(() => Boolean(props.meta && props.meta !== props.label
       </span>
       <div class="bp-node-card__content">
         <div class="bp-node-card__title-row">
-          <div class="bp-node-card__title">{{ label }}</div>
+          <div class="bp-node-card__title">{{ displayLabel }}</div>
           <span
             v-if="progressLabel"
             :class="cn('bp-node-card__badge', `bp-node-card__badge--${variant}`)"