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-08-15 08:57:15 +08:00
parent 50fd032b45
commit c1c43d2ff7
30 changed files with 1908 additions and 888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,16 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { getStockPreview } from '@/api/client';
import type { PreviewResponse, ScreenerItemOut } from '@/api/types';
import { addWatchlist, getStockPreview, getWatchlist as getWatchlistApi, removeWatchlist } from '@/api/client';
import type { ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, Timeframe } from '@/api/types';
import { useSettingsStore, type PriceAdjust } from '@/stores/settings';
import DetailKLine from './DetailKLine.vue';
const props = defineProps<{
items: ScreenerItemOut[];
initial: string; // ts_code
}>();
const emit = defineEmits<{ (e: 'close'): void }>();
const emit = defineEmits<{ (e: 'close'): void; (e: 'watched-change'): void }>();
const settings = useSettingsStore();
// ---------- 状态 ----------
const active = ref(props.initial);
@@ -17,16 +19,123 @@ const loading = ref(false);
const error = ref<string | null>(null);
const filter = ref('');
// 副图指标：点击开关 / 拖拽排序
// 复权切换（持久化到设置；切换即重拉）
const ADJUSTS: { key: PriceAdjust; label: string }[] = [
{ key: 'bfq', label: '不复权' },
{ key: 'qfq', label: '前复权' },
{ key: 'hfq', label: '后复权' },
];
const adjust = computed(() => settings.priceAdjust);
function setAdjust(key: PriceAdjust) {
settings.setPriceAdjust(key);
}
// K线周期切换（持久化到用户偏好）
const PERIODS: { key: Timeframe; label: string }[] = [
{ key: '1d', label: '日K' },
{ key: '1w', label: '周K' },
{ key: '1M', label: '月K' },
{ key: '1y', label: '年K' },
];
const timeframe = ref<Timeframe>((settings.chartLayout.timeframe as Timeframe) ?? '1d');
function setTimeframe(tf: Timeframe) {
timeframe.value = tf;
settings.setChartLayout({ timeframe: tf });
}
// 数据口径徽标：market=近段未复权兜底；其余为实际复权口径（可能因因子缺失与所选不同）
const ADJUST_LABELS: Record<string, string> = { bfq: '不复权', qfq: '前复权', hfq: '后复权' };
const sourceLabel = computed(() =>
data.value ? (ADJUST_LABELS[data.value.source] ?? data.value.source) : '');
// ---------- 副图 / MA / 高度（全部随用户偏好持久化） ----------
const SUBS = [
{ key: 'vol', label: 'VOL' },
{ key: 'macd', label: 'MACD' },
{ key: 'kdj', label: 'KDJ' },
{ key: 'rsi', label: 'RSI' },
];
const subPanes = ref<string[]>(['vol', 'macd', 'kdj', 'rsi']);
const layout = computed<ChartLayoutPrefs>(() => settings.chartLayout);
const subPanes = computed<string[]>(() => layout.value.subPanes);
const maPeriods = computed<number[]>(() => layout.value.maPeriods);
const subHeights = computed(() => layout.value.subHeights);
const showBoll = ref(false);
function toggleSub(key: string) {
const cur = subPanes.value;
settings.setChartLayout({
subPanes: cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key],
});
}
function adjustHeight(key: string, delta: number) {
const DEFAULTS: Record<string, number> = { vol: 64, macd: 100, kdj: 96, rsi: 84 };
const base = subHeights.value;
const next = Math.max(40, (base[key] ?? DEFAULTS[key] ?? 90) + delta);
settings.setChartLayout({ subHeights: { ...base, [key]: next } });
}
// 副图拖拽排序
let dragKey: string | null = null;
function onDragStart(e: DragEvent, key: string) {
dragKey = key;
e.dataTransfer?.setData('text/plain', key);
if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
}
function onDrop(target: string) {
if (!dragKey || dragKey === target) return;
const arr = [...subPanes.value];
const from = arr.indexOf(dragKey);
if (from >= 0) arr.splice(from, 1);
const to = arr.indexOf(target);
arr.splice(to >= 0 ? to : arr.length, 0, dragKey);
settings.setChartLayout({ subPanes: arr });
dragKey = null;
}
// ---------- MA 配置（弹层） ----------
const MA_PRESETS = [5, 10, 20, 30, 60, 120, 250];
const showMaConfig = ref(false);
const customMa = ref('');
function toggleMa(p: number) {
const cur = maPeriods.value;
settings.setChartLayout({
maPeriods: cur.includes(p) ? cur.filter((x) => x !== p) : [...cur, p].sort((a, b) => a - b),
});
}
function addCustomMa() {
const v = parseInt(customMa.value, 10);
if (v >= 1 && v <= 500 && !maPeriods.value.includes(v)) {
settings.setChartLayout({ maPeriods: [...maPeriods.value, v].sort((a, b) => a - b) });
}
customMa.value = '';
showMaConfig.value = false;
}
// ---------- 自选股（星标） ----------
const watched = ref(false);
const watchBusy = ref(false);
const watchedSet = ref<Set<string>>(new Set());
async function refreshWatched() {
try {
watchedSet.value = new Set(await getWatchlistApi());
} catch { /* 未登录等场景忽略 */ }
watched.value = watchedSet.value.has(active.value);
}
async function toggleWatch() {
if (watchBusy.value) return;
watchBusy.value = true;
try {
const list = watched.value
? await removeWatchlist(active.value)
: await addWatchlist(active.value);
watchedSet.value = new Set(list);
watched.value = watchedSet.value.has(active.value);
emit('watched-change');
} catch { /* 忽略 */ } finally {
watchBusy.value = false;
}
}
const filteredItems = computed(() => {
const q = filter.value.trim().toLowerCase();
if (!q) return props.items;
@@ -50,7 +159,7 @@ const header = computed(() => {
};
});
// ---------- 数据加载 ----------
// ---------- 数据加载（拉全量历史，图表内按需分页展示） ----------
let fetchToken = 0;
async function load(code: string) {
const token = ++fetchToken;
@@ -58,7 +167,12 @@ async function load(code: string) {
error.value = null;
data.value = null;
try {
const res = await getStockPreview(code);
const res = await getStockPreview(code, {
limit: 30000,
adjust: adjust.value,
timeframe: timeframe.value,
mas: maPeriods.value,
});
if (token === fetchToken) data.value = res;
} catch (e) {
if (token === fetchToken) error.value = e instanceof Error ? e.message : '加载失败';
@@ -67,6 +181,16 @@ async function load(code: string) {
}
}
watch(active, (code) => load(code), { immediate: true });
watch(adjust, () => load(active.value));
watch(timeframe, () => load(active.value));
// MA 周期变化也要重拉（后端按 mas 计算指标序列）
watch(maPeriods, () => load(active.value));
// 切股时同步自选状态
watch(active, (code) => {
watched.value = watchedSet.value.has(code);
}, { immediate: true });
void refreshWatched();
function moveActive(delta: number) {
const list = filteredItems.value;
@@ -78,11 +202,10 @@ function moveActive(delta: number) {
// ---------- 键盘 / 滚动锁 ----------
function onKeydown(e: KeyboardEvent) {
// 输入法组合态 / 焦点在输入框时不拦截（否则搜索框打字会切股、Esc 关浮层）
if (e.isComposing) return;
const t = e.target as HTMLElement | null;
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
if (e.key === 'Escape') emit('close');
if (e.key === 'Escape') { if (showMaConfig.value) showMaConfig.value = false; else emit('close'); }
else if (e.key === 'ArrowUp') { e.preventDefault(); moveActive(-1); }
else if (e.key === 'ArrowDown') { e.preventDefault(); moveActive(1); }
}
@@ -95,29 +218,28 @@ onBeforeUnmount(() => {
document.body.style.overflow = '';
});
// ---------- 副图 chips：开关 + 拖拽排序 ----------
let dragKey: string | null = null;
function toggleSub(key: string) {
subPanes.value = subPanes.value.includes(key)
? subPanes.value.filter((k) => k !== key)
: [...subPanes.value, key];
}
function onDragStart(e: DragEvent, key: string) {
dragKey = key;
// Firefox/Safari 要求 dragstart 写入数据才会真正发起拖拽
e.dataTransfer?.setData('text/plain', key);
if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
}
function onDrop(target: string) {
if (!dragKey || dragKey === target) return;
const arr = [...subPanes.value];
const from = arr.indexOf(dragKey);
if (from >= 0) arr.splice(from, 1);
const to = arr.indexOf(target);
arr.splice(to >= 0 ? to : arr.length, 0, dragKey);
subPanes.value = arr;
dragKey = null;
}
// ---------- 右侧信息栏增强：52周高低 / 年初至今（从日线序列算，无数据留空） ----------
const stats = computed(() => {
const bars = timeframe.value === '1d' ? data.value?.candles : null;
if (!bars || bars.length === 0) return { high52: null, low52: null, ytd: 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,
};
});
// ---------- 格式化 ----------
const fmt = (v: number | null | undefined, d = 2) => (v == null ? '—' : v.toFixed(d));
@@ -131,7 +253,20 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
<template>
<div class="fixed inset-0 z-40 flex flex-col bg-slate-100">
<!-- 顶栏 -->
<header class="flex h-12 shrink-0 items-center gap-4 border-b border-slate-200 bg-white px-4">
<header class="flex h-12 shrink-0 items-center gap-3 border-b border-slate-200 bg-white px-4">
<!-- 自选星标 -->
<button
type="button"
class="shrink-0 rounded p-1 transition-colors hover:bg-slate-100 disabled:opacity-50"
:class="watched ? 'text-amber-500' : 'text-slate-300'"
:title="watched ? '移出自选' : '加入自选'"
:disabled="watchBusy"
@click="toggleWatch"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" :fill="watched ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
</button>
<div class="flex items-baseline gap-2">
<span class="text-base font-semibold text-slate-900">{{ header.name }}</span>
<span class="text-xs text-slate-400">{{ active }}</span>
@@ -142,12 +277,39 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
{{ header.pct > 0 ? '+' : '' }}{{ fmt(header.pct) }}%
</span>
</div>
<!-- 周期切换 -->
<div class="flex rounded-md border border-slate-200 p-0.5 text-[11px]">
<button
v-for="p in PERIODS"
:key="p.key"
type="button"
class="rounded px-2 py-0.5 transition-colors"
:class="timeframe === p.key ? 'bg-blue-600 text-white' : 'text-slate-500 hover:text-slate-900'"
@click="setTimeframe(p.key)"
>{{ p.label }}</button>
</div>
<!-- 复权切换 -->
<div class="flex rounded-md border border-slate-200 p-0.5 text-[11px]">
<button
v-for="a in ADJUSTS"
:key="a.key"
type="button"
class="rounded px-2 py-0.5 transition-colors"
:class="adjust === a.key ? 'bg-blue-600 text-white' : 'text-slate-500 hover:text-slate-900'"
@click="setAdjust(a.key)"
>{{ a.label }}</button>
</div>
<span v-if="data?.source === 'market'" class="rounded bg-amber-50 px-2 py-0.5 text-[11px] text-amber-600">
近段未复权数据
</span>
<span v-else-if="data" class="rounded bg-blue-50 px-2 py-0.5 text-[11px] text-blue-600">前复权</span>
<span
v-else-if="data"
class="rounded px-2 py-0.5 text-[11px]"
:class="data.source === adjust ? 'bg-blue-50 text-blue-600' : 'bg-amber-50 text-amber-600'"
:title="data.source === adjust ? '' : '该股复权因子缺失，暂按此口径显示（可先同步市场数据）'"
>{{ sourceLabel }}</span>
<span class="ml-auto text-xs text-slate-400">↑↓ 切换 · Esc 关闭</span>
<span class="ml-auto text-xs text-slate-400">↑↓ 切换 · Esc 关闭 · 滚轮缩放 · 左滑加载历史</span>
<button type="button" class="btn-ghost !px-2.5 !py-1" title="关闭 (Esc)" @click="emit('close')">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
</button>
@@ -174,7 +336,7 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
<span class="block text-[11px] text-slate-400">{{ it.ts_code }}</span>
</span>
<span class="text-right">
<span class="block text-[13px]">{{ fmt(it.close) }}</span>
<span class="block text-[13px] font-medium" :class="pctClass(it.pct_chg)">{{ fmt(it.close) }}</span>
<span class="block text-[11px]" :class="pctClass(it.pct_chg)">
{{ it.pct_chg == null ? '—' : (it.pct_chg > 0 ? '+' : '') + it.pct_chg.toFixed(2) + '%' }}
</span>
@@ -187,26 +349,35 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
<!-- 中：K线 + 指标面板 -->
<section class="flex min-w-0 flex-1 flex-col">
<!-- 指标开关 / 排序 -->
<!-- 指标开关 / 排序 / MA 配置 -->
<div class="flex shrink-0 flex-wrap items-center gap-1.5 bg-white px-3 py-2">
<span class="text-[11px] text-slate-400">副图：</span>
<button
<div
v-for="s in SUBS"
:key="s.key"
type="button"
draggable="true"
class="cursor-grab rounded-md border px-2.5 py-1 text-xs transition-colors active:cursor-grabbing"
:class="subPanes.includes(s.key)
? 'border-blue-600 bg-blue-600 text-white'
: 'border-slate-200 bg-white text-slate-400 line-through'"
:title="subPanes.includes(s.key) ? '点击隐藏 · 拖动排序' : '点击显示'"
@click="toggleSub(s.key)"
@dragstart="onDragStart($event, s.key)"
@dragover.prevent
@drop="onDrop(s.key)"
class="flex items-center overflow-hidden rounded-md border"
:class="subPanes.includes(s.key) ? 'border-blue-600' : 'border-slate-200'"
>
{{ s.label }}
</button>
<button
type="button"
draggable="true"
class="px-2.5 py-1 text-xs transition-colors"
:class="subPanes.includes(s.key)
? 'bg-blue-600 text-white'
: 'bg-white text-slate-400 line-through'"
:title="subPanes.includes(s.key) ? '点击隐藏 · 拖动排序 · 右侧按钮调高度' : '点击显示'"
@click="toggleSub(s.key)"
@dragstart="onDragStart($event, s.key)"
@dragover.prevent
@drop="onDrop(s.key)"
>
{{ s.label }}
</button>
<template v-if="subPanes.includes(s.key)">
<button type="button" class="border-l px-1 py-1 text-[10px] text-slate-400 hover:bg-slate-100 hover:text-slate-700" title="调高" @click="adjustHeight(s.key, 20)">▲</button>
<button type="button" class="border-l px-1 py-1 text-[10px] text-slate-400 hover:bg-slate-100 hover:text-slate-700" title="调矮" @click="adjustHeight(s.key, -20)">▼</button>
</template>
</div>
<button
type="button"
class="rounded-md border px-2.5 py-1 text-xs transition-colors"
@@ -214,14 +385,50 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
title="主图叠加布林带"
@click="showBoll = !showBoll"
>BOLL</button>
<span class="ml-2 text-[11px] text-slate-400">点击开关副图 · 拖动排序 · 滚轮缩放 · 拖拽平移</span>
<!-- MA 配置 -->
<div class="relative">
<button
type="button"
class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-500 transition-colors hover:text-slate-900"
@click="showMaConfig = !showMaConfig"
>MA 设置</button>
<div
v-if="showMaConfig"
class="absolute left-0 top-8 z-20 w-52 rounded-lg border border-slate-200 bg-white p-2.5 shadow-lg"
>
<div class="mb-2 text-[11px] text-slate-400">勾选主图显示的均线</div>
<div class="grid grid-cols-4 gap-1">
<label
v-for="p in MA_PRESETS"
:key="p"
class="flex cursor-pointer items-center justify-center rounded border px-1 py-1 text-xs"
:class="maPeriods.includes(p) ? 'border-blue-600 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-500'"
>
<input type="checkbox" class="hidden" :checked="maPeriods.includes(p)" @change="toggleMa(p)" />
MA{{ p }}
</label>
</div>
<div class="mt-2 flex items-center gap-1">
<input
v-model="customMa"
type="number" min="1" max="500"
class="ipt w-full !py-1 text-xs"
placeholder="自定义周期"
@keyup.enter="addCustomMa"
/>
<button type="button" class="btn-primary !px-2 !py-1 text-xs" @click="addCustomMa">加</button>
</div>
<div class="mt-1.5 text-[11px] text-slate-400">当前：{{ maPeriods.map((p: number) => 'MA' + p).join(' / ') || '无' }}</div>
</div>
</div>
<span class="ml-auto text-[11px] text-slate-400">点击开关 · 拖动排序 · ▲▼调高度 · 右上工具栏画线</span>
</div>
<!-- 图表 -->
<div class="relative min-h-0 flex-1 bg-white p-1">
<div v-if="loading" class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/80 text-sm text-slate-400">
<svg class="mb-2 h-6 w-6 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>
{{ active }} 首次查看需拉取全量日线…
{{ active }} 加载日线中…
</div>
<div v-else-if="error" class="flex h-full items-center justify-center text-sm text-red-600">{{ error }}</div>
<DetailKLine
@@ -230,7 +437,10 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
:candles="data.candles"
:indicators="data.indicators"
:sub-panes="subPanes"
:ma-periods="maPeriods"
:sub-heights="subHeights"
:show-boll="showBoll"
:timeframe="timeframe"
/>
<div v-else class="flex h-full items-center justify-center text-sm text-slate-400">无数据</div>
</div>
@@ -265,6 +475,9 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
['市净率', fmt(data.info.pb)],
['总市值', fmt(data.info.total_mv) + ' 亿'],
['流通市值', 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">
@@ -273,6 +486,22 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
</template>
</div>
<!-- 股本/分红/股东（数据未接入前留空占位） -->
<div class="mt-4 border-t border-slate-100 pt-3 text-[13px]">
<div class="mb-2 text-xs text-slate-400">股本 / 分红 / 股东</div>
<div class="grid grid-cols-2 gap-y-2">
<template v-for="(row, i) in [
['股东户数', '—'],
['户均持股', '—'],
['分红率', '—'],
['股息率', '—'],
]" :key="i">
<span class="text-slate-400">{{ row[0] }}</span>
<span class="text-right text-slate-300" title="数据源待接入">{{ row[1] }}</span>
</template>
</div>
</div>
<div class="mt-4 border-t border-slate-100 pt-3 text-[13px]">
<div class="mb-2 text-xs text-slate-400">归属</div>
<div class="flex flex-wrap gap-1.5">