修改样式

app/pages/[...slug].vue

@@ -2,12 +2,12 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageHeadline } from '#ui-pro/utils/content'
 
-definePageMeta({
-  layout: 'docs'
-})
+// definePageMeta({
+//   layout: 'docs'
+// })
 
 const route = useRoute()
-const { toc } = useAppConfig()
+const appConfig = useAppConfig()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
@@ -37,18 +37,33 @@ defineOgImageComponent('Docs', {
   headline: headline.value
 })
 
+const editLink = computed(() => {
+  if (!appConfig.github) {
+    return
+  }
+
+  return [
+    appConfig.github.url,
+    'edit',
+    appConfig.github.branch,
+    appConfig.github.rootDir,
+    'content',
+    `${page.value?.stem}.${page.value?.extension}`,
+  ].filter(Boolean).join('/')
+})
+
 const links = computed(() => {
   const links = []
-  if (toc?.bottom?.edit) {
+  if (appConfig.toc?.bottom?.edit) {
     links.push({
       icon: 'i-lucide-external-link',
       label: 'Edit this page',
-      to: `${toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
+      to: `${appConfig.toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
       target: '_blank'
     })
   }
 
-  return [...links, ...(toc?.bottom?.links || [])].filter(Boolean)
+  return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
 })
 </script>
 
@@ -57,46 +72,64 @@ const links = computed(() => {
     <UPageHeader
       :title="page.title"
       :description="page.description"
-      :links="page.links"
       :headline="headline"
-    />
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between',
+      }"
+    >
+      <template #links>
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          size="sm"
+          v-bind="link"
+        />
+
+        <DocsPageHeaderLinks />
+      </template>
+    </UPageHeader>
 
     <UPageBody>
-      <ContentRenderer
-        v-if="page"
-        :value="page"
-      />
-
-      <USeparator v-if="surround?.length" />
+      <ContentRenderer v-if="page" :value="page" />
 
+      <USeparator>
+        <div v-if="editLink" class="flex items-center gap-2 text-sm text-muted">
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="editLink"
+            target="_blank"
+            icon="i-lucide-pen"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            Edit this page
+          </UButton>
+          or
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="`${appConfig.github.url}/issues/new/choose`"
+            target="_blank"
+            icon="i-lucide-alert-circle"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            Report an issue
+          </UButton>
+        </div>
+      </USeparator>
       <UContentSurround :surround="surround" />
     </UPageBody>
 
-    <template
-      v-if="page?.body?.toc?.links?.length"
-      #right
-    >
-      <UContentToc
-        :title="toc?.title"
-        :links="page.body?.toc?.links"
-      >
-        <template
-          v-if="toc?.bottom"
-          #bottom
-        >
+    <template v-if="page?.body?.toc?.links?.length" #right>
+      <UContentToc :title="appConfig.toc?.title" :links="page.body?.toc?.links">
+        <template v-if="appConfig.toc?.bottom" #bottom>
           <div
             class="hidden lg:block space-y-6"
             :class="{ '!mt-6': page.body?.toc?.links?.length }"
           >
-            <USeparator
-              v-if="page.body?.toc?.links?.length"
-              type="dashed"
-            />
+            <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
-            <UPageLinks
-              :title="toc.bottom.title"
-              :links="links"
-            />
+            <UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
           </div>
         </template>
       </UContentToc>