新增组件

.env.example

@@ -1,5 +0,0 @@
-# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
-NUXT_UI_PRO_LICENSE=
-
-# Public URL, used for OG Image when running nuxt generate
-NUXT_PUBLIC_SITE_URL=

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>

content/1.简单文档/1.index.md

@@ -5,20 +5,38 @@ navigation:
   icon: i-lucide-house
 ---
 
-This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+:read-more{to="/getting-started/writing/markdown"}
+:read-more{title="Nuxt website" to="https://nuxt.com/" }
+:read-more{to="https://nuxt.com/"}
+:read-more{icon="lucide:link" title="Nuxt website"}
 
-There are already many websites based on this template:
+::ECard
+---
+img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png
+icon: i-simple-icons-tailwindcss
+spotlight: true
+title: Image Card
+description: Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+---
+#content
+wow
 
-::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+::
+
+
+::button-link{icon="lucide:arrow-up-right" variant="outline" to="/getting-started" target="_blank" size="md"}
   Get Started
 ::  
-::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+   
+::button-link{trailing-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
   GitHub
 ::  
-::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+   
+::button-link{icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
   Ghost
 ::  
 
+
 ::FileTree
 ---
 tree: