Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

2025-11-13 10:56:51 +08:00
parent c54d9fa2f6 068078ea83
commit c0d3baa6ee
19 changed files with 1066 additions and 115 deletions
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -2,18 +2,29 @@
 	<div class="poseTransfer">
 		<div class="configuratioBox" :class="{active:button.left}">
 			<div class="configuratio">
-				<!-- <div class="title">Give pose for them to select</div> -->
 				<div class="content">
-					<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
+					<div class="video-type-container">
+						<div class="title">Video Type</div>
+						<a-select
+							class="video-type-selection"
+							v-model:value="videoType"
+							size="large"
+							placeholder="Please select"
+						>
+						<a-select-option 
+						v-for="item in options"
+						:key="item.vlaue"
+						:value="item.value"
+						>
+							{{ item.label }}
+						</a-select-option>
+					</a-select>
+					</div>
 					<div class="selectImg">
 						<div class="head">
 							<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
 						</div>
 						<div class="imgBox" v-mousewheel>
-							<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
-								<img :src="item.imgUrl || item.url" alt="">	
-								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
-							</div> -->
 							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
 								<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
 									<a-spin size="large" />
@@ -57,7 +68,7 @@
 					<div style="width: 100%; height: 100px;">
 						<promptInput :content="prompt" ref="promptInput"></promptInput>
 					</div>
-					<div class="poses">
+					<div class="poses" v-show="showMotion">
 						<div class="head">
 							<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
 						</div>
@@ -73,6 +84,17 @@
 										<i class="fi fi-br-check"></i>
 									</div>
 								</div>
