108 lines
3.0 KiB
Vue
108 lines
3.0 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 no-scrollbar">
|
|
<!-- 导航 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-5 flex items-center justify-start pl-2 pb-3">
|
|
<UContentNavigation
|
|
highlight
|
|
:navigation="docsNavigation"
|
|
color="primary"
|
|
type="single"
|
|
variant="pill"
|
|
trailing-icon="lucide:chevron-right"
|
|
:ui="{
|
|
root: 'w-full text-gray-700 dark:text-gray-300',
|
|
content: 'w-full',
|
|
list: 'w-full',
|
|
link: 'w-full min-w-0 text-gray-600 dark:text-gray-400',
|
|
linkTitle: 'truncate',
|
|
linkLeadingIcon: 'shrink-0',
|
|
linkTrailingIcon: 'shrink-0'
|
|
}"
|
|
/>
|
|
</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>
|
|
|
|
<style scoped>
|
|
.no-scrollbar {
|
|
/* Firefox */
|
|
scrollbar-width: none;
|
|
/* IE and Edge */
|
|
-ms-overflow-style: none;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
/* Chrome, Safari, Opera */
|
|
display: none;
|
|
}
|
|
</style>
|