feat: 优化游资详情股票列表
This commit is contained in:
wanghep
@ -354,8 +354,7 @@ def fetch_trader_detail(trader_id: int) -> dict[str, Any]:
|
||||
)
|
||||
seats = [_normalize_row(row) for row in cursor.fetchall()]
|
||||
|
||||
cursor.execute(
|
||||
"""
|
||||
stock_query = """
|
||||
SELECT
|
||||
d.stock_code,
|
||||
MAX(COALESCE(o.stock_name, d.stock_name)) AS stock_name,
|
||||
@ -365,22 +364,120 @@ def fetch_trader_detail(trader_id: int) -> dict[str, Any]:
|
||||
MAX(d.trade_date) AS last_trade_date,
|
||||
SUM(CASE WHEN CAST(COALESCE(NULLIF(d.buy_amount_wan, ''), '0') AS DECIMAL(18,2)) > 0 THEN 1 ELSE 0 END) AS buy_action_count,
|
||||
SUM(CASE WHEN CAST(COALESCE(NULLIF(d.sell_amount_wan, ''), '0') AS DECIMAL(18,2)) > 0 THEN 1 ELSE 0 END) AS sell_action_count,
|
||||
SUM(CAST(COALESCE(NULLIF(d.net_amount_wan, ''), '0') AS DECIMAL(18,2))) AS total_net_amount_wan,
|
||||
MAX(CASE WHEN w.warning_type = 'sell_alert' THEN 1 ELSE 0 END) AS has_sell_alert,
|
||||
MAX(CASE WHEN w.warning_type = 'slow_exit_watch' THEN 1 ELSE 0 END) AS has_slow_exit
|
||||
MAX(CASE WHEN w.warning_type = 'slow_exit_watch' THEN 1 ELSE 0 END) AS has_slow_exit,
|
||||
MAX(s.industry) AS industry,
|
||||
MAX(s.market) AS market,
|
||||
MAX(s.total_market_value) AS total_market_value,
|
||||
MAX(s.circulating_market_value) AS circulating_market_value
|
||||
FROM lhb_detail_seats d
|
||||
LEFT JOIN lhb_overview o
|
||||
ON o.stock_code = d.stock_code AND o.trade_date = d.trade_date
|
||||
LEFT JOIN warning_events w
|
||||
ON w.stock_code = d.stock_code AND w.trader_name = d.matched_trader_name
|
||||
LEFT JOIN stocks s
|
||||
ON s.stock_code = d.stock_code
|
||||
WHERE d.matched_trader_name = %s
|
||||
GROUP BY d.stock_code
|
||||
ORDER BY last_trade_date DESC, action_count DESC
|
||||
LIMIT 100
|
||||
""",
|
||||
(trader_name,),
|
||||
)
|
||||
"""
|
||||
|
||||
cursor.execute(stock_query, (trader_name,))
|
||||
stocks = [_normalize_row(row) for row in cursor.fetchall()]
|
||||
|
||||
stock_codes = [row["stock_code"] for row in stocks if row.get("stock_code")]
|
||||
increasing_by_stock: dict[str, bool] = {}
|
||||
if stock_codes:
|
||||
placeholders = ", ".join(["%s"] * len(stock_codes))
|
||||
cursor.execute(
|
||||
f"""
|
||||
SELECT
|
||||
stock_code,
|
||||
trade_date,
|
||||
SUM(CAST(COALESCE(NULLIF(net_amount_wan, ''), '0') AS DECIMAL(18,2))) AS daily_net_amount_wan
|
||||
FROM lhb_detail_seats
|
||||
WHERE matched_trader_name = %s
|
||||
AND stock_code IN ({placeholders})
|
||||
AND trade_date IS NOT NULL
|
||||
GROUP BY stock_code, trade_date
|
||||
ORDER BY stock_code, trade_date
|
||||
""",
|
||||
(trader_name, *stock_codes),
|
||||
)
|
||||
net_history_by_stock: dict[str, list[float]] = {}
|
||||
for row in cursor.fetchall():
|
||||
stock_code = row["stock_code"]
|
||||
net_history_by_stock.setdefault(stock_code, []).append(float(row["daily_net_amount_wan"] or 0))
|
||||
|
||||
for stock_code, net_history in net_history_by_stock.items():
|
||||
increasing_by_stock[stock_code] = len(net_history) >= 2 and all(
|
||||
current > previous for previous, current in zip(net_history, net_history[1:])
|
||||
)
|
||||
|
||||
for stock in stocks:
|
||||
stock["is_net_amount_increasing"] = increasing_by_stock.get(stock["stock_code"], False)
|
||||
|
||||
missing_codes = [
|
||||
row["stock_code"]
|
||||
for row in stocks[:30]
|
||||
if not row.get("industry") or not row.get("market") or row.get("total_market_value") is None
|
||||
]
|
||||
if missing_codes:
|
||||
eastmoney = EastMoneyClient()
|
||||
seen_codes: set[str] = set()
|
||||
for stock_code in missing_codes:
|
||||
if stock_code in seen_codes:
|
||||
continue
|
||||
seen_codes.add(stock_code)
|
||||
profile: dict[str, Any] = {}
|
||||
snapshot: dict[str, Any] = {}
|
||||
try:
|
||||
profile = eastmoney.fetch_company_profile(stock_code)
|
||||
except Exception:
|
||||
profile = {}
|
||||
try:
|
||||
snapshot = eastmoney.fetch_quote_snapshot(stock_code)
|
||||
except Exception:
|
||||
snapshot = {}
|
||||
|
||||
cursor.execute(
|
||||
"""
|
||||
INSERT INTO stocks (
|
||||
stock_code,
|
||||
stock_name,
|
||||
market,
|
||||
industry,
|
||||
concept_tags,
|
||||
total_market_value,
|
||||
circulating_market_value
|
||||
)
|
||||
VALUES (%s, %s, %s, %s, %s, %s, %s)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
stock_name = COALESCE(NULLIF(VALUES(stock_name), ''), stock_name),
|
||||
market = COALESCE(NULLIF(VALUES(market), ''), market),
|
||||
industry = COALESCE(NULLIF(VALUES(industry), ''), industry),
|
||||
concept_tags = COALESCE(VALUES(concept_tags), concept_tags),
|
||||
total_market_value = COALESCE(VALUES(total_market_value), total_market_value),
|
||||
circulating_market_value = COALESCE(VALUES(circulating_market_value), circulating_market_value)
|
||||
""",
|
||||
(
|
||||
stock_code,
|
||||
profile.get("stock_name") or (snapshot.get("stock_name") if snapshot else None) or stock_code,
|
||||
profile.get("market"),
|
||||
profile.get("industry") or snapshot.get("industry"),
|
||||
json.dumps(profile.get("concept_tags") or [], ensure_ascii=False) if profile.get("concept_tags") else None,
|
||||
snapshot.get("total_market_value"),
|
||||
snapshot.get("circulating_market_value"),
|
||||
),
|
||||
)
|
||||
|
||||
cursor.execute(stock_query, (trader_name,))
|
||||
stocks = [_normalize_row(row) for row in cursor.fetchall()]
|
||||
for stock in stocks:
|
||||
stock["is_net_amount_increasing"] = increasing_by_stock.get(stock["stock_code"], False)
|
||||
|
||||
cursor.execute(
|
||||
"""
|
||||
SELECT trade_date, stock_code, stock_name, warning_type, warning_level, trigger_reason
|
||||
|
||||
@ -140,7 +140,7 @@ longhubang/
|
||||
### 4.3 页面组件
|
||||
|
||||
- `HomeControlScreen.vue`：首页总控台
|
||||
- `TraderDetailScreen.vue`：游资详情
|
||||
- `TraderDetailScreen.vue`：游资详情，采用单列全宽股票列表，支持时间、名称、净额连续增大筛选，并展示行业、板块、总市值、净额和预警标签
|
||||
- `StockDetailScreen.vue`：个股详情
|
||||
- `WarningCenterScreen.vue`：预警中心
|
||||
|
||||
|
||||
@ -64,9 +64,11 @@
|
||||
游资详情页支持：
|
||||
|
||||
- 游资档案
|
||||
- 核心席位
|
||||
- 近期参与股票
|
||||
- 风格标签
|
||||
- 股票列表全宽展示
|
||||
- 时间、名称、净额连续增大筛选
|
||||
- 按时间、净额、动作数排序
|
||||
- 行业、上市板块、总市值、净额和预警标签展示
|
||||
|
||||
### 2.6 预警中心
|
||||
|
||||
|
||||
@ -144,9 +144,11 @@
|
||||
|
||||
游资详情页保留，但不再作为首页首要信息。
|
||||
|
||||
游资详情页用于查看某个游资的长期参与情况、席位信息、风格标签和近期参与股票。
|
||||
游资详情页用于查看某个游资的长期参与情况、风格标签和近期参与股票。
|
||||
|
||||
已移除“动作时间线”模块。
|
||||
已移除“净额重点”和“席位概览”侧栏，股票列表改为单列全宽展示。
|
||||
股票列表支持按时间、名称、净额连续增大筛选，并支持按时间、净额、动作数排序。
|
||||
|
||||
原因：
|
||||
|
||||
@ -206,3 +208,4 @@
|
||||
6. 首页顶部指标与关注列表联动，取消关注后自动剔除统计。
|
||||
7. 所有股票入口都能跳转到股票详情。
|
||||
8. 游资详情页去掉动作时间线。
|
||||
9. 游资详情页去掉净额重点和席位概览侧栏，保留单列股票列表和净额趋势筛选。
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user