@arronqzy/vue-view 0.1.0 → 0.1.3

package/src/panel/components/PanelConfigSidebar.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { Empty, Input } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
 import { CHART_TYPES } from "../utils/chartOptionBuilder";
-import { PANEL_MESSAGES } from "../constants/messages";
+import { getPanelMessages } from "../constants/messages";
 import { hasViewElementScope } from "../scope/view-scope-store";
 import { collectElementScopeWarnings } from "../utils/scope-template-warnings";
 import { sectionMatchesSearch } from "./config/shared";
@@ -22,7 +23,10 @@ import PanelConfigGeometrySection from "./config/PanelConfigGeometrySection.vue"
 import PanelConfigGridSection from "./config/PanelConfigGridSection.vue";
 import PanelConfigGridChildSpan from "./config/PanelConfigGridChildSpan.vue";
 import PanelConfigReferenceSection from "./config/PanelConfigReferenceSection.vue";
+import PanelConfigTableSection from "./table/PanelConfigTableSection.vue";
 
+const { t, locale } = useI18n();
+const msgs = () => getPanelMessages(t);
 const SEARCH_COLLAPSE_STORAGE_KEY = "panel:config-search-collapsed";
 
 const props = withDefaults(
@@ -43,9 +47,11 @@ const props = withDefaults(
       action: "bringForward" | "sendBackward" | "bringToFront" | "sendToBack"
     ) => void;
     viewElementScope?: unknown;
+    blueprintNodeOptions?: { id: string; label: string }[];
   }>(),
   {
     selectedElements: () => [],
+    blueprintNodeOptions: () => [],
   }
 );
 
@@ -67,6 +73,7 @@ const expandedSections = ref<Record<string, boolean>>({
   gridChildSpan: true,
   reference: true,
   imageConfig: true,
+  tableConfig: true,
 });
 
 const normalizedSearch = computed(() => configSearch.value.trim().toLowerCase());
