增加页面组件

app/app.config.ts

@@ -22,12 +22,6 @@ export default defineAppConfig({
         close: 'absolute top-4 end-4'
       },
       variants: {
-        transition: {
-          true: {
-            overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
-            content: 'data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]'
-          }
-        },
         fullscreen: {
           true: {
             content: 'inset-0'

app/components/AppSidebar.vue

@@ -50,23 +50,7 @@
 
       <!-- 文档目录导航 -->
       <div class="mt-6 flex items-center justify-start pl-8 w-4/5">
-          <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'
-          }" />
+          <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
       </div>
     </div>
   </div>

app/components/docs/DocsAsideLeftTop.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

app/components/docs/DocsAsideRightBottom.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div
+    v-if="appConfig.toc?.bottom?.links?.length"
+    class="hidden lg:block space-y-6"
+  >
+    <USeparator type="dashed" />
+
+    <UPageLinks
+      :title="appConfig.toc?.bottom?.title || 'Links'"
+      :links="appConfig.toc?.bottom?.links"
+    />
+  </div>
+</template>

app/components/docs/DocsPageHeaderLinks.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const route = useRoute()
+const toast = useToast()
+const { copy, copied } = useClipboard()
+
+const markdownLink = computed(() => `${window?.location?.origin}/raw${route.path}.md`)
+
+const items = [
+  {
+    label: 'Copy Markdown link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      copy(markdownLink.value)
+
+      toast.add({
+        title: 'Markdown link copied to clipboard',
+        icon: 'i-lucide-check-circle',
+        color: 'success',
+      })
+    },
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    to: markdownLink.value,
+  },
+  {
+    label: 'Open in ChatGPT',
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+  },
+  {
+    label: 'Open in Claude',
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+  },
+]
+</script>
+
+<template>
+  <UButtonGroup size="sm">
+    <UButton
+      label="Copy page"
+      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :ui="{
+        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5'],
+      }"
+      @click="copy(markdownLink)"
+    />
+
+    <UDropdownMenu
+      size="sm"
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8,
+      }"
+      :ui="{
+        content: 'w-48',
+      }"
+    >
+      <UButton
+        icon="i-lucide-chevron-down"
+        color="neutral"
+        variant="outline"
+      />
+    </UDropdownMenu>
+  </UButtonGroup>
+</template>