更改页面的内容

app/app.config.ts

@@ -263,7 +263,7 @@ export default defineAppConfig({
     colorMode: true,
     links: [{
       'icon': 'simple-icons-github',
-      'to': 'https://github.com/nuxt-ui-pro/docs',
+      'to': 'https://github.com/estel-li/estel_docs',
       'target': '_blank',
       'aria-label': 'GitHub'
     }]
@@ -297,7 +297,7 @@ export default defineAppConfig({
     title: '当前页',
     bottom: {
       title: 'Community',
-      edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
+      edit: 'https://github.com/estel-li/estel_docs/edit/main/content',
       links: [{
         icon: 'lucide-star',
         label: 'GitHub',

app/components/AppSidebar.vue

@@ -51,7 +51,7 @@
         <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-7/9 mx-5" />
 
         <!-- 文档目录导航 -->
-        <div class="mt-6 flex items-center justify-start pl-4 w-full">
+        <div class="mt-6 flex items-center justify-start pl-4 w-full pb-3">
           <UContentNavigation
             highlight
             :navigation="navigation"

app/components/TemplateMenu.vue

@@ -3,11 +3,8 @@
     v-slot="{ open }"
     :modal="false"
     :items="[{
-      label: 'Starter',
+      label: 'Blog',
-      to: 'https://ui-pro-starter.nuxt.dev/'
+      to: 'https://lijue.me'
-    }, {
-      label: 'Landing',
-      to: 'https://landing-template.nuxt.dev/'
     }, {
       label: 'Docs',
       to: 'https://docs-template.nuxt.dev/',
@@ -15,15 +12,10 @@
       checked: true,
       type: 'checkbox'
     }, {
-      label: 'SaaS',
+      label: 'JiWei',
-      to: 'https://saas-template.nuxt.dev/'
+      to: 'https://www.xajiwei.com/'
-    }, {
+    }, 
-      label: 'Dashboard',
+    ]"
-      to: 'https://dashboard-template.nuxt.dev/'
-    }, {
-      label: 'Chat',
-      to: 'https://chat-template.nuxt.dev/'
-    }]"
     :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
     size="xs"
   >

app/components/auth/register.vue

@@ -30,8 +30,8 @@ const fields = ref([
 <template>
   <UAuthForm
     class="max-w-md"
-    title="Login"
+    title="注册"
-    description="Enter your credentials to access your account."
+    description="使用社交账号或邮箱注册"
     icon="lucide-user"
     :fields="fields"
     :providers="providers"

app/components/docs/DocsAsideLeftTop.vue

@@ -4,76 +4,24 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 const items = ref<NavigationMenuItem[][]>([
   [
     {
-      label: 'Guide',
+      label: '稷维科技',
-      icon: 'lucide-book-open'
+      icon: 'lucide-globe',
+      to: 'https://www.xajiwei.com',
+      target: '_blank',
+
+
     },
     {
-      label: 'Composables',
+      label: '组件速查',
-      icon: 'lucide-database',
-      children: [
-        {
-          label: 'defineShortcuts',
-          icon: 'lucide-file-text',
-          description: 'Define shortcuts for your application.',
-          to: '/'
-        },
-        {
-          label: 'useOverlay',
-          icon: 'lucide-file-text',
-          description: 'Display a modal/slideover within your application.',
-          to: '/'
-        },
-        {
-          label: 'useToast',
-          icon: 'lucide-file-text',
-          description: 'Display a toast within your application.',
-          to: '/'
-        }
-      ]
-    },
-    {
-      label: 'Components',
       icon: 'lucide-box',
-      to: '',
+      to: '/简单文档/components/api'
-      children: [
+    },
-        {
+    {
-          label: 'Link',
+      label: '关于',
-          icon: 'lucide-file-text',
+      icon: 'lucide-info',
-          description: 'Use NuxtLink with superpowers.',
+      to: '/about'
-          to: '/'
+    },
-        },
+    
-        {
-          label: 'Modal',
-          icon: 'lucide-file-text',
-          description: 'Display a modal within your application.',
-          to: '/'
-        },
-        {
-          label: 'NavigationMenu',
-          icon: 'lucide-file-text',
-          description: 'Display a list of links.',
-          to: '/'
-        },
-        {
-          label: 'Pagination',
-          icon: 'lucide-file-text',
-          description: 'Display a list of pages.',
-          to: ''
-        },
-        {
-          label: 'Popover',
-          icon: 'lucide-file-text',
-          description: 'Display a non-modal dialog that floats around a trigger element.',
-          to: '/'
-        },
-        {
-          label: 'Progress',
-          icon: 'lucide-file-text',
-          description: 'Show a horizontal bar to indicate task progression.',
-          to: '/'
-        }
-      ]
-    }
   ]
   // [
   //   {

app/components/example/ExampleAlert.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+  type: {
+    type: String,
+    default: () => '',
+  },
+})
+
+const alertClass = computed(() => {
+  return {
+    warning: 'bg-orange-100 border-orange-200 dark:bg-orange-900 dark:border-orange-800',
+    info: 'bg-blue-100 border-blue-200 dark:bg-blue-900 dark:border-blue-800',
+    success: 'bg-green-100 border-green-200 dark:bg-green-900 dark:border-green-800',
+
+  }[props.type]
+})
+</script>
+
+<template>
+  <div
+    class="text-black p-2 border dark:text-white rounded"
+    :class="alertClass"
+  >
+    <slot mdc-unwrap="p" />
+  </div>
+</template>

app/components/example/ExampleCard.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
+    <slot />
+  </div>
+</template>

app/components/example/ExampleFulltextContentSearch.vue

@@ -0,0 +1,11 @@
+<template>
+  <UCard>
+    <UButton
+      color="primary"
+      icon="i-lucide-search"
+      @click="useContentSearch().open.value = true"
+    >
+      Open Search Modal
+    </UButton>
+  </UCard>
+</template>

app/components/example/ExampleFulltextFusejs.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Fuse from 'fuse.js'
+
+const query = ref('')
+const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
+
+const fuse = new Fuse(data.value || [], {
+  keys: [
+    'title',
+    'description',
+  ],
+})
+
+const result = computed<Array<{ item: typeof data.value[0] }>>(() => fuse.search(toValue(query)).slice(0, 10))
+</script>
+
+<template>
+  <UContainer class="p-4">
+    <UCard>
+      <UInput
+        v-model="query"
+        placeholder="Search..."
+        class="w-full"
+      />
+      <ul>
+        <li
+          v-for="link of result"
+          :key="link.item.id"
+          class="mt-2"
+        >
+          <UButton
+            variant="ghost"
+            class="w-full"
+            :to="link.item.id"
+          >
+            <div class="flex flex-col">
+              <span class="text-black dark:text-white font-semibold">{{ link.item.title }}</span>
+              <span class="text-gray-500 text-xs truncate">
+                {{ link.item.content?.slice(0, 100) }}...
+              </span>
+            </div>
+          </UButton>
+        </li>
+      </ul>
+    </UCard>
+  </UContainer>
+</template>

app/components/example/ExampleFulltextMiniSearch.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import MiniSearch from 'minisearch'
+
+const query = ref('')
+const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
+
+const miniSearch = new MiniSearch({
+  fields: ['title', 'content'],
+  storeFields: ['title', 'content'],
+  searchOptions: {
+    prefix: true,
+    fuzzy: 0.2,
+  },
+})
+
+// Add data to the MiniSearch instance
+miniSearch.addAll(toValue(data.value || []))
+const result = computed(() => miniSearch.search(toValue(query)).slice(0, 10))
+</script>
+
+<template>
+  <UContainer class="p-4">
+    <UCard>
+      <UInput
+        v-model="query"
+        placeholder="Search..."
+        class="w-full"
+      />
+      <ul>
+        <li
+          v-for="link of result"
+          :key="link.id"
+          class="mt-2"
+        >
+          <UButton
+            variant="ghost"
+            class="w-full"
+            :to="link.id"
+          >
+            <div class="flex flex-col">
+              <span class="text-black dark:text-white font-semibold">{{ link.title }}</span>
+              <span class="text-gray-500 text-xs truncate">
+                {{ link.content?.slice(0, 100) }}...
+              </span>
+            </div>
+          </UButton>
+        </li>
+      </ul>
+    </UCard>
+  </UContainer>
+</template>

app/components/example/ExampleHero.vue

@@ -0,0 +1,8 @@
+<template>
+  <section class="pt-4">
+    <h1 class="text-4xl">
+      <slot mdc-unwrap="p" />
+    </h1>
+    <slot name="description" />
+  </section>
+</template>

app/components/example/ExampleIconCard.vue

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: 'Default title',
+  },
+  description: {
+    type: String,
+    default: 'Default description',
+  },
+  icon: {
+    type: String,
+    default: 'IconMarkdown',
+  },
+})
+</script>
+
+<template>
+  <div class="p-6 border bg-white dark:bg-black dark:border-gray-700 rounded">
+    <UIcon
+      :name="icon"
+      class="w-20 h-20"
+    />
+    <h2 class="text-3xl font-semibold mb-2">
+      {{ title }}
+    </h2>
+    <p>{{ description }}</p>
+  </div>
+</template>

app/components/example/ExampleLandingHero.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  image: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col sm:flex-row sm:items-center gap-4 py-8 sm:gap-12 sm:py-12 h-[331px]">
+    <div class="flex flex-col gap-1">
+      <h1 class="text-4xl font-semibold">
+        <slot name="title" />
+      </h1>
+      <div class="text-base text-gray-600 dark:text-gray-300">
+        <slot name="description" />
+      </div>
+    </div>
+    <img
+      :src="image"
+      class="w-1/2 rounded-lg"
+    >
+  </section>
+</template>

app/components/example/ExampleTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1 class="text-4xl text-black dark:text-white">
+    <slot mdc-unwrap="p" />
+  </h1>
+</template>

content.config.ts

@@ -2,15 +2,11 @@ import { defineContentConfig, defineCollection, z } from '@nuxt/content'
 
 export default defineContentConfig({
   collections: {
-    landing: defineCollection({
-      type: 'page',
-      source: 'index.md'
-    }),
     docs: defineCollection({
       type: 'page',
       source: {
         include: '**',
-        exclude: ['index.md']
+        exclude: ['/web/**']
       },
       schema: z.object({
         links: z.array(z.object({

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

@@ -5,12 +5,218 @@ navigation:
   icon: lucide-house
 ---
 
-## Motivations 动机
+## 缘起
 
-使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
+使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.  
-于是自己动手，丰衣足食。
+于是自己动手，丰衣足食.  
+同时在 Markdown 语法的基础上增加了许多**魔法(自定义组件)**,比如:
 
-## Features 特性
+
+::code-group
+```mdc [index.md]
+在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
+::card
+这里是卡片里的内容
+::
+```
+
+```html [Card.vue]
+<!-- Card组件: components/content/Card.vue -->
+<template>
+  <div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
+    <slot />
+  </div>
+</template>
+```
+  :::code-preview{icon="i-lucide-eye" label="Preview"}
+    ::::example-card
+    这里是卡片里的内容
+    ::::
+  :::
+
+::
+
+:::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}
+
+::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App" }
+
+```css [app/assets/main.css]
+@import "tailwindcss" theme(static);
+@import "@nuxt/ui-pro";
+```
+
+```ts [app/app.config.ts]
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'sky',
+      colors: 'slate'
+    }
+  }
+});
+```
+
+```vue [app/app.vue]
+<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+```json [package.json]
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.18",
+    "@nuxt/ui-pro": "3.0.0-alpha.10",
+    "nuxt": "^3.15.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vue-tsc": "^2.2.0"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
+```
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro'],
+
+  future: {
+    compatibilityVersion: 4
+  },
+
+  css: ['~/assets/main.css']
+});
+```
+
+````md [README.md]
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+````
+
+::
+:::
+
+::code-group
+```md [搜索.md]
+#### 此组件打开一个模态搜索框,进行搜索
+  ::::example-fulltext-content-search
+  ::::
+
+#### 此组件建立一个mini搜索框,进行搜索
+  ::::example-fulltext-mini-search
+  ::::
+```
+
+  :::code-preview{label="预览模态组件" icon="i-lucide-eye"}
+    ::::example-fulltext-content-search
+    ::::
+  :::
+  :::code-preview{label="预览搜索框组件" icon="i-lucide-eye"}
+    ::::example-fulltext-mini-search
+    ::::
+  :::
+  
+::
+
+
+::tip{icon="lucide-info" color="primary" class="text-black dark:text-white"}
+阅读更多关于 [`自定义组件`](/简单文档/components/api) 的内容.
+::
+
+
+## 特性
 
 - 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
 - 完美支持 Markdown 和 相关扩展。
@@ -20,14 +226,12 @@ navigation:
 - 开源且免费。
 - 支持移动端。
 
-## Credits  致谢
+## 致谢
 
 - Nuxt Content：为 Vue 开发者简化内容管理。
-- shadcn-ui：用于美观的组件和文档设计。
+- Nuxt UI Pro ：文档系统 UI 组件。
-- shadcn-vue: 用于 shadcn-ui 的 vue 版本及部分文档组件源码。
 - Docus：获取灵感及一些文档组件源代码。
-- Nuxt UI Pro 文档：获取灵感。
 
-## License  许可证
+## License
 
 MIT

content/1.简单文档/5.components/1.API.md

@@ -0,0 +1,7 @@
+---
+title: 常用组件
+description: 常用自定义组件速查文档
+navigation:
+  icon: lucide-component
+---
+

content/1.简单文档/5.components/1.v1.md

@@ -1,7 +0,0 @@
----
-title: Upgrade to v1
-description: Changes and upgrade guide for v1.0.
-navigation:
-  icon: lucide:circle-arrow-up
----
-

content/1.简单文档/5.components/alert.md

@@ -0,0 +1,158 @@
+---
+icon: lucide:triangle-alert
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#alert
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+  ::alert{icon="lucide:info"}
+    A **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="secondary" icon="lucide:info"}
+    A **secondary** alert with `code` and a [link](/).
+  ::
+  ::
+  ```mdc
+  ::alert{icon="lucide:info"}
+    A **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="secondary" icon="lucide:info"}
+    A **secondary** alert with `code` and a [link](/).
+  ::
+  ```
+::
+
+### Link
+
+::stack
+  ::div{class="p-4"}
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    A **link** alert.
+  ::
+  ::
+  ```mdc
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    A **link** alert.
+  ::
+  ```
+::
+
+### Variants
+
+::tabs{variant="line"}
+  ::stack{label="info" icon="lucide:info"}
+    ::div{class="p-3"}
+    ::alert{type="info" icon="lucide:info"}
+      An **info** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="info" icon="lucide:info"}
+      An **info** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="note" icon="lucide:pencil"}
+    ::div{class="p-3"}
+    ::alert{type="note" icon="lucide:pencil"}
+      A **note** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="note" icon="lucide:pencil"}
+      A **note** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="success" icon="lucide:lightbulb"}
+    ::div{class="p-3"}
+    ::alert{type="success" icon="lucide:lightbulb"}
+      A **success** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="success" icon="lucide:lightbulb"}
+      A **success** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="example" icon="lucide:test-tube"}
+    ::div{class="p-3"}
+    ::alert{type="example" icon="lucide:test-tube"}
+      An **example** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="example" icon="lucide:test-tube"}
+      An **example** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="warning" icon="lucide:triangle-alert"}
+    ::div{class="p-3"}
+    ::alert{type="warning" icon="lucide:triangle-alert"}
+      A **warning** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="warning" icon="lucide:triangle-alert"}
+      A **warning** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+
+  ::stack{label="danger" icon="lucide:circle-x"}
+    ::div{class="p-3"}
+    ::alert{type="danger" icon="lucide:circle-x"}
+      A **danger** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
+    ::alert{type="danger" icon="lucide:circle-x"}
+      A **danger** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
+::
+
+### Title
+
+::stack
+  ::div{class="p-4"}
+  ::alert{title="Title" icon="lucide:layout-list"}
+    An alert with a title.
+  ::
+  ::
+  ```mdc
+  ::alert{title="Title" icon="lucide:layout-list"}
+    An alert with a title.
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Alert title]
+  :field{name="icon" type="string"}[Alert icon]
+  :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="external" type="boolean"}[Alias to `target='_blank'`]
+  :field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
+::

content/1.简单文档/5.components/badge.md

@@ -0,0 +1,125 @@
+---
+title: Badge
+icon: lucide:badge
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#badge
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-3"}
+  ::badge
+    Default
+  ::
+  ::badge{size="sm"}
+    Small
+  ::
+  ::
+  ```mdc
+  ::badge
+    Default
+  ::
+  ::badge{size="sm"}
+    Small
+  ::
+  ```
+::
+
+### Variants
+
+::tabs{variant="line"}
+  ::stack{label="outline"}
+    ::div{class="p-3"}
+    :badge[Outline]{variant="outline"}
+    ::
+    ```mdc
+    :badge[Outline]{variant="outline"}
+    ```
+  ::
+
+  ::stack{label="secondary"}
+    ::div{class="p-3"}
+    :badge[Secondary]{variant="secondary"}
+    ::
+    ```mdc
+    :badge[Secondary]{variant="secondary"}
+    ```
+  ::
+
+  ::stack{label="info"}
+    ::div{class="p-3"}
+    :badge[Info]{type="info"}
+    ::
+    ```mdc
+    :badge[Info]{type="info"}
+    ```
+  ::
+
+  ::stack{label="warning"}
+    ::div{class="p-3"}
+    :badge[Warning]{type="warning"}
+    ::
+    ```mdc
+    :badge[Warning]{type="warning"}
+    ```
+  ::
+
+  ::stack{label="success"}
+    ::div{class="p-3"}
+    :badge[Success]{type="success"}
+    ::
+    ```mdc
+    :badge[Success]{type="success"}
+    ```
+  ::
+
+  ::stack{label="lime"}
+    ::div{class="p-3"}
+    :badge[lime]{type="lime"}
+    ::
+    ```mdc
+    :badge[lime]{type="lime"}
+    ```
+  ::
+
+  ::stack{label="danger"}
+    ::div{class="p-3"}
+    :badge[Danger]{type="danger"}
+    ::
+    ```mdc
+    :badge[Danger]{type="danger"}
+    ```
+  ::
+::
+
+### Link
+
+::stack
+  ::div{class="p-3"}
+  ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  Link
+  ::
+  ::
+  ```mdc
+  ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  Link
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
+  :field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
+  :field{name="size" type="'md' | 'sm'" default-value="'md'"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+::

content/1.简单文档/5.components/button-link.md

@@ -0,0 +1,53 @@
+---
+title: Button Link
+icon: lucide:external-link
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#buttonlink
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue
+    target: _blank
+  - value: 0.6.5
+---
+
+## Usage
+
+::stack
+  ::div{class="p-3 flex gap-4"}
+  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
+  ::button-link{left-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}
+    Ghost
+  ::
+  ::
+  ```mdc
+  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
+  ::button-link{left-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}
+    Ghost
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
+  :field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
+  :field{name="leftIcon" type="string"}[Icon on the left]
+  :field{name="rightIcon" type="string"}[Icon on the right]
+  :field{name="to" type="string"}[Link URL]
+  :field{name="href" type="string"}[Alias to `to`]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="blank" type="boolean"}[Alias to `target='_blank'`]
+::

content/1.简单文档/5.components/callout.md

@@ -0,0 +1,16 @@
+---
+title: Callout
+icon: lucide:megaphone
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/callout
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Callout.vue
+    target: _blank
+---
+
+::alert{to="/components/docs/alert"}
+`::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
+::

content/1.简单文档/5.components/card-group.md

@@ -0,0 +1,175 @@
+---
+title: Card Group
+icon: lucide:layout-grid
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/card-group
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::card-group
+      ::card
+      ---
+      title: Components
+      icon: lucide:box
+      to: https://nuxt.com/docs/api/components/client-only
+      target: _blank
+      ---
+      Explore Nuxt built-in components for pages, layouts, head, and more.
+      ::
+      ::card
+      ---
+      title: Composables
+      icon: lucide:arrow-right-left
+      to: https://nuxt.com/docs/api/composables/use-app-config
+      target: _blank
+      ---
+      Discover Nuxt composable functions for data-fetching, head management and more.
+      ::
+      ::card
+      ---
+      title: Utils
+      icon: lucide:scissors
+      to: https://nuxt.com/docs/api/utils/dollarfetch
+      target: _blank
+      ---
+      Learn about Nuxt utility functions for navigation, error handling and more.
+      ::
+      ::card
+      ---
+      title: Commands
+      icon: lucide:square-terminal
+      to: https://nuxt.com/docs/api/commands/add
+      target: _blank
+      ---
+      List of Nuxt CLI commands to init, analyze, build, and preview your application.
+      ::
+    ::
+  ::
+  ```mdc
+  ::card-group
+    ::card
+    ---
+    title: Components
+    icon: lucide:box
+    to: https://nuxt.com/docs/api/components/client-only
+    target: _blank
+    ---
+    Explore Nuxt built-in components for pages, layouts, head, and more.
+    ::
+
+    ::card
+    ---
+    title: Composables
+    icon: lucide:arrow-right-left
+    to: https://nuxt.com/docs/api/composables/use-app-config
+    target: _blank
+    ---
+    Discover Nuxt composable functions for data-fetching, head management and more.
+    ::
+
+    ::card
+    ---
+    title: Utils
+    icon: lucide:scissors
+    to: https://nuxt.com/docs/api/utils/dollarfetch
+    target: _blank
+    ---
+    Learn about Nuxt utility functions for navigation, error handling and more.
+    ::
+
+    ::card
+    ---
+    title: Commands
+    icon: lucide:square-terminal
+    to: https://nuxt.com/docs/api/commands/add
+    target: _blank
+    ---
+    List of Nuxt CLI commands to init, analyze, build, and preview your application.
+    ::
+  ::
+  ```
+::
+
+### Cols
+
+::stack
+  ::div{class="p-4"}
+    ::card-group{:cols="3"}
+      ::card
+      ---
+      title: Components
+      icon: lucide:box
+      to: https://nuxt.com/docs/api/components/client-only
+      target: _blank
+      ---
+      Explore Nuxt built-in components for pages, layouts, head, and more.
+      ::
+      ::card
+      ---
+      title: Composables
+      icon: lucide:arrow-right-left
+      to: https://nuxt.com/docs/api/composables/use-app-config
+      target: _blank
+      ---
+      Discover Nuxt composable functions for data-fetching, head management and more.
+      ::
+      ::card
+      ---
+      title: Utils
+      icon: lucide:scissors
+      to: https://nuxt.com/docs/api/utils/dollarfetch
+      target: _blank
+      ---
+      Learn about Nuxt utility functions for navigation, error handling and more.
+      ::
+    ::
+  ::
+  ```mdc
+  ::card-group{:cols="3"}
+    ::card
+    ---
+    title: Components
+    icon: lucide:box
+    to: https://nuxt.com/docs/api/components/client-only
+    target: _blank
+    ---
+    Explore Nuxt built-in components for pages, layouts, head, and more.
+    ::
+
+    ::card
+    ---
+    title: Composables
+    icon: lucide:arrow-right-left
+    to: https://nuxt.com/docs/api/composables/use-app-config
+    target: _blank
+    ---
+    Discover Nuxt composable functions for data-fetching, head management and more.
+    ::
+
+    ::card
+    ---
+    title: Utils
+    icon: lucide:scissors
+    to: https://nuxt.com/docs/api/utils/dollarfetch
+    target: _blank
+    ---
+    Learn about Nuxt utility functions for navigation, error handling and more.
+    ::
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="cols" type="1 | 2 | 3 | 4 | 5 | 6" default-value="2"}[Number of columns (only for desktop)]
+::

content/1.简单文档/5.components/card.md

@@ -0,0 +1,173 @@
+---
+title: Card
+icon: lucide:square
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/card
+    target: _blank
+  - value: Docus
+    to: https://docus.dev/api/components#card
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Card.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+  ::card
+  ---
+  icon: lucide:box
+  ---
+
+  #title
+  Card Title
+
+  #description
+  Description
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+
+  #footer
+  Footer
+  ::
+  ::
+  ```mdc
+  ::card
+  ---
+  icon: lucide:box
+  ---
+
+  #title
+  Card Title
+
+  #description
+  Description
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+
+  #footer
+  Footer
+  ::
+  ```
+::
+
+### Link
+
+::stack
+  ::div{class="p-4"}
+  ::card
+  ---
+  to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+  target: _blank
+  # showLinkIcon: false
+  ---
+
+  #title
+  Link Card
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ::
+  ```mdc
+  ::card
+  ---
+  to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+  target: _blank
+  # showLinkIcon: false
+  ---
+
+  #title
+  Link Card
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ```
+::
+
+### Horizontal
+
+::stack
+  ::div{class="p-4"}
+  ::card
+  ---
+  icon: 'lucide:fold-horizontal'
+  icon-size: 26
+  horizontal: true
+  ---
+
+  #title
+  Horizontal Card
+
+  #description
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ::
+  ```mdc
+  ::card
+  ---
+  icon: 'lucide:fold-horizontal'
+  icon-size: 26
+  horizontal: true
+  ---
+
+  #title
+  Horizontal Card
+
+  #description
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ```
+::
+
+### Image
+
+::stack
+  ::div{class="p-4"}
+  ::card
+  ---
+  img: /og-nuxt.png
+  ---
+  #title
+  Image Card
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ::
+  ```mdc
+  ::card
+  ---
+  img: /og-nuxt.png
+  ---
+  #title
+  Image Card
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Card title]
+  :field{name="description" type="string"}[Card description]
+  :field{name="content" type="string"}[Card content]
+  :field{name="footer" type="string"}[Card footer]
+  :field{name="icon" type="string"}[Card icon]
+  :field{name="horizontal" type="boolean" default-value="false"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="iconSize" type="number" default-value="24"}
+  :field{name="img" type="string"}[Image URL]
+  :field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
+::

