From 5d979f05105a5e3bb12a25852f3427732c19f7ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <liuyuyang1024@yeah.net>
Date: Fri, 29 Aug 2025 19:23:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(Header):=20=E4=BC=98=E5=8C=96=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E5=88=86=E7=B1=BB=E5=92=8C=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E9=A1=B9=E7=9A=84=E6=B8=B2=E6=9F=93=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构导航栏渲染逻辑，将分类和导航项分开处理，并优化子菜单的显示条件
修改Cate接口的type字段为联合类型，明确区分分类和导航类型
调整logo图片样式，防止图片被压缩
---
 src/components/Header/index.tsx | 60 ++++++++++++++++++---------------
 src/types/app/cate.d.ts         |  2 +-
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 93859c3..bd508bb 100755
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -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>
 
           {/* 主题切换开关 */}
diff --git a/src/types/app/cate.d.ts b/src/types/app/cate.d.ts
index cd6fa65..02f8ca4 100755
--- a/src/types/app/cate.d.ts
+++ b/src/types/app/cate.d.ts
@@ -5,7 +5,7 @@ export interface Cate {
     url: string,
     icon: string,
     level: number,
-    type: string,
+    type: 'cate' | 'nav',
     order: number,
     children: Cate[]
 }