feat: 更新网站页面和组件，新增多个页面（关于、专家、会员、政策等）

app/components/SiteHeader.vue

@@ -1,50 +1,71 @@
 <template>
   <header class="site-header">
-    <div class="topbar">
-      <div class="mx-auto flex max-w-screen-xl items-center justify-between gap-4 px-4">
-        <div class="topbar-left">
-          <span class="topbar-date">{{ todayText }}</span>
-        </div>
+    <a href="#main-content" class="skip-link">跳到主要内容</a>
 
-        <div class="topbar-right">
-          <div class="hidden md:flex items-center gap-2">
-            <a-button size="small" @click="navigateTo('/join')">招商加盟</a-button>
-            <a-button v-if="isLoggedIn" size="small" type="primary" @click="navigateTo('/console')">用户中心</a-button>
-            <a-button v-else size="small" type="primary" @click="navigateTo('/login')">会员登录</a-button>
-          </div>
+    <a-affix :offset-top="0">
+      <div class="header-affix">
+        <div v-if="showBrandbar" class="brandbar">
+          <div class="mx-auto grid max-w-screen-xl grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 py-3">
+            <div class="hidden md:block text-left text-xs text-white/85">
+              {{ todayText }}
+            </div>
 
-          <a-button class="md:hidden" size="small" @click="open = true">菜单</a-button>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="showBrandbar" class="brandbar">
-      <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 hidden text-right md:col-span-6 md:block">
-          <div class="brand-mission">{{ missionText }}</div>
-          <div class="brand-values">{{ valuesText }}</div>
-        </div>
-      </div>
-    </div>
-
-    <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 to="/" class="brand-center" aria-label="返回首页">
+              <img class="brand-logo" :src="logoUrl" :alt="siteName" />
+              <div class="brand-text">
+                <div class="brand-name">{{ siteName }}</div>
+                <div class="brand-slogan">{{ siteSlogan }}</div>
+              </div>
             </NuxtLink>
-            <nav class="nav hidden md:flex">
+
+            <div class="brand-actions">
+              <a-button
+                size="small"
+                class="action-btn hidden md:inline-flex"
+                :aria-pressed="highContrast"
+                @click="toggleContrast"
+              >
+                无障碍
+              </a-button>
+
+              <a-segmented
+                class="lang-switch hidden md:inline-flex"
+                size="small"
+                :options="langOptions"
+                :value="locale"
+                @change="setLocale"
+              />
+
+              <a-button
+                v-if="isLoggedIn"
+                size="small"
+                type="primary"
+                class="action-btn"
+                @click="navigateTo('/console')"
+              >
+                用户中心
+              </a-button>
+              <a-button
+                v-else
+                size="small"
+                type="primary"
+                class="action-btn"
+                @click="navigateTo('/login')"
+              >
+                登录
+              </a-button>
+
+              <a-button class="md:hidden action-btn" size="small" @click="open = true">菜单</a-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="navbar">
+          <div class="mx-auto flex max-w-screen-xl items-center gap-3 px-4">
+            <nav class="nav hidden md:flex" aria-label="主导航">
               <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>
+                  <a class="nav-link" :class="{ active: isActive(item) }" @click.prevent="onNavClick(item)">
                     {{ item.label }}
                   </a>
                   <template #overlay>
@@ -70,13 +91,31 @@
                 </NuxtLink>
               </template>
             </nav>
+
+            <div class="hidden md:flex flex-1 justify-end">
+              <a-input-search
+                class="site-search"
+                placeholder="站内搜索"
+                :allow-clear="true"
+                :maxlength="50"
+                @search="onSearch"
+              />
+            </div>
           </div>
         </div>
-      </a-affix>
-    </div>
+      </div>
+    </a-affix>
   </header>
 
   <a-drawer v-model:open="open" title="导航" placement="right">
+    <a-input-search
+      class="mb-3"
+      placeholder="站内搜索"
+      :allow-clear="true"
+      :maxlength="50"
+      @search="onSearch"
+    />
+
     <a-menu mode="inline" :selected-keys="selectedKeys">
       <template v-for="item in navItems" :key="item.key">
         <a-menu-item v-if="!item.children?.length" :key="item.key" @click="onNavClick(item)">
@@ -96,9 +135,10 @@
 
     <div class="mt-4">
       <a-space direction="vertical" class="w-full">
