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
@@ -22,7 +22,7 @@ const data = reactive({
   //   { id: '3', type: 'text', value: '333333' },
   //   { id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
   // ] as ContentItem[]
-	content: [ { id: '1', type: 'text', value: '' },],
+  content: [{ id: '1', type: 'text', value: '' }]
 })
 
 const editableArea = ref<HTMLElement>()
@@ -282,7 +282,10 @@ 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
@@ -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 || []))
+  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,