From 90f3e999e27bb33ae60780cec2d7bd7b63fce1f4 Mon Sep 17 00:00:00 2001
From: gxwebsoft <170083662@qq.com>
Date: Wed, 21 Jan 2026 15:31:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(page):=20=E6=B7=BB=E5=8A=A0=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E8=AF=A6=E6=83=85=E5=92=8C=E6=A0=8F=E7=9B=AE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建了 article/[id].vue 页面用于显示栏目下文章列表
- 实现了 item/[id].vue 页面用于展示文章详情内容
- 开发了 page/[id].vue 页面用于单页内容展示
- 集成了 RichText 组件用于安全渲染富文本内容
- 实现了面包屑导航和分页功能
- 添加了搜索和刷新功能
- 完善了 SEO 元数据设置
---
 app/components/RichText.vue          | 134 +++++++++++++++
 app/pages/article/[id].vue           | 193 +++++++++++++++++++++
 app/pages/item/[id].vue              | 125 ++++++++++++++
 app/pages/page/[id].vue              | 243 +++++++++++++++++++++++++++
 server/api/cms-navigation.get.ts     |  42 +++++
 server/api/cms/cms-navigation.get.ts |   2 +
 6 files changed, 739 insertions(+)
 create mode 100644 app/components/RichText.vue
 create mode 100644 app/pages/article/[id].vue
 create mode 100644 app/pages/item/[id].vue
 create mode 100644 app/pages/page/[id].vue
 create mode 100644 server/api/cms-navigation.get.ts
 create mode 100644 server/api/cms/cms-navigation.get.ts

