Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

2025-11-13 10:56:51 +08:00
parent c54d9fa2f6 068078ea83
commit c0d3baa6ee
19 changed files with 1066 additions and 115 deletions
--- a/src/assets/iconfont2/demo_index.html
+++ b/src/assets/iconfont2/demo_index.html
@@ -54,6 +54,12 @@
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+              <span class="icon iconfont">&#xe650;</span>
+                <div class="name">裁剪</div>
+                <div class="code-name">&amp;#xe650;</div>
+              </li>
+          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">角度</div>
@@ -270,9 +276,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1762495405814') format('woff2'),
-       url('iconfont.woff?t=1762495405814') format('woff'),
-       url('iconfont.ttf?t=1762495405814') format('truetype');
+  src: url('iconfont.woff2?t=1762934152017') format('woff2'),
+       url('iconfont.woff?t=1762934152017') format('woff'),
+       url('iconfont.ttf?t=1762934152017') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -298,6 +304,15 @@
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
+          <li class="dib">
+            <span class="icon iconfont icon-caijian"></span>
+            <div class="name">
+              裁剪
+            </div>
+            <div class="code-name">.icon-caijian
+            </div>
+          </li>
+          
          <li class="dib">
            <span class="icon iconfont icon-angle"></span>
            <div class="name">
@@ -622,6 +637,14 @@
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caijian"></use>
+                </svg>
+                <div class="name">裁剪</div>
+                <div class="code-name">#icon-caijian</div>
+            </li>
+          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle"></use>
--- a/src/assets/iconfont2/iconfont.css
+++ b/src/assets/iconfont2/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 4292253 */
-  src: url('iconfont.woff2?t=1762495405814') format('woff2'),
-       url('iconfont.woff?t=1762495405814') format('woff'),
-       url('iconfont.ttf?t=1762495405814') format('truetype');
+  src: url('iconfont.woff2?t=1762934152017') format('woff2'),
+       url('iconfont.woff?t=1762934152017') format('woff'),
+       url('iconfont.ttf?t=1762934152017') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-caijian:before {
+  content: "\e650";
+}
+
 .icon-angle:before {
  content: "\e60a";
 }
