From c44aadc9e3aa1a583387126b9790954351751db7 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Sun, 20 Jul 2025 18:19:34 +0800
Subject: [PATCH] =?UTF-8?q?canvas=E8=AF=AD=E8=A8=80=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CanvasEditor/components/HeaderMenu.vue    |  6 +-
 .../components/KeyboardShortcutHelp.vue       | 70 ++++++++++---------
 .../components/LayersPanel/LayerItem.vue      | 11 +--
 .../components/LayersPanel/LayersPanel.vue    | 18 ++---
 src/component/Canvas/CanvasEditor/index.vue   | 10 +--
 .../CanvasEditor/managers/LayerManager.js     |  7 +-
 .../home/design/editDesignType/index.vue      |  7 +-
 src/component/home/design/index.vue           |  1 +
 src/component/modules/generalMiniCanvas.vue   | 33 ++++++++-
 src/lang/cn.ts                                | 49 +++++++++++++
 src/lang/en.ts                                | 49 +++++++++++++
 src/views/HomeMain.vue                        | 10 ++-
 12 files changed, 207 insertions(+), 64 deletions(-)

diff --git a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
index b1e35b81..41d5f7c1 100644
--- a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
+++ b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
@@ -281,7 +281,7 @@ onMounted(() => {
       " -->
       <div class="canvas-settings" v-if="!props.enabledRedGreenMode">
         <div class="setting-group">
-          <span class="setting-label">{{ $t("宽度") }}</span>
+          <span class="setting-label">{{ $t("Canvas.width") }}</span>
           <a-input-number
             :value="canvasWidth"
             class="setting-input"
@@ -297,7 +297,7 @@ onMounted(() => {
           />
         </div>
         <div class="setting-group">
-          <span class="setting-label">{{ $t("高度") }}</span>
+          <span class="setting-label">{{ $t("Canvas.height") }}</span>
           <a-input-number
             :value="canvasHeight"
             class="setting-input"
@@ -313,7 +313,7 @@ onMounted(() => {
           />
         </div>
         <div class="setting-group">
-          <span class="setting-label">{{ $t("颜色") }}</span>
+          <span class="setting-label">{{ $t("Canvas.color") }}</span>
           <div class="color-picker-wrapper">
             <input
               type="color"
diff --git a/src/component/Canvas/CanvasEditor/components/KeyboardShortcutHelp.vue b/src/component/Canvas/CanvasEditor/components/KeyboardShortcutHelp.vue
index 9f0d5eac..a6b4d93c 100644
--- a/src/component/Canvas/CanvasEditor/components/KeyboardShortcutHelp.vue
+++ b/src/component/Canvas/CanvasEditor/components/KeyboardShortcutHelp.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { ref, inject, onMounted } from "vue";
 import { Skeleton } from "ant-design-vue";
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
 
 const loading = ref(true);
 const shortcuts = ref([]);
@@ -44,17 +46,17 @@ function convertShortcuts(managerShortcuts) {
 
   // 基本的Action到显示名称的映射
   const actionDisplayMap = {
-    undo: "撤销",
-    redo: "重做",
-    delete: "删除选中元素",
+    undo: t('Canvas.Undo'),
+    redo: t('Canvas.Redo'),
+    delete: t('Canvas.DeleteSelectedElement'),
     selectAll: "全选",
-    copy: "复制",
-    paste: "粘贴",
-    cut: "剪切",
+    copy: t('Canvas.Copy'),
+    paste: t('Canvas.Pase'),
+    cut: t('Canvas.Cut'),
     save: "保存",
     selectTool: "选择工具",
-    increaseBrushSize: "增加笔触大小",
-    decreaseBrushSize: "减小笔触大小",
+    increaseBrushSize: t('Canvas.DecreaseBrush'),
+    decreaseBrushSize: t('Canvas.IncreaseBrush'),
     toggleTempTool: "临时切换工具",
     // newLayer: "新建图层",
     // groupLayers: "组合图层",
@@ -64,15 +66,15 @@ function convertShortcuts(managerShortcuts) {
 
   // 工具ID到显示名称的映射
   const toolDisplayMap = {
-    select: "选择模式",
-    draw: "绘画模式",
-    eraser: "橡皮擦模式",
-    // eyedropper: "吸色工具",
-    pan: "移动画布",
-    lasso: "套索工具",
-    // area_custom: "自由选区工具",
-    // wave: "波浪工具",
-    liquify: "液化工具",
+    select: t('Canvas.SelectionMode'),
+    draw: t('Canvas.PaintingMode'),
+    eraser: t('Canvas.EraserMode'),
+    // eyedropper: t('Canvas.Cut'),
+    pan: '移动画布',
+    lasso: t('Canvas.LassoTool'),
+    // area_custom: t('Canvas.Cut'),
+    // wave: t('Canvas.Cut'),
+    liquify: t('Canvas.LiquifyTool'),
   };
 
   // 处理每个快捷键
@@ -95,9 +97,9 @@ function convertShortcuts(managerShortcuts) {
 
   // 添加一些组件特定的快捷键
   result.push({
-    action: "缩放画布",
-    windows: "鼠标滚轮",
-    mac: "鼠标滚轮 或 触控板缩放手势",
+    action: t('Canvas.ZoomCanvas'),
+    windows: t('Canvas.MouseWheel'),
+    mac: t('Canvas.MacZoomCanvas'),
     touch: "双指捏合",
   });
 
@@ -268,11 +270,11 @@ function getShortcutsByCategory(category) {
 
 <template>
   <div class="keyboard-shortcut-help">
-    <h2>键盘快捷键 & 操作指南</h2>
+    <h2>{{ $t('Canvas.KeyboardShortcutsOperationGuide') }}</h2>
 
     <Skeleton active :loading="loading">
       <div class="platform-info">
-        检测到的平台:
+        {{$t('Canvas.TheDetectedPlatform')}}:
         <span v-if="platform.isMac">MacOS</span>
         <span v-else-if="platform.isWindows">Windows</span>
         <span v-else-if="platform.isIPad">iPad</span>
@@ -283,12 +285,12 @@ function getShortcutsByCategory(category) {
       </div>
 
       <div class="shortcuts-category">
-        <h3>基本操作</h3>
+        <h3> {{$t('Canvas.BasicOperations')}}</h3>
         <table class="shortcuts-table">
           <thead>
             <tr>
-              <th>操作</th>
-              <th>快捷键/手势</th>
+              <th>{{$t('Canvas.BasicOperations')}}</th>
+              <th>{{$t('Canvas.ShortcutGesture')}}</th>
             </tr>
           </thead>
           <tbody>
@@ -301,12 +303,12 @@ function getShortcutsByCategory(category) {
       </div>
 
       <div class="shortcuts-category">
-        <h3>视图操作</h3>
+        <h3>{{ $t('Canvas.viewOperations') }}</h3>
         <table class="shortcuts-table">
           <thead>
             <tr>
-              <th>操作</th>
-              <th>快捷键/手势</th>
+              <th>{{ $t('Canvas.Operation') }}</th>
+              <th>{{ $t('Canvas.ShortcutGesture') }}</th>
             </tr>
           </thead>
           <tbody>
@@ -319,12 +321,12 @@ function getShortcutsByCategory(category) {
       </div>
 
       <div class="shortcuts-category">
-        <h3>工具切换</h3>
+        <h3>{{ $t('Canvas.toolSwitching') }}</h3>
         <table class="shortcuts-table">
           <thead>
             <tr>
-              <th>操作</th>
-              <th>快捷键/手势</th>
+				<th>{{ $t('Canvas.Operation') }}</th>
+				<th>{{ $t('Canvas.ShortcutGesture') }}</th>
             </tr>
           </thead>
           <tbody>
@@ -337,12 +339,12 @@ function getShortcutsByCategory(category) {
       </div>
 
       <div class="shortcuts-category">
-        <h3>笔刷调整</h3>
+        <h3>{{ $t('Canvas.toolSwitching') }}</h3>
         <table class="shortcuts-table">
           <thead>
             <tr>
-              <th>操作</th>
-              <th>快捷键/手势</th>
+				<th>{{ $t('Canvas.Operation') }}</th>
+				<th>{{ $t('Canvas.ShortcutGesture') }}</th>
             </tr>
           </thead>
           <tbody>
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
index 6638f601..cf5b04aa 100644
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
@@ -3,7 +3,8 @@ import { ref, nextTick, computed, inject } from "vue";
 import { Checkbox } from "ant-design-vue";
 import { VueDraggable } from "vue-draggable-plus";
 import { isGroupLayer } from "../../utils/layerHelper";
-
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
 // 设置组件名称，用于递归渲染
 defineOptions({
   name: "LayerItem",
@@ -393,7 +394,7 @@ function findParentLayerId() {
             v-if="layer.thumbnailUrl"
             :src="layer.thumbnailUrl"
             class="layer-thumbnail"
-            :alt="$t('图层预览')"
+            :alt="$t('Canvas.preview')"
           />
         </div>
 
@@ -423,7 +424,7 @@ function findParentLayerId() {
           <div
             class="visibility-btn"
             @click.stop="handleToggleVisibility"
-            :title="$t('显示/隐藏图层')"
+            :title="$t('Canvas.showHiddenLayer')"
           >
             <SvgIcon v-if="layer.visible" name="CEye" :size="16"></SvgIcon>
             <SvgIcon v-else name="CUnEye" :size="16"></SvgIcon>
@@ -447,7 +448,7 @@ function findParentLayerId() {
           <div
             class="delete-btn"
             :class="{ disabled: !canDelete }"
-            :title="$t('删除图层')"
+            :title="$t('Canvas.deleteLayer')"
             @click.stop="handleDelete"
           >
             <SvgIcon name="CDelete" size="14"></SvgIcon>
@@ -460,7 +461,7 @@ function findParentLayerId() {
           class="group-expand-icon"
           @click.stop="toggleGroupExpanded"
           @dblclick.stop=""
-          :title="isGroupExpanded ? $t('收起组') : $t('展开组')"
+          :title="isGroupExpanded ? $t('Canvas.CollapseUp') : $t('Canvas.CollapseDown')"
         >
           <SvgIcon
             name="CRight"
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
index c7040c4c..5a9a262d 100644
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
@@ -5,6 +5,8 @@ import ContextMenu from "./ContextMenu.vue";
 import LayerItem from "./LayerItem.vue";
 import LayersList from "./LayersList.vue"; // 引入 LayersList 组件
 import { createCrossLevelMoveCommand } from "../../commands/CrossLevelMoveCommands";
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
 // // 导入命令类
 // import {
 //   ReorderLayersCommand,
@@ -1523,7 +1525,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
         style="width: 0; height: 0; opacity: 0"
       /> -->
       <h3>
-        {{ $t("图层") }}
+        {{ $t("Canvas.layer") }}
         {{ selectedLayerIds.length > 0 ? `(${selectedLayerIds.length})` : "" }}
       </h3>
       <div class="layer-actions-group">
@@ -1533,7 +1535,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
             class="group-btn action-btn"
             :class="{ disabled: !canGroupLayers }"
             @click="groupSelectedLayers"
-            :title="$t('创建组')"
+            :title="$t('Canvas.createGroup')"
           >
             <SvgIcon name="CCreateGroup" size="20"></SvgIcon>
           </div>
@@ -1542,7 +1544,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
             class="ungroup-btn action-btn"
             :class="{ disabled: !canUngroupLayers }"
             @click="ungroupSelectedLayer"
-            :title="$t('解组')"
+            :title="$t('Canvas.slutionGroup')"
           >
             <SvgIcon name="CCancelGroup" size="20"></SvgIcon>
           </div>
@@ -1550,7 +1552,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
           <div
             class="delete-selected-btn action-btn"
             @click="deleteSelectedLayers"
-            :title="$t('删除选中图层')"
+            :title="$t('Canvas.deleteLayer')"
           >
             <SvgIcon name="CDelete" size="16"></SvgIcon>
           </div>
@@ -1558,7 +1560,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
           <div
             class="clear-selection-btn action-btn"
             @click="clearSelection"
-            :title="$t('清除选择')"
+            :title="$t('Canvas.clearSelection')"
           >
             <SvgIcon name="CCloseNo" size="14"></SvgIcon>
           </div>
@@ -1570,7 +1572,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
             v-if="isChildLayerActive"
             class="add-layer-btn action-btn"
             @click="addTopLayer"
-            :title="$t('添加顶级图层')"
+            :title="$t('Canvas.AddPinnedLayer')"
           >
             <SvgIcon name="CPlusTop" size="16"></SvgIcon>
           </div>
@@ -1587,8 +1589,8 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
 
     <!-- 多选提示条 -->
     <div v-if="isMultiSelectMode" class="multi-select-info">
-      <span>已选择 {{ selectedLayerIds.length }} 个图层</span>
-      <small>提示：按住 Ctrl/Cmd 多选，Shift 范围选择，长按进入多选模式</small>
+      <span>{{ $t('Canvas.Hint') }}{{ selectedLayerIds.length }}</span>
+      <small>{{ $t('Canvas.Hint') }}</small>
     </div>
 
     <!-- 图层列表组件 -->
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 383e1941..b7d5bc5f 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -36,6 +36,8 @@ import { ToolManager } from "./managers/toolManager.js";
 // import { fabric } from "fabric-with-all";
 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")
 );
@@ -514,7 +516,7 @@ function updateCanvasColor() {
 }
 
 async function addLayer() {
-  await layerManager.createLayer("空图层");
+  await layerManager.createLayer(t('Canvas.EmptyLayer'));
 }
 async function addTopLayer() {
   await layerManager.createLayer("空图层", LayerType.EMPTY, {
@@ -980,9 +982,9 @@ defineExpose({
         />
 
         <div class="zoom-info">
-          缩放: {{ currentZoom }}%
-          <button class="reset-zoom" @click="resetZoom">重置视图</button>
-          <button class="help-btn" @click="toggleShortcutHelp" title="查看快捷键和触控操作">
+          {{ 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>
diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
index 750f75b9..b938ff9b 100644
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -62,7 +62,8 @@ 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()
 /**
  * 图层管理器 - 负责管理画布上的所有图层
  * 包含图层的创建、删除、修改、排序等操作
@@ -579,7 +580,7 @@ export class LayerManager {
       this.createFixedLayer();
 
       // 创建一个空白图层（默认位于背景图层和固定图层之上）
-      await this.createLayer("图层 1");
+      await this.createLayer(t('Canvas.Layer1'));
     } else {
       // 检查是否已有背景层
       const hasBackgroundLayer = this.layers.value.some((layer) => layer.isBackground);
@@ -601,7 +602,7 @@ export class LayerManager {
       );
 
       if (!hasNormalLayer) {
-        await this.createLayer("图层 1");
+        await this.createLayer(t('Canvas.Layer1'));
       }
     }
 
diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue
index 566544c4..54628aa9 100644
--- a/src/component/home/design/editDesignType/index.vue
+++ b/src/component/home/design/editDesignType/index.vue
@@ -546,7 +546,7 @@ setup(props:any,{emit}) {
 			productimg.selectGenerate.listType = listType
 			productimg.selectGenerate.isIndex = index
 			
-			if(!list[index]?.id &&( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType == 'PoseTransfer' && !list[index].url))){
+			if(( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType !== 'PoseTransfer' && !list[index].url))){
 				productimg.productimgIsProductimg = true
 				productimg.productimgRemProductimg = true
 				setPrductimg([list[index].taskId])
@@ -626,14 +626,15 @@ setup(props:any,{emit}) {
 				// 	productimg.likeDesignCollectionList[index].childList[childIndex] = productimg.generateCourse
 				// }
 			}
-			let emitData = {
+			
+		}
+		let emitData = {
 				status:productimg.openType,
 				generateCourse:[{
 					...productimg.generateCourse,
 				}]
 			}
 			emit('upDataDesignLikeList',emitData)
-		}
 		productimg.openType = ''
 		
 		scaleImage.value = false
diff --git a/src/component/home/design/index.vue b/src/component/home/design/index.vue
index 2e273875..77e4438f 100644
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -1069,6 +1069,7 @@ export default defineComponent({
 		}
 		const generateLoad = async (data:any)=>{
 			// return
+			console.log(data)
 			clearInterval(prductimgTime.ToProductImage)
 			clearInterval(prductimgTime.PoseTransfer)
 			clearInterval(prductimgTime.Relight)
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 81571c72..17a1faad 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -69,6 +69,7 @@ export default defineComponent({
 			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas.layers[0].id,imageMode:'contains',undoable:false})
 		}
 		const canvasInit = (value)=>{
+			if(!props.imgUrl)return
 			canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
 		}
 		const getCanvasData = ()=>{
@@ -89,10 +90,40 @@ export default defineComponent({
 			
 		}
 		const exportElement = ()=>{
-			canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
+			dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
 				downloadBase64Image(rv,'canvas')
 			})
 		}
+		function downloadBase64Image(base64Data, filename) {
+			// 1. 提取MIME类型（自动处理各种Base64前缀）
+			const mimeMatch = base64Data.match(/^data:(.+?);base64,/);
+			if (!mimeMatch) {
+				console.error('Invalid Base64 data');
+				return;
+			}
+			// 2. 获取扩展名
+			const mimeType = mimeMatch[1];
+			const extension = mimeType.split('/')[1] || 'png';
+
+			// 3. 转换Base64为Blob
+			const byteString = atob(base64Data.split(',')[1]);
+			const ab = new ArrayBuffer(byteString.length);
+			const ia = new Uint8Array(ab);
+			for (let i = 0; i < byteString.length; i++) {
+				ia[i] = byteString.charCodeAt(i);
+			}
+			const blob = new Blob([ab], { type: mimeType });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `${filename}.${extension}`;
+			document.body.appendChild(a);
+			a.click();
+			setTimeout(() => {
+				document.body.removeChild(a);
+				URL.revokeObjectURL(url);
+			}, 100);
+		}
 		const changeCanvas = ()=>{
 			emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:5000})
 		}
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index a24aa50b..8d45e6b8 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -977,4 +977,53 @@ export default {
 		System:'系统',
 		Library:'库',
 	},
+	Canvas:{
+		layer:'图层',
+		createGroup:'创建组',
+		slutionGroup:'解组',
+		deleteLayer:'删除图层',
+		clearSelection:'清除选择',
+		AddPinnedLayer:'添加置顶图层',
+		selectedLayers:'选中的图层数量:',
+		Hint:'提示：按住 Ctrl/Cmd 多选，Shift 范围选择，长按进入多选模式',
+		CollapseUp:'收起组',
+		CollapseDown:'展开组',
+		showGroup:'显示图层',
+		hideGroup:'隐藏图层',
+		showHiddenLayer:'显示/隐藏图层',
+		preview:'预览',
+		EmptyLayer:'空图层',
+		Scale:'缩放',
+		ResetLayer:'重置视图',
+		Help:'查看快捷键和触控操作',
+		width:'宽度',
+		height:'高度',
+		color:'颜色',
+		KeyboardShortcutsOperationGuide:'键盘快捷键 & 操作指南',
+		TheDetectedPlatform:'检测到的平台',
+		BasicOperations:'基础操作',
+		Operation:'操作',
+		ShortcutGesture:'快捷键/手势',
+		viewOperations:'视图操作',
+		toolSwitching:'工具切换',
+		BrushAdjustmentOperation:'笔刷调整',
+		undo:'撤销',
+		Redo:'重做',
+		Copy:'复制',
+		Paste:'粘贴',
+		Cut:'剪切',
+		DeleteSelectedElement:'删除选中元素',
+		MoveCanvas:'移动画布',
+		ZoomCanvas:'缩放画布',
+		MouseWheel:'鼠标滚轮',
+		MacZoomCanvas:'鼠标滚轮 或 触控板缩放手势',
+		SelectionMode:'选择模式',
+		PaintingMode:'绘画模式',
+		EraserMode:'橡皮擦模式',
+		LassoTool:'套索工具',
+		LiquifyTool:'液化工具',
+		DecreaseBrush:'增加笔触大小',
+		IncreaseBrush:'减小笔触大小',
+		Layer1:'图层 1',
+	}
 }
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 41e01a5f..01fe4420 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -977,4 +977,53 @@ export default {
 		System:'System',
 		Library:'Library',
 	},
+	Canvas:{
+		layer:'Layer',
+		createGroup:'Create Group',
+		slutionGroup:'Slution Group',
+		deleteLayer:'Delete Layer',
+		clearSelection:'Clear Selection',
+		AddPinnedLayer:'Add a pinned layer',
+		selectedLayers:'The number of selected layers:',
+		Hint:'Hint: Hold down Ctrl/Cmd for multiple selections, Shift for range selection, and long press to enter the multiple selection mode',
+		CollapseUp:'Collapse Up',
+		CollapseDown:'Collapse Down',
+		showGroup:'Show Layer',
+		hideGroup:'Hidden Layer',
+		showHiddenLayer:'Show/Hidden Layer',
+		preview:'Preview',
+		EmptyLayer:'Empty layer',
+		Scale:'Scale',
+		ResetLayer:'Reset Layer',
+		Help:'View the shortcut keys and touch operations',
+		width:'Width',
+		height:'Height',
+		color:'Color',
+		KeyboardShortcutsOperationGuide:'Keyboard shortcuts & Operation guide',
+		TheDetectedPlatform:'Guide Detected Platform',
+		BasicOperations:'Basic Operations',
+		Operation:'Operation',
+		ShortcutGesture:'Shortcut/Gesture',
+		viewOperations:'View Operations',
+		toolSwitching:'Tool Switching',
+		BrushAdjustmentOperation:'Brush Adjustment Operation',
+		Undo:'Undo',
+		Redo:'Redo',
+		Copy:'Copy',
+		Paste:'Paste',
+		Cut:'Cut',
+		DeleteSelectedElement:'Delete Selected Element',
+		MoveCanvas:'Move Canvas',
+		ZoomCanvas:'Zoom Canvas',
+		MouseWheel:'Mouse Wheel',
+		MacZoomCanvas:'Mouse scroll wheel or touchpad zoom gesture',
+		SelectionMode:'Selection Mode',
+		PaintingMode:'Painting Mode',
+		EraserMode:'Eraser Mode',
+		LassoTool:'Lasso Tool',
+		LiquifyTool:'Liquify Tool',
+		DecreaseBrush:'Decrease Brush',
+		IncreaseBrush:'Increase Brush',
+		Layer1:'Layer 1',
+	}
 }
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index d60b9951..85bbdafc 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -1115,10 +1115,14 @@ export default defineComponent({
 							border-radius: .8rem;
 							display: flex;
 							align-items: center;
-							// flex-wrap: wrap;
-							flex-wrap: nowrap;
+							flex-wrap: wrap;
+							// flex-wrap: nowrap;
 							
-
+							&.history{
+								> .text{
+									flex-basis: 100%;
+								}
+							}
 							> .time{
 								font-size: 1.2rem;
 								opacity: .5;