content/1.简单文档/5.components/code-group.md

@@ -0,0 +1,77 @@
+---
+title: Code Group
+icon: lucide:code-xml
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/code-group
+    target: _blank
+  - value: Docus
+    to: https://docus.dev/api/components#codegroup
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::code-group
+      ```vue [app.vue]
+      <template>
+        <div>
+          <NuxtLayout>
+            <NuxtPage />
+          </NuxtLayout>
+        </div>
+      </template>
+      ```
+
+      ```vue [pages/index.vue]
+      <template>
+        <div>
+          <h1>Welcome to the homepage</h1>
+          <AppAlert>
+            This is an auto-imported component
+          </AppAlert>
+        </div>
+      </template>
+      ```
+    ::
+  ::
+
+  ```mdc
+  ::code-group
+    ```vue [app.vue]
+    <template>
+      <div>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </div>
+    </template>
+    ```
+
+    ```vue [pages/index.vue]
+    <template>
+      <div>
+        <h1>Welcome to the homepage</h1>
+        <AppAlert>
+          This is an auto-imported component
+        </AppAlert>
+      </div>
+    </template>
+    ```
+  ::
+  ```
+::
+
+::alert{to="/components/docs/tabs"}
+`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
+::
+
+## Props
+
+:field{name="sync" type="string"}[Sync scope for `::tabs`]

content/1.简单文档/5.components/code-tree.md

@@ -0,0 +1,324 @@
+---
+title: Code Tree
+icon: lucide:folder-code
+badges:
+  - value: 0.8.17
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeTree.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+::div{class="p-4"}
+  ::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App"}
+
+  ```css [app/assets/main.css]
+  @import "tailwindcss" theme(static);
+  @import "@nuxt/ui-pro";
+  ```
+
+  ```ts [app/app.config.ts]
+  export default defineAppConfig({
+    ui: {
+      colors: {
+        primary: 'sky',
+        colors: 'slate'
+      }
+    }
+  });
+  ```
+
+  ```vue [app/app.vue]
+  <template>
+    <UApp>
+      <NuxtPage />
+    </UApp>
+  </template>
+  ```
+
+  ```json [package.json]
+  {
+    "name": "nuxt-app",
+    "private": true,
+    "type": "module",
+    "scripts": {
+      "build": "nuxt build",
+      "dev": "nuxt dev",
+      "generate": "nuxt generate",
+      "preview": "nuxt preview",
+      "postinstall": "nuxt prepare",
+      "typecheck": "nuxt typecheck"
+    },
+    "dependencies": {
+      "@iconify-json/lucide": "^1.2.18",
+      "@nuxt/ui-pro": "3.0.0-alpha.10",
+      "nuxt": "^3.15.1"
+    },
+    "devDependencies": {
+      "typescript": "^5.7.2",
+      "vue-tsc": "^2.2.0"
+    }
+  }
+  ```
+
+  ```json [tsconfig.json]
+  {
+    "extends": "./.nuxt/tsconfig.json"
+  }
+  ```
+
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    modules: ['@nuxt/ui-pro'],
+
+    future: {
+      compatibilityVersion: 4
+    },
+
+    css: ['~/assets/main.css']
+  });
+  ```
+
+  ````md [README.md]
+  # Nuxt 3 Minimal Starter
+
+  Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+  ## Setup
+
+  Make sure to install the dependencies:
+
+  ```bash
+  # npm
+  npm install
+
+  # pnpm
+  pnpm install
+
+  # yarn
+  yarn install
+
+  # bun
+  bun install
+  ```
+
+  ## Development Server
+
+  Start the development server on `http://localhost:3000`:
+
+  ```bash
+  # npm
+  npm run dev
+
+  # pnpm
+  pnpm run dev
+
+  # yarn
+  yarn dev
+
+  # bun
+  bun run dev
+  ```
+
+  ## Production
+
+  Build the application for production:
+
+  ```bash
+  # npm
+  npm run build
+
+  # pnpm
+  pnpm run build
+
+  # yarn
+  yarn build
+
+  # bun
+  bun run build
+  ```
+
+  Locally preview production build:
+
+  ```bash
+  # npm
+  npm run preview
+
+  # pnpm
+  pnpm run preview
+
+  # yarn
+  yarn preview
+
+  # bun
+  bun run preview
+  ```
+
+  Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+  ````
+
+  ::
+::
+
+`````mdc height=400
+::code-tree{defaultValue="nuxt.config.ts" title="Sample Nuxt App"}
+
+```css [app/assets/main.css]
+@import "tailwindcss" theme(static);
+@import "@nuxt/ui-pro";
+```
+
+```ts [app/app.config.ts]
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'sky',
+      colors: 'slate'
+    }
+  }
+});
+```
+
+```vue [app/app.vue]
+<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+```json [package.json]
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.18",
+    "@nuxt/ui-pro": "3.0.0-alpha.10",
+    "nuxt": "^3.15.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vue-tsc": "^2.2.0"
+  }
+}
+```
+
+```json [tsconfig.json]
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
+```
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro'],
+
+  future: {
+    compatibilityVersion: 4
+  },
+
+  css: ['~/assets/main.css']
+});
+```
+
+````md [README.md]
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+````
+
+::
+`````
+::
+
+## Props
+
+::field-group
+  :field{name="defaultValue"}[Default open file]
+  :field{name="title" type="string"}[Code tree title]
+  :field{name="height" type="number" default-value="400"}
+::

