From 14935dfbf498b34ce66502c909be892e1ac7e61f Mon Sep 17 00:00:00 2001
From: wx <2636507191@qq.com>
Date: Fri, 8 May 2026 14:01:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(news):=20=E6=96=B0=E9=97=BB=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=AF=A6=E6=83=85=E9=A1=B5=20+=20=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=8F=AF=E7=82=B9=E5=87=BB=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 pages/news.vue,改为 pages/news/index.vue (列表) + [slug].vue (详情)
- 列表卡片包 NuxtLink 跳 /news/{slug},正文编辑器内容现在能渲染
- 详情页含面包屑/侧栏/上下篇导航/JSON-LD NewsArticle schema
---
 pages/news/[slug].vue              | 512 +++++++++++++++++++++++++++++
 pages/{news.vue => news/index.vue} |  35 +-
 2 files changed, 542 insertions(+), 5 deletions(-)
 create mode 100644 pages/news/[slug].vue
 rename pages/{news.vue => news/index.vue} (89%)

diff --git a/pages/news/[slug].vue b/pages/news/[slug].vue
new file mode 100644
index 0000000..9d91ce4
--- /dev/null
+++ b/pages/news/[slug].vue
@@ -0,0 +1,512 @@
+<template>
+  <div v-if="article" class="page-news-detail">
+    <LayoutPageHero
+      :title="article.title"
+      :subtitle="article.summary"
+      :breadcrumbs="[{ text: '品牌资讯', to: '/news' }, { text: article.category }]"
+    />
+
+    <section class="section">
+      <div class="container">
+        <div class="news-layout">
+          <!-- 主内容区 -->
+          <main class="news-main">
+            <!-- 文章元信息 -->
+            <div class="article-meta">
+              <span :class="['article-category', `article-category--${article.category}`]">{{ article.category }}</span>
+              <span class="article-date">{{ formatDate(article.date || article.createdAt) }}</span>
+              <span v-if="article.author" class="article-author">作者：{{ article.author }}</span>
+            </div>
+
+            <!-- 封面图 -->
+            <div v-if="article.coverImage" class="article-cover">
+              <img
+                :src="article.coverImage"
+                :alt="article.title"
+                class="article-cover__img"
+                referrerpolicy="no-referrer"
+              />
+            </div>
+
+            <!-- 摘要 -->
+            <div v-if="article.summary" class="article-summary">
+              <p>{{ article.summary }}</p>
+            </div>
+
+            <!-- 正文 -->
+            <div class="article-content" v-html="article.content" />
+
+            <!-- 标签 -->
+            <div v-if="article.tags?.length" class="article-tags">
+              <span class="tags-label">标签：</span>
+              <span v-for="tag in article.tags" :key="tag" class="article-tag">{{ tag }}</span>
+            </div>
+
+            <!-- 文章导航 -->
+            <div v-if="prevArticle || nextArticle" class="article-nav">
+              <NuxtLink v-if="prevArticle" :to="`/news/${prevArticle.id}`" class="article-nav__item article-nav__item--prev">
+                <span class="article-nav__label">上一篇</span>
+                <span class="article-nav__title">{{ prevArticle.title }}</span>
+              </NuxtLink>
+              <span v-else />
+              <NuxtLink v-if="nextArticle" :to="`/news/${nextArticle.id}`" class="article-nav__item article-nav__item--next">
+                <span class="article-nav__label">下一篇</span>
+                <span class="article-nav__title">{{ nextArticle.title }}</span>
+              </NuxtLink>
+            </div>
+          </main>
+
+          <!-- 侧边栏 -->
+          <aside class="news-sidebar">
+            <div class="sidebar-card sidebar-card--cta">
+              <h3 class="sidebar-card__title">想了解更多产品？</h3>
+              <p class="sidebar-card__desc">扫码添加定制师微信，一对一沟通行程需求</p>
+              <CommonInternalLink to="/contact" text="联系定制师" />
+            </div>
+
+            <div class="sidebar-card">
+              <h3 class="sidebar-card__title">更多动态</h3>
+              <ul class="sidebar-articles">
+                <li
+                  v-for="art in otherArticles"
+                  :key="art.id"
+                  class="sidebar-article"
+                  :class="{ 'sidebar-article--active': art.id === article.id }"
+                >
+                  <NuxtLink :to="`/news/${art.id}`" class="sidebar-article__link">
+                    <span class="sidebar-article__category">{{ art.category }}</span>
+                    <span class="sidebar-article__title">{{ art.title }}</span>
+                  </NuxtLink>
+                </li>
+              </ul>
+            </div>
+
+            <div class="sidebar-card">
+              <h3 class="sidebar-card__title">快速入口</h3>
+              <div class="sidebar-links">
+                <CommonInternalLink to="/products" text="查看旅行产品" />
+                <CommonInternalLink to="/summer-camp" text="小蒙马亲子游学营" />
+                <CommonInternalLink to="/faq" text="常见问答" />
+                <CommonInternalLink to="/news" text="返回资讯列表" />
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <!-- 404 -->
+  <div v-else class="page-not-found">
+    <div class="container">
+      <h1>动态不存在</h1>
+      <NuxtLink to="/news">返回品牌资讯</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBreadcrumbSchema } from '~/composables/useJsonLd'
+
+const { data: newsData } = await usePublicApi('news')
+
+const route = useRoute()
+const allArticles = computed(() => newsData.value?.articles || [])
+const article = computed(() => allArticles.value.find(a => a.id === route.params.slug))
+
+if (!article.value) {
+  throw createError({ statusCode: 404, statusMessage: '动态不存在' })
+}
+
+// SEO
+useHead({
+  title: article.value?.title,
+  meta: [
+    { name: 'description', content: article.value?.summary || '' },
+    { name: 'keywords', content: (article.value?.tags || []).join(',') },
+    { name: 'author', content: article.value?.author || '呼籁旅行' },
+    { name: 'article:published_time', content: (article.value?.date || '') + 'T00:00:00+08:00' },
+    { name: 'article:modified_time', content: (article.value?.date || '') + 'T00:00:00+08:00' },
+    { name: 'geo.region', content: 'CN-NM' },
+    { name: 'geo.placename', content: '呼伦贝尔' },
+    { property: 'og:title', content: article.value?.title },
+    { property: 'og:description', content: article.value?.summary || '' },
+    { property: 'og:type', content: 'article' },
+    { property: 'og:url', content: `https://1814.love/news/${article.value?.id}` },
+    { property: 'og:site_name', content: '呼籁旅行' },
+    { property: 'og:locale', content: 'zh_CN' },
+  ],
+  link: [
+    { rel: 'canonical', href: `https://1814.love/news/${article.value?.id}` },
+  ],
+})
+
+useBreadcrumbSchema([
+  { text: '首页', to: '/' },
+  { text: '品牌资讯', to: '/news' },
+  { text: article.value?.title },
+])
+
+// JSON-LD NewsArticle schema
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    children: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'NewsArticle',
+      '@id': `https://1814.love/news/${article.value?.id}#article`,
+      headline: article.value?.title,
+      description: article.value?.summary,
+      articleBody: article.value?.content,
+      image: article.value?.coverImage ? `https://1814.love${article.value.coverImage}` : 'https://1814.love/images/logo.png',
+      author: {
+        '@type': 'Organization',
+        '@id': 'https://1814.love/#organization',
+        name: article.value?.author || '呼籁旅行',
+        url: 'https://1814.love',
+      },
+      publisher: {
+        '@type': 'Organization',
+        '@id': 'https://1814.love/#organization',
+        name: '呼籁旅行',
+        url: 'https://1814.love',
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://1814.love/images/logo.png',
+          width: 200,
+          height: 200,
+        },
+      },
+      datePublished: (article.value?.date || '') + 'T00:00:00+08:00',
+      dateModified: (article.value?.date || '') + 'T00:00:00+08:00',
+      articleSection: article.value?.category,
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': `https://1814.love/news/${article.value?.id}`,
+      },
+      inLanguage: 'zh-CN',
+      keywords: (article.value?.tags || []).join(','),
+    }),
+  }],
+})
+
+const currentIndex = computed(() => allArticles.value.findIndex(a => a.id === article.value?.id))
+const prevArticle = computed(() => currentIndex.value > 0 ? allArticles.value[currentIndex.value - 1] : null)
+const nextArticle = computed(() => currentIndex.value >= 0 && currentIndex.value < allArticles.value.length - 1 ? allArticles.value[currentIndex.value + 1] : null)
+
+const otherArticles = computed(() => allArticles.value.filter(a => a.id !== article.value?.id).slice(0, 8))
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  const d = new Date(dateStr.includes('T') ? dateStr : dateStr + 'T00:00:00')
+  if (isNaN(d.getTime())) return ''
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
+}
+</script>
+
+<style lang="less" scoped>
+.news-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: @space-2xl;
+
+  .respond-lg({
+    grid-template-columns: 1fr 300px;
+    align-items: start;
+  });
+}
+
+.news-main {
+  min-width: 0;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: @space-md;
+  margin-bottom: @space-lg;
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+}
+
+.article-category {
+  padding: 3px @space-sm;
+  border-radius: @border-radius-sm;
+  font-size: @font-size-xs;
+  font-weight: @font-weight-medium;
+
+  &--产品 {
+    background: @color-primary;
+    color: #fff;
+  }
+
+  &--活动 {
+    background: @color-accent;
+    color: #fff;
+  }
+
+  &--公告 {
+    background: @color-text-secondary;
+    color: #fff;
+  }
+}
+
+.article-cover {
+  margin-bottom: @space-xl;
+  border-radius: @border-radius-lg;
+  overflow: hidden;
+  background: @color-primary-bg;
+
+  &__img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+}
+
+.article-summary {
+  padding: @space-lg;
+  background: @color-primary-bg;
+  border-left: 4px solid @color-primary;
+  border-radius: 0 @border-radius-md @border-radius-md 0;
+  margin-bottom: @space-xl;
+
+  p {
+    margin: 0;
+    font-size: @font-size-md;
+    color: @color-text-secondary;
+    line-height: @line-height-base;
+  }
+}
+
+.article-content {
+  color: @color-text-secondary;
+  line-height: @line-height-base;
+  font-size: @font-size-base;
+
+  :deep(h2) {
+    font-size: @font-size-xl;
+    font-weight: @font-weight-bold;
+    color: @color-text-primary;
+    margin: @space-2xl 0 @space-lg;
+    padding-bottom: @space-sm;
+    border-bottom: 2px solid @color-primary-bg;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  :deep(h3) {
+    font-size: @font-size-lg;
+    font-weight: @font-weight-bold;
+    color: @color-text-primary;
+    margin: @space-xl 0 @space-md;
+  }
+
+  :deep(p) {
+    margin: 0 0 @space-lg;
+  }
+
+  :deep(ul), :deep(ol) {
+    margin: 0 0 @space-lg;
+    padding-left: @space-xl;
+  }
+
+  :deep(li) {
+    margin-bottom: @space-sm;
+    line-height: @line-height-base;
+  }
+
+  :deep(strong) {
+    color: @color-text-primary;
+    font-weight: @font-weight-bold;
+  }
+
+  :deep(blockquote) {
+    margin: @space-lg 0;
+    padding: @space-md @space-lg;
+    border-left: 4px solid @color-primary;
+    background: @color-primary-bg;
+    color: @color-text-secondary;
+  }
+
+  :deep(a) {
+    color: @color-primary;
+    text-decoration: underline;
+
+    &:hover {
+      color: @color-primary-dark;
+    }
+  }
+
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: @border-radius-lg;
+    display: block;
+    margin: @space-md auto;
+  }
+}
+
+.article-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: @space-sm;
+  margin-top: @space-2xl;
+  padding-top: @space-lg;
+  border-top: 1px solid @color-border;
+}
+
+.tags-label {
+  font-size: @font-size-sm;
+  color: @color-text-muted;
+}
+
+.article-tag {
+  padding: 3px @space-sm;
+  background: @color-primary-bg;
+  color: @color-primary;
+  border-radius: @border-radius-sm;
+  font-size: @font-size-xs;
+}
+
+.article-nav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: @space-md;
+  margin-top: @space-2xl;
+  padding-top: @space-lg;
+  border-top: 1px solid @color-border;
+
+  &__item {
+    padding: @space-md;
+    background: @color-bg-white;
+    border: 1px solid @color-border;
+    border-radius: @border-radius-md;
+    text-decoration: none;
+    transition: all @transition-base;
+    display: flex;
+    flex-direction: column;
+    gap: @space-xs;
+
+    &:hover {
+      border-color: @color-primary;
+      background: @color-primary-bg;
+    }
+
+    &--next {
+      text-align: right;
+    }
+  }
+
+  &__label {
+    font-size: @font-size-xs;
+    color: @color-text-muted;
+  }
+
+  &__title {
+    font-size: @font-size-sm;
+    color: @color-text-primary;
+    line-height: @line-height-tight;
+    .text-clamp(2);
+  }
+}
+
+.news-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: @space-lg;
+  position: sticky;
+  top: 90px;
+}
+
+.sidebar-card {
+  background: @color-bg-white;
+  border: 1px solid @color-border;
+  border-radius: @border-radius-lg;
+  padding: @space-lg;
+
+  &--cta {
+    background: @color-primary-bg;
+    border-color: @color-primary-lighter;
+  }
+
+  &__title {
+    font-size: @font-size-base;
+    font-weight: @font-weight-bold;
+    color: @color-text-primary;
+    margin: 0 0 @space-sm;
+  }
+
+  &__desc {
+    font-size: @font-size-sm;
+    color: @color-text-secondary;
+    line-height: @line-height-base;
+    margin: 0 0 @space-md;
+  }
+}
+
+.sidebar-articles {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-article {
+  &--active .sidebar-article__link {
+    background: @color-primary-bg;
+    color: @color-primary;
+  }
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: @space-sm;
+    border-radius: @border-radius-sm;
+    text-decoration: none;
+    transition: background @transition-fast;
+
+    &:hover {
+      background: @color-primary-bg;
+    }
+  }
+
+  &__category {
+    font-size: @font-size-xs;
+    color: @color-primary;
+  }
+
+  &__title {
+    font-size: @font-size-sm;
+    color: @color-text-secondary;
+    line-height: @line-height-tight;
+    .text-clamp(2);
+  }
+}
+
+.sidebar-links {
+  display: flex;
+  flex-direction: column;
+  gap: @space-sm;
+}
+
+.page-not-found {
+  text-align: center;
+  padding: @space-3xl 0;
+
+  h1 {
+    margin-bottom: @space-lg;
+  }
+
+  a {
+    color: @color-primary;
+  }
+}
+</style>
diff --git a/pages/news.vue b/pages/news/index.vue
similarity index 89%
rename from pages/news.vue
rename to pages/news/index.vue
index 4db8b15..8b6d4f8 100644
--- a/pages/news.vue
+++ b/pages/news/index.vue
@@ -33,9 +33,10 @@
 
         <!-- News list -->
         <div class="news-list">
