feat: 修改选区面板样式多语言完善

2025-07-20 19:31:43 +08:00
parent c44aadc9e3
commit 666cbc8470
5 changed files with 2438 additions and 2165 deletions
--- a/src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
@@ -10,24 +10,33 @@

        <div class="tool-types">
          <div
-            :class="['tool-btn', { active: selectionType === OperationType.LASSO }]"
+            :class="[
+              'tool-btn',
+              { active: selectionType === OperationType.LASSO },
+            ]"
            @click="setSelectionType(OperationType.LASSO)"
          >
-            <svg-icon name="CFree" size="26" />
+            <svg-icon name="CFree" size="20" />
            <span>{{ $t("手绘") }}</span>
          </div>
          <div
-            :class="['tool-btn', { active: selectionType === OperationType.LASSO_RECTANGLE }]"
+            :class="[
+              'tool-btn',
+              { active: selectionType === OperationType.LASSO_RECTANGLE },
+            ]"
            @click="setSelectionType(OperationType.LASSO_RECTANGLE)"
          >
-            <svg-icon name="CRectangle" size="32" />
+            <svg-icon name="CRectangle" size="26" />
            <span>{{ $t("矩形") }}</span>
          </div>
          <div
-            :class="['tool-btn', { active: selectionType === OperationType.LASSO_ELLIPSE }]"
+            :class="[
+              'tool-btn',
+              { active: selectionType === OperationType.LASSO_ELLIPSE },
+            ]"
            @click="setSelectionType(OperationType.LASSO_ELLIPSE)"
          >
-            <svg-icon name="CEllipse" size="30" />
+            <svg-icon name="CEllipse" size="24" />
            <span>{{ $t("椭圆") }}</span>
          </div>
        </div>
@@ -38,15 +47,15 @@
        <!-- 底部选区操作工具栏 -->
        <div class="tool-actions">
          <div class="action-btn" @click="copySelectionToNewLayer">
-            <svg-icon name="CPaste" size="20" />
+            <svg-icon name="CPaste" size="16" />
            <span class="btn-text">{{ $t("创建") }}</span>
          </div>
          <div class="action-btn" @click="cutSelectionToNewLayer">
-            <svg-icon name="CCut" size="30" />
+            <svg-icon name="CCut" size="26" />
            <span class="btn-text">{{ $t("创建并拷贝") }}</span>
          </div>
          <div class="action-btn" @click="clearSelectionContent">
-            <svg-icon name="CClear" size="22" />
+            <svg-icon name="CClear" size="18" />
            <span class="btn-text">{{ $t("清除选择内容") }}</span>
          </div>
          <!-- <button
@@ -150,7 +159,9 @@
        <div class="dialog-container">
          <div class="dialog-header">
            <h3>{{ $t("选择填充颜色") }}</h3>
-            <button class="close-dialog-btn" @click="cancelColorPicker">×</button>
+            <button class="close-dialog-btn" @click="cancelColorPicker">
+              ×
+            </button>
          </div>
          <div class="dialog-content">
            <input type="color" v-model="fillColor" class="color-picker" />
