jczxw-pc/app/components/ArticleListPage.vue

<template>
  <div class="list-page">
    <!-- 页面头部 Banner -->
    <div class="page-banner" :style="{ background: config.bannerGradient }">
      <div class="mx-auto max-w-screen-xl px-4">
        <h1 class="banner-title">{{ config.title }}</h1>
        <p class="banner-desc">{{ config.desc }}</p>
      </div>
    </div>

    <div class="mx-auto max-w-screen-xl px-4 py-8">
      <a-row :gutter="[32, 0]">
        <!-- 左侧分类导航 -->
        <a-col :xs="24" :lg="5" class="mb-6 lg:mb-0">
          <div class="category-sidebar">
            <div class="category-sidebar-title">{{ config.title }}</div>
            <div
              v-for="cat in config.categories"
              :key="cat.type"
              class="category-item"
              :class="{ active: activeType === cat.type }"
              @click="selectType(cat.type)"
            >
              {{ cat.label }}
            </div>
          </div>
        </a-col>

        <!-- 右侧内容区 -->
        <a-col :xs="24" :lg="19">
          <!-- 当前分类提示 -->
          <div class="category-breadcrumb">
            <span class="category-name">{{ currentCategoryLabel }}</span>
            <span class="article-count">共 {{ total }} 篇文章</span>
          </div>

          <div v-if="loading" class="loading-state">
            <a-skeleton v-for="i in 5" :key="i" active :paragraph="{ rows: 2 }" style="margin-bottom:16px" />
          </div>

          <div v-else>
            <div class="article-list">
              <div
                v-for="article in articles"
                :key="article.id"
                class="article-item"
                @click="handleView(article)"
              >
                <div class="article-thumb" v-if="article.image">
                  <img :src="article.image" :alt="article.title" />
                </div>
                <div class="article-main">
                  <h3 class="article-title">{{ article.title }}</h3>
                  <p class="article-overview">{{ article.overview }}</p>
                  <div class="article-meta">
                    <span class="meta-tag" v-if="article.type">{{ getCategoryLabel(article.type) }}</span>
                    <span class="meta-item">{{ article.source }}</span>
                    <span class="meta-item">{{ article.publishTime }}</span>
                    <span class="meta-item" v-if="article.views">👁 {{ article.views }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="articles.length === 0" class="empty-state">
              <a-empty description="暂无内容" />
            </div>

            <div class="pagination-wrap" v-if="total > pageSize">
              <a-pagination
                v-model:current="currentPage"
                :total="total"
                :page-size="pageSize"
                show-quick-jumper
                @change="handlePageChange"
              />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'

interface PageConfig {
  title: string
  desc: string
  bannerGradient: string
  categories: Array<{ type: string; label: string }>
  baseRoute: string
}

const props = defineProps<{
  config: PageConfig
}>()

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[]>([])

const currentCategoryLabel = computed(() => {
  if (!activeType.value) return '全部文章'
  const found = props.config.categories.find(c => c.type === activeType.value)
  return found?.label || '全部文章'
})

function getCategoryLabel(type: string) {
  const found = props.config.categories.find(c => c.type === type)
  return found?.label || type
}

function selectType(type: string) {
  activeType.value = type
  currentPage.value = 1
  router.replace({ query: type ? { type } : {} })
  loadArticles()
}

async function loadArticles() {
  loading.value = true
  try {
    // TODO: 接入实际API
    // const res = await listArticles({ category: props.config.baseRoute, type: activeType.value, page: currentPage.value })
    // Fallback mock data
    total.value = 35
    articles.value = Array.from({ length: Math.min(pageSize.value, 35 - (currentPage.value - 1) * pageSize.value) }, (_, i) => ({
      id: (currentPage.value - 1) * pageSize.value + i + 1,
      title: `${currentCategoryLabel.value}文章标题 ${(currentPage.value - 1) * pageSize.value + i + 1}：广西政策研究成果发布`,
      overview: '摘要内容：本文就广西经济社会发展中的若干重大问题进行深入研究，提出了切实可行的政策建议和对策措施，为相关决策提供参考依据...',
      image: `https://picsum.photos/200/130?random=${(currentPage.value - 1) * pageSize.value + i + 1}`,
      source: '广西决策咨询中心',
      publishTime: `2024-12-${String(20 - i).padStart(2, '0')}`,
      views: Math.floor(Math.random() * 2000) + 100,
      type: activeType.value || props.config.categories[i % props.config.categories.length]?.type,
    }))
  } catch (e: any) {
    message.error('加载失败')
  } finally {
    loading.value = false
  }
}

function handlePageChange(page: number) {
  currentPage.value = page
  loadArticles()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

function handleView(article: any) {
  router.push(`/article/${article.id}`)
}

watch(() => route.query.type, (newType) => {
  activeType.value = (newType as string) || ''
  currentPage.value = 1
  loadArticles()
})

onMounted(() => {
  loadArticles()
})
</script>

<style scoped>
.list-page {
  background: #f5f7fa;
  min-height: 60vh;
}

.page-banner {
  padding: 48px 0 32px;
  position: relative;
  overflow: hidden;
}

.banner-title {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 8px;
}

.banner-desc {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  margin: 0;
}

/* 左侧分类 */
.category-sidebar {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.category-sidebar-title {
  padding: 14px 18px;
  background: #1e3a5f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.category-item {
  padding: 12px 18px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.2s;
}

.category-item:hover {
  background: #f0f7ff;
  color: #1e3a5f;
}

.category-item.active {
  background: #eff6ff;
  color: #1e3a5f;
  font-weight: 600;
  border-left: 3px solid #1e3a5f;
}

/* 内容区 */
.category-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.category-name {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a5f;
}

.article-count {
  font-size: 13px;
  color: #9ca3af;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s;
}

.article-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.article-thumb {
  width: 160px;
  height: 108px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-overview {
  font-size: 13px;
  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;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.meta-tag {
  padding: 2px 8px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 500;
}

.meta-item {
  font-size: 12px;
  color: #9ca3af;
}

.loading-state {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}

.empty-state {
  background: #fff;
  border-radius: 12px;
  padding: 60px;
  text-align: center;
}

.pagination-wrap {
  margin-top: 32px;
  text-align: center;
  padding-bottom: 20px;
}

@media (max-width: 768px) {
  .article-item { flex-direction: column; }
  .article-thumb { width: 100%; height: 180px; }
}
</style>