@arronqzy/vue-blueprint 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vue 3 blueprint editor for Abuilder (Vue Flow + Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -19,8 +19,9 @@
     "ant-design-vue": "^4.2.6",
     "dayjs": "^1.11.13",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.3",
-    "@arronqzy/vue-rx-store": "0.1.0"
+    "@arronqzy/i18n": "0.1.2",
+    "@arronqzy/vue-rx-store": "0.1.1",
+    "@arronqzy/blueprint-dsl": "1.0.4"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/BlueprintNodeConfigSidebar.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, watch } from "vue";
 import { Checkbox, Input, Select } from "ant-design-vue";
 import {
   LIFECYCLE_NODE_TYPE,
-  PAGE_LIFECYCLE_LABELS,
   PAGE_LIFECYCLE_PHASES,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
@@ -14,14 +14,18 @@ import JsonNodeConfigPanel from "./components/JsonNodeConfigPanel.vue";
 import LogicNodeConfigPanel from "./components/LogicNodeConfigPanel.vue";
 import ViewElementMultiSelect from "./components/ViewElementMultiSelect.vue";
 import {
+  getLifecyclePhaseLabel,
   patchNodeConfigSource,
   pruneViewElementIds,
   resolveBlueprintConfigSource,
   resolveViewElementIds,
   type BlueprintConfigSource,
   type BlueprintGraphNode,
+  type BlueprintNodeRole,
 } from "./graph/document";
 
+const { t } = useI18n();
+
 export type BlueprintViewElementOption = {
   id: string;
   label: string;
@@ -76,15 +80,19 @@ const viewElementLabelById = computed(
   () => new Map(props.viewElementOptions.map((opt) => [opt.id, opt.label]))
 );
 
-const roleLabel = computed(() => {
-  const role = props.node.role;
-  if (role === "blueprint") return "蓝图节点";
-  if (role === "lifecycle") return "生命周期节点";
-  if (role === "and") return "并运算节点";
-  if (role === "fetch") return "数据源节点";
-  if (role === "json") return "JSON 节点";
-  return "逻辑节点";
-});
+const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
+  blueprint: "blueprint.config.roleBlueprint",
+  lifecycle: "blueprint.config.roleLifecycle",
+  and: "blueprint.config.roleAnd",
+  fetch: "blueprint.config.roleFetch",
+  json: "blueprint.config.roleJson",
+  logic: "blueprint.config.roleLogic",
+  clock: "blueprint.config.roleClock",
+};
+
+const roleLabel = computed(() =>
+  t(ROLE_LABEL_KEYS[props.node.role] ?? "blueprint.config.roleLogic")
+);
 
 watch(
   [
@@ -130,14 +138,14 @@ function handleConfigSourceChange(value: string) {
 <template>
   <div class="flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
     <div class="shrink-0 border-b border-border px-3 py-2">
-      <div class="text-xs font-semibold">蓝图节点配置</div>
+      <div class="text-xs font-semibold">{{ t("blueprint.config.title") }}</div>
       <div class="mt-0.5 text-[11px] text-muted-foreground">
         {{ roleLabel }} · {{ node.id }}
       </div>
     </div>
     <div class="min-h-0 flex-1 space-y-3 overflow-auto p-3 text-xs">
       <label class="block space-y-1">
-        <span class="text-muted-foreground">节点名称</span>
+        <span class="text-muted-foreground">{{ t("blueprint.config.nodeName") }}</span>
         <Input
           size="small"
           :value="node.label"
@@ -146,30 +154,30 @@ function handleConfigSourceChange(value: string) {
       </label>
 
       <label class="block space-y-1">
-        <span class="text-muted-foreground">配置类型</span>
+        <span class="text-muted-foreground">{{ t("blueprint.config.configType") }}</span>
         <Select
           size="small"
           class="w-full"
           :value="configSource"
           @change="(v) => handleConfigSourceChange(String(v))"
         >
-          <Select.Option value="blueprint">蓝图配置</Select.Option>
-          <Select.Option value="logic">逻辑配置</Select.Option>
-          <Select.Option value="and">并运算</Select.Option>
-          <Select.Option value="lifecycle">生命周期配置</Select.Option>
-          <Select.Option value="fetch">数据源获取</Select.Option>
-          <Select.Option value="json">JSON 节点</Select.Option>
-          <Select.Option value="clock">时钟</Select.Option>
-          <Select.Option value="view">视图节点配置</Select.Option>
+          <Select.Option value="blueprint">{{ t("blueprint.config.configBlueprint") }}</Select.Option>
+          <Select.Option value="logic">{{ t("blueprint.config.configLogic") }}</Select.Option>
+          <Select.Option value="and">{{ t("blueprint.config.configAnd") }}</Select.Option>
+          <Select.Option value="lifecycle">{{ t("blueprint.config.configLifecycle") }}</Select.Option>
+          <Select.Option value="fetch">{{ t("blueprint.config.configFetch") }}</Select.Option>
+          <Select.Option value="json">{{ t("blueprint.config.configJson") }}</Select.Option>
+          <Select.Option value="clock">{{ t("blueprint.config.configClock") }}</Select.Option>
+          <Select.Option value="view">{{ t("blueprint.config.configView") }}</Select.Option>
         </Select>
       </label>
 
       <div v-if="configSource === 'view'" class="block space-y-1">
-        <span class="text-muted-foreground">关联视图节点</span>
+        <span class="text-muted-foreground">{{ t("blueprint.config.linkedViewNodes") }}</span>
         <ViewElementMultiSelect
           :options="viewElementOptions"
           :value="linkedViewElementIds"
-          placeholder="选择视图节点"
+          :placeholder="t('blueprint.config.selectViewNode')"
           @change="
             (next) =>
               onUpdateNode(node.id, {
@@ -180,14 +188,17 @@ 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">
-          已关联 {{ linkedViewElementIds.length }} 个视图节点：{{
-            linkedViewElementIds
-              .map((id) => viewElementLabelById.get(id) ?? id)
-              .join("、")
-          }}。
+          {{
+            t("blueprint.config.linkedViewCount", {
+              count: linkedViewElementIds.length,
+              names: linkedViewElementIds
+                .map((id) => viewElementLabelById.get(id) ?? id)
+                .join("、"),
+            })
+          }}
         </p>
       </div>
 
@@ -195,15 +206,10 @@ 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">蓝图属性</div>
-        <p class="text-[11px] text-muted-foreground">
-          选中蓝图库中的蓝图后，当输入端收到<strong>真信号</strong>
-          时才会执行该蓝图；执行完成后从输出端发出
-          <strong>真信号</strong>（含嵌套蓝图输出值与当前节点信息），执行失败则发出
-          <strong>假信号</strong>。
-        </p>
+        <div class="font-medium text-foreground">{{ t("blueprint.config.blueprintAttrs") }}</div>
+        <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.blueprintAttrsHint") }}</p>
         <label class="block space-y-1">
-          <span class="text-muted-foreground">引用蓝图库</span>
+          <span class="text-muted-foreground">{{ t("blueprint.config.refLibrary") }}</span>
           <Select
             size="small"
             class="w-full"
@@ -217,7 +223,7 @@ function handleConfigSourceChange(value: string) {
                 })
             "
           >
-            <Select.Option value="__none__">未关联</Select.Option>
+            <Select.Option value="__none__">{{ t("blueprint.config.unlinked") }}</Select.Option>
             <Select.Option
               v-for="opt in blueprintLibraryOptions"
               :key="opt.id"
@@ -228,7 +234,7 @@ function handleConfigSourceChange(value: string) {
           </Select>
         </label>
         <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">
           <Checkbox
@@ -237,7 +243,7 @@ function handleConfigSourceChange(value: string) {
             @update:checked="(v) => onUpdateAllowFalseSignalPropagation?.(Boolean(v))"
           />
           <span class="text-[11px] leading-relaxed text-muted-foreground">
-            允许假信号传递：开启后，节点输出假信号时不会阻塞任务链，错误信息会继续向下游传递。
+            {{ t("blueprint.config.allowFalsePropagateBlueprint") }}
           </span>
         </label>
       </div>
@@ -246,17 +252,17 @@ 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">生命周期钩子</div>
+        <div class="font-medium text-foreground">{{ t("blueprint.config.lifecycleHook") }}</div>
         <p class="text-[11px] text-muted-foreground">
-          生命周期节点<strong>没有输入口</strong>，仅右侧输出口。
+          {{ t("blueprint.config.lifecycleNoInput") }}
           {{
             node.lifecyclePhase === "blueprintActivated"
-              ? "当本蓝图被其他蓝图的蓝图配置节点引用且收到真信号时，自动向下游发出真信号，输出值为父级传入的输入数据。"
-              : "当页面进入对应生命周期时，自动向下游发出真/假信号。"
+              ? t("blueprint.config.lifecycleBlueprintActivatedHint")
+              : t("blueprint.config.lifecyclePageHint")
           }}
         </p>
         <label class="block space-y-1">
-          <span class="text-muted-foreground">监听阶段</span>
+          <span class="text-muted-foreground">{{ t("blueprint.config.listenPhase") }}</span>
           <Select
             size="small"
             class="w-full"
@@ -272,12 +278,12 @@ function handleConfigSourceChange(value: string) {
             "
           >
             <Select.Option v-for="phase in PAGE_LIFECYCLE_PHASES" :key="phase" :value="phase">
-              {{ PAGE_LIFECYCLE_LABELS[phase] }}
+              {{ getLifecyclePhaseLabel(t, phase) }}
             </Select.Option>
           </Select>
         </label>
         <p v-if="node.parentId" class="text-[11px] text-muted-foreground">
-          所属蓝图节点：{{ node.parentId }}
+          {{ t("blueprint.config.parentBlueprintNode", { id: node.parentId }) }}
         </p>
       </div>
 
@@ -301,19 +307,14 @@ 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">并运算</div>
-        <p class="text-[11px] text-muted-foreground">
-          左侧两个输入口 <strong>inA</strong>、<strong>inB</strong>。
-          每个输入口可连 n 条线，同端口任一为真则该端口视为真（或）。
-          仅当 <strong>inA 与 inB 均为真信号</strong> 时，从输出口发出真信号；
-          否则发出假信号。
-        </p>
+        <div class="font-medium text-foreground">{{ t("blueprint.config.andTitle") }}</div>
+        <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.andHint") }}</p>
       </div>
 
       <template v-if="configSource === 'logic'">
         <LogicNodeConfigPanel :node="node" :on-update-node="onUpdateNode" />
         <p v-if="node.parentId" class="text-[11px] text-muted-foreground">
-          所属蓝图节点：{{ node.parentId }}
+          {{ t("blueprint.config.parentBlueprintNode", { id: node.parentId }) }}
         </p>
       </template>
 
@@ -321,7 +322,7 @@ function handleConfigSourceChange(value: string) {
         v-if="configSource !== 'blueprint' && configSource !== 'and'"
         class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
       >
-        <div class="font-medium text-foreground">任务链执行</div>
+        <div class="font-medium text-foreground">{{ t("blueprint.config.taskChain") }}</div>
         <label class="flex items-start gap-2">
           <Checkbox
             :checked="allowFalseSignalPropagation"
@@ -329,7 +330,7 @@ function handleConfigSourceChange(value: string) {
             @update:checked="(v) => onUpdateAllowFalseSignalPropagation?.(Boolean(v))"
           />
           <span class="text-[11px] leading-relaxed text-muted-foreground">
-            允许假信号传递：默认假信号会阻塞任务链；开启后继续向下游传递假信号与错误信息。
+            {{ t("blueprint.config.allowFalsePropagateDefault") }}
           </span>
         </label>
       </div>

package/src/components/BlueprintContextMenu.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { onUnmounted, ref, watch } from "vue";
 
+const { t } = useI18n();
 export type BlueprintContextMenuState =
   | {
       kind: "pane";
@@ -84,7 +86,7 @@ onUnmounted(() => {
         emit('close');
       "
     >
-      新增节点
+      {{ t("blueprint.toolbar.addNode") }}
     </button>
 
     <button
@@ -96,7 +98,7 @@ onUnmounted(() => {
         emit('close');
       "
     >
-      删除节点
+      {{ t("blueprint.toolbar.deleteNode") }}
     </button>
 
     <button
@@ -108,7 +110,7 @@ onUnmounted(() => {
         emit('close');
       "
     >
-      删除连线
+      {{ t("blueprint.toolbar.deleteEdge") }}
     </button>
   </div>
 </template>

package/src/components/BlueprintExecutionLogPanel.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, nextTick, ref, watch } from "vue";
 import { Button, Checkbox, Input, Tooltip } from "ant-design-vue";
 import {
-  PAGE_LIFECYCLE_LABELS,
   type ExecutionTraceEntry,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
+import { getLifecyclePhaseLabel } from "../graph/document";
 
 import type { ExecutionLogSettings } from "../library/execution-log-settings";
 import { cn } from "../utils/cn";
 
+const { t } = useI18n();
+
 export type BlueprintExecutionLogPanelProps = {
   entries: ExecutionTraceEntry[];
   settings: ExecutionLogSettings;
@@ -53,8 +56,7 @@ function formatJson(value: unknown) {
 const phaseLabel = computed(() => {
   if (!props.lifecyclePhase) return null;
   return (
-    PAGE_LIFECYCLE_LABELS[props.lifecyclePhase as PageLifecyclePhase] ??
-    props.lifecyclePhase
+    getLifecyclePhaseLabel(t, props.lifecyclePhase as PageLifecyclePhase)
   );
 });
 
@@ -111,31 +113,31 @@ watch(
     <div class="shrink-0 border-b border-border px-3 py-2">
       <div class="flex items-start justify-between gap-2">
         <div class="min-w-0">
-          <div class="text-xs font-semibold">蓝图任务输出日志</div>
+          <div class="text-xs font-semibold">{{ t("blueprint.log.title") }}</div>
           <div class="mt-0.5 text-[11px] text-muted-foreground">
-            {{ phaseLabel ? `模拟场景：${phaseLabel}` : "选择生命周期节点并开始调试" }}
+            {{ phaseLabel ? t("blueprint.log.simulateSceneWithPhase", { phaseLabel }) : t("blueprint.log.selectLifecycleToDebug") }}
           </div>
         </div>
         <div class="flex shrink-0 items-center gap-1">
           <Tooltip
             v-if="onClearAllSaved"
-            title="立即清空 IndexedDB 中所有已保存的蓝图执行日志"
+            :title="t('blueprint.log.clearIdbTooltip')"
           >
             <Button
               size="small"
               class="h-7 w-7 shrink-0"
-              aria-label="清空 IndexedDB 日志"
+              :aria-label="t('blueprint.log.clearIdbAria')"
               :disabled="!hasSavedRuns"
               @click="() => void onClearAllSaved?.()"
             >
               🗄✕
             </Button>
           </Tooltip>
-          <Tooltip title="清空当前日志，并重置画布执行高亮">
+          <Tooltip :title="t('blueprint.log.clearCurrentTooltip')">
             <Button
               size="small"
               class="h-7 w-7 shrink-0"
-              aria-label="清空日志"
+              :aria-label="t('blueprint.log.clearCurrentAria')"
               :disabled="entries.length === 0"
               @click="onClear"
             >
@@ -149,7 +151,7 @@ watch(
     <div class="relative min-h-0 flex-1">
       <div ref="scrollRef" class="h-full overflow-auto p-3" @scroll="handleScroll">
         <p v-if="entries.length === 0" class="text-[11px] text-muted-foreground">
-          暂无执行记录。使用工具栏「走完全流程」或「下一步」开始模拟。
+          {{ t("blueprint.log.emptyHint") }}
         </p>
         <div v-else class="space-y-0">
           <div v-for="(entry, index) in entries" :key="entry.id">
@@ -170,13 +172,13 @@ watch(
 
               <div class="mt-2 grid gap-2">
                 <div>
-                  <div class="mb-1 text-[10px] font-medium text-muted-foreground">输入</div>
+                  <div class="mb-1 text-[10px] font-medium text-muted-foreground">{{ t("blueprint.log.input") }}</div>
                   <pre
                     class="max-h-32 overflow-auto rounded border border-border/60 bg-background p-2 font-mono text-[10px] leading-relaxed text-foreground"
                   >{{ formatJson(entry.inputs) }}</pre>
                 </div>
                 <div>
-                  <div class="mb-1 text-[10px] font-medium text-muted-foreground">输出</div>
+                  <div class="mb-1 text-[10px] font-medium text-muted-foreground">{{ t("blueprint.log.output") }}</div>
                   <pre
                     class="max-h-32 overflow-auto rounded border p-2 font-mono text-[10px] leading-relaxed"
                     :class="
@@ -211,7 +213,7 @@ watch(
           @click="() => void scrollToBottom('smooth')"
         >
           <span class="shrink-0">↓</span>
-          <span class="truncate">有新日志</span>
+          <span class="truncate">{{ t("blueprint.log.hasNewLogs") }}</span>
           <span v-if="latestEntryPreview" class="truncate opacity-90">
             · {{ latestEntryPreview }}
           </span>
@@ -221,41 +223,41 @@ watch(
 
     <div class="shrink-0 space-y-2 border-t border-border p-3 text-xs">
       <div class="grid grid-cols-2 gap-2">
-        <Tooltip title="将当前调试日志保存到 IndexedDB">
+        <Tooltip :title="t('blueprint.log.saveLogTooltip')">
           <Button size="small" block :disabled="entries.length === 0" @click="onSave">
-            保存日志
+            {{ t("blueprint.log.saveLog") }}
           </Button>
         </Tooltip>
-        <Tooltip title="将当前调试日志导出为 JSON 文件">
+        <Tooltip :title="t('blueprint.log.exportJsonTooltip')">
           <Button size="small" block :disabled="entries.length === 0" @click="onExport">
-            导出 JSON
+            {{ t("blueprint.log.exportJson") }}
           </Button>
         </Tooltip>
       </div>
 
-      <Tooltip title="调试运行完成后，自动将日志写入 IndexedDB">
+      <Tooltip :title="t('blueprint.log.autoSaveTooltip')">
         <label class="flex cursor-default items-center gap-2">
           <Checkbox
             :checked="settings.autoSave"
             @update:checked="(v) => onUpdateSettings({ autoSave: Boolean(v) })"
           />
           <span class="text-[11px] text-muted-foreground">
-            运行完成后自动保存到 IndexedDB
+            {{ t("blueprint.log.autoSaveAfterRun") }}
           </span>
         </label>
       </Tooltip>
 
       <div class="grid grid-cols-2 gap-2">
-        <Tooltip title="IndexedDB 中最多保留的日志条数，超出后自动删除最旧记录">
+        <Tooltip :title="t('blueprint.log.maxSavedCountTooltip')">
           <div class="space-y-1">
-            <span class="text-[11px] text-muted-foreground">最多保存条数</span>
+            <span class="text-[11px] text-muted-foreground">{{ t("blueprint.log.maxSavedCount") }}</span>
             <Input
               type="number"
               size="small"
               :min="1"
               :step="1"
               :value="settings.maxSavedRuns"
-              aria-label="IndexedDB 最多保存日志条数"
+              :aria-label="t('blueprint.log.maxSavedCountAria')"
               @update:value="
                 (v) =>
                   onUpdateSettings({
@@ -265,16 +267,16 @@ watch(
             />
           </div>
         </Tooltip>
-        <Tooltip title="超过保留天数的已保存日志将在清理时被删除">
+        <Tooltip :title="t('blueprint.log.retentionDaysTooltip')">
           <div class="space-y-1">
-            <span class="text-[11px] text-muted-foreground">保留天数</span>
+            <span class="text-[11px] text-muted-foreground">{{ t("blueprint.log.retentionDays") }}</span>
             <Input
               type="number"
               size="small"
               :min="1"
               :step="1"
               :value="settings.retentionDays"
-              aria-label="日志保留天数"
+              :aria-label="t('blueprint.log.retentionDaysAria')"
               @update:value="
                 (v) =>
                   onUpdateSettings({
@@ -286,8 +288,8 @@ watch(
         </Tooltip>
       </div>
 
-      <Tooltip title="按保留天数与条数上限，清理 IndexedDB 中的日志记录">
-        <Button size="small" block @click="onApplyRetention">清理过期与超额</Button>
+      <Tooltip :title="t('blueprint.log.cleanupTooltip')">
+        <Button size="small" block @click="onApplyRetention">{{ t("blueprint.log.cleanupExpired") }}</Button>
       </Tooltip>
     </div>
   </div>

package/src/components/BlueprintMetaDialog.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { ref, watch } from "vue";
 import { Button, Input, Modal } from "ant-design-vue";
 
 import type { BlueprintMetaDraft } from "../library/types";
 
+const { t } = useI18n();
 export type BlueprintMetaDialogProps = {
   open: boolean;
   mode: "export" | "save";
@@ -26,16 +28,20 @@ watch(
   }
 );
 
-const title = () => (props.mode === "export" ? "导出蓝图" : "保存蓝图");
+const title = () =>
+  props.mode === "export"
+    ? t("blueprint.dialog.exportTitle")
+    : t("blueprint.dialog.saveTitle");
 const description = () =>
   props.mode === "export"
-    ? "填写蓝图名称与备注，将当前蓝图导出为 JSON 文件。"
-    : "填写蓝图名称与备注，将当前蓝图保存到本地蓝图库。";
-const confirmLabel = () => (props.mode === "export" ? "导出" : "保存");
+    ? t("blueprint.dialog.exportDescription")
+    : t("blueprint.dialog.saveDescription");
+const confirmLabel = () =>
+  props.mode === "export" ? t("blueprint.dialog.export") : t("blueprint.dialog.save");
 
 function handleConfirm() {
   props.onConfirm({
-    name: name.value.trim() || "未命名蓝图",
+    name: name.value.trim() || t("blueprint.dialog.unnamedBlueprint"),
     remark: remark.value.trim(),
   });
   props.onOpenChange(false);
@@ -47,33 +53,33 @@ function handleConfirm() {
     :open="open"
     :title="title()"
     :ok-text="confirmLabel()"
-    cancel-text="取消"
+    :cancel-text="t('common.cancel')"
     @update:open="onOpenChange"
     @ok="handleConfirm"
   >
     <p class="mb-3 text-xs text-muted-foreground">{{ description() }}</p>
     <div class="space-y-3">
       <label class="block space-y-1">
-        <span class="text-sm">蓝图名称</span>
+        <span class="text-sm">{{ t("blueprint.dialog.blueprintName") }}</span>
         <Input
           id="blueprint-meta-name"
           v-model:value="name"
-          placeholder="例如：首页初始化流程"
+          :placeholder="t('blueprint.dialog.namePlaceholder')"
           autofocus
         />
       </label>
       <label class="block space-y-1">
-        <span class="text-sm">蓝图备注</span>
+        <span class="text-sm">{{ t("blueprint.dialog.remark") }}</span>
         <Input.TextArea
           id="blueprint-meta-remark"
           v-model:value="remark"
-          placeholder="可选：描述蓝图用途、触发条件等"
+          :placeholder="t('blueprint.dialog.remarkPlaceholder')"
           :rows="3"
         />
       </label>
     </div>
     <template #footer>
-      <Button @click="onOpenChange(false)">取消</Button>
+      <Button @click="onOpenChange(false)">{{ t("common.cancel") }}</Button>
       <Button type="primary" @click="handleConfirm">{{ confirmLabel() }}</Button>
     </template>
   </Modal>

package/src/components/BlueprintNodeSwitchTaskDialog.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed } from "vue";
 import { Button, Modal } from "ant-design-vue";
 
+const { t } = useI18n();
 export type BlueprintNodeSwitchTaskDialogProps = {
   open: boolean;
   fromNodeId: string;
@@ -14,28 +16,34 @@ export type BlueprintNodeSwitchTaskDialogProps = {
 const props = defineProps<BlueprintNodeSwitchTaskDialogProps>();
 
 const targetLabel = computed(() =>
-  props.toNodeId === null ? "取消选中" : `节点 ${props.toNodeId}`
+  props.toNodeId === null
+    ? t("blueprint.dialog.cancelSelection")
+    : t("blueprint.dialog.nodeTarget", { id: props.toNodeId })
 );
 </script>
 
 <template>
   <Modal
     :open="open"
-    title="节点正在执行任务"
+    :title="t('blueprint.dialog.taskRunningTitle')"
     :footer="null"
     @update:open="onOpenChange"
   >
     <p class="text-sm text-muted-foreground">
-      节点 <span class="font-mono text-foreground">{{ fromNodeId }}</span>
-      正在执行任务（Swagger 解析或请求调试）。是否切换到 {{ targetLabel }}？
+      {{
+        t("blueprint.dialog.taskRunningDescription", {
+          fromNodeId,
+          target: targetLabel,
+        })
+      }}
     </p>
     <p class="mt-2 text-xs text-muted-foreground">
-      选择「保留并切换」将在后台继续执行，回到该节点时仍能看到进度；选择「取消并切换」会中止当前任务。
+      {{ t("blueprint.dialog.taskSwitchHint") }}
     </p>
     <div class="mt-4 flex flex-wrap justify-end gap-2">
-      <Button @click="onOpenChange(false)">留在此节点</Button>
-      <Button @click="onCancelTaskAndSwitch">取消并切换</Button>
-      <Button type="primary" @click="onKeepTaskAndSwitch">保留并切换</Button>
+      <Button @click="onOpenChange(false)">{{ t("blueprint.dialog.stayOnNode") }}</Button>
+      <Button @click="onCancelTaskAndSwitch">{{ t("blueprint.dialog.cancelAndSwitch") }}</Button>
+      <Button type="primary" @click="onKeepTaskAndSwitch">{{ t("blueprint.dialog.keepAndSwitch") }}</Button>
     </div>
   </Modal>
 </template>