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>
|
||||
Reference in New Issue
Block a user