feat: add stock trend tab with readable technical briefs

Introduce a trend研判 tab on stock detail with human-readable MA, volume, and risk strips, and only auto-refresh during market hours when the tab is open.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Travisun

client-ui/src/api/client.ts

@@ -66,7 +66,7 @@ export async function apiCall<T>(
 // ─── Typed convenience wrappers ───
 import type {
   StockDiagnosisData, InstitutionRatingData,
-  ScreeningData, StrategySignalData, StrategyVerifyData,
+  ScreeningData, StrategySignalData, StrategyVerifyData, TrendBriefData,
   PortfolioAnalysisData, IndustryMiningData, IndustryStatItem, IndustryStockItem, MarketReportData,
   SearchStocksData, BacktestResultData, LatestEvalData, ReportTextData,
 } from '../types/schemas'
@@ -95,6 +95,17 @@ export const research = {
   strategySignals: (code: string, signal?: AbortSignal) =>
     apiCall<StrategySignalData>('strategy_signal', { code }, { signal }, 30000),
 
+  trendBrief: (code: string, holdingCost?: number | null, signal?: AbortSignal) =>
+    apiCall<TrendBriefData>(
+      'trend_brief',
+      {
+        code,
+        ...(holdingCost != null && holdingCost > 0 ? { holding_cost: holdingCost } : {}),
+      },
+      { signal },
+      30000,
+    ),
+
   strategyVerify: (code: string, checkpoints = 30, forwardDays = 5) =>
     apiCall<StrategyVerifyData>('strategy_verify', { code, checkpoints, forward_days: forwardDays }),
 

client-ui/src/market/StockDetailTab.tsx

@@ -22,11 +22,12 @@ import {
 import OpptrixButton from '../components/opptrix/OpptrixButton'
 import TradingViewChart from './TradingViewChart'
 import StockDecisionCard, { type StockDiscussPayload } from './StockDecisionCard'
+import StockTrendTab from './StockTrendTab'
 import type { HoldingSnapshot } from './useFollowPortfolio'
 import { opptrixTokens } from '../theme/tokens'
 import { ghostInteractive } from '../theme/mixins'
 
-type DetailTab = 'analysis' | 'chart' | 'basic' | 'company' | 'news' | 'f10'
+type DetailTab = 'analysis' | 'chart' | 'trend' | 'basic' | 'company' | 'news' | 'f10'
 
 const CONTENT_PAD = '15px'
 
@@ -753,6 +754,7 @@ export default function StockDetailTab({
           onTabSelect={(_, data) => setDetailTab(data.value as DetailTab)}
         >
           <Tab value="chart">走势</Tab>
+          <Tab value="trend">趋势</Tab>
           <Tab value="analysis">分析</Tab>
           <Tab value="basic">概况</Tab>
           <Tab value="company">公司</Tab>
@@ -762,6 +764,18 @@ export default function StockDetailTab({
       </div>
 
       <div className={s.tabBody}>
+        <div className={mergeClasses(s.tabPanel, detailTab !== 'trend' && s.tabPanelHidden)}>
+          <div className={mergeClasses(s.scrollPanel, 'opptrix-scroll')}>
+            {detailTab === 'trend' && (
+              <StockTrendTab
+                code={detail.code}
+                active={detailTab === 'trend'}
+                holdingCost={holding?.costBasis}
+              />
+            )}
+          </div>
+        </div>
+
         <div className={mergeClasses(s.tabPanel, detailTab !== 'analysis' && s.tabPanelHidden)}>
           <div className={mergeClasses(s.scrollPanel, 'opptrix-scroll')}>
             {detailTab === 'analysis' && (

client-ui/src/market/StockTrendTab.tsx

@@ -0,0 +1,215 @@
+import { Spinner, Text, makeStyles, mergeClasses } from '@fluentui/react-components'
+import { ArrowClockwiseRegular } from '@fluentui/react-icons'
+import OpptrixButton from '../components/opptrix/OpptrixButton'
+import type { TrendStrip, TrendStripTone } from '../types/schemas'
+import { opptrixTokens } from '../theme/tokens'
+import { useStockTrendBrief } from './useStockTrendBrief'
+import { shouldPollTrendBrief } from './chartLiveRefresh'
+
+const GROUP_LABELS: Record<TrendStrip['group'], string> = {
+  trend: '趋势结构',
+  volume: '量价行为',
+  risk: '风险收益',
+  holding: '持仓参考',
+  aux: '辅助参考',
+}
+
+const GROUP_ORDER: TrendStrip['group'][] = ['trend', 'volume', 'risk', 'holding', 'aux']
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    padding: '10px 0 16px',
+  },
+  head: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '8px',
+    padding: '0 2px',
+  },
+  meta: {
+    fontSize: '10px',
+    color: opptrixTokens.textTertiary,
+    lineHeight: 1.45,
+  },
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+  },
+  sectionTitle: {
+    fontSize: '10px',
+    fontWeight: 650,
+    color: opptrixTokens.textTertiary,
+    letterSpacing: '0.06em',
+    textTransform: 'uppercase',
+    padding: '0 2px',
+  },
+  strip: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    padding: '8px 10px',
+    borderRadius: opptrixTokens.radiusMd,
+    backgroundColor: opptrixTokens.canvas,
+    border: `1px solid ${opptrixTokens.separator}`,
+  },
+  stripHead: {
+    display: 'flex',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: '8px',
+  },
+  stripTitle: {
+    fontSize: '11px',
+    fontWeight: 600,
+    color: opptrixTokens.textPrimary,
+    flexShrink: 0,
+  },
+  stripStatus: {
+    fontSize: '11px',
+    fontWeight: 650,
+    textAlign: 'right',
+    lineHeight: 1.35,
+  },
+  stripDetail: {
+    fontSize: '11px',
+    lineHeight: 1.55,
+    color: opptrixTokens.textSecondary,
+  },
+  toneBullish: { color: '#FF3B30' },
+  toneBearish: { color: '#34C759' },
+  toneNeutral: { color: opptrixTokens.textPrimary },
+  toneCaution: { color: opptrixTokens.warning },
+  toneMuted: { color: opptrixTokens.textTertiary },
+  center: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    padding: '32px 16px',
+    color: opptrixTokens.textTertiary,
+    fontSize: '12px',
+    textAlign: 'center',
+  },
+  disclaimer: {
+    fontSize: '10px',
+    lineHeight: 1.5,
+    color: opptrixTokens.textTertiary,
+    padding: '4px 2px 0',
+  },
+})
+
+function toneClass(s: ReturnType<typeof useStyles>, tone: TrendStripTone) {
+  switch (tone) {
+    case 'bullish': return s.toneBullish
+    case 'bearish': return s.toneBearish
+    case 'caution': return s.toneCaution
+    case 'muted': return s.toneMuted
+    default: return s.toneNeutral
+  }
+}
+
+function groupStrips(strips: TrendStrip[]) {
+  const map = new Map<TrendStrip['group'], TrendStrip[]>()
+  for (const strip of strips) {
+    const list = map.get(strip.group) ?? []
+    list.push(strip)
+    map.set(strip.group, list)
+  }
+  return GROUP_ORDER
+    .filter(g => map.has(g))
+    .map(g => ({ group: g, label: GROUP_LABELS[g], items: map.get(g)! }))
+}
+
+interface StockTrendTabProps {
+  code: string
+  active: boolean
+  holdingCost?: number | null
+}
+
+export default function StockTrendTab({ code, active, holdingCost }: StockTrendTabProps) {
+  const s = useStyles()
+  const { data, loading, error, updatedAt, refresh } = useStockTrendBrief(code, active, holdingCost)
+
+  if (loading && !data) {
+    return (
+      <div className={s.center}>
+        <Spinner size="small" label="正在整理趋势研判…" />
+      </div>
+    )
+  }
+
+  if (error && !data) {
+    return (
+      <div className={s.center}>
+        <Text block>{error}</Text>
+        <OpptrixButton size="small" variant="secondary" onClick={refresh}>
+          重试
+        </OpptrixButton>
+      </div>
+    )
+  }
+
+  if (!data) {
+    return <div className={s.center}>暂无趋势研判数据</div>
+  }
+
+  const groups = groupStrips(data.strips)
+  const livePolling = shouldPollTrendBrief()
+  const updatedLabel = updatedAt
+    ? updatedAt.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+    : '—'
+
+  return (
+    <div className={s.root}>
+      <div className={s.head}>
+        <Text className={s.meta} block>
+          数据截至 {data.as_of}
+          {livePolling ? (
+            <>
+              {' · '}
+              盘中约每分钟自动刷新（更新于 {updatedLabel}）
+            </>
+          ) : (
+            <>
+              {' · '}
+              非盘中数据不变，进入本页时加载
+            </>
+          )}
+        </Text>
+        <OpptrixButton
+          variant="icon"
+          icon={<ArrowClockwiseRegular fontSize={14} />}
+          aria-label="立即刷新"
+          onClick={refresh}
+        />
+      </div>
+
+      {groups.map(section => (
+        <div key={section.group} className={s.section}>
+          <Text className={s.sectionTitle}>{section.label}</Text>
+          {section.items.map(strip => (
+            <div key={strip.id} className={s.strip}>
+              <div className={s.stripHead}>
+                <Text className={s.stripTitle}>{strip.title}</Text>
+                <Text className={mergeClasses(s.stripStatus, toneClass(s, strip.tone))}>
+                  {strip.status}
+                </Text>
+              </div>
+              <Text className={s.stripDetail} block>{strip.detail}</Text>
+            </div>
+          ))}
+        </div>
+      ))}
+
+      <Text className={s.disclaimer} block>
+        以上基于历史行情与常用技术统计，帮助理解当前走势结构，不构成买卖建议。
+      </Text>
+    </div>
+  )
+}

client-ui/src/market/chartLiveRefresh.ts

@@ -63,6 +63,12 @@ export function shouldUseLiveIndustryQuotes(storedQuoteDate: string | null | und
 
 export const INDUSTRY_STATS_POLL_MS = 5 * 60_000
 export const INDUSTRY_QUOTES_POLL_MS = 60_000
+export const TREND_BRIEF_POLL_MS = 60_000
+
+/** 趋势研判仅在 A 股盘中轮询；非交易日、盘前盘后数据已固定，进入页面加载一次即可。 */
+export function shouldPollTrendBrief(now = cnMarketNow()): boolean {
+  return isCnMarketOpen(now)
+}
 
 export function shouldPollChartLive(
   period: ChartPeriod,

client-ui/src/market/useStockTrendBrief.ts

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { research } from '../api/client'
+import type { TrendBriefData } from '../types/schemas'
+import { shouldPollTrendBrief, TREND_BRIEF_POLL_MS } from './chartLiveRefresh'
+
+function isAbort(e: unknown): boolean {
+  return e instanceof DOMException && e.name === 'AbortError'
+    || (e instanceof Error && e.name === 'AbortError')
+}
+
+export function useStockTrendBrief(
+  code: string | null,
+  active: boolean,
+  holdingCost?: number | null,
+) {
+  const [data, setData] = useState<TrendBriefData | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [updatedAt, setUpdatedAt] = useState<Date | null>(null)
+  const dataRef = useRef<TrendBriefData | null>(null)
+
+  const load = useCallback(async (signal?: AbortSignal) => {
+    if (!code) return
+    setLoading(prev => (dataRef.current ? prev : true))
+    setError('')
+    try {
+      const resp = await research.trendBrief(code, holdingCost, signal)
+      if (!resp.success || !resp.data) {
+        throw new Error(resp.message || '趋势研判加载失败')
+      }
+      dataRef.current = resp.data
+      setData(resp.data)
+      setUpdatedAt(new Date())
+    } catch (e) {
+      if (isAbort(e)) return
+      setError(e instanceof Error ? e.message : '趋势研判加载失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [code, holdingCost])
+
+  useEffect(() => {
+    dataRef.current = null
+    setData(null)
+    setError('')
+    setUpdatedAt(null)
+  }, [code, holdingCost])
+
+  useEffect(() => {
+    if (!active || !code) return undefined
+    const ac = new AbortController()
+    void load(ac.signal)
+
+    if (!shouldPollTrendBrief()) {
+      return () => ac.abort()
+    }
+
+    const timer = window.setInterval(() => {
+      if (!shouldPollTrendBrief()) return
+      void load()
+    }, TREND_BRIEF_POLL_MS)
+
+    return () => {
+      ac.abort()
+      window.clearInterval(timer)
+    }
+  }, [active, code, load])
+
+  const refresh = useCallback(() => {
+    void load()
+  }, [load])
+
+  return { data, loading, error, updatedAt, refresh }
+}

client-ui/src/types/schemas.ts

@@ -182,6 +182,26 @@ export interface StrategySignalData {
   signals: SingleStrategySignal[]; timestamp?: string
 }
 
+export type TrendStripTone = 'bullish' | 'bearish' | 'neutral' | 'caution' | 'muted'
+
+export interface TrendStrip {
+  id: string
+  group: 'trend' | 'volume' | 'risk' | 'aux' | 'holding'
+  title: string
+  status: string
+  detail: string
+  tone: TrendStripTone
+}
+
+export interface TrendBriefData {
+  code: string
+  name: string
+  as_of: string
+  data_days: number
+  strips: TrendStrip[]
+  timestamp?: string
+}
+
 export interface StrategyPerformanceItem {
   name: string; overall_win_rate: number
   avg_return: number; sharpe: number | null