65 lines
2.5 KiB
Vue
65 lines
2.5 KiB
Vue
<template>
|
||
<div>
|
||
<UContentNavigation
|
||
:navigation="directoryNavigation"
|
||
highlight
|
||
color="primary"
|
||
variant="pill"
|
||
:ui="{
|
||
root: '',
|
||
content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
|
||
list: 'isolate -mx-2.5 -mt-1.5',
|
||
item: '',
|
||
listWithChildren: 'ms-5 border-s border-default',
|
||
itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
|
||
trigger: 'font-semibold',
|
||
link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
|
||
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-180',
|
||
linkTitle: 'truncate',
|
||
linkTitleExternalIcon: 'size-3 align-top text-dimmed'
|
||
}"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { ContentNavigationItem } from '@nuxt/content'
|
||
|
||
// 获取导航数据
|
||
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
||
|
||
// 处理导航数据，只显示一级目录和根目录文件
|
||
const directoryNavigation = computed(() => {
|
||
if (!navigation?.value) return []
|
||
|
||
return navigation.value.map(item => {
|
||
// 如果是根目录文件（没有 children），直接返回
|
||
if (!item.children || item.children.length === 0) {
|
||
return {
|
||
title: item.title,
|
||
path: item.path,
|
||
icon: (item.icon as string) || 'i-lucide-file-text',
|
||
active: Boolean(item.active)
|
||
}
|
||
}
|
||
|
||
// 如果是一级目录，只保留目录本身，不显示子项
|
||
return {
|
||
title: item.title,
|
||
path: item.path,
|
||
icon: (item.icon as string) || 'i-lucide-folder',
|
||
active: Boolean(item.active),
|
||
// 不包含 children，这样就不会展开显示子项
|
||
children: []
|
||
}
|
||
}).filter(item => item.title && item.path) // 过滤掉空项
|
||
})
|
||
|
||
// 调试信息
|
||
// console.log('ContentDirectory: Navigation data:', navigation.value)
|
||
// console.log('ContentDirectory: Processed navigation:', directoryNavigation.value)
|
||
</script> |