feat: 高级工具转产品图 prompt assist弹窗内容修改

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

@@ -2,6 +2,7 @@
   <!-- <div ref="modalContainer"></div> -->
   <a-modal
     class="prompt-modal generalModel"
+    :class="{ design: isDesignPage }"
     v-model:visible="showModal"
     :footer="null"
     width="78%"
@@ -82,44 +83,102 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef, onMounted } from 'vue'
+import { ref, useTemplateRef, onMounted, computed } 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 maleSingleGarmentSketch from '@/assets/images/product/male_single_garment_sketch.png'
+import maleSingleGarmentResult from '@/assets/images/product/male_single_garment_result.png'
+import maleSingleModelSketch from '@/assets/images/product/male_single_garment_model_sketch.png'
+import maleSingleModelResult from '@/assets/images/product/male_single_garment_model_sketch.png'
+import femaleChildModelResult from '@/assets/images/product/single_female_child_model_result.png'
+import maleSingleChildSketch from '@/assets/images/product/single_male_child_model_sketch.png'
+import maleSingleChildResult from '@/assets/images/product/single_male_child_model_result.png'
+
 import { downloadIamge } from '@/tool/util'
 import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
 const { t, locale } = useI18n()
+const store = useStore()
 
 const props = defineProps<{
-  promptList: string[]
+  isDesignPage: boolean
 }>()
 
+const promptList = computed(() => {
+  const isFromDesignPage = props.source === 'design' || props.isDesignPage
+  const { ageGroup, httpType, sex } = store.state.Workspace.probjects
+  const isSingleDesign = httpType === 'SINGLE_DESIGN'
+  const isAdult = ageGroup === 'Adult'
+  const isFemale = sex === 'Female'
+
+  if (!isFromDesignPage) {
+    // 如果不是从design来的，返回两个提示词
+    return [t('ProductImg.UploadWithoutModel'), t('ProductImg.UploadWithModel')]
+  } else {
+    // 如果是从design来的
+    if (isSingleDesign) {
+      // SINGLE_DESIGN: 两个提示词
+      // 根据年龄和性别选择对应的提示词
+      let firstPrompt: string // 不带模特的提示词
+      let secondPrompt: string // 带模特的提示词
+
+      if (isAdult) {
+        // 成人
+        if (isFemale) {
+          // 成人女
+          firstPrompt = t('ProductImg.SingleAdultFemaleWithoutModel')
+          secondPrompt = t('ProductImg.SingleAdultFemaleWithModel')
+        } else {
+          // 成人男
+          firstPrompt = t('ProductImg.SingleAdultMaleWithoutModel')
+          secondPrompt = t('ProductImg.SingleAdultMaleWithModel')
+        }
+      } else {
+        // 儿童
+        if (isFemale) {
+          // 儿童女
+          firstPrompt = t('ProductImg.SingleChildFemaleWithoutModel')
+          secondPrompt = t('ProductImg.SingleChildFemaleWithModel')
+        } else {
+          // 儿童男
+          firstPrompt = t('ProductImg.SingleChildMaleWithoutModel')
+          secondPrompt = t('ProductImg.SingleChildMaleWithModel')
+        }
+      }
+
+      return [firstPrompt, secondPrompt]
+    }
+  }
+})
+
 const modalContainer = useTemplateRef('modalContainer')
 const showModal = defineModel<boolean>('showModal', { required: true })
 
 const garmentExample = [
   {
-    title: 'originalDress',
+    title: 'Original Dress',
     src: originalDress,
     isOriginal: true
   },
   {
-    title: 'generatedDress',
+    title: 'Generated Result',
     src: generatedDress
   }
 ]
 
 const sketchExample = [
   {
-    title: 'origianlDress',
+    title: 'Origianl Sketch',
     src: originalDress,
     isOriginal: true
   },
   {
-    title: 'generatedSketch',
+    title: 'Generated Sketch',
     src: generatedSketch
   }
 ]
@@ -136,11 +195,98 @@ const modelExample = [
   }
 ]
 
-const exampleList = {
-  garmentExample,
-  sketchExample,
-  modelExample
-}
+const femaleAdultGarment = [...garmentExample]
+const femaleAdultWithModel = [...modelExample]
+const maleAdultGarment = [
+  {
+    title: 'originalDress',
+    src: maleSingleGarmentSketch,
+    isOriginal: true
+  },
+  {
+    title: 'generated male sketch',
+    src: maleSingleGarmentResult
+  }
+]
+const maleAdultWithModel = [
+  {
+    title: 'original male model',
+    src: maleSingleModelSketch,
+    isOriginal: true
+  },
+  {
+    title: 'generated male model',
+    src: maleSingleModelResult
+  }
+]
+
+const childFemaleGarment = [...garmentExample]
+const childFemaleWithModel = [
+  {
+    title: 'Origianl Sketch',
+    src: originalDress,
+    isOriginal: true
+  },
+  {
+    title: 'Generated female girl Sketch',
+    src: femaleChildModelResult
+  }
+]
+const childMaleGarment = [...maleAdultGarment]
+const childMaleWithModel = [
+  {
+    title: 'original sketch',
+    src: maleSingleChildSketch,
+    isOriginal: true
+  },
+  {
+    title: 'generate child male model',
+    src: maleSingleChildResult
+  }
+]
+
+const exampleList = computed(() => {
+  let obj = {}
+  if (!props.isDesignPage) {
+    obj = {
+      garmentExample,
+      sketchExample,
+      modelExample
+    }
+  } else {
+    const { ageGroup, httpType, sex } = store.state.Workspace.probjects
+    const isSingleDesign = httpType === 'SINGLE_DESIGN'
+    if (!isSingleDesign) return {}
+    const isAdult = ageGroup === 'Adult'
+    const isFemale = sex === 'Female'
+    if (isAdult) {
+      if (isFemale) {
+        obj = {
+          femaleAdultGarment,
+          femaleAdultWithModel
+        }
+      } else {
+        obj = {
+          maleAdultGarment,
+          maleAdultWithModel
+        }
+      }
+    } else {
+      if (isFemale) {
+        obj = {
+          childFemaleGarment,
+          childFemaleWithModel
+        }
+      } else {
+        obj = {
+          childMaleGarment,
+          childMaleWithModel
+        }
+      }
+    }
+  }
+  return obj
+})
 
 const handleClose = () => {
   showModal.value = false
@@ -200,6 +346,7 @@ const handleCopy = async (value: string) => {
     justify-content: space-between;
     overflow-x: auto;
     overflow-y: hidden;
+
     .example-wrapper {
       display: flex;
       gap: 0;
@@ -227,6 +374,7 @@ const handleCopy = async (value: string) => {
       }
     }
   }
+
   .prompt-list {
     margin-top: 3.5rem;
     display: flex;
@@ -252,6 +400,18 @@ const handleCopy = async (value: string) => {
       }
     }
   }
+  &.design {
+    .example-content {
+      padding-left: 0;
+      justify-content: space-around;
+    }
+    .prompt-list {
+      justify-content: space-around;
+      .prompt-item {
+        width: 40%;
+      }
+    }
+  }
 }
 :deep(.generalModel .ant-modal-body) {
   padding: 5rem 4.4rem 8rem 4.6rem;