初始化

client/src/pages/About.vue

@@ -0,0 +1,159 @@
+<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>