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 01:10:05 +08:00
parent 9469b530a1
commit 9dafb6ff47
6 changed files with 85 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/app.config.ts
View File

@@ -59,24 +59,24 @@ export default defineAppConfig({
}]
},
toc: {
title: 'Table of Contents',
title: '当前页',
bottom: {
title: 'Community',
edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
links: [{
icon: 'i-lucide-star',
label: 'Star on GitHub',
to: 'https://github.com/nuxt/ui',
label: 'GitHub',
to: 'https://github.com/estel-li',
target: '_blank'
}, {
icon: 'i-lucide-book-open',
label: 'Nuxt UI Pro docs',
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
icon: 'i-lucide-home',
label: '稷维科技',
to: 'https://www.xajiwei.com',
target: '_blank'
}, {
icon: 'i-simple-icons-nuxtdotjs',
label: 'Purchase a license',
to: 'https://ui.nuxt.com/pro/purchase',
label: '个人博客',
to: 'https://lijue.me',
target: '_blank'
}]
}

91
app/components/AppSidebar.vue
View File

@@ -1,6 +1,6 @@
<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"
class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700"
>
<!-- Logo -->
<div
@@ -20,57 +20,82 @@
<TemplateMenu />
</NuxtLink>
</div>
</div>
<!-- Search Box -->
<div class="p-4">
<div class="p-4 border-gray-200 dark:border-gray-700">
<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"
/>
<UContentSearchButton
v-if="header?.search"
:collapsed="false"
loading="true"
label="搜索文档"
description="请输入关键词"
class="w-full"
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)"
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"
style="max-height: calc(100vh - 200px)"
>
<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">
<div>
<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="flex items-center 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"
:class="{
'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm':
'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
$route.path === '/',
}"
>
<Icon name="uim:house-user" class="text-primary mr-1" size="20" />
<Icon name="uim:house-user" class="text-primary mr-2" size="20" />
站点首页
</NuxtLink>
</div>
<!-- 分隔线 -->
<div class="flex items-center px-6 p-1 ">
<ContentDirectory />
</div>
<ContentDirectory />
<!-- Document Navigation -->
<UContainer>
<UPageAside>
<UContentNavigation highlight :navigation="navigation" />
</UPageAside>
</UContainer>
</nav>
<!-- 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'
-->
<!-- 分隔线 -->
<!-- Document Navigation -->
<UContainer>
<UPageAside>
<UContentNavigation
highlight
:navigation="navigation"
color="primary"
variant="pill"
:ui="{
}"
/>
</UPageAside>
</UContainer>
</div>
</aside>
</template>

18
app/components/ContentDirectory.vue
View File

@@ -1,15 +1,11 @@
<template>
<div>
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1">
文档目录
</h3>
<UContentNavigation
:navigation="directoryNavigation"
highlight
color="primary"
variant="pill"
/>
<div>
<UContentNavigation
:navigation="directoryNavigation"
highlight
color="primary"
variant="pill"
/>
</div>
</template>

2
app/layouts/default.vue
View File

@@ -23,7 +23,7 @@
<!-- Right Content Area -->
<div class="flex-1 lg:ml-64 flex flex-col">
<!-- Fixed Header -->
<AppHeader />
<AppHeader class="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" />
<!-- Main Content -->
<main class="flex-1 overflow-y-auto pt-16">

13
app/pages/[...slug].vue
View File

@@ -65,7 +65,7 @@ const links = computed(() => {
if (appConfig.toc?.bottom?.edit) {
links.push({
icon: 'i-lucide-external-link',
label: 'Edit this page',
label: '编辑页面',
to: `${appConfig.toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
target: '_blank'
})
@@ -110,7 +110,7 @@ const links = computed(() => {
icon="i-lucide-pen"
:ui="{ leadingIcon: 'size-4' }"
>
Edit this page
编辑页面
</UButton>
or
<UButton
@@ -121,7 +121,7 @@ const links = computed(() => {
icon="i-lucide-alert-circle"
:ui="{ leadingIcon: 'size-4' }"
>
Report an issue
提交问题
</UButton>
</div>
</USeparator>
@@ -129,11 +129,13 @@ const links = computed(() => {
</UPageBody>
<template v-if="page?.body?.toc?.links?.length" #right>
<div class="fixed top-24 right-18 max-h-[80vh] overflow-y-auto">
<UContentToc :title="appConfig.toc?.title" :links="page.body?.toc?.links">
<template v-if="appConfig.toc?.bottom" #bottom>
<div
class="hidden lg:block space-y-6"
:class="{ '!mt-6': page.body?.toc?.links?.length }"
class="hidden lg:block space-y-6 "
:class="{ '!mt-5': page.body?.toc?.links?.length }"
>
<USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
@@ -141,6 +143,7 @@ const links = computed(() => {
</div>
</template>
</UContentToc>
</div>
</template>
</UPage>
</template>