From 8e28549ad5a01eef00afbf6b21cc0f569b7a5f9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Thu, 15 Jan 2026 15:15:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Header.vue     | 18 +++++++++++-----
 client/src/components/MobileMenu.vue | 10 +++++++++
 client/src/pages/Home.vue            |  2 +-
 client/src/pages/Services.vue        | 31 ++++++++++++++++++----------
 4 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index 3067c87..fc514e3 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUpdated, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
 const router = useRouter()
@@ -97,18 +97,26 @@ const updateActiveNav = () => {
   else if (path === '/about') activeNav.value = 'about'
 }
 
+const refreshIcons = () => {
+  if ((window as any).lucide) {
+    (window as any).lucide.createIcons()
+  }
+}
+
 onMounted(() => {
   updateActiveNav()
-  // 初始化Lucide图标
-  if (window.lucide) {
-    window.lucide.createIcons()
-  }
+  refreshIcons()
+})
+
+onUpdated(() => {
+  refreshIcons()
 })
 
 watch(
   () => route.path,
   () => {
     updateActiveNav()
+    nextTick(refreshIcons)
   }
 )
 
diff --git a/client/src/components/MobileMenu.vue b/client/src/components/MobileMenu.vue
index 77c1665..a39dbb4 100644
--- a/client/src/components/MobileMenu.vue
+++ b/client/src/components/MobileMenu.vue
@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import { onMounted, onUpdated } from 'vue'
 
 const router = useRouter()
 
@@ -28,4 +29,13 @@ const navigate = (target: string) => {
   router.push(target)
   toggleMobileMenu()
 }
+
+const refreshIcons = () => {
+  if ((window as any).lucide) {
+    (window as any).lucide.createIcons()
+  }
+}
+
+onMounted(refreshIcons)
+onUpdated(refreshIcons)
 </script>
\ No newline at end of file
diff --git a/client/src/pages/Home.vue b/client/src/pages/Home.vue
index 775f564..17db185 100644
--- a/client/src/pages/Home.vue
+++ b/client/src/pages/Home.vue
@@ -88,7 +88,7 @@
         </div>
         <div 
           class="md:col-span-2 art-card rounded-2xl p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 group cursor-pointer bg-gradient-to-r from-art-surface to-transparent"
-          @click="$router.push('/about')"
+          @click="$router.push('/services')"
         >
           <div class="space-y-4">
             <h3 class="font-serif text-3xl text-white">需要独特的前端架构？</h3>
diff --git a/client/src/pages/Services.vue b/client/src/pages/Services.vue
index a1ee6dc..b64a072 100644
--- a/client/src/pages/Services.vue
+++ b/client/src/pages/Services.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from 'vue'
+import { ref, onMounted, onBeforeMount, onUpdated, nextTick } from 'vue'
 import { useScrollAnimation } from '../composables/useScrollAnimation'
 
 // 定义类型
@@ -176,6 +176,12 @@ const partners = ref<Partner[]>([])
 const loading = ref(false)
 const error = ref('')
 
+const refreshIcons = () => {
+  if ((window as any).lucide) {
+    (window as any).lucide.createIcons()
+  }
+}
+
 // 模拟API调用，实际项目中应替换为真实API
 const fetchServicesData = async () => {
   loading.value = true
@@ -220,6 +226,7 @@ const fetchServicesData = async () => {
     ]
   } finally {
     loading.value = false
+    nextTick(refreshIcons)
   }
 }
 
@@ -237,8 +244,8 @@ const getPartnerFontClass = (name: string): string => {
 
 const openInquiry = () => {
   // 使用全局函数打开咨询模态框
-  if (window.openInquiry) {
-    window.openInquiry()
+  if ((window as any).openInquiry) {
+    (window as any).openInquiry()
   }
 }
 
@@ -253,14 +260,12 @@ onMounted(() => {
   initObserver()
 
   // 初始化Lucide图标
-  if (window.lucide) {
-    window.lucide.createIcons()
-  }
+  refreshIcons()
   
   // 添加鼠标倾斜效果
   const tiltCards = document.querySelectorAll('.tilt-card')
   tiltCards.forEach(card => {
-    card.addEventListener('mousemove', (e) => {
+    card.addEventListener('mousemove', (e: any) => {
       const cardRect = card.getBoundingClientRect()
       const x = e.clientX - cardRect.left
       const y = e.clientY - cardRect.top
@@ -268,18 +273,22 @@ onMounted(() => {
       const xPercent = (x / cardRect.width) * 100
       const yPercent = (y / cardRect.height) * 100
       
-      card.style.setProperty('--mouse-x', `${xPercent}%`)
-      card.style.setProperty('--mouse-y', `${yPercent}%`)
+      ;(card as HTMLElement).style.setProperty('--mouse-x', `${xPercent}%`)
+      ;(card as HTMLElement).style.setProperty('--mouse-y', `${yPercent}%`)
 
       // 3D Rotation
       const rotateX = (y / cardRect.height - 0.5) * 20
       const rotateY = (x / cardRect.width - 0.5) * -20
-      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+      ;(card as HTMLElement).style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
     })
 
     card.addEventListener('mouseleave', () => {
-      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'
+      ;(card as HTMLElement).style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'
     })
   })
 })
+
+onUpdated(() => {
+  refreshIcons()
+})
 </script>
\ No newline at end of file