布局修改 部分bug修复

src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue

@@ -2,6 +2,8 @@
 import { ref, inject, computed, onMounted, onUnmounted } from "vue";
 import { findLayerRecursively, OperationType } from "../utils/layerHelper";
 import ToolButton from "../../ExistsImageList/ToolButton.vue";
+import { useI18n } from 'vue-i18n'
+
 
 const emit = defineEmits([
   "tool-selected",
@@ -15,7 +17,7 @@ const emit = defineEmits([
   "toggle-red-green-mode",
   "undo-redo-status-changed",
 ]);
-
+const {t} = useI18n()
 const props = defineProps({
   activeTool: String,
   minimapEnabled: {
@@ -62,63 +64,63 @@ const redoFun = () => commandManager.redo();
 const normalToolsList = ref([
   {
     id: "undo",
-    title: "Undo",
+    title: t("Canvas.undo"),
     action: undo,
     icon: { name: "CUndo", size: "20" },
     class: "undo-btn",
   },
   {
     id: "redo",
-    title: "Redo",
+    title: t("Canvas.Redo"),
     action: redo,
     icon: { name: "CRedo", size: "20" },
     class: "redo-btn",
   },
   {
     id: OperationType.DRAW,
-    title: "Drawing",
+    title: t("Canvas.Drawing"),
     action: () => selectTool(OperationType.DRAW),
     icon: { name: "CBrush", size: "24" },
     class: "draw-btn",
   },
   {
     id: OperationType.ERASER,
-    title: "Eraser",
+    title: t("Canvas.Eraser"),
     action: () => selectTool(OperationType.ERASER),
     icon: { name: "CEraser", size: "22" },
     class: "eraser-btn",
   },
   {
     id: "fillColor",
-    title: "Fill Color",
+    title: t("Canvas.FillColor"),
     action: () => fillColorRef.value.click(),
     icon: { name: "CThemeColor", size: "22" },
     class: "fill-color-btn",
   },
   {
     id: OperationType.PAN,
-    title: "Pan",
+    title: t("Canvas.Pan"),
     action: () => selectTool(OperationType.PAN),
     icon: { name: "CHand", size: "28" },
     class: "hand-btn",
   },
   {
     id: OperationType.SELECT,
-    title: "Select",
+    title: t("Canvas.Select"),
     action: () => selectTool(OperationType.SELECT),
     icon: { name: "CSelect", size: "28" },
     class: "select-btn",
   },
   {
     id: OperationType.LIQUIFY,
-    title: "Liquefying",
+    title: t("Canvas.Liquefying"),
     action: () => selectTool(OperationType.LIQUIFY),
     icon: { name: "CLiquefying", size: "32" },
     class: "liquify-btn",
   },
   {
     id: OperationType.LASSO,
-    title: "Lasso",
+    title: t("Canvas.Lasso"),
     action: () => selectTool(OperationType.LASSO),
     icon: { name: "CLasso", size: "28" },
     class: "lasso-btn",
@@ -131,28 +133,28 @@ const normalToolsList = ref([
   },
   {
     id: "zoomIn",
-    title: "Zoom In",
+    title: t("Canvas.ZoomIn"),
     action: zoomIn,
     icon: { name: "CZoomIn", size: "30" },
     class: "zoom-in-btn",
   },
   {
     id: "zoomOut",
-    title: "Zoom Out",
+    title: t("Canvas.ZoomOut"),
     action: zoomOut,
     icon: { name: "CZoomOut", size: "26" },
     class: "zoom-out-btn",
   },
   {
     id: "upload",
-    title: "Upload Image",
+    title: t("Canvas.Upload"),
     action: triggerImageUpload,
     icon: { name: "CUpload", size: "26" },
     class: "upload-btn",
   },
   {
     id: "addText",
-    title: "Add Text",
+    title: t("Canvas.AddText"),
     action: () => addText(),
     icon: { name: "CFont", size: "20" },
     class: "text-btn",
@@ -163,14 +165,14 @@ const normalToolsList = ref([
 const redGreenToolsList = ref([
   {
     id: "undo",
-    title: "Undo",
+    title: t("Canvas.undo"),
     action: undo,
     icon: { name: "CUndo", size: "20" },
     class: "undo-btn",
   },
   {
     id: "redo",
-    title: "Redo",
+    title: t("Canvas.Redo"),
     action: redo,
     icon: { name: "CRedo", size: "20" },
     class: "redo-btn",
@@ -193,21 +195,21 @@ const redGreenToolsList = ref([
   },
   {
     id: OperationType.ERASER,
-    title: "Eraser (E)",
+    title: t("Canvas.Eraser"),
     action: () => selectTool(OperationType.ERASER, true),
     icon: { name: "CEraser", size: "22" },
     class: "eraser-btn",
   },
   {
     id: "zoomIn",
-    title: "Zoom In",
+    title: t("Canvas.ZoomIn"),
     action: zoomIn,
     icon: { name: "CZoomIn", size: "30" },
     class: "zoom-in-btn",
   },
   {
     id: "zoomOut",
-    title: "Zoom Out",
+	title: t("Canvas.ZoomOut"),
     action: zoomOut,
     icon: { name: "CZoomOut", size: "26" },
     class: "zoom-out-btn",