hanye-website/components/JobCard.vue

<template>
  <div 
    class="job-card group cursor-pointer"
    @click="handleClick"
  >
    <div class="relative p-8 bg-zinc-800/30 backdrop-blur-sm border border-zinc-700/30 rounded-2xl transition-all duration-700 hover:border-[#35F1FF]/50 hover:bg-zinc-800/50 hover:shadow-2xl hover:shadow-[#35F1FF]/10 hover:transform hover:scale-105">
      <!-- <div class="absolute inset-0 bg-gradient-to-br from-[#35F1FF]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 rounded-2xl"></div>
      <div class="absolute -top-2 -right-2 w-4 h-4 bg-[#35F1FF]/20 rounded-full animate-ping group-hover:animate-pulse"></div> -->
      
      <div class="relative">
        <!-- 职位标题 -->
        <h4 class="text-white text-xl font-semibold mb-4 line-clamp-2 group-hover:text-[#35F1FF] transition-colors duration-500">
          {{ job.name }}
        </h4>
        
        <!-- 职位信息 -->
        <div class="flex flex-wrap items-center gap-6 text-zinc-400 text-sm mb-6">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            {{ getLocationName(job.location) }}
          </span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 002 2M8 6V4h8V6M8 6v2a2 2 0 002 2h4a2 2 0 002-2V6"></path>
            </svg>
            {{ getWorkType(job.webSite) }}
          </span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            {{ formatDate(job.createTime) }}
          </span>
        </div>

        <!-- 工作职责 -->
        <div class="mb-6">
          <h5 class="text-white text-sm font-medium mb-3 flex items-center">
            <svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            {{ t('careers.PositionCard.job') }}
          </h5>
          <div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-3">
            {{ formatJobDescription(job.jobResponsibilities) }}
          </div>
        </div>

        <!-- 薪资福利 -->
        <div class="mb-6">
          <h5 class="text-white text-sm font-medium mb-3 flex items-center">
            <svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
            </svg>
            {{ t('careers.PositionCard.CB') }}
          </h5>
          <div class="text-zinc-300/80 text-sm leading-relaxed line-clamp-2">
            {{ formatBenefits(job.benefits) }}
          </div>
        </div>

        <!-- 工作时间 -->
        <div class="mb-6">
          <h5 class="text-white text-sm font-medium mb-3 flex items-center">
            <svg class="w-4 h-4 mr-2 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            {{ t('careers.PositionCard.workingHours') }}
          </h5>
          <div class="text-zinc-300/80 text-sm leading-relaxed">
            {{ formatWorkTime(job.workTime) }}
          </div>
        </div>

        <!-- 申请按钮 -->
        <div class="flex justify-between items-center pt-4 border-t border-zinc-700/30">
          <div class="text-xs text-zinc-500">
            {{ formatDate(job.updateTime) }} {{ t('careers.PositionCard.update') }}
          </div>
          <button 
            class="inline-flex items-center px-6 py-2 bg-[#35F1FF]/10 text-[#35F1FF] text-sm font-medium rounded-lg border border-[#35F1FF]/30 hover:bg-[#35F1FF]/20 hover:border-[#35F1FF]/50 transition-all duration-300 group-hover:scale-105"
            @click.stop="handleApply"
          >
            <span class="mr-2">{{ t('careers.PositionCard.JobDetails') }}</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 投递邮箱弹窗 -->
    <div v-if="showApplyModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click="closeModal">
      <div class="relative bg-zinc-900/95 backdrop-blur-md border border-zinc-700/50 rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" 
           :class="{ 'scale-100 opacity-100': showApplyModal }"
           @click.stop>
        <div class="absolute inset-0 bg-gradient-to-br from-[#35F1FF]/10 to-transparent rounded-2xl"></div>
        
        <div class="relative">
          <!-- 关闭按钮 -->
          <button @click="closeModal" class="absolute -top-2 -right-2 w-8 h-8 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-full flex items-center justify-center text-zinc-400 hover:text-white transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
          
          <!-- 标题 -->
          <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-[#35F1FF]/10 rounded-full mb-4">
              <svg class="w-8 h-8 text-[#35F1FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">{{ t('careers.jobs.button') }}</h3>
            <p class="text-zinc-400 text-sm">{{ t('contact.submit') }}</p>
          </div>
          
          <!-- 职位信息 -->
          <div class="bg-zinc-800/50 rounded-xl p-4 mb-6">
            <div class="text-sm text-zinc-400 mb-2">{{ t('careers.jobs.title') }}</div>
            <div class="text-white font-medium">{{ job.name }}</div>
            <div class="text-xs text-zinc-500 mt-1">ID: {{ job.id }}</div>
          </div>
          
          <!-- 邮箱信息 -->
          <div class="bg-zinc-800/50 rounded-xl p-4 mb-6">
            <div class="text-sm text-zinc-400 mb-2">{{ t('contact.email') }}</div>
            <div class="flex items-center justify-between">
              <div class="text-[#35F1FF] font-medium break-all">{{ job.email }}</div>
              <button @click="copyEmail" class="ml-3 px-3 py-1 bg-[#35F1FF]/10 text-[#35F1FF] text-xs rounded-lg hover:bg-[#35F1FF]/20 transition-colors flex-shrink-0">
                {{ copied ? t('common.copied') : t('common.copy') }}
              </button>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="flex gap-3">
            <button @click="closeModal" class="flex-1 px-4 py-2 bg-zinc-800/80 text-zinc-300 rounded-lg hover:bg-zinc-700/80 transition-colors">
              {{ t('common.close') }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Job } from '~/data/jobs'
import { locationMap, workTypeMap } from '~/data/jobs'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

/**
 * 组件属性
 */
interface Props {
  job: Job
}

const props = defineProps<Props>()

/**
 * 组件事件
 */
const emit = defineEmits<{
  click: [job: Job]
}>()

/**
 * 获取地点名称
 * @param location 地点编码
 * @returns 地点名称
 */
const getLocationName = (location: number): string => {
  return locationMap[location] || 'Other'
}

/**
 * 获取工作类型
 * @param webSite 工作类型编码
 * @returns 工作类型
 */
const getWorkType = (webSite: number): string => {
  // 假设 1 代表全职，其他值可以扩展
  return workTypeMap[webSite] || t('careers.workType.fullTime') 
}

/**
 * 格式化日期
 * @param dateString 日期字符串
 * @returns 格式化后的日期
 */
const formatDate = (dateString: string | undefined): string => {
  if (!dateString) return ''
  
  try {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  } catch {
    return dateString
  }
}

/**
 * 格式化工作描述
 * @param description 工作描述
 * @returns 格式化后的描述
 */
const formatJobDescription = (description: string): string => {
  if (!description) return ''
  
  // 将数字开头的项目转换为更易读的格式
  return description
    .replace(/(\d+\.)/g, '\n$1')
    .replace(/；/g, '；\n')
    .trim()
    .substring(0, 200) + (description.length > 200 ? '...' : '')
}

/**
 * 格式化福利待遇
 * @param benefits 福利待遇
 * @returns 格式化后的福利
 */
const formatBenefits = (benefits: string): string => {
  if (!benefits) return ''
  
  return benefits
    .replace(/(\d+\.)/g, '\n$1')
    .trim()
    .substring(0, 100) + (benefits.length > 100 ? '...' : '')
}

/**
 * 格式化工作时间
 * @param workTime 工作时间
 * @returns 格式化后的工作时间
 */
const formatWorkTime = (workTime: string): string => {
  if (!workTime) return ''
  
  return workTime
    .replace(/\\n/g, '\n')
    .replace(/(\d+\.)/g, '\n$1')
    .trim()
}

/**
 * 处理点击事件
 */
const handleClick = () => {
  emit('click', props.job)
}

/**
 * 模态框状态
 */
const showApplyModal = ref(false)
const copied = ref(false)

/**
 * 处理申请事件
 */
const handleApply = () => {
  showApplyModal.value = true
}

/**
 * 关闭模态框
 */
const closeModal = () => {
  showApplyModal.value = false
  copied.value = false
}

/**
 * 复制邮箱地址
 */
const copyEmail = async () => {
  try {
    await navigator.clipboard.writeText(props.job.email)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch {
    // 降级处理：使用传统方式复制
    const textArea = document.createElement('textarea')
    textArea.value = props.job.email
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  }
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}
</style>