From 322bf2466f77493426c040d2f735ea980806db7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Thu, 29 Jan 2026 17:29:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=9B=B4=E6=96=B0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=96=B0=E9=97=BB=E6=A0=8F=E7=9B=AE=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将硬编码的新闻栏目数据替换为从CMS动态获取
- 添加了新闻栏目数据类型定义和解析函数
- 实现了新闻文章链接生成和标题解析功能
- 更新了页面参数传递，将navigationId改为categoryId
- 添加了加载状态和空数据状态的UI显示
- 集成了文章详情页的动态路由跳转功能
---
 app/components/SiteHeader.vue | 111 ++++++++++++++++------------------
 1 file changed, 51 insertions(+), 60 deletions(-)

diff --git a/app/components/SiteHeader.vue b/app/components/SiteHeader.vue
index bd21392..c83f6bb 100644
--- a/app/components/SiteHeader.vue
+++ b/app/components/SiteHeader.vue
@@ -19,71 +19,61 @@
     </div>
 
     <div v-if="showBrandbar" class="brandbar">
-      <div class="mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-4">
+      <div class="brandbar-inner mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-4">
         <NuxtLink to="/" class="col-span-12 flex items-center gap-4 md:col-span-6">
           <img class="brand-logo" :src="`https://oss.wsdns.cn/20260127/989e5cf82b0847ed9168023baf68f4a9.png`" :alt="siteName" />
         </NuxtLink>
 
-        <div class="col-span-12 text-right md:col-span-6">
+        <div class="col-span-12 hidden text-right md:col-span-6 md:block">
           <div class="brand-mission">{{ missionText }}</div>
           <div class="brand-values">{{ valuesText }}</div>
         </div>
       </div>
     </div>
 
-    <a-affix :offset-top="0" @change="onAffixChange">
-      <div class="navbar">
-        <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-20 px-">
-          <NuxtLink v-if="isAffixed" to="/" class="navbar-brand" :class="{ 'navbar-brand-hidden': !isAffixed }">
-            <img class="navbar-logo" :src="logoUrl" :alt="siteName" />
-            <span class="navbar-brand-name">
-              {{ siteName }}
-            </span>
-          </NuxtLink>
-          <nav class="nav hidden md:flex">
-            <template v-for="item in navItems" :key="item.key">
-              <a-dropdown v-if="item.children?.length" :trigger="['hover']">
-                <a class="nav-link" :class="{ active: isActive(item) }" @click.prevent>
+    <div class="hidden md:block">
+      <a-affix :offset-top="0" @change="onAffixChange">
+        <div class="navbar">
+          <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-3 px-4">
+            <NuxtLink v-if="isAffixed" to="/" class="navbar-brand">
+              <img class="navbar-logo" :src="logoUrl" :alt="siteName" />
+              <span class="navbar-brand-name">
+                {{ siteName }}
+              </span>
+            </NuxtLink>
+            <nav class="nav hidden md:flex">
+              <template v-for="item in navItems" :key="item.key">
+                <a-dropdown v-if="item.children?.length" :trigger="['hover', 'click']">
+                  <a class="nav-link" :class="{ active: isActive(item) }" @click.prevent>
+                    {{ item.label }}
+                  </a>
+                  <template #overlay>
+                    <a-menu>
+                      <a-menu-item
+                        v-for="child in item.children"
+                        :key="child.key"
+                        @click="onNavClick(child)"
+                      >
+                        {{ child.label }}
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+
+                <NuxtLink
+                  v-else-if="item.to"
+                  class="nav-link"
+                  :class="{ active: isActive(item) }"
+                  :to="item.to"
+                >
                   {{ item.label }}
-                </a>
-                <template #overlay>
-                  <a-menu>
-                    <a-menu-item
-                      v-for="child in item.children"
-                      :key="child.key"
-                      @click="onNavClick(child)"
-                    >
-                      {{ child.label }}
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-
-              <NuxtLink
-                v-else-if="item.to"
-                class="nav-link"
-                :class="{ active: isActive(item) }"
-                :to="item.to"
-              >
-                {{ item.label }}
-              </NuxtLink>
-
-              <a
-                v-else
-                class="nav-link"
-                :class="{ active: isActive(item) }"
-                :href="item.href"
-                :target="item.target || undefined"
-                rel="noopener noreferrer"
-              >
-                {{ item.label }}
-              </a>
-            </template>
-          </nav>
-          <div class="nav-spacer md:hidden" />
+                </NuxtLink>
+              </template>
+            </nav>
+          </div>
         </div>
-      </div>
-    </a-affix>
+      </a-affix>
+    </div>
   </header>
 
   <a-drawer v-model:open="open" title="导航" placement="right">
@@ -397,13 +387,6 @@ onBeforeUnmount(() => {
   transition: opacity 0.18s ease, transform 0.18s ease;
 }
 
-.navbar-brand-hidden {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transform: translateY(-4px);
-}
-
 .navbar-logo {
   width: 28px;
   height: 28px;
@@ -453,4 +436,12 @@ onBeforeUnmount(() => {
 .nav-spacer {
   height: 48px;
 }
+
+@media (max-width: 640px) {
+  .brandbar-inner {
+    height: 160px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
 </style>