diff --git a/src/component/Canvas/CanvasEditor/components/CropImage.vue b/src/component/Canvas/CanvasEditor/components/CropImage.vue
index c2849e03..6eb5d7b7 100644
--- a/src/component/Canvas/CanvasEditor/components/CropImage.vue
+++ b/src/component/Canvas/CanvasEditor/components/CropImage.vue
@@ -277,16 +277,6 @@
 			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);
diff --git a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
index 2b5d104a..675c9db4 100644
--- a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
+++ b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
@@ -21,6 +21,7 @@ const props = defineProps({
     type: Boolean,
     default: true, // 是否显示图层面板
   },
+  isBackgroundChangeable: Boolean,
 });
 
 const emit = defineEmits([
@@ -312,7 +313,7 @@ onMounted(() => {
             "
           />
         </div>
-        <div class="setting-group">
+        <div class="setting-group" v-if="isBackgroundChangeable">
           <span class="setting-label">{{ $t("Canvas.color") }}</span>
           <div class="color-picker-wrapper">
             <input
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
index b7c24f12..c2b5755f 100644
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
@@ -279,9 +279,7 @@
 				layerManager: props.layerManager,
 				canvas: props.canvas,
 				toolManager: props.toolManager,
-			}).then(res=>{
-				console.log("========",res);
-			});
+			})
 		});
 	};
 
