wanghep/lhbfx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve stock detail charts and quote fallbacks

Browse Source
This commit is contained in:
wanghep
2026-04-18 22:16:03 +08:00
parent dc205c5f1b
commit 36fda633df
9 changed files with 851 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

522
frontend/src/components/StockActionTimelineChart.vue Normal file
View File

@ -0,0 +1,522 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
import type { TraderAction } from '../types'
import { formatSignedWanAmount, formatWanAmount, numberFromText } from '../utils/format'
type AggregatedActionRow = {
trade_date: string
buyTotalWan: number
sellTotalWan: number
netTotalWan: number
cumulativeNetWan: number
traderCount: number
}
const props = defineProps<{
actions: TraderAction[]
}>()
const chartContainerRef = useTemplateRef<HTMLDivElement>('chartContainerRef')
const hoveredIndex = shallowRef<number | null>(null)
const containerWidth = shallowRef(0)
const aggregatedRows = computed<AggregatedActionRow[]>(() => {
const grouped = new Map<
string,
{
trade_date: string
buyTotalWan: number
sellTotalWan: number
netTotalWan: number
traders: Set<string>
}
>()
for (const action of props.actions) {
const buyTotalWan = numberFromText(action.buy_amount_wan) ?? 0
const sellTotalWan = numberFromText(action.sell_amount_wan) ?? 0
const netTotalWan = numberFromText(action.net_amount_wan) ?? buyTotalWan - sellTotalWan
const current = grouped.get(action.trade_date) ?? {
trade_date: action.trade_date,
buyTotalWan: 0,
sellTotalWan: 0,
netTotalWan: 0,
traders: new Set<string>(),
}
current.buyTotalWan += buyTotalWan
current.sellTotalWan += sellTotalWan
current.netTotalWan += netTotalWan
if (action.matched_trader_name) {
current.traders.add(action.matched_trader_name)
}
grouped.set(action.trade_date, current)
}
let cumulativeNetWan = 0
return [...grouped.values()]
.sort((left, right) => left.trade_date.localeCompare(right.trade_date))
.map((item) => {
cumulativeNetWan += item.netTotalWan
return {
trade_date: item.trade_date,
buyTotalWan: item.buyTotalWan,
sellTotalWan: item.sellTotalWan,
netTotalWan: item.netTotalWan,
cumulativeNetWan,
traderCount: item.traders.size,
}
})
})
const chartModel = computed(() => {
const rows = aggregatedRows.value
const measuredWidth = containerWidth.value || 0
const width = Math.max(measuredWidth, 320, rows.length * 54)
const height = 260
const left = 56
const right = 64
const top = 18
const bottom = 34
const innerWidth = width - left - right
const innerHeight = height - top - bottom
const emptyModel = {
width,
height,
left,
right,
top,
bottom,
zeroY: top + innerHeight / 2,
stepX: 0,
buyBars: [] as Array<{ x: number; y: number; height: number; title: string }>,
sellBars: [] as Array<{ x: number; y: number; height: number; title: string }>,
netPoints: [] as Array<{ x: number; y: number }>,
cumulativePoints: [] as Array<{ x: number; y: number }>,
labels: [] as Array<{ x: number; label: string; visible: boolean }>,
leftAxis: [] as Array<{ y: number; label: string }>,
rightAxis: [] as Array<{ y: number; label: string }>,
hoverColumns: [] as Array<{ x: number; width: number }>,
}
if (!rows.length) {
return emptyModel
}
const leftMax = Math.max(
...rows.flatMap((row) => [Math.abs(row.buyTotalWan), Math.abs(row.sellTotalWan), Math.abs(row.netTotalWan)]),
1,
)
const zeroY = top + innerHeight / 2
const yOfLeft = (value: number) => zeroY - (value / leftMax) * (innerHeight / 2)
const cumulativeValues = rows.map((row) => row.cumulativeNetWan)
const rightMin = Math.min(0, ...cumulativeValues)
const rightMax = Math.max(0, ...cumulativeValues)
const rightRange = rightMax - rightMin || 1
const yOfRight = (value: number) => top + ((rightMax - value) / rightRange) * innerHeight
const stepX = rows.length === 1 ? innerWidth / 2 : innerWidth / (rows.length - 1)
const groupWidth = Math.max(20, Math.min(28, stepX * 0.58))
const barWidth = Math.max(7, groupWidth / 2 - 2)
const labelStep = Math.max(1, Math.ceil(rows.length / 6))
return {
width,
height,
left,
right,
top,
bottom,
zeroY,
stepX,
buyBars: rows.map((row, index) => {
const x = left + (rows.length === 1 ? innerWidth / 2 : index * stepX)
const y = yOfLeft(row.buyTotalWan)
return {
x: x - barWidth - 2,
y,
height: Math.max(2, zeroY - y),
title: `${row.trade_date}\n买入 ${formatWanAmount(row.buyTotalWan)}\n卖出 ${formatWanAmount(row.sellTotalWan)}\n净额 ${formatSignedWanAmount(row.netTotalWan)}`,
}
}),
sellBars: rows.map((row, index) => {
const x = left + (rows.length === 1 ? innerWidth / 2 : index * stepX)
const y = zeroY
const sellY = yOfLeft(-row.sellTotalWan)
return {
x: x + 2,
y,
height: Math.max(2, sellY - zeroY),
title: `${row.trade_date}\n买入 ${formatWanAmount(row.buyTotalWan)}\n卖出 ${formatWanAmount(row.sellTotalWan)}\n净额 ${formatSignedWanAmount(row.netTotalWan)}`,
}
}),
netPoints: rows.map((row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX),
y: yOfLeft(row.netTotalWan),
})),
cumulativePoints: rows.map((row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX),
y: yOfRight(row.cumulativeNetWan),
})),
labels: rows.map((row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX),
label: row.trade_date.slice(5),
visible: index % labelStep === 0 || index === rows.length - 1,
})),
leftAxis: Array.from({ length: 5 }, (_, index) => {
const value = leftMax - (leftMax * 2 * index) / 4
return { y: yOfLeft(value), label: formatSignedWanAmount(value) }
}),
rightAxis: Array.from({ length: 5 }, (_, index) => {
const value = rightMax - (rightRange * index) / 4
return { y: yOfRight(value), label: formatSignedWanAmount(value) }
}),
hoverColumns: rows.map((_row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX) - Math.max(stepX, 20) / 2,
width: Math.max(stepX, 20),
})),
}
})
const netLinePoints = computed(() => chartModel.value.netPoints.map((point) => `${point.x},${point.y}`).join(' '))
const cumulativeLinePoints = computed(() =>
chartModel.value.cumulativePoints.map((point) => `${point.x},${point.y}`).join(' '),
)
const activeRow = computed(() => {
if (!aggregatedRows.value.length) return null
if (hoveredIndex.value === null) return null
return aggregatedRows.value[hoveredIndex.value] ?? null
})
const activeTooltip = computed(() => {
if (hoveredIndex.value === null || !activeRow.value) return null
const point = chartModel.value.netPoints[hoveredIndex.value]
if (!point) return null
const tooltipWidth = 168
const tooltipHeight = 90
const x = Math.min(
Math.max(point.x - tooltipWidth / 2, chartModel.value.left + 6),
chartModel.value.width - chartModel.value.right - tooltipWidth - 6,
)
const prefersBelow = point.y < chartModel.value.top + tooltipHeight + 24
const y = prefersBelow
? Math.min(point.y + 12, chartModel.value.height - chartModel.value.bottom - tooltipHeight - 6)
: Math.max(point.y - tooltipHeight - 12, chartModel.value.top + 6)
return {
x,
y,
width: tooltipWidth,
height: tooltipHeight,
}
})
function setHoveredIndex(index: number) {
hoveredIndex.value = index
}
function clearHoveredIndex() {
hoveredIndex.value = null
}
let resizeObserver: ResizeObserver | null = null
function syncContainerWidth() {
containerWidth.value = chartContainerRef.value?.clientWidth ?? 0
}
onMounted(() => {
syncContainerWidth()
if (chartContainerRef.value) {
resizeObserver = new ResizeObserver(() => {
syncContainerWidth()
})
resizeObserver.observe(chartContainerRef.value)
}
})
onUnmounted(() => {
resizeObserver?.disconnect()
resizeObserver = null
})
</script>
<template>
<div class="action-chart-panel">
<div class="action-chart-head">
<div>
<h4 class="action-chart-title">买卖力度趋势</h4>
<p class="action-chart-note">柱形图显示买卖，折线显示单日净额和累计净额。</p>
</div>
<div class="action-chart-legend">
<span class="legend-chip">
<span class="legend-swatch bar buy" />
买入
</span>
<span class="legend-chip">
<span class="legend-swatch bar sell" />
卖出
</span>
<span class="legend-chip">
<span class="legend-swatch line net" />
当日净额
</span>
<span class="legend-chip">
<span class="legend-swatch line cumulative" />
累计净额
</span>
</div>
</div>
<div v-if="aggregatedRows.length" class="action-chart-body">
<div ref="chartContainerRef" class="action-chart-scroll">
<svg
class="action-chart-svg"
:viewBox="`0 0 ${chartModel.width} ${chartModel.height}`"
:style="{ width: `${chartModel.width}px`, height: `${chartModel.height}px` }"
preserveAspectRatio="none"
@mouseleave="clearHoveredIndex"
>
<g opacity="0.08" stroke="#ffffff">
<line
v-for="tick in chartModel.leftAxis"
:key="`left-grid-${tick.label}`"
:x1="chartModel.left"
:y1="tick.y"
:x2="chartModel.width - chartModel.right"
:y2="tick.y"
/>
</g>
<line
:x1="chartModel.left"
:y1="chartModel.zeroY"
:x2="chartModel.width - chartModel.right"
:y2="chartModel.zeroY"
stroke="rgba(255,255,255,0.22)"
stroke-width="1.2"
/>
<g v-for="(tick, index) in chartModel.leftAxis" :key="`left-axis-${index}`">
<text x="0" :y="tick.y + 4" fill="#93a2b5" font-size="10">{{ tick.label }}</text>
</g>
<g v-for="(tick, index) in chartModel.rightAxis" :key="`right-axis-${index}`">
<text :x="chartModel.width - chartModel.right + 8" :y="tick.y + 4" fill="#c9ad68" font-size="10">
{{ tick.label }}
</text>
</g>
<g v-for="(column, index) in chartModel.hoverColumns" :key="`hover-${index}`">
<rect
:x="column.x"
y="0"
:width="column.width"
:height="chartModel.height"
:fill="hoveredIndex === index ? 'rgba(255,255,255,0.04)' : 'transparent'"
@mouseenter="setHoveredIndex(index)"
/>
</g>
<g v-for="(bar, index) in chartModel.buyBars" :key="`buy-${index}`">
<rect
:x="bar.x"
:y="bar.y"
width="10"
:height="bar.height"
rx="2"
fill="#ff7b7b"
>
<title>{{ bar.title }}</title>
</rect>
</g>
<g v-for="(bar, index) in chartModel.sellBars" :key="`sell-${index}`">
<rect
:x="bar.x"
:y="bar.y"
width="10"
:height="bar.height"
rx="2"
fill="#4ca8ff"
>
<title>{{ bar.title }}</title>
</rect>
</g>
<polyline
fill="none"
stroke="#f0c96a"
stroke-width="2.4"
:points="cumulativeLinePoints"
/>
<polyline
fill="none"
stroke="#7de1b2"
stroke-width="2.2"
:points="netLinePoints"
/>
<g v-for="(point, index) in chartModel.netPoints" :key="`net-point-${index}`">
<circle :cx="point.x" :cy="point.y" r="3.4" fill="#7de1b2" />
</g>
<g v-for="(point, index) in chartModel.cumulativePoints" :key="`cumulative-point-${index}`">
<circle :cx="point.x" :cy="point.y" r="3.2" fill="#f0c96a" />
</g>
<g v-if="activeTooltip && activeRow">
<rect
:x="activeTooltip.x"
:y="activeTooltip.y"
:width="activeTooltip.width"
:height="activeTooltip.height"
rx="10"
fill="rgba(8, 12, 18, 0.96)"
stroke="rgba(255,255,255,0.08)"
/>
<text :x="activeTooltip.x + 12" :y="activeTooltip.y + 18" fill="#ffffff" font-size="11" font-weight="700">
{{ activeRow.trade_date }}
</text>
<text :x="activeTooltip.x + 12" :y="activeTooltip.y + 36" fill="#ff7b7b" font-size="11">
买入 {{ formatWanAmount(activeRow.buyTotalWan) }}
</text>
<text :x="activeTooltip.x + 12" :y="activeTooltip.y + 52" fill="#4ca8ff" font-size="11">
卖出 {{ formatWanAmount(activeRow.sellTotalWan) }}
</text>
<text :x="activeTooltip.x + 12" :y="activeTooltip.y + 68" fill="#7de1b2" font-size="11">
当日净额 {{ formatSignedWanAmount(activeRow.netTotalWan) }}
</text>
<text :x="activeTooltip.x + 12" :y="activeTooltip.y + 84" fill="#f0c96a" font-size="11">
累计净额 {{ formatSignedWanAmount(activeRow.cumulativeNetWan) }}
</text>
</g>
<g v-for="(label, index) in chartModel.labels" :key="`label-${index}`">
<text
v-if="label.visible"
:x="label.x"
:y="chartModel.height - 10"
text-anchor="middle"
fill="#93a2b5"
font-size="10"
>
{{ label.label }}
</text>
</g>
</svg>
</div>
</div>
<p v-else class="action-chart-empty">暂无可展示的买卖明细。</p>
</div>
</template>
<style scoped>
.action-chart-panel {
display: grid;
gap: 10px;
height: 100%;
min-height: 0;
}
.action-chart-head {
display: grid;
gap: 10px;
}
.action-chart-title {
margin: 0;
font-size: 15px;
}
.action-chart-note {
margin: 6px 0 0;
color: var(--color-muted);
font-size: 12px;
line-height: 1.55;
}
.action-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.legend-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--color-muted);
font-size: 11px;
background: rgba(255, 255, 255, 0.03);
}
.legend-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 18px;
height: 10px;
}
.legend-swatch.bar {
border-radius: 999px;
}
.legend-swatch.buy {
background: #ff7b7b;
}
.legend-swatch.sell {
background: #4ca8ff;
}
.legend-swatch.line::before {
content: '';
width: 18px;
height: 2px;
border-radius: 999px;
}
.legend-swatch.line.net::before {
background: #7de1b2;
}
.legend-swatch.line.cumulative::before {
background: #f0c96a;
}
.action-chart-body {
display: grid;
gap: 8px;
min-height: 0;
}
.action-chart-scroll {
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 2px;
min-height: 228px;
}
.action-chart-svg {
display: block;
min-height: 228px;
}
.action-chart-empty {
margin: 0;
color: var(--color-muted);
font-size: 12px;
line-height: 1.65;
}
</style>

