jczxw-pc/app/pages/suggestions/index.vue

<template>
  <div class="suggestions-page">
    <PortalHeader active-path="/suggestions" />

    <main class="container suggestions-main">
      <div class="page-head">
        <div>
          <h1>建言献策</h1>
          <p>展示已审核并公开的建言内容</p>
        </div>
        <div class="head-actions">
          <a-input-search
            v-model:value="keyword"
            placeholder="搜索建言标题"
            enter-button="搜索"
            allow-clear
            @search="handleSearch"
          />
          <a-button type="primary" @click="navigateTo('/suggestions/submit')">我要建言</a-button>
        </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="!suggestions.length" class="state-wrap">
        <a-empty description="暂无公开建言" />
      </div>

      <div v-else class="suggestion-list">
        <article
          v-for="item in suggestions"
          :key="item.suggestionId || item.id"
          class="suggestion-card"
          @click="goDetail(item)"
        >
          <div class="suggestion-card-top">
            <h3>{{ item.title }}</h3>
            <span>{{ item.createTime?.slice(0, 10) || '' }}</span>
          </div>
          <p>{{ item.content || '暂无内容' }}</p>
          <div class="suggestion-card-bottom">
            <a-tag :color="Number(item.status) === 2 ? 'green' : 'blue'">
              {{ Number(item.status) === 2 ? '已采纳' : '已处理' }}
            </a-tag>
            <span v-if="item.processedTime">处理时间：{{ item.processedTime.slice(0, 10) }}</span>
          </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>
    </main>

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

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { pageSiteSuggestions, type SiteSuggestion } from '@/api/site'
import { usePageSeo } from '@/composables/usePageSeo'

definePageMeta({
  layout: 'blank'
})

usePageSeo({
  title: '建言献策',
  description: '广西决策咨询网公开建言列表'
})

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

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 suggestions = ref<SiteSuggestion[]>([])

async function loadSuggestions() {
  loading.value = true
  try {
    const data = await pageSiteSuggestions({
      page: currentPage.value,
      limit: pageSize,
      keywords: keyword.value || undefined,
    })
    total.value = data.count || 0
    suggestions.value = data.list || []
  } catch (error) {
    total.value = 0
    suggestions.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()
  loadSuggestions()
}

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

function goDetail(item: SiteSuggestion) {
  router.push(`/suggestions/${item.suggestionId || 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))
  loadSuggestions()
})

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

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

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

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

.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 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(460px, 100%);
}

.head-actions :deep(.ant-input-search) {
  flex: 1;
}

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

.suggestion-card {
  min-height: 220px;
  padding: 24px;
  border: 1px solid #e6ecf2;
  background: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

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

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

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

.suggestion-card-top span {
  flex-shrink: 0;
  color: #7d8a98;
  font-size: 13px;
}

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

.suggestion-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #7d8a98;
  font-size: 13px;
}

.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) {
  .suggestions-main {
    padding: 24px 0 40px;
  }

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

  .head-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .suggestion-list {
    grid-template-columns: 1fr;
  }

  .suggestion-card-bottom {
    flex-direction: column;
    align-items: start;
  }
}
</style>