看股功能更新
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user