117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<template>
|
|
<aside
|
|
class="w-64 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 flex flex-col h-screen"
|
|
>
|
|
<!-- Logo -->
|
|
<div
|
|
class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700"
|
|
>
|
|
<!-- Logo and Site Name -->
|
|
<div class="h-8">
|
|
<NuxtLink to="/" class="flex items-center space-x-3">
|
|
<div
|
|
class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md"
|
|
>
|
|
<span class="text-white font-bold text-lg">E</span>
|
|
</div>
|
|
<span class="text-lg font-bold text-gray-800 dark:text-white"
|
|
>简单文档</span
|
|
>
|
|
<TemplateMenu />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Search Box -->
|
|
<div class="p-4">
|
|
<ClientOnly>
|
|
<UContentSearchButton
|
|
v-if="header?.search"
|
|
:collapsed="false"
|
|
loading="true"
|
|
label="搜索文档"
|
|
description="请输入关键词"
|
|
class="w-full dark:bg-gray-700 text-gray-600 dark:text-gray-100"
|
|
color="primary"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
<!-- 可滚动的导航区域 -->
|
|
<div
|
|
class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500 p-4"
|
|
style="max-height: calc(100vh - 180px)"
|
|
>
|
|
<nav class="space-y-6">
|
|
<!-- 导航 Section -->
|
|
<div>
|
|
<h3
|
|
class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1"
|
|
>
|
|
导航
|
|
</h3>
|
|
<div class="space-y-2">
|
|
<NuxtLink
|
|
to="/"
|
|
class="flex items-center px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm transition-all duration-200"
|
|
:class="{
|
|
'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm':
|
|
$route.path === '/',
|
|
}"
|
|
>
|
|
<Icon name="uim:house-user" class="text-primary mr-1" size="20" />
|
|
站点首页
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<ContentDirectory />
|
|
<!-- Document Navigation -->
|
|
<UContainer>
|
|
<UPageAside>
|
|
<UContentNavigation highlight :navigation="navigation" />
|
|
</UPageAside>
|
|
</UContainer>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ContentNavigationItem } from "@nuxt/content";
|
|
const { header } = useAppConfig();
|
|
// const searchQuery = ref("");
|
|
|
|
// 折叠状态管理
|
|
// const expandedGroups = ref<Set<string>>(new Set())
|
|
|
|
// 切换分组展开状态
|
|
// const toggleGroup = (groupPath: string) => {
|
|
// if (expandedGroups.value.has(groupPath)) {
|
|
// expandedGroups.value.delete(groupPath)
|
|
// } else {
|
|
// expandedGroups.value.add(groupPath)
|
|
// }
|
|
// }
|
|
|
|
// 检查分组是否展开
|
|
// const isGroupExpanded = (groupPath: string) => {
|
|
// return expandedGroups.value.has(groupPath)
|
|
// }
|
|
|
|
// // 使用官方的 queryCollectionNavigation 方法获取导航数据
|
|
// const { data: navigation, pending, error, refresh } = await useAsyncData('content-navigation', () => {
|
|
// return queryCollectionNavigation('docs', ['description'])
|
|
// })
|
|
|
|
const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
|
|
|
|
// const handleSearch = () => {
|
|
// // 搜索功能将在后续实现
|
|
// console.log("Searching for:", searchQuery.value);
|
|
// };
|
|
|
|
// 调试信息
|
|
// console.log('AppSidebar: Navigation data:', navigation.value)
|
|
// console.log('AppSidebar: Pending:', pending.value)
|
|
// console.log('AppSidebar: Error:', error.value)
|
|
</script>
|