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

feat(pages): 添加文章和商品详情页面并重构页面结构

Browse Source 
- 新增 app/pages/article/[id].vue 页面实现文章列表功能
- 新增 app/pages/goods-item/[id].vue 页面实现商品详情功能
- 重构 app/pages/page/[id].vue 页面样式和SEO配置
- 重命名 app/pages/product/[id].vue 为 app/pages/goods/[navigationId].vue
- 新增 app/pages/product/[navigationId].vue 保留产品分类页面路由
- 新增 app/components/shop/GoodsCategoryPage.vue 商品分类组件
- 更新 API 类型定义修复 shopGoods 接口响应类型
- 实现商品分类页面的商品网格布局和分页功能
- 添加面包屑导航、搜索功能和图片懒加载支持
- 优化页面SEO元数据和链接规范化配置
- 统一页面错误处理和加载状态显示样式
This commit is contained in:
赵忠林
2026-01-29 15:30:33 +08:00
parent 5333b5e42f
commit 26c236041f
8 changed files with 1437 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
app/pages/article/[id].vue Normal file
View File

@@ -0,0 +1,382 @@
<template>
<main class="article-page">
<section class="article-hero" :style="heroStyle">
<div class="article-hero-mask">
<div class="mx-auto max-w-screen-xl px-4 py-8">
<a-breadcrumb class="article-breadcrumb">
<a-breadcrumb-item>
<NuxtLink to="/">首页</NuxtLink>
</a-breadcrumb-item>
<a-breadcrumb-item v-if="parentName">{{ parentName }}</a-breadcrumb-item>
<a-breadcrumb-item>{{ pageTitle }}</a-breadcrumb-item>
</a-breadcrumb>
<div class="article-hero-title">{{ pageTitle }}</div>
<div class="article-hero-meta">
<a-tag v-if="typeof total === 'number'" color="green">共 {{ total }} 篇</a-tag>
<a-tag v-if="keywords" color="blue">关键词：{{ keywords }}</a-tag>
</div>
<div class="mt-4 flex flex-wrap items-center gap-2">
<a-input
v-model:value="keywordInput"
allow-clear
class="w-full sm:w-80"
placeholder="搜索标题/关键词"
@press-enter="applySearch"
/>
<a-button type="primary" @click="applySearch">搜索</a-button>
<a-button v-if="keywords" @click="clearSearch">清除</a-button>
</div>
</div>
</div>
</section>
<section class="mx-auto max-w-screen-xl px-4 py-10">
<a-card class="article-card" :bordered="false">
<a-skeleton v-if="pending" active :paragraph="{ rows: 10 }" />
<a-result
v-else-if="!isValidNavigationId"
status="404"
title="栏目不存在"
sub-title="navigationId 无效或缺失。"
>
<template #extra>
<a-space>
<a-button type="primary" @click="navigateTo('/')">返回首页</a-button>
</a-space>
</template>
</a-result>
<a-result
v-else-if="loadError"
status="error"
title="文章加载失败"
:sub-title="loadError.message"
>
<template #extra>
<a-space>
<a-button type="primary" @click="refresh()">重试</a-button>
<a-button @click="navigateTo('/')">返回首页</a-button>
</a-space>
</template>
</a-result>
<template v-else>
<a-empty v-if="!articles.length" description="暂无文章" />
<a-list v-else item-layout="vertical" size="large" :data-source="articles">
<template #renderItem="{ item, index }">
<a-list-item
:key="String(item.articleId ?? item.code ?? `${String(route.params.id)}-${index}`)"
class="article-item"
>
<template #extra>
<img
v-if="resolveArticleImage(item)"
class="article-cover"
:src="resolveArticleImage(item)"
:alt="resolveArticleTitle(item)"
loading="lazy"
@error="onImgError"
/>
</template>
<a-list-item-meta :description="resolveArticleOverview(item)">
<template #title>
<span class="article-title">{{ resolveArticleTitle(item) }}</span>
</template>
</a-list-item-meta>
<div class="article-meta">
<a-tag v-if="item.categoryName" color="default">{{ item.categoryName }}</a-tag>
<a-tag v-if="item.author" color="blue">{{ item.author }}</a-tag>
<a-tag v-if="item.createTime" color="green">{{ item.createTime }}</a-tag>
<a-tag v-if="typeof item.actualViews === 'number'" color="default">
阅读 {{ item.actualViews }}
</a-tag>
<a-tag v-if="typeof item.virtualViews === 'number'" color="default">
热度 {{ item.virtualViews }}
</a-tag>
</div>
</a-list-item>
</template>
</a-list>
<div v-if="total > 0" class="mt-6 flex items-center justify-end">
<a-pagination
:current="page"
:page-size="limit"
:total="total"
show-size-changer
:page-size-options="['10', '20', '50', '100']"
@change="onPageChange"
@show-size-change="onPageSizeChange"
/>
</div>
</template>
</a-card>
</section>
</main>
</template>
<script setup lang="ts">
import type { LocationQueryRaw } from 'vue-router'
import { pageCmsArticle } from '@/api/cms/cmsArticle'
import type { CmsArticle } from '@/api/cms/cmsArticle/model'
import { getCmsNavigation } from '@/api/cms/cmsNavigation'
import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
const route = useRoute()
const router = useRouter()
function parseNumberParam(raw: unknown): number {
const text = Array.isArray(raw) ? raw[0] : raw
const n = Number(text)
return Number.isFinite(n) ? n : NaN
}
function parsePositiveInt(raw: unknown, fallback: number) {
const text = Array.isArray(raw) ? raw[0] : raw
const n = Number(text)
if (!Number.isFinite(n)) return fallback
const i = Math.floor(n)
return i > 0 ? i : fallback
}
function parseQueryString(raw: unknown) {
const text = Array.isArray(raw) ? raw[0] : raw
return typeof text === 'string' ? text.trim() : ''
}
const navigationId = computed(() => parseNumberParam(route.params.id))
const isValidNavigationId = computed(() => Number.isFinite(navigationId.value) && navigationId.value > 0)
const page = computed(() => parsePositiveInt(route.query.page, 1))
const limit = computed(() => parsePositiveInt(route.query.limit, 10))
const keywords = computed(() => parseQueryString(route.query.q))
const keywordInput = ref(keywords.value)
watch(
() => keywords.value,
(v) => {
keywordInput.value = v
}
)
function updateQuery(next: LocationQueryRaw) {
// Keep list state shareable via URL.
router.replace({
path: route.path,
query: {
...route.query,
...next
}
})
}
function applySearch() {
updateQuery({ q: keywordInput.value?.trim() || undefined, page: 1 })
}
function clearSearch() {
keywordInput.value = ''
updateQuery({ q: undefined, page: 1 })
}
function onPageChange(nextPage: number) {
updateQuery({ page: nextPage })
}
function onPageSizeChange(_current: number, nextSize: number) {
updateQuery({ limit: nextSize, page: 1 })
}
const { data: navigation } = await useAsyncData<CmsNavigation | null>(
() => `cms-navigation-${String(route.params.id)}`,
async () => {
if (!isValidNavigationId.value) return null
return await getCmsNavigation(navigationId.value).catch(() => null)
},
{ watch: [navigationId] }
)
const {
data: articlePage,
pending,
error: loadError,
refresh
} = await useAsyncData<{ list: CmsArticle[]; count: number } | null>(
() => `cms-article-${String(route.params.id)}-${page.value}-${limit.value}-${keywords.value}`,
async () => {
if (!isValidNavigationId.value) return null
return await pageCmsArticle({
navigationId: navigationId.value,
page: page.value,
limit: limit.value,
keywords: keywords.value || undefined
})
},
{ watch: [navigationId, page, limit, keywords] }
)
const articles = computed(() => articlePage.value?.list ?? [])
const total = computed(() => articlePage.value?.count ?? 0)
function pickString(obj: unknown, key: string) {
if (!obj || typeof obj !== 'object') return ''
const record = obj as Record<string, unknown>
const value = record[key]
return typeof value === 'string' ? value.trim() : ''
}
const pageTitle = computed(() => {
const name = pickString(navigation.value, 'title') || pickString(navigation.value, 'label')
if (name) return name
if (isValidNavigationId.value) return `栏目 ${navigationId.value}`
return '文章列表'
})
const parentName = computed(() => pickString(navigation.value, 'parentName'))
const heroStyle = computed(() => {
const banner = pickString(navigation.value, 'banner')
if (banner) return { backgroundImage: `url(${banner})` }
return {}
})
function resolveArticleTitle(a: CmsArticle) {
return String(a.title || a.code || '未命名文章').trim()
}
function resolveArticleImage(a: CmsArticle) {
const img = String(a.image || '').trim()
return img || ''
}
function resolveArticleOverview(a: CmsArticle) {
const text = String(a.overview || '').trim()
if (text) return text
const fallback = String(a.detail || '').trim()
return fallback.length > 120 ? `${fallback.slice(0, 120)}...` : fallback
}
function onImgError(e: Event) {
const el = e.target as HTMLImageElement | null
if (!el) return
el.style.display = 'none'
}
const seoTitle = computed(() => `${pageTitle.value} - 文章列表`)
const seoDescription = computed(() => {
if (keywords.value) return `${pageTitle.value} - 关键词「${keywords.value}」的文章列表`
return `${pageTitle.value} - 文章列表`
})
useSeoMeta({
title: seoTitle,
description: seoDescription,
ogTitle: seoTitle,
ogDescription: seoDescription,
ogType: 'website'
})
const canonicalUrl = computed(() => {
if (import.meta.client) return window.location.href
try {
return useRequestURL().href
} catch {
return ''
}
})
useHead(() => ({
link: canonicalUrl.value ? [{ rel: 'canonical', href: canonicalUrl.value }] : []
}))
</script>
<style scoped>
.article-page {
background: #f4f6f8;
}
.article-hero {
background:
radial-gradient(circle at 15% 20%, rgba(22, 163, 74, 0.22), transparent 60%),
radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.18), transparent 55%),
linear-gradient(180deg, #ffffff, #f8fafc);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.article-hero-mask {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.92));
}
.article-breadcrumb {
color: rgba(0, 0, 0, 0.6);
}
.article-hero-title {
margin-top: 10px;
font-size: 30px;
font-weight: 900;
color: rgba(0, 0, 0, 0.88);
line-height: 1.2;
}
.article-hero-meta {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.article-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.article-item :deep(.ant-list-item-extra) {
margin-inline-start: 24px;
}
.article-title {
font-size: 18px;
font-weight: 800;
color: rgba(0, 0, 0, 0.88);
}
.article-meta {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.article-cover {
width: 220px;
height: 140px;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
@media (max-width: 640px) {
.article-item :deep(.ant-list-item-extra) {
margin-inline-start: 0;
margin-top: 12px;
width: 100%;
}
.article-cover {
width: 100%;
height: 200px;
}
}
</style>