修改首页目录表格样式

app/components/content/ButtonGroup.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="button-group">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// ButtonGroup 组件用于水平排列多个按钮
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* 确保按钮之间有合适的间距 */
+.button-group > * {
+  flex-shrink: 0;
+}
+</style> 

app/components/content/ButtonLink.vue

@@ -1,9 +1,13 @@
 <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 
+      :variant="variant" 
+      :size="size"
+      class="button-link"
+    >
+      <SmartIcon v-if="leftIcon" :name="leftIcon" class="icon-left" />
+      <slot />
+      <SmartIcon v-if="rightIcon" :name="rightIcon" class="icon-right" />
     </UButton>
   </NuxtLink>
 </template>
@@ -20,3 +24,78 @@ defineProps<{
   blank?: boolean;
 }>();
 </script>
+
+<style scoped>
+.button-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  padding: 0.3rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  transition: all 0.2s ease;
+  text-decoration: none;
+
+}
+
+.button-link:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.button-link:active {
+  transform: translateY(0);
+}
+
+/* 实心按钮样式（蓝色按钮） */
+:deep(.u-button--solid) {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+:deep(.u-button--solid:hover) {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+/* 边框按钮样式（GitHub按钮） */
+:deep(.u-button--outline) {
+  background-color: white;
+  color: #3b82f6;
+  border-color: #3b82f6;
+}
+
+:deep(.u-button--outline:hover) {
+  background-color: #eff6ff;
+  border-color:var(--primary);
+}
+
+/* 图标按钮样式（Ghost图标） */
+:deep(.u-button--ghost) {
+  background-color: transparent;
+  color: #3b82f6;
+  border-color: transparent;
+  padding: 0.5rem;
+}
+
+:deep(.u-button--ghost:hover) {
+  background-color: #eff6ff;
+  color: #2563eb;
+}
+
+.icon-left {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.icon-right {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+</style>

app/components/content/SmartIcon.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- Iconify Icons -->
-  <Icon v-if="isIconName(name)" :name="name" :size="size" />
+  <Icon v-if="checkIcon(name)" :name :size />
   <!-- Emojis -->
   <span
-    v-else-if="isEmoji(name)"
+    v-else-if="/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name)"
     :style="`font-size: ${size}px;`"
   >{{ name }}</span>
   <!-- Link -->
@@ -16,23 +16,17 @@
 </template>
 
 <script setup lang="ts">
+import { stringToIcon, validateIconName } from '@iconify/utils';
+
 const { size = 16 } = defineProps<{
   name: string;
   size?: number;
 }>();
 
-function isIconName(name: string): boolean {
+function checkIcon(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);
+  return validateIconName(stringToIcon(name));
 }
 </script>