From 0ec37aae5380de702a3be5289edf00fca4e95127 Mon Sep 17 00:00:00 2001
From: zhangyh <xiao7li@qq.com>
Date: Mon, 17 Nov 2025 17:21:13 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BD=AC=E4=BA=A7=E5=93=81=E5=9B=BE?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/design/editDesignType/index.vue      | 367 +++++++++++-------
 1 file changed, 220 insertions(+), 147 deletions(-)

diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue
index 0dc72135..e07d1648 100644
--- a/src/component/home/design/editDesignType/index.vue
+++ b/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="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
+					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"
+								></textarea>
+								<div class="asistant-btn" @click="handleClickAssistBtn">
+									<i class="fi fi-bs-magic-wand asistant-icon"></i>
+									<span>{{ $t('ProductImg.PromptAssit') }}</span>
+								</div>
+							</div>
 						</div>
-						
 					</div>
 				</div>
-				<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && (speedData.value == 'advanced' || speedData.value == 'flux')">
+				<!-- <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>
-
-</a-modal>
+	<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() {
@@ -843,120 +870,120 @@ overflow: visible !important;
 </style>
 <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;
-
-	width: 100%;
-	.productImg_modal{
+	.scaleImage_content{
+		display: flex;
+		justify-content: center;
+		height: 100%;
 		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%;
+		.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%;
-			}
-			.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{
+				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_menubtn{
+					&.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;
-						font-weight: 500;
+						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;
+						}
 					}
 				}
-				&.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;
+				.selectText{
+					margin-bottom: 2rem;
+					display: flex;
 					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;
+					> 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;
+						}
 					}
 				}
-			}
-			.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;
@@ -1030,17 +1057,63 @@ overflow: visible !important;
 					}
 				}
 			}
-			.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;
+				.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;
+					.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{