content/1.简单文档/5.components/field-group.md

@@ -0,0 +1,62 @@
+---
+title: Field Group
+icon: lucide:settings-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/field-group
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FieldGroup.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::field-group
+      ::field{name="withDefault" type="boolean" defaultValue="true"}
+      A field with a default value.
+      ::
+      ::field{name="requiredField" type="boolean" required}
+      A required field.
+      ::
+      ::field{name="clear (path?: string)" type="void"}
+      Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+      ::
+      ::field{name="getErrors (path?: string)" type="FormError[]"}
+      Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+      ::
+      ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
+      Sets form errors for a given path. If no path is provided, overrides all errors.
+      ::
+      ::field{name="errors" type="Ref<FormError[]>"}
+      A reference to the array containing validation errors. Use this to access or manipulate the error information.
+      ::
+    ::
+  ::
+
+  ```mdc
+  ::field-group
+    ::field{name="withDefault" type="boolean" defaultValue="true"}
+    A field with a default value.
+    ::
+    ::field{name="requiredField" type="boolean" required}
+    A required field.
+    ::
+    ::field{name="clear (path?: string)" type="void"}
+    Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+    ::
+    ::field{name="getErrors (path?: string)" type="FormError[]"}
+    Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+    ::
+    ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
+    Sets form errors for a given path. If no path is provided, overrides all errors.
+    ::
+    ::field{name="errors" type="Ref<FormError[]>"}
+    A reference to the array containing validation errors. Use this to access or manipulate the error information.
+    ::
+  ::
+  ```
+::