-          <article
+          <NuxtLink
             v-for="article in filteredArticles"
             :key="article.id"
+            :to="`/news/${article.id}`"
             class="news-card"
             :class="{ 'news-card--with-cover': article.coverImage }"
           >
@@ -54,8 +55,9 @@
               </div>
               <h2 class="news-title">{{ article.title }}</h2>
               <p class="news-summary">{{ article.summary }}</p>
+              <span class="news-readmore">查看全文 →</span>
             </div>
-          </article>
+          </NuxtLink>
         </div>
 
         <!-- CTA -->
@@ -103,7 +105,7 @@ useBreadcrumbSchema([
         dateModified: (article.date || article.createdAt) + 'T00:00:00+08:00',
         articleSection: article.category,
         inLanguage: 'zh-CN',
-        url: 'https://1814.love/news',
+        url: `https://1814.love/news/${article.id}`,
         author: { '@type': 'Organization', name: '呼籁旅行', url: 'https://1814.love' },
         publisher: { '@id': 'https://1814.love/#organization' },
         about: { '@type': 'TravelAgency', name: '呼籁旅行', url: 'https://1814.love' },
@@ -168,14 +170,28 @@ function formatDate(dateStr) {
 }
 
 .news-card {
+  display: block;
   background: @color-bg-white;
   border: 1px solid @color-border;
   border-radius: @border-radius-md;
   padding: @space-xl;
-  transition: box-shadow @transition-base;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow @transition-base, border-color @transition-base, transform @transition-base;
+  cursor: pointer;
 
   &:hover {
     box-shadow: @shadow-md;
+    border-color: @color-primary-lighter;
+    transform: translateY(-2px);
+
+    .news-title {
+      color: @color-primary;
+    }
+
+    .news-readmore {
+      color: @color-primary-dark;
+    }
   }
 }
 
@@ -253,13 +269,22 @@ function formatDate(dateStr) {
   color: @color-text-primary;
   margin: 0 0 @space-sm;
   line-height: @line-height-tight;
+  transition: color @transition-base;
 }
 
 .news-summary {
   font-size: @font-size-base;
   color: @color-text-secondary;
   line-height: @line-height-base;
-  margin: 0;
+  margin: 0 0 @space-sm;
+}
+
+.news-readmore {
+  display: inline-block;
+  font-size: @font-size-sm;
+  color: @color-primary;
+  font-weight: @font-weight-medium;
+  transition: color @transition-base;
 }
 
 .news-cta {