@arronqzy/react-view 1.0.35 → 1.0.36

package/dist/styles.css

@@ -2511,6 +2511,10 @@ video {
   text-align: center;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -3239,6 +3243,10 @@ video {
   --tw-ring-color: hsl(var(--primary));
 }
 
+.focus-visible\:ring-ring:focus-visible {
+  --tw-ring-color: hsl(var(--ring));
+}
+
 .focus-visible\:ring-offset-0:focus-visible {
   --tw-ring-offset-width: 0px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "files": [
     "src",
     "dist",
@@ -30,12 +30,12 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
-    "@arronqzy/ui": "1.0.9",
-    "@arronqzy/i18n": "0.1.16",
-    "@arronqzy/react-blueprint": "1.0.21",
-    "@arronqzy/blueprint-dsl": "1.0.16",
-    "@arronqzy/view-scene3d": "0.1.5",
+    "@arronqzy/blueprint-dsl": "1.0.17",
+    "@arronqzy/ui": "1.0.10",
+    "@arronqzy/i18n": "0.1.17",
+    "@arronqzy/react-blueprint": "1.0.22",
     "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/view-scene3d": "0.1.5",
     "@arronqzy/view-table": "0.1.8",
     "@arronqzy/webllm-assistant": "0.1.16"
   },
@@ -45,9 +45,9 @@
     "@types/use-sync-external-store": "^1.5.0",
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
+    "@arronqzy/typescript-config": "1.0.0",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/tailwind": "1.0.2",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/tailwind": "1.0.2"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/src/core/instructions.tsx

@@ -33,7 +33,7 @@ export class InstructionSet {
   execute(name: string, ...args: any[]) {
     const fn = this.instructions[name];
     if (!fn) {
-      console.warn(`指令不存在: ${name}`);
+      console.warn(`Instruction not found: ${name}`);
       return;
     }
     const result = fn(...args);

package/src/core/template.tsx

@@ -26,7 +26,7 @@ export const Template = (
       instructions.execute(props.id + "click", { e });
     } else {
       if (isDevMode()) {
-        console.warn("Template 缺少 id,无法触发事件");
+        console.warn("Template is missing an id; events cannot be triggered");
       }
     }
   };

package/src/panel/I18nRoot.tsx

@@ -1,6 +1,7 @@
 import { I18nProvider } from "@arronqzy/i18n/react";
 import { LOCALE_STORAGE_KEY } from "@arronqzy/i18n";
 import { appStorageKey } from "@arronqzy/blueprint-dsl";
+import { BlueprintDslLocaleSync } from "@arronqzy/react-blueprint";
 import type { Locale } from "@arronqzy/i18n";
 import type { ReactNode } from "react";
 
@@ -24,7 +25,7 @@ export function I18nRoot({
       onLocaleChange={onLocaleChange}
       storageKey={appStorageKey(LOCALE_STORAGE_KEY, nameSpace)}
     >
-      {children}
+      <BlueprintDslLocaleSync>{children}</BlueprintDslLocaleSync>
     </I18nProvider>
   );
 }

package/src/panel/ReactViewOnlinePreview.tsx

@@ -17,6 +17,7 @@ import type { State } from "@arronqzy/rx-store";
 import { ElementsLayer } from "./components/ElementsLayer";
 import type { TableCellActionHandler } from "./components/table/TableNodeContent";
 import type { PanelElement } from "./types";
+import { localizePanelElement } from "./utils/panelElementDefaults";
 import {
   clearViewElementScopes,
   getViewElementScope,
@@ -236,7 +237,8 @@ function ReactViewOnlinePreviewInner({
 
   const displayElements = useMemo(
     () =>
-      scopedLayerElements.map((el) => {
+      scopedLayerElements.map((source) => {
+        const el = localizePanelElement(source, t);
         const x = el.x - sceneBounds.minX;
         const y = el.y - sceneBounds.minY;
         if (outputScale) return { ...el, x, y };
@@ -255,6 +257,7 @@ function ReactViewOnlinePreviewInner({
       sceneBounds.minX,
       sceneBounds.minY,
       scopedLayerElements,
+      t,
     ]
   );
 

package/src/panel/ReactViewPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "@arronqzy/i18n/react";
-import type { Locale } from "@arronqzy/i18n";
+import { relocalizeMessage, type Locale } from "@arronqzy/i18n";
 import type { State } from "@arronqzy/rx-store";
 import type { PanelElement } from "./types";
 
@@ -283,6 +283,12 @@ function ReactViewPanelInner({
     name: t("panel.defaults.unnamedBlueprint"),
     remark: "",
   });
+  const displayProductName = relocalizeMessage(productName, "panel.defaults.unnamedProduct", t);
+  const displayBlueprintName = relocalizeMessage(
+    blueprintMeta.name,
+    ["panel.defaults.unnamedBlueprint", "blueprint.dialog.unnamedBlueprint"],
+    t
+  );
   const [blueprintLibraryItems, setBlueprintLibraryItems] = useState<
     BlueprintLibraryListItem[]
   >([]);
@@ -682,7 +688,7 @@ function ReactViewPanelInner({
   const blueprintDebugSession = useBlueprintDebugSession({
     graph: blueprintGraph,
     blueprintId: activeBlueprintLibraryId,
-    blueprintName: blueprintMeta.name || t("panel.defaults.unnamedBlueprint"),
+    blueprintName: displayBlueprintName || t("panel.defaults.unnamedBlueprint"),
     resolveLibraryBlueprint,
     libraryNameById: blueprintLibraryNameById,
     onExecutionBlocked: handleBlueprintExecutionBlocked,
@@ -1648,7 +1654,7 @@ function ReactViewPanelInner({
     const previewFaviconLink = faviconHrefWithVersion
       ? `<link rel="icon" type="image/png" href="${faviconHrefWithVersion}" /><link rel="shortcut icon" type="image/png" href="${faviconHrefWithVersion}" />`
       : "";
-    const previewTitle = productName.trim() || t("panel.defaults.unnamedProduct");
+    const previewTitle = displayProductName.trim() || t("panel.defaults.unnamedProduct");
     const escapedPreviewTitle = previewTitle
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
@@ -1787,7 +1793,7 @@ function ReactViewPanelInner({
         win.document.head.appendChild(link);
       });
     }
-  }, [allElements, layers, productName, titleIconDataUrl]);
+  }, [allElements, layers, displayProductName, t, titleIconDataUrl]);
 
   const handlePreviewLayer = useCallback(() => {
     void (async () => {
@@ -2048,7 +2054,7 @@ function ReactViewPanelInner({
                 style={{ zIndex: PANEL_Z_INDEX.toolbar }}
               >
                 <Input
-                  value={productName}
+                  value={displayProductName}
                   onChange={(e) => setProductName(e.target.value)}
                   placeholder={t("panel.menubar.productNamePlaceholder")}
                   className="h-7 w-[220px] text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
@@ -2332,7 +2338,7 @@ function ReactViewPanelInner({
                 blueprintProps={blueprintCanvasProps}
                 blueprintLibraryItems={blueprintLibraryItems}
                 activeBlueprintLibraryId={activeBlueprintLibraryId}
-                currentBlueprintLabel={blueprintMeta.name}
+                currentBlueprintLabel={displayBlueprintName}
                 onSelectBlueprintLibraryItem={(id) => {
                   void handleSelectBlueprintLibraryItem(id);
                 }}

package/src/panel/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/panel/components/config/PanelConfigAudioSection.tsx

@@ -152,7 +152,12 @@ export function PanelConfigAudioSection({
                   t("panel.config.groupAudioSource"),
                   <>
                     <label className="block space-y-1" data-config-field="audioRemoteUrl">
-                      <div>{t("panel.config.audioUrl")}</div>
+                      <div className="flex items-center gap-1">
+                        {t("panel.config.audioUrl")}
+                        <ConfigHintIcon label={t("panel.config.audioUrl")}>
+                          {t("panel.config.urlScopeHint")}
+                        </ConfigHintIcon>
+                      </div>
                       <Input
                         value={selectedElement.audioRemoteUrl ?? ""}
                         onChange={(e) =>
@@ -164,9 +169,6 @@ export function PanelConfigAudioSection({
                         placeholder={t("panel.config.urlScopePlaceholder")}
                         className="h-7 font-mono text-[11px]"
                       />
-                      <p className="text-[10px] text-muted-foreground">
-                        {t("panel.config.urlScopeHint")}
-                      </p>
                     </label>
                     <div className="flex items-center gap-2">
                       <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

package/src/panel/components/config/PanelConfigChartSection.tsx

@@ -118,7 +118,12 @@ export function PanelConfigChartSection({
                     t("panel.config.groupData"),
                     <>
                       <label className="block space-y-1" data-config-field="chart.labelsText">
-                        <div>{t("panel.config.labelsCsv")}</div>
+                        <div className="flex items-center gap-1">
+                          {t("panel.config.labelsCsv")}
+                          <ConfigHintIcon label={t("panel.config.labelsCsv")}>
+                            {t("panel.config.scopeTemplateHint")}
+                          </ConfigHintIcon>
+                        </div>
                         <Input
                           value={getChartLabelsDisplayText(selectedElement.chart)}
                           onChange={(e) =>
@@ -129,13 +134,15 @@ export function PanelConfigChartSection({
                           placeholder={t("panel.config.labelsCsvPlaceholder")}
                           className="h-7"
                         />
-                        <p className="text-[10px] text-muted-foreground">
-                          {t("panel.config.scopeTemplateHint")}
-                        </p>
                       </label>
 
                       <label className="block space-y-1" data-config-field="chart.valuesText">
-                        <div>{t("panel.config.valuesCsv")}</div>
+                        <div className="flex items-center gap-1">
+                          {t("panel.config.valuesCsv")}
+                          <ConfigHintIcon label={t("panel.config.valuesCsv")}>
+                            {t("panel.config.scopeTemplateHint")}
+                          </ConfigHintIcon>
+                        </div>
                         <Input
                           value={getChartValuesDisplayText(selectedElement.chart)}
                           onChange={(e) =>
@@ -146,9 +153,6 @@ export function PanelConfigChartSection({
                           placeholder={t("panel.config.valuesCsvPlaceholder")}
                           className="h-7"
                         />
-                        <p className="text-[10px] text-muted-foreground">
-                          {t("panel.config.scopeTemplateHint")}
-                        </p>
                       </label>
                     </>
                   )}

package/src/panel/components/config/PanelConfigScene3dSection.tsx

@@ -305,7 +305,12 @@ export function PanelConfigScene3dSection({
   return (
     <div className="space-y-3">
       <div className="space-y-1.5">
-        <div className="text-[11px] font-medium">{t("panel.config.groupScene3dPurpose")}</div>
+        <div className="flex items-center gap-1 text-[11px] font-medium">
+          {t("panel.config.groupScene3dPurpose")}
+          <ConfigHintIcon label={t("panel.config.groupScene3dPurpose")}>
+            {t("panel.config.scene3dPurposeHint")}
+          </ConfigHintIcon>
+        </div>
         <Select
           value={config.presentation.purpose}
           onValueChange={(value) => {
@@ -322,9 +327,6 @@ export function PanelConfigScene3dSection({
             <SelectItem value="sandbox">{t("panel.config.scene3dPurposeSandbox")}</SelectItem>
           </SelectContent>
         </Select>
-        <div className="text-[10px] text-muted-foreground">
-          {t("panel.config.scene3dPurposeHint")}
-        </div>
         <label className="block space-y-0.5 text-[10px]">
           <span>{t("panel.config.scene3dEnvironment")}</span>
           <Select
@@ -403,8 +405,11 @@ export function PanelConfigScene3dSection({
         />
       </div>
       <label className="block space-y-1" data-config-field="scene3d.modelUrl">
-        <div className="text-[10px] text-muted-foreground">
+        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
           {t("panel.config.scene3dModelUrl")}
+          <ConfigHintIcon label={t("panel.config.scene3dModelUrl")}>
+            {t("panel.config.urlScopeHint")}
+          </ConfigHintIcon>
         </div>
         <div className="flex gap-1.5">
           <Input
@@ -424,7 +429,6 @@ export function PanelConfigScene3dSection({
             {t("common.add")}
           </Button>
         </div>
-        <p className="text-[10px] text-muted-foreground">{t("panel.config.urlScopeHint")}</p>
       </label>
 
       {config.models.length === 0 ? (
@@ -688,7 +692,12 @@ export function PanelConfigScene3dSection({
       )}
 
       <div className="space-y-2">
-        <div className="text-[11px] font-medium">{t("panel.config.groupScene3dCamera")}</div>
+        <div className="flex items-center gap-1 text-[11px] font-medium">
+          {t("panel.config.groupScene3dCamera")}
+          <ConfigHintIcon label={t("panel.config.groupScene3dCamera")}>
+            {t("panel.config.scene3dCameraEditDesc")}
+          </ConfigHintIcon>
+        </div>
         <div className="grid grid-cols-3 gap-1.5">
           {(["x", "y", "z"] as const).map((axis, index) => (
             <label key={`pos-${axis}`} className="space-y-0.5 text-[10px]">
@@ -734,7 +743,6 @@ export function PanelConfigScene3dSection({
             }
           />
         </label>
-        <div className="text-[10px] text-muted-foreground">{t("panel.config.scene3dCameraEditDesc")}</div>
       </div>
 
       <div className="space-y-2">

package/src/panel/components/config/PanelConfigStyleSections.tsx

@@ -12,6 +12,7 @@ import type { PanelElement, PanelElementStyle } from "../../types";
 import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
 import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 import { getPanelMessages } from "../../constants/messages";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
 export function PanelConfigStyleSections({
@@ -90,7 +91,12 @@ export function PanelConfigStyleSections({
                 t("panel.config.groupBgLayout"),
                 <>
                   <label className="block space-y-1" data-config-field="style.backgroundImage">
-                    <div>{t("panel.config.backgroundImage")}</div>
+                    <div className="flex items-center gap-1">
+                      {t("panel.config.backgroundImage")}
+                      <ConfigHintIcon label={t("panel.config.backgroundImage")}>
+                        {t("panel.config.urlScopeHint")}
+                      </ConfigHintIcon>
+                    </div>
                     <Input
                       value={
                         selectedElement.style?.backgroundImageRemoteUrl ??
@@ -103,9 +109,6 @@ export function PanelConfigStyleSections({
                       placeholder={t("panel.config.urlScopePlaceholder")}
                       className="h-7 font-mono text-[11px]"
                     />
-                    <p className="text-[10px] text-muted-foreground">
-                      {t("panel.config.urlScopeHint")}
-                    </p>
                   </label>
                   <div className="flex items-center gap-2">
                     <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

package/src/panel/components/config/PanelConfigTextSection.tsx

@@ -11,6 +11,7 @@ import {
 } from "@arronqzy/ui";
 import type { PanelElement } from "../../types";
 import { cssTextLineHeight, cssTextAlignStyle } from "../../utils/panelElementDefaults";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
 export function PanelConfigTextSection({
@@ -111,7 +112,12 @@ export function PanelConfigTextSection({
                       }}
                     />
                     <label className="block space-y-1">
-                      <div>{t("panel.config.textHtmlSource")}</div>
+                      <div className="flex items-center gap-1">
+                        {t("panel.config.textHtmlSource")}
+                        <ConfigHintIcon label={t("panel.config.textHtmlSource")}>
+                          {t("panel.config.scopeTemplateHint")}
+                        </ConfigHintIcon>
+                      </div>
                       <textarea
                         data-config-field="textHtml"
                         value={selectedElement.textHtml ?? ""}
@@ -125,9 +131,6 @@ export function PanelConfigTextSection({
                         placeholder={t("panel.config.textHtmlSourcePlaceholder")}
                         className="w-full rounded border border-border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none focus-visible:ring-1 focus-visible:ring-primary"
                       />
-                      <p className="text-[10px] text-muted-foreground">
-                        {t("panel.config.scopeTemplateHint")}
-                      </p>
                     </label>
                   </>
                 )}

package/src/panel/components/config/PanelConfigVideoSection.tsx

@@ -4,6 +4,7 @@ import { Checkbox, Input } from "@arronqzy/ui";
 import type { PanelElement } from "../../types";
 import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
 import { getPanelMessages } from "../../constants/messages";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
 export function PanelConfigVideoSection({
@@ -70,7 +71,12 @@ export function PanelConfigVideoSection({
                   t("panel.config.groupVideoSource"),
                   <>
                     <label className="block space-y-1" data-config-field="videoRemoteUrl">
-                      <div>{t("panel.config.videoUrl")}</div>
+                      <div className="flex items-center gap-1">
+                        {t("panel.config.videoUrl")}
+                        <ConfigHintIcon label={t("panel.config.videoUrl")}>
+                          {t("panel.config.urlScopeHint")}
+                        </ConfigHintIcon>
+                      </div>
                       <Input
                         value={selectedElement.videoRemoteUrl ?? ""}
                         onChange={(e) =>
@@ -82,9 +88,6 @@ export function PanelConfigVideoSection({
                         placeholder={t("panel.config.urlScopePlaceholder")}
                         className="h-7 font-mono text-[11px]"
                       />
-                      <p className="text-[10px] text-muted-foreground">
-                        {t("panel.config.urlScopeHint")}
-                      </p>
                     </label>
                     <div className="flex items-center gap-2">
                       <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

package/src/panel/components/table/ConditionEditor.tsx

@@ -20,6 +20,7 @@ import {
   SelectValue,
 } from "@arronqzy/ui";
 import React from "react";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 
 const CONDITION_OPS: ConditionOp[] = [
   "eq",
@@ -90,7 +91,12 @@ export function ConditionEditor({
     <div className="space-y-2">
       <div className="flex items-center justify-between gap-2">
         <label className={`${fieldClass} min-w-0 flex-1`}>
-          <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionLogic")}</div>
+          <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+            {t("panel.config.tableConditionLogic")}
+            <ConfigHintIcon label={t("panel.config.tableConditionLogic")}>
+              {t("panel.config.tableConditionLogicHint")}
+            </ConfigHintIcon>
+          </div>
           <Select
             value={logic}
             onValueChange={(next) => onChange(setConditionLogic(value, next as ConditionLogic))}
@@ -115,7 +121,6 @@ export function ConditionEditor({
           {t("panel.config.tableConditionAddItem")}
         </Button>
       </div>
-      <div className="text-[10px] text-muted-foreground">{t("panel.config.tableConditionLogicHint")}</div>
       {items.map((item, index) => {
         const leaf: ConditionLeaf = isConditionLeaf(item)
           ? item

package/src/panel/components/table/PanelConfigTableSection.tsx

@@ -427,10 +427,16 @@ export function PanelConfigTableSection({
         </div>
         <details className="rounded-md border border-border/50 bg-muted/10 px-2 py-1.5">
           <summary className="cursor-pointer text-[11px] font-medium text-muted-foreground">
-            {t("panel.config.tableAdvancedData")}
+            <span className="inline-flex items-center gap-1 align-middle">
+              {t("panel.config.tableAdvancedData")}
+              <span className="inline-flex" onClick={(e) => e.preventDefault()}>
+                <ConfigHintIcon label={t("panel.config.tableAdvancedData")}>
+                  {t("panel.config.tableAdvancedDataHint")}
+                </ConfigHintIcon>
+              </span>
+            </span>
           </summary>
           <div className="mt-2 space-y-2 border-t border-border/40 pt-2">
-            <p className="text-[10px] text-muted-foreground">{t("panel.config.tableAdvancedDataHint")}</p>
             <div className="grid grid-cols-2 gap-2">
               <label className={fieldClass}>
                 {fieldLabel("panel.config.tableTransformMode", "panel.config.tableTransformModeHint")}
@@ -1000,7 +1006,7 @@ export function PanelConfigTableSection({
                               imageUrlPrefix: e.target.value || undefined,
                             })
                           }
-                          placeholder="https://cdn.example.com/ 或 {scope?.cdn}/"
+                          placeholder={t("panel.config.tableImageUrlPrefixPlaceholder")}
                           className={inputClass}
                         />
                       </label>
@@ -1292,7 +1298,7 @@ export function PanelConfigTableSection({
                             progressStatic: e.target.value || undefined,
                           })
                         }
-                        placeholder="80 或 {scope?.pct}"
+                        placeholder={t("panel.config.tableProgressStaticPlaceholder")}
                         className={inputClass}
                       />
                     </label>
@@ -1724,7 +1730,7 @@ export function PanelConfigTableSection({
                     displayTemplate: e.target.value.trim() ? e.target.value : undefined,
                   })
                 }
-                placeholder="{current}分"
+                placeholder={t("panel.config.tableDisplayTemplatePlaceholder")}
                 className={inputClass}
               />
             </label>

package/src/panel/hooks/usePanelElements.ts

@@ -22,6 +22,8 @@ import {
   getDefaultScene3dConfigForMaterial,
   getDefaultSizeByMaterial,
   getDefaultTextContent,
+  localizeLayers,
+  localizePanelElement,
   normalizePrimaryLayer,
   randomId,
 } from "../utils/panelElementDefaults";
@@ -67,7 +69,7 @@ export function usePanelElements() {
     () => store.getState()
   ) as State;
   const rawLayers = (state.variables?.layers as PanelLayer[] | undefined) ?? [defaultLayer];
-  const layers = useMemo(() => normalizePrimaryLayer(rawLayers), [rawLayers]);
+  const layers = useMemo(() => localizeLayers(normalizePrimaryLayer(rawLayers), t), [rawLayers, t]);
   const activeLayerId =
     (state.variables?.activeLayerId as string | undefined) ?? DEFAULT_LAYER_ID;
   const canUndo = store.getHistoryCursorIndex() > 0;
@@ -137,14 +139,29 @@ export function usePanelElements() {
     });
   }, []);
 
+  const localizedCacheRef = useRef<{ t: typeof t; map: WeakMap<PanelElement, PanelElement> }>({
+    t,
+    map: new WeakMap(),
+  });
   const allElements = useMemo(() => {
     const next = materializePanelElements(
       state.root.children,
       allElementsCacheRef.current
     );
     allElementsCacheRef.current = next;
-    return next;
-  }, [state.root.children]);
+    if (localizedCacheRef.current.t !== t) {
+      localizedCacheRef.current = { t, map: new WeakMap() };
+    }
+    const { map } = localizedCacheRef.current;
+    return next.map((el) => {
+      let localized = map.get(el);
+      if (!localized) {
+        localized = localizePanelElement(el, t);
+        map.set(el, localized);
+      }
+      return localized;
+    });
+  }, [state.root.children, t]);
 
   const elements = useMemo(() => {
     const next = allElements.filter((el) => el.layerId === activeLayerId);

package/src/panel/utils/panelElementDefaults.ts

@@ -1,5 +1,5 @@
 import type { TranslateFn } from "@arronqzy/i18n";
-import { tForLocale } from "@arronqzy/i18n";
+import { relocalizeMessage, tForLocale } from "@arronqzy/i18n";
 import { createDefaultScene3dConfig } from "@arronqzy/view-scene3d";
 import type { PanelChartConfig, PanelLayer, PanelElement } from "../types";
 import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
@@ -34,6 +34,52 @@ export function getDefaultNodeName(materialType: string, t: TranslateFn = tFallb
   return key ? t(key) : materialType;
 }
 
+const DEFAULT_LAYER_NAME_KEYS = [
+  "panel.defaults.layer1",
+  "panel.defaults.layerN",
+  "panel.defaults.mappingLayerN",
+  "panel.defaults.layerRandom",
+];
+
+/** Persisted default layer names ("图层1" / "Layer 2") follow the current locale. */
+export function localizeLayerName(name: string, t: TranslateFn): string {
+  return relocalizeMessage(name, DEFAULT_LAYER_NAME_KEYS, t);
+}
+
+export function localizeLayers(layers: PanelLayer[], t: TranslateFn): PanelLayer[] {
+  return layers.map((layer) => {
+    const name = localizeLayerName(layer.name, t);
+    return name === layer.name ? layer : { ...layer, name };
+  });
+}
+
+const DEFAULT_TEXT_HTML_RE = /^<p>(.*)<\/p>$/s;
+
+/**
+ * Default node name, chart title and text content are stored in the creation locale;
+ * re-render them in the current one. Returns the same object when nothing changes.
+ */
+export function localizePanelElement(element: PanelElement, t: TranslateFn): PanelElement {
+  const key = DEFAULT_NODE_NAME_KEYS[element.materialType ?? ""];
+  if (!key) return element;
+  const name = element.name ? relocalizeMessage(element.name, key, t) : element.name;
+  const title = element.chart?.title ? relocalizeMessage(element.chart.title, key, t) : undefined;
+  let textHtml = element.textHtml;
+  const textInner = textHtml ? DEFAULT_TEXT_HTML_RE.exec(textHtml)?.[1] : undefined;
+  if (textInner) {
+    const localized = relocalizeMessage(textInner, "panel.defaults.doubleClickTextHtml", t);
+    if (localized !== textInner) textHtml = `<p>${localized}</p>`;
+  }
+  const titleChanged = title !== undefined && title !== element.chart?.title;
+  if (name === element.name && !titleChanged && textHtml === element.textHtml) return element;
+  return {
+    ...element,
+    name,
+    textHtml,
+    ...(titleChanged && element.chart ? { chart: { ...element.chart, title } } : null),
+  };
+}
+
 export function getDefaultLayer(t: TranslateFn = tFallback): PanelLayer {
   return {
     id: DEFAULT_LAYER_ID,