@arronqzy/react-view 1.0.5 → 1.0.9

package/src/panel/hooks/usePanelElements.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
 import { store, type Node, type State } from "@arronqzy/rx-store";
+import { useI18nOptional } from "@arronqzy/i18n/react";
 import type {
   PanelActionResult,
   PanelElement,
@@ -7,11 +8,14 @@ import type {
   PanelLayer,
   ReferenceCopyMode,
 } from "../types";
+import { getPanelMessages } from "../constants/messages";
 import {
   DEFAULT_LAYER,
   DEFAULT_LAYER_ID,
   getDefaultChartConfig,
+  getDefaultTableConfig,
   getDefaultGridConfig,
+  getDefaultLayer,
   getDefaultNodeName,
   getDefaultSizeByMaterial,
   getDefaultTextContent,
@@ -44,6 +48,10 @@ import {
 export type { PanelActionResult, PanelHistoryItem, PanelLayer } from "../types";
 
 export function usePanelElements() {
+  const { t } = useI18nOptional();
+  const messages = useMemo(() => getPanelMessages(t), [t]);
+  const defaultLayer = useMemo(() => getDefaultLayer(t), [t]);
+
   const state = useSyncExternalStore(
     (cb) => {
       const sub = store.select().subscribe(cb);
@@ -52,7 +60,7 @@ export function usePanelElements() {
     () => store.getState(),
     () => store.getState()
   ) as State;
-  const rawLayers = (state.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
+  const rawLayers = (state.variables?.layers as PanelLayer[] | undefined) ?? [defaultLayer];
   const layers = useMemo(() => normalizePrimaryLayer(rawLayers), [rawLayers]);
   const activeLayerId =
     (state.variables?.activeLayerId as string | undefined) ?? DEFAULT_LAYER_ID;
@@ -70,8 +78,8 @@ export function usePanelElements() {
     store.update((draft) => {
       draft.variables = draft.variables ?? {};
       draft.variables.layers = hasLayers
-        ? normalizePrimaryLayer((draft.variables.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER])
-        : [DEFAULT_LAYER];
+        ? normalizePrimaryLayer((draft.variables.layers as PanelLayer[] | undefined) ?? [defaultLayer])
+        : [defaultLayer];
       draft.variables.activeLayerId = hasActive
         ? draft.variables.activeLayerId
         : DEFAULT_LAYER_ID;
@@ -565,14 +573,14 @@ export function usePanelElements() {
     []
   );
 
-  const addElementFromMaterial = useCallback((materialType: string, x: number, y: number) => {
+  const addElementFromMaterial = useCallback((materialType: string, x: number, y: number): string | null => {
     const current = store.getState();
     const currentLayers =
       (current.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
     const currentLayerId =
       (current.variables?.activeLayerId as string | undefined) ?? DEFAULT_LAYER_ID;
     const layer = currentLayers.find((l) => l.id === currentLayerId);
-    if (!layer || layer.locked) return;
+    if (!layer || layer.locked) return null;
 
     const size = getDefaultSizeByMaterial(materialType);
     const id = randomId("el");
@@ -581,11 +589,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,
@@ -662,7 +671,7 @@ export function usePanelElements() {
         },
         { meta: { type: "node.add", materialType, id: sourceId } }
       );
-      return;
+      return sourceId;
     }
     store.update(
       (draft) => {
@@ -676,7 +685,8 @@ export function usePanelElements() {
       },
       { meta: { type: "node.add", materialType, id } }
     );
-  }, []);
+    return id;
+  }, [t]);
 
   const setReferenceCopyMode = useCallback(
     (id: string, mode: ReferenceCopyMode) => {
@@ -727,7 +737,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,
@@ -740,11 +750,11 @@ export function usePanelElements() {
       },
       { meta: { type: "layer.add" } }
     );
-  }, []);
+  }, [t]);
 
   const openElementsInNewLayer = useCallback((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.noNodesSelected };
     const current = store.getState();
     const currentLayers =
       (current.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
@@ -757,14 +767,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.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.lockedCannotOpenMapping };
 
     const selectedSet = new Set(selected.map((el) => el.id));
     const idMap = new Map<string, string>();
@@ -772,7 +782,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,
@@ -826,7 +836,7 @@ export function usePanelElements() {
       }
     );
     return { ok: true };
-  }, []);
+  }, [messages, t]);
 
   const renameLayer = useCallback((layerId: string, name: string) => {
     store.update(
@@ -862,16 +872,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.layerNotFound };
+      if (!target.editable) return { ok: false, reason: messages.defaultLayerCannotDelete };
+      if (target.locked) return { ok: false, reason: messages.lockedLayerCannotDelete };
       if (mode === "move" && !targetLayerId) {
-        return { ok: false, reason: "请选择目标图层" };
+        return { ok: false, reason: messages.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.targetLayerNotFound };
       }
       const allElements = (current.root.children ?? [])
         .filter((n) => isPanelElementNode(n) && n.props)
@@ -885,7 +895,7 @@ export function usePanelElements() {
         return (el.refCopyMode ?? "shallow") !== "deep";
       });
       if (hasBlockingRef) {
-        return { ok: false, reason: "该图层仍被浅拷贝引用，请先删除引用节点或改为深拷贝" };
+        return { ok: false, reason: messages.shallowRefBlockingDelete };
       }
 
       store.update(
@@ -924,7 +934,7 @@ export function usePanelElements() {
       );
       return { ok: true };
     },
-    []
+    [messages, t]
   );
 
   const toggleLayerMergeSelected = useCallback((layerId: string) => {
@@ -951,7 +961,9 @@ 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,
@@ -978,7 +990,7 @@ export function usePanelElements() {
       },
       { meta: { type: "layer.merge", name } }
     );
-  }, []);
+  }, [t]);
 
   const setPrimaryLayer = useCallback((layerId: string) => {
     store.update(
@@ -1009,41 +1021,41 @@ export function usePanelElements() {
     const entries = store.getHistoryEntries();
     const cursor = store.getHistoryCursorIndex();
     const labelByType: 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": "导入面板",
+      initial: t("panel.history.initial"),
+      "node.update": t("panel.history.nodeUpdate"),
+      "node.group-drag": t("panel.history.nodeGroupDrag"),
+      "node.group-resize": t("panel.history.nodeGroupResize"),
+      "node.group-rotate": t("panel.history.nodeGroupRotate"),
+      "node.delete": t("panel.history.nodeDelete"),
+      "node.batch-delete": t("panel.history.nodeBatchDelete"),
+      "node.z.front": t("panel.history.nodeZFront"),
+      "node.z.back": t("panel.history.nodeZBack"),
+      "node.z.up": t("panel.history.nodeZUp"),
+      "node.z.down": t("panel.history.nodeZDown"),
+      "node.duplicate": t("panel.history.nodeDuplicate"),
+      "node.ref-copy-mode": t("panel.history.nodeRefCopyMode"),
+      "node.add": t("panel.history.nodeAdd"),
+      "layer.activate": t("panel.history.layerActivate"),
+      "layer.add": t("panel.history.layerAdd"),
+      "layer.rename": t("panel.history.layerRename"),
+      "layer.toggle-lock": t("panel.history.layerToggleLock"),
+      "layer.open-selected-mapping": t("panel.history.layerOpenSelectedMapping"),
+      "layer.delete": t("panel.history.layerDelete"),
+      "layer.toggle-merge": t("panel.history.layerToggleMerge"),
+      "layer.merge": t("panel.history.layerMerge"),
+      "layer.set-primary": t("panel.history.layerSetPrimary"),
+      "panel.import": t("panel.history.panelImport"),
     };
     return entries.map((entry, index) => {
       const type = entry.meta?.type as string | undefined;
       return {
         index,
         timestamp: entry.timestamp,
-        label: (type && labelByType[type]) || "编辑",
+        label: (type && labelByType[type]) || t("panel.history.fallback"),
         active: index === cursor,
       };
     });
-  }, [state]);
+  }, [state, t]);
 
   const exportPanelData = useCallback(() => {
     const current = store.getState();

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useI18nOptional } from "@arronqzy/i18n/react";
 import { BlueprintGraph } from "@arronqzy/react-blueprint";
 import type { BlueprintDocument, BlueprintMetaDraft } from "@arronqzy/react-blueprint";
 import type { State } from "@arronqzy/rx-store";
@@ -63,14 +64,15 @@ export function useWorkspaceProjects({
   panelRevision,
   onProjectApplied,
 }: UseWorkspaceProjectsOptions) {
+  const { t } = useI18nOptional();
   const [projects, setProjects] = useState<WorkspaceProjectListItem[]>([]);
   const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
   const [activeProjectName, setActiveProjectName] = useState<string | null>(null);
   const syncedSnapshotRef = useRef<WorkspaceSnapshot | null>(null);
 
   const resolveProjectName = useCallback(() => {
-    return productName.trim() || "未命名产物";
-  }, [productName]);
+    return productName.trim() || t("panel.defaults.unnamedProduct");
+  }, [productName, t]);
 
   const buildCurrentSnapshot = useCallback((): WorkspaceSnapshot => {
     return {
@@ -115,7 +117,7 @@ export function useWorkspaceProjects({
       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 ?? "",
       };
 
@@ -146,6 +148,7 @@ export function useWorkspaceProjects({
       setBlueprintMeta,
       setProductName,
       setTitleIconDataUrl,
+      t,
     ]
   );
 
@@ -206,16 +209,16 @@ export function useWorkspaceProjects({
       const record = await getWorkspaceProject(id);
       if (!record) {
         await refreshProjects();
-        throw new Error("工作区不存在或已被删除");
+        throw new Error(t("panel.messages.workspaceNotFound"));
       }
       applyProjectRecord(record);
     },
-    [applyProjectRecord, refreshProjects]
+    [applyProjectRecord, refreshProjects, t]
   );
 
   const handleSyncProject = useCallback(async () => {
     if (!activeProjectId) {
-      throw new Error("请先保存工作区");
+      throw new Error(t("panel.messages.saveWorkspaceFirst"));
     }
     const existing = await getWorkspaceProject(activeProjectId);
     if (!existing) {
@@ -223,7 +226,7 @@ export function useWorkspaceProjects({
       setActiveProjectName(null);
       syncedSnapshotRef.current = null;
       await refreshProjects();
-      throw new Error("工作区不存在或已被删除");
+      throw new Error(t("panel.messages.workspaceNotFound"));
     }
     const name = resolveProjectName() || existing.name;
     await persistProject({
@@ -232,7 +235,7 @@ export function useWorkspaceProjects({
       createdAt: existing.createdAt,
     });
     return name;
-  }, [activeProjectId, persistProject, refreshProjects, resolveProjectName]);
+  }, [activeProjectId, persistProject, refreshProjects, resolveProjectName, t]);
 
   const handleDeleteProject = useCallback(
     async (id: string) => {

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,53 @@
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
 import type { PanelChartConfig, PanelLayer } from "../types";
+import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
 
-const DEFAULT_NODE_NAME_MAP: Record<string, string> = {
-  bar: "柱状图",
-  line: "折线图",
-  pie: "饼图",
-  area: "面积图",
-  scatter: "散点图",
-  radar: "雷达图",
-  gauge: "仪表盘",
-  funnel: "漏斗图",
-  text: "文本",
-  grid: "网格布局",
-  image: "图片",
-  video: "视频",
-  audio: "音频",
-  reference: "引用组件",
-  geometry: "几何",
+const tFallback = tForLocale("zh-CN");
+
+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 = tFallback): 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 = tFallback): 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); kept for non-React call sites */
+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 +80,17 @@ 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 = tFallback) {
   if (materialType !== "text") return {};
   return {
-    textHtml: "<p>双击输入文本</p>",
+    textHtml: `<p>${t("panel.defaults.doubleClickTextHtml")}</p>`,
     textAllowInput: true,
     textFontSize: 14,
     textFontWeight: "400",
@@ -96,7 +110,10 @@ export function getDefaultGridConfig(materialType: string) {
   } as const;
 }
 
-export function getDefaultChartConfig(materialType: string): PanelChartConfig | undefined {
+export function getDefaultChartConfig(
+  materialType: string,
+  t: TranslateFn = tFallback
+): PanelChartConfig | undefined {
   if (!["bar", "line", "pie", "area", "scatter", "radar", "gauge", "funnel"].includes(materialType))
     return undefined;
   const common = {
@@ -107,40 +124,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 +165,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 = tFallback
+): 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;
+}