From e6e27c8ccf9679ee08405e656886ac141e3bbdd9 Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Fri, 25 Jul 2025 23:47:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=86=E5=A4=87=E4=BF=AE=E5=A4=8D=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E6=8E=A7=E5=88=B6=E5=8F=B0=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AppHeader.vue        |   6 +-
 app/components/AppSidebar.vue       | 118 ++++++++++--------------
 app/components/ContentDirectory.vue |  17 ----
 app/components/content/ProseH1.vue  |  18 ++++
 app/components/content/ProseH2.vue  |  18 ++++
 app/components/content/ProseH3.vue  |  18 ++++
 app/components/content/ProseH4.vue  |  18 ++++
 app/components/content/ProseH5.vue  |  18 ++++
 app/components/content/ProseH6.vue  |  18 ++++
 content/1.简单文档/3.usage.md       | 138 +++++-----------------------
 10 files changed, 180 insertions(+), 207 deletions(-)
 create mode 100644 app/components/content/ProseH1.vue
 create mode 100644 app/components/content/ProseH2.vue
 create mode 100644 app/components/content/ProseH3.vue
 create mode 100644 app/components/content/ProseH4.vue
 create mode 100644 app/components/content/ProseH5.vue
 create mode 100644 app/components/content/ProseH6.vue

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 7d4ff93..2d20ba5 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -27,7 +27,7 @@ const handleLoginRegister = (type: "login" | "register") => {
 </script>
 
 <template>
-  <Uheader
+  <Header
     class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
   >
     <div class="px-2 sm:px-4 lg:px-6">
@@ -67,7 +67,7 @@ const handleLoginRegister = (type: "login" | "register") => {
           </svg>
         </button>
 
-        <UContentSearchButton v-if="header?.search" class="lg:hidden" />
+        <UContentSearchButton class="lg:hidden" />
         <div class="ml-auto flex items-center space-x-2">
           <UColorModeSwitch />
 
@@ -117,7 +117,7 @@ const handleLoginRegister = (type: "login" | "register") => {
     </div>
     <!-- Theme Settings Panel -->
     <ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
-  </Uheader>
+  </Header>
 
   <!-- 登录模态框 -->
   <UModal v-model:open="isLoginModalOpen" title="登录" :dismissible="false">
diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index de0811a..46c3767 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -1,20 +1,15 @@
 <template>
   <aside
-    class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden"
-  >
+    class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden">
     <!--  Logo  -->
     <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
       <!-- Logo and Site Name -->
       <div class="h-8">
         <NuxtLink to="/" class="flex items-center space-x-3">
-          <div
-            class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md"
-          >
+          <div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
             <span class="text-white font-bold text-lg">E</span>
           </div>
-          <span class="text-lg font-bold text-gray-800 dark:text-white"
-            >简单文档</span
-          >
+          <span class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
           <TemplateMenu />
         </NuxtLink>
       </div>
@@ -23,81 +18,60 @@
     <!-- Search Box -->
     <div class="p-4 border-gray-200 dark:border-gray-700">
       <ClientOnly>
-        <UContentSearchButton
-          v-if="header?.search"
-          :collapsed="false"
-          loading="true"
-          label="搜索文档"
-          description="请输入关键词"
-          class="w-full"
-          color="primary"
-        />
+        <UContentSearchButton :collapsed="false" loading="true" label="搜索文档" description="请输入关键词" class="w-full"
+          color="primary" />
       </ClientOnly>
     </div>
 
     <!-- 可滚动的导航区域 -->
-    <div
-      class=" h-full overflow-y-auto "
+    <div class=" h-full overflow-y-auto ">
 
-    >
+      <!-- 导航 Section -->
 
-        <!-- 导航 Section -->
+      <div>
+        <NuxtLink to="/"
+          class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
+          :class="{
+            'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
+              $route.path === '/',
+          }">
+          <Icon name="lucide-home" class="text-primary mr-2" size="20" />
+          站点首页
+        </NuxtLink>
+      </div>
 
-        <div>
-          <NuxtLink
-            to="/"
-            class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
-            :class="{
-              'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
-                $route.path === '/',
-            }"
-          >
-            <Icon name="lucide-home" class="text-primary mr-2" size="20" />
-            站点首页
-          </NuxtLink>
-        </div>
+      <!-- 总目录及展示页导航 -->
+      <div class="flex items-center px-8 p-1">
+        <ContentDirectory />
+      </div>
 
-        <!-- 总目录及展示页导航 -->
-        <div class="flex items-center px-8 p-1">
-          <ContentDirectory />
-        </div>
+      <!-- 分隔线 -->
+      <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
 
-        <!-- 分隔线 -->
-        <div
-          class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5"
-        />
+      <!-- 文档目录导航 -->
+      <div class="mt-6 flex items-center justify-start pl-8 w-4/5">
 
-        <!-- 文档目录导航 -->
-        <div class="mt-6 flex items-center justify-start pl-8 w-4/5">
+        <NuxtLink>
+          <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" :ui="{
+            root: '',
+            content: '',
+            list: 'group relative -mx-5 -mt-3',
+            item: '',
+            listWithChildren: 'ms-3 border-s border-default',
+            itemWithChildren: 'flex flex-col',
+            trigger: 'font-semibold',
+            link: '',
+            linkLeadingIcon: 'shrink-0 size-5',
+            linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+            linkTrailingBadge: 'shrink-0',
+            linkTrailingBadgeSize: 'sm',
+            linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-90',
+            linkTitle: '',
+            linkTitleExternalIcon: 'size- align-top text-dimmed'
+          }" />
+        </NuxtLink>
 
-
-              <UContentNavigation 
-                highlight 
-                :navigation="navigation"
-                color="primary"
-                type="single"
-                variant="pill"
-                :ui="{
-                  root: '',
-                  content: '',
-                  list: 'group relative -mx-5 -mt-3',
-                  item: '',
-                  listWithChildren: 'ms-3 border-s border-default',
-                  itemWithChildren: 'flex flex-col',
-                  trigger: 'font-semibold',
-                  link: '',
-                  linkLeadingIcon: 'shrink-0 size-5',
-                  linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-                  linkTrailingBadge: 'shrink-0',
-                  linkTrailingBadgeSize: 'sm',
-                  linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-90',
-                  linkTitle: '',
-                  linkTitleExternalIcon: 'size- align-top text-dimmed'
-                }"
-              />
-
-
-        </div>
+      </div>
 
     </div>
   </aside>
