看股功能更新
This commit is contained in:
@@ -23,12 +23,12 @@ function lookbackText(c: { lookback?: number; match?: string }) {
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-1.5">
|
||||
<span class="mr-1 text-xs text-slate-400">解析条件：</span>
|
||||
<span class="mr-1 text-[13px] text-[#9BA3AE]">解析条件：</span>
|
||||
|
||||
<span
|
||||
v-for="(c, i) in conditions.indicator"
|
||||
:key="'i' + i"
|
||||
class="inline-flex items-center gap-1.5 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs text-blue-900"
|
||||
class="inline-flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/15 px-3 py-1 text-[13px] text-blue-300"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>
|
||||
{{ c.indicator }}{{ paramsStr(c.params) }}
|
||||
@@ -36,13 +36,13 @@ function lookbackText(c: { lookback?: number; match?: string }) {
|
||||
<template v-if="c.value_indicator">{{ c.value_indicator }}{{ paramsStr(c.value_params) }}</template>
|
||||
<template v-else-if="c.op === 'between' && c.value2">{{ c.value }} ~ {{ c.value2 }}</template>
|
||||
<template v-else>{{ c.value }}</template>
|
||||
<span class="text-blue-300">· {{ lookbackText(c) }}</span>
|
||||
<span class="text-blue-300/70">· {{ lookbackText(c) }}</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-for="(c, i) in conditions.snapshot"
|
||||
:key="'s' + i"
|
||||
class="inline-flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs text-amber-900"
|
||||
class="inline-flex items-center gap-1.5 rounded-full border border-amber-500/30 bg-amber-500/15 px-3 py-1 text-[13px] text-amber-300"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
|
||||
{{ FIELD_TEXT[c.field] ?? c.field }}
|
||||
@@ -51,7 +51,7 @@ function lookbackText(c: { lookback?: number; match?: string }) {
|
||||
<template v-else>{{ c.value }}</template>
|
||||
</span>
|
||||
|
||||
<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-400">
|
||||
<span class="inline-flex items-center rounded-full border border-[#26272E] bg-[#1E2026] px-3 py-1 text-[13px] text-[#9BA3AE]">
|
||||
排除：ST · 退市<span v-if="conditions.exclude_bj"> · 北交所</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { dispose, init, registerIndicator, type Chart, type KLineData } from 'klinecharts';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import type { Candle } from '@/api/types';
|
||||
import {
|
||||
dispose, init, registerIndicator, registerOverlay,
|
||||
type Chart, type KLineData, type Point,
|
||||
} from 'klinecharts';
|
||||
// 官方画线扩展（preview.klinecharts.com 同款工具集）；rect/circle 沿用 v10 内置版，不注册扩展的重名模板
|
||||
import {
|
||||
abcd, anyWaves, arrow, eightWaves, fibonacciCircle, fibonacciExtension, fibonacciSegment,
|
||||
fibonacciSpeedResistanceFan, fibonacciSpiral, fiveWaves, gannBox, measure, parallelogram,
|
||||
threeWaves, triangle, xabcd,
|
||||
} from '@klinecharts/extension';
|
||||
import { useSettingsStore, TOOLTIP_FIELDS, DEFAULT_TOOLTIP_FIELDS } from '@/stores/settings';
|
||||
import type { Candle, TooltipField } from '@/api/types';
|
||||
|
||||
// 扩展画线模板一次性全局注册（registerOverlay 是全局的，模块加载时执行一次即可）
|
||||
for (const t of [
|
||||
abcd, xabcd, threeWaves, fiveWaves, eightWaves, anyWaves, arrow, triangle, parallelogram,
|
||||
fibonacciCircle, fibonacciExtension, fibonacciSegment, fibonacciSpeedResistanceFan,
|
||||
fibonacciSpiral, gannBox, measure,
|
||||
]) {
|
||||
registerOverlay(t);
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
ticker: string;
|
||||
candles: Candle[];
|
||||
indicators: Record<string, Record<string, (number | null)[]>>;
|
||||
/** 服务端在首屏窗口之前是否还有更早历史（决定左滑是否继续翻页） */
|
||||
hasMore: boolean;
|
||||
/** 向左翻页：取某日期（不含）之前 count 根历史，父组件保证口径一致；返回 null 表示无更多/已失效 */
|
||||
loadOlder: (
|
||||
end: string,
|
||||
count: number,
|
||||
) => Promise<{ candles: Candle[]; indicators: Record<string, Record<string, (number | null)[]>>; hasMore: boolean } | null>;
|
||||
/** 副图指标及顺序（'vol' 用内置；其余为后端序列） */
|
||||
subPanes: string[];
|
||||
/** 主图 MA 周期（可配置，随用户偏好持久化） */
|
||||
@@ -18,17 +43,35 @@ const props = defineProps<{
|
||||
showBoll: boolean;
|
||||
/** K线周期标签（仅用于 MA 指标名缓存 key） */
|
||||
timeframe: string;
|
||||
/** 浮层显示的指标（可选；缺省=目录全开，空数组=仅日期头） */
|
||||
tooltipFields?: TooltipField[];
|
||||
}>();
|
||||
|
||||
// A股语义色（浅色）；UP/DOWN 跟随设置中的涨跌配色
|
||||
// A股语义色（黑底高对比）；UP/DOWN 跟随设置中的涨跌配色
|
||||
const settings = useSettingsStore();
|
||||
let UP = '#dc2626';
|
||||
let DOWN = '#16a34a';
|
||||
const MA_COLORS = ['#2563eb', '#f59e0b', '#a855f7', '#10b981', '#ec4899', '#0ea5e9', '#84cc16', '#f97316'];
|
||||
let UP = '#FE354B';
|
||||
let DOWN = '#1EBE72';
|
||||
const MA_COLORS = ['#F5C518', '#4DA3FF', '#C77DFF', '#4DD0E1', '#FF8A3D', '#FF6E9C', '#A3E635', '#94A8FF'];
|
||||
|
||||
// ---------- 后端序列注入（单一事实源，按索引对齐） ----------
|
||||
// ---------- 后端序列注入（单一事实源，与 allData 按索引对齐） ----------
|
||||
// allData 会随向左翻页不断前插，图表只持有其中的后缀窗口——指标取值必须按时间戳
|
||||
// 定位到 allData 索引，绝不能用图表相对索引（否则翻页后整体错位）。
|
||||
let PV: Record<string, (number | null)[]> = {};
|
||||
const g = (k: string) => (i: number) => PV[k]?.[i] ?? undefined;
|
||||
let allData: KLineData[] = [];
|
||||
|
||||
function idxOfTs(ts: number): number {
|
||||
let lo = 0, hi = allData.length - 1;
|
||||
while (lo <= hi) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (allData[mid].timestamp === ts) return mid;
|
||||
if (allData[mid].timestamp < ts) lo = mid + 1; else hi = mid - 1;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
const g = (k: string) => (ts: number) => {
|
||||
const i = idxOfTs(ts);
|
||||
return i >= 0 ? PV[k]?.[i] ?? undefined : undefined;
|
||||
};
|
||||
|
||||
// 动态 MA：按周期组合注册一次（figures 的 key 必须静态，故按签名建缓存）
|
||||
const _maReg = new Set<string>();
|
||||
@@ -42,9 +85,9 @@ function ensureMaIndicator(periods: number[]) {
|
||||
key: `ma${p}`, title: `MA${p}`, type: 'line',
|
||||
styles: () => ({ color: MA_COLORS[i % MA_COLORS.length] }),
|
||||
})),
|
||||
calc: (d: KLineData[]) => d.map((_, i) => {
|
||||
calc: (d: KLineData[]) => d.map((bar) => {
|
||||
const row: Record<string, number | undefined> = {};
|
||||
for (const p of periods) row[`ma${p}`] = g(`ma${p}`)(i);
|
||||
for (const p of periods) row[`ma${p}`] = g(`ma${p}`)(bar.timestamp);
|
||||
return row;
|
||||
}),
|
||||
});
|
||||
@@ -56,19 +99,19 @@ registerIndicator({
|
||||
name: 'pv-boll',
|
||||
shortName: 'BOLL',
|
||||
figures: [
|
||||
{ key: 'upper', title: 'UP', type: 'line', styles: () => ({ color: '#a855f7' }) },
|
||||
{ key: 'mid', title: 'MB', type: 'line', styles: () => ({ color: '#f59e0b' }) },
|
||||
{ key: 'lower', title: 'DN', type: 'line', styles: () => ({ color: '#a855f7' }) },
|
||||
{ key: 'upper', title: 'UP', type: 'line', styles: () => ({ color: '#C77DFF' }) },
|
||||
{ key: 'mid', title: 'MB', type: 'line', styles: () => ({ color: '#F5C518' }) },
|
||||
{ key: 'lower', title: 'DN', type: 'line', styles: () => ({ color: '#C77DFF' }) },
|
||||
],
|
||||
calc: (d: KLineData[]) => d.map((_, i) => ({ upper: g('upper')(i), mid: g('mid')(i), lower: g('lower')(i) })),
|
||||
calc: (d: KLineData[]) => d.map((bar) => ({ upper: g('upper')(bar.timestamp), mid: g('mid')(bar.timestamp), lower: g('lower')(bar.timestamp) })),
|
||||
});
|
||||
|
||||
registerIndicator({
|
||||
name: 'pv-macd',
|
||||
shortName: 'MACD',
|
||||
figures: [
|
||||
{ key: 'dif', title: 'DIF', type: 'line', styles: () => ({ color: '#2563eb' }) },
|
||||
{ key: 'dea', title: 'DEA', type: 'line', styles: () => ({ color: '#f59e0b' }) },
|
||||
{ key: 'dif', title: 'DIF', type: 'line', styles: () => ({ color: '#4DA3FF' }) },
|
||||
{ key: 'dea', title: 'DEA', type: 'line', styles: () => ({ color: '#F5C518' }) },
|
||||
{
|
||||
key: 'hist', title: 'HIST', type: 'bar', baseValue: 0, // 零轴柱，缺省会从面板底部画起
|
||||
styles: (p) => {
|
||||
@@ -77,42 +120,115 @@ registerIndicator({
|
||||
},
|
||||
},
|
||||
],
|
||||
calc: (d: KLineData[]) => d.map((_, i) => ({ dif: g('dif')(i), dea: g('dea')(i), hist: g('hist')(i) })),
|
||||
calc: (d: KLineData[]) => d.map((bar) => ({ dif: g('dif')(bar.timestamp), dea: g('dea')(bar.timestamp), hist: g('hist')(bar.timestamp) })),
|
||||
});
|
||||
|
||||
registerIndicator({
|
||||
name: 'pv-kdj',
|
||||
shortName: 'KDJ',
|
||||
figures: [
|
||||
{ key: 'k', title: 'K', type: 'line', styles: () => ({ color: '#2563eb' }) },
|
||||
{ key: 'd', title: 'D', type: 'line', styles: () => ({ color: '#f59e0b' }) },
|
||||
{ key: 'j', title: 'J', type: 'line', styles: () => ({ color: '#dc2626' }) },
|
||||
{ key: 'k', title: 'K', type: 'line', styles: () => ({ color: '#4DA3FF' }) },
|
||||
{ key: 'd', title: 'D', type: 'line', styles: () => ({ color: '#F5C518' }) },
|
||||
{ key: 'j', title: 'J', type: 'line', styles: () => ({ color: '#FF6E9C' }) },
|
||||
],
|
||||
calc: (d: KLineData[]) => d.map((_, i) => ({ k: g('k')(i), d: g('d')(i), j: g('j')(i) })),
|
||||
calc: (d: KLineData[]) => d.map((bar) => ({ k: g('k')(bar.timestamp), d: g('d')(bar.timestamp), j: g('j')(bar.timestamp) })),
|
||||
});
|
||||
|
||||
registerIndicator({
|
||||
name: 'pv-rsi',
|
||||
shortName: 'RSI',
|
||||
figures: [
|
||||
{ key: 'rsi6', title: 'RSI6', type: 'line', styles: () => ({ color: '#2563eb' }) },
|
||||
{ key: 'rsi12', title: 'RSI12', type: 'line', styles: () => ({ color: '#f59e0b' }) },
|
||||
{ key: 'rsi24', title: 'RSI24', type: 'line', styles: () => ({ color: '#a855f7' }) },
|
||||
{ key: 'rsi6', title: 'RSI6', type: 'line', styles: () => ({ color: '#4DA3FF' }) },
|
||||
{ key: 'rsi12', title: 'RSI12', type: 'line', styles: () => ({ color: '#F5C518' }) },
|
||||
{ key: 'rsi24', title: 'RSI24', type: 'line', styles: () => ({ color: '#C77DFF' }) },
|
||||
],
|
||||
calc: (d: KLineData[]) => d.map((_, i) => ({ rsi6: g('rsi6')(i), rsi12: g('rsi12')(i), rsi24: g('rsi24')(i) })),
|
||||
calc: (d: KLineData[]) => d.map((bar) => ({ rsi6: g('rsi6')(bar.timestamp), rsi12: g('rsi12')(bar.timestamp), rsi24: g('rsi24')(bar.timestamp) })),
|
||||
});
|
||||
|
||||
const container = ref<HTMLDivElement | null>(null);
|
||||
let chart: Chart | null = null;
|
||||
let allData: KLineData[] = [];
|
||||
let served = 0; // 已交给图表的 bar 数（从尾部计），backward 分页用
|
||||
|
||||
const INIT_BARS = 240; // 初始展示根数（约一年日线）
|
||||
const PAGE_BARS = 500; // 每次向左滚动追加的历史根数
|
||||
// ---------- 向左滚动按需加载（首屏 INIT_BARS 根，滚到左缘自动向前翻页 + 预取缓冲） ----------
|
||||
const INIT_BARS = 240; // 初始展示根数（约一年日线）
|
||||
const SERVE_BARS = 500; // 每次 backward 回调向图表吐出的根数
|
||||
const FETCH_BARS = 800; // 每次网络翻页拉取的根数（后端含预热计算指标）
|
||||
const PREFETCH_LEFT = 300; // 本地未吐出的剩余根数低于该值时提前预取下一页
|
||||
|
||||
function lightStyles() {
|
||||
let served = 0; // 已交给图表的 bar 数（从尾部计）
|
||||
let hasMore = false; // 服务端可能还有更早历史
|
||||
let fetching: Promise<void> | null = null; // 进行中的向前翻页请求
|
||||
let epoch = 0; // 本轮 build 生命周期标记（重建后丢弃过期回调/数据）
|
||||
let failCount = 0; // 连续翻页失败次数（超过 3 次才放弃，避免瞬时网络错误永久截断历史）
|
||||
|
||||
const canBack = () => allData.length > served || hasMore;
|
||||
|
||||
/** 用本地时区把 timestamp 格式化为 YYYY-MM-DD（DB 里是 naive 日期；toISOString 会因 UTC 偏移提前一天，导致翻页缺一根）。 */
|
||||
const toDateStr = (ms: number) => {
|
||||
const d = new Date(ms);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
/** 拉取下一页更早历史并前插到 allData / PV（索引保持对齐）。 */
|
||||
async function ensureOlder(myEpoch: number): Promise<void> {
|
||||
if (fetching) return fetching;
|
||||
if (!hasMore || allData.length === 0) return Promise.resolve();
|
||||
const end = toDateStr(allData[0].timestamp);
|
||||
const p = (async () => {
|
||||
try {
|
||||
const page = await props.loadOlder(end, FETCH_BARS);
|
||||
if (myEpoch !== epoch) return; // 期间已切股/切口径/重建，丢弃
|
||||
if (!page || page.candles.length === 0) { hasMore = false; return; }
|
||||
recordExtra(page.candles); // 额/换手随翻页累积（EX 全局 Map，重建时清）
|
||||
const firstTs = allData[0].timestamp;
|
||||
const keep = page.candles.filter((c) => new Date(c.ts).getTime() < firstTs);
|
||||
// 同戳边界K：周/月K的窗口边界可能切出半周期，用服务端完整聚合替换本端首根
|
||||
const boundary = page.candles.find((c) => new Date(c.ts).getTime() === firstTs);
|
||||
if (keep.length === 0 && !boundary) { hasMore = false; return; } // 防御：服务端窗口与本端重叠
|
||||
const head = keep.map((k) => ({
|
||||
timestamp: new Date(k.ts).getTime(),
|
||||
open: k.open, high: k.high, low: k.low, close: k.close, volume: k.volume,
|
||||
}));
|
||||
allData = boundary
|
||||
? [...head, { timestamp: firstTs, open: boundary.open, high: boundary.high, low: boundary.low, close: boundary.close, volume: boundary.volume }, ...allData.slice(1)]
|
||||
: [...head, ...allData];
|
||||
for (const series of Object.values(page.indicators)) {
|
||||
for (const [key, arr] of Object.entries(series)) {
|
||||
// keep 是 page.candles 的前缀（全页严格早于 firstTs），指标按前缀对齐
|
||||
const cut = arr.slice(0, keep.length);
|
||||
if (boundary) {
|
||||
const rep = arr[keep.length] ?? null; // 同戳边界K的指标值（keep 之后紧邻一根）
|
||||
PV[key] = [...cut, rep, ...(PV[key] ?? []).slice(1)];
|
||||
} else {
|
||||
PV[key] = [...cut, ...(PV[key] ?? [])];
|
||||
}
|
||||
}
|
||||
}
|
||||
// 注：klinecharts v10 数据只经 dataLoader 流入、无 updateData，
|
||||
// 已渲染的半周期首K无法原地刷新；替换 allData/PV 保证后续翻页与重建使用完整聚合。
|
||||
hasMore = page.hasMore;
|
||||
failCount = 0;
|
||||
} catch {
|
||||
// 网络失败：保留 hasMore，下次左缘触发时重试；连续 3 次失败才放弃
|
||||
failCount += 1;
|
||||
if (failCount >= 3) hasMore = false;
|
||||
}
|
||||
})();
|
||||
fetching = p.finally(() => { fetching = null; });
|
||||
return fetching;
|
||||
}
|
||||
|
||||
/** 缓冲预取：本地剩余不足时提前拉下一页，用户滚到左缘时数据已就位、零等待。 */
|
||||
function maybePrefetch(myEpoch: number) {
|
||||
if (hasMore && !fetching && allData.length - served < PREFETCH_LEFT) void ensureOlder(myEpoch);
|
||||
}
|
||||
|
||||
function darkStyles() {
|
||||
return {
|
||||
grid: { horizontal: { color: '#eef2f7' }, vertical: { color: '#eef2f7' } },
|
||||
grid: { horizontal: { color: '#1C1E24' }, vertical: { color: '#1C1E24' } },
|
||||
// 内建 VOL 等指标柱的涨跌色缺省是库默认绿涨红跌，与全站语义相反；
|
||||
// bars[0] 与库默认项深合并（init 时 merge 到 getDefaultStyles），只覆盖三个颜色键，
|
||||
// UP/DOWN 在 build() 里随 settings 刷新，故切「绿涨红跌」重建后同样生效
|
||||
indicator: { bars: [{ upColor: UP, downColor: DOWN, noChangeColor: '#7A818C' }] },
|
||||
candle: {
|
||||
bar: {
|
||||
upColor: UP, downColor: DOWN,
|
||||
@@ -120,17 +236,17 @@ function lightStyles() {
|
||||
upWickColor: UP, downWickColor: DOWN,
|
||||
},
|
||||
priceMark: {
|
||||
high: { color: '#94a3b8' }, low: { color: '#94a3b8' },
|
||||
high: { color: '#9AA0AA' }, low: { color: '#9AA0AA' },
|
||||
last: { upColor: UP, downColor: DOWN },
|
||||
},
|
||||
},
|
||||
xAxis: { axisLine: { color: '#e2e8f0' }, tickText: { color: '#64748b' }, tickLine: { color: '#e2e8f0' } },
|
||||
yAxis: { axisLine: { color: '#e2e8f0' }, tickText: { color: '#64748b' }, tickLine: { color: '#e2e8f0' } },
|
||||
xAxis: { axisLine: { color: '#2A2D34' }, tickText: { color: '#9AA0AA', size: 12 }, tickLine: { color: '#2A2D34' } },
|
||||
yAxis: { axisLine: { color: '#2A2D34' }, tickText: { color: '#9AA0AA', size: 12 }, tickLine: { color: '#2A2D34' } },
|
||||
crosshair: {
|
||||
horizontal: { text: { backgroundColor: '#1e293b' } },
|
||||
vertical: { text: { backgroundColor: '#1e293b' } },
|
||||
horizontal: { text: { backgroundColor: '#333A45' } },
|
||||
vertical: { text: { backgroundColor: '#333A45' } },
|
||||
},
|
||||
separator: { color: '#e2e8f0' },
|
||||
separator: { color: '#23252B' },
|
||||
};
|
||||
}
|
||||
|
||||
@@ -138,63 +254,173 @@ function lightStyles() {
|
||||
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);
|
||||
|
||||
// ---------- 鼠标跟随信息框（通达信式） ----------
|
||||
// ---------- 鼠标跟随信息框（通达信式，浮层贴鼠标，每行一个指标） ----------
|
||||
interface TipRow { key: string; label: string; text: string; tone: '' | 'up' | 'down' }
|
||||
interface HoverInfo {
|
||||
date: string; open: number; high: number; low: number; close: number;
|
||||
chg: number | null; amp: number | null; vol: string; amount: string | null;
|
||||
mas: { label: string; value: number | null; color: string }[];
|
||||
date: string; weekday: string;
|
||||
rows: TipRow[];
|
||||
}
|
||||
const hover = ref<HoverInfo | null>(null);
|
||||
|
||||
// tooltip 展示的额/换手不在 KLineData 里，按时间戳从 Candle 源数据另存一份
|
||||
const EX = new Map<number, { amount: number | null; turnover: number | null }>();
|
||||
const recordExtra = (candles: Candle[]) => {
|
||||
for (const c of candles) EX.set(new Date(c.ts).getTime(), { amount: c.amount ?? null, turnover: c.turnover ?? null });
|
||||
};
|
||||
|
||||
const WEEKDAYS = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
|
||||
function fmtVol(v: number): string {
|
||||
if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿';
|
||||
if (v >= 1e4) return (v / 1e4).toFixed(2) + '万';
|
||||
return String(Math.round(v));
|
||||
}
|
||||
|
||||
function fmtAmount(v: number): string {
|
||||
if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿';
|
||||
if (v >= 1e4) return (v / 1e4).toFixed(2) + '万';
|
||||
return v.toFixed(0);
|
||||
}
|
||||
|
||||
// 鼠标位置（相对图表容器），浮层跟着走并在右缘/下缘自动翻转
|
||||
const mx = ref(0);
|
||||
const my = ref(0);
|
||||
function onMove(e: MouseEvent) {
|
||||
const rect = container.value?.getBoundingClientRect();
|
||||
mx.value = rect ? e.clientX - rect.left : e.clientX;
|
||||
my.value = rect ? e.clientY - rect.top : e.clientY;
|
||||
}
|
||||
const hoverStyle = ref<Record<string, string>>({});
|
||||
function placeHover(rowCount: number) {
|
||||
const w = container.value?.clientWidth ?? 800;
|
||||
const h = container.value?.clientHeight ?? 500;
|
||||
// 空选时模板仍渲染一行“未选择指标”占位，按至少 1 行估高
|
||||
const bw = 160, bh = 37 + Math.max(rowCount, 1) * 16, gap = 14;
|
||||
const x = mx.value + gap + bw > w - 4 ? Math.max(4, mx.value - gap - bw) : mx.value + gap;
|
||||
const y = my.value + gap + bh > h - 4 ? Math.max(4, my.value - gap - bh) : my.value + gap;
|
||||
hoverStyle.value = { left: `${x}px`, top: `${y}px` };
|
||||
}
|
||||
|
||||
function bindCrosshair(ch: Chart) {
|
||||
ch.subscribeAction('onCrosshairChange', (payload) => {
|
||||
const k = (payload as { data?: { kLineData?: KLineData } }).data?.kLineData;
|
||||
if (!k || !allData.length) { hover.value = null; return; }
|
||||
// 二分定位索引（全量数组与指标序列按索引对齐）
|
||||
let lo = 0, hi = allData.length - 1, idx = -1;
|
||||
while (lo <= hi) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (allData[mid].timestamp === k.timestamp) { idx = mid; break; }
|
||||
if (allData[mid].timestamp < k.timestamp) lo = mid + 1; else hi = mid - 1;
|
||||
}
|
||||
// v10 分发的是裸 crosshair {x, y, paneId}（不含 kLineData），
|
||||
// 用公共 API 把 x 像素换算回 timestamp 再定位 bar
|
||||
const x = (payload as { x?: number }).x;
|
||||
if (typeof x !== 'number' || allData.length === 0) { hover.value = null; return; }
|
||||
const pt = ch.convertFromPixel([{ x }]) as Array<Partial<Point>>;
|
||||
const ts = pt?.[0]?.timestamp;
|
||||
const idx = ts != null ? idxOfTs(ts) : -1; // 全量数组与指标序列按索引对齐
|
||||
if (idx < 0) { hover.value = null; return; }
|
||||
const k = allData[idx];
|
||||
const prev = idx > 0 ? allData[idx - 1] : null;
|
||||
const chg = prev ? ((k.close - prev.close) / prev.close) * 100 : null;
|
||||
const diff = prev ? k.close - prev.close : null;
|
||||
const chg = prev ? (diff! / prev.close) * 100 : null;
|
||||
const amp = prev ? ((k.high - k.low) / prev.close) * 100 : null;
|
||||
hover.value = {
|
||||
date: new Date(k.timestamp).toLocaleDateString('zh-CN'),
|
||||
open: k.open, high: k.high, low: k.low, close: k.close,
|
||||
chg, amp, vol: fmtVol(k.volume ?? 0), amount: null,
|
||||
mas: props.maPeriods.map((p, i) => ({
|
||||
label: `MA${p}`,
|
||||
value: PV[`ma${p}`]?.[idx] ?? null,
|
||||
color: MA_COLORS[i % MA_COLORS.length],
|
||||
})),
|
||||
const d = new Date(k.timestamp);
|
||||
const ex = EX.get(k.timestamp);
|
||||
// 每个指标一行；配色跟随涨跌色调设置（up/down 在 build() 里随 priceTone 刷新）。
|
||||
// 平盘（diff==0）为中性色，与全站 pctClass 及 klinecharts 的 noChangeColor 三态约定一致
|
||||
const byDiff: '' | 'up' | 'down' = diff == null || diff === 0 ? '' : diff > 0 ? 'up' : 'down';
|
||||
const values: Record<TooltipField, { text: string; tone: '' | 'up' | 'down' }> = {
|
||||
open: { text: k.open.toFixed(2), tone: byDiff },
|
||||
high: { text: k.high.toFixed(2), tone: 'up' },
|
||||
low: { text: k.low.toFixed(2), tone: 'down' },
|
||||
close: { text: k.close.toFixed(2), tone: byDiff },
|
||||
diff: { text: diff == null ? '—' : (diff > 0 ? '+' : '') + diff.toFixed(2), tone: byDiff },
|
||||
chg: { text: chg == null ? '—' : (chg > 0 ? '+' : '') + chg.toFixed(2) + '%', tone: byDiff },
|
||||
amp: { text: amp == null ? '—' : amp.toFixed(2) + '%', tone: '' },
|
||||
vol: { text: fmtVol(k.volume ?? 0), tone: '' },
|
||||
amount: { text: ex?.amount != null ? fmtAmount(ex.amount) : '—', tone: '' },
|
||||
turnover: { text: ex?.turnover == null ? '—' : ex.turnover.toFixed(2) + '%', tone: '' },
|
||||
};
|
||||
const selected = new Set(props.tooltipFields ?? DEFAULT_TOOLTIP_FIELDS);
|
||||
const rows: TipRow[] = TOOLTIP_FIELDS
|
||||
.filter((f) => selected.has(f.key)) // 目录顺序 = 设置弹层顺序 = 浮层行序
|
||||
.map((f) => ({ key: f.key, label: f.label, ...values[f.key] }));
|
||||
hover.value = {
|
||||
date: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`,
|
||||
weekday: `星期${WEEKDAYS[d.getDay()]}`,
|
||||
rows,
|
||||
};
|
||||
placeHover(rows.length);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 画图画线（通达信式工具栏） ----------
|
||||
const TOOLS: { key: string; label: string; title: string }[] = [
|
||||
// ---------- 画图画线（Pro 风格工具集：v10 内置 + @klinecharts/extension） ----------
|
||||
interface Tool { key: string; label: string; title: string }
|
||||
|
||||
// 常用工具（工具栏一行直出；key 即 overlay 名，'' 表示光标模式）
|
||||
const COMMON_TOOLS: Tool[] = [
|
||||
{ key: '', label: '光标', title: '光标模式（Esc 取消画线）' },
|
||||
{ key: 'segment', label: '╱', title: '线段' },
|
||||
{ key: 'ray', label: '→', title: '射线' },
|
||||
{ key: 'horizontalLine', label: '─', title: '水平线' },
|
||||
{ key: 'rayLine', label: '→', title: '射线' },
|
||||
{ key: 'horizontalStraightLine', label: '─', title: '水平线' },
|
||||
{ key: 'rect', label: '▭', title: '矩形' },
|
||||
{ key: 'priceChannelLine', label: '∥', title: '价格通道' },
|
||||
{ key: 'fibLine', label: 'fib', title: '斐波那契回撤' },
|
||||
{ key: 'fibonacciLine', label: 'fib', title: '斐波那契回撤' },
|
||||
{ key: 'measure', label: '⇹', title: '测量（价差/幅度/K线数）' },
|
||||
];
|
||||
|
||||
// 更多工具（分组面板展开；均为已注册 overlay）
|
||||
const MORE_GROUPS: { group: string; items: Tool[] }[] = [
|
||||
{ group: '线', items: [
|
||||
{ key: 'straightLine', label: '直线', title: '无限延长直线' },
|
||||
{ key: 'horizontalSegment', label: '水平线段', title: '两点水平线段' },
|
||||
{ key: 'verticalStraightLine', label: '竖直线', title: '竖直直线' },
|
||||
{ key: 'parallelStraightLine', label: '平行线', title: '平行直线' },
|
||||
{ key: 'priceLine', label: '价格线', title: '单点价格线' },
|
||||
] },
|
||||
{ group: '斐波那契', items: [
|
||||
{ key: 'fibonacciSegment', label: '线段fib', title: '斐波那契线段（周期）' },
|
||||
{ key: 'fibonacciExtension', label: '扩展', title: '斐波那契扩展' },
|
||||
{ key: 'fibonacciCircle', label: '圆形', title: '斐波那契圆形' },
|
||||
{ key: 'fibonacciSpiral', label: '螺线', title: '斐波那契螺线' },
|
||||
{ key: 'fibonacciSpeedResistanceFan', label: '阻力扇', title: '斐波那契速度阻力扇' },
|
||||
] },
|
||||
{ group: '波浪 · 江恩 · 谐波', items: [
|
||||
{ key: 'threeWaves', label: '三浪', title: '三浪' },
|
||||
{ key: 'fiveWaves', label: '五浪', title: '五浪' },
|
||||
{ key: 'eightWaves', label: '八浪', title: '八浪' },
|
||||
{ key: 'anyWaves', label: '自由浪', title: '自由波浪' },
|
||||
{ key: 'gannBox', label: '江恩箱', title: '甘氏箱（江恩角度线）' },
|
||||
{ key: 'abcd', label: 'AB=CD', title: 'AB=CD 谐波' },
|
||||
{ key: 'xabcd', label: 'XABCD', title: 'XABCD 谐波' },
|
||||
] },
|
||||
{ group: '形状', items: [
|
||||
{ key: 'triangle', label: '△', title: '三角形' },
|
||||
{ key: 'parallelogram', label: '▱', title: '平行四边形' },
|
||||
{ key: 'circle', label: '◯', title: '圆' },
|
||||
{ key: 'arrow', label: '➤', title: '箭头' },
|
||||
{ key: 'brush', label: '✎', title: '自由画笔' },
|
||||
] },
|
||||
];
|
||||
|
||||
const activeTool = ref('');
|
||||
const showMore = ref(false);
|
||||
|
||||
/** 测量工具的气泡文案：价差 / 涨跌幅 / 两点间K线数（Point.value 即价格） */
|
||||
function measureTip(points: Partial<Point>[]): string[] {
|
||||
const a = points[0], b = points[1];
|
||||
if (!a?.value || !b?.value) return [];
|
||||
const diff = b.value - a.value;
|
||||
const pct = (diff / a.value) * 100;
|
||||
const out = [
|
||||
`价差 ${diff >= 0 ? '+' : ''}${diff.toFixed(2)}`,
|
||||
`幅度 ${pct >= 0 ? '+' : ''}${pct.toFixed(2)}%`,
|
||||
];
|
||||
const ia = a.timestamp != null ? idxOfTs(a.timestamp) : -1;
|
||||
const ib = b.timestamp != null ? idxOfTs(b.timestamp) : -1;
|
||||
if (ia >= 0 && ib >= 0) out.push(`${Math.abs(ib - ia) + 1} 根K线`);
|
||||
return out;
|
||||
}
|
||||
|
||||
function pickTool(key: string) {
|
||||
activeTool.value = key;
|
||||
if (chart && key) chart.createOverlay({ name: key });
|
||||
showMore.value = false;
|
||||
if (chart && key) {
|
||||
// measure 通过 extendData 注入气泡文案，其余直接按名创建
|
||||
chart.createOverlay(key === 'measure' ? { name: 'measure', extendData: measureTip } : { name: key });
|
||||
}
|
||||
}
|
||||
|
||||
function clearOverlays() {
|
||||
@@ -207,35 +433,67 @@ function build() {
|
||||
UP = settings.upHex;
|
||||
DOWN = settings.downHex;
|
||||
PV = {};
|
||||
EX.clear();
|
||||
recordExtra(props.candles);
|
||||
for (const [group, series] of Object.entries(props.indicators)) {
|
||||
for (const [key, arr] of Object.entries(series)) PV[key] = arr;
|
||||
}
|
||||
|
||||
const ch = init(container.value, { styles: lightStyles() });
|
||||
const ch = init(container.value, { styles: darkStyles() });
|
||||
if (!ch) return;
|
||||
chart = ch;
|
||||
const myEpoch = ++epoch;
|
||||
allData = props.candles.map((k) => ({
|
||||
timestamp: new Date(k.ts).getTime(),
|
||||
open: k.open, high: k.high, low: k.low, close: k.close, volume: k.volume,
|
||||
}));
|
||||
served = 0;
|
||||
hasMore = props.hasMore;
|
||||
fetching = null;
|
||||
failCount = 0;
|
||||
|
||||
ch.setDataLoader({
|
||||
getBars: ({ type, callback }) => {
|
||||
if (type === 'update') {
|
||||
const last = allData[allData.length - 1];
|
||||
callback(last ? [last] : [], { backward: served < allData.length, forward: false });
|
||||
} else if (type === 'init') {
|
||||
// 全量已拉到本地：先给最近 INIT_BARS 根，向左滚动时按页吐更早历史
|
||||
served = Math.min(INIT_BARS, allData.length);
|
||||
callback(allData.slice(allData.length - served), { backward: served < allData.length, forward: false });
|
||||
} else if (type === 'backward') {
|
||||
const remain = allData.length - served;
|
||||
const take = Math.min(PAGE_BARS, remain);
|
||||
if (myEpoch !== epoch) return; // 已重建（切股/切口径/改MA），旧图表已 dispose，无需应答
|
||||
// klinecharts v10 契约（见 node_modules/klinecharts/dist/index.esm.js _addData）：
|
||||
// 'init' → callback 数据整体替换
|
||||
// 'forward' → 用户拖到左缘，callback 数据【前插】为更旧历史；more.forward=false 后左缘不再触发
|
||||
// 'backward'→ 用户拖到右缘，callback 数据【追加】为更新端数据；我们已持有最新一根，永远没有
|
||||
// 每次 getBars 必须恰好应答一次 callback，否则图表 _loading 卡死、后续不再加载
|
||||
const serveOlder = (take: number) => {
|
||||
const start = allData.length - served - take;
|
||||
served += take;
|
||||
callback(allData.slice(start, start + take), { backward: served < allData.length, forward: false });
|
||||
callback(allData.slice(start, start + take), { forward: canBack(), backward: false });
|
||||
};
|
||||
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 });
|
||||
maybePrefetch(myEpoch);
|
||||
} else if (type === 'forward') {
|
||||
// 左缘：优先吐本地未吐出的（首屏余量或已预取页），本地耗尽再向服务端翻一页更早历史
|
||||
const step = async () => {
|
||||
if (allData.length - served > 0) {
|
||||
serveOlder(Math.min(SERVE_BARS, allData.length - served));
|
||||
maybePrefetch(myEpoch);
|
||||
return;
|
||||
}
|
||||
if (!hasMore) { answerEmpty(); return; }
|
||||
await ensureOlder(myEpoch); // 若已在请求中则复用同一 promise
|
||||
if (myEpoch !== epoch) return; // 期间已重建，由新图表应答
|
||||
if (allData.length - served > 0) {
|
||||
serveOlder(Math.min(SERVE_BARS, allData.length - served));
|
||||
maybePrefetch(myEpoch);
|
||||
} else {
|
||||
answerEmpty();
|
||||
}
|
||||
};
|
||||
void step();
|
||||
} else {
|
||||
callback([], { backward: false, forward: false });
|
||||
// 'backward'（右缘更新端）与 'update'（单根刷新走 subscribeBar）：无更新端数据，
|
||||
// 绝不能把更旧历史从这里给出去——v10 会 concat 到最新一根右侧造成时间轴乱序
|
||||
callback([], { forward: canBack(), backward: false });
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -259,6 +517,12 @@ function build() {
|
||||
}
|
||||
|
||||
bindCrosshair(ch);
|
||||
// 缓冲预取：可视范围接近已加载左缘（<200 根）时提前翻下一页
|
||||
ch.subscribeAction('onVisibleRangeChange', (payload) => {
|
||||
if (myEpoch !== epoch) return;
|
||||
const from = (payload as { data?: { from?: unknown } }).data?.from;
|
||||
if (typeof from === 'number' && from < 200) maybePrefetch(myEpoch);
|
||||
});
|
||||
ch.setOffsetRightDistance(28);
|
||||
ch.scrollToRealTime();
|
||||
}
|
||||
@@ -290,47 +554,73 @@ watch(() => props.subHeights, () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative h-full w-full">
|
||||
<!-- mousemove 用 capture：klinecharts 在内部容器上以冒泡阶段监听并同步触发
|
||||
onCrosshairChange→placeHover，capture 先于它更新 mx/my，避免用到上一次的坐标 -->
|
||||
<div class="relative h-full w-full" @mousemove.capture="onMove" @mouseleave="hover = null">
|
||||
<div ref="container" class="h-full w-full"></div>
|
||||
|
||||
<!-- 鼠标跟随信息框（通达信式小方块） -->
|
||||
<!-- 鼠标跟随信息框（贴鼠标，右/下缘自动翻转；每行一个指标，内容由浮层设置决定） -->
|
||||
<div
|
||||
v-if="hover"
|
||||
class="pointer-events-none absolute left-2 top-2 z-10 rounded border border-slate-700 bg-slate-900/90 px-2.5 py-1.5 font-mono text-[11px] leading-4 text-slate-200 shadow-lg"
|
||||
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"
|
||||
>
|
||||
<div class="text-slate-400">{{ hover.date }}</div>
|
||||
<div>开 <span :class="hover.chg != null && hover.chg >= 0 ? 'text-red-400' : 'text-emerald-400'">{{ hover.open.toFixed(2) }}</span>
|
||||
高 <span class="text-red-400">{{ hover.high.toFixed(2) }}</span>
|
||||
低 <span class="text-emerald-400">{{ hover.low.toFixed(2) }}</span>
|
||||
收 <span :class="hover.chg != null && hover.chg >= 0 ? 'text-red-400' : 'text-emerald-400'">{{ hover.close.toFixed(2) }}</span></div>
|
||||
<div>幅 <span :class="hover.chg != null && hover.chg >= 0 ? 'text-red-400' : 'text-emerald-400'">{{ hover.chg == null ? '—' : (hover.chg > 0 ? '+' : '') + hover.chg.toFixed(2) + '%' }}</span>
|
||||
振 <span class="text-slate-100">{{ hover.amp == null ? '—' : hover.amp.toFixed(2) + '%' }}</span>
|
||||
量 <span class="text-slate-100">{{ hover.vol }}</span></div>
|
||||
<div v-if="hover.mas.length" class="mt-0.5">
|
||||
<span v-for="(m, i) in hover.mas" :key="m.label" class="mr-2" :style="{ color: m.color }">
|
||||
{{ m.label }} {{ m.value == null ? '—' : m.value.toFixed(2) }}<span v-if="i < hover.mas.length - 1" class="invisible">,</span>
|
||||
</span>
|
||||
<div class="text-[#9BA3AE]">{{ hover.date }} <span class="text-[#A8AFB8]">{{ hover.weekday }}</span></div>
|
||||
<div class="mt-1 border-t border-[#33353D]/60 pt-1">
|
||||
<div v-for="r in hover.rows" :key="r.key" class="flex items-baseline justify-between">
|
||||
<span class="text-[#A8AFB8]">{{ r.label }}</span>
|
||||
<span
|
||||
:style="r.tone ? { color: r.tone === 'up' ? UP : DOWN } : undefined"
|
||||
:class="r.tone ? '' : 'text-[#E8EAED]'"
|
||||
>{{ r.text }}</span>
|
||||
</div>
|
||||
<div v-if="hover.rows.length === 0" class="text-[#A8AFB8]">未选择指标</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 画图画线工具栏 -->
|
||||
<div class="absolute right-2 top-2 z-10 flex items-center gap-0.5 rounded-md border border-slate-200 bg-white/95 px-1 py-0.5 shadow-sm">
|
||||
<button
|
||||
v-for="t in TOOLS"
|
||||
:key="t.key || 'cursor'"
|
||||
type="button"
|
||||
class="min-w-6 rounded px-1 py-0.5 text-[11px] transition-colors"
|
||||
:class="activeTool === t.key ? 'bg-blue-600 text-white' : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'"
|
||||
:title="t.title"
|
||||
@click="pickTool(t.key)"
|
||||
>{{ t.label }}</button>
|
||||
<span class="mx-0.5 h-3 w-px bg-slate-200"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded px-1 py-0.5 text-[11px] text-red-500 transition-colors hover:bg-red-50"
|
||||
title="清除全部画线"
|
||||
@click="clearOverlays"
|
||||
>清除</button>
|
||||
<!-- 画图画线工具栏（常用一行 + 「更多」分组面板） -->
|
||||
<div class="absolute right-2 top-2 z-10 rounded-md border border-[#26272E] bg-[#101014] shadow-sm">
|
||||
<div class="flex items-center gap-0.5 px-1 py-0.5">
|
||||
<button
|
||||
v-for="t in COMMON_TOOLS"
|
||||
:key="t.key || 'cursor'"
|
||||
type="button"
|
||||
class="min-w-6 rounded px-1 py-0.5 text-xs transition-colors"
|
||||
:class="activeTool === t.key ? 'bg-blue-600 text-white' : 'text-[#A8AFB8] hover:bg-[#1E2026] hover:text-[#E8EAED]'"
|
||||
:title="t.title"
|
||||
@click="pickTool(t.key)"
|
||||
>{{ t.label }}</button>
|
||||
<span class="mx-0.5 h-3 w-px bg-[#26272E]"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded px-1 py-0.5 text-xs transition-colors"
|
||||
:class="showMore ? 'bg-blue-500/15 text-blue-300' : 'text-[#A8AFB8] hover:bg-[#1E2026] hover:text-[#E8EAED]'"
|
||||
title="更多画线工具"
|
||||
@click="showMore = !showMore"
|
||||
>更多▾</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded px-1 py-0.5 text-xs text-red-500 transition-colors hover:bg-red-500/15"
|
||||
title="清除全部画线"
|
||||
@click="clearOverlays"
|
||||
>清除</button>
|
||||
</div>
|
||||
<div v-if="showMore" class="max-w-56 border-t border-[#26272E] px-1.5 py-1">
|
||||
<div v-for="grp in MORE_GROUPS" :key="grp.group" class="mb-1.5 last:mb-0">
|
||||
<div class="mb-0.5 text-xs leading-3 text-[#9BA3AE]">{{ grp.group }}</div>
|
||||
<div class="flex flex-wrap gap-0.5">
|
||||
<button
|
||||
v-for="t in grp.items"
|
||||
:key="t.key"
|
||||
type="button"
|
||||
class="rounded px-1.5 py-0.5 text-xs transition-colors"
|
||||
:class="activeTool === t.key ? 'bg-blue-600 text-white' : 'text-[#A8AFB8] hover:bg-[#1E2026] hover:text-[#E8EAED]'"
|
||||
:title="t.title"
|
||||
@click="pickTool(t.key)"
|
||||
>{{ t.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -60,14 +60,14 @@ defineExpose({ refreshHistory });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-xl border border-slate-200 bg-white p-5">
|
||||
<div class="rounded-xl border border-[#26272E] bg-[#101014] p-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="lbl !mb-0">用一句话描述你的选股条件</label>
|
||||
<!-- 提问历史 -->
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1 text-xs text-slate-500 transition-colors hover:text-slate-900"
|
||||
class="flex items-center gap-1 rounded-md border border-[#26272E] px-2.5 py-1 text-[13px] text-[#A8AFB8] transition-colors hover:text-white"
|
||||
@click="loadHistory"
|
||||
>
|
||||
<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"><path d="M12 8v4l3 3" /><circle cx="12" cy="12" r="9" /></svg>
|
||||
@@ -75,14 +75,14 @@ defineExpose({ refreshHistory });
|
||||
</button>
|
||||
<div
|
||||
v-if="historyOpen"
|
||||
class="absolute right-0 top-8 z-30 w-[26rem] rounded-lg border border-slate-200 bg-white shadow-lg"
|
||||
class="absolute right-0 top-8 z-30 w-[26rem] rounded-lg border border-[#26272E] bg-[#101014] shadow-lg"
|
||||
>
|
||||
<div v-if="history.length === 0" class="px-4 py-6 text-center text-xs text-slate-400">暂无历史提问</div>
|
||||
<div v-if="history.length === 0" class="px-4 py-6 text-center text-[13px] text-[#9BA3AE]">暂无历史提问</div>
|
||||
<div v-else class="max-h-80 overflow-y-auto">
|
||||
<div
|
||||
v-for="q in history"
|
||||
:key="q.id"
|
||||
class="group flex items-start gap-2 border-b border-slate-50 px-3 py-2 last:border-0 hover:bg-slate-50"
|
||||
class="group flex items-start gap-2 border-b border-[#1E2026] px-3 py-2 last:border-0 hover:bg-[#26272E]"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@@ -90,15 +90,15 @@ defineExpose({ refreshHistory });
|
||||
:title="q.conditions ? '点击直传条件重跑（不重新解析）' : '点击填入并重跑'"
|
||||
@click="rerun(q)"
|
||||
>
|
||||
<span class="block truncate text-[13px] text-slate-700">{{ q.text }}</span>
|
||||
<span class="mt-0.5 block text-[11px] text-slate-400">
|
||||
<span class="block truncate text-sm text-[#E8EAED]">{{ q.text }}</span>
|
||||
<span class="mt-0.5 block text-xs text-[#9BA3AE]">
|
||||
{{ fmtTime(q.created_at) }}
|
||||
<span v-if="q.hit_count != null" class="ml-1 rounded bg-slate-100 px-1">命中 {{ q.hit_count }}</span>
|
||||
<span v-if="q.hit_count != null" class="ml-1 rounded bg-[#1E2026] px-1">命中 {{ q.hit_count }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded p-1 text-slate-300 opacity-0 transition hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
|
||||
class="rounded p-1 text-[#C3C9D2] opacity-0 transition hover:bg-red-500/15 hover:text-red-500 group-hover:opacity-100"
|
||||
title="删除该记录"
|
||||
@click.stop="removeQuery(q.id)"
|
||||
>
|
||||
@@ -119,20 +119,20 @@ defineExpose({ refreshHistory });
|
||||
/>
|
||||
|
||||
<div class="mt-3 flex flex-wrap items-center gap-1.5">
|
||||
<span class="mr-1 text-xs text-slate-400">示例：</span>
|
||||
<span class="mr-1 text-[13px] text-[#9BA3AE]">示例：</span>
|
||||
<button
|
||||
v-for="(ex, i) in examples"
|
||||
:key="i"
|
||||
type="button"
|
||||
class="max-w-full truncate rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-600 transition-colors hover:border-slate-300 hover:bg-slate-100"
|
||||
class="max-w-full truncate rounded-full border border-[#26272E] bg-black px-3 py-1 text-[13px] text-[#A8AFB8] transition-colors hover:border-[#3A3D46] hover:bg-[#1E2026]"
|
||||
@click="text = ex"
|
||||
>{{ ex }}</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between gap-3">
|
||||
<p class="text-xs leading-relaxed text-slate-400">
|
||||
<p class="text-[13px] leading-relaxed text-[#9BA3AE]">
|
||||
支持 KDJ / RSI / MACD / 布林 / 均线指标条件，市值 / 市盈率 / 换手率等快照条件，以及「连续 N 天」「近 N 天任一天」时间窗口。
|
||||
按 <kbd class="rounded border border-slate-200 bg-slate-50 px-1">Ctrl</kbd>+<kbd class="rounded border border-slate-200 bg-slate-50 px-1">Enter</kbd> 快速筛选。
|
||||
按 <kbd class="rounded border border-[#26272E] bg-black px-1">Ctrl</kbd>+<kbd class="rounded border border-[#26272E] bg-black px-1">Enter</kbd> 快速筛选。
|
||||
</p>
|
||||
<button type="button" class="btn-primary shrink-0 disabled:opacity-50" :disabled="loading || !text.trim()" @click="run">
|
||||
<svg v-if="loading" class="h-4 w-4 animate-spin" 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>
|
||||
|
||||
@@ -75,21 +75,21 @@ function fmtInd(it: ScreenerItemOut, key: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-4 overflow-hidden rounded-xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-4 py-3 text-[13px] text-slate-600">
|
||||
命中 <span class="font-semibold text-slate-900">{{ result.total }}</span> 只
|
||||
<span v-if="result.total > items.length" class="text-slate-400">（仅显示前 {{ items.length }}）</span>
|
||||
<span v-if="result.trade_date" class="ml-2 text-slate-400">· 数据基准 {{ result.trade_date.slice(0, 10) }}</span>
|
||||
<div class="mt-4 overflow-hidden rounded-xl border border-[#26272E] bg-[#101014]">
|
||||
<div class="border-b border-[#1E2026] px-4 py-3 text-sm text-[#A8AFB8]">
|
||||
命中 <span class="font-semibold text-[#E8EAED]">{{ result.total }}</span> 只
|
||||
<span v-if="result.total > items.length" class="text-[#9BA3AE]">（仅显示前 {{ items.length }}）</span>
|
||||
<span v-if="result.trade_date" class="ml-2 text-[#9BA3AE]">· 数据基准 {{ result.trade_date.slice(0, 10) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="max-h-[560px] overflow-auto">
|
||||
<table class="w-full border-collapse text-[13px]">
|
||||
<thead class="sticky top-0 z-10 bg-slate-50 text-slate-500">
|
||||
<tr class="border-b border-slate-200">
|
||||
<table class="w-full border-collapse text-sm">
|
||||
<thead class="sticky top-0 z-10 bg-black text-[#A8AFB8]">
|
||||
<tr class="border-b border-[#26272E]">
|
||||
<th
|
||||
v-for="c in FIXED_COLS"
|
||||
:key="c.key"
|
||||
class="cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium hover:text-slate-900"
|
||||
class="cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium hover:text-white"
|
||||
@click="toggleSort(c.key)"
|
||||
>
|
||||
{{ c.label }}
|
||||
@@ -98,7 +98,7 @@ function fmtInd(it: ScreenerItemOut, key: string) {
|
||||
<th
|
||||
v-for="col in indCols"
|
||||
:key="col.key"
|
||||
class="cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium hover:text-slate-900"
|
||||
class="cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left font-medium hover:text-white"
|
||||
@click="toggleSort(col.key)"
|
||||
>
|
||||
{{ col.label }}
|
||||
@@ -111,33 +111,33 @@ function fmtInd(it: ScreenerItemOut, key: string) {
|
||||
<tr
|
||||
v-for="it in sortedItems"
|
||||
:key="it.ts_code"
|
||||
class="cursor-pointer border-b border-slate-50 transition-colors last:border-0 hover:bg-blue-50/40"
|
||||
class="cursor-pointer border-b border-[#1E2026] transition-colors last:border-0 hover:bg-[#26272E]"
|
||||
@click="emit('preview', it)"
|
||||
>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 font-medium text-slate-900">{{ it.ts_code }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-slate-700">{{ it.name }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 font-medium text-[#E8EAED]">{{ it.ts_code }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">{{ it.name }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 font-medium tabular-nums" :class="toneClass(it.pct_chg)">{{ fmt2(it.close) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 tabular-nums" :class="toneClass(it.pct_chg)">
|
||||
{{ it.pct_chg == null ? '—' : (it.pct_chg > 0 ? '+' : '') + it.pct_chg.toFixed(2) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-slate-700">{{ fmt2(it.total_mv) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-slate-700">{{ fmt2(it.circ_mv) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-slate-700">{{ fmt2(it.pe_ttm) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-slate-700">{{ fmt2(it.pb) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-slate-700">{{ fmt2(it.turnover_rate) }}</td>
|
||||
<td v-for="col in indCols" :key="col.key" class="whitespace-nowrap px-3 py-1.5 text-slate-700">
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">{{ fmt2(it.total_mv) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">{{ fmt2(it.circ_mv) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">{{ fmt2(it.pe_ttm) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">{{ fmt2(it.pb) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">{{ fmt2(it.turnover_rate) }}</td>
|
||||
<td v-for="col in indCols" :key="col.key" class="whitespace-nowrap px-3 py-1.5 text-[#E8EAED]">
|
||||
{{ fmtInd(it, col.key) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-1.5 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-slate-200 px-2 py-0.5 text-xs text-blue-600 transition-colors hover:border-blue-300 hover:bg-blue-50"
|
||||
class="rounded-md border border-[#26272E] px-2 py-0.5 text-[13px] text-blue-600 transition-colors hover:border-blue-500 hover:bg-blue-500/15"
|
||||
@click.stop="emit('preview', it)"
|
||||
>详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="sortedItems.length === 0">
|
||||
<td :colspan="FIXED_COLS.length + indCols.length + 1" class="px-3 py-12 text-center text-slate-400">没有符合条件的股票</td>
|
||||
<td :colspan="FIXED_COLS.length + indCols.length + 1" class="px-3 py-12 text-center text-[#9BA3AE]">没有符合条件的股票</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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 } from '@/api/types';
|
||||
import { useSettingsStore, type PriceAdjust } from '@/stores/settings';
|
||||
import type { ChartLayoutPrefs, PreviewResponse, ScreenerItemOut, Timeframe, TooltipField } from '@/api/types';
|
||||
import { useSettingsStore, DEFAULT_TOOLTIP_FIELDS, TOOLTIP_FIELDS, type PriceAdjust } from '@/stores/settings';
|
||||
import DetailKLine from './DetailKLine.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -59,6 +59,7 @@ 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 tooltipFields = computed<TooltipField[]>(() => layout.value.tooltipFields ?? DEFAULT_TOOLTIP_FIELDS);
|
||||
const showBoll = ref(false);
|
||||
|
||||
function toggleSub(key: string) {
|
||||
@@ -111,6 +112,18 @@ function addCustomMa() {
|
||||
showMaConfig.value = false;
|
||||
}
|
||||
|
||||
// ---------- 浮层（鼠标悬停信息框）指标配置 ----------
|
||||
const showTipConfig = ref(false);
|
||||
function toggleTipField(key: TooltipField) {
|
||||
const cur = tooltipFields.value;
|
||||
settings.setChartLayout({
|
||||
tooltipFields: cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key],
|
||||
});
|
||||
}
|
||||
function resetTipFields() {
|
||||
settings.setChartLayout({ tooltipFields: [...DEFAULT_TOOLTIP_FIELDS] });
|
||||
}
|
||||
|
||||
// ---------- 自选股（星标） ----------
|
||||
const watched = ref(false);
|
||||
const watchBusy = ref(false);
|
||||
@@ -159,7 +172,7 @@ const header = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
// ---------- 数据加载（拉全量历史，图表内按需分页展示） ----------
|
||||
// ---------- 数据加载（首屏 ~500 根秒开；图表内向左滚动时按 end 参数逐页向前翻历史） ----------
|
||||
let fetchToken = 0;
|
||||
async function load(code: string) {
|
||||
const token = ++fetchToken;
|
||||
@@ -168,7 +181,7 @@ async function load(code: string) {
|
||||
data.value = null;
|
||||
try {
|
||||
const res = await getStockPreview(code, {
|
||||
limit: 30000,
|
||||
limit: 500,
|
||||
adjust: adjust.value,
|
||||
timeframe: timeframe.value,
|
||||
mas: maPeriods.value,
|
||||
@@ -180,6 +193,24 @@ async function load(code: string) {
|
||||
if (token === fetchToken) loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 向前翻页：取某日期之前的一页历史（复权/周期/MA 口径与首屏一致；切股或切口径后自动失效） */
|
||||
async function loadOlder(end: string, count: number) {
|
||||
const token = fetchToken;
|
||||
try {
|
||||
const res = await getStockPreview(active.value, {
|
||||
limit: count,
|
||||
end,
|
||||
adjust: adjust.value,
|
||||
timeframe: timeframe.value,
|
||||
mas: maPeriods.value,
|
||||
});
|
||||
if (token !== fetchToken) return null;
|
||||
return { candles: res.candles, indicators: res.indicators, hasMore: res.has_more ?? false };
|
||||
} catch {
|
||||
return null; // 网络失败：图表停止向前翻页（不中断已渲染内容）
|
||||
}
|
||||
}
|
||||
watch(active, (code) => load(code), { immediate: true });
|
||||
watch(adjust, () => load(active.value));
|
||||
watch(timeframe, () => load(active.value));
|
||||
@@ -205,7 +236,10 @@ 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;
|
||||
if (e.key === 'Escape') { if (showMaConfig.value) showMaConfig.value = false; else emit('close'); }
|
||||
if (e.key === 'Escape') {
|
||||
if (showMaConfig.value || showTipConfig.value) { showMaConfig.value = false; showTipConfig.value = false; }
|
||||
else emit('close');
|
||||
}
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); moveActive(-1); }
|
||||
else if (e.key === 'ArrowDown') { e.preventDefault(); moveActive(1); }
|
||||
}
|
||||
@@ -251,14 +285,14 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed inset-0 z-40 flex flex-col bg-slate-100">
|
||||
<div class="fixed inset-0 z-40 flex flex-col bg-black">
|
||||
<!-- 顶栏 -->
|
||||
<header class="flex h-12 shrink-0 items-center gap-3 border-b border-slate-200 bg-white px-4">
|
||||
<header class="flex h-12 shrink-0 items-center gap-3 border-b border-[#26272E] bg-[#101014] 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'"
|
||||
class="shrink-0 rounded p-1 transition-colors hover:bg-[#26272E] hover:text-white disabled:opacity-50"
|
||||
:class="watched ? 'text-amber-500' : 'text-[#C3C9D2]'"
|
||||
:title="watched ? '移出自选' : '加入自选'"
|
||||
:disabled="watchBusy"
|
||||
@click="toggleWatch"
|
||||
@@ -268,8 +302,8 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
</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>
|
||||
<span class="text-base font-semibold text-[#E8EAED]">{{ header.name }}</span>
|
||||
<span class="text-[13px] text-[#9BA3AE]">{{ active }}</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-lg font-semibold" :class="pctClass(header.pct)">{{ fmt(header.close) }}</span>
|
||||
@@ -278,38 +312,38 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
</span>
|
||||
</div>
|
||||
<!-- 周期切换 -->
|
||||
<div class="flex rounded-md border border-slate-200 p-0.5 text-[11px]">
|
||||
<div class="flex rounded-md border border-[#26272E] p-0.5 text-xs">
|
||||
<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'"
|
||||
:class="timeframe === p.key ? 'bg-blue-600 text-white' : 'text-[#A8AFB8] hover:text-white'"
|
||||
@click="setTimeframe(p.key)"
|
||||
>{{ p.label }}</button>
|
||||
</div>
|
||||
<!-- 复权切换 -->
|
||||
<div class="flex rounded-md border border-slate-200 p-0.5 text-[11px]">
|
||||
<div class="flex rounded-md border border-[#26272E] p-0.5 text-xs">
|
||||
<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'"
|
||||
:class="adjust === a.key ? 'bg-blue-600 text-white' : 'text-[#A8AFB8] hover:text-white'"
|
||||
@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 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-[11px]"
|
||||
:class="data.source === adjust ? 'bg-blue-50 text-blue-600' : 'bg-amber-50 text-amber-600'"
|
||||
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-xs text-slate-400">↑↓ 切换 · Esc 关闭 · 滚轮缩放 · 左滑加载历史</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')">
|
||||
<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>
|
||||
@@ -318,53 +352,53 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
<!-- 三栏主体 -->
|
||||
<div class="flex min-h-0 flex-1">
|
||||
<!-- 左：命中列表 -->
|
||||
<aside class="flex w-56 shrink-0 flex-col border-r border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 p-2">
|
||||
<input v-model="filter" type="text" class="ipt w-full !py-1 text-xs" placeholder="搜索代码 / 名称" />
|
||||
<aside class="flex w-56 shrink-0 flex-col border-r border-[#26272E] bg-[#101014]">
|
||||
<div class="border-b border-[#1E2026] p-2">
|
||||
<input v-model="filter" type="text" class="ipt w-full !py-1 text-[13px]" placeholder="搜索代码 / 名称" />
|
||||
</div>
|
||||
<div class="min-h-0 flex-1 overflow-y-auto">
|
||||
<button
|
||||
v-for="it in filteredItems"
|
||||
:key="it.ts_code"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 border-b border-slate-50 px-3 py-2 text-left transition-colors"
|
||||
:class="it.ts_code === active ? 'bg-blue-50' : 'hover:bg-slate-50'"
|
||||
class="flex w-full items-center gap-2 border-b border-[#1E2026] px-3 py-2 text-left transition-colors"
|
||||
:class="it.ts_code === active ? 'bg-blue-500/15' : 'hover:bg-[#26272E]'"
|
||||
@click="active = it.ts_code"
|
||||
>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="block truncate text-[13px] font-medium text-slate-800">{{ it.name }}</span>
|
||||
<span class="block text-[11px] text-slate-400">{{ it.ts_code }}</span>
|
||||
<span class="block truncate text-sm font-medium text-[#E8EAED]">{{ it.name }}</span>
|
||||
<span class="block text-xs text-[#9BA3AE]">{{ it.ts_code }}</span>
|
||||
</span>
|
||||
<span class="text-right">
|
||||
<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)">
|
||||
<span class="block text-sm font-medium" :class="pctClass(it.pct_chg)">{{ fmt(it.close) }}</span>
|
||||
<span class="block text-xs" :class="pctClass(it.pct_chg)">
|
||||
{{ it.pct_chg == null ? '—' : (it.pct_chg > 0 ? '+' : '') + it.pct_chg.toFixed(2) + '%' }}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div v-if="filteredItems.length === 0" class="px-3 py-8 text-center text-xs text-slate-400">无匹配</div>
|
||||
<div v-if="filteredItems.length === 0" class="px-3 py-8 text-center text-[13px] text-[#9BA3AE]">无匹配</div>
|
||||
</div>
|
||||
<div class="border-t border-slate-100 px-3 py-2 text-[11px] text-slate-400">共 {{ filteredItems.length }} 只</div>
|
||||
<div class="border-t border-[#1E2026] px-3 py-2 text-xs text-[#9BA3AE]">共 {{ filteredItems.length }} 只</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中：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>
|
||||
<div class="flex shrink-0 flex-wrap items-center gap-1.5 bg-[#101014] px-3 py-2">
|
||||
<span class="text-xs text-[#9BA3AE]">副图：</span>
|
||||
<div
|
||||
v-for="s in SUBS"
|
||||
:key="s.key"
|
||||
class="flex items-center overflow-hidden rounded-md border"
|
||||
:class="subPanes.includes(s.key) ? 'border-blue-600' : 'border-slate-200'"
|
||||
:class="subPanes.includes(s.key) ? 'border-blue-500' : 'border-[#26272E]'"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
draggable="true"
|
||||
class="px-2.5 py-1 text-xs transition-colors"
|
||||
class="px-2.5 py-1 text-[13px] transition-colors"
|
||||
:class="subPanes.includes(s.key)
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-white text-slate-400 line-through'"
|
||||
: 'bg-[#101014] text-[#9BA3AE] line-through'"
|
||||
:title="subPanes.includes(s.key) ? '点击隐藏 · 拖动排序 · 右侧按钮调高度' : '点击显示'"
|
||||
@click="toggleSub(s.key)"
|
||||
@dragstart="onDragStart($event, s.key)"
|
||||
@@ -374,14 +408,14 @@ 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-[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>
|
||||
<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"
|
||||
class="rounded-md border px-2.5 py-1 text-xs transition-colors"
|
||||
:class="showBoll ? 'border-purple-500 bg-purple-500 text-white' : 'border-slate-200 bg-white text-slate-400'"
|
||||
class="rounded-md border px-2.5 py-1 text-[13px] transition-colors"
|
||||
:class="showBoll ? 'border-purple-500 bg-purple-500 text-white' : 'border-[#26272E] bg-[#101014] text-[#9BA3AE]'"
|
||||
title="主图叠加布林带"
|
||||
@click="showBoll = !showBoll"
|
||||
>BOLL</button>
|
||||
@@ -389,20 +423,20 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
<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"
|
||||
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]"
|
||||
@click="showMaConfig = !showMaConfig; showTipConfig = false"
|
||||
>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"
|
||||
class="absolute left-0 top-8 z-20 w-52 rounded-lg border border-[#33353D] bg-[#16181D] p-2.5 shadow-lg shadow-black/60"
|
||||
>
|
||||
<div class="mb-2 text-[11px] text-slate-400">勾选主图显示的均线</div>
|
||||
<div class="mb-2 text-xs text-[#9BA3AE]">勾选主图显示的均线</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'"
|
||||
class="flex cursor-pointer items-center justify-center rounded border px-1 py-1 text-[13px]"
|
||||
:class="maPeriods.includes(p) ? 'border-blue-500 bg-blue-500/15 text-blue-300' : 'border-[#33353D] text-[#A8AFB8] hover:border-[#3A3D46] hover:text-[#E8EAED]'"
|
||||
>
|
||||
<input type="checkbox" class="hidden" :checked="maPeriods.includes(p)" @change="toggleMa(p)" />
|
||||
MA{{ p }}
|
||||
@@ -412,47 +446,79 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
<input
|
||||
v-model="customMa"
|
||||
type="number" min="1" max="500"
|
||||
class="ipt w-full !py-1 text-xs"
|
||||
class="ipt w-full !py-1 text-[13px]"
|
||||
placeholder="自定义周期"
|
||||
@keyup.enter="addCustomMa"
|
||||
/>
|
||||
<button type="button" class="btn-primary !px-2 !py-1 text-xs" @click="addCustomMa">加</button>
|
||||
<button type="button" class="btn-primary !px-2 !py-1 text-[13px]" @click="addCustomMa">加</button>
|
||||
</div>
|
||||
<div class="mt-1.5 text-[11px] text-slate-400">当前：{{ maPeriods.map((p: number) => 'MA' + p).join(' / ') || '无' }}</div>
|
||||
<div class="mt-1.5 text-xs text-[#9BA3AE]">当前：{{ maPeriods.map((p: number) => 'MA' + p).join(' / ') || '无' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="ml-auto text-[11px] text-slate-400">点击开关 · 拖动排序 · ▲▼调高度 · 右上工具栏画线</span>
|
||||
<!-- 浮层指标配置（鼠标悬停信息框每行显示哪些指标） -->
|
||||
<div class="relative">
|
||||
<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]"
|
||||
@click="showTipConfig = !showTipConfig; showMaConfig = false"
|
||||
>浮层设置</button>
|
||||
<div
|
||||
v-if="showTipConfig"
|
||||
class="absolute left-0 top-8 z-20 w-56 rounded-lg border border-[#33353D] bg-[#16181D] p-2.5 shadow-lg shadow-black/60"
|
||||
>
|
||||
<div class="mb-2 text-xs text-[#9BA3AE]">勾选鼠标浮层里逐行显示的指标</div>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<label
|
||||
v-for="f in TOOLTIP_FIELDS"
|
||||
:key="f.key"
|
||||
class="flex cursor-pointer items-center justify-center rounded border px-1 py-1 text-[13px]"
|
||||
:class="tooltipFields.includes(f.key) ? 'border-blue-500 bg-blue-500/15 text-blue-300' : 'border-[#33353D] text-[#A8AFB8] hover:border-[#3A3D46] hover:text-[#E8EAED]'"
|
||||
>
|
||||
<input type="checkbox" class="hidden" :checked="tooltipFields.includes(f.key)" @change="toggleTipField(f.key)" />
|
||||
{{ 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>
|
||||
</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">
|
||||
<div class="relative min-h-0 flex-1 bg-black p-1">
|
||||
<div v-if="loading" class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-black/85 text-sm text-[#9BA3AE]">
|
||||
<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 }} 加载日线中…
|
||||
</div>
|
||||
<div v-else-if="error" class="flex h-full items-center justify-center text-sm text-red-600">{{ error }}</div>
|
||||
<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"
|
||||
:ticker="data.ts_code"
|
||||
:candles="data.candles"
|
||||
:indicators="data.indicators"
|
||||
:has-more="data.has_more ?? false"
|
||||
:load-older="loadOlder"
|
||||
:sub-panes="subPanes"
|
||||
:ma-periods="maPeriods"
|
||||
:sub-heights="subHeights"
|
||||
:show-boll="showBoll"
|
||||
:timeframe="timeframe"
|
||||
:tooltip-fields="tooltipFields"
|
||||
/>
|
||||
<div v-else class="flex h-full items-center justify-center text-sm text-slate-400">无数据</div>
|
||||
<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-slate-200 bg-white p-4">
|
||||
<div class="border-b border-slate-100 pb-3">
|
||||
<div class="text-[15px] font-semibold text-slate-900">{{ data.info.name }}</div>
|
||||
<div class="mt-0.5 text-xs text-slate-400">
|
||||
<aside v-if="data" class="w-72 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]">
|
||||
{{ data.info.ts_code }}
|
||||
<span v-if="data.info.market" class="ml-1 rounded bg-slate-100 px-1.5 py-0.5">{{ data.info.market }}</span>
|
||||
<span v-if="data.info.market" class="ml-1 rounded bg-[#1E2026] px-1.5 py-0.5">{{ data.info.market }}</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-2xl font-semibold" :class="pctClass(data.info.pct_chg)">{{ fmt(data.info.close) }}</span>
|
||||
@@ -462,7 +528,7 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid grid-cols-2 gap-y-2 text-[13px]">
|
||||
<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)],
|
||||
@@ -481,14 +547,14 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
['上市日期', fmtListDate(data.info.list_date)],
|
||||
['数据日期', (data.info.trade_date ?? '').slice(0, 10) || '—'],
|
||||
]" :key="i">
|
||||
<span class="text-slate-400">{{ row[0] }}</span>
|
||||
<span class="text-right text-slate-800">{{ row[1] }}</span>
|
||||
<span class="text-[#9BA3AE]">{{ row[0] }}</span>
|
||||
<span class="text-right text-[#E8EAED]">{{ row[1] }}</span>
|
||||
</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="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 [
|
||||
['股东户数', '—'],
|
||||
@@ -496,17 +562,17 @@ const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0,
|
||||
['分红率', '—'],
|
||||
['股息率', '—'],
|
||||
]" :key="i">
|
||||
<span class="text-slate-400">{{ row[0] }}</span>
|
||||
<span class="text-right text-slate-300" title="数据源待接入">{{ row[1] }}</span>
|
||||
<span class="text-[#9BA3AE]">{{ row[0] }}</span>
|
||||
<span class="text-right text-[#C3C9D2]" 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="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">
|
||||
<span v-if="data.info.industry" class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600">{{ data.info.industry }}</span>
|
||||
<span v-if="data.info.area" class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600">{{ data.info.area }}</span>
|
||||
<span v-if="data.info.industry" class="rounded-full bg-[#1E2026] px-2.5 py-0.5 text-[13px] text-[#A8AFB8]">{{ data.info.industry }}</span>
|
||||
<span v-if="data.info.area" class="rounded-full bg-[#1E2026] px-2.5 py-0.5 text-[13px] text-[#A8AFB8]">{{ data.info.area }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -24,8 +24,8 @@ const freshness = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-[13px] text-slate-600">
|
||||
<span :class="freshness.tone === 'ok' ? 'text-emerald-600' : freshness.tone === 'warn' ? 'text-amber-600' : 'text-slate-400'">
|
||||
<div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3 text-sm text-[#A8AFB8]">
|
||||
<span :class="freshness.tone === 'ok' ? 'text-emerald-400' : freshness.tone === 'warn' ? 'text-amber-400' : 'text-[#9BA3AE]'">
|
||||
<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">
|
||||
<template v-if="freshness.tone === 'ok'">
|
||||
<path d="M22 11.1V12a10 10 0 11-5.9-9.1" />
|
||||
@@ -42,8 +42,8 @@ const freshness = computed(() => {
|
||||
<template v-if="status && status.running">
|
||||
<span class="flex min-w-[200px] 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-xs text-slate-500">{{ status.step || '同步中…' }}（{{ status.done_days }}/{{ status.total_days }}）</span>
|
||||
<span class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
||||
<span class="whitespace-nowrap text-[13px] text-[#A8AFB8]">{{ status.step || '同步中…' }}（{{ status.done_days }}/{{ status.total_days }}）</span>
|
||||
<span 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: (status.total_days ? Math.min(100, (status.done_days / status.total_days) * 100) : 0) + '%' }" />
|
||||
</span>
|
||||
</span>
|
||||
@@ -56,7 +56,7 @@ const freshness = computed(() => {
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<div v-if="status && status.error" class="w-full text-amber-600">
|
||||
<div v-if="status && status.error" class="w-full 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>
|
||||
{{ status.error }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user