style: 转产品图弹窗样式

src/component/home/design/editDesignType/index.vue

@@ -71,32 +71,33 @@
 					</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="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" 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> -->
+							<div class="input_box_btnBox">
 								<textarea
-								ref="textarea"
+									ref="textareaRef"
 									class="textarea"
 									:placeholder="$t('Generate.inputContent1')"
 									@input="ifMaximumLength"
-								@keydown.enter="getPrductimg()"
+									@keydown.enter.prevent="getPrductimg()"
 									v-model="productimgSearchName"
 								></textarea>
-						</div>
-						
+								<div class="asistant-btn" @click="handleClickAssistBtn">
+									<i class="fi fi-bs-magic-wand asistant-icon"></i>
+									<span>{{ $t('ProductImg.PromptAssit') }}</span>
 								</div>
 							</div>
-				<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && (speedData.value == 'advanced' || speedData.value == 'flux')">
+						</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> -->
 				<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
 					<div class="head">
 						<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
@@ -175,21 +176,22 @@
 	<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 { 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:{},
+components:{ Prompt },
 props:{
 	productData:{
 		type:Object,
@@ -219,6 +221,7 @@ setup(props:any,{emit}) {
 		return store.state.UserHabit.userDetail
 	})
 	let {t} = useI18n()
+	const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
 	let productimg = reactive({
 		isGenerate:false,//判断是否进行generate
 		textarea:null as any,
@@ -304,6 +307,29 @@ setup(props:any,{emit}) {
 	let isLike:any = ref(true)
 	let robotAssits:any = ref(0)
 
+	const promptTextList = computed(() => {
+		const { ageGroup, httpType } = store.state.Workspace.probjects
+		const isSingleDesign = httpType === 'SINGLE_DESIGN'
+		const isAdult = ageGroup === 'Adult'
+
+		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
+	}
+
 	let remPrductimgTime:any = null
 	let prductimgTime:any = null
 	const getData = ()=>{
@@ -708,17 +734,14 @@ setup(props:any,{emit}) {
 		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);
+		// 等待 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';
-		textarea.scrollTop = scrollTop;
 	}
 	onBeforeUnmount(()=>{
 		clearInterval(prductimgTime)
@@ -740,6 +763,9 @@ setup(props:any,{emit}) {
 		scaleImageMask,
 		isLike,
 		robotAssits,
+		promptTextList,
+		showPromptAssist,
+		handleClickAssistBtn,
 		getPrductimg,
 		removeProductimg,
 		getPoseList,
@@ -752,6 +778,7 @@ setup(props:any,{emit}) {
 		prductimgTime,
 		remPrductimgTime,
 		ifMaximumLength,
+		textareaRef
 	};
 },
 data() {
@@ -1041,6 +1068,52 @@ overflow: visible !important;
 						font-size: 1.8rem;
 					}
 				}
+				.prompt-container {
+					margin-top: 4rem;
+					margin-bottom: 3rem;
+					position: relative;
+					.prompt-title {
+						margin-bottom: 1.4rem;
+						font-size: 1.6rem;
+					}
+					.input_border {
+						padding-bottom: 0;
+						.input_box {
+							.input_box_btnBox {
+								position: relative;
+								.textarea {
+									min-height: 12.7rem;
+									max-height: none;
+									resize: none;
+									padding-bottom: 1rem;
+								}
+							}
+						}
+					}
+					.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;
+						}
+					}
+				}
 		}
 	}
 	.scaleImage_content_imgBox{