content/1.简单文档/5.components/field.md

@@ -0,0 +1,39 @@
+---
+title: Field
+icon: lucide:settings-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/field
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Field.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::field{name="Field" type="string" defaultValue="'default'" required}
+    The _description_ can be set as prop or in the default slot with full **markdown** support.
+    ::
+  ::
+  ```mdc
+  ::field{name="Field" type="string" defaultValue="'default'" required}
+  The _description_ can be set as prop or in the default slot with full **markdown** support.
+  ::
+  ```
+::
+
+The text `required` is configurable in [`main.fieldRequiredText`](/api/configuration/shadcn-docs#main).
+
+## Props
+
+::field-group
+  :field{name="name" type="string"}[Field name]
+  :field{name="type" type="string"}[Field type]
+  :field{name="description" type="string"}[Field description]
+  :field{name="defaultValue" type="string"}[Field default value]
+  :field{name="required" type="boolean"}[Whether the field is required]
+::

content/1.简单文档/5.components/file-tree.md

@@ -0,0 +1,182 @@
+---
+title: File Tree
+icon: lucide:folder-tree
+badges:
+  - value: 0.8.10
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  tree:
+    - app:
+      - components:
+        - Header.vue
+        - Footer.vue
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^ # This is highlighted
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+### Customizations
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  title: File Tree Title
+  icon: lucide:folder-tree
+  autoSlash: false   # Whether to add a slash after every folder automatically
+  showArrow: true    # Whether to show the guide arrow
+  tree:
+    - components:
+      - layout:
+        - Header.vue
+        - Footer.vue
+        - ...
+      - content:
+        - Accordion.vue
+        - Alert.vue
+        - ProseCode.vue
+        - ...
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+title: File Tree Title
+icon: lucide:folder-tree
+autoSlash: false   # Whether to add a slash after every folder automatically
+showArrow: true    # Whether to show the collapse arrow
+tree:
+  - components:
+    - layout:
+      - Header.vue
+      - Footer.vue
+      - ...
+    - content:
+      - Accordion.vue
+      - Alert.vue
+      - ProseCode.vue
+      - ...
+---
+::
+```
+::
+### Disable Icons
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  showIcon: false
+  tree:
+    - app:
+      - components:
+        - Header.vue
+        - Footer.vue
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+showIcon: false
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+### Diff
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  showIcon: false
+  tree:
+    - app:
+      - + components:
+        - Header.vue
+        - "- Footer.vue"
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+showIcon: false
+tree:
+  - app:
+    - + components:
+      - Header.vue
+      - "- Footer.vue"
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+## Props
+
+::field-group
+  :field{name="tree"}[The file tree]
+  :field{name="title" type="string"}[File tree title]
+  :field{name="icon" type="string"}[File tree title icon]
+  :field{name="autoSlash" type="boolean" default-value="true"}[Whether to add a slash after every folder automatically]
+  :field{name="showArrow" type="boolean" default-value="false"}[Whether to show the collapse arrow]
+  :field{name="showIcon" type="boolean" default-value="true"}[Whether to show file & folder icons]
+::

content/1.简单文档/5.components/icon.md

@@ -0,0 +1,94 @@
+---
+title: Icon
+icon: lucide:star
+badges:
+  - value: Docus
+    to: https://docus.dev/api/components#icon
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Icon.vue
+    target: _blank
+---
+
+::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
+The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
+::
+
+## Usage
+
+::stack
+  ::div{class="p-4 space-x-2"}
+    :icon{name="lucide:box"}
+    :icon{name="vscode-icons:file-type-js-official"}
+    :icon{name="vscode-icons:file-type-vue"}
+    :icon{name="vscode-icons:file-type-nuxt" :size="30"}
+  ::
+
+  ```mdc
+  :icon{name="lucide:box"}
+  :icon{name="vscode-icons:file-type-js-official"}
+  :icon{name="vscode-icons:file-type-vue"}
+  :icon{name="vscode-icons:file-type-nuxt" :size="30"}
+  ```
+::
+
+If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
+
+```bash [Terminal]
+npm i -D @iconify-json/collection-name
+```
+
+`@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
+
+### Smart Icon
+
+:badge[0.5.3]{variant="outline"}
+
+You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will render them automatically.
+
+::stack
+  ::div{class="p-4"}
+    **Iconify**
+    <div class="space-x-2">
+
+    :smart-icon{name="lucide:box"}
+    :smart-icon{name="vscode-icons:file-type-js-official"}
+    :smart-icon{name="vscode-icons:file-type-vue"}
+
+    </div>
+
+    **Emojis**
+    <div class="space-x-2">
+
+    :smart-icon{name="😍"}
+    :smart-icon{name="🚀"}
+    :smart-icon{name="🎉" :size="30"}
+
+    </div>
+
+    **URL**
+    <div class="space-x-2">
+
+    :smart-icon{name="/logo.svg"}
+    :smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
+
+    </div>
+  ::
+
+  ```mdc
+  **Iconify**
+  :smart-icon{name="lucide:box"}
+  :smart-icon{name="vscode-icons:file-type-js-official"}
+  :smart-icon{name="vscode-icons:file-type-vue"}
+
+  **Emojis**
+  :smart-icon{name="😍"}
+  :smart-icon{name="🚀"}
+  :smart-icon{name="🎉" :size="30"}
+
+  **URL**
+  :smart-icon{name="/logo.svg"}
+  :smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
+  ```
+::

content/1.简单文档/5.components/playground.md

@@ -0,0 +1,82 @@
+---
+title: Playground
+icon: lucide:app-window
+navBadges:
+  - value: New
+    type: lime
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue
+    target: _blank
+---
+
+## Usage
+
+### Stackblitz
+
+::stack
+  ::div{class="p-4"}
+    ::playground
+    ---
+    provider: stackblitz
+    repo: nuxt/starter
+    branch: v3
+    file: app.vue
+    ---
+    ::
+  ::
+  ```mdc
+  ::playground
+  ---
+  provider: stackblitz
+  repo: nuxt/starter
+  branch: v3
+  file: app.vue
+  ---
+  ::
+  ```
+::
+
+### CodeSandbox
+
+::stack
+  ::div{class="p-4"}
+    ::playground
+    ---
+    provider: codesandbox
+    repo: nuxt/starter
+    branch: v3
+    file: app.vue
+    ---
+    ::
+  ::
+  ```mdc
+  ::playground
+  ---
+  provider: codesandbox
+  repo: nuxt/starter
+  branch: v3
+  file: app.vue
+  ---
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use]
+  :field{name="repo" type="string"}[GitHub repository name (e.g. `nuxt/starter`)]
+  :field{name="branch" type="string" default-value="main"}[Branch name]
+  ::field{name="id" type="string"}
+  Repository ID (e.g. for Stackblitz `github-t1vjvm`, for Codesandbox `8hq5qn`)
+
+    ::alert{icon="lucide:info" type="info"}
+    You need to provide either `repo` or `id` prop, but not both.
+    ::
+  ::
+  :field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)]
+  :field{name="file" type="string"}[File path to open]
+  :field{name="title" type="string" default-value="Playground"}[Title of the iframe]
+::

content/1.简单文档/5.components/read-more.md

@@ -0,0 +1,39 @@
+---
+title: Read More
+icon: lucide:bookmark
+badges:
+  - value: undocs
+    to: https://undocs.pages.dev/guide/components#read-more
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ReadMore.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    :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" to="https://nuxt.com/"}
+  ::
+
+  ```mdc
+  :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" to="https://nuxt.com/"}
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Read More title]
+  :field{name="icon" type="string"}[Read More icon]
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+::

