修复画布多语言

2025-09-24 16:26:40 +08:00
parent bdb3c50650
commit 016b25fcb9
12 changed files with 98 additions and 32 deletions
--- a/src/component/Canvas/CanvasEditor/commands/CutSelectionToNewLayerCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/CutSelectionToNewLayerCommand.js
@@ -10,6 +10,8 @@ import { fabric } from "fabric-with-all";
 import { generateId } from "../utils/helper.js";
 import { ClearSelectionCommand } from "./LassoCutoutCommand.js";
 import { ClearSelectionContentCommand } from "./ClearSelectionContentCommand.js";
+import i18n from "@/lang/index.ts";
+const { t } = i18n.global;

 /**
 * 剪切选区到新图层命令
@@ -36,7 +38,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
    this.baseResolutionScale = options.baseResolutionScale || 2; // 基础分辨率倍数

    this.groupId = options.groupId || generateId("lasso-copy-group-");
-    this.groupName = options.groupName || `选区组`;
+    this.groupName = options.groupName || t(`Canvas.ConstituencyGroup`);
    this.groupLayer = null; // 新增：保存组图层的引用
    this.originalLayersLength = 0; // 新增：保存原始图层数量

@@ -179,7 +181,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
      // 创建新的组图层
      this.groupLayer = createLayer({
        id: this.groupId,
-        name: this.groupName || `选区组`,
+        name: this.groupName || t(`Canvas.ConstituencyGroup`),
        type: LayerType.GROUP,
        visible: true,
        locked: false,
--- a/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.bak.js
+++ b/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.bak.js
@@ -11,6 +11,10 @@ import {
 } from "./LayerCommands.js";
 import { fabric } from "fabric-with-all";
 import { generateId } from "../utils/helper.js";
+import i18n from "@/lang/index.ts";
+const { t } = i18n.global;
+
+

 /**
 * 套索抠图命令
@@ -37,7 +41,7 @@ export class LassoCutoutCommand extends CompositeCommand {
    this.baseResolutionScale = options.baseResolutionScale || 2; // 基础分辨率倍数

    this.groupId = options.groupId || generateId("lasso-group-");
-    this.groupName = options.groupName || `选区组`;
+    this.groupName = options.groupName || t(`Canvas.ConstituencyGroup`);

    this.clippingMaskId = generateId("clipping-mask-");

@@ -238,7 +242,7 @@ export class LassoCutoutCommand extends CompositeCommand {
      // 创建新的组图层
      this.groupLayer = createLayer({
        id: this.groupId,
-        name: this.groupName || `选区组`,
+        name: this.groupName || t(`Canvas.ConstituencyGroup`),
        type: LayerType.GROUP,
        visible: true,
        locked: false,
--- a/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
@@ -13,6 +13,9 @@ import {
 import { fabric } from "fabric-with-all";
 import { generateId } from "../utils/helper.js";
 import { ToolCommand } from "./ToolCommands.js";
+import i18n from "@/lang/index.ts";
+const { t } = i18n.global;
+

 /**
 * 套索抠图命令
@@ -39,7 +42,7 @@ export class LassoCutoutCommand extends CompositeCommand {
    this.baseResolutionScale = options.baseResolutionScale || 2; // 基础分辨率倍数

    this.groupId = options.groupId || generateId("lasso-group-");
-    this.groupName = options.groupName || `选区组`;
+    this.groupName = options.groupName || t(`Canvas.ConstituencyGroup`);

    this.clippingMaskId = generateId("clipping-mask-");

@@ -229,7 +232,7 @@ export class LassoCutoutCommand extends CompositeCommand {
      // 创建新的组图层
      this.groupLayer = createLayer({
        id: this.groupId,
-        name: this.groupName || `选区组`,
+        name: this.groupName || t(`Canvas.ConstituencyGroup`),
        type: LayerType.GROUP,
        visible: true,
        locked: false,
@@ -244,7 +247,7 @@ export class LassoCutoutCommand extends CompositeCommand {
      // });

      const selectLayer = createLayer({
-        name: `选区空图层`,
+        name: t(`Canvas.ConstituencyEmptyLayer`),
        type: LayerType.EMPTY,
        visible: true,
        locked: false,
--- a/src/component/Canvas/CanvasEditor/commands/TextCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/TextCommands.js
@@ -1,6 +1,8 @@
 import { generateId, optimizeCanvasRendering } from "../utils/helper";
 import { createLayer, LayerType, OperationType } from "../utils/layerHelper";
 import { Command } from "./Command";
+import i18n from "@/lang/index.ts";
+const { t } = i18n.global;

 /**
 * 文本内容命令
@@ -329,7 +331,7 @@ export class CreateTextCommand extends Command {

    // 默认文本属性
    this.defaultOptions = {
-      text: "双击编辑文本",
+      text: t('Canvas.DoubleClickText'),
      fontFamily: "Arial",
      fontSize: 24,
      fontWeight: "normal",
--- a/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/BrushPanel.vue
@@ -190,7 +190,7 @@
                    </div>
                    <div class="uploaded-textures-section">
                      <div class="uploaded-textures-divider">
-                        <span>{{ $t("上传的纹理") }}</span>
+                        <span>{{ $t("Canvas.UploadedTexture") }}</span>
                      </div>
                    </div>
                    <div class="texture-grid">
@@ -201,7 +201,7 @@
                        <div class="upload-icon">
                          <span>+</span>
                        </div>
-                        <span class="texture-label">{{ $t("上传纹理") }}</span>
+                        <span class="texture-label">{{ $t("Canvas.UploadTexture") }}</span>
                      </div>
                      <div
                        v-for="textureId in brushStore.state.uploadedTextures"
@@ -219,7 +219,7 @@
                        <div
                          class="texture-remove-btn"
                          @click.stop="removeUploadedTexture(textureId)"
-                          :title="$t('删除纹理')"
+                          :title="$t('Canvas.DeleteTexture')"
                        >
                          <span>×</span>
                        </div>
@@ -535,6 +535,9 @@ import {
  TextureUploadCommand,
 } from "../commands/BrushCommands";
 import { debounce } from "lodash-es";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+

 // 从工具管理器获取可用笔刷类型
 const toolManager = inject("toolManager");
@@ -873,7 +876,7 @@ function applyPresetWithCommand(presetIndex) {
 // 保存当前设置为预设
 function saveCurrentAsPreset() {
  // 简单实现，可以后续优化为弹窗输入名称
-  const name = prompt("请输入预设名称:", `预设 ${BrushStore.state.presets.length + 1}`);
+  const name = prompt(t('Canvas.presetNamePrompt'), `${t('Canvas.preset')} ${BrushStore.state.presets.length + 1}`);
  if (name) {
    const presetIndex = BrushStore.saveCurrentAsPreset(name);
    // 应用新创建的预设（可选）
--- a/src/component/Canvas/CanvasEditor/components/KeyboardShortcutHelp.vue
+++ b/src/component/Canvas/CanvasEditor/components/KeyboardShortcutHelp.vue
@@ -136,7 +136,7 @@ function convertShortcuts(managerShortcuts) {
      action: actionDisplay,
      windows: shortcut.key.replace(/cmdOrCtrl\+/g, "Ctrl+"),
      mac: shortcut.key.replace(/cmdOrCtrl\+/g, "⌘+"),
-      touch: shortcut.touch || "触控界面点击对应工具",
+      touch: shortcut.touch || t('Canvas.touchTools'),
      displayKey: shortcut.displayKey,
    });
  }
@@ -326,8 +326,8 @@ function getShortcutsByCategory(category) {
        <span v-else-if="platform.isIPad">iPad</span>
        <span v-else-if="platform.isIOS">iOS</span>
        <span v-else-if="platform.isAndroid">Android</span>
-        <span v-else>其他</span>
-        <span v-if="platform.isTouchDevice"> (触控设备)</span>
+        <span v-else>{{ $t('Canvas.other') }}</span>
+        <span v-if="platform.isTouchDevice"> ({{ $t('Canvas.touchDevice') }})</span>
      </div>

      <div class="shortcuts-category">
@@ -421,14 +421,14 @@ function getShortcutsByCategory(category) {
      </div> -->

      <div class="touch-tips" v-if="platform.isTouchDevice">
-        <h3>触控设备提示</h3>
+        <h3>{{ $t('Canvas.touchDevicePrompts') }}</h3>
        <ul>
-          <li>长按图层面板可访问更多选项</li>
-          <li>双击元素可快速进入编辑模式</li>
-          <li>双指拖动可平移画布</li>
-          <li>双指捏合可缩放画布</li>
-          <li>双指连按可显示元素变换控制点</li>
-          <li>三指左右滑动可进行撤销/重做操作</li>
+          <li>{{ $t('Canvas.touchDevicePrompts_1') }}</li>
+          <li>{{ $t('Canvas.touchDevicePrompts_2') }}</li>
+          <li>{{ $t('Canvas.touchDevicePrompts_3') }}</li>
+          <li>{{ $t('Canvas.touchDevicePrompts_4') }}</li>
+          <li>{{ $t('Canvas.touchDevicePrompts_5') }}</li>
+          <li>{{ $t('Canvas.touchDevicePrompts_6') }}</li>
        </ul>
      </div>
    </Skeleton>
--- a/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
@@ -444,16 +444,16 @@ function showPanel(event) {
    if (detail.layerStatus && detail.layerStatus.message) {
      console.log("液化操作提示:", detail.layerStatus.message);
      Modal.error({
-        title: "错误提示",
+        title: t('Canvas.ErrorMessage'),
        content: detail.layerStatus.message,
-        okText: "确定",
+        okText: t('Canvas.confirm'),
        centered: true,
      });
    } else {
      Modal.error({
-        title: "错误提示",
-        content: "未选择有效图像或图层不适合液化操作",
-        okText: "确定",
+        title: t('Canvas.ErrorMessage'),
+        content: t('Canvas.LiquidationError'),
+        okText: t('Canvas.confirm'),
        centered: true,
      });
      console.log("未选择有效图像或图层不适合液化操作");
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -580,7 +580,7 @@ async function addLayer() {
  await layerManager.createLayer(t("Canvas.EmptyLayer"));
 }
 async function addTopLayer() {
-  await layerManager.createLayer("空图层", LayerType.EMPTY, {
+  await layerManager.createLayer(t("Canvas.EmptyLayer"), LayerType.EMPTY, {
    insertTop: true,
  });
 }
--- a/src/component/Canvas/CanvasEditor/managers/brushes/types/TextureBrush.js
+++ b/src/component/Canvas/CanvasEditor/managers/brushes/types/TextureBrush.js
@@ -1,6 +1,8 @@
 import { BaseBrush } from "../BaseBrush";
 import { fabric } from "fabric-with-all";
 import texturePresetManager from "../TexturePresetManager";
+import i18n from "@/lang/index.ts";
+const {t} = i18n.global;

 /**
 * 纹理笔刷
@@ -468,12 +470,12 @@ export class TextureBrush extends BaseBrush {
    const textureProperties = [
      {
        id: "textureSelector",
-        name: "材质选择",
+        name: t('Canvas.TextureSelector'),
        type: "texture-grid",
        defaultValue: this.selectedTextureId,
        options: textureOptions,
-        description: "选择要使用的纹理",
-        category: "纹理设置",
+        description: t('Canvas.selectTexture'),
+        category: t('Canvas.TextureSettings'),
        order: 100,
        hidden: allTextures.length === 0,
      },
--- a/src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js
@@ -5,6 +5,8 @@
 import { LiquifyWebGLManager } from "./LiquifyWebGLManager";
 import { LiquifyCPUManager } from "./LiquifyCPUManager";
 import { findLayerRecursively, LayerType } from "../../utils/layerHelper";
+import i18n from "@/lang/index.ts";
+const {t} = i18n.global;

 export class EnhancedLiquifyManager {
  /**
@@ -599,7 +601,7 @@ export class EnhancedLiquifyManager {
    if (objectsToCheck.length === 0) {
      return {
        valid: false,
-        message: "图层为空，无法进行液化操作",
+        message: t('Canvas.layerEmptyNoLiquidation'),
        needsRasterization: false,
        isImage: false,
        isEmpty: true,
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1056,6 +1056,8 @@ export default {
    showHiddenLayer: "显示/隐藏图层",
    preview: "预览",
    EmptyLayer: "空图层",
+	ConstituencyGroup: "选区组",
+	ConstituencyEmptyLayer: "选区空图层",
    Scale: "缩放",
    ResetLayer: "重置视图",
    Help: "查看快捷键和触控操作",
@@ -1063,6 +1065,16 @@ export default {
    height: "高度",
    color: "颜色",
    KeyboardShortcutsOperationGuide: "键盘快捷键 & 操作指南",
+    other: "其他",
+    touchDevice: "触控设备",
+    touchTools: "触控界面点击对应工具",
+	touchDevicePrompts: "触控设备提示",
+	touchDevicePrompts_1: "长按图层面板可访问更多选项。",
+	touchDevicePrompts_2: "双击元素可快速进入编辑模式。",
+	touchDevicePrompts_3: "双指拖动可平移画布。",
+	touchDevicePrompts_4: "双指捏合可缩放画布。",
+	touchDevicePrompts_5: "双指连按可显示元素变换控制点。",
+	touchDevicePrompts_6: "三指左右滑动可进行撤销/重做操作。",
    TheDetectedPlatform: "检测到的平台",
    BasicOperations: "基础操作",
    Operation: "操作",
@@ -1306,6 +1318,18 @@ export default {
 	liquefactionEnvironmentLoading:'正在准备液化环境，请稍候...',
 	LiqueficationFailed:'液化工具启动失败',
 	DoubleClickText:'双击编辑文本',
+	LiquidationcuoError:'未选择有效图像或图层不适合液化操作',
+	ErrorMessage: '错误提示',
+	preset: '预设',
+	presetNamePrompt: '请输入预设名称:',
+	UploadedTexture: '上传的纹理',
+	UploadTexture: '上传纹理',
+	selectTexture:'选择要使用的纹理',
+	DeleteTexture:'删除纹理',
+	TextureSettings: '纹理设置',
+	TextureSelector: '纹理选择',
+	
+	
  },
  speedList:{
 	High:'高级',
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1056,6 +1056,8 @@ export default {
    showHiddenLayer: "Show/Hidden Layer",
    preview: "Preview",
    EmptyLayer: "Empty layer",
+	ConstituencyGroup: "Constituency group",
+	ConstituencyEmptyLayer: "Constituency Empty Layer",
    Scale: "Scale",
    ResetLayer: "Reset Layer",
    Help: "View the shortcut keys and touch operations",
@@ -1063,6 +1065,16 @@ export default {
    height: "Height",
    color: "Color",
    KeyboardShortcutsOperationGuide: "Keyboard shortcuts & Operation guide",
+    other: "Other",
+    touchDevice: "Touch Device",
+    touchTools: "Touch interface corresponding tools",
+	touchDevicePrompts: "Touch device prompts",
+	touchDevicePrompts_1: "Long-press the Layers panel to access more options.",
+	touchDevicePrompts_2: "Double-click an element to quickly enter edit mode.",
+	touchDevicePrompts_3: "Two-finger drag to pan the canvas.",
+	touchDevicePrompts_4: "Pinch to zoom.",
+	touchDevicePrompts_5: "Two-finger tap to display the element's transform handles.",
+	touchDevicePrompts_6: "Three-finger swipe left or right to undo/redo.",
    TheDetectedPlatform: "Guide Detected Platform",
    BasicOperations: "Basic Operations",
    Operation: "Operation",
@@ -1306,6 +1318,18 @@ export default {
 	liquefactionEnvironmentLoading:'The liquefaction environment is being prepared. Please wait a moment...',
 	LiqueficationFailed:'Liquefication tool failed to start.',
 	DoubleClickText:'Double-click to edit the text',
+	LiquidationError:'No valid image selected or the layer does not fit the liquefaction operation.',
+	ErrorMessage: 'Error Message',
+	preset: 'Preset',
+	presetNamePrompt: 'Please enter the preset name:',
+	UploadedTexture: 'Uploaded Texture',
+	UploadTexture: 'Upload Texture',
+	selectTexture: 'Select the texture you want to use',
+	DeleteTexture:'Delete Texture',
+	TextureSettings: 'Texture Settings',
+	TextureSelector: 'Texture Selector',
+
+
  },
  speedList:{
 	High:'High',