invest-research-frontend/web-app/src/views/policy/meeting/index.vue

<template>
  <div class="meeting-page">
    <header class="page-hd">
      <div>
        <div class="page-title">重要会议看板</div>
        <div class="page-sub">政策面 · 重要会议 · 中央经济工作会议 · 政府工作报告 · 政治局会议</div>
      </div>
      <div class="page-actions">
        <button class="btn" @click="reload" :disabled="loading">
          <span :class="['ic-refresh', { spinning: loading }]">↻</span> 刷新
        </button>
      </div>
    </header>

    <PolicySubnav
      v-model="activeSection"
      :items="subnav"
      @select="onSubnavSelect"
    />

    <!-- 文档库 -->
    <!-- <section class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>重要会议 · PDF 文档库</h2>
        <span class="meta">中央经济工作会议 · 政府工作报告 · 政治局会议</span>
      </div>
      <PolicyDocumentLibrary :docs="meetingDocs" @open="onOpenDoc" />
    </section> -->

    <!-- §3.1 中央经济工作会议 -->
    <section id="3.1" class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>§3.1 中央经济工作会议 · 最新期摘要 + 历史文档</h2>
        <span class="meta">年度 · 中共中央</span>
        <span class="meta-spacer"></span>
        <span class="meta">最新 {{ centralEconLatest.publishDate }} · 历史 {{ centralEconHistory.length }} 份(2020–2025)</span>
      </div>
      <PolicyLatestWithHistory
        :title="centralEconLatest.title"
        icon="⌧"
        :history="centralEconHistory"
        :latest-href="`/pdf-library#3.1`"
        library-href="/pdf-library"
        section-key="3.1"
      >
        <template #latest>
          <div class="date-banner">
            <div class="date-side">
              <div class="date-kicker">会议时间</div>
              <div class="date-value">{{ centralEconLatest.dateLabel }}</div>
            </div>
            <div class="date-divider"></div>
            <div class="date-body">
              <div class="date-title">{{ centralEconLatest.banner.title }}</div>
              <div class="date-note">{{ centralEconLatest.banner.note }}</div>
            </div>
          </div>
          <div class="para-list">
            <p v-for="(p, i) in centralEconLatest.paragraphs" :key="i" v-html="p"></p>
          </div>
        </template>
      </PolicyLatestWithHistory>
    </section>

    <!-- §3.2 政府工作报告 -->
    <section id="3.2" class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>§3.2 政府工作报告 · 最新期摘要 + 历史文档</h2>
        <span class="meta">年度 · 国务院</span>
        <span class="meta-spacer"></span>
        <span class="meta">最新 {{ govWorkReportLatest.publishDate }} · 历史 {{ govWorkReportHistory.length }} 份(2021–2026)</span>
      </div>
      <PolicyLatestWithHistory
        :title="govWorkReportLatest.title"
        icon="⊞"
        :history="govWorkReportHistory"
        :latest-href="`/pdf-library#3.2`"
        library-href="/pdf-library"
        section-key="3.2"
      >
        <template #latest>
          <div class="kpi-banner">
            <div
              v-for="(k, i) in govWorkReportLatest.kpis"
              :key="k.label"
              :class="['kpi-cell', { first: i === 0 }]"
            >
              <div class="kpi-label">{{ k.label }}</div>
              <div :class="['kpi-value', `tone-${k.tone}`]">{{ k.value }}</div>
            </div>
          </div>
          <div class="para-list">
            <p v-for="(p, i) in govWorkReportLatest.paragraphs" :key="i" v-html="p"></p>
          </div>
        </template>
      </PolicyLatestWithHistory>
    </section>

    <!-- §3.3 政治局会议 -->
    <section id="3.3" class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>§3.3 中央政治局会议 · 最新期摘要 + 历史文档</h2>
        <span class="meta">季度 · 中共中央政治局</span>
        <span class="meta-spacer"></span>
        <span class="meta">最新 {{ politburoLatest.publishDate }} · 历史 {{ politburoHistory.length }} 份(2021-04–2026-07)</span>
      </div>
      <PolicyLatestWithHistory
        :title="politburoLatest.title"
        icon="⊟"
        :history="politburoHistory"
        :latest-href="`/pdf-library#3.3`"
        library-href="/pdf-library"
        section-key="3.3"
      >
        <template #latest>
          <div class="date-banner">
            <div class="date-side">
              <div class="date-kicker">会议时间</div>
              <div class="date-value">{{ politburoLatest.dateLabel }}</div>
            </div>
            <div class="date-divider"></div>
            <div class="date-body">
              <div class="date-title">{{ politburoLatest.banner.title }}</div>
              <div class="date-note">{{ politburoLatest.banner.note }}</div>
            </div>
          </div>
          <div class="para-list">
            <p v-for="(p, i) in politburoLatest.paragraphs" :key="i" v-html="p"></p>
          </div>
        </template>
      </PolicyLatestWithHistory>
    </section>

    <footer class="footer">
      数据源:中共中央 · 国务院 · 中国政府网 · {{ updatedAt }} · 重要会议看板 v1.0
    </footer>
  </div>
