147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import type { ContentNavigationItem } from '@nuxt/content'
|
|
import { findPageHeadline } from '#ui-pro/utils/content'
|
|
|
|
// definePageMeta({
|
|
// layout: 'docs'
|
|
// })
|
|
|
|
const route = useRoute()
|
|
const appConfig = useAppConfig()
|
|
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
|
|
|
// 获取主题系统的字号设置
|
|
const { selectedFontSize } = useTheme()
|
|
|
|
// 计算页面内容的字号类
|
|
const pageFontSizeClass = computed(() => {
|
|
return `text-${selectedFontSize.value}`
|
|
})
|
|
|
|
const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
|
|
if (!page.value) {
|
|
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
|
|
}
|
|
|
|
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
|
|
return queryCollectionItemSurroundings('docs', route.path, {
|
|
fields: ['description']
|
|
})
|
|
})
|
|
|
|
const title = page.value.seo?.title || page.value.title
|
|
const description = page.value.seo?.description || page.value.description
|
|
|
|
useSeoMeta({
|
|
title,
|
|
ogTitle: title,
|
|
description,
|
|
ogDescription: description
|
|
})
|
|
|
|
const headline = computed(() => findPageHeadline(navigation?.value, page.value))
|
|
|
|
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 (appConfig.toc?.bottom?.edit) {
|
|
links.push({
|
|
icon: 'i-lucide-external-link',
|
|
label: 'Edit this page',
|
|
to: `${appConfig.toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
|
|
target: '_blank'
|
|
})
|
|
}
|
|
|
|
return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UPage v-if="page" :class="pageFontSizeClass">
|
|
<UPageHeader
|
|
:title="page.title"
|
|
:description="page.description"
|
|
: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>
|
|
<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="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" />
|
|
|
|
<UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
|
|
</div>
|
|
</template>
|
|
</UContentToc>
|
|
</template>
|
|
</UPage>
|
|
</template>
|