CameraMachine/frontend/src/components/ModelGeneration/index.vue

<template>
  <el-dialog v-model="dialogVisible" title="选择模特" width="1000px" :close-on-click-modal="false"
    :close-on-press-escape="false"  custom-class="model-generation-dialog" @close="handleClose">
    <div class="model-generation-container">
      <!-- 主要内容区域 -->
      <div class="main-content">

        <!-- 左侧：女模特选择 -->
        <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" />
            <div v-else class="placeholder-image">
              <span>请在下方列表选择</span>
            </div>
          </div>
        </div>

        <!-- 右侧：男模特选择 -->
        <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" />
            <div v-else class="placeholder-image">
              <span>请在下方列表选择</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部模特列表区域 -->
      <div class="model-list-section">
        <!-- 标签页切换 -->
        <div class="tabs-container">
          <div class="tab-item" :class="{ active: activeTab === 'female' }" @click="switchTab('female')">
            女模特
          </div>
          <div class="tab-item" :class="{ active: activeTab === 'male' }" @click="switchTab('male')">
            男模特
          </div>
        </div>

        <!-- 模特网格列表 -->
        <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" />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="!canConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { getShoesModelTemplateApi } from '@/apis/other'

// 定义组件的 props
interface Props {
  modelValue: boolean
}

const props = defineProps<Props>()

// 定义组件的事件
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  confirm: [models: { female: any; male: any }]
  cancel: []
}>()

// Dialog 显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 模特数据类型定义
interface ModelData {
  id: number
  name: string
  image_url: string
  gender: 'male' | 'female'
  keywords: string
  status: number
}

// 当前激活的标签页
const activeTab = ref<'female' | 'male'>('female')

// 选中的女模特
const selectedFemaleModel = ref<ModelData | null>(null)

// 选中的男模特
const selectedMaleModel = ref<ModelData | null>(null)

// 女模特列表
const femaleModels = ref<ModelData[]>([])

// 男模特列表
const maleModels = ref<ModelData[]>([])

// 当前显示的模特列表
const currentModelList = computed(() => {
  return activeTab.value === 'female' ? femaleModels.value : maleModels.value
})

// 是否可以确认选择
const canConfirm = computed(() => {
  return selectedFemaleModel.value || selectedMaleModel.value
})

// 选择模特
const selectModel = (model: ModelData) => {
  if (model.keywords === '女性') {
    selectedFemaleModel.value = model
  } else {
    selectedMaleModel.value = model
  }
}

// 判断模特是否被选中
const isModelSelected = (model: ModelData) => {
  if (model.keywords === '女性') {
    return selectedFemaleModel.value?.id === model.id
  } else {
    return selectedMaleModel.value?.id === model.id
  }
}

// 切换标签页并滚动到顶部
const switchTab = (tab: 'female' | 'male') => {
  activeTab.value = tab
  // 使用 nextTick 确保 DOM 更新后再滚动
  nextTick(() => {
    const modelGrid = document.querySelector('.model-grid') as HTMLElement
    if (modelGrid) {
      modelGrid.scrollTop = 0
    }
  })
}

// 确认选择
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
    } : 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
    } : null
  }

  console.log('选中的模特:', selectedModels)

  // 通过事件将数据发送给父组件
  emit('confirm', selectedModels)
  dialogVisible.value = false
}

// 取消选择
const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}

// 关闭弹窗
const handleClose = () => {
  emit('cancel')
}

// 获取模特列表
const fetchModelList = async () => {
  try {
    const response = await getShoesModelTemplateApi({ status: 2 })
    console.log(response)
    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)
    }
  } catch (error) {
    console.error('获取模特列表失败:', error)
    ElMessage.error('获取模特列表失败')
  }
}

// 预加载图片
const preloadImages = (models: ModelData[]) => {
  models.forEach(model => {
    if (model.image_url) {
      const img = new Image()
      img.src = model.image_url
    }
  })
}

// 组件挂载时的初始化
onMounted(() => {
  console.log('模特生成页面已加载')
  fetchModelList()
})
</script>

<style lang="scss" scoped>
.model-generation-container {
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.page-header {
  text-align: center;
  padding: 20px 0;
  background: #ffffff;
  border-bottom: 1px solid #e4e7ed;

  h1 {
    color: #303133;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
  }
}

.main-content {
  display: flex;
  gap: 15px;
  padding: 15px;
  position: relative;
  max-width: 50%;
  margin: 0 auto;
}

.model-section {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;

  h2 {
    color: #303133;
    margin: 0;
    padding: 8px;
    font-size: 13px;
    font-weight: 550;
    text-align: center;
  }
}

.model-display {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f9fa;
  border: 2px solid #e4e7ed;
  border-radius: 4px;

  .selected-model-image {
    width: 100%;
    height: 100%;

    :deep(.el-image__inner) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .placeholder-image {
    color: #c0c4cc;
    font-size: 11px;
    text-align: center;

    span {
      color: #c0c4cc;
      display: block;
      line-height: 1.2;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px;
}



.model-list-section {
  margin: 2px 0px 0px 0;
  overflow: hidden;
}

.tabs-container {
  display: flex;
  /* background: #f8f9fa; */
  border-bottom: 1px solid #e4e7ed;
  align-items: center;
  justify-content: center;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 550;
  color: #606266;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  background: transparent;

  &:hover {
    color: #409eff;

  }

  &.active {
    color: #409eff;
    border-bottom-color: #409eff;
  }
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}

.model-item {
  aspect-ratio: 1;
  border: 1px solid #e4e7ed;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;

  &:hover {
    border-color: #409eff;
    transform: scale(1.01);
  }

  &.selected {
    border-color: #409eff;
    border-width: 2px;
    box-shadow: 0 0 0 1px #409eff;
  }

  .model-thumbnail {
    width: 100%;
    height: 100%;

    :deep(.el-image__inner) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :deep(.el-image__placeholder) {
      background: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c0c4cc;
      font-size: 12px;
    }

    :deep(.el-image__error) {
      background: #fef0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f56c6c;
      font-size: 12px;
    }
  }
}

// 滚动条样式
.model-grid::-webkit-scrollbar {
  width: 6px;
}

.model-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.model-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.model-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

// 响应式设计
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .model-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 15px;
  }

  .confirm-button-container {
    position: static;
    text-align: center;
    margin-top: 20px;
  }

  .model-list-section {
    margin: 0 20px 20px;
  }
}
</style>

<style lang="scss">
.model-generation-dialog {
  .el-dialog__body {
    padding: 0;
    background: #EAECED;
  }

 .el-dialog__footer {
    padding: 0;
    border-top: 1px solid #e4e7ed;
    background: #fafafa;
  }

  .el-dialog {
    border-radius: 8px;
  }

  .el-dialog__header {
  }

  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
}</style>