@arronqzy/vue-view 0.1.0 → 0.1.3

package/src/panel/hooks/usePanelElements.ts

@@ -1,6 +1,7 @@
 import { computed, onMounted } from "vue";
 import { store, type Node, type State } from "@arronqzy/rx-store";
 import { useStoreRef } from "@arronqzy/vue-rx-store";
+import { useI18nOptional } from "@arronqzy/i18n/vue";
 import type {
   PanelActionResult,
   PanelElement,
@@ -8,6 +9,7 @@ import type {
   PanelLayer,
   ReferenceCopyMode,
 } from "../types";
+import { getPanelMessages } from "../constants/messages";
 import {
   DEFAULT_LAYER,
   DEFAULT_LAYER_ID,
@@ -15,6 +17,7 @@ import {
   getDefaultGridConfig,
   getDefaultNodeName,
   getDefaultSizeByMaterial,
+  getDefaultTableConfig,
   getDefaultTextContent,
   normalizePrimaryLayer,
   randomId,
@@ -44,34 +47,39 @@ import {
 
 export type { PanelActionResult, PanelHistoryItem, PanelLayer } from "../types";
 
-const HISTORY_LABEL_BY_TYPE: Record<string, string> = {
-  initial: "初始化",
-  "node.update": "更新节点",
-  "node.group-drag": "批量移动节点",
-  "node.group-resize": "批量缩放节点",
-  "node.group-rotate": "批量旋转节点",
-  "node.delete": "删除节点",
-  "node.batch-delete": "批量删除节点",
-  "node.z.front": "节点置顶",
-  "node.z.back": "节点置底",
-  "node.z.up": "节点上移一层",
-  "node.z.down": "节点下移一层",
-  "node.duplicate": "复制节点",
-  "node.ref-copy-mode": "设置引用拷贝模式",
-  "node.add": "添加节点",
-  "layer.activate": "切换图层",
-  "layer.add": "新增图层",
-  "layer.rename": "重命名图层",
-  "layer.toggle-lock": "切换图层锁定",
-  "layer.open-selected-mapping": "映射图层打开选中节点",
-  "layer.delete": "删除图层",
-  "layer.toggle-merge": "勾选合并图层",
-  "layer.merge": "合并图层",
-  "layer.set-primary": "设置主图层",
-  "panel.import": "导入面板",
+const HISTORY_LABEL_KEYS: Record<string, string> = {
+  initial: "panel.history.initial",
+  "node.update": "panel.history.nodeUpdate",
+  "node.group-drag": "panel.history.nodeGroupDrag",
+  "node.group-resize": "panel.history.nodeGroupResize",
+  "node.group-rotate": "panel.history.nodeGroupRotate",
+  "node.delete": "panel.history.nodeDelete",
+  "node.batch-delete": "panel.history.nodeBatchDelete",
+  "node.z.front": "panel.history.nodeZFront",
+  "node.z.back": "panel.history.nodeZBack",
+  "node.z.up": "panel.history.nodeZUp",
+  "node.z.down": "panel.history.nodeZDown",
+  "node.duplicate": "panel.history.nodeDuplicate",
+  "node.ref-copy-mode": "panel.history.nodeRefCopyMode",
+  "node.add": "panel.history.nodeAdd",
+  "layer.activate": "panel.history.layerActivate",
+  "layer.add": "panel.history.layerAdd",
+  "layer.rename": "panel.history.layerRename",
+  "layer.toggle-lock": "panel.history.layerToggleLock",
+  "layer.open-selected-mapping": "panel.history.layerOpenSelectedMapping",
+  "layer.delete": "panel.history.layerDelete",
+  "layer.toggle-merge": "panel.history.layerToggleMerge",
+  "layer.merge": "panel.history.layerMerge",
+  "layer.set-primary": "panel.history.layerSetPrimary",
+  "panel.import": "panel.history.panelImport",
 };
 
 export function usePanelElements() {
+  const { t, locale } = useI18nOptional();
+  const messages = computed(() => {
+    void locale.value;
+    return getPanelMessages(t);
+  });
   const stateRef = useStoreRef();
 
   onMounted(() => {
@@ -165,7 +173,7 @@ export function usePanelElements() {
       return {
         index,
         timestamp: entry.timestamp,
-        label: (type && HISTORY_LABEL_BY_TYPE[type]) || "编辑",
+        label: (type && HISTORY_LABEL_KEYS[type] ? t(HISTORY_LABEL_KEYS[type]) : t("panel.history.fallback")),
         active: index === cursor,
       };
     });
@@ -596,11 +604,12 @@ export function usePanelElements() {
       layerId: currentLayerId,
       zIndex: 1,
       materialType,
-      name: getDefaultNodeName(materialType),
-      ...getDefaultTextContent(materialType),
+      name: getDefaultNodeName(materialType, t),
+      ...getDefaultTextContent(materialType, t),
       ...getDefaultGridConfig(materialType),
       refCopyMode: materialType === "reference" ? "shallow" : undefined,
-      chart: getDefaultChartConfig(materialType),
+      chart: getDefaultChartConfig(materialType, t),
+      table: getDefaultTableConfig(materialType, t),
       geometryShape: materialType === "geometry" ? "rect" : undefined,
       geometryColor: materialType === "geometry" ? "#3b82f6" : undefined,
       geometryScript: undefined,
@@ -738,7 +747,7 @@ export function usePanelElements() {
         const nextId = randomId("layer");
         const next: PanelLayer = {
           id: nextId,
-          name: `图层${list.length + 1}`,
+          name: t("panel.defaults.layerN", { n: list.length + 1 }),
           locked: false,
           editable: true,
           isPrimary: false,
@@ -755,7 +764,7 @@ export function usePanelElements() {
 
   function openElementsInNewLayer(ids: string[]): PanelActionResult {
     const filtered = ids.filter(Boolean);
-    if (filtered.length === 0) return { ok: false, reason: "未选择节点" };
+    if (filtered.length === 0) return { ok: false, reason: messages.value.noNodesSelected };
     const current = store.getState();
     const currentLayers =
       (current.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
@@ -768,14 +777,14 @@ export function usePanelElements() {
     const selected = expandedIds
       .map((id) => nodeById.get(id))
       .filter((el): el is PanelElement => !!el);
-    if (selected.length === 0) return { ok: false, reason: "未找到可迁移节点" };
+    if (selected.length === 0) return { ok: false, reason: messages.value.noMigratableNodes };
     const anchorEl = nodeById.get(filtered[0]!) ?? selected[0];
     const hasLocked = selected.some((el) => {
       if (el.locked) return true;
       const layer = currentLayers.find((l) => l.id === el.layerId);
       return !!layer?.locked;
     });
-    if (hasLocked) return { ok: false, reason: "选中节点包含锁定内容，无法在新图层打开" };
+    if (hasLocked) return { ok: false, reason: messages.value.lockedCannotOpenMapping };
 
     const selectedSet = new Set(selected.map((el) => el.id));
     const idMap = new Map<string, string>();
@@ -783,7 +792,7 @@ export function usePanelElements() {
     const nextLayerId = randomId("layer");
     const nextLayer: PanelLayer = {
       id: nextLayerId,
-      name: `映射图层${currentLayers.length + 1}`,
+      name: t("panel.defaults.mappingLayerN", { n: currentLayers.length + 1 }),
       locked: false,
       editable: true,
       isPrimary: false,
@@ -872,16 +881,16 @@ export function usePanelElements() {
     const current = store.getState();
     const list = (current.variables?.layers as PanelLayer[] | undefined) ?? [];
     const target = list.find((l) => l.id === layerId);
-    if (!target) return { ok: false, reason: "图层不存在" };
-    if (!target.editable) return { ok: false, reason: "默认图层不可删除" };
-    if (target.locked) return { ok: false, reason: "锁定图层不可删除" };
+    if (!target) return { ok: false, reason: messages.value.layerNotFound };
+    if (!target.editable) return { ok: false, reason: messages.value.defaultLayerCannotDelete };
+    if (target.locked) return { ok: false, reason: messages.value.lockedLayerCannotDelete };
     if (mode === "move" && !targetLayerId) {
-      return { ok: false, reason: "请选择目标图层" };
+      return { ok: false, reason: messages.value.selectTargetLayer };
     }
     const remainingLayers = list.filter((l) => l.id !== layerId);
     const moveTarget = remainingLayers.find((l) => l.id === targetLayerId);
     if (mode === "move" && !moveTarget) {
-      return { ok: false, reason: "目标图层不存在" };
+      return { ok: false, reason: messages.value.targetLayerNotFound };
     }
     const allPanelElements = (current.root.children ?? [])
       .filter((n) => isPanelElementNode(n) && n.props)
@@ -895,7 +904,7 @@ export function usePanelElements() {
       return (el.refCopyMode ?? "shallow") !== "deep";
     });
     if (hasBlockingRef) {
-      return { ok: false, reason: "该图层仍被浅拷贝引用，请先删除引用节点或改为深拷贝" };
+      return { ok: false, reason: messages.value.shallowRefBlockingDelete };
     }
 
     store.update(
@@ -959,7 +968,11 @@ export function usePanelElements() {
         const nextId = randomId("layer");
         const nextLayer: PanelLayer = {
           id: nextId,
-          name: name?.trim() || `图层-${Math.random().toString(36).slice(2, 6)}`,
+          name:
+            name?.trim() ||
+            t("panel.defaults.layerRandom", {
+              id: Math.random().toString(36).slice(2, 6),
+            }),
           locked: false,
           editable: true,
           isPrimary: false,

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -5,6 +5,7 @@ import {
   type BlueprintMetaDraft,
 } from "@arronqzy/vue-blueprint";
 import type { State } from "@arronqzy/rx-store";
+import { useI18nOptional } from "@arronqzy/i18n/vue";
 import {
   createWorkspaceProjectId,
   deleteWorkspaceProject,
@@ -53,13 +54,15 @@ export function buildOnlinePreviewUrl(projectId: string): string {
 }
 
 export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
+  const { t, locale } = useI18nOptional();
   const projects = ref<WorkspaceProjectListItem[]>([]);
   const activeProjectId = ref<string | null>(null);
   const activeProjectName = ref<string | null>(null);
   const syncedSnapshotRef = shallowRef<WorkspaceSnapshot | null>(null);
 
   function resolveProjectName() {
-    return toValue(options.productName).trim() || "未命名产物";
+    void locale.value;
+    return toValue(options.productName).trim() || t("panel.defaults.unnamedProduct");
   }
 
   function buildCurrentSnapshot(): WorkspaceSnapshot {
@@ -94,7 +97,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     const blueprintDocument =
       record.blueprintDocument ?? BlueprintGraph.empty().document;
     const blueprintMeta: BlueprintMetaDraft = {
-      name: record.blueprintMeta?.name ?? "未命名蓝图",
+      name: record.blueprintMeta?.name ?? t("panel.defaults.unnamedBlueprint"),
       remark: record.blueprintMeta?.remark ?? "",
     };
 
@@ -176,14 +179,14 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     const record = await getWorkspaceProject(id);
     if (!record) {
       await refreshProjects();
-      throw new Error("工作区不存在或已被删除");
+      throw new Error(t("panel.messages.workspaceNotFound"));
     }
     applyProjectRecord(record);
   }
 
   async function handleSyncProject() {
     if (!activeProjectId.value) {
-      throw new Error("请先保存工作区");
+      throw new Error(t("panel.messages.saveWorkspaceFirst"));
     }
     const existing = await getWorkspaceProject(activeProjectId.value);
     if (!existing) {
@@ -191,7 +194,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
       activeProjectName.value = null;
       syncedSnapshotRef.value = null;
       await refreshProjects();
-      throw new Error("工作区不存在或已被删除");
+      throw new Error(t("panel.messages.workspaceNotFound"));
     }
     const name = resolveProjectName() || existing.name;
     await persistProject({

package/src/panel/types.ts

@@ -54,6 +54,9 @@ export type PanelElementStyle = {
 
 export type ReferenceCopyMode = "shallow" | "deep";
 
+export type { PanelTableConfig } from "@arronqzy/view-table";
+import type { PanelTableConfig } from "@arronqzy/view-table";
+
 export type PanelElement = {
   id: string;
   layerId: string;
@@ -65,6 +68,7 @@ export type PanelElement = {
   refCopyMode?: ReferenceCopyMode;
   refSnapshot?: PanelElement[];
   chart?: PanelChartConfig;
+  table?: PanelTableConfig;
   textHtml?: string;
   textAllowInput?: boolean;
   textFontFamily?: string;

package/src/panel/utils/panelElementDefaults.ts

@@ -1,41 +1,54 @@
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
+import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
 import type { PanelChartConfig, PanelLayer } from "../types";
 
-const DEFAULT_NODE_NAME_MAP: Record<string, string> = {
-  bar: "柱状图",
-  line: "折线图",
-  pie: "饼图",
-  area: "面积图",
-  scatter: "散点图",
-  radar: "雷达图",
-  gauge: "仪表盘",
-  funnel: "漏斗图",
-  text: "文本",
-  grid: "网格布局",
-  image: "图片",
-  video: "视频",
-  audio: "音频",
-  reference: "引用组件",
-  geometry: "几何",
+const DEFAULT_NODE_NAME_KEYS: Record<string, string> = {
+  bar: "panel.defaults.bar",
+  line: "panel.defaults.line",
+  pie: "panel.defaults.pie",
+  area: "panel.defaults.area",
+  scatter: "panel.defaults.scatter",
+  radar: "panel.defaults.radar",
+  gauge: "panel.defaults.gauge",
+  funnel: "panel.defaults.funnel",
+  text: "panel.defaults.text",
+  grid: "panel.defaults.grid",
+  image: "panel.defaults.image",
+  video: "panel.defaults.video",
+  audio: "panel.defaults.audio",
+  reference: "panel.defaults.reference",
+  geometry: "panel.defaults.geometry",
+  table: "panel.defaults.table",
 };
 
 export const DEFAULT_LAYER_ID = "layer-1";
 
-export function getDefaultNodeName(materialType: string): string {
-  return DEFAULT_NODE_NAME_MAP[materialType] ?? materialType;
+export function getDefaultNodeName(
+  materialType: string,
+  t: TranslateFn = tForLocale("zh-CN")
+): string {
+  const key = DEFAULT_NODE_NAME_KEYS[materialType];
+  return key ? t(key) : materialType;
 }
 
-export const DEFAULT_LAYER: PanelLayer = {
-  id: DEFAULT_LAYER_ID,
-  name: "图层1",
-  locked: false,
-  editable: false,
-  isPrimary: true,
-  isMapping: false,
-  mappingBaseLayerId: undefined,
-};
+export function getDefaultLayer(t: TranslateFn = tForLocale("zh-CN")): PanelLayer {
+  return {
+    id: DEFAULT_LAYER_ID,
+    name: t("panel.defaults.layer1"),
+    locked: false,
+    editable: false,
+    isPrimary: true,
+    isMapping: false,
+    mappingBaseLayerId: undefined,
+  };
+}
+
+/** @deprecated Prefer getDefaultLayer(t) */
+export const DEFAULT_LAYER: PanelLayer = getDefaultLayer();
 
 export function normalizePrimaryLayer(layers: PanelLayer[]): PanelLayer[] {
-  if (layers.length === 0) return [DEFAULT_LAYER];
+  if (layers.length === 0) return [getDefaultLayer()];
   const explicitPrimary = layers.find((layer) => layer.isPrimary);
   const primaryId = explicitPrimary?.id ?? layers[0].id;
   return layers.map((layer) => {
@@ -68,15 +81,20 @@ export function getDefaultSizeByMaterial(materialType: string) {
       return { width: 280, height: 180 };
     case "geometry":
       return { width: 220, height: 220 };
+    case "table":
+      return { width: 480, height: 280 };
     default:
       return { width: 220, height: 130 };
   }
 }
 
-export function getDefaultTextContent(materialType: string) {
+export function getDefaultTextContent(
+  materialType: string,
+  t: TranslateFn = tForLocale("zh-CN")
+) {
   if (materialType !== "text") return {};
   return {
-    textHtml: "<p>双击输入文本</p>",
+    textHtml: `<p>${t("panel.defaults.doubleClickTextHtml")}</p>`,
     textAllowInput: true,
     textFontSize: 14,
     textFontWeight: "400",
@@ -96,7 +114,10 @@ export function getDefaultGridConfig(materialType: string) {
   } as const;
 }
 
-export function getDefaultChartConfig(materialType: string): PanelChartConfig | undefined {
+export function getDefaultChartConfig(
+  materialType: string,
+  t: TranslateFn = tForLocale("zh-CN")
+): PanelChartConfig | undefined {
   if (!["bar", "line", "pie", "area", "scatter", "radar", "gauge", "funnel"].includes(materialType))
     return undefined;
   const common = {
@@ -107,40 +128,40 @@ export function getDefaultChartConfig(materialType: string): PanelChartConfig |
   };
   if (materialType === "bar") {
     return {
-      title: "柱状图",
+      title: t("panel.defaults.bar"),
       ...common,
       barWidth: 24,
     };
   }
   if (materialType === "line") {
     return {
-      title: "折线图",
+      title: t("panel.defaults.line"),
       ...common,
       smooth: true,
     };
   }
   if (materialType === "area") {
     return {
-      title: "面积图",
+      title: t("panel.defaults.area"),
       ...common,
       smooth: true,
     };
   }
   if (materialType === "scatter") {
     return {
-      title: "散点图",
+      title: t("panel.defaults.scatter"),
       ...common,
     };
   }
   if (materialType === "radar") {
     return {
-      title: "雷达图",
+      title: t("panel.defaults.radar"),
       ...common,
     };
   }
   if (materialType === "gauge") {
     return {
-      title: "仪表盘",
+      title: t("panel.defaults.gauge"),
       color: "#3b82f6",
       renderMode: "canvas",
       values: [68],
@@ -148,14 +169,27 @@ export function getDefaultChartConfig(materialType: string): PanelChartConfig |
   }
   if (materialType === "funnel") {
     return {
-      title: "漏斗图",
+      title: t("panel.defaults.funnel"),
       ...common,
     };
   }
   return {
-    title: "饼图",
+    title: t("panel.defaults.pie"),
     ...common,
     pieInnerRadius: 30,
     pieOuterRadius: 65,
   };
 }
+
+export function getDefaultTableConfig(
+  materialType: string,
+  t: TranslateFn = tForLocale("zh-CN")
+): PanelTableConfig | undefined {
+  if (materialType !== "table") return undefined;
+  const cfg = createDefaultTableConfig();
+  cfg.emptyText = t("panel.config.tableEmpty");
+  if (cfg.columns?.[0]) cfg.columns[0].title = t("panel.config.tableColName");
+  if (cfg.columns?.[1]) cfg.columns[1].title = t("panel.config.tableColStatus");
+  if (cfg.columns?.[2]) cfg.columns[2].title = t("panel.config.tableColScore");
+  return cfg;
+}

package/src/panel/utils/scope-field-labels.ts

@@ -1,44 +1,58 @@
-const LABELS: Record<string, string> = {
-  name: "节点名称",
-  textHtml: "文本内容",
-  textFontFamily: "文本字体",
-  textFontWeight: "文本字重",
-  textColor: "文本颜色",
-  "chart.title": "图表标题",
-  "chart.color": "图表颜色",
-  "chart.gradientFrom": "渐变起始色",
-  "chart.gradientTo": "渐变结束色",
-  "chart.xAxisName": "X 轴名称",
-  "chart.yAxisName": "Y 轴名称",
-  "chart.xAxisTickColor": "X 轴刻度颜色",
-  "chart.yAxisTickColor": "Y 轴刻度颜色",
-  "chart.xAxisSplitLineColor": "X 轴分割线颜色",
-  "chart.yAxisSplitLineColor": "Y 轴分割线颜色",
-  "chart.xAxisLabelColor": "X 轴标签颜色",
-  "chart.yAxisLabelColor": "Y 轴标签颜色",
-  "chart.tooltipBackgroundColor": "Tooltip 背景色",
-  "chart.tooltipTextColor": "Tooltip 文字色",
-  "chart.tooltipFormatter": "Tooltip 格式化",
-  "chart.labelsText": "图表类目",
-  "chart.valuesText": "图表数值",
-  "style.backgroundColor": "背景色",
-  "style.backgroundImage": "背景图",
-  "style.backgroundImageRemoteUrl": "背景图远程地址",
-  "style.backgroundSize": "背景尺寸",
-  "style.backgroundPosition": "背景位置",
-  "style.borderColor": "边框颜色",
-  audioSrc: "音频地址",
-  audioRemoteUrl: "音频远程地址",
-  videoSrc: "视频地址",
-  videoRemoteUrl: "视频远程地址",
-  geometryColor: "几何颜色",
-  geometryScript: "几何脚本",
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
+
+const FIELD_KEY_MAP: Record<string, string> = {
+  name: "panel.scope.fieldName",
+  textHtml: "panel.scope.fieldTextHtml",
+  textFontFamily: "panel.scope.fieldTextFontFamily",
+  textFontWeight: "panel.scope.fieldTextFontWeight",
+  textColor: "panel.scope.fieldTextColor",
+  "chart.title": "panel.scope.fieldChartTitle",
+  "chart.color": "panel.scope.fieldChartColor",
+  "chart.gradientFrom": "panel.scope.fieldChartGradientFrom",
+  "chart.gradientTo": "panel.scope.fieldChartGradientTo",
+  "chart.xAxisName": "panel.scope.fieldChartXAxisName",
+  "chart.yAxisName": "panel.scope.fieldChartYAxisName",
+  "chart.xAxisTickColor": "panel.scope.fieldChartXAxisTickColor",
+  "chart.yAxisTickColor": "panel.scope.fieldChartYAxisTickColor",
+  "chart.xAxisSplitLineColor": "panel.scope.fieldChartXAxisSplitLineColor",
+  "chart.yAxisSplitLineColor": "panel.scope.fieldChartYAxisSplitLineColor",
+  "chart.xAxisLabelColor": "panel.scope.fieldChartXAxisLabelColor",
+  "chart.yAxisLabelColor": "panel.scope.fieldChartYAxisLabelColor",
+  "chart.tooltipBackgroundColor": "panel.scope.fieldChartTooltipBackgroundColor",
+  "chart.tooltipTextColor": "panel.scope.fieldChartTooltipTextColor",
+  "chart.tooltipFormatter": "panel.scope.fieldChartTooltipFormatter",
+  "chart.labelsText": "panel.scope.fieldChartLabelsText",
+  "chart.valuesText": "panel.scope.fieldChartValuesText",
+  "style.backgroundColor": "panel.scope.fieldStyleBackgroundColor",
+  "style.backgroundImage": "panel.scope.fieldStyleBackgroundImage",
+  "style.backgroundImageRemoteUrl": "panel.scope.fieldStyleBackgroundImageRemoteUrl",
+  "style.backgroundSize": "panel.scope.fieldStyleBackgroundSize",
+  "style.backgroundPosition": "panel.scope.fieldStyleBackgroundPosition",
+  "style.borderColor": "panel.scope.fieldStyleBorderColor",
+  audioSrc: "panel.scope.fieldAudioSrc",
+  audioRemoteUrl: "panel.scope.fieldAudioRemoteUrl",
+  videoSrc: "panel.scope.fieldVideoSrc",
+  videoRemoteUrl: "panel.scope.fieldVideoRemoteUrl",
+  geometryColor: "panel.scope.fieldGeometryColor",
+  geometryScript: "panel.scope.fieldGeometryScript",
 };
 
-export function resolveScopeFieldLabel(fieldId: string): string {
-  if (LABELS[fieldId]) return LABELS[fieldId];
-  const leaf = fieldId.split(".").pop() ?? fieldId;
-  return LABELS[fieldId] ?? leaf;
+export function getScopeFieldLabels(t: TranslateFn): Record<string, string> {
+  const labels: Record<string, string> = {};
+  for (const [fieldId, key] of Object.entries(FIELD_KEY_MAP)) {
+    labels[fieldId] = t(key);
+  }
+  return labels;
+}
+
+export function resolveScopeFieldLabel(
+  fieldId: string,
+  t: TranslateFn = tForLocale("zh-CN")
+): string {
+  const key = FIELD_KEY_MAP[fieldId];
+  if (key) return t(key);
+  return fieldId.split(".").pop() ?? fieldId;
 }
 
 export function scopeFieldDomId(fieldId: string): string {