invest-research-frontend/web-app/src/views/bond/funding/index.vue

<template>
  <div class="bond-funding-page">
    <header class="page-hd">
      <div>
        <div class="page-title">债市资金面看板</div>
        <div class="page-sub">债市分析 · 资金面 · DR007 / Shibor 3M / 央行公开市场操作 / 流动性投放</div>
      </div>
      <div class="page-actions">
        <button class="btn" @click="reload" :disabled="loading">
          <span :class="['ic-refresh', { spinning: loading }]">↻</span> 刷新
        </button>
      </div>
    </header>

    <!-- KPI 概览条 -->
    <section class="kpi-grid">
      <div class="kpi-card" v-for="k in kpis" :key="k.label">
        <div class="label">{{ k.icon }} {{ k.label }}</div>
        <div class="value">
          {{ formatNum(k.value) }}<span class="unit"> {{ k.unit }}</span>
        </div>
        <div :class="['chg', chgCls(k.value, k.sign)]">
          <span class="arrow">{{ arrow(k.value) }}</span> {{ k.date }} · {{ k.tag }}
        </div>
      </div>
    </section>

    <!-- 资金利率 · DR007 / Shibor 3M -->
    <section class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>资金利率走势 · DR007 与 Shibor 3M</h2>
        <span class="meta">日频 · 全国银行间同业拆借中心</span>
        <span class="meta-spacer"></span>
        <span class="meta">DR007 {{ formatPct2(dr007Latest) }} · Shibor 3M {{ formatPct2(shibor3mLatest) }}</span>
      </div>
      <div class="card-grid cols-2-1">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">资金利率走势</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="dr007ShiborOpt" height="320px" />
          </div>
        </div>
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">说</span>
              <span class="title-text">指标解读</span>
            </div>
          </div>
          <div class="card-body">
            <div class="kv-list">
              <div class="kv"><span class="k">DR007 编码</span><span class="v">M0010043</span></div>
              <div class="kv"><span class="k">DR007 最新</span><span class="v strong">{{ formatPct2(dr007Latest) }}</span></div>
              <div class="kv"><span class="k">Shibor 3M 编码</span><span class="v">M0010042</span></div>
              <div class="kv"><span class="k">Shibor 3M 最新</span><span class="v strong">{{ formatPct2(shibor3mLatest) }}</span></div>
              <div class="kv"><span class="k">利差(3M-DR007)</span><span class="v strong">{{ spread }}bp</span></div>
            </div>
            <div class="note">
              DR007 是存款类机构 7 天质押式回购加权利率，反映银行体系短期资金松紧；Shibor 3M 是 3 个月期同业拆借利率，反映中期资金成本。{{ drComment }}。
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 中长期流动性 · MLF / PSL -->
    <section class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>中长期流动性工具 · MLF 与 PSL 余额</h2>
        <span class="meta">月度 · 中国人民银行</span>
        <span class="meta-spacer"></span>
        <span class="meta">MLF {{ formatYi(mlfLatest) }} 亿元 · PSL {{ formatYi(pslLatest) }} 亿元</span>
      </div>
      <div class="card-grid cols-2-1">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">MLF 与 PSL 余额</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="mlfPslOpt" height="320px" />
          </div>
        </div>
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">说</span>
              <span class="title-text">指标解读</span>
            </div>
          </div>
          <div class="card-body">
            <div class="kv-list">
              <div class="kv"><span class="k">MLF 编码</span><span class="v">M5515072</span></div>
              <div class="kv"><span class="k">MLF 最新</span><span class="v strong">{{ formatYi(mlfLatest) }} 亿元</span></div>
              <div class="kv"><span class="k">PSL 编码</span><span class="v">M5528822</span></div>
              <div class="kv"><span class="k">PSL 最新</span><span class="v strong">{{ formatYi(pslLatest) }} 亿元</span></div>
              <div class="kv"><span class="k">合计</span><span class="v strong">{{ formatYi(mlfPslSum) }} 亿元</span></div>
            </div>
            <div class="note">
              MLF 余额反映中期借贷便利存量，PSL 主要支持政策性银行信贷投放。两者合计反映中长期流动性投放总规模。{{ mlfPslComment }}。
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 买断式逆回购 -->
    <section class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>买断式逆回购 · 期末余额</h2>
        <span class="meta">月度 · 中国人民银行 · 口径：余额</span>
        <span class="meta-spacer"></span>
        <span class="meta">最新 6m {{ formatYi(repo6mLatest) }} · 3m {{ formatYi(repo3mLatest) }} 亿元</span>
      </div>
      <div class="card-grid cols-2-1">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">买断式逆回购 · 6m + 3m 期末余额（口径：余额）</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="repoNetOpt" height="320px" />
          </div>
        </div>
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">说</span>
              <span class="title-text">指标解读</span>
            </div>
          </div>
          <div class="card-body">
            <div class="kv-list">
              <div class="kv"><span class="k">6m 编码</span><span class="v">s4</span></div>
              <div class="kv"><span class="k">6m 最新余额</span><span class="v strong">{{ formatYi(repo6mLatest) }} 亿元</span></div>
              <div class="kv"><span class="k">3m 编码</span><span class="v">s3</span></div>
              <div class="kv"><span class="k">3m 最新余额</span><span class="v strong">{{ formatYi(repo3mLatest) }} 亿元</span></div>
              <div class="kv"><span class="k">合计余额</span><span class="v strong">{{ formatYi(repoTotal) }} 亿元</span></div>
            </div>
            <div class="note">
              买断式逆回购是 2024 年新增的中长期流动性投放工具，央行通过 6 个月 / 3 个月期限搭配，丰富投放渠道；本页采用「余额」口径（与国债净买入「净买入」口径不同）。{{ repoComment }}。
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 国债净买入 -->
    <section class="section">
      <div class="section-hd">
        <span class="dot"></span>
        <h2>国债买卖 · 月度净买入规模</h2>
        <span class="meta">月度 · Wind · 口径：净买入</span>
        <span class="meta-spacer"></span>
        <span class="meta">最新 {{ formatYi(bondBuyLatest) }} 亿元 · {{ formatDate(bondBuyLatest?.date) }}</span>
      </div>
      <div class="card-grid cols-2-1">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">国债月度净买入额（口径：净买入）</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="bondBuyOpt" height="320px" />
          </div>
        </div>
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">说</span>
              <span class="title-text">指标解读</span>
            </div>
          </div>
          <div class="card-body">
            <div class="kv-list">
              <div class="kv"><span class="k">指标编码</span><span class="v">Y9767477</span></div>
              <div class="kv"><span class="k">数据源</span><span class="v">Wind</span></div>
              <div class="kv"><span class="k">频率</span><span class="v">月度</span></div>
              <div class="kv"><span class="k">口径</span><span class="v">月度净买入</span></div>
              <div class="kv"><span class="k">起始日期</span><span class="v">2024-08-31</span></div>
              <div class="kv"><span class="k">最近观测</span><span class="v">{{ formatDate(bondBuyLatest?.date) }}</span></div>
              <div class="kv"><span class="k">最新读数</span><span class="v strong">{{ formatYi(bondBuyLatest) }} 亿元</span></div>
            </div>
            <div class="note">
              央行于 2024 年 8 月起开展国债买卖操作，作为流动性管理工具与货币政策框架的有益补充；本页采用「净买入」口径。
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="footer">
      数据源:全国银行间同业拆借中心 · 中国人民银行 · Wind · {{ updatedAt }} · 债市资金面看板 v1.0
    </footer>
  </div>
