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

- 新增 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元数据和链接规范化配置 - 统一页面错误处理和加载状态显示样式
2026-01-29 15:30:33 +08:00
parent 5333b5e42f
commit 26c236041f
8 changed files with 1437 additions and 50 deletions
--- a/app/pages/page/[id].vue
+++ b/app/pages/page/[id].vue
@@ -1,48 +1,84 @@
 <template>
-  <div class="mx-auto max-w-screen-md px-4 py-12">
-    <a-spin v-if="pending" />
+  <main class="page">
+    <section class="page-hero" :style="heroStyle">
+      <div class="page-hero-mask">
+        <div class="mx-auto max-w-screen-xl px-4 py-8">
+          <a-breadcrumb class="page-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>

-    <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>
+          <div class="page-hero-title">{{ pageTitle }}</div>

-    <a-result
-      v-else-if="!navigation"
-      status="404"
-      title="页面不存在"
-      sub-title="未找到对应的页面内容。"
-    >
-      <template #extra>
-        <a-space>
-          <a-button type="primary" @click="navigateTo('/')">返回首页</a-button>
-        </a-space>
-      </template>
-    </a-result>
+          <div class="page-hero-meta">
+            <a-tag v-if="modelName" color="green">{{ modelName }}</a-tag>
+            <a-tag v-if="createTime" color="blue">{{ createTime }}</a-tag>
+            <a-tag v-if="typeof readNum === 'number'" color="default">阅读 {{ readNum }}</a-tag>
+          </div>
+        </div>
+      </div>
+    </section>

-    <template v-else>
-      <a-typography-title :level="1" class="!mb-6">{{ pageTitle }}</a-typography-title>
-      <a-alert v-if="!pageContent" class="mb-6" type="info" show-icon message="暂无内容" />
-      <RichText v-else :content="pageContent" />
-    </template>
-  </div>
+    <section class="mx-auto max-w-screen-xl px-4 py-10">
+      <a-card class="page-card" :bordered="false">
+        <div class="page-card-head">
+          <a-space>
+            <a-button @click="goBack">返回</a-button>
+            <a-button type="primary" @click="navigateTo('/')">首页</a-button>
+          </a-space>
+        </div>
+
+        <a-divider class="!my-4" />
+
+        <div class="page-content">
+          <a-skeleton v-if="pending" active :paragraph="{ rows: 10 }" />
+
+          <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>
+
+          <a-result
+            v-else-if="!navigation"
+            status="404"
+            title="页面不存在"
+            sub-title="未找到对应的页面内容。"
+          >
+            <template #extra>
+              <a-space>
+                <a-button type="primary" @click="navigateTo('/')">返回首页</a-button>
+              </a-space>
+            </template>
+          </a-result>
+
+          <template v-else>
+            <a-alert v-if="!pageContent" class="mb-6" type="info" show-icon message="暂无内容" />
+            <RichText v-else :content="pageContent" />
+          </template>
+        </div>
+      </a-card>
+    </section>
+  </main>
 </template>

 <script setup lang="ts">
 import { getCmsNavigation } from '@/api/cms/cmsNavigation'
 import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
-import { usePageSeo } from '@/composables/usePageSeo'

 const route = useRoute()
+const router = useRouter()

 const id = computed(() => {
  const raw = route.params.id
@@ -88,6 +124,44 @@ const pageTitle = computed(() => {
  return pickString(nav, 'title') || pickString(nav, 'label') || `页面 ${String(route.params.id)}`
 })

+const heroStyle = computed(() => {
+  const nav = navigation.value as unknown as Record<string, unknown> | null
+  const banner = nav ? pickString(nav, 'banner') : ''
+  if (banner) {
+    return {
+      backgroundImage: `url(${banner})`
+    }
+  }
+  return {}
+})
+
+const parentName = computed(() => {
+  const nav = navigation.value as unknown as Record<string, unknown> | null
+  if (!nav) return ''
+  return pickString(nav, 'parentName')
+})
+
+const modelName = computed(() => {
+  const nav = navigation.value as unknown as Record<string, unknown> | null
+  if (!nav) return ''
+  return pickString(nav, 'modelName')
+})
+
+const createTime = computed(() => {
+  const nav = navigation.value as unknown as Record<string, unknown> | null
+  if (!nav) return ''
+  return pickString(nav, 'createTime')
+})
+
+const readNum = computed(() => {
+  const nav = navigation.value as unknown as Record<string, unknown> | null
+  if (!nav) return undefined
+  const n = nav.readNum
+  if (typeof n === 'number' && Number.isFinite(n)) return n
+  if (typeof n === 'string' && n.trim() && Number.isFinite(Number(n))) return Number(n)
+  return undefined
+})
+
 const pageContent = computed(() => {
  const nav = navigation.value as unknown as Record<string, unknown> | null
  if (!nav) return ''
@@ -115,10 +189,94 @@ const pageContent = computed(() => {
  return ''
 })

-usePageSeo({
-  title: pageTitle.value,
-  description: pageContent.value ? pageContent.value.slice(0, 120) : `${pageTitle.value} - 页面内容`,
-  path: route.path
+const seoTitle = computed(() => pageTitle.value)
+const seoDescription = computed(() =>
+  pageContent.value ? pageContent.value.slice(0, 120) : `${pageTitle.value} - 页面内容`
+)
+
+useSeoMeta({
+  title: seoTitle,
+  description: seoDescription,
+  ogTitle: seoTitle,
+  ogDescription: seoDescription,
+  ogType: 'article'
 })
+
+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 }] : []
+}))
+
+function goBack() {
+  if (import.meta.client && window.history.length > 1) {
+    router.back()
+    return
+  }
+  navigateTo('/')
+}
 </script>

+<style scoped>
+.page {
+  background: #f4f6f8;
+}
+
+.page-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);
+}
+
+.page-hero-mask {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.92));
+}
+
+.page-breadcrumb {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.page-hero-title {
+  margin-top: 10px;
+  font-size: 30px;
+  font-weight: 900;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.2;
+}
+
+.page-hero-meta {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.page-card {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
+}
+
+.page-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.page-content {
+  max-width: 860px;
+  margin: 0 auto;
+}
+</style>