refactor(frontend): 重构模特选择组件

- 更新 API调用以获取模特列表
- 修改模特数据结构，移除不必要的字段
- 优化图片加载和预处理逻辑
- 调整组件样式和布局

frontend/src/apis/other.ts

@@ -8,8 +8,8 @@ export async function getCompanyTemplatesApi(){
 }
 
 // 获取模特列表
-export async function getShoesModelTemplateApi(params: { status: number }){
-    return GET('/api/ai_image/main/shoes_model_template', params)
+export async function getShoesModelTemplateApi(params: { face_type: number }){
+    return GET('/api/ai_image/clothing_config/model_template_with_scene', { site: 1, platform: '', face_type: params.face_type })
 }
 
 // AI 扩写相机场景提示词

frontend/src/components/ModelGeneration/index.vue

@@ -9,8 +9,8 @@
         <div class="model-section">
           <h2>女模特</h2>
           <div class="model-display">
-            <el-image v-if="selectedFemaleModel" :src="selectedFemaleModel.image_url" :alt="selectedFemaleModel.name"
-              class="selected-model-image" lazy :preview-src-list="[selectedFemaleModel.image_url]" fit="cover" />
+            <el-image v-if="selectedFemaleModel" :src="selectedFemaleModel.image" :alt="'女模特'"
+              class="selected-model-image" lazy :preview-src-list="[selectedFemaleModel.image]" fit="cover" />
             <div v-else class="placeholder-image">
               <span>请在下方列表选择</span>
             </div>
@@ -21,8 +21,8 @@
         <div class="model-section">
           <h2>男模特</h2>
           <div class="model-display">
-            <el-image v-if="selectedMaleModel" :src="selectedMaleModel.image_url" :alt="selectedMaleModel.name"
-              class="selected-model-image" lazy :preview-src-list="[selectedMaleModel.image_url]" fit="cover" />
+            <el-image v-if="selectedMaleModel" :src="selectedMaleModel.image" :alt="'男模特'"
+              class="selected-model-image" lazy :preview-src-list="[selectedMaleModel.image]" fit="cover" />
             <div v-else class="placeholder-image">
               <span>请在下方列表选择</span>
             </div>
@@ -46,7 +46,7 @@
         <div class="model-grid">
           <div v-for="model in currentModelList" :key="model.id" class="model-item"
             :class="{ selected: isModelSelected(model) }" @click="selectModel(model)">
-            <el-image :src="model.image_url" :alt="model.name" class="model-thumbnail" lazy fit="cover" />
+            <el-image :src="model.image" :alt="'模特'" class="model-thumbnail" lazy fit="cover" />
           </div>
         </div>
       </div>
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { getShoesModelTemplateApi } from '@/apis/other'
 
@@ -95,11 +95,7 @@ const dialogVisible = computed({
 // 模特数据类型定义
 interface ModelData {
   id: number
-  name: string
-  image_url: string
-  gender: 'male' | 'female'
-  keywords: string
-  status: number
+  image: string
 }
 
 // 当前激活的标签页
@@ -136,19 +132,11 @@ const saveModelSelectionToCache = () => {
     const payload = {
       female: selectedFemaleModel.value ? {
         id: selectedFemaleModel.value.id,
-        name: selectedFemaleModel.value.name,
-        image_url: selectedFemaleModel.value.image_url,
-        gender: selectedFemaleModel.value.gender,
-        keywords: selectedFemaleModel.value.keywords,
-        status: selectedFemaleModel.value.status
+        image: selectedFemaleModel.value.image
       } : null,
       male: selectedMaleModel.value ? {
         id: selectedMaleModel.value.id,
-        name: selectedMaleModel.value.name,
-        image_url: selectedMaleModel.value.image_url,
-        gender: selectedMaleModel.value.gender,
-        keywords: selectedMaleModel.value.keywords,
-        status: selectedMaleModel.value.status
+        image: selectedMaleModel.value.image
       } : null
     }
     localStorage.setItem(MODEL_SELECTION_CACHE_KEY, JSON.stringify(payload))
@@ -173,7 +161,7 @@ const canConfirm = computed(() => {
 
 // 选择模特
 const selectModel = (model: ModelData) => {
-  if (model.keywords === '女性') {
+  if (activeTab.value === 'female') {
     selectedFemaleModel.value = model
   } else {
     selectedMaleModel.value = model
@@ -182,7 +170,7 @@ const selectModel = (model: ModelData) => {
 
 // 判断模特是否被选中
 const isModelSelected = (model: ModelData) => {
-  if (model.keywords === '女性') {
+  if (activeTab.value === 'female') {
     return selectedFemaleModel.value?.id === model.id
   } else {
     return selectedMaleModel.value?.id === model.id
@@ -207,23 +195,14 @@ const handleConfirm = () => {
   const selectedModels = {
     female: selectedFemaleModel.value ? {
       id: selectedFemaleModel.value.id,
-      name: selectedFemaleModel.value.name,
-      image_url: selectedFemaleModel.value.image_url,
-      gender: selectedFemaleModel.value.gender,
-      keywords: selectedFemaleModel.value.keywords,
-      status: selectedFemaleModel.value.status
+      image: selectedFemaleModel.value.image
     } : null,
     male: selectedMaleModel.value ? {
       id: selectedMaleModel.value.id,
-      name: selectedMaleModel.value.name,
-      image_url: selectedMaleModel.value.image_url,
-      gender: selectedMaleModel.value.gender,
-      keywords: selectedMaleModel.value.keywords,
-      status: selectedMaleModel.value.status
+      image: selectedMaleModel.value.image
     } : null
   }
 
-
   // 通过事件将数据发送给父组件
   saveModelSelectionToCache()
   emit('confirm', selectedModels)
@@ -244,18 +223,31 @@ const handleClose = () => {
 // 获取模特列表
 const fetchModelList = async () => {
   try {
-    const response = await getShoesModelTemplateApi({ status: 2 })
-    if (response && response.data) {
-      // 根据性别分类模特
-      femaleModels.value = response.data.filter((model: ModelData) => model.keywords === '女性')
-      maleModels.value = response.data.filter((model: ModelData) => model.keywords === '男性')
-
-      // 预加载前几个图片以提高性能
-      setTimeout(() => {
-        preloadImages(femaleModels.value.slice(0, 10))
-        preloadImages(maleModels.value.slice(0, 10))
-      }, 100)
+    // 获取女模特列表 (face_type = 0)
+    const femaleResponse = await getShoesModelTemplateApi({ face_type: 0 })
+    if (femaleResponse && femaleResponse.data && femaleResponse.data.scene_vk) {
+      // 将API返回的key字段映射为id字段
+      femaleModels.value = femaleResponse.data.scene_vk.map((item: any) => ({
+        id: item.key,
+        image: item.image
+      }))
+    }
+
+    // 获取男模特列表 (face_type = 1)
+    const maleResponse = await getShoesModelTemplateApi({ face_type: 1 })
+    if (maleResponse && maleResponse.data && maleResponse.data.scene_vk) {
+      // 将API返回的key字段映射为id字段
+      maleModels.value = maleResponse.data.scene_vk.map((item: any) => ({
+        id: item.key,
+        image: item.image
+      }))
     }
+
+    // 预加载前几个图片以提高性能
+    setTimeout(() => {
+      preloadImages(femaleModels.value.slice(0, 10))
+      preloadImages(maleModels.value.slice(0, 10))
+    }, 100)
   } catch (error) {
     ElMessage.error('获取模特列表失败')
   }
@@ -264,9 +256,9 @@ const fetchModelList = async () => {
 // 预加载图片
 const preloadImages = (models: ModelData[]) => {
   models.forEach(model => {
-    if (model.image_url) {
+    if (model.image) {
       const img = new Image()
-      img.src = model.image_url
+      img.src = model.image
     }
   })
 }
@@ -541,6 +533,7 @@ watch(dialogVisible, (newValue) => {
   }
 
   .el-dialog__header {
+    padding: 20px 20px 0;
   }
 
   .el-dialog__title {