From 26c236041f750fd08f7cbc4e521905e782fa4cee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Thu, 29 Jan 2026 15:30:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(pages):=20=E6=B7=BB=E5=8A=A0=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E5=92=8C=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B9=B6=E9=87=8D=E6=9E=84=E9=A1=B5=E9=9D=A2=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 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元数据和链接规范化配置
- 统一页面错误处理和加载状态显示样式
---
 app/api/shop/shopGoods/index.ts           |   2 +-
 app/components/shop/GoodsCategoryPage.vue | 441 ++++++++++++++++++++++
 app/pages/article/[id].vue                | 382 +++++++++++++++++++
 app/pages/goods-item/[id].vue             | 399 ++++++++++++++++++++
 app/pages/goods/[navigationId].vue        |  10 +
 app/pages/page/[id].vue                   | 234 ++++++++++--
 app/pages/product/[id].vue                |  11 -
 app/pages/product/[navigationId].vue      |   8 +
 8 files changed, 1437 insertions(+), 50 deletions(-)
 create mode 100644 app/components/shop/GoodsCategoryPage.vue
 create mode 100644 app/pages/article/[id].vue
 create mode 100644 app/pages/goods-item/[id].vue
 create mode 100644 app/pages/goods/[navigationId].vue
 delete mode 100644 app/pages/product/[id].vue
 create mode 100644 app/pages/product/[navigationId].vue