diff --git a/app/components/ContentDirectory.vue b/app/components/ContentDirectory.vue
index c2d462e..996078f 100644
--- a/app/components/ContentDirectory.vue
+++ b/app/components/ContentDirectory.vue
@@ -5,23 +5,6 @@
       highlight 
       color="primary"
       variant="pill"
-      :ui="{
-        root: '',
-        content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
-        list: 'isolate -mx-2.5 -mt-1.5',
-        item: '',
-        listWithChildren: 'ms-5 border-s border-default',
-        itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
-        trigger: 'font-semibold',
-        link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
-        linkLeadingIcon: 'shrink-0 size-5',
-        linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-        linkTrailingBadge: 'shrink-0',
-        linkTrailingBadgeSize: 'sm',
-        linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
-        linkTitle: 'truncate',
-        linkTitleExternalIcon: 'size-3 align-top text-dimmed'
-      }"
     />
   </div>
 </template>
diff --git a/app/components/content/ProseH1.vue b/app/components/content/ProseH1.vue
new file mode 100644
index 0000000..eaa3943
--- /dev/null
+++ b/app/components/content/ProseH1.vue
@@ -0,0 +1,18 @@
+<template>
+  <h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    <NuxtLink
+      v-if="generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h1>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)));
+</script>
diff --git a/app/components/content/ProseH2.vue b/app/components/content/ProseH2.vue
new file mode 100644
index 0000000..3cc7cfe
--- /dev/null
+++ b/app/components/content/ProseH2.vue
@@ -0,0 +1,18 @@
+<template>
+  <h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)));
+</script>
diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue
new file mode 100644
index 0000000..4dadb1d
--- /dev/null
+++ b/app/components/content/ProseH3.vue
@@ -0,0 +1,18 @@
+<template>
+  <h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)));
+</script>
diff --git a/app/components/content/ProseH4.vue b/app/components/content/ProseH4.vue
new file mode 100644
index 0000000..cf17fcc
--- /dev/null
+++ b/app/components/content/ProseH4.vue
@@ -0,0 +1,18 @@
+<template>
+  <h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h4>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)));
+</script>
diff --git a/app/components/content/ProseH5.vue b/app/components/content/ProseH5.vue
new file mode 100644
index 0000000..87960a6
--- /dev/null
+++ b/app/components/content/ProseH5.vue
@@ -0,0 +1,18 @@
+<template>
+  <h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h5>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)));
+</script>
diff --git a/app/components/content/ProseH6.vue b/app/components/content/ProseH6.vue
new file mode 100644
index 0000000..07376e7
--- /dev/null
+++ b/app/components/content/ProseH6.vue
@@ -0,0 +1,18 @@
+<template>
+  <h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h6>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)));
+</script>
diff --git a/content/1.简单文档/3.usage.md b/content/1.简单文档/3.usage.md
index 911979e..443e5e1 100644
--- a/content/1.简单文档/3.usage.md
+++ b/content/1.简单文档/3.usage.md
@@ -1,127 +1,35 @@
 ---
