aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhangyh
2025-11-19 17:17:20 +08:00
parent 90d3a95ff4
commit 843d92b4aa
2 changed files with 82 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/component/home/tools/poseTransfer/index.vue
View File

@@ -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,
prompt: computed(() => {
if (videoType.value === 2) {
return getFirstFrame(t)
}
if (videoType.value === 3) {
return getFirstAndLastFrame(t)
}
})
selectPose: null as any
})
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: {

124
src/component/home/tools/poseTransfer/promptInput.vue
View File

@@ -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: [
// { id: '1', type: 'text', value: '11111' },
// { id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
// { 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: '11111' },
// { id: '2', type: 'input', value: '222', placeholder: '[请输入内容]' },
// { id: '3', type: 'text', value: '333333' },
// { id: '4', type: 'input', value: '', placeholder: '[请输入内容]' }
// ] as ContentItem[]
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 = () => {
assistModel.value = !assistModel.value
if(assistModel.value){
data.content = JSON.parse(JSON.stringify(props.content))
initPlaceholders()
const syncContentFromProps = (
newContent: ContentItem[] = props.content as ContentItem[]
) => {
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,
@@ -573,8 +589,8 @@ defineExpose({
--promptInputBorder: 2px solid #dcdfe6;
--promptInputPadding: 1.5rem;
width: 100%;
font-weight: 500;
width: 100%;
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;
box-sizing: content-box;
padding-bottom: 4rem;
box-sizing: content-box;
.promptinput-wrapper {
min-height: 12rem;
max-height: 14rem;
overflow-y: auto;
}
.promptinput-wrapper {
min-height: 12rem;
max-height: 14rem;
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 {
width: 100%;
min-height: 12rem;
max-height: 14rem;
background: white;
line-height: 1.6;
outline: none;
white-space: pre-wrap;
user-select: text;
cursor: text;
position: relative;
resize: none;
border: none;
overflow-y: auto;
}
.area {
width: 100%;
min-height: 12rem;
max-height: 14rem;
background: white;
line-height: 1.6;
outline: none;
white-space: pre-wrap;
user-select: text;
cursor: text;
position: relative;
resize: none;
border: none;
overflow-y: auto;
}
}
.asistant-btn {
@@ -669,4 +685,4 @@ defineExpose({
width: initial;
}
}
</style>
</style>