@arronqzy/vue-view 0.1.0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -12,6 +12,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@tanstack/vue-virtual": "^3.13.2",
     "ant-design-vue": "^4.2.6",
     "dayjs": "^1.11.13",
     "echarts": "^6.0.0",
@@ -22,10 +23,12 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.3",
-    "@arronqzy/vue-rx-store": "0.1.0",
-    "@arronqzy/vue-blueprint": "0.1.0",
-    "@arronqzy/rx-store": "1.0.2"
+    "@arronqzy/blueprint-dsl": "1.0.4",
+    "@arronqzy/rx-store": "1.0.3",
+    "@arronqzy/vue-blueprint": "0.1.2",
+    "@arronqzy/i18n": "0.1.2",
+    "@arronqzy/vue-rx-store": "0.1.1",
+    "@arronqzy/view-table": "0.1.2"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -35,8 +38,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/eslint-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/panel/VueViewOnlinePreview.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import {
   BlueprintGraph,
@@ -31,6 +32,8 @@ import {
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
 
+const { t, locale } = useI18n();
+
 const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
 
 const props = defineProps<{
@@ -76,13 +79,13 @@ function applyTitleIcon(titleIconDataUrl?: string) {
 async function loadProject() {
   const record = await loadWorkspaceRecord(props.projectId);
   if (!record) {
-    loadError.value = "工作区不存在或已被删除";
+    loadError.value = t("panel.messages.workspaceNotFound");
     panelState.value = null;
     return;
   }
   const normalized = normalizeImportedPanelState(record.panelState);
   if (!normalized) {
-    loadError.value = "工作区数据格式无效";
+    loadError.value = t("panel.messages.workspaceDataInvalid");
     panelState.value = null;
     return;
   }
@@ -90,7 +93,7 @@ async function loadProject() {
   clearViewElementScopes();
   panelState.value = normalized;
   blueprintGraph.value = BlueprintGraph.fromDocument(record.blueprintDocument);
-  document.title = record.productName.trim() || record.name || "预览";
+  document.title = record.productName.trim() || record.name || t("panel.workspace.previewDocTitle");
   applyTitleIcon(record.titleIconDataUrl);
   projectRevision.value += 1;
 }
@@ -192,7 +195,7 @@ const lifecycleReady = computed(
   () => Boolean(panelState.value && layerElements.value.length > 0 && layoutReady.value)
 );
 
-useBlueprintPageLifecycle({
+const { triggerBlueprintNode } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: ref(true),
   enabled: lifecycleReady,
@@ -230,15 +233,15 @@ function noopSelect() {}
     v-else-if="!panelState"
     class="flex min-h-screen w-full items-center justify-center bg-white text-sm text-gray-600"
   >
-    加载预览中…
+    {{ t("panel.workspace.previewLoading") }}
   </div>
 
   <div
     v-else-if="layerElements.length === 0"
     class="flex min-h-screen w-full flex-col items-center justify-center gap-2 bg-white px-6 text-center text-sm text-gray-600"
   >
-    <div>当前工作区没有可预览的视图节点</div>
-    <div class="text-xs text-gray-400">请先在编辑器中点击「同步」或「创建工作区」后再预览</div>
+    <div>{{ t("panel.workspace.previewNoNodes") }}</div>
+    <div class="text-xs text-gray-400">{{ t("panel.workspace.previewHint") }}</div>
   </div>
 
   <div
@@ -268,6 +271,11 @@ function noopSelect() {}
           :layer-locked="true"
           :preview-mode="true"
           :preview-layout-key="layoutRevision"
+          :on-table-cell-action="
+            (payload) => {
+              void triggerBlueprintNode(payload.blueprintNodeId, payload);
+            }
+          "
           @select-ids="noopSelect"
         />
       </div>

package/src/panel/VueViewPanel.vue

@@ -63,8 +63,13 @@ import {
   useViewElementScope,
 } from "./scope/view-scope-store";
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
+import { useI18n } from "@arronqzy/i18n/vue";
+import { getPanelMessages } from "./constants/messages";
 import "../tailwind.css";
 
+const { t, locale, setLocale } = useI18n();
+const panelMessages = () => getPanelMessages(t);
+
 const props = withDefaults(
   defineProps<{
     class?: string;
@@ -107,7 +112,7 @@ const {
 const selectedIds = ref<string[]>([]);
 const zoom = ref<ViewportZoom>({ x: props.initialZoom, y: props.initialZoom });
 const blueprintGraph = ref(BlueprintGraph.empty());
-const blueprintMeta = ref<BlueprintMetaDraft>({ name: "未命名蓝图", remark: "" });
+const blueprintMeta = ref<BlueprintMetaDraft>({ name: t("panel.defaults.unnamedBlueprint"), remark: "" });
 const blueprintOpen = ref(false);
 const selectedBlueprintNodeId = ref<string | null>(null);
 const blueprintLibraryItems = ref<BlueprintLibraryListItem[]>([]);
@@ -118,7 +123,7 @@ const workspaceBlueprintRef = shallowRef<{
   meta: BlueprintMetaDraft;
 } | null>(null);
 const configFocus = ref<WorkspaceConfigFocus>("view");
-const productName = ref("未命名产物");
+const productName = ref(t("panel.defaults.unnamedProduct"));
 const titleIconDataUrl = ref("");
 const editingLayerId = ref<string | null>(null);
 const editingLayerName = ref("");
@@ -305,7 +310,7 @@ function handleViewScopeUpdate(viewElementIds: string[], scope: unknown) {
 const blueprintDebugSession = useBlueprintDebugSession({
   graph: blueprintGraph,
   blueprintId: activeBlueprintLibraryId,
-  blueprintName: computed(() => blueprintMeta.value.name || "未命名蓝图"),
+  blueprintName: computed(() => { void locale.value; return blueprintMeta.value.name || t("panel.defaults.unnamedBlueprint"); }),
   resolveLibraryBlueprint,
   libraryNameById: blueprintLibraryNameById,
   onExecutionBlocked: handleBlueprintExecutionBlocked,
@@ -361,7 +366,7 @@ function handleWorkspaceProjectApplied(record: WorkspaceProjectRecord) {
   workspaceBlueprintRef.value = {
     document: record.blueprintDocument,
     meta: {
-      name: record.blueprintMeta?.name ?? "未命名蓝图",
+      name: record.blueprintMeta?.name ?? t("panel.defaults.unnamedBlueprint"),
       remark: record.blueprintMeta?.remark ?? "",
     },
   };
@@ -395,7 +400,7 @@ const workspaceProjects = useWorkspaceProjects({
   onProjectApplied: handleWorkspaceProjectApplied,
 });
 
-useBlueprintPageLifecycle({
+const { triggerBlueprintNode } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: blueprintOpen,
   bootKey: computed(() => workspaceProjects.activeProjectId.value ?? undefined),
@@ -407,10 +412,16 @@ useBlueprintPageLifecycle({
   onViewScopeUpdate: handleViewScopeUpdate,
 });
 
+const blueprintNodeOptions = computed(() =>
+  blueprintGraph.value.document.nodes.map((node) => ({
+    id: node.id,
+    label: `${node.label || node.id}${node.nodeType ? ` (${node.nodeType})` : ""}`,
+  }))
+);
 async function loadBlueprintFromLibrary(id: string) {
   const record = await getBlueprintLibraryRecord(id);
   if (!record) {
-    message.error("蓝图不存在或已被删除");
+    message.error(panelMessages().blueprintNotFound);
     void refreshBlueprintLibrary();
     return;
   }
@@ -461,7 +472,7 @@ async function syncBlueprintToLibrary() {
     remark: blueprintMeta.value.remark,
   });
   blueprintSyncedDocument.value = blueprintGraph.value.document;
-  message.success("蓝图已同步到库");
+  message.success(panelMessages().blueprintSyncedToLibrary);
   await refreshBlueprintLibrary();
 }
 
@@ -478,7 +489,7 @@ async function saveBlueprintToLibrary(meta: BlueprintMetaDraft) {
   blueprintSyncedDocument.value = blueprintGraph.value.document;
   blueprintMeta.value = meta;
   await refreshBlueprintLibrary();
-  message.success("蓝图已保存到库");
+  message.success(panelMessages().blueprintSavedToLibrary);
 }
 
 function handleExport() {
@@ -499,7 +510,7 @@ async function handleImportFile(file: File) {
   const text = await file.text();
   const parsed = JSON.parse(text) as State;
   const ok = importPanelData(parsed);
-  if (!ok) window.alert("导入失败：文件格式不正确");
+  if (!ok) window.alert(panelMessages().importInvalidFormat);
   else selectedIds.value = [];
 }
 
@@ -507,7 +518,7 @@ function openBlueprintExport() {
   downloadBlueprintExport(
     buildBlueprintExportPayload(blueprintGraph.value.document, blueprintMeta.value)
   );
-  message.success("蓝图已导出");
+  message.success(panelMessages().blueprintExported);
 }
 
 async function handleBlueprintImportFile(file: File) {
@@ -518,12 +529,12 @@ async function handleBlueprintImportFile(file: File) {
   await refreshBlueprintLibrary();
   if (!activeBlueprintLibraryId.value) snapshotWorkspaceBlueprint();
   await loadBlueprintFromLibrary(record.id);
-  message.success("蓝图已导入并加载");
+  message.success(panelMessages().blueprintImported);
 }
 
 async function handleWorkspaceCreateProject() {
   const result = await workspaceProjects.handleCreateProject();
-  if (result?.name) message.success(`已创建工作区「${result.name}」`);
+  if (result?.name) message.success(panelMessages().workspaceCreated(result.name));
 }
 
 async function handleWorkspaceOpenProject(id: string) {
@@ -531,24 +542,24 @@ async function handleWorkspaceOpenProject(id: string) {
     clearViewElementScopes();
     await workspaceProjects.handleOpenProject(id);
     selectedIds.value = [];
-    message.success("工作区已加载");
+    message.success(panelMessages().workspaceLoaded);
   } catch (error) {
-    message.error(error instanceof Error ? error.message : "打开工作区失败");
+    message.error(error instanceof Error ? error.message : panelMessages().openWorkspaceFailed);
   }
 }
 
 async function handleWorkspaceSyncProject() {
   try {
     const name = await workspaceProjects.handleSyncProject();
-    if (name) message.success(`已同步「${name}」`);
+    if (name) message.success(panelMessages().blueprintSynced(name));
   } catch (error) {
-    message.error(error instanceof Error ? error.message : "同步失败");
+    message.error(error instanceof Error ? error.message : panelMessages().syncFailed);
   }
 }
 
 async function handleWorkspaceDeleteProject(id: string) {
   await workspaceProjects.handleDeleteProject(id);
-  message.success("工作区已删除");
+  message.success(panelMessages().workspaceDeleted);
 }
 
 async function openOnlinePreviewForProject(
@@ -572,7 +583,7 @@ function commitRenameLayer() {
 
 function handleMergeLayers() {
   if (!canMergeLayers.value) {
-    message.warning("至少勾选 2 个图层后可合并");
+    message.warning(panelMessages().mergeNeedTwoLayers);
     return;
   }
   mergeSelectedLayers(mergeLayerName.value.trim() || undefined);
@@ -610,39 +621,39 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 </script>
 
 <template>
-  <Layout class="vue-view-panel h-screen overflow-hidden" :class="props.class">
+  <Layout class="vue-view-panel h-screen overflow-hidden" :class="props.class" :key="locale">
     <Layout.Header class="flex h-auto flex-wrap items-center gap-2 bg-[#001529] px-3 py-2">
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">文件</Button>
+        <Button type="text" class="!text-white">{{ t("panel.menubar.file") }}</Button>
         <template #overlay>
           <Menu>
-            <Menu.Item @click="handleExport">导出面板 JSON</Menu.Item>
-            <Menu.Item @click="importInputRef?.click()">导入面板 JSON</Menu.Item>
+            <Menu.Item @click="handleExport">{{ t("panel.menubar.exportPanelJson") }}</Menu.Item>
+            <Menu.Item @click="importInputRef?.click()">{{ t("panel.menubar.importPanelJson") }}</Menu.Item>
           </Menu>
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">编辑</Button>
+        <Button type="text" class="!text-white">{{ t("panel.menubar.edit") }}</Button>
         <template #overlay>
           <Menu>
-            <Menu.Item :disabled="!canUndo" @click="undo">撤销</Menu.Item>
-            <Menu.Item :disabled="!canRedo" @click="redo">重做</Menu.Item>
+            <Menu.Item :disabled="!canUndo" @click="undo">{{ t("panel.menubar.undo") }}</Menu.Item>
+            <Menu.Item :disabled="!canRedo" @click="redo">{{ t("panel.menubar.redo") }}</Menu.Item>
             <Menu.Divider />
-            <Menu.Item :disabled="!hasUnlockedSelection" @click="bringElementsForward(selectedIds)">上移一层</Menu.Item>
-            <Menu.Item :disabled="!hasUnlockedSelection" @click="sendElementsBackward(selectedIds)">下移一层</Menu.Item>
-            <Menu.Item :disabled="!hasUnlockedSelection" @click="bringElementsToFront(selectedIds)">置顶</Menu.Item>
-            <Menu.Item :disabled="!hasUnlockedSelection" @click="sendElementsToBack(selectedIds)">置底</Menu.Item>
+            <Menu.Item :disabled="!hasUnlockedSelection" @click="bringElementsForward(selectedIds)">{{ t("panel.menubar.bringForward") }}</Menu.Item>
+            <Menu.Item :disabled="!hasUnlockedSelection" @click="sendElementsBackward(selectedIds)">{{ t("panel.menubar.sendBackward") }}</Menu.Item>
+            <Menu.Item :disabled="!hasUnlockedSelection" @click="bringElementsToFront(selectedIds)">{{ t("panel.menubar.bringToFront") }}</Menu.Item>
+            <Menu.Item :disabled="!hasUnlockedSelection" @click="sendElementsToBack(selectedIds)">{{ t("panel.menubar.sendToBack") }}</Menu.Item>
             <Menu.Divider />
-            <Menu.Item :disabled="!hasUnlockedSelection" @click="handleDeleteSelected">删除选中</Menu.Item>
+            <Menu.Item :disabled="!hasUnlockedSelection" @click="handleDeleteSelected">{{ t("panel.menubar.deleteSelected") }}</Menu.Item>
           </Menu>
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">蓝图</Button>
+        <Button type="text" class="!text-white">{{ t("panel.menubar.blueprint") }}</Button>
         <template #overlay>
           <Menu>
-            <Menu.Item @click="openBlueprintExport">导出蓝图</Menu.Item>
-            <Menu.Item @click="blueprintImportInputRef?.click()">导入蓝图</Menu.Item>
+            <Menu.Item @click="openBlueprintExport">{{ t("panel.menubar.exportBlueprint") }}</Menu.Item>
+            <Menu.Item @click="blueprintImportInputRef?.click()">{{ t("panel.menubar.importBlueprint") }}</Menu.Item>
           </Menu>
         </template>
       </Dropdown>
@@ -657,17 +668,26 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         @delete-project="handleWorkspaceDeleteProject"
         @preview-project="openOnlinePreviewForProject"
       />
+            <Dropdown :trigger="['click']">
+        <Button type="text" class="!text-white">{{ t("panel.theme.language") }}</Button>
+        <template #overlay>
+          <Menu>
+            <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'zh-CN' }" @click="setLocale('zh-CN')">{{ t("panel.theme.zhCN") }}</Menu.Item>
+            <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'en-US' }" @click="setLocale('en-US')">{{ t("panel.theme.enUS") }}</Menu.Item>
+          </Menu>
+        </template>
+      </Dropdown>
       <div class="flex-1" />
       <Space>
-        <Button size="small" :disabled="!canUndo" @click="undo">撤销</Button>
-        <Button size="small" :disabled="!canRedo" @click="redo">重做</Button>
+        <Button size="small" :disabled="!canUndo" @click="undo">{{ t("panel.menubar.undo") }}</Button>
+        <Button size="small" :disabled="!canRedo" @click="redo">{{ t("panel.menubar.redo") }}</Button>
         <Button
           size="small"
           type="primary"
           :disabled="!workspaceProjects.activeProjectId.value"
           @click="workspaceProjects.activeProjectId.value && openOnlinePreviewForProject(workspaceProjects.activeProjectId.value, { syncFirst: workspaceProjects.dirty.value })"
         >
-          预览
+          {{ t("common.preview") }}
         </Button>
       </Space>
     </Layout.Header>
@@ -689,9 +709,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
               v-model:value="productName"
               size="small"
               class="w-[200px]"
-              placeholder="产物名称"
+              :placeholder="t('panel.menubar.productName')"
             />
-            <span class="text-xs text-gray-500">缩放</span>
+            <span class="text-xs text-gray-500">{{ t("panel.menubar.zoom") }}</span>
             <Slider
               :min="0.25"
               :max="4"
@@ -701,9 +721,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
               @change="(v: number | [number, number]) => setUniformZoom(Array.isArray(v) ? v[0] : v)"
             />
             <Tag v-if="activeLayer">{{ activeLayer.name }}</Tag>
-            <Tag color="blue">已选 {{ selectedIds.length }}</Tag>
+            <Tag color="blue">{{ t("panel.menubar.selectedCount", { count: selectedIds.length }) }}</Tag>
             <div data-blueprint-toggle class="ml-auto flex items-center gap-2">
-              <span class="text-xs text-gray-500">蓝图</span>
+              <span class="text-xs text-gray-500">{{ t("panel.menubar.blueprint") }}</span>
               <Switch v-model:checked="blueprintOpen" size="small" />
             </div>
           </div>
@@ -738,6 +758,11 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
                 :selected-ids="selectedIds"
                 :update-element="updateElement"
                 :layer-locked="Boolean(activeLayer?.locked)"
+                :on-table-cell-action="
+                  (payload) => {
+                    void triggerBlueprintNode(payload.blueprintNodeId, payload);
+                  }
+                "
                 @select-ids="selectIds"
               />
               <SelectLayer
@@ -765,9 +790,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 
           <div class="border-t bg-white px-2 py-2">
             <div class="mb-2 flex flex-wrap items-center gap-2">
-              <span class="text-xs font-semibold text-gray-500">图层</span>
-              <Button size="small" @click="addLayer()">新建</Button>
-              <Button size="small" :disabled="!canMergeLayers" @click="isMergingLayers = true">合并</Button>
+              <span class="text-xs font-semibold text-gray-500">{{ t("panel.layers.title") }}</span>
+              <Button size="small" @click="addLayer()">{{ t("panel.layers.addShort") }}</Button>
+              <Button size="small" :disabled="!canMergeLayers" @click="isMergingLayers = true">{{ t("panel.layers.mergeShort") }}</Button>
             </div>
             <Tabs
               size="small"
@@ -779,8 +804,8 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
                 <template #tab>
                   <span class="inline-flex items-center gap-1">
                     {{ layer.name }}
-                    <Tag v-if="layer.isMapping" color="blue" class="!m-0">映射</Tag>
-                    <Tag v-if="layer.isPrimary" color="green" class="!m-0">主</Tag>
+                    <Tag v-if="layer.isMapping" color="blue" class="!m-0">{{ t("panel.layers.mapping") }}</Tag>
+                    <Tag v-if="layer.isPrimary" color="green" class="!m-0">{{ t("panel.layers.primary") }}</Tag>
                   </span>
                 </template>
               </Tabs.TabPane>
@@ -794,23 +819,23 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
                   class="w-40"
                   @press-enter="commitRenameLayer"
                 />
-                <Button size="small" type="primary" @click="commitRenameLayer">确定</Button>
+                <Button size="small" type="primary" @click="commitRenameLayer">{{ t("common.ok") }}</Button>
               </template>
               <template v-else>
                 <span class="font-medium">{{ activeLayer.name }}</span>
-                <Button size="small" type="link" @click="startRenameLayer(activeLayer.id, activeLayer.name)">重命名</Button>
+                <Button size="small" type="link" @click="startRenameLayer(activeLayer.id, activeLayer.name)">{{ t("panel.layers.renameShort") }}</Button>
               </template>
               <Button size="small" @click="toggleLayerLock(activeLayer.id)">
-                {{ activeLayer.locked ? "解锁" : "锁定" }}
+                {{ activeLayer.locked ? t("panel.layers.unlockShort") : t("panel.layers.lockShort") }}
               </Button>
               <Checkbox
                 :checked="Boolean(activeLayer.mergeSelected)"
                 @change="() => toggleLayerMergeSelected(activeLayer!.id)"
               >
-                参与合并
+                {{ t("panel.layers.joinMerge") }}
               </Checkbox>
               <Button size="small" :disabled="activeLayer.isPrimary" @click="setPrimaryLayer(activeLayer.id)">
-                设为主图层
+                {{ t("panel.layers.setPrimary") }}
               </Button>
               <Button
                 size="small"
@@ -818,7 +843,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
                 :disabled="!activeLayer.editable"
                 @click="deleteLayer(activeLayer.id)"
               >
-                删除图层
+                {{ t("panel.layers.delete") }}
               </Button>
             </div>
           </div>
@@ -840,6 +865,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
           :selected-blueprint-node="selectedBlueprintNode"
           :allow-false-signal-propagation="blueprintGraph.document.allowFalseSignalPropagation"
           :blueprint-library-options="blueprintLibraryOptions"
+          :blueprint-node-options="blueprintNodeOptions"
           :all-view-elements="allElements"
           :on-update-blueprint-node="handleUpdateBlueprintNode"
           :on-update-allow-false-signal-propagation="handleUpdateAllowFalseSignalPropagation"
@@ -852,12 +878,12 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 
     <Modal
       v-model:open="isMergingLayers"
-      title="合并图层"
-      ok-text="合并"
+      :title="t('panel.layers.mergeDialogTitle')"
+      :ok-text="t('panel.layers.mergeOk')"
       @ok="handleMergeLayers"
     >
-      <Input v-model:value="mergeLayerName" placeholder="合并后图层名称（可选）" />
-      <div class="mt-2 text-xs text-gray-500">已勾选 {{ mergeSelectedCount }} 个图层</div>
+      <Input v-model:value="mergeLayerName" :placeholder="t('panel.layers.mergedNamePlaceholderOptional')" />
+      <div class="mt-2 text-xs text-gray-500">{{ t("panel.layers.mergeSelectedCount", { count: mergeSelectedCount }) }}</div>
     </Modal>
   </Layout>
 </template>

package/src/panel/components/ConfigHintIcon.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { Tooltip } from "ant-design-vue";
 
+const { t, locale } = useI18n();
 withDefaults(
   defineProps<{
     label?: string;
     contentClass?: string;
     buttonClass?: string;
   }>(),
-  { label: "说明" }
+  { label: t("common.hint") }
 );
 </script>
 
@@ -26,7 +28,7 @@ withDefaults(
         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'
       "
-      :aria-label="`${label}说明`"
+      :aria-label="t('common.hintAria', { label })"
     >
       ?
     </button>

package/src/panel/components/ElementsLayer.vue

@@ -14,6 +14,8 @@ import {
   TextNodeContent,
   VideoNodeContent,
 } from "./elementsLayerNodes";
+import TableNodeContent from "./table/TableNodeContent.vue";
+import type { TableCellActionHandler } from "./table/TableNodeContent.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -28,6 +30,7 @@ const props = withDefaults(
     layerLocked?: boolean;
     previewMode?: boolean;
     previewLayoutKey?: number;
+    onTableCellAction?: TableCellActionHandler;
   }>(),
   { layerLocked: false, previewMode: false }
 );
@@ -45,6 +48,10 @@ const NodeContent = defineComponent({
     layerLocked: { type: Boolean, default: false },
     previewMode: { type: Boolean, default: false },
     previewLayoutKey: { type: Number, default: undefined },
+    onTableCellAction: {
+      type: Function as PropType<TableCellActionHandler | undefined>,
+      default: undefined,
+    },
     updateElement: {
       type: Function as PropType<
         (
@@ -100,6 +107,13 @@ const NodeContent = defineComponent({
       if (el.materialType === "image") {
         return h(ImageNodeContent, { element: el });
       }
+      if (el.materialType === "table") {
+        return h(TableNodeContent, {
+          element: el,
+          interactive: p.previewMode || Boolean(p.onTableCellAction),
+          onCellAction: p.onTableCellAction,
+        });
+      }
       return h(EmptyNodePlaceholder, { element: el });
     };
   },
@@ -160,6 +174,7 @@ function onSelect(id: string, event: MouseEvent) {
       :preview-mode="previewMode"
       :preview-layout-key="previewLayoutKey"
       :update-element="updateElement"
+      :on-table-cell-action="onTableCellAction"
     />
   </div>
 </template>

package/src/panel/components/MaterialPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+const { t, locale } = useI18n();
 defineProps<{ id: string }>();
 
 const common =
@@ -76,6 +78,22 @@ const common =
       <div class="h-1.5 w-8/12 rounded bg-muted-foreground/45" />
     </div>
   </div>
+  <div v-else-if="id === 'table'" :class="common">
+    <div class="absolute inset-0 flex flex-col gap-1 p-2">
+      <div class="grid h-3 flex-none grid-cols-3 gap-1">
+        <div class="rounded-sm bg-primary/75" />
+        <div class="rounded-sm bg-primary/65" />
+        <div class="rounded-sm bg-primary/70" />
+      </div>
+      <div class="grid min-h-0 flex-1 grid-cols-3 gap-1">
+        <div
+          v-for="idx in 6"
+          :key="idx"
+          class="rounded-sm border border-primary/25 bg-primary/10"
+        />
+      </div>
+    </div>
+  </div>
   <div v-else-if="id === 'rect'" :class="common">
     <div class="absolute inset-2 rounded-md border-2 border-primary/80 bg-primary/15" />
   </div>
@@ -91,7 +109,7 @@ const common =
   <div v-else-if="id === 'reference'" :class="common">
     <div class="absolute inset-2 rounded-md border border-dashed border-primary/70 bg-primary/10" />
     <div class="absolute inset-0 flex items-center justify-center text-[10px] text-primary/80">
-      引用组件
+      {{ t("panel.material.reference") }}
     </div>
   </div>
   <div v-else-if="id === 'image'" :class="common">