estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复导航栏滚动逻辑

Browse Source
This commit is contained in:
estel
2025-07-25 15:34:01 +08:00
parent 63a44d5a58
commit ab0d544c41
13 changed files with 3729 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/components/AppSidebar.vue
View File

@@ -3,9 +3,7 @@
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"
>
<!-- Logo -->
<div
class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700"
>
<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">
@@ -23,7 +21,7 @@
</div>
<!-- Search Box -->
<div class="p-4 border-gray-200 dark:border-gray-700">
<div class="p-4 border-gray-200 dark:border-gray-700">
<ClientOnly>
<UContentSearchButton
v-if="header?.search"
@@ -39,62 +37,50 @@
<!-- 可滚动的导航区域 -->
<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"
class="flex-1 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"
style="max-height: calc(100vh - 200px)"
>
<!-- 导航 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="{
'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
$route.path === '/',
}"
>
<Icon name="lucide-home" class="text-primary mr-2" size="20" />
站点首页
</NuxtLink>
</div>
<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="{
'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
$route.path === '/',
}"
>
<Icon name="lucide-home" class="text-primary mr-2" size="20" />
站点首页
</NuxtLink>
</div>
<!-- 分隔线 -->
<div class="flex items-center px-8 p-1 ">
<!-- 总目录及展示页导航 -->
<div class="flex items-center px-8 p-1">
<ContentDirectory />
</div>
<div class="mt-4 border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
<!-- root: 'space-y-1',
list: 'space-y-1',
item: '',
listWithChildren: 'ms-4 border-s border-gray-200 dark:border-gray-700',
itemWithChildren: 'flex flex-col',
trigger: 'font-medium text-sm',
link: 'group relative w-full px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200 flex items-center gap-2',
linkLeadingIcon: 'shrink-0 size-5',
linkTrailingIcon: 'size-4 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
linkTitle: 'truncate'
-->
<!-- 分隔线 -->
<div
class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5"
/>
<!-- Document Navigation -->
<!-- 文档目录导航 -->
<div class="overflow-y-auto" style="max-height: 80%">
<UContainer>
<UPageAside>
<UContentNavigation
highlight
<UContentNavigation
highlight
:navigation="navigation"
color="primary"
variant="pill"
:ui="{
}"
:ui="{}"
/>
</UPageAside>
</UContainer>
</div>
</div>
</aside>