新增组件

app/components/AppHeader.vue

@@ -48,7 +48,7 @@ const handleLoginRegister = (type: "login" | "register") => {
 
     <template #right>
       <UContentSearchButton class="lg:hidden" />
-      <UColorModeSwitch />
+      <UColorModeButton />
       <button
             class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
             title="页面设置" @click="isSettingsOpen = !isSettingsOpen">
@@ -64,7 +64,7 @@ const handleLoginRegister = (type: "login" | "register") => {
         <UButton
           color="neutral"
           variant="ghost"
-          to="https://github.com/nuxt/ui"
+          to="https://github.com/estel-li"
           target="_blank"
           icon="i-simple-icons-github"
           aria-label="GitHub"

app/components/content/ButtonGroup.vue

@@ -1,24 +0,0 @@
-<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/ECard.vue

@@ -0,0 +1,40 @@
+<template>
+      <UPageCard :title="title"  :description="description" :spotlight="spotlight" :icon="icon" class="">
+        <slot/>
+        <NuxtImg
+        v-if="img"
+        :src="img"
+        class="w-full"
+      />
+      <span> {{ content }} </span>
+      </UPageCard>
+      
+</template>
+
+  <!-- ::card
+---
+img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png
+---
+#title
+Image Card
+
+#content
+Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+:: -->
+  
+  <script setup lang="ts">
+
+  const {
+content="",
+
+} =defineProps<{
+    title?: string;
+    content?: string;
+    img?: string;
+    icon?: string;
+    description?: string;
+    spotlight?:boolean;
+    slot?:string;
+  }>();
+  </script>
+  

app/components/content/FileTree.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+  <UPage class="mt-4 mb-4 bg-gray-50 dark:bg-gray-900 rounded-xl ">
     <div v-if="title" class="flex items-center mb-3 font-mono text-sm text-gray-700 dark:text-gray-300">
       <Icon v-if="icon" :name="icon" class="mr-2 text-gray-500" size="16" />
       <span>{{ title }}</span>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 p-3">
+    <div class="bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 p-3">
       <ClientOnly>
         <div class="space-y-1">
           <div
@@ -59,7 +59,7 @@
         </template>
       </ClientOnly>
     </div>
-  </div>
+</UPage>
 </template>
 
 <script setup lang="ts">

app/components/content/ReadMore.vue

@@ -0,0 +1,31 @@
+<template>
+  <UPage>
+    <NuxtLink v-if="to" :to="to">
+      <UAlert :icon :title :color="color" :variant="variant" :description="to"
+        class="mt-2 mb-3 text-black dark:text-white" :ui="{
+          icon: iconSize
+        }">
+        <slot />
+      </UAlert>
+    </NuxtLink>
+  </UPage>
+</template>
+
+<script setup lang="ts">
+
+const {
+  variant = 'subtle',
+  title,
+  icon = 'lucide:bookmark',
+} = defineProps<{
+  color?: string;
+  description?: string;
+  title?: string;
+  to?: string;
+  icon?: string;
+  iconSize?: string;
+  variant?: string;
+
+}>();
+
+</script>