feat(Header): 优化导航栏分类和导航项的渲染逻辑

重构导航栏渲染逻辑,将分类和导航项分开处理,并优化子菜单的显示条件
修改Cate接口的type字段为联合类型,明确区分分类和导航类型
调整logo图片样式,防止图片被压缩
This commit is contained in:
宇阳
2025-08-29 19:23:41 +08:00
parent 0578ac84c1
commit 5d979f0510
2 changed files with 33 additions and 29 deletions

View File

@@ -98,7 +98,7 @@ const Header = () => {
{/* logo */}
<Link href="/" className="flex items-center p-5 text-[15px] ">
{isDark ? <img src={theme?.dark_logo} alt="Logo" className="w-32 h-10 pr-5 hover:scale-90 transition-transform" /> : <img src={isPathSty || isScrolled ? theme?.light_logo : theme?.dark_logo} alt="Logo" className="w-32 h-10 pr-5 hover:scale-90 transition-transform" />}
{isDark ? <img src={theme?.dark_logo} alt="Logo" className="min-w-32 h-10 pr-5 hover:scale-90 transition-transform" /> : <img src={isPathSty || isScrolled ? theme?.light_logo : theme?.dark_logo} alt="Logo" className="min-w-32 h-10 pr-5 hover:scale-90 transition-transform" />}
</Link>
<ul className="hidden lg:flex items-center h-16">
@@ -109,9 +109,10 @@ const Header = () => {
</li>
{/* 文章分类 */}
{cateList?.map(
(one) =>
one.type === 'cate' && (
{cateList?.map((one) => (
<>
{/* 渲染分类 */}
{one.type === 'cate' && (
<li key={one.id} className="group/one relative">
<Link href={`/cate/${one.id}?name=${one.name}`} className={`flex items-center p-5 text-[15px] group-hover/one:!text-primary ${isPathSty || isScrolled ? 'text-[#333] dark:text-white' : 'text-white'}`}>
{one.icon} {one.name}
@@ -132,32 +133,35 @@ const Header = () => {
</ul>
</Show>
</li>
)
)}
)}
<li className="group/one relative">
<Link href="" className={`flex items-center p-5 px-10 text-[15px] group-hover/one:!text-primary ${isPathSty || isScrolled ? 'text-[#333] dark:text-white' : 'text-white'}`}>
🧩
<Show is={true}>
<IoIosArrowDown className="ml-2" />
</Show>
</Link>
{/* 渲染导航 */}
{one.type === 'nav' && (
<li className="group/one relative">
<Link href="" className={`flex items-center p-5 px-10 text-[15px] group-hover/one:!text-primary ${isPathSty || isScrolled ? 'text-[#333] dark:text-white' : 'text-white'}`}>
{one.icon} {one.name}
<Show is={true}>
<ul className="hidden group-hover/one:block overflow-hidden absolute top-[50px] w-full rounded-md backdrop-blur-sm bg-[rgba(255,255,255,0.95)] dark:bg-[rgba(44,51,62,0.95)]" style={{ boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08)' }}>
{cateList?.map(
(item) =>
item.type === 'nav' && (
<li key={item.id} className="group/two relative">
<Link href={`${item.url}`} className={`relative inline-block w-full p-2.5 pl-5 text-[15px] box-border text-[#666] dark:text-white hover:!text-primary transition-all after:content-[''] after:absolute after:left-2.5 after:top-1/2 after:-translate-y-1/2 after:w-0 after:h-[3px] after:bg-primary after:transition-width group-hover/two:pl-8 hover:after:w-2.5`}>
{item.icon} {item.name}
</Link>
</li>
)
)}
</ul>
</Show>
</li>
{/* 如果有子分类就显示下拉三角 */}
<Show is={!!one.children?.length}>
<IoIosArrowDown className="ml-2" />
</Show>
</Link>
<Show is={!!one.children?.length}>
<ul className="hidden group-hover/one:block overflow-hidden absolute top-[50px] w-full rounded-md backdrop-blur-sm bg-[rgba(255,255,255,0.95)] dark:bg-[rgba(44,51,62,0.95)]" style={{ boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08)' }}>
{one.children?.map((item) => (
<li key={item.id} className="group/two relative">
<Link href={`${item.url}`} className={`relative inline-block w-full p-2.5 pl-5 text-[15px] box-border text-[#666] dark:text-white hover:!text-primary transition-all after:content-[''] after:absolute after:left-2.5 after:top-1/2 after:-translate-y-1/2 after:w-0 after:h-[3px] after:bg-primary after:transition-width group-hover/two:pl-8 hover:after:w-2.5`}>
{item.icon} {item.name}
</Link>
</li>
))}
</ul>
</Show>
</li>
)}
</>
))}
</ul>
{/* 主题切换开关 */}

View File

@@ -5,7 +5,7 @@ export interface Cate {
url: string,
icon: string,
level: number,
type: string,
type: 'cate' | 'nav',
order: number,
children: Cate[]
}