aida_front/src/component/home/tools/toProduct/Prompt.vue

<template>
  <!-- <div ref="modalContainer"></div> -->
  <a-modal
    class="prompt-modal generalModel"
    v-model:visible="showModal"
    :footer="null"
    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, onMounted } 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()

const props = 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;
    justify-content: space-between;
    overflow-x: auto;
    overflow-y: hidden;
    .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>