布局修改 部分bug修复

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

@@ -5,7 +5,7 @@
         <!-- 笔刷类型选择 -->
         <div class="brush-section">
           <div class="section-header">
-            <span>笔刷类型</span>
+            <span>{{ $t('Canvas.BrushType') }}</span>
           </div>
           <div class="brush-type-grid">
             <div
@@ -314,14 +314,14 @@
         <!-- 阴影设置 -->
         <div class="brush-section">
           <div class="section-header">
-            <span>{{ $t("阴影设置") }}</span>
+            <span>{{ $t("Canvas.ShadowSettings") }}</span>
           </div>
 
           <div class="property-list">
             <!-- 阴影开关 -->
             <div class="property-item">
               <div class="checkbox-property">
-                <span>{{ $t("启用阴影") }}</span>
+				<span>{{ $t("Canvas.EnableShadows") }}</span>
                 <div class="toggle-switch">
                   <input
                     type="checkbox"
@@ -340,7 +340,7 @@
               <div class="property-item">
                 <div class="color-property">
                   <div class="color-header">
-                    <span>{{ $t("阴影颜色") }}</span>
+                    <span>{{ $t("Canvas.ShadowColor") }}</span>
                     <div
                       class="color-preview"
                       :style="{ backgroundColor: brushStore.state.shadowColor }"
@@ -361,7 +361,7 @@
               <div class="property-item">
                 <div class="slider-property">
                   <div class="slider-header">
-                    <span>{{ $t("阴影宽度") }}</span>
+                    <span>{{ $t("Canvas.ShadowWidth") }}</span>
                     <span class="slider-value">{{ brushStore.state.shadowWidth }}px</span>
                   </div>
                   <div class="slider-container">
@@ -396,7 +396,7 @@
               <div class="property-item">
                 <div class="slider-property">
                   <div class="slider-header">
-                    <span>{{ $t("阴影X偏移") }}</span>
+                    <span>{{ $t("Canvas.ShadowOffsetX") }}</span>
                     <span class="slider-value">{{ brushStore.state.shadowOffsetX }}px</span>
                   </div>
                   <div class="slider-container">
@@ -432,7 +432,7 @@
               <div class="property-item">
                 <div class="slider-property">
                   <div class="slider-header">
-                    <span>{{ $t("阴影Y偏移") }}</span>
+                    <span>{{ $t("Canvas.ShadowOffsetY") }}</span>
                     <span class="slider-value">{{ brushStore.state.shadowOffsetY }}px</span>
                   </div>
                   <div class="slider-container">
@@ -467,7 +467,7 @@
               <!-- 阴影预览 -->
               <div class="property-item">
                 <div class="shadow-preview-container">
-                  <div class="shadow-preview-title">{{ $t("阴影预览") }}</div>
+                  <div class="shadow-preview-title">{{ $t("Canvas.ShadowPreview") }}</div>
                   <div class="shadow-preview-box">
                     <div
                       class="shadow-preview-element"
@@ -489,7 +489,7 @@
         <!-- 笔刷预设 -->
         <div class="brush-section">
           <div class="section-header">
-            <span>笔刷预设</span>
+            <span>{{ $t('Canvas.BrushPreset') }}</span>
             <button class="save-preset-btn" @click="saveCurrentAsPreset" title="保存当前设置为预设">
               <i class="save-icon">+</i>
             </button>
@@ -904,7 +904,7 @@ const brushStore = BrushStore;
   /* overflow-y: auto; */
   min-width: 280px;
   border-left: 1px solid rgba(0, 0, 0, 0.05); /* 更柔和的边框 */
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   animation: panelFadeIn 0.3s ease;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
   backdrop-filter: blur(2px); /* 添加模糊效果 */
@@ -1066,7 +1066,7 @@ const brushStore = BrushStore;
   background-color: rgba(0, 0, 0, 0.05);
   padding: 3px 7px;
   border-radius: 4px;
-  font-family: "Consolas", monospace;
+  font-family: pingfang_medium, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 .slider-container {

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

@@ -272,7 +272,7 @@ onMounted(() => {
 <template>
   <div class="canvas-header">
     <div class="canvas-header-wrapper">
-      <span class="canvas-title">Canvas</span>
+      <span class="canvas-title">{{ $t('Canvas.Canvas') }}</span>
       <!-- 默认设置 -->
       <!-- v-if="
         !activeTool ||
@@ -283,7 +283,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.width") }}</span>
           <a-input-number
-            :value="canvasWidth"
+            :value="canvasWidth?.toFixed(2)"
             class="setting-input"
             :min="1"
             :max="9999"
@@ -299,7 +299,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.height") }}</span>
           <a-input-number
-            :value="canvasHeight"
+            :value="canvasHeight?.toFixed(2)"
             class="setting-input"
             :min="1"
             :max="9999"

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

@@ -33,7 +33,7 @@
         <!-- 参数调整区域 -->
         <div class="liquify-params">
           <div class="param-item">
-            <div class="param-label">尺寸</div>
+            <div class="param-label">{{ $t('liquifyPanel.size') }}</div>
             <div class="param-control">
               <input
                 type="range"
@@ -48,7 +48,7 @@
           </div>
 
           <div class="param-item">
-            <div class="param-label">压力</div>
+            <div class="param-label">{{ $t('liquifyPanel.pressure') }}</div>
             <div class="param-control">
               <input
                 type="range"
@@ -63,7 +63,7 @@
           </div>
 
           <div class="param-item" v-if="showDistortion">
-            <div class="param-label">失真</div>
+            <div class="param-label">{{ $t('liquifyPanel.distortion') }}</div>
             <div class="param-control">
               <input
                 type="range"
@@ -78,7 +78,7 @@
           </div>
 
           <div class="param-item">
-            <div class="param-label">动力</div>
+            <div class="param-label">{{ $t('liquifyPanel.power') }}</div>
             <div class="param-control">
               <input
                 type="range"
@@ -139,6 +139,9 @@ import { OperationType } from "../utils/layerHelper";
 import { LiquifyRealTimeUpdater } from "../managers/liquify/LiquifyRealTimeUpdater";
 import { LiquifyStateManager } from "../managers/liquify/LiquifyStateManager";
 import { Modal } from "ant-design-vue";
+import { useI18n } from "vue-i18n";
+const {t} = useI18n()
+
 
 // Props定义
 const props = defineProps({
@@ -227,9 +230,9 @@ const stateManager = ref(null);
 
 // 可用液化模式
 const availableModes = ref([
-  { id: "push", name: "推", iconText: "↔" },
-  { id: "clockwise", name: "顺时针转动", iconText: "↻" },
-  { id: "counterclockwise", name: "逆时针转动", iconText: "↺" },
+  { id: "push", name: t('liquifyPanel.push'), iconText: "↔" },
+  { id: "clockwise", name: t('liquifyPanel.clockwise'), iconText: "↻" },
+  { id: "counterclockwise", name: t('liquifyPanel.counterclockwise'), iconText: "↺" },
   // { id: "pinch", name: "捏合", iconText: "⤢" },
   // { id: "expand", name: "展开", iconText: "⤡" },
   // { id: "crystal", name: "水晶", iconText: "✧" },

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",