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

2026-03-10 16:43:52 +08:00
parent 2c80df8b07
commit 54775dd745
56 changed files with 1520 additions and 503 deletions
--- a/app/components/Breadcrumbs.vue
+++ b/app/components/Breadcrumbs.vue
@@ -0,0 +1,69 @@
+<template>
+  <nav v-if="items.length > 1" class="breadcrumbs" aria-label="面包屑导航">
+    <a-breadcrumb>
+      <a-breadcrumb-item v-for="(it, idx) in items" :key="`${it.key}::${idx}`">
+        <NuxtLink v-if="it.to && idx < items.length - 1" :to="it.to">
+          {{ it.label }}
+        </NuxtLink>
+        <span v-else>{{ it.label }}</span>
+      </a-breadcrumb-item>
+    </a-breadcrumb>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { mainNav, type NavItem } from '@/config/nav'
+
+type Crumb = { key: string; label: string; to?: string }
+
+const route = useRoute()
+const currentPath = computed(() => route.path || '/')
+
+function bestTrail(items: NavItem[], path: string): NavItem[] {
+  let best: NavItem[] = []
+
+  const walk = (list: NavItem[], ancestors: NavItem[]) => {
+    for (const item of list) {
+      const nextAncestors = [...ancestors, item]
+      const to = item.to || ''
+      const isPrefix = to && to !== '/' && (path === to || path.startsWith(`${to}/`))
+      const isExact = to && path === to
+
+      if (isExact || isPrefix) {
+        if (nextAncestors.length > best.length) best = nextAncestors
+      }
+
+      if (item.children?.length) walk(item.children, nextAncestors)
+    }
+  }
+
+  walk(items, [])
+  return best
+}
+
+const items = computed<Crumb[]>(() => {
+  const home: Crumb = { key: 'home', label: '首页', to: '/' }
+  if (currentPath.value === '/') return [home]
+
+  const trail = bestTrail(mainNav, currentPath.value)
+  if (!trail.length) {
+    return [home, { key: currentPath.value, label: currentPath.value.replace(/^\//, '') || '当前页面' }]
+  }
+
+  return [
+    home,
+    ...trail.map((it) => ({ key: it.key, label: it.label, to: it.to }))
+  ]
+})
+</script>
+
+<style scoped>
+.breadcrumbs {
+  padding: 10px 0;
+  color: var(--text-secondary);
+}
+
+.breadcrumbs :deep(.ant-breadcrumb) {
+  font-size: 13px;
+}
+</style>
--- a/app/components/Carousel.vue
+++ b/app/components/Carousel.vue
@@ -24,6 +24,13 @@
              aria-label="carousel-slide"
            >
              <img class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
+              <div v-if="it.title || it.desc" class="carousel-overlay">
+                <div class="carousel-overlay-inner">
+                  <div v-if="it.title" class="carousel-title">{{ it.title }}</div>
+                  <div v-if="it.desc" class="carousel-desc">{{ it.desc }}</div>
+                  <div v-if="it.ctaLabel" class="carousel-cta">{{ it.ctaLabel }}</div>
+                </div>
+              </div>
            </NuxtLink>
            <a
              v-else-if="it.href"
@@ -34,8 +41,24 @@
              aria-label="carousel-slide"
            >
              <img class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
+              <div v-if="it.title || it.desc" class="carousel-overlay">
+                <div class="carousel-overlay-inner">
+                  <div v-if="it.title" class="carousel-title">{{ it.title }}</div>
+                  <div v-if="it.desc" class="carousel-desc">{{ it.desc }}</div>
+                  <div v-if="it.ctaLabel" class="carousel-cta">{{ it.ctaLabel }}</div>
+                </div>
+              </div>
            </a>
-            <img v-else class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
+            <div v-else class="carousel-link" aria-label="carousel-slide">
+              <img class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
+              <div v-if="it.title || it.desc" class="carousel-overlay">
+                <div class="carousel-overlay-inner">
+                  <div v-if="it.title" class="carousel-title">{{ it.title }}</div>
+                  <div v-if="it.desc" class="carousel-desc">{{ it.desc }}</div>
+                  <div v-if="it.ctaLabel" class="carousel-cta">{{ it.ctaLabel }}</div>
+                </div>
+              </div>
+            </div>
          </div>
        </a-carousel>

@@ -71,6 +94,9 @@ type CarouselItem = {
  src: string
  href?: string
  alt?: string
+  title?: string
+  desc?: string
+  ctaLabel?: string
 }

 const props = withDefaults(
@@ -123,7 +149,9 @@ function prev() {
  background: #fff;
  position: relative;
  overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
+  border-radius: 14px;
+  border: 1px solid var(--border-subtle);
+  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
 }

 .carousel {
@@ -137,6 +165,7 @@ function prev() {
 .carousel-link {
  display: block;
  height: 100%;
+  position: relative;
 }

 .carousel-img {
@@ -146,6 +175,45 @@ function prev() {
  display: block;
 }

+.carousel-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 18px;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.74));
+}
+
+.carousel-overlay-inner {
+  max-width: 860px;
+}
+
+.carousel-title {
+  color: rgba(255, 255, 255, 0.98);
+  font-size: 28px;
+  line-height: 1.25;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+}
+
+.carousel-desc {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.carousel-cta {
+  display: inline-flex;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: rgba(30, 111, 181, 0.95);
+  color: rgba(255, 255, 255, 0.98);
+  font-weight: 700;
+  font-size: 13px;
+}
+
 .carousel :deep(.slick-list),
 .carousel :deep(.slick-track),
 .carousel :deep(.slick-slide),
--- a/app/components/SectionStub.vue
+++ b/app/components/SectionStub.vue
@@ -0,0 +1,46 @@
+<template>
+  <section class="py-10">
+    <a-typography-title :level="1" class="!mb-2">
+      {{ title }}
+    </a-typography-title>
+    <a-typography-paragraph v-if="description" class="!text-gray-600 !mb-6">
+      {{ description }}
+    </a-typography-paragraph>
+
+    <a-row v-if="links?.length" :gutter="[16, 16]">
+      <a-col v-for="it in links" :key="it.to" :xs="24" :md="12" :lg="8">
+        <a-card size="small" class="h-full">
+          <NuxtLink class="text-base font-semibold" :to="it.to">
+            {{ it.label }}
+          </NuxtLink>
+          <div v-if="it.desc" class="mt-2 text-sm text-gray-500">
+            {{ it.desc }}
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-result
+      v-if="showResult"
+      class="mt-8"
+      status="info"
+      title="页面建设中"
+      sub-title="该栏目正在完善中，可先通过导航进入其他栏目。"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+type LinkItem = { label: string; to: string; desc?: string }
+
+withDefaults(
+  defineProps<{
+    title: string
+    description?: string
+    links?: LinkItem[]
+    showResult?: boolean
+  }>(),
+  { description: '', links: () => [], showResult: true }
+)
+</script>
+
--- a/app/components/SiteFooter.vue
+++ b/app/components/SiteFooter.vue
@@ -3,35 +3,54 @@
    <div class="mx-auto max-w-screen-xl px-4 py-10">
      <a-row :gutter="[24, 24]">
        <a-col :xs="24" :md="8">
-          <div class="text-base font-semibold text-white">关注我们</div>
-          <div class="mt-4 flex items-center gap-4">
-            <a-avatar shape="square" :size="96" src="https://oss.wsdns.cn/20260127/74041127623e4a8faa49a24e0818dae6.png" />
-            <div class="text-sm leading-6 text-gray-400">
-              小程序
-              <br />
-              获取最新动态
-            </div>
+          <div class="text-base font-semibold text-white">联系我们</div>
+          <div class="mt-4 grid gap-2 text-sm text-gray-300">
+            <div>咨询服务：<NuxtLink class="text-gray-100 hover:text-white underline-offset-4 hover:underline" to="/consulting/intro">服务简介</NuxtLink></div>
+            <div>建议反馈：<NuxtLink class="text-gray-100 hover:text-white underline-offset-4 hover:underline" to="/suggest">建言献策</NuxtLink></div>
+            <div>联系方式：<NuxtLink class="text-gray-100 hover:text-white underline-offset-4 hover:underline" to="/contact">联系我们</NuxtLink></div>
          </div>
        </a-col>

        <a-col :xs="24" :md="8">
          <div class="text-base font-semibold text-white">快速入口</div>
          <div class="mt-4 grid gap-2 text-sm text-gray-400">
-            <NuxtLink class="hover:text-white" to="/products">经营范围</NuxtLink>
-            <NuxtLink class="hover:text-white" to="/contact">联系我们</NuxtLink>
+            <NuxtLink class="hover:text-white" to="/policy/latest">政策要闻</NuxtLink>
+            <NuxtLink class="hover:text-white" to="/reference/data">数据服务</NuxtLink>
+            <NuxtLink class="hover:text-white" to="/experts/apply">专家申请</NuxtLink>
+            <NuxtLink class="hover:text-white" to="/downloads">资料下载</NuxtLink>
+            <NuxtLink class="hover:text-white" to="/search">站内搜索</NuxtLink>
+            <NuxtLink class="hover:text-white" to="/sitemap">站点地图</NuxtLink>
          </div>
        </a-col>

        <a-col :xs="24" :md="8">
          <div class="text-base font-semibold text-white">备案信息</div>
-          <div class="mt-4 text-sm text-gray-400">{{ icpText }}</div>
+          <div class="mt-4 grid gap-2 text-sm text-gray-300">
+            <div>{{ icpText }}</div>
+            <div>{{ policeText }}</div>
+            <div>{{ siteCodeText }}</div>
+          </div>
        </a-col>
      </a-row>

+      <div class="mt-10 border-t border-white/10 pt-6">
+        <div class="text-base font-semibold text-white">友情链接</div>
+        <div class="mt-3 flex flex-wrap gap-x-5 gap-y-2 text-sm text-gray-300">
+          <a v-for="it in friendLinks" :key="it.url" class="hover:text-white hover:underline underline-offset-4" :href="it.url" target="_blank" rel="noreferrer">
+            {{ it.name }}
+          </a>
+        </div>
+      </div>
+
      <div
        class="mt-10 flex flex-col gap-2 border-t border-white/10 pt-6 text-xs text-gray-500 md:flex-row md:items-center md:justify-between"
      >
        <div>© {{ year }} {{ siteName }}. All rights reserved.</div>
+        <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-gray-400">
+          <NuxtLink class="hover:text-gray-200" to="/privacy">隐私政策</NuxtLink>
+          <NuxtLink class="hover:text-gray-200" to="/terms">使用条款</NuxtLink>
+          <NuxtLink class="hover:text-gray-200" to="/disclaimer">免责声明</NuxtLink>
+        </div>
        <div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-100 text-xs">
          Powered by
          <a
@@ -52,7 +71,7 @@
 import { getCmsWebsiteFieldByCode } from '@/api/cms/cmsWebsiteField'

 const { data: siteInfo } = useSiteInfo()
-const siteName = computed(() => String((siteInfo.value as any)?.data?.websiteName || '桂乐淘'))
+const siteName = computed(() => String((siteInfo.value as any)?.data?.websiteName || '广西决策咨询网'))

 const { data: icpField } = useAsyncData('cms-website-field-icpNo', async () => {
  try {
@@ -62,6 +81,22 @@ const { data: icpField } = useAsyncData('cms-website-field-icpNo', async () => {
  }
 })

+const { data: policeField } = useAsyncData('cms-website-field-policeNo', async () => {
+  try {
+    return await getCmsWebsiteFieldByCode('policeNo')
+  } catch {
+    return null
+  }
+})
+
+const { data: siteCodeField } = useAsyncData('cms-website-field-siteCode', async () => {
+  try {
+    return await getCmsWebsiteFieldByCode('siteCode')
+  } catch {
+    return null
+  }
+})
+
 const icpNo = computed(() => {
  const v = icpField.value?.value ?? icpField.value?.defaultValue
  if (typeof v === 'string' && v.trim()) return v.trim()
@@ -69,13 +104,36 @@ const icpNo = computed(() => {
  return typeof fallback === 'string' ? fallback.trim() : ''
 })

-const icpText = computed(() => (icpNo.value ? `备案号：${icpNo.value}` : '备案号：'))
+const policeNo = computed(() => {
+  const v = policeField.value?.value ?? policeField.value?.defaultValue
+  if (typeof v === 'string' && v.trim()) return v.trim()
+  const fallback = (siteInfo.value as any)?.data?.policeNo
+  return typeof fallback === 'string' ? fallback.trim() : ''
+})
+
+const siteCode = computed(() => {
+  const v = siteCodeField.value?.value ?? siteCodeField.value?.defaultValue
+  if (typeof v === 'string' && v.trim()) return v.trim()
+  const fallback = (siteInfo.value as any)?.data?.siteCode
+  return typeof fallback === 'string' ? fallback.trim() : ''
+})
+
+const icpText = computed(() => (icpNo.value ? `桂 ICP 备：${icpNo.value}` : '桂 ICP 备：'))
+const policeText = computed(() => (policeNo.value ? `桂公网安备：${policeNo.value}` : '桂公网安备：'))
+const siteCodeText = computed(() => (siteCode.value ? `网站标识码：${siteCode.value}` : '网站标识码：'))
 const year = new Date().getFullYear()
+
+const friendLinks = [
+  { name: '广西壮族自治区人民政府', url: 'https://www.gxzf.gov.cn' },
+  { name: '国务院发展研究中心', url: 'https://www.drc.gov.cn' },
+  { name: '中国社会科学院', url: 'https://www.cass.cn' },
+  { name: '广西社科联', url: 'http://www.gxskl.gov.cn' }
+]
 </script>

 <style scoped>
 .footer {
-  background: #4b5563;
+  background: #111827;
  padding: 0;
 }
 </style>
--- a/app/components/SiteHeader.vue
+++ b/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>