530 lines
14 KiB
Vue
530 lines
14 KiB
Vue
<template>
|
||
<header class="site-header">
|
||
<a href="#main-content" class="skip-link">跳到主要内容</a>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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="onNavClick(item)">
|
||
{{ 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>
|
||
</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>
|
||
</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)">
|
||
{{ item.label }}
|
||
</a-menu-item>
|
||
<a-sub-menu v-else :key="item.key" :title="item.label">
|
||
<a-menu-item
|
||
v-for="child in item.children"
|
||
:key="child.key"
|
||
@click="onNavClick(child)"
|
||
>
|
||
{{ child.label }}
|
||
</a-menu-item>
|
||
</a-sub-menu>
|
||
</template>
|
||
</a-menu>
|
||
|
||
<div class="mt-4">
|
||
<a-space direction="vertical" class="w-full">
|
||
<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>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { mainNav } from '@/config/nav'
|
||
import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
|
||
import { getToken } from '@/utils/token-util'
|
||
|
||
const route = useRoute()
|
||
const open = ref(false)
|
||
const isHydrated = ref(false)
|
||
const token = ref('')
|
||
|
||
const TOKEN_EVENT = 'auth-token-changed'
|
||
const isLoggedIn = computed(() => isHydrated.value && !!token.value)
|
||
|
||
type HeaderNavItem = {
|
||
key: string
|
||
label: string
|
||
to?: string
|
||
href?: string
|
||
target?: string
|
||
children?: HeaderNavItem[]
|
||
}
|
||
|
||
const { data: siteInfo } = useSiteInfo()
|
||
|
||
const selectedKeys = computed(() => {
|
||
const flatten = (items: HeaderNavItem[]) =>
|
||
items.flatMap((i) => [i, ...(i.children?.length ? flatten(i.children) : [])])
|
||
const all = flatten(navItems.value)
|
||
|
||
const exactHit = all.find((n) => n.to === route.path)
|
||
if (exactHit) return [exactHit.key]
|
||
|
||
const prefixHit = all
|
||
.filter((n) => n.to && n.to !== '/' && route.path.startsWith(n.to))
|
||
.sort((a, b) => (b.to?.length ?? 0) - (a.to?.length ?? 0))[0]
|
||
if (prefixHit) return [prefixHit.key]
|
||
|
||
const home = all.find((n) => n.to === '/')
|
||
return home ? [home.key] : []
|
||
})
|
||
|
||
type SiteInfoData = {
|
||
websiteName?: unknown
|
||
websiteLogo?: unknown
|
||
websiteIcon?: unknown
|
||
topNavs?: unknown
|
||
setting?: unknown
|
||
config?: unknown
|
||
} & Record<string, unknown>
|
||
|
||
const siteData = computed<SiteInfoData | null>(() => {
|
||
const data = siteInfo.value?.data
|
||
if (data && typeof data === 'object') return data as SiteInfoData
|
||
return null
|
||
})
|
||
|
||
function pickString(source: unknown, key: string) {
|
||
if (!source || typeof source !== 'object') return ''
|
||
const record = source as Record<string, unknown>
|
||
const value = record[key]
|
||
return typeof value === 'string' ? value.trim() : ''
|
||
}
|
||
|
||
const siteName = computed(() => {
|
||
const websiteName = siteData.value?.websiteName
|
||
return typeof websiteName === 'string' && websiteName.trim()
|
||
? websiteName.trim()
|
||
: '广西决策咨询网'
|
||
})
|
||
|
||
const showBrandbar = computed(() => {
|
||
// Corporate site: keep brand bar consistent across pages.
|
||
return true
|
||
})
|
||
|
||
const logoUrl = computed(() => {
|
||
const data = siteData.value
|
||
const logo = typeof data?.websiteLogo === 'string' ? data.websiteLogo.trim() : ''
|
||
const icon = typeof data?.websiteIcon === 'string' ? data.websiteIcon.trim() : ''
|
||
return (
|
||
logo ||
|
||
icon ||
|
||
'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
|
||
)
|
||
})
|
||
|
||
const siteSlogan = computed(() => {
|
||
const data = siteData.value
|
||
const slogan =
|
||
pickString(data?.setting, 'slogan') ||
|
||
pickString(data?.setting, 'subtitle') ||
|
||
pickString(data?.config, 'slogan')
|
||
return slogan || '权威发布 · 决策支持 · 服务发展'
|
||
})
|
||
|
||
function normalizePath(path: unknown) {
|
||
if (typeof path !== 'string') return ''
|
||
const p = path.trim()
|
||
if (!p) return ''
|
||
if (/^https?:\/\//i.test(p)) return p
|
||
if (p.startsWith('/')) return p
|
||
return `/${p}`
|
||
}
|
||
|
||
function normalizeNavTree(list: CmsNavigation[]): HeaderNavItem[] {
|
||
const normalizeOne = (n: CmsNavigation): HeaderNavItem => {
|
||
const label = String(n.title || n.label || '').trim() || '未命名'
|
||
const rawPath = normalizePath(n.path)
|
||
const isExternal = /^https?:\/\//i.test(rawPath)
|
||
const children =
|
||
Array.isArray(n.children) && n.children.length
|
||
? n.children
|
||
.slice()
|
||
.filter((c) => (c.hide ?? 0) !== 1)
|
||
.sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
|
||
.map(normalizeOne)
|
||
: undefined
|
||
const key = String(n.code || n.navigationId || rawPath || label)
|
||
const target = n.target ? String(n.target) : (isExternal ? '_blank' : undefined)
|
||
return {
|
||
key,
|
||
label,
|
||
...(isExternal ? { href: rawPath } : { to: rawPath || '/' }),
|
||
target,
|
||
...(children?.length ? { children } : {})
|
||
}
|
||
}
|
||
|
||
return list
|
||
.filter((n) => (n.hide ?? 0) !== 1)
|
||
.slice()
|
||
.sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
|
||
.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) {
|
||
// Prefer navigation from getShopInfo (CMS-managed).
|
||
return normalizeNavTree(apiNavs as CmsNavigation[])
|
||
}
|
||
// Fallback when CMS has not configured topNavs.
|
||
return normalizeLocalNavTree(mainNav)
|
||
})
|
||
|
||
function isActive(item: HeaderNavItem) {
|
||
const isHit = (candidate: HeaderNavItem): boolean => {
|
||
if (candidate.to && candidate.to === route.path) return true
|
||
return !!candidate.children?.some(isHit)
|
||
}
|
||
return isHit(item)
|
||
}
|
||
|
||
function onNavClick(item: HeaderNavItem) {
|
||
open.value = false
|
||
if (item.href) {
|
||
window.open(item.href, item.target || '_blank')
|
||
return
|
||
}
|
||
if (item.to) navigateTo(item.to)
|
||
}
|
||
|
||
function onNav(to: string) {
|
||
open.value = false
|
||
navigateTo(to)
|
||
}
|
||
|
||
const todayText = computed(() => {
|
||
const d = new Date()
|
||
const week = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()] || ''
|
||
const pad = (n: number) => String(n).padStart(2, '0')
|
||
return `${d.getFullYear()}年${pad(d.getMonth() + 1)}月${pad(d.getDate())}日 星期${week}`
|
||
})
|
||
|
||
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() {
|
||
token.value = getToken()
|
||
}
|
||
|
||
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)
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener(TOKEN_EVENT, syncToken)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.site-header {
|
||
background: transparent;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.skip-link:focus {
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
.header-affix {
|
||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.brandbar {
|
||
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 {
|
||
width: 46px;
|
||
height: 46px;
|
||
object-fit: contain;
|
||
display: block;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.brand-text {
|
||
min-width: 0;
|
||
}
|
||
|
||
.brand-name {
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
line-height: 1.2;
|
||
font-weight: 800;
|
||
letter-spacing: 0.02em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 520px;
|
||
}
|
||
|
||
.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: 6px;
|
||
}
|
||
|
||
.nav-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
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: var(--gov-blue);
|
||
background: rgba(30, 111, 181, 0.08);
|
||
}
|
||
|
||
.nav-link.active {
|
||
background: rgba(30, 111, 181, 0.12);
|
||
color: var(--gov-blue);
|
||
}
|
||
|
||
.site-search {
|
||
max-width: 360px;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.brand-name {
|
||
max-width: 240px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
</style>
|