content/1.简单文档/5.components/stack.md

@@ -0,0 +1,89 @@
+---
+title: Stack
+icon: lucide:rows-3
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Stack.vue
+    target: _blank
+  - value: 0.6.2
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4 md:p-8"}
+    ::stack
+      ::div{class="p-6 text-3xl font-bold"}
+      ✨ shadcn-docs-nuxt
+      ::
+
+      ```mdc
+      ---
+      title: Installation
+      description: How to install shadcn-docs-nuxt in your app.
+      icon: lucide:play
+      ---
+
+      ## Using the starter template
+      ```
+
+      :pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
+
+      :read-more{title="Installation" to="/getting-started/installation"}
+
+      ::card
+      ---
+      title: Components
+      icon: lucide:box
+      ---
+      See MDC components provided by **shadcn-docs-nuxt**.
+      ::
+    ::
+  ::
+
+  ```mdc
+  ::stack
+    ::div{class="p-6 text-3xl font-bold"}
+    ✨ shadcn-docs-nuxt
+    ::
+
+    ```mdc
+    ---
+    title: Installation
+    description: How to install shadcn-docs-nuxt in your app.
+    icon: lucide:play
+    ---
+
+    ## Using the starter template
+    ```
+
+    :pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
+
+    :read-more{title="Installation" to="/getting-started/installation"}
+
+    ::card
+    ---
+    title: Components
+    icon: lucide:box
+    ---
+    See MDC components provided by **shadcn-docs-nuxt**.
+    ::
+  ::
+  ```
+::
+
+Stackable components:
+
+- `div`
+- Code Blocks
+- `alert`
+- `callout`
+- `read-more`
+- `code-group`
+- `code-tree`
+- `card`
+- `tabs`
+- `pm-install`
+- `pm-run`
+- `pm-x`

