数据结构优化

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>