diff --git a/src/assets/icons/CCheck.svg b/src/assets/icons/CCheck.svg
new file mode 100644
index 00000000..1c25b56c
--- /dev/null
+++ b/src/assets/icons/CCheck.svg
@@ -0,0 +1 @@
+<svg t="1763432312095" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4678" width="200" height="200"><path d="M509.92 176C325.504 176 176 325.504 176 509.92c0 184.416 149.504 333.92 333.92 333.92 184.416 0 333.92-149.504 333.92-333.92C843.84 325.504 694.32 176 509.92 176z m166.64 214.848a16 16 0 0 1 22.624 0l11.328 11.312a16 16 0 0 1 0 22.624l-254.08 254.08a16 16 0 0 1-22.624 0l-159.616-159.632a16 16 0 0 1 0-22.624l11.312-11.312a16 16 0 0 1 22.624 0l136.992 136.992z" fill="currentColor" p-id="4679"></path></svg>
\ No newline at end of file
diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue
index 0dc72135..5cd05aca 100644
--- a/src/component/home/design/editDesignType/index.vue
+++ b/src/component/home/design/editDesignType/index.vue
@@ -1,1186 +1,1526 @@
 <template>
-	<a-modal
-		class="editDesignType_modal generalModel"
-		v-model:visible="scaleImage"
-		:footer="null"
-		width="78%"
-		:maskClosable="false"
-		:centered="true"
-		:closable="false"
-		:mask="true"
-		:keyboard="false"
-		:destroyOnClose="false"
-	>
-	<div class="generalModel_btn">
-		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-			<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="white" 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 class="generalModel_closeIcon download" @click.stop="download()">
-			<i class="fi fi-rr-down-to-line"></i>
-		</div>
-	</div>
-	<div class="scaleImage_content" v-if="scaleImage">
-		<div class="productImg_modal">
-			<div class="productImg_left generalModel_state">
-				<div class="productImg_content_item_title productImg_content_item_title_menu">
-					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
-					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
-				</div>
-				<!-- <div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-					<span>{{$t('ProductImg.SelectionFunction')}}</span>
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
-					<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
-				</div> -->
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && !speedData.value" class="productImg_content_item_title productImg_content_item_title_similarity">
-					<span>{{$t('ProductImg.Similarity')}}</span>
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && !speedData.value" class="productImg_content_item_similarity ">
-					<a-slider class="system_silder"
-						v-model:value="productimgSimilarity"
-						:tooltipVisible="false"
-						:step="5"
-						:max="100"
-						@afterChange="()=>{}"
-					>
-					</a-slider>
-					<input style="margin-left: 2rem;"  type="number" readonly v-model="productimgSimilarity">
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && !(speedData.value == 'advanced' || speedData.value == 'flux')" class="productImg_content_item_title productImg_content_item_title_similarity">
-					<span>{{$t('ProductImg.RelightDirection')}}</span>
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && !(speedData.value == 'advanced' || speedData.value == 'flux')" class="productImg_content_item_Direction generalModel_state_item">
-					<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && !(speedData.value == 'advanced' || speedData.value == 'flux')" class="productImg_content_item_title productImg_content_item_title_similarity">
-					<span>{{$t('ProductImg.Highlight')}}</span>
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && !(speedData.value == 'advanced' || speedData.value == 'flux')" class="productImg_content_item_similarity">
-					<a-slider class="system_silder"
-						v-model:value="productimgBrightenValue"
-						:tooltipVisible="false"
-						:max="3"
-						:min="1"
-						:step="0.1"
-					>
-					</a-slider>
-					<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
-				</div>
-				<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
-					<div class="input_box">
-						<div class="input_box_btnBox" style="height: auto;">
-							<!-- <input
-								class="search_input"
-								:placeholder="$t('Generate.inputContent1')"
-								v-model="productimgSearchName"
-								@keydown.enter="getPrductimg()"
-							/>
-							<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
-							<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
-							<textarea 
-								ref="textarea"
-								class="textarea "  
-								:placeholder="$t('Generate.inputContent1')"
-								@input="ifMaximumLength" 
-								@keydown.enter="getPrductimg()"
-								v-model="productimgSearchName"
-							></textarea>
-						</div>
-						
-					</div>
-				</div>
-				<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && (speedData.value == 'advanced' || speedData.value == 'flux')">
-					<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
-				</div>
-				<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
-					<div class="head">
-						<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
-					</div>
-					<div class="imgBox" v-mousewheel>
-						<div class="item" v-for="item,index in poseList" @click="setSelectPose(item,index)">
-							<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>
-					</div>
-				</div>
-				<div class="generage_btn_box" style="margin-left: auto;">
-					<div class="generage_btn started_btn"  v-show="!productimgIsProductimg">
-						<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
-						<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :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 class="generage_btn started_btn" v-show="productimgIsProductimg">
-						<i class="fi fi-br-loading" ></i>
-					</div>
-					<!-- <div class="generage_btn started_btn" v-show="productimgIsProductimg && !productimgRemProductimg">
-						<i class="fi fi-br-loading" ></i>
-					</div> -->
-					<!-- <div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
-						{{$t('Generate.Close')}}
-					</div> -->
-				</div>
-			</div>
-		</div>
-		<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
-			<img v-if="isComparison" :src="selectGenerate?.sourceUrl || selectGenerate?.productImage">
-			<div class="loadBox" v-show="selectGenerate">
-				<div class="load" v-show="productimgIsProductimg">
-					<a-spin size="large" class="content_img_flex"></a-spin>
-				</div>
-				<div class="imgBox" v-show="!productimgIsProductimg">
-					<img v-show="selectGenerate?.resultType !='PoseTransfer'" :src="generateCourse?.url || selectGenerate?.url" alt="">
-					<img 
-						v-show="selectGenerate?.resultType == 'PoseTransfer'"
-						:src="generateCourse?.firstFrameUrl || selectGenerate?.firstFrameUrl" 
-						alt=""
-						@mouseenter.stop="gifPlay($event,generateCourse || selectGenerate)"
-						@mouseleave.stop="gifPause($event,generateCourse || selectGenerate)" 
-					>	
-				</div>
-			</div>
-			<!-- <div class="img_operate_block" v-if="isLike">
-				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
-				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
-			</div> -->
-		</div>
-	</div>
-	<!-- <div class="scaleImage_nav">
-		<div class="nav_left">
-			<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
-		</div>
-		<div class="nav_list" v-mousewheel>
-			<div class="nav_centent">
-				<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl || item?.url" :key="item.id">
-			</div>
-		</div>
-		<div class="nav_right">
-			<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
-		</div>
-	</div> -->
-	<div class="mark_loading" v-show="loadingShow">
-			<a-spin size="large" />
-		</div>
-
-</a-modal>
+  <a-modal
+    class="editDesignType_modal generalModel"
+    v-model:visible="scaleImage"
+    :footer="null"
+    width="78%"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="true"
+    :keyboard="false"
+    :destroyOnClose="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <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="white" 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 class="generalModel_closeIcon download" @click.stop="download()">
+        <i class="fi fi-rr-down-to-line"></i>
+      </div>
+    </div>
+    <div class="scaleImage_content" v-if="scaleImage">
+      <div class="productImg_modal">
+        <div class="productImg_left generalModel_state">
+          <div class="productImg_content_item_title productImg_content_item_title_menu">
+            <span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">
+              {{ $t('ProductImg.MagicTools') }}
+            </span>
+            <span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">
+              {{ $t('ProductImg.relightingTool') }}
+            </span>
+          </div>
+          <div
+            v-show="
+              scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' &&
+              !speedData.value
+            "
+            class="productImg_content_item_title productImg_content_item_title_similarity"
+          >
+            <span>{{ $t('ProductImg.Similarity') }}</span>
+          </div>
+          <div
+            v-show="
+              scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' &&
+              !speedData.value
+            "
+            class="productImg_content_item_similarity"
+          >
+            <a-slider
+              class="system_silder"
+              v-model:value="productimgSimilarity"
+              :tooltipVisible="false"
+              :step="5"
+              :max="100"
+              @afterChange="() => {}"
+            ></a-slider>
+            <input
+              style="margin-left: 2rem"
+              type="number"
+              readonly
+              v-model="productimgSimilarity"
+            />
+          </div>
+          <div
+            v-show="
+              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
+              !(speedData.value == 'advanced' || speedData.value == 'flux')
+            "
+            class="productImg_content_item_title productImg_content_item_title_similarity"
+          >
+            <span>{{ $t('ProductImg.RelightDirection') }}</span>
+          </div>
+          <div
+            v-show="
+              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
+              !(speedData.value == 'advanced' || speedData.value == 'flux')
+            "
+            class="productImg_content_item_Direction generalModel_state_item"
+          >
+            <a-select
+              size="large"
+              style="width: 100%"
+              v-model:value="productimgRelightDirection"
+              :options="productimgRelightDirectionList"
+            ></a-select>
+          </div>
+          <div
+            v-show="
+              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
+              !(speedData.value == 'advanced' || speedData.value == 'flux')
+            "
+            class="productImg_content_item_title productImg_content_item_title_similarity"
+          >
+            <span>{{ $t('ProductImg.Highlight') }}</span>
+          </div>
+          <div
+            v-show="
+              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
+              !(speedData.value == 'advanced' || speedData.value == 'flux')
+            "
+            class="productImg_content_item_similarity"
+          >
+            <a-slider
+              class="system_silder"
+              v-model:value="productimgBrightenValue"
+              :tooltipVisible="false"
+              :max="3"
+              :min="1"
+              :step="0.1"
+            ></a-slider>
+            <input
+              style="margin-left: 2rem"
+              type="number"
+              readonly
+              v-model="productimgBrightenValue"
+            />
+          </div>
+          <div
+            class="prompt-container"
+            v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'"
+          >
+            <div class="prompt-title">{{ $t('ProductImg.Prompt') }}</div>
+            <div class="input_border productImg_content_item_generate">
+              <div class="input_box">
+                <div class="input_box_btnBox">
+                  <textarea
+                    ref="textareaRef"
+                    class="textarea"
+                    :placeholder="$t('Generate.inputContent1')"
+                    @input="ifMaximumLength"
+                    @keydown.enter.prevent="getPrductimg()"
+                    v-model="productimgSearchName"
+                  />
+                  <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>
+          <div
+            class="transferPose"
+            v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'"
+          >
+            <div class="head">
+              <div class="text">{{ $t('poseTransfer.Selectpose') }}</div>
+            </div>
+            <div class="imgBox" v-mousewheel>
+              <div
+                class="item"
+                v-for="(item, index) in poseList"
+                :key="item.id"
+                @click="setSelectPose(item, index)"
+              >
+                <video :ref="el => setVideoRef(item.id, el)" :src="item.video" />
+                <div class="btnBox">
+                  <div :class="{ active: item.isChecked }">
+                    <i class="fi fi-br-check"></i>
+                  </div>
+                </div>
+                <div class="control-container" @click.stop>
+                  <div class="icon-list">
+                    <SvgIcon
+                      class="play-icon"
+                      @click.stop="handlePlayMotion(item)"
+                      :name="isVideoPlaying(item.id) ? 'CPause' : 'CPlay'"
+                      size="20"
+                      color="#ffffff"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="generage_btn_box" style="margin-left: auto">
+            <div class="generage_btn started_btn" v-show="!productimgIsProductimg">
+              <i
+                class="fi fi-bs-magic-wand"
+                style="background-color: #000; font-size: 2.3rem; flex: 1; margin: 0"
+                @click="getPrductimg()"
+              ></i>
+              <div
+                class="icon iconfont icon-xiala"
+                v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'"
+                :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 class="generage_btn started_btn" v-show="productimgIsProductimg">
+              <i class="fi fi-br-loading"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="scaleImage_content_imgBox" :class="{ active: isComparison }">
+        <img
+          v-if="isComparison"
+          :src="selectGenerate?.sourceUrl || selectGenerate?.productImage"
+        />
+        <div class="loadBox" v-show="selectGenerate">
+          <div class="load" v-show="productimgIsProductimg">
+            <a-spin size="large" class="content_img_flex"></a-spin>
+          </div>
+          <div class="imgBox" v-show="!productimgIsProductimg">
+            <img
+              v-show="selectGenerate?.resultType != 'PoseTransfer'"
+              :src="generateCourse?.url || selectGenerate?.url"
+              alt=""
+            />
+            <img
+              v-show="selectGenerate?.resultType == 'PoseTransfer'"
+              :src="generateCourse?.firstFrameUrl || selectGenerate?.firstFrameUrl"
+              alt=""
+              @mouseenter.stop="gifPlay($event, generateCourse || selectGenerate)"
+              @mouseleave.stop="gifPause($event, generateCourse || selectGenerate)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mark_loading" v-show="loadingShow">
+      <a-spin size="large" />
+    </div>
+    <Prompt v-model:showModal="showPromptAssist" :promptList="promptTextList" />
+  </a-modal>
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
-import { Https } from "@/tool/https";
-import { Modal,message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { downloadIamge,getMinioUrl,downloadVideoWithFetch } from "@/tool/util";
-import { useI18n } from "vue-i18n";
-import { useStore } from "vuex";
+import {
+  defineComponent,
+  h,
+  ref,
+  toRefs,
+  createVNode,
+  reactive,
+  computed,
+  useTemplateRef
+} from 'vue'
+import { Https } from '@/tool/https'
+import { Modal, message } from 'ant-design-vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { downloadIamge, getMinioUrl, downloadVideoWithFetch } from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import Prompt from '@/component/home/tools/toProduct/Prompt.vue'
 
 export default defineComponent({
-components:{},
-props:{
-	productData:{
-		type:Object,
-		default:{
-			similarity:30,
-			brightenValue:1,
-			upload:'',
-		},
-	},
-	isCanvas:{
-		type:Boolean,
-		default:false,
-	},
-	sex:{
-		type:String,
-		default:''
-	},
-	onlike:{
-		type:Function,
-		default:()=>{},
-	},
-},
-emits:['addGenerateImg','upDataDesignLikeList'],
-setup(props:any,{emit}) {
-	const store = useStore();
-	let userDetail:any= computed(()=>{
-		return store.state.UserHabit.userDetail
-	})
-	let {t} = useI18n()
-	let productimg = reactive({
-		isGenerate:false,//判断是否进行generate
-		textarea:null as any,
-		productimgSearchName:'',
-		productimgIsTextarea:false,
-		productimgRemProductimg:false,
-		productimgIsProductimg:false,
-		productimgSimilarity:30,
-		productimgBrightenValue:1,
-		productimgUpload:props.productData.upload,
-		productimgRelightDirection:'Bottom Light',
-		productimgRelightDirectionList:props.productData.RelightDirectionList,
-		selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
-		likeDesignCollectionList:computed(() => {
-			return store.state.HomeStoreModule.likeDesignCollectionList;
-		}),
-		selectGenerate:null as any,//生成成功后返回的数据
-		poseList:[],
-		selectPose:null as any,
-		openType:'',
-		scaleImageIndex: 0,
-		scaleImageList:[],
-		generateCourse:null as any,
-	})
-	let speed = reactive({
-		speedList:[
-		] as any,
-		speedTypeList:{
-			poseTransfer:[
-				{
-					title:'',
-					label:t('speedList.toproductBasic'),
-					value:'',
-				},{
-					title:'',
-					label:t('speedList.toproductFlus'),
-					value:'wx',
-				},
-			],
-			toPorductImg:[
-				{
-					title:'',
-					label:t('speedList.toproductFlus'),
-					relightLabel:t('speedList.relightEdit'),
-					value:'advanced',
-				},{
-					title:'',
-					label:t('speedList.toproductBasic'),
-					relightLabel:t('speedList.changeBackground'),
-					value:'',
-				},
-			]
-		},
-		speedState:false,
-		speedData:{
-			title:'',
-			label:t('speedList.toproductFlus'),
-			relightLabel:t('speedList.relightEdit'),
-			value:'advanced',
-		},
-	})
-	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
-		document.removeEventListener('click',openSpeed)
-		speed.speedState = false
-	}
-	let scaleImage: any = ref(false);
-	let loadingShow = ref(false)
-	let isComparison = ref(false)
-	const visible = ref<boolean>(false);
-	const setVisible = (value:any): void => {
-		visible.value = value;
-	};
-	let scaleImageMask:any = ref(false)
-	let isLike:any = ref(true)
-	let robotAssits:any = ref(0)
+  components: { Prompt },
+  props: {
+    productData: {
+      type: Object,
+      default: {
+        similarity: 30,
+        brightenValue: 1,
+        upload: ''
+      }
+    },
+    isCanvas: {
+      type: Boolean,
+      default: false
+    },
+    sex: {
+      type: String,
+      default: ''
+    },
+    onlike: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  emits: ['addGenerateImg', 'upDataDesignLikeList'],
+  setup(props: any, { emit }) {
+    const store = useStore()
+    let userDetail: any = computed(() => {
+      return store.state.UserHabit.userDetail
+    })
+    let { t } = useI18n()
+    const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
+    let productimg = reactive({
+      isGenerate: false, //判断是否进行generate
+      textarea: null as any,
+      productimgSearchName: '',
+      productimgIsTextarea: false,
+      productimgRemProductimg: false,
+      productimgIsProductimg: false,
+      productimgSimilarity: 30,
+      productimgBrightenValue: 1,
+      productimgUpload: props.productData.upload,
+      productimgRelightDirection: 'Bottom Light',
+      productimgRelightDirectionList: props.productData.RelightDirectionList,
+      selectObject: computed(() => store.state.Workspace.probjects), //选择的项目
+      likeDesignCollectionList: computed(() => {
+        return store.state.HomeStoreModule.likeDesignCollectionList
+      }),
+      selectGenerate: null as any, //生成成功后返回的数据
+      poseList: [],
+      selectPose: null as any,
+      openType: '',
+      scaleImageIndex: 0,
+      scaleImageList: [],
+      generateCourse: null as any
+    })
+    let speed = reactive({
+      speedList: [] as any,
+      speedTypeList: {
+        poseTransfer: [
+          {
+            title: '',
+            label: t('speedList.toproductBasic'),
+            value: ''
+          },
+          {
+            title: '',
+            label: t('speedList.toproductFlus'),
+            value: 'wx'
+          }
+        ],
+        toPorductImg: [
+          {
+            title: '',
+            label: t('speedList.toproductFlus'),
+            relightLabel: t('speedList.relightEdit'),
+            value: 'advanced'
+          },
+          {
+            title: '',
+            label: t('speedList.toproductBasic'),
+            relightLabel: t('speedList.changeBackground'),
+            value: ''
+          }
+        ]
+      },
+      speedState: false,
+      speedData: {
+        title: '',
+        label: t('speedList.toproductFlus'),
+        relightLabel: t('speedList.relightEdit'),
+        value: 'advanced'
+      }
+    })
+    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
+      document.removeEventListener('click', openSpeed)
+      speed.speedState = false
+    }
+    let scaleImage: any = ref(false)
+    let loadingShow = ref(false)
+    let isComparison = ref(false)
+    const visible = ref<boolean>(false)
+    const setVisible = (value: any): void => {
+      visible.value = value
+    }
+    let scaleImageMask: any = ref(false)
+    let isLike: any = ref(true)
+    let robotAssits: any = ref(0)
 
-	let remPrductimgTime:any = null
-	let prductimgTime:any = null
-	const getData = ()=>{
-		let obj = null as any
-		if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
-			obj = {
-				elementId:productimg.scaleImageList[productimg.scaleImageIndex].designOutfitId||productimg.scaleImageList[productimg.scaleImageIndex].elementId,
-				elementType:'DesignOutfit',
-				parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
-				// userLikeSortId:productimg.selectGenerate.userLikeSortId || null,
-				userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
-			}	
-			if(productimg.scaleImageList[productimg.scaleImageIndex]?.relationType == "Design"){
-				delete obj.userLikeSortId
-			}
-		}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'Relight'){
-			obj = {
-				elementId:productimg.scaleImageList[productimg.scaleImageIndex].designItemId || productimg.scaleImageList[productimg.scaleImageIndex].id || productimg.scaleImageList[productimg.scaleImageIndex],
-				elementType:'ToProductImage',
-				parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
-				userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
-				// userLikeSortId:productimg.selectGenerate.userLikeSortId || null,
-			}
-		}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
+    const promptTextList = computed(() => {
+      const { ageGroup, httpType } = store.state.Workspace.probjects
+      const isSingleDesign = httpType === 'SINGLE_DESIGN'
+      const isAdult = ageGroup === 'Adult'
 
-		}
-		console.log(productimg.selectGenerate)
-		return obj
-	}
-	const getPoseTransformData = ()=>{
-		return {
-			poseId:productimg.selectPose,
-			projectId:productimg.selectObject.id,
-			productImage:getMinioUrl(productimg.scaleImageList[productimg.scaleImageIndex].sourceUrl),
-			modelName:speed.speedData.value,
-			mode:1,
-			parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
-			userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
-			isDefaultLike:true,//表示是否生成就like
-		}
-	}
-	let getPrductimg = async ()=>{
-		let obj = getData()
-		// let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
-		let imageStrength = 70 / 100 * productimg.productimgSimilarity
-		let data:any ={
-			direction:productimg.productimgRelightDirection,
-			prompt:productimg.productimgSearchName,
-			toProductImageVOList:[obj],
-			modelName:'flux',
-			brightenValue:productimg.productimgBrightenValue,
-			projectId:productimg.selectObject.id,
-			imageStrength:(100 - imageStrength)/100,
-			ageGroup:productimg.selectObject.ageGroup,
+      if (isSingleDesign) {
+        const secondPrompt = isAdult
+          ? t('poseTransfer.SingleAdultTryOn')
+          : t('poseTransfer.SingleChildTryOn')
+        return [t('poseTransfer.SingleGarment'), secondPrompt]
+      } else {
+        return [
+          isAdult
+            ? t('poseTransfer.SeriesAdultTryOn')
+            : t('poseTransfer.SeriesChildTryOn')
+        ]
+      }
+    })
+    const showPromptAssist = ref(false)
+    const handleClickAssistBtn = () => {
+      showPromptAssist.value = true
+    }
 
-			isDefaultLike:true,//表示是否生成就like
-		}
-		
-		// return
-		// remPrductimgTime = setTimeout(()=>{
-		// 	productimg.productimgRemProductimg = true
-		// },10000)
-		let url = Https.httpUrls.relight
-		if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
-			data.modelName = speed.speedData.value
-			url = Https.httpUrls.toProduct
-		}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
-			url = Https.httpUrls.poseTransform
-			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(()=>{
+    let remPrductimgTime: any = null
+    let prductimgTime: any = null
+    const getData = () => {
+      let obj = null as any
+      if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+        'ToProductImage'
+      ) {
+        obj = {
+          elementId:
+            productimg.scaleImageList[productimg.scaleImageIndex].designOutfitId ||
+            productimg.scaleImageList[productimg.scaleImageIndex].elementId,
+          elementType: 'DesignOutfit',
+          parentId:
+            productimg.selectGenerate.parentId ||
+            productimg.selectGenerate.userLikeSortId,
+          // userLikeSortId:productimg.selectGenerate.userLikeSortId || null,
+          userLikeSortId:
+            productimg.openType == 'add'
+              ? productimg.selectGenerate.userLikeSortId || null
+              : null
+        }
+        if (
+          productimg.scaleImageList[productimg.scaleImageIndex]?.relationType == 'Design'
+        ) {
+          delete obj.userLikeSortId
+        }
+      } else if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'Relight'
+      ) {
+        obj = {
+          elementId:
+            productimg.scaleImageList[productimg.scaleImageIndex].designItemId ||
+            productimg.scaleImageList[productimg.scaleImageIndex].id ||
+            productimg.scaleImageList[productimg.scaleImageIndex],
+          elementType: 'ToProductImage',
+          parentId:
+            productimg.selectGenerate.parentId ||
+            productimg.selectGenerate.userLikeSortId,
+          userLikeSortId:
+            productimg.openType == 'add'
+              ? productimg.selectGenerate.userLikeSortId || null
+              : null
+          // userLikeSortId:productimg.selectGenerate.userLikeSortId || null,
+        }
+      } else if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+        'PoseTransfer'
+      ) {
+      }
+      console.log(productimg.selectGenerate)
+      return obj
+    }
+    const getPoseTransformData = () => {
+      return {
+        poseId: productimg.selectPose,
+        projectId: productimg.selectObject.id,
+        productImage: getMinioUrl(
+          productimg.scaleImageList[productimg.scaleImageIndex].sourceUrl
+        ),
+        modelName: speed.speedData.value,
+        mode: 1,
+        parentId:
+          productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
+        userLikeSortId:
+          productimg.openType == 'add'
+            ? productimg.selectGenerate.userLikeSortId || null
+            : null,
+        isDefaultLike: true //表示是否生成就like
+      }
+    }
+    let getPrductimg = async () => {
+      let obj = getData()
+      // let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
+      let imageStrength = (70 / 100) * productimg.productimgSimilarity
+      let data: any = {
+        direction: productimg.productimgRelightDirection,
+        prompt: productimg.productimgSearchName,
+        toProductImageVOList: [obj],
+        modelName: 'flux',
+        brightenValue: productimg.productimgBrightenValue,
+        projectId: productimg.selectObject.id,
+        imageStrength: (100 - imageStrength) / 100,
+        ageGroup: productimg.selectObject.ageGroup,
 
-			}).catch(()=>{
-				return
-			})
-			data = getPoseTransformData()
-		}
-		productimg.productimgIsProductimg = true
-		if(productimg.openType != 'add' || productimg.generateCourse){
-			await new Promise(async (res,reject)=>{
-				console.log(productimg.generateCourse,productimg.selectGenerate)
-				await props.onlike(productimg.generateCourse,productimg.selectGenerate.listType)
-				setTimeout(()=>{
-					res('')
-				},1000)
-			})
-			// await props.onlike(null,null,productimg.selectGenerate.listType,'onLike')
-		}
-		// setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}])
-		// return
-		Https.axiosPost(url, data).then(
-			(rv) => {
-				productimg.productimgRemProductimg = true
-				productimg.scaleImageList[productimg.scaleImageIndex].imgUrl = '/image/loading.gif'
-				let arr:any = []
-				
-				if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
-					rv = [rv]
-					// arr.push(rv.taskId)
-				}else{
-					// rv.forEach((item:any)=>{
-					// 	arr.push(item.taskId)  
-					// })
-				}
-				rv.forEach((item:any)=>{
-					arr.push(item.taskId)  
-				})
-				console.log(productimg.selectGenerate)
-				productimg.generateCourse = {
-					...rv[0],
-					prompt:productimg.productimgSearchName,
-					parentId:productimg.selectGenerate?.parentId || productimg.selectGenerate.userLikeGroupId,
-					// modelName:speed.speedData.value,
-					modelName:data.modelName,
-					poseId:productimg.selectPose,
-					sourceUrl:productimg.selectGenerate?.sourceUrl || productimg.selectGenerate?.productImage,
-					status:null,
-					oldId:productimg.openType == 'add'?null:productimg.selectGenerate.id,
-					resultType:productimg.selectGenerate?.resultType,
-				}
-				generateProceedList = rv.map(user => user.taskId);
-				setPrductimg(arr)
-				productimg.isGenerate = true
-			}
-		).catch(res=>{
-			productimg.productimgIsProductimg = false
-			clearInterval(remPrductimgTime)
-			productimg.productimgRemProductimg = 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(){
-						
-					}
-				});
-			}
+        isDefaultLike: true //表示是否生成就like
+      }
 