content/1.简单文档/5.components/steps.md

@@ -0,0 +1,148 @@
+---
+title: Steps
+icon: lucide:arrow-down-0-1
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Steps.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4 md:p-6"}
+    ::steps
+      ### Get Starter Template
+
+      ::code-group
+        ```bash [npm]
+        npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+        ```
+        ```bash [pnpm]
+        pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+        ```
+        ```bash [bun]
+        bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+        ```
+      ::
+
+      ::alert
+      Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
+      ::
+
+      ### Install Dependencies
+
+      ::code-group
+        ```bash [npm]
+        npm install
+        ```
+        ```bash [pnpm]
+        pnpm install
+        ```
+        ```bash [bun]
+        bun install
+        ```
+      ::
+
+      ### Development Server
+
+      ::code-group
+        ```bash [npm]
+        npm run dev -- -o
+        ```
+        ```bash [pnpm]
+        pnpm dev -o
+        ```
+        ```bash [bun]
+        bun run dev -o
+        ```
+      ::
+    ::
+  ::
+  ```mdc height=400
+  ::steps
+    ### Get Starter Template
+
+    ::code-group
+      ```bash [npm]
+      npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+      ```
+      ```bash [pnpm]
+      pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+      ```
+      ```bash [bun]
+      bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+      ```
+    ::
+
+    ::alert
+    Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
+    ::
+
+    ### Install Dependencies
+
+    ::code-group
+      ```bash [npm]
+      npm install
+      ```
+      ```bash [pnpm]
+      pnpm install
+      ```
+      ```bash [bun]
+      bun install
+      ```
+    ::
+
+    ### Development Server
+
+    ::code-group
+      ```bash [npm]
+      npm run dev -- -o
+      ```
+      ```bash [pnpm]
+      pnpm dev -o
+      ```
+      ```bash [bun]
+      bun run dev -o
+      ```
+    ::
+  ::
+  ```
+::
+
+### Multi-level headings
+:badge[0.4.6]{variant="outline"}
+
+::stack
+  ::div{class="p-4 md:p-6"}
+    ::steps{:level="5"}
+      ##### Specify the level of headings to use
+
+      ```mdc
+      ::steps{:level="5"}
+      ```
+
+      ##### Available Headings
+
+      `h1` through `h6`. Defaults to `h3`.
+    ::
+  ::
+  ```mdc
+  ::steps{:level="5"}
+    ##### Multi-level headings
+
+    ```mdc
+    ::steps{:level="5"}
+    ```
+
+    ##### Available Headings
+
+    `h1` through `h6`. Defaults to `h3`.
+  ::
+  ```
+::
+
+## Props
+
+:field{name="level" type="number"}[Specify the level of headings to use]

