From e3c9f2c25949a8a3e79d57cceca8b7ee9fd6ddb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <liuyuyang1024@yeah.net>
Date: Sat, 30 Aug 2025 17:49:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Header):=20=E4=BC=98=E5=8C=96=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 patchName 声明提前到组件顶部
- 为导航列表项添加 key 属性
- 统一子导航项的变量命名
- 修复导航链接的 href 属性
---
 src/components/Header/index.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index bd508bb..ca2bc51 100755
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -20,6 +20,8 @@ import { useConfigStore } from '@/stores';
 import { Other, Theme, Web } from '@/types/app/config';
 
 const Header = () => {
+  const patchName = usePathname();
+  
   // 是否暗黑模式
   const { isDark, setIsDark, setWeb, theme, setTheme, setOther } = useConfigStore();
 
@@ -41,7 +43,6 @@ const Header = () => {
     setOther(other);
   };
 
-  const patchName = usePathname();
   // 这些路径段不需要改变导航样式
   const isPathSty = ['/my', '/wall', '/record', '/equipment', '/tags', '/resume', '/album', '/fishpond'].some((path) => patchName.includes(path));
   // 是否改变导航样式
@@ -137,10 +138,9 @@ const Header = () => {
 
                 {/* 渲染导航 */}
                 {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'}`}>
+                  <li key={one.id} className="group/one relative">
+                    <Link href={one.url} 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={!!one.children?.length}>
                         <IoIosArrowDown className="ml-2" />
@@ -149,10 +149,10 @@ const Header = () => {
 
                     <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}
+                        {one.children?.map((two) => (
+                          <li key={two.id} className="group/two relative">
+                            <Link href={two.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`}>
+                              {two.icon} {two.name}
                             </Link>
                           </li>
                         ))}