feat(about): 重构“关于我们”页面并丰富内容展示

- 采用左右分栏布局，左侧新增图标导航
- 全新设计顶部 Banner，提升视觉效果
- 添加学会简介数据亮点和主要职能展示
- 新增组织机构图、主要领导及专家委员会成员展示
- 引入学会章程章节分明条目展示
- 丰富咨询服务内容，新增服务项目卡片和联系方式
- “加入我们”板块支持企业与个人会员申请详情说明
- 支持资料下载并优化排版与交互体验
- 增强响应式支持，保证移动端体验一致
- 页面样式大幅调整，提升整体美观与可读性

app/pages/news/index.vue

@@ -1,232 +1,21 @@
 <template>
-  <div class="news-page">
-    <div class="page-header">
-      <h1 class="page-title">政策要闻</h1>
-      <p class="page-desc">汇聚党中央国务院、自治区党委政府及各部门最新政策信息</p>
-    </div>
-
-    <!-- 分类标签 -->
-    <div class="category-tabs">
-      <a-radio-group v-model:value="activeType" button-style="solid" @change="handleTypeChange">
-        <a-radio-button value="">全部</a-radio-button>
-        <a-radio-button value="central">党中央国务院</a-radio-button>
-        <a-radio-button value="region">自治区党委政府</a-radio-button>
-        <a-radio-button value="department">其他厅委办</a-radio-button>
-        <a-radio-button value="latest">最新发布</a-radio-button>
-      </a-radio-group>
-    </div>
-
-    <!-- 文章列表 -->
-    <div class="article-list">
-      <div v-for="article in articles" :key="article.id" class="article-item" @click="handleView(article)">
-        <div class="article-image" v-if="article.image">
-          <img :src="article.image" :alt="article.title" />
-        </div>
-        <div class="article-content">
-          <h3 class="article-title">{{ article.title }}</h3>
-          <p class="article-overview">{{ article.overview }}</p>
-          <div class="article-meta">
-            <span class="meta-item">{{ article.source }}</span>
-            <span class="meta-item">{{ article.publishTime }}</span>
-            <span class="meta-item">浏览 {{ article.views }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="loading" class="loading-placeholder">
-        <a-spin size="large" />
-      </div>
-
-      <div v-if="!loading && articles.length === 0" class="empty-placeholder">
-        <a-empty description="暂无文章" />
-      </div>
-    </div>
-
-    <!-- 分页 -->
-    <div class="pagination-wrap" v-if="total > pageSize">
-      <a-pagination
-        v-model:current="currentPage"
-        :total="total"
-        :page-size="pageSize"
-        @change="handlePageChange"
-        show-quick-jumper
-      />
-    </div>
-  </div>
+  <ArticleListPage :config="pageConfig" />
 </template>
 
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
-
 useHead({ title: '政策要闻 - 决策咨询网' })
 
-const route = useRoute()
-const router = useRouter()
-
-const activeType = ref((route.query.type as string) || '')
-const currentPage = ref(1)
-const pageSize = ref(12)
-const total = ref(0)
-const loading = ref(false)
-const articles = ref<any[]>([])
-
-async function loadArticles() {
-  loading.value = true
-  try {
-    // TODO: 接入实际API
-    // const res = await listArticles({ category: 'news', type: activeType.value, page: currentPage.value })
-    // articles.value = res.list
-    // total.value = res.count
-  } catch (e: any) {
-    message.error('加载失败')
-  } finally {
-    loading.value = false
-  }
+const pageConfig = {
+  title: '政策要闻',
+  desc: '汇聚党中央国务院、自治区党委政府、各厅委办最新政策信息',
+  bannerGradient: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
+  baseRoute: 'news',
+  categories: [
+    { type: '', label: '全部资讯' },
+    { type: 'central', label: '党中央国务院信息' },
+    { type: 'region', label: '自治区党委政府信息' },
+    { type: 'department', label: '其他（厅委办）信息' },
+    { type: 'latest', label: '最新发布' },
+  ]
 }
-
-function handleTypeChange() {
-  currentPage.value = 1
-  loadArticles()
-}
-
-function handlePageChange(page: number) {
-  currentPage.value = page
-  loadArticles()
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-function handleView(article: any) {
-  router.push(`/news/${article.id}`)
-}
-
-watch(() => route.query.type, (newType) => {
-  activeType.value = (newType as string) || ''
-  loadArticles()
-})
-
-onMounted(() => {
-  loadArticles()
-})
 </script>
-
-<style scoped>
-.news-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
-}
-
-.page-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.page-title {
-  font-size: 32px;
-  font-weight: 700;
-  color: #1f2937;
-  margin: 0 0 12px;
-}
-
-.page-desc {
-  font-size: 16px;
-  color: #6b7280;
-  margin: 0;
-}
-
-.category-tabs {
-  margin-bottom: 32px;
-  text-align: center;
-}
-
-.article-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.article-item {
-  display: flex;
-  gap: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.article-item:hover {
-  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
-  transform: translateY(-2px);
-}
-
-.article-image {
-  width: 200px;
-  height: 140px;
-  flex-shrink: 0;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.article-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.article-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.article-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
-  margin: 0 0 8px;
-  line-height: 1.4;
-}
-
-.article-overview {
-  font-size: 14px;
-  color: #6b7280;
-  margin: 0 0 auto;
-  line-height: 1.6;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.article-meta {
-  display: flex;
-  gap: 16px;
-  font-size: 12px;
-  color: #9ca3af;
-  margin-top: 12px;
-}
-
-.loading-placeholder,
-.empty-placeholder {
-  padding: 60px 0;
-  text-align: center;
-}
-
-.pagination-wrap {
-  margin-top: 40px;
-  text-align: center;
-}
-
-@media (max-width: 768px) {
-  .article-item {
-    flex-direction: column;
-  }
-
-  .article-image {
-    width: 100%;
-    height: 180px;
-  }
-}
-</style>