86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<UPage>
|
|
<div
|
|
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"
|
|
>
|
|
<div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
|
|
<!-- Logo -->
|
|
<LogoPro />
|
|
</div>
|
|
|
|
<!-- Search Box -->
|
|
<div class="p-4 border-gray-200 dark:border-gray-700">
|
|
<ClientOnly>
|
|
<UContentSearchButton
|
|
:collapsed="false"
|
|
label="搜索文档"
|
|
class="w-full"
|
|
color="primary"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
|
|
<!-- 可滚动的导航区域 -->
|
|
<div class=" h-full overflow-y-auto ">
|
|
<!-- 导航 Section -->
|
|
|
|
<div>
|
|
<NuxtLink
|
|
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="{
|
|
' text-blue-600 dark:text-blue-400 ':
|
|
useRoute().path === '/'
|
|
}"
|
|
>
|
|
<Icon
|
|
name="lucide-home"
|
|
class="text-primary mr-2"
|
|
size="20"
|
|
/>
|
|
站点首页
|
|
</NuxtLink>
|
|
<div class="px-2">
|
|
<DocsAsideLeftTop />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分隔线 -->
|
|
<div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-7/9 mx-5" />
|
|
|
|
<!-- 文档目录导航 -->
|
|
<div class="mt-6 flex items-center justify-start pl-4 w-full pb-3">
|
|
<UContentNavigation
|
|
highlight
|
|
:navigation="docsNavigation"
|
|
color="primary"
|
|
type="single"
|
|
variant="pill"
|
|
trailing-icon="lucide:chevron-right"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UPage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ContentNavigationItem } from '@nuxt/content'
|
|
|
|
const navigation = inject<Ref<ContentNavigationItem[]>>('blogNavigation')
|
|
|
|
// 提取 docs 目录下的子目录作为顶级导航
|
|
const docsNavigation = computed(() => {
|
|
if (!navigation?.value) return []
|
|
// 查找 docs 目录
|
|
const docsItem = navigation.value.find(item => item.title === 'blog' || item.path === '/blog')
|
|
|
|
if (!docsItem?.children) return []
|
|
|
|
// 返回 docs 目录下的子目录
|
|
return docsItem.children
|
|
})
|
|
</script>
|