diff --git a/app/api/shop/shopGoods/index.ts b/app/api/shop/shopGoods/index.ts
index 580cd69..5cc3e2a 100644
--- a/app/api/shop/shopGoods/index.ts
+++ b/app/api/shop/shopGoods/index.ts
@@ -106,7 +106,7 @@ export async function getShopGoods(id: number) {
 }
 
 export async function getCount(params: ShopGoodsParam) {
-  const res = await request.get(MODULES_API_URL + '/shop/shop-goods/data', {
+  const res = await request.get<ApiResult<unknown>>(MODULES_API_URL + '/shop/shop-goods/data', {
     params
   });
   if (res.data.code === 0) {
diff --git a/app/components/shop/GoodsCategoryPage.vue b/app/components/shop/GoodsCategoryPage.vue
new file mode 100644
index 0000000..dd52645
--- /dev/null
+++ b/app/components/shop/GoodsCategoryPage.vue
@@ -0,0 +1,441 @@
+<template>
+  <main class="goods-page">
+    <section class="goods-hero" :style="heroStyle">
+      <div class="goods-hero-mask">
+        <div class="mx-auto max-w-screen-xl px-4 py-8">
+          <a-breadcrumb class="goods-breadcrumb">
+            <a-breadcrumb-item>
+              <NuxtLink to="/">首页</NuxtLink>
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>商品</a-breadcrumb-item>
+            <a-breadcrumb-item>{{ pageTitle }}</a-breadcrumb-item>
+          </a-breadcrumb>
+
+          <div class="goods-hero-title">{{ pageTitle }}</div>
+
+          <div class="goods-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="goods-card" :bordered="false">
+        <a-skeleton v-if="pending" active :paragraph="{ rows: 10 }" />
+
+        <a-result
+          v-else-if="!isValidCategoryId"
+          status="404"
+          title="分类不存在"
+          sub-title="分类ID无效或缺失。"
+        >
+          <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="!goodsList.length" description="暂无商品" />
+
+          <div v-else class="grid grid-cols-12 gap-6">
+            <a-card
+              v-for="(g, idx) in goodsList"
+              :key="String(g.goodsId ?? g.code ?? `${String(route.params.navigationId)}-${idx}`)"
+              hoverable
+              class="col-span-12 sm:col-span-6 lg:col-span-3 goods-item"
+              @click="goDetail(g)"
+            >
+              <template #cover>
+                <img
+                  class="goods-cover"
+                  :src="resolveGoodsImage(g)"
+                  :alt="resolveGoodsTitle(g)"
+                  loading="lazy"
+                  @error="onImgError"
+                />
+              </template>
+
+              <a-card-meta :title="resolveGoodsTitle(g)">
+                <template #description>
+                  <div class="goods-desc">
+                    <div class="goods-price-row">
+                      <span class="goods-price">
+                        {{ formatMoney(resolveGoodsPrice(g)) }}
+                        <span v-if="resolveGoodsUnit(g)" class="goods-unit">/ {{ resolveGoodsUnit(g) }}</span>
+                      </span>
+                      <a-tag v-if="Number(g.isNew) === 1" color="blue">新品</a-tag>
+                      <a-tag v-if="Number(g.recommend) === 1" color="green">推荐</a-tag>
+                    </div>
+                    <div class="goods-sub">
+                      <span v-if="typeof g.sales === 'number'">销量 {{ g.sales }}</span>
+                      <span v-if="typeof g.stock === 'number'">库存 {{ g.stock }}</span>
+                    </div>
+                  </div>
+                </template>
+              </a-card-meta>
+            </a-card>
+          </div>
+
+          <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="['12', '24', '48', '96']"
+              @change="onPageChange"
+              @show-size-change="onPageSizeChange"
+            />
+          </div>
+        </template>
+      </a-card>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { pageShopGoods } from '@/api/shop/shopGoods'
+import type { ShopGoods } from '@/api/shop/shopGoods/model'
+import { getShopGoodsCategory } from '@/api/shop/shopGoodsCategory'
+import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model'
+import type { LocationQueryRaw } from 'vue-router'
+
+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 categoryId = computed(() => parseNumberParam(route.params.navigationId))
+const isValidCategoryId = computed(() => Number.isFinite(categoryId.value) && categoryId.value > 0)
+
+const page = computed(() => parsePositiveInt(route.query.page, 1))
+const limit = computed(() => parsePositiveInt(route.query.limit, 12))
+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: category } = await useAsyncData<ShopGoodsCategory | null>(
+  () => `shop-goods-category-${String(route.params.navigationId)}`,
+  async () => {
+    if (!isValidCategoryId.value) return null
+    return await getShopGoodsCategory(categoryId.value).catch(() => null)
+  },
+  { watch: [categoryId] }
+)
+
+const {
+  data: goodsPage,
+  pending,
+  error: loadError,
+  refresh
+} = await useAsyncData<{ list: ShopGoods[]; count: number } | null>(
+  () =>
+    `shop-goods-${String(route.params.navigationId)}-${page.value}-${limit.value}-${keywords.value}`,
+  async () => {
+    if (!isValidCategoryId.value) return null
+    return await pageShopGoods({
+      categoryId: categoryId.value,
+      page: page.value,
+      limit: limit.value,
+      keywords: keywords.value || undefined
+    })
+  },
+  { watch: [categoryId, page, limit, keywords] }
+)
+
+const goodsList = computed(() => goodsPage.value?.list ?? [])
+const total = computed(() => goodsPage.value?.count ?? 0)
+
+function goDetail(g: ShopGoods) {
+  const id = (g as unknown as { goodsId?: unknown }).goodsId
+  const n = typeof id === 'number' ? id : Number(id)
+  if (!Number.isFinite(n)) return
+  navigateTo(`/goods-item/${n}`)
+}
+
+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 = category.value?.title?.trim()
+  if (name) return name
+  if (isValidCategoryId.value) return `分类 ${categoryId.value}`
+  return '商品列表'
+})
+
+const heroStyle = computed(() => {
+  const banner = pickString(category.value, 'image')
+  if (banner) {
+    return {
+      backgroundImage: `url(${banner})`
+    }
+  }
+  return {}
+})
+
+function resolveGoodsTitle(g: ShopGoods) {
+  return String(g.goodsName || g.name || g.code || '未命名商品').trim()
+}
+
+function resolveGoodsPrice(g: ShopGoods) {
+  const anyG = g as unknown as Record<string, unknown>
+  const candidates = [
+    anyG.salePrice,
+    anyG.price,
+    anyG.chainStorePrice,
+    anyG.originPrice,
+    anyG.buyingPrice
+  ]
+  for (const v of candidates) {
+    if (typeof v === 'number' && Number.isFinite(v)) return v
+    if (typeof v === 'string' && v.trim()) return v.trim()
+  }
+  return undefined
+}
+
+function resolveGoodsUnit(g: ShopGoods) {
+  const unit = (g as unknown as { unitName?: unknown }).unitName
+  if (typeof unit === 'string' && unit.trim()) return unit.trim()
+  return ''
+}
+
+function resolveGoodsImage(g: ShopGoods) {
+  const img = typeof g.image === 'string' ? g.image.trim() : ''
+  if (img) return img
+  const files = typeof g.files === 'string' ? g.files.trim() : ''
+  if (files) {
+    // Some APIs store files as JSON array string: [{ url: "..." }, ...]
+    if (files.startsWith('[')) {
+      try {
+        const parsed = JSON.parse(files) as unknown
+        if (Array.isArray(parsed)) {
+          const first = parsed[0] as any
+          const url = typeof first?.url === 'string' ? first.url.trim() : ''
+          if (url) return url
+        }
+      } catch {
+        // ignore JSON parse errors
+      }
+    }
+    return files.split(',')[0]?.trim() || ''
+  }
+  // Keep it empty -> browser will trigger @error and swap to placeholder.
+  return ''
+}
+
+function onImgError(e: Event) {
+  const img = e.target as HTMLImageElement | null
+  if (!img) return
+  img.onerror = null
+  img.src =
+    'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
+}
+
+function formatMoney(value: unknown) {
+  if (typeof value === 'number' && Number.isFinite(value)) return `¥${value.toFixed(2)}`
+  const v = typeof value === 'string' ? value.trim() : ''
+  if (!v) return '-'
+  const n = Number(v)
+  if (!Number.isFinite(n)) return `¥${v}`
+  return `¥${n.toFixed(2)}`
+}
+
+const seoTitle = computed(() => `${pageTitle.value} - 商品`)
+const seoDescription = computed(() => {
+  if (!isValidCategoryId.value) return '商品分类列表'
+  const suffix = keywords.value ? `，关键词：${keywords.value}` : ''
+  return `分类 ${pageTitle.value} 商品列表${suffix}`
+})
+
+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>
+.goods-page {
+  background: #f4f6f8;
+}
+
+.goods-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);
+}
+
+.goods-hero-mask {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.92));
+}
+
+.goods-breadcrumb {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.goods-hero-title {
+  margin-top: 10px;
+  font-size: 30px;
+  font-weight: 900;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.2;
+}
+
+.goods-hero-meta {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.goods-card {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
+}
+
+.goods-cover {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  display: block;
+  background: #f3f4f6;
+}
+
+.goods-desc {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.goods-price-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.goods-price {
+  color: #16a34a;
+  font-weight: 800;
+}
+
+.goods-unit {
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+.goods-sub {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  color: rgba(0, 0, 0, 0.55);
+  font-size: 12px;
+}
+</style>
diff --git a/app/pages/article/[id].vue b/app/pages/article/[id].vue
new file mode 100644
index 0000000..f2f77d2
--- /dev/null
+++ b/app/pages/article/[id].vue
@@ -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>
diff --git a/app/pages/goods-item/[id].vue b/app/pages/goods-item/[id].vue
new file mode 100644
index 0000000..3d96553
--- /dev/null
+++ b/app/pages/goods-item/[id].vue
@@ -0,0 +1,399 @@
+<template>
+  <main class="detail">
+    <section class="mx-auto max-w-screen-xl px-4 py-8">
+      <a-breadcrumb class="detail-breadcrumb">
+        <a-breadcrumb-item>
+          <NuxtLink to="/">首页</NuxtLink>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item>
+          <span>商品</span>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
+      </a-breadcrumb>
+    </section>
+
+    <section class="mx-auto max-w-screen-xl px-4 pb-12">
+      <a-card class="detail-card" :bordered="false">
+        <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="goBack">返回</a-button>
+            </a-space>
+          </template>
+        </a-result>
+
+        <a-result
+          v-else-if="!goods"
+          status="404"
+          title="商品不存在"
+          sub-title="未找到对应的商品信息。"
+        >
+          <template #extra>
+            <a-space>
+              <a-button type="primary" @click="navigateTo('/')">返回首页</a-button>
+              <a-button @click="goBack">返回</a-button>
+            </a-space>
+          </template>
+        </a-result>
+
+        <template v-else>
+          <a-row :gutter="[24, 24]">
+            <a-col :xs="24" :lg="10">
+              <div class="detail-cover-wrap">
+                <img
+                  class="detail-cover"
+                  :src="coverUrl"
+                  :alt="title"
+                  loading="lazy"
+                  @error="onImgError"
+                />
+              </div>
+
+              <div v-if="galleryUrls.length" class="mt-4 grid grid-cols-4 gap-3">
+                <button
+                  v-for="u in galleryUrls"
+                  :key="u"
+                  type="button"
+                  class="thumb"
+                  @click="coverUrl = u"
+                >
+                  <img class="thumb-img" :src="u" :alt="title" loading="lazy" @error="onImgError" />
+                </button>
+              </div>
+            </a-col>
+
+            <a-col :xs="24" :lg="14">
+              <div class="detail-title-row">
+                <a-typography-title :level="2" class="!mb-2">{{ title }}</a-typography-title>
+                <div class="detail-tags">
+                  <a-tag v-if="unitName" color="blue">{{ unitName }}</a-tag>
+                  <a-tag v-if="typeof sales === 'number'" color="default">销量 {{ sales }}</a-tag>
+                  <a-tag v-if="typeof stock === 'number'" color="default">库存 {{ stock }}</a-tag>
+                </div>
+              </div>
+
+              <div class="detail-price">
+                <span class="detail-price-main">{{ formatMoney(price) }}</span>
+                <span v-if="unitName" class="detail-price-unit">/ {{ unitName }}</span>
+              </div>
+
+              <div class="mt-4">
+                <a-descriptions bordered size="small" :column="2">
+                  <a-descriptions-item label="商品ID">{{ goodsId }}</a-descriptions-item>
+                  <a-descriptions-item label="分类ID">{{ categoryIdText }}</a-descriptions-item>
+                  <a-descriptions-item label="创建时间">{{ createTime }}</a-descriptions-item>
+                  <a-descriptions-item label="更新时间">{{ updateTime }}</a-descriptions-item>
+                </a-descriptions>
+              </div>
+
+              <div class="mt-4">
+                <a-space>
+                  <a-button @click="goBack">返回</a-button>
+                  <a-button type="primary" @click="navigateTo('/')">首页</a-button>
+                </a-space>
+              </div>
+            </a-col>
+          </a-row>
+
+          <a-divider class="!my-6" />
+
+          <a-typography-title :level="4" class="!mb-3">商品详情</a-typography-title>
+          <a-alert v-if="!content" type="info" show-icon message="暂无详情内容" class="mb-4" />
+          <RichText v-else :content="content" />
+        </template>
+      </a-card>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { getShopGoods } from '@/api/shop/shopGoods'
+import type { ShopGoods } from '@/api/shop/shopGoods/model'
+
+const route = useRoute()
+const router = useRouter()
+
+const id = computed(() => {
+  const raw = route.params.id
+  const text = Array.isArray(raw) ? raw[0] : raw
+  const n = Number(text)
+  return Number.isFinite(n) ? n : NaN
+})
+
+const {
+  data: goods,
+  pending,
+  error: loadError,
+  refresh
+} = await useAsyncData<ShopGoods | null>(
+  () => `shop-goods-${String(route.params.id)}`,
+  async () => {
+    if (!Number.isFinite(id.value)) return null
+    return await getShopGoods(id.value)
+  },
+  { watch: [id] }
+)
+
+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() : ''
+}
+
+function pickNumber(obj: unknown, key: string): number | undefined {
+  if (!obj || typeof obj !== 'object') return undefined
+  const record = obj as Record<string, unknown>
+  const value = record[key]
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string' && value.trim() && Number.isFinite(Number(value))) return Number(value)
+  return undefined
+}
+
+const title = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  if (!g) return '商品详情'
+  return (
+    pickString(g, 'goodsName') ||
+    pickString(g, 'name') ||
+    pickString(g, 'code') ||
+    `商品 ${String(route.params.id)}`
+  )
+})
+
+const unitName = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  return g ? pickString(g, 'unitName') : ''
+})
+
+const price = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  if (!g) return undefined
+  return (
+    pickNumber(g, 'salePrice') ??
+    pickNumber(g, 'price') ??
+    pickNumber(g, 'chainStorePrice') ??
+    pickNumber(g, 'originPrice') ??
+    pickNumber(g, 'buyingPrice')
+  )
+})
+
+const sales = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  return g ? pickNumber(g, 'sales') : undefined
+})
+
+const stock = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  return g ? pickNumber(g, 'stock') : undefined
+})
+
+const goodsId = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  return g ? pickNumber(g, 'goodsId') : undefined
+})
+
+const categoryIdText = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  const n = g ? pickNumber(g, 'categoryId') : undefined
+  return typeof n === 'number' ? String(n) : '-'
+})
+
+const createTime = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  return g ? pickString(g, 'createTime') || '-' : '-'
+})
+
+const updateTime = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  return g ? pickString(g, 'updateTime') || '-' : '-'
+})
+
+const content = computed(() => {
+  const g = goods.value as unknown as Record<string, unknown> | null
+  if (!g) return ''
+  return pickString(g, 'content')
+})
+
+function parseGalleryUrls(g: ShopGoods | null | undefined) {
+  if (!g) return []
+  const anyG = g as unknown as Record<string, unknown>
+  const files = typeof anyG.files === 'string' ? anyG.files.trim() : ''
+  const image = typeof anyG.image === 'string' ? anyG.image.trim() : ''
+  const urls: string[] = []
+  if (image) urls.push(image)
+
+  if (files) {
+    if (files.startsWith('[')) {
+      try {
+        const parsed = JSON.parse(files) as unknown
+        if (Array.isArray(parsed)) {
+          for (const it of parsed) {
+            const url = typeof (it as any)?.url === 'string' ? String((it as any).url).trim() : ''
+            if (url) urls.push(url)
+          }
+        }
+      } catch {
+        // ignore JSON parse errors
+      }
+    } else {
+      for (const part of files.split(',')) {
+        const u = part.trim()
+        if (u) urls.push(u)
+      }
+    }
+  }
+
+  return Array.from(new Set(urls)).filter(Boolean)
+}
+
+const galleryUrls = computed(() => parseGalleryUrls(goods.value))
+const coverUrl = ref('')
+
+watch(
+  () => galleryUrls.value,
+  (list) => {
+    coverUrl.value =
+      list[0] ||
+      'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
+  },
+  { immediate: true }
+)
+
+function onImgError(e: Event) {
+  const img = e.target as HTMLImageElement | null
+  if (!img) return
+  img.onerror = null
+  img.src = 'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
+}
+
+function formatMoney(value: unknown) {
+  if (typeof value === 'number' && Number.isFinite(value)) return `¥${value.toFixed(2)}`
+  const v = typeof value === 'string' ? value.trim() : ''
+  if (!v) return '-'
+  const n = Number(v)
+  if (!Number.isFinite(n)) return `¥${v}`
+  return `¥${n.toFixed(2)}`
+}
+
+function goBack() {
+  if (import.meta.client && window.history.length > 1) {
+    router.back()
+    return
+  }
+  navigateTo('/')
+}
+
+const seoTitle = computed(() => title.value)
+const seoDescription = computed(() => `${title.value}，价格 ${formatMoney(price.value)}${unitName.value ? '/' + unitName.value : ''}`)
+
+useSeoMeta({
+  title: seoTitle,
+  description: seoDescription,
+  ogTitle: seoTitle,
+  ogDescription: seoDescription,
+  ogType: 'product'
+})
+
+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>
+.detail {
+  background: #f4f6f8;
+}
+
+.detail-breadcrumb {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-card {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
+}
+
+.detail-cover-wrap {
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f3f4f6;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.detail-cover {
+  width: 100%;
+  height: 360px;
+  object-fit: cover;
+  display: block;
+}
+
+.thumb {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.thumb-img {
+  width: 100%;
+  height: 70px;
+  object-fit: cover;
+  display: block;
+  background: #f3f4f6;
+}
+
+.detail-title-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.detail-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.detail-price {
+  margin-top: 8px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.detail-price-main {
+  color: #16a34a;
+  font-size: 28px;
+  font-weight: 900;
+}
+
+.detail-price-unit {
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 700;
+}
+</style>
+
diff --git a/app/pages/goods/[navigationId].vue b/app/pages/goods/[navigationId].vue
new file mode 100644
index 0000000..7caefbc
--- /dev/null
+++ b/app/pages/goods/[navigationId].vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import GoodsCategoryPage from '@/components/shop/GoodsCategoryPage.vue'
+</script>
+
+<template>
+  <GoodsCategoryPage />
+</template>
+
+<style scoped>
+</style>
diff --git a/app/pages/page/[id].vue b/app/pages/page/[id].vue
index 0c650a9..7162ce8 100644
--- 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>
diff --git a/app/pages/product/[id].vue b/app/pages/product/[id].vue
deleted file mode 100644
index 85af715..0000000
--- a/app/pages/product/[id].vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
diff --git a/app/pages/product/[navigationId].vue b/app/pages/product/[navigationId].vue
new file mode 100644
index 0000000..c2bf16a
--- /dev/null
+++ b/app/pages/product/[navigationId].vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import GoodsCategoryPage from '@/components/shop/GoodsCategoryPage.vue'
+</script>
+
+<template>
+  <GoodsCategoryPage />
+</template>
+