hanye-website/components/JobCard.vue

<template>
  <div 
    class="job-card group"
  >
    <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="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="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" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="4" y="2" width="16" height="20" rx="2" ry="2" />
              <line x1="8" y1="9" x2="16" y2="9" />
              <line x1="8" y1="13" x2="16" y2="13" />
            </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" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 2v20M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H7"></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" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </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>
          <nuxt-link 
            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"
            :to="`${homepagePath}/careers/${job.id}`"
          >
            <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>
          </nuxt-link>
        </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, locale } = useI18n()

const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

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

const props = defineProps<Props>()

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

/**
 * 格式化日期
 * @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
  }
}

/**
 * 移除字符串中的HTML标签
 * @param htmlString 包含HTML的字符串
 * @returns 纯文本字符串
 */
const stripHtml = (htmlString: string): string => {
  if (!htmlString) return ''
  return htmlString.replace(/<\/?[^>]+(>|$)/g, "")
}

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

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

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

<style scoped>

.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>