@arronqzy/vue-view 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,13 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.16",
-    "@arronqzy/view-scene3d": "0.1.5",
+    "@arronqzy/blueprint-dsl": "1.0.17",
+    "@arronqzy/i18n": "0.1.17",
     "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/i18n": "0.1.16",
+    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/vue-blueprint": "0.1.17",
     "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/vue-blueprint": "0.1.16",
-    "@arronqzy/rx-store": "1.0.8"
+    "@arronqzy/view-scene3d": "0.1.5"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -39,8 +39,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/panel/VueViewOnlinePreview.vue

@@ -2,6 +2,7 @@
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import {
+  useBlueprintDslLocaleSync,
   BlueprintGraph,
   documentToRunnableGraph,
   getBlueprintLibraryRecord,
@@ -22,6 +23,7 @@ import {
   useViewScopeStoreVersion,
 } from "./scope/view-scope-store";
 import { resolvePanelElementScope } from "./utils/scope-template";
+import { localizePanelElement } from "./utils/panelElementDefaults";
 import {
   getWorkspaceProject,
   type WorkspaceProjectRecord,
@@ -40,6 +42,7 @@ import {
 import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 
 const { t, locale } = useI18n();
+useBlueprintDslLocaleSync();
 
 const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
 
@@ -194,7 +197,9 @@ const scopedLayerElements = computed(() => {
 const sceneBounds = computed(() => computePanelSceneBounds(scopedLayerElements.value));
 
 const displayElements = computed(() =>
-  scopedLayerElements.value.map((el) => {
+  scopedLayerElements.value.map((source) => {
+    void locale.value;
+    const el = localizePanelElement(source, t);
     const x = el.x - sceneBounds.value.minX;
     const y = el.y - sceneBounds.value.minY;
     if (outputScale.value) return { ...el, x, y };

package/src/panel/VueViewPanel.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
 import type { State } from "@arronqzy/rx-store";
 import {
+  useBlueprintDslLocaleSync,
   ApiCollectionManagerDialog,
   BlueprintGraph,
   abortClockNode,
@@ -72,12 +73,14 @@ import {
 import { resolvePanelElementScope } from "./utils/scope-template";
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import { useI18n } from "@arronqzy/i18n/vue";
+import { relocalizeMessage } from "@arronqzy/i18n";
 import { getPanelMessages } from "./constants/messages";
 import BusyOverlay from "./components/BusyOverlay.vue";
 import { assertFileSize, parseJsonText, runBusyTask } from "./utils/async-work";
 import "../tailwind.css";
 
 const { t, locale, setLocale } = useI18n();
+useBlueprintDslLocaleSync();
 const panelMessages = () => getPanelMessages(t);
 
 const props = withDefaults(
@@ -152,6 +155,18 @@ const workspaceBlueprintRef = shallowRef<{
 } | null>(null);
 const configFocus = ref<WorkspaceConfigFocus>("view");
 const productName = ref(t("panel.defaults.unnamedProduct"));
+const displayProductName = computed(() => {
+  void locale.value;
+  return relocalizeMessage(productName.value, "panel.defaults.unnamedProduct", t);
+});
+const displayBlueprintName = computed(() => {
+  void locale.value;
+  return relocalizeMessage(
+    blueprintMeta.value.name,
+    ["panel.defaults.unnamedBlueprint", "blueprint.dialog.unnamedBlueprint"],
+    t
+  );
+});
 const titleIconDataUrl = ref("");
 const editingLayerId = ref<string | null>(null);
 const editingLayerName = ref("");
@@ -346,7 +361,7 @@ function handleViewScopeUpdate(viewElementIds: string[], scope: unknown) {
 const blueprintDebugSession = useBlueprintDebugSession({
   graph: blueprintGraph,
   blueprintId: activeBlueprintLibraryId,
-  blueprintName: computed(() => { void locale.value; return blueprintMeta.value.name || t("panel.defaults.unnamedBlueprint"); }),
+  blueprintName: computed(() => displayBlueprintName.value || t("panel.defaults.unnamedBlueprint")),
   resolveLibraryBlueprint,
   libraryNameById: blueprintLibraryNameById,
   onExecutionBlocked: handleBlueprintExecutionBlocked,
@@ -892,8 +907,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         <div class="flex h-full min-h-0 flex-col">
           <div class="flex flex-wrap items-center gap-2 border-b bg-white px-3 py-2">
             <Input
-              v-model:value="productName"
+              :value="displayProductName"
               size="small"
+              @update:value="(value: string) => (productName = value)"
               class="w-[200px]"
               :placeholder="t('panel.menubar.productName')"
             />
@@ -919,7 +935,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
             :blueprint-props="blueprintCanvasProps"
             :blueprint-library-items="blueprintLibraryItems"
             :active-blueprint-library-id="activeBlueprintLibraryId"
-            :current-blueprint-label="blueprintMeta.name"
+            :current-blueprint-label="displayBlueprintName"
             :can-sync-blueprint="blueprintLibraryDirty"
             :blueprint-debug="blueprintDebugToolbar"
             :on-select-blueprint-library-item="(id) => void handleSelectBlueprintLibraryItem(id)"

package/src/panel/components/ConfigHintIcon.vue

@@ -26,11 +26,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/panel/components/config/PanelConfigAudioSection.vue

@@ -141,7 +141,12 @@ function onPosterFileChange(e: Event) {
   >
     <ConfigFieldGroup :title="t('panel.config.groupAudioSource')">
       <label class="block space-y-1" data-config-field="audioRemoteUrl">
-        <div>{{ t("panel.config.audioUrl") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.audioUrl") }}
+          <ConfigHintIcon :label="t('panel.config.audioUrl')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           class="font-mono text-[11px]"
@@ -152,9 +157,7 @@ function onPosterFileChange(e: Event) {
             audioRemoteUrl: v || undefined,
             audioSrc: v || element.audioSrc,
           })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
-      </label>
+        />      </label>
       <div class="flex items-center gap-2">
         <label
           class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"

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

@@ -146,27 +146,33 @@ function onOptionJsonChange(v: string) {
     </ConfigFieldGroup>
     <ConfigFieldGroup :title="t('panel.config.groupData')">
       <label class="block space-y-1" data-config-field="chart.labelsText">
-        <div>{{ t("panel.config.labelsCsv") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.labelsCsv") }}
+          <ConfigHintIcon :label="t('panel.config.labelsCsv')">
+            {{ t("panel.config.scopeTemplateHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           :value="getChartLabelsDisplayText(element.chart)"
           :disabled="!isEditable"
           :placeholder="t('panel.config.labelsCsvPlaceholder')"
           @update:value="(v: string) => updateChart({ labelsText: v })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
-      </label>
+        />      </label>
       <label class="block space-y-1" data-config-field="chart.valuesText">
-        <div>{{ t("panel.config.valuesCsv") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.valuesCsv") }}
+          <ConfigHintIcon :label="t('panel.config.valuesCsv')">
+            {{ t("panel.config.scopeTemplateHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           :value="getChartValuesDisplayText(element.chart)"
           :disabled="!isEditable"
           :placeholder="t('panel.config.valuesCsvPlaceholder')"
           @update:value="(v: string) => updateChart({ valuesText: v })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
-      </label>
+        />      </label>
     </ConfigFieldGroup>
 
     <ConfigFieldGroup

package/src/panel/components/config/PanelConfigImageSection.vue

@@ -74,7 +74,8 @@ function onFileChange(e: Event) {
         <div class="flex items-center gap-1">
           <span>{{ t("panel.config.imageUrlCss") }}</span>
           <ConfigHintIcon :label="t('panel.config.imageUrlHintLabel')">
-            {{ t("panel.config.imageUrlHint") }}
+            <p>{{ t("panel.config.imageUrlHint") }}</p>
+            <p class="mt-1">{{ t("panel.config.urlScopeHint") }}</p>
           </ConfigHintIcon>
         </div>
         <Input
@@ -85,7 +86,6 @@ function onFileChange(e: Event) {
           :placeholder="t('panel.config.urlScopePlaceholder')"
           @update:value="(v: string) => patchStyle(patchBackgroundImageFromInput(String(v ?? '')))"
         />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div class="flex items-center gap-2">
         <label

package/src/panel/components/config/PanelConfigMultiSelect.vue

@@ -10,6 +10,7 @@ import {
   type ViewportOverflowMode,
 } from "../../utils/viewportPlacement";
 import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const props = defineProps<{
@@ -434,7 +435,12 @@ function setNodeCardExpanded(id: string, open: boolean) {
 
             <template v-if="el.materialType === 'image'">
               <label class="block space-y-1" data-config-field="style.backgroundImageRemoteUrl">
-                <div>{{ t("panel.config.backgroundImageUrl") }}</div>
+                <div class="flex items-center gap-1">
+                  {{ t("panel.config.backgroundImageUrl") }}
+                  <ConfigHintIcon :label="t('panel.config.backgroundImageUrl')">
+                    {{ t("panel.config.urlScopeHint") }}
+                  </ConfigHintIcon>
+                </div>
                 <Input
                   size="small"
                   class="font-mono text-[11px]"
@@ -447,7 +453,6 @@ function setNodeCardExpanded(id: string, open: boolean) {
                     },
                   })"
                 />
-                <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
               </label>
               <label class="block space-y-1">
                 <div>{{ t("panel.config.objectFit") }}</div>

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

@@ -344,6 +344,7 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
     @update:open="emit('update:open', $event)"
   >
     <ConfigFieldGroup :title="t('panel.config.groupScene3dPurpose')">
+      <template #hint>{{ t("panel.config.scene3dPurposeHint") }}</template>
       <Select
         size="small"
         class="w-full"
@@ -356,7 +357,6 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
         ]"
         @update:value="(v) => patch(purposePresetPatch(String(v) as Scene3dPurpose))"
       />
-      <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dPurposeHint") }}</div>
     </ConfigFieldGroup>
 
     <ConfigFieldGroup :title="t('panel.config.groupScene3dModels')">
@@ -374,7 +374,12 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
         />
       </div>
       <label class="block space-y-1" data-config-field="scene3d.modelUrl">
-        <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dModelUrl") }}</div>
+        <div class="flex items-center gap-1 text-[10px] text-gray-500">
+          {{ t("panel.config.scene3dModelUrl") }}
+          <ConfigHintIcon :label="t('panel.config.scene3dModelUrl')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <div class="flex gap-1.5">
           <Input
             size="small"
@@ -392,7 +397,6 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
             {{ t("common.add") }}
           </Button>
         </div>
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div v-if="config.models.length === 0" class="text-[11px] text-gray-500">
         {{ t("panel.config.scene3dNoModels") }}
@@ -477,7 +481,7 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
     </ConfigFieldGroup>
 
     <ConfigFieldGroup :title="t('panel.config.groupScene3dCamera')">
-      <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dCameraEditDesc") }}</div>
+      <template #hint>{{ t("panel.config.scene3dCameraEditDesc") }}</template>
       <div class="grid grid-cols-3 gap-1">
         <Input
           v-for="(axis, index) in ['x', 'y', 'z']"

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

@@ -9,6 +9,7 @@ import { getPanelMessages } from "../../constants/messages";
 import ConfigColorField from "./ConfigColorField.vue";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const msgs = () => getPanelMessages(t);
@@ -89,7 +90,12 @@ function onFileChange(e: Event) {
       :default-open="false"
     >
       <label class="block space-y-1" data-config-field="style.backgroundImage">
-        <div>{{ t("panel.config.backgroundImage") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.backgroundImage") }}
+          <ConfigHintIcon :label="t('panel.config.backgroundImage')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           class="font-mono text-[11px]"
@@ -97,9 +103,7 @@ function onFileChange(e: Event) {
           :disabled="!isEditable"
           :placeholder="t('panel.config.urlScopePlaceholder')"
           @update:value="(v: string) => patchStyle(patchBackgroundImageFromInput(String(v ?? '')))"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
-      </label>
+        />      </label>
       <div class="flex items-center gap-2">
         <label
           class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"

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

@@ -7,6 +7,7 @@ import { cssTextLineHeight, cssTextAlignStyle } from "../../utils/panelElementDe
 import ConfigColorField from "./ConfigColorField.vue";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const props = defineProps<{
@@ -106,7 +107,12 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
         }"
       />
       <label class="block space-y-1">
-        <div>{{ t("panel.config.textHtmlSource") }}</div>
+        <div class="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"
           class="w-full rounded border border-gray-200 bg-white px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none"
@@ -116,9 +122,7 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
           :disabled="!isEditable"
           :placeholder="t('panel.config.textHtmlSourcePlaceholder')"
           @input="(e) => patch({ textHtml: (e.target as HTMLTextAreaElement).value || '<p><br/></p>' })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
-      </label>
+        />      </label>
     </ConfigFieldGroup>
     <ConfigFieldGroup :title="t('panel.config.groupTextStyle')">
       <label class="block space-y-1">

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

@@ -7,6 +7,7 @@ import { readFileAsDataUrl, uploadFileToRemote } from "./shared";
 import { getPanelMessages } from "../../constants/messages";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const msgs = () => getPanelMessages(t);
@@ -67,7 +68,12 @@ function onVideoFileChange(e: Event) {
   >
     <ConfigFieldGroup :title="t('panel.config.groupVideoSource')">
       <label class="block space-y-1" data-config-field="videoRemoteUrl">
-        <div>{{ t("panel.config.videoUrl") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.videoUrl") }}
+          <ConfigHintIcon :label="t('panel.config.videoUrl')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           class="font-mono text-[11px]"
@@ -78,9 +84,7 @@ function onVideoFileChange(e: Event) {
             videoRemoteUrl: v || undefined,
             videoSrc: v || element.videoSrc,
           })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
-      </label>
+        />      </label>
       <div class="flex items-center gap-2">
         <label
           class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"

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

@@ -13,6 +13,7 @@ import {
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Button, Input, Select } from "ant-design-vue";
 import { computed } from "vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -92,7 +93,12 @@ function patchLeaf(index: number, patch: Partial<ConditionLeaf>) {
   <div class="space-y-2">
     <div class="flex items-center justify-between gap-2">
       <label class="min-w-0 flex-1 space-y-1">
-        <div class="text-[11px] text-gray-500">{{ t("panel.config.tableConditionLogic") }}</div>
+        <div class="flex items-center gap-1 text-[11px] text-gray-500">
+          {{ t("panel.config.tableConditionLogic") }}
+          <ConfigHintIcon :label="t('panel.config.tableConditionLogic')">
+            {{ t("panel.config.tableConditionLogicHint") }}
+          </ConfigHintIcon>
+        </div>
         <Select
           size="small"
           class="w-full"
@@ -114,7 +120,6 @@ function patchLeaf(index: number, patch: Partial<ConditionLeaf>) {
         {{ t("panel.config.tableConditionAddItem") }}
       </Button>
     </div>
-    <div class="text-[10px] text-gray-500">{{ t("panel.config.tableConditionLogicHint") }}</div>
     <div
       v-for="(item, index) in items"
       :key="index"

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

@@ -504,10 +504,16 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
       </label>
       <details class="rounded-md border border-gray-200 bg-gray-50/60 px-2 py-1.5">
         <summary class="cursor-pointer text-[11px] font-medium text-gray-600">
-          {{ t("panel.config.tableAdvancedData") }}
+          <span class="inline-flex items-center gap-1 align-middle">
+            {{ t("panel.config.tableAdvancedData") }}
+            <span class="inline-flex" @click.prevent>
+              <ConfigHintIcon :label="t('panel.config.tableAdvancedData')">
+                {{ t("panel.config.tableAdvancedDataHint") }}
+              </ConfigHintIcon>
+            </span>
+          </span>
         </summary>
         <div class="mt-2 space-y-2 border-t border-gray-100 pt-2">
-          <p class="text-[10px] text-gray-500">{{ t("panel.config.tableAdvancedDataHint") }}</p>
           <div class="grid grid-cols-2 gap-2">
             <label class="block space-y-1.5">
               <div class="flex items-center gap-1">
@@ -1338,7 +1344,7 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
               <Input
                 size="small"
                 :value="String(selectedColumn.column.widgetProps?.progressStatic ?? '')"
-                placeholder="80 或 {scope?.pct}"
+                :placeholder="t('panel.config.tableProgressStaticPlaceholder')"
                 :disabled="!isEditable"
                 @update:value="
                   (v: unknown) =>
@@ -1756,7 +1762,7 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
               size="small"
               :value="selectedColumn.column.displayTemplate ?? ''"
               :disabled="!isEditable"
-              placeholder="{current}分"
+              :placeholder="t('panel.config.tableDisplayTemplatePlaceholder')"
               @update:value="
                 (v: unknown) => {
                   const s = asSelectString(v).trim();

package/src/panel/hooks/usePanelElements.ts

@@ -22,6 +22,8 @@ import {
   getDefaultSizeByMaterial,
   getDefaultTableConfig,
   getDefaultTextContent,
+  localizeLayers,
+  localizePanelElement,
   normalizePrimaryLayer,
   randomId,
 } from "../utils/panelElementDefaults";
@@ -122,7 +124,8 @@ export function usePanelElements() {
   const layers = computed(() => {
     const rawLayers =
       (stateRef.value.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
-    return normalizePrimaryLayer(rawLayers);
+    void locale.value;
+    return localizeLayers(normalizePrimaryLayer(rawLayers), t);
   });
 
   const activeLayerId = computed(
@@ -133,13 +136,26 @@ export function usePanelElements() {
   const allElementsCache = shallowRef<PanelElement[]>([]);
   const elementsCache = shallowRef<PanelElement[]>([]);
 
+  let localizedCache = { locale: locale.value, map: new WeakMap<PanelElement, PanelElement>() };
+
   const allElements = computed(() => {
     const next = materializePanelElements(
       stateRef.value.root.children,
       allElementsCache.value
     );
     allElementsCache.value = next;
-    return next;
+    if (localizedCache.locale !== locale.value) {
+      localizedCache = { locale: locale.value, map: new WeakMap() };
+    }
+    const { map } = localizedCache;
+    return next.map((el) => {
+      let localized = map.get(el);
+      if (!localized) {
+        localized = localizePanelElement(el, t);
+        map.set(el, localized);
+      }
+      return localized;
+    });
   });
 
   const elements = computed(() => {

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 { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
 import { createDefaultScene3dConfig } from "@arronqzy/view-scene3d";
 import type { PanelChartConfig, PanelLayer, PanelElement } from "../types";
@@ -35,6 +35,52 @@ export function getDefaultNodeName(
   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 = tForLocale("zh-CN")): PanelLayer {
   return {
     id: DEFAULT_LAYER_ID,