</template>

<script setup>
import { computed, onMounted, ref as vRef } from 'vue'
import Chart from '@/components/Chart.vue'
import { loadAllSeries, latestOf } from './data'
import { dr007ShiborOption, mlfPslOption, repoNetOption, bondBuyOption } from './charts'

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

const dr007Series    = vRef([])
const shibor3mSeries = vRef([])
const mlfSeries      = vRef([])
const pslSeries      = vRef([])
const repo6mSeries   = vRef([])
const repo3mSeries   = vRef([])
const bondBuySeries  = vRef([])

function formatNum(v) {
  if (typeof v !== 'number') return v ?? '—'
  return v.toFixed(2)
}
function formatYi(latest) {
  if (!latest || typeof latest.value !== 'number') return '—'
  return latest.value.toLocaleString(undefined, { maximumFractionDigits: 0 })
}
function formatPct2(latest) {
  if (!latest || typeof latest.value !== 'number') return '—'
  return `${latest.value.toFixed(2)}%`
}
function formatDate(d) {
  if (!d) return '—'
  return String(d).slice(0, 10)
}
function chgCls(v, sign = true) {
  if (typeof v !== 'number' || Math.abs(v) < 0.005) return 'flat'
  const isUp = sign ? v > 0 : v < 0
  return isUp ? 'up' : 'down'
}
function arrow(v) {
  if (typeof v !== 'number' || Math.abs(v) < 0.005) return '—'
  return v > 0 ? '▲' : '▼'
}

