准备修复一些控制台警告

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">

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
+          <div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
-            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 class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
-            >简单文档</span
-          >
           <TemplateMenu />
         </NuxtLink>
       </div>
@@ -23,35 +18,23 @@
     <!-- Search Box -->
     <div class="p-4 border-gray-200 dark:border-gray-700">
       <ClientOnly>
-        <UContentSearchButton
+        <UContentSearchButton :collapsed="false" loading="true" label="搜索文档" description="请输入关键词" class="w-full"
-          v-if="header?.search"
+          color="primary" />
-          :collapsed="false"
-          loading="true"
-          label="搜索文档"
-          description="请输入关键词"
-          class="w-full"
-          color="primary"
-        />
       </ClientOnly>
     </div>
 
     <!-- 可滚动的导航区域 -->
-    <div
+    <div class=" h-full overflow-y-auto ">
-      class=" h-full overflow-y-auto "
-
-    >
 
       <!-- 导航 Section -->
 
       <div>
-          <NuxtLink
+        <NuxtLink to="/"
-            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>
@@ -63,21 +46,13 @@
       </div>
 
       <!-- 分隔线 -->
-        <div
+      <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
-          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">
 
-
+        <NuxtLink>
-              <UContentNavigation 
+          <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" :ui="{
-                highlight 
-                :navigation="navigation"
-                color="primary"
-                type="single"
-                variant="pill"
-                :ui="{
             root: '',
             content: '',
             list: 'group relative -mx-5 -mt-3',
@@ -93,9 +68,8 @@
             linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-90',
             linkTitle: '',
             linkTitleExternalIcon: 'size- align-top text-dimmed'
-                }"
+          }" />
-              />
+        </NuxtLink>
-
 
       </div>
 

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>

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>

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>

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>

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>

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>

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>

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
+# 这是一个H1标签
----
+
-target: _blank
+## 这是一个H2标签
-to: https://ui.nuxt.com/getting-started/installation/pro/nuxt
+
----
+### 这是一个H3标签
-Learn more on how to take the most out of Nuxt UI Pro!
+
+#### 这是一个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.
-::