</template>

<script setup>
import { onMounted, ref as vRef } from 'vue'
import { useRouter } from 'vue-router'
import PolicyLatestWithHistory from '@/components/policy/PolicyLatestWithHistory.vue'
import PolicyDocumentLibrary from '@/components/policy/PolicyDocumentLibrary.vue'
import PolicySubnav from '@/components/policy/PolicySubnav.vue'
import {
  centralEconLatest, centralEconHistory,
  govWorkReportLatest, govWorkReportHistory,
  politburoLatest, politburoHistory,
  policyDocumentLibrary,
} from '../_shared/policy-documents'

const router = useRouter()

const loading = vRef(false)
const updatedAt = vRef('')
const activeSection = vRef('meeting')

const subnav = [
  { key: 'fiscal',    label: '财政政策', to: '/policy/fiscal' },
  { key: 'monetary',  label: '货币政策', to: '/policy/monetary' },
  { key: 'meeting',   label: '重要会议', to: '/policy/meeting' },
  { key: 'industry',  label: '产业政策', to: '/policy/industry' },
  { key: 'library',   label: 'PDF 文档库', to: '/pdf-library' },
]

const meetingDocs = policyDocumentLibrary.filter((d) =>
  ['cee', 'gwr', 'pbs'].includes(d.key),
)

function onSubnavSelect() { /* handled by PolicySubnav via router.push */ }
function onOpenDoc(d) {
  if (d?.disabled) return
  if (d?.href) router.push(d.href)
}

async function reload() {
  loading.value = true
  try {
    updatedAt.value = new Date().toISOString().slice(0, 19).replace('T', ' ')
  } finally {
    loading.value = false
  }
}

onMounted(reload)
</script>

<style scoped>
.meeting-page {
  padding: 18px 24px 32px;
  color: var(--ink, #1A2438);
}

.page-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1A2438);
  margin-bottom: 3px;
}
.page-sub {
  font-size: 12px;
  color: var(--mut, #6B7A96);
}
.page-actions { display: flex; gap: 8px; }
.btn {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line, #E4E9F2);
  border-radius: 6px;
  background: #fff;
  color: var(--ink, #1A2438);
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: .15s;
}
.btn:hover { border-color: var(--brand, #1552D0); color: var(--brand-d, #0E3A96); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.ic-refresh.spinning { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.section { margin-top: 18px; }
.section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.section-hd .dot {
  width: 4px;
  height: 18px;
  background: var(--brand, #1552D0);
  border-radius: 2px;
}
.section-hd h2 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #1A2438);
  margin: 0;
}
.section-hd .meta {
  font-size: 11.5px;
  color: #98A5BD;
  margin-left: 8px;
}
.section-hd .meta-spacer { flex: 1; }

.footer {
  padding: 18px 24px 12px;
  color: #98A5BD;
  font-size: 11.5px;
  text-align: center;
  border-top: 1px solid var(--line, #E4E9F2);
  background: #FAFBFE;
  margin-top: 14px;
  border-radius: 8px;
}

/* ===== Latest card 内通用样式 ===== */
.date-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, #E8F0FE, #DBEAFE);
  border-left: 4px solid var(--brand, #1552D0);
  margin-bottom: 14px;
}
.date-side {
  width: 80px;
  text-align: center;
  flex: none;
}
.date-kicker {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--brand-d, #0E3A96);
}
.date-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-d, #0E3A96);
  margin-top: 4px;
}
.date-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(21, 82, 208, .3);
  margin: 4px 0;
}
.date-body { flex: 1; min-width: 0; }
.date-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1A2438);
  margin-bottom: 4px;
}
.date-note {
  font-size: 11.5px;
  color: var(--mut, #6B7A96);
  line-height: 1.55;
}

.kpi-banner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, #E8F0FE, #DBEAFE);
  border-left: 4px solid var(--brand, #1552D0);
  margin-bottom: 14px;
  text-align: center;
}
.kpi-cell {
  min-width: 0;
}
.kpi-cell + .kpi-cell {
  border-left: 1px solid rgba(21, 82, 208, .3);
  padding-left: 14px;
}
.kpi-label {
  font-size: 11px;
  color: var(--brand-d, #0E3A96);
  letter-spacing: .5px;
}
.kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-d, #0E3A96);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-value.tone-brand { color: var(--brand-d, #0E3A96); }
.kpi-value.tone-up    { color: var(--up, #E13B3B); }
.kpi-value.tone-warn  { color: #B25E00; }
.kpi-value.tone-green { color: var(--down, #189A65); }

.para-list { font-size: 13px; line-height: 1.8; color: var(--ink, #1A2438); }
.para-list p { margin-bottom: 8px; }
.para-list p:last-child { margin-bottom: 0; }
.para-list :deep(b) { color: var(--brand-d, #0E3A96); font-weight: 600; }
.para-list :deep(.hl-up) { color: var(--up, #E13B3B); font-weight: 600; }
.para-list :deep(.hl-dn) { color: var(--down, #189A65); font-weight: 600; }

@media (max-width: 980px) {
  .kpi-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
</style>