From f3d3a2954fafa1af8cb3e99ccb751e528a08e8fc Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Wed, 18 Mar 2026 18:03:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AF=BC=E8=88=AA=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E8=8F=9C=E5=8D=95=E9=87=8D=E6=9E=84=E4=B8=BA=E6=96=B9?=
 =?UTF-8?q?=E6=A1=88=20C=20=E6=B7=B7=E5=90=88=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- public/header.html: 去掉左右分栏，改为二级分组标题 + 三级国旗链接网格
- css/nav-mega-menu.css: 居中收窄面板(720px)，分组标题+网格布局
- js/nav-third-level.js: 清空旧的面板切换脚本（不再需要）
- 下拉面板不再全宽铺开，视觉更精致紧凑
---
 css/nav-mega-menu.css | 267 +++++++++++++-----------------------------
 js/nav-third-level.js |  53 +--------
 public/header.html    | 124 +++++++++-----------
 3 files changed, 138 insertions(+), 306 deletions(-)

diff --git a/css/nav-mega-menu.css b/css/nav-mega-menu.css
index 8a8f2bb..f1d565b 100644
--- a/css/nav-mega-menu.css
+++ b/css/nav-mega-menu.css
@@ -1,146 +1,105 @@
 /* ============================================================
-   顶部导航下拉菜单样式 - akile.io 深色毛玻璃风格
+   导航下拉菜单 — 方案 C 混合型
+   二级分组标题 + 三级国旗链接网格，居中收窄面板
    ============================================================ */
 
-/* 下拉容器 */
+/* ── 下拉外层容器 ── */
 .nav-cont {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
-  background: rgba(14, 16, 26, 0.98);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
   z-index: 1000;
   overflow: hidden;
   transition: height 0.25s ease-out;
   height: 0;
+  /* 不设背景，由 inner 负责 */
 }
 