-		});
-	}
-	let generateProceedList:any = []
-	let setPrductimg = (dataList:any)=>{
-		let data = dataList
-		let dataNum = dataList.length
-		let state = true
-		let url = Https.httpUrls.relightResult
-		if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
-			url = Https.httpUrls.toProductImageResult
-		}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
-			url = Https.httpUrls.poseTransformResult
-			data = dataList
-		}
-		// url = Https.httpUrls.poseTransformResult
-		// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
-		prductimgTime = setInterval(()=>{
-			if(!state)return
-			state = false
-			Https.axiosPost(url, data).then(
-				(rv) => {
-					state = true
-					if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
-						let isEnd = false
-						if(rv[0].status == 'Success'){
-							productimg.generateCourse.url = rv[0].url
-							productimg.generateCourse.status = rv[0].status
-							productimg.generateCourse.designOutfitUrl = rv[0].url
-							if(rv[0]?.videoUrl){
-								productimg.generateCourse.firstFrameUrl = rv[0].firstFrameUrl
-								productimg.generateCourse.videoUrl = rv[0].videoUrl
-								productimg.generateCourse.gifUrl = rv[0].gifUrl
-							}
-							isEnd = true
-							clearInterval(remPrductimgTime)
-							store.dispatch('getCredits')
-						}else if(rv[0].status == 'Fail'){
-							message.info(rv[0]?.errorMessage || t('ProductImg.jsContent3'))
-							isEnd = true
-							productimg.generateCourse = null
-						}
-						generateProceedList = data
-						if(isEnd){
-							store.state.store.dispatch('getCredits')
-							clearInterval(prductimgTime)
-							clearInterval(remPrductimgTime)
-							productimg.productimgRemProductimg = false
-							productimg.productimgIsProductimg = false
-						}
-					}
-				}
-			).catch(res=>{
-				clearInterval(prductimgTime)
-				clearInterval(remPrductimgTime)
-				productimg.productimgIsProductimg = false
-				productimg.productimgRemProductimg= false
-			});
-		},productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'?10000:1000)
-	}
-	let removeProductimg = ()=>{
-		productimg.productimgIsProductimg = false
-		productimg.productimgRemProductimg= false
-		clearInterval(prductimgTime)
-		productimg.generateCourse = null
-		if(generateProceedList){
-			// let str = generateProceedList.length > 1?generateProceedList.join(',')
-			let data = {
-				uniqueId:generateProceedList,
-				userId:userDetail.value.userId,
-				type:productimg.scaleImageList[productimg.scaleImageIndex]?.resultType
-			}
-			if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
-				// data = {
-				// 	uniqueId:data.waitList,
-				// 	userId:store.state.UserHabit.userDetail.userId,
-				// 	timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				// 	type: 'PoseTransferation'
-				// }
-			}
-			Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
-				(rv) => {
-					generateProceedList = []
-				}
-			).catch(res=>{
-			});
-		}
-	}
-	const setUserData = (item:any)=>{
-		productimg.productimgSearchName = item.prompt
-		productimg.productimgBrightenValue = item.brightenValue
-		// productimg.productimgSimilarity = 100 - item.imageStrength * 100
-		productimg.productimgSimilarity = (100 - item.imageStrength * 100) * 100 / 70
-		productimg.productimgRelightDirection = item.direction
-		if(item.poseId){
-			let index = 0;
-			productimg.poseList.forEach((poseItem,poseIndex)=>{
-				if(Number(poseItem.id) == item.poseId){
-					index = poseIndex
-				}
-			})
-			setSelectPose(productimg.poseList[index],index)
-		}
-		let list = [] as any
-		if(item.resultType == 'PoseTransfer'){
-			list = speed.speedTypeList.poseTransfer
-		}else if(item.resultType == 'ToProductImage' || item.resultType == 'Relight'){
-			list = speed.speedTypeList.toPorductImg
-		}
-		if(list.length == 0)return
-		let modelName = ''
-		if(!item.modelName){
-			modelName = ''
-		}else{
-			modelName = item.modelName
-		}
-		list.forEach((item:any)=>{
-			
-			if(modelName == item.value){
-				speed.speedData = item
-			}
-		})
-	}
-	const clearUserData = ()=>{
-		productimg.productimgSearchName = ''
-		productimg.productimgSimilarity = 30
-		productimg.productimgRelightDirection = ''
-	}
-	let init = async (list:any,index:any,dialogueIndex:any,status:any,listType:string)=>{
-		console.log(list[index])
-		productimg.scaleImageList = list
-		productimg.scaleImageIndex = index
-		scaleImage.value = true
-		productimg.openType = status
-		if(status == 'add'){
-			productimg.selectGenerate = {
-				...list[index],
-				listType,
-			}
-			// productimgRemProductimg:false,
-			// productimgIsProductimg:false,
-			delete productimg.selectGenerate.url
-		}else{
-			productimg.selectGenerate = {
-				...list[index],
-			}
-			productimg.selectGenerate.listType = listType
-			productimg.selectGenerate.isIndex = index
-			
-			if(( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType !== 'PoseTransfer' && !list[index].url))){
-				productimg.productimgIsProductimg = true
-				productimg.productimgRemProductimg = true
-				productimg.generateCourse = {
-					...list[index]
-				}
-				setPrductimg([list[index].taskId])
-			}
-		}
-		productimg.productimgRelightDirection = JSON.parse(JSON.stringify(props.productData.RelightDirection))
-		
-		productimg.selectGenerate.parentId =  list[index].parentId || list[index].userLikeSortId
-		ifMaximumLength()
-		if(productimg.poseList.length == 0 && list[index].resultType == 'PoseTransfer'){
-			await getPoseList()		
-		}
-		productimg.isGenerate = false
-		if(productimg.scaleImageList[index].resultType == "PoseTransfer"){
-			speed.speedList = speed.speedTypeList.poseTransfer
-		}
-		if(productimg.scaleImageList[index].resultType == "Relight"){
-			speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
-		}else if(productimg.scaleImageList[index].resultType != "PoseTransfer"){
-			speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
-		}
-		speed.speedData = JSON.parse(JSON.stringify(speed.speedList[0]))
-		if(status != 'add'){
-			setUserData(list[index])
-		}
-		if(dialogueIndex)robotAssits.value = dialogueIndex
-	}
-	const getPoseList = async ()=>{
-		await new Promise((resolve, reject) => {
-			Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
-				rv[0].isChecked = true
-				productimg.selectPose = rv[0]?.id || 1
-				productimg.poseList = rv
-				resolve('')
-			}).catch(()=>{
-				resolve('')
-			})	
-		})
-		
-	}
-	const gifPlay = (e:any,item:any)=>{
-		e.target.src = item.gif || item.gifUrl//使用gif图片
-	}
-	const gifPause = (e:any,item:any)=>{
-		e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
-	}
-	const setSelectPose = (item:any,index:number)=>{
-		productimg.poseList.forEach((poseItem:any)=>{
-			poseItem.isChecked = false
-		})
-		productimg.poseList[index].isChecked = true
-		productimg.selectPose = item.id
-	}
-	const cancelDsign = async ()=>{
-		if(productimg.productimgIsProductimg){
-			if(!productimg.productimgRemProductimg){
-				return message.info(t('Generate.generateLoading'))
-			}
-		}
-		if(productimg.generateCourse){
-			if(productimg.isGenerate){
-				if(productimg.productimgIsProductimg){
-					clearInterval(prductimgTime)
-					clearInterval(remPrductimgTime)
-					productimg.productimgRemProductimg = false
-					productimg.productimgIsProductimg = false
-				}
-				productimg.generateCourse.oldData = {}
-				if(productimg.selectGenerate.resultType == "Design"){
-					productimg.generateCourse.oldData.resultType = productimg.selectGenerate.resultType
-				}
-			}
-			let emitData = {
-				status:'add',
-				// status:productimg.openType,
-				addList:[{
-					...productimg.generateCourse,
-				}]
-			}
-			emit('upDataDesignLikeList',emitData,'noBatch')
-			productimg.generateCourse = null
-		}
-		productimg.openType = ''
-		scaleImage.value = false
-		clearInterval(prductimgTime)
-		clearInterval(remPrductimgTime)
-		clearUserData()
-		productimg.scaleImageList = []
-		productimg.scaleImageIndex = -1
-		productimg.productimgIsProductimg = false
-		productimg.productimgRemProductimg= false
-	}
-	const ifMaximumLength = async ()=>{
-		await nextTick()
-		let textarea = productimg.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;
-	}
-	onBeforeUnmount(()=>{
-		clearInterval(prductimgTime)
-		clearInterval(remPrductimgTime)
-		productimg.productimgIsProductimg = false
-		productimg.productimgRemProductimg= false
-	})
-	return {
-		t,
-		...toRefs(productimg),
-		...toRefs(speed),
-		openSpeed,
-		setSpeed,
-		scaleImage,
-		loadingShow,
-		isComparison,
-		visible,
-		setVisible,
-		scaleImageMask,
-		isLike,
-		robotAssits,
-		getPrductimg,
-		removeProductimg,
-		getPoseList,
-		gifPlay,
-		gifPause,
-		setSelectPose,
-		generateProceedList,
-		init,
-		cancelDsign,
-		prductimgTime,
-		remPrductimgTime,
-		ifMaximumLength,
-	};
-},
-data() {
-	return {
-		// moodTemplateId: "", //模板id
-		isNext:false
-	};
-},
-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);
-			})
-		}
-	},
-},
-mounted() {
-},
-methods: {
-	
-	download(){
-		let url
-		if(this.selectGenerate?.resultType == 'PoseTransfer' || this.generateCourse?.resultType == 'PoseTransfer'){
-			url = this.selectGenerate?.videoUrl
-			if(this.generateCourse?.videoUrl){
-				url = this.generateCourse.videoUrl
-			}
-			downloadVideoWithFetch(url)
-		}else{
-			url = this.generateCourse?.url || this.selectGenerate?.designOutfitUrl || this.selectGenerate?.url
-			downloadIamge(url)
-		}
-	},
-	setScaleImageIndex(index:any){
-		// this.scaleImageIndex = index
-		this.setImageIndex(index)
-	},
-	setImageIndex(index:any){
-		if(this.isNext)return
-		// let this_ = this
-		// if(this.isCanvas){
-		// 	this.isNext = true
-		// 	new Promise((resolve,reject)=>{
-		// 		Modal.confirm({
-		// 			title: this.t('scaleImage.submitCanvas'),
-		// 			icon: createVNode(ExclamationCircleOutlined),
-		// 			okText: 'Yes',
-		// 			cancelText: 'No',
-		// 			mask:false,
-		// 			centered:true,
-		// 			onOk() {
-		// 				this_.scaleImageIndex = index
-		// 				this_.isNext = false
-		// 				resolve('') 
-		// 			},
-		// 			onCancel(){
-		// 				this_.isNext = false
-		// 				resolve('') 
-		// 			}
-		// 		});
-		// 	})
-		// }else{
-		// 	this.scaleImageIndex = index
-		// }
-		this.scaleImageIndex = index
-	},
-	LikeFile(item:any,str:string){
-		let parent:any = this.$parent
-		if(this.robotAssits){
-			parent.likeFile(item,this.scaleImageIndex,this.robotAssits)
-		}else{
-			parent.likeFile(item,str)
-		}
-	},
-},
-});
+      // return
+      // remPrductimgTime = setTimeout(()=>{
+      // 	productimg.productimgRemProductimg = true
+      // },10000)
+      let url = Https.httpUrls.relight
+      if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+        'ToProductImage'
+      ) {
+        data.modelName = speed.speedData.value
+        url = Https.httpUrls.toProduct
+      } else if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+        'PoseTransfer'
+      ) {
+        url = Https.httpUrls.poseTransform
+        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 = getPoseTransformData()
+      }
+      productimg.productimgIsProductimg = true
+      if (productimg.openType != 'add' || productimg.generateCourse) {
+        await new Promise(async (res, reject) => {
+          console.log(productimg.generateCourse, productimg.selectGenerate)
+          await props.onlike(
+            productimg.generateCourse,
+            productimg.selectGenerate.listType
+          )
+          setTimeout(() => {
+            res('')
+          }, 1000)
+        })
+        // await props.onlike(null,null,productimg.selectGenerate.listType,'onLike')
+      }
+      // setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}])
+      // return
+      Https.axiosPost(url, data)
+        .then(rv => {
+          productimg.productimgRemProductimg = true
+          productimg.scaleImageList[productimg.scaleImageIndex].imgUrl =
+            '/image/loading.gif'
+          let arr: any = []
+
+          if (
+            productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+            'PoseTransfer'
+          ) {
+            rv = [rv]
+            // arr.push(rv.taskId)
+          } else {
+            // rv.forEach((item:any)=>{
+            // 	arr.push(item.taskId)
+            // })
+          }
+          rv.forEach((item: any) => {
+            arr.push(item.taskId)
+          })
+          console.log(productimg.selectGenerate)
+          productimg.generateCourse = {
+            ...rv[0],
+            prompt: productimg.productimgSearchName,
+            parentId:
+              productimg.selectGenerate?.parentId ||
+              productimg.selectGenerate.userLikeGroupId,
+            // modelName:speed.speedData.value,
+            modelName: data.modelName,
+            poseId: productimg.selectPose,
+            sourceUrl:
+              productimg.selectGenerate?.sourceUrl ||
+              productimg.selectGenerate?.productImage,
+            status: null,
+            oldId: productimg.openType == 'add' ? null : productimg.selectGenerate.id,
+            resultType: productimg.selectGenerate?.resultType
+          }
+          generateProceedList = rv.map(user => user.taskId)
+          setPrductimg(arr)
+          productimg.isGenerate = true
+        })
+        .catch(res => {
+          productimg.productimgIsProductimg = false
+          clearInterval(remPrductimgTime)
+          productimg.productimgRemProductimg = 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() {}
+            })
+          }
+        })
+    }
+    let generateProceedList: any = []
+    let setPrductimg = (dataList: any) => {
+      let data = dataList
+      let dataNum = dataList.length
+      let state = true
+      let url = Https.httpUrls.relightResult
+      if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+        'ToProductImage'
+      ) {
+        url = Https.httpUrls.toProductImageResult
+      } else if (
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+        'PoseTransfer'
+      ) {
+        url = Https.httpUrls.poseTransformResult
+        data = dataList
+      }
+      // url = Https.httpUrls.poseTransformResult
+      // data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
+      prductimgTime = setInterval(
+        () => {
+          if (!state) return
+          state = false
+          Https.axiosPost(url, data)
+            .then(rv => {
+              state = true
+              if (productimg.productimgIsProductimg) {
+                //防止取消后有正在执行的获取状态
+                let isEnd = false
+                if (rv[0].status == 'Success') {
+                  productimg.generateCourse.url = rv[0].url
+                  productimg.generateCourse.status = rv[0].status
+                  productimg.generateCourse.designOutfitUrl = rv[0].url
+                  if (rv[0]?.videoUrl) {
+                    productimg.generateCourse.firstFrameUrl = rv[0].firstFrameUrl
+                    productimg.generateCourse.videoUrl = rv[0].videoUrl
+                    productimg.generateCourse.gifUrl = rv[0].gifUrl
+                  }
+                  isEnd = true
+                  clearInterval(remPrductimgTime)
+                  store.dispatch('getCredits')
+                } else if (rv[0].status == 'Fail') {
+                  message.info(rv[0]?.errorMessage || t('ProductImg.jsContent3'))
+                  isEnd = true
+                  productimg.generateCourse = null
+                }
+                generateProceedList = data
+                if (isEnd) {
+                  store.state.store.dispatch('getCredits')
+                  clearInterval(prductimgTime)
+                  clearInterval(remPrductimgTime)
+                  productimg.productimgRemProductimg = false
+                  productimg.productimgIsProductimg = false
+                }
+              }
+            })
+            .catch(res => {
+              clearInterval(prductimgTime)
+              clearInterval(remPrductimgTime)
+              productimg.productimgIsProductimg = false
+              productimg.productimgRemProductimg = false
+            })
+        },
+        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+          'PoseTransfer'
+          ? 10000
+          : 1000
+      )
+    }
+    let removeProductimg = () => {
+      productimg.productimgIsProductimg = false
+      productimg.productimgRemProductimg = false
+      clearInterval(prductimgTime)
+      productimg.generateCourse = null
+      if (generateProceedList) {
+        // let str = generateProceedList.length > 1?generateProceedList.join(',')
+        let data = {
+          uniqueId: generateProceedList,
+          userId: userDetail.value.userId,
+          type: productimg.scaleImageList[productimg.scaleImageIndex]?.resultType
+        }
+        if (
+          productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
+          'PoseTransfer'
+        ) {
+          // data = {
+          // 	uniqueId:data.waitList,
+          // 	userId:store.state.UserHabit.userDetail.userId,
+          // 	timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+          // 	type: 'PoseTransferation'
+          // }
+        }
+        Https.axiosGet(Https.httpUrls.generateStopWaiting, { params: data })
+          .then(rv => {
+            generateProceedList = []
+          })
+          .catch(res => {})
+      }
+    }
+    const setUserData = (item: any) => {
+      productimg.productimgSearchName = item.prompt
+      productimg.productimgBrightenValue = item.brightenValue
+      // productimg.productimgSimilarity = 100 - item.imageStrength * 100
+      productimg.productimgSimilarity = ((100 - item.imageStrength * 100) * 100) / 70
+      productimg.productimgRelightDirection = item.direction
+      if (item.poseId) {
+        let index = 0
+        productimg.poseList.forEach((poseItem, poseIndex) => {
+          if (Number(poseItem.id) == item.poseId) {
+            index = poseIndex
+          }
+        })
+        setSelectPose(productimg.poseList[index], index)
+      }
+      let list = [] as any
+      if (item.resultType == 'PoseTransfer') {
+        list = speed.speedTypeList.poseTransfer
+      } else if (item.resultType == 'ToProductImage' || item.resultType == 'Relight') {
+        list = speed.speedTypeList.toPorductImg
+      }
+      if (list.length == 0) return
+      let modelName = ''
+      if (!item.modelName) {
+        modelName = ''
+      } else {
+        modelName = item.modelName
+      }
+      list.forEach((item: any) => {
+        if (modelName == item.value) {
+          speed.speedData = item
+        }
+      })
+    }
+    const clearUserData = () => {
+      productimg.productimgSearchName = ''
+      productimg.productimgSimilarity = 30
+      productimg.productimgRelightDirection = ''
+    }
+    let init = async (
+      list: any,
+      index: any,
+      dialogueIndex: any,
+      status: any,
+      listType: string
+    ) => {
+      console.log(list[index])
+      productimg.scaleImageList = list
+      productimg.scaleImageIndex = index
+      scaleImage.value = true
+      productimg.openType = status
+      if (status == 'add') {
+        productimg.selectGenerate = {
+          ...list[index],
+          listType
+        }
+        // productimgRemProductimg:false,
+        // productimgIsProductimg:false,
+        delete productimg.selectGenerate.url
+      } else {
+        productimg.selectGenerate = {
+          ...list[index]
+        }
+        productimg.selectGenerate.listType = listType
+        productimg.selectGenerate.isIndex = index
+
+        if (
+          (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) ||
+          (list[index].resultType !== 'PoseTransfer' && !list[index].url)
+        ) {
+          productimg.productimgIsProductimg = true
+          productimg.productimgRemProductimg = true
+          productimg.generateCourse = {
+            ...list[index]
+          }
+          setPrductimg([list[index].taskId])
+        }
+      }
+      productimg.productimgRelightDirection = JSON.parse(
+        JSON.stringify(props.productData.RelightDirection)
+      )
+
+      productimg.selectGenerate.parentId =
+        list[index].parentId || list[index].userLikeSortId
+      ifMaximumLength()
+      if (productimg.poseList.length == 0 && list[index].resultType == 'PoseTransfer') {
+        await getPoseList()
+      }
+      productimg.isGenerate = false
+      if (productimg.scaleImageList[index].resultType == 'PoseTransfer') {
+        speed.speedList = speed.speedTypeList.poseTransfer
+      }
+      if (productimg.scaleImageList[index].resultType == 'Relight') {
+        speed.speedList = [
+          speed.speedTypeList.toPorductImg[0],
+          speed.speedTypeList.toPorductImg[1]
+        ]
+      } else if (productimg.scaleImageList[index].resultType != 'PoseTransfer') {
+        speed.speedList = [
+          speed.speedTypeList.toPorductImg[0],
+          speed.speedTypeList.toPorductImg[1]
+        ]
+      }
+      speed.speedData = JSON.parse(JSON.stringify(speed.speedList[0]))
+      if (status != 'add') {
+        setUserData(list[index])
+      }
+      if (dialogueIndex) robotAssits.value = dialogueIndex
+    }
+    const getPoseList = async () => {
+      await new Promise((resolve, reject) => {
+        Https.axiosGet(Https.httpUrls.getAllPose)
+          .then(rv => {
+            rv[0].isChecked = true
+            productimg.selectPose = rv[0]?.id || 1
+            productimg.poseList = rv
+            resolve('')
+          })
+          .catch(() => {
+            resolve('')
+          })
+      })
+    }
+    const gifPlay = (e: any, item: any) => {
+      e.target.src = item.gif || item.gifUrl //使用gif图片
+    }
+    const gifPause = (e: any, item: any) => {
+      e.target.src = item.firstFrame || item.firstFrameUrl //静态图片
+    }
+    // 存储视频元素的引用
+    const videoRefs = ref<Record<number, HTMLVideoElement | null>>({})
+    // 存储视频播放状态
+    const videoPlayingStates = ref<Record<number, boolean>>({})
+
+    // 设置视频 ref
+    const setVideoRef = (id: number, el: HTMLVideoElement | null) => {
+      if (el) {
+        videoRefs.value[id] = el
+        // 初始化播放状态
+        videoPlayingStates.value[id] = !el.paused
+        // 监听播放事件
+        el.addEventListener('play', () => {
+          videoPlayingStates.value[id] = true
+        })
+        // 监听暂停事件
+        el.addEventListener('pause', () => {
+          videoPlayingStates.value[id] = false
+        })
+        // 监听结束事件
+        el.addEventListener('ended', () => {
+          videoPlayingStates.value[id] = false
+        })
+      }
+    }
+
+    // 检查视频是否正在播放
+    const isVideoPlaying = (id: number) => {
+      return videoPlayingStates.value[id] || false
+    }
+
+    // 播放视频
+    const handlePlayMotion = (item: any) => {
+      const video = videoRefs.value[item.id]
+      if (video) {
+        if (video.paused) {
+          video.play().catch(err => {
+            console.error('播放视频失败:', err)
+          })
+        } else {
+          video.pause()
+        }
+      }
+    }
+    const setSelectPose = (item: any, index: number) => {
+      productimg.poseList.forEach((poseItem: any) => {
+        poseItem.isChecked = false
+      })
+      productimg.poseList[index].isChecked = true
+      productimg.selectPose = item.id
+    }
+    const cancelDsign = async () => {
+      if (productimg.productimgIsProductimg) {
+        if (!productimg.productimgRemProductimg) {
+          return message.info(t('Generate.generateLoading'))
+        }
+      }
+      if (productimg.generateCourse) {
+        if (productimg.isGenerate) {
+          if (productimg.productimgIsProductimg) {
+            clearInterval(prductimgTime)
+            clearInterval(remPrductimgTime)
+            productimg.productimgRemProductimg = false
+            productimg.productimgIsProductimg = false
+          }
+          productimg.generateCourse.oldData = {}
+          if (productimg.selectGenerate.resultType == 'Design') {
+            productimg.generateCourse.oldData.resultType =
+              productimg.selectGenerate.resultType
+          }
+        }
+        let emitData = {
+          status: 'add',
+          // status:productimg.openType,
+          addList: [
+            {
+              ...productimg.generateCourse
+            }
+          ]
+        }
+        emit('upDataDesignLikeList', emitData, 'noBatch')
+        productimg.generateCourse = null
+      }
+      productimg.openType = ''
+      scaleImage.value = false
+      clearInterval(prductimgTime)
+      clearInterval(remPrductimgTime)
+      clearUserData()
+      productimg.scaleImageList = []
+      productimg.scaleImageIndex = -1
+      productimg.productimgIsProductimg = false
+      productimg.productimgRemProductimg = false
+    }
+    const ifMaximumLength = async () => {
+      // 等待 DOM 更新后再读取 scrollHeight，避免高度计算不准
+      await nextTick()
+      const textarea = textareaRef.value as HTMLTextAreaElement | null
+      if (!textarea) return
+      // 先重置高度，再用内容撑开的高度
+      textarea.style.height = 'auto'
+      const newHeight = textarea.scrollHeight
+      textarea.style.height = newHeight + 'px'
+    }
+    onBeforeUnmount(() => {
+      clearInterval(prductimgTime)
+      clearInterval(remPrductimgTime)
+      productimg.productimgIsProductimg = false
+      productimg.productimgRemProductimg = false
+    })
+    return {
+      t,
+      ...toRefs(productimg),
+      ...toRefs(speed),
+      openSpeed,
+      setSpeed,
+      scaleImage,
+      loadingShow,
+      isComparison,
+      visible,
+      setVisible,
+      scaleImageMask,
+      isLike,
+      robotAssits,
+      promptTextList,
+      showPromptAssist,
+      handleClickAssistBtn,
+      getPrductimg,
+      removeProductimg,
+      getPoseList,
+      gifPlay,
+      gifPause,
+      setSelectPose,
+      setVideoRef,
+      handlePlayMotion,
+      isVideoPlaying,
+      generateProceedList,
+      init,
+      cancelDsign,
+      prductimgTime,
+      remPrductimgTime,
+      ifMaximumLength,
+      textareaRef
+    }
+  },
+  data() {
+    return {
+      // moodTemplateId: "", //模板id
+      isNext: false
+    }
+  },
+  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)
+        })
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    download() {
+      let url
+      if (
+        this.selectGenerate?.resultType == 'PoseTransfer' ||
+        this.generateCourse?.resultType == 'PoseTransfer'
+      ) {
+        url = this.selectGenerate?.videoUrl
+        if (this.generateCourse?.videoUrl) {
+          url = this.generateCourse.videoUrl
+        }
+        downloadVideoWithFetch(url)
+      } else {
+        url =
+          this.generateCourse?.url ||
+          this.selectGenerate?.designOutfitUrl ||
+          this.selectGenerate?.url
+        downloadIamge(url)
+      }
+    },
+    setScaleImageIndex(index: any) {
+      // this.scaleImageIndex = index
+      this.setImageIndex(index)
+    },
+    setImageIndex(index: any) {
+      if (this.isNext) return
+      // let this_ = this
+      // if(this.isCanvas){
+      // 	this.isNext = true
+      // 	new Promise((resolve,reject)=>{
+      // 		Modal.confirm({
+      // 			title: this.t('scaleImage.submitCanvas'),
+      // 			icon: createVNode(ExclamationCircleOutlined),
+      // 			okText: 'Yes',
+      // 			cancelText: 'No',
+      // 			mask:false,
+      // 			centered:true,
+      // 			onOk() {
+      // 				this_.scaleImageIndex = index
+      // 				this_.isNext = false
+      // 				resolve('')
+      // 			},
+      // 			onCancel(){
+      // 				this_.isNext = false
+      // 				resolve('')
+      // 			}
+      // 		});
+      // 	})
+      // }else{
+      // 	this.scaleImageIndex = index
+      // }
+      this.scaleImageIndex = index
+    },
+    LikeFile(item: any, str: string) {
+      let parent: any = this.$parent
+      if (this.robotAssits) {
+        parent.likeFile(item, this.scaleImageIndex, this.robotAssits)
+      } else {
+        parent.likeFile(item, str)
+      }
+    }
+  }
+})
 </script>
 <style>
