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>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue'
import { useScrollAnimation } from '../composables/useScrollAnimation'

// 定义类型
interface Profile {
  id: string
  name: string
  avatar: string
  location: string
  bio: string
  contact: {
    email: string
    wechat: string
  }
  techStack: string[]
}

const profile = ref<Profile>({
  id: '',
  name: '年糕崽崽',
  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao&backgroundColor=b6e3f4',
  location: '中国 · 浙江杭州',
  bio: '嗨！我是年糕崽崽，一名热衷于探索数字边界的前端架构师。我的职业生涯始于对像素级完美的执念。目前，我专注于高性能 B 端应用的体验升级。',
  contact: {
    email: 'hello@niangao.dev',
    wechat: 'Niangao_Dev'
  },
  techStack: ['Vue 3', 'React', 'TypeScript', 'Three.js', 'Golang', 'Tailwind CSS', 'Vite', 'Gin']
})

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

// 模拟API调用，实际项目中应替换为真实API
const fetchProfileData = async () => {
  loading.value = true
  error.value = ''
  try {
    // 实际项目中应调用真实API
    // const response = await fetch(`${API_BASE}/profile`)
    // const data = await response.json()
    // profile.value = data
    
    // 使用模拟数据作为备选
    profile.value = {
      id: '1',
      name: '年糕崽崽',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=NianGao&backgroundColor=b6e3f4',
      location: '中国 · 浙江杭州',
      bio: '嗨！我是年糕崽崽，一名热衷于探索数字边界的前端架构师。我的职业生涯始于对像素级完美的执念。目前，我专注于高性能 B 端应用的体验升级。',
      contact: {
        email: 'hello@niangao.dev',
        wechat: 'Niangao_Dev'
      },
      techStack: ['Vue 3', 'React', 'TypeScript', 'Three.js', 'Golang', 'Tailwind CSS', 'Vite', 'Gin']
    }
  } catch (err) {
    console.error('Error fetching profile data:', err)
    error.value = '获取个人资料失败，请稍后重试'
    // 保持原有静态数据
  } finally {
    loading.value = false
  }
}

onBeforeMount(() => {
  fetchProfileData()
})

onMounted(() => {
  // 启用滚动动画
  useScrollAnimation()

  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }
})
</script>