@@ -311,7 +322,8 @@ function setSelectionType(type) {
 */
 function checkSelectionStatus() {
  hasSelection.value =
-    props.selectionManager && props.selectionManager.getSelectionObject() !== null;
+    props.selectionManager &&
+    props.selectionManager.getSelectionObject() !== null;

  // 同步羽化值
  if (hasSelection.value) {
@@ -610,15 +622,15 @@ function confirmColorPicker() {
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 6px;
-  padding: 10px 5px;
+  padding: 6px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
 }

 .tool-btn span {
-  margin-top: 6px;
-  font-size: 14px;
+  margin-top: 0;
+  font-size: 12px;
 }

 .tool-btn svg {
@@ -638,7 +650,7 @@ function confirmColorPicker() {
 .toolbar-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
-  margin: 0 10px 10px;
+  margin: 0 10px 5px 10px;
 }

 .tool-actions {
@@ -674,13 +686,19 @@ function confirmColorPicker() {

 .action-btn {
  display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  flex-direction: row;
  align-items: center;
+  justify-content: center;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
-  padding: 8px 2px;
+  padding: 0;
+  gap: 4px;
+  .c-svg {
+    width: auto;
+  }
 }

 .action-btn svg {
@@ -690,7 +708,8 @@ function confirmColorPicker() {
 }

 .btn-text {
-  font-size: 14px;
+  display: block;
+  font-size: 12px;
  text-align: center;
 }

@@ -825,9 +844,7 @@ function confirmColorPicker() {

 .fade-enter-active,
 .fade-leave-active {
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 .fade-enter-from,
 .fade-leave-to {
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -34,12 +34,16 @@ import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面
 import { LayerType, OperationType } from "./utils/layerHelper.js";
 import { ToolManager } from "./managers/toolManager.js";
 // import { fabric } from "fabric-with-all";
-import { uploadImageAndCreateLayer, loadImageUrlToLayer, loadImage } from "./utils/imageHelper.js";
+import {
+  uploadImageAndCreateLayer,
+  loadImageUrlToLayer,
+  loadImage,
+} from "./utils/imageHelper.js";
 // import MinimapPanel from "./components/MinimapPanel.vue";
-import { useI18n } from 'vue-i18n'
-const {t} = useI18n()
-const KeyboardShortcutHelp = defineAsyncComponent(
-  () => import("./components/KeyboardShortcutHelp.vue")
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const KeyboardShortcutHelp = defineAsyncComponent(() =>
+  import("./components/KeyboardShortcutHelp.vue")
 );

 const emit = defineEmits([
@@ -230,6 +234,7 @@ onMounted(async () => {
    activeLayerId,
    canvasManager, // 添加对 canvasManager 的引用
    commandManager, // 添加对命令管理器的引用
+    t, // 国际化函数
  });

  // commandManager.setLayerManager(layerManager); // 设置命令管理器需要访问的图层数据
@@ -321,7 +326,11 @@ onMounted(async () => {
    await layerManager.initializeLayers();
  }

-  if (props.enabledRedGreenMode && props.clothingImageUrl && props.redGreenImageUrl) {
+  if (
+    props.enabledRedGreenMode &&
+    props.clothingImageUrl &&
+    props.redGreenImageUrl
+  ) {
    canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色    // 初始化红绿图模式管理器
    redGreenModeManager = new RedGreenModeManager({
      canvas: canvasManager.canvas,
@@ -368,7 +377,10 @@ onMounted(async () => {
      console.error("更换底图失败:", error);
    }

-    canvasManager?.centerBackgroundLayer?.(canvasManager.canvas.width, canvasManager.canvas.height);
+    canvasManager?.centerBackgroundLayer?.(
+      canvasManager.canvas.width,
+      canvasManager.canvas.height
+    );
  }

  // // 设置固定图层是否可擦除
@@ -516,7 +528,7 @@ function updateCanvasColor() {
 }

 async function addLayer() {
-  await layerManager.createLayer(t('Canvas.EmptyLayer'));
+  await layerManager.createLayer(t("Canvas.EmptyLayer"));
 }
 async function addTopLayer() {
  await layerManager.createLayer("空图层", LayerType.EMPTY, {
@@ -555,7 +567,9 @@ function moveLayerDown(layerId) {
 function removeLayer(layerId) {
  // Check if this is the last layer - prevent deletion
  if (layers.value.length <= 2) {
-    console.warn("Cannot delete the last layer. At least one layer must remain.");
+    console.warn(
+      "Cannot delete the last layer. At least one layer must remain."
+    );
    return;
  }

@@ -661,7 +675,9 @@ function handleLayersReorder(reorderData) {
    const success = layerManager.reorderLayers(oldIndex, newIndex, layerId);

    if (success) {
-      console.log(`图层 ${layerId} 已从位置 ${oldIndex} 移动到位置 ${newIndex}`);
+      console.log(
+        `图层 ${layerId} 已从位置 ${oldIndex} 移动到位置 ${newIndex}`
+      );

      // 更新画布渲染顺序
      if (canvasManager) {
@@ -678,7 +694,12 @@ function handleChildLayersReorder(reorderData) {
  const { parentId, oldIndex, newIndex, layerId } = reorderData;

  if (layerManager && layerManager.reorderChildLayers) {
-    const success = layerManager.reorderChildLayers(parentId, oldIndex, newIndex, layerId);
+    const success = layerManager.reorderChildLayers(
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId
+    );

    if (success) {
      console.log(
@@ -838,7 +859,8 @@ defineExpose({
   * @returns {Object} 优化结果统计
   */
  optimizeLayerStructure() {
-    if (!layerManager) return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 };
+    if (!layerManager)
+      return { removedEmptyLayers: 0, mergedLayers: 0, reorderedLayers: 0 };
    return layerManager.optimizeLayerStructure();
  },

@@ -951,7 +973,10 @@ defineExpose({
        <!-- <MinimapPanel v-if="minimapEnabled" :minimapManager="minimapManager" /> -->

        <!-- 笔刷控制面板 -->
-        <BrushControlPanel v-if="canvasManagerLoaded" :activeTool="activeTool" />
+        <BrushControlPanel
+          v-if="canvasManagerLoaded"
+          :activeTool="activeTool"
+        />

        <!-- 文本编辑面板 -->
        <TextEditorPanel
@@ -982,9 +1007,15 @@ defineExpose({
        />

        <div class="zoom-info">
-          {{ t('Canvas.Scale') }}: {{ currentZoom }}%
-          <button class="reset-zoom" @click="resetZoom">{{ $t('Canvas.ResetLayer') }}</button>
-          <button class="help-btn" @click="toggleShortcutHelp" :title="$t('Canvas.Help')">
+          {{ t("Canvas.Scale") }}: {{ currentZoom }}%
+          <button class="reset-zoom" @click="resetZoom">
+            {{ $t("Canvas.ResetLayer") }}
+          </button>
+          <button
+            class="help-btn"
+            @click="toggleShortcutHelp"
+            :title="$t('Canvas.Help')"
+          >
            ?
          </button>
        </div>
@@ -1024,7 +1055,11 @@ defineExpose({
    </div> -->

    <!-- 快捷键帮助模态框 -->
-    <div v-if="showShortcutHelp" class="modal-overlay" @click="showShortcutHelp = false">
+    <div
+      v-if="showShortcutHelp"
+      class="modal-overlay"
+      @click="showShortcutHelp = false"
+    >
      <div class="modal-content" @click.stop>
        <button class="close-modal" @click="showShortcutHelp = false">×</button>
        <KeyboardShortcutHelp />
@@ -1101,20 +1136,30 @@ defineExpose({
  --offsetY: 0px;
  --size: 8px;
  --color: #dedcdc;
-  background-image:
-    -webkit-linear-gradient(
+  background-image: -webkit-linear-gradient(
      45deg,
      var(--color) 25%,
      transparent 0,
      transparent 75%,
      var(--color) 0
    ),
-    -webkit-linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
-  background-image:
-    linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0),
-    linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
-  background-position:
-    var(--offsetX) var(--offsetY),
+    -webkit-linear-gradient(45deg, var(--color) 25%, transparent 0, transparent
+          75%, var(--color) 0);
+  background-image: linear-gradient(
+      45deg,
+      var(--color) 25%,
+      transparent 0,
+      transparent 75%,
+      var(--color) 0
+    ),
+    linear-gradient(
+      45deg,
+      var(--color) 25%,
+      transparent 0,
+      transparent 75%,
+      var(--color) 0
+    );
+  background-position: var(--offsetX) var(--offsetY),
    calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
  background-size: calc(var(--size) * 2) calc(var(--size) * 2);
 }
@@ -1334,9 +1379,7 @@ button:hover {
 // 淡入淡出动画
 .fade-enter-active,
 .fade-leave-active {
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 .fade-enter-from,
 .fade-leave-to {
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -52,18 +52,27 @@ import {
 } from "../commands/RasterizeLayerCommand";

 // 导入图层排序相关类和混入
-import { LayerSort, createLayerSort, LayerSortMixin, LayerSortUtils } from "../utils/LayerSort";
+import {
+  LayerSort,
+  createLayerSort,
+  LayerSortMixin,
+  LayerSortUtils,
+} from "../utils/LayerSort";

 import CanvasConfig from "../config/canvasConfig";
 import { isBoolean, template } from "lodash-es";
-import { findObjectById, generateId, optimizeCanvasRendering } from "../utils/helper";
+import {
+  findObjectById,
+  generateId,
+  optimizeCanvasRendering,
+} from "../utils/helper";
 import { message } from "ant-design-vue";
 import { fabric } from "fabric-with-all";
 import { getOriginObjectInfo } from "../utils/layerUtils";
 import { restoreFabricObject } from "../utils/objectHelper";
 import { UpdateGroupMaskPositionCommand } from "../commands/UpdateGroupMaskPositionCommand";
-import { useI18n } from 'vue-i18n'
-const {t} = useI18n()
+// import { useI18n } from 'vue-i18n'
+// const {t} = useI18n()
 /**
 * 图层管理器 - 负责管理画布上的所有图层
 * 包含图层的创建、删除、修改、排序等操作
@@ -83,6 +92,7 @@ export class LayerManager {
   * @param {Number} options.canvasWidth 画布宽度
   * @param {Number} options.canvasHeight 画布高度
   * @param {String} options.backgroundColor 背景颜色
+   * @param {Function} options.t  国际化函数
   */
  constructor(options) {
    this.canvas = options.canvas;
@@ -91,6 +101,7 @@ export class LayerManager {
    this.commandManager = options.commandManager;
    this.canvasManager = options.canvasManager || null;
    this.lastSelectLayerId = options.lastSelectLayerId || { value: null }; // 上次选中的图层ID
+    this.t = options.t || ((key) => key); // 国际化函数，默认为直接返回key

    this.backgroundFillManager = new BackgroundFillManager({
      canvas: this.canvas,
@@ -221,7 +232,11 @@ export class LayerManager {
    // 基于 fabric-with-erasing 库的 erasable 属性设置擦除权限
    // 只有活动图层、可见、非锁定、非背景、非固定图层的对象才可擦除
    obj.erasable =
-      isInActiveLayer && layer.visible && !layer.locked && !layer.isBackground && !layer.isFixed;
+      isInActiveLayer &&
+      layer.visible &&
+      !layer.locked &&
+      !layer.isBackground &&
+      !layer.isFixed;

    // 图层状态决定交互性
    if (layer.isBackground || obj.isBackground || layer.isFixed) {
@@ -268,7 +283,11 @@ export class LayerManager {

      if (this.isRedGreenMode) {
        // 红绿图模式下 所有普通图层都可擦除
-        obj.erasable = layer.visible && !layer.locked && !layer.isBackground && !layer.isFixed;
+        obj.erasable =
+          layer.visible &&
+          !layer.locked &&
+          !layer.isBackground &&
+          !layer.isFixed;
      }

      // 平移模式下，禁用多选和擦除
@@ -319,7 +338,9 @@ export class LayerManager {

      // 设置子图层对象的交互性
      layer?.childLayer?.forEach(async (childLayer) => {
-        const childObj = this.canvas.getObjects().find((o) => o.layerId === childLayer.id);
+        const childObj = this.canvas
+          .getObjects()
+          .find((o) => o.layerId === childLayer.id);
        if (childObj) {
          await this._setObjectInteractivity(childObj, childLayer, editorMode);
        }
@@ -331,7 +352,10 @@ export class LayerManager {
      let clippingMaskFabricObject = null;
      if (layer.clippingMask) {
        // 反序列化 clippingMask
-        clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
+        clippingMaskFabricObject = await restoreFabricObject(
+          layer.clippingMask,
+          this.canvas
+        );
        clippingMaskFabricObject.clipPath = null;

        clippingMaskFabricObject.set({
@@ -351,7 +375,9 @@ export class LayerManager {
        //   }
        // }
        layer.children.forEach((childLayer) => {
-          const childObj = this.canvas.getObjects().find((o) => o.layerId === childLayer.id);
+          const childObj = this.canvas
+            .getObjects()
+            .find((o) => o.layerId === childLayer.id);
          if (childObj) {
            childObj.clipPath = clippingMaskFabricObject;
            childObj.dirty = true; // 标记为脏对象
@@ -369,7 +395,9 @@ export class LayerManager {
        });
      } else {
        layer.fabricObjects?.forEach((obj) => {
-          const fabricObject = this.canvas.getObjects().find((o) => o.id === obj.id);
+          const fabricObject = this.canvas
+            .getObjects()
+            .find((o) => o.id === obj.id);
          if (fabricObject) {
            fabricObject.clipPath = clippingMaskFabricObject;
            fabricObject.dirty = true; // 标记为脏对象
@@ -397,7 +425,11 @@ export class LayerManager {
   */
  async fillLayerBackground(layerId, fillColor, undoable = true) {
    layerId = this.activeLayerId.value || layerId;
-    await this.backgroundFillManager.fillLayerBackground(layerId, fillColor, undoable);
+    await this.backgroundFillManager.fillLayerBackground(
+      layerId,
+      fillColor,
+      undoable
+    );
  }

  /**
@@ -470,7 +502,9 @@ export class LayerManager {
   */
  createBackgroundLayer(name = "背景") {
    // 检查是否已有背景图层
-    const hasBackgroundLayer = this.layers.value.some((layer) => layer.isBackground);
+    const hasBackgroundLayer = this.layers.value.some(
+      (layer) => layer.isBackground
+    );

    if (hasBackgroundLayer) {
      console.warn("已存在背景层，不再创建新的背景层");
@@ -523,7 +557,9 @@ export class LayerManager {
    }

    // 生成唯一ID
-    const layerId = `fixed_layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    const layerId = `fixed_layer_${Date.now()}_${Math.floor(
+      Math.random() * 1000
+    )}`;

    // 创建固定图层
    const fixedLayer = createFixedLayer({
@@ -574,19 +610,21 @@ export class LayerManager {
    // 如果没有任何图层，创建背景层、固定图层和一个空白图层
    if (this.layers.value.length === 0) {
      // 创建背景图层
-      this.createBackgroundLayer();
+      this.createBackgroundLayer(this.t("Canvas.Background"));

      // 创建固定图层，位于背景图层之上
-      this.createFixedLayer();
+      this.createFixedLayer(this.t("Canvas.FixedLayer"));

      // 创建一个空白图层（默认位于背景图层和固定图层之上）
-      await this.createLayer(t('Canvas.Layer1'));
+      await this.createLayer(this.t("Canvas.Layer1"));
    } else {
      // 检查是否已有背景层
-      const hasBackgroundLayer = this.layers.value.some((layer) => layer.isBackground);
+      const hasBackgroundLayer = this.layers.value.some(
+        (layer) => layer.isBackground
+      );

      if (!hasBackgroundLayer) {
-        this.createBackgroundLayer();
+        this.createBackgroundLayer(this.t("Canvas.Background"));
      }

      // 检查是否已有固定图层
@@ -602,7 +640,7 @@ export class LayerManager {
      );

      if (!hasNormalLayer) {
-        await this.createLayer(t('Canvas.Layer1'));
+        await this.createLayer(this.t("Canvas.Layer1"));
      }
    }

@@ -629,7 +667,10 @@ export class LayerManager {
    }

    // 验证目标图层是否存在
-    const { layer: targetLayer } = findLayerRecursively(this.layers.value, targetLayerId);
+    const { layer: targetLayer } = findLayerRecursively(
+      this.layers.value,
+      targetLayerId
+    );
    if (!targetLayer) {
      console.error(`目标图层 ${targetLayerId} 不存在`);
      return null;
@@ -683,7 +724,8 @@ export class LayerManager {
   */
  removeObjectFromLayer(objectOrId) {
    // 获取对象ID
-    const objectId = typeof objectOrId === "string" ? objectOrId : objectOrId.id;
+    const objectId =
+      typeof objectOrId === "string" ? objectOrId : objectOrId.id;

    if (!objectId) {
      console.error("无效的对象ID");
@@ -743,7 +785,9 @@ export class LayerManager {
   */
  getActiveLayer() {
    if (!this.activeLayerId.value) {
-      console.warn("没有活动图层ID，无法获取活动图层   ====  默认设置第一个图层为活动图层");
+      console.warn(
+        "没有活动图层ID，无法获取活动图层   ====  默认设置第一个图层为活动图层"
+      );
      this.activeLayerId.value = this.layers.value[0]?.id || null;
    }

@@ -848,8 +892,13 @@ export class LayerManager {
    }

    const tempFabricObject =
-      fabricObject?.toObject?.(["id", "layerId", "layerName", "isBackgroud", "isFixed"]) ||
-      fabricObject;
+      fabricObject?.toObject?.([
+        "id",
+        "layerId",
+        "layerName",
+        "isBackgroud",
+        "isFixed",
+      ]) || fabricObject;
    if (layer.isFixed || layer.isBackground) {
      layer.fabricObject = tempFabricObject;
    } else {
@@ -875,7 +924,9 @@ export class LayerManager {

    // 如果是背景层或固定层，不允许移动
    if (layer && (layer.isBackground || layer.isFixed)) {
-      console.warn(layer.isBackground ? $t("背景层不可移动") : $t("固定层不可移动"));
+      console.warn(
+        layer.isBackground ? this.t("背景层不可移动") : this.t("固定层不可移动")
+      );
      return false;
    }

@@ -1300,7 +1351,11 @@ export class LayerManager {
  async ungroupLayers(groupId) {
    // 查找组图层
    const groupLayer = this.layers.value.find((l) => l.id === groupId);
-    if (!groupLayer || !groupLayer.children || groupLayer.children.length === 0) {
+    if (
+      !groupLayer ||
+      !groupLayer.children ||
+      groupLayer.children.length === 0
+    ) {
      console.error(`${groupId} 不是有效的组图层或不包含子图层`);
      return null;
    }
@@ -1357,7 +1412,9 @@ export class LayerManager {
   */
  resizeCanvasWithScale(width, height, options = {}) {
    // 检查是否有除背景层外的其他元素
-    const hasOtherElements = this.canvas.getObjects().some((obj) => !obj.isBackground);
+    const hasOtherElements = this.canvas
+      .getObjects()
+      .some((obj) => !obj.isBackground);

    if (hasOtherElements) {
      // 有其他元素时使用带缩放的命令
@@ -1426,7 +1483,9 @@ export class LayerManager {
    if (!this.canvas) return;

    // 获取画布上的所有对象
-    const canvasObjects = [...this.canvas.getObjects(["id", "layerId", "layerName"])];
+    const canvasObjects = [
+      ...this.canvas.getObjects(["id", "layerId", "layerName"]),
+    ];

    // 清空画布
    this.canvas.clear();
@@ -1441,13 +1500,19 @@ export class LayerManager {

      if (layer.isBackground && layer.fabricObject) {
        // 背景图层
-        const originalObj = canvasObjects.find((o) => o.id === layer.fabricObject.id);
+        const originalObj = canvasObjects.find(
+          (o) => o.id === layer.fabricObject.id
+        );
        if (originalObj) {
          this.canvas.add(originalObj);
        } else {
          this.canvas.add(layer.fabricObject);
        }
-      } else if (layer.isFixed && layer.fabricObjects && layer.fabricObjects.length > 0) {
+      } else if (
+        layer.isFixed &&
+        layer.fabricObjects &&
+        layer.fabricObjects.length > 0
+      ) {
        // 固定图层
        layer.fabricObjects.forEach((obj) => {
          const originalObj = canvasObjects.find((o) => o.id === obj.id);
@@ -1457,7 +1522,10 @@ export class LayerManager {
            this.canvas.add(obj);
          }
        });
-      } else if (Array.isArray(layer.fabricObjects) && layer.fabricObjects.length > 0) {
+      } else if (
+        Array.isArray(layer.fabricObjects) &&
+        layer.fabricObjects.length > 0
+      ) {
        // 普通图层，添加所有fabricObjects
        layer.fabricObjects.forEach((obj) => {
          const originalObj = canvasObjects.find((o) => o.id === obj.id);
@@ -1486,7 +1554,9 @@ export class LayerManager {
      if (layer.isBackground) {
        // 背景图层处理
        if (layer.fabricObject) {
-          const existsOnCanvas = canvasObjects.some((obj) => obj.id === layer.fabricObject.id);
+          const existsOnCanvas = canvasObjects.some(
+            (obj) => obj.id === layer.fabricObject.id
+          );
          if (!existsOnCanvas) {
            this.canvas.add(layer.fabricObject);
          }
@@ -1621,7 +1691,8 @@ export class LayerManager {
      layerCopy.children = layer.children.map((child) => {
        const childCopy = JSON.parse(JSON.stringify(child));
        if (child.fabricObjects && child.fabricObjects.length > 0) {
-          childCopy.serializedObjects = this.getCurrLayerSerializedObjects(child);
+          childCopy.serializedObjects =
+            this.getCurrLayerSerializedObjects(child);
        }
        return childCopy;
      });
@@ -1667,7 +1738,9 @@ export class LayerManager {
    if (layer.fabricObjects && layer.fabricObjects.length > 0) {
      layerCopy.serializedObjects = layer.fabricObjects
        .map((obj) =>
-          typeof obj.toObject === "function" ? obj.toObject(["id", "layerId", "layerName"]) : null
+          typeof obj.toObject === "function"
+            ? obj.toObject(["id", "layerId", "layerName"])
+            : null
        )
        .filter(Boolean);
    }
@@ -1800,7 +1873,8 @@ export class LayerManager {
    // 查找第一个非背景、非锁定的图层，排除指定的图层
    return (
      this.layers.value.find(
-        (layer) => layer.id !== excludeLayerId && !layer.isBackground && !layer.locked
+        (layer) =>
+          layer.id !== excludeLayerId && !layer.isBackground && !layer.locked
      ) || null
    );
  }
@@ -1935,7 +2009,9 @@ export class LayerManager {
   * @param {string} backgroundColor 背景颜色
   */
  updateBackgroundColor(backgroundColor, options = {}) {
-    const backgroundLayer = this.layers.value.find((layer) => layer.isBackground);
+    const backgroundLayer = this.layers.value.find(
+      (layer) => layer.isBackground
+    );

    if (!backgroundLayer) {
      console.warn("没有找到背景图层");
@@ -2135,7 +2211,8 @@ export class LayerManager {
    if (!this.canvas || !textObject) return null;

    // 确保对象有ID
-    textObject.id = textObject.id || `text_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    textObject.id =
+      textObject.id || `text_${Date.now()}_${Math.floor(Math.random() * 1000)}`;

    // 创建文本图层
    const layerName = options.name || "文本图层";
@@ -2152,7 +2229,9 @@ export class LayerManager {
        overline: options.overline || textObject.overline || false,
        fill: options.fill || textObject.fill || "#000000",
        textBackgroundColor:
-          options.textBackgroundColor || textObject.textBackgroundColor || "transparent",
+          options.textBackgroundColor ||
+          textObject.textBackgroundColor ||
+          "transparent",
        lineHeight: options.lineHeight || textObject.lineHeight || 1.16,
        charSpacing: options.charSpacing || textObject.charSpacing || 0,
      },
@@ -2163,7 +2242,9 @@ export class LayerManager {
    textObject.layerName = layerName;

    // 添加到画布，如果还未添加
-    const isOnCanvas = this.canvas.getObjects().some((obj) => obj.id === textObject.id);
+    const isOnCanvas = this.canvas
+      .getObjects()
+      .some((obj) => obj.id === textObject.id);
    if (!isOnCanvas) {
      this.canvas.add(textObject);
    }
@@ -2172,7 +2253,9 @@ export class LayerManager {
    const layer = this.getLayerById(layerId);
    if (layer) {
      layer.fabricObjects = layer.fabricObjects || [];
-      layer.fabricObjects.push(textObject.toObject(["id", "layerId", "layerName"]));
+      layer.fabricObjects.push(
+        textObject.toObject(["id", "layerId", "layerName"])
+      );
    }

    // 设置此图层为活动图层
@@ -2205,7 +2288,9 @@ export class LayerManager {

      // 检查普通图层
      if (layer.fabricObjects && Array.isArray(layer.fabricObjects)) {
-        const foundObject = layer.fabricObjects.find((obj) => obj.id === fabricObject.id);
+        const foundObject = layer.fabricObjects.find(
+          (obj) => obj.id === fabricObject.id
+        );
        if (foundObject) {
          return layer;
        }
@@ -2286,7 +2371,12 @@ export class LayerManager {
   * @returns {boolean} 是否排序成功
   */
  reorderChildLayers(parentId, oldIndex, newIndex, layerId) {
-    return this.layerSort?.reorderChildLayers(parentId, oldIndex, newIndex, layerId);
+    return this.layerSort?.reorderChildLayers(
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId
+    );
  }

  /**
@@ -2467,13 +2557,19 @@ export class LayerManager {
    const layersCount = this.layers?.value?.length || 0;

    const shouldUseAsync =
-      async !== null ? async : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);
+      async !== null
+        ? async
+        : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);

    if (shouldUseAsync) {
-      console.log(`使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`);
+      console.log(
+        `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
+      );
      return this.layerSort.rearrangeObjectsAsync();
    } else {
-      console.log(`使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`);
+      console.log(
+        `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
+      );
      this.layerSort.rearrangeObjects();
    }
  }
@@ -2582,7 +2678,10 @@ export class LayerManager {
  moveLayerToIndex({ parentId, oldIndex, newIndex, layerId }) {
    if (!this.layerSort) {
      console.warn("图层排序工具未初始化，使用基础移动方法");
-      return this.moveLayer(layerId, newIndex > this.getLayerIndex(layerId) ? "down" : "up");
+      return this.moveLayer(
+        layerId,
+        newIndex > this.getLayerIndex(layerId) ? "down" : "up"
+      );
    }

    const result = this.layerSort.moveLayerToIndex({
@@ -2593,7 +2692,9 @@ export class LayerManager {
    });

    if (result) {
-      console.log(`图层 ${layerId}   - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`);
+      console.log(
+        `图层 ${layerId}   - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`
+      );
      // 更新对象交互性
      // this.updateLayersObjectsInteractivity();
    }
@@ -2637,7 +2738,9 @@ export class LayerManager {
      return -1;
    }

-    let layerIndex = this.layers.value.findIndex((layer) => layer.id === layerId);
+    let layerIndex = this.layers.value.findIndex(
+      (layer) => layer.id === layerId
+    );
    if (layerIndex >= 0) return layerIndex;
    // 如果未找到，尝试在子图层中查找
    const { parent } = findLayerRecursively(this.layers.value, layerId);
@@ -2668,7 +2771,9 @@ export class LayerManager {
    const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId);

    if (result) {
-      console.log(`高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`);
+      console.log(
+        `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`
+      );
      // 更新对象交互性
      this.updateLayersObjectsInteractivity();
    }
@@ -2685,7 +2790,12 @@ export class LayerManager {
   * @returns {boolean} 是否排序成功
   */
  advancedReorderChildLayers(parentId, oldIndex, newIndex, layerId) {
-    const result = this.reorderChildLayers(parentId, oldIndex, newIndex, layerId);
+    const result = this.reorderChildLayers(
+      parentId,
+      oldIndex,
+      newIndex,
+      layerId
+    );

    if (result) {
      console.log(
@@ -2802,8 +2912,12 @@ export class LayerManager {
  async mergeGroupLayers(groupId) {
    // 查找组图层
    const groupLayer = this.layers.value.find((l) => l.id === groupId);
-    if (!groupLayer || !groupLayer.children || groupLayer.children.length === 0) {
-      console.warn($t("找不到有效的组图层或组图层为空"));
+    if (
+      !groupLayer ||
+      !groupLayer.children ||
+      groupLayer.children.length === 0
+    ) {
+      console.warn(this.t("找不到有效的组图层或组图层为空"));
      return [];
    }

@@ -2837,22 +2951,25 @@ export class LayerManager {
    const targetLayerId = layerId || this.activeLayerId.value;

    if (!targetLayerId) {
-      console.warn($t("没有指定要栅格化的图层"));
+      console.warn(this.t("没有指定要栅格化的图层"));
      return false;
    }

    // 查找目标图层
    // const targetLayer = this.getLayerById(targetLayerId);
-    const { layer: targetLayer } = findLayerRecursively(this.layers.value, targetLayerId);
+    const { layer: targetLayer } = findLayerRecursively(
+      this.layers.value,
+      targetLayerId
+    );

    if (!targetLayer) {
-      console.error($t("图层不存在", { layerId: targetLayerId }));
+      console.error(this.t("图层不存在", { layerId: targetLayerId }));
      return false;
    }

    // 不允许栅格化背景图层和固定图层
    if (targetLayer.isBackground || targetLayer.isFixed) {
-      console.warn($t("背景图层和固定图层不能栅格化"));
+      console.warn(this.t("背景图层和固定图层不能栅格化"));
      return false;
    }

@@ -2898,7 +3015,9 @@ export class LayerManager {
    // 检查图层是否有内容可以栅格化
    if (layer.type === "group" || layer.children.length > 0) {
      // 组图层：检查是否有子图层且子图层有内容
-      return layer.children.some((child) => child.fabricObjects && child.fabricObjects.length > 0);
+      return layer.children.some(
+        (child) => child.fabricObjects && child.fabricObjects.length > 0
+      );
    } else {
      // 普通图层：检查是否有对象
      return layer.fabricObjects && layer.fabricObjects.length > 0;
@@ -2913,16 +3032,19 @@ export class LayerManager {
    const targetLayerId = layerId || this.activeLayerId.value;

    if (!targetLayerId) {
-      console.warn($t("没有指定要栅格化的图层"));
+      console.warn(this.t("没有指定要栅格化的图层"));
      return false;
    }

    // 查找目标图层
    // const targetLayer = this.getLayerById(targetLayerId);
-    const { layer: targetLayer } = findLayerRecursively(this.layers.value, targetLayerId);
+    const { layer: targetLayer } = findLayerRecursively(
+      this.layers.value,
+      targetLayerId
+    );

    if (!targetLayer) {
-      console.error($t("图层不存在", { layerId: targetLayerId }));
+      console.error(this.t("图层不存在", { layerId: targetLayerId }));
      return false;
    }

--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
--- a/src/lang/en.ts
+++ b/src/lang/en.ts