新版官网模板

app/pages/article/[id].vue

@@ -0,0 +1,602 @@
+<template>
+  <div class="article-detail-page">
+    <div class="mx-auto max-w-screen-xl px-4 py-8">
+      <a-row :gutter="[32, 0]">
+        <!-- 主内容区 -->
+        <a-col :lg="17" :xs="24">
+          <!-- 面包屑 -->
+          <a-breadcrumb class="mb-6">
+            <a-breadcrumb-item><NuxtLink to="/">首页</NuxtLink></a-breadcrumb-item>
+            <a-breadcrumb-item v-if="article.categoryPath">
+              <NuxtLink :to="article.categoryPath">{{ article.categoryName }}</NuxtLink>
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>{{ article.title || '文章详情' }}</a-breadcrumb-item>
+          </a-breadcrumb>
+
+          <div v-if="loading" class="article-loading">
+            <a-skeleton :paragraph="{ rows: 12 }" active />
+          </div>
+
+          <div v-else-if="!article.id" class="article-empty">
+            <a-result status="404" sub-title="您查找的文章不存在或已被删除" title="文章不存在">
+              <template #extra>
+                <a-button type="primary" @click="$router.back()">返回上一页</a-button>
+              </template>
+            </a-result>
+          </div>
+
+          <article v-else class="article-container">
+            <!-- 封面图 -->
+            <div v-if="article.cover" class="article-cover">
+              <img :alt="article.title" :src="article.cover" />
+            </div>
+
+            <!-- 标题区 -->
+            <div class="article-header">
+              <div v-if="article.categoryName" class="article-category-tag">
+                {{ article.categoryName }}
+              </div>
+              <h1 class="article-title">{{ article.title }}</h1>
+              <div class="article-meta">
+                <span v-if="article.source" class="meta-item">
+                  <span class="meta-icon">📰</span>来源：{{ article.source }}
+                </span>
+                <span v-if="article.author" class="meta-item">
+                  <span class="meta-icon">✍️</span>{{ article.author }}
+                </span>
+                <span v-if="article.publishTime" class="meta-item">
+                  <span class="meta-icon">🕐</span>{{ article.publishTime }}
+                </span>
+                <span v-if="article.views" class="meta-item">
+                  <span class="meta-icon">👁</span>{{ article.views }} 次阅读
+                </span>
+              </div>
+            </div>
+
+            <!-- 摘要 -->
+            <div v-if="article.summary" class="article-summary">
+              <div class="summary-label">摘要</div>
+              <p>{{ article.summary }}</p>
+            </div>
+
+            <!-- 正文 -->
+            <div class="article-body" v-html="article.content"></div>
+
+            <!-- 附件下载 -->
+            <div v-if="article.attachments && article.attachments.length" class="article-attachments">
+              <div class="attachments-title">📎 相关附件</div>
+              <div class="attachments-list">
+                <a
+                  v-for="file in article.attachments"
+                  :key="file.url"
+                  :href="file.url"
+                  class="attachment-item"
+                  target="_blank"
+                >
+                  <span class="attachment-icon">📄</span>
+                  <span class="attachment-name">{{ file.name }}</span>
+                  <span class="attachment-size">{{ file.size }}</span>
+                </a>
+              </div>
+            </div>
+
+            <!-- 标签 -->
+            <div v-if="article.tags && article.tags.length" class="article-tags">
+              <span class="tags-label">标签：</span>
+              <a-tag v-for="tag in article.tags" :key="tag" color="blue">{{ tag }}</a-tag>
+            </div>
+
+            <!-- 声明 -->
+            <div class="article-disclaimer">
+              <p>声明：本文内容仅代表作者本人观点，不代表本网站立场。如有侵权请联系我们删除。</p>
+            </div>
+
+            <!-- 分享 & 上一篇下一篇 -->
+            <div class="article-nav">
+              <div v-if="prevArticle" class="nav-prev" @click="goArticle(prevArticle)">
+                <span class="nav-dir">« 上一篇</span>
+                <span class="nav-title">{{ prevArticle.title }}</span>
+              </div>
+              <div v-if="nextArticle" class="nav-next" @click="goArticle(nextArticle)">
+                <span class="nav-title">{{ nextArticle.title }}</span>
+                <span class="nav-dir">下一篇 »</span>
+              </div>
+            </div>
+          </article>
+        </a-col>
+
+        <!-- 侧栏 -->
+        <a-col :lg="7" :xs="0" class="hidden lg:block">
+          <div class="sidebar">
+            <!-- 相关文章 -->
+            <div class="sidebar-card">
+              <div class="sidebar-title">相关文章</div>
+              <div class="related-list">
+                <div
+                  v-for="item in relatedArticles"
+                  :key="item.id"
+                  class="related-item"
+                  @click="goArticle(item)"
+                >
+                  <span class="related-dot">›</span>
+                  <span class="related-title">{{ item.title }}</span>
+                </div>
+                <div v-if="!relatedArticles.length" class="related-empty">暂无相关文章</div>
+              </div>
+            </div>
+
+            <!-- 热门推荐 -->
+            <div class="sidebar-card mt-6">
+              <div class="sidebar-title">热门推荐</div>
+              <div class="related-list">
+                <div
+                  v-for="item in hotArticles"
+                  :key="item.id"
+                  class="related-item hot-item"
+                  @click="goArticle(item)"
+                >
+                  <span class="hot-rank">{{ item.rank }}</span>
+                  <span class="related-title">{{ item.title }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { message } from 'ant-design-vue'
+
+const route = useRoute()
+const router = useRouter()
+const articleId = computed(() => route.params.id as string)
+
+const loading = ref(true)
+const article = ref<any>({})
+const prevArticle = ref<any>(null)
+const nextArticle = ref<any>(null)
+const relatedArticles = ref<any[]>([])
+const hotArticles = ref<any[]>([
+  { id: 1, title: '广西数字经济发展报告（2024）', rank: 1 },
+  { id: 2, title: '自治区关于优化营商环境的实施意见', rank: 2 },
+  { id: 3, title: '面向东盟的产业合作政策解读', rank: 3 },
+  { id: 4, title: '广西乡村振兴战略实施进展报告', rank: 4 },
+  { id: 5, title: '北部湾经济区发展最新动态', rank: 5 },
+])
+
+useHead({
+  title: computed(() => `${article.value?.title || '文章详情'} - 决策咨询网`),
+  meta: [
+    { name: 'description', content: computed(() => article.value?.summary || '') },
+  ]
+})
+
+async function loadArticle() {
+  loading.value = true
+  try {
+    // TODO: 接入实际API
+    // const res = await getArticleDetail(articleId.value)
+    // article.value = res
+    // prevArticle.value = res.prev
+    // nextArticle.value = res.next
+    // relatedArticles.value = res.related || []
+
+    // 模拟数据
+    article.value = {
+      id: articleId.value,
+      title: '广西自治区党委政府关于加快数字经济发展的实施意见',
+      cover: `https://picsum.photos/900/400?random=${articleId.value}`,
+      categoryName: '政策要闻',
+      categoryPath: '/news',
+      source: '广西壮族自治区人民政府',
+      author: '政策研究处',
+      publishTime: '2024-12-20 09:30:00',
+      views: 1286,
+      summary: '本意见旨在深入贯彻党中央、国务院关于发展数字经济的战略部署，结合广西实际，加快推进数字产业化和产业数字化，培育壮大数字经济新动能。',
+      content: `
+        <h2>一、总体要求</h2>
+        <p>以习近平新时代中国特色社会主义思想为指导，全面贯彻党的二十大精神，围绕建设数字中国战略部署，立足广西比较优势，坚持创新驱动、数据赋能、融合发展，加快推动数字经济与实体经济深度融合，着力打造面向东盟的数字经济发展高地。</p>
+
+        <h2>二、主要目标</h2>
+        <p>到2026年，数字经济核心产业增加值占GDP比重达到12%，数字经济总量突破1万亿元，数字化转型企业数量超过5000家，建成5G基站15万座。</p>
+
+        <h2>三、重点任务</h2>
+        <h3>（一）加快数字基础设施建设</h3>
+        <p>系统推进新型基础设施建设，加快5G、大数据中心、工业互联网等数字基础设施部署，构建高速、泛在、天地一体、云网融合、智能敏捷、绿色低碳的新型数字基础设施体系。</p>
+
+        <h3>（二）深化数字技术与实体经济融合</h3>
+        <p>推动制造业、农业、服务业数字化转型，加快工业互联网创新应用，推进数字农业农村建设，促进数字技术与传统产业深度融合。</p>
+
+        <h3>（三）培育壮大数字经济核心产业</h3>
+        <p>重点发展软件和信息技术服务业、大数据、云计算、人工智能、区块链等核心产业，打造广西数字经济核心产业集群。</p>
+
+        <h2>四、保障措施</h2>
+        <p>加强组织领导，完善工作机制，强化政策支持，健全评估体系，确保各项任务落到实处。</p>
+      `,
+      tags: ['数字经济', '政策解读', '广西'],
+      attachments: [
+        { name: '广西数字经济发展实施意见（全文）.pdf', url: '#', size: '2.4MB' },
+        { name: '附件：实施细则.docx', url: '#', size: '856KB' },
+      ]
+    }
+  } catch (e: any) {
+    message.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function goArticle(item: any) {
+  router.push(`/article/${item.id}`)
+}
+
+onMounted(() => {
+  loadArticle()
+})
+
+watch(articleId, () => {
+  loadArticle()
+})
+</script>
+
+<style scoped>
+.article-detail-page {
+  background: #f5f7fa;
+  min-height: 60vh;
+}
+
+.article-loading,
+.article-empty {
+  background: #fff;
+  border-radius: 12px;
+  padding: 40px;
+}
+
+.article-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 40px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+
+.article-cover {
+  margin: -40px -40px 32px;
+  border-radius: 12px 12px 0 0;
+  overflow: hidden;
+  height: 320px;
+}
+
+.article-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.article-header {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.article-category-tag {
+  display: inline-block;
+  padding: 3px 12px;
+  background: #1e3a5f;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.article-title {
+  font-size: 26px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1.5;
+  margin: 0 0 16px;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.meta-item {
+  font-size: 13px;
+  color: #9ca3af;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-icon {
+  font-size: 14px;
+}
+
+/* 摘要 */
+.article-summary {
+  background: #f8fafc;
+  border-left: 4px solid #1e3a5f;
+  border-radius: 0 8px 8px 0;
+  padding: 16px 20px;
+  margin-bottom: 32px;
+}
+
+.summary-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1e3a5f;
+  margin-bottom: 8px;
+}
+
+.article-summary p {
+  font-size: 14px;
+  color: #4b5563;
+  line-height: 1.8;
+  margin: 0;
+}
+
+/* 正文 */
+.article-body {
+  font-size: 16px;
+  color: #374151;
+  line-height: 2;
+}
+
+.article-body :deep(h2) {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e3a5f;
+  margin: 32px 0 16px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.article-body :deep(h3) {
+  font-size: 17px;
+  font-weight: 600;
+  color: #374151;
+  margin: 24px 0 12px;
+}
+
+.article-body :deep(p) {
+  margin: 0 0 16px;
+  text-indent: 2em;
+}
+
+.article-body :deep(ul), .article-body :deep(ol) {
+  padding-left: 24px;
+  margin: 12px 0;
+}
+
+.article-body :deep(li) {
+  margin: 8px 0;
+}
+
+/* 附件 */
+.article-attachments {
+  margin-top: 32px;
+  padding: 20px;
+  background: #f9fafb;
+  border-radius: 8px;
+}
+
+.attachments-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 12px;
+}
+
+.attachments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  text-decoration: none;
+  color: #374151;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.attachment-item:hover {
+  border-color: #1e3a5f;
+  color: #1e3a5f;
+  background: #f0f7ff;
+}
+
+.attachment-size {
+  margin-left: auto;
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+/* 标签 */
+.article-tags {
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tags-label {
+  font-size: 13px;
+  color: #9ca3af;
+}
+
+/* 声明 */
+.article-disclaimer {
+  margin-top: 32px;
+  padding: 12px 16px;
+  background: #fefce8;
+  border: 1px solid #fef08a;
+  border-radius: 6px;
+}
+
+.article-disclaimer p {
+  font-size: 12px;
+  color: #92400e;
+  margin: 0;
+}
+
+/* 上下篇 */
+.article-nav {
+  margin-top: 32px;
+  display: flex;
+  gap: 16px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.nav-prev, .nav-next {
+  flex: 1;
+  padding: 12px 16px;
+  background: #f9fafb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-prev:hover, .nav-next:hover {
+  background: #eff6ff;
+}
+
+.nav-next {
+  text-align: right;
+  align-items: flex-end;
+}
+
+.nav-dir {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.nav-title {
+  font-size: 14px;
+  color: #1e3a5f;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 侧栏 */
+.sidebar {
+  position: sticky;
+  top: 80px;
+}
+
+.sidebar-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+
+.sidebar-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e3a5f;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #1e3a5f;
+}
+
+.related-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.related-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.related-item:hover {
+  background: #f3f4f6;
+}
+
+.related-dot {
+  color: #1e3a5f;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.related-title {
+  font-size: 13px;
+  color: #374151;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.related-empty {
+  font-size: 13px;
+  color: #9ca3af;
+  text-align: center;
+  padding: 12px 0;
+}
+
+.hot-item {
+  align-items: center;
+}
+
+.hot-rank {
+  width: 22px;
+  height: 22px;
+  background: #1e3a5f;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.hot-item:nth-child(-n+3) .hot-rank {
+  background: #dc2626;
+}
+
+@media (max-width: 768px) {
+  .article-container {
+    padding: 20px;
+  }
+
+  .article-cover {
+    margin: -20px -20px 20px;
+  }
+
+  .article-title {
+    font-size: 20px;
+  }
+}
+</style>