准备修复一些控制台警告

This commit is contained in:
2025-07-25 23:47:01 +08:00
parent c84992cf87
commit e6e27c8ccf
10 changed files with 180 additions and 207 deletions

View File

@@ -1,20 +1,15 @@
<template>
<aside
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"
>
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">
<!-- 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"
>
<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
>
<span class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
<TemplateMenu />
</NuxtLink>
</div>
@@ -23,81 +18,60 @@
<!-- Search Box -->
<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"
color="primary"
/>
<UContentSearchButton :collapsed="false" loading="true" label="搜索文档" description="请输入关键词" class="w-full"
color="primary" />
</ClientOnly>
</div>
<!-- 可滚动的导航区域 -->
<div
class=" h-full overflow-y-auto "
<div class=" h-full overflow-y-auto ">
>
<!-- 导航 Section -->
<!-- 导航 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">
<ContentDirectory />
</div>
<!-- 总目录及展示页导航 -->
<div class="flex items-center px-8 p-1">
<ContentDirectory />
</div>
<!-- 分隔线 -->
<div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
<!-- 分隔线 -->
<div
class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5"
/>
<!-- 文档目录导航 -->
<div class="mt-6 flex items-center justify-start pl-8 w-4/5">
<!-- 文档目录导航 -->
<div class="mt-6 flex items-center justify-start pl-8 w-4/5">
<NuxtLink>
<UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" :ui="{
root: '',
content: '',
list: 'group relative -mx-5 -mt-3',
item: '',
listWithChildren: 'ms-3 border-s border-default',
itemWithChildren: 'flex flex-col',
trigger: 'font-semibold',
link: '',
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-90',
linkTitle: '',
linkTitleExternalIcon: 'size- align-top text-dimmed'
}" />
</NuxtLink>
<UContentNavigation
highlight
:navigation="navigation"
color="primary"
type="single"
variant="pill"
:ui="{
root: '',
content: '',
list: 'group relative -mx-5 -mt-3',
item: '',
listWithChildren: 'ms-3 border-s border-default',
itemWithChildren: 'flex flex-col',
trigger: 'font-semibold',
link: '',
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-90',
linkTitle: '',
linkTitleExternalIcon: 'size- align-top text-dimmed'
}"
/>
</div>
</div>
</div>
</aside>