@arronqzy/react-blueprint 1.0.1 → 1.0.4

package/src/components/BlueprintExecutionLogPanel.tsx

@@ -17,10 +17,11 @@ import {
   cn,
 } from "@arronqzy/ui";
 import {
-  PAGE_LIFECYCLE_LABELS,
-  type ExecutionTraceEntry,
+    type ExecutionTraceEntry,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
+import { useI18n } from "@arronqzy/i18n/react";
+import { getLifecyclePhaseLabel } from "../graph/document";
 
 import type { ExecutionLogSettings } from "../library/execution-log-settings";
 
@@ -53,8 +54,8 @@ function IconClearDb({ className }: { className?: string }) {
       aria-hidden="true"
     >
       <ellipse cx="12" cy="6" rx="7" ry="2.5" />
-      <path d="M5 6v12c0 1.5 3.1 2.5 7 2.5s7-1 2.5-7-2.5V6" />
-      <path d="M5 12c0 1.5 3.1 2.5 7 2.5s7-1 7-2.5" />
+      <path d="M5 6v12c0 1.5 3.134 2.5 7 2.5s7-1.343 7-2.5V6" />
+      <path d="M5 12c0 1.5 3.134 2.5 7 2.5s7-1.343 7-2.5" />
       <path d="m16 16 4 4M20 16l-4 4" />
     </svg>
   );
@@ -151,6 +152,7 @@ export function BlueprintExecutionLogPanel({
   hasSavedRuns = false,
   lifecyclePhase,
 }: BlueprintExecutionLogPanelProps) {
+  const { t } = useI18n();
   const scrollRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const prevEntryCountRef = useRef(entries.length);
@@ -160,8 +162,8 @@ export function BlueprintExecutionLogPanel({
 
   const phaseLabel = useMemo(() => {
     if (!lifecyclePhase) return null;
-    return PAGE_LIFECYCLE_LABELS[lifecyclePhase as PageLifecyclePhase] ?? lifecyclePhase;
-  }, [lifecyclePhase]);
+    return getLifecyclePhaseLabel(t, lifecyclePhase as PageLifecyclePhase);
+  }, [lifecyclePhase, t]);
 
   const latestEntryPreview = useMemo(() => {
     const latest = entries[entries.length - 1];
@@ -211,9 +213,9 @@ export function BlueprintExecutionLogPanel({
         <div className="shrink-0 border-b border-border px-3 py-2">
           <div className="flex items-start justify-between gap-2">
             <div className="min-w-0">
-              <div className="text-xs font-semibold">蓝图任务输出日志</div>
+              <div className="text-xs font-semibold">{t("blueprint.log.title")}</div>
               <div className="mt-0.5 text-[11px] text-muted-foreground">
-                {phaseLabel ? `模拟场景：${phaseLabel}` : "选择生命周期节点并开始调试"}
+                {phaseLabel ? t("blueprint.log.simulateSceneWithPhase", { phaseLabel }) : t("blueprint.log.selectLifecycleToDebug")}
               </div>
             </div>
             <div className="flex shrink-0 items-center gap-1">
@@ -223,8 +225,8 @@ export function BlueprintExecutionLogPanel({
                   variant="outline"
                   size="icon"
                   className="h-7 w-7 shrink-0"
-                  content="立即清空 IndexedDB 中所有已保存的蓝图执行日志"
-                  aria-label="清空 IndexedDB 日志"
+                  content={t("blueprint.log.clearIdbTooltip")}
+                  aria-label={t("blueprint.log.clearIdbAria")}
                   disabled={!hasSavedRuns}
                   onClick={() => void onClearAllSaved()}
                 >
@@ -236,8 +238,8 @@ export function BlueprintExecutionLogPanel({
                 variant="outline"
                 size="icon"
                 className="h-7 w-7 shrink-0"
-                content="清空当前日志，并重置画布执行高亮"
-                aria-label="清空日志"
+                content={t("blueprint.log.clearCurrentTooltip")}
+                aria-label={t("blueprint.log.clearCurrentAria")}
                 disabled={entries.length === 0}
                 onClick={onClear}
               >
@@ -255,7 +257,7 @@ export function BlueprintExecutionLogPanel({
           >
             {entries.length === 0 ? (
               <p className="text-[11px] text-muted-foreground">
-                暂无执行记录。使用工具栏「走完全流程」或「下一步」开始模拟。
+                {t("blueprint.log.emptyHint")}
               </p>
             ) : (
               <div className="space-y-0">
@@ -279,7 +281,7 @@ export function BlueprintExecutionLogPanel({
                       <div className="mt-2 grid gap-2">
                         <div>
                           <div className="mb-1 text-[10px] font-medium text-muted-foreground">
-                            输入
+                            {t("blueprint.log.input")}
                           </div>
                           <pre className="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)}
@@ -287,7 +289,7 @@ export function BlueprintExecutionLogPanel({
                         </div>
                         <div>
                           <div className="mb-1 text-[10px] font-medium text-muted-foreground">
-                            输出
+                            {t("blueprint.log.output")}
                           </div>
                           <pre
                             className={cn(
@@ -322,7 +324,7 @@ export function BlueprintExecutionLogPanel({
                 onClick={() => scrollToBottom("smooth")}
               >
                 <ArrowDownIcon className="h-3.5 w-3.5 shrink-0" />
-                <span className="truncate">有新日志</span>
+                <span className="truncate">{t("blueprint.log.hasNewLogs")}</span>
                 {latestEntryPreview ? (
                   <span className="truncate opacity-90">· {latestEntryPreview}</span>
                 ) : null}
@@ -338,26 +340,26 @@ export function BlueprintExecutionLogPanel({
               variant="outline"
               size="sm"
               className="w-full"
-              content="将当前调试日志保存到 IndexedDB"
+              content={t("blueprint.log.saveLogTooltip")}
               disabled={entries.length === 0}
               onClick={onSave}
             >
-              保存日志
+              {t("blueprint.log.saveLog")}
             </LogTooltipButton>
             <LogTooltipButton
               type="button"
               variant="outline"
               size="sm"
               className="w-full"
-              content="将当前调试日志导出为 JSON 文件"
+              content={t("blueprint.log.exportJsonTooltip")}
               disabled={entries.length === 0}
               onClick={onExport}
             >
-              导出 JSON
+              {t("blueprint.log.exportJson")}
             </LogTooltipButton>
           </div>
 
-          <LogTooltip content="调试运行完成后，自动将日志写入 IndexedDB">
+          <LogTooltip content={t("blueprint.log.autoSaveTooltip")}>
             <label className="flex cursor-default items-center gap-2">
               <input
                 type="checkbox"
@@ -366,15 +368,15 @@ export function BlueprintExecutionLogPanel({
                 className="h-3.5 w-3.5 rounded border border-input"
               />
               <span className="text-[11px] text-muted-foreground">
-                运行完成后自动保存到 IndexedDB
+                {t("blueprint.log.autoSaveAfterRun")}
               </span>
             </label>
           </LogTooltip>
 
           <div className="grid grid-cols-2 gap-2">
-            <LogTooltip content="IndexedDB 中最多保留的日志条数，超出后自动删除最旧记录">
+            <LogTooltip content={t("blueprint.log.maxSavedCountTooltip")}>
               <div className="space-y-1">
-                <Label className="text-[11px] text-muted-foreground">最多保存条数</Label>
+                <Label className="text-[11px] text-muted-foreground">{t("blueprint.log.maxSavedCount")}</Label>
                 <Input
                   type="number"
                   min={1}
@@ -386,13 +388,13 @@ export function BlueprintExecutionLogPanel({
                     })
                   }
                   className="h-8"
-                  aria-label="IndexedDB 最多保存日志条数"
+                  aria-label={t("blueprint.log.maxSavedCountAria")}
                 />
               </div>
             </LogTooltip>
-            <LogTooltip content="超过保留天数的已保存日志将在清理时被删除">
+            <LogTooltip content={t("blueprint.log.retentionDaysTooltip")}>
               <div className="space-y-1">
-                <Label className="text-[11px] text-muted-foreground">保留天数</Label>
+                <Label className="text-[11px] text-muted-foreground">{t("blueprint.log.retentionDays")}</Label>
                 <Input
                   type="number"
                   min={1}
@@ -404,7 +406,7 @@ export function BlueprintExecutionLogPanel({
                     })
                   }
                   className="h-8"
-                  aria-label="日志保留天数"
+                  aria-label={t("blueprint.log.retentionDaysAria")}
                 />
               </div>
             </LogTooltip>
@@ -415,10 +417,10 @@ export function BlueprintExecutionLogPanel({
             variant="secondary"
             size="sm"
             className="w-full"
-            content="按保留天数与条数上限，清理 IndexedDB 中的日志记录"
+            content={t("blueprint.log.cleanupTooltip")}
             onClick={onApplyRetention}
           >
-            清理过期与超额
+            {t("blueprint.log.cleanupExpired")}
           </LogTooltipButton>
         </div>
       </div>

package/src/components/BlueprintLibrarySelect.tsx

@@ -7,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintLibraryListItem } from "../library/types";
 
@@ -26,11 +27,13 @@ function groupItems(items: BlueprintLibraryListItem[]) {
 export function BlueprintLibrarySelect({
   items,
   value,
-  placeholder = "蓝图库",
+  placeholder,
   onSelect,
 }: BlueprintLibrarySelectProps) {
+  const { t } = useI18n();
   const { saved, imported } = groupItems(items);
   const hasItems = items.length > 0;
+  const resolvedPlaceholder = placeholder ?? t("blueprint.toolbar.library");
 
   return (
     <Select
@@ -39,12 +42,16 @@ export function BlueprintLibrarySelect({
       disabled={!hasItems}
     >
       <SelectTrigger className="h-7 w-[168px] text-xs">
-        <SelectValue placeholder={hasItems ? placeholder : "蓝图库为空"} />
+        <SelectValue
+          placeholder={
+            hasItems ? resolvedPlaceholder : t("blueprint.toolbar.libraryEmpty")
+          }
+        />
       </SelectTrigger>
       <SelectContent className="z-[10100]">
         {saved.length > 0 ? (
           <SelectGroup>
-            <SelectLabel>已保存</SelectLabel>
+            <SelectLabel>{t("blueprint.toolbar.saved")}</SelectLabel>
             {saved.map((item) => (
               <SelectItem key={item.id} value={item.id} className="text-xs">
                 {item.name}
@@ -54,7 +61,7 @@ export function BlueprintLibrarySelect({
         ) : null}
         {imported.length > 0 ? (
           <SelectGroup>
-            <SelectLabel>已导入</SelectLabel>
+            <SelectLabel>{t("blueprint.toolbar.imported")}</SelectLabel>
             {imported.map((item) => (
               <SelectItem key={item.id} value={item.id} className="text-xs">
                 {item.name}

package/src/components/BlueprintMetaDialog.tsx

@@ -11,6 +11,7 @@ import {
   Label,
   Textarea,
 } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintMetaDraft } from "../library/types";
 
@@ -29,6 +30,7 @@ export function BlueprintMetaDialog({
   onOpenChange,
   onConfirm,
 }: BlueprintMetaDialogProps) {
+  const { t } = useI18n();
   const [name, setName] = useState(initialMeta.name);
   const [remark, setRemark] = useState(initialMeta.remark);
 
@@ -38,16 +40,20 @@ export function BlueprintMetaDialog({
     setRemark(initialMeta.remark);
   }, [initialMeta.name, initialMeta.remark, open]);
 
-  const title = mode === "export" ? "导出蓝图" : "保存蓝图";
+  const title =
+    mode === "export"
+      ? t("blueprint.dialog.exportTitle")
+      : t("blueprint.dialog.saveTitle");
   const description =
     mode === "export"
-      ? "填写蓝图名称与备注，将当前蓝图导出为 JSON 文件。"
-      : "填写蓝图名称与备注，将当前蓝图保存到本地蓝图库。";
-  const confirmLabel = mode === "export" ? "导出" : "保存";
+      ? t("blueprint.dialog.exportDescription")
+      : t("blueprint.dialog.saveDescription");
+  const confirmLabel =
+    mode === "export" ? t("blueprint.dialog.export") : t("blueprint.dialog.save");
 
   const handleConfirm = () => {
     onConfirm({
-      name: name.trim() || "未命名蓝图",
+      name: name.trim() || t("blueprint.dialog.unnamedBlueprint"),
       remark: remark.trim(),
     });
     onOpenChange(false);
@@ -62,29 +68,33 @@ export function BlueprintMetaDialog({
         </DialogHeader>
         <div className="space-y-3 py-1">
           <div className="space-y-1.5">
-            <Label htmlFor="blueprint-meta-name">蓝图名称</Label>
+            <Label htmlFor="blueprint-meta-name">
+              {t("blueprint.dialog.blueprintName")}
+            </Label>
             <Input
               id="blueprint-meta-name"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="例如：首页初始化流程"
+              placeholder={t("blueprint.dialog.namePlaceholder")}
               autoFocus
             />
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="blueprint-meta-remark">蓝图备注</Label>
+            <Label htmlFor="blueprint-meta-remark">
+              {t("blueprint.dialog.remark")}
+            </Label>
             <Textarea
               id="blueprint-meta-remark"
               value={remark}
               onChange={(e) => setRemark(e.target.value)}
-              placeholder="可选：描述蓝图用途、触发条件等"
+              placeholder={t("blueprint.dialog.remarkPlaceholder")}
               rows={3}
             />
           </div>
         </div>
         <DialogFooter>
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-            取消
+            {t("common.cancel")}
           </Button>
           <Button type="button" onClick={handleConfirm}>
             {confirmLabel}

package/src/components/BlueprintNodeSwitchTaskDialog.tsx

@@ -7,6 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
 
 export type BlueprintNodeSwitchTaskDialogProps = {
   open: boolean;
@@ -25,31 +26,36 @@ export function BlueprintNodeSwitchTaskDialog({
   onKeepTaskAndSwitch,
   onCancelTaskAndSwitch,
 }: BlueprintNodeSwitchTaskDialogProps) {
+  const { t } = useI18n();
   const targetLabel =
-    toNodeId === null ? "取消选中" : `节点 ${toNodeId}`;
+    toNodeId === null
+      ? t("blueprint.dialog.cancelSelection")
+      : t("blueprint.dialog.nodeTarget", { id: toNodeId });
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>节点正在执行任务</DialogTitle>
+          <DialogTitle>{t("blueprint.dialog.taskRunningTitle")}</DialogTitle>
           <DialogDescription>
-            节点 <span className="font-mono text-foreground">{fromNodeId}</span>{" "}
-            正在执行任务（Swagger 解析或请求调试）。是否切换到 {targetLabel}？
+            {t("blueprint.dialog.taskRunningDescription", {
+              fromNodeId,
+              target: targetLabel,
+            })}
           </DialogDescription>
         </DialogHeader>
         <p className="text-xs text-muted-foreground">
-          选择「保留并切换」将在后台继续执行，回到该节点时仍能看到进度；选择「取消并切换」会中止当前任务。
+          {t("blueprint.dialog.taskSwitchHint")}
         </p>
         <DialogFooter className="gap-2 sm:gap-0">
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-            留在此节点
+            {t("blueprint.dialog.stayOnNode")}
           </Button>
           <Button type="button" variant="secondary" onClick={onCancelTaskAndSwitch}>
-            取消并切换
+            {t("blueprint.dialog.cancelAndSwitch")}
           </Button>
           <Button type="button" onClick={onKeepTaskAndSwitch}>
-            保留并切换
+            {t("blueprint.dialog.keepAndSwitch")}
           </Button>
         </DialogFooter>
       </DialogContent>