更新首页

app/components/ArticleListPage.vue

@@ -1,12 +1,7 @@
 <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>
+    <PortalHeader v-if="config.useSiteHeader" />
+<!--    <div v-else class="page-banner" :style="{ background: config.bannerGradient }" />-->
 
     <div class="mx-auto max-w-screen-xl px-4 py-8">
       <a-row :gutter="[32, 0]">
@@ -84,13 +79,26 @@
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
+import { pageSiteArticles, resolveSiteAssetUrl, type SiteArticle } from '@/api/site'
 
 interface PageConfig {
   title: string
   desc: string
   bannerGradient: string
   categories: Array<{ type: string; label: string }>
-  baseRoute: string
+  baseRoute?: string
+  useSiteHeader?: boolean
+}
+
+interface ArticleItem {
+  id: number
+  title: string
+  overview: string
+  image: string
+  source: string
+  publishTime: string
+  views: number
+  type?: string
 }
 
 const props = defineProps<{
@@ -104,7 +112,8 @@ const currentPage = ref(1)
 const pageSize = ref(12)
 const total = ref(0)
 const loading = ref(false)
-const articles = ref<any[]>([])
+const articles = ref<ArticleItem[]>([])
+const keyword = computed(() => (route.query.keyword as string) || '')
 
 const currentCategoryLabel = computed(() => {
   if (!activeType.value) return '全部文章'
@@ -120,29 +129,44 @@ function getCategoryLabel(type: string) {
 function selectType(type: string) {
   activeType.value = type
   currentPage.value = 1
-  router.replace({ query: type ? { type } : {} })
+  router.replace({
+    query: {
+      ...(keyword.value ? { keyword: keyword.value } : {}),
+      ...(type ? { type } : {}),
+    }
+  })
   loadArticles()
 }
 
+function normalizeArticle(item: SiteArticle): ArticleItem {
+  return {
+    id: item.articleId || item.id,
+    title: item.title,
+    overview: item.overview || '暂无摘要',
+    image: resolveSiteAssetUrl(item.image),
+    source: item.source || '广西决策咨询网',
+    publishTime: item.publishTime || item.createTime || '',
+    views: Number(item.views || item.actualViews || 0),
+    type: item.type,
+  }
+}
+
 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('加载失败')
+    const data = await pageSiteArticles({
+      page: currentPage.value,
+      limit: pageSize.value,
+      keywords: keyword.value || undefined,
+      category: props.config.baseRoute || undefined,
+      type: activeType.value || undefined,
+    })
+    total.value = data.count || 0
+    articles.value = (data.list || []).map(normalizeArticle)
+  } catch (e) {
+    message.error(e instanceof Error ? e.message : '加载失败')
+    total.value = 0
+    articles.value = []
   } finally {
     loading.value = false
   }
@@ -154,7 +178,7 @@ function handlePageChange(page: number) {
   window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 
-function handleView(article: any) {
+function handleView(article: ArticleItem) {
   router.push(`/article/${article.id}`)
 }
 
@@ -164,6 +188,11 @@ watch(() => route.query.type, (newType) => {
   loadArticles()
 })
 
+watch(() => route.query.keyword, () => {
+  currentPage.value = 1
+  loadArticles()
+})
+
 onMounted(() => {
   loadArticles()
 })