-        <a-button type="primary" block @click="onNav('/contact')">联系我们</a-button>
-        <a-button block @click="onNav('/products')">经营范围</a-button>
-        <a-button block @click="onNav('/join')">招商加盟</a-button>
+        <a-button type="primary" block @click="onNav('/login')">登录</a-button>
+        <a-button block :aria-pressed="highContrast" @click="toggleContrast">无障碍（高对比度）</a-button>
+        <a-button block @click="onNav('/contact')">联系我们</a-button>
+        <a-button block @click="onNav('/sitemap')">站点地图</a-button>
       </a-space>
     </div>
   </a-drawer>
@@ -107,12 +147,10 @@
 <script setup lang="ts">
 import { mainNav } from '@/config/nav'
 import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
-import { COMPANY } from '@/config/company'
 import { getToken } from '@/utils/token-util'
 
 const route = useRoute()
 const open = ref(false)
-const isAffixed = ref(false)
 const isHydrated = ref(false)
 const token = ref('')
 
@@ -171,7 +209,9 @@ function pickString(source: unknown, key: string) {
 
 const siteName = computed(() => {
   const websiteName = siteData.value?.websiteName
-  return typeof websiteName === 'string' && websiteName.trim() ? websiteName.trim() : '桂乐淘'
+  return typeof websiteName === 'string' && websiteName.trim()
+    ? websiteName.trim()
+    : '广西决策咨询网'
 })
 
 const showBrandbar = computed(() => {
@@ -196,12 +236,9 @@ const siteSlogan = computed(() => {
     pickString(data?.setting, 'slogan') ||
     pickString(data?.setting, 'subtitle') ||
     pickString(data?.config, 'slogan')
-  return slogan || `${COMPANY.projectName} · 品质服务与合规经营`
+  return slogan || '权威发布 · 决策支持 · 服务发展'
 })
 
-const missionText = computed(() => '生物基材料研发 · 技术服务 · 食品与农产品流通')
-const valuesText = computed(() => '真诚 · 奉献 · 规范 · 聚力')
-
 function normalizePath(path: unknown) {
   if (typeof path !== 'string') return ''
   const p = path.trim()
@@ -242,6 +279,19 @@ function normalizeNavTree(list: CmsNavigation[]): HeaderNavItem[] {
     .map(normalizeOne)
 }
 
+function normalizeLocalNavTree(list: typeof mainNav): HeaderNavItem[] {
+  const normalizeOne = (n: (typeof mainNav)[number]): HeaderNavItem => {
+    const children = Array.isArray(n.children) && n.children.length ? n.children.map(normalizeOne) : undefined
+    return {
+      key: n.key || n.to || n.label,
+      label: n.label,
+      ...(n.href ? { href: n.href, target: n.target || '_blank' } : { to: n.to || '/' }),
+      ...(children?.length ? { children } : {})
+    }
+  }
+  return list.map(normalizeOne)
+}
+
 const navItems = computed<HeaderNavItem[]>(() => {
   const apiNavs = siteData.value?.topNavs
   if (Array.isArray(apiNavs) && apiNavs.length) {
@@ -249,7 +299,7 @@ const navItems = computed<HeaderNavItem[]>(() => {
     return normalizeNavTree(apiNavs as CmsNavigation[])
   }
   // Fallback when CMS has not configured topNavs.
-  return mainNav.map((n) => ({ key: n.key || n.to, label: n.label, to: n.to }))
+  return normalizeLocalNavTree(mainNav)
 })
 
 function isActive(item: HeaderNavItem) {
@@ -281,8 +331,45 @@ const todayText = computed(() => {
   return `${d.getFullYear()}年${pad(d.getMonth() + 1)}月${pad(d.getDate())}日 星期${week}`
 })
 
-function onAffixChange(affixed: boolean) {
-  isAffixed.value = affixed
+const locale = useState<'zh-CN' | 'en'>('site-locale', () => 'zh-CN')
+const highContrast = useState<boolean>('site-high-contrast', () => false)
+
+const langOptions = [
+  { label: '简体', value: 'zh-CN' },
+  { label: 'EN', value: 'en' }
+]
+
+function applyPreferences() {
+  if (!import.meta.client) return
+  document.documentElement.lang = locale.value === 'en' ? 'en' : 'zh-CN'
+  document.documentElement.dataset.contrast = highContrast.value ? 'high' : 'normal'
+}
+
+function setLocale(value: unknown) {
+  locale.value = value === 'en' ? 'en' : 'zh-CN'
+  try {
+    localStorage.setItem('site-locale', locale.value)
+  } catch {
+    // ignore
+  }
+  applyPreferences()
+}
+
+function toggleContrast() {
+  highContrast.value = !highContrast.value
+  try {
+    localStorage.setItem('site-high-contrast', highContrast.value ? '1' : '0')
+  } catch {
+    // ignore
+  }
+  applyPreferences()
+}
+
+function onSearch(value: string) {
+  const q = String(value || '').trim()
+  if (!q) return
+  open.value = false
+  navigateTo({ path: '/search', query: { q } })
 }
 
 function syncToken() {
@@ -291,6 +378,14 @@ function syncToken() {
 
 onMounted(() => {
   isHydrated.value = true
+  try {
+    const savedLocale = localStorage.getItem('site-locale')
+    locale.value = savedLocale === 'en' ? 'en' : 'zh-CN'
+    highContrast.value = localStorage.getItem('site-high-contrast') === '1'
+  } catch {
+    // ignore
+  }
+  applyPreferences()
   syncToken()
   window.addEventListener(TOKEN_EVENT, syncToken)
 })
@@ -302,146 +397,133 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .site-header {
-  background: #fff;
+  background: transparent;
 }
 
-.topbar {
-  background: #f7f7f7;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  font-size: 12px;
+.skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-140%);
+  background: #ffffff;
+  color: #0f172a;
+  padding: 10px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  z-index: 1000;
 }
 
-.topbar-left {
-  color: rgba(0, 0, 0, 0.7);
-  padding: 6px 0;
+.skip-link:focus {
+  transform: translateY(10px);
 }
 
-.topbar-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 0;
+.header-affix {
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
 }
 
 .brandbar {
-  background:
-    linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
-    radial-gradient(circle at 25% 20%, rgba(220, 38, 38, 0.12), transparent 60%),
-    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.12), transparent 55%),
-    linear-gradient(180deg, #f2f4f7, #ffffff);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--gov-blue);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.brand-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-decoration: none;
+  min-width: 0;
 }
 
 .brand-logo {
-  height: 62px;
+  width: 46px;
+  height: 46px;
   object-fit: contain;
   display: block;
+  flex: 0 0 auto;
 }
 
-.brand-title {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.brand-text {
+  min-width: 0;
 }
 
 .brand-name {
-  font-size: 28px;
-  line-height: 1.1;
+  color: #ffffff;
+  font-size: 20px;
+  line-height: 1.2;
   font-weight: 800;
-  color: #15803d;
-}
-
-.brand-sub {
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  color: rgba(0, 0, 0, 0.55);
-}
-
-.brand-mission {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1d4ed8;
-}
-
-.brand-values {
-  margin-top: 6px;
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.navbar {
-  background: #16a34a;
-  border-top: 1px solid rgba(255, 255, 255, 0.15);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-}
-
-.navbar-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 20px;
-  height: 48px;
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.95);
-  font-weight: 700;
-  transition: opacity 0.18s ease, transform 0.18s ease;
-}
-
-.navbar-logo {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  display: block;
-}
-
-.navbar-brand-name {
-  color: #e7ffe5;
-  font-size: 15px;
   letter-spacing: 0.02em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 220px;
+  max-width: 520px;
 }
 
-.navbar-brand:hover {
-  color: #fff;
+.brand-slogan {
+  margin-top: 2px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.88);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.brand-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+
+.action-btn {
+  box-shadow: none;
+}
+
+.lang-switch :deep(.ant-segmented) {
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+}
+
+.navbar {
+  background: #ffffff;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .nav {
   display: flex;
-  gap: 10px;
+  gap: 6px;
 }
 
 .nav-link {
   display: inline-flex;
   align-items: center;
-  height: 48px;
-  padding: 0 18px;
-  color: rgba(255, 255, 255, 0.92);
+  height: 50px;
+  padding: 0 14px;
+  color: #111827;
   font-weight: 600;
+  border-radius: 10px;
   text-decoration: none;
+  transition: background 0.15s ease, color 0.15s ease;
 }
 
 .nav-link:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.12);
+  color: var(--gov-blue);
+  background: rgba(30, 111, 181, 0.08);
 }
 
 .nav-link.active {
-  background: rgba(255, 255, 255, 0.18);
-  color: #fff;
+  background: rgba(30, 111, 181, 0.12);
+  color: var(--gov-blue);
 }
 
-.nav-spacer {
-  height: 48px;
+.site-search {
+  max-width: 360px;
 }
 
 @media (max-width: 640px) {
-  .brandbar-inner {
-    height: 160px;
-    padding-top: 0;
-    padding-bottom: 0;
+  .brand-name {
+    max-width: 240px;
+    font-size: 18px;
   }
 }
 </style>