-.editDesignType_modal{
-overflow: visible !important;
+.editDesignType_modal {
+  overflow: visible !important;
 }
 </style>
-<style lang="less" >
+<style lang="less">
 .editDesignType_modal {
-.ant-modal-body {
-	display: flex;
-	flex-direction: column;
-}
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+  }
 
-.scaleImage_content{
-	display: flex;
-	justify-content: center;
-	height: 100%;
-	position: relative;
+  .scaleImage_content {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    position: relative;
 
-	width: 100%;
-	.productImg_modal{
-		position: relative;
-		left: 0;
-		z-index: 9;
+    width: 100%;
+    .productImg_modal {
+      position: relative;
+      left: 0;
+      z-index: 9;
 
-		flex: 1;
-		overflow: hidden;
-		.productImg_left{
-			width: 24rem;
-			display: flex;
-			height: 100%;
-			flex-direction: column;
-			width: 100%;
-			align-items: stretch;
-			flex-wrap: nowrap;
-			.input_box_btnBox{
-				width: 100%;
-			}
-			.input_box{
-				justify-content: flex-end;
-			}
-			.productImg_content_item_generate_btn{
-				// transform: translateY(100%);
-				// position: absolute;
-				// bottom: 0;
-				width: 100%;
-				justify-content: space-around;
-				margin-top: 0;
-			}
-			.productImg_content_item_title{
-				font-weight: 600;
-				font-size: 1.6rem;
-				margin-bottom: 1rem;
-				&.productImg_content_item_title_menu{
-					margin-bottom: 6rem;
-					:deep(.generalMenu_printModel){
-						margin: 0;
-						width: 100%;
-						> div,> ul{
-							width: 100%;
-						}
-					}
-					.productImg_content_item_title_menubtn{
-						font-size: 1.6rem;
-						font-weight: 500;
-					}
-				}
-				&.productImg_content_item_title_similarity{
-					// margin-bottom: 8rem;
-				}
-			}
-			.productImg_content_item_Direction{
-				padding-bottom: 1rem;
-				margin-right: 0;
-				margin-bottom: 1rem;
-			}
-			.selectText{
-				margin-bottom: 2rem;
-				display: flex;
-				width: 100%;
-				> div{
-					background: #efeff1;
-					width: 100%;
-					font-size: 1.6rem;
-					margin-right: 1.2rem;
-					border-radius: 1.6rem;
-					cursor: pointer;
-					padding: 1.2rem;
-					white-space: nowrap; /* 文本不换行 */
-					overflow: hidden; /* 溢出部分隐藏 */
-					text-overflow: ellipsis; /* 显示省略号 */
-					&:hover{
-						background: #F9FAFA;
-					}
-					&:first-child{
-						margin-right: 0;
-					}
-				}
-			}
-			.selectText{
-				margin-bottom: 2rem;
-				display: flex;
-				width: 100%;
-				> div{
-					background: #efeff1;
-					width: 100%;
-					height: 4.8rem;
-					margin-right: 1.2rem;
-					border-radius: 1.6rem;
-					cursor: pointer;
-					padding: 1.2rem;
-					white-space: nowrap; /* 文本不换行 */
-					overflow: hidden; /* 溢出部分隐藏 */
-					text-overflow: ellipsis; /* 显示省略号 */
-					&:hover{
-						background: #F9FAFA;
-					}
-					&:first-child{
-						margin-right: 0;
-					}
-				}
-			}
-			.transferPose{
-				display: flex;
-				flex-direction: column;
-				> .imgBox{
-					flex: 1;
-					max-height: 45rem;
-					display: flex;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					justify-content: space-between;
-					width: 100%;
-					overflow: hidden;
-					overflow-x: auto;
-					> .item{
-						margin-right: 1rem;
-						width: 15rem;
-						// width: calc(100% / 1.2 - .5rem);
-						cursor: pointer;
-						overflow: hidden;
-						display: flex;
-						justify-content: center;
-						flex-shrink: 0;
-						height: 25rem;
-						position: relative;
-						> .checkbox{
-							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;
+      flex: 1;
+      overflow: hidden;
+      .productImg_left {
+        width: 24rem;
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        width: 100%;
+        align-items: stretch;
+        flex-wrap: nowrap;
+        .input_box_btnBox {
+          width: 100%;
+        }
+        .input_box {
+          justify-content: flex-end;
+        }
+        .productImg_content_item_generate_btn {
+          // transform: translateY(100%);
+          // position: absolute;
+          // bottom: 0;
+          width: 100%;
+          justify-content: space-around;
+          margin-top: 0;
+        }
+        .productImg_content_item_title {
+          font-weight: 600;
+          font-size: 1.6rem;
+          margin-bottom: 1rem;
+          &.productImg_content_item_title_menu {
+            margin-bottom: 6rem;
+            :deep(.generalMenu_printModel) {
+              margin: 0;
+              width: 100%;
+              > div,
+              > ul {
+                width: 100%;
+              }
+            }
+            .productImg_content_item_title_menubtn {
+              font-size: 1.6rem;
+              font-weight: 500;
+            }
+          }
+          &.productImg_content_item_title_similarity {
+            // margin-bottom: 8rem;
+          }
+        }
+        .productImg_content_item_Direction {
+          padding-bottom: 1rem;
+          margin-right: 0;
+          margin-bottom: 1rem;
+        }
+        .selectText {
+          margin-bottom: 2rem;
+          display: flex;
+          width: 100%;
+          > div {
+            background: #efeff1;
+            width: 100%;
+            font-size: 1.6rem;
+            margin-right: 1.2rem;
+            border-radius: 1.6rem;
+            cursor: pointer;
+            padding: 1.2rem;
+            white-space: nowrap; /* 文本不换行 */
+            overflow: hidden; /* 溢出部分隐藏 */
+            text-overflow: ellipsis; /* 显示省略号 */
+            &:hover {
+              background: #f9fafa;
+            }
+            &:first-child {
+              margin-right: 0;
+            }
+          }
+        }
+        .selectText {
+          margin-bottom: 2rem;
+          display: flex;
+          width: 100%;
+          > div {
+            background: #efeff1;
+            width: 100%;
+            height: 4.8rem;
+            margin-right: 1.2rem;
+            border-radius: 1.6rem;
+            cursor: pointer;
+            padding: 1.2rem;
+            white-space: nowrap; /* 文本不换行 */
+            overflow: hidden; /* 溢出部分隐藏 */
+            text-overflow: ellipsis; /* 显示省略号 */
+            &:hover {
+              background: #f9fafa;
+            }
+            &:first-child {
+              margin-right: 0;
+            }
+          }
+        }
+        .transferPose {
+          display: flex;
+          flex-direction: column;
+          > .imgBox {
+            flex: 1;
+            max-height: 45rem;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            width: 100%;
+            overflow: hidden;
+            overflow-x: auto;
+            > .item {
+              margin-right: 1rem;
+              width: 15rem;
+              // width: calc(100% / 1.2 - .5rem);
+              cursor: pointer;
+              overflow: hidden;
+              display: flex;
+              justify-content: center;
+              flex-shrink: 0;
+              height: 25rem;
+              position: relative;
+              > .checkbox {
+                position: absolute;
+                top: 2rem;
+                right: 2rem;
+              }
+              > .btnBox {
+                position: absolute;
+                right: 1rem;
+                top: 1rem;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                z-index: 3;
+                > 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;
+              }
+              > video {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+              }
+              .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;
+                z-index: 2;
+                .icon-list {
+                  // height: 50%;
+                  // width: calc(100% - 1.6rem);
+                  padding-left: 1rem;
+                  display: flex;
+                  box-sizing: border-box;
+                  justify-content: flex-start;
+                  align-items: center;
+                  .play-icon {
+                    width: 2rem;
+                    height: 2rem;
+                  }
+                }
+              }
+            }
+            > .upload_item {
+              border: none;
+            }
+          }
+        }
+        .productImg_content_item_similarity {
+          padding-bottom: 2.4rem;
+          display: flex;
+          align-items: center;
+          input {
+            width: 5rem;
+            height: 5rem;
+            text-align: center;
+            font-size: 1.8rem;
+          }
+        }
+        .prompt-container {
+          margin-top: 4rem;
+          margin-bottom: 3rem;
+          position: relative;
+
+          padding-right: 0.8rem;
+          .prompt-title {
+            margin-bottom: 1.4rem;
+            font-size: 1.6rem;
+          }
+          .input_border {
+            padding-bottom: 0;
+            .input_box {
+              .input_box_btnBox {
+                position: relative;
 								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;
-						}
-					}
-					> .upload_item{
-						border: none;
-					}
-				}
-			}
-			.productImg_content_item_similarity{
-				padding-bottom: 2.4rem;
-				display: flex;
-				align-items: center;
-				input{
-					width: 5rem;
-					height: 5rem;
-					text-align: center;
-					font-size: 1.8rem;
-				}
-			}
-		}
-	}
-	.scaleImage_content_imgBox{
-		position: relative;
-		width: auto;
-		// min-width: 70%;
-		width: 76%;
-		text-align: center;
-		justify-content: center;
-		> .loadBox{
-			display: flex;
-			width: auto;
-			height: 100%;
-			max-width: 50rem;
-			min-width: 40rem;
-			align-items: center;
-			justify-content: center;
-			> .imgBox{
-				height: 100%;
-			}
-
-		}
-		img{
-			width: auto;
-			height: 100%;
-			max-width: 50rem;
-			min-width: 40rem;
-			object-fit: contain;
-		}
-		&.active{
-			display: flex;
-			img{
-				// width: 50%;
-				height: 100%;
-				object-fit: contain;
-				margin: 0 1rem;
-			}
-		}
-		.img_operate_block{
-			width: 3.6rem;
-			height: 3.6rem;
-			background: rgba(0,0,0,0.6);
-			border-radius: 50%;
-			text-align: center;
-			line-height: 3.6rem;
-			cursor: pointer;
-			margin-bottom: 0.4rem;
-			position: absolute;
-			right: 2rem;
-			top: 2rem;
-			opacity: 0;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 2;
-			.operate_icon{
-				font-size: 1.8rem;
-				color: #fff;
-				&.fi-sr-heart{
-					color: red;
-				}
-			}
-			i{
-				display: flex;
-				font-size: 1.8rem;
-				color: #fff;
-			}
-		}
-	}
-	
-	
+								flex-direction: column;
+								align-items: flex-start;
+                .textarea {
+									width: 100%;
+                  min-height: 12.7rem;
+                  max-height: 14rem;
+                  overflow-y: auto;
+                  resize: none;
+                  padding-bottom: 1rem;
+                }
+              }
+            }
+          }
+          .asistant-btn {
+            height: 2.3rem;
+            padding: 0 0.6rem;
+            font-size: 1rem;
+            font-weight: 400;
+            color: #313131;
+            display: flex;
+            column-gap: 0.3rem;
+            justify-content: center;
+            align-items: center;
+            background-color: #f2f2f2;
+            border: 1px solid #dfdfdf;
+            border-radius: 0.5rem;
+            cursor: pointer;
+            .asistant-icon {
+              font-size: 1rem;
+              margin-right: 0;
+              width: initial;
+            }
+          }
+        }
+      }
+    }
+    .scaleImage_content_imgBox {
+      position: relative;
+      width: auto;
+      // min-width: 70%;
+      width: 76%;
+      text-align: center;
+      justify-content: center;
+      > .loadBox {
+        display: flex;
+        width: auto;
+        height: 100%;
+        max-width: 50rem;
+        min-width: 40rem;
+        align-items: center;
+        justify-content: center;
+        > .imgBox {
+          height: 100%;
+        }
+      }
+      img {
+        width: auto;
+        height: 100%;
+        max-width: 50rem;
+        min-width: 40rem;
+        object-fit: contain;
+      }
+      &.active {
+        display: flex;
+        img {
+          // width: 50%;
+          height: 100%;
+          object-fit: contain;
+          margin: 0 1rem;
+        }
+      }
+      .img_operate_block {
+        width: 3.6rem;
+        height: 3.6rem;
+        background: rgba(0, 0, 0, 0.6);
+        border-radius: 50%;
+        text-align: center;
+        line-height: 3.6rem;
+        cursor: pointer;
+        margin-bottom: 0.4rem;
+        position: absolute;
+        right: 2rem;
+        top: 2rem;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        .operate_icon {
+          font-size: 1.8rem;
+          color: #fff;
+          &.fi-sr-heart {
+            color: red;
+          }
+        }
+        i {
+          display: flex;
+          font-size: 1.8rem;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .scaleImage_content_imgBox:hover {
+    .img_operate_block {
+      opacity: 1;
+    }
+  }
+  .scaleImage_nav {
+    flex: 1;
+    margin: calc(2.5rem * 1.2) calc(0rem * 1.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    top: 100%;
+    left: 0;
+    position: absolute;
+    .nav_left,
+    .nav_right {
+      cursor: pointer;
+      top: 50%;
+      i {
+        display: flex;
+        font-size: 4rem;
+        transition: 0.3s all;
+        color: rgba(0, 0, 0, 0.5);
+      }
+    }
+    // .nav_left{
+    // 	left: 0;
+    // 	transform: translate(-200%,-50%);
+    // }
+    // .nav_right{
+    //     right: 0;
+    // 	transform: translate(200%,-50%);
+    // }
+    .nav_left:hover,
+    .nav_right:hover {
+      i {
+        color: rgba(0, 0, 0, 1);
+      }
+    }
+    .nav_list {
+      margin: 0 calc(2rem * 1.2);
+      max-width: calc(60rem * 1.2);
+      overflow-y: hidden;
+      &.nav_list::-webkit-scrollbar {
+        display: none;
+      }
+      .nav_centent {
+        width: auto;
+        display: flex;
+      }
+      img {
+        max-width: calc(5rem * 1.2);
+        max-height: calc(5rem * 1.2);
+        object-fit: cover;
+        object-position: 50%, 50%;
+        margin-left: calc(1rem * 1.2);
+        border-radius: calc(1rem * 1.2);
+        overflow: hidden;
+        cursor: pointer;
+        padding: calc(0.1rem * 1.2);
+        flex-shrink: 0;
+        &.active {
+          border: 2px solid #aaaaaa;
+        }
+      }
+      img:nth-child(1) {
+        margin-left: calc(0rem * 1.2);
+      }
+    }
+  }
 }
-.scaleImage_content_imgBox:hover{
-	.img_operate_block{
-		opacity: 1;
-	}
-}
-.scaleImage_nav{
-	flex: 1;
-	margin: calc(2.5rem*1.2) calc(0rem*1.2);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	top: 100%;
-	left: 0;
-	position: absolute;
-	.nav_left,.nav_right{
-		cursor: pointer;
-		top: 50%;
-		i{
-			display: flex;
-			font-size: 4rem;
-			transition: .3s all;
-			color: rgba(0, 0, 0, .5);
-		}
-	}
-	// .nav_left{
-	// 	left: 0;
-	// 	transform: translate(-200%,-50%);
-	// }
-	// .nav_right{
-	//     right: 0;
-	// 	transform: translate(200%,-50%);
-	// }
-	.nav_left:hover,.nav_right:hover{
-		i{
-			color: rgba(0, 0, 0, 1);
-		}
-	}
-	.nav_list{
-		margin: 0 calc(2rem*1.2);
-		max-width:  calc(60rem*1.2);
-		overflow-y: hidden;
-		&.nav_list::-webkit-scrollbar {
-			display: none;
-		}
-		.nav_centent{
-			width: auto;
-			display: flex;
-		}
-		img{
-			max-width: calc(5rem*1.2);
-			max-height: calc(5rem*1.2);
-			object-fit: cover;
-			object-position: 50%,50%;
-			margin-left: calc(1rem*1.2);
-			border-radius: calc(1rem*1.2);
-			overflow: hidden;
-			cursor: pointer;
-			padding: calc(.1rem*1.2);
-			flex-shrink: 0;
-			&.active{
-				border: 2px solid #aaaaaa;
-			}
-		}
-		img:nth-child(1){
-			margin-left: calc(0rem*1.2);
-		}
-	}
-}
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/home/tools/poseTransfer/Product.vue b/src/component/home/tools/poseTransfer/Product.vue
new file mode 100644
index 00000000..8960cf94
--- /dev/null
+++ b/src/component/home/tools/poseTransfer/Product.vue
@@ -0,0 +1,248 @@
+<template>
+  <a-modal
+    class="product-modal generalModel"
+    v-model:visible="showModal"
+    :footer="null"
+    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="content-wrapper">
+      <div class="title-container">
+        <div class="title">{{ type === 'first' ? 'First Frame' : 'Last Frame' }}</div>
+      </div>
+      <div class="content-container">
+        <div class="video-frames-wrapper">
+          <div class="video-frames-scroll">
+            <div
+              v-for="(frame, index) in frameList"
+              :key="index"
+              class="frame-item"
+              @click="selectFrame(index)"
+            >
+              <SvgIcon
+                v-if="selectedFrameIndex === index"
+                class="check-icon"
+                name="CCheck"
+                color="#000000"
+                size="24"
+              />
+              <img v-if="frame.url" :src="frame.url" alt="" />
+              <div v-else class="frame-placeholder"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="action-container">
+        <button class="confirm-btn" @click="handleConfirm">Confirm</button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  frameList: Array<{ url?: string }>
+  type: String // first last
+}>()
+
+const showModal = defineModel<boolean>('showModal', { required: true })
+const selectedFrameIndex = ref<number | null>(null)
+
+const emits = defineEmits(['confirm'])
+
+// 当 type 改变时，重置选中状态
+watch(() => props.type, () => {
+  selectedFrameIndex.value = null
+})
+
+// 当弹窗关闭时，重置选中状态
+watch(() => showModal.value, (newVal) => {
+  if (!newVal) {
+    selectedFrameIndex.value = null
+  }
+})
+
+const handleClose = () => {
+  showModal.value = false
+}
+
+const selectFrame = (index: number) => {
+  selectedFrameIndex.value = index
+}
+
+const handleConfirm = () => {
+  if (selectedFrameIndex.value !== null) {
+    // 触发确认事件或回调
+    const selected = props.frameList[selectedFrameIndex.value]
+    emits('confirm', { data: selected })
+  }
+  handleClose()
+}
+</script>
+
+<style lang="less" scoped>
+.product-modal {
+  .content-wrapper {
+    // padding: 0;
+    position: relative;
+    // margin-top: 1.36rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .title-container {
+      .title {
+        font-size: 2.4rem;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+
+    .content-container {
+      margin-top: 5.8rem;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+
+      .video-frames-wrapper {
+        background: #ffffff;
+        border-radius: 2rem;
+        padding: 1.2rem 2.88rem;
+        flex: 1;
+        height: 100%;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .video-frames-scroll {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 3.1rem;
+          align-content: flex-start;
+          overflow-y: auto;
+          overflow-x: auto;
+          flex: 1;
+          min-height: 0;
+          scrollbar-width: thin;
+          scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+          &::-webkit-scrollbar {
+            width: 0.4rem;
+            height: 0.4rem;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background-color: rgba(0, 0, 0, 0.2);
+            border-radius: 0.2rem;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: transparent;
+          }
+
+          .frame-item {
+            flex-shrink: 0;
+            width: 16.47rem;
+            height: 24.6rem;
+            border-radius: 0;
+            border: 0.1rem solid #999999;
+            overflow: hidden;
+            cursor: pointer;
+            position: relative;
+            overflow: visible;
+
+            .check-icon {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              transform: translate(50%, 50%);
+            }
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              display: block;
+            }
+
+            .frame-placeholder {
+              width: 100%;
+              height: 100%;
+              background: #f5f5f5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .action-container {
+    display: flex;
+    justify-content: flex-end;
+
+    .confirm-btn {
+      width: 8.6rem;
+      height: 4rem;
+      background: #000000;
+      color: #ffffff;
+      border: none;
+      border-radius: 2rem;
+      font-size: 1.2rem;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease;
+    }
+  }
+}
+
+:deep(.generalModel .ant-modal-body) {
+  padding: 5rem 4.4rem 8rem 4.6rem;
+}
+
+.c-svg {
+  width: initial;
+  height: initial;
+}
+</style>
diff --git a/src/component/home/tools/poseTransfer/index.vue b/src/component/home/tools/poseTransfer/index.vue
index f6d4ffd1..4318beef 100644
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -31,7 +31,7 @@
             </div>
             <div class="imgBox" v-mousewheel>
               <div
-                class="item"
+                class="item first-frame"
                 :class="{ active: item.id == selectImg.id }"
                 v-for="(item, index) in showFirstFrameList"
                 @click="selectImgItem(item)"
@@ -52,23 +52,26 @@
                   v-show="item.designOutfitUrl || item.imgUrl || item.url"
                   class="btnBox"
                 >
-                  <div :class="{ active: item.isChecked }">
+                  <div
+                    :class="{ active: item.isChecked }"
+                    v-if="!(isDesignPage && videoType === 3)"
+                  >
                     <i class="fi fi-br-check"></i>
                   </div>
                   <div
                     @click.stop="setUploadDelete(item, index)"
-                    v-if="source != 'design'"
+                    v-if="source != 'design' || (isDesignPage && videoType === 3)"
                   >
                     <i class="fi fi-rr-trash icon_delete"></i>
                   </div>
                 </div>
               </div>
-              <div
-                class="upload_item item"
-                v-show="
-                  !isDesignPage && !(videoType === 3 && showFirstFrameList.length > 0)
-                "
-              >
+              <div class="upload_item item first_frames" v-show="showFirstFrameUpload">
+                <div
+                  class="design-mask"
+                  v-if="isDesignPage && videoType === 3"
+                  @click="handleClickDesignMask('first')"
+                />
                 <div class="upload_file_item">
                   <a-upload
                     key="common"
@@ -93,9 +96,14 @@
               </div>
               <template v-if="videoType === 3">
                 <div
+                  v-show="lastFrameList?.length < 1"
                   class="upload_item item last_frames"
-                  v-show="!isDesignPage && lastFrameList?.length < 1"
                 >
+                  <div
+                    class="design-mask"
+                    v-if="isDesignPage && videoType === 3"
+                    @click="handleClickDesignMask('last')"
+                  />
                   <div class="upload_file_item">
                     <a-upload
                       key="lastframes"
@@ -142,12 +150,15 @@
                     v-show="item.designOutfitUrl || item.imgUrl || item.url"
                     class="btnBox"
                   >
-                    <div :class="{ active: item.isChecked }">
+                    <div
+                      :class="{ active: item.isChecked }"
+                      v-if="!(isDesignPage && videoType === 3)"
+                    >
                       <i class="fi fi-br-check"></i>
                     </div>
                     <div
                       @click.stop="setUploadDelete(item, index, true)"
-                      v-if="source != 'design'"
+                      v-if="source != 'design' || (isDesignPage && videoType === 3)"
                     >
                       <i class="fi fi-rr-trash icon_delete"></i>
                     </div>
@@ -180,19 +191,10 @@
                 <div class="control-container">
                   <div class="icon-list">
                     <SvgIcon
-                      v-show="!isVideoPlaying(item.id)"
                       class="play-icon"
                       @click.stop="handlePlayMotion(item)"
-                      name="CPlay"
-                      size="10"
-                      color="#fff"
-                    />
-                    <SvgIcon
-                      v-show="isVideoPlaying(item.id)"
-                      class="play-icon pause"
-                      @click.stop="handlePlayMotion(item)"
-                      name="CPause"
-                      size="10"
+                      :name="isVideoPlaying(item.id) ? 'CPause' : 'CPlay'"
+                      size="20"
                       color="#fff"
                     />
                   </div>
@@ -277,6 +279,13 @@
       </div>
     </div>
     <Tips v-model:showModal="showTips" />
+    <Product
+      v-model:showModal="showProductList"
+      :frameList="productFrameList"
+      :type="productType"
+      :key="productType"
+      @confirm="handleConfirmProduct"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -304,13 +313,15 @@ import showViewVideo from '@/tool/mount'
 import router from '@/router'
 import promptInput from './promptInput.vue'
 import Tips from './Tips.vue'
+import Product from './Product.vue'
 import { getFirstFrame, getFirstAndLastFrame } from './prompt'
 
 export default defineComponent({
   components: {
     generalDrag,
     promptInput,
-    Tips
+    Tips,
+    Product
   },
   props: {
     isDesignPage: {
@@ -881,6 +892,61 @@ export default defineComponent({
       document.removeEventListener('click', openSpeed)
     }
     const setUploadDelete = (item: any, index: any, isLastFrame: boolean = false) => {
+      // 在 isDesignPage 模式且 videoType === 3 时，直接从列表中删除，并将图片重新添加到产品列表中以便重新选择
+      if (props.isDesignPage && videoType.value === 3) {
+        if (isLastFrame) {
+          // 从 lastFrameList 中删除
+          const deleteIndex = lastFrameList.value.findIndex(
+            (listItem: any) => listItem.id === item.id
+          )
+          if (deleteIndex >= 0) {
+            lastFrameList.value.splice(deleteIndex, 1)
+          }
+          // 将删除的项重新添加到 lastFrameProductList 中，以便可以重新选择
+          const productItem = { ...item }
+          // 移除 frameType 和 isChecked 属性
+          delete productItem.frameType
+          delete productItem.isChecked
+          // 检查是否已存在，避免重复添加
+          const existingIndex = lastFrameProductList.value.findIndex(
+            (listItem: any) => listItem.id === productItem.id
+          )
+          if (existingIndex < 0) {
+            lastFrameProductList.value.unshift(productItem)
+          }
+          // 清空选中状态
+          if (data.lastSelectImg?.id === item.id) {
+            data.lastSelectImg = {}
+          }
+        } else {
+          // 从 firstFrameList 中删除
+          const deleteIndex = firstFrameList.value.findIndex(
+            (listItem: any) => listItem.id === item.id
+          )
+          if (deleteIndex >= 0) {
+            firstFrameList.value.splice(deleteIndex, 1)
+          }
+          // 将删除的项重新添加到 firstFrameProductList 中，以便可以重新选择
+          const productItem = { ...item }
+          // 移除 frameType 和 isChecked 属性
+          delete productItem.frameType
+          delete productItem.isChecked
+          // 检查是否已存在，避免重复添加
+          const existingIndex = firstFrameProductList.value.findIndex(
+            (listItem: any) => listItem.id === productItem.id
+          )
+          if (existingIndex < 0) {
+            firstFrameProductList.value.unshift(productItem)
+          }
+          // 清空选中状态
+          if (data.selectImg?.id === item.id) {
+            data.selectImg = {}
+          }
+        }
+        return
+      }
+
+      // 非 design 页面的原有逻辑
       let value = {
         id: item.id
       }
@@ -920,9 +986,148 @@ export default defineComponent({
     const firstFrameList = ref([])
     const lastFrameList = ref([])
     const showFirstFrameList = computed(() => {
-      if(props.isDesignPage) return data.fileList
+      if (props.isDesignPage) {
+        // 在 design 页面，如果 videoType === 3，显示 firstFrameList，否则显示 data.fileList
+        return videoType.value === 3 ? firstFrameList.value : data.fileList
+      }
       return videoType.value === 3 ? firstFrameList.value : data.fileList
     })
+
+    const showProductList = ref(false)
+    const productType = ref('first')
+    // 首帧和尾帧的独立数据源
+    const firstFrameProductList = ref([])
+    const lastFrameProductList = ref([])
+
+    const showFirstFrameUpload = computed(() => {
+      // 只读依赖
+      const isDesign = props.isDesignPage
+      const isFirstAndLast = videoType.value === 3
+      const hasFirstFrames = Array.isArray(showFirstFrameList.value)
+        ? showFirstFrameList.value.length > 0
+        : false
+
+      if (isDesign) {
+        // design 页面下，仅 videoType 为 3 时可展示上传，且没有首帧时显示上传按钮
+        return isFirstAndLast && !hasFirstFrames
+      }
+      // 非 design 页面下也是类似逻辑
+      return !(isFirstAndLast && hasFirstFrames)
+    })
+    const showLastFrameUpload = computed(() => {
+      if (videoType.value !== 3) return false
+      if (props.isDesignPage && lastFrameList.length > 0) return false
+      return true
+    })
+
+    // 根据 productType 返回对应的数据源
+    const productFrameList = computed(() => {
+      if (productType.value === 'first') {
+        return firstFrameProductList.value.length > 0
+          ? firstFrameProductList.value
+          : data.fileList
+      } else {
+        return lastFrameProductList.value.length > 0
+          ? lastFrameProductList.value
+          : data.fileList
+      }
+    })
+
+    const handleClickDesignMask = (type: 'first' | 'last') => {
+      productType.value = type
+      // 初始化独立的数据源，如果为空则从 fileList 复制
+      if (type === 'first') {
+        if (firstFrameProductList.value.length === 0) {
+          firstFrameProductList.value = JSON.parse(JSON.stringify(data.fileList || []))
+        }
+      } else {
+        if (lastFrameProductList.value.length === 0) {
+          lastFrameProductList.value = JSON.parse(JSON.stringify(data.fileList || []))
+        }
+      }
+      showProductList.value = true
+    }
+    const handleConfirmProduct = ({ data: productData }) => {
+      if (productType.value === 'first') {
+        // 准备图片数据
+        const imageItem: any = {
+          ...productData,
+          isChecked: true,
+          type: 'ProductElement'
+        }
+
+        // 设置 minioUrl
+        imageItem.minioUrl =
+          productData.miniourl || getMinioUrl(imageItem.url || imageItem.imgUrl)
+
+        // 更新首帧产品列表，移除已选择的项
+        const productIndex = firstFrameProductList.value.findIndex(
+          (item: any) => item.id === productData.id
+        )
+        if (productIndex >= 0) {
+          firstFrameProductList.value.splice(productIndex, 1)
+        }
+
+        // 首尾帧模式，添加到 firstFrameList
+        // 先取消其他项的选中状态
+        firstFrameList.value.forEach((listItem: any) => {
+          listItem.isChecked = false
+        })
+        // 检查是否已存在，如果存在则更新，否则添加
+        const existingIndex = firstFrameList.value.findIndex(
+          (item: any) => item.id === productData.id
+        )
+        if (existingIndex >= 0) {
+          Object.assign(firstFrameList.value[existingIndex], imageItem)
+        } else {
+          imageItem.frameType = 'first'
+          firstFrameList.value.push(imageItem)
+        }
+
+        // 赋值给首帧选中对象
+        data.selectImg = { ...imageItem }
+      } else if (productType.value === 'last') {
+        // 准备图片数据
+        const imageItem: any = {
+          ...productData,
+          isChecked: true,
+          type: 'ProductElement',
+          frameType: 'last'
+        }
+
+        // 设置 minioUrl
+        imageItem.minioUrl =
+          productData.miniourl || getMinioUrl(imageItem.url || imageItem.imgUrl)
+
+        // 更新尾帧产品列表，移除已选择的项
+        const productIndex = lastFrameProductList.value.findIndex(
+          (item: any) => item.id === productData.id
+        )
+        if (productIndex >= 0) {
+          lastFrameProductList.value.splice(productIndex, 1)
+        }
+
+        // 先取消其他项的选中状态
+        lastFrameList.value.forEach((listItem: any) => {
+          listItem.isChecked = false
+        })
+
+        // 检查是否已存在，如果存在则更新，否则添加
+        const existingIndex = lastFrameList.value.findIndex(
+          (item: any) => item.id === productData.id
+        )
+        if (existingIndex >= 0) {
+          Object.assign(lastFrameList.value[existingIndex], imageItem)
+        } else {
+          lastFrameList.value.push(imageItem)
+        }
+
+        // 赋值给尾帧选中对象
+        data.lastSelectImg = { ...imageItem }
+      }
+      showProductList.value = false
+    }
+
     watch(
       () => store.state.HomeStoreModule.uploadElement.length,
       (newVal, oldVal) => {
@@ -952,6 +1157,20 @@ export default defineComponent({
       }
     )
 
+    // 监听 fileList 的变化，如果独立列表为空则重新初始化
+    watch(
+      () => data.fileList,
+      newFileList => {
+        if (firstFrameProductList.value.length === 0 && newFileList?.length > 0) {
+          firstFrameProductList.value = JSON.parse(JSON.stringify(newFileList))
+        }
+        if (lastFrameProductList.value.length === 0 && newFileList?.length > 0) {
+          lastFrameProductList.value = JSON.parse(JSON.stringify(newFileList))
+        }
+      },
+      { deep: true }
+    )
+
     watch(
       () => store.state.HomeStoreModule.lastFrameList,
       val => {
@@ -1039,7 +1258,14 @@ export default defineComponent({
       setVideoRef,
       handlePlayMotion,
       isVideoPlaying,
-      showTips
+      showTips,
+      showProductList,
+      handleClickDesignMask,
+      productType,
+      handleConfirmProduct,
+      productFrameList,
+      showFirstFrameUpload,
+      showLastFrameUpload
     }
   },
   directives: {
@@ -1239,6 +1465,15 @@ export default defineComponent({
           }
           > .upload_item {
             border: none;
+            position: relative;
+            .design-mask {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              z-index: 1;
+            }
           }
           .control-container {
             width: 100%;
@@ -1252,26 +1487,27 @@ export default defineComponent({
               rgba(8, 9, 13, 0.27) 80.37%
             );
             display: flex;
-            align-items: flex-end;
-            justify-content: center;
+            align-items: center;
+            justify-content: flex-start;
             .icon-list {
-              height: 50%;
-              width: calc(100% - 1.6rem);
+              // height: 50%;
+              // width: calc(100% - 1.6rem);
               // border-top: 1px solid #fff;
+              padding-left: 1rem;
               display: flex;
               box-sizing: border-box;
               justify-content: flex-start;
               align-items: center;
               .play-icon {
-                width: initial;
-                height: initial;
+                width: 2rem;
+                height: 2rem;
               }
             }
           }
         }
         > .head {
           color: #000;
-          font-weight: 600;
+          font-weight: 500;
           display: flex;
           align-items: center;
           column-gap: 1rem;
@@ -1292,6 +1528,7 @@ export default defineComponent({
         font-size: 1.8rem;
         color: #000;
         margin-bottom: 1.4rem;
+        font-weight: 500;
       }
       > .poses {
         margin-top: 3rem;
@@ -1393,6 +1630,7 @@ export default defineComponent({
   }
   .video-type-container {
     margin-bottom: 4rem;
+    font-weight: 500;
     .title {
       font-size: 1.8rem;
       color: #000;
diff --git a/src/component/home/tools/poseTransfer/promptInput.vue b/src/component/home/tools/poseTransfer/promptInput.vue
index 0ccb0910..e8e188c9 100644
--- a/src/component/home/tools/poseTransfer/promptInput.vue
+++ b/src/component/home/tools/poseTransfer/promptInput.vue
@@ -1,507 +1,518 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, toRefs, nextTick, useTemplateRef, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, nextTick, useTemplateRef } from 'vue'
 
 interface ContentItem {
-	id: string;
-	type: 'text' | 'input';
-	value: string;
-	placeholder?: string;
+  id: string
+  type: 'text' | 'input'
+  value: string
+  placeholder?: string
 }
 
 const props = defineProps({
-	content: {
-		type: Array,
-		default: () => []
-	}
+  content: {
+    type: Array,
+    default: () => []
+  }
 })
 
 const data = reactive({
-	//   content: [
-	//     { 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: '[请输入内容]' }
-	//   ] as ContentItem[]
-	content: props.content
+  //   content: [
+  //     { 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: '[请输入内容]' }
+  //   ] as ContentItem[]
+  content: props.content
 })
 
 const editableArea = ref<HTMLElement>()
 const { content } = toRefs(data)
 
 const cursorState = ref({
-	isContainerClick: false
+  isContainerClick: false
 })
 
 // 检查并删除末尾的空文本框
 const removeLastEmptyTextIfNeeded = () => {
-	const lastItem = content.value[content.value.length - 1]
-	if (lastItem && lastItem.type === 'text' && lastItem.value === '') {
-		content.value.pop()
-		return true
-	}
-	return false
+  const lastItem = content.value[content.value.length - 1]
+  if (lastItem && lastItem.type === 'text' && lastItem.value === '') {
+    content.value.pop()
+    return true
+  }
+  return false
 }
 
 // 确保末尾有空文本框
 const ensureEmptyTextAtEnd = () => {
-	const lastItem = content.value[content.value.length - 1]
-	if (!lastItem || lastItem.type !== 'text' || lastItem.value !== '') {
-		const newItem: ContentItem = {
-			id: Date.now().toString(),
-			type: 'text',
-			value: ''
-		}
-		content.value.push(newItem)
-		return true
-	}
-	return false
+  const lastItem = content.value[content.value.length - 1]
+  if (!lastItem || lastItem.type !== 'text' || lastItem.value !== '') {
+    const newItem: ContentItem = {
+      id: Date.now().toString(),
+      type: 'text',
+      value: ''
+    }
+    content.value.push(newItem)
+    return true
+  }
+  return false
 }
 
 // 元素信息获取
 const getCurrentElementInfo = () => {
-	const selection = window.getSelection()
-	if (!selection || selection.rangeCount === 0) return null
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return null
 
-	const range = selection.getRangeAt(0)
-	const node = range.startContainer
-	let element: HTMLElement | null = null
+  const range = selection.getRangeAt(0)
+  const node = range.startContainer
+  let element: HTMLElement | null = null
 
-	if (node.nodeType === Node.TEXT_NODE) {
-		element = (node as Text).parentElement
-	} else {
-		element = node as HTMLElement
-	}
+  if (node.nodeType === Node.TEXT_NODE) {
+    element = (node as Text).parentElement
+  } else {
+    element = node as HTMLElement
+  }
 
-	if (!element) return null
+  if (!element) return null
 
-	let index = -1
-	let type: 'text' | 'input' = 'text'
-	let isAtStart = false
-	let isAtEnd = false
+  let index = -1
+  let type: 'text' | 'input' = 'text'
+  let isAtStart = false
+  let isAtEnd = false
 
-	if (element.classList.contains('text-field')) {
-		index = parseInt(element.getAttribute('data-index') || '-1')
-		type = 'text'
-		const textContent = element.textContent || ''
-		isAtStart = range.startOffset === 0
-		isAtEnd = range.startOffset === textContent.length
-	} else if (element.classList.contains('input-content')) {
-		const parent = element.parentElement
-		index = parseInt(parent?.getAttribute('data-index') || '-1')
-		type = 'input'
+  if (element.classList.contains('text-field')) {
+    index = parseInt(element.getAttribute('data-index') || '-1')
+    type = 'text'
+    const textContent = element.textContent || ''
+    isAtStart = range.startOffset === 0
+    isAtEnd = range.startOffset === textContent.length
+  } else if (element.classList.contains('input-content')) {
+    const parent = element.parentElement
+    index = parseInt(parent?.getAttribute('data-index') || '-1')
+    type = 'input'
 
-		const item = content.value[index]
-		if (element.classList.contains('has-placeholder')) {
-			// placeholder状态下，光标在任意位置都认为是"在元素内"
-			isAtStart = range.startOffset === 0
-			isAtEnd = true
-		} else {
-			// 正常内容状态
-			const textContent = item.value
-			isAtStart = range.startOffset === 0
-			isAtEnd = range.startOffset === textContent.length
-		}
-	}
+    const item = content.value[index]
+    if (element.classList.contains('has-placeholder')) {
+      // placeholder状态下，光标在任意位置都认为是"在元素内"
+      isAtStart = range.startOffset === 0
+      isAtEnd = true
+    } else {
+      // 正常内容状态
+      const textContent = item.value
+      isAtStart = range.startOffset === 0
+      isAtEnd = range.startOffset === textContent.length
+    }
+  }
 
-	return { index, type, element, isAtStart, isAtEnd }
+  return { index, type, element, isAtStart, isAtEnd }
 }
 
 //光标设置
 const setCursorToElement = (element: HTMLElement, position: 'start' | 'end') => {
-	const selection = window.getSelection()
-	const range = document.createRange()
+  const selection = window.getSelection()
+  const range = document.createRange()
 
-	if (element.classList.contains('input-content') && element.classList.contains('has-placeholder')) {
-		// placeholder状态的特殊处理
-		range.selectNodeContents(element)
-		range.collapse(position === 'start')
-	} else if (element.childNodes.length > 0) {
-		const targetNode = position === 'start' ? element.firstChild! : element.lastChild!
-		if (targetNode.nodeType === Node.TEXT_NODE) {
-			const offset = position === 'start' ? 0 : (targetNode.textContent || '').length
-			range.setStart(targetNode, offset)
-			range.setEnd(targetNode, offset)
-		} else {
-			range.selectNodeContents(element)
-			range.collapse(position === 'start')
-		}
-	} else {
-		range.selectNodeContents(element)
-		range.collapse(position === 'start')
-	}
+  if (
+    element.classList.contains('input-content') &&
+    element.classList.contains('has-placeholder')
+  ) {
+    // placeholder状态的特殊处理
+    range.selectNodeContents(element)
+    range.collapse(position === 'start')
+  } else if (element.childNodes.length > 0) {
+    const targetNode = position === 'start' ? element.firstChild! : element.lastChild!
+    if (targetNode.nodeType === Node.TEXT_NODE) {
+      const offset = position === 'start' ? 0 : (targetNode.textContent || '').length
+      range.setStart(targetNode, offset)
+      range.setEnd(targetNode, offset)
+    } else {
+      range.selectNodeContents(element)
+      range.collapse(position === 'start')
+    }
+  } else {
+    range.selectNodeContents(element)
+    range.collapse(position === 'start')
+  }
 
-	selection?.removeAllRanges()
-	selection?.addRange(range)
+  selection?.removeAllRanges()
+  selection?.addRange(range)
 }
 
 // 键盘事件处理
 const handleKeydown = (event: KeyboardEvent) => {
-	const elementInfo = getCurrentElementInfo()
-	if (!elementInfo) return
+  const elementInfo = getCurrentElementInfo()
+  if (!elementInfo) return
 
-	const { index, type, isAtStart, isAtEnd } = elementInfo
+  const { index, type, isAtStart, isAtEnd } = elementInfo
 
-	switch (event.key) {
-		case 'Backspace':
-			if (isAtStart && index > 0) {
-				event.preventDefault()
-				handleCrossElementDelete(index)
-			} else if (type === 'input' && elementInfo.element?.classList.contains('has-placeholder')) {
-				event.preventDefault()
-			}
-			// 其他情况让浏览器正常处理删除
-			break
+  switch (event.key) {
+    case 'Backspace':
+      if (isAtStart && index > 0) {
+        event.preventDefault()
+        handleCrossElementDelete(index)
+      } else if (
+        type === 'input' &&
+        elementInfo.element?.classList.contains('has-placeholder')
+      ) {
+        event.preventDefault()
+      }
+      // 其他情况让浏览器正常处理删除
+      break
 
-		case 'ArrowLeft':
-			if (isAtStart && index > 0) {
-				event.preventDefault()
-				navigateToElement(index - 1, 'end')
-			}
-			break
+    case 'ArrowLeft':
+      if (isAtStart && index > 0) {
+        event.preventDefault()
+        navigateToElement(index - 1, 'end')
+      }
+      break
 
-		case 'ArrowRight':
-			if (isAtEnd && index < content.value.length - 1) {
-				event.preventDefault()
-				navigateToElement(index + 1, 'start')
-			} else if (isAtEnd && index === content.value.length - 1) {
-				// 在最后一个元素末尾按右箭头，确保有一个空文本框
-				ensureEmptyTextAtEnd()
-				nextTick(() => {
-					navigateToElement(index + 1, 'start')
-				})
-			}
-			break
-	}
+    case 'ArrowRight':
+      if (isAtEnd && index < content.value.length - 1) {
+        event.preventDefault()
+        navigateToElement(index + 1, 'start')
+      } else if (isAtEnd && index === content.value.length - 1) {
+        // 在最后一个元素末尾按右箭头，确保有一个空文本框
+        ensureEmptyTextAtEnd()
+        nextTick(() => {
+          navigateToElement(index + 1, 'start')
+        })
+      }
+      break
+  }
 }
 
 // 跨元素删除逻辑
 const handleCrossElementDelete = (currentIndex: number) => {
-	const prevIndex = currentIndex - 1
-	const prevItem = content.value[prevIndex]
+  const prevIndex = currentIndex - 1
+  const prevItem = content.value[prevIndex]
 
-	if (prevItem.type === 'input') {
-		if (prevItem.value.trim() === '') {
-			// 删除空输入框
-			content.value.splice(prevIndex, 1)
-			nextTick(() => {
-				// 删除输入框后，先删除末尾的空文本框
-				removeLastEmptyTextIfNeeded()
-				// 然后聚焦到正确的位置
-				if (prevIndex < content.value.length) {
-					focusElement(prevIndex, 'end')
-				} else if (content.value.length > 0) {
-					focusElement(content.value.length - 1, 'end')
-				}
-			})
-		} else {
-			// 删除输入框最后一个字符，但保留输入框
-			const newValue = prevItem.value.slice(0, -1)
-			content.value[prevIndex].value = newValue
-			updateInputDisplay(prevIndex)
-			nextTick(() => focusElement(prevIndex, 'end'))
-		}
-	} else {
-		// 文本框：移动到前一个文本框末尾，让浏览器正常删除
-		// 先删除末尾的空文本框
-		removeLastEmptyTextIfNeeded()
-		focusElement(prevIndex, 'end')
-	}
+  if (prevItem.type === 'input') {
+    if (prevItem.value.trim() === '') {
+      // 删除空输入框
+      content.value.splice(prevIndex, 1)
+      nextTick(() => {
+        // 删除输入框后，先删除末尾的空文本框
+        removeLastEmptyTextIfNeeded()
+        // 然后聚焦到正确的位置
+        if (prevIndex < content.value.length) {
+          focusElement(prevIndex, 'end')
+        } else if (content.value.length > 0) {
+          focusElement(content.value.length - 1, 'end')
+        }
+      })
+    } else {
+      // 删除输入框最后一个字符，但保留输入框
+      const newValue = prevItem.value.slice(0, -1)
+      content.value[prevIndex].value = newValue
+      updateInputDisplay(prevIndex)
+      nextTick(() => focusElement(prevIndex, 'end'))
+    }
+  } else {
+    // 文本框：移动到前一个文本框末尾，让浏览器正常删除
+    // 先删除末尾的空文本框
+    removeLastEmptyTextIfNeeded()
+    focusElement(prevIndex, 'end')
+  }
 }
 
 // 导航到元素
 const navigateToElement = (targetIndex: number, position: 'start' | 'end') => {
-	const targetItem = content.value[targetIndex]
-	const element = targetItem.type === 'text'
-		? editableArea.value?.querySelector(`.text-field[data-index="${targetIndex}"]`) as HTMLElement
-		: editableArea.value?.querySelector(`.input-field[data-index="${targetIndex}"] .input-content`) as HTMLElement
+  const targetItem = content.value[targetIndex]
+  const element =
+    targetItem.type === 'text'
+      ? (editableArea.value?.querySelector(
+          `.text-field[data-index="${targetIndex}"]`
+        ) as HTMLElement)
+      : (editableArea.value?.querySelector(
+          `.input-field[data-index="${targetIndex}"] .input-content`
+        ) as HTMLElement)
 
-	if (element) setCursorToElement(element, position)
+  if (element) setCursorToElement(element, position)
 }
 
 // 焦点设置
 const focusElement = (index: number, position: 'start' | 'end') => {
-	const item = content.value[index]
-	const element = item.type === 'text'
-		? editableArea.value?.querySelector(`.text-field[data-index="${index}"]`) as HTMLElement
-		: editableArea.value?.querySelector(`.input-field[data-index="${index}"] .input-content`) as HTMLElement
+  const item = content.value[index]
+  const element =
+    item.type === 'text'
+      ? (editableArea.value?.querySelector(
+          `.text-field[data-index="${index}"]`
+        ) as HTMLElement)
+      : (editableArea.value?.querySelector(
+          `.input-field[data-index="${index}"] .input-content`
+        ) as HTMLElement)
 
-	if (element) setCursorToElement(element, position)
+  if (element) setCursorToElement(element, position)
 }
 
 // 输入框显示管理
 const updateInputDisplay = (index: number) => {
-	const item = content.value[index]
-	if (item.type !== 'input') return
+  const item = content.value[index]
+  if (item.type !== 'input') return
 
-	const inputElement = editableArea.value?.querySelector(
-		`.input-field[data-index="${index}"] .input-content`
-	) as HTMLElement
+  const inputElement = editableArea.value?.querySelector(
+    `.input-field[data-index="${index}"] .input-content`
+  ) as HTMLElement
 
-	if (!inputElement) return
+  if (!inputElement) return
 
-	const showPlaceholder = item.value.trim() === '' && item.placeholder
+  const showPlaceholder = item.value.trim() === '' && item.placeholder
 
-	if (showPlaceholder) {
-		inputElement.classList.add('has-placeholder')
-		inputElement.textContent = item.placeholder
-	} else {
-		inputElement.classList.remove('has-placeholder')
-		inputElement.textContent = item.value
-	}
+  if (showPlaceholder) {
+    inputElement.classList.add('has-placeholder')
+    inputElement.textContent = item.placeholder
+  } else {
+    inputElement.classList.remove('has-placeholder')
+    inputElement.textContent = item.value
+  }
 }
 
 // 输入框内容变化处理
 const handleInputChange = (index: number, event: Event) => {
-	const target = event.target as HTMLSpanElement
-	const item = content.value[index]
+  const target = event.target as HTMLSpanElement
+  const item = content.value[index]
 
-	// 如果当前显示placeholder，不更新实际值
-	if (!target.classList.contains('has-placeholder')) {
-		const newValue = target.textContent || ''
-		content.value[index].value = newValue
+  // 如果当前显示placeholder，不更新实际值
+  if (!target.classList.contains('has-placeholder')) {
+    const newValue = target.textContent || ''
+    content.value[index].value = newValue
 
-		// 如果内容变空，显示placeholder
-		if (newValue.trim() === '' && item.placeholder) {
-			target.classList.add('has-placeholder')
-			target.textContent = item.placeholder
-		}
-	}
+    // 如果内容变空，显示placeholder
+    if (newValue.trim() === '' && item.placeholder) {
+      target.classList.add('has-placeholder')
+      target.textContent = item.placeholder
+    }
+  }
 }
 
 // 输入框键盘事件
 const handleInputKeydown = (event: KeyboardEvent, index: number) => {
-	const target = event.target as HTMLSpanElement
+  const target = event.target as HTMLSpanElement
 
-	if (event.key === 'Backspace') {
-		// 如果显示placeholder，阻止删除
-		if (target.classList.contains('has-placeholder')) {
-			event.preventDefault()
-			return
-		}
+  if (event.key === 'Backspace') {
+    // 如果显示placeholder，阻止删除
+    if (target.classList.contains('has-placeholder')) {
+      event.preventDefault()
+      return
+    }
 
-		const selection = window.getSelection()
-		if (selection && selection.rangeCount > 0) {
-			const range = selection.getRangeAt(0)
-			const isAtStart = range.startOffset === 0
+    const selection = window.getSelection()
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      const isAtStart = range.startOffset === 0
 
-			// 如果光标在输入框开头，阻止默认行为，让外部的handleBackspace处理
-			if (isAtStart) {
-				event.preventDefault()
-				return
-			}
-		}
-	} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
-		// 普通字符输入
-		if (target.classList.contains('has-placeholder')) {
-			event.preventDefault()
-			target.textContent = event.key
-			target.classList.remove('has-placeholder')
-			content.value[index].value = event.key
+      // 如果光标在输入框开头，阻止默认行为，让外部的handleBackspace处理
+      if (isAtStart) {
+        event.preventDefault()
+        return
+      }
+    }
+  } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+    // 普通字符输入
+    if (target.classList.contains('has-placeholder')) {
+      event.preventDefault()
+      target.textContent = event.key
+      target.classList.remove('has-placeholder')
+      content.value[index].value = event.key
 
-			// 移动光标到末尾
-			nextTick(() => {
-				setCursorToElement(target, 'end')
-			})
-		}
-	}
+      // 移动光标到末尾
+      nextTick(() => {
+        setCursorToElement(target, 'end')
+      })
+    }
+  }
 }
 
 const handleInputBlur = (index: number) => {
-	updateInputDisplay(index)
+  updateInputDisplay(index)
 }
 
 // 容器点击处理
 const handleContainerClick = (event: MouseEvent) => {
-	const target = event.target as HTMLElement
+  const target = event.target as HTMLElement
 
-	if (target === editableArea.value) {
-		event.preventDefault()
-		cursorState.value.isContainerClick = true
+  if (target === editableArea.value) {
+    event.preventDefault()
+    cursorState.value.isContainerClick = true
 
-		// 确保末尾有空文本框并聚焦到它
-		ensureEmptyTextAtEnd()
-		nextTick(() => {
-			focusElement(content.value.length - 1, 'start')
-		})
-	}
+    // 确保末尾有空文本框并聚焦到它
+    ensureEmptyTextAtEnd()
+    nextTick(() => {
+      focusElement(content.value.length - 1, 'start')
+    })
+  }
 }
 
 // 初始化
 const initPlaceholders = () => {
-	nextTick(() => {
-		content.value.forEach((_, index) => updateInputDisplay(index))
-		// 确保初始状态下有一个空文本框
-		ensureEmptyTextAtEnd()
-	})
+  nextTick(() => {
+    content.value.forEach((_, index) => updateInputDisplay(index))
+    // 确保初始状态下有一个空文本框
+    ensureEmptyTextAtEnd()
+  })
 }
 
 const getFullText = () => {
-	if(assistModel.value){
-		return content.value.map(item => {
-			if (item.type === 'text') {
-				return item.value
-			} else {
-				// 如果 input 没有输入 value，则用 placeholder 填充，并去掉首尾的 []
-				if (item.value) {
-					return ` ${item.value} `
-				} else if (item.placeholder) {
-					let placeholderText = item.placeholder
-					// 去掉首尾的 []
-					if (placeholderText.startsWith('[') && placeholderText.endsWith(']')) {
-						placeholderText = placeholderText.slice(1, -1)
-					}
-					return ` ${placeholderText} `
-				}
-				return ''
-			}
-		}).join('')
-	}
-	return  textareaValue.value
+  if (assistModel.value) {
+    return content.value
+      .map(item => {
+        if (item.type === 'text') {
+          return item.value
+        } else {
+          // 如果 input 没有输入 value，则用 placeholder 填充，并去掉首尾的 []
+          if (item.value) {
+            return ` ${item.value} `
+          } else if (item.placeholder) {
+            let placeholderText = item.placeholder
+            // 去掉首尾的 []
+            if (placeholderText.startsWith('[') && placeholderText.endsWith(']')) {
+              placeholderText = placeholderText.slice(1, -1)
+            }
+            return ` ${placeholderText} `
+          }
+          return ''
+        }
+      })
+      .join('')
+  }
+  return textareaValue.value
 }
 
 const textareaValue = ref('')
-const assistModel= ref(false)
+const assistModel = ref(false)
 const handleClickAssistBtn = () => {
-	assistModel.value = !assistModel.value
+  assistModel.value = !assistModel.value
 }
 
-// 监听 assistModel 变化，切换到 textarea 模式时调整高度
-watch(assistModel, (newVal) => {
-	if (!newVal) {
-		// 切换到 textarea 模式
-		nextTick(() => {
-			handleInputResize()
-		})
-	}
-})
-
 const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
-const handleInputResize = () => {
-	const textarea = textareaRef.value
-	if (textarea) {
-		textarea.style.height = 'auto'
-		textarea.style.height = textarea.scrollHeight + 'px'
-	}
-}
 
 onMounted(() => {
-	initPlaceholders()
-	// 如果初始状态是 textarea 模式，设置初始高度
-	if (!assistModel.value) {
-		nextTick(() => {
-			handleInputResize()
-		})
-	}
+  initPlaceholders()
 })
 
 defineExpose({
-	getFullText,
-	content
+  getFullText,
+  content
 })
 </script>
 
 <template>
-	<div v-show="!assistModel" class="textarea-container">
-		<textarea
-			class="area"
-			v-model="textareaValue"
-			ref="textareaRef"
-			@input="handleInputResize"
-			:placeholder="$t('poseTransfer.PormptPlaceholder')"
-		/>
-		<div class="asistant-btn" @click="handleClickAssistBtn">
-			<i class="fi fi-bs-magic-wand asistant-icon"></i>
-			<span>{{ $t('ProductImg.PromptAssit') }}</span>
-		</div>
-	</div>
-	<div v-show="assistModel" ref="editableArea" class="promptInput" @keydown="handleKeydown" @click="handleContainerClick">
-		<template v-for="(item, index) in content" :key="item.id">
-			<span 
-				v-if="item.type === 'text'"
-				class="text-field"
-				:data-index="index"
-				contenteditable="plaintext-only">
-				{{item.value }}
-			</span>
+  <div v-show="!assistModel" class="textarea-container">
+    <textarea
+      class="area"
+      v-model="textareaValue"
+      ref="textareaRef"
+      :placeholder="$t('poseTransfer.PormptPlaceholder')"
+    />
+    <div class="asistant-btn" @click="handleClickAssistBtn">
+      <i class="fi fi-bs-magic-wand asistant-icon"></i>
+      <span>{{ $t('ProductImg.PromptAssit') }}</span>
+    </div>
+  </div>
+  <div
+    v-show="assistModel"
+    ref="editableArea"
+    class="promptInput"
+    @keydown="handleKeydown"
+    @click="handleContainerClick"
+  >
+    <div class="promptinput-wrapper">
+      <template v-for="(item, index) in content" :key="item.id">
+        <span
+          v-if="item.type === 'text'"
+          class="text-field"
+          :data-index="index"
+          contenteditable="plaintext-only"
+        >
+          {{ item.value }}
+        </span>
 
-			<span v-else class="input-field" :data-index="index">
-				<span
-					class="input-content"
-					contenteditable="plaintext-only"
-					@input="(e) => handleInputChange(index, e)"
-					@keydown="(e) => handleInputKeydown(e, index)"
-					@blur="() => handleInputBlur(index)"></span>
-			</span>
-		</template>
-		<div class="asistant-btn" @click="handleClickAssistBtn">
-			<i class="fi fi-bs-magic-wand asistant-icon"></i>
-			<span>{{ $t('ProductImg.PromptAssit') }}</span>
-		</div>
-	</div>
+        <span v-else class="input-field" :data-index="index">
+          <span
+            class="input-content"
+            contenteditable="plaintext-only"
+            @input="e => handleInputChange(index, e)"
+            @keydown="e => handleInputKeydown(e, index)"
+            @blur="() => handleInputBlur(index)"
+          ></span>
+        </span>
+      </template>
+    </div>
+    <div class="asistant-btn" @click="handleClickAssistBtn">
+      <i class="fi fi-bs-magic-wand asistant-icon"></i>
+      <span>{{ $t('ProductImg.PromptAssit') }}</span>
+    </div>
+  </div>
 </template>
 
 <style lang="less" scoped>
 .promptInput {
-	--promptInputBorderRadius: 10px;
-	--promptInputBorder: 2px solid #dcdfe6;
-	--promptInputPadding: 1.5rem;
+  --promptInputBorderRadius: 10px;
+  --promptInputBorder: 2px solid #dcdfe6;
+  --promptInputPadding: 1.5rem;
 
 	width: 100%;
-	min-height: 12rem;
-	border-radius: var(--promptInputBorderRadius);
-	border: var(--promptInputBorder);
-	padding: var(--promptInputPadding);
-	background: white;
-	line-height: 1.6;
-	outline: none;
-	white-space: pre-wrap;
-	user-select: text;
-	cursor: text;
-	position: relative;
+	font-weight: 500;
+  border-radius: var(--promptInputBorderRadius);
+  border: var(--promptInputBorder);
+  padding: var(--promptInputPadding);
+  background: white;
+  line-height: 1.6;
+  outline: none;
+  white-space: pre-wrap;
+  user-select: text;
+  cursor: text;
+  position: relative;
 	padding-bottom: 4rem;
-	
+	box-sizing: content-box;
 
-	.text-field {
-		display: inline;
-		outline: none;
-		padding: .2rem 0;
-		font-size: 1.8rem;
-		min-width: 2px;
-		/* 确保空文本框也能点击 */
+	.promptinput-wrapper {
+		min-height: 12rem;
+		max-height: 14rem;
+		overflow-y: auto;
 	}
 
-	.input-field {
-		display: inline-block;
-		// background: #e3f2fd;
-		// border: 1px solid #bbdefb;
-		margin: 0 .2rem;
-		padding: .2rem 1rem;
-		font-size: 1.8rem;
-		border-radius: 4px;
+  .text-field {
+    display: inline;
+    outline: none;
+    padding: 0.2rem 0;
+    font-size: 1.8rem;
+    min-width: 2px;
+		font-weight: 400;
+    /* 确保空文本框也能点击 */
+  }
 
-		.input-content {
-			outline: none;
-			display: inline-block;
-			min-width: 2rem;
+  .input-field {
+    display: inline-block;
+    // background: #e3f2fd;
+    // border: 1px solid #bbdefb;
+    margin: 0 0.2rem;
+    padding: 0.2rem 1rem;
+    font-size: 1.8rem;
+    border-radius: 4px;
 
-			&.has-placeholder {
-				color: #b9b9b9;
-				// font-style: italic;
-			}
-		}
-	}
+    .input-content {
+      outline: none;
+      display: inline-block;
+      min-width: 2rem;
+
+      &.has-placeholder {
+        color: #b9b9b9;
+        // font-style: italic;
+      }
+    }
+  }
 }
 
-.textarea-container{
-	position: relative;
-	border-radius: 10px;
-	border: 2px solid #dcdfe6;
-	padding: 1.5rem 1.5rem 3rem;
-	height: auto;
-	.area{
+.textarea-container {
+  position: relative;
+  border-radius: 10px;
+  border: 2px solid #dcdfe6;
+  padding: 1.5rem 1.5rem 3rem;
+  height: auto;
+	.area {
 		width: 100%;
 		min-height: 12rem;
-		height: auto;
+		max-height: 14rem;
 		background: white;
 		line-height: 1.6;
 		outline: none;
@@ -509,34 +520,34 @@ defineExpose({
 		user-select: text;
 		cursor: text;
 		position: relative;
-		// padding-bottom: 4rem;
 		resize: none;
 		border: none;
+		overflow-y: auto;
 	}
 }
 
 .asistant-btn {
-	height: 2.3rem;
-	padding: 0 0.6rem;
-	font-size: 1rem;
-	font-weight: 400;
-	color: #313131;
-	position: absolute;
-	bottom: 1.3rem;
-	left: 1.3rem;
-	display: flex;
-	column-gap: 0.3rem;
-	justify-content: center;
-	align-items: center;
-	background-color: #f2f2f2;
-	border: 1px solid #dfdfdf;
-	border-radius: 0.5rem;
-	cursor: pointer;
-	.asistant-icon {
-		font-size: 1rem;
-		margin-right: 0;
-		width: initial;
-		// margin-top: -0.2rem;
-	}
+  height: 2.3rem;
+  padding: 0 0.6rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #313131;
+  position: absolute;
+  bottom: 1.3rem;
+  left: 1.3rem;
+  display: flex;
+  column-gap: 0.3rem;
+  justify-content: center;
+  align-items: center;
+  background-color: #f2f2f2;
+  border: 1px solid #dfdfdf;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  .asistant-icon {
+    font-size: 1rem;
+    margin-right: 0;
+    width: initial;
+    // margin-top: -0.2rem;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/home/tools/toProduct/Prompt.vue b/src/component/home/tools/toProduct/Prompt.vue
index d4595adf..aafcf88f 100644
--- a/src/component/home/tools/toProduct/Prompt.vue
+++ b/src/component/home/tools/toProduct/Prompt.vue
@@ -1,10 +1,9 @@
 <template>
-  <div ref="modalContainer"></div>
+  <!-- <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"
@@ -198,6 +197,9 @@ const handleCopy = async (value: string) => {
     margin-top: 4.3rem;
     padding-left: 7.4rem;
     display: flex;
+    justify-content: space-between;
+    overflow-x: auto;
+    overflow-y: hidden;
     .example-wrapper {
       display: flex;
       gap: 0;
diff --git a/src/component/home/tools/toProduct/index.vue b/src/component/home/tools/toProduct/index.vue
index 9c54432f..a6b9d084 100644
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -623,11 +623,12 @@ export default defineComponent({
       }
     }
     let isSelectObject = false
-	watch(() => route.query,
-		(query:any, oldQuery:any) => {
-			isSelectObject = false
-		},
-	);
+    watch(
+      () => route.query,
+      (query: any, oldQuery: any) => {
+        isSelectObject = false
+      }
+    )
     let beforeUpload = async (file: any) => {
       const isJpgOrPng =
         file.type === 'image/jpeg' ||
@@ -641,8 +642,8 @@ export default defineComponent({
       if (!isLt2M) {
         message.info(useI18n().t('MoodboardUpload.jsContent4'))
       }
-	  const objectId = route?.query?.id
-       if (!objectId && !isSelectObject) {
+      const objectId = route?.query?.id
+      if (!objectId && !isSelectObject) {
         isSelectObject = true
         productImgData.selectObject.id = await createProbject()
         upload.value = {
@@ -650,10 +651,7 @@ export default defineComponent({
           CollectionType: props.productimgMenu.value
         }
       }
-      return !!(
-        (isJpgOrPng && isLt2M && objectId) ||
-        Upload.LIST_IGNORE
-      )
+      return !!((isJpgOrPng && isLt2M && objectId) || Upload.LIST_IGNORE)
     }
     let setGenerate = (item: any) => {
       item.isChecked = !item.isChecked
@@ -1559,8 +1557,8 @@ export default defineComponent({
   :deep(.ant-upload-picture-card-wrapper) {
     .ant-upload-list-picture-card {
       .ant-upload-select-picture-card {
-        width: 9.6rem;
-        height: 13.4rem;
+        width: 12.7rem;
+        height: 17.8rem;
       }
     }
   }
@@ -1579,9 +1577,14 @@ export default defineComponent({
     .input_box {
       .input_box_btnBox {
         position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
         .textarea {
+          // flex: 1;
           min-height: 12.7rem;
           max-height: none;
+          width: 100%;
         }
       }
     }
@@ -1592,9 +1595,9 @@ export default defineComponent({
     font-size: 1rem;
     font-weight: 400;
     color: #313131;
-    position: absolute;
-    bottom: 1.3rem;
-    left: 1.3rem;
+    // position: absolute;
+    // bottom: 1.3rem;
+    // left: 1.3rem;
     display: flex;
     column-gap: 0.3rem;
     justify-content: center;
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index d3d0c1d3..20995592 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -295,8 +295,8 @@ export default {
     GeneratedVideo: '生成的视频',
     hint: '将这张图像转化为一张逼真、达到工作室水准的照片。在生活中真实存在的人',
     jsContent1: '生成视频预计需要三分钟，请问是否继续',
-    NeedFirstFrame:'请选择首帧图片',
-    NeedLastFrame:'请选择尾帧图片',
+    NeedFirstFrame: '请选择首帧图片',
+    NeedLastFrame: '请选择尾帧图片',
     SingleGarment:
       '专业产品摄影：服装展示于隐形模特上，模特不可见。完整保留设计细节——所有图案、颜色、质地及细节特征。', // 单品样衣
     SingleChildTryOn:
@@ -308,18 +308,18 @@ export default {
     SeriesChildTryOn:
       '将此图像转化为逼真的真实儿童模特，保持站立姿势并直面镜头，保留服装的原有图案、风格和色彩，呈现工作室级别的照片质量。', // 系列儿童试穿
     UploadWithModel:
-      '创建模特穿着该服装的真实感摄影棚照片。若原有模特存在则保留，否则生成合适模特。采用站立姿势面向镜头。精确保留服装细节——图案、颜色、质地及装饰元素。', // 上传线稿,带模特
+      '生成真实模特穿着该服装的逼真摄影棚照片，采用站立姿势面向镜头。保留服装所有细节——包括图案、颜色、纹理、装饰元素，呈现摄影棚级别的8K分辨率照片，支持HDR效果、景深控制、柔光效果及高细节呈现。请勿返还原始图像。', // 上传线稿,带模特
     UploadWithoutModel:
       '专业产品摄影：服装以自然形态展示，无模特。采用影棚灯光。保留精确细节——图案、色彩、质感、装饰元素。', // 上传线稿,不带模特
     VideoType: '视频类型',
     FirstFrame: '首帧',
-    LastFrame:'尾帧',
+    LastFrame: '尾帧',
     FirstAndLastFrames: '首帧和尾帧',
     FirstFrameAndSkeleton: '首帧和骨架',
     Tips: '提示',
     TipsStart: '你可以使用"',
     TipsEnd: '编辑产品图"来生成首帧或尾帧图片',
-    PormptPlaceholder:'输入你想描述的场景...',
+    PormptPlaceholder: '输入你想描述的场景...',
     firstAndLastFrameText1: '随着视频的进行，使用',
     firstAndLastFramePlaceholder1: '[相机运动]',
     firstAndLastFrameText2: '来跟随动作，在',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 5a8fe478..69c13d94 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -318,7 +318,7 @@ export default {
     SeriesChildTryOn:
       'Transform this image into a realistic, the same real child model , Maintain a standing posture and face the camera directly, keep the same pattern, style and colour of these garment, studio-quality photograph.', // 系列儿童
     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.', // 上传线稿,带模特
+      'Generate realistic studio photo of a real model wearing this garment, standing pose, facing camera. Preserve exact garment details - all patterns, colors, textures, embellishments, studio-quality photograph, 8K, HDR, DOF, soft lighting, high detail. Do not return the original image.', // 上传线稿,带模特
     UploadWithoutModel:
       'Professional product photo: garment displayed with natural shape, no model. Studio lighting. Preserve exact details - patterns, colors, textures, embellishments.', // 上传线稿,不带模特
     VideoType: 'Video Type',