nl-blogs/client/src/pages/About.vue

<template>
  <section id="about" class="page-section block animate-slide-down">
    <div class="max-w-6xl mx-auto pt-32 px-6 pb-20">
      <!-- Loading state -->
      <div v-if="loading" class="flex justify-center items-center h-64">
        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
      </div>
      
      <!-- Error state -->
      <div v-else-if="error" class="text-center text-red-500 py-20">
        <p class="mb-4">{{ error }}</p>
        <button @click="fetchProfileData" class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors">
          重试
        </button>
      </div>
      
      <!-- Profile content -->
      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-12">
        <div class="space-y-8">
          <div>
            <span class="text-art-accent font-mono text-sm tracking-widest uppercase">个人档案</span>
            <h2 class="font-serif text-5xl italic text-white mt-2 mb-6">关于我</h2>
          </div>
          <div class="flex items-center gap-6">
            <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-art-accent/50 shadow-2xl">
              <img 
                :src="profile.avatar" 
                alt="Avatar" 
                class="w-full h-full object-cover"
              >
            </div>
            <div class="space-y-2">
              <h3 class="text-2xl font-bold text-white">{{ profile.name }}</h3>
              <div class="flex items-center gap-2 text-sm text-art-muted">
                <i data-lucide="map-pin" class="w-4 h-4 text-art-accent"></i>
                <span>{{ profile.location }}</span>
              </div>
            </div>
          </div>
          <div class="prose prose-invert text-art-muted font-light leading-relaxed">
            <p v-html="profile.bio"></p>
          </div>
          <div class="bg-white/5 border border-white/5 p-6 rounded-xl backdrop-blur-sm mt-6">
            <h4 class="text-white font-bold mb-4 flex items-center gap-2">
              <i data-lucide="contact" class="w-4 h-4 text-art-accent"></i> 联系方式
            </h4>
            <div class="space-y-3 text-sm">
              <a :href="'mailto:' + profile.contact.email" class="flex items-center gap-2 text-art-muted hover:text-white transition-colors">
                <i data-lucide="mail" class="w-4 h-4 text-art-accent"></i>
                <span>{{ profile.contact.email }}</span>
              </a>
              <div class="flex items-center gap-2 text-sm text-art-muted">
                <i data-lucide="message-circle" class="w-4 h-4 text-art-accent"></i>
                <span>WeChat: {{ profile.contact.wechat }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="space-y-8">
          <div class="bg-white/5 border border-white/5 p-8 rounded-2xl backdrop-blur-sm">
            <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
              <i data-lucide="cpu" class="w-5 h-5 text-art-accent"></i> 技术栈
            </h3>
            <div class="flex flex-wrap gap-2 mb-10">
              <span 
                v-for="(tech, index) in profile.techStack" 
                :key="index"
                class="px-3 py-1 bg-white/5 rounded-full text-xs text-white/80 border border-white/10"
              >
                {{ tech }}
              </span>
            </div>

            <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
              <i data-lucide="briefcase" class="w-5 h-5 text-art-accent"></i> 经历
            </h3>
            <div class="space-y-6 relative border-l border-white/10 ml-2 pl-6">
              <div v-for="(exp, index) in profile.experiences" :key="index" class="relative">
                <div class="absolute -left-[29px] top-1.5 w-3 h-3 rounded-full" :class="index === 0 ? 'bg-art-accent' : 'bg-white/20'"></div>
                <div class="text-sm font-mono mb-1" :class="index === 0 ? 'text-art-accent' : 'text-art-muted'">{{ exp.year }}</div>
                <div class="text-white font-bold">{{ exp.role }}</div>
                <div class="text-xs text-art-muted">{{ exp.company }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onUpdated, nextTick } from 'vue'
import { useScrollAnimation } from '../composables/useScrollAnimation'
import { fetchAboutProfile } from '../services/api'

// 定义类型
interface Experience {
  year: string
  role: string
  company: string
}

interface Profile {
  id: string
  name: string
  avatar: string
  location: string
  bio: string
  contact: {
    email: string
    wechat: string
  }
  techStack: string[]
  experiences: Experience[]
}

const profile = ref<Profile>({
  id: '',
  name: '',
  avatar: '',
  location: '',
  bio: '',
  contact: {
    email: '',
    wechat: ''
  },
  techStack: [],
  experiences: []
})

const loading = ref(false)
const error = ref('')

const { initObserver } = useScrollAnimation()

const refreshIcons = () => {
  if ((window as any).lucide) {
    (window as any).lucide.createIcons()
  }
}

const fetchProfileData = async () => {
  loading.value = true
  error.value = ''
  try {
    const data = await fetchAboutProfile()
    profile.value = {
      id: String(data.id),
      name: data.name,
      avatar: data.avatar,
      location: data.location,
      bio: data.bio,
      contact: {
        email: data.email,
        wechat: data.wechat
      },
      // 确保 techStack 和 experiences 始终是数组
      techStack: Array.isArray(data.techStack) ? data.techStack : [],
      experiences: Array.isArray(data.experiences) ? data.experiences : []
    }
  } catch (err) {
    console.error('Error fetching profile data:', err)
    error.value = '获取个人资料失败，请稍后重试'
  } finally {
    loading.value = false
    nextTick(() => {
      initObserver()
      refreshIcons()
    })
  }
}

onMounted(() => {
  fetchProfileData()
  refreshIcons()
})

onUpdated(() => {
  refreshIcons()
})
</script>