修复画布多语言

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,