feat: 优化游资详情股票列表

This commit is contained in:
wanghep
2026-04-18 13:06:11 +08:00
parent 5a5dd3c9fd
commit d661b801df
6 changed files with 440 additions and 159 deletions

View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, shallowRef } from 'vue'
import type { TraderDetail, TraderListItem } from '../types'
import { formatDate, priceTone } from '../utils/format'
import type { TraderDetail, TraderListItem, TraderStock } from '../types'
import { compactMoney, formatDate, formatSignedWanAmount, priceTone } from '../utils/format'
const props = defineProps<{
traders: TraderListItem[]
@ -15,31 +15,78 @@ const emit = defineEmits<{
selectStock: [stockCode: string]
}>()
const profileText = computed(() => {
const selectedDateFilter = shallowRef('')
const stockNameFilter = shallowRef('')
const netGrowthFilter = shallowRef<'all' | 'increasing'>('all')
const sortKey = shallowRef<'last_trade_date' | 'total_net_amount_wan' | 'action_count'>('last_trade_date')
function inferBoardLabel(stockCode: string): string {
if (stockCode.startsWith('688')) return '科创板'
if (stockCode.startsWith('300') || stockCode.startsWith('301')) return '创业板'
if (stockCode.startsWith('8') || stockCode.startsWith('4') || stockCode.startsWith('920')) return '北交所'
if (stockCode.startsWith('60') || stockCode.startsWith('601') || stockCode.startsWith('603') || stockCode.startsWith('605')) return '沪主板'
if (stockCode.startsWith('000') || stockCode.startsWith('001') || stockCode.startsWith('002') || stockCode.startsWith('003')) return '深主板'
return 'A股'
}
const compactProfileText = computed(() => {
const detail = props.traderDetail
if (!detail) return '等待选择游资。'
const tags = detail.trader.style_tags?.join('') || '暂无风格标签'
return `${detail.trader.name} 当前风格聚焦 ${tags}。本页只保留游资档案和近期参与股票列表,动作时间线已移除。`
if (!detail) return ''
const tags = detail.trader.style_tags?.slice(0, 3).join(' / ') || '暂无标签'
const seatCount = detail.seats.length
const stockCount = detail.stocks.length
const warningCount = detail.stocks.filter((item) => item.has_sell_alert).length
return `${detail.trader.name} · ${tags} · ${seatCount}席位 · ${stockCount}股票 · ${warningCount}预警`
})
const summaryCards = computed(() => {
const detail = props.traderDetail
if (!detail) return []
return [
{ label: '近期参与股票数', value: detail.stocks.length, tone: '' },
{
label: '当前卖出预警',
value: detail.stocks.filter((item) => item.has_sell_alert).length,
tone: 'danger',
},
{
label: '慢流出观察',
value: detail.stocks.filter((item) => item.has_slow_exit).length,
tone: 'watch',
},
{ label: '核心席位', value: detail.seats.length, tone: 'focus' },
{ label: '股票数', value: detail.stocks.length, tone: '' },
{ label: '卖出预警', value: detail.stocks.filter((item) => item.has_sell_alert).length, tone: 'danger' },
{ label: '慢流出', value: detail.stocks.filter((item) => item.has_slow_exit).length, tone: 'watch' },
{ label: '席位数', value: detail.seats.length, tone: 'focus' },
]
})
const filteredStocks = computed(() => {
const detail = props.traderDetail
if (!detail) return []
const keyword = stockNameFilter.value.trim().toLowerCase()
const filtered = detail.stocks.filter((stock) => {
const matchName =
!keyword ||
stock.stock_name.toLowerCase().includes(keyword) ||
stock.stock_code.toLowerCase().includes(keyword)
const matchDate = !selectedDateFilter.value || stock.last_trade_date === selectedDateFilter.value
const matchNetGrowth = netGrowthFilter.value === 'all' || stock.is_net_amount_increasing
return matchName && matchDate && matchNetGrowth
})
const sorted = [...filtered]
sorted.sort((left, right) => {
if (sortKey.value === 'total_net_amount_wan') {
return (right.total_net_amount_wan ?? 0) - (left.total_net_amount_wan ?? 0)
}
if (sortKey.value === 'action_count') {
return right.action_count - left.action_count
}
return (right.last_trade_date || '').localeCompare(left.last_trade_date || '')
})
return sorted
})
const availableDates = computed(() => {
const detail = props.traderDetail
if (!detail) return []
return [...new Set(detail.stocks.map((item) => item.last_trade_date).filter(Boolean))] as string[]
})
function netTone(stock: TraderStock) {
return priceTone(String(stock.total_net_amount_wan ?? ''))
}
</script>
<template>
@ -48,7 +95,7 @@ const summaryCards = computed(() => {
<div>
<p class="screen-kicker">02 Trader Detail</p>
<h2 class="screen-title">
游资详情
游资详情
<span v-if="traderDetail">· {{ traderDetail.trader.name }}</span>
</h2>
</div>
@ -67,76 +114,113 @@ const summaryCards = computed(() => {
</header>
<div v-if="traderDetail" class="trader-layout">
<div class="header-card">
<article class="profile-card">
<h3 class="profile-title">
{{ traderDetail.trader.name }}
<span v-if="traderDetail.trader.alias_name">
/ {{ traderDetail.trader.alias_name }}
</span>
</h3>
<p class="profile-desc">{{ profileText }}</p>
<div class="chip-list">
<span
v-for="seat in traderDetail.seats"
:key="seat.seat_name"
class="chip"
>
{{ seat.seat_name }}
</span>
<article class="profile-card compact">
<div class="profile-head compact">
<div class="profile-line">
<h3 class="profile-title compact">
{{ traderDetail.trader.name }}
<span v-if="traderDetail.trader.alias_name">/ {{ traderDetail.trader.alias_name }}</span>
</h3>
<p class="profile-desc compact">{{ compactProfileText }}</p>
</div>
</article>
<div class="summary-grid">
<article
v-for="item in summaryCards"
:key="item.label"
class="summary-box"
:class="item.tone"
>
<p class="summary-label">{{ item.label }}</p>
<h3 class="summary-value">{{ item.value }}</h3>
</article>
</div>
</div>
<article class="card-panel">
<div class="section-head">
<h3 class="section-title">近期参与股票列表</h3>
<span class="pill">点击任意股票进入详情</span>
</div>
<div class="stock-table">
<button
v-for="stock in traderDetail.stocks.slice(0, 18)"
:key="stock.stock_code"
class="stock-row"
type="button"
@click="emit('selectStock', stock.stock_code)"
>
<div class="stock-core">
<strong>{{ stock.stock_name }}</strong>
<span>{{ stock.stock_code }}</span>
<div class="summary-inline">
<div
v-for="item in summaryCards"
:key="item.label"
class="summary-chip"
:class="item.tone"
>
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</div>
<div>{{ stock.latest_price ?? '-' }}</div>
<div :class="priceTone(stock.pct_chg)">{{ stock.pct_chg ?? '-' }}</div>
<div>{{ stock.action_count }} 次动作</div>
<div>{{ formatDate(stock.last_trade_date) }}</div>
<div class="tag-group">
<span v-if="stock.has_sell_alert" class="tag red">卖出预警</span>
<span v-if="stock.has_slow_exit" class="tag orange">慢流出</span>
<span v-if="!stock.has_sell_alert && !stock.has_slow_exit" class="tag blue">跟踪中</span>
</div>
</button>
</div>
</div>
</article>
<div class="content-grid">
<article class="card-panel stock-panel">
<div class="section-head">
<div>
<h3 class="section-title">股票列表</h3>
<p class="section-caption">支持时间名称净额趋势筛选并展示行业上市板块总市值和净额</p>
</div>
<span class="pill">{{ filteredStocks.length }} </span>
</div>
<div class="filter-bar">
<label class="filter-item">
<span>时间</span>
<select v-model="selectedDateFilter">
<option value="">全部时间</option>
<option v-for="date in availableDates" :key="date" :value="date">{{ date }}</option>
</select>
</label>
<label class="filter-item">
<span>名称</span>
<input v-model="stockNameFilter" type="text" placeholder="股票名称 / 代码">
</label>
<label class="filter-item">
<span>排序</span>
<select v-model="sortKey">
<option value="last_trade_date">按时间</option>
<option value="total_net_amount_wan">按净额</option>
<option value="action_count">按动作数</option>
</select>
</label>
<label class="filter-item">
<span>净额趋势</span>
<select v-model="netGrowthFilter">
<option value="all">全部趋势</option>
<option value="increasing">净额连续增大</option>
</select>
</label>
</div>
<div class="stock-table">
<button
v-for="stock in filteredStocks"
:key="stock.stock_code"
class="stock-row"
type="button"
@click="emit('selectStock', stock.stock_code)"
>
<div class="stock-core">
<strong>{{ stock.stock_name }}</strong>
<span>{{ stock.stock_code }}</span>
</div>
<div>{{ stock.industry || '行业待补充' }}</div>
<div>{{ inferBoardLabel(stock.stock_code) }}</div>
<div>{{ compactMoney(stock.total_market_value) }}</div>
<div>{{ stock.latest_price ?? '-' }}</div>
<div :class="priceTone(stock.pct_chg)">{{ stock.pct_chg ?? '-' }}</div>
<div class="net-value-cell" :class="netTone(stock)">{{ formatSignedWanAmount(stock.total_net_amount_wan) }}</div>
<div>{{ formatDate(stock.last_trade_date) }}</div>
<div class="tag-group">
<span v-if="stock.has_sell_alert" class="tag red">卖出预警</span>
<span v-if="stock.has_slow_exit" class="tag orange">慢流出</span>
<span v-if="stock.is_net_amount_increasing" class="tag gold">净额递增</span>
<span v-if="!stock.has_sell_alert && !stock.has_slow_exit" class="tag blue">跟踪中</span>
</div>
</button>
</div>
</article>
</div>
</div>
</section>
</template>
<style scoped>
.screen {
padding: 24px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 14px;
height: 100%;
min-height: 0;
padding: 16px;
border: 1px solid var(--color-line);
border-radius: 30px;
background: linear-gradient(180deg, rgba(16, 23, 33, 0.96), rgba(9, 14, 21, 0.98));
@ -144,21 +228,22 @@ const summaryCards = computed(() => {
}
.screen-head,
.section-head {
.section-head,
.profile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.screen-head {
align-items: center;
margin-bottom: 18px;
margin-bottom: 0;
}
.screen-kicker {
margin: 0 0 6px;
color: var(--color-gold-soft);
font-size: 12px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
@ -171,30 +256,28 @@ const summaryCards = computed(() => {
.screen-title {
font-family: var(--font-display);
font-size: 28px;
font-size: 24px;
}
.screen-toolbar,
.chip-list,
.tag-group {
display: flex;
gap: 10px;
gap: 8px;
flex-wrap: wrap;
}
.pill,
.pill-button,
.chip,
.tag {
border-radius: 999px;
}
.pill,
.pill-button {
padding: 8px 12px;
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--color-muted);
font-size: 12px;
font-size: 11px;
background: rgba(255, 255, 255, 0.04);
}
@ -208,97 +291,155 @@ const summaryCards = computed(() => {
border-color: transparent;
}
.header-card {
.trader-layout,
.content-grid,
.stock-table {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 16px;
margin-bottom: 16px;
gap: 12px;
min-height: 0;
}
.trader-layout {
grid-template-rows: auto minmax(0, 1fr);
}
.content-grid {
grid-template-columns: minmax(0, 1fr);
}
.profile-card,
.summary-box,
.card-panel,
.stock-row {
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
border-radius: 18px;
}
.profile-card,
.card-panel {
padding: 14px;
background: rgba(255, 255, 255, 0.03);
}
.profile-card {
padding: 20px;
background: linear-gradient(135deg, rgba(212, 163, 92, 0.18), rgba(255, 255, 255, 0.02));
background: linear-gradient(135deg, rgba(212, 163, 92, 0.16), rgba(255, 255, 255, 0.02));
}
.profile-card.compact {
padding: 10px 14px;
}
.profile-title {
font-family: var(--font-display);
font-size: 34px;
font-size: 22px;
}
.profile-desc {
margin: 10px 0 16px;
color: #d6ceb9;
line-height: 1.8;
.profile-title.compact {
font-size: 15px;
white-space: nowrap;
}
.profile-desc,
.section-caption {
margin: 6px 0 0;
color: var(--color-muted);
font-size: 11px;
line-height: 1.6;
}
.profile-desc.compact {
margin: 0;
font-size: 10px;
line-height: 1.35;
}
.profile-head.compact {
gap: 10px;
}
.profile-line {
display: grid;
gap: 4px;
min-width: 0;
}
.summary-inline {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.summary-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--color-muted);
font-size: 10px;
}
.summary-chip strong {
font-family: var(--font-mono);
font-size: 14px;
}
.chip {
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: var(--color-muted);
font-size: 12px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.summary-box {
padding: 16px;
background: rgba(255, 255, 255, 0.03);
}
.summary-label {
margin: 0;
color: var(--color-muted);
font-size: 12px;
}
.summary-value {
margin-top: 10px;
font-family: var(--font-mono);
font-size: 28px;
}
.summary-box.danger .summary-value {
.summary-chip.danger strong {
color: var(--color-red);
}
.summary-box.watch .summary-value {
.summary-chip.watch strong {
color: var(--color-orange);
}
.summary-box.focus .summary-value {
.summary-chip.focus strong {
color: var(--color-gold-soft);
}
.card-panel {
padding: 18px;
.stock-panel {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
}
.filter-bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.filter-item {
display: grid;
gap: 6px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
color: var(--color-muted);
font-size: 11px;
}
.filter-item select,
.filter-item input {
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--color-text);
background: rgba(8, 12, 18, 0.95);
}
.stock-table {
display: grid;
gap: 10px;
overflow: auto;
padding-right: 4px;
}
.stock-row {
display: grid;
grid-template-columns: 1.2fr 0.7fr 0.7fr 0.8fr 0.9fr 1fr;
grid-template-columns: 1.45fr 0.75fr 0.92fr 0.9fr 0.72fr 0.72fr 0.95fr 0.9fr 1fr;
gap: 10px;
width: 100%;
padding: 14px;
padding: 12px;
align-items: center;
text-align: left;
background: rgba(255, 255, 255, 0.02);
@ -309,21 +450,35 @@ const summaryCards = computed(() => {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.stock-core strong {
font-size: 14px;
}
.stock-core span {
color: var(--color-muted);
font-size: 12px;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.net-value-cell {
font-family: var(--font-display);
font-size: 17px;
line-height: 1;
}
.tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 74px;
min-width: 66px;
padding: 5px 10px;
border: 1px solid transparent;
font-size: 11px;
font-size: 10px;
font-weight: 700;
}
@ -339,6 +494,12 @@ const summaryCards = computed(() => {
border-color: rgba(255, 174, 66, 0.18);
}
.tag.gold {
color: var(--color-gold-soft);
background: rgba(212, 163, 92, 0.16);
border-color: rgba(212, 163, 92, 0.24);
}
.tag.blue {
color: #acd8ff;
background: rgba(90, 184, 255, 0.14);
@ -357,15 +518,27 @@ const summaryCards = computed(() => {
color: var(--color-muted);
}
@media (max-width: 1160px) {
.header-card {
@media (max-width: 1280px) {
.content-grid,
.filter-bar {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.stock-row {
grid-template-columns: 1fr;
}
.stock-table {
overflow: auto;
}
.profile-head.compact {
align-items: flex-start;
flex-direction: column;
}
.summary-inline {
justify-content: flex-start;
}
}
</style>

View File

@ -72,8 +72,14 @@ export interface TraderStock {
last_trade_date: string | null
buy_action_count: number
sell_action_count: number
total_net_amount_wan?: number | null
has_sell_alert: number
has_slow_exit: number
is_net_amount_increasing?: boolean
industry?: string | null
market?: string | null
total_market_value?: number | null
circulating_market_value?: number | null
}
export interface TraderDetail {