invest-research-frontend/web-app/src/views/stock/etf/allweather/index.vue

<template>
  <div class="etf-page">
    <header class="page-hd">
      <div>
        <div class="page-title">全天候策略模型</div>
        <div class="page-sub">
          全天候策略 · 数据截至 {{ allweatherModel.asOf }}
        </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 hero" :class="awSummaryCls">
        <div class="label">全天候策略 · 累计收益</div>
        <div class="value">
          {{ formatPct(allweatherSummary.totalReturn) }}<span class="unit"> %</span>
        </div>
        <div class="chg">
          起始 2025-01-01 · 当前净值 {{ allweatherSummary.latest.toFixed(4) }} · 最大回撤 {{ formatPct(allweatherSummary.maxDrawdown) }}%
        </div>
      </div>
      <div class="kpi-card">
        <div class="label">全天候策略 · 本周收益</div>
        <div class="value">
          {{ formatPct(allweatherSummary.weeklyReturn) }}<span class="unit"> %</span>
        </div>
        <div class="chg">日频净值 · 数据周期（2026.9.28-9.30）</div>
      </div>
    </section>

    <section class="section">
      <div class="section-hd">
        <span class="dot" style="background:#1552D0"></span>
        <h2>全天候策略模型</h2>
        <span class="meta">Bridgewater All-Weather · 风险平价 · 月末调仓</span>
      </div>

      <!-- 模型说明卡 -->
      <div class="card desc-card">
        <div class="desc-hd">
          <span class="ic">说</span>
          <span class="desc-title">模型说明</span>
        </div>
        <div class="desc-body">
          <div class="desc-row">
            <span class="k">底层标的</span>
            <span class="v">{{ allweatherModel.pool }}</span>
          </div>
          <div class="desc-row">
            <span class="k">主要逻辑</span>
            <span class="v">{{ allweatherModel.description }}</span>
          </div>
        </div>
      </div>

      <div class="card-grid cols-1-1" style="margin-top:14px">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">模型净值走势（日频）</span>
            </div>
            <div class="acts">
              <span class="meta">基准 1.00 · 当前 {{ allweatherSummary.latest.toFixed(4) }}</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="awNetOpt" 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 class="acts">
              <span class="meta">最大回撤 {{ formatPct(allweatherSummary.maxDrawdown) }}%</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="awDrawdownOpt" height="320px" />
          </div>
        </div>
      </div>

      <div class="card-grid cols-2-1" style="margin-top:14px">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">风险平价 · 六类 ETF 配置占比变化</span>
            </div>
            <div class="acts">
              <span class="meta">{{ allweatherWeights.length }} 期</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="awWeightOpt" height="340px" />
          </div>
        </div>
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">图</span>
              <span class="title-text">最新一期权重</span>
            </div>
            <div class="acts">
              <span class="meta">{{ allweatherWeights[allweatherWeights.length - 1].date }}</span>
            </div>
          </div>
          <div class="card-body">
            <Chart :option="awLatestWeightOpt" height="200px" />
            <div class="note-block">
              <div class="kv-list">
                <div class="kv"><span class="k">信号日</span><span class="v">{{ allweatherWeights[allweatherWeights.length - 1].signalDate }}</span></div>
                <div class="kv"><span class="k">沪深300ETF</span><span class="v">{{ (allweatherWeights[allweatherWeights.length - 1].hs300 * 100).toFixed(1) }}%</span></div>
                <div class="kv"><span class="k">中证500ETF</span><span class="v">{{ (allweatherWeights[allweatherWeights.length - 1].zz500 * 100).toFixed(1) }}%</span></div>
                <div class="kv"><span class="k">五年国债ETF</span><span class="v">{{ (allweatherWeights[allweatherWeights.length - 1].c5 * 100).toFixed(1) }}%</span></div>
                <div class="kv"><span class="k">十年国债ETF</span><span class="v">{{ (allweatherWeights[allweatherWeights.length - 1].c10 * 100).toFixed(1) }}%</span></div>
                <div class="kv"><span class="k">黄金ETF</span><span class="v">{{ (allweatherWeights[allweatherWeights.length - 1].gold * 100).toFixed(1) }}%</span></div>
                <div class="kv"><span class="k">豆粕ETF</span><span class="v">{{ (allweatherWeights[allweatherWeights.length - 1].meal * 100).toFixed(1) }}%</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 调仓权重明细表 -->
      <div class="card-grid cols-1" style="margin-top:14px">
        <div class="card">
          <div class="card-head">
            <div class="title">
              <span class="ic">表</span>
              <span class="title-text">六类 ETF 配置占比变化 · 明细表</span>
            </div>
            <div class="acts">
              <span class="meta">风险平价 · 月末调仓 · 信号日 T-1</span>
            </div>
          </div>
          <div class="card-body">
            <div class="table-wrap">
              <table class="weight-tbl aw">
                <thead>
                  <tr>
                    <th>调仓日期</th>
                    <th>信号日</th>
                    <th class="num">沪深300</th>
                    <th class="num">中证500</th>
                    <th class="num">5年国债</th>
                    <th class="num">10年国债</th>
                    <th class="num">黄金</th>
                    <th class="num">豆粕</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(w, i) in allweatherWeights" :key="i">
                    <td><b>{{ w.date }}</b></td>
                    <td>{{ w.signalDate }}</td>
                    <td class="num">{{ (w.hs300 * 100).toFixed(1) }}%</td>
                    <td class="num">{{ (w.zz500 * 100).toFixed(1) }}%</td>
                    <td class="num">{{ (w.c5 * 100).toFixed(1) }}%</td>
                    <td class="num">{{ (w.c10 * 100).toFixed(1) }}%</td>
                    <td class="num">{{ (w.gold * 100).toFixed(1) }}%</td>
                    <td class="num">{{ (w.meal * 100).toFixed(1) }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="footer">
      数据源：4.2.3-ETF模型-数据底稿.xlsx · 全天候策略-净值走势图 / 全天候策略-每月调仓权重 · 截至 {{ allweatherModel.asOf }}
    </footer>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import Chart from '@/components/Chart.vue'
import {
  allweatherModel,
  allweatherNetSeries,
  allweatherWeights,
  allweatherSummary,
} from '../data'
import {
  allweatherNetLineOption,
  allweatherDrawdownOption,
  allweatherWeightStackOption,
  allweatherLatestWeightOption,
} from '../charts'

const loading = ref(false)

function formatPct(v) {
  if (v == null || !Number.isFinite(v)) return '—'
  const sign = v > 0 ? '+' : ''
  return `${sign}${v.toFixed(2)}`
}

function summaryCls(total) {
  if (total == null) return 'neutral'
  if (total >= 30) return 'gold'
  if (total >= 10) return 'over'
  if (total >= 0) return 'neutral'
  return 'under'
}

const awSummaryCls = computed(() => summaryCls(allweatherSummary.totalReturn))

const awNetOpt = computed(() => allweatherNetLineOption(allweatherNetSeries))
const awDrawdownOpt = computed(() => allweatherDrawdownOption(allweatherNetSeries))
const awWeightOpt = computed(() => allweatherWeightStackOption(allweatherWeights))
const awLatestWeightOpt = computed(() => allweatherLatestWeightOption(allweatherWeights))

function reload() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 600)
}
</script>

