From 51e8edcea91d4d216f8763d3ce1ca1e40751f6e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <liuyuyang1024@yeah.net>
Date: Thu, 11 Sep 2025 17:17:05 +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=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

- 将分类和导航项的渲染结构进行调整，使用div包裹每个列表项
- 统一子导航项的渲染逻辑，确保代码结构更清晰
- 修复部分列表项的key属性，提升渲染性能
---
 src/components/Header/component/AAA/index.tsx | 65 +++++++++++++------
 src/components/Header/index.tsx               | 10 +--
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/components/Header/component/AAA/index.tsx b/src/components/Header/component/AAA/index.tsx
index 5da20f4..572bb06 100755
--- a/src/components/Header/component/AAA/index.tsx
+++ b/src/components/Header/component/AAA/index.tsx
@@ -19,26 +19,53 @@ export default ({ list, open, onClose }: Props) => {
             <motion.div initial={{ width: 0, opacity: 0 }} animate={{ width: '100%', opacity: 1 }} exit={{ width: 0, opacity: 0 }} transition={{ type: 'spring', stiffness: 200, damping: 30, opacity: { duration: 0.2 } }} className="overflow-auto p-5 dark:border-[#2b333e] bg-[rgba(255,255,255,0.9)] dark:bg-[rgba(44,51,62,0.9)] backdrop-blur-[5px] hide_sliding">
               <ul className="flex flex-col space-y-2">
                 {list?.map((one) => (
-                  <li key={one.id} className="group/one relative hover:bg-[#e0e6ec] dark:hover:bg-[#495362] rounded-md  ">
-                    <Link href={`${one.type === 'cate' ? `/cate/${one.id}?name=${one.name}` : one.url}`} className={`flex justify-between items-center p-3 px-5 text-[15px] group-hover/one:!text-primary   text-[#333] dark:text-white whitespace-nowrap`} onClick={onClose}>
-                      {one.icon} {one.name}
-                      <Show is={!!one.children.length}>
-                        <IoIosArrowDown className="ml-2" />
-                      </Show>
-                    </Link>
+                  <div key={one.id}>
+                    {one.type === 'cate' && (
+                      <li className="group/one relative hover:bg-[#e0e6ec] dark:hover:bg-[#495362] rounded-md  ">
+                        <Link href={`/cate/${one.id}?name=${one.name}`} className={`flex justify-between items-center p-3 px-5 text-[15px] group-hover/one:!text-primary   text-[#333] dark:text-white whitespace-nowrap`} onClick={onClose}>
+                          {one.icon} {one.name}
+                          <Show is={!!one.children.length}>
+                            <IoIosArrowDown className="ml-2" />
+                          </Show>
+                        </Link>
 
-                    <Show is={!!one.children.length}>
-                      <ul className="overflow-hidden top-[50px] w-full rounded-md">
-                        {one.children?.map((two) => (
-                          <li key={two.id} className="group/two">
-                            <Link href={`/cate/${two.id}?name=${two.name}`} className="inline-block w-full p-2.5 pl-10 text-[15px] box-border text-[#666] dark:text-[#8c9ab1] hover:!text-primary" onClick={onClose}>
-                              {two.name}
-                            </Link>
-                          </li>
-                        ))}
-                      </ul>
-                    </Show>
-                  </li>
+                        <Show is={!!one.children.length}>
+                          <ul className="overflow-hidden top-[50px] w-full rounded-md">
+                            {one.children?.map((two) => (
+                              <li key={two.id} className="group/two">
+                                <Link href={`/cate/${two.id}?name=${two.name}`} className="inline-block w-full p-2.5 pl-10 text-[15px] box-border text-[#666] dark:text-[#8c9ab1] hover:!text-primary" onClick={onClose}>
+                                  {two.name}
+                                </Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </Show>
+                      </li>
+                    )}
+
+                    {one.type === 'nav' && (
+                      <li className="group/one relative hover:bg-[#e0e6ec] dark:hover:bg-[#495362] rounded-md  ">
+                        <Link href={one.url} className={`flex justify-between items-center p-3 px-5 text-[15px] group-hover/one:!text-primary   text-[#333] dark:text-white whitespace-nowrap`} onClick={onClose}>
+                          {one.icon} {one.name}
+                          <Show is={!!one.children.length}>
+                            <IoIosArrowDown className="ml-2" />
+                          </Show>
+                        </Link>
+
+                        <Show is={!!one.children.length}>
+                          <ul className="overflow-hidden top-[50px] w-full rounded-md">
+                            {one.children?.map((two) => (
+                              <li key={two.id} className="group/two">
+                                <Link href={two.url} className="inline-block w-full p-2.5 pl-10 text-[15px] box-border text-[#666] dark:text-[#8c9ab1] hover:!text-primary" onClick={onClose}>
+                                  {two.icon} {two.name}
+                                </Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </Show>
+                      </li>
+                    )}
+                  </div>
                 ))}
               </ul>
             </motion.div>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index ca2bc51..f135cd7 100755
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -21,7 +21,7 @@ import { Other, Theme, Web } from '@/types/app/config';
 
 const Header = () => {
   const patchName = usePathname();
-  
+
   // 是否暗黑模式
   const { isDark, setIsDark, setWeb, theme, setTheme, setOther } = useConfigStore();
 
@@ -111,10 +111,10 @@ const Header = () => {
 
             {/* 文章分类 */}
             {cateList?.map((one) => (
-              <>
+              <div key={one.id}>
                 {/* 渲染分类 */}
                 {one.type === 'cate' && (
-                  <li key={one.id} className="group/one relative">
+                  <li 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}
                       <Show is={!!one.children.length}>
@@ -138,7 +138,7 @@ const Header = () => {
 
                 {/* 渲染导航 */}
                 {one.type === 'nav' && (
-                  <li key={one.id} className="group/one relative">
+                  <li 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}
                       {/* 如果有子分类就显示下拉三角 */}
@@ -160,7 +160,7 @@ const Header = () => {
                     </Show>
                   </li>
                 )}
-              </>
+              </div>
             ))}
           </ul>