--- a/src/assets/iconfont2/iconfont.js
+++ b/src/assets/iconfont2/iconfont.js
--- a/src/assets/iconfont2/iconfont.json
+++ b/src/assets/iconfont2/iconfont.json
@@ -5,6 +5,13 @@
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
+    {
+      "icon_id": "22138606",
+      "name": "裁剪",
+      "font_class": "caijian",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
    {
      "icon_id": "8875396",
      "name": "角度",
--- a/src/assets/iconfont2/iconfont.ttf
+++ b/src/assets/iconfont2/iconfont.ttf
--- a/src/assets/iconfont2/iconfont.woff
+++ b/src/assets/iconfont2/iconfont.woff
--- a/src/assets/iconfont2/iconfont.woff2
+++ b/src/assets/iconfont2/iconfont.woff2
--- a/src/assets/icons/CPlay.svg
+++ b/src/assets/icons/CPlay.svg
@@ -0,0 +1 @@
+<svg t="1762937400333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4603" width="200" height="200"><path d="M817.088 484.96l-512-323.744C295.232 154.976 282.752 154.592 272.576 160.224 262.336 165.856 256 176.608 256 188.256l0 647.328c0 11.648 6.336 22.4 16.576 28.032 4.8 2.656 10.112 3.968 15.424 3.968 5.952 0 11.904-1.664 17.088-4.928l512-323.616C826.368 533.184 832 522.976 832 512 832 501.024 826.368 490.816 817.088 484.96z" fill="currentColor" p-id="4604"></path></svg>
--- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
@@ -608,6 +608,9 @@ export class RemoveLayerCommand extends Command {
      );
      if (newActiveLayer) {
        this.activeLayerId.value = newActiveLayer.id;
+		if(this.canvas.toolId === OperationType.SELECT){
+			this.layerManager.selectLayerObjects(newActiveLayer.id);
+		}
      } else {
        this.activeLayerId.value = null;
      }
--- a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
@@ -493,7 +493,7 @@ export class ExportLayerToImageCommand extends Command {
    this._collectLayersAndObjects();
  }

-  async execute() {
+  async execute(isDownload = true) {
    if (!this.layer) {
      throw new Error(`图层 ${this.layerId} 不存在`);
    }
@@ -532,18 +532,21 @@ export class ExportLayerToImageCommand extends Command {
        fabricObjects: this.objectsToRasterize,
        isReturenDataURL: true,
        maskObject: clippingMaskFabricObject || null, // 不处理遮罩
+		scaleFactor: isDownload ? 2 : 1,
      });

+	  
      // 模拟浏览器下载
-      const link = document.createElement("a");
-      link.href = imageBase64;
-      link.download = `${this.layer.name}.png`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-
+      if (isDownload) {
+        const link = document.createElement("a");
+        link.href = imageBase64;
+        link.download = `${this.layer.name}.png`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
      console.log(`✅ 图层 ${this.layer.name} 导出完成`);
-      return true;
+      return imageBase64;
    } catch (error) {
      console.error("导出图层失败:", error);
      throw error;
--- a/src/component/Canvas/CanvasEditor/components/CropImage.vue
+++ b/src/component/Canvas/CanvasEditor/components/CropImage.vue
@@ -0,0 +1,705 @@
+<template>
+	<!-- 图片列表面板 -->
+	<div v-if="showPanel" class="crop-image-overlay" @click.self="close">
+		<div class="crop-image-modal">
+			<div class="modal-header">
+				<h3>{{ $t("Canvas.cropImage") }}</h3>
+				<button class="close-btn" @click="close">&times;</button>
+			</div>
+
+			<div class="modal-content">
+				<!-- 图片剪切 -->
+				<div class="image-clip" ref="el" v-if="data.url">
+					<div
+						class="box"
+						ref="box"
+						:style="{
+							width: clipData.img_width + 'px',
+							height: clipData.img_height + 'px',
+						}"
+					>
+						<img :src="data.url" />
+						<div class="shade"></div>
+						<div
+							ref="clipRef"
+							class="clip"
+							:style="{
+								top: clipData.top + 'px',
+								left: clipData.left + 'px',
+								width: clipData.width + 'px',
+								height: clipData.height + 'px',
+							}"
+							@mousedown.stop="clipMousedown"
+							@touchstart.stop="clipMousedown"
+						>
+							<div class="img">
+								<img
+									:src="data.url"
+									:style="{
+										width: clipData.img_width + 'px',
+										height: clipData.img_height + 'px',
+										top: -clipData.top + 'px',
+										left: -clipData.left + 'px',
+									}"
+								/>
+							</div>
+							<div
+								class="top"
+								@mousedown.stop="topMousedown"
+								@touchstart.stop="topMousedown"
+							></div>
+							<div
+								class="right"
+								@mousedown.stop="rightMousedown"
+								@touchstart.stop="rightMousedown"
+							></div>
+							<div
+								class="bottom"
+								@mousedown.stop="bottomMousedown"
+								@touchstart.stop="bottomMousedown"
+							></div>
+							<div
+								class="left"
+								@mousedown.stop="leftMousedown"
+								@touchstart.stop="leftMousedown"
+							></div>
+							<span
+								class="top"
+								@mousedown.stop="topMousedown"
+								@touchstart.stop="topMousedown"
+							></span>
+							<span
+								class="right"
+								@mousedown.stop="rightMousedown"
+								@touchstart.stop="rightMousedown"
+							></span>
+							<span
+								class="bottom"
+								@mousedown.stop="bottomMousedown"
+								@touchstart.stop="bottomMousedown"
+							></span>
+							<span
+								class="left"
+								@mousedown.stop="leftMousedown"
+								@touchstart.stop="leftMousedown"
+							></span>
+						</div>
+					</div>
+				</div>
+				<!-- 空状态 -->
+				<div class="empty-state" v-else>
+					<div class="empty-icon">📷</div>
+					<p>{{ $t("Canvas.NoPicture") }}</p>
+				</div>
+			</div>
+
+			<div class="modal-footer">
+				<div class="image-count"></div>
+				<div class="image-submit gallery_btn" @click="confirm">
+					{{ $t("Canvas.confirm") }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import {
+		ref,
+		computed,
+		defineProps,
+		onDeactivated,
+		reactive,
+		onMounted,
+		defineExpose,
+	} from "vue";
+	import { useI18n } from "vue-i18n";
+
+	// Props
+	const props = defineProps([]);
+	const { t } = useI18n();
+	var resolveFn: (value: string | PromiseLike<string>) => void;
+	const showPanel = ref(false);
+	const open = (url: string) => {
+		showPanel.value = true;
+		setImgage(url);
+		return new Promise((resolve) => (resolveFn = resolve));
+	};
+	const close = () => {
+		showPanel.value = false;
+	};
+	//提交选中的T图片
+	const confirm = () => {
+		close();
+		const base64 = getImageBase64();
+		resolveFn && resolveFn(base64);
+	};
+
+	const data = reactive({
+		url: "",
+	});
+	const el = ref();
+	const box = ref();
+	const clipRef = ref();
+	const clipData = reactive({
+		top: 0,
+		left: 0,
+		width: 0,
+		height: 0,
+		img_width: 0,
+		img_height: 0,
+	});
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	const reload = () => {
+		if (!el.value) return;
+		const size = Math.min(
+			1,
+			el.value.offsetWidth / canvas.width,
+			el.value.offsetHeight / canvas.height
+		);
+		const width = size * canvas.width;
+		const height = size * canvas.height;
+		clipData.left = 0;
+		clipData.top = 0;
+		clipData.width = width;
+		clipData.height = height;
+		clipData.img_width = width;
+		clipData.img_height = height;
+	};
+	window.addEventListener("resize", reload);
+	onDeactivated(() => {
+		window.removeEventListener("resize", reload);
+	});
+
+	const setImgage = (url: string) => {
+		if (!url) return;
+		const img = new Image();
+		img.src = url;
+		data.url = url;
+		img.onload = () => {
+			const width = img.width;
+			const height = img.height;
+			canvas.width = width;
+			canvas.height = height;
+			ctx?.clearRect(0, 0, width, height);
+			ctx?.drawImage(img, 0, 0, width, height);
+			nextTick(() => reload());
+		};
+	};
+	const canvasImageDataToBase64 = (imageData: any) => {
+		// 创建一个临时的canvas元素
+		const canvas = document.createElement("canvas");
+		canvas.width = imageData.width;
+		canvas.height = imageData.height;
+		const ctx = canvas.getContext("2d");
+		ctx?.putImageData(imageData, 0, 0);
+		const dataURL = canvas.toDataURL("image/png");
+		return dataURL;
+	};
+	const base64toFile = (dataurl, filename = "file") => {
+		//转换base64
+		let arr = dataurl.split(",");
+		let mime = arr[0].match(/:(.*?);/)[1];
+		let suffix = mime.split("/")[1];
+		let bstr = atob(arr[1]);
+		let n = bstr.length;
+		let u8arr = new Uint8Array(n);
+		while (n--) {
+			u8arr[n] = bstr.charCodeAt(n);
+		}
+		return new File([u8arr], `${filename}.${suffix}`, {
+			type: mime,
+		});
+	};
+	const getImageBase64 = () => {
+		const scale = canvas.width / clipData.img_width;
+		const imageData = ctx?.getImageData(
+			clipData.left * scale,
+			clipData.top * scale,
+			clipData.width * scale,
+			clipData.height * scale
+		);
+		const base64 = canvasImageDataToBase64(imageData);
+		return base64;
+	};
+	const getImageFile = () => {
+		const base64 = getImageBase64();
+		const file = base64toFile(base64, "image.png");
+		return file;
+	};
+
+	// 移动裁剪框
+	const clipMousedown = (e: MouseEvent | TouchEvent) => {
+		e.preventDefault();
+		var pageX = 0;
+		var pageY = 0;
+		if (e.type == "touchstart") {
+			const touch = e["touches"][0];
+			pageX = touch.pageX;
+			pageY = touch.pageY;
+		} else {
+			pageX = e["pageX"];
+			pageY = e["pageY"];
+		}
+		const elInfo = box.value.getBoundingClientRect();
+		const clipInfo = clipRef.value.getBoundingClientRect();
+		// 鼠标相对元素的位置
+		const CX = pageX - clipInfo.x;
+		const CY = pageY - clipInfo.y;
+
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			e.preventDefault();
+			var pageX = 0;
+			var pageY = 0;
+			if (e.type == "touchmove") {
+				const touch = e["touches"][0];
+				pageX = touch.pageX;
+				pageY = touch.pageY;
+			} else {
+				pageX = e["pageX"];
+				pageY = e["pageY"];
+			}
+			let x = pageX - elInfo.x - CX;
+			let y = pageY - elInfo.y - CY;
+			if (x < 0) {
+				x = 0;
+			} else if (x > elInfo.width - clipInfo.width) {
+				x = elInfo.width - clipInfo.width;
+			}
+			if (y < 0) {
+				y = 0;
+			} else if (y > elInfo.height - clipInfo.height) {
+				y = elInfo.height - clipInfo.height;
+			}
+
+			clipData.top = y;
+			clipData.left = x;
+			clipData.img_width = elInfo.width;
+			clipData.img_height = elInfo.height;
+
+			if (!el.value) return;
+			const elh = el.value.offsetHeight;
+			const elsh = el.value.scrollHeight;
+			const elst = el.value.scrollTop;
+			if (y < elst) {
+				el.value.scrollTop = y;
+			} else if (y + clipInfo.height > elst + elh) {
+				el.value.scrollTop = y + clipInfo.height - elh;
+			}
+		};
+		const mouseup = () => {
+			window.removeEventListener("mousemove", mousemove);
+			window.removeEventListener("mouseup", mouseup);
+			window.removeEventListener("touchmove", mousemove);
+			window.removeEventListener("touchend", mouseup);
+		};
+		if (e.type == "touchstart") {
+			window.addEventListener("touchmove", mousemove);
+			window.addEventListener("touchend", mouseup);
+		} else {
+			window.addEventListener("mousemove", mousemove);
+			window.addEventListener("mouseup", mouseup);
+		}
+	};
+
+	// 移动裁剪框的四个边框
+	const mousedown = (
+		e: MouseEvent | TouchEvent,
+		type: "top" | "bottom" | "right" | "left"
+	) => {
+		const minWidth = 20;
+		const minHeight = 20;
+		const elInfo = box.value.getBoundingClientRect();
+		const R = elInfo.width - clipData.left - clipData.width;
+		const B = elInfo.height - clipData.top - clipData.height;
+
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			var x = 0;
+			var y = 0;
+			if (e.type == "touchmove") {
+				const touch = e["touches"][0];
+				x = touch.pageX - elInfo.x;
+				y = touch.pageY - elInfo.y;
+			} else {
+				x = e["pageX"] - elInfo.x;
+				y = e["pageY"] - elInfo.y;
+			}
+
+			if (type == "right") {
+				let width = x - clipData.left;
+				if (width + clipData.left > elInfo.width) {
+					width = elInfo.width - clipData.left;
+				}
+				if (width < minWidth) width = minWidth;
+				clipData.width = width;
+			} else if (type == "bottom") {
+				let height = y - clipData.top;
+				if (height + clipData.top > elInfo.height) {
+					height = elInfo.height - clipData.top;
+				}
+				if (height < minHeight) height = minHeight;
+				clipData.height = height;
+			} else if (type == "left") {
+				let left = x;
+				let width = clipData.width;
+				if (left < 0) {
+					left = 0;
+				} else if (left > elInfo.width - R - minWidth) {
+					left = elInfo.width - R - minWidth;
+				}
+				width = elInfo.width - R - left;
+				clipData.left = left;
+				clipData.width = width;
+				clipData.img_width = elInfo.width;
+				clipData.img_height = elInfo.height;
+			} else if (type == "top") {
+				let top = y;
+				let height = clipData.height;
+				if (top < 0) {
+					top = 0;
+				} else if (top > elInfo.height - B - minHeight) {
+					top = elInfo.height - B - minHeight;
+				}
+				height = elInfo.height - B - top;
+				clipData.top = top;
+				clipData.height = height;
+				clipData.img_height = elInfo.height;
+			}
+		};
+		const mouseup = () => {
+			window.removeEventListener("mousemove", mousemove);
+			window.removeEventListener("mouseup", mouseup);
+			window.removeEventListener("touchmove", mousemove);
+			window.removeEventListener("touchend", mouseup);
+		};
+		if (e.type == "touchstart") {
+			window.addEventListener("touchmove", mousemove);
+			window.addEventListener("touchend", mouseup);
+		} else {
+			window.addEventListener("mousemove", mousemove);
+			window.addEventListener("mouseup", mouseup);
+		}
+	};
+	const topMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "top");
+	};
+	const rightMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "right");
+	};
+	const bottomMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "bottom");
+	};
+	const leftMousedown = (e: MouseEvent | TouchEvent) => {
+		mousedown(e, "left");
+	};
+	defineExpose({
+		open,
+		close,
+	});
+</script>
+
+<style scoped lang="less">
+	/* 弹窗遮罩层 */
+	.crop-image-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, 0.5);
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1001;
+		animation: fadeIn 0.3s ease;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* 弹窗主体 */
+	.crop-image-modal {
+		background-color: #fff;
+		border-radius: 12px;
+		width: 80%;
+		height: 80%;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+		animation: modalSlideUp 0.3s ease;
+	}
+
+	@keyframes modalSlideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* 弹窗头部 */
+	.modal-header {
+		padding: 16px 20px;
+		background-color: rgba(255, 255, 255, 0.8);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+
+		h3 {
+			margin: 0;
+			font-size: 18px;
+			color: #333;
+			font-weight: 600;
+		}
+	}
+
+	.close-btn {
+		background: none;
+		border: none;
+		font-size: 24px;
+		cursor: pointer;
+		color: #666;
+		padding: 0;
+		line-height: 1;
+		opacity: 0.7;
+		transition: all 0.2s;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover {
+			opacity: 1;
+			color: #333;
+			transform: scale(1.1);
+		}
+	}
+
+	/* 弹窗内容 */
+	.modal-content {
+		// padding: 20px;
+		overflow: hidden;
+		flex: 1;
+		background-color: #fff;
+		-webkit-overflow-scrolling: touch;
+		display: flex;
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///9ra2sgNdccAAAARSURBVAjXY2A/wICMfjAgIwB8gwi84a8abQAAAABJRU5ErkJggg==);
+	}
+
+	.image-clip {
+		user-select: none;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> .box {
+			position: relative;
+			> img {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+			> .shade {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background-color: rgba(0, 0, 0, 0.5);
+			}
+			> .clip {
+				position: absolute;
+				cursor: move;
+				outline: 1px solid #39f;
+
+				> * {
+					position: absolute;
+				}
+				> .img {
+					pointer-events: none;
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+					> img {
+						position: absolute;
+						background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///9ra2sgNdccAAAARSURBVAjXY2A/wICMfjAgIwB8gwi84a8abQAAAABJRU5ErkJggg==);
+					}
+				}
+
+				> .top {
+					cursor: n-resize;
+				}
+				> .bottom {
+					cursor: s-resize;
+				}
+				> .right {
+					cursor: e-resize;
+				}
+				> .left {
+					cursor: w-resize;
+				}
+
+				--border: 4px;
+				--trbl: calc(0px - var(--border) / 2);
+				--ball-size: 8px;
+				--ball-trbl: calc(0px - var(--ball-size) / 2);
+				> div.top {
+					top: var(--trbl);
+					left: 0;
+					right: 0;
+					height: var(--border);
+				}
+
+				> div.bottom {
+					bottom: var(--trbl);
+					left: 0;
+					right: 0;
+					height: var(--border);
+				}
+				> div.left {
+					top: 0;
+					left: var(--trbl);
+					bottom: 0;
+					width: var(--border);
+				}
+				> div.right {
+					top: 0;
+					right: var(--trbl);
+					bottom: 0;
+					width: var(--border);
+				}
+				> span {
+					position: absolute;
+					width: var(--ball-size);
+					height: var(--ball-size);
+					border-radius: 50%;
+					background-color: #39f;
+				}
+				> span.top {
+					top: var(--ball-trbl);
+					left: 50%;
+					transform: translateX(-50%);
+				}
+				> span.right {
+					right: var(--ball-trbl);
+					top: 50%;
+					transform: translateY(-50%);
+				}
+				> span.bottom {
+					bottom: var(--ball-trbl);
+					left: 50%;
+					transform: translateX(-50%);
+				}
+				> span.left {
+					left: var(--ball-trbl);
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+		}
+	}
+
+	/* 空状态 */
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 60px 20px;
+		color: #666;
+		min-height: 300px;
+
+		.empty-icon {
+			font-size: 48px;
+			margin-bottom: 16px;
+			opacity: 0.5;
+		}
+
+		p {
+			font-size: 16px;
+			margin: 0;
+		}
+	}
+
+	/* 弹窗底部 */
+	.modal-footer {
+		padding: 16px 20px;
+		background-color: rgba(255, 255, 255, 0.8);
+		border-top: 1px solid rgba(0, 0, 0, 0.05);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+		> .image-submit {
+			font-size: 1.2rem;
+			line-height: 4rem;
+		}
+	}
+
+	.image-count {
+		font-size: 14px;
+		color: #666;
+		font-weight: 500;
+	}
+
+	/* 响应式设计 */
+	@media screen and (max-width: 1024px) {
+		.crop-image-modal {
+			width: 95%;
+			max-width: 900px;
+		}
+
+		.modal-content {
+			padding: 16px;
+		}
+
+		.modal-header,
+		.modal-footer {
+			padding: 14px 16px;
+		}
+	}
+
+	@media screen and (max-width: 640px) {
+		.crop-image-modal {
+			width: 98%;
+			margin: 10px;
+			max-height: 90vh;
+		}
+
+		.modal-content {
+			padding: 12px;
+			gap: 16px;
+		}
+
+		.modal-header h3 {
+			font-size: 16px;
+		}
+
+		.image-categories {
+			gap: 8px;
+			padding-bottom: 8px;
+		}
+
+		.category-btn {
+			padding: 6px 12px;
+			font-size: 13px;
+			height: 32px;
+		}
+	}
+</style>
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
@@ -68,6 +68,12 @@
 									{{ t("Canvas.flipVertical") }}
 								</p>
 							</div>
+							<div class="btn" @click="clickCropImage(v)">
+								<i class="iconfont icon-caijian"></i>
+								<p class="tip">
+									{{ t("Canvas.cropAndAdd") }}
+								</p>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -82,6 +88,7 @@
 	import { useI18n } from "vue-i18n";
 	import { ToolCommand } from "../commands/ToolCommands";
 	import { OperationType } from "../utils/layerHelper";
+	import { loadImageUrlToLayer } from "../utils/imageHelper";
 	import { TransformCommand } from "../commands/StateCommands";
 	const props = defineProps({
 		canvas: {
@@ -262,6 +269,21 @@
 		finalState.flipY = !finalState.flipY;
 		transformObject(obj, initialState, finalState);
 	};
+	// 裁剪图片
+	const cropImage = inject("cropImage");
+	const clickCropImage = async (obj) => {
+		const base64 = await props.layerManager.getLayerToBase64(obj.layerId);
+		if(base64) cropImage(base64).then((res) => {
+			loadImageUrlToLayer({
+				imageUrl: res,
+				layerManager: props.layerManager,
+				canvas: props.canvas,
+				toolManager: props.toolManager,
+			}).then(res=>{
+				console.log("========",res);
+			});
+		});
+	};

 	const updateActiveObjects = (arrs, keys) => {
 		arrs.forEach((v) => {
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -23,6 +23,7 @@ import { BrushStore } from "./store/BrushStore";
 import cuowuImg from "@/assets/images/homePage/cuowu.svg";
 import { Https } from "@/tool/https";
 import SelectImages from "@/component/common/SelectImages.vue";
+import CropImage from "./components/CropImage.vue";
 import { UrlToFile } from "@/tool/util";

 // import { MinimapManager } from "./managers/minimap/MinimapManager";
@@ -907,6 +908,12 @@ const changeCanvas = async (command) => {
  }
 };

+const cropImageRef = ref(null);
+const cropImage = (url) => {
+  return cropImageRef.value.open(url)
+};
+provide("cropImage", cropImage); // 提供给子组件使用
+
 // 提供外部ref实例方法
 defineExpose({
  layers, // 图层数据
@@ -1249,6 +1256,9 @@ defineExpose({
          />
        </div>
      </transition>
+
+	  <!-- 裁剪图片组件 -->
+	  <CropImage ref="cropImageRef" />
    </div>

    <!-- <div class="footer-actions">
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -1195,7 +1195,7 @@ export class LayerManager {
  }

  /**
-   * 选择图层下的所有对象
+   * 选择图层下的所有画布对象
   * @param {string} layerId 图层ID
   * @returns {fabric.ActiveSelection|null} 返回活动选择组或null
   */
@@ -3200,6 +3200,49 @@ export class LayerManager {
    }
  }

+  /**
+   * 栅格化图层并返回Base64编码
+   * @param {string} layerId 图层ID，默认使用当前活动图层
+   * @returns {Promise<string|null>} Base64编码的图像字符串，失败时返回null
+   */
+  async getLayerToBase64(layerId = null) {
+    const targetLayerId = layerId || this.activeLayerId.value;
+    if (!targetLayerId) {
+      console.warn(this.t("没有指定要栅格化的图层"));
+      return null;
+    }
+
+    // 查找目标图层
+    // const targetLayer = this.getLayerById(targetLayerId);
+    const { layer: targetLayer } = findLayerRecursively(
+      this.layers.value,
+      targetLayerId
+    );
+
+    if (!targetLayer) {
+      console.error(this.t("图层不存在", { layerId: targetLayerId }));
+      return null;
+    }
+
+    // 直接创建和执行导出命令
+    const command = new ExportLayerToImageCommand({
+      canvas: this.canvas,
+      layers: this.layers,
+      layerId: targetLayerId,
+      activeLayerId: this.activeLayerId,
+      layerManager: this,
+    });
+
+    command.undoable = false; // 导出操作通常不需要撤销
+
+    // 执行命令
+	const result = await command.execute(false);
+	if (result) {
+	console.log(`✅ 成功导出图层: ${targetLayer.name}`);
+	}
+	return result;
+  }
+
  /**
   * 为组图层的活动选择组设置遮罩移动同步（修复版）
   * @param {fabric.ActiveSelection} activeSelection 活动选择组
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -2,18 +2,29 @@
 	<div class="poseTransfer">
 		<div class="configuratioBox" :class="{active:button.left}">
 			<div class="configuratio">
-				<!-- <div class="title">Give pose for them to select</div> -->
 				<div class="content">
-					<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
+					<div class="video-type-container">
+						<div class="title">Video Type</div>
+						<a-select
+							class="video-type-selection"
+							v-model:value="videoType"
+							size="large"
+							placeholder="Please select"
+						>
+						<a-select-option 
+						v-for="item in options"
+						:key="item.vlaue"
+						:value="item.value"
+						>
+							{{ item.label }}
+						</a-select-option>
+					</a-select>
+					</div>
 					<div class="selectImg">
 						<div class="head">
 							<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
 						</div>
 						<div class="imgBox" v-mousewheel>
-							<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
-								<img :src="item.imgUrl || item.url" alt="">	
-								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
-							</div> -->
 							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
 								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
 									<a-spin size="large" />
@@ -57,7 +68,7 @@
 					<div style="width: 100%; height: 100px;">
 						<promptInput :content="prompt" ref="promptInput"></promptInput>
 					</div>
-					<div class="poses">
+					<div class="poses" v-show="showMotion">
 						<div class="head">
 							<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
 						</div>
@@ -73,6 +84,17 @@
 										<i class="fi fi-br-check"></i>
 									</div>
 								</div>
+								<div class="control-container">
+									<div class="icon-list">
+										<SvgIcon
+										 class="play-icon"
+									 	 @click="handlePlayMotion(item)"
+										 name="CPlay"
+										 size="10"
+										 color="#fff"
+										 />
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -269,6 +291,9 @@ export default defineComponent({
 		}
 		const gifPause = (e:any,item:any)=>{
 			e.target.src = item.firstFrame//静态图片
+		}
+		const handlePlayMotion = item => {
+			
 		}
 		const getPoseList = ()=>{
 			Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
@@ -625,7 +650,20 @@ export default defineComponent({
 					setGenerate(taskIdList[0].taskId)
 				}
 			})
-		},{immediate: true })
+		},
+		{immediate: true }
+		)
+
+		const videoType = ref('3')
+		const showMotion = computed(()=> videoType.value === '3' )
+		const options = ref([
+			{ vlaue: '1', label: 'First frame' },
+			{ value: '2', label: 'First and last frames' },
+			{ value: '3', label: 'First frame and skeleton' },
+
+		])
+
+
 		onBeforeUnmount(()=>{
 			clearInterval(data.generateTime)
 			clearInterval(data.remGenerateTime)
@@ -654,6 +692,9 @@ export default defineComponent({
 			setSpeed,
 			setUploadDelete,
 			locale,
+			videoType,
+			options,
+			showMotion,
 		}
 	},
 	directives:{
@@ -757,21 +798,23 @@ export default defineComponent({
 						max-height: 45rem;
 						margin-top: 2rem;
 						display: flex;
-						flex-direction: row;
 						flex-wrap: nowrap;
-						justify-content: space-between;
+						// justify-content: space-between;
 						width: 100%;
 						overflow: hidden;
 						overflow-x: auto;
+						column-gap: 2.4rem;
+						position: relative;
 						> .item{
-							margin-right: 1rem;
-							width: calc(100% / 2 - .5rem);
+							// width: calc(100% / 2 - .5rem);
+							// height: 25rem;
+							width: 12.7rem;
+							height: 17.8rem;
 							cursor: pointer;
 							overflow: hidden;
 							display: flex;
 							justify-content: center;
 							flex-shrink: 0;
-							height: 25rem;
 							position: relative;
 							// &.active{
 							// 	border: 2px solid;
@@ -852,11 +895,36 @@ export default defineComponent({
 							> img{
 								width: 100%;
 								object-fit: contain;
+								border: 1px solid #D0D0D0;
 							}
 						}
 						> .upload_item{
 							border: none;
 						}
+						.control-container{
+							width: 100%;
+							height: 3.3rem;
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							background: linear-gradient(180deg, rgba(8, 9, 13, 0) 0%, rgba(8, 9, 13, 0.27) 80.37%);
+							display: flex;
+							align-items: flex-end;
+							justify-content: center;
+							.icon-list{
+								height: 50%;
+								width: calc(100% - 1.6rem);
+								border-top: 1px solid #fff;
+								display: flex;
+								box-sizing: border-box;
+								justify-content: flex-start;
+								align-items: center;
+								.play-icon{
+									width: initial;
+									height: initial;
+								}
+							}
+						}
 					}
 					> .head{
 						color: #000;
@@ -948,5 +1016,39 @@ export default defineComponent({
 				overflow: hidden;
 			}
 		}
-	}
+
+			.upload_file_item {
+				width: 100%;
+				height: 100%;
+				:deep(.ant-upload-picture-card-wrapper) {
+					width: 100% !important;
+					height: 100%;
+					.ant-upload-list-picture-card {
+						width: 100%;
+						height: 100%;
+						.ant-upload-select-picture-card {
+							width: 100%;
+							height: 100%;
+							border: 1px solid #000;
+							background: #fff;
+						}
+					}
+				}
+			}
+			.video-type-container{
+				margin-bottom: 4rem;
+				.title{
+					font-size: 1.8rem;
+					color: #000;
+					margin-bottom: 1.4rem;
+				}
+				:deep(.ant-select){
+					width: 100%;
+					.ant-select-selector{
+						border: 2px solid #D0D0D0;
+						border-radius: 1rem;
+					}
+				}
+			}
+		}
 </style>
--- a/src/component/home/tools/toProduct/Prompt.vue
+++ b/src/component/home/tools/toProduct/Prompt.vue
@@ -83,7 +83,7 @@
 </template>

 <script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue'
+import { ref, useTemplateRef, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import originalDress from '@/assets/images/product/original_dress.png'
 import generatedDress from '@/assets/images/product/geneated_dress.png'
@@ -94,7 +94,7 @@ import { downloadIamge } from '@/tool/util'
 import { useI18n } from 'vue-i18n'
 const { t, locale } = useI18n()

-defineProps<{
+const props = defineProps<{
  promptList: string[]
 }>()

@@ -169,7 +169,7 @@ const handleCopy = async (value: string) => {
      textArea.select()
      try {
        document.execCommand('copy')
-         message.success(t('ProductImg.CopySuccess'))
+        message.success(t('ProductImg.CopySuccess'))
      } catch (err) {
        message.error(t('ProductImg.CopyFailed'))
      }
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -166,13 +166,13 @@
                    @keydown.enter.prevent="getPrductimg()"
                    v-model="searchName[productimgMenu.value]"
                  ></textarea>
+                  <div class="asistant-btn" @click="handleClickAssistBtn">
+                    <i class="fi fi-bs-magic-wand asistant-icon"></i>
+                    <span>{{ $t('ProductImg.PromptAssit') }}</span>
+                  </div>
                </div>
              </div>
            </div>
-            <div class="asistant-btn" @click="handleClickAssistBtn">
-              <i class="fi fi-bs-magic-wand asistant-icon"></i>
-              <span>{{ $t('ProductImg.PromptAssit') }}</span>
-            </div>
          </div>
          <div class="productImg_content_item_generate_btn input_border">
            <div class="generage_btn_box">
@@ -384,10 +384,10 @@ export default defineComponent({
      type: Boolean,
      default: false
    },
-	isState:{
-		type:Boolean,
-		default:false,
-	},
+    isState: {
+      type: Boolean,
+      default: false
+    }
  },
  emit: ['unLike'],
  setup(props, { emit }) {
@@ -406,8 +406,7 @@ export default defineComponent({
    const createProbject: any = inject('createProbject', () => {})
    let productImgData: any = reactive({
      isShowMark: false,
-      fileList:{
-	},
+      fileList: {},
      searchName: {
        ToProductImage: '',
        Relight: ''
@@ -416,37 +415,37 @@ export default defineComponent({
      isProductimg: false, //开始生成
      selectProductimgList: [],
      generateList: {
-        ToProductImage:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'toProduct'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.toProductImageList.list
-			}
-		}),
-		Relight:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'relight'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.relightList.list
-			}
-		}),
+        ToProductImage: computed(() => {
+          if (!route.query?.id && route.query.tools == 'toProduct') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.toProductImageList.list
+          }
+        }),
+        Relight: computed(() => {
+          if (!route.query?.id && route.query.tools == 'relight') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.relightList.list
+          }
+        })
      },
      selectObject: computed(() => store.state.Workspace.probjects), //选择的项目
      likeList: {
-        ToProductImage:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'toProduct'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.toProductImageList.likedList
-			}
-		}),
-		Relight:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'relight'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.relightList.likedList
-			}
-		}),
+        ToProductImage: computed(() => {
+          if (!route.query?.id && route.query.tools == 'toProduct') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.toProductImageList.likedList
+          }
+        }),
+        Relight: computed(() => {
+          if (!route.query?.id && route.query.tools == 'relight') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.relightList.likedList
+          }
+        })
      } as any,
      similarity: 30,
      brightenValue: 1,
@@ -520,19 +519,23 @@ export default defineComponent({
      return store.state.UploadFilesModule.modularData
    })
    let userlikeGroupId = 0
-	watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
-		setFileList()
-	})
-	const setFileList = () => {
-		if(props.isDesignPage)return
-		if(!route.query?.id && route.query.tools){
-			productImgData.fileList[props.productimgMenu.value] = []
-		}else{
-			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
-			if(productImgData.fileList[props.productimgMenu.value][0]){
-				productImgData.fileList[props.productimgMenu.value][0].isChecked = true
-			}
-		}
+    watch(
+      () => store.state.HomeStoreModule.uploadElement.length,
+      (newVal, oldVal) => {
+        setFileList()
+      }
+    )
+    const setFileList = () => {
+      if (props.isDesignPage) return
+      if (!route.query?.id && route.query.tools) {
+        productImgData.fileList[props.productimgMenu.value] = []
+      } else {
+        productImgData.fileList[props.productimgMenu.value] =
+          store.state.HomeStoreModule.uploadElement
+        if (productImgData.fileList[props.productimgMenu.value][0]) {
+          productImgData.fileList[props.productimgMenu.value][0].isChecked = true
+        }
+      }
    }
    const openSetData = (designList: any) => {
      // cleardata()
@@ -545,7 +548,7 @@ export default defineComponent({
        productImgData.fileList[props.productimgMenu.value] = designList
        return
      }
-	  setFileList()
+      setFileList()
      userlikeGroupId = selectDesignList.value.userlikeGroupId
      // getLikeProductImage(selectDesignList.value.userlikeGroupId)
      productImgDom.generalDragLeft.setItemPosition()
@@ -717,6 +720,11 @@ export default defineComponent({
    let remPrductimgTime: any = null
    let prductimgTime: any = null
    let getPrductimg = () => {
+      // 未输入prompt时不可生成
+      if (!productImgData.searchName[props.productimgMenu.value]) {
+        message.info(t('ProductImg.noPrompt'))
+        return
+      }
      if (productImgData.isProductimg) return
      clearInterval(remPrductimgTime)
      let selectArr: any = []
@@ -1033,17 +1041,21 @@ export default defineComponent({
      })
    }
    const ifMaximumLength = async () => {
-      await nextTick()
+      // await nextTick()
+      // let textarea = productImgData.textarea
+      // const scrollTop = textarea.scrollTop
+      // // 2. 计算单行高度
+      // const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
+      // // 3. 重置高度为1行
+      // textarea.style.height = lineHeight + 'px'
+      // // 4. 计算实际需要的高度
+      // const newHeight = Math.max(lineHeight, textarea.scrollHeight)
+      // textarea.style.height = newHeight + 'px'
+      // textarea.scrollTop = scrollTop
+      // 随着输入内容自动调整高度
      let textarea = productImgData.textarea
-      const scrollTop = textarea.scrollTop
-      // 2. 计算单行高度
-      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
-      // 3. 重置高度为1行
-      textarea.style.height = lineHeight + 'px'
-      // 4. 计算实际需要的高度
-      const newHeight = Math.max(lineHeight, textarea.scrollHeight)
-      textarea.style.height = newHeight + 'px'
-      textarea.scrollTop = scrollTop
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
    }
    const openSpeed = () => {
      speed.speedState = !speed.speedState
@@ -1096,7 +1108,7 @@ export default defineComponent({

      if (!isFromDesignPage) {
        // 如果不是从design来的，返回两个提示词
-        return [t('poseTransfer.UploadWithModel'), t('poseTransfer.UploadWithoutModel')]
+        return [t('poseTransfer.UploadWithoutModel'), t('poseTransfer.UploadWithModel')]
      } else {
        // 如果是从design来的
        if (isSingleDesign) {
@@ -1260,15 +1272,14 @@ export default defineComponent({
    // &.active

    > .item {
-      // margin-right: 1rem;
-      // width: calc(100% / 2 - 0.5rem);
-      width: 9.6rem;
+      margin-right: 1rem;
+      width: calc(100% / 2 - 0.5rem);
      cursor: pointer;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
-      height: 13.4rem;
+      height: 25rem;
      position: relative;
      // &.active{
      // 	border: 2px solid;
@@ -1538,7 +1549,16 @@ export default defineComponent({
  margin-right: 4rem;
 }

-
+.upload_file_item {
+  :deep(.ant-upload-picture-card-wrapper) {
+    .ant-upload-list-picture-card {
+      .ant-upload-select-picture-card {
+        width: 9.6rem;
+        height: 13.4rem;
+      }
+    }
+  }
+}
 .prompt-container {
  margin-top: 4rem;
  margin-bottom: 3rem;
@@ -1551,19 +1571,18 @@ export default defineComponent({
  .input_border {
    padding-bottom: 0;
    .input_box {
-      .input_box_btnBox .textarea {
-        min-height: 12.7rem;
+      .input_box_btnBox {
+        position: relative;
+        .textarea {
+          min-height: 12.7rem;
+          max-height: none;
+        }
      }
    }
  }
-  .input_box_btnBox{
-    padding-bottom: 4rem;
-  }
  .asistant-btn {
-    // width: 9rem;
-    padding: 0.45rem 0.6rem;
    height: 2.3rem;
-    line-height: 2.3rem;
+    padding: 0 0.6rem;
    font-size: 1rem;
    font-weight: 400;
    color: #313131;
@@ -1580,6 +1599,9 @@ export default defineComponent({
    cursor: pointer;
    .asistant-icon {
      font-size: 1rem;
+      margin-right: 0;
+      width: initial;
+      // margin-top: -0.2rem;
    }
  }
 }
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -284,7 +284,8 @@ export default {
    PromptAssit: '提示词助手',
    AssitSubTitle: '您可以复制并使用以下提示词：',
    CopySuccess: '已复制到剪贴板',
-    CopyFiled: '复制失败'
+    CopyFiled: '复制失败',
+    noPrompt:'请输入提示词'
  },
  poseTransfer: {
    SelectDesign: '产品图',
@@ -1224,6 +1225,8 @@ export default {
    basic: '基础',
    flipHorizontal: '水平翻转',
    flipVertical: '垂直翻转',
+	cropAndAdd: '裁剪并添加',
+	cropImage: '裁剪图片',
 	group: '组合',
    //长毛笔
    FurSettings: '长毛笔设置',
@@ -1367,7 +1370,7 @@ export default {
    liquefactionEnvironment: '准备液化环境',
    liquefactionEnvironmentLoading: '正在准备液化环境，请稍候...',
    LiqueficationFailed: '液化工具启动失败',
-	TextLayer: '文本图层',
+    TextLayer: '文本图层',
    DoubleClickText: '双击编辑文本',
    LiquidationcuoError: '未选择有效图像或图层不适合液化操作',
    ErrorMessage: '错误提示',
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -291,10 +291,11 @@ export default {
    jsContent2: 'Please select at least one picture',
    jsContent3: 'One of your images failed to generate. Please try again.',
    Prompt: 'Prompt',
-    PromptAssit: 'Prompt Assit',
+    PromptAssit: 'Prompt Assist',
    AssitSubTitle: 'You can copy following prompt and try:',
    CopySuccess: 'Copied to clipboard',
-    CopyFiled: 'Failed to copy'
+    CopyFiled: 'Failed to copy',
+    noPrompt:'Please enter prompt'
  },
  poseTransfer: {
    SelectDesign: 'Product image',
@@ -1259,6 +1260,8 @@ export default {
    basic: 'Basic',
    flipHorizontal: 'Horizontal Flip',
    flipVertical: 'Vertical Flip',
+	cropAndAdd: 'Crop and Add',
+	cropImage: 'Crop Image',
 	group: 'Group',
    //长毛笔
    FurSettings: 'FurSettings',
@@ -1409,7 +1412,7 @@ export default {
    liquefactionEnvironmentLoading:
      'The liquefaction environment is being prepared. Please wait a moment...',
    LiqueficationFailed: 'Liquefication tool failed to start.',
-	TextLayer: 'Text Layer',
+    TextLayer: 'Text Layer',
    DoubleClickText: 'Double-click to edit the text',
    LiquidationError:
      'No valid image selected or the layer does not fit the liquefaction operation.',
				`@@ -0,0 +1 @@`
				<svg t="1762937400333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4603" width="200" height="200"><path d="M817.088 484.96l-512-323.744C295.232 154.976 282.752 154.592 272.576 160.224 262.336 165.856 256 176.608 256 188.256l0 647.328c0 11.648 6.336 22.4 16.576 28.032 4.8 2.656 10.112 3.968 15.424 3.968 5.952 0 11.904-1.664 17.088-4.928l512-323.616C826.368 533.184 832 522.976 832 512 832 501.024 826.368 490.816 817.088 484.96z" fill="currentColor" p-id="4604"></path></svg>