diff --git a/src/assets/icons/promptEditProductNo.svg b/src/assets/icons/promptEditProductNo.svg new file mode 100644 index 00000000..36951dfb --- /dev/null +++ b/src/assets/icons/promptEditProductNo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/promptEditProductYes.svg b/src/assets/icons/promptEditProductYes.svg new file mode 100644 index 00000000..daf0070b --- /dev/null +++ b/src/assets/icons/promptEditProductYes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/editProduct/PromptEditProduct_edited1.png b/src/assets/images/editProduct/PromptEditProduct_edited1.png new file mode 100644 index 00000000..e86b412b Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_edited1.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_edited2.png b/src/assets/images/editProduct/PromptEditProduct_edited2.png new file mode 100644 index 00000000..2f0000a5 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_edited2.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_edited3.png b/src/assets/images/editProduct/PromptEditProduct_edited3.png new file mode 100644 index 00000000..999f89c3 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_edited3.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list1.png b/src/assets/images/editProduct/PromptEditProduct_list1.png new file mode 100644 index 00000000..b938ca1a Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list1.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list10.png b/src/assets/images/editProduct/PromptEditProduct_list10.png new file mode 100644 index 00000000..54393214 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list10.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list11.png b/src/assets/images/editProduct/PromptEditProduct_list11.png new file mode 100644 index 00000000..61d658df Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list11.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list2.png b/src/assets/images/editProduct/PromptEditProduct_list2.png new file mode 100644 index 00000000..b305848e Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list2.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list3.png b/src/assets/images/editProduct/PromptEditProduct_list3.png new file mode 100644 index 00000000..62577bf1 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list3.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list4.png b/src/assets/images/editProduct/PromptEditProduct_list4.png new file mode 100644 index 00000000..dadf1858 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list4.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list5.png b/src/assets/images/editProduct/PromptEditProduct_list5.png new file mode 100644 index 00000000..913c9d49 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list5.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list6.png b/src/assets/images/editProduct/PromptEditProduct_list6.png new file mode 100644 index 00000000..35e03c4f Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list6.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list7.png b/src/assets/images/editProduct/PromptEditProduct_list7.png new file mode 100644 index 00000000..43f62618 Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list7.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list8.png b/src/assets/images/editProduct/PromptEditProduct_list8.png new file mode 100644 index 00000000..ede4506f Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list8.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_list9.png b/src/assets/images/editProduct/PromptEditProduct_list9.png new file mode 100644 index 00000000..0568333e Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_list9.png differ diff --git a/src/assets/images/editProduct/PromptEditProduct_listOriginal.png b/src/assets/images/editProduct/PromptEditProduct_listOriginal.png new file mode 100644 index 00000000..e86b412b Binary files /dev/null and b/src/assets/images/editProduct/PromptEditProduct_listOriginal.png differ diff --git a/src/component/home/tools/poseTransfer/promptInput.vue b/src/component/home/tools/poseTransfer/promptInput.vue index de0812e3..8b5529be 100644 --- a/src/component/home/tools/poseTransfer/promptInput.vue +++ b/src/component/home/tools/poseTransfer/promptInput.vue @@ -311,6 +311,20 @@ const handleInputChange = (index: number, event: Event) => { } } +// 增强中文输入事件处理 +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')) { + target.classList.remove('has-placeholder') + target.textContent = '' + data.content[index].value = '' + } +} + // 添加专门的粘贴事件处理 const handleInputPaste = (event: ClipboardEvent, index: number) => { const target = event.target as HTMLSpanElement @@ -341,6 +355,11 @@ const handleInputPaste = (event: ClipboardEvent, index: number) => { const handleInputKeydown = (event: KeyboardEvent, index: number) => { const target = event.target as HTMLSpanElement + // 如果是中文输入过程中，不处理普通按键 + if (compositionState.isComposing) { + return + } + if (event.key === 'Backspace') { // 如果显示placeholder，阻止删除 if (target.classList.contains('has-placeholder')) { @@ -360,7 +379,7 @@ const handleInputKeydown = (event: KeyboardEvent, index: number) => { } } } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) { - // 普通字符输入 + // 普通字符输入 - 只有在非中文输入状态下才处理 if (target.classList.contains('has-placeholder')) { event.preventDefault() target.textContent = event.key @@ -410,24 +429,13 @@ 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')) { - target.classList.remove('has-placeholder') - target.textContent = '' - data.content[index].value = '' - } -} - const handleCompositionEnd = (index: number, event: CompositionEvent) => { - compositionState.isComposing = false - compositionState.currentInputIndex = -1 - + // 延迟设置 isComposing 为 false，确保所有相关事件都处理完毕 + setTimeout(() => { + compositionState.isComposing = false + compositionState.currentInputIndex = -1 + }, 0) + const target = event.target as HTMLSpanElement const newValue = target.textContent || '' data.content[index].value = newValue @@ -435,14 +443,28 @@ const handleCompositionEnd = (index: number, event: CompositionEvent) => { // 如果中文输入后内容为空，显示placeholder const item = data.content[index] if (newValue.trim() === '' && item.placeholder) { - target.classList.add('has-placeholder') - target.textContent = item.placeholder + // 延迟显示 placeholder，确保光标位置正确 + nextTick(() => { + if (target.textContent?.trim() === '') { + target.classList.add('has-placeholder') + target.textContent = item.placeholder + } + }) } } +// 添加输入框焦点事件处理，确保中文输入状态正确重置 +const handleInputFocus = (index: number) => { + compositionState.currentInputIndex = index +} + +// 修改输入框的 blur 处理 const handleInputBlur = (index: number) => { - compositionState.isComposing = false - compositionState.currentInputIndex = -1 + // 延迟重置状态，避免与 compositionend 冲突 + setTimeout(() => { + compositionState.isComposing = false + compositionState.currentInputIndex = -1 + }, 100) updateInputDisplay(index) } @@ -544,6 +566,7 @@ defineExpose({ {{ $t('ProductImg.PromptAssit') }} +
- + + +
+
+ + + + + +
+
+
+
{{ $t('ProductImg.PromptAssit') }}
+
{{ status == 0 ? $t('ProductImg.Edited') : $t('ProductImg.AssitSubTitle') }}
+
+
+
+
+
+ +
+ + +
+
+
+ {{ item.text }} +
+
+
+
+
+
+ +
+
+ +
{{ $t('ProductImg.OriginalImage') }}
+
+ +
+ {{ $t('ProductImg.EditGarmen') }}: +
+
+
+
+ +
{{ item.info }}
+
+ + +
+ {{ item.text }} + +
+
+
+
+ +
+ + +
+ + + + + + + + diff --git a/src/component/home/tools/toProduct/index.vue b/src/component/home/tools/toProduct/index.vue index a6b9d084..4be193ec 100644 --- a/src/component/home/tools/toProduct/index.vue +++ b/src/component/home/tools/toProduct/index.vue @@ -320,7 +320,8 @@ }" :isProductimg="true" > - + +
@@ -353,6 +354,7 @@ 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 PromptEditProduct from './PromptEditProduct.vue' import { List } from 'echarts' import { useRouter, useRoute } from 'vue-router' @@ -361,7 +363,8 @@ export default defineComponent({ scaleImage, generalMenu, generalDrag, - Prompt + Prompt, + PromptEditProduct }, props: { setTask: { diff --git a/src/lang/cn.ts b/src/lang/cn.ts index 20995592..12fd99bd 100644 --- a/src/lang/cn.ts +++ b/src/lang/cn.ts @@ -283,9 +283,37 @@ export default { Prompt: '提示词', PromptAssit: '提示词助手', AssitSubTitle: '您可以复制并使用以下提示词：', + Edited: '以下是编辑后的图像中需要注意的事项。', CopySuccess: '已复制到剪贴板', CopyFiled: '复制失败', - noPrompt: '请输入提示词' + noPrompt: '请输入提示词', + OriginalImage: '原始图像', + EditGarmen: '您可以编辑这件服装', + Background: '白色背景', + BackgroundColor: '纯色背景', + ComplexBackground: '复杂背景', + Changeview: '改为背面视角。', + ChangeviewInfo: '切换视角', + Changepose: '将姿势改为坐下并交叉脚踝\n的姿势。', + ChangeposeInfo: '改变姿势', + Changehair: '将发型改为金色直发。', + ChangehairInfo: '改变发型', + ChangeAsian: '将模特改为亚洲人。', + ChangeAsianInfo: '改变面部特征', + Changedemin: '将黑色西装改为黄色牛仔...', + ChangedeminInfo: '替换服装纹理和颜色', + ChaRemove: '移除黑色西装。', + ChaRemoveInfo: '移除服装', + ChangeSunglasses: '为模特添加棕色牛仔帽和\n太阳镜', + ChangeSunglassesInfo: '添加配饰', + ChangeHeels: '将白色鞋子改为黑色高跟鞋。', + ChangeHeelsInfo: '更换鞋子', + ChangeUrban: '在城市街道，正午时分。', + ChangeUrbanInfo: '替换服装纹理和颜色', + ChangeBar: '在酒吧，傍晚时分。', + ChangeBarInfo: '移除服装', + ChangeGarden: '在花园，清晨时分。', + ChangeGardenInfo: '添加配饰', }, poseTransfer: { SelectDesign: '产品图', diff --git a/src/lang/en.ts b/src/lang/en.ts index 69c13d94..3862f568 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -293,9 +293,37 @@ export default { Prompt: 'Prompt', PromptAssit: 'Prompt Assist', AssitSubTitle: 'You can copy following prompt and try:', + Edited: 'Here’s what to notice in the edited image.', CopySuccess: 'Copied to clipboard', CopyFiled: 'Failed to copy', - noPrompt: 'Please enter prompt' + noPrompt: 'Please enter prompt', + OriginalImage: 'Original Image', + EditGarmen: 'You can edit the garmen', + Background: 'White Background', + BackgroundColor: 'Background with Pure Color', + ComplexBackground: 'with Complex Background', + Changeview: 'Change to back view.', + ChangeviewInfo: 'Alter View', + Changepose: 'Change the pose to sit\ndown and cross ankle pose.', + ChangeposeInfo: 'Change Pose', + Changehair: 'Change the haircut to\nblonde straight hair.', + ChangehairInfo: 'Change Haircut', + ChangeAsian: 'Change model to Asian.', + ChangeAsianInfo: 'Change Facial', + Changedemin: 'Change the black\nsuit to yellow demin...', + ChangedeminInfo: 'Replace Garment Texture and Color', + ChaRemove: 'ChaRemove the black suit.', + ChaRemoveInfo: 'Remove Garment', + ChangeSunglasses: 'Change this model with\nbrown cowboy hat and sunglasses', + ChangeSunglassesInfo: 'Add Accessories', + ChangeHeels: 'Change white shoes to\nblack high heels.', + ChangeHeelsInfo: 'Change Shoes', + ChangeUrban: 'In the urban street,\nat noon.', + ChangeUrbanInfo: 'Replace Garment Texture and Color', + ChangeBar: 'In the bar, in the evening.', + ChangeBarInfo: 'Remove Garment', + ChangeGarden: 'In the garden, in the morning.', + ChangeGardenInfo: 'Add Accessories', }, poseTransfer: { SelectDesign: 'Product image',