左侧导航栏修复正常

app/components/content/ButtonLink.vue

@@ -0,0 +1,22 @@
+<template>
+  <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
+    <UButton :variant="variant" :size="size">
+      <Icon v-if="leftIcon" :name="leftIcon" class="mr-1" />
+      <ContentSlot unwrap="p" />
+      <Icon v-if="rightIcon" :name="rightIcon" class="ml-1" />
+    </UButton>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  leftIcon?: string;
+  rightIcon?: string;
+  to?: string;
+  href?: string;
+  target?: string;
+  blank?: boolean;
+}>();
+</script>

app/components/content/SmartIcon.vue

@@ -0,0 +1,38 @@
+<template>
+  <!-- Iconify Icons -->
+  <Icon v-if="isIconName(name)" :name="name" :size="size" />
+  <!-- Emojis -->
+  <span
+    v-else-if="isEmoji(name)"
+    :style="`font-size: ${size}px;`"
+  >{{ name }}</span>
+  <!-- Link -->
+  <NuxtImg
+    v-else
+    :src="name"
+    :style="`width: ${size}px; height: ${size}px;`"
+    class="inline"
+  />
+</template>
+
+<script setup lang="ts">
+const { size = 16 } = defineProps<{
+  name: string;
+  size?: number;
+}>();
+
+function isIconName(name: string): boolean {
+  if (name.includes('http'))
+    return false;
+  
+  // 简单的图标名称检查，以 i- 开头或包含常见图标集
+  return name.startsWith('i-') || 
+         name.includes('lucide') || 
+         name.includes('heroicons') ||
+         name.includes('simple-icons');
+}
+
+function isEmoji(name: string): boolean {
+  return /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name);
+}
+</script>