content/1.简单文档/5.components/tabs.md

@@ -0,0 +1,375 @@
+---
+title: Tabs
+icon: lucide:table-2
+badges:
+  - value: Nuxt UI Pro
+    to: https://ui.nuxt.com/pro/prose/tabs
+    target: _blank
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+    ::tabs
+      ::div{label="PostgreSQL" icon="lucide:database"}
+      ### PostgreSQL column types
+
+      ```ts
+      import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+      export const table = pgTable('table', {
+        int: integer('int')
+      });
+      ```
+      ::
+      ::div{label="MySQL"}
+      ### MySQL column types
+
+      ```ts
+      import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+      const table = mysqlTable('table', {
+        int: int('int')
+      });
+      ```
+      ::
+      ::div{label="SQLite"}
+      ### SQLite column types
+
+      ```ts
+      import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+      const table = sqliteTable('table', {
+        id: integer('id')
+      });
+
+      // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+      integer('id', { mode: 'number' });
+      integer('id', { mode: 'boolean' });
+      integer('id', { mode: 'timestamp_ms' });
+      integer('id', { mode: 'timestamp' }); // Date
+      ```
+      ::
+    ::
+  ::
+  ```mdc height=300
+  ::tabs
+    ::div{label="PostgreSQL" icon="lucide:database"}
+    ### PostgreSQL column types
+
+    ```ts
+    import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+    export const table = pgTable('table', {
+      int: integer('int')
+    });
+    ```
+    ::
+    ::div{label="MySQL"}
+    ### MySQL column types
+
+    ```ts
+    import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+    const table = mysqlTable('table', {
+      int: int('int')
+    });
+    ```
+    ::
+    ::div{label="SQLite"}
+    ### SQLite column types
+
+    ```ts
+    import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+    const table = sqliteTable('table', {
+      id: integer('id')
+    });
+
+    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+    integer('id', { mode: 'number' });
+    integer('id', { mode: 'boolean' });
+    integer('id', { mode: 'timestamp_ms' });
+    integer('id', { mode: 'timestamp' }); // Date
+    ```
+    ::
+  ::
+  ```
+::
+
+### Card Style
+
+::stack
+  ::div{class="p-4"}
+    ::tabs{variant="card"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+  ::
+  ```mdc
+  ::tabs{variant="card"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ```
+::
+
+### Line Style
+:badge[0.6.4]{variant="outline"}
+
+::stack
+  ::div{class="p-4"}
+    ::tabs{variant="line"}
+      ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
+        :badge[Badge]
+      ::
+      ::div{label="Code"}
+        ```tsx
+        import { Badge } from "@/components/ui/badge"
+
+        export function BadgeDemo() {
+          return <Badge>Badge</Badge>
+        }
+        ```
+      ::
+    ::
+  ::
+  ```mdc
+  ::tabs{variant="line"}
+    ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
+      :badge[Badge]
+    ::
+    ::div{label="Code"}
+      ```tsx
+      import { Badge } from "@/components/ui/badge"
+
+      export function BadgeDemo() {
+        return <Badge>Badge</Badge>
+      }
+      ```
+    ::
+  ::
+  ```
+::
+
+### Combobox Style
+:badge[0.7.5]{variant="outline"}
+
+::stack
+  ::div{class="p-4"}
+    ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
+      ::div{label="PostgreSQL"}
+      ### PostgreSQL column types
+
+      ```ts
+      import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+      export const table = pgTable('table', {
+        int: integer('int')
+      });
+      ```
+      ::
+      ::div{label="MySQL"}
+      ### MySQL column types
+
+      ```ts
+      import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+      const table = mysqlTable('table', {
+        int: int('int')
+      });
+      ```
+      ::
+      ::div{label="SQLite"}
+      ### SQLite column types
+
+      ```ts
+      import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+      const table = sqliteTable('table', {
+        id: integer('id')
+      });
+
+      // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+      integer('id', { mode: 'number' });
+      integer('id', { mode: 'boolean' });
+      integer('id', { mode: 'timestamp_ms' });
+      integer('id', { mode: 'timestamp' }); // Date
+      ```
+      ::
+    ::
+  ::
+  ```mdc height=300
+  ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
+    ::div{label="PostgreSQL"}
+    ### PostgreSQL column types
+
+    ```ts
+    import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+    export const table = pgTable('table', {
+      int: integer('int')
+    });
+    ```
+    ::
+    ::div{label="MySQL"}
+    ### MySQL column types
+
+    ```ts
+    import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+    const table = mysqlTable('table', {
+      int: int('int')
+    });
+    ```
+    ::
+    ::div{label="SQLite"}
+    ### SQLite column types
+
+    ```ts
+    import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+    const table = sqliteTable('table', {
+      id: integer('id')
+    });
+
+    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+    integer('id', { mode: 'number' });
+    integer('id', { mode: 'boolean' });
+    integer('id', { mode: 'timestamp_ms' });
+    integer('id', { mode: 'timestamp' }); // Date
+    ```
+    ::
+  ::
+  ```
+::
+
+### Synced Tabs
+:badge[0.8.0]{variant="outline"}
+
+:read-more{to="/components/docs/pm"}
+
+::stack
+  ::div{class="p-4 md:p-8"}
+    #### Scope 1
+    ::tabs{variant="card" sync="your-scope-name"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+    ::tabs{variant="card" sync="your-scope-name"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+
+    #### Scope 2
+    ::tabs{variant="line" sync="scope2"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+    ::tabs{variant="separate" sync="scope2"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+  ::
+  ```mdc height=400
+  #### Scope 1
+  ::tabs{variant="card" sync="your-scope-name"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ::tabs{variant="card" sync="your-scope-name"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+
+  #### Scope 2
+  ::tabs{variant="line" sync="scope2"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ::tabs{variant="separate" sync="scope2"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
+  :field{name="padded" type="boolean" default-value="true"}
+  :field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
+  :field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
+  :field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
+  :field{name="sync" type="string"}[Sync scope]
+::

content/99.about.md

@@ -0,0 +1,6 @@
+---
+title: 关于
+description: Estel Docs 文档系统
+date: 2025-07-31
+navigation: false
+---

nuxt.config.ts

@@ -67,5 +67,17 @@ export default defineNuxtConfig({
       scan: true,
       sizeLimitKb: 512
     }
-  }
+  },
+  llms: {
+    domain: 'https://docs.jiwei.xin',
+    title: 'Estel Docs',
+    description: 'Estel Docs 文档系统',
+    sections: [
+      {
+        title: 'Estel Docs',
+        description: 'Estel Docs 文档系统',
+        contentCollection: 'docs'
+       },
+    ],
+  },
 })

package.json

@@ -21,8 +21,8 @@
     "nuxt-content",
     "shadcn-vue"
   ],
-    "main": "./nuxt.config.ts",
+  "main": "./nuxt.config.ts",
-    "scripts": {
+  "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
@@ -38,6 +38,7 @@
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui-pro": "^3.2.0",
     "better-sqlite3": "^12.2.0",
+    "minisearch": "^7.1.2",
     "nuxt": "^4.0.1",
     "nuxt-llms": "0.1.3",
     "nuxt-og-image": "^5.1.9"

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       better-sqlite3:
         specifier: ^12.2.0
         version: 12.2.0
+      minisearch:
+        specifier: ^7.1.2
+        version: 7.1.2
       nuxt:
         specifier: ^4.0.1
         version: 4.0.1(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.0.7)(@vue/compiler-sfc@3.5.17)(better-sqlite3@12.2.0)(db0@0.3.2(better-sqlite3@12.2.0))(eslint@9.31.0(jiti@2.4.2))(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.45.1)(terser@5.43.1)(typescript@5.8.3)(vite@7.0.6(@types/node@24.0.7)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.43.1)(yaml@2.8.0))(vue-tsc@3.0.1(typescript@5.8.3))(yaml@2.8.0)
@@ -4572,6 +4575,9 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minisearch@7.1.2:
+    resolution: {integrity: sha512-R1Pd9eF+MD5JYDDSPAp/q1ougKglm14uEkPMvQ/05RGmx6G9wvmLTrTI/Q5iPNJLYqNdsDQ7qTGIcNWR+FrHmA==}
+
   minizlib@3.0.2:
     resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
     engines: {node: '>= 18'}
@@ -11469,6 +11475,8 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  minisearch@7.1.2: {}
+
   minizlib@3.0.2:
     dependencies:
       minipass: 7.1.2