@@ -110,7 +117,7 @@ const showScopePanel = computed(
 
 const scopeWarnings = computed(() => {
   if (!props.selectedElement || props.viewElementScope === undefined) return [];
-  return collectElementScopeWarnings(props.selectedElement, props.viewElementScope);
+  return collectElementScopeWarnings(props.selectedElement, props.viewElementScope, t);
 });
 
 const materialType = computed(() => props.selectedElement?.materialType ?? "");
@@ -133,24 +140,24 @@ const visibleSectionCount = computed(() => {
   if (!props.selectedElement || isMultiSelectMode.value) return 0;
   let count = 0;
   const checks: Array<[string, string, string[]]> = [
-    ["nodeInfo", "节点信息", ["名称", "id", "类型"]],
-    ["styleBackground", "通用样式 / 背景", ["背景"]],
-    ["styleBorder", "通用样式 / 边框", ["边框"]],
+    ["nodeInfo", t("panel.config.sectionNodeInfo"), [t("panel.config.name"), "id", t("panel.config.type")]],
+    ["styleBackground", t("panel.config.sectionStyleBackground"), [t("panel.config.backgroundColor"), "background"]],
+    ["styleBorder", t("panel.config.sectionStyleBorder"), [t("panel.config.searchKwBorder")]],
   ];
   if (isChartElement.value) {
-    checks.push(["chartBasic", "图表配置 / 基础", ["图表"]]);
-    checks.push(["chartAdvanced", "图表配置 / 高级", ["json", "高级"]]);
+    checks.push(["chartBasic", t("panel.config.sectionChartBasic"), [t("panel.material.charts")]]);
+    checks.push(["chartAdvanced", t("panel.config.sectionChartAdvanced"), ["json", t("panel.config.searchKwAdvanced")]]);
   }
-  if (materialType.value === "text") checks.push(["textConfig", "文本配置", ["文本"]]);
-  if (materialType.value === "audio") checks.push(["audioConfig", "音频配置", ["音频"]]);
-  if (materialType.value === "video") checks.push(["videoConfig", "视频配置", ["视频"]]);
-  if (materialType.value === "image") checks.push(["imageConfig", "图片配置", ["图片"]]);
-  if (materialType.value === "geometry") checks.push(["geometryConfig", "几何配置", ["几何"]]);
-  if (materialType.value === "grid") checks.push(["gridConfig", "网格布局配置", ["网格"]]);
+  if (materialType.value === "text") checks.push(["textConfig", t("panel.config.sectionText"), [t("panel.defaults.text")]]);
+  if (materialType.value === "audio") checks.push(["audioConfig", t("panel.config.sectionAudio"), [t("panel.defaults.audio")]]);
+  if (materialType.value === "video") checks.push(["videoConfig", t("panel.config.sectionVideo"), [t("panel.defaults.video")]]);
+  if (materialType.value === "image") checks.push(["imageConfig", t("panel.config.sectionImage"), [t("panel.defaults.image")]]);
+  if (materialType.value === "geometry") checks.push(["geometryConfig", t("panel.config.sectionGeometry"), [t("panel.defaults.geometry")]]);
+  if (materialType.value === "grid") checks.push(["gridConfig", t("panel.config.sectionGrid"), [t("panel.config.searchKwGrid")]]);
   if (props.selectedElement?.parentGridId) {
-    checks.push(["gridChildSpan", "网格子节点占位", ["跨列"]]);
+    checks.push(["gridChildSpan", t("panel.config.sectionGridChildSpan"), [t("panel.config.searchKwCrossCol")]]);
   }
-  if (materialType.value === "reference") checks.push(["reference", "引用组件配置", ["引用"]]);
+  if (materialType.value === "reference") checks.push(["reference", t("panel.config.sectionReference"), [t("panel.material.reference")]]);
   for (const [, title, terms] of checks) {
     if (shouldShowSection("", title, terms)) count += 1;
   }
@@ -188,7 +195,7 @@ watch(
       class="scope-config-sidebar h-full overflow-auto border-l border-gray-200 bg-gray-50/30 px-3 py-3 text-gray-900 [&_.scope-field--highlight]:rounded-md [&_.scope-field--highlight]:ring-2 [&_.scope-field--highlight]:ring-amber-400/80"
     >
       <div class="sticky top-0 z-20 mb-3 rounded-lg border border-gray-200/80 bg-white px-2.5 py-2 shadow-sm">
-        <div class="text-xs font-semibold tracking-wide">配置面板</div>
+        <div class="text-xs font-semibold tracking-wide">{{ t("panel.config.panelTitle") }}</div>
         <ViewElementScopePanel v-if="showScopePanel" :scope="viewElementScope!" />
         <ScopeTemplateWarningsPanel />
         <div
@@ -200,18 +207,18 @@ watch(
               class="rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500 hover:bg-gray-50"
               @click="isSearchCollapsed = !isSearchCollapsed"
             >
-              {{ isSearchCollapsed ? "展开搜索" : "收起搜索" }}
+              {{ isSearchCollapsed ? t("panel.config.expandSearch") : t("panel.config.collapseSearch") }}
             </button>
           </div>
           <div v-if="!isSearchCollapsed" class="mt-2">
             <Input
               v-model:value="configSearch"
               size="small"
-              placeholder="搜索配置，如：边框、tooltip、音频、网格..."
+              :placeholder="t('panel.config.searchPlaceholder')"
               data-scope-autocomplete="off"
             />
             <div v-if="hasSearch" class="mt-1 text-[11px] text-gray-500">
-              搜索中：{{ configSearch }}
+              {{ t("panel.config.searching", { query: configSearch }) }}
             </div>
           </div>
         </div>
@@ -232,14 +239,14 @@ watch(
       <Empty
         v-else-if="!selectedElement"
         class="py-7"
-        description="请先在画布中选中一个节点，再到这里进行配置。"
+        :description="t('panel.config.emptyNoNodeDesc')"
       />
 
       <div v-else class="space-y-3">
         <fieldset :disabled="!isNodeEditable" :class="!isNodeEditable ? 'opacity-60' : ''">
           <div class="space-y-3.5 text-xs">
             <PanelConfigNodeInfo
-              v-if="shouldShowSection('nodeInfo', '节点信息', ['名称', 'id', '类型', '锁定'])"
+              v-if="shouldShowSection('nodeInfo', t('panel.config.sectionNodeInfo'), [t('panel.config.name'), 'id', t('panel.config.type'), t('panel.layers.lockShort')])"
               :element="selectedElement"
               :layers="layers"
               :is-editable="isNodeEditable"
@@ -254,13 +261,13 @@ watch(
 
             <PanelConfigStyleSections
               v-if="
-                shouldShowSection('styleBackground', '通用样式 / 背景', ['背景', 'background']) ||
-                shouldShowSection('styleBorder', '通用样式 / 边框', ['边框', 'border'])
+                shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background']) ||
+                shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])
               "
               :element="selectedElement"
               :is-editable="isNodeEditable"
-              :show-background="shouldShowSection('styleBackground', '通用样式 / 背景', ['背景', 'background'])"
-              :show-border="shouldShowSection('styleBorder', '通用样式 / 边框', ['边框', 'border'])"
+              :show-background="shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background'])"
+              :show-border="shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])"
               :background-open="isSectionExpanded('styleBackground')"
               :border-open="isSectionExpanded('styleBorder')"
               :force-open="forceOpenSections"
@@ -270,7 +277,7 @@ watch(
             />
 
             <PanelConfigChartSection
-              v-if="isChartElement && shouldShowSection('chartBasic', '图表配置 / 基础', ['图表', 'tooltip'])"
+              v-if="isChartElement && shouldShowSection('chartBasic', t('panel.config.sectionChartBasic'), [t('panel.material.charts'), 'tooltip'])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :basic-open="isSectionExpanded('chartBasic')"
@@ -282,7 +289,7 @@ watch(
             />
 
             <PanelConfigTextSection
-              v-if="materialType === 'text' && shouldShowSection('textConfig', '文本配置', ['文本', '字体', '颜色'])"
+              v-if="materialType === 'text' && shouldShowSection('textConfig', t('panel.config.sectionText'), [t('panel.defaults.text'), t('panel.config.fontFamily'), t('panel.config.color')])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('textConfig')"
@@ -291,8 +298,19 @@ watch(
               @update:open="(v) => setSectionExpanded('textConfig', v)"
             />
 
+            <PanelConfigTableSection
+              v-if="materialType === 'table' && shouldShowSection('tableConfig', t('panel.config.sectionTable'), [t('panel.material.table'), 'table', t('panel.config.tableSource'), t('panel.config.tableColumns'), t('panel.config.tableRowsText')])"
+              :element="selectedElement"
+              :is-editable="isNodeEditable"
+              :open="isSectionExpanded('tableConfig')"
+              :force-open="forceOpenSections"
+              :update-element="updateElement"
+              :blueprint-node-options="blueprintNodeOptions"
+              @update:open="(v) => setSectionExpanded('tableConfig', v)"
+            />
+
             <PanelConfigAudioSection
-              v-if="materialType === 'audio' && shouldShowSection('audioConfig', '音频配置', ['音频', 'url', '录音'])"
+              v-if="materialType === 'audio' && shouldShowSection('audioConfig', t('panel.config.sectionAudio'), [t('panel.defaults.audio'), 'url', t('panel.config.searchKwRecord')])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('audioConfig')"
@@ -302,7 +320,7 @@ watch(
             />
 
             <PanelConfigVideoSection
-              v-if="materialType === 'video' && shouldShowSection('videoConfig', '视频配置', ['视频', 'url'])"
+              v-if="materialType === 'video' && shouldShowSection('videoConfig', t('panel.config.sectionVideo'), [t('panel.defaults.video'), 'url'])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('videoConfig')"
@@ -312,7 +330,7 @@ watch(
             />
 
             <PanelConfigImageSection
-              v-if="materialType === 'image' && shouldShowSection('imageConfig', '图片配置', ['图片', 'src', 'fit'])"
+              v-if="materialType === 'image' && shouldShowSection('imageConfig', t('panel.config.sectionImage'), [t('panel.defaults.image'), 'src', 'fit'])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('imageConfig')"
@@ -322,7 +340,7 @@ watch(
             />
 
             <PanelConfigGeometrySection
-              v-if="materialType === 'geometry' && shouldShowSection('geometryConfig', '几何配置', ['几何', '形状'])"
+              v-if="materialType === 'geometry' && shouldShowSection('geometryConfig', t('panel.config.sectionGeometry'), [t('panel.defaults.geometry'), t('panel.config.shape')])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('geometryConfig')"
@@ -332,7 +350,7 @@ watch(
             />
 
             <PanelConfigGridSection
-              v-if="materialType === 'grid' && shouldShowSection('gridConfig', '网格布局配置', ['网格', '行', '列', '间距'])"
+              v-if="materialType === 'grid' && shouldShowSection('gridConfig', t('panel.config.sectionGrid'), [t('panel.config.searchKwGrid'), t('panel.config.rowsShort'), t('panel.config.colsShort'), t('panel.config.searchKwGap')])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('gridConfig')"
@@ -342,7 +360,7 @@ watch(
             />
 
             <PanelConfigGridChildSpan
-              v-if="selectedElement.parentGridId && shouldShowSection('gridChildSpan', '网格子节点占位', ['跨列', '跨行'])"
+              v-if="selectedElement.parentGridId && shouldShowSection('gridChildSpan', t('panel.config.sectionGridChildSpan'), [t('panel.config.searchKwCrossCol'), t('panel.config.searchKwCrossRow')])"
               :element="selectedElement"
               :is-editable="isNodeEditable"
               :open="isSectionExpanded('gridChildSpan')"
@@ -352,7 +370,7 @@ watch(
             />
 
             <PanelConfigReferenceSection
-              v-if="materialType === 'reference' && shouldShowSection('reference', '引用组件配置', ['引用', '浅拷贝', '深拷贝'])"
+              v-if="materialType === 'reference' && shouldShowSection('reference', t('panel.config.sectionReference'), [t('panel.material.reference'), t('panel.material.shallowCopy'), t('panel.material.deepCopy')])"
               :element="selectedElement"
               :layers="layers"
               :is-editable="isNodeEditable"
@@ -364,17 +382,17 @@ watch(
             />
 
             <div
-              v-if="!isChartElement && materialType && !['text', 'audio', 'video', 'image', 'geometry', 'grid', 'reference'].includes(materialType)"
+              v-if="!isChartElement && materialType && !['text', 'table', 'audio', 'video', 'image', 'geometry', 'grid', 'reference'].includes(materialType)"
               class="text-xs leading-6 text-gray-500"
             >
-              当前节点不是图表类型，暂无图表配置项。
+              {{ t("panel.config.notChartType") }}
             </div>
 
             <div
               v-if="hasSearch && visibleSectionCount === 0"
               class="rounded border border-gray-200/60 bg-white px-2 py-1.5 text-[11px] text-gray-500"
             >
-              未找到匹配项，请尝试更换关键词。
+              {{ t("panel.config.noMatch") }}
             </div>
           </div>
         </fieldset>
@@ -383,13 +401,13 @@ watch(
           v-if="selectedElement.locked"
           class="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-700"
         >
-          {{ PANEL_MESSAGES.nodeConfigLocked }}
+          {{ msgs().nodeConfigLocked }}
         </div>
         <div
           v-else-if="selectedLayer?.locked"
           class="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-700"
         >
-          {{ PANEL_MESSAGES.nodeConfigLayerLocked }}
+          {{ msgs().nodeConfigLayerLocked }}
         </div>
       </div>
     </aside>

package/src/panel/components/ViewElementScopePanel.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { formatViewElementScope } from "../utils/scope-template";
 import ConfigHintIcon from "./ConfigHintIcon.vue";
 import ScopeTemplateUsageHint from "./scope-config/ScopeTemplateUsageHint.vue";
 import { onMounted, ref, watch } from "vue";
 
+const { t, locale } = useI18n();
 const SCOPE_COLLAPSE_STORAGE_KEY = "panel:config-scope-collapsed";
 
 const props = defineProps<{
@@ -49,15 +51,15 @@ watch(
   <div class="mt-2 border-t border-border/50 pt-2">
     <div class="flex items-center justify-between gap-2">
       <div class="flex min-w-0 items-center gap-1.5">
-        <div class="text-[11px] font-medium text-foreground">Scope 数据</div>
-        <ConfigHintIcon label="Scope 模版" content-class="max-w-[380px]">
+        <div class="text-[11px] font-medium text-foreground">{{ t("panel.scope.dataTitle") }}</div>
+        <ConfigHintIcon :label="t('panel.scope.templateHintLabel')" content-class="max-w-[380px]">
           <ScopeTemplateUsageHint />
         </ConfigHintIcon>
         <span
           v-if="scopeUpdated"
           class="shrink-0 rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-medium text-sky-700 dark:text-sky-300"
         >
-          已更新
+          {{ t("panel.scope.updated") }}
         </span>
       </div>
       <button
@@ -65,7 +67,7 @@ watch(
         class="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
         @click="isCollapsed = !isCollapsed"
       >
-        {{ isCollapsed ? "展开 Scope" : "收起 Scope" }}
+        {{ isCollapsed ? t("panel.scope.expand") : t("panel.scope.collapse") }}
       </button>
     </div>
     <pre

package/src/panel/components/WorkspaceConfigSidebar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed } from "vue";
 import { Empty } from "ant-design-vue";
 import {
@@ -11,6 +12,8 @@ import {
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
 import PanelConfigSidebar from "./PanelConfigSidebar.vue";
 
+const { t, locale } = useI18n();
+
 export type WorkspaceConfigFocus = "view" | "blueprint" | "blueprint-log";
 
 export type PanelConfigSidebarProps = {
@@ -30,6 +33,7 @@ export type PanelConfigSidebarProps = {
     action: "bringForward" | "sendBackward" | "bringToFront" | "sendToBack"
   ) => void;
   viewElementScope?: unknown;
+  blueprintNodeOptions?: { id: string; label: string }[];
 };
 
 export type BlueprintExecutionLogViewProps = {
@@ -86,6 +90,7 @@ const props = withDefaults(
   {
     allowFalseSignalPropagation: false,
     blueprintLibraryOptions: () => [],
+    blueprintNodeOptions: () => [],
     selectedElements: () => [],
   }
 );
@@ -107,6 +112,7 @@ const viewElementOptions = computed(() =>
       :layers="layers"
       :update-element="updateElement"
       :view-element-scope="viewElementScope"
+      :blueprint-node-options="blueprintNodeOptions"
       :set-reference-copy-mode="setReferenceCopyMode"
       :node-z-order-label="nodeZOrderLabel"
       :on-exclude-selected-node="onExcludeSelectedNode"
@@ -131,7 +137,7 @@ const viewElementOptions = computed(() =>
       v-else-if="!selectedBlueprintNode"
       class="flex h-full flex-col overflow-hidden bg-background text-foreground"
     >
-      <Empty class="py-10" description="在蓝图面板中选中一个节点后，这里会显示对应的配置。" />
+      <Empty class="py-10" :description="t('panel.workspace.configEmptyDesc')" />
     </div>
 
     <BlueprintNodeConfigSidebar

package/src/panel/components/WorkspaceProjectNav.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { Button, Dropdown, Menu, Modal, Tooltip } from "ant-design-vue";
 import { computed, h, ref } from "vue";
 import type { WorkspaceProjectListItem } from "../library/workspace-project-db";
 
+const { t, locale } = useI18n();
+
 function formatUpdatedAt(ts: number): string {
   try {
     return new Date(ts).toLocaleString();
@@ -26,6 +29,14 @@ const emit = defineEmits<{
   previewProject: [id: string, options?: { syncFirst?: boolean }];
 }>();
 
+const syncTooltip = computed(() => {
+  void locale.value;
+  if (!props.dirty) return t("panel.workspace.syncUpToDate");
+  return t("panel.workspace.syncUpdate", {
+    name: props.activeProjectName ?? t("panel.workspace.currentWorkspaceFallback"),
+  });
+});
+
 const pendingDeleteId = ref<string | null>(null);
 const busy = ref(false);
 
@@ -64,7 +75,7 @@ const projectMenu = computed(() =>
     {
       default: () =>
         props.projects.length === 0
-          ? [h(Menu.Item, { key: "empty", disabled: true }, () => "暂无已保存工作区")]
+          ? [h(Menu.Item, { key: "empty", disabled: true }, () => t("panel.workspace.noSavedWorkspaces"))]
           : props.projects.map((project) =>
               h(
                 "div",
@@ -105,7 +116,7 @@ const projectMenu = computed(() =>
                           })
                         ),
                     },
-                    () => "预览"
+                    () => t("panel.workspace.previewDocTitle")
                   ),
                   h(
                     Button,
@@ -118,7 +129,7 @@ const projectMenu = computed(() =>
                         pendingDeleteId.value = project.id;
                       },
                     },
-                    () => "删除"
+                    () => t("common.delete")
                   ),
                 ])
               )
@@ -131,7 +142,7 @@ const projectMenu = computed(() =>
 <template>
   <div class="flex items-center gap-1.5 border-l border-border pl-2">
     <Tooltip
-      title="以当前产物名称新建一条 IndexedDB 工作区记录，不会覆盖已有工作区"
+      :title="t('panel.workspace.createHint')"
       :overlay-style="{ zIndex: 10100 }"
       :mouse-enter-delay="0.15"
     >
@@ -141,17 +152,13 @@ const projectMenu = computed(() =>
         :disabled="busy"
         @click="runAction(() => emit('createProject'))"
       >
-        创建工作区
+        {{ t("panel.workspace.create") }}
       </Button>
     </Tooltip>
 
     <Tooltip
       v-if="activeProjectId"
-      :title="
-        dirty
-          ? `同步更新「${activeProjectName ?? '当前工作区'}」到 IndexedDB`
-          : '当前工作区已与 IndexedDB 同步'
-      "
+      :title="syncTooltip"
       :overlay-style="{ zIndex: 10100 }"
       :mouse-enter-delay="0.15"
     >
@@ -162,13 +169,13 @@ const projectMenu = computed(() =>
         :disabled="busy || !dirty"
         @click="runAction(() => emit('syncProject'))"
       >
-        同步{{ dirty ? " *" : "" }}
+        {{ dirty ? t("panel.workspace.syncDirty") : t("common.sync") }}
       </Button>
     </Tooltip>
 
     <Dropdown :trigger="['click']" :disabled="busy" :overlay-style="{ zIndex: 10100 }">
       <Button size="small" class="h-7 max-w-[200px] truncate px-2 text-xs">
-        {{ activeProjectName ? `工作区：${activeProjectName}` : "已保存工作区" }}
+        {{ activeProjectName ? t("panel.workspace.workspaceNamed", { name: activeProjectName }) : t("panel.workspace.savedWorkspaces") }}
       </Button>
       <template #overlay>
         <component :is="projectMenu" />
@@ -178,15 +185,15 @@ const projectMenu = computed(() =>
 
   <Modal
     v-model:open="deleteModalOpen"
-    title="删除工作区？"
-    ok-text="删除"
-    cancel-text="取消"
+    :title="t('panel.workspace.deleteConfirmTitle')"
+    :ok-text="t('common.delete')"
+    :cancel-text="t('common.cancel')"
     ok-type="danger"
     :z-index="10150"
     @ok="confirmDelete"
   >
     <p class="text-sm text-muted-foreground">
-      将永久删除 IndexedDB 中的「{{ pendingDeleteProject?.name ?? "" }}」，此操作不可恢复。
+      {{ t("panel.workspace.deleteConfirmBody", { name: pendingDeleteProject?.name ?? "" }) }}
     </p>
   </Modal>
 </template>

package/src/panel/components/WorkspaceStageSplit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import {
   computed,
   onMounted,
@@ -13,6 +14,8 @@ import {
   type BlueprintExecutionOverlay,
 } from "@arronqzy/vue-blueprint";
 
+const { t, locale } = useI18n();
+
 export type BlueprintLibraryListItem = {
   id: string;
   name: string;
@@ -200,7 +203,7 @@ watch(blueprintWrapRef, (el) => {
             class="min-w-[140px]"
             :value="activeBlueprintLibraryId ?? undefined"
             :options="libraryOptions"
-            placeholder="蓝图库"
+            :placeholder="t('panel.workspace.blueprintLibrary')"
             @change="(id) => id && onSelectBlueprintLibraryItem?.(String(id))"
           />
           <span
@@ -209,17 +212,17 @@ watch(blueprintWrapRef, (el) => {
           >
             {{ currentBlueprintLabel }}
           </span>
-          <Tooltip title="保存蓝图到库">
-            <Button size="small" @click="onSaveBlueprint?.()">保存</Button>
+          <Tooltip :title="t('panel.workspace.saveBlueprintToLibrary')">
+            <Button size="small" @click="onSaveBlueprint?.()">{{ t("common.save") }}</Button>
           </Tooltip>
-          <Tooltip :title="canSyncBlueprint ? '同步蓝图' : '无可同步变更'">
+          <Tooltip :title="canSyncBlueprint ? t('panel.workspace.syncBlueprint') : t('panel.workspace.noSyncChanges')">
             <Button
               size="small"
               type="primary"
               :disabled="!canSyncBlueprint"
               @click="onSyncBlueprint?.()"
             >
-              同步
+              {{ t("common.sync") }}
             </Button>
           </Tooltip>
           <Select
@@ -228,7 +231,7 @@ watch(blueprintWrapRef, (el) => {
             class="min-w-[120px]"
             :value="blueprintDebug.lifecyclePhase"
             :options="blueprintDebug.lifecycleOptions"
-            placeholder="生命周期"
+            :placeholder="t('panel.workspace.lifecycle')"
             @change="(v) => v && blueprintDebug?.onLifecyclePhaseChange?.(String(v))"
           />
         </Space>
@@ -250,7 +253,7 @@ watch(blueprintWrapRef, (el) => {
           v-else
           class="flex h-full items-center justify-center text-[11px] text-muted-foreground"
         >
-          {{ blueprintOpen ? "画布加载中…" : "" }}
+          {{ blueprintOpen ? t("panel.workspace.canvasLoading") : "" }}
         </div>
       </div>
     </div>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed } from "vue";
 import { Input } from "ant-design-vue";
 
+const { t, locale } = useI18n();
 const props = defineProps<{
   label: string;
   value: string;
@@ -44,7 +46,7 @@ function onColorInput(e: Event) {
         class="h-7 w-10 shrink-0 cursor-pointer rounded border border-gray-200 p-0.5"
         :value="pickerValue"
         :disabled="disabled"
-        :aria-label="`${label}调色盘`"
+        :aria-label="t('common.colorPickerAria', { label })"
         @input="onColorInput"
       />
     </div>