jczxw-pc/app/components/ModuleEntryListPage.vue

<template>
  <div class="module-list-page">
    <PortalHeader :active-path="config.baseRoute" />

    <main class="container module-list-main">
      <div class="module-content-layout" :class="{ 'with-sidebar': config.sidebarNavKey === 'expert' }">
        <ExpertNavSidebar v-if="config.sidebarNavKey === 'expert'" />

        <div class="module-content-main">
          <div class="page-head">
            <div>
              <h1>{{ config.title }}</h1>
              <p>{{ config.description }}</p>
            </div>
            <div class="head-actions">
              <a-input-search
                v-model:value="keyword"
                :placeholder="`搜索${config.title}`"
                enter-button="搜索"
                allow-clear
                @search="handleSearch"
              />
            </div>
          </div>

          <div v-if="loading" class="state-wrap">
            <a-skeleton v-for="i in 6" :key="i" active :paragraph="{ rows: 3 }" />
          </div>

          <div v-else-if="!entries.length" class="state-wrap">
            <a-empty :description="`暂无${config.title}`" />
          </div>

          <div v-else class="entry-grid" :class="{ 'no-image': !config.showImage }">
            <article
              v-for="item in entries"
              :key="item.entryId || item.id"
              class="entry-card"
              @click="goDetail(item)"
            >
              <div v-if="config.showImage" class="entry-card-image">
                <img :src="resolveSiteAssetUrl(item.image) || fallbackImage" :alt="item.title" />
              </div>
              <div class="entry-card-body">
                <div class="entry-card-top">
                  <h3>{{ item.title }}</h3>
                  <span>{{ item.publishTime || item.createTime?.slice(0, 10) || '' }}</span>
                </div>
                <p v-if="config.showSummary !== false">{{ item.summary || item.content || '暂无简介' }}</p>
                <div v-if="config.showAttachmentName !== false" class="entry-card-bottom">
                  <span v-if="item.attachmentName">{{ item.attachmentName }}</span>
                </div>
              </div>
            </article>
          </div>

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

    <footer class="site-footer">
      <PortalFooter />
    </footer>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import ExpertNavSidebar from '@/components/ExpertNavSidebar.vue'
import { pageSiteModuleEntries, resolveSiteAssetUrl, type SiteModuleEntry } from '@/api/site'

type ModuleListConfig = {
  type: string
  title: string
  description: string
  baseRoute: string
  showImage?: boolean
  showSummary?: boolean
  showAttachmentName?: boolean
  sidebarNavKey?: 'expert'
}

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

const route = useRoute()
const router = useRouter()

const fallbackImage = '/images/%E6%97%A0%E5%9B%BE%E7%89%87.png'
const keyword = ref((route.query.keyword as string) || '')
const currentPage = ref(Math.max(1, Number(route.query.page || 1)))
const pageSize = 12
const total = ref(0)
const loading = ref(false)
const entries = ref<SiteModuleEntry[]>([])

async function loadEntries() {
  loading.value = true
  try {
    const data = await pageSiteModuleEntries({
      page: currentPage.value,
      limit: pageSize,
      type: props.config.type,
      keywords: keyword.value || undefined,
    })
    total.value = data.count || 0
    entries.value = data.list || []
  } catch (error) {
    total.value = 0
    entries.value = []
    message.error(error instanceof Error ? error.message : '加载失败')
  } finally {
    loading.value = false
  }
}

function updateRoute() {
  router.replace({
    query: {
      ...(keyword.value ? { keyword: keyword.value } : {}),
      ...(currentPage.value > 1 ? { page: currentPage.value } : {}),
    }
  })
}

function handleSearch() {
  currentPage.value = 1
  updateRoute()
  loadEntries()
}

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

function goDetail(item: SiteModuleEntry) {
  router.push(`${props.config.baseRoute}/${item.entryId || item.id}`)
}

watch(() => route.query.keyword, (value) => {
  keyword.value = (value as string) || ''
})

watch(() => route.query.page, (value) => {
  currentPage.value = Math.max(1, Number(value || 1))
  loadEntries()
})

onMounted(loadEntries)
</script>

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

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.module-list-main {
  padding: 32px 0 48px;
}

.module-content-layout.with-sidebar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.module-content-main {
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.page-head h1 {
  margin: 0 0 10px;
  color: #1f2d3d;
  font-size: 34px;
}

.page-head p {
  margin: 0;
  color: #697586;
  font-size: 15px;
}

.head-actions {
  width: min(360px, 100%);
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.entry-grid.no-image .entry-card {
  grid-template-columns: 1fr;
}

.entry-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 20px;
  border: 1px solid #e6ecf2;
  background: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.entry-card:hover {
  border-color: #9fb7d5;
  box-shadow: 0 12px 30px rgba(25, 62, 111, 0.08);
  transform: translateY(-2px);
}

.entry-card-image img {
  width: 100%;
  height: 136px;
  object-fit: contain;
  background: #f7f9fb;
  border-radius: 4px;
}

.entry-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.entry-card-top h3 {
  margin: 0;
  color: #1f2d3d;
  font-size: 20px;
  line-height: 1.4;
}

.entry-card-top span,
.entry-card-bottom {
  color: #7d8a98;
  font-size: 13px;
}

.entry-card-body p {
  margin: 0 0 16px;
  color: #556371;
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.state-wrap {
  display: grid;
  gap: 16px;
  padding: 12px 0 24px;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.site-footer {
  margin-top: 24px;
}

.footer-nav {
  background: #1f4fa3;
}

.footer-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  min-height: 50px;
}

.footer-nav-inner a {
  color: #fff;
  font-size: 14px;
}

@media (max-width: 768px) {
  .module-list-main {
    padding: 24px 0 40px;
  }

  .module-content-layout.with-sidebar {
    grid-template-columns: 1fr;
  }

  .page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .head-actions {
    width: 100%;
  }

  .entry-grid {
    grid-template-columns: 1fr;
  }

  .entry-card {
    grid-template-columns: 1fr;
  }
}
</style>