From daf513f6a0e5c1ec5bd32262cfbbe32d78a41231 Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Fri, 25 Jul 2025 22:01:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=AD=A3=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.config.ts                     |  3 +++
 app/components/AppSidebar.vue         | 36 ++++++++++++++++++-------
 app/components/ContentDirectory.vue   | 30 ++++++++++++++++-----
 app/components/content/ButtonLink.vue | 22 ++++++++++++++++
 app/components/content/SmartIcon.vue  | 38 +++++++++++++++++++++++++++
 content/1.简单文档/1.index.md         | 25 ++++++++++++++++++
 6 files changed, 137 insertions(+), 17 deletions(-)
 create mode 100644 app/components/content/ButtonLink.vue
 create mode 100644 app/components/content/SmartIcon.vue

diff --git a/app/app.config.ts b/app/app.config.ts
index 01a05bb..f6b10db 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -3,6 +3,9 @@ export default defineAppConfig({
     colors: {
       primary: 'blue',
       neutral: 'zinc'
+    },
+    container: {
+      base: 'w-full h-full mx-auto px-2 sm:px-6 lg:px-8'
     }
   },
   uiPro: {
diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index 8cfc01d..1b10f25 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -37,8 +37,8 @@
 
     <!-- 可滚动的导航区域 -->
     <div
-      class="flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
-      style="max-height: calc(100vh - 200px)"
+      class=" h-full overflow-y-auto "
+
     >
 
         <!-- 导航 Section -->
@@ -68,18 +68,34 @@
         />
 
         <!-- 文档目录导航 -->
-        <div class="overflow-y-auto" style="max-height: 80%">
-          <UContainer>
-            <UPageAside>
-              <UContentNavigation
-                highlight
+        <div class="mt-6 flex justify-center items-center">
+
+
+              <UContentNavigation 
+                highlight 
                 :navigation="navigation"
                 color="primary"
                 variant="pill"
-                :ui="{}"
+                :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'
+                }"
               />
-            </UPageAside>
-          </UContainer>
+
+
         </div>
 
     </div>
diff --git a/app/components/ContentDirectory.vue b/app/components/ContentDirectory.vue
index b815f7d..c2d462e 100644
--- a/app/components/ContentDirectory.vue
+++ b/app/components/ContentDirectory.vue
@@ -1,12 +1,28 @@
 <template>
   <div>    
-      <UContentNavigation 
-        :navigation="directoryNavigation" 
-        highlight 
-        
-        color="primary"
-        variant="pill"
-      />
+    <UContentNavigation 
+      :navigation="directoryNavigation" 
+      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/ButtonLink.vue b/app/components/content/ButtonLink.vue
new file mode 100644
index 0000000..8879c54
--- /dev/null
+++ b/app/components/content/ButtonLink.vue
@@ -0,0 +1,22 @@
+<template>
+  <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
+    <UButton :variant="variant" :size="size">
+      <Icon v-if="leftIcon" :name="leftIcon" class="mr-1" />
+      <ContentSlot unwrap="p" />
+      <Icon v-if="rightIcon" :name="rightIcon" class="ml-1" />
+    </UButton>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  leftIcon?: string;
+  rightIcon?: string;
+  to?: string;
+  href?: string;
+  target?: string;
+  blank?: boolean;
+}>();
+</script>
diff --git a/app/components/content/SmartIcon.vue b/app/components/content/SmartIcon.vue
new file mode 100644
index 0000000..10b82ab
--- /dev/null
+++ b/app/components/content/SmartIcon.vue
@@ -0,0 +1,38 @@
+<template>
+  <!-- Iconify Icons -->
+  <Icon v-if="isIconName(name)" :name="name" :size="size" />
+  <!-- Emojis -->
+  <span
+    v-else-if="isEmoji(name)"
+    :style="`font-size: ${size}px;`"
+  >{{ name }}</span>
+  <!-- Link -->
+  <NuxtImg
+    v-else
+    :src="name"
+    :style="`width: ${size}px; height: ${size}px;`"
+    class="inline"
+  />
+</template>
+
+<script setup lang="ts">
+const { size = 16 } = defineProps<{
+  name: string;
+  size?: number;
+}>();
+
+function isIconName(name: string): boolean {
+  if (name.includes('http'))
+    return false;
+  
+  // 简单的图标名称检查，以 i- 开头或包含常见图标集
+  return name.startsWith('i-') || 
+         name.includes('lucide') || 
+         name.includes('heroicons') ||
+         name.includes('simple-icons');
+}
+
+function isEmoji(name: string): boolean {
+  return /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name);
+}
+</script>
diff --git a/content/1.简单文档/1.index.md b/content/1.简单文档/1.index.md
index b74c700..7a29aa2 100644
--- a/content/1.简单文档/1.index.md
+++ b/content/1.简单文档/1.index.md
@@ -9,6 +9,31 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h
 
 There are already many websites based on this template:
 
+::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
+::
+
+::steps{level="4"}
+  #### Start a fresh new project
+  
+  ```bash [Terminal]
+  npx nuxi init -t github:nuxt-ui-pro/docus
+  ```
+  
+  #### Run docus CLI to run your dev server
+  
+  ```bash [Terminal]
+  docus dev
+  ```
+::
+
+
 ::card-group
   :::card
   ---