cirry/stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
cirry
2026-09-07 13:34:26 +08:00
parent ad9245abdd
commit 359f9ae2e4
23 changed files with 2260 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/DetailKLine.vue
View File

@@ -29,15 +29,16 @@ for (const t of [
registerOverlay(t);
}
// ---------- 实盘买卖点标记（交割单导入） ----------
// ---------- 实盘买卖点 / 分红事件标记（同一模板，两组 groupId 独立管理） ----------
// v10 无 v9 的 simpleMarker，须注册自定义模板；字母种类/明细经 extendData 传入。
// A股惯例（通达信/同花顺同款）：B 买贴 low 下方、S 卖贴 high 上方、T 当日买+卖（做T）贴 high 上方；
// 图上只显示单个字母徽章（色底白字，用户指定固定配色，不随涨跌设置），成交明细（数量/均价/费用）
// 悬停字母时由组件浮层展示——onMouseEnter/onMouseLeave 是创建项级回调（OverlayCreate 未 Omit
// 事件键），闭包进组件状态即可（模板是模块级的，拿不到组件实例）。
// D 分红除权日贴 high 上方（紫）。图上只显示单个字母徽章（色底白字，用户指定固定配色，
// 不随涨跌设置），明细（成交数量/均价/费用 或 分红方案）悬停字母时由组件浮层展示——
// onMouseEnter/onMouseLeave 是创建项级回调（OverlayCreate 未 Omit 事件键），
// 闭包进组件状态即可（模板是模块级的，拿不到组件实例）。
interface TradeRow { label: string; text: string; tone: 'buy' | 'sell' | '' }
interface TradeMarkExt { kind: 'B' | 'S' | 'T'; rows: TradeRow[] }
const TRADE_COLORS: Record<'B' | 'S' | 'T', string> = { B: '#FE354B', S: '#3B7BBF', T: '#F9A504' };
interface TradeMarkExt { kind: 'B' | 'S' | 'T' | 'D'; rows: TradeRow[] }
const TRADE_COLORS: Record<'B' | 'S' | 'T' | 'D', string> = { B: '#FE354B', S: '#3B7BBF', T: '#F9A504', D: '#9C6ADE' };
const tradeMarkerTemplate: OverlayTemplate<TradeMarkExt> = {
name: 'tradeMarker',
totalStep: 2,
@@ -106,6 +107,9 @@ const props = defineProps<{
* T=当日买+卖（做T）贴 high 上方；rows 为悬停明细（数量/均价/费用）。
* 只画落在已渲染窗口内的（更早的等左滑翻页后自动补画） */
tradeMarkers?: { key: string; ts: number; kind: 'B' | 'S' | 'T'; rows: TradeRow[] }[];
/** 分红事件标记（tushare dividend，按除权除息日贴 high 上方，kind 固定 'D'）：
* rows 为悬停明细（每股分红/送转/登记日等）。与买卖点同模板不同 groupId，独立开关 */
dividendMarkers?: { key: string; ts: number; rows: TradeRow[] }[];
}>();
const emit = defineEmits<{
@@ -520,8 +524,8 @@ function pickTool(key: string) {
function clearOverlays() {
chart?.removeOverlay();
activeTool.value = '';
// removeOverlay() 无参清的是全部 overlay（含交易点）——交易点不是用户画线，重画回来
renderTradeMarkers();
// removeOverlay() 无参清的是全部 overlay（含交易点/分红）——事件标记不是用户画线，重画回来
renderMarkers();
}
// ---------- 日期跳转居中 ----------
@@ -559,12 +563,13 @@ function centerOn(ts: number): boolean {
}
defineExpose({ centerOn });
// ---------- 实盘买卖点标记渲染 ----------
// ---------- 事件标记渲染（买卖点 + 分红，同模板不同 groupId） ----------
const TRADE_GROUP = 'trades';
const DIVIDEND_GROUP = 'dividends';
/** 交易点允许吸附到「晚于最后一根K时间戳」的窗口，按周期放大：周/月/年K的 bar 时间戳
* 是周期首日（周一/1日/1月1日），当前周期内的成交（如月中）仍应贴到最后一根上。
* 日K严格为 0：行情未同步到成交日时宁可先不画（数据同步后重建图表自动补上），
/** 事件允许吸附到「晚于最后一根K时间戳」的窗口，按周期放大：周/月/年K的 bar 时间戳
* 是周期首日（周一/1日/1月1日），当前周期内的事件（如月中成交/除权）仍应贴到最后一根上。
* 日K严格为 0：行情未同步到事件日时宁可先不画（数据同步后重建图表自动补上），
* 也不能把周一的成交错标到周五的K线上。 */
const TRADE_AHEAD_MS: Record<string, number> = {
'1d': 0,
@@ -573,27 +578,27 @@ const TRADE_AHEAD_MS: Record<string, number> = {
'1y': 366 * 86400000,
};
/** 按 groupId 整组重建买卖点标记（先删后建，幂等）。交易日期按时间戳吸附到所在 bar：
* B 贴 bar.low 下方、S/T 贴 bar.high 上方；坐标随复权切换自动重算（value 取自当前数据）。
* 早于已渲染窗口的交易先跳过——左滑翻页 serveOlder 吐出新数据后会重跑本函数补画。
* 列表为空（关闭显示/清空成交/切到无成交股票）也必须清组，否则旧标记残留。 */
function renderTradeMarkers() {
/** 按 groupId 整组重建事件标记（先删后建，幂等）。事件日期按时间戳吸附到所在 bar：
* B 贴 bar.low 下方、S/T/D 贴 bar.high 上方；坐标随复权切换自动重算（value 取自当前数据）。
* 早于已渲染窗口的事件先跳过——左滑翻页 serveOlder 吐出新数据后会重跑本函数补画。
* 列表为空（关闭显示/清空成交/切到无分红股票）也必须清组，否则旧标记残留。 */
function renderMarkerGroup(groupId: string, markers: { key: string; ts: number; kind: 'B' | 'S' | 'T' | 'D'; rows: TradeRow[] }[] | undefined) {
if (!chart) return;
tradeTip.value = null; // 组重建期间字母已换位，旧明细浮层不能留在原地
chart.removeOverlay({ groupId: TRADE_GROUP });
if (!props.tradeMarkers?.length) return;
chart.removeOverlay({ groupId });
if (!markers?.length) return;
const list = chart.getDataList();
if (list.length === 0) return;
const lastTs = list[list.length - 1].timestamp;
const aheadMs = TRADE_AHEAD_MS[props.timeframe] ?? 0;
const creates: OverlayCreate<unknown>[] = [];
for (const m of props.tradeMarkers) {
for (const m of markers) {
const i = idxAtOrBefore(list, m.ts);
if (i < 0 || m.ts > lastTs + aheadMs) continue; // 未翻到 / 行情尚未覆盖该周期
const bar = list[i];
creates.push({
id: `trade-${m.key}`,
groupId: TRADE_GROUP,
id: `${groupId}-${m.key}`,
groupId,
name: 'tradeMarker',
points: [{ timestamp: bar.timestamp, value: m.kind === 'B' ? bar.low : bar.high }],
extendData: { kind: m.kind, rows: m.rows },
@@ -615,8 +620,14 @@ function renderTradeMarkers() {
if (creates.length) chart.createOverlay(creates);
}
// ---------- 交易点悬停明细（悬停 B/S/T 字母才显示，离开/滚动即隐） ----------
interface TradeTip { x: number; y: number; kind: 'B' | 'S' | 'T'; date: string; rows: TradeRow[] }
/** 全部事件标记重画（买卖点 + 分红），触发点：build 尾部 / serveOlder 左扩 / props 变化 / 清画线 */
function renderMarkers() {
renderMarkerGroup(TRADE_GROUP, props.tradeMarkers);
renderMarkerGroup(DIVIDEND_GROUP, props.dividendMarkers?.map((m) => ({ ...m, kind: 'D' as const })));
}
// ---------- 事件标记悬停明细（悬停 B/S/T/D 字母才显示，离开/滚动即隐） ----------
interface TradeTip { x: number; y: number; kind: 'B' | 'S' | 'T' | 'D'; date: string; rows: TradeRow[] }
const tradeTip = ref<TradeTip | null>(null);
/** 贴鼠标定位并在右缘/下缘自动翻转（与十字线浮层 placeHover 同款策略，宽度略大） */
@@ -669,7 +680,7 @@ function build() {
const start = allData.length - served - take;
served += take;
callback(allData.slice(start, start + take), { forward: canBack(), backward: false });
renderTradeMarkers(); // 窗口左扩后补画此前跳过的更早交易点
renderMarkers(); // 窗口左扩后补画此前跳过的更早事件标记（交易/分红）
};
const answerEmpty = () => callback([], { forward: false, backward: false });
if (type === 'init') {
@@ -764,8 +775,8 @@ function build() {
// 居中失败（锚点早于上市首日/晚于最后一根）必须上报：否则锚点 chip 与统计口径
// 仍停留在「已定位」状态，视口却悄悄回到最新行情。
if (props.centerTs != null && !centerOn(props.centerTs)) emit('centerMiss', props.centerTs);
// init 数据在 setPeriod 时已同步落入图表，可直接画首屏窗口内的交易点
renderTradeMarkers();
// init 数据在 setPeriod 时已同步落入图表，可直接画首屏窗口内的事件标记
renderMarkers();
}
function teardown() {
@@ -780,8 +791,8 @@ function teardown() {
onMounted(build);
onBeforeUnmount(teardown);
watch(() => [props.candles, props.indicators, props.subPanes, props.showBoll, props.showZhixing, props.zhixingBlocks, props.maPeriods, props.timeframe], () => { teardown(); build(); }, { deep: true });
// 买卖点数据变化（导入/清空/开关显示）：只重画标记，不重建图表（保留滚动位置与用户画线）
watch(() => props.tradeMarkers, renderTradeMarkers, { deep: true });
// 事件标记数据变化（导入/清空/开关显示/分红数据到达）：只重画标记，不重建图表（保留滚动位置与用户画线）
watch(() => [props.tradeMarkers, props.dividendMarkers], renderMarkers, { deep: true });
// 涨跌配色切换：重建图表以应用新颜色
watch(() => settings.priceTone, () => { teardown(); build(); });
// 副图高度变化：仅调 pane 高度，不重建（保留滚动/画线状态）

110
frontend/src/components/MarketOverview.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { RouterLink } from 'vue-router';
import { getMarketOverview } from '@/api/client';
import type { IndexQuote, MarketOverview as Overview } from '@/api/types';
import type { MarketOverview as Overview } from '@/api/types';
import AmountHistoryChart from '@/components/AmountHistoryChart.vue';
import IndexKLine from '@/components/IndexKLine.vue';
import Sparkline from '@/components/Sparkline.vue';
// 主页大盘总览：A 股 + 港美指数最近收盘（收盘口径，标注交易日），沪深两市市值/成交统计。
// 数据为 EOD 口径，进页面拉一次 + 手动刷新即可，不做轮询。
// 主页大盘总览：中美指数最近收盘（收盘口径，标注交易日），沪深两市市值/成交统计。
// 港股与国际指数在 /indexes 国际指数页。数据为 EOD 口径，进页面拉一次 + 手动刷新即可。
const overview = ref<Overview | null>(null);
const loading = ref(false);
@@ -31,7 +32,7 @@ const groups = computed(() => {
const idx = overview.value?.indexes ?? [];
return [
{ label: '沪深主要指数', items: idx.filter((i) => i.region === 'cn') },
{ label: '港美市场', items: idx.filter((i) => i.region !== 'cn') },
{ label: '美股市场', items: idx.filter((i) => i.region === 'us') },
].filter((g) => g.items.length > 0);
});
@@ -72,50 +73,6 @@ function fmtYi(v: number | null | undefined): string {
if (Math.abs(v) >= 10000) return `${(v / 10000).toFixed(2)} 万亿`;
return `${v.toLocaleString('zh-CN', { maximumFractionDigits: 0 })} 亿`;
}
// ---------- 迷你走势（归一化折线，SVG 拉伸 + 描边不缩放；端点/悬停点用 HTML 圆点保证正圆） ----------
const SPARK_PAD = 0.08; // 上下留白，避免贴边
function sparkGeom(it: IndexQuote) {
const vals = it.spark;
const n = vals.length;
if (n < 2) return null;
const lo = Math.min(...vals);
const hi = Math.max(...vals);
const span = hi - lo || Math.abs(hi) || 1;
const pts = vals.map((v, i) => ({
x: i / (n - 1),
y: 1 - ((v - lo) / span) * (1 - 2 * SPARK_PAD) - SPARK_PAD,
}));
const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(4)},${p.y.toFixed(4)}`).join(' ');
const area = `${line} L1,1 L0,1 Z`;
return { pts, line, area, last: pts[n - 1] };
}
const sparkColor = (it: IndexQuote): string => {
if (it.pct_chg == null || it.pct_chg === 0) return '#A8AFB8';
return it.pct_chg > 0 ? 'var(--color-up)' : 'var(--color-down)';
};
// 悬停：per-code 记录索引 + 相对坐标，tooltip 跟随
const hover = reactive<Record<string, { i: number; x: number; y: number }>>({});
function onSparkMove(it: IndexQuote, e: MouseEvent) {
const g = sparkGeom(it);
if (!g) return;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const t = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
const i = Math.round(t * (it.spark.length - 1));
hover[it.code] = { i, x: g.pts[i].x, y: g.pts[i].y };
}
function hoverText(it: IndexQuote): string {
const h = hover[it.code];
if (!h) return '';
const d = it.spark_dates[h.i] ?? '';
const iso = d ? `${d.slice(0, 4)}-${d.slice(4, 6)}-${d.slice(6, 8)}` : '';
return `${iso} ${fmtClose(it.spark[h.i])}`;
}
</script>
<template>
@@ -126,6 +83,13 @@ function hoverText(it: IndexQuote): string {
</h2>
<div class="flex items-center gap-3 text-xs text-[#6B7280]">
<span v-if="updatedAt">更新于 {{ updatedAt }}</span>
<RouterLink
to="/indexes"
class="flex items-center gap-1 rounded-md border border-[#26272E] px-2 py-1 transition-colors hover:border-[#3A3D46] hover:text-[#A8AFB8] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
>
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg>
国际指数
</RouterLink>
<button
type="button"
class="rounded p-1 transition-colors hover:bg-[#26272E] hover:text-[#A8AFB8] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
@@ -182,54 +146,12 @@ function hoverText(it: IndexQuote): string {
{{ it.pct_chg != null && it.pct_chg > 0 ? '▲' : it.pct_chg != null && it.pct_chg < 0 ? '▼' : '' }}{{ fmtPct(it.pct_chg) }}
</span>
</div>
<!-- 迷你走势：默认高度 36px，hover 出十字点与数值 -->
<div
class="relative mt-2 h-9"
@mousemove="onSparkMove(it, $event)"
@mouseleave="delete hover[it.code]"
>
<svg
v-if="sparkGeom(it)"
class="h-full w-full"
viewBox="0 0 1 1"
preserveAspectRatio="none"
aria-hidden="true"
>
<path :d="sparkGeom(it)!.area" :fill="sparkColor(it)" fill-opacity="0.1" />
<path
:d="sparkGeom(it)!.line"
fill="none"
:stroke="sparkColor(it)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
vector-effect="non-scaling-stroke"
/>
</svg>
<!-- 端点（带 2px 表面环）与悬停点：HTML 圆点，避免非等比 viewBox 把圆拉成椭圆 -->
<span
v-if="sparkGeom(it)"
class="pointer-events-none absolute h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-[#101014]"
:style="{ left: `${sparkGeom(it)!.last.x * 100}%`, top: `${sparkGeom(it)!.last.y * 100}%`, backgroundColor: sparkColor(it) }"
/>
<template v-if="hover[it.code]">
<span
class="pointer-events-none absolute h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-[#101014]"
:style="{ left: `${hover[it.code].x * 100}%`, top: `${hover[it.code].y * 100}%`, backgroundColor: sparkColor(it) }"
/>
<span
class="pointer-events-none absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded border border-[#3A3D46] bg-[#1A1B21] px-1.5 py-0.5 font-mono text-[10px] tabular-nums text-[#E5E7EB]"
:style="{ left: `${Math.min(82, Math.max(18, hover[it.code].x * 100))}%` }"
>{{ hoverText(it) }}</span>
</template>
</div>
<!-- 迷你走势：hover 出十字点与数值 -->
<Sparkline class="mt-2" :values="it.spark" :dates="it.spark_dates" :pct="it.pct_chg" />
</div>
</div>
</div>
<!-- 上证指数 K 线（日/周/月/年，周期随用户偏好持久化） -->
<IndexKLine class="mt-4" />
<!-- 两市统计：daily_info 沪 SH_MARKET(主板A+科创+B) + 深 SZ_MARKET 汇总 -->
<div
v-if="overview.stats"

85
frontend/src/components/MarketSyncBar.vue
View File

@@ -2,14 +2,20 @@
import { computed, onBeforeUnmount, onMounted } from 'vue';
import { useMarketSyncStore } from '@/stores/marketSync';
import { useEtfSyncStore } from '@/stores/etfSync';
const store = useMarketSyncStore();
const etfStore = useEtfSyncStore();
onMounted(async () => {
await store.fetchStatus();
await Promise.all([store.fetchStatus(), etfStore.fetchStatus()]);
store.pollIfRunning();
etfStore.pollIfRunning();
});
onBeforeUnmount(() => {
store.stopPolling();
etfStore.stopPolling();
});
onBeforeUnmount(() => store.stopPolling());
/** "2026-09-01T00:00:00" / "2026-09-01" -> "2026年09月01日"；无数据显示 — */
function fmtDate(s?: string | null): string {
@@ -21,20 +27,35 @@ function fmtDate(s?: string | null): string {
}
const latestDate = computed(() => store.syncStatus?.last_trade_date ?? null);
const running = computed(() => !!store.syncStatus?.running);
const etfLatestDate = computed(() => etfStore.syncStatus?.last_trade_date ?? null);
const marketRunning = computed(() => !!store.syncStatus?.running);
const etfRunning = computed(() => !!etfStore.syncStatus?.running);
// 任一在同步即视为「同步中」（隐藏按钮，避免同步期间重复触发）
const running = computed(() => marketRunning.value || etfRunning.value);
const syncing = computed(() => !!store.syncStatus?.total_days);
// 后端任务内错误（如 daily_basic 权限受限）与请求级错误都展示
const errText = computed(() => store.error || store.syncStatus?.error || null);
const etfErrText = computed(() => etfStore.error || etfStore.syncStatus?.error || null);
const progressPct = computed(() => {
const s = store.syncStatus;
if (!s?.total_days) return 0;
return Math.min(100, ((s.done_days ?? 0) / s.total_days) * 100);
});
const etfProgressPct = computed(() => {
const s = etfStore.syncStatus;
if (!s?.total) return 0;
return Math.min(100, ((s.done ?? 0) / s.total) * 100);
});
/** 一个按钮同时同步 A 股与 ETF（两端点各自幂等；已在这边跑着的不会被重复启动） */
async function startAll() {
await Promise.all([store.startSync(), etfStore.startSync()]);
}
</script>
<template>
<div class="mb-12 flex flex-wrap items-center gap-x-5 gap-y-3 rounded-xl border border-[#26272E] bg-[#101014] px-5 py-4">
<!-- 最新更新日期 -->
<!-- 最新更新日期：A股 + ETF -->
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/15 text-blue-300">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -48,29 +69,53 @@ const progressPct = computed(() => {
</div>
</div>
<span class="hidden flex-1 sm:block"></span>
<!-- 同步中：进度条 -->
<div v-if="running" class="flex min-w-[220px] flex-1 items-center gap-2">
<svg class="h-4 w-4 shrink-0 animate-spin text-blue-500" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" /></svg>
<span class="whitespace-nowrap text-[13px] text-[#A8AFB8]">
{{ store.syncStatus?.step || '同步中…' }}<template v-if="syncing">（{{ store.syncStatus?.done_days }}/{{ store.syncStatus?.total_days }}）</template>
</span>
<span v-if="syncing" class="h-1.5 flex-1 overflow-hidden rounded-full bg-[#26272E]">
<span class="block h-full rounded-full bg-blue-500 transition-all" :style="{ width: progressPct + '%' }" />
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-violet-500/15 text-violet-300">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
<path d="M22 12A10 10 0 0 0 12 2v10h10z" />
</svg>
</span>
<div>
<div class="text-xs text-[#6B7280]">ETF日线数据更新至</div>
<div class="text-base font-semibold tabular-nums text-[#E5E7EB]">{{ fmtDate(etfLatestDate) }}</div>
</div>
</div>
<!-- 空闲：手动同步按钮 -->
<button v-else type="button" class="btn-primary shrink-0" @click="store.startSync()">
<span class="hidden flex-1 sm:block"></span>
<!-- 同步中：A股 + ETF 各自进度 -->
<div v-if="running" class="flex min-w-[220px] flex-1 flex-col gap-1.5">
<div v-if="marketRunning" class="flex items-center gap-2">
<svg class="h-4 w-4 shrink-0 animate-spin text-blue-500" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" /></svg>
<span class="whitespace-nowrap text-[13px] text-[#A8AFB8]">
{{ store.syncStatus?.step || '同步中…' }}<template v-if="syncing">（{{ store.syncStatus?.done_days }}/{{ store.syncStatus?.total_days }}）</template>
</span>
<span v-if="syncing" class="h-1.5 flex-1 overflow-hidden rounded-full bg-[#26272E]">
<span class="block h-full rounded-full bg-blue-500 transition-all" :style="{ width: progressPct + '%' }" />
</span>
</div>
<div v-if="etfRunning" class="flex items-center gap-2">
<svg class="h-3.5 w-3.5 shrink-0 animate-spin text-violet-500" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" /></svg>
<span class="whitespace-nowrap text-[13px] text-[#A8AFB8]">
ETF：{{ etfStore.syncStatus?.step || '同步中…' }}<template v-if="etfStore.syncStatus?.total">（{{ etfStore.syncStatus?.done }}/{{ etfStore.syncStatus?.total }}）</template>
</span>
<span v-if="etfStore.syncStatus?.total" class="h-1.5 flex-1 overflow-hidden rounded-full bg-[#26272E]">
<span class="block h-full rounded-full bg-violet-500 transition-all" :style="{ width: etfProgressPct + '%' }" />
</span>
</div>
</div>
<!-- 空闲：手动同步按钮（一次同步 A 股 + ETF） -->
<button v-else type="button" class="btn-primary shrink-0" @click="startAll()">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-2.6-6.4M21 3v6h-6" /></svg>
同步A股当日数据
同步A股/ETF当日数据
</button>
<!-- 错误提示 -->
<div v-if="errText" class="w-full text-sm text-amber-400">
<div v-if="errText || etfErrText" class="w-full text-sm text-amber-400">
<svg class="mr-1 inline h-4 w-4 align-[-3px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z" /><path d="M12 9v4M12 17h.01" /></svg>
{{ errText }}
<template v-if="errText">A股：{{ errText }}<template v-if="etfErrText">；</template></template><template v-if="etfErrText">ETF：{{ etfErrText }}</template>
</div>
</div>
</template>
</template>

158
frontend/src/components/StockDetailOverlay.vue
View File

@@ -1,15 +1,18 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import {
addWatchlist, clearTrades, getStockPreview, getTrades, getWatchlist as getWatchlistApi,
addWatchlist, clearTrades, getStockDividends, getStockPreview, getTrades, getWatchlist as getWatchlistApi,
importTrades, removeWatchlist,
} from '@/api/client';
import type {
ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, Timeframe, TooltipField,
TradesImportResponse, UserTrade,
ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, StockDividendRecord, StockFinanceRecord,
Timeframe, TooltipField, TradesImportResponse, UserTrade,
} from '@/api/types';
import { useSettingsStore, DEFAULT_TOOLTIP_FIELDS, TOOLTIP_FIELDS, type PriceAdjust } from '@/stores/settings';
import DetailKLine from './DetailKLine.vue';
import CompanyInfoPanel from './CompanyInfoPanel.vue';
import FinancePanel from './FinancePanel.vue';
import ReferencePanel from './ReferencePanel.vue';
const props = defineProps<{
items: ScreenerItemOut[];
@@ -71,6 +74,9 @@ const showBoll = computed<boolean>(() => layout.value.showBoll === true);
const showZhixing = computed<boolean>(() => layout.value.showZhixing === true);
function toggleBoll() { settings.setChartLayout({ showBoll: !showBoll.value }); }
function toggleZhixing() { settings.setChartLayout({ showZhixing: !showZhixing.value }); }
// K线分红标记（默认开；与交易点同款持久化开关）
const showDividends = computed<boolean>(() => layout.value.showDividends !== false);
function toggleDividends() { settings.setChartLayout({ showDividends: !showDividends.value }); }
// 知行指标图例行的板块文本（通达信 HYBLOCK+' '+DYBLOCK 的近似；GNBLOCK 概念板块无数据源）
const zhixingBlocks = computed(() => {
const info = data.value?.info;
@@ -230,9 +236,30 @@ async function loadTrades(code: string) {
if (token === tradesToken) trades.value = [];
}
}
// ---------- 分红（tushare dividend 懒加载；K线除权标记 + 右栏统计） ----------
const dividends = ref<StockDividendRecord[]>([]);
/** FinancePanel 加载成功后上报的财务记录（近五年，报告期倒序）；分红率等跨源指标用 */
const financeRecords = ref<StockFinanceRecord[]>([]);
/** 拉当前股分红（失败静默：未登录/网络异常都不影响看图）。与 loadTrades 同款请求序号防乱序。 */
let dividendsToken = 0;
async function loadDividends(code: string) {
const token = ++dividendsToken;
try {
const res = await getStockDividends(code);
if (token === dividendsToken) dividends.value = res.records;
} catch {
if (token === dividendsToken) dividends.value = [];
}
}
watch(active, (code) => {
trades.value = []; // 同步先清：新图挂载时（成交未返回）不能带着旧股标记
dividends.value = [];
financeRecords.value = [];
loadTrades(code);
loadDividends(code);
}, { immediate: true });
const fmtQty = (q: number) =>
@@ -275,6 +302,79 @@ const tradeMarkers = computed(() => {
}).sort((a, b) => a.ts - b.ts);
});
/** YYYYMMDD → YYYY-MM-DD（分红各日期字段的展示格式） */
const fmtYmd8 = (s: string) => `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`;
const fmt4 = (v: number) => String(+v.toFixed(4));
/** 按除权除息日聚成分红标记（kind 固定 'D' 贴 high 上方）：只取已实施行；同日多笔
* （如年度+中期分红同日除权）合并金额。明细收进 rows，悬停字母 D 时显示。 */
const dividendMarkers = computed(() => {
if (!showDividends.value) return [];
const byEx = new Map<string, {
ts: number; cash: number; cashTax: number; bo: number; co: number;
years: Set<string>; record: string | null; pay: string | null;
}>();
for (const d of dividends.value) {
if (d.div_proc !== '实施' || !d.ex_date || d.ex_date.length !== 8) continue;
let v = byEx.get(d.ex_date);
if (!v) byEx.set(d.ex_date, v = {
ts: new Date(+d.ex_date.slice(0, 4), +d.ex_date.slice(4, 6) - 1, +d.ex_date.slice(6, 8)).getTime(),
cash: 0, cashTax: 0, bo: 0, co: 0, years: new Set(), record: null, pay: null,
});
v.cash += d.cash_div ?? 0;
v.cashTax += d.cash_div_tax ?? 0;
v.bo += d.stk_bo_rate ?? 0;
v.co += d.stk_co_rate ?? 0;
if (d.end_date) v.years.add(d.end_date.slice(0, 4));
v.record = v.record ?? (d.record_date ? fmtYmd8(d.record_date) : null);
v.pay = v.pay ?? (d.pay_date ? fmtYmd8(d.pay_date) : null);
}
return [...byEx.entries()].map(([ex, v]) => {
const rows: { label: string; text: string; tone: 'buy' | 'sell' | '' }[] = [];
if (v.cash > 0) rows.push({ label: '每股派息(税后)', text: `${fmt4(v.cash)} 元`, tone: '' });
if (v.cashTax > 0 && Math.abs(v.cashTax - v.cash) > 1e-9) rows.push({ label: '每股派息(税前)', text: `${fmt4(v.cashTax)} 元`, tone: '' });
if (v.bo > 0 || v.co > 0) {
rows.push({ label: '每股送转', text: `10送${fmt4(v.bo * 10)}转${fmt4(v.co * 10)}`, tone: '' });
}
if (v.years.size) rows.push({ label: '分红年度', text: [...v.years].sort().join(' / '), tone: '' });
if (v.record) rows.push({ label: '股权登记日', text: v.record, tone: '' });
if (v.pay) rows.push({ label: '派息日', text: v.pay, tone: '' });
return { key: fmtYmd8(ex), ts: v.ts, rows };
}).sort((a, b) => a.ts - b.ts);
});
/** 右栏分红统计：股息率(TTM) / 分红率(最近有分红的年报年度) / 近5年次数与累计。
* 分红率 = 该年度每股税前分红合计 ÷ 该年年报基本每股收益（finance 数据由 FinancePanel 上报）。 */
const divStats = computed(() => {
const impl = dividends.value.filter((d) => d.div_proc === '实施');
if (impl.length === 0) return null;
const now = Date.now();
const ttmCutoff = now - 365 * 86400000;
const fiveCutoff = now - 5 * 365 * 86400000;
let ttmCash = 0, cnt5y = 0, sum5y = 0;
for (const d of impl) {
if (!d.ex_date || d.ex_date.length !== 8) continue;
const ts = new Date(+d.ex_date.slice(0, 4), +d.ex_date.slice(4, 6) - 1, +d.ex_date.slice(6, 8)).getTime();
if (ts > now) continue; // 已公告未除权的不计
if (ts >= ttmCutoff) ttmCash += d.cash_div ?? 0;
if (ts >= fiveCutoff) { cnt5y += 1; sum5y += d.cash_div ?? 0; }
}
const price = data.value?.info?.close;
const yieldTtm = ttmCash > 0 && price ? (ttmCash / price) * 100 : null;
// 分红率：从最新年报年度往前找第一个有分红实施的年度
let payout: number | null = null;
const annuals = financeRecords.value.filter((r) => r.end_date.endsWith('1231'));
for (const a of annuals) {
const y = a.end_date.slice(0, 4);
const divSum = impl.filter((d) => (d.end_date ?? '').startsWith(y)).reduce((s, d) => s + (d.cash_div_tax ?? 0), 0);
if (divSum > 0) {
if (a.eps && a.eps > 0) payout = (divSum / a.eps) * 100;
break;
}
}
return { yieldTtm, payout, cnt5y, sum5y };
});
async function onTradeFile(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file) return;
@@ -436,27 +536,22 @@ onBeforeUnmount(() => {
document.body.style.overflow = '';
});
// ---------- 右侧信息栏增强：52周高低 / 年初至今（从日线序列算，无数据留空） ----------
// ---------- 右侧信息栏增强：52周高低（从日线序列算，无数据留空） ----------
const stats = computed(() => {
// 日期跳转后窗口是历史段，52周/年初至今口径失真，直接不显示
// 日期跳转后窗口是历史段，52周口径失真，直接不显示
const bars = timeframe.value === '1d' && jumpTs.value == null ? data.value?.candles : null;
if (!bars || bars.length === 0) return { high52: null, low52: null, ytd: null };
if (!bars || bars.length === 0) return { high52: null, low52: null };
const last = bars[bars.length - 1];
const lastTs = new Date(last.ts);
const yearStart = new Date(lastTs.getFullYear(), 0, 1).getTime();
let high = -Infinity, low = Infinity;
let ytdBase: number | null = null;
const cutoff = lastTs.getTime() - 365 * 24 * 3600 * 1000;
for (const b of bars) {
const t = new Date(b.ts).getTime();
if (t >= cutoff) { high = Math.max(high, b.high); low = Math.min(low, b.low); }
// 年初至今基准 = 上一年最后一根收盘
if (t < yearStart) ytdBase = b.close;
}
return {
high52: high === -Infinity ? null : high,
low52: low === Infinity ? null : low,
ytd: ytdBase && ytdBase !== 0 ? ((last.close - ytdBase) / ytdBase) * 100 : null,
};
});
@@ -606,6 +701,14 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
:title="trades.length ? `本股实盘成交 ${trades.length} 笔（交割单导入）` : '本股暂无实盘成交记录，点击导入交割单'"
@click="trades.length ? (showTrades = !showTrades) : openTradeImport()"
>交易点{{ trades.length ? ` ${trades.length}` : '' }}</button>
<!-- 分红除权标记（tushare dividend） -->
<button
type="button"
class="rounded-md border px-2.5 py-1 text-[13px] transition-colors"
:class="showDividends && dividendMarkers.length ? 'border-[#9C6ADE] bg-[#9C6ADE] text-white' : 'border-[#26272E] bg-[#101014] text-[#9BA3AE]'"
:title="dividendMarkers.length ? `分红除权 ${dividendMarkers.length} 次（悬停 D 看方案）` : '本股无已实施分红记录'"
@click="toggleDividends"
>分红{{ dividendMarkers.length ? ` ${dividendMarkers.length}` : '' }}</button>
<button
type="button"
class="rounded-md border border-[#26272E] bg-[#101014] px-2.5 py-1 text-[13px] text-[#A8AFB8] transition-colors hover:border-[#3A3D46] hover:text-[#E8EAED]"
@@ -732,14 +835,15 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
:tooltip-fields="tooltipFields"
:center-ts="jumpTs"
:trade-markers="tradeMarkers"
:dividend-markers="dividendMarkers"
@center-miss="onCenterMiss"
/>
<div v-else class="flex h-full items-center justify-center text-sm text-[#9BA3AE]">无数据</div>
</div>
</section>
<!-- 右：个股信息（通达信式） -->
<aside v-if="data" class="w-72 shrink-0 overflow-y-auto border-l border-[#26272E] bg-[#101014] p-4">
<!-- 右：个股信息（通达信式）；w-96=384px：参考数据/财务的多列表格在 w-72 下换行过碎 -->
<aside v-if="data" class="w-96 shrink-0 overflow-y-auto border-l border-[#26272E] bg-[#101014] p-4">
<div class="border-b border-[#1E2026] pb-3">
<div class="text-[15px] font-semibold text-[#E8EAED]">{{ data.info.name }}</div>
<div class="mt-0.5 text-[13px] text-[#9BA3AE]">
@@ -756,8 +860,6 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
<div class="mt-3 grid grid-cols-2 gap-y-2 text-sm">
<template v-for="(row, i) in [
['今开', fmt(data.info.open)],
['昨收', fmt(data.info.pre_close)],
['最高', fmt(data.info.high)],
['最低', fmt(data.info.low)],
['成交量', fmtInt(data.info.volume_hand) + ' 手'],
@@ -769,7 +871,6 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
['流通市值', fmt(data.info.circ_mv) + ' 亿'],
['52周最高', fmt(stats.high52)],
['52周最低', fmt(stats.low52)],
['年初至今', stats.ytd == null ? '—' : (stats.ytd > 0 ? '+' : '') + stats.ytd.toFixed(2) + '%'],
['上市日期', fmtListDate(data.info.list_date)],
['数据日期', (data.info.trade_date ?? '').slice(0, 10) || '—'],
]" :key="i">
@@ -778,22 +879,31 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
</template>
</div>
<!-- 股本/分红/股东（数据未接入前留空占位） -->
<div class="mt-4 border-t border-[#1E2026] pt-3 text-sm">
<div class="mb-2 text-[13px] text-[#9BA3AE]">股本 / 分红 / 股东</div>
<!-- 分红统计（tushare dividend；无已实施分红整节隐藏） -->
<div v-if="divStats" class="mt-4 border-t border-[#1E2026] pt-3 text-sm">
<div class="mb-2 text-[13px] text-[#9BA3AE]">分红</div>
<div class="grid grid-cols-2 gap-y-2">
<template v-for="(row, i) in [
['股东户数', '—'],
['户均持股', '—'],
['分红率', '—'],
['股息率', '—'],
['股息率TTM', divStats.yieldTtm == null ? '—' : divStats.yieldTtm.toFixed(2) + '%'],
['分红率', divStats.payout == null ? '—' : divStats.payout.toFixed(1) + '%'],
['近5年分红', `${divStats.cnt5y} 次`],
['近5年每股累计', divStats.sum5y > 0 ? fmt4(divStats.sum5y) + ' 元' : '—'],
]" :key="i">
<span class="text-[#9BA3AE]">{{ row[0] }}</span>
<span class="text-right text-[#C3C9D2]" title="数据源待接入">{{ row[1] }}</span>
<span class="text-right text-[#E8EAED]">{{ row[1] }}</span>
</template>
</div>
</div>
<!-- 财务指标（fina_indicator+三大报表关键值，近五年；:key 切股重挂，加载成功上报记录供分红率计算） -->
<FinancePanel :key="data.ts_code" :ts-code="data.ts_code" @loaded="financeRecords = $event" />
<!-- 参考数据（tushare 参考数据版块 11 类；默认折叠，:key 切股重挂自动清缓存） -->
<ReferencePanel :key="data.ts_code" :ts-code="data.ts_code" />
<!-- 公司简介（tushare stock_company 懒加载；:key 切股重挂，折叠态/数据自动重置） -->
<CompanyInfoPanel :key="data.ts_code" :ts-code="data.ts_code" />
<div class="mt-4 border-t border-[#1E2026] pt-3 text-sm">
<div class="mb-2 text-[13px] text-[#9BA3AE]">归属</div>
<div class="flex flex-wrap gap-1.5">