async function reload() {
  loading.value = true
  try {
    const all = await loadAllSeries()
    dr007Series.value    = all.dr007.series
    shibor3mSeries.value = all.shibor3m.series
    mlfSeries.value      = all.mlf.series
    pslSeries.value      = all.psl.series
    repo6mSeries.value   = all.repo6m.series
    repo3mSeries.value   = all.repo3m.series
    bondBuySeries.value  = all.bondBuy.series
    updatedAt.value = new Date().toISOString().slice(0, 19).replace('T', ' ')
  } finally {
    loading.value = false
  }
}
onMounted(reload)

const dr007Latest    = computed(() => latestOf(dr007Series.value))
const shibor3mLatest = computed(() => latestOf(shibor3mSeries.value))
const mlfLatest      = computed(() => latestOf(mlfSeries.value))
const pslLatest      = computed(() => latestOf(pslSeries.value))
const repo6mLatest   = computed(() => latestOf(repo6mSeries.value))
const repo3mLatest   = computed(() => latestOf(repo3mSeries.value))
const bondBuyLatest  = computed(() => latestOf(bondBuySeries.value))

const spread = computed(() => {
  if (!dr007Latest.value || !shibor3mLatest.value) return '—'
  return Math.round((shibor3mLatest.value.value - dr007Latest.value.value) * 100)
})

const mlfPslSum = computed(() => {
  if (mlfLatest.value?.value == null || pslLatest.value?.value == null) return null
  return mlfLatest.value.value + pslLatest.value.value
})
const repoTotal = computed(() => {
  if (repo6mLatest.value?.value == null || repo3mLatest.value?.value == null) return null
  return repo6mLatest.value.value + repo3mLatest.value.value
})

const kpis = computed(() => ([
  { label: 'DR007', icon: '⚡', value: dr007Latest.value?.value, unit: '%', date: formatDate(dr007Latest.value?.date), tag: '短端', sign: false },
  { label: 'Shibor 3M', icon: '🌀', value: shibor3mLatest.value?.value, unit: '%', date: formatDate(shibor3mLatest.value?.date), tag: '中端', sign: false },
  { label: 'MLF 余额', icon: '💵', value: mlfLatest.value?.value, unit: '亿元', date: formatDate(mlfLatest.value?.date), tag: '中期投放', sign: true },
  { label: 'PSL 余额', icon: '🧱', value: pslLatest.value?.value, unit: '亿元', date: formatDate(pslLatest.value?.date), tag: '政策性投放', sign: true },
  { label: '买断式逆回购 6M', icon: '🔁', value: repo6mLatest.value?.value, unit: '亿元', date: formatDate(repo6mLatest.value?.date), tag: '余额', sign: true },
  { label: '买断式逆回购 3M', icon: '🔂', value: repo3mLatest.value?.value, unit: '亿元', date: formatDate(repo3mLatest.value?.date), tag: '余额', sign: true },
  { label: '国债净买入', icon: '📥', value: bondBuyLatest.value?.value, unit: '亿元', date: formatDate(bondBuyLatest.value?.date), tag: '净买入', sign: true },
  { label: 'MLF+PSL 合计', icon: '🏦', value: mlfPslSum.value, unit: '亿元', date: formatDate(mlfLatest.value?.date), tag: '中长期投放', sign: true },
]))