-/* Mega Menu 容器 */
-.nav-cont-menu.mega-menu {
-  display: none;
-  height: 100%;
-}
-
-/* inner 布局 */
-.nav-content {
+/* ── 下拉内层 —— 居中收窄面板 ── */
+.nav-dropdown-inner {
   display: flex;
-  max-width: 1400px;
-  margin: 0 auto;
-  height: 100%;
-  min-height: 320px;
+  justify-content: center;
   padding: 0;
 }
 
-/* ── 左侧二级菜单栏 ── */
-.nav-left-sidebar {
-  width: 220px;
-  flex-shrink: 0;
-  background: rgba(255, 255, 255, 0.03);
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 16px 8px;
-  overflow-y: auto;
+/* ── 每个一级导航对应的菜单面板 ── */
+.nav-cont-menu {
+  display: none;
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+  background: rgba(14, 16, 26, 0.98);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: none;
+  border-radius: 0 0 14px 14px;
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55),
+              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+  padding: 20px 0 12px;
 }
 
-/* 二级分类项 */
-.nav-category-item {
+.nav-cont-menu.nav-cont-empty {
+  display: none !important;
+}
+
+/* ── 分组容器 (方案 C 核心) ── */
+.nav-groups {
+  padding: 0 24px;
+}
+
+.nav-group {
+  margin-bottom: 8px;
+}
+
+.nav-group:last-child {
+  margin-bottom: 0;
+}
+
+/* ── 二级分组标题行 ── */
+.nav-group-title {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 11px 14px;
-  color: rgba(203, 213, 225, 0.75);
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
+  gap: 8px;
+  padding: 8px 8px 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(148, 163, 184, 0.7);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  margin-bottom: 6px;
   user-select: none;
 }
 
-.nav-category-item:hover,
-.nav-category-item.active {
-  background: rgba(59, 130, 246, 0.12);
-  color: #93C5FD;
-}
-
-.nav-category-item .category-icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.nav-category-item .category-icon img {
-  width: 100%;
-  height: 100%;
+.nav-group-icon {
+  width: 18px;
+  height: 18px;
   object-fit: contain;
+  opacity: 0.7;
 }
 
-.nav-category-name {
-  font-weight: 500;
+.nav-group-desc {
+  font-weight: 400;
+  font-size: 11px;
+  color: rgba(148, 163, 184, 0.45);
+  letter-spacing: 0;
+  text-transform: none;
 }
 
-.nav-category-desc {
-  font-size: 12px;
-  color: rgba(148, 163, 184, 0.6);
-  margin-top: 2px;
-  display: block;
-}
-
-/* ── 右侧三级菜单区域 ── */
-.nav-right-content {
-  flex: 1;
-  padding: 20px 28px;
-  overflow-y: auto;
-}
-
-/* 三级菜单面板 */
-.nav-third-panel {
-  display: none;
-}
-
-.nav-third-panel.active {
-  display: block;
-  animation: navPanelFadeIn 0.2s ease;
-}
-
-/* 三级菜单标题 */
-.nav-third-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: rgba(148, 163, 184, 0.6);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-/* 三级菜单网格 */
-.nav-third-grid {
+/* ── 三级链接网格 ── */
+.nav-group-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 4px 8px;
+  gap: 2px;
 }
 
-/* 三级菜单项容器 */
-.nav-cont-menu .nav-third-item {
-  margin: 0;
-  padding: 0;
-}
-
-/* 三级菜单链接 - akile 风格：纯行 hover，无卡片 */
-.nav-cont-menu .nav-third-grid .nav-third-link,
-.nav-third-panel .nav-third-link {
+/* ── 三级链接项 ── */
+.nav-grid-link {
   display: flex;
   align-items: center;
   gap: 10px;
-  width: 100%;
   padding: 10px 12px;
   border-radius: 8px;
   color: rgba(226, 232, 240, 0.85);
@@ -148,23 +107,13 @@
   font-weight: 500;
   text-decoration: none;
   transition: background 0.15s ease, color 0.15s ease;
-  box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  /* 无边框、无卡片背景 */
-  background: transparent;
-  border: none;
 }
 
-.nav-cont-menu .nav-third-grid .nav-third-link::before,
-.nav-third-panel .nav-third-link::before {
-  content: none; /* 移除旧的 › 箭头前缀 */
-}
-
-.nav-cont-menu .nav-third-grid .nav-third-link:hover,
-.nav-third-panel .nav-third-link:hover {
-  background: rgba(255, 255, 255, 0.06);
+.nav-grid-link:hover {
+  background: rgba(255, 255, 255, 0.07);
   color: #fff;
 }
 
@@ -173,48 +122,42 @@
   width: 22px;
   height: 16px;
   flex-shrink: 0;
-  vertical-align: middle;
   object-fit: cover;
   border-radius: 3px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
 
-/* ── 只有二级菜单时的横向网格（无三级） ── */
+/* ── 纯二级：简单网格 ── */
 .nav-simple-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 4px 8px;
-  padding: 20px 28px;
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  box-sizing: border-box;
+  gap: 2px;
+  padding: 4px 24px 8px;
 }
 
-.nav-simple-grid .nav-simple-item {
+.nav-simple-item {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 11px 14px;
+  padding: 10px 12px;
   border-radius: 8px;
   color: rgba(226, 232, 240, 0.85);
-  text-decoration: none;
   font-size: 14px;
   font-weight: 500;
+  text-decoration: none;
   transition: background 0.15s ease, color 0.15s ease;
-  /* 无卡片边框背景 */
   background: transparent;
   border: none;
 }
 
-.nav-simple-grid .nav-simple-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+.nav-simple-item:hover {
+  background: rgba(255, 255, 255, 0.07);
   color: #fff;
 }
 
 .nav-simple-icon {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   flex-shrink: 0;
 }
 
@@ -228,76 +171,26 @@
   font-size: 14px;
   font-weight: 500;
   color: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .nav-simple-desc {
   font-size: 12px;
-  color: rgba(148, 163, 184, 0.65);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: rgba(148, 163, 184, 0.6);
   margin-top: 2px;
 }
 
-/* ── 菜单底部「更多」区域 ── */
-.nav-menu-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 12px 28px;
-}
-
-.nav-menu-footer a {
-  font-size: 13px;
-  color: rgba(148, 163, 184, 0.7);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.nav-menu-footer a:hover {
-  color: #93C5FD;
-}
-
-/* ── 空菜单占位 ── */
+/* ── 空菜单 ── */
 .nav-cont-menu.nav-cont-empty {
   display: none;
 }
 
-/* ── 动画 ── */
-@keyframes navPanelFadeIn {
-  from {
-    opacity: 0;
-    transform: translateX(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 /* ── 响应式 ── */
 @media (max-width: 768px) {
   .nav-cont {
     display: none !important;
   }
 
-  .nav-content {
-    flex-direction: column;
-    min-height: auto;
-  }
-
-  .nav-left-sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
-
-  .nav-right-content {
-    padding: 16px;
-  }
-
-  .nav-third-grid {
+  .nav-group-grid {
     grid-template-columns: 1fr;
   }
 }
\ No newline at end of file
diff --git a/js/nav-third-level.js b/js/nav-third-level.js
index a6a8ce5..930d0d4 100644
--- a/js/nav-third-level.js
+++ b/js/nav-third-level.js
@@ -1,50 +1,3 @@
-// 三级导航菜单交互脚本
-(function () {
-    'use strict';
-
-    // 初始化三级导航
-    function initThirdLevelNav() {
-        const navContMenus = document.querySelectorAll('.nav-cont-menu.mega-menu');
-
-        navContMenus.forEach(menu => {
-            const categoryItems = menu.querySelectorAll('.nav-category-item');
-            const thirdPanels = menu.querySelectorAll('.nav-third-panel');
-
-            if (categoryItems.length === 0 || thirdPanels.length === 0) {
-                return; // 没有三级菜单
-            }
-
-            // 默认激活第一个
-            if (categoryItems[0]) {
-                categoryItems[0].classList.add('active');
-            }
-            if (thirdPanels[0]) {
-                thirdPanels[0].classList.add('active');
-            }
-
-            // 绑定hover事件
-            categoryItems.forEach((item, index) => {
-                item.addEventListener('mouseenter', function () {
-                    // 移除所有active状态
-                    categoryItems.forEach(cat => cat.classList.remove('active'));
-                    thirdPanels.forEach(panel => panel.classList.remove('active'));
-
-                    // 激活当前
-                    this.classList.add('active');
-                    const categoryIndex = this.getAttribute('data-category-index');
-                    const targetPanel = menu.querySelector(`.nav-third-panel[data-panel-index="${categoryIndex}"]`);
-                    if (targetPanel) {
-                        targetPanel.classList.add('active');
-                    }
-                });
-            });
-        });
-    }
-
-    // DOM加载完成后初始化
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initThirdLevelNav);
-    } else {
-        initThirdLevelNav();
-    }
-})();
+// nav-third-level.js
+// 方案 C 混合型：三级菜单直接平铺展示，不需要面板切换逻辑
+// 保留此文件以避免 header.html 中的 <script src> 引用报 404
diff --git a/public/header.html b/public/header.html
index 3b0772b..43e6d4c 100644
--- a/public/header.html
+++ b/public/header.html
@@ -60,90 +60,76 @@
   </nav>
 
   <div class="nav-cont">
-    <div class="section-content">
+    <div class="nav-dropdown-inner">
       {if isset($data.header_nav) && !empty($data.header_nav)}
       {foreach $data.header_nav as $k=>$item}
       {if isset($item.children) && !empty($item.children)}
-      <div class="nav-cont-menu mega-menu animated">
-        <div class="nav-content">
-          {php}
-          // 检查是否有包含三级菜单的二级项
-          $hasThirdLevel = false;
-          foreach ($item['children'] as $child) {
+      <div class="nav-cont-menu">
+
+        {php}
+        $hasThirdLevel = false;
+        foreach ($item['children'] as $child) {
           if (isset($child['children']) && !empty($child['children'])) {
-          $hasThirdLevel = true;
-          break;
+            $hasThirdLevel = true;
+            break;
           }
-          }
-          {/php}
+        }
+        {/php}
 
-          {if $hasThirdLevel}
-          <!-- 左侧二级菜单栏 -->
-          <div class="nav-left-sidebar">
-            {foreach $item.children as $childIndex=>$child}
-            {if isset($child.children) && !empty($child.children)}
-            <div class="nav-category-item" data-category-index="{$childIndex}">
+        {if $hasThirdLevel}
+        <!-- 方案 C：二级分组标题 + 三级国旗链接网格 -->
+        <div class="nav-groups">
+          {foreach $item.children as $childIndex=>$child}
+          {if isset($child.children) && !empty($child.children)}
+          <div class="nav-group">
+            <div class="nav-group-title">
               {if !empty($child.icon)}
-              <span class="category-icon">
-                <img src="{$child.icon}" alt="{$child.name}">
-              </span>
+              <img src="{$child.icon}" alt="{$child.name}" class="nav-group-icon">
               {/if}
-              <span class="nav-category-name">{$child.name}</span>
+              <span>{$child.name}</span>
               {if !empty($child.description)}
-              <span class="nav-category-desc">{$child.description}</span>
+              <span class="nav-group-desc">— {$child.description}</span>
               {/if}
             </div>
-            {/if}
-            {/foreach}
-          </div>
-
-          <!-- 右侧三级菜单区域 -->
-          <div class="nav-right-content">
-            {foreach $item.children as $childIndex=>$child}
-            {if isset($child.children) && !empty($child.children)}
-            <div class="nav-third-panel" data-panel-index="{$childIndex}">
-              <div class="nav-third-title">{$child.name}</div>
-              <div class="nav-third-grid">
-                {foreach $child.children as $grandchild}
-                <div class="nav-third-item">
-                  <a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
-                    class="nav-third-link" {if !empty($grandchild.blank)}target="_blank" {/if}
-                    title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
-                    {if !empty($grandchild.country_code)}
-                    <img src="/web/BlackFruit-web/assets/country/{$grandchild.country_code}.png"
-                      alt="{$grandchild.country_code}" class="country-flag" onerror="this.style.display='none'">
-                    {/if}
-                    {$grandchild.name}
-                  </a>
-                </div>
-                {/foreach}
-              </div>
-            </div>
-            {/if}
-            {/foreach}
-          </div>
-          {else}
-          <!-- 无三级菜单，使用横向网格布局 -->
-          <div class="nav-simple-grid">
-            {foreach $item.children as $child}
-            <a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
-              class="nav-simple-item" {if !empty($child.blank)}target="_blank" {/if}>
-              {if !empty($child.icon)}
-              <div class="nav-simple-icon">
-                <img src="{$child.icon}" alt="{$child.name}">
-              </div>
-              {/if}
-              <div class="nav-simple-info">
-                <div class="nav-simple-title">{$child.name}</div>
-                {if !empty($child.description)}
-                <div class="nav-simple-desc">{$child.description}</div>
+            <div class="nav-group-grid">
+              {foreach $child.children as $grandchild}
+              <a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
+                class="nav-grid-link" {if !empty($grandchild.blank)}target="_blank" {/if}
+                title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
+                {if !empty($grandchild.country_code)}
+                <img src="/web/BlackFruit-web/assets/country/{$grandchild.country_code}.png"
+                  alt="{$grandchild.country_code}" class="country-flag" onerror="this.style.display='none'">
                 {/if}
-              </div>
-            </a>
-            {/foreach}
+                {$grandchild.name}
+              </a>
+              {/foreach}
+            </div>
           </div>
           {/if}
+          {/foreach}
         </div>
+        {else}
+        <!-- 纯二级：简单网格 -->
+        <div class="nav-simple-grid">
+          {foreach $item.children as $child}
+          <a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
+            class="nav-simple-item" {if !empty($child.blank)}target="_blank" {/if}>
+            {if !empty($child.icon)}
+            <div class="nav-simple-icon">
+              <img src="{$child.icon}" alt="{$child.name}">
+            </div>
+            {/if}
+            <div class="nav-simple-info">
+              <div class="nav-simple-title">{$child.name}</div>
+              {if !empty($child.description)}
+              <div class="nav-simple-desc">{$child.description}</div>
+              {/if}
+            </div>
+          </a>
+          {/foreach}
+        </div>
+        {/if}
+
       </div>
       {else /}
       <div class="nav-cont-menu nav-cont-empty"></div>