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

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 {