237
frontend/src/components/StockDetailScreen.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed, shallowRef, useTemplateRef } from 'vue'
import { computed, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
import StockActionTimelineChart from './StockActionTimelineChart.vue'
import type { StockDetail, WarningItem } from '../types'
import {
compactMoney,
@ -44,8 +45,10 @@ const props = defineProps<{
}>()
const chartRef = useTemplateRef<SVGSVGElement>('chartRef')
const warningPopoverRef = useTemplateRef<HTMLDivElement>('warningPopoverRef')
const selectedZoom = shallowRef(80)
const hoveredIndex = shallowRef<number | null>(null)
const showWarningPanel = shallowRef(false)
const zoomOptions = [
{ label: '近40日', count: 40 },
@ -60,11 +63,6 @@ const chartLegendItems = [
{ label: 'S 卖出', tone: '#5ab8ff', type: 'dot' },
] as const
function validText(value: string | null | undefined): string | null {
if (!value || value === '-') return null
return value
}
function formatPercentNumber(value: number | null | undefined): string {
if (value === null || value === undefined) return '-'
return `${value.toFixed(2)}%`
@ -82,10 +80,9 @@ function valueOrFallback(primary: string | null | undefined, fallback: string |
}
const topWarning = computed(() => props.activeWarning ?? props.stockDetail?.warnings[0] ?? null)
const allWarnings = computed(() => props.stockDetail?.warnings ?? [])
const latestOverview = computed(() => props.stockDetail?.overview?.[0] ?? null)
const displayedTraderSummary = computed(() => (props.stockDetail?.trader_summary ?? []).slice(0, 4))
const displayedTraderActions = computed(() => (props.stockDetail?.trader_actions ?? []).slice(0, 6))
const displayedWarnings = computed(() => (props.stockDetail?.warnings ?? []).slice(0, 3))
const totalNetAmountWan = computed(() => {
return (props.stockDetail?.trader_summary ?? []).reduce((sum, item) => sum + (item.total_net_amount_wan ?? 0), 0)
@ -97,17 +94,26 @@ const baseFacts = computed(() => {
const latest = latestOverview.value
if (!stock) return []
const latestPrice = snapshot?.latest_price ?? numberFromText(latest?.price) ?? null
const latestPct = snapshot?.pct_chg ?? numberFromText(validText(latest?.pct_chg)) ?? null
const latestAmount = snapshot?.amount ?? numberFromText(latest?.amount) ?? null
const latestPriceValue =
snapshot?.latest_price != null
? (snapshot.latest_price / 100).toFixed(2)
: valueOrFallback(latest?.price, '-')
const latestPctValue =
snapshot?.pct_chg != null
? formatPercentNumber(snapshot.pct_chg / 100)
: valueOrFallback(latest?.pct_chg, '-')
const latestAmountValue =
snapshot?.amount != null
? formatAmountNumber(snapshot.amount)
: valueOrFallback(latest?.amount, '-')
return [
{ label: '代码', value: stock.stock_code },
{ label: '市场', value: stock.market || 'A股' },
{ label: '行业', value: stock.industry || snapshot?.industry || '-' },
{ label: '最新价', value: latestPrice === null ? '-' : String((latestPrice / 100).toFixed(2)) },
{ label: '涨跌幅', value: latestPct === null ? valueOrFallback(latest?.pct_chg, '-') : formatPercentNumber(latestPct / 100) },
{ label: '成交额', value: latestAmount === null ? valueOrFallback(latest?.amount, '-') : formatAmountNumber(latestAmount) },
{ label: '最新价', value: latestPriceValue },
{ label: '涨跌幅', value: latestPctValue },
{ label: '成交额', value: latestAmountValue },
{ label: '振幅', value: snapshot?.amplitude == null ? '-' : formatPercentNumber(snapshot.amplitude / 100) },
{ label: '换手', value: snapshot?.turnover == null ? '-' : formatPercentNumber(snapshot.turnover / 100) },
{ label: '总市值', value: compactMoney(stock.total_market_value ?? snapshot?.total_market_value ?? null) },
@ -294,6 +300,31 @@ function handleChartMove(event: MouseEvent) {
function clearHover() {
hoveredIndex.value = null
}
function toggleWarningPanel() {
showWarningPanel.value = !showWarningPanel.value
}
function closeWarningPanel() {
showWarningPanel.value = false
}
function handleDocumentPointerDown(event: PointerEvent) {
const root = warningPopoverRef.value
const target = event.target
if (!root || !(target instanceof Node)) return
if (!root.contains(target)) {
closeWarningPanel()
}
}
onMounted(() => {
document.addEventListener('pointerdown', handleDocumentPointerDown)
})
onUnmounted(() => {
document.removeEventListener('pointerdown', handleDocumentPointerDown)
})
</script>
<template>
@ -308,6 +339,42 @@ function clearHover() {
</div>
<div class="screen-toolbar">
<span class="pill active">日K + 操作观点</span>
<div ref="warningPopoverRef" class="warning-popover-wrap">
<button
class="pill warning-trigger"
:class="{ alert: allWarnings.length > 0, open: showWarningPanel }"
type="button"
@click.stop="toggleWarningPanel"
>
预警列表
<span v-if="allWarnings.length">· {{ allWarnings.length }}</span>
</button>
<div v-if="showWarningPanel" class="warning-popover">
<div class="warning-popover-head">
<strong>当前预警情况</strong>
<span>{{ allWarnings.length }} 条</span>
</div>
<div v-if="allWarnings.length" class="warning-popover-list">
<div
v-for="warning in allWarnings"
:key="`${warning.trade_date}-${warning.warning_type}-${warning.trader_name}`"
class="warning-popover-item"
>
<div class="warning-popover-top">
<strong>{{ warning.trader_name }}</strong>
<span class="tag" :class="warning.warning_level === 'high' ? 'red' : 'orange'">
{{ warningLabel(warning.warning_type) }}
</span>
</div>
<p>{{ warning.trade_date }} · {{ warning.trigger_reason }}</p>
</div>
</div>
<p v-else class="warning-popover-empty">当前没有预警，状态正常。</p>
</div>
</div>
<span class="pill" v-if="topWarning">{{ warningLabel(topWarning.warning_type) }}</span>
<span class="pill" v-if="stockDetail">{{ stockDetail.stock.stock_code }}</span>
</div>
@ -515,46 +582,8 @@ function clearHover() {
</div>
</article>
<article class="side-card">
<div class="section-head">
<h4 class="side-title">买卖明细</h4>
<span class="pill">{{ displayedTraderActions.length }} 条</span>
</div>
<div class="detail-list">
<div
v-for="action in displayedTraderActions"
:key="`${action.trade_date}-${action.matched_trader_name}-${action.seat_name}-${action.table_title}`"
class="detail-item"
>
<div class="flow-top">
<strong>{{ action.matched_trader_name }}</strong>
<span>{{ action.trade_date }}</span>
</div>
<div class="flow-line buy">买入 {{ formatWanAmount(action.buy_amount_wan) }}</div>
<div class="flow-line sell">卖出 {{ formatWanAmount(action.sell_amount_wan) }}</div>
<div class="flow-line net" :class="priceTone(String(action.net_amount_wan))">
净额 {{ formatSignedWanAmount(action.net_amount_wan) }}
</div>
<p class="detail-desc">{{ action.seat_name }} · {{ action.table_title }}</p>
</div>
</div>
</article>
<article class="side-card">
<h4 class="side-title">预警情况</h4>
<div
v-for="warning in displayedWarnings"
:key="`${warning.trade_date}-${warning.warning_type}-${warning.trader_name}`"
class="timeline-entry"
>
<div class="timeline-top">
<strong>{{ warning.trader_name }}</strong>
<span class="tag" :class="warning.warning_level === 'high' ? 'red' : 'orange'">
{{ warningLabel(warning.warning_type) }}
</span>
</div>
<p class="timeline-desc">{{ warning.trade_date }} · {{ warning.trigger_reason }}</p>
</div>
<article class="side-card action-chart-card">
<StockActionTimelineChart :actions="stockDetail.trader_actions" />
</article>
</div>
</div>
@ -564,7 +593,7 @@ function clearHover() {
<style scoped>
.screen {
height: 100%;
overflow: hidden;
overflow: visible;
padding: 18px;
border: 1px solid var(--color-line);
border-radius: 30px;
@ -610,6 +639,7 @@ function clearHover() {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.pill,
@ -638,6 +668,83 @@ function clearHover() {
cursor: pointer;
}
.warning-popover-wrap {
position: relative;
}
.warning-trigger {
cursor: pointer;
}
.warning-trigger.alert {
color: #ffb4b4;
background: rgba(255, 93, 93, 0.12);
border-color: rgba(255, 93, 93, 0.2);
}
.warning-trigger.alert.open {
background: rgba(255, 93, 93, 0.18);
}
.warning-popover {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 20;
width: min(380px, calc(100vw - 48px));
max-width: calc(100vw - 48px);
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(8, 12, 18, 0.98);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
}
@media (min-width: 900px) {
.warning-popover {
left: auto;
right: 0;
transform: translateX(-22%);
}
}
.warning-popover-head,
.warning-popover-top {
display: flex;
justify-content: space-between;
gap: 10px;
}
.warning-popover-head {
align-items: center;
margin-bottom: 10px;
color: var(--color-muted);
font-size: 12px;
}
.warning-popover-list {
display: grid;
gap: 10px;
max-height: 280px;
overflow-y: auto;
padding-right: 2px;
}
.warning-popover-item {
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.03);
}
.warning-popover-item p,
.warning-popover-empty {
margin: 8px 0 0;
color: #d6ceb9;
line-height: 1.55;
font-size: 12px;
}
.chart-legend {
display: flex;
gap: 10px;
@ -688,6 +795,8 @@ function clearHover() {
gap: 14px;
height: calc(100% - 52px);
min-height: 0;
overflow: auto;
padding-right: 4px;
}
.main-stack,
@ -702,7 +811,7 @@ function clearHover() {
}
.side-stack {
grid-template-rows: auto repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto minmax(280px, 1fr);
}
.card-panel,
@ -840,9 +949,7 @@ function clearHover() {
font-size: 24px;
}
.judge-desc,
.timeline-desc,
.detail-desc {
.judge-desc {
margin: 0;
color: #d6ceb9;
line-height: 1.55;
@ -862,16 +969,12 @@ function clearHover() {
color: var(--color-muted);
}
.trader-flow,
.detail-item,
.timeline-entry {
.trader-flow {
padding: 10px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.trader-flow:last-child,
.detail-item:last-child,
.timeline-entry:last-child {
.trader-flow:last-child {
border-bottom: 0;
}
@ -906,6 +1009,10 @@ function clearHover() {
color: var(--color-muted);
}
.action-chart-card {
min-height: 280px;
}
.tag {
display: inline-flex;
align-items: center;

23
frontend/src/components/WarningCenterScreen.vue
View File

@ -20,6 +20,13 @@ const countsByType = computed(() => {
return acc
}, {})
})
const countsByTrader = computed(() => {
return props.warnings.reduce<Record<string, number>>((acc, item) => {
acc[item.trader_name] = (acc[item.trader_name] ?? 0) + 1
return acc
}, {})
})
</script>
<template>
@ -41,14 +48,14 @@ const countsByType = computed(() => {
<article class="filter-box">
<h3 class="section-title">游资筛选</h3>
<div
v-for="trader in traders"
:key="trader.id"
class="check-row"
>
<span>{{ trader.name }}</span>
<strong>{{ trader.stock_count }}</strong>
</div>
</article>
v-for="trader in traders"
:key="trader.id"
class="check-row"
>
<span>{{ trader.name }}</span>
<strong>{{ countsByTrader[trader.name] ?? 0 }}</strong>
</div>
</article>
<article class="filter-box">
<h3 class="section-title">预警类型</h3>

12
frontend/src/composables/useDashboardData.ts
View File

@ -229,9 +229,17 @@ export function useDashboardData() {
selectedTraderId.value = traderResult[0].id
}
const preferredStockCode = watchlist.value[0]?.stock_code ?? warningResult[0]?.stock_code
const watchlistCodeSet = new Set(watchlistResult.map((item) => item.stock_code))
const preferredWarningCode =
warningResult.find((item) => watchlistCodeSet.has(item.stock_code))?.stock_code ??
warningResult[0]?.stock_code ??
''
const preferredStockCode = watchlist.value[0]?.stock_code ?? preferredWarningCode
if (preferredWarningCode) {
selectedWarningCode.value = preferredWarningCode
}
if (preferredStockCode) {
selectedWarningCode.value = preferredStockCode
selectedStockCode.value = preferredStockCode
}
} catch (error) {

7
frontend/src/utils/format.ts
View File

@ -11,9 +11,10 @@ export function warningTone(level: string): 'red' | 'orange' | 'gold' {
}
export function priceTone(value: string | null | undefined): 'rise' | 'fall' | 'flat' {
if (!value) return 'flat'
if (String(value).startsWith('-')) return 'fall'
if (String(value).startsWith('+') || Number(value) > 0) return 'rise'
const parsed = numberFromText(value)
if (parsed === null) return 'flat'
if (parsed < 0) return 'fall'
if (parsed > 0) return 'rise'
return 'flat'
}