This commit is contained in:
2026-09-04 19:05:23 +08:00
parent 76b422320b
commit 991d1bf343
10 changed files with 449 additions and 195 deletions

View File

@@ -4,6 +4,8 @@ import { computed, onMounted, reactive, ref } from 'vue';
import { getMarketOverview } from '@/api/client';
import type { IndexQuote, MarketOverview as Overview } from '@/api/types';
import AmountHistoryChart from '@/components/AmountHistoryChart.vue';
// 主页大盘总览A 股 + 港美指数最近收盘(收盘口径,标注交易日),沪深两市市值/成交统计。
// 数据为 EOD 口径,进页面拉一次 + 手动刷新即可,不做轮询。
@@ -119,7 +121,7 @@ function hoverText(it: IndexQuote): string {
<section class="mb-12" aria-label="大盘行情总览">
<div class="mb-3 flex items-baseline justify-between">
<h2 class="text-sm font-medium text-[#A8AFB8]">大盘行情
<span class="ml-2 text-xs font-normal text-[#6B7280]">收盘口径 · 每晚更新</span>
<span class="ml-2 text-xs font-normal text-[#6B7280]">实时行情 · 收盘走势</span>
</h2>
<div class="flex items-center gap-3 text-xs text-[#6B7280]">
<span v-if="updatedAt">更新于 {{ updatedAt }}</span>
@@ -167,7 +169,11 @@ function hoverText(it: IndexQuote): string {
>
<div class="flex items-baseline justify-between">
<span class="text-sm font-medium text-[#E5E7EB]">{{ it.name }}</span>
<span class="font-mono text-[10px] tabular-nums text-[#6B7280]">{{ fmtDate(it.trade_date) }}</span>
<!-- 实时蓝色徽标收盘口径交易日 MM-DD -->
<span v-if="it.realtime" class="flex items-center gap-1 text-[10px] text-blue-400">
<span class="h-1 w-1 animate-pulse rounded-full bg-blue-400" />实时
</span>
<span v-else class="font-mono text-[10px] tabular-nums text-[#6B7280]">{{ fmtDate(it.trade_date) }}</span>
</div>
<div class="mt-1.5 flex items-baseline gap-2">
<span class="text-xl font-semibold text-white">{{ fmtClose(it.close) }}</span>
@@ -220,14 +226,19 @@ function hoverText(it: IndexQuote): string {
</div>
</div>
<!-- 两市统计daily_info SH_A + SZ_MARKET 汇总 -->
<div v-if="overview.stats" class="mt-4 flex flex-wrap items-center gap-x-8 gap-y-2 rounded-lg border border-[#26272E] bg-[#101014] px-4 py-3 text-sm">
<!-- 两市统计daily_info SH_MARKET(主板A+科创+B) + SZ_MARKET 汇总 -->
<div
v-if="overview.stats"
class="mt-4 flex flex-wrap items-center gap-x-8 gap-y-2 rounded-lg border border-[#26272E] bg-[#101014] px-4 py-3 text-sm"
title="口径沪市主板A+科创板+B股+ 深市全部股票,不含基金/北交所"
>
<span class="text-xs text-[#6B7280]">沪深两市
<span class="font-mono tabular-nums">{{ fmtDate(overview.stats.trade_date) }}</span>
</span>
<span class="flex items-baseline gap-2">
<span class="text-xs text-[#6B7280]">成交额</span>
<span class="font-semibold text-[#E5E7EB]">{{ fmtYi(overview.stats.amount) }}</span>
<span class="font-semibold text-[#E5E7EB]">{{ fmtYi(overview.stats.amount_today ?? overview.stats.amount) }}</span>
<span v-if="overview.stats.amount_today != null" class="text-[10px] text-blue-300">今日</span>
</span>
<span class="flex items-baseline gap-2">
<span class="text-xs text-[#6B7280]">总市值</span>
@@ -243,6 +254,13 @@ function hoverText(it: IndexQuote): string {
</span>
</div>
<!-- 两市成交额历史数值轴柱状图今日盘中柱调淡标注 -->
<AmountHistoryChart
v-if="overview.amount_history?.length"
:bars="overview.amount_history"
class="mt-3"
/>
<!-- 部分来源失败透明但不打扰 -->
<div v-if="overview.errors.length" class="mt-2 text-[10px] text-[#6B7280]" :title="overview.errors.join('')">
{{ overview.errors.length }} 项数据获取失败已跳过