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

<template>
  <el-dialog v-model="dialogVisible" :title="$t('modelGeneration.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>{{ $t('modelGeneration.femaleModel') }}</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]" hide-on-click-modal fit="cover" />
            <div v-else class="placeholder-image">
              <span>{{ $t('modelGeneration.pleaseSelect') }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧：男模特选择 -->
        <div class="model-section">
          <h2>{{ $t('modelGeneration.maleModel') }}</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]"  hide-on-click-modal fit="cover" />
            <div v-else class="placeholder-image">
              <span>{{ $t('modelGeneration.pleaseSelect') }}</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')">
            {{ $t('modelGeneration.femaleTab') }}
          </div>
          <div class="tab-item" :class="{ active: activeTab === 'male' }" @click="switchTab('male')">
            {{ $t('modelGeneration.maleTab') }}
          </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">{{ $t('modelGeneration.cancel') }}</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="!canConfirm">
          {{ $t('modelGeneration.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

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

// 定义组件的 props
interface Props {
  modelValue: boolean
  initialModels?: {
    female?: any
    male?: any
  }
  defaultActiveTab?: 'female' | 'male'
}

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)

// 本地缓存 key
const MODEL_SELECTION_CACHE_KEY = 'model_selection_cache'

// 从本地缓存读取
const loadModelSelectionFromCache = () => {
  try {
    const cache = localStorage.getItem(MODEL_SELECTION_CACHE_KEY)
    if (cache) {
      const parsed = JSON.parse(cache)
      if (parsed?.female) {
        selectedFemaleModel.value = parsed.female
      }
      if (parsed?.male) {
        selectedMaleModel.value = parsed.male
      }
    }
  } catch {}
}

// 写入本地缓存（只保存必要字段）
const saveModelSelectionToCache = () => {
  try {
    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
      } : 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
    }
    localStorage.setItem(MODEL_SELECTION_CACHE_KEY, JSON.stringify(payload))
  } catch {}
}

// 女模特列表
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
  }


  // 通过事件将数据发送给父组件
  saveModelSelectionToCache()
  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 })
    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) {
    ElMessage.error(i18n.global.t('modelGeneration.fetchFailed'))
  }
}

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

// 监听弹窗显示状态变化，初始化模特数据
watch(dialogVisible, (newValue) => {
  if (newValue) {
    fetchModelList()

    // 设置默认激活的标签页
    if (props.defaultActiveTab) {
      activeTab.value = props.defaultActiveTab
    } else {
      activeTab.value = 'female' // 默认女模特
    }

    // 初始化时接收父组件传递的模特数据
    if (props.initialModels) {

      if (props.initialModels.female) {
        selectedFemaleModel.value = props.initialModels.female
      }

      if (props.initialModels.male) {
        selectedMaleModel.value = props.initialModels.male
      }
    }

    // 如果父组件未传入，尝试读取本地缓存
    if (!props.initialModels || (!props.initialModels.female && !props.initialModels.male)) {
      loadModelSelectionFromCache()
    }
  }
}, { immediate: true })
</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>