-title: Usage
+title: 进行测试
 description: Learn how to write and customize your documentation.
 navigation:
   icon: i-lucide-sliders
 ---
 
-This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.
 
-::tip
----
-target: _blank
-to: https://ui.nuxt.com/getting-started/installation/pro/nuxt
----
-Learn more on how to take the most out of Nuxt UI Pro!
+# 这是一个H1标签
+
+## 这是一个H2标签
+
+### 这是一个H3标签
+
+#### 这是一个H4标签
+
+##### 这是一个H5标签
+
+###### 这是一个H6标签
+
+
+
+
+
+
+
+
+
+::field{name="Field" type="string" defaultValue="'default'" required}
+The _description_ can be set as prop or in the default slot with full **markdown** support.
 ::
 
-## Writing content
 
-You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
 
-## App Configuration
 
-In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components.
-
-### Header
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  header: {
-    title: '',
-    to: '/',
-    // Logo configuration
-    logo: {
-      alt: '',
-      // Light mode
-      light: '',
-      // Dark mode
-      dark: ''
-    },
-    // Show or hide the search bar
-    search: true,
-    // Show or hide the color mode button
-    colorMode: true,
-    // Customize links
-    links: [{
-      'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt-ui-pro/docs',
-      'target': '_blank',
-      'aria-label': 'GitHub'
-    }]
-  },
-})
-```
-
-### Footer
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  footer: {
-    // Update bottom left credits
-    credits: `Copyright © ${new Date().getFullYear()}`,
-    // Show or hide the color mode button
-    colorMode: false,
-    // Customize links
-    links: [{
-      'icon': 'i-simple-icons-nuxtdotjs',
-      'to': 'https://nuxt.com',
-      'target': '_blank',
-      'aria-label': 'Nuxt Website'
-    }, {
-      'icon': 'i-simple-icons-discord',
-      'to': 'https://discord.com/invite/ps2h6QT',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on Discord'
-    }, {
-      'icon': 'i-simple-icons-x',
-      'to': 'https://x.com/nuxt_js',
-      'target': '_blank',
-      'aria-label': 'Nuxt on X'
-    }, {
-      'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt/ui',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on GitHub'
-    }]
-  },
-})
-```
-
-### Table of contents
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  toc: {
-    // Title of the main table of contents
-    title: 'Table of Contents',
-    // Customize links
-    bottom: {
-      // Title of the bottom table of contents
-      title: 'Community',
-      // URL of your repository content folder
-      edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
-      links: [{
-        icon: 'i-lucide-star',
-        label: 'Star on GitHub',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        icon: 'i-lucide-book-open',
-        label: 'Nuxt UI Pro docs',
-        to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
-        target: '_blank'
-      }, {
-        icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Purchase a license',
-        to: 'https://ui.nuxt.com/pro/purchase',
-        target: '_blank'
-      }]
-    }
-  }
-})
-```
-
-::tip{target="_blank" to="https://content.nuxt.com/docs/studio/config"}
-This template integrates with Nuxt Studio, providing a visual interface for editing your documentation - perfect for non-technical contributors.
-::