feat: prompt输入部分样式

src/component/home/tools/toProduct/index.vue

@@ -1,16 +1,9 @@
 <template>
   <div class="toProduct">
     <div class="productImg_content">
-      <!-- <div class="modal_title_text">
-				<div>{{$t('ProductImg.Finalize')}}</div>
-				<div class="modal_title_text_intro"></div>
-			</div> -->
       <div class="productImg_content_bottom">
         <div class="productImg_left generalModel_state" :class="{ active: button.left }">
-          <!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
+          <div class="selectImg">
-						<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
-					</div> -->
-          <div class="selectImg" style="margin-bottom: 2rem">
             <div class="head">
               <div class="text">
                 {{
@@ -23,10 +16,6 @@
               </div>
             </div>
             <div class="imgBox" v-mousewheel>
-              <!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
-								<img :src="item.imgUrl || item.url" alt="">	
-								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
-							</div> -->
               <div
                 class="item"
                 :class="[item?.isChecked ? 'active' : '']"
@@ -57,7 +46,6 @@
                     <i class="fi fi-rr-trash icon_delete"></i>
                   </div>
                 </div>
-                <!-- <a-checkbox v-model:checked="item.isChecked"></a-checkbox> -->
               </div>
               <div class="upload_item item" v-show="!isDesignPage">
                 <div class="upload_file_item">
@@ -76,7 +64,6 @@
                   >
                     <div class="upload_tip_block">
                       <i class="fi fi-br-upload"></i>
-                      <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
                     </div>
                   </a-upload>
                 </div>
@@ -108,13 +95,6 @@
               v-model="similarity"
             />
           </div>
-          <!-- <div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-						<span>{{$t('ProductImg.SelectionFunction')}}</span>
-					</div> -->
-          <!-- 暂时去掉 -->
-          <!-- <div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction generalModel_state_item">
-						<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="
               productimgMenu.value == 'Relight' &&
@@ -169,51 +149,52 @@
               v-model="brightenValue"
             />
           </div>
-          <div class="input_border productImg_content_item_generate">
+          <div class="prompt-container">
-            <div class="input_box">
+            <div class="prompt-title">Prompt</div>
-              <div class="input_box_btnBox">
+            <div class="input_border productImg_content_item_generate">
-                <!-- <input
+              <div class="input_box">
-									class="search_input"
+                <div class="input_box_btnBox">
-									:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
+                  <textarea
-									v-model="searchName[productimgMenu.value]"
+                    class="textarea"
-									@keydown.enter="getPrductimg()"
+                    ref="textarea"
-								/> -->
+                    @input="ifMaximumLength"
-                <textarea
+                    :placeholder="
-                  class="textarea"
+                      productimgMenu.value == 'Relight'
-                  ref="textarea"
+                        ? $t('ProductImg.relightInput')
-                  @input="ifMaximumLength"
+                        : $t('ProductImg.productInput')
-                  :placeholder="
+                    "
-                    productimgMenu.value == 'Relight'
+                    @keydown.enter.prevent="getPrductimg()"
-                      ? $t('ProductImg.relightInput')
+                    v-model="searchName[productimgMenu.value]"
-                      : $t('ProductImg.productInput')
+                  ></textarea>
-                  "
+                </div>
-                  @keydown.enter.prevent="getPrductimg()"
-                  v-model="searchName[productimgMenu.value]"
-                ></textarea>
               </div>
             </div>
-          </div>
+            <div class="asistant-btn" @click="handleClickAssistBtn">
-          <div
+              <i class="fi fi-bs-magic-wand asistant-icon"></i>
-            class="selectText"
+              <span>Prompt Assist</span>
-            v-show="productimgMenu.value == 'ToProductImage' && speedData.value"
+            </div>
-          >
+            <!-- <div
-            <a-tooltip
+              class="selectText"
-              v-for="(promptText, index) in promptTextList"
+              v-show="productimgMenu.value == 'ToProductImage' && speedData.value"
-              :key="index"
-              placement="bottom"
             >
-              <template #title>{{ promptText }}</template>
+              <a-tooltip
-              <div
+                v-for="(promptText, index) in promptTextList"
-                @click="
+                :key="index"
-                  () => {
+                placement="bottom"
-                    searchName[productimgMenu.value] = promptText
-                    ifMaximumLength()
-                  }
-                "
               >
-                {{ promptText }}
+                <template #title>{{ promptText }}</template>
-              </div>
+                <div
-            </a-tooltip>
+                  @click="
+                    () => {
+                      searchName[productimgMenu.value] = promptText
+                      ifMaximumLength()
+                    }
+                  "
+                >
+                  {{ promptText }}
+                </div>
+              </a-tooltip>
+            </div> -->
           </div>
           <div class="productImg_content_item_generate_btn input_border">
             <div class="generage_btn_box">
@@ -362,6 +343,7 @@
       :isProductimg="true"
     ></scaleImage>
   </div>
+  <Prompt  />
 </template>
 
 <script lang="ts">
@@ -392,6 +374,7 @@ import { useStore } from 'vuex'
 import scaleImage from '@/component/HomePage/scaleImage.vue'
 import generalMenu from '@/component/HomePage/generalMenu.vue'
 import generalDrag from '@/component/modules/generalDrag.vue'
+import Prompt from './Prompt.vue'
 import { List } from 'echarts'
 import { useRouter, useRoute } from 'vue-router'
 
@@ -399,7 +382,8 @@ export default defineComponent({
   components: {
     scaleImage,
     generalMenu,
-    generalDrag
+    generalDrag,
+    Prompt
   },
   props: {
     setTask: {
@@ -493,13 +477,6 @@ export default defineComponent({
       }
     })
 
-    // watch(() => route.query.id,
-    // 	(query:any, oldQuery:any) => {
-    // 		if(oldQuery && query != oldQuery){
-    // 			productImgData.generateList = []
-    // 		}
-    // 	},
-    // );
     watch(
       () => store.state.HomeStoreModule.uploadElement.length,
       (newVal, oldVal) => {
@@ -974,31 +951,6 @@ export default defineComponent({
       scaleImage.value.init(arr, index)
       scaleImage.value.isComparison = true
     }
-    let generalIsMenuShow: any = {}
-    let setMenuShow = (item: any) => {
-      item.menuShow = true
-      generalIsMenuShow = item
-      document.addEventListener('click', removeMenuShow)
-    }
-    let setMenu = (menuItem: any, item: any) => {
-      // props.productimgMenu = menuItem
-      // if(!selectList.value[props.productimgMenu.value]){
-      // 	selectList.value[props.productimgMenu.value] = []
-      // }
-      // selectList.value[props.productimgMenu.value].forEach((item:any) => {
-      // 	item.isChecked = false
-      // });
-      // if(selectList.value[menuItem.value].indexOf(item) == -1){
-      // 	item.isChecked = true
-      // 	selectList.value[menuItem.value].push(item)
-      // }
-      // generalIsMenuShow.menuShow = false
-    }
-    let removeMenuShow = () => {
-      generalIsMenuShow.menuShow = false
-      generalIsMenuShow = {}
-      document.removeEventListener('click', removeMenuShow)
-    }
     let setSimilarity = (num: any) => {}
 
     //超分
@@ -1140,7 +1092,6 @@ export default defineComponent({
     )
     onMounted(() => {
       ifMaximumLength()
-      console.log('来源:---', props.source, props.isDesignPage)
     })
 
     // 计算属性：根据条件生成提示词列表
@@ -1152,10 +1103,7 @@ export default defineComponent({
 
       if (!isFromDesignPage) {
         // 如果不是从design来的，返回两个提示词
-        return [
+        return [t('poseTransfer.UploadWithModel'), t('poseTransfer.UploadWithoutModel')]
-          t('poseTransfer.UploadWithModel'),
-          t('poseTransfer.UploadWithoutModel')
-        ]
       } else {
         // 如果是从design来的
         if (isSingleDesign) {
@@ -1163,10 +1111,7 @@ export default defineComponent({
           const secondPrompt = isAdult
             ? t('poseTransfer.SingleAdultTryOn')
             : t('poseTransfer.SingleChildTryOn')
-          return [
+          return [t('poseTransfer.SingleGarment'), secondPrompt]
-            t('poseTransfer.SingleGarment'),
-            secondPrompt
-          ]
         } else {
           // SERIES_DESIGN: 一个提示词
           return [
@@ -1178,6 +1123,12 @@ export default defineComponent({
       }
     })
 
+    const showPromptAssist = ref(false)
+    const showPrompt = ref(false)
+    const handleClickAssistBtn = () => {
+      showPromptAssist.value = true
+    }
+
     return {
       upload,
       driver__,
@@ -1189,6 +1140,8 @@ export default defineComponent({
       RelightDirectionList,
       RelightDirection,
       promptTextList,
+      showPromptAssist,
+      showPrompt,
 
       setproduct,
       fileUploadChange,
@@ -1200,8 +1153,6 @@ export default defineComponent({
       removeProductimg,
       scaleImage,
       setScaleImage,
-      setMenu,
-      setMenuShow,
       setSimilarity,
       setTask,
       selectSetBtn,
@@ -1211,7 +1162,8 @@ export default defineComponent({
       ifMaximumLength,
       openSpeed,
       setSpeed,
-      locale
+      locale,
+      handleClickAssistBtn
     }
   },
   directives: {
@@ -1249,26 +1201,6 @@ export default defineComponent({
   mounted() {
     this.token = getCookie('token') || ''
     this.uploadUrl = getUploadUrl()
-  },
-  methods: {
-    // init(list:any,index:any,dialogueIndex:any){
-    // },
-    // cancelDsign(){
-    // 	this.productImg = false
-    // 	// this.productImgList = []
-    // 	// this.productImgIndex = 0
-    // },
-    // download(){
-    // 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
-    // },
-    // setScaleImageIndex(index:any){
-    // 	// this.productImgIndex = index
-    // 	// console.log(this.productImgIndex);
-    // },
-    // LikeFile(item:any,str:string){
-    // 	let parent:any = this.$parent
-    // 	parent.likeFile(item,str)
-    // },
   }
 })
 </script>
@@ -1319,68 +1251,13 @@ export default defineComponent({
 .productImg_content_item_intro {
   font-size: 1.4rem;
 }
-// .productImg_content_item_imgBox{
-// 	display: flex;
-// 	overflow-x: auto;
-// 	width: auto;
-// 	margin-bottom: 2rem;
-// 	align-items: center;
-// 	flex-wrap: nowrap;
-// 	.content_item_imgBox_itemImg{
-// 		display: flex;
-// 		margin-right: 1rem;
-// 		position: relative;
-// 		height: 36rem;
-// 		max-height: 100%;
-// 		position: relative;
-// 		img{
-// 			height: 100%;
-// 			width: 100%;
-// 			cursor: pointer;
-// 			object-fit: contain;
-// 			opacity: .5;
-// 			&.active{
-// 				opacity: 1;
-// 			}
-// 		}
-// 		.ant-checkbox-wrapper{
-// 			position: absolute;
-// 			right: 0;
-// 			top: 0;
-// 		}
-// 		&.content_item_imgBox_itemImg:hover{
-// 			.content_item_imgBox_itemImg_delete{
-// 				display: block;
-// 				cursor: pointer;
-// 			}
-// 		}
-// 		.content_item_imgBox_itemImg_delete{
-// 			display: none;
-// 			width: 100%;
-// 			height: 100%;
-// 			background: rgba(0,0,0,.2);
-// 			position: absolute;
-// 			i{
-// 				position: absolute;
-// 				left: 50%;
-// 				top: 50%;
-// 				transform: translate(-50%,-50%);
-// 				color: #fff;
-// 			}
-// 		}
 
-// 	}
-// 	.content_item_imgBox_itemImg:last-child{
-// 		margin-right: 0;
-// 	}
-// }
 .selectImg {
   display: flex;
   flex-direction: column;
   > .imgBox {
     flex: 1;
     max-height: 45rem;
-    margin-top: 2rem;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -1388,17 +1265,19 @@ export default defineComponent({
     width: 100%;
     overflow: hidden;
     overflow-x: auto;
+    column-gap: 1rem;
     // &.active
 
     > .item {
-      margin-right: 1rem;
+      // margin-right: 1rem;
-      width: calc(100% / 2 - 0.5rem);
+      // width: calc(100% / 2 - 0.5rem);
+      width: 9.6rem;
       cursor: pointer;
       overflow: hidden;
       display: flex;
       justify-content: center;
       flex-shrink: 0;
-      height: 25rem;
+      height: 13.4rem;
       position: relative;
       // &.active{
       // 	border: 2px solid;
@@ -1454,6 +1333,7 @@ export default defineComponent({
   > .head {
     color: #000;
     font-weight: 600;
+    margin-bottom: 2rem;
     > .text {
       display: inline-block;
       font-size: 1.6rem;
@@ -1500,6 +1380,7 @@ export default defineComponent({
       flex-shrink: 0;
       height: 25rem;
       position: relative;
+
       > .imgBox {
         width: 100%;
       }
@@ -1665,4 +1546,56 @@ export default defineComponent({
 .designPage {
   margin-right: 4rem;
 }
+.upload_file_item {
+  // height: 13.4rem;
+  // margin-top: 2rem;
+  :deep(.ant-upload-picture-card-wrapper) {
+    .ant-upload-list-picture-card {
+      .ant-upload-select-picture-card {
+        width: 9.6rem;
+        height: 13.4rem;
+      }
+    }
+  }
+}
+
+.prompt-container {
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+  position: relative;
+  .prompt-title {
+    margin-bottom: 1.4rem;
+    font-size: 1.6rem;
+    // margin-bottom: 1rem;
+  }
+  .input_border {
+    padding-bottom: 0;
+    .input_box {
+      .input_box_btnBox .textarea {
+        min-height: 12.7rem;
+      }
+    }
+  }
+  .asistant-btn {
+    // width: 9rem;
+    padding: 0.45rem 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;
+    }
+  }
+}
 </style>