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

backend/src/lhbfx/queries.py

@@ -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

docs/技术文档.md

@@ -140,7 +140,7 @@ longhubang/
 ### 4.3 页面组件
 
 - `HomeControlScreen.vue`：首页总控台
-- `TraderDetailScreen.vue`：游资详情
+- `TraderDetailScreen.vue`：游资详情，采用单列全宽股票列表，支持时间、名称、净额连续增大筛选，并展示行业、板块、总市值、净额和预警标签
 - `StockDetailScreen.vue`：个股详情
 - `WarningCenterScreen.vue`：预警中心
 

docs/需求文档.md

@@ -64,9 +64,11 @@
 游资详情页支持：
 
 - 游资档案
-- 核心席位
-- 近期参与股票
 - 风格标签
+- 股票列表全宽展示
+- 时间、名称、净额连续增大筛选
+- 按时间、净额、动作数排序
+- 行业、上市板块、总市值、净额和预警标签展示
 
 ### 2.6 预警中心
 

docs/需求梳理-今日游资操作优先.md

@@ -144,9 +144,11 @@
 
 游资详情页保留，但不再作为首页首要信息。
 
-游资详情页用于查看某个游资的长期参与情况、席位信息、风格标签和近期参与股票。
+游资详情页用于查看某个游资的长期参与情况、风格标签和近期参与股票。
 
 已移除“动作时间线”模块。
+已移除“净额重点”和“席位概览”侧栏，股票列表改为单列全宽展示。
+股票列表支持按时间、名称、净额连续增大筛选，并支持按时间、净额、动作数排序。
 
 原因：
 
@@ -206,3 +208,4 @@
 6. 首页顶部指标与关注列表联动，取消关注后自动剔除统计。
 7. 所有股票入口都能跳转到股票详情。
 8. 游资详情页去掉动作时间线。
+9. 游资详情页去掉净额重点和席位概览侧栏，保留单列股票列表和净额趋势筛选。

frontend/src/components/TraderDetailScreen.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, shallowRef } from 'vue'
 
-import type { TraderDetail, TraderListItem } from '../types'
+import type { TraderDetail, TraderListItem, TraderStock } from '../types'
-import { formatDate, priceTone } from '../utils/format'
+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 '等待选择游资。'
+  if (!detail) return ''
-  const tags = detail.trader.style_tags?.join('、') || '暂无风格标签'
+  const tags = detail.trader.style_tags?.slice(0, 3).join(' / ') || '暂无标签'
-  return `${detail.trader.name} 当前风格聚焦 ${tags}。本页只保留游资档案和近期参与股票列表，动作时间线已移除。`
+  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.length, tone: '' },
-    {
+    { label: '卖出预警', value: detail.stocks.filter((item) => item.has_sell_alert).length, tone: 'danger' },
-      label: '当前卖出预警',
+    { label: '慢流出', value: detail.stocks.filter((item) => item.has_slow_exit).length, tone: 'watch' },
-      value: detail.stocks.filter((item) => item.has_sell_alert).length,
+    { label: '席位数', value: detail.seats.length, tone: 'focus' },
-      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 compact">
-        <article class="profile-card">
+        <div class="profile-head compact">
-          <h3 class="profile-title">
+          <div class="profile-line">
-            {{ traderDetail.trader.name }}
+            <h3 class="profile-title compact">
-            <span v-if="traderDetail.trader.alias_name">
+              {{ traderDetail.trader.name }}
-              / {{ traderDetail.trader.alias_name }}
+              <span v-if="traderDetail.trader.alias_name">/ {{ traderDetail.trader.alias_name }}</span>
-            </span>
+            </h3>
-          </h3>
+            <p class="profile-desc compact">{{ compactProfileText }}</p>
-          <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>
           </div>
-        </article>
 
-        <div class="summary-grid">
+          <div class="summary-inline">
-          <article
+            <div
-            v-for="item in summaryCards"
+              v-for="item in summaryCards"
-            :key="item.label"
+              :key="item.label"
-            class="summary-box"
+              class="summary-chip"
-            :class="item.tone"
+              :class="item.tone"
-          >
+            >
-            <p class="summary-label">{{ item.label }}</p>
+              <span>{{ item.label }}</span>
-            <h3 class="summary-value">{{ item.value }}</h3>
+              <strong>{{ item.value }}</strong>
-          </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>
-            <div>{{ stock.latest_price ?? '-' }}</div>
+          </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>
       </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: 0;
-  margin-bottom: 18px;
 }
 
 .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: 12px;
-  gap: 16px;
+  min-height: 0;
-  margin-bottom: 16px;
+}
+
+.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.16), rgba(255, 255, 255, 0.02));
-  background: linear-gradient(135deg, rgba(212, 163, 92, 0.18), 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 {
+.profile-title.compact {
-  margin: 10px 0 16px;
+  font-size: 15px;
-  color: #d6ceb9;
+  white-space: nowrap;
-  line-height: 1.8;
+}
+
+.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 {
+.summary-chip.danger strong {
-  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 {
   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 {
+.stock-panel {
-  padding: 18px;
+  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;
+  overflow: auto;
-  gap: 10px;
+  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) {
+@media (max-width: 1280px) {
-  .header-card {
+  .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>

frontend/src/types.ts

@@ -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 {