@arronqzy/vue-view 0.1.0 → 0.1.2

package/src/panel/components/MaterialSidebar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
 import { Card, Empty, Input, Switch, Tabs } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
-import { PANEL_MESSAGES } from "../constants/messages";
+import { getPanelMessages } from "../constants/messages";
 import {
   concreteGridParentIdForLayer,
   logicalGridParentIdFromConcrete,
@@ -10,13 +11,16 @@ import {
 import MaterialPreview from "./MaterialPreview.vue";
 import MaterialSidebarTreeNode from "./MaterialSidebarTreeNode.vue";
 import {
-  defaultCategories,
+  getDefaultCategories,
   getNodeDisplayName,
   themedScrollbarClass,
   type MaterialCategoryId,
   type MaterialItem,
 } from "./materialSidebarData";
 
+const { t, locale } = useI18n();
+const msgs = () => getPanelMessages(t);
+
 export type MaterialSidebarProps = {
   class?: string;
   onDragMaterialStart?: (material: MaterialItem) => void;
@@ -50,20 +54,20 @@ const draggingTreeNodeId = ref<string | null>(null);
 const dragOverLayerId = ref<string | null>(null);
 const expandedKeys = ref<Record<string, boolean>>({ root: true });
 
-const categories = defaultCategories;
+const categories = computed(() => { void locale.value; return getDefaultCategories(t); });
 const normalizedKeyword = computed(() => keyword.value.trim().toLowerCase());
 const isSearching = computed(() => normalizedKeyword.value.length > 0);
 const normalizedTreeKeyword = computed(() => treeKeyword.value.trim().toLowerCase());
 const isTreeSearching = computed(() => normalizedTreeKeyword.value.length > 0);
 
 const activeCategory = computed(
-  () => categories.find((c) => c.id === activeCategoryId.value) ?? categories[0]
+  () => categories.value.find((c) => c.id === activeCategoryId.value) ?? categories.value[0]
 );
 
 const matchedItems = computed(() => {
   if (!isSearching.value) return [];
   const result: Array<MaterialItem & { categoryTitle: string }> = [];
-  categories.forEach((category) => {
+  categories.value.forEach((category) => {
     category.items.forEach((item) => {
       const haystack = `${item.title} ${item.id} ${category.title}`.toLowerCase();
       if (haystack.includes(normalizedKeyword.value)) {
@@ -168,7 +172,7 @@ function hasRefInSubtree(node: PanelElement, visited: Set<string>): boolean {
 
 function nodeMatchesTreeSearch(node: PanelElement, visited: Set<string>): boolean {
   if (!isTreeSearching.value) return true;
-  const selfText = `${getNodeDisplayName(node)} ${node.materialType ?? ""} ${node.id}`.toLowerCase();
+  const selfText = `${getNodeDisplayName(node, t)} ${node.materialType ?? ""} ${node.id}`.toLowerCase();
   if (selfText.includes(normalizedTreeKeyword.value)) return true;
   if (visited.has(node.id)) return false;
   const nextVisited = new Set(visited);
@@ -206,13 +210,13 @@ function getLayerDropState(layer: PanelLayer) {
   const dropBlockReason = !draggingNode
     ? ""
     : draggingNode.locked
-      ? PANEL_MESSAGES.nodeMoveLocked
+      ? msgs().nodeMoveLocked
       : draggingSourceLayer?.locked
-        ? PANEL_MESSAGES.nodeMoveSourceLayerLocked
+        ? msgs().nodeMoveSourceLayerLocked
         : layer.locked
-          ? PANEL_MESSAGES.nodeMoveTargetLayerLocked
+          ? msgs().nodeMoveTargetLayerLocked
           : draggingNode.layerId === layer.id
-            ? PANEL_MESSAGES.nodeMoveSameLayer
+            ? msgs().nodeMoveSameLayer
             : "";
   const canDropIntoLayer = Boolean(draggingNode) && !dropBlockReason;
   return { draggingNode, dropBlockReason, canDropIntoLayer };
@@ -278,13 +282,13 @@ const treeSearchEmpty = computed(
       <Input
         v-model:value="keyword"
         size="small"
-        placeholder="搜索物料（名称 / 分类）"
+        :placeholder="t('panel.material.searchPlaceholder')"
         class="text-xs"
       />
     </div>
 
     <Tabs v-model:active-key="leftTab" class="flex min-h-0 h-full flex-col">
-      <Tabs.TabPane key="materials" tab="物料" class="min-h-0 flex-1">
+      <Tabs.TabPane key="materials" :tab="t('panel.material.tabMaterials')" class="min-h-0 flex-1">
         <div class="grid h-full min-h-0 grid-cols-[110px_1fr]">
           <div :class="`overflow-auto border-r border-border ${themedScrollbarClass}`">
             <button
@@ -305,7 +309,7 @@ const treeSearchEmpty = computed(
 
           <div :class="`overflow-auto ${themedScrollbarClass}`">
             <div class="px-2.5 py-2.5 text-xs font-semibold">
-              {{ isSearching ? `搜索结果（${matchedItems.length}）` : activeCategory.title }}
+              {{ isSearching ? t("panel.material.searchResults", { count: matchedItems.length }) : activeCategory.title }}
             </div>
             <div class="grid gap-2 px-2.5 pb-3">
               <button
@@ -332,12 +336,12 @@ const treeSearchEmpty = computed(
               <Empty
                 v-if="isSearching && matchedItems.length === 0"
                 class="py-5"
-                description="未匹配到物料"
+                :description="t('panel.material.emptyMaterialsTitle')"
               >
                 <template #description>
-                  <span class="text-xs">未匹配到物料</span>
+                  <span class="text-xs">{{ t("panel.material.emptyMaterialsTitle") }}</span>
                   <div class="text-[11px] text-muted-foreground">
-                    尝试更换关键词，或切换分类后再搜索。
+                    {{ t("panel.material.emptyMaterialsDesc") }}
                   </div>
                 </template>
               </Empty>
@@ -346,19 +350,19 @@ const treeSearchEmpty = computed(
         </div>
       </Tabs.TabPane>
 
-      <Tabs.TabPane key="tree" tab="节点树" class="min-h-0 flex-1">
+      <Tabs.TabPane key="tree" :tab="t('panel.material.tabTree')" class="min-h-0 flex-1">
         <div :class="`h-full overflow-auto px-2 py-2 text-xs ${themedScrollbarClass}`">
           <div class="mb-2">
             <Input
               v-model:value="treeKeyword"
               size="small"
-              placeholder="搜索节点（名称 / 类型 / ID）"
+              :placeholder="t('panel.material.treeSearchPlaceholder')"
               class="text-xs"
             />
           </div>
           <div class="mb-2 flex items-center justify-between rounded border border-border bg-card px-2 py-1.5">
-            <span class="text-[11px] text-muted-foreground">仅看引用子树</span>
-            <Switch v-model:checked="referenceOnlyTree" size="small" aria-label="仅看引用子树" />
+            <span class="text-[11px] text-muted-foreground">{{ t("panel.material.referenceOnlyTree") }}</span>
+            <Switch v-model:checked="referenceOnlyTree" size="small" :aria-label="t('panel.material.referenceOnlyTree')" />
           </div>
 
           <div class="rounded border border-border bg-card">
@@ -402,7 +406,7 @@ const treeSearchEmpty = computed(
                         ]"
                         :title="
                           getLayerDropState(layer).canDropIntoLayer
-                            ? '目标图层'
+                            ? t('panel.material.targetLayer')
                             : getLayerDropState(layer).dropBlockReason
                         "
                       >
@@ -429,7 +433,7 @@ const treeSearchEmpty = computed(
                         v-if="layer.isMapping"
                         class="shrink-0 rounded-md border-2 border-violet-600 bg-violet-500/22 px-1.5 py-0.5 text-[10px] font-semibold text-violet-950 dark:border-violet-400 dark:bg-violet-500/35 dark:text-violet-50"
                       >
-                        映射图层
+                        {{ t("panel.material.mappingLayer") }}
                       </span>
                       <span
                         v-if="dragOverLayerId === layer.id"
@@ -442,7 +446,7 @@ const treeSearchEmpty = computed(
                       >
                         {{
                           getLayerDropState(layer).canDropIntoLayer
-                            ? "将移动到该图层"
+                            ? t("panel.material.willMoveToLayer")
                             : getLayerDropState(layer).dropBlockReason
                         }}
                       </span>
@@ -457,7 +461,7 @@ const treeSearchEmpty = computed(
                             : 'border-destructive/50 bg-destructive/10 text-destructive'
                           : 'border-border/50 bg-muted/20 text-muted-foreground hover:border-border hover:bg-muted/35',
                       ]"
-                      title="拖拽节点到此图层"
+                      :title="t('panel.material.dragToThisLayer')"
                       @dragover="onLayerDragOver($event, layer)"
                       @dragleave="dragOverLayerId === layer.id && (dragOverLayerId = null)"
                       @drop="onLayerDrop($event, layer)"
@@ -465,9 +469,9 @@ const treeSearchEmpty = computed(
                       {{
                         draggingTreeNodeId
                           ? getLayerDropState(layer).canDropIntoLayer
-                            ? "释放以移动到该图层"
-                            : getLayerDropState(layer).dropBlockReason || "不可移动到该图层"
-                          : "拖拽节点到该图层"
+                            ? t("panel.material.releaseToMove")
+                            : getLayerDropState(layer).dropBlockReason || t("panel.material.cannotMoveToLayer")
+                          : t("panel.material.dragToLayer")
                       }}
                     </div>
 
@@ -476,7 +480,7 @@ const treeSearchEmpty = computed(
                         v-if="getRootNodes(layer.id).length === 0"
                         class="rounded border border-border/40 bg-muted/15 py-2 pl-3 text-[11px] text-muted-foreground"
                       >
-                        空图层
+                        {{ t("panel.material.emptyLayer") }}
                       </div>
                       <MaterialSidebarTreeNode
                         v-for="node in getRootNodes(layer.id)"
@@ -509,11 +513,11 @@ const treeSearchEmpty = computed(
                 </div>
               </template>
 
-              <Empty v-if="treeSearchEmpty" class="mx-2 my-2 py-5" description="未匹配到节点">
+              <Empty v-if="treeSearchEmpty" class="mx-2 my-2 py-5" :description="t('panel.material.emptyNodesTitle')">
                 <template #description>
-                  <span class="text-xs">未匹配到节点</span>
+                  <span class="text-xs">{{ t("panel.material.emptyNodesTitle") }}</span>
                   <div class="text-[11px] text-muted-foreground">
-                    试试节点名称、类型或 ID 关键词。
+                    {{ t("panel.material.emptyNodesDesc") }}
                   </div>
                 </template>
               </Empty>

package/src/panel/components/MaterialSidebarTreeNode.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed } from "vue";
 import { Card, Tooltip } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
@@ -7,6 +8,8 @@ import {
   getNodeDisplayName,
 } from "./materialSidebarData";
 
+const { t, locale } = useI18n();
+
 const props = defineProps<{
   node: PanelElement;
   level: number;
@@ -148,7 +151,7 @@ function onDragStart(e: DragEvent) {
         @dragstart="onDragStart"
         @dragend="emit('dragEnd')"
       >
-        {{ getNodeDisplayName(node) }}
+        {{ getNodeDisplayName(node, t) }}
       </button>
 
       <span
@@ -156,30 +159,28 @@ function onDragStart(e: DragEvent) {
         class="inline-flex shrink-0 items-center rounded-md border-2 border-violet-600 bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-violet-950 shadow-sm dark:border-violet-400 dark:bg-violet-500/35 dark:text-violet-50"
         :title="
           nodeHomeLayer.mappingBaseLayerId
-            ? `映射图层「${nodeHomeLayer.name}」· 基准图层：${
-                layerById.get(nodeHomeLayer.mappingBaseLayerId)?.name ??
-                nodeHomeLayer.mappingBaseLayerId
-              }`
-            : `映射图层「${nodeHomeLayer.name}」`
+            ? t('panel.material.mappingLayerWithBase', {
+                name: nodeHomeLayer.name,
+                base:
+                  layerById.get(nodeHomeLayer.mappingBaseLayerId)?.name ??
+                  nodeHomeLayer.mappingBaseLayerId,
+              })
+            : t('panel.material.mappingLayerTitle', { name: nodeHomeLayer.name })
         "
       >
-        映射图层节点
+        {{ t("panel.material.mappingLayerNode") }}
       </span>
       <span
         v-if="node.mappingSourceNodeId"
         class="inline-flex shrink-0 items-center rounded border border-primary/40 bg-primary/10 px-1 text-[10px] text-primary"
-        :title="`同源节点 ${node.mappingSourceNodeId}${
-          node.mappingSourceLayerId
-            ? ` · ${layerById.get(node.mappingSourceLayerId)?.name ?? node.mappingSourceLayerId}`
-            : ''
-        }`"
+        :title="t('panel.material.sameSourceTitle', { id: node.mappingSourceNodeId })"
       >
-        同源
+        {{ t("panel.material.sameSource") }}
       </span>
       <span
         v-if="node.locked"
         class="inline-flex h-5 w-5 items-center justify-center rounded border border-border/80 bg-background/80 text-muted-foreground"
-        title="节点已锁定"
+        :title="t('panel.config.nodeLockedTitle')"
       >
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" class="h-3.5 w-3.5">
           <rect x="4.5" y="10.5" width="15" height="10" rx="2.5" />
@@ -196,15 +197,15 @@ function onDragStart(e: DragEvent) {
               ? 'border-violet-500/50 bg-violet-500/15 text-violet-300'
               : 'border-sky-500/40 bg-sky-500/10 text-sky-300',
           ]"
-          :title="isDeepRef ? '深拷贝引用（冻结快照）' : '浅拷贝引用（跟随源变化）'"
+          :title="isDeepRef ? t('panel.material.deepCopyTitle') : t('panel.material.shallowCopyTitle')"
         >
-          {{ isDeepRef ? "深拷贝" : "浅拷贝" }}
+          {{ isDeepRef ? t("panel.material.deepCopy") : t("panel.material.shallowCopy") }}
         </span>
-        <Tooltip title="浅拷贝">
+        <Tooltip :title="t('panel.material.shallowCopy')">
           <button
             type="button"
             class="inline-flex h-5 w-5 items-center justify-center rounded border border-border hover:bg-accent"
-            aria-label="浅拷贝"
+            :aria-label="t('panel.material.shallowCopy')"
             @click.stop="emit('copyNode', node.id, 'shallow')"
           >
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" class="h-3.5 w-3.5">
@@ -214,11 +215,11 @@ function onDragStart(e: DragEvent) {
             </svg>
           </button>
         </Tooltip>
-        <Tooltip title="深拷贝">
+        <Tooltip :title="t('panel.material.deepCopy')">
           <button
             type="button"
             class="inline-flex h-5 w-5 items-center justify-center rounded border border-border hover:bg-accent"
-            aria-label="深拷贝"
+            :aria-label="t('panel.material.deepCopy')"
             @click.stop="emit('copyNode', node.id, 'deep')"
           >
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" class="h-3.5 w-3.5">
@@ -229,11 +230,11 @@ function onDragStart(e: DragEvent) {
           </button>
         </Tooltip>
       </template>
-      <Tooltip v-else title="复制节点">
+      <Tooltip v-else :title="t('panel.material.duplicateNode')">
         <button
           type="button"
           class="inline-flex h-5 w-5 items-center justify-center rounded border border-border hover:bg-accent"
-          aria-label="复制节点"
+          :aria-label="t('panel.material.duplicateNode')"
           @click.stop="emit('copyNode', node.id)"
         >
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" class="h-3.5 w-3.5">
@@ -242,12 +243,12 @@ function onDragStart(e: DragEvent) {
           </svg>
         </button>
       </Tooltip>
-      <Tooltip :title="node.locked ? '锁定节点不可删除' : '删除节点'">
+      <Tooltip :title="node.locked ? t('panel.material.lockedNodeCannotDelete') : t('panel.material.deleteNode')">
         <button
           type="button"
           :disabled="node.locked"
           class="inline-flex h-5 w-5 items-center justify-center rounded border border-border hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"
-          :aria-label="node.locked ? '锁定节点不可删除' : '删除节点'"
+          :aria-label="node.locked ? t('panel.material.lockedNodeCannotDelete') : t('panel.material.deleteNode')"
           @click.stop="!node.locked && emit('deleteNode', node.id)"
         >
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" class="h-3.5 w-3.5">
@@ -266,9 +267,9 @@ function onDragStart(e: DragEvent) {
           v-if="nextVisited.has(child.id)"
           class="py-1 text-[10px] text-muted-foreground/80"
           :style="{ paddingLeft: `${6 + (level + 1) * 14}px` }"
-          title="检测到循环引用，已停止向下展开"
+          :title="t('panel.material.circularRefStopped')"
         >
-          {{ getNodeDisplayName(child) }}（循环引用）
+          {{ getNodeDisplayName(child, t) }}{{ t("panel.material.circularRefSuffix") }}
         </div>
         <MaterialSidebarTreeNode
           v-else

package/src/panel/components/MoveableLayer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import {
   computed,
   onMounted,
@@ -12,6 +13,8 @@ import type { PanelElement } from "../types";
 import { uniformViewportZoom } from "../viewportZoom";
 import { notifyPreviewLayoutChanged } from "../utils/panelStateIO";
 
+const { t, locale } = useI18n();
+
 const props = defineProps<{
   zoomX: number;
   zoomY: number;
@@ -814,7 +817,7 @@ const showPartialLockBadge = computed(
     <div
       class="pointer-events-none absolute z-[80] inline-flex select-none items-center gap-1 rounded border border-border bg-background/95 px-1.5 py-0.5 text-[11px] text-foreground shadow-sm"
       :style="{ left: `${lockBadgeScreen!.x + 6}px`, top: `${lockBadgeScreen!.y - 22}px` }"
-      title="节点已锁定"
+      :title="t('panel.config.nodeLockedTitle')"
     >
       <svg
         viewBox="0 0 24 24"
@@ -830,14 +833,14 @@ const showPartialLockBadge = computed(
         <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
         <circle cx="12" cy="15.5" r="1.2" />
       </svg>
-      <span>已锁定</span>
+      <span>{{ t("panel.config.nodeLockedBadge") }}</span>
     </div>
   </Teleport>
   <Teleport v-else-if="pointerRoot && showPartialLockBadge" :to="pointerRoot">
     <div
       class="pointer-events-none absolute z-[80] inline-flex select-none items-center gap-1 rounded border border-border bg-background/95 px-1.5 py-0.5 text-[11px] text-foreground shadow-sm"
       :style="{ left: `${lockBadgeScreen!.x + 6}px`, top: `${lockBadgeScreen!.y - 22}px` }"
-      title="部分节点已锁定，已自动排除"
+      :title="t('panel.config.lockedExcludedTitle')"
     >
       <svg
         viewBox="0 0 24 24"
@@ -853,7 +856,7 @@ const showPartialLockBadge = computed(
         <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
         <circle cx="12" cy="15.5" r="1.2" />
       </svg>
-      <span>锁定节点已排除</span>
+      <span>{{ t("panel.config.lockedExcludedBadge") }}</span>
     </div>
   </Teleport>
 </template>