数据结构优化

client/src/components/Header.vue

@@ -62,9 +62,9 @@
         </button>
       </nav>
       <div class="hidden md:flex items-center gap-4">
-        <a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
+        <a href="#" class="text-art-muted hover:text-white transition-colors"><Icon name="github" :size="20" /></a>
         <a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
-          <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
+          <Icon name="layout-dashboard" :size="20" />
         </a>
         <button 
           v-if="visibleMenus.includes('services')"
@@ -75,7 +75,7 @@
         </button>
       </div>
       <button class="md:hidden text-white" @click="toggleMobileMenu">
-        <i data-lucide="menu" class="w-6 h-6"></i>
+        <Icon name="menu" :size="24" />
       </button>
     </div>
   </header>
@@ -85,6 +85,7 @@
 import { ref, onMounted, onUpdated, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { getPublicSettings } from '../services/api'
+import Icon from './Icon.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -122,11 +123,7 @@ const updateActiveNav = () => {
   else if (path === '/about') activeNav.value = 'about'
 }
 
-const refreshIcons = () => {
-  if ((window as any).lucide) {
-    (window as any).lucide.createIcons()
-  }
-}
+// Icons are now handled by Vue components
 
 // 获取网站配置
 const loadSiteSettings = async () => {
@@ -157,19 +154,13 @@ const loadSiteSettings = async () => {
 
 onMounted(() => {
   updateActiveNav()
-  refreshIcons()
   loadSiteSettings()
 })
 
-onUpdated(() => {
-  refreshIcons()
-})
-
 watch(
   () => route.path,
   () => {
     updateActiveNav()
-    nextTick(refreshIcons)
   }
 )
 

client/src/components/Icon.vue

@@ -1,40 +1,38 @@
 <template>
-  <i 
-    :data-lucide="name" 
+  <component 
+    :is="iconComponent" 
     :class="className" 
     :style="style"
-    ref="iconRef"
-  ></i>
+    :size="size"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { computed } from 'vue'
+import * as LucideIcons from 'lucide-vue-next'
 
 interface Props {
   name: string
   className?: string
   style?: Record<string, any>
+  size?: number | string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   className: '',
-  style: () => ({})
+  style: () => ({}),
+  size: 24
 })
 
-const iconRef = ref<HTMLElement | null>(null)
-
-const updateIcon = () => {
-  if (window.lucide && iconRef.value) {
-    // 重新创建图标
-    window.lucide.createIcons()
-  }
+// 将kebab-case转换为PascalCase，例如 arrow-left -> ArrowLeft
+const toPascalCase = (str: string) => {
+  return str.split('-').map(word => 
+    word.charAt(0).toUpperCase() + word.slice(1)
+  ).join('')
 }
 
-onMounted(() => {
-  updateIcon()
-})
-
-watch(() => props.name, () => {
-  updateIcon()
+const iconComponent = computed(() => {
+  const iconName = toPascalCase(props.name) as keyof typeof LucideIcons
+  return LucideIcons[iconName] || LucideIcons.AlertCircle
 })
 </script>