diff --git a/app/components/RichText.vue b/app/components/RichText.vue
new file mode 100644
index 0000000..f98388d
--- /dev/null
+++ b/app/components/RichText.vue
@@ -0,0 +1,134 @@
+<template>
+  <div v-if="mode === 'html'" class="rich-text" v-html="normalizedHtml" />
+  <div v-else class="rich-text whitespace-pre-wrap break-words">
+    {{ text }}
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  content?: string | null
+}>()
+
+const text = computed(() => (typeof props.content === 'string' ? props.content : ''))
+
+// Heuristic: treat as HTML only when it looks like it contains tags.
+const mode = computed(() => (/<[a-z][\s\S]*>/i.test(text.value) ? 'html' : 'text'))
+
+function escapeHtml(input: string) {
+  return input
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;')
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+const normalizedHtml = computed(() => {
+  const raw = text.value.trim()
+  if (!raw) return ''
+
+  // Some CMS fields store JSON; try to pull out a common HTML field.
+  if (
+    (raw.startsWith('{') && raw.endsWith('}')) ||
+    (raw.startsWith('[') && raw.endsWith(']'))
+  ) {
+    try {
+      const parsed: unknown = JSON.parse(raw)
+
+      let candidate = ''
+      if (typeof parsed === 'string') candidate = parsed
+      else if (isRecord(parsed)) {
+        const html = parsed.html
+        const content = parsed.content
+        const body = parsed.body
+        if (typeof html === 'string') candidate = html
+        else if (typeof content === 'string') candidate = content
+        else if (typeof body === 'string') candidate = body
+      }
+
+      if (candidate && /<[a-z][\s\S]*>/i.test(candidate)) return candidate
+
+      // Fallback: render JSON as <pre>.
+      return `<pre class="rich-pre">${escapeHtml(JSON.stringify(parsed, null, 2))}</pre>`
+    } catch {
+      // ignore JSON parse errors
+    }
+  }
+
+  return raw
+})
+</script>
+
+<style scoped>
+.rich-text {
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.75;
+  font-size: 16px;
+}
+
+.rich-text :deep(h1) {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 18px 0 12px;
+}
+
+.rich-text :deep(h2) {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 16px 0 10px;
+}
+
+.rich-text :deep(h3) {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 14px 0 8px;
+}
+
+.rich-text :deep(p) {
+  margin: 10px 0;
+}
+
+.rich-text :deep(a) {
+  color: #1677ff;
+  text-decoration: underline;
+}
+
+.rich-text :deep(ul),
+.rich-text :deep(ol) {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.rich-text :deep(li) {
+  margin: 6px 0;
+}
+
+.rich-text :deep(img) {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 12px auto;
+}
+
+.rich-text :deep(blockquote) {
+  margin: 12px 0;
+  padding: 8px 12px;
+  border-left: 4px solid rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.rich-pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  font-size: 13px;
+  line-height: 1.6;
+}
+</style>
diff --git a/app/pages/article/[id].vue b/app/pages/article/[id].vue
new file mode 100644
index 0000000..791bc71
--- /dev/null
+++ b/app/pages/article/[id].vue
@@ -0,0 +1,193 @@
+<template>
+  <main class="min-h-screen bg-gray-50 px-4 py-8">
+    <div class="mx-auto max-w-screen-lg space-y-6">
+      <a-breadcrumb>
+        <a-breadcrumb-item>
+          <NuxtLink to="/">首页</NuxtLink>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item>栏目</a-breadcrumb-item>
+        <a-breadcrumb-item>{{ navTitle }}</a-breadcrumb-item>
+      </a-breadcrumb>
+
+      <a-card class="shadow-sm">
+        <template #title>
+          <div class="space-y-1">
+            <div class="text-xl font-semibold text-gray-900">{{ navTitle }}</div>
+            <div v-if="navDescription" class="text-sm text-gray-500">{{ navDescription }}</div>
+          </div>
+        </template>
+
+        <a-image
+          v-if="navBanner"
+          :src="navBanner"
+          :preview="false"
+          class="mb-5 w-full"
+        />
+
+        <div class="flex flex-wrap items-center gap-3">
+          <a-input
+            v-model:value="keywords"
+            placeholder="搜索本栏目文章"
+            class="w-72"
+            allow-clear
+            @press-enter="doSearch"
+          />
+          <a-button type="primary" :loading="pending" @click="doSearch">搜索</a-button>
+          <a-button :disabled="pending" @click="refresh">刷新</a-button>
+        </div>
+
+        <a-alert
+          v-if="loadError"
+          class="mt-4"
+          show-icon
+          type="error"
+          :message="String(loadError)"
+        />
+
+        <a-list
+          class="mt-4"
+          :data-source="list"
+          :loading="pending"
+          item-layout="vertical"
+        >
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-list-item-meta>
+                <template #title>
+                  <NuxtLink
+                    v-if="item?.articleId"
+                    class="text-blue-600 hover:underline"
+                    :to="`/item/${item.articleId}`"
+                  >
+                    {{ item.title }}
+                  </NuxtLink>
+                  <span v-else>{{ item?.title }}</span>
+                </template>
+                <template #description>
+                  <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500">
+                    <span v-if="item?.createTime">发布时间：{{ item.createTime }}</span>
+                    <span v-if="item?.author">作者：{{ item.author }}</span>
+                    <span v-if="item?.source">来源：{{ item.source }}</span>
+                    <span v-if="typeof item?.actualViews === 'number'">阅读：{{ item.actualViews }}</span>
+                  </div>
+                </template>
+              </a-list-item-meta>
+
+              <div class="grid grid-cols-12 gap-4">
+                <div :class="item?.image ? 'col-span-12 md:col-span-9' : 'col-span-12'">
+                  <div v-if="item?.overview" class="text-gray-700">
+                    {{ item.overview }}
+                  </div>
+                </div>
+                <div v-if="item?.image" class="col-span-12 md:col-span-3">
+                  <a-image :src="item.image" :preview="false" class="w-full" />
+                </div>
+              </div>
+            </a-list-item>
+          </template>
+        </a-list>
+
+        <div class="mt-4 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>
+      </a-card>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { pageCmsArticle } from '@/api/cms/cmsArticle'
+import { getCmsNavigation } from '@/api/cms/cmsNavigation'
+import { usePageSeo } from '@/composables/usePageSeo'
+
+const route = useRoute()
+
+const navigationId = computed(() => {
+  const raw = route.params.id
+  const val = Array.isArray(raw) ? raw[0] : raw
+  const n = Number(val)
+  return Number.isFinite(n) ? n : NaN
+})
+
+const page = ref(1)
+const limit = ref(10)
+const keywords = ref('')
+
+watch(
+  () => route.query.keywords,
+  (val) => {
+    const next = Array.isArray(val) ? val[0] : val
+    if (typeof next === 'string') keywords.value = next.trim()
+  },
+  { immediate: true }
+)
+
+const {
+  data,
+  pending,
+  error: loadError,
+  refresh
+} = useAsyncData(
+  () => `cms-navigation-article-page-${navigationId.value}-${page.value}-${limit.value}-${keywords.value}`,
+  async () => {
+    if (!Number.isFinite(navigationId.value)) throw new Error('无效的栏目ID')
+
+    const [nav, articles] = await Promise.all([
+      getCmsNavigation(navigationId.value),
+      pageCmsArticle({
+        page: page.value,
+        limit: limit.value,
+        keywords: keywords.value || undefined,
+        status: 0,
+        // Some backends use categoryId, some use navigationId; send both.
+        categoryId: navigationId.value,
+        navigationId: navigationId.value
+      })
+    ])
+
+    return { nav, articles }
+  },
+  { watch: [navigationId] }
+)
+
+const navTitle = computed(() => data.value?.nav?.title?.trim() || `栏目 ${navigationId.value}`)
+const navDescription = computed(() => data.value?.nav?.comments?.trim() || '')
+const navBanner = computed(() => (typeof data.value?.nav?.banner === 'string' ? data.value?.nav?.banner.trim() : ''))
+
+const list = computed(() => data.value?.articles?.list ?? [])
+const total = computed(() => data.value?.articles?.count ?? 0)
+
+function doSearch() {
+  page.value = 1
+  refresh()
+}
+
+function onPageChange(nextPage: number) {
+  page.value = nextPage
+  refresh()
+}
+
+function onPageSizeChange(_current: number, nextSize: number) {
+  limit.value = nextSize
+  page.value = 1
+  refresh()
+}
+
+watchEffect(() => {
+  if (!Number.isFinite(navigationId.value)) return
+  usePageSeo({
+    title: navTitle.value,
+    description: navDescription.value || navTitle.value,
+    path: route.fullPath
+  })
+})
+</script>
+
diff --git a/app/pages/item/[id].vue b/app/pages/item/[id].vue
new file mode 100644
index 0000000..9c417c8
--- /dev/null
+++ b/app/pages/item/[id].vue
@@ -0,0 +1,125 @@
+<template>
+  <main class="min-h-screen bg-gray-50 px-4 py-8">
+    <div class="mx-auto max-w-screen-lg space-y-6">
+      <a-breadcrumb>
+        <a-breadcrumb-item>
+          <NuxtLink to="/">首页</NuxtLink>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item>
+          <NuxtLink to="/articles">文章</NuxtLink>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item v-if="article?.categoryId">
+          <NuxtLink :to="`/article/${article.categoryId}`">
+            {{ article.categoryName || '栏目' }}
+          </NuxtLink>
+        </a-breadcrumb-item>
+        <a-breadcrumb-item>{{ articleTitle }}</a-breadcrumb-item>
+      </a-breadcrumb>
+
+      <a-skeleton v-if="pending" active :paragraph="{ rows: 10 }" />
+
+      <a-result
+        v-else-if="loadError"
+        status="error"
+        title="文章加载失败"
+        :sub-title="String(loadError)"
+      />
+
+      <template v-else>
+        <a-card class="shadow-sm">
+          <template #title>
+            <div class="space-y-2">
+              <div class="text-2xl font-semibold text-gray-900">
+                {{ articleTitle }}
+              </div>
+              <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-500">
+                <span v-if="article?.categoryName">栏目：{{ article.categoryName }}</span>
+                <span v-if="article?.author">作者：{{ article.author }}</span>
+                <span v-if="article?.createTime">发布时间：{{ article.createTime }}</span>
+                <span v-if="article?.source">来源：{{ article.source }}</span>
+              </div>
+            </div>
+          </template>
+
+          <a-alert
+            v-if="articleOverview"
+            type="info"
+            show-icon
+            class="mb-5"
+            :message="articleOverview"
+          />
+
+          <a-image
+            v-if="articleCover"
+            :src="articleCover"
+            :preview="false"
+            class="mb-5 w-full"
+          />
+
+          <RichText :content="articleContent" />
+        </a-card>
+      </template>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { getCmsArticle } from '@/api/cms/cmsArticle'
+import { listCmsArticleContent } from '@/api/cms/cmsArticleContent'
+import RichText from '@/components/RichText.vue'
+import { usePageSeo } from '@/composables/usePageSeo'
+import type { CmsArticle } from '@/api/cms/cmsArticle/model'
+
+const route = useRoute()
+
+const articleId = computed(() => {
+  const raw = route.params.id
+  const val = Array.isArray(raw) ? raw[0] : raw
+  const n = Number(val)
+  return Number.isFinite(n) ? n : NaN
+})
+
+async function loadArticleDetail(id: number): Promise<{ article: CmsArticle; content: string }> {
+  const article = await getCmsArticle(id)
+
+  // Prefer content field, fallback to detail/overview if API differs by model.
+  let content = String(article.content || article.detail || '').trim()
+
+  if (!content) {
+    try {
+      const list = await listCmsArticleContent({ articleId: id, limit: 1 })
+      const hit = Array.isArray(list) ? list[0] : null
+      if (hit?.content) content = String(hit.content).trim()
+    } catch {
+      // ignore content enrichment failures; still render metadata
+    }
+  }
+
+  return { article, content }
+}
+
+const { data, pending, error: loadError } = useAsyncData(
+  () => `cms-article-item-${articleId.value}`,
+  async () => {
+    if (!Number.isFinite(articleId.value)) throw new Error('无效的文章ID')
+    return loadArticleDetail(articleId.value)
+  },
+  { watch: [articleId] }
+)
+
+const article = computed(() => data.value?.article)
+const articleTitle = computed(() => article.value?.title?.trim() || `文章 ${articleId.value}`)
+const articleOverview = computed(() => article.value?.overview?.trim() || '')
+const articleCover = computed(() => (typeof article.value?.image === 'string' ? article.value?.image.trim() : ''))
+const articleContent = computed(() => data.value?.content || '')
+
+watchEffect(() => {
+  if (!Number.isFinite(articleId.value)) return
+  usePageSeo({
+    title: articleTitle.value,
+    description: articleOverview.value || articleTitle.value,
+    path: route.fullPath
+  })
+})
+</script>
+
diff --git a/app/pages/page/[id].vue b/app/pages/page/[id].vue
new file mode 100644
index 0000000..d838f36
--- /dev/null
+++ b/app/pages/page/[id].vue
@@ -0,0 +1,243 @@
+<template>
+  <main class="min-h-screen bg-gray-50 px-4 py-8">
+    <div class="mx-auto max-w-screen-xl space-y-6">
+      <a-skeleton v-if="navPending" active :paragraph="{ rows: 8 }" />
+
+      <a-result
+        v-else-if="navError"
+        status="error"
+        title="页面加载失败"
+        :sub-title="String(navError)"
+      />
+
+      <template v-else>
+        <a-card class="shadow-sm">
+          <template #title>
+            <div class="flex flex-col gap-1">
+              <div class="text-lg font-semibold text-gray-900">
+                {{ parentTitle }}
+              </div>
+              <div v-if="parentDescription" class="text-sm text-gray-500">
+                {{ parentDescription }}
+              </div>
+            </div>
+          </template>
+
+          <a-image
+            v-if="parentBanner"
+            :src="parentBanner"
+            :preview="false"
+            class="mb-5 w-full"
+          />
+
+          <a-layout class="bg-transparent">
+            <a-layout-sider
+              v-if="children.length"
+              theme="light"
+              :width="240"
+              class="rounded-xl border border-black/5 bg-white overflow-hidden"
+              breakpoint="lg"
+              collapsed-width="0"
+            >
+              <a-menu
+                mode="inline"
+                :selected-keys="selectedKeys"
+                @click="onMenuClick"
+              >
+                <a-menu-item v-for="n in children" :key="String(n.navigationId)">
+                  {{ n.title || n.label || `栏目 ${n.navigationId}` }}
+                </a-menu-item>
+              </a-menu>
+            </a-layout-sider>
+
+            <a-layout-content :class="children.length ? 'pl-0 lg:pl-6 pt-6 lg:pt-0' : ''">
+              <a-skeleton v-if="contentPending" active :paragraph="{ rows: 10 }" />
+
+              <a-result
+                v-else-if="contentError"
+                status="error"
+                title="内容加载失败"
+                :sub-title="String(contentError)"
+              />
+
+              <template v-else>
+                <div class="space-y-2">
+                  <div class="text-2xl font-semibold text-gray-900">
+                    {{ contentTitle }}
+                  </div>
+                  <div class="text-sm text-gray-500">
+                    <span v-if="articleMeta?.createTime">发布时间：{{ articleMeta.createTime }}</span>
+                    <span v-if="articleMeta?.author" class="ml-4">作者：{{ articleMeta.author }}</span>
+                    <span v-if="articleMeta?.source" class="ml-4">来源：{{ articleMeta.source }}</span>
+                  </div>
+                </div>
+
+                <a-alert
+                  v-if="articleMeta?.overview"
+                  type="info"
+                  show-icon
+                  class="my-5"
+                  :message="String(articleMeta.overview)"
+                />
+
+                <a-image
+                  v-if="articleMeta?.image"
+                  :src="String(articleMeta.image)"
+                  :preview="false"
+                  class="mb-5 w-full"
+                />
+
+                <RichText :content="contentBody" />
+              </template>
+            </a-layout-content>
+          </a-layout>
+        </a-card>
+      </template>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { getCmsArticle } from '@/api/cms/cmsArticle'
+import { listCmsArticleContent } from '@/api/cms/cmsArticleContent'
+import RichText from '@/components/RichText.vue'
+import { usePageSeo } from '@/composables/usePageSeo'
+import type { ApiEnvelope } from '~/types/api'
+import type { CmsNavigation } from '@/api/cms/cmsNavigation/model'
+import type { CmsArticle } from '@/api/cms/cmsArticle/model'
+
+const route = useRoute()
+
+const parentId = computed(() => {
+  const raw = route.params.id
+  const val = Array.isArray(raw) ? raw[0] : raw
+  const n = Number(val)
+  return Number.isFinite(n) ? n : NaN
+})
+
+const selectedNavId = computed(() => {
+  const raw = route.query.nav
+  const val = Array.isArray(raw) ? raw[0] : raw
+  const n = Number(val)
+  return Number.isFinite(n) ? n : NaN
+})
+
+function pickNavigationList(payload: unknown): CmsNavigation[] {
+  if (Array.isArray(payload)) return payload as CmsNavigation[]
+  const env = payload as ApiEnvelope<CmsNavigation[]>
+  if (env && typeof env === 'object' && Array.isArray(env.data)) return env.data
+  return []
+}
+
+const { data: navData, pending: navPending, error: navError } = useAsyncData(
+  () => `cms-navigation-single-${parentId.value}`,
+  async () => {
+    if (!Number.isFinite(parentId.value)) throw new Error('无效的页面ID')
+    // Single-page type: fetch navigation list by parentId.
+    const res = await $fetch<unknown>('/api/cms-navigation', {
+      query: { parentId: String(parentId.value) }
+    })
+    const children = pickNavigationList(res)
+      .filter((n) => (n.hide ?? 0) !== 1)
+      .slice()
+      .sort((a, b) => (a.sortNumber ?? 0) - (b.sortNumber ?? 0))
+    return { children }
+  },
+  { watch: [parentId] }
+)
+
+const children = computed<CmsNavigation[]>(() => navData.value?.children ?? [])
+
+const activeNav = computed<CmsNavigation | null>(() => {
+  const list = children.value
+  if (!list.length) return null
+  if (Number.isFinite(selectedNavId.value)) {
+    const hit = list.find((n) => n.navigationId === selectedNavId.value)
+    if (hit) return hit
+  }
+  return list[0]
+})
+
+// Keep URL stable so refresh/back works (default to first child).
+if (import.meta.client) {
+  watchEffect(() => {
+    if (!children.value.length) return
+    if (Number.isFinite(selectedNavId.value)) return
+    const first = children.value[0]?.navigationId
+    if (!first) return
+    navigateTo({ path: route.path, query: { ...route.query, nav: String(first) } }, { replace: true })
+  })
+}
+
+const selectedKeys = computed(() => {
+  const key = activeNav.value?.navigationId
+  return key ? [String(key)] : []
+})
+
+function onMenuClick(info: { key: string }) {
+  navigateTo({ path: route.path, query: { ...route.query, nav: String(info.key) } })
+}
+
+async function loadSinglePageContent(nav: CmsNavigation): Promise<{
+  title: string
+  body: string
+  article?: CmsArticle
+}> {
+  // Common pattern: navigation.itemId binds to an articleId for "single page" content.
+  const articleId =
+    (typeof nav.itemId === 'number' && Number.isFinite(nav.itemId) ? nav.itemId : 0) ||
+    (typeof nav.pageId === 'number' && Number.isFinite(nav.pageId) ? nav.pageId : 0)
+
+  if (articleId > 0) {
+    const article = await getCmsArticle(articleId)
+    let body = String(article.content || article.detail || '').trim()
+    if (!body) {
+      try {
+        const list = await listCmsArticleContent({ articleId, limit: 1 })
+        const hit = Array.isArray(list) ? list[0] : null
+        if (hit?.content) body = String(hit.content).trim()
+      } catch {
+        // ignore
+      }
+    }
+    return { title: article.title?.trim() || String(nav.title || '单页'), body, article }
+  }
+
+  // Fallback: show navigation meta as content when no binding exists.
+  return {
+    title: String(nav.title || '单页'),
+    body: String(nav.comments || nav.meta || '').trim()
+  }
+}
+
+const {
+  data: contentData,
+  pending: contentPending,
+  error: contentError
+} = useAsyncData(
+  () => `cms-single-page-content-${parentId.value}-${activeNav.value?.navigationId ?? 'none'}`,
+  async () => {
+    if (!activeNav.value) return { title: '', body: '' }
+    return loadSinglePageContent(activeNav.value)
+  },
+  { watch: [activeNav] }
+)
+
+const parentTitle = computed(() => children.value[0]?.parentName?.trim() || `页面 ${parentId.value}`)
+const parentDescription = computed(() => '')
+const parentBanner = computed(() => '')
+
+const contentTitle = computed(() => contentData.value?.title?.trim() || '')
+const contentBody = computed(() => contentData.value?.body || '')
+const articleMeta = computed(() => contentData.value?.article)
+
+watchEffect(() => {
+  if (!Number.isFinite(parentId.value)) return
+  usePageSeo({
+    title: contentTitle.value || parentTitle.value,
+    description:
+      (articleMeta.value?.overview?.trim() || parentDescription.value || contentTitle.value || parentTitle.value),
+    path: route.fullPath
+  })
+})
+</script>
diff --git a/server/api/cms-navigation.get.ts b/server/api/cms-navigation.get.ts
new file mode 100644
index 0000000..d8a4a80
--- /dev/null
+++ b/server/api/cms-navigation.get.ts
@@ -0,0 +1,42 @@
+import { $fetch } from 'ofetch'
+import { createError, defineEventHandler, getHeader, getQuery } from 'h3'
+import { useRuntimeConfig } from '#imports'
+
+// Frontend-friendly endpoint:
+// GET /api/cms-navigation?parentId=xxxx
+// Proxies to CMS modules API. Some deployments expose "/cms-navigation", others "/cms/cms-navigation".
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const query = getQuery(event)
+  const modulesApiBase =
+    config.public.modulesApiBase || config.public.ApiBase || 'https://cms-api.websoft.top/api'
+
+  const tenantId =
+    getHeader(event, 'tenantid') ||
+    config.public.tenantId ||
+    config.public.TenantId ||
+    '10586'
+  const authorization = getHeader(event, 'authorization')
+
+  const headers = {
+    TenantId: String(tenantId),
+    ...(authorization ? { Authorization: String(authorization) } : {})
+  }
+
+  const upstreamCandidates = ['/cms-navigation', '/cms/cms-navigation']
+  let lastError: any
+
+  for (const path of upstreamCandidates) {
+    try {
+      return await $fetch(path, { baseURL: modulesApiBase, headers, query })
+    } catch (error: any) {
+      lastError = error
+    }
+  }
+
+  throw createError({
+    statusCode: lastError?.statusCode || lastError?.response?.status || 502,
+    statusMessage: lastError?.statusMessage || 'Failed to fetch cms navigation'
+  })
+})
+
diff --git a/server/api/cms/cms-navigation.get.ts b/server/api/cms/cms-navigation.get.ts
new file mode 100644
index 0000000..eba9a45
--- /dev/null
+++ b/server/api/cms/cms-navigation.get.ts
@@ -0,0 +1,2 @@
+export { default } from '../cms-navigation.get'
+