bugfix: promptInput提示词内容不会变化

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

@@ -169,7 +169,7 @@
           </div>
           <div class="prompt-input-container" v-show="!showMotion">
             <div class="title">{{ $t('ProductImg.Prompt') }}</div>
-            <promptInput :content="prompt" ref="promptInput" />
+            <promptInput :content="inputPrompt" ref="promptInput" />
           </div>
           <div class="poses" v-show="showMotion">
             <div class="head">
@@ -371,15 +371,7 @@ export default defineComponent({
       removeGenerate: false,
       generateTime: null as any,
       poseList: [],
-      selectPose: null as any,
+      selectPose: null as any
-      prompt: computed(() => {
-        if (videoType.value === 2) {
-          return getFirstFrame(t)
-        }
-        if (videoType.value === 3) {
-          return getFirstAndLastFrame(t)
-        }
-      })
     })
     let speed = reactive({
       speedList: [
@@ -977,6 +969,14 @@ export default defineComponent({
 
     const videoType = ref(2)
     const showMotion = computed(() => videoType.value === 1)
+    const inputPrompt = computed(() => {
+      if (videoType.value === 2) {
+        return getFirstFrame(t)
+      }
+      if (videoType.value === 3) {
+        return getFirstAndLastFrame(t)
+      }
+    })
     const options = ref([
       { vlaue: 2, label: t('poseTransfer.FirstFrame') },
       { value: 3, label: t('poseTransfer.FirstAndLastFrames') },
@@ -1265,7 +1265,8 @@ export default defineComponent({
       handleConfirmProduct,
       productFrameList,
       showFirstFrameUpload,
-      showLastFrameUpload
+      showLastFrameUpload,
+      inputPrompt
     }
   },
   directives: {

src/component/home/tools/poseTransfer/promptInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, toRefs, nextTick, useTemplateRef } from 'vue'
+import { ref, reactive, toRefs, nextTick, useTemplateRef, watch } from 'vue'
 
 interface ContentItem {
   id: string
@@ -16,13 +16,13 @@ const props = defineProps({
 })
 
 const data = reactive({
-    // content: [
+  // content: [
-    //   { id: '1', type: 'text', value: '11111' },
+  //   { id: '1', type: 'text', value: '11111' },
-    //   { id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
+  //   { id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
-    //   { id: '3', type: 'text', value: '333333' },
+  //   { id: '3', type: 'text', value: '333333' },
-    //   { id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
+  //   { id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
-    // ] as ContentItem[]
+  // ] as ContentItem[]
-	content: [ { id: '1', type: 'text', value: '' },],
+  content: [{ id: '1', type: 'text', value: '' }]
 })
 
 const editableArea = ref<HTMLElement>()
@@ -282,11 +282,14 @@ const handleInputChange = (index: number, event: Event) => {
   const item = data.content[index]
 
   // 如果当前显示placeholder，但内容已改变（比如通过粘贴），清除placeholder
-  if (target.classList.contains('has-placeholder') && target.textContent !== item.placeholder) {
+  if (
+    target.classList.contains('has-placeholder') &&
+    target.textContent !== item.placeholder
+  ) {
     target.classList.remove('has-placeholder')
     const newValue = target.textContent || ''
     data.content[index].value = newValue
-    
+
     // 如果粘贴后内容为空，重新显示 placeholder
     if (newValue.trim() === '' && item.placeholder) {
       target.classList.add('has-placeholder')
@@ -312,21 +315,21 @@ const handleInputChange = (index: number, event: Event) => {
 const handleInputPaste = (event: ClipboardEvent, index: number) => {
   const target = event.target as HTMLSpanElement
   const item = data.content[index]
-  
+
   // 如果当前显示 placeholder，先清除它
   if (target.classList.contains('has-placeholder')) {
     event.preventDefault()
     target.classList.remove('has-placeholder')
     target.textContent = ''
-    
+
     // 获取粘贴的内容
     const pasteData = event.clipboardData?.getData('text') || ''
     document.execCommand('insertText', false, pasteData)
-    
+
     // 更新值
     const newValue = target.textContent || ''
     data.content[index].value = newValue
-    
+
     // 如果粘贴后内容为空，重新显示 placeholder
     if (newValue.trim() === '' && item.placeholder) {
       target.classList.add('has-placeholder')
@@ -381,14 +384,14 @@ const handleInputKeydown = (event: KeyboardEvent, index: number) => {
 
 const handlePasteInInput = (index: number, element: HTMLElement) => {
   const item = data.content[index]
-  
+
   // 如果当前显示 placeholder，清除它
   if (element.classList.contains('has-placeholder')) {
     element.classList.remove('has-placeholder')
     // 获取粘贴后的实际内容
     const newValue = element.textContent || ''
     data.content[index].value = newValue
-    
+
     // 如果粘贴后内容为空，重新显示 placeholder
     if (newValue.trim() === '' && item.placeholder) {
       element.classList.add('has-placeholder')
@@ -398,7 +401,7 @@ const handlePasteInInput = (index: number, element: HTMLElement) => {
     // 正常情况，直接更新值
     const newValue = element.textContent || ''
     data.content[index].value = newValue
-    
+
     // 检查是否需要显示 placeholder
     if (newValue.trim() === '' && item.placeholder) {
       element.classList.add('has-placeholder')
@@ -411,7 +414,7 @@ const handlePasteInInput = (index: number, element: HTMLElement) => {
 const handleCompositionStart = (index: number, event: CompositionEvent) => {
   compositionState.isComposing = true
   compositionState.currentInputIndex = index
-  
+
   const target = event.target as HTMLSpanElement
   // 如果是placeholder状态，开始中文输入时清除placeholder
   if (target.classList.contains('has-placeholder')) {
@@ -424,11 +427,11 @@ const handleCompositionStart = (index: number, event: CompositionEvent) => {
 const handleCompositionEnd = (index: number, event: CompositionEvent) => {
   compositionState.isComposing = false
   compositionState.currentInputIndex = -1
-  
+
   const target = event.target as HTMLSpanElement
   const newValue = target.textContent || ''
   data.content[index].value = newValue
-  
+
   // 如果中文输入后内容为空，显示placeholder
   const item = data.content[index]
   if (newValue.trim() === '' && item.placeholder) {
@@ -496,18 +499,31 @@ const getFullText = () => {
 
 const textareaValue = ref('')
 const assistModel = ref(false)
-const handleClickAssistBtn = () => {
+const syncContentFromProps = (
-  assistModel.value = !assistModel.value
+  newContent: ContentItem[] = props.content as ContentItem[]
-  if(assistModel.value){
+) => {
-	data.content = JSON.parse(JSON.stringify(props.content))
+  data.content = JSON.parse(JSON.stringify(newContent || []))
-	initPlaceholders()
+  if (assistModel.value) {
+    initPlaceholders()
   }
 }
 
-const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
+const handleClickAssistBtn = () => {
+  assistModel.value = !assistModel.value
+  if (assistModel.value) {
+    syncContentFromProps()
+  }
+}
 
-onMounted(() => {
+watch(
-})
+  () => props.content,
+  newVal => {
+    syncContentFromProps(newVal as ContentItem[])
+  },
+  { deep: true }
+)
+
+const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
 
 defineExpose({
   getFullText,
@@ -573,8 +589,8 @@ defineExpose({
   --promptInputBorder: 2px solid #dcdfe6;
   --promptInputPadding: 1.5rem;
 
-	width: 100%;
+  width: 100%;
-	font-weight: 500;
+  font-weight: 500;
   border-radius: var(--promptInputBorderRadius);
   border: var(--promptInputBorder);
   padding: var(--promptInputPadding);
@@ -585,14 +601,14 @@ defineExpose({
   user-select: text;
   cursor: text;
   position: relative;
-	padding-bottom: 4rem;
+  padding-bottom: 4rem;
-	box-sizing: content-box;
+  box-sizing: content-box;
 
-	.promptinput-wrapper {
+  .promptinput-wrapper {
-		min-height: 12rem;
+    min-height: 12rem;
-		max-height: 14rem;
+    max-height: 14rem;
-		overflow-y: auto;
+    overflow-y: auto;
-	}
+  }
 
   .text-field {
     display: inline;
@@ -600,7 +616,7 @@ defineExpose({
     padding: 0.2rem 0;
     font-size: 1.8rem;
     min-width: 2px;
-		font-weight: 400;
+    font-weight: 400;
   }
 
   .input-field {
@@ -629,21 +645,21 @@ defineExpose({
   padding: 1.5rem 1.5rem 3rem;
   height: auto;
   font-size: 1.8rem;
-	.area {
+  .area {
-		width: 100%;
+    width: 100%;
-		min-height: 12rem;
+    min-height: 12rem;
-		max-height: 14rem;
+    max-height: 14rem;
-		background: white;
+    background: white;
-		line-height: 1.6;
+    line-height: 1.6;
-		outline: none;
+    outline: none;
-		white-space: pre-wrap;
+    white-space: pre-wrap;
-		user-select: text;
+    user-select: text;
-		cursor: text;
+    cursor: text;
-		position: relative;
+    position: relative;
-		resize: none;
+    resize: none;
-		border: none;
+    border: none;
-		overflow-y: auto;
+    overflow-y: auto;
-	}
+  }
 }
 
 .asistant-btn {
@@ -669,4 +685,4 @@ defineExpose({
     width: initial;
   }
 }
-</style>
+</style>