diff --git a/src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue b/src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue
index 33a0c17c..2c01a627 100644
--- a/src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/TextEditorPanel.vue
@@ -620,12 +620,19 @@ export default {
       // 监听显示文本编辑面板事件
       document.addEventListener("showTextEditor", showEditor);
       document.addEventListener("hideTextEditor", close);
-
+      if(props.canvas) {
+        // props.canvas.on("text:editing:entered", showEditor);
+        props.canvas.on("text:editing:exited", close);
+      }
     });
 
     onUnmounted(() => {
       document.removeEventListener("showTextEditor", showEditor);
       document.removeEventListener("hideTextEditor", close);
+      if(props.canvas) {
+        // props.canvas.off("text:editing:entered", showEditor);
+        props.canvas.off("text:editing:exited", close);
+      }
     });
 
     // 返回所有需要在模板中使用的数据和方法
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index bedc9cbb..eecafc6f 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -101,7 +101,10 @@ const props = defineProps({
     type: Boolean,
     default: false, // 是否允许擦除背景图层
   },
-
+  isBackgroundChangeable: {
+    type: Boolean,
+    default: true, // 是否允许修改背景图层
+  },
   showFixedLayer: {
     type: Boolean,
     default: false, // 是否显示固定图层
@@ -305,6 +308,7 @@ onMounted(async () => {
     commandManager,
     layerManager,
     toolManager,
+	isRedGreenMode,
 	pasteText: (text) => {
     //   console.log("粘贴的文本:", text);
 	  handleAddText(text);
@@ -530,15 +534,15 @@ onBeforeUnmount(() => {
   //   return; // 开发环境下不卸载组件
   // }
   console.log("onBeforeUnmount  组件卸载，清理资源...");
-  // canvasManager?.dispose?.();
-  // commandManager?.dispose?.();
-  // layerManager?.dispose?.();
-  // keyboardManager?.dispose?.();
-  // toolManager?.dispose?.();
-  // liquifyManager?.dispose?.();
-  // selectionManager?.dispose?.();
-  // redGreenModeManager?.dispose?.();
-  // minimapManager?.dispose?.();
+  canvasManager?.dispose?.();
+  commandManager?.dispose?.();
+  layerManager?.dispose?.();
+  keyboardManager?.dispose?.();
+  toolManager?.dispose?.();
+  liquifyManager?.dispose?.();
+  selectionManager?.dispose?.();
+  redGreenModeManager?.dispose?.();
+//   minimapManager?.dispose?.();
   canvasManager = null;
   commandManager = null;
   layerManager = null;
@@ -919,6 +923,7 @@ provide("cropImage", cropImage); // 提供给子组件使用
 const isDragOver = ref(false);
 const canvasDragover = (e) => {
   e.preventDefault();
+  if (isRedGreenMode.value) return;
   const types = e.dataTransfer.types;
   isDragOver.value = types.includes("Files");
 };
@@ -926,12 +931,14 @@ const canvasDragover = (e) => {
 // 处理画布容器的拖离事件
 const canvasDragleave = (e) => {
   e.preventDefault();
+  if (isRedGreenMode.value) return;
   isDragOver.value = false;
 };
 
 // 处理画布容器的拖放事件
 const canvasDragdrop = (e) => {
   e.preventDefault();
+  if (isRedGreenMode.value) return;
   isDragOver.value = false;
   const files = e.dataTransfer.files;
   for (const file of files) {
@@ -1149,6 +1156,7 @@ defineExpose({
         :brushSize="brushSize"
         :enabledRedGreenMode="enabledRedGreenMode"
         :showLayersPanel="showLayersPanel"
+        :isBackgroundChangeable="isBackgroundChangeable"
         @update:canvasWidth="canvasWidth = $event"
         @update:canvasHeight="canvasHeight = $event"
         @update:canvasColor="canvasColor = $event"
@@ -1209,13 +1217,6 @@ defineExpose({
           :activeTool="activeTool"
         />
 
-        <!-- 文本编辑面板 -->
-        <TextEditorPanel
-          v-if="canvasManagerLoaded && !enabledRedGreenMode"
-          :canvas="canvasManager && canvasManager.canvas"
-          :commandManager="commandManager"
-        />
-
         <!-- 液化编辑面板 -->
         <LiquifyPanel
           v-if="canvasManagerLoaded && !enabledRedGreenMode"
@@ -1248,6 +1249,13 @@ defineExpose({
           :activeTool="activeTool"
         />
 
+        <!-- 文本编辑面板 -->
+        <TextEditorPanel
+          v-if="canvasManagerLoaded && !enabledRedGreenMode"
+          :canvas="canvasManager && canvasManager.canvas"
+          :commandManager="commandManager"
+        />
+
         <div class="zoom-info">
           {{ t("Canvas.Scale") }}: {{ currentZoom }}%
           <button class="reset-zoom" @click="resetZoom">
diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
index fc67ea28..ee2d6cc0 100644
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -2303,9 +2303,9 @@ export class LayerManager {
    */
   dispose() {
     // 清空画布
-    if (this.canvas) {
-      this.canvas.clear();
-    }
+    // if (this.canvas) {
+    //   this.canvas.clear();
+    // }
 
     // 清空图层数据
     if (this.layers && this.layers.value) {
diff --git a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js b/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
index 15ae7463..4fd3df49 100644
--- a/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js
@@ -65,7 +65,7 @@ export class BrushManager {
       description: "基础铅笔工具，适合精细线条绘制",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/pencil.jpg',
+	imgUrl:'/image/brush/pencil.jpg',
     });
 
     // 注册材质笔刷
@@ -74,7 +74,7 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/texture.jpg',
+	imgUrl:'/image/brush/texture.jpg',
     });
 
     // 注册集成的笔刷类型
@@ -83,63 +83,63 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/crayon.jpg',
+	imgUrl:'/image/brush/crayon.jpg',
     });
     brushRegistry.register("fur", FurBrush, {
       name: this.t("Canvas.Fur"),	
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/fur.jpg',
+	imgUrl:'/image/brush/fur.jpg',
     });
     brushRegistry.register("ink", InkBrush, {
       name: this.t("Canvas.Ink"),
       description: "墨水笔刷，适合书写和绘图",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/ink.jpg',
+	imgUrl:'/image/brush/ink.jpg',
     });
     brushRegistry.register("", LongfurBrush, {
       name: this.t("Canvas.Longfur"),
       description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/longFur.jpg',
+	imgUrl:'/image/brush/longFur.jpg',
     });
     brushRegistry.register("writing", WritingBrush, {
       name: this.t("Canvas.Writing"),
       description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/writing.jpg',
+	imgUrl:'/image/brush/writing.jpg',
     });
     brushRegistry.register("marker", MarkerBrush, {
       name: this.t("Canvas.Marker"),
       description: "马克笔笔刷，适合粗线条和填充",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/marker.jpg',
+	imgUrl:'/image/brush/marker.jpg',
     });
     brushRegistry.register("pen", CustomPenBrush, {
       name: this.t("Canvas.Pen"),
       description: "自定义钢笔笔刷，适合书写和绘图",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/pen.jpg',
+	imgUrl:'/image/brush/pen.jpg',
     });
     brushRegistry.register("ribbon", RibbonBrush, {
       name: this.t("Canvas.Ribbon"),
       description: "丝带笔刷，适合创建流动的丝带效果",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/ribbon.jpg',
+	imgUrl:'/image/brush/ribbon.jpg',
     });
     brushRegistry.register("shaded", ShadedBrush, {
       name: this.t("Canvas.Shaded"),
       description: "阴影笔刷，适合创建渐变和阴影效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/shaded.jpg',
+	imgUrl:'/image/brush/shaded.jpg',
     });
 
     brushRegistry.register("spray", SprayBrush, {
@@ -147,7 +147,7 @@ export class BrushManager {
       description: "模拟喷枪效果，创建散点效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
-	imgUrl:'./image/brush/spray.jpg',
+	imgUrl:'/image/brush/spray.jpg',
     });
 
     // brushRegistry.register("sketchy", SketchyBrush);
diff --git a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
index d1298dbf..49c1e110 100644
--- a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
@@ -12,6 +12,7 @@ export class KeyboardManager {
    * @param {Object} options.layerManager 图层管理器实例
    * @param {Function} options.pasteText 粘贴文本回调函数
    * @param {Function} options.pasteImage 粘贴图片回调函数
+   * @param {Ref<Boolean>} options.isRedGreenMode 是否为红绿模式
    * @param {HTMLElement} options.container 容器元素，用于添加事件监听
    */
   constructor(options = {}) {
@@ -21,6 +22,7 @@ export class KeyboardManager {
     this.container = options.container || document;
 	this.pasteText = options.pasteText || (() => {});
 	this.pasteImage = options.pasteImage || (() => {});
+	this.isRedGreenMode = options.isRedGreenMode;
 
     // 检测平台类型
     this.platform = this.detectPlatform();
@@ -207,6 +209,7 @@ export class KeyboardManager {
    */
   handlePaste(event) {
     event.preventDefault(); // 阻止默认粘贴行为
+    if(this.isRedGreenMode.value) return;
 	const text = event.clipboardData?.getData("text/plain") || "";
 	if(/^aida_copy_canvas_layer/.test(text)) return;
 	const items = event.clipboardData?.items || [];
@@ -429,30 +432,35 @@ export class KeyboardManager {
       case "copy":
         // 复制逻辑
         console.log("复制当前选中图层");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.copyLayer(this.layerManager.activeLayerId.value);
         break;
 
       case "paste":
         // 粘贴逻辑
         console.log("粘贴");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.pasteLayer();
         break;
 
       case "cut":
         // 剪切逻辑
         console.log("剪切");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.cutLayer(this.layerManager.activeLayerId.value);
         break;
 
       case "delete":
         // 删除逻辑
         console.log("删除");
+		if(this.isRedGreenMode.value) return;
         this.layerManager.removeLayer(this.layerManager.activeLayerId.value);
         break;
 
       case "selectAll":
         // 全选逻辑
         console.log("全选");
+		if(this.isRedGreenMode.value) return;
         // 这里需要实现全选逻辑 TODO:  是否在选择模式下才可以全选？
         if (this.layerManager) {
           this.layerManager.selectAll();
@@ -728,18 +736,7 @@ export class KeyboardManager {
    */
   dispose() {
     // 移除事件监听
-    this.container.removeEventListener("keydown", this._handleKeyDown);
-    this.container.removeEventListener("keyup", this._handleKeyUp);
-    this.container.removeEventListener("paste", this._handlePaste);
-
-    // 如果有触摸事件，也移除它们
-    if (this.isTouchDevice) {
-      this.container.removeEventListener("touchstart", this._handleTouchStart);
-      this.container.removeEventListener("touchmove", this._handleTouchMove);
-      this.container.removeEventListener("touchend", this._handleTouchEnd);
-      this.container.removeEventListener("touchcancel", this._handleTouchEnd);
-    }
-
+    this.removeEvents();
     // 清除引用
     this.toolManager = null;
     this.commandManager = null;
diff --git a/src/component/home/tools/poseTransfer/Tips.vue b/src/component/home/tools/poseTransfer/Tips.vue
new file mode 100644
index 00000000..7f67d123
--- /dev/null
+++ b/src/component/home/tools/poseTransfer/Tips.vue
@@ -0,0 +1,82 @@
+<template>
+  <div ref="modalContainer"></div>
+  <a-modal
+    class="prompt-modal generalModel"
+    v-model:visible="showModal"
+    :footer="null"
+    :get-container="() => $refs.modalContainer"
+    width="78%"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    wrapClassName="#app"
+    :keyboard="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="handleClose()">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="title-container">
+      <div class="title">{{ $t('ProductImg.PromptAssit') }}</div>
+      <div class="sub-title">{{ $t('ProductImg.AssitSubTitle') }}</div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef } from 'vue'
+
+import { downloadIamge } from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+const { t, locale } = useI18n()
+
+const modalContainer = useTemplateRef('modalContainer')
+const showModal = defineModel<boolean>('showModal', { required: true })
+
+const handleClose = () => {
+  showModal.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.prompt-modal {
+  .title-container {
+    .title {
+      font-size: 3.5rem;
+      color: #181818;
+    }
+    .sub-title {
+      font-size: 2rem;
+      font-weight: 400;
+      color: #000;
+    }
+  }
+}
+</style>
diff --git a/src/component/home/tools/poseTransfer/index.vue b/src/component/home/tools/poseTransfer/index.vue
index 2f93be4d..981c6879 100644
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -1,1053 +1,1292 @@
 <template>
-	<div class="poseTransfer">
-		<div class="configuratioBox" :class="{active:button.left}">
-			<div class="configuratio">
-				<div class="content">
-					<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,index in fileList" @click="selectImgItem(item)">
-								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
-									<a-spin size="large" />
-								</div>
-								<img v-show="item.designOutfitUrl || item.imgUrl || item.url" :src="item.designOutfitUrl || item.imgUrl || item.url" alt="">	
-								<div v-show="item.designOutfitUrl || item.imgUrl || item.url" class="btnBox">
-									<div :class="{active:item.isChecked}">
-										<i class="fi fi-br-check"></i>
-									</div>
-									<div @click.stop="setUploadDelete(item,index)" v-if="source != 'design'">
-										<i class="fi fi-rr-trash icon_delete"></i>
-									</div>
-								</div>
-							</div>
-							<div class="upload_item item" v-show="!isDesignPage">
-								<div class="upload_file_item">
-									<a-upload
-										:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
-										list-type="picture-card"
-										:capture="null"
-										:data="{
-											...upload,
-										}"
-										:headers="{ Authorization: token }"
-										:before-upload="beforeUpload"
-										:multiple="!!upload.projectId"
-										accept=".jpg,.png,.jpeg,.bmp"
-										@change="(file) => fileUploadChange(file)"
-									>
-										<div
-											class="upload_tip_block"
-										>
-											<i class="fi fi-br-upload"></i>
-											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-										</div>
-									</a-upload>
-								</div>	
-							</div>
-						</div>
-					</div>
-					<div class="prompt-input-container" v-show="!showMotion">
-						<div class="title">{{ $t('ProductImg.Prompt') }}</div>
-						<promptInput :content="prompt" ref="promptInput" />
-					</div>
-					<div class="poses" v-show="showMotion">
-						<div class="head">
-							<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
-						</div>
-						<div class="imgBox" v-mousewheel>
-							<div class="item" v-for="item in poseList" @click="selectPose(item)">
-								<img :src="item.firstFrame" 
-									alt=""
-									@mouseenter.stop="gifPlay($event,item)"
-									@mouseleave.stop="gifPause($event,item)" 
-								>	
-								<div class="btnBox">
-									<div :class="{active:item.isChecked}">
-										<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>
-				</div>	
-			</div>
-			<div class="generage_btn_box" style="margin-left: auto;">
-				<!-- <div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
+  <div class="poseTransfer">
+    <div class="configuratioBox" :class="{ active: button.left }">
+      <div class="configuratio">
+        <div class="content">
+          <div class="video-type-container">
+            <div class="title">{{ $t('poseTransfer.VideoType') }}</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>
+              <i class="fi fi-rs-interrogation tips-icon" />
+            </div>
+            <div class="imgBox" v-mousewheel>
+              <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" />
+                </div>
+                <img
+                  v-show="item.designOutfitUrl || item.imgUrl || item.url"
+                  :src="item.designOutfitUrl || item.imgUrl || item.url"
+                  alt=""
+                />
+                <div
+                  v-show="item.designOutfitUrl || item.imgUrl || item.url"
+                  class="btnBox"
+                >
+                  <div :class="{ active: item.isChecked }">
+                    <i class="fi fi-br-check"></i>
+                  </div>
+                  <div
+                    @click.stop="setUploadDelete(item, index)"
+                    v-if="source != 'design'"
+                  >
+                    <i class="fi fi-rr-trash icon_delete"></i>
+                  </div>
+                </div>
+              </div>
+              <template v-if="videoType === 3">
+                <div
+                  class="item lastframe-list"
+                  :class="{ active: item.id == selectImg.id }"
+                  v-for="(item, index) in lastFrameList"
+                  @click="selectImgItem(item, true)"
+                >
+                  <div
+                    class=""
+                    v-if="item.status == 'uploading'"
+                    style="display: flex; align-items: center"
+                  >
+                    <a-spin size="large" />
+                  </div>
+                  <img
+                    v-show="item.designOutfitUrl || item.imgUrl || item.url"
+                    :src="item.designOutfitUrl || item.imgUrl || item.url"
+                    alt=""
+                  />
+                  <div
+                    v-show="item.designOutfitUrl || item.imgUrl || item.url"
+                    class="btnBox"
+                  >
+                    <div :class="{ active: item.isChecked }">
+                      <i class="fi fi-br-check"></i>
+                    </div>
+                    <div
+                      @click.stop="setUploadDelete(item, index)"
+                      v-if="source != 'design'"
+                    >
+                      <i class="fi fi-rr-trash icon_delete"></i>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-if="fileList.length < 1">
+                <div class="upload_item item" v-show="!isDesignPage">
+                  <div class="upload_file_item">
+                    <a-upload
+                      key="common"
+                      :action="
+                        getUploadUrl() + '/api/history/toProductImageElementUpload'
+                      "
+                      list-type="picture-card"
+                      :capture="null"
+                      :data="{
+                        ...upload
+                      }"
+                      :headers="{ Authorization: token }"
+                      :before-upload="beforeUpload"
+                      :multiple="!!upload.projectId"
+                      accept=".jpg,.png,.jpeg,.bmp"
+                      @change="file => fileUploadChange(file)"
+                    >
+                      <div class="upload_tip_block">
+                        <i class="fi fi-br-upload"></i>
+                        <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+                      </div>
+                    </a-upload>
+                  </div>
+                </div>
+              </template>
+              <template v-if="videoType === 3 && lastFrameList?.length < 1">
+                <div class="upload_item item last_frames" v-show="!isDesignPage">
+                  <div class="upload_file_item">
+                    <a-upload
+                      key="lastframes"
+                      :action="
+                        getUploadUrl() + '/api/history/toProductImageElementUpload'
+                      "
+                      list-type="picture-card"
+                      :file-list="lastFrameList"
+                      :capture="null"
+                      :data="{
+                        ...upload
+                      }"
+                      :headers="{ Authorization: token }"
+                      :before-upload="beforeUpload"
+                      accept=".jpg,.png,.jpeg,.bmp"
+                      @change="file => fileUploadChangeLast(file)"
+                    >
+                      <div class="upload_tip_block">
+                        <i class="fi fi-br-upload"></i>
+                        <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+                      </div>
+                    </a-upload>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div class="prompt-input-container" v-show="!showMotion">
+            <div class="title">{{ $t('ProductImg.Prompt') }}</div>
+            <promptInput :content="prompt" ref="promptInput" />
+          </div>
+          <div class="poses" v-show="showMotion">
+            <div class="head">
+              <div class="text">{{ $t('poseTransfer.Selectpose') }}</div>
+            </div>
+            <div class="imgBox" v-mousewheel>
+              <div class="item" v-for="item in poseList" @click="selectPose(item)">
+                <img
+                  :src="item.firstFrame"
+                  alt=""
+                  @mouseenter.stop="gifPlay($event, item)"
+                  @mouseleave.stop="gifPause($event, item)"
+                />
+                <div class="btnBox">
+                  <div :class="{ active: item.isChecked }">
+                    <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>
+        </div>
+      </div>
+      <div class="generage_btn_box" style="margin-left: auto">
+        <!-- <div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
 					{{ $t('Generate.Generate') }}
 				</div> -->
-				<div class="generage_btn started_btn"  v-show="!isGenerate">
-					<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
-					<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
-					<div class="content" v-show="speedState">
-						<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
-					</div>
-				</div>
-				<div v-show="isGenerate" class="generage_btn started_btn">
-					<i class="fi fi-br-loading"></i>
-				</div>
-				<!-- <div v-show="isGenerate && remGenerate" class="generage_btn started_btn">
+        <div class="generage_btn started_btn" v-show="!isGenerate">
+          <i
+            class="fi fi-bs-magic-wand"
+            style="background-color: #000; font-size: 2.3rem; flex: 1; margin: 0"
+            @click="getgenerate()"
+          ></i>
+          <div
+            class="icon iconfont icon-xiala"
+            :class="{ active: speedState }"
+            @click.stop="openSpeed"
+          ></div>
+          <div class="content" v-show="speedState">
+            <div
+              v-for="item in speedList"
+              :key="item.value"
+              :class="{ active: item.value == speedData.value }"
+              @click.stop="setSpeed(item)"
+              :title="item.title"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div v-show="isGenerate" class="generage_btn started_btn">
+          <i class="fi fi-br-loading"></i>
+        </div>
+        <!-- <div v-show="isGenerate && remGenerate" class="generage_btn started_btn">
 					<i class="fi fi-br-loading"></i>
 				</div> -->
-				<!-- <div v-show="remGenerate" @click="setRemoveGenerate" class="generage_btn started_btn">
+        <!-- <div v-show="remGenerate" @click="setRemoveGenerate" class="generage_btn started_btn">
 					{{$t('Generate.Close')}}
 				</div> -->
-			</div>
-		</div>
-		<div class="likeBox">
-			<!-- {{ locale }}
+      </div>
+    </div>
+    <div class="likeBox">
+      <!-- {{ locale }}
 			<img src="@/assets/images/homePage/toolsGuide/productCN.png" alt="">
 			<img src="@/assets/images/homePage/toolsGuide/productEN.png" alt=""> -->
-			<div class="element">
-				<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.LikeVideo')}}</span></div>
-				<div class="content">
-					<generalDrag ref="generalDragLeft" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
-				</div>
-				<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
+      <div class="element">
+        <div class="title">
+          <i class="fi fi-rs-comments"></i>
+          <span>{{ $t('poseTransfer.LikeVideo') }}</span>
+        </div>
+        <div class="content">
+          <generalDrag
+            ref="generalDragLeft"
+            :list="likeList"
+            :isLike="true"
+            :isVideo="true"
+            @setBtn="likeSetBtn"
+          ></generalDrag>
+        </div>
+        <!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
 					<span class="icon iconfont icon-xiala"></span>
 				</div> -->
-				<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
-					<span class="icon iconfont icon-xiala"></span>
-				</div>
-			</div>
-		</div>
-		<div class="noLikeBox" :class="{active:button.right,designPage:isDesignPage}">
-			<div class="element">
-				<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.InputVideo')}}</span></div>
-				<div class="content">
-					<generalDrag ref="generalDragRight" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
-				</div>
-			</div>
-		</div>
-	</div>
+        <div class="btnRight" @click="setSize('right')" :class="{ active: button.right }">
+          <span class="icon iconfont icon-xiala"></span>
+        </div>
+      </div>
+    </div>
+    <div class="noLikeBox" :class="{ active: button.right, designPage: isDesignPage }">
+      <div class="element">
+        <div class="title">
+          <i class="fi fi-rs-comments"></i>
+          <span>{{ $t('poseTransfer.InputVideo') }}</span>
+        </div>
+        <div class="content">
+          <generalDrag
+            ref="generalDragRight"
+            :list="noLikeList"
+            :isVideo="true"
+            @setBtn="noLikeSetBtn"
+          ></generalDrag>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,inject,nextTick,watch,createVNode,toRefs, reactive, onMounted} from 'vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { Https } from "@/tool/https";
-import { useStore } from "vuex";
-import { Upload,message,Modal } from 'ant-design-vue';
+import {
+  defineComponent,
+  computed,
+  ref,
+  inject,
+  nextTick,
+  watch,
+  createVNode,
+  toRefs,
+  reactive,
+  onMounted
+} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { Https } from '@/tool/https'
+import { useStore } from 'vuex'
+import { Upload, message, Modal } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
-import generalDrag from '@/component/modules/generalDrag.vue';
-import { getUploadUrl,isMoible,getMinioUrl } from "@/tool/util";
-import { getCookie,setCookie } from "@/tool/cookie";
-import  showViewVideo from "@/tool/mount";
-import router from '@/router';
-import promptInput from "./promptInput.vue";
+import generalDrag from '@/component/modules/generalDrag.vue'
+import { getUploadUrl, isMoible, getMinioUrl } from '@/tool/util'
+import { getCookie, setCookie } from '@/tool/cookie'
+import showViewVideo from '@/tool/mount'
+import router from '@/router'
+import promptInput from './promptInput.vue'
 
 export default defineComponent({
-	components:{
-		generalDrag,
-		promptInput
-	},
-	props:{
-		isDesignPage:{
-			type:Boolean,
-			default:false,
-		},
-		source:{
-			type:String,
-			default:'',
-		},
-	},
-	emit:['unLike'],
-	setup(props,{emit}) {
-		const {t,locale} = useI18n()
-		const store = useStore();
-		const route = useRoute();
-		const data:any = reactive({
-			button:{
-				left:false,
-				right:false,
-			},
-			currentList:[],
-			fileList:[],
-			selectImg:{},
-			token:getCookie('token'),
-			upload:{
-				projectId:computed(()=>store.state.Workspace.probjects.id),
-				CollectionType:'PoseTransfer',
-			},
-			waitList:[],
-			likeList:computed(()=>{
-				if(!route.query?.id && route.query.tools == 'poseTransfer'){
-					return []
-				}else{
-					return store.state.HomeStoreModule.poseTransfer.likedList
-				}
-			}),
-			noLikeList:computed(()=>{
-				if(!route.query?.id && route.query.tools == 'poseTransfer'){
-					return []
-				}else{
-					return store.state.HomeStoreModule.poseTransfer.list
-				}
-			}),
-			isGenerate:false,//判断是否正在进行generate
-			remGenerate:false,
-			removeGenerate:false,
-			generateTime:null as any,
-			poseList:[],
-			selectPose:null as any,
-			prompt:[
-				{ id: '1', type: 'text', value: '11111' },
-				{ id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
-				{ id: '3', type: 'text', value: '333333' },
-				{ id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
-			]
-		})
-		let speed = reactive({
-			speedList:[
-				{
-					title:'',
-					label:t('speedList.toproductBasic'),
-					value:'',
-				},{
-					title:'',
-					label:t('speedList.toproductFlus'),
-					value:'wx',
-				},
-			],
-			speedState:false,
-			speedData:{
-				title:'Generate high-quality content',
-				label:t('speedList.toproductBasic'),
-				value:'',
-			},
-		})
-		const setIsShowMark:any = inject('setIsShowMark')
-		const createProbject:any = inject('createProbject',()=>{})
-		const dataDom = reactive({
-			generalDragLeft:null as any,
-			generalDragRight:null as any,
-			scaleVideo:null as any,
-			promptInput: null as any,
-		})
-		const selectImgItem = (item:any,)=>{
-			if(item.isChecked){
-				item.isChecked = !item.isChecked
-				data.selectImg = {};
-				return
-			}
-			data.selectImg = item
-			data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
-			data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
-			item.isChecked = true
-			if(item.url || item.imgUrl)data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
-		}
-		const openSetData = (designList:any)=>{
-			if(props.isDesignPage){//标识design页面打开的tools
-				data.fileList = designList
-			}else{
-				data.currentList = store.state.UploadFilesModule.modularData.toProduct
-				data.currentList = data.currentList?data.currentList:[]
-				setIsShowMark(false)
-			}
-			// dataDom.generalDrag.openSetData()
-			if(data.poseList.length == 0){
-				getPoseList()		
-			}
-			// setCloudImg()
-		}
-		// const setCloudImg = ()=>{
-		// 	let arr = store.state.UploadFilesModule.cloudList
-		// 	let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
-		// 	list.forEach((item:any)=>{
-		// 		item.url = item.firstFrameUrl	
-		// 		data.noLikeList.unshift(item)
-		// 	})
-		// 	store.commit('clearCloudList','poseTransfer')
-		// }
-		const gifPlay = (e:any,item:any)=>{
-			e.target.src = item.gif//使用gif图片
-		}
-		const gifPause = (e:any,item:any)=>{
-			e.target.src = item.firstFrame//静态图片
-		}
-		const handlePlayMotion = item => {
-			
-		}
-		const getPoseList = ()=>{
-			Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
-				rv[0].isChecked = true
-				data.selectPose = rv[0]?.id || 1
-				data.poseList = rv
-			})	
-		}
-		const setSize = (str:any)=>{
-			data.button[str] = !data.button[str]
-			setItemPosition()
-		}
-		const setItemPosition = ()=>{
-			setTimeout(()=>{
-				dataDom.generalDragLeft.setItemPosition()
-				dataDom.generalDragRight.setItemPosition()
-			},200)
-		}
-		const getgenerate = async ()=>{
-			if(!data.selectImg.minioUrl)return message.info(t('ProductImg.jsContent2'))
-			if(data.isGenerate)return
-			await new Promise((res,reject)=>{
-				Modal.confirm({
-					title: t('poseTransfer.jsContent1'),
-					icon: createVNode(ExclamationCircleOutlined),
-					okText: 'Yes',
-					cancelText: 'No',
-					mask:false,
-					centered:true,
-					onOk() {
-						res()
-					},
-					cancel(){
-						reject()
-					}
-				});
-			}).then(()=>{
-
-			}).catch(()=>{
-				return
-			})
-			data.isGenerate = true
-			// data.remGenerateTime = setTimeout(()=>{
-			// },10000)
-			// const promptText = dataDom.promptInput.getFullText()
-			let value = {
-				poseId:data.selectPose,
-				projectId:store.state.Workspace.probjects.id,
-				productImage:data.selectImg.minioUrl,
-				modelName:speed.speedData.value,
-				isDefaultLike:false,//表示是否生成就like
-				parentId:data.selectImg?.parentId,//parentId 添加在指定父级里面
-				userLikeSortId:null,//是否进行排序
-			}
-			Https.axiosPost(Https.httpUrls.poseTransform,value).then((rv)=>{
-				data.remGenerate = true
-				data.noLikeList.unshift({taskId:rv.taskId,parentId:data.selectImg.parentId})
-				setGenerate(rv.taskId)
-			}).catch((res:any)=>{
-				data.isGenerate = false
-				clearInterval(data.remGenerateTime)
-				data.remGenerate = false
-				if(res.errCode === 2){
-					Modal.confirm({
-						title: res.errMsg,
-						icon: createVNode(ExclamationCircleOutlined),
-						okText: 'Yes',
-						cancelText: 'No',
-						mask:false,
-						zIndex:99999,
-						centered:true,
-						onOk() {
-							store.commit("setUpgradePlan", true);
-						},
-						onCancel(){
-							
-						}
-					});
-				}
-			})
-		}
-		const setGenerate = (dataList:any)=>{
-			let list:any = [dataList]
-			data.waitList = list
-			let state = true
-			data.generateTime = setInterval(()=>{
-				if(!data.isGenerate || !data.remGenerate)return
-				if(!state)return
-				state = false
-				Https.axiosPost(Https.httpUrls.poseTransformResult,list).then(
-					(rv) => {
-						state = true
-						if(data.isGenerate){//防止取消后有正在执行的获取状态
-							// data.waitList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
-							rv.forEach((element:any) => {
-								if(element.status == 'Success'){
-									element.url = element.firstFrameUrl
-									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
-									data.noLikeList[index] = element
-									list = ''
-									clearInterval(data.generateTime)
-									clearInterval(data.remGenerateTime)
-									data.remGenerate = false
-									data.isGenerate = false
-									// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
-									store.dispatch('getCredits')
-								}else if(element.status == 'Fail'){
-									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
-									message.info(t('ProductImg.jsContent3'))
-									data.noLikeList.splice(index,1)
-									clearInterval(data.generateTime)
-									clearInterval(data.remGenerateTime)
-									data.remGenerate = false
-									data.isGenerate = false
-									store.dispatch('getCredits')
-								}
-							});
-						}
-					}
-				).catch(res=>{
-					let index = data.noLikeList.findIndex((obj:any) => obj.taskId === list);
-					data.noLikeList.splice(index,1)
-					clearInterval(data.generateTime)
-					clearInterval(data.remGenerateTime)
-					data.isGenerate = false
-					data.remGenerate = false
-				});
-			},10000)
-		}
-		const setRemoveGenerate = ()=>{
-			//取消操作
-			data.isGenerate = false
-			data.remGenerate = false
-			clearInterval(data.generateTime)
-			if(data.waitList){
-				// let str = data.waitList.map((obj:any) => obj.taskId).join(',');
-				let value = {
-					uniqueId:data.waitList[0],
-					userId:store.state.UserHabit.userDetail.userId,
-					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-					type: 'PoseTransferation'
-				}
-				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:value}).then(
-					(rv) => {
-						data.waitList = []
-						const indexes = data.noLikeList
-						.map((item, index) => item?.status !== 'Success' ? index : -1)
-						.filter(index => index !== -1);
-						indexes.forEach((itemIndex:number)=>{
-							data.noLikeList.splice(itemIndex,1)	
-						})
-					}
-				).catch(res=>{
-				});
-			}
-		}
-		let isSelectObject = false
-		watch(()=>route?.query,(newVal)=>{
-			if(!newVal.id){
-				isSelectObject = false	
-			}
-		},{immediate:true})
-		let beforeUpload = async (file: any)=>{
-            const isJpgOrPng =
-                file.type === "image/jpeg" ||
-                file.type === "image/png" ||
-                file.type === "image/jpg" ||
-                file.type === "image/bmp";
-            if (!isJpgOrPng) {
-                message.info(useI18n().t('MoodboardUpload.jsContent3'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(useI18n().t('MoodboardUpload.jsContent4'));
-            }
-			console.log(data?.upload,isSelectObject)
-			if(!data?.upload?.projectId && !isSelectObject){
-				isSelectObject = true
-				await createProbject()
-			}
-            return (isJpgOrPng && isLt2M && data.upload.projectId) || Upload.LIST_IGNORE;
+  components: {
+    generalDrag,
+    promptInput
+  },
+  props: {
+    isDesignPage: {
+      type: Boolean,
+      default: false
+    },
+    source: {
+      type: String,
+      default: ''
+    }
+  },
+  emit: ['unLike'],
+  setup(props, { emit }) {
+    const { t, locale } = useI18n()
+    const store = useStore()
+    const route = useRoute()
+    const data: any = reactive({
+      button: {
+        left: false,
+        right: false
+      },
+      currentList: [],
+      fileList: [], // 默认上传图片的fileList
+      lastSelectImg: {}, // 选中的尾帧
+      selectImg: {},
+      token: getCookie('token'),
+      upload: {
+        projectId: computed(() => store.state.Workspace.probjects.id),
+        CollectionType: 'PoseTransfer'
+      },
+      waitList: [],
+      likeList: computed(() => {
+        if (!route.query?.id && route.query.tools == 'poseTransfer') {
+          return []
+        } else {
+          return store.state.HomeStoreModule.poseTransfer.likedList
         }
-		const fileUploadChange = (value: any)=> {
-            let file = value.file;
-			let bor = true
-            if (file.status === "done") {
-                let res = JSON.parse(file.xhr.response);
-				if(res.errCode == 0){
-					file.imgUrl = res.data.url;
-					file.id = res.data.id
-					data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
-					// data.fileList.forEach((listItem:any)=>{
-					// 	if(listItem.id == file.id){
-					// 		listItem.isChecked = true
-					// 	}else{
-					// 		listItem.isChecked = false
-					// 	}
-					// })
-					file.type = 'ProductElement'
-					// if(props.productimgMenu.value == 'Relight'){
-					// 	file.type = "ToProductImage"
-					// }
-					data.selectImg = res.data
-					// data.fileList.filter((v: any) => v.status === "done");
-					let storeData = {
-						str:'add',
-						list:[file]
-					}
-					store.commit('setUploadElement',storeData)
-				}else{
-					bor = false
-				}
-            } else if (file.status === "error") {
-				bor = false
-            }
+      }),
+      noLikeList: computed(() => {
+        if (!route.query?.id && route.query.tools == 'poseTransfer') {
+          return []
+        } else {
+          return store.state.HomeStoreModule.poseTransfer.list
         }
-		const likeSetBtn = (id:any,str:string)=>{
-			data.likeList.forEach((item:any,index:any)=>{
-				if(item.id == id && id){
-					if(str == 'zoom'){
-						showViewVideo({url:item.videoUrl})
-					}else if(str == 'like'){
-						likeFile(item,'noLike',index)
-					}
-				}
-			})
-			
-		}
-		const noLikeSetBtn = (id:any,str:string)=>{
-			if(str == 'delete'){
-				let value = {
-					id,
-					projectId:store.state.Workspace.probjects.id
-				}
-				Https.axiosGet(Https.httpUrls.generateDeleteResult,{params:value}).then(()=>{
-					let index = data.noLikeList.findIndex((v:any) => v.id == id)
-					data.noLikeList.splice(index,1)
-				})
-			}else{
-				data.noLikeList.forEach((item:any,index:any)=>{
-					if(item.id == id && id){
-						if(str == 'zoom'){
-							showViewVideo({url:item.videoUrl})
-							
-						}else if(str == 'like'){
-							likeFile(item,'like',index)
-						}
-					}
-				})
-			}
-			
-		}
-		let likeFile = (item:any,str:any,index:any) =>{
-			let url
-			let value = {
-			}
-			if(str == 'like'){
-				value = {
-					likeOrDislike:'like',
-					transformedId:item.id,
-					projectId:store.state.Workspace.probjects.id,
-					collectionSortParentId:props.isDesignPage?item.parentId:'',
-				}
-			}else{
-				value = {
-					likeOrDislike:'dislike',
-					transformedId:item.id,
-					projectId:store.state.Workspace.probjects.id,
-					collectionSortParentId:props.isDesignPage?item.parentId:'',
-				}
-				if(props.isDesignPage){
-					emit('unLike',item)
-				}
-				console.log(props.isDesignPage)
-			}
-			Https.axiosPost(Https.httpUrls.poselikeOrDisike, {},{params:value}).then(
-				(rv) => {
-					if(str == 'like'){
-						item.newLike = true
-						let value = {
-							likedList:[{
-								...item,
-								sort:rv.sort,
-								parentId:rv.parentId,
-							}],
-							str:'add',
-							index:-1,
-						}
-						store.commit("setPoseTransfer", value);
-						data.noLikeList.splice(index,1)
-					}else{
-						let value = {
-							likedList:[{
-								...item,
-							}],
-							str:'splice',
-							index:index,
-						}
-						data.noLikeList.push(item)
-						store.commit("setPoseTransfer", value);
-						
-					}
-				}
-			).catch(res=>{
-			});
-		}
-		const selectPose = (item:any)=>{
-			data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
-			item.isChecked = true
-			data.selectPose = item?.id || 1
-		}
-		const openSpeed = ()=>{
-			speed.speedState = !speed.speedState
-			if(speed.speedState){
-				document.addEventListener('click',openSpeed)
-			}else{
-				document.removeEventListener('click',openSpeed)
-			}
-		}
-		const setSpeed = (item:any)=>{
-			speed.speedData = item
-			speed.speedState = false
-			document.removeEventListener('click',openSpeed)
-		}
-		const setUploadDelete = (item:any,index:any)=>{
-			let value = {
-				id:item.id
-			}
-			Https.axiosPost(Https.httpUrls.toProductImageElementDelete,{},{params:value}).then((rv)=>{
-				let storeData = {
-					str:'delete',
-					index,
-				}
-				store.commit('setUploadElement',storeData)
-			})
-		}
-		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
-			if(props.isDesignPage)return
-			data.fileList = store.state.HomeStoreModule.uploadElement
-			data.fileList.forEach((listItem:any)=>{
-				if(listItem.id == data.selectImg.id){
-					listItem.isChecked = true
-				}else{
-					listItem.isChecked = false
-				}
-			})
-		})
-		watch(()=>data.noLikeList.length,(newVal,oldVal)=>{
-			nextTick(()=>{
-				let list = store.state.HomeStoreModule.poseTransfer.list
-				let taskIdList = list.filter((item:any)=>!item.videoUrl)[0]
-				if(taskIdList?.length > 0){
-					data.isGenerate = true
-					data.remGenerate = true
-					setGenerate(taskIdList[0].taskId)
-				}
-			})
-		},
-		{immediate: true }
-		)
+      }),
+      isGenerate: false, //判断是否正在进行generate
+      remGenerate: false,
+      removeGenerate: false,
+      generateTime: null as any,
+      poseList: [],
+      selectPose: null as any,
+      prompt: [
+        { id: '1', type: 'text', value: '11111' },
+        { id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
+        { id: '3', type: 'text', value: '333333' },
+        { id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
+      ]
+    })
+    let speed = reactive({
+      speedList: [
+        {
+          title: '',
+          label: t('speedList.toproductBasic'),
+          value: ''
+        },
+        {
+          title: '',
+          label: t('speedList.toproductFlus'),
+          value: 'wx'
+        }
+      ],
+      speedState: false,
+      speedData: {
+        title: 'Generate high-quality content',
+        label: t('speedList.toproductBasic'),
+        value: ''
+      }
+    })
+    const setIsShowMark: any = inject('setIsShowMark')
+    const createProbject: any = inject('createProbject', () => {})
+    const dataDom = reactive({
+      generalDragLeft: null as any,
+      generalDragRight: null as any,
+      scaleVideo: null as any,
+      promptInput: null as any
+    })
+    const selectImgItem = (item: any, isLastFrame = false) => {
+      // 如果点击已选中的项，则取消选中并清除对应选择
+      if (item.isChecked) {
+        item.isChecked = false
+        if (isLastFrame) {
+          data.lastSelectImg = {}
+        } else {
+          data.selectImg = {}
+        }
+        return
+      }
 
-		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' },
+      // 处理尾帧选择
+      if (isLastFrame) {
+        ;(lastFrameList.value || []).forEach(
+          (listItem: any) => (listItem.isChecked = false)
+        )
+        item.isChecked = true
+        data.lastSelectImg = item
+        if (item.url || item.imgUrl) {
+          data.lastSelectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
+        }
+        return
+      }
 
-		])
+      // 处理首帧选择
+      data.fileList.forEach((listItem: any) => (listItem.isChecked = false))
+      data.currentList.forEach((listItem: any) => (listItem.isChecked = false))
+      item.isChecked = true
+      data.selectImg = item
+      if (item.url || item.imgUrl) {
+        data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
+      }
+    }
+    const openSetData = (designList: any) => {
+      if (props.isDesignPage) {
+        //标识design页面打开的tools
+        data.fileList = designList
+      } else {
+        data.currentList = store.state.UploadFilesModule.modularData.toProduct
+        data.currentList = data.currentList ? data.currentList : []
+        setIsShowMark(false)
+      }
+      // dataDom.generalDrag.openSetData()
+      if (data.poseList.length == 0) {
+        getPoseList()
+      }
+      // setCloudImg()
+    }
+    // const setCloudImg = ()=>{
+    // 	let arr = store.state.UploadFilesModule.cloudList
+    // 	let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
+    // 	list.forEach((item:any)=>{
+    // 		item.url = item.firstFrameUrl
+    // 		data.noLikeList.unshift(item)
+    // 	})
+    // 	store.commit('clearCloudList','poseTransfer')
+    // }
+    const gifPlay = (e: any, item: any) => {
+      e.target.src = item.gif //使用gif图片
+    }
+    const gifPause = (e: any, item: any) => {
+      e.target.src = item.firstFrame //静态图片
+    }
+    const handlePlayMotion = item => {}
+    const getPoseList = () => {
+      Https.axiosGet(Https.httpUrls.getAllPose).then(rv => {
+        rv[0].isChecked = true
+        data.selectPose = rv[0]?.id || 1
+        data.poseList = rv
+      })
+    }
+    const setSize = (str: any) => {
+      data.button[str] = !data.button[str]
+      setItemPosition()
+    }
+    const setItemPosition = () => {
+      setTimeout(() => {
+        dataDom.generalDragLeft.setItemPosition()
+        dataDom.generalDragRight.setItemPosition()
+      }, 200)
+    }
+    const getgenerate = async () => {
+      if (!data.selectImg.minioUrl) return message.info(t('ProductImg.jsContent2'))
+      if (data.isGenerate) return
+      await new Promise((res, reject) => {
+        Modal.confirm({
+          title: t('poseTransfer.jsContent1'),
+          icon: createVNode(ExclamationCircleOutlined),
+          okText: 'Yes',
+          cancelText: 'No',
+          mask: false,
+          centered: true,
+          onOk() {
+            res()
+          },
+          cancel() {
+            reject()
+          }
+        })
+      })
+        .then(() => {})
+        .catch(() => {
+          return
+        })
+      data.isGenerate = true
+      // data.remGenerateTime = setTimeout(()=>{
+      // },10000)
 
+      let value = {
+        poseId: data.selectPose,
+        projectId: store.state.Workspace.probjects.id,
+        productImage: data.selectImg.minioUrl,
+        modelName: speed.speedData.value,
+        isDefaultLike: false, //表示是否生成就like
+        parentId: data.selectImg?.parentId, //parentId 添加在指定父级里面
+        userLikeSortId: null, //是否进行排序
+        mode: videoType.value
+      }
+      if (videoType.value === 2) {
+        const prompt = dataDom.promptInput.getFullText()
+        value.prompt = prompt
+      }
+      if (videoType.value === 3) {
+        const prompt = dataDom.promptInput.getFullText()
+        value.prompt = prompt
+        const lastFrameProductImage = data.lastSelectImg.minioUrl
+        value.lastFrameProductImage = lastFrameProductImage
+      }
+      console.table('videoType:', videoType.value, '请求参数', value)
+      // Https.axiosPost(Https.httpUrls.poseTransform, value)
+      //   .then(rv => {
+      //     data.remGenerate = true
+      //     data.noLikeList.unshift({
+      //       taskId: rv.taskId,
+      //       parentId: data.selectImg.parentId
+      //     })
+      //     setGenerate(rv.taskId)
+      //   })
+      //   .catch((res: any) => {
+      //     data.isGenerate = false
+      //     clearInterval(data.remGenerateTime)
+      //     data.remGenerate = false
+      //     if (res.errCode === 2) {
+      //       Modal.confirm({
+      //         title: res.errMsg,
+      //         icon: createVNode(ExclamationCircleOutlined),
+      //         okText: 'Yes',
+      //         cancelText: 'No',
+      //         mask: false,
+      //         zIndex: 99999,
+      //         centered: true,
+      //         onOk() {
+      //           store.commit('setUpgradePlan', true)
+      //         },
+      //         onCancel() {}
+      //       })
+      //     }
+      //   })
+    }
+    const setGenerate = (dataList: any) => {
+      let list: any = [dataList]
+      data.waitList = list
+      let state = true
+      data.generateTime = setInterval(() => {
+        if (!data.isGenerate || !data.remGenerate) return
+        if (!state) return
+        state = false
+        Https.axiosPost(Https.httpUrls.poseTransformResult, list)
+          .then(rv => {
+            state = true
+            if (data.isGenerate) {
+              //防止取消后有正在执行的获取状态
+              // data.waitList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
+              rv.forEach((element: any) => {
+                if (element.status == 'Success') {
+                  element.url = element.firstFrameUrl
+                  let index = data.noLikeList.findIndex(
+                    (obj: any) => obj.taskId === element.taskId
+                  )
+                  data.noLikeList[index] = element
+                  list = ''
+                  clearInterval(data.generateTime)
+                  clearInterval(data.remGenerateTime)
+                  data.remGenerate = false
+                  data.isGenerate = false
+                  // if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
+                  store.dispatch('getCredits')
+                } else if (element.status == 'Fail') {
+                  let index = data.noLikeList.findIndex(
+                    (obj: any) => obj.taskId === element.taskId
+                  )
+                  message.info(t('ProductImg.jsContent3'))
+                  data.noLikeList.splice(index, 1)
+                  clearInterval(data.generateTime)
+                  clearInterval(data.remGenerateTime)
+                  data.remGenerate = false
+                  data.isGenerate = false
+                  store.dispatch('getCredits')
+                }
+              })
+            }
+          })
+          .catch(res => {
+            let index = data.noLikeList.findIndex((obj: any) => obj.taskId === list)
+            data.noLikeList.splice(index, 1)
+            clearInterval(data.generateTime)
+            clearInterval(data.remGenerateTime)
+            data.isGenerate = false
+            data.remGenerate = false
+          })
+      }, 10000)
+    }
+    const setRemoveGenerate = () => {
+      //取消操作
+      data.isGenerate = false
+      data.remGenerate = false
+      clearInterval(data.generateTime)
+      if (data.waitList) {
+        // let str = data.waitList.map((obj:any) => obj.taskId).join(',');
+        let value = {
+          uniqueId: data.waitList[0],
+          userId: store.state.UserHabit.userDetail.userId,
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          type: 'PoseTransferation'
+        }
+        Https.axiosGet(Https.httpUrls.generateStopWaiting, { params: value })
+          .then(rv => {
+            data.waitList = []
+            const indexes = data.noLikeList
+              .map((item, index) => (item?.status !== 'Success' ? index : -1))
+              .filter(index => index !== -1)
+            indexes.forEach((itemIndex: number) => {
+              data.noLikeList.splice(itemIndex, 1)
+            })
+          })
+          .catch(res => {})
+      }
+    }
+    let isSelectObject = false
+    watch(
+      () => route?.query,
+      newVal => {
+        if (!newVal.id) {
+          isSelectObject = false
+        }
+      },
+      { immediate: true }
+    )
+    let beforeUpload = async (file: any) => {
+      const isJpgOrPng =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/bmp'
+      if (!isJpgOrPng) {
+        message.info(useI18n().t('MoodboardUpload.jsContent3'))
+      }
+      const isLt2M = file.size / 1024 / 1024 < 5
+      if (!isLt2M) {
+        message.info(useI18n().t('MoodboardUpload.jsContent4'))
+      }
+      console.log(data?.upload, isSelectObject)
+      if (!data?.upload?.projectId && !isSelectObject) {
+        isSelectObject = true
+        await createProbject()
+      }
+      return (isJpgOrPng && isLt2M && data.upload.projectId) || Upload.LIST_IGNORE
+    }
+    const fileUploadChange = (value: any) => {
+      console.log('普通上传或上传首帧---', value)
+      let file = value.file
+      let bor = true
+      if (file.status === 'done') {
+        let res = JSON.parse(file.xhr.response)
+        if (res.errCode == 0) {
+          file.imgUrl = res.data.url
+          file.id = res.data.id
+          data.currentList.forEach((listItem: any) => (listItem.isChecked = false))
+          // data.fileList.forEach((listItem:any)=>{
+          // 	if(listItem.id == file.id){
+          // 		listItem.isChecked = true
+          // 	}else{
+          // 		listItem.isChecked = false
+          // 	}
+          // })
+          file.type = 'ProductElement'
+          // if(props.productimgMenu.value == 'Relight'){
+          // 	file.type = "ToProductImage"
+          // }
+          data.selectImg = res.data
+          // data.fileList.filter((v: any) => v.status === "done");
+          let storeData = {
+            str: 'add',
+            list: [file]
+          }
+          store.commit('setUploadElement', storeData)
+        } else {
+          bor = false
+        }
+      } else if (file.status === 'error') {
+        bor = false
+      }
+    }
+    const fileUploadChangeLast = (value: any) => {
+      console.log('上传尾帧 ---', value)
+      const file = value.file
+      if (file.status === 'done') {
+        const res = JSON.parse(file.xhr.response)
+        if (res.errCode == 0) {
+          file.imgUrl = res.data.url
+          file.id = res.data.id
+          file.type = 'ProductElement'
+          // 取消尾帧列表选中状态
+          ;(value?.fileList || []).forEach(
+            (listItem: any) => (listItem.isChecked = false)
+          )
+          // 设置当前为选中并记录选择
+          file.isChecked = true
+          data.lastSelectImg = res.data
+        }
+      }
+      // 同步尾帧文件列表到全局 store
+      store.commit('setPoseTransferLastFrameList', {
+        str: 'set',
+        list: [file]
+      })
+    }
+    const likeSetBtn = (id: any, str: string) => {
+      data.likeList.forEach((item: any, index: any) => {
+        if (item.id == id && id) {
+          if (str == 'zoom') {
+            showViewVideo({ url: item.videoUrl })
+          } else if (str == 'like') {
+            likeFile(item, 'noLike', index)
+          }
+        }
+      })
+    }
+    const noLikeSetBtn = (id: any, str: string) => {
+      if (str == 'delete') {
+        let value = {
+          id,
+          projectId: store.state.Workspace.probjects.id
+        }
+        Https.axiosGet(Https.httpUrls.generateDeleteResult, { params: value }).then(
+          () => {
+            let index = data.noLikeList.findIndex((v: any) => v.id == id)
+            data.noLikeList.splice(index, 1)
+          }
+        )
+      } else {
+        data.noLikeList.forEach((item: any, index: any) => {
+          if (item.id == id && id) {
+            if (str == 'zoom') {
+              showViewVideo({ url: item.videoUrl })
+            } else if (str == 'like') {
+              likeFile(item, 'like', index)
+            }
+          }
+        })
+      }
+    }
+    let likeFile = (item: any, str: any, index: any) => {
+      let url
+      let value = {}
+      if (str == 'like') {
+        value = {
+          likeOrDislike: 'like',
+          transformedId: item.id,
+          projectId: store.state.Workspace.probjects.id,
+          collectionSortParentId: props.isDesignPage ? item.parentId : ''
+        }
+      } else {
+        value = {
+          likeOrDislike: 'dislike',
+          transformedId: item.id,
+          projectId: store.state.Workspace.probjects.id,
+          collectionSortParentId: props.isDesignPage ? item.parentId : ''
+        }
+        if (props.isDesignPage) {
+          emit('unLike', item)
+        }
+        console.log(props.isDesignPage)
+      }
+      Https.axiosPost(Https.httpUrls.poselikeOrDisike, {}, { params: value })
+        .then(rv => {
+          if (str == 'like') {
+            item.newLike = true
+            let value = {
+              likedList: [
+                {
+                  ...item,
+                  sort: rv.sort,
+                  parentId: rv.parentId
+                }
+              ],
+              str: 'add',
+              index: -1
+            }
+            store.commit('setPoseTransfer', value)
+            data.noLikeList.splice(index, 1)
+          } else {
+            let value = {
+              likedList: [
+                {
+                  ...item
+                }
+              ],
+              str: 'splice',
+              index: index
+            }
+            data.noLikeList.push(item)
+            store.commit('setPoseTransfer', value)
+          }
+        })
+        .catch(res => {})
+    }
+    const selectPose = (item: any) => {
+      data.poseList.forEach((listItem: any) => (listItem.isChecked = false))
+      item.isChecked = true
+      data.selectPose = item?.id || 1
+    }
+    const openSpeed = () => {
+      speed.speedState = !speed.speedState
+      if (speed.speedState) {
+        document.addEventListener('click', openSpeed)
+      } else {
+        document.removeEventListener('click', openSpeed)
+      }
+    }
+    const setSpeed = (item: any) => {
+      speed.speedData = item
+      speed.speedState = false
+      document.removeEventListener('click', openSpeed)
+    }
+    const setUploadDelete = (item: any, index: any) => {
+      let value = {
+        id: item.id
+      }
+      Https.axiosPost(
+        Https.httpUrls.toProductImageElementDelete,
+        {},
+        { params: value }
+      ).then(rv => {
+        let storeData = {
+          str: 'delete',
+          index
+        }
+        store.commit('setUploadElement', storeData)
+      })
+    }
+    watch(
+      () => store.state.HomeStoreModule.uploadElement.length,
+      (newVal, oldVal) => {
+        if (props.isDesignPage) return
+        data.fileList = store.state.HomeStoreModule.uploadElement
+        data.fileList.forEach((listItem: any) => {
+          if (listItem.id == data.selectImg.id) {
+            listItem.isChecked = true
+          } else {
+            listItem.isChecked = false
+          }
+        })
+      }
+    )
+    // 全局维护尾帧上传列表，保持与主上传一致
+    const lastFrameList = ref([])
+    watch(
+      () => store.state.HomeStoreModule.lastFrameList,
+      val => {
+        if (props.isDesignPage) return
+        lastFrameList.value = val
+        if (val.length > 0) {
+          val[0].isChecked = true
+        }
+      },
+      { immediate: true }
+    )
 
-		onBeforeUnmount(()=>{
-			clearInterval(data.generateTime)
-			clearInterval(data.remGenerateTime)
-			data.isGenerate = false
-			data.remGenerate = false
-		})
-		return{
-			...toRefs(speed),
-			...toRefs(dataDom),
-			...toRefs(data),
-			openSetData,
-			selectImgItem,
-			setSize,
-			setItemPosition,
-			gifPlay,
-			gifPause,
-			getgenerate,
-			getUploadUrl,
-			beforeUpload,
-			fileUploadChange,
-			setRemoveGenerate,
-			likeSetBtn,
-			noLikeSetBtn,
-			selectPose,
-			openSpeed,
-			setSpeed,
-			setUploadDelete,
-			locale,
-			videoType,
-			options,
-			showMotion,
-		}
-	},
-	directives:{
-		mousewheel:{
-			mounted (el) {
-				el.addEventListener('wheel',(e:WheelEvent)=>{
-					let num = 0
-					if(e.deltaY > 0){
-						num = 25
-					}else{
-						num = -25
-					}
-					el.scrollBy(num, 0);
-				},{ passive: true })
-			}
-		},
-	},
-	provide() {
-		return {
-		}
-	},
+    watch(
+      () => data.noLikeList.length,
+      (newVal, oldVal) => {
+        nextTick(() => {
+          let list = store.state.HomeStoreModule.poseTransfer.list
+          let taskIdList = list.filter((item: any) => !item.videoUrl)[0]
+          if (taskIdList?.length > 0) {
+            data.isGenerate = true
+            data.remGenerate = true
+            setGenerate(taskIdList[0].taskId)
+          }
+        })
+      },
+      { immediate: true }
+    )
+
+    const videoType = ref(2)
+    const showMotion = computed(() => videoType.value === 1)
+    const options = ref([
+      { vlaue: 2, label: 'First frame' },
+      { value: 3, label: 'First and last frames' },
+      { value: 1, label: 'First frame and skeleton' }
+    ])
+
+    onBeforeUnmount(() => {
+      clearInterval(data.generateTime)
+      clearInterval(data.remGenerateTime)
+      data.isGenerate = false
+      data.remGenerate = false
+    })
+
+    return {
+      ...toRefs(speed),
+      ...toRefs(dataDom),
+      ...toRefs(data),
+      lastFrameList,
+      openSetData,
+      selectImgItem,
+      setSize,
+      setItemPosition,
+      gifPlay,
+      gifPause,
+      getgenerate,
+      getUploadUrl,
+      beforeUpload,
+      fileUploadChange,
+      fileUploadChangeLast,
+      setRemoveGenerate,
+      likeSetBtn,
+      noLikeSetBtn,
+      selectPose,
+      openSpeed,
+      setSpeed,
+      setUploadDelete,
+      locale,
+      videoType,
+      options,
+      showMotion
+    }
+  },
+  directives: {
+    mousewheel: {
+      mounted(el) {
+        el.addEventListener(
+          'wheel',
+          (e: WheelEvent) => {
+            let num = 0
+            if (e.deltaY > 0) {
+              num = 25
+            } else {
+              num = -25
+            }
+            el.scrollBy(num, 0)
+          },
+          { passive: true }
+        )
+      }
+    }
+  },
+  provide() {
+    return {}
+  }
 })
 </script>
 <style lang="less" scoped>
-	.poseTransfer{
-		width: 100%;
-		height: 100%;
-		position: relative;
-		font-size: 2rem;
-		font-weight: 900;
-		display: flex;
-		> .configuratioBox{
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			padding-right: 3.8rem;
-			width: 39rem;
-			&.active{
-				width: 0;
-				overflow: hidden;
-			}
-			> .generate{
-				margin-left: auto;
-				> .started_btn{
-					font-weight: 300;
-				}
-				.generage_btn{
-					width: 10rem;
-					position: relative;
-				}
-				.icon-xiala{
-					margin-left: 1rem;
-					transition: all .3s;
-					cursor: pointer;
-					&.active{
-						transform: rotate(180deg);
-					}
-				}
-				.content{
-					position: absolute;
-					top: 100%;
-					width: 100%;
-					left: 0rem;
-					text-align: center;
-					border-radius: calc(1rem* 1.2);
-					overflow: hidden;
-					z-index: 3;
-					margin-top: .2rem;
+.poseTransfer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-size: 2rem;
+  font-weight: 900;
+  display: flex;
+  > .configuratioBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-right: 3.8rem;
+    width: 39rem;
+    &.active {
+      width: 0;
+      overflow: hidden;
+    }
+    > .generate {
+      margin-left: auto;
+      > .started_btn {
+        font-weight: 300;
+      }
+      .generage_btn {
+        width: 10rem;
+        position: relative;
+      }
+      .icon-xiala {
+        margin-left: 1rem;
+        transition: all 0.3s;
+        cursor: pointer;
+        &.active {
+          transform: rotate(180deg);
+        }
+      }
+      .content {
+        position: absolute;
+        top: 100%;
+        width: 100%;
+        left: 0rem;
+        text-align: center;
+        border-radius: calc(1rem * 1.2);
+        overflow: hidden;
+        z-index: 3;
+        margin-top: 0.2rem;
 
-					>div{
-						background: #cccccc;
-						line-height: 2;
-						font-size: 1.8rem;
-						cursor: pointer;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						&.active{
-							background-color: #616161;
-						}
-					}
-					>div:hover{
-						background: #999999;
-					}
-				}
-			}
-		}
-		> .configuratioBox > .configuratio{
-			width: 100%;
-			padding-bottom: 1rem;
-			> .content{
-				> .selectImg,> .poses{
-					display: flex;
-					flex-direction: column;
-					> .imgBox{
-						flex: 1;
-						max-height: 45rem;
-						margin-top: 2rem;
-						display: flex;
-						flex-wrap: nowrap;
-						width: 100%;
-						overflow: hidden;
-						overflow-x: auto;
-						column-gap: 2.4rem;
-						position: relative;
-						> .item{
-							width: 12.7rem;
-							height: 17.8rem;
-							cursor: pointer;
-							overflow: hidden;
-							display: flex;
-							justify-content: center;
-							flex-shrink: 0;
-							position: relative;
-							:deep(.ant-checkbox-wrapper){
-								position: absolute;
-								top: 2rem;
-								right: 2rem;
-							}
-							> .btnBox{
-								position: absolute;
-								right: 1rem;
-								top: 1rem;
-								display: flex;
-								flex-direction: column;
-								align-items: center;
-								justify-content: center;
-								> div{
-									width: 2rem;
-									height: 2rem;
-									display: flex;
-									border: 1px solid;
-									align-items: center;
-									border-radius: .5rem;
-									justify-content: center;
-									cursor: pointer;
-									margin-bottom: 1rem;
-									> i{
-										display: flex;
-									}
-									>.fi-br-check{
-										color: #fff;
-										display: none;
-									}
-									&.active{
-										background: #000;
-										> i{
-											display: flex;
-											color: #fff;
-										}
-									}
-								}
-							}
-							> .btnBox{
-								position: absolute;
-								right: 1rem;
-								top: 1rem;
-								display: flex;
-								flex-direction: column;
-								align-items: center;
-								justify-content: center;
-								> div{
-									width: 2rem;
-									height: 2rem;
-									display: flex;
-									border: 1px solid;
-									align-items: center;
-									border-radius: .5rem;
-									justify-content: center;
-									cursor: pointer;
-									margin-bottom: 1rem;
-									> i{
-										display: flex;
-									}
-									>.fi-br-check{
-										color: #fff;
-										display: none;
-									}
-									&.active{
-										background: #000;
-										> i{
-											display: flex;
-											color: #fff;
-										}
-									}
-								}
-							}
-							> 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;
-						font-weight: 600;
-						> .text{
-							display: inline-block;
-							font-size: 1.6rem;
-						}
-					}
-				}	
-				.prompt-input-container{
-					margin-top: 4rem;
-				}
-				.title{
-					font-size: 1.8rem;
-					color: #000;
-					margin-bottom: 1.4rem;
-				}
-				> .poses{
-					margin-top: 3rem;
-				}
-			}
-		}
-		> .likeBox ,> .noLikeBox{
-			flex: 1;
-			position: relative;
-			> .element{
-				width: 100%;
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				> .btnLeft,> .btnRight{
-					position: absolute;
-					width: 3rem;
-					height: 7rem;
-					background: #fff;
-					border: 2px solid;
-					border-right: none;
-					border-radius: 2rem 0 0 2rem;
-					top: 50%;
-					transform: translate(-100%,-50%);
-					left: 0;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					z-index: 2;
-					cursor: pointer;
-					transition: all .3s;
-					>span{
-						transition: all .3s;
-						transform: rotate(90deg);
-						
-					}
-					
-					&.active{
-						>span{
-							transform: rotate(270deg);
+        > div {
+          background: #cccccc;
+          line-height: 2;
+          font-size: 1.8rem;
+          cursor: pointer;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          &.active {
+            background-color: #616161;
+          }
+        }
+        > div:hover {
+          background: #999999;
+        }
+      }
+    }
+  }
+  > .configuratioBox > .configuratio {
+    width: 100%;
+    padding-bottom: 1rem;
+    > .content {
+      > .selectImg,
+      > .poses {
+        display: flex;
+        flex-direction: column;
+        > .imgBox {
+          flex: 1;
+          max-height: 45rem;
+          margin-top: 2rem;
+          display: flex;
+          flex-wrap: nowrap;
+          width: 100%;
+          overflow: hidden;
+          overflow-x: auto;
+          column-gap: 2.4rem;
+          position: relative;
+          > .item {
+            width: 12.7rem;
+            height: 17.8rem;
+            cursor: pointer;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            flex-shrink: 0;
+            position: relative;
+            :deep(.ant-checkbox-wrapper) {
+              position: absolute;
+              top: 2rem;
+              right: 2rem;
+            }
+            > .btnBox {
+              position: absolute;
+              right: 1rem;
+              top: 1rem;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              > div {
+                width: 2rem;
+                height: 2rem;
+                display: flex;
+                border: 1px solid;
+                align-items: center;
+                border-radius: 0.5rem;
+                justify-content: center;
+                cursor: pointer;
+                margin-bottom: 1rem;
+                > i {
+                  display: flex;
+                }
+                > .fi-br-check {
+                  color: #fff;
+                  display: none;
+                }
+                &.active {
+                  background: #000;
+                  > i {
+                    display: flex;
+                    color: #fff;
+                  }
+                }
+              }
+            }
+            > .btnBox {
+              position: absolute;
+              right: 1rem;
+              top: 1rem;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              > div {
+                width: 2rem;
+                height: 2rem;
+                display: flex;
+                border: 1px solid;
+                align-items: center;
+                border-radius: 0.5rem;
+                justify-content: center;
+                cursor: pointer;
+                margin-bottom: 1rem;
+                > i {
+                  display: flex;
+                }
+                > .fi-br-check {
+                  color: #fff;
+                  display: none;
+                }
+                &.active {
+                  background: #000;
+                  > i {
+                    display: flex;
+                    color: #fff;
+                  }
+                }
+              }
+            }
+            > 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;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          column-gap: 1rem;
+          .tips-icon {
+            cursor: pointer;
+            display: flex;
+          }
+          > .text {
+            // display: inline-block;
+            font-size: 1.6rem;
+          }
+        }
+      }
+      .prompt-input-container {
+        margin-top: 4rem;
+      }
+      .title {
+        font-size: 1.8rem;
+        color: #000;
+        margin-bottom: 1.4rem;
+      }
+      > .poses {
+        margin-top: 3rem;
+      }
+    }
+  }
+  > .likeBox,
+  > .noLikeBox {
+    flex: 1;
+    position: relative;
+    > .element {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      > .btnLeft,
+      > .btnRight {
+        position: absolute;
+        width: 3rem;
+        height: 7rem;
+        background: #fff;
+        border: 2px solid;
+        border-right: none;
+        border-radius: 2rem 0 0 2rem;
+        top: 50%;
+        transform: translate(-100%, -50%);
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        cursor: pointer;
+        transition: all 0.3s;
+        > span {
+          transition: all 0.3s;
+          transform: rotate(90deg);
+        }
 
-						}
-					}
-				}
-				> .btnRight{
-					left: calc(100% + 3rem);
-					transform: translate(-100%,-50%) rotate(180deg);
-					&:hover{
-						width: 4rem;
-						left: calc(100% + 4rem);
-					}
-				}
-				> .content{
-					flex: 1;
-					overflow: hidden;
-					padding: 1.7rem 2rem;
-					border-radius: 3rem;
-					background: #f7f8fa;
-				}
-				> .title{
-					margin-bottom: 2rem;
-					font-size: 1.6rem;
-					font-weight: 900;
-					> span{
-						margin-left: 1rem;
-					}
-				}
-			}
-			
-		}
+        &.active {
+          > span {
+            transform: rotate(270deg);
+          }
+        }
+      }
+      > .btnRight {
+        left: calc(100% + 3rem);
+        transform: translate(-100%, -50%) rotate(180deg);
+        &:hover {
+          width: 4rem;
+          left: calc(100% + 4rem);
+        }
+      }
+      > .content {
+        flex: 1;
+        overflow: hidden;
+        padding: 1.7rem 2rem;
+        border-radius: 3rem;
+        background: #f7f8fa;
+      }
+      > .title {
+        margin-bottom: 2rem;
+        font-size: 1.6rem;
+        font-weight: 900;
+        > span {
+          margin-left: 1rem;
+        }
+      }
+    }
+  }
 
-		> .designPage{
-			margin-right: 4rem;
-		}
-		> .noLikeBox{
-			padding-left: 2.3rem;
-			&.active{
-				flex: 0;
-				overflow: hidden;
-			}
-		}
+  > .designPage {
+    margin-right: 4rem;
+  }
+  > .noLikeBox {
+    padding-left: 2.3rem;
+    &.active {
+      flex: 0;
+      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>
\ No newline at end of file
+  .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>
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 8c07ac65..255ce6ad 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -5,6 +5,7 @@
 				@canvasInit="canvasInit"
 				@changeCanvas="changeCanvas"
 				is-general
+				:isBackgroundChangeable="false"
 				ref="editCanvas"></editCanvas>
 		</div>
 		<div class="btn">
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index ff4a1a7c..53aea1b5 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -285,7 +285,7 @@ export default {
     AssitSubTitle: '您可以复制并使用以下提示词：',
     CopySuccess: '已复制到剪贴板',
     CopyFiled: '复制失败',
-    noPrompt:'请输入提示词'
+    noPrompt: '请输入提示词'
   },
   poseTransfer: {
     SelectDesign: '产品图',
@@ -308,7 +308,11 @@ export default {
     UploadWithModel:
       '创建模特穿着该服装的真实感摄影棚照片。若原有模特存在则保留，否则生成合适模特。采用站立姿势面向镜头。精确保留服装细节——图案、颜色、质地及装饰元素。', // 上传线稿,带模特
     UploadWithoutModel:
-      '专业产品摄影：服装以自然形态展示，无模特。采用影棚灯光。保留精确细节——图案、色彩、质感、装饰元素。' // 上传线稿,不带模特
+      '专业产品摄影：服装以自然形态展示，无模特。采用影棚灯光。保留精确细节——图案、色彩、质感、装饰元素。', // 上传线稿,不带模特
+    VideoType: '视频类型',
+    FirstFrame: '首帧',
+    FirstAndLastFrames: '首帧和尾帧',
+    FirstFrameAndSkeleton: '首帧和骨架'
   },
   LibraryPage: {
     library: '收藏',
@@ -1225,9 +1229,9 @@ export default {
     basic: '基础',
     flipHorizontal: '水平翻转',
     flipVertical: '垂直翻转',
-	cropAndAdd: '裁剪并添加',
-	cropImage: '裁剪图片',
-	group: '组合',
+    cropAndAdd: '裁剪并添加',
+    cropImage: '裁剪图片',
+    group: '组合',
     //长毛笔
     FurSettings: '长毛笔设置',
     FurLength: '毛发长度',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 6aceb62d..3fc1b348 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -295,7 +295,7 @@ export default {
     AssitSubTitle: 'You can copy following prompt and try:',
     CopySuccess: 'Copied to clipboard',
     CopyFiled: 'Failed to copy',
-    noPrompt:'Please enter prompt'
+    noPrompt: 'Please enter prompt'
   },
   poseTransfer: {
     SelectDesign: 'Product image',
@@ -318,7 +318,11 @@ export default {
     UploadWithModel:
       'Create realistic studio photo with model wearing this garment. Keep original model if present, or generate appropriate model. Standing pose, facing camera. Preserve exact garment details - patterns, colors, textures, embellishments.', // 上传线稿,带模特
     UploadWithoutModel:
-      'Professional product photo: garment displayed with natural shape, no model. Studio lighting. Preserve exact details - patterns, colors, textures, embellishments.' // 上传线稿,不带模特
+      'Professional product photo: garment displayed with natural shape, no model. Studio lighting. Preserve exact details - patterns, colors, textures, embellishments.', // 上传线稿,不带模特
+    VideoType: 'Video Type',
+    FirstFrame: 'First frame',
+    FirstAndLastFrames: 'First and last frames',
+    FirstFrameAndSkeleton: 'First frame and skeleton',
   },
   LibraryPage: {
     library: 'Library',
@@ -1260,9 +1264,9 @@ export default {
     basic: 'Basic',
     flipHorizontal: 'Horizontal Flip',
     flipVertical: 'Vertical Flip',
-	cropAndAdd: 'Crop and Add',
-	cropImage: 'Crop Image',
-	group: 'Group',
+    cropAndAdd: 'Crop and Add',
+    cropImage: 'Crop Image',
+    group: 'Group',
     //长毛笔
     FurSettings: 'FurSettings',
     FurLength: 'Fur Length',
diff --git a/src/store/homeStore/homeStore.ts b/src/store/homeStore/homeStore.ts
index a46cda3c..e855cf3f 100644
--- a/src/store/homeStore/homeStore.ts
+++ b/src/store/homeStore/homeStore.ts
@@ -41,6 +41,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 			likedList:[],
 		},
 		uploadElement:[],
+		lastFrameList:[],
 		poseTransfer:{
 			list:[],
 			likedList:[],
@@ -70,6 +71,19 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
     mutations:{
 		setshowSketchList(state,data){
             state.showSketchList = data
+        },
+		setPoseTransferLastFrameList(state,data){
+			console.log('设置尾帧store-------------')
+			// 支持两种方式：set 替换整个列表；add/删除与 uploadElement 一致
+			if(data.str === 'set'){
+				state.poseTransfer.lastFrameList = data.list || []
+				return
+			}
+			if(data.str === 'add'){
+				state.poseTransfer.lastFrameList.unshift(...(data.list || []))
+			}else{
+				state.poseTransfer.lastFrameList.splice(data.index,1)
+			}
         },
         setDesignCollectionList(state,data){
             state.designCollectionList = data