看股功能更新
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import {
|
||||
dispose, init, registerIndicator, registerOverlay,
|
||||
type Chart, type KLineData, type Point,
|
||||
type Chart, type KLineData, type OverlayCreate, type OverlayTemplate, type Point,
|
||||
} from 'klinecharts';
|
||||
// 官方画线扩展（preview.klinecharts.com 同款工具集）；rect/circle 沿用 v10 内置版，不注册扩展的重名模板
|
||||
import {
|
||||
@@ -22,6 +22,50 @@ for (const t of [
|
||||
registerOverlay(t);
|
||||
}
|
||||
|
||||
// ---------- 实盘买卖点标记（交割单导入） ----------
|
||||
// v10 无 v9 的 simpleMarker，须注册自定义模板；字母种类/明细经 extendData 传入。
|
||||
// A股惯例（通达信/同花顺同款）：B 买贴 low 下方、S 卖贴 high 上方、T 当日买+卖（做T）贴 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' };
|
||||
const tradeMarkerTemplate: OverlayTemplate<TradeMarkExt> = {
|
||||
name: 'tradeMarker',
|
||||
totalStep: 2,
|
||||
needDefaultPointFigure: false,
|
||||
needDefaultXAxisFigure: false,
|
||||
needDefaultYAxisFigure: false,
|
||||
createPointFigures: ({ overlay, coordinates }) => {
|
||||
const c = coordinates[0];
|
||||
const ext = overlay.extendData;
|
||||
if (!c || !ext) return [];
|
||||
const ly = ext.kind === 'B' ? c.y + 22 : c.y - 22; // 字母中心与 bar 高低点的像素间距（离K线远一点更清爽）
|
||||
return [
|
||||
{
|
||||
type: 'text',
|
||||
attrs: { x: c.x, y: ly, text: ext.kind, align: 'center', baseline: 'middle' },
|
||||
styles: {
|
||||
color: '#FFFFFF', backgroundColor: TRADE_COLORS[ext.kind],
|
||||
size: 12, weight: 'bold', borderRadius: 3,
|
||||
paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1,
|
||||
},
|
||||
ignoreEvent: true,
|
||||
},
|
||||
{ // 透明命中区：把字母徽章的悬停判定兜成 r=9 的圆，指上去更容易。
|
||||
// 必须排在 text 之后：库按数组顺序挂 children、倒序分发 mousemove，
|
||||
// circle 放最后才能最先接管事件——否则首个落点在徽章上时 enter 会被
|
||||
// text 的 ignoreEvent 拦住、tooltip 出不来（circle 全透明，压顶层无视觉影响）
|
||||
type: 'circle',
|
||||
attrs: { x: c.x, y: ly, r: 9 },
|
||||
styles: { style: 'fill', color: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)' },
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
registerOverlay(tradeMarkerTemplate);
|
||||
|
||||
const props = defineProps<{
|
||||
ticker: string;
|
||||
candles: Candle[];
|
||||
@@ -45,6 +89,17 @@ const props = defineProps<{
|
||||
timeframe: string;
|
||||
/** 浮层显示的指标（可选；缺省=目录全开，空数组=仅日期头） */
|
||||
tooltipFields?: TooltipField[];
|
||||
/** 日期跳转锚点（本地零点时间戳）：build 完成后把该日 K 线滚动到可视区中央；null=停在最新 */
|
||||
centerTs?: number | null;
|
||||
/** 实盘买卖点（交割单导入，按日聚合成标记）：B=当日只买 贴 low 下方、S=当日只卖 贴 high 上方、
|
||||
* T=当日买+卖（做T）贴 high 上方；rows 为悬停明细（数量/均价/费用）。
|
||||
* 只画落在已渲染窗口内的（更早的等左滑翻页后自动补画） */
|
||||
tradeMarkers?: { key: string; ts: number; kind: 'B' | 'S' | 'T'; rows: TradeRow[] }[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 日期跳转锚点在本次数据窗口里找不到（早于上市/晚于最后一根）：请父组件回退到最新行情并提示 */
|
||||
(e: 'centerMiss', ts: number): void;
|
||||
}>();
|
||||
|
||||
// A股语义色（黑底高对比）；UP/DOWN 跟随设置中的涨跌配色
|
||||
@@ -246,7 +301,11 @@ function darkStyles() {
|
||||
horizontal: { text: { backgroundColor: '#333A45' } },
|
||||
vertical: { text: { backgroundColor: '#333A45' } },
|
||||
},
|
||||
separator: { color: '#23252B' },
|
||||
separator: {
|
||||
color: '#23252B',
|
||||
// 悬停/拖拽分隔条时的底色（库默认 8% 蓝在纯黑底上不可见，加重为可感知的拖拽提示）
|
||||
activeBackgroundColor: 'rgba(37, 99, 235, 0.30)',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -254,6 +313,23 @@ function darkStyles() {
|
||||
const SUB_DEFAULT_HEIGHT: Record<string, number> = { vol: 64, macd: 100, kdj: 96, rsi: 84 };
|
||||
const subH = (k: string) => Math.max(40, props.subHeights[k] ?? SUB_DEFAULT_HEIGHT[k] ?? 90);
|
||||
|
||||
// ---------- 分隔条拖拽调高（库原生 SeparatorWidget）→ 持久化 ----------
|
||||
// build 时记录 key→paneId；拖动中库会高频触发 onPaneDrag，防抖后读回各副图实际高度写入偏好
|
||||
let paneIdByKey: Record<string, string> = {};
|
||||
let subHTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function persistSubHeights() {
|
||||
if (!chart) return;
|
||||
const next: Record<string, number> = {};
|
||||
for (const key of props.subPanes) {
|
||||
const pid = paneIdByKey[key];
|
||||
const h = pid ? (chart.getPaneOptions(pid) as { height?: number } | null)?.height : undefined;
|
||||
if (typeof h === 'number') next[key] = Math.max(40, Math.round(h));
|
||||
}
|
||||
if (Object.keys(next).length === 0) return;
|
||||
settings.setChartLayout({ subHeights: { ...props.subHeights, ...next } });
|
||||
}
|
||||
|
||||
// ---------- 鼠标跟随信息框（通达信式，浮层贴鼠标，每行一个指标） ----------
|
||||
interface TipRow { key: string; label: string; text: string; tone: '' | 'up' | 'down' }
|
||||
interface HoverInfo {
|
||||
@@ -426,6 +502,113 @@ function pickTool(key: string) {
|
||||
function clearOverlays() {
|
||||
chart?.removeOverlay();
|
||||
activeTool.value = '';
|
||||
// removeOverlay() 无参清的是全部 overlay（含交易点）——交易点不是用户画线，重画回来
|
||||
renderTradeMarkers();
|
||||
}
|
||||
|
||||
// ---------- 日期跳转居中 ----------
|
||||
/** ts（本地零点）落在哪根K上：取该时刻之前（含同日）最近一根的下标，无则 -1；停牌/非交易日自然落到前一根 */
|
||||
function idxAtOrBefore(list: KLineData[], ts: number): number {
|
||||
let lo = 0, hi = list.length - 1, ans = -1;
|
||||
while (lo <= hi) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (list[mid].timestamp <= ts) { ans = mid; lo = mid + 1; } else hi = mid - 1;
|
||||
}
|
||||
return ans;
|
||||
}
|
||||
|
||||
/** 把已渲染的第 i 根K线滚动到可视区中央（scrollToDataIndex 定位到右缘，补半个可视窗口即居中） */
|
||||
function centerDataIndex(i: number) {
|
||||
if (!chart) return;
|
||||
const v = chart.getVisibleRange();
|
||||
const vis = Math.max(2, Math.round(v.to - v.from) - 1); // from/to 含半个bar余量
|
||||
chart.scrollToDataIndex(i + Math.floor(vis / 2) - 1, 350);
|
||||
}
|
||||
|
||||
/** 对外：把某天滚动到可视区中央；目标不在当前已渲染窗口内时返回 false（调用方走重拉窗口）。
|
||||
* ts 晚于最后一根 10 天以上（未来日期/超出现有数据）同样算失败，避免 floor 搜索落到
|
||||
* 最后一根、锚点却指向一个不存在交易的日期；10 天容忍周末与春节黄金周这类停牌间隙。 */
|
||||
const FUTURE_TOL_MS = 10 * 86400000;
|
||||
function centerOn(ts: number): boolean {
|
||||
if (!chart) return false;
|
||||
const list = chart.getDataList();
|
||||
if (list.length === 0) return false;
|
||||
const i = idxAtOrBefore(list, ts);
|
||||
if (i < 0) return false;
|
||||
if (ts > list[list.length - 1].timestamp + FUTURE_TOL_MS) return false;
|
||||
centerDataIndex(i);
|
||||
return true;
|
||||
}
|
||||
defineExpose({ centerOn });
|
||||
|
||||
// ---------- 实盘买卖点标记渲染 ----------
|
||||
const TRADE_GROUP = 'trades';
|
||||
|
||||
/** 交易点允许吸附到「晚于最后一根K时间戳」的窗口，按周期放大：周/月/年K的 bar 时间戳
|
||||
* 是周期首日（周一/1日/1月1日），当前周期内的成交（如月中）仍应贴到最后一根上。
|
||||
* 日K严格为 0：行情未同步到成交日时宁可先不画（数据同步后重建图表自动补上），
|
||||
* 也不能把周一的成交错标到周五的K线上。 */
|
||||
const TRADE_AHEAD_MS: Record<string, number> = {
|
||||
'1d': 0,
|
||||
'1w': 6 * 86400000,
|
||||
'1M': 31 * 86400000,
|
||||
'1y': 366 * 86400000,
|
||||
};
|
||||
|
||||
/** 按 groupId 整组重建买卖点标记（先删后建，幂等）。交易日期按时间戳吸附到所在 bar：
|
||||
* B 贴 bar.low 下方、S/T 贴 bar.high 上方；坐标随复权切换自动重算（value 取自当前数据）。
|
||||
* 早于已渲染窗口的交易先跳过——左滑翻页 serveOlder 吐出新数据后会重跑本函数补画。
|
||||
* 列表为空（关闭显示/清空成交/切到无成交股票）也必须清组，否则旧标记残留。 */
|
||||
function renderTradeMarkers() {
|
||||
if (!chart) return;
|
||||
tradeTip.value = null; // 组重建期间字母已换位，旧明细浮层不能留在原地
|
||||
chart.removeOverlay({ groupId: TRADE_GROUP });
|
||||
if (!props.tradeMarkers?.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) {
|
||||
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,
|
||||
name: 'tradeMarker',
|
||||
points: [{ timestamp: bar.timestamp, value: m.kind === 'B' ? bar.low : bar.high }],
|
||||
extendData: { kind: m.kind, rows: m.rows },
|
||||
onMouseEnter: (ev) => {
|
||||
// pageX/pageY 是文档绝对坐标（x/y 是相对各 pane 画布的，副图 pane 会带偏移），而
|
||||
// getBoundingClientRect 是视口坐标——须再减 window.scrollX/Y 对齐基准：浮层是从滚过的
|
||||
// 列表页打开的（body 锁滚仍保留偏移），漏减会把 tip 整体顶出可视区、悬停像失灵
|
||||
const rect = container.value?.getBoundingClientRect();
|
||||
const px = (ev.pageX ?? 0) - (rect?.left ?? 0) - window.scrollX;
|
||||
const py = (ev.pageY ?? 0) - (rect?.top ?? 0) - window.scrollY;
|
||||
tradeTip.value = { ...placeTradeTip(px, py, m.rows.length), kind: m.kind, date: m.key, rows: m.rows };
|
||||
},
|
||||
onMouseLeave: () => { tradeTip.value = null; },
|
||||
// v10 右键命中 figure 会默认 removeOverlay（lock 只拦左键按下），标记被悄悄删掉——显式吞掉
|
||||
onRightClick: (ev) => { ev.preventDefault?.(); },
|
||||
lock: true,
|
||||
});
|
||||
}
|
||||
if (creates.length) chart.createOverlay(creates);
|
||||
}
|
||||
|
||||
// ---------- 交易点悬停明细（悬停 B/S/T 字母才显示，离开/滚动即隐） ----------
|
||||
interface TradeTip { x: number; y: number; kind: 'B' | 'S' | 'T'; date: string; rows: TradeRow[] }
|
||||
const tradeTip = ref<TradeTip | null>(null);
|
||||
|
||||
/** 贴鼠标定位并在右缘/下缘自动翻转（与十字线浮层 placeHover 同款策略，宽度略大） */
|
||||
function placeTradeTip(px: number, py: number, rowCount: number): { x: number; y: number } {
|
||||
const w = container.value?.clientWidth ?? 800;
|
||||
const h = container.value?.clientHeight ?? 500;
|
||||
const bw = 168, bh = 36 + rowCount * 17, gap = 12;
|
||||
const x = px + gap + bw > w - 4 ? Math.max(4, px - gap - bw) : px + gap;
|
||||
const y = py + gap + bh > h - 4 ? Math.max(4, py - gap - bh) : py + gap;
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
function build() {
|
||||
@@ -464,12 +647,20 @@ function build() {
|
||||
const start = allData.length - served - take;
|
||||
served += take;
|
||||
callback(allData.slice(start, start + take), { forward: canBack(), backward: false });
|
||||
renderTradeMarkers(); // 窗口左扩后补画此前跳过的更早交易点
|
||||
};
|
||||
const answerEmpty = () => callback([], { forward: false, backward: false });
|
||||
if (type === 'init') {
|
||||
// 首屏：最近 INIT_BARS 根；更早历史由左滑触发 'forward' 翻页
|
||||
served = Math.min(INIT_BARS, allData.length);
|
||||
callback(allData.slice(allData.length - served), { forward: canBack(), backward: false });
|
||||
// 首屏：最近 INIT_BARS 根；更早历史由左滑触发 'forward' 翻页。
|
||||
// 有跳转锚点时把 serve 左扩到包含锚点（锚点落在窗口前 1/2 处），仍保持
|
||||
// [n-served, n) 尾连续不变式——这样 serveOlder 的翻页切片不用变；
|
||||
// BOLL/副图等同数据重建时锚点就不会掉出首屏窗口。
|
||||
const n = allData.length;
|
||||
const anchorIdx = props.centerTs != null ? idxAtOrBefore(allData, props.centerTs) : -1;
|
||||
served = anchorIdx >= 0
|
||||
? Math.min(n, Math.max(INIT_BARS, n - anchorIdx + (INIT_BARS >> 1)))
|
||||
: Math.min(INIT_BARS, n);
|
||||
callback(allData.slice(n - served), { forward: canBack(), backward: false });
|
||||
maybePrefetch(myEpoch);
|
||||
} else if (type === 'forward') {
|
||||
// 左缘：优先吐本地未吐出的（首屏余量或已预取页），本地耗尽再向服务端翻一页更早历史
|
||||
@@ -505,38 +696,62 @@ function build() {
|
||||
ch.createIndicator({ name: ensureMaIndicator(props.maPeriods), paneId: 'candle_pane' });
|
||||
if (props.showBoll) ch.createIndicator({ name: 'pv-boll', paneId: 'candle_pane' });
|
||||
|
||||
// 副图按用户顺序创建，并设置用户高度；主图吃剩余高度
|
||||
// 副图按用户顺序创建，并设置用户高度；主图吃剩余高度。
|
||||
// minHeight 交给库在分隔条拖拽时强制执行（与 subH 的 40px 下限一致）
|
||||
const subTotal = props.subPanes.reduce((s, k) => s + subH(k), 0);
|
||||
const total = container.value.clientHeight || 560;
|
||||
ch.setPaneOptions({ id: 'candle_pane', height: Math.max(200, total - subTotal - 24) });
|
||||
ch.setPaneOptions({ id: 'candle_pane', height: Math.max(200, total - subTotal - 24), minHeight: 200 });
|
||||
paneIdByKey = {};
|
||||
for (const key of props.subPanes) {
|
||||
const name = key === 'vol' ? 'VOL' : `pv-${key}`;
|
||||
ch.createIndicator(name);
|
||||
const paneId = ch.getIndicators().find((i) => i.name === name)?.paneId;
|
||||
if (paneId) ch.setPaneOptions({ id: paneId, height: subH(key) });
|
||||
if (paneId) {
|
||||
paneIdByKey[key] = paneId;
|
||||
ch.setPaneOptions({ id: paneId, height: subH(key), minHeight: 40 });
|
||||
}
|
||||
}
|
||||
|
||||
bindCrosshair(ch);
|
||||
// 分隔条拖拽调高：拖动结束（250ms 无新事件）后把各副图实际高度持久化；
|
||||
// 期间图表已重建（epoch 变化）则丢弃，新图表按存档布局
|
||||
ch.subscribeAction('onPaneDrag', () => {
|
||||
if (myEpoch !== epoch) return;
|
||||
if (subHTimer) clearTimeout(subHTimer);
|
||||
subHTimer = setTimeout(() => { subHTimer = null; persistSubHeights(); }, 250);
|
||||
});
|
||||
// 缓冲预取：可视范围接近已加载左缘（<200 根）时提前翻下一页
|
||||
ch.subscribeAction('onVisibleRangeChange', (payload) => {
|
||||
if (myEpoch !== epoch) return;
|
||||
tradeTip.value = null; // 滚动后字母随 bar 移位，悬停明细立即失效
|
||||
const from = (payload as { data?: { from?: unknown } }).data?.from;
|
||||
if (typeof from === 'number' && from < 200) maybePrefetch(myEpoch);
|
||||
});
|
||||
ch.setOffsetRightDistance(28);
|
||||
ch.scrollToRealTime();
|
||||
// 日期跳转：build 尾部的 scrollToRealTime 会把视口重置到最新一根，居中必须放在它之后
|
||||
//（init 数据在 setPeriod 时已同步落入图表，这里可直接定位）。
|
||||
// 居中失败（锚点早于上市首日/晚于最后一根）必须上报：否则锚点 chip 与统计口径
|
||||
// 仍停留在「已定位」状态，视口却悄悄回到最新行情。
|
||||
if (props.centerTs != null && !centerOn(props.centerTs)) emit('centerMiss', props.centerTs);
|
||||
// init 数据在 setPeriod 时已同步落入图表，可直接画首屏窗口内的交易点
|
||||
renderTradeMarkers();
|
||||
}
|
||||
|
||||
function teardown() {
|
||||
if (subHTimer) { clearTimeout(subHTimer); subHTimer = null; }
|
||||
if (container.value) dispose(container.value);
|
||||
chart = null;
|
||||
hover.value = null;
|
||||
tradeTip.value = null;
|
||||
activeTool.value = '';
|
||||
}
|
||||
|
||||
onMounted(build);
|
||||
onBeforeUnmount(teardown);
|
||||
watch(() => [props.candles, props.indicators, props.subPanes, props.showBoll, props.maPeriods, props.timeframe], () => { teardown(); build(); }, { deep: true });
|
||||
// 买卖点数据变化（导入/清空/开关显示）：只重画标记，不重建图表（保留滚动位置与用户画线）
|
||||
watch(() => props.tradeMarkers, renderTradeMarkers, { deep: true });
|
||||
// 涨跌配色切换：重建图表以应用新颜色
|
||||
watch(() => settings.priceTone, () => { teardown(); build(); });
|
||||
// 副图高度变化：仅调 pane 高度，不重建（保留滚动/画线状态）
|
||||
@@ -544,11 +759,11 @@ watch(() => props.subHeights, () => {
|
||||
if (!chart) return;
|
||||
const subTotal = props.subPanes.reduce((s, k) => s + subH(k), 0);
|
||||
const total = container.value?.clientHeight || 560;
|
||||
chart.setPaneOptions({ id: 'candle_pane', height: Math.max(200, total - subTotal - 24) });
|
||||
chart.setPaneOptions({ id: 'candle_pane', height: Math.max(200, total - subTotal - 24), minHeight: 200 });
|
||||
for (const key of props.subPanes) {
|
||||
const name = key === 'vol' ? 'VOL' : `pv-${key}`;
|
||||
const paneId = chart.getIndicators().find((i) => i.name === name)?.paneId;
|
||||
if (paneId) chart.setPaneOptions({ id: paneId, height: subH(key) });
|
||||
if (paneId) chart.setPaneOptions({ id: paneId, height: subH(key), minHeight: 40 });
|
||||
}
|
||||
}, { deep: true });
|
||||
</script>
|
||||
@@ -556,12 +771,13 @@ watch(() => props.subHeights, () => {
|
||||
<template>
|
||||
<!-- mousemove 用 capture：klinecharts 在内部容器上以冒泡阶段监听并同步触发
|
||||
onCrosshairChange→placeHover，capture 先于它更新 mx/my，避免用到上一次的坐标 -->
|
||||
<div class="relative h-full w-full" @mousemove.capture="onMove" @mouseleave="hover = null">
|
||||
<div class="relative h-full w-full" @mousemove.capture="onMove" @mouseleave="hover = null; tradeTip = null">
|
||||
<div ref="container" class="h-full w-full"></div>
|
||||
|
||||
<!-- 鼠标跟随信息框（贴鼠标，右/下缘自动翻转；每行一个指标，内容由浮层设置决定） -->
|
||||
<!-- 鼠标跟随信息框（贴鼠标，右/下缘自动翻转；每行一个指标，内容由浮层设置决定）。
|
||||
悬停交易字母时让位给明细浮层，两框几乎同点位叠加会呈现双层边框的重影 -->
|
||||
<div
|
||||
v-if="hover"
|
||||
v-if="hover && !tradeTip"
|
||||
class="pointer-events-none absolute z-10 w-40 rounded border border-[#33353D] bg-black/90 px-2.5 py-1.5 font-mono text-xs leading-4 text-[#E8EAED] shadow-lg"
|
||||
:style="hoverStyle"
|
||||
>
|
||||
@@ -578,8 +794,33 @@ watch(() => props.subHeights, () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 画图画线工具栏（常用一行 + 「更多」分组面板） -->
|
||||
<div class="absolute right-2 top-2 z-10 rounded-md border border-[#26272E] bg-[#101014] shadow-sm">
|
||||
<!-- 交易点悬停明细：贴鼠标、右/下缘自动翻转；日期 + 字母 + 当日买卖数量/均价/费用 -->
|
||||
<div
|
||||
v-if="tradeTip"
|
||||
class="pointer-events-none absolute z-20 w-44 rounded border border-[#33353D] bg-black/90 px-2.5 py-1.5 font-mono text-xs leading-4 text-[#E8EAED] shadow-lg"
|
||||
:style="{ left: `${tradeTip.x}px`, top: `${tradeTip.y}px` }"
|
||||
>
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-[#9BA3AE]">{{ tradeTip.date }}</span>
|
||||
<span class="font-bold" :style="{ color: TRADE_COLORS[tradeTip.kind] }">{{ tradeTip.kind }}</span>
|
||||
</div>
|
||||
<div class="mt-1 border-t border-[#33353D]/60 pt-1">
|
||||
<div v-for="(r, i) in tradeTip.rows" :key="i" class="flex items-baseline justify-between">
|
||||
<span class="text-[#A8AFB8]">{{ r.label }}</span>
|
||||
<span
|
||||
:style="r.tone ? { color: r.tone === 'buy' ? TRADE_COLORS.B : TRADE_COLORS.S } : undefined"
|
||||
:class="r.tone ? '' : 'text-[#E8EAED]'"
|
||||
>{{ r.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 画图画线工具栏（常用一行 + 「更多」分组面板）。
|
||||
移入工具栏时 canvas 收不到后续 mousemove、onMouseLeave 不会触发，须在此清掉交易明细浮层 -->
|
||||
<div
|
||||
class="absolute right-2 top-2 z-10 rounded-md border border-[#26272E] bg-[#101014] shadow-sm"
|
||||
@mouseenter="tradeTip = null"
|
||||
>
|
||||
<div class="flex items-center gap-0.5 px-1 py-0.5">
|
||||
<button
|
||||
v-for="t in COMMON_TOOLS"
|
||||
|
||||
110
frontend/src/components/SettingsModal.vue
Normal file
110
frontend/src/components/SettingsModal.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted } from 'vue';
|
||||
import { useSettingsStore, type PriceAdjust, type PriceTone } from '@/stores/settings';
|
||||
|
||||
const emit = defineEmits<{ (e: 'close'): void }>();
|
||||
const settings = useSettingsStore();
|
||||
|
||||
// ---------- 分类：行情配色 ----------
|
||||
const TONES: { key: PriceTone; label: string; desc: string; up: string; down: string }[] = [
|
||||
{ key: 'red-up', label: '红涨绿跌', desc: 'A 股风格', up: '#FE354B', down: '#1EBE72' },
|
||||
{ key: 'green-up', label: '绿涨红跌', desc: '美股风格', up: '#1EBE72', down: '#FE354B' },
|
||||
];
|
||||
|
||||
// ---------- 分类：K线复权 ----------
|
||||
const ADJUSTS: { key: PriceAdjust; label: string; desc: string }[] = [
|
||||
{ key: 'bfq', label: '不复权', desc: '原始价格，含除权跳空' },
|
||||
{ key: 'qfq', label: '前复权', desc: '以最新价为基准，看趋势最常用' },
|
||||
{ key: 'hfq', label: '后复权', desc: '以上市价为基准，看累计涨幅' },
|
||||
];
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') emit('close');
|
||||
}
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown));
|
||||
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4 backdrop-blur-sm" @click.self="emit('close')">
|
||||
<div class="w-full max-w-md rounded-lg border border-[#26272E] bg-[#101014] shadow-xl shadow-black/60" role="dialog" aria-label="设置">
|
||||
<!-- 头部 -->
|
||||
<div class="flex items-center justify-between border-b border-[#1E2026] px-5 py-3.5">
|
||||
<h2 class="text-sm font-semibold text-[#E8EAED]">设置</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded p-1 text-[#9BA3AE] transition-colors hover:bg-[#1E2026] hover:text-[#E8EAED]"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<!-- 分类一：行情配色 -->
|
||||
<div class="px-5 py-4">
|
||||
<div class="text-[13px] font-medium tracking-wide text-[#A8AFB8]">行情配色</div>
|
||||
<p class="mt-1 text-[13px] text-[#9BA3AE]">设置全站涨跌颜色，立即生效并自动记住。</p>
|
||||
|
||||
<div class="mt-3 grid grid-cols-2 gap-3">
|
||||
<button
|
||||
v-for="t in TONES"
|
||||
:key="t.key"
|
||||
type="button"
|
||||
class="rounded-lg border p-3 text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
|
||||
:class="settings.priceTone === t.key
|
||||
? 'border-blue-500 bg-blue-500/15 ring-1 ring-blue-500'
|
||||
: 'border-[#26272E] hover:border-[#3A3D46]'"
|
||||
@click="settings.setPriceTone(t.key)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-[#E8EAED]">{{ t.label }}</span>
|
||||
<span
|
||||
v-if="settings.priceTone === t.key"
|
||||
class="grid h-4 w-4 place-items-center rounded-full bg-blue-600 text-white"
|
||||
>
|
||||
<svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[13px] text-[#9BA3AE]">{{ t.desc }}</div>
|
||||
<!-- 效果预览 -->
|
||||
<div class="mt-2.5 flex items-baseline gap-3 font-mono text-sm">
|
||||
<span :style="{ color: t.up }">+2.50%</span>
|
||||
<span :style="{ color: t.down }">-1.30%</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类二：K线复权 -->
|
||||
<div class="border-t border-[#1E2026] px-5 py-4">
|
||||
<div class="text-[13px] font-medium tracking-wide text-[#A8AFB8]">K线复权</div>
|
||||
<p class="mt-1 text-[13px] text-[#9BA3AE]">个股详情 K 线的默认口径；浮层内也可随时切换。</p>
|
||||
|
||||
<div class="mt-3 grid grid-cols-3 gap-3">
|
||||
<button
|
||||
v-for="a in ADJUSTS"
|
||||
:key="a.key"
|
||||
type="button"
|
||||
class="rounded-lg border p-3 text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
|
||||
:class="settings.priceAdjust === a.key
|
||||
? 'border-blue-500 bg-blue-500/15 ring-1 ring-blue-500'
|
||||
: 'border-[#26272E] hover:border-[#3A3D46]'"
|
||||
@click="settings.setPriceAdjust(a.key)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-[#E8EAED]">{{ a.label }}</span>
|
||||
<span
|
||||
v-if="settings.priceAdjust === a.key"
|
||||
class="grid h-4 w-4 place-items-center rounded-full bg-blue-600 text-white"
|
||||
>
|
||||
<svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[13px] text-[#9BA3AE]">{{ a.desc }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { addWatchlist, getStockPreview, getWatchlist as getWatchlistApi, removeWatchlist } from '@/api/client';
|
||||
import type { ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, Timeframe, TooltipField } from '@/api/types';
|
||||
import {
|
||||
addWatchlist, clearTrades, getStockPreview, getTrades, getWatchlist as getWatchlistApi,
|
||||
importTrades, removeWatchlist,
|
||||
} from '@/api/client';
|
||||
import type {
|
||||
ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, Timeframe, TooltipField,
|
||||
TradesImportResponse, UserTrade,
|
||||
} from '@/api/types';
|
||||
import { useSettingsStore, DEFAULT_TOOLTIP_FIELDS, TOOLTIP_FIELDS, type PriceAdjust } from '@/stores/settings';
|
||||
import DetailKLine from './DetailKLine.vue';
|
||||
|
||||
@@ -9,7 +15,12 @@ const props = defineProps<{
|
||||
items: ScreenerItemOut[];
|
||||
initial: string; // ts_code
|
||||
}>();
|
||||
const emit = defineEmits<{ (e: 'close'): void; (e: 'watched-change'): void }>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void;
|
||||
(e: 'watched-change'): void;
|
||||
/** 浮层内切股（键盘 ↑/↓、侧栏点击）时上报当前 ts_code，父组件据此同步路由 */
|
||||
(e: 'change', code: string): void;
|
||||
}>();
|
||||
const settings = useSettingsStore();
|
||||
|
||||
// ---------- 状态 ----------
|
||||
@@ -43,11 +54,6 @@ function setTimeframe(tf: Timeframe) {
|
||||
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' },
|
||||
@@ -68,12 +74,7 @@ function toggleSub(key: string) {
|
||||
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 } });
|
||||
}
|
||||
// 副图高度改为图内分隔条直接拖拽（DetailKLine 订阅 onPaneDrag 持久化），此处不再提供按钮
|
||||
|
||||
// 副图拖拽排序
|
||||
let dragKey: string | null = null;
|
||||
@@ -120,8 +121,57 @@ function toggleTipField(key: TooltipField) {
|
||||
tooltipFields: cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key],
|
||||
});
|
||||
}
|
||||
function resetTipFields() {
|
||||
settings.setChartLayout({ tooltipFields: [...DEFAULT_TOOLTIP_FIELDS] });
|
||||
|
||||
// ---------- 日期跳转（输入 YYYYMMDD，把该日K线定位到可视区中央） ----------
|
||||
const JUMP_END_DAYS = 170; // 锚点 + 170 自然日 ≈ 120 个交易日：锚点恰落在 240 根首吐窗口正中
|
||||
const jumpInput = ref('');
|
||||
const jumpErr = ref('');
|
||||
const jumpTs = ref<number | null>(null); // 当前锚点（本地零点时间戳）；null=最新行情模式
|
||||
const klineRef = ref<InstanceType<typeof DetailKLine> | null>(null);
|
||||
|
||||
/** '20200218' → 本地零点时间戳（与 Candle.ts 的反序列化口径一致，精确命中当日K线）；非法返回 null */
|
||||
function parseJumpDate(raw: string): number | null {
|
||||
if (!/^\d{8}$/.test(raw)) return null;
|
||||
const y = +raw.slice(0, 4), m = +raw.slice(4, 6), d = +raw.slice(6, 8);
|
||||
const dt = new Date(y, m - 1, d);
|
||||
if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== d) return null;
|
||||
if (y < 1990 || y > 2099) return null;
|
||||
return dt.getTime();
|
||||
}
|
||||
/** 时间戳 → 'YYYY-MM-DD'（后端 end 参数格式） */
|
||||
function fmtDashDate(ms: number): string {
|
||||
const dt = new Date(ms);
|
||||
return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
function onJumpInput() {
|
||||
jumpInput.value = jumpInput.value.replace(/\D/g, '').slice(0, 8);
|
||||
jumpErr.value = '';
|
||||
}
|
||||
function jumpToDate() {
|
||||
const ts = parseJumpDate(jumpInput.value.trim());
|
||||
if (ts == null) { jumpErr.value = '日期格式：20200218'; return; }
|
||||
jumpErr.value = '';
|
||||
// 非日K周期：先切回日K再跳（watcher 重拉时 load 会带上刚设好的锚点）
|
||||
if (timeframe.value !== '1d') { jumpTs.value = ts; setTimeframe('1d'); return; }
|
||||
// 快路径：目标日已在当前渲染窗口内 → 纯滚动居中，不打网络
|
||||
if (klineRef.value?.centerOn(ts)) { jumpTs.value = ts; return; }
|
||||
// 慢路径：目标日不在窗口内 → 以锚点为中点重拉一窗（end 不含当日，故右缘=锚点+170 自然日）
|
||||
jumpTs.value = ts;
|
||||
void load(active.value);
|
||||
}
|
||||
/** 清除锚点回到最新行情（锚定窗口的右缘停在锚点日之后，需要这个出口） */
|
||||
function clearJump() {
|
||||
jumpTs.value = null;
|
||||
jumpErr.value = '';
|
||||
void load(active.value);
|
||||
}
|
||||
/** DetailKLine 上报：锚点在拉回的数据里也找不到（早于上市首日，或晚于最后一根的未来日期）。
|
||||
* 统一走与「空数据」相同的回退：清锚点、提示、回最新行情，避免 chip/统计停留在假锚定状态。 */
|
||||
function onCenterMiss() {
|
||||
if (jumpTs.value == null) return;
|
||||
jumpTs.value = null;
|
||||
jumpErr.value = '该日期无K线（早于上市或晚于最新数据），已回到最新行情';
|
||||
void load(active.value);
|
||||
}
|
||||
|
||||
// ---------- 自选股（星标） ----------
|
||||
@@ -149,6 +199,110 @@ async function toggleWatch() {
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 实盘交易点（交割单导入） ----------
|
||||
const trades = ref<UserTrade[]>([]);
|
||||
const showTrades = ref(true);
|
||||
const showTradeImport = ref(false);
|
||||
const importing = ref(false);
|
||||
const importResult = ref<TradesImportResponse | null>(null);
|
||||
const importErr = ref<string | null>(null);
|
||||
|
||||
/** 拉当前股的实盘成交（失败静默：未登录/网络异常都不影响看图）。
|
||||
* 与 load() 同款的请求序号：切股瞬间并发拉 K 线与成交，乱序返回的旧股
|
||||
* 成交绝不能回填——否则旧股买卖点会画到新股K线上。 */
|
||||
let tradesToken = 0;
|
||||
async function loadTrades(code: string) {
|
||||
const token = ++tradesToken;
|
||||
try {
|
||||
const list = await getTrades(code);
|
||||
if (token === tradesToken) trades.value = list;
|
||||
} catch {
|
||||
if (token === tradesToken) trades.value = [];
|
||||
}
|
||||
}
|
||||
watch(active, (code) => {
|
||||
trades.value = []; // 同步先清：新图挂载时（成交未返回）不能带着旧股标记
|
||||
loadTrades(code);
|
||||
}, { immediate: true });
|
||||
|
||||
const fmtQty = (q: number) =>
|
||||
q >= 10000 ? `${(q / 10000).toFixed(1).replace(/\.0$/, '')}万` : String(Math.round(q));
|
||||
const fmtPrice = (p: number) => p.toFixed(3).replace(/0+$/, '').replace(/\.$/, '');
|
||||
|
||||
/** 按日聚合成标记：图上只显示 B/S/T 单个字母（B=当日只买 贴 low 下方、S=当日只卖 贴 high 上方、
|
||||
* T=当日买+卖「做T」贴 high 上方）；数量/均价/费用收进 rows，悬停字母时才显示。
|
||||
* 均价是券商原始成交价的股数加权均值（不复权口径，仅作参考——标记位置贴 bar 高低点，
|
||||
* 已随复权切换自动对齐）。 */
|
||||
const tradeMarkers = computed(() => {
|
||||
if (!showTrades.value) return [];
|
||||
const byDay = new Map<string, { ts: number; list: UserTrade[] }>();
|
||||
for (const t of trades.value) {
|
||||
const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(t.trade_date);
|
||||
if (!m) continue;
|
||||
let d = byDay.get(m[0]);
|
||||
if (!d) byDay.set(m[0], d = { ts: new Date(+m[1], +m[2] - 1, +m[3]).getTime(), list: [] });
|
||||
d.list.push(t);
|
||||
}
|
||||
const sumBy = (list: UserTrade[], f: (t: UserTrade) => number) => list.reduce((s, t) => s + f(t), 0);
|
||||
const dirRow = (label: string, list: UserTrade[], tone: 'buy' | 'sell') => {
|
||||
const qty = sumBy(list, (t) => t.qty);
|
||||
const wsum = sumBy(list, (t) => (t.price ?? 0) * t.qty);
|
||||
const wqty = sumBy(list, (t) => (t.price != null ? t.qty : 0));
|
||||
const avg = wqty > 0 ? wsum / wqty : null;
|
||||
return { label, text: `${fmtQty(qty)}股${avg != null ? ` @ ${fmtPrice(avg)}` : ''}`, tone };
|
||||
};
|
||||
return [...byDay.entries()].map(([date, d]) => {
|
||||
const buys = d.list.filter((t) => t.direction === 'buy');
|
||||
const sells = d.list.filter((t) => t.direction === 'sell');
|
||||
const kind: 'B' | 'S' | 'T' = buys.length && sells.length ? 'T' : buys.length ? 'B' : 'S';
|
||||
const rows: { label: string; text: string; tone: 'buy' | 'sell' | '' }[] = [
|
||||
...(buys.length ? [dirRow('买入', buys, 'buy')] : []),
|
||||
...(sells.length ? [dirRow('卖出', sells, 'sell')] : []),
|
||||
];
|
||||
const fee = sumBy(d.list, (t) => t.fee ?? 0);
|
||||
if (fee > 0) rows.push({ label: '费用', text: fmtPrice(fee), tone: '' });
|
||||
return { key: date, ts: d.ts, kind, rows };
|
||||
}).sort((a, b) => a.ts - b.ts);
|
||||
});
|
||||
|
||||
async function onTradeFile(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
importing.value = true;
|
||||
importResult.value = null;
|
||||
importErr.value = null;
|
||||
try {
|
||||
importResult.value = await importTrades(file);
|
||||
await loadTrades(active.value);
|
||||
} catch (err) {
|
||||
importErr.value = err instanceof Error ? err.message : '导入失败';
|
||||
} finally {
|
||||
importing.value = false;
|
||||
(e.target as HTMLInputElement).value = ''; // 允许重选同一文件
|
||||
}
|
||||
}
|
||||
|
||||
async function onClearTrades() {
|
||||
if (!window.confirm('确定清空全部股票的成交记录？此操作不可恢复（需重新导入交割单）。')) return;
|
||||
try {
|
||||
await clearTrades();
|
||||
trades.value = [];
|
||||
importResult.value = null;
|
||||
importErr.value = null;
|
||||
} catch (err) {
|
||||
importErr.value = err instanceof Error ? err.message : '清空失败';
|
||||
}
|
||||
}
|
||||
|
||||
/** 打开导入弹窗：清掉上一次的结果/错误，避免误读为本次操作的结果 */
|
||||
function openTradeImport() {
|
||||
importResult.value = null;
|
||||
importErr.value = null;
|
||||
showMaConfig.value = false;
|
||||
showTipConfig.value = false;
|
||||
showTradeImport.value = true;
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
const q = filter.value.trim().toLowerCase();
|
||||
if (!q) return props.items;
|
||||
@@ -176,17 +330,28 @@ const header = computed(() => {
|
||||
let fetchToken = 0;
|
||||
async function load(code: string) {
|
||||
const token = ++fetchToken;
|
||||
const anchor = jumpTs.value; // 跳转锚点：之后的所有重拉（复权/周期/MA）都围绕它取窗，视口位置不漂
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
data.value = null;
|
||||
try {
|
||||
const res = await getStockPreview(code, {
|
||||
limit: 500,
|
||||
// 锚定取数：窗口右缘=锚点+170 自然日（后端 end 不含当日），锚点恰好落在 240 根首吐窗口正中
|
||||
end: anchor != null ? fmtDashDate(anchor + JUMP_END_DAYS * 86400000) : undefined,
|
||||
adjust: adjust.value,
|
||||
timeframe: timeframe.value,
|
||||
mas: maPeriods.value,
|
||||
});
|
||||
if (token === fetchToken) data.value = res;
|
||||
if (token !== fetchToken) return;
|
||||
if (anchor != null && res.candles.length === 0) {
|
||||
// 跳转日期早于上市等：锚定窗口取不到任何K线 → 退回最新行情
|
||||
jumpTs.value = null;
|
||||
jumpErr.value = '该日期无数据（可能早于上市），已回到最新行情';
|
||||
void load(code);
|
||||
return;
|
||||
}
|
||||
data.value = res;
|
||||
} catch (e) {
|
||||
if (token === fetchToken) error.value = e instanceof Error ? e.message : '加载失败';
|
||||
} finally {
|
||||
@@ -211,7 +376,13 @@ async function loadOlder(end: string, count: number) {
|
||||
return null; // 网络失败：图表停止向前翻页（不中断已渲染内容）
|
||||
}
|
||||
}
|
||||
watch(active, (code) => load(code), { immediate: true });
|
||||
watch(active, (code) => {
|
||||
// 切股清空日期锚点：新股票以最新行情打开
|
||||
jumpTs.value = null;
|
||||
jumpErr.value = '';
|
||||
load(code);
|
||||
emit('change', code); // 父组件把当前股写进路由，刷新后可还原
|
||||
}, { immediate: true });
|
||||
watch(adjust, () => load(active.value));
|
||||
watch(timeframe, () => load(active.value));
|
||||
// MA 周期变化也要重拉（后端按 mas 计算指标序列）
|
||||
@@ -236,10 +407,14 @@ function onKeydown(e: KeyboardEvent) {
|
||||
if (e.isComposing) return;
|
||||
const t = e.target as HTMLElement | null;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
|
||||
// 弹层打开时接管按键：Esc 关弹层，其余（含 ↑/↓）不再切换底层个股
|
||||
const modalOpen = showTradeImport.value || showMaConfig.value || showTipConfig.value;
|
||||
if (e.key === 'Escape') {
|
||||
if (showMaConfig.value || showTipConfig.value) { showMaConfig.value = false; showTipConfig.value = false; }
|
||||
if (showTradeImport.value) showTradeImport.value = false;
|
||||
else if (showMaConfig.value || showTipConfig.value) { showMaConfig.value = false; showTipConfig.value = false; }
|
||||
else emit('close');
|
||||
}
|
||||
else if (modalOpen) return;
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); moveActive(-1); }
|
||||
else if (e.key === 'ArrowDown') { e.preventDefault(); moveActive(1); }
|
||||
}
|
||||
@@ -254,7 +429,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
// ---------- 右侧信息栏增强：52周高低 / 年初至今（从日线序列算，无数据留空） ----------
|
||||
const stats = computed(() => {
|
||||
const bars = timeframe.value === '1d' ? data.value?.candles : null;
|
||||
// 日期跳转后窗口是历史段，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 };
|
||||
const last = bars[bars.length - 1];
|
||||
const lastTs = new Date(last.ts);
|
||||
@@ -333,18 +509,8 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
@click="setAdjust(a.key)"
|
||||
>{{ a.label }}</button>
|
||||
</div>
|
||||
<span v-if="data?.source === 'market'" class="rounded bg-amber-500/15 px-2 py-0.5 text-xs text-amber-300">
|
||||
近段未复权数据
|
||||
</span>
|
||||
<span
|
||||
v-else-if="data"
|
||||
class="rounded px-2 py-0.5 text-xs"
|
||||
:class="data.source === adjust ? 'bg-blue-500/15 text-blue-300' : 'bg-amber-500/15 text-amber-300'"
|
||||
:title="data.source === adjust ? '' : '该股复权因子缺失，暂按此口径显示（可先同步市场数据）'"
|
||||
>{{ sourceLabel }}</span>
|
||||
|
||||
<span class="ml-auto text-[13px] text-[#9BA3AE]">↑↓ 切换 · Esc 关闭 · 滚轮缩放 · 左滑加载历史</span>
|
||||
<button type="button" class="btn-ghost !px-2.5 !py-1" title="关闭 (Esc)" @click="emit('close')">
|
||||
<button type="button" class="btn-ghost !px-2.5 !py-1 ml-auto cursor-pointer" 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>
|
||||
</header>
|
||||
@@ -399,7 +565,7 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
:class="subPanes.includes(s.key)
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-[#101014] text-[#9BA3AE] line-through'"
|
||||
:title="subPanes.includes(s.key) ? '点击隐藏 · 拖动排序 · 右侧按钮调高度' : '点击显示'"
|
||||
:title="subPanes.includes(s.key) ? '点击隐藏 · 拖动排序 · 图内分隔线拖拽调高度' : '点击显示'"
|
||||
@click="toggleSub(s.key)"
|
||||
@dragstart="onDragStart($event, s.key)"
|
||||
@dragover.prevent
|
||||
@@ -407,10 +573,6 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
>
|
||||
{{ s.label }}
|
||||
</button>
|
||||
<template v-if="subPanes.includes(s.key)">
|
||||
<button type="button" class="border-l px-1 py-1 text-xs text-[#9BA3AE] hover:bg-[#1E2026] hover:text-[#E8EAED]" title="调高" @click="adjustHeight(s.key, 20)">▲</button>
|
||||
<button type="button" class="border-l px-1 py-1 text-xs text-[#9BA3AE] hover:bg-[#1E2026] hover:text-[#E8EAED]" title="调矮" @click="adjustHeight(s.key, -20)">▼</button>
|
||||
</template>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@@ -419,6 +581,20 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
title="主图叠加布林带"
|
||||
@click="showBoll = !showBoll"
|
||||
>BOLL</button>
|
||||
<!-- 实盘交易点：交割单导入的买卖标记 -->
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border px-2.5 py-1 text-[13px] transition-colors"
|
||||
:class="showTrades && trades.length ? 'border-amber-500 bg-amber-500 text-white' : 'border-[#26272E] bg-[#101014] text-[#9BA3AE]'"
|
||||
:title="trades.length ? `本股实盘成交 ${trades.length} 笔（交割单导入）` : '本股暂无实盘成交记录，点击导入交割单'"
|
||||
@click="trades.length ? (showTrades = !showTrades) : openTradeImport()"
|
||||
>交易点{{ trades.length ? ` ${trades.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]"
|
||||
title="上传券商交割单，导入实盘买卖点"
|
||||
@click="openTradeImport()"
|
||||
>导入交割单</button>
|
||||
<!-- MA 配置 -->
|
||||
<div class="relative">
|
||||
<button
|
||||
@@ -478,13 +654,40 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
{{ f.label }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between">
|
||||
<span class="text-xs text-[#9BA3AE]">已选 {{ tooltipFields.length }}/{{ TOOLTIP_FIELDS.length }}（首行日期固定）</span>
|
||||
<button type="button" class="text-xs text-blue-600 hover:underline" @click="resetTipFields">恢复默认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="ml-auto text-xs text-[#9BA3AE]">点击开关 · 拖动排序 · ▲▼调高度 · 右上工具栏画线</span>
|
||||
<!-- 日期跳转：输入 YYYYMMDD，该日K线居中显示 -->
|
||||
<div class="ml-auto flex items-center gap-1.5">
|
||||
<span class="text-xs text-[#9BA3AE]">定位</span>
|
||||
<div class="flex items-stretch">
|
||||
<input
|
||||
v-model="jumpInput"
|
||||
type="text"
|
||||
class="w-24 rounded-l-md border border-[#26272E] bg-[#16181D] px-2 py-1 font-mono text-[13px] text-[#E8EAED] outline-none transition-colors placeholder:text-[#7A818C]"
|
||||
:class="jumpErr ? 'border-red-500' : 'focus:border-blue-500'"
|
||||
placeholder="20200218"
|
||||
maxlength="8"
|
||||
inputmode="numeric"
|
||||
title="输入日期（YYYYMMDD），跳转后该日K线居中显示"
|
||||
@input="onJumpInput"
|
||||
@keyup.enter="jumpToDate"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-r-md border border-l-0 border-[#26272E] bg-[#101014] px-2 py-1 text-[13px] text-[#A8AFB8] transition-colors hover:border-[#3A3D46] hover:text-[#E8EAED]"
|
||||
title="跳转到该日期的日K（回车亦可）"
|
||||
@click="jumpToDate"
|
||||
>跳转</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="jumpTs != null"
|
||||
type="button"
|
||||
class="rounded-md border border-blue-500/60 bg-blue-500/10 px-2 py-1 font-mono text-xs text-blue-300 transition-colors hover:bg-blue-500/20"
|
||||
title="清除日期锚点，回到最新行情"
|
||||
@click="clearJump"
|
||||
>{{ fmtDashDate(jumpTs) }} ✕</button>
|
||||
<span v-if="jumpErr" class="text-xs text-red-400">{{ jumpErr }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表 -->
|
||||
@@ -496,6 +699,7 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
<div v-else-if="error" class="flex h-full items-center justify-center text-sm text-red-400">{{ error }}</div>
|
||||
<DetailKLine
|
||||
v-else-if="data && data.candles.length"
|
||||
ref="klineRef"
|
||||
:ticker="data.ts_code"
|
||||
:candles="data.candles"
|
||||
:indicators="data.indicators"
|
||||
@@ -507,6 +711,9 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
:show-boll="showBoll"
|
||||
:timeframe="timeframe"
|
||||
:tooltip-fields="tooltipFields"
|
||||
:center-ts="jumpTs"
|
||||
:trade-markers="tradeMarkers"
|
||||
@center-miss="onCenterMiss"
|
||||
/>
|
||||
<div v-else class="flex h-full items-center justify-center text-sm text-[#9BA3AE]">无数据</div>
|
||||
</div>
|
||||
@@ -577,5 +784,64 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- 交割单导入弹窗 -->
|
||||
<div
|
||||
v-if="showTradeImport"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
|
||||
@click.self="showTradeImport = false"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-lg border border-[#33353D] bg-[#16181D] p-4 shadow-2xl shadow-black/70">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-semibold text-[#E8EAED]">导入交割单（实盘买卖点）</span>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded p-1 text-[#9BA3AE] transition-colors hover:bg-[#26272E] hover:text-white"
|
||||
title="关闭 (Esc)"
|
||||
@click="showTradeImport = false"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<p class="mt-2 text-xs leading-5 text-[#9BA3AE]">
|
||||
上传券商导出的交割单（江海证券通达信版：「查询 → 交割单 → 输出」；App/同花顺版：「交割单 → 导出/发送邮箱」）。
|
||||
CSV / Excel / txt / HTML 均可，编码与列名自动识别；同日成交合并为一个标注（B=买入、S=卖出、T=当日买卖都有），鼠标悬停字母可查看数量与均价。
|
||||
</p>
|
||||
<label
|
||||
class="mt-3 flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed px-4 py-6 text-center transition-colors"
|
||||
:class="importing ? 'border-[#26272E] opacity-60' : 'border-[#3A3D46] hover:border-blue-500/60'"
|
||||
>
|
||||
<span class="text-[13px] text-[#C3C9D2]">{{ importing ? '解析导入中…' : '点击选择交割单文件' }}</span>
|
||||
<span class="mt-1 text-xs text-[#7A818C]">支持 .csv / .txt / .xls / .xlsx / .html，20MB 以内</span>
|
||||
<input
|
||||
type="file"
|
||||
class="hidden"
|
||||
accept=".csv,.txt,.xls,.xlsx,.htm,.html"
|
||||
:disabled="importing"
|
||||
@change="onTradeFile"
|
||||
/>
|
||||
</label>
|
||||
<!-- 导入结果反馈 -->
|
||||
<div v-if="importResult" class="mt-3 rounded-md border border-blue-500/30 bg-blue-500/10 p-2.5 text-xs leading-5 text-[#C3C9D2]">
|
||||
<div>
|
||||
新增 <span class="font-semibold text-blue-300">{{ importResult.inserted }}</span> 笔成交，覆盖 {{ importResult.stocks }} 只股票；
|
||||
重复跳过 {{ importResult.skipped_dup }} 笔，其他跳过 {{ importResult.skipped_other }} 笔。
|
||||
</div>
|
||||
<div v-if="importResult.bad.length" class="mt-1 text-red-400">
|
||||
{{ importResult.bad.join('；') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="importErr" class="mt-3 rounded-md border border-red-500/40 bg-red-500/10 p-2.5 text-xs text-red-400">{{ importErr }}</div>
|
||||
<!-- 危险操作：清空（作用于全部股票，不随当前股是否有成交隐藏入口） -->
|
||||
<div class="mt-3 flex items-center justify-between border-t border-[#1E2026] pt-3">
|
||||
<span class="text-xs text-[#7A818C]">清空全部股票的成交记录，K 线买卖点将全部消失</span>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-red-500/50 px-2.5 py-1 text-[13px] text-red-400 transition-colors hover:bg-red-500/15"
|
||||
@click="onClearTrades"
|
||||
>清空全部成交记录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user