const dr007ShiborOpt = computed(() => dr007ShiborOption(dr007Series.value, shibor3mSeries.value))
const mlfPslOpt = computed(() => mlfPslOption(mlfSeries.value, pslSeries.value))
const repoNetOpt = computed(() => repoNetOption(repo6mSeries.value, repo3mSeries.value))
const bondBuyOpt = computed(() => bondBuyOption(bondBuySeries.value))

const drComment = computed(() => {
  const v = dr007Latest.value?.value
  if (typeof v !== 'number') return '资金面松紧持续观察'
  if (v <= 1.5) return '资金面宽松'
  if (v <= 1.8) return '资金面中性偏松'
  if (v <= 2.1) return '资金面中性'
  return '资金面偏紧'
})

const mlfPslComment = computed(() => {
  if (!mlfSeries.value.length || mlfLatest.value == null) return '中长期流动性投放持续观察'
  const arr = mlfSeries.value
  const first = arr[0][1]
  const last = arr[arr.length - 1][1]
  if (typeof first !== 'number' || typeof last !== 'number') return '中长期流动性投放持续观察'
  if (last < first) return 'MLF 余额较前期回落，存量逐步压降'
  if (last > first) return 'MLF 余额较前期回升'
  return 'MLF 余额相对稳定'
})

const repoComment = computed(() => {
  if (repoTotal.value == null) return '买断式逆回购规模持续观察'
  if (repoTotal.value >= 1000) return '买断式逆回购净投放充裕'
  if (repoTotal.value >= 0) return '买断式逆回购净投放偏少'
  return '买断式逆回购转为净回笼'
})
</script>

<style scoped>
.bond-funding-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; 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;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: 0.15s;
}
.btn:hover { border-color: var(--brand, #1552D0); color: var(--brand, #1552D0); }
.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); } }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--line, #E4E9F2);
  border-radius: 8px;
  padding: 13px 14px;
  transition: 0.15s;
  min-width: 0;
}
.kpi-card:hover { box-shadow: 0 1px 3px rgba(16, 32, 64, 0.06); border-color: #D1D8E5; }
.kpi-card .label {
  font-size: 11.5px;
  color: var(--mut, #6B7A96);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-card .value {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.kpi-card .value .unit {
  font-size: 12px;
  color: var(--mut, #6B7A96);
  font-weight: 500;
  margin-left: 2px;
}
.kpi-card .chg {
  font-size: 11px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 3px;
}
.kpi-card .chg.up { color: #E13B3B; }
.kpi-card .chg.down { color: #189A65; }
.kpi-card .chg.flat { color: var(--mut, #6B7A96); }
.kpi-card .chg .arrow { font-size: 9px; }

.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; margin: 0; }
.section-hd .meta { font-size: 11.5px; color: #98A5BD; margin-left: 8px; }
.section-hd .meta-spacer { flex: 1; }

.card-grid { display: grid; gap: 14px; }
.card-grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.card-grid.cols-1-1 { grid-template-columns: 1fr 1fr; }

.card {
  background: #fff;
  border: 1px solid var(--line, #E4E9F2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card:hover { box-shadow: 0 1px 3px rgba(16, 32, 64, 0.06); }
.card-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line, #E4E9F2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-head .title {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.card-head .title .ic {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand-lt, #EAF1FF);
  color: var(--brand, #1552D0);
  font-size: 10px;
  border-radius: 4px;
  font-weight: 700;
  flex: none;
}
.card-head .title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head .acts { display: flex; align-items: center; gap: 6px; flex: none; }
.card-body { padding: 14px 16px; flex: 1; min-height: 0; }

.kv-list { padding: 4px 0; }
.kv {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line, #E4E9F2);
  font-size: 12.5px;
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--mut, #6B7A96); }
.kv .v { font-variant-numeric: tabular-nums; }
.kv .v.strong { font-weight: 600; }
.note {
  margin-top: 12px;
  padding: 10px 12px;
  background: #F7F9FD;
  border-left: 3px solid var(--brand, #1552D0);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mut, #6B7A96);
}

.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;
}

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