gxwebsoft/pc-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): 更新首页新闻栏目数据获取逻辑

Browse Source 
- 将硬编码的新闻栏目数据替换为从CMS动态获取
- 添加了新闻栏目数据类型定义和解析函数
- 实现了新闻文章链接生成和标题解析功能
- 更新了页面参数传递，将navigationId改为categoryId
- 添加了加载状态和空数据状态的UI显示
- 集成了文章详情页的动态路由跳转功能
This commit is contained in:
赵忠林
2026-01-29 17:29:21 +08:00
parent 0f5f70522a
commit 322bf2466f
1 changed files with 51 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/components/SiteHeader.vue
View File

@@ -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>