feat: 提示词助手弹窗
This commit is contained in:
zhangyh
261
src/component/home/tools/toProduct/Prompt.vue
Normal file
261
src/component/home/tools/toProduct/Prompt.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div ref="modalContainer"></div>
|
||||
<a-modal
|
||||
class="prompt-modal generalModel"
|
||||
v-model:visible="showModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.modalContainer"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="handleClose()">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 46 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
|
||||
<rect
|
||||
x="32.5063"
|
||||
y="12"
|
||||
width="3"
|
||||
height="29"
|
||||
rx="1.5"
|
||||
transform="rotate(45 32.5063 12)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="34.6274"
|
||||
y="32.5059"
|
||||
width="3"
|
||||
height="29"
|
||||
rx="1.5"
|
||||
transform="rotate(135 34.6274 32.5059)"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-container">
|
||||
<div class="title">{{ $t('ProductImg.PromptAssit') }}</div>
|
||||
<div class="sub-title">{{ $t('ProductImg.AssitSubTitle') }}</div>
|
||||
</div>
|
||||
<div class="example-content">
|
||||
<div
|
||||
class="example-wrapper"
|
||||
v-for="item in Object.keys(exampleList)"
|
||||
:key="item"
|
||||
:class="item"
|
||||
>
|
||||
<div class="example-item" v-for="value in exampleList[item]" :key="value.title">
|
||||
<img :src="value.src" />
|
||||
<SvgIcon
|
||||
v-if="value.isOriginal"
|
||||
class="download-icon"
|
||||
name="CDownload"
|
||||
size="20"
|
||||
color="#8E8E8E"
|
||||
@click.stop="handleDownload(value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prompt-list">
|
||||
<div v-for="item in promptList" :key="item" class="prompt-item">
|
||||
<SvgIcon
|
||||
name="CCopy"
|
||||
size="25"
|
||||
color="#BCBCBC"
|
||||
class="copy-icon"
|
||||
@click.stop="handleCopy(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, useTemplateRef } 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'
|
||||
import originalModel from '@/assets/images/product/original_model.png'
|
||||
import generatedModel from '@/assets/images/product/generated_model.png'
|
||||
import generatedSketch from '@/assets/images/product/generated_sketch.png'
|
||||
import { downloadIamge } from '@/tool/util'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
defineProps<{
|
||||
promptList: string[]
|
||||
}>()
|
||||
|
||||
const modalContainer = useTemplateRef('modalContainer')
|
||||
const showModal = defineModel<boolean>('showModal', { required: true })
|
||||
|
||||
const garmentExample = [
|
||||
{
|
||||
title: 'originalDress',
|
||||
src: originalDress,
|
||||
isOriginal: true
|
||||
},
|
||||
{
|
||||
title: 'generatedDress',
|
||||
src: generatedDress
|
||||
}
|
||||
]
|
||||
|
||||
const sketchExample = [
|
||||
{
|
||||
title: 'origianlDress',
|
||||
src: originalDress,
|
||||
isOriginal: true
|
||||
},
|
||||
{
|
||||
title: 'generatedSketch',
|
||||
src: generatedSketch
|
||||
}
|
||||
]
|
||||
|
||||
const modelExample = [
|
||||
{
|
||||
title: 'originalModel',
|
||||
src: originalModel,
|
||||
isOriginal: true
|
||||
},
|
||||
{
|
||||
title: 'generatedModel',
|
||||
src: generatedModel
|
||||
}
|
||||
]
|
||||
|
||||
const exampleList = {
|
||||
garmentExample,
|
||||
sketchExample,
|
||||
modelExample
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
const handleDownload = value => {
|
||||
const { title, src } = value
|
||||
downloadIamge(src, title)
|
||||
}
|
||||
|
||||
const handleCopy = async (value: string) => {
|
||||
try {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
await navigator.clipboard.writeText(value)
|
||||
message.success(t('ProductImg.CopySuccess'))
|
||||
} else {
|
||||
// 降级方案：使用传统的 document.execCommand 方法
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = value
|
||||
textArea.style.position = 'fixed'
|
||||
textArea.style.left = '-999999px'
|
||||
textArea.style.top = '-999999px'
|
||||
document.body.appendChild(textArea)
|
||||
textArea.focus()
|
||||
textArea.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
message.success(t('ProductImg.CopySuccess'))
|
||||
} catch (err) {
|
||||
message.error(t('ProductImg.CopyFailed'))
|
||||
}
|
||||
document.body.removeChild(textArea)
|
||||
}
|
||||
} catch (err) {
|
||||
message.error(t('ProductImg.CopyFailed'))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.prompt-modal {
|
||||
.title-container {
|
||||
.title {
|
||||
font-size: 3.5rem;
|
||||
color: #181818;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.example-content {
|
||||
margin-top: 4.3rem;
|
||||
padding-left: 7.4rem;
|
||||
display: flex;
|
||||
.example-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
&.garmentExample {
|
||||
margin-right: 9.6rem;
|
||||
}
|
||||
&.sketchExample {
|
||||
margin-right: 1.6rem;
|
||||
}
|
||||
.example-item {
|
||||
width: 20.3rem;
|
||||
height: 38.4rem;
|
||||
margin-left: -2px;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.download-icon {
|
||||
position: absolute;
|
||||
top: 0.77rem;
|
||||
right: 0.84rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prompt-list {
|
||||
margin-top: 3.5rem;
|
||||
display: flex;
|
||||
column-gap: 6.3rem;
|
||||
.prompt-item {
|
||||
height: 12.8rem;
|
||||
line-height: 2.3rem;
|
||||
padding: 1.8rem 3.5rem 1.8rem 2rem;
|
||||
color: #969696;
|
||||
font-size: 1.9rem;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0.8rem;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
// &:first-child{
|
||||
// width: 53.6rem;
|
||||
// }
|
||||
.copy-icon {
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.generalModel .ant-modal-body) {
|
||||
padding: 5rem 4.4rem 8rem 4.6rem;
|
||||
}
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
</style>
|
||||
@@ -150,7 +150,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="prompt-container">
|
||||
<div class="prompt-title">Prompt</div>
|
||||
<div class="prompt-title">{{ $t('ProductImg.Prompt') }}</div>
|
||||
<div class="input_border productImg_content_item_generate">
|
||||
<div class="input_box">
|
||||
<div class="input_box_btnBox">
|
||||
@@ -171,30 +171,8 @@
|
||||
</div>
|
||||
<div class="asistant-btn" @click="handleClickAssistBtn">
|
||||
<i class="fi fi-bs-magic-wand asistant-icon"></i>
|
||||
<span>Prompt Assist</span>
|
||||
<span>{{ $t('ProductImg.PromptAssit') }}</span>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="selectText"
|
||||
v-show="productimgMenu.value == 'ToProductImage' && speedData.value"
|
||||
>
|
||||
<a-tooltip
|
||||
v-for="(promptText, index) in promptTextList"
|
||||
:key="index"
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>{{ promptText }}</template>
|
||||
<div
|
||||
@click="
|
||||
() => {
|
||||
searchName[productimgMenu.value] = promptText
|
||||
ifMaximumLength()
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ promptText }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="productImg_content_item_generate_btn input_border">
|
||||
<div class="generage_btn_box">
|
||||
@@ -342,8 +320,8 @@
|
||||
}"
|
||||
:isProductimg="true"
|
||||
></scaleImage>
|
||||
<Prompt v-model:showModal="showPromptAssist" :promptList="promptTextList" />
|
||||
</div>
|
||||
<Prompt />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -374,6 +352,7 @@ import { useStore } from 'vuex'
|
||||
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 { List } from 'echarts'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
@@ -382,6 +361,7 @@ export default defineComponent({
|
||||
scaleImage,
|
||||
generalMenu,
|
||||
generalDrag,
|
||||
Prompt
|
||||
},
|
||||
props: {
|
||||
setTask: {
|
||||
@@ -1122,7 +1102,6 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
const showPromptAssist = ref(false)
|
||||
const showPrompt = ref(false)
|
||||
const handleClickAssistBtn = () => {
|
||||
showPromptAssist.value = true
|
||||
}
|
||||
@@ -1139,7 +1118,6 @@ export default defineComponent({
|
||||
RelightDirection,
|
||||
promptTextList,
|
||||
showPromptAssist,
|
||||
showPrompt,
|
||||
|
||||
setproduct,
|
||||
fileUploadChange,
|
||||
@@ -1330,7 +1308,7 @@ export default defineComponent({
|
||||
}
|
||||
> .head {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
// font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
> .text {
|
||||
display: inline-block;
|
||||
@@ -1544,18 +1522,7 @@ export default defineComponent({
|
||||
.designPage {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
.upload_file_item {
|
||||
// height: 13.4rem;
|
||||
// margin-top: 2rem;
|
||||
: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;
|
||||
|
||||
Reference in New Issue
Block a user