<style scoped>
.etf-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;
  align-items: center;
}
.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: 0.15s;
}
.btn:hover {
  border-color: var(--brand, #1552D0);
  color: var(--brand, #1552D0);
}

.ic-refresh {
  display: inline-block;
  transition: transform 0.6s;
}
.ic-refresh.spinning {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--line, #E4E9F2);
  border-radius: 8px;
  padding: 13px 14px;
  position: relative;
  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.hero {
  background: linear-gradient(135deg, #0E3A96, #1552D0);
  color: #fff;
  border-color: #0E3A96;
}
.kpi-card.hero .label { color: rgba(255,255,255,0.82); }
.kpi-card.hero .value .unit { color: rgba(255,255,255,0.95); }
.kpi-card.hero .chg { color: rgba(255,255,255,0.88); }
.kpi-card.hero.gold {
  background: linear-gradient(135deg, #8C6A14, #C49A2A);
  border-color: #8C6A14;
}
.kpi-card.hero.under {
  background: linear-gradient(135deg, #B72828, #E13B3B);
  border-color: #B72828;
}
.kpi-card.hero.over {
  background: linear-gradient(135deg, #13754C, #189A65);
  border-color: #13754C;
}
.kpi-card.hero.neutral {
  background: linear-gradient(135deg, #4D5A75, #6B7A96);
  border-color: #4D5A75;
}
.kpi-card .label {
  font-size: 11.5px;
  color: var(--mut, #6B7A96);
  margin-bottom: 6px;
}
.kpi-card .value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1A2438);
  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;
  color: var(--mut, #6B7A96);
  font-variant-numeric: tabular-nums;
}

.section {
  margin-top: 18px;
}
.section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.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;
}

.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-grid.cols-1 { grid-template-columns: 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;
  color: var(--ink, #1A2438);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.card-head .title .ic {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  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;
  font-size: 11px;
  color: var(--mut, #6B7A96);
}
.card-body {
  padding: 14px 16px;
  flex: 1;
  min-height: 0;
}

/* 模型说明卡 */
.desc-card {
  background: linear-gradient(180deg, #FAFBFE 0%, #fff 100%);
}
.desc-hd {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line, #E4E9F2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.desc-hd .ic {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--brand-lt, #EAF1FF);
  color: var(--brand, #1552D0);
  font-size: 10px;
  border-radius: 4px;
  font-weight: 700;
}
.desc-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #1A2438);
}
.desc-body {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.desc-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.7;
}
.desc-row .k {
  flex: none;
  width: 70px;
  color: var(--mut, #6B7A96);
}
.desc-row .v {
  flex: 1;
  color: var(--ink, #1A2438);
  font-weight: 500;
}

/* 备注 / 最新权重说明 */
.note-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line, #E4E9F2);
}
.kv-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11.5px;
}
.kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kv .k { color: var(--mut, #6B7A96); }
.kv .v {
  color: var(--ink, #1A2438);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 调仓权重表 */
.table-wrap {
  overflow-x: auto;
}
.weight-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.weight-tbl th,
.weight-tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line, #E4E9F2);
  text-align: left;
  vertical-align: middle;
}
.weight-tbl th {
  background: #F5F7FB;
  color: var(--mut, #6B7A96);
  font-weight: 600;
  font-size: 11.5px;
}
.weight-tbl td.num,
.weight-tbl th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.weight-tbl tbody tr:hover {
  background: #FAFBFE;
}

.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: 980px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .desc-body { grid-template-columns: 1fr; }
  .card-grid.cols-2-1,
  .card-grid.cols-1-1,
  .card-grid.cols-1 { grid-template-columns: 1fr; }
}
</style>