+								<div class="control-container">
+									<div class="icon-list">
+										<SvgIcon
+										 class="play-icon"
+									 	 @click="handlePlayMotion(item)"
+										 name="CPlay"
+										 size="10"
+										 color="#fff"
+										 />
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -269,6 +291,9 @@ export default defineComponent({
 		}
 		const gifPause = (e:any,item:any)=>{
 			e.target.src = item.firstFrame//静态图片
+		}
+		const handlePlayMotion = item => {
+			
 		}
 		const getPoseList = ()=>{
 			Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
@@ -625,7 +650,20 @@ export default defineComponent({
 					setGenerate(taskIdList[0].taskId)
 				}
 			})
-		},{immediate: true })
+		},
+		{immediate: true }
+		)
+
+		const videoType = ref('3')
+		const showMotion = computed(()=> videoType.value === '3' )
+		const options = ref([
+			{ vlaue: '1', label: 'First frame' },
+			{ value: '2', label: 'First and last frames' },
+			{ value: '3', label: 'First frame and skeleton' },
+
+		])
+
+
 		onBeforeUnmount(()=>{
 			clearInterval(data.generateTime)
 			clearInterval(data.remGenerateTime)
@@ -654,6 +692,9 @@ export default defineComponent({
 			setSpeed,
 			setUploadDelete,
 			locale,
+			videoType,
+			options,
+			showMotion,
 		}
 	},
 	directives:{
@@ -757,21 +798,23 @@ export default defineComponent({
 						max-height: 45rem;
 						margin-top: 2rem;
 						display: flex;
-						flex-direction: row;
 						flex-wrap: nowrap;
-						justify-content: space-between;
+						// justify-content: space-between;
 						width: 100%;
 						overflow: hidden;
 						overflow-x: auto;
+						column-gap: 2.4rem;
+						position: relative;
 						> .item{
-							margin-right: 1rem;
-							width: calc(100% / 2 - .5rem);
+							// width: calc(100% / 2 - .5rem);
+							// height: 25rem;
+							width: 12.7rem;
+							height: 17.8rem;
 							cursor: pointer;
 							overflow: hidden;
 							display: flex;
 							justify-content: center;
 							flex-shrink: 0;
-							height: 25rem;
 							position: relative;
 							// &.active{
 							// 	border: 2px solid;
@@ -852,11 +895,36 @@ export default defineComponent({
 							> img{
 								width: 100%;
 								object-fit: contain;
+								border: 1px solid #D0D0D0;
 							}
 						}
 						> .upload_item{
 							border: none;
 						}
+						.control-container{
+							width: 100%;
+							height: 3.3rem;
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							background: linear-gradient(180deg, rgba(8, 9, 13, 0) 0%, rgba(8, 9, 13, 0.27) 80.37%);
+							display: flex;
+							align-items: flex-end;
+							justify-content: center;
+							.icon-list{
+								height: 50%;
+								width: calc(100% - 1.6rem);
+								border-top: 1px solid #fff;
+								display: flex;
+								box-sizing: border-box;
+								justify-content: flex-start;
+								align-items: center;
+								.play-icon{
+									width: initial;
+									height: initial;
+								}
+							}
+						}
 					}
 					> .head{
 						color: #000;
@@ -948,5 +1016,39 @@ export default defineComponent({
 				overflow: hidden;
 			}
 		}
-	}
+
+			.upload_file_item {
+				width: 100%;
+				height: 100%;
+				:deep(.ant-upload-picture-card-wrapper) {
+					width: 100% !important;
+					height: 100%;
+					.ant-upload-list-picture-card {
+						width: 100%;
+						height: 100%;
+						.ant-upload-select-picture-card {
+							width: 100%;
+							height: 100%;
+							border: 1px solid #000;
+							background: #fff;
+						}
+					}
+				}
+			}
+			.video-type-container{
+				margin-bottom: 4rem;
+				.title{
+					font-size: 1.8rem;
+					color: #000;
+					margin-bottom: 1.4rem;
+				}
+				:deep(.ant-select){
+					width: 100%;
+					.ant-select-selector{
+						border: 2px solid #D0D0D0;
+						border-radius: 1rem;
+					}
+				}
+			}
+		}
 </style>
--- a/src/component/home/tools/toProduct/Prompt.vue
+++ b/src/component/home/tools/toProduct/Prompt.vue
@@ -83,7 +83,7 @@
 </template>

 <script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue'
+import { ref, useTemplateRef, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import originalDress from '@/assets/images/product/original_dress.png'
 import generatedDress from '@/assets/images/product/geneated_dress.png'
@@ -94,7 +94,7 @@ import { downloadIamge } from '@/tool/util'
 import { useI18n } from 'vue-i18n'
 const { t, locale } = useI18n()

-defineProps<{
+const props = defineProps<{
  promptList: string[]
 }>()

@@ -169,7 +169,7 @@ const handleCopy = async (value: string) => {
      textArea.select()
      try {
        document.execCommand('copy')
-         message.success(t('ProductImg.CopySuccess'))
+        message.success(t('ProductImg.CopySuccess'))
      } catch (err) {
        message.error(t('ProductImg.CopyFailed'))
      }
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -166,13 +166,13 @@
                    @keydown.enter.prevent="getPrductimg()"
                    v-model="searchName[productimgMenu.value]"
                  ></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 class="asistant-btn" @click="handleClickAssistBtn">
-              <i class="fi fi-bs-magic-wand asistant-icon"></i>
-              <span>{{ $t('ProductImg.PromptAssit') }}</span>
-            </div>
          </div>
          <div class="productImg_content_item_generate_btn input_border">
            <div class="generage_btn_box">
@@ -384,10 +384,10 @@ export default defineComponent({
      type: Boolean,
      default: false
    },
-	isState:{
-		type:Boolean,
-		default:false,
-	},
+    isState: {
+      type: Boolean,
+      default: false
+    }
  },
  emit: ['unLike'],
  setup(props, { emit }) {
@@ -406,8 +406,7 @@ export default defineComponent({
    const createProbject: any = inject('createProbject', () => {})
    let productImgData: any = reactive({
      isShowMark: false,
-      fileList:{
-	},
+      fileList: {},
      searchName: {
        ToProductImage: '',
        Relight: ''
@@ -416,37 +415,37 @@ export default defineComponent({
      isProductimg: false, //开始生成
      selectProductimgList: [],
      generateList: {
-        ToProductImage:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'toProduct'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.toProductImageList.list
-			}
-		}),
-		Relight:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'relight'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.relightList.list
-			}
-		}),
+        ToProductImage: computed(() => {
+          if (!route.query?.id && route.query.tools == 'toProduct') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.toProductImageList.list
+          }
+        }),
+        Relight: computed(() => {
+          if (!route.query?.id && route.query.tools == 'relight') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.relightList.list
+          }
+        })
      },
      selectObject: computed(() => store.state.Workspace.probjects), //选择的项目
      likeList: {
-        ToProductImage:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'toProduct'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.toProductImageList.likedList
-			}
-		}),
-		Relight:computed(()=>{
-			if(!route.query?.id && route.query.tools == 'relight'){
-				return []
-			}else{
-				return store.state.HomeStoreModule.relightList.likedList
-			}
-		}),
+        ToProductImage: computed(() => {
+          if (!route.query?.id && route.query.tools == 'toProduct') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.toProductImageList.likedList
+          }
+        }),
+        Relight: computed(() => {
+          if (!route.query?.id && route.query.tools == 'relight') {
+            return []
+          } else {
+            return store.state.HomeStoreModule.relightList.likedList
+          }
+        })
      } as any,
      similarity: 30,
      brightenValue: 1,
@@ -520,19 +519,23 @@ export default defineComponent({
      return store.state.UploadFilesModule.modularData
    })
    let userlikeGroupId = 0
-	watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
-		setFileList()
-	})
-	const setFileList = () => {
-		if(props.isDesignPage)return
-		if(!route.query?.id && route.query.tools){
-			productImgData.fileList[props.productimgMenu.value] = []
-		}else{
-			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
-			if(productImgData.fileList[props.productimgMenu.value][0]){
-				productImgData.fileList[props.productimgMenu.value][0].isChecked = true
-			}
-		}
+    watch(
+      () => store.state.HomeStoreModule.uploadElement.length,
+      (newVal, oldVal) => {
+        setFileList()
+      }
+    )
+    const setFileList = () => {
+      if (props.isDesignPage) return
+      if (!route.query?.id && route.query.tools) {
+        productImgData.fileList[props.productimgMenu.value] = []
+      } else {
+        productImgData.fileList[props.productimgMenu.value] =
+          store.state.HomeStoreModule.uploadElement
+        if (productImgData.fileList[props.productimgMenu.value][0]) {
+          productImgData.fileList[props.productimgMenu.value][0].isChecked = true
+        }
+      }
    }
    const openSetData = (designList: any) => {
      // cleardata()
@@ -545,7 +548,7 @@ export default defineComponent({
        productImgData.fileList[props.productimgMenu.value] = designList
        return
      }
-	  setFileList()
+      setFileList()
      userlikeGroupId = selectDesignList.value.userlikeGroupId
      // getLikeProductImage(selectDesignList.value.userlikeGroupId)
      productImgDom.generalDragLeft.setItemPosition()
@@ -717,6 +720,11 @@ export default defineComponent({
    let remPrductimgTime: any = null
    let prductimgTime: any = null
    let getPrductimg = () => {
+      // 未输入prompt时不可生成
+      if (!productImgData.searchName[props.productimgMenu.value]) {
+        message.info(t('ProductImg.noPrompt'))
+        return
+      }
      if (productImgData.isProductimg) return
      clearInterval(remPrductimgTime)
      let selectArr: any = []
@@ -1033,17 +1041,21 @@ export default defineComponent({
      })
    }
    const ifMaximumLength = async () => {
-      await nextTick()
+      // await nextTick()
+      // let textarea = productImgData.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
+      // 随着输入内容自动调整高度
      let textarea = productImgData.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
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
    }
    const openSpeed = () => {
      speed.speedState = !speed.speedState
@@ -1096,7 +1108,7 @@ export default defineComponent({

      if (!isFromDesignPage) {
        // 如果不是从design来的，返回两个提示词
-        return [t('poseTransfer.UploadWithModel'), t('poseTransfer.UploadWithoutModel')]
+        return [t('poseTransfer.UploadWithoutModel'), t('poseTransfer.UploadWithModel')]
      } else {
        // 如果是从design来的
        if (isSingleDesign) {
@@ -1260,15 +1272,14 @@ export default defineComponent({
    // &.active

    > .item {
-      // margin-right: 1rem;
-      // width: calc(100% / 2 - 0.5rem);
-      width: 9.6rem;
+      margin-right: 1rem;
+      width: calc(100% / 2 - 0.5rem);
      cursor: pointer;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
-      height: 13.4rem;
+      height: 25rem;
      position: relative;
      // &.active{
      // 	border: 2px solid;
@@ -1538,7 +1549,16 @@ export default defineComponent({
  margin-right: 4rem;
 }

-
+.upload_file_item {
+  :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;
@@ -1551,19 +1571,18 @@ export default defineComponent({
  .input_border {
    padding-bottom: 0;
    .input_box {
-      .input_box_btnBox .textarea {
-        min-height: 12.7rem;
+      .input_box_btnBox {
+        position: relative;
+        .textarea {
+          min-height: 12.7rem;
+          max-height: none;
+        }
      }
    }
  }
-  .input_box_btnBox{
-    padding-bottom: 4rem;
-  }
  .asistant-btn {
-    // width: 9rem;
-    padding: 0.45rem 0.6rem;
    height: 2.3rem;
-    line-height: 2.3rem;
+    padding: 0 0.6rem;
    font-size: 1rem;
    font-weight: 400;
    color: #313131;
@@ -1580,6 +1599,9 @@ export default defineComponent({
    cursor: pointer;
    .asistant-icon {
      font-size: 1rem;
+      margin-right: 0;
+      width: initial;
+      // margin-top: -0.2rem;
    }
  }
 }