diff --git a/frontend/src/components/DimensionMembersDialog.tsx b/frontend/src/components/DimensionMembersDialog.tsx
index d67ef6f..95db97b 100644
--- a/frontend/src/components/DimensionMembersDialog.tsx
+++ b/frontend/src/components/DimensionMembersDialog.tsx
@@ -13,6 +13,7 @@ import {
 import { Activity, Building2, ChevronRight, Database, RefreshCw, Search, Tags, Users, X } from 'lucide-react'
 import { Modal } from '@/components/Modal'
 import { boardTag } from '@/components/stock-table/primitives'
+import { toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import { api, type DimensionIntradayPoint, type MarketSnapshotRow } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
 import { fmtBigNum, fmtPct, fmtPrice, priceColorClass } from '@/lib/format'
@@ -39,7 +40,7 @@ export function dimensionKindForSourceField(sourceField: string): DimensionKind
 interface Props {
   target: DimensionMembersTarget | null
   onClose: () => void
-  onStockClick?: (symbol: string, name?: string) => void
+  onStockClick?: (symbol: string, name?: string, navList?: NavItem[]) => void
 }
 
 interface ResolvedSource {
@@ -279,7 +280,7 @@ function DimensionMembersDialogContent({ target, onClose, onStockClick }: Omit<P
                       key={virtualRow.key}
                       ref={rowVirtualizer.measureElement}
                       data-index={virtualRow.index}
-                      onClick={() => onStockClick?.(row.symbol, row.name)}
+                      onClick={() => onStockClick?.(row.symbol, row.name, toNavItems(visibleRows))}
                       disabled={!onStockClick}
                       className="absolute left-0 top-0 grid min-h-[54px] w-full grid-cols-[minmax(132px,1fr)_74px_74px_18px] items-center border-b border-border/60 px-4 text-left text-xs transition-colors hover:bg-elevated/50 disabled:cursor-default md:grid-cols-[minmax(180px,1fr)_90px_84px_88px_100px_18px]"
                       style={{ transform: `translateY(${virtualRow.start}px)` }}
diff --git a/frontend/src/components/EChartsCandlestick.tsx b/frontend/src/components/EChartsCandlestick.tsx
index 63035fd..3bebb57 100644
--- a/frontend/src/components/EChartsCandlestick.tsx
+++ b/frontend/src/components/EChartsCandlestick.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useCallback, useMemo } from 'react'
 import { chartTheme, getTheme, useTheme } from '@/lib/theme'
+import { fmtPct } from '@/lib/format'
 import * as echarts from 'echarts'
 import type { ECharts, EChartsOption } from 'echarts'
 
@@ -832,6 +833,8 @@ export function EChartsCandlestick({
   const infoIdxRef = useRef<number>(data.length - 1)
   const compactRef = useRef(false)
   const userZoomRef = useRef<{ start: number; end: number } | null>(null)
+  // 竖虚线(crosshair)是否可见: 控制信息栏「至今」字段的显隐。鼠标移出图表区即 false。
+  const hoverActiveRef = useRef(false)
 
   // 需要在闭包中访问最新值的变量 — 先声明占位，后面赋值
   const activeIndicatorsRef = useRef(activeIndicators)
@@ -911,7 +914,7 @@ export function EChartsCandlestick({
     const floatShares = stockInfo?.float_shares
     const turnoverRate = floatShares && d.volume ? (d.volume * 100 / floatShares * 100) : null
 
-    let html = `<div style="display:flex;align-items:center;gap:6px;padding:0 8px;font:11px 'JetBrains Mono',monospace;select:none;height:20px;flex-wrap:wrap">`
+    let html = `<div style="display:flex;align-items:center;gap:6px;padding:0 8px;font:11px 'JetBrains Mono',monospace;select:none;min-height:20px;flex-wrap:wrap">`
     html += `<span style="color:${CT().text}">${d.date}</span>`
     html += `<span style="color:${CT().text}">开</span>`
     html += `<span style="color:${d.open >= d.close ? THEME.bear : THEME.bull}">${d.open.toFixed(2)}</span>`
@@ -930,11 +933,25 @@ export function EChartsCandlestick({
       html += `<span style="color:${CT().text}">换手</span>`
       html += `<span style="color:${CT().text}">${turnoverRate.toFixed(2)}%</span>`
     }
+    // 至今: 仅当竖虚线(crosshair)在图上且鼠标悬停某根 K 线时显示。
+    // 最新价取最后一根K线收盘 (后端 _maybe_inject_live_candle 盘中注入实时价, 收盘后即最近收盘)。
+    // 基准取该K线昨收(前一日收盘), 与同花顺及全市场涨幅口径一致; 数据第一根K线无昨收则跳过。
+    if (hoverActiveRef.current && prev && Number.isFinite(prev.close) && prev.close > 0) {
+      const latestPrice = data[data.length - 1].close
+      if (Number.isFinite(latestPrice)) {
+        const sinceRatio = (latestPrice - prev.close) / prev.close
+        const sinceClr = sinceRatio >= 0 ? THEME.bull : THEME.bear
+        html += `<span style="color:${CT().text}">至今</span>`
+        html += `<span style="color:${sinceClr}">${fmtPct(sinceRatio)}</span>`
+        // 周期数: 从该K线(含)到最新一根K线共多少根; 悬停最后一根时为 1
+        html += `<span style="color:${CT().text}">周期 ${data.length - idx}</span>`
+      }
+    }
     html += `</div>`
 
     // 第二行: MA + BOLL
     if (showMA) {
-      html += `<div style="display:flex;align-items:center;gap:10px;padding:0 8px;font:11px 'JetBrains Mono',monospace;select:none;height:20px;flex-wrap:wrap">`
+      html += `<div style="display:flex;align-items:center;gap:10px;padding:0 8px;font:11px 'JetBrains Mono',monospace;select:none;min-height:20px;flex-wrap:wrap">`
       if (d.ma5 != null) html += `<span style="color:${THEME.ma5}">MA5:${Number(d.ma5).toFixed(2)}</span>`
       if (d.ma10 != null) html += `<span style="color:${THEME.ma10}">MA10:${Number(d.ma10).toFixed(2)}</span>`
       if (d.ma20 != null) html += `<span style="color:${THEME.ma20}">MA20:${Number(d.ma20).toFixed(2)}</span>`
@@ -949,12 +966,17 @@ export function EChartsCandlestick({
   }, [data, stockInfo, showMA, activeIndicators])
   getInfoBarHTMLRef.current = getInfoBarHTML
 
-  // data 变化时重置 infoIdx
+  // data/symbol 变化时重置 infoIdx:
+  // symbol(_symbol) 进依赖是必要的——预取切股到同长度邻股时 data.length 不变,
+  // 但悬停上下文来自上一只股票, 必须清掉 hoverActiveRef 以免「至今/周期」残留显示。
+  // (同一股的实时刷新 symbol 不变, 不触发, 悬停位置与「至今」保持实时)
   useEffect(() => {
     infoIdxRef.current = data.length - 1
     compactRef.current = false
     userZoomRef.current = null
-  }, [data.length])
+    // 新数据无悬停上下文, 隐藏「至今」; 下次鼠标移动时由 updateAxisPointer 重新置位
+    hoverActiveRef.current = false
+  }, [_symbol, data.length])
 
   // ===== 初始化 chart (只在 chartHeight 变化时重建) =====
   useEffect(() => {
@@ -965,32 +987,36 @@ export function EChartsCandlestick({
     chartRef.current = chart
 
     // 鼠标移动 → 只更新 ref + DOM，不触发 React re-render
-    // 设计原则: 找不到有效数据时保持上次显示，永远不清空信息栏
+    // 设计原则: 找不到有效数据时保持上次显示，永远不清空信息栏; 鼠标移出时仅隐藏「至今」。
     chart.on('updateAxisPointer', (event: any) => {
       const axesInfo = event.axesInfo
-      if (!axesInfo) return // 鼠标移出图表区域，保持当前显示
-      for (const info of Object.values(axesInfo)) {
-        const val = (info as any)?.value
-        if (val == null) continue
-        const d = dataRef.current
-        const idx = typeof val === 'number' ? val : d.findIndex(x => x.date === val)
-        if (idx >= 0 && idx < d.length) {
-          if (infoIdxRef.current === idx) return
-          infoIdxRef.current = idx
-
-          // 直接更新信息栏 DOM (通过 ref 读取最新的生成函数)
-          const infoEl = infoBarRef.current
-          if (infoEl) {
-            const html = getInfoBarHTMLRef.current()
-            if (html) infoEl.innerHTML = html  // 只在有内容时更新
-          }
-
-          // 更新子图 graphic
-          triggerInfoBarUpdate()
-          return
+      const d = dataRef.current
+      // 竖虚线是否正落在某根有效 K 线上 (鼠标在图表数据区内)
+      let foundIdx = -1
+      if (axesInfo) {
+        for (const info of Object.values(axesInfo)) {
+          const val = (info as any)?.value
+          if (val == null) continue
+          const idx = typeof val === 'number' ? val : d.findIndex(x => x.date === val)
+          if (idx >= 0 && idx < d.length) { foundIdx = idx; break }
         }
       }
-      // 没有找到有效数据 — 不做任何操作，保持上次显示
+      const active = foundIdx >= 0
+      const idxChanged = foundIdx >= 0 && infoIdxRef.current !== foundIdx
+      const visChanged = active !== hoverActiveRef.current
+      hoverActiveRef.current = active
+      if (idxChanged) infoIdxRef.current = foundIdx
+      // 竖虚线显隐或悬停 K 线变化 → 重绘一次信息栏 (控制「至今」字段显隐 + 当前 K 线数据)
+      if (visChanged || idxChanged) {
+        const infoEl = infoBarRef.current
+        if (infoEl) {
+          const html = getInfoBarHTMLRef.current()
+          if (html) infoEl.innerHTML = html  // 只在有内容时更新
+        }
+      }
+      if (foundIdx < 0) return
+      // 更新子图 graphic (仅悬停 K 线变化时; 纯显隐切换不影响副图)
+      if (idxChanged) triggerInfoBarUpdate()
     })
 
     chart.on('click', (params: any) => {
@@ -1159,7 +1185,7 @@ export function EChartsCandlestick({
     if (!d) return ''
     const floatShares = stockInfo?.float_shares
     const turnoverRate = floatShares && d.volume ? (d.volume * 100 / floatShares * 100) : null
-    let html = `<div style="display:flex;align-items:center;gap:6px;padding:0 8px;font:11px 'JetBrains Mono',monospace;height:20px;flex-wrap:wrap">`
+    let html = `<div style="display:flex;align-items:center;gap:6px;padding:0 8px;font:11px 'JetBrains Mono',monospace;min-height:20px;flex-wrap:wrap">`
     html += `<span style="color:${CT().text}">${d.date}</span>`
     html += `<span style="color:${CT().text}">开</span>`
     html += `<span style="color:${d.open >= d.close ? THEME.bear : THEME.bull}">${d.open.toFixed(2)}</span>`
@@ -1182,7 +1208,7 @@ export function EChartsCandlestick({
     }
     html += `</div>`
     if (showMA) {
-      html += `<div style="display:flex;align-items:center;gap:10px;padding:0 8px;font:11px 'JetBrains Mono',monospace;height:20px;flex-wrap:wrap">`
+      html += `<div style="display:flex;align-items:center;gap:10px;padding:0 8px;font:11px 'JetBrains Mono',monospace;min-height:20px;flex-wrap:wrap">`
       if (d.ma5 != null) html += `<span style="color:${THEME.ma5}">MA5:${Number(d.ma5).toFixed(2)}</span>`
       if (d.ma10 != null) html += `<span style="color:${THEME.ma10}">MA10:${Number(d.ma10).toFixed(2)}</span>`
       if (d.ma20 != null) html += `<span style="color:${THEME.ma20}">MA20:${Number(d.ma20).toFixed(2)}</span>`
diff --git a/frontend/src/components/StockDailyKChart.tsx b/frontend/src/components/StockDailyKChart.tsx
index 495ecc4..142a1a5 100644
--- a/frontend/src/components/StockDailyKChart.tsx
+++ b/frontend/src/components/StockDailyKChart.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { api, type KlineRow } from '@/lib/api'
-import { QK } from '@/lib/queryKeys'
+import { type KlineRow } from '@/lib/api'
+import { klineDailyQueryOptions } from '@/lib/kline'
 import { storage } from '@/lib/storage'
 import {
   EChartsCandlestick,
@@ -11,13 +11,11 @@ import {
   type ChartPriceLine,
   type ChartRange,
   type OHLC,
-  type StockInfo,
   type VolumeCompareConfig,
 } from '@/components/EChartsCandlestick'
 
 const SUB_INFO_H = 16
 const SUB_GAP = 4
-const MAX_DAYS = 2000
 const DEFAULT_VOLUME_COMPARE: VolumeCompareConfig = { enabled: true, days: 1 }
 
 function normalizeVolumeCompare(config: VolumeCompareConfig): VolumeCompareConfig {
@@ -27,13 +25,6 @@ function normalizeVolumeCompare(config: VolumeCompareConfig): VolumeCompareConfi
   }
 }
 
-export interface StockDailyKChartResult {
-  rows: OHLC[]
-  rawRows: KlineRow[]
-  stockInfo?: StockInfo
-  name?: string
-}
-
 interface Props {
   symbol: string
   height?: number
@@ -51,7 +42,6 @@ interface Props {
   linkedPrice?: number | null
   onDateClick?: (date: string) => void
   onPriceDoubleClick?: (price: number, currentPrice: number) => void
-  onDataChange?: (result: StockDailyKChartResult) => void
   /** 扩展数据列参数（逗号分隔 config_id.field_name），透传给 klineDaily 接口 */
   extColumns?: string
   /** 日K自动刷新间隔(ms)。undefined = 不轮询(默认)。个股对话框实时刷新时传入, 盘中今日蜡烛随之更新 */
@@ -113,12 +103,6 @@ export function getDefaultRange(): { start: string; end: string } {
   return { start, end }
 }
 
-function rangeDays(range: { start: string; end: string }): number {
-  const start = new Date(range.start)
-  const end = new Date(range.end)
-  return Math.min(Math.ceil((end.getTime() - start.getTime()) / 86400000) + 30, MAX_DAYS)
-}
-
 export function StockDailyKChart({
   symbol,
   height = 520,
@@ -136,7 +120,6 @@ export function StockDailyKChart({
   linkedPrice,
   onDateClick,
   onPriceDoubleClick,
-  onDataChange,
   extColumns,
   refetchIntervalMs,
 }: Props) {
@@ -146,16 +129,9 @@ export function StockDailyKChart({
     normalizeVolumeCompare(storage.stockVolumeCompare.get(DEFAULT_VOLUME_COMPARE)),
   )
   const dateRange = externalDateRange ?? getDefaultRange()
-  const days = useMemo(() => rangeDays(dateRange), [dateRange])
 
-  // extColumns 纳入 query key：勾选/取消扩展字段时需重新请求（带 ext_columns 参数）
-  const kline = useQuery({
-    queryKey: QK.kline(symbol, dateRange.start, dateRange.end, extColumns),
-    queryFn: () => api.klineDaily(symbol, days, dateRange, extColumns),
-    enabled: !!symbol,
-    refetchInterval: refetchIntervalMs,
-    placeholderData: (prev) => prev,
-  })
+  // 查询配置统一来自 klineDailyQueryOptions, 与 StockPanel 信息条/邻近预取共享同一 cache key (只发一次请求)
+  const kline = useQuery({ ...klineDailyQueryOptions(symbol, dateRange, extColumns), enabled: !!symbol, refetchInterval: refetchIntervalMs })
 
   const rows = useMemo(() => toOHLC(kline.data?.rows ?? []), [kline.data?.rows])
   const stockInfo = kline.data?.stock_info
@@ -185,10 +161,6 @@ export function StockDailyKChart({
   if (activeSubDefs.length > 0) subExtraH += activeSubDefs.length * SUB_GAP + 14
   const chartHeight = height + subExtraH
 
-  useEffect(() => {
-    onDataChange?.({ rows, rawRows: kline.data?.rows ?? [], stockInfo, name: kline.data?.name })
-  }, [kline.data?.name, kline.data?.rows, onDataChange, rows, stockInfo])
-
   if (!symbol) return null
 
   return (
diff --git a/frontend/src/components/StockInfoBar.tsx b/frontend/src/components/StockInfoBar.tsx
index 1e2d6c8..7f01ebd 100644
--- a/frontend/src/components/StockInfoBar.tsx
+++ b/frontend/src/components/StockInfoBar.tsx
@@ -1,10 +1,11 @@
 import { useState, type ReactNode } from 'react'
-import { Settings2, RadioTower, Star } from 'lucide-react'
+import { Settings2, RadioTower, Star, ExternalLink } from 'lucide-react'
 import type { KlineRow, FinancialMetricRecord } from '@/lib/api'
 import { fmtPrice, fmtBigNum, fmtVolume } from '@/lib/format'
 import { ListColumnCustomizer } from '@/components/ListColumnCustomizer'
 import { WatchlistAddMenu } from '@/components/WatchlistAddMenu'
 import { INFO_GROUPS, type ColumnConfig } from '@/lib/stock-info-fields'
+import { buildStockExternalUrl, loadStockExternalTemplate } from '@/lib/stock-external-link'
 
 const BULL = '#C74040'
 const BEAR = '#2D9B65'
@@ -122,7 +123,32 @@ export function StockInfoBar({
     })
   }
 
-  if (rows.length === 0) return null
+  // 字段分组: 加载态预留高度与完整态渲染共用同一规则
+  const visibleFields = fields.filter(f => f.visible)
+  const inlineFields = visibleFields.filter(f => !f.standalone)
+  const standaloneFields = visibleFields.filter(f => f.standalone)
+
+  // 无数据时保持信息条挂载 (切股/首次加载): 只留 symbol+名称+小 spinner 作为加载态,
+  // 不渲染假占位值; 数据到位后价格/市值等原位填充, 避免整行消失造成布局跳动。
+  // 同时按字段配置预留与完整态相同的行数, 切股瞬间弹窗整体高度不塌陷 (不抖动)。
+  if (rows.length === 0) {
+    const reserveLines = (inlineFields.length > 0 ? 1 : 0) + standaloneFields.length
+    return (
+      <div className="px-2 pb-3 font-mono text-[12px] select-none space-y-1">
+        {/* 首行 min-h-7 对齐完整态的 text-lg 价格行高, 加载中不整体变矮 */}
+        <div className="flex min-h-7 items-baseline gap-x-3 flex-wrap">
+          <span className="text-foreground font-bold text-sm tracking-wide">{symbol}</span>
+          {name && <span className="text-secondary font-medium">{name}</span>}
+          <span className="ml-auto self-center text-muted">
+            <span className="inline-block h-2.5 w-2.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent" />
+          </span>
+        </div>
+        {Array.from({ length: reserveLines }).map((_, i) => (
+          <div key={i} className="h-4" />
+        ))}
+      </div>
+    )
+  }
 
   const latest = rows[rows.length - 1]
   const prev = rows.length >= 2 ? rows[rows.length - 2] : null
@@ -183,11 +209,6 @@ export function StockInfoBar({
     }
   }
 
-  const visibleFields = fields.filter(f => f.visible)
-  // 按是否单独显示分组：普通列共一行，standalone 列各占一行
-  const inlineFields = visibleFields.filter(f => !f.standalone)
-  const standaloneFields = visibleFields.filter(f => f.standalone)
-
   // 渲染单个字段（builtin / ext 通用）
   const renderField = (f: ColumnConfig): ReactNode => {
     if (f.source.type === 'ext') {
@@ -215,6 +236,8 @@ export function StockInfoBar({
     )
   }
 
+  const extUrl = buildStockExternalUrl(loadStockExternalTemplate(), symbol)
+
   return (
     <div className="px-2 pb-3 font-mono text-[12px] select-none space-y-1">
       {/* Row 1: code, name, price, change, change% */}
@@ -230,8 +253,19 @@ export function StockInfoBar({
         <span style={{ color: clr }} className="tabular-nums">
           {isUp ? '+' : ''}{fmtPrice(chgPct)}%
         </span>
-        {/* 右侧操作按钮：加自选 + 加监控 + 信息条配置 */}
+        {/* 右侧操作按钮：外链 + 加自选 + 加监控 + 信息条配置 */}
         <div className="ml-auto self-center flex items-center gap-1">
+          {extUrl && (
+            <a
+              href={extUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={extUrl}
+              className="p-1 rounded-btn text-muted hover:text-foreground hover:bg-elevated transition-colors"
+            >
+              <ExternalLink className="h-3.5 w-3.5" />
+            </a>
+          )}
           {inWatchlist && onRemoveFromWatchlist ? (
             <button
               type="button"
diff --git a/frontend/src/components/StockIntradayChart.tsx b/frontend/src/components/StockIntradayChart.tsx
index 6f014e9..7791be8 100644
--- a/frontend/src/components/StockIntradayChart.tsx
+++ b/frontend/src/components/StockIntradayChart.tsx
@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Loader2 } from 'lucide-react'
 import { api, type MinuteKlineRow } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
+import { klineMinuteQueryOptions } from '@/lib/kline'
 import { EChartsIntraday } from '@/components/EChartsIntraday'
 
 interface Props {
@@ -35,10 +36,9 @@ export function StockIntradayChart({
   const [minuteDismissed, setMinuteDismissed] = useState(false)
 
   const minute = useQuery({
-    queryKey: QK.klineMinute(symbol, date ?? ''),
     // 轮询上下文 (个股详情) 传 live: 当日盘中后端直接实时拉取最新K,
     // 避免读到分钟增量落盘的上一轮本地分区; 历史日期后端自行忽略 live。
-    queryFn: () => api.klineMinute(symbol, date ?? undefined, refetchIntervalMs != null),
+    ...klineMinuteQueryOptions(symbol, date ?? undefined, refetchIntervalMs != null),
     enabled: !!symbol && !!date,
     refetchInterval: refetchIntervalMs,
   })
diff --git a/frontend/src/components/StockMultiDayIntradayChart.tsx b/frontend/src/components/StockMultiDayIntradayChart.tsx
index 3024129..6f71c85 100644
--- a/frontend/src/components/StockMultiDayIntradayChart.tsx
+++ b/frontend/src/components/StockMultiDayIntradayChart.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Download, Loader2, RefreshCw } from 'lucide-react'
 import { api, type MinuteKlineSession } from '@/lib/api'
-import { QK } from '@/lib/queryKeys'
+import { klineMinuteQueryOptions, klineMinuteRangeQueryOptions } from '@/lib/kline'
 import { toast } from '@/components/Toast'
 import { EChartsMultiDayIntraday } from '@/components/EChartsMultiDayIntraday'
 
@@ -29,16 +29,12 @@ export function StockMultiDayIntradayChart({
 }: Props) {
   const queryClient = useQueryClient()
   const history = useQuery({
-    queryKey: QK.klineMinuteRange(symbol, days),
-    queryFn: () => api.klineMinuteRange(symbol, days),
+    ...klineMinuteRangeQueryOptions(symbol, days),
     enabled: !!symbol,
-    placeholderData: (previous, previousQuery) =>
-      previousQuery?.queryKey[1] === symbol ? previous : undefined,
   })
   const latest = useQuery({
-    queryKey: QK.klineMinute(symbol, ''),
     // live: 当日盘中直接实时拉取, 不被分钟增量落盘的本地分区(≥60s一轮)拖慢
-    queryFn: () => api.klineMinute(symbol, undefined, true),
+    ...klineMinuteQueryOptions(symbol, undefined, true),
     enabled: !!symbol,
     refetchInterval: refetchIntervalMs,
   })
diff --git a/frontend/src/components/StockPanel.tsx b/frontend/src/components/StockPanel.tsx
index 04c9544..160b1e1 100644
--- a/frontend/src/components/StockPanel.tsx
+++ b/frontend/src/components/StockPanel.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { X } from 'lucide-react'
 import { type KlineRow, type FinancialMetricRecord } from '@/lib/api'
+import { klineDailyQueryOptions, klineMinuteQueryOptions, klineMinuteRangeQueryOptions, DEFAULT_INTRADAY_DAYS } from '@/lib/kline'
 import { StockInfoBar } from '@/components/StockInfoBar'
-import { StockDailyKChart, getDefaultRange, type StockDailyKChartResult } from '@/components/StockDailyKChart'
+import { StockDailyKChart, getDefaultRange, toOHLC } from '@/components/StockDailyKChart'
 import { StockIntradayChart } from '@/components/StockIntradayChart'
-import { useFinancialMetrics } from '@/lib/useFinancials'
+import { financialMetricsQueryOptions, useFinancialMetrics } from '@/lib/useFinancials'
 import { useCapabilities } from '@/lib/useSharedQueries'
 import type { ChartMarker, ChartPriceLine, ChartRange } from '@/components/EChartsCandlestick'
 import {
@@ -40,6 +42,12 @@ interface Props {
   refetchIntervalMs?: number
   /** 只渲染信息条, 隐藏图表 (用于分时 tab 共享信息条) */
   infoBarOnly?: boolean
+  /** 邻近预取目标 (切股导航的左右邻股): 提前拉取其日K/财务/分时缓存, 切换瞬间免 loading */
+  prefetchSymbols?: string[]
+  /** 多日分时周期 (分时 tab 使用): 预取邻股 klineMinuteRange 时用同一 days, 保证 queryKey 命中 */
+  intradayDays?: number
+  /** 日K/分时并排时日K图占宽 (默认 1:1; 弹窗内图表信息栏较宽需更多空间时传 flex-[1.4] 之类) */
+  dailyKlineFlex?: string
 }
 
 export { getDefaultRange }
@@ -64,11 +72,13 @@ export function StockPanel({
   watchlistPending,
   refetchIntervalMs,
   infoBarOnly = false,
+  prefetchSymbols,
+  intradayDays = DEFAULT_INTRADAY_DAYS,
+  dailyKlineFlex = 'flex-1',
 }: Props) {
   const [linkedPrice, setLinkedPrice] = useState<number | null>(null)
   const [selectedDate, setSelectedDate] = useState<string | null>(null)
   const [intradayDismissed, setIntradayDismissed] = useState(false)
-  const [dailyResult, setDailyResult] = useState<StockDailyKChartResult | null>(null)
   // 信息条指标配置提升到此层：同时供 StockInfoBar 渲染与 StockDailyKChart 请求 ext 数据
   const [fields, setFields] = useState<ColumnConfig[]>(loadInfoFields)
   const extColumns = useMemo(() => buildInfoExtColumnsParam(fields), [fields])
@@ -91,27 +101,66 @@ export function StockPanel({
 
   const dateRange = externalDateRange ?? getDefaultRange()
 
+  // 日K查询由本组件持有 (与 StockDailyKChart 共享同一 cache key/配置, 只发一次请求)。
+  // 信息条直接读 query data: 切股到已预取邻股时首帧即有数据, 配合 StockInfoBar 加载态占位,
+  // 弹窗整体高度在切换瞬间不塌陷 (不抖动)。
+  const kline = useQuery({ ...klineDailyQueryOptions(symbol, dateRange, extColumns), enabled: !!symbol })
+  const rawRows: KlineRow[] = kline.data?.rows ?? []
+  // OHLC 视图用于日期选中/昨收价推导 (与图表侧同口径)
+  const rows = useMemo(() => toOHLC(rawRows), [rawRows])
+  const stockInfo = kline.data?.stock_info
+  const name = kline.data?.name
+
   const handleDateClick = useCallback((date: string) => {
     setSelectedDate(date)
     setIntradayDismissed(false)
     onSelectDate?.(date)
   }, [onSelectDate])
 
-  const rows = dailyResult?.rows ?? []
-  const stockInfo = dailyResult?.stockInfo
-  const rawRows: KlineRow[] = dailyResult?.rawRows ?? []
+  // 邻近预取: 对切股导航的左右邻股提前拉取缓存, 切股瞬间免 loading。
+  // 日K/分时预取 staleTime 30s 防来回切换重复请求; 成为当前股后 useQuery(staleTime=0) 立即后台刷新,
+  // SSE 也只按焦点股精准失效, 实时性不受影响。财务指标与正式查询同 staleTime, 5min 内不重复拉取。
+  // prefetchKey 按内容 join: 自选页 navList 随行情 tick 重建但邻股集合通常不变, 避免 effect 每次 tick 重跑。
+  const qc = useQueryClient()
+  const prefetchKey = prefetchSymbols?.join(',') ?? ''
+  // 守卫快速连续切股: 旧链路上异步回来的日K不再级联预取 (避免串股/浪费)
+  const prefetchTickRef = useRef('')
+  useEffect(() => {
+    if (!prefetchKey) return
+    prefetchTickRef.current = prefetchKey
+    for (const s of prefetchKey.split(',')) {
+      if (s === symbol) continue
+      if (hasFinanceField && hasFinancialCap) {
+        qc.prefetchQuery(financialMetricsQueryOptions(s))
+      }
+      // 分时 tab 的多日分时 + 最新分时: 切股后分时图也免 loading (与日K并行预取)
+      qc.prefetchQuery({ ...klineMinuteRangeQueryOptions(s, intradayDays), staleTime: 30_000 })
+      // latest 当日分时同样 live=true: 预取与渲染同读实时源 (历史日期后端忽略 live)
+      qc.prefetchQuery({ ...klineMinuteQueryOptions(s, undefined, true), staleTime: 30_000 })
+      // 日K用 fetchQuery (返回数据) 以便级联预取分时; 邻股预取失败静默, 不影响切股。
+      void qc.fetchQuery({ ...klineDailyQueryOptions(s, dateRange, extColumns), staleTime: 30_000 })
+        .then((res) => {
+          if (prefetchTickRef.current !== prefetchKey) return
+          // 日K到货后级联预取其默认选中日的分时数据: 日K视图并排展示分时图(默认选中最后交易日)。
+          const lastDate = res?.rows?.at(-1)?.date
+          if (lastDate) {
+            const d = String(lastDate).slice(0, 10)
+            // 同上 live=true: 该日若为当日即命中实时源 (历史日期后端忽略 live)
+            qc.prefetchQuery({ ...klineMinuteQueryOptions(s, d, true), staleTime: 30_000 })
+          }
+        })
+        .catch(() => {})
+    }
+  }, [prefetchKey, symbol, dateRange, extColumns, hasFinanceField, hasFinancialCap, intradayDays, qc])
 
   // symbol 变化时重置分时相关状态，避免切股后残留旧日期。
-  // 注意：必须跳过首次挂载——重开弹窗时 kline 命中 react-query 缓存，
-  // 子组件 onDataChange effect（先于父 effect 执行）会把 dailyResult 置为有效数据，
-  // 若此处再无条件清空，会把刚加载的数据抹掉，导致信息条整行消失。
+  // 日K信息直接读 query data (切股到已预取邻股首帧即有), 无需清空或门控。
   const prevSymbol = useRef<string | null>(symbol)
   useEffect(() => {
     if (prevSymbol.current === symbol) return
     prevSymbol.current = symbol
     setSelectedDate(null)
     setLinkedPrice(null)
-    setDailyResult(null)
   }, [symbol])
 
   // 当分时开启、无选中日期时，自动选中最新日期
@@ -136,7 +185,7 @@ export function StockPanel({
     <div className={className}>
       <StockInfoBar
         symbol={symbol}
-        name={dailyResult?.name}
+        name={name}
         stockInfo={stockInfo}
         rows={rawRows}
         fields={fields}
@@ -154,7 +203,7 @@ export function StockPanel({
         <StockDailyKChart
           symbol={symbol}
           height={height}
-          className="flex-1 min-w-0"
+          className={`${dailyKlineFlex} min-w-0`}
           dateRange={dateRange}
           markers={markers}
           ranges={ranges}
@@ -164,7 +213,6 @@ export function StockPanel({
           linkedPrice={linkedPrice}
           onDateClick={handleDateClick}
           onPriceDoubleClick={onPriceDoubleClick}
-          onDataChange={setDailyResult}
           visibleBars={showIntraday ? 40 : 60}
           extColumns={extColumns}
           refetchIntervalMs={refetchIntervalMs}
diff --git a/frontend/src/components/StockPreviewDialog.tsx b/frontend/src/components/StockPreviewDialog.tsx
index 606af2b..527d8ed 100644
--- a/frontend/src/components/StockPreviewDialog.tsx
+++ b/frontend/src/components/StockPreviewDialog.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { motion, AnimatePresence } from 'framer-motion'
-import { X, RefreshCw, Clock, LineChart, Star, RadioTower, Maximize2, Minimize2, Activity } from 'lucide-react'
+import { X, RefreshCw, Clock, LineChart, Star, RadioTower, Maximize2, Minimize2, Activity, ChevronLeft, ChevronRight } from 'lucide-react'
 import { api } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
 import { cn } from '@/lib/cn'
@@ -18,6 +18,7 @@ import { usePreferences } from '@/lib/useSharedQueries'
 import { setFocusSymbol, clearFocusSymbol } from '@/lib/useQuoteStream'
 import { useDialogBackdrop } from '@/lib/useDialogBackdrop'
 import { storage } from '@/lib/storage'
+import { DEFAULT_INTRADAY_DAYS } from '@/lib/kline'
 import { ExtensionSlot } from '@/extensions/ExtensionSlot'
 
 interface Props {
@@ -32,6 +33,35 @@ interface Props {
     signals?: string[]
     message?: string
   } | null
+  /** 有序候选列表: 提供后支持左右键/顶栏按钮切股, 标题栏显示 n/N */
+  navList?: NavItem[]
+  /** 切股回调: 收到目标 symbol/name, 由调用方更新预览状态 */
+  onNavigate?: (symbol: string, name?: string) => void
+}
+
+/** 切股导航列表项 */
+export interface NavItem { symbol: string; name?: string }
+
+/** 把 symbol+name 的列表转成切股导航列表项 (统一 name 归一化为 undefined, 免去各处重复 map + as 断言) */
+export function toNavItems<T extends { symbol: string; name?: string | null }>(xs: T[]): NavItem[] {
+  return xs.map(x => ({ symbol: x.symbol, name: x.name ?? undefined }))
+}
+
+/** 首↔尾循环的索引换算: go(delta) 与 邻近预取 共用, 保证换行规则单源 */
+function wrapNavIndex(navIdx: number, delta: number, navTotal: number): number {
+  return (navIdx + delta + navTotal) % navTotal
+}
+
+/** 榜单里同一标的可能多次出现 (多概念/行业 leader、监控重复触发), 去重以免切股/计数空跳; 保留首次出现。 */
+function uniqueNavItems(xs: NavItem[]): NavItem[] {
+  const seen = new Set<string>()
+  const out: NavItem[] = []
+  for (const n of xs) {
+    if (seen.has(n.symbol)) continue
+    seen.add(n.symbol)
+    out.push(n)
+  }
+  return out
 }
 
 // ===== 板块标识（与 Screener 列表一致）=====
@@ -50,11 +80,11 @@ interface PriceAlertDraft {
 }
 const INTRADAY_DAY_OPTIONS = [1, 5, 10, 20] as const
 
-function loadIntradayDays(): number | null {
-  const saved = storage.stockPreviewIntradayDays.get(10)
+function loadIntradayDays(): number {
+  const saved = storage.stockPreviewIntradayDays.get(DEFAULT_INTRADAY_DAYS)
   return INTRADAY_DAY_OPTIONS.includes(saved as typeof INTRADAY_DAY_OPTIONS[number])
     ? saved
-    : null
+    : DEFAULT_INTRADAY_DAYS
 }
 
 function boardTag(symbol: string): { label: string; color: string } | null {
@@ -79,7 +109,7 @@ function fmtAbnormalCalcTime(asofSec: number): string {
   return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
 }
 
-export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props) {
+export function StockPreviewDialog({ symbol, name, onClose, triggerInfo, navList: navListSource, onNavigate }: Props) {
   const [view, setView] = useState<PreviewView>('daily')
   const [intradayDays, setIntradayDays] = useState<number | null>(loadIntradayDays)
   const [dateRange, setDateRange] = useState(getDefaultRange)
@@ -137,18 +167,83 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props
     },
   })
 
-  // ESC 关闭
+  // ===== 切股导航 =====
+  const navList = useMemo(() => uniqueNavItems(navListSource ?? []), [navListSource])
+
+  // 当前 symbol 在 navList 中的位置 (不在列表则为 -1, 此时不显示计数/按钮)
+  const navIdx = navList.findIndex(n => n.symbol === symbol)
+  const navTotal = navList.length
+  const navEnabled = navTotal >= 2 && navIdx >= 0
+
+  // 首↔尾循环的弱提示 (自显 ~1.5s, 不引全局 Toast)
+  const [wrapMsg, setWrapMsg] = useState<string | null>(null)
+  const wrapTimer = useRef<number | null>(null)
+  useEffect(() => {
+    return () => { if (wrapTimer.current) window.clearTimeout(wrapTimer.current) }
+  }, [])
+
+  // 父级 onNavigate/onClose 多为内联 lambda, 用最新值 ref 承接, 避免每次父渲染重建 go/键盘监听
+  const onNavigateRef = useRef(onNavigate)
+  onNavigateRef.current = onNavigate
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+
+  // 前后切股: 返回是否真正导航 (供键盘判断是否要 preventDefault)
+  const go = useCallback((delta: 1 | -1): boolean => {
+    if (!navEnabled) return false
+    const nextIdx = wrapNavIndex(navIdx, delta, navTotal)
+    const wrapped = nextIdx === (delta === 1 ? 0 : navTotal - 1)
+    if (wrapped) {
+      // 提示词描述切股后的落点 (而非起点)
+      setWrapMsg(delta === 1 ? '已到榜首' : '已到末尾')
+      if (wrapTimer.current) window.clearTimeout(wrapTimer.current)
+      wrapTimer.current = window.setTimeout(() => setWrapMsg(null), 1500)
+    }
+    const next = navList[nextIdx]
+    onNavigateRef.current?.(next.symbol, next.name)
+    return true
+  }, [navList, navIdx, navTotal])
+
+  // 邻近预取目标: 当前股左右相邻两只 (首↔尾循环), 交由 StockPanel 提前拉取日K/财务/分时缓存
+  const prefetchSymbols = useMemo(() => {
+    if (!navEnabled) return []
+    return [
+      navList[wrapNavIndex(navIdx, -1, navTotal)].symbol,
+      navList[wrapNavIndex(navIdx, 1, navTotal)].symbol,
+    ]
+  }, [navEnabled, navIdx, navTotal, navList])
+
+  // ESC 关闭 + 左右键切股
   useEffect(() => {
     if (!symbol) return
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !priceAlertDraft) onClose()
+      if (e.key === 'Escape' && !priceAlertDraft) { onCloseRef.current(); return }
+      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+        // 点位监控弹窗打开时方向键不切股 (与 ESC 的 !priceAlertDraft 守卫同层级)
+        if (priceAlertDraft) return
+        // 焦点在输入框/编辑器时方向键让位给光标/输入, 不切股
+        const t = e.target as HTMLElement | null
+        if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable)) return
+        if (showMonitorEditor) return
+        if (go(e.key === 'ArrowRight' ? 1 : -1)) {
+          e.preventDefault()
+          // 切股后清掉控件残留的键盘焦点: 点过分时tab/外链等控件后方向键切股,
+          // 浏览器会给该控件显示 focus-visible 默认蓝色 outline, 切换后 blur 掉避免残留。
+          // keydown 的 e.target 即聚焦元素, 复用已捕获的 t (已排除输入框/编辑器)。
+          t?.blur()
+        }
+      }
     }
     document.addEventListener('keydown', handler)
     return () => document.removeEventListener('keydown', handler)
-  }, [symbol, onClose, priceAlertDraft])
+  }, [symbol, go, showMonitorEditor, priceAlertDraft])
 
+  // 弹窗内切股时保留当前视图 (分时 tab 下切股不应跳回日K);
+  // 仅当弹窗首次打开 (symbol 从 null 变非空) 时重置为日K。
+  const prevSymbolRef = useRef<string | null>(null)
   useEffect(() => {
-    if (symbol) setView('daily')
+    if (prevSymbolRef.current == null && symbol != null) setView('daily')
+    prevSymbolRef.current = symbol
     setPriceAlertDraft(null)
   }, [symbol])
 
@@ -223,7 +318,7 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props
             transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
             className={cn(
               'relative rounded-card border border-border bg-base shadow-2xl overflow-hidden flex flex-col transition-all duration-200 ease-smooth',
-              maximized ? 'w-screen h-screen max-w-none max-h-none' : 'w-[92vw] max-w-[1100px] max-h-[95vh]',
+              maximized ? 'w-screen h-screen max-w-none max-h-none' : 'w-[92vw] max-w-[1200px] max-h-[95vh]',
             )}
           >
             {/* 顶栏 */}
@@ -239,6 +334,32 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props
                 })()}
                 <span className="shrink-0 font-mono text-sm font-medium text-foreground">{symbol}</span>
                 {name && <span className="truncate text-xs text-muted">{name}</span>}
+
+                {/* 切股导航: 上一只 / n·N / 下一只 */}
+                {navEnabled && (
+                  <>
+                    <span className="mx-0.5 shrink-0 text-muted/20">|</span>
+                    <button
+                      onClick={() => go(-1)}
+                      title="上一只 (←)"
+                      aria-label="上一只"
+                      className="p-1 rounded-btn text-secondary hover:text-foreground hover:bg-elevated transition-colors cursor-pointer"
+                    >
+                      <ChevronLeft className="h-3.5 w-3.5" />
+                    </button>
+                    <span className="shrink-0 font-mono text-[11px] text-secondary tabular-nums whitespace-nowrap">
+                      {navIdx + 1} / {navTotal}
+                    </span>
+                    <button
+                      onClick={() => go(1)}
+                      title="下一只 (→)"
+                      aria-label="下一只"
+                      className="p-1 rounded-btn text-secondary hover:text-foreground hover:bg-elevated transition-colors cursor-pointer"
+                    >
+                      <ChevronRight className="h-3.5 w-3.5" />
+                    </button>
+                  </>
+                )}
               </div>
 
               <div className="flex shrink-0 items-center gap-1">
@@ -491,6 +612,9 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props
                   priceLines={monitorPriceLines}
                   onPriceDoubleClick={openPriceAlert}
                   refetchIntervalMs={intradayRefetchMs}
+                  prefetchSymbols={prefetchSymbols}
+                  intradayDays={effectiveIntradayDays}
+                  dailyKlineFlex="flex-[1.4]"
                 />
               ) : (
                 <>
@@ -498,6 +622,8 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props
                   symbol={symbol}
                   dateRange={dateRange}
                   infoBarOnly
+                  prefetchSymbols={prefetchSymbols}
+                  intradayDays={effectiveIntradayDays}
                 />
                 <StockMultiDayIntradayChart
                   symbol={symbol}
@@ -546,6 +672,21 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo }: Props
                 </motion.div>
               )}
             </AnimatePresence>
+
+            {/* 首↔尾循环弱提示 */}
+            <AnimatePresence>
+              {wrapMsg && (
+                <motion.div
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 8 }}
+                  transition={{ duration: 0.2 }}
+                  className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2 rounded-full border border-border bg-surface/95 px-3 py-1.5 text-[11px] text-secondary shadow-lg backdrop-blur"
+                >
+                  {wrapMsg}
+                </motion.div>
+              )}
+            </AnimatePresence>
           </motion.div>
         </div>
       )}
diff --git a/frontend/src/components/screener/ScreenerTable.tsx b/frontend/src/components/screener/ScreenerTable.tsx
index 09439c7..e908da6 100644
--- a/frontend/src/components/screener/ScreenerTable.tsx
+++ b/frontend/src/components/screener/ScreenerTable.tsx
@@ -22,6 +22,8 @@ import {
   dimensionKindForSourceField,
   type DimensionMembersTarget,
 } from '@/components/DimensionMembersDialog'
+import { toNavItems, type NavItem } from '@/components/StockPreviewDialog'
+import { cn } from '@/lib/cn'
 
 interface ScreenerTableProps {
   rows: any[]
@@ -30,7 +32,7 @@ interface ScreenerTableProps {
   symbolStrategyMap: Map<string, string[]>
   activeStrategy: string | null
   watchlistSet: Set<string>
-  onPreview: (symbol: string, name: string) => void
+  onPreview: (symbol: string, name?: string, navList?: NavItem[]) => void
   onAddToWatchlist: (symbol: string, groupId: string | null) => void
   onRemoveFromWatchlist: (symbol: string) => void
   watchlistPending: boolean
@@ -57,6 +59,8 @@ interface ScreenerTableProps {
   /** 表头排序（受控，由 Screener.tsx 传入） */
   sort?: SortState | null
   onSortToggle?: (colId: string) => void
+  /** 正在 K 线弹窗预览中的 symbol → 高亮该行 */
+  activeSymbol?: string | null
 }
 
 /** 渲染标签数组（含 maxTags 折叠/展开、横竖排列）。策略列与 ext 列共用。
@@ -161,7 +165,7 @@ export function ScreenerTable({
   minuteData = {}, intradayChartVisible = true, onToggleIntradayChart,
   intradayAutoRefresh = false, onRefreshIntraday, intradayRefreshing = false,
   strategyTagsExpanded = false, onToggleStrategyTags,
-  sort, onSortToggle,
+  sort, onSortToggle, activeSymbol,
 }: ScreenerTableProps) {
   const [expandedCells, setExpandedCells] = useState<Set<string>>(new Set())
   const [dimensionTarget, setDimensionTarget] = useState<DimensionMembersTarget | null>(null)
@@ -244,7 +248,7 @@ export function ScreenerTable({
             <div className="flex items-center gap-2">
               <button
                 type="button"
-                onClick={() => onPreview(r.symbol, r.name ?? '')}
+                onClick={() => onPreview(r.symbol, r.name ?? '', toNavItems(rows))}
                 className={`flex items-center gap-2 text-left ${isExpired ? 'cursor-default' : ''}`}
               >
                 {board ? (
@@ -393,10 +397,12 @@ export function ScreenerTable({
         onSortToggle={onSortToggle}
         minWidth={Math.max(900, columns.filter(c => c.visible).length * 110)}
         rowKey={(r: any) => `${r.symbol}${r._expired ? '-expired' : ''}`}
-        rowClassName={(r: any) => r._expired
-          ? 'border-border/50 opacity-40'
-          : 'border-border hover:bg-elevated/50'
-        }
+        rowClassName={(r: any) => cn(
+          r._expired
+            ? 'border-border/50 opacity-40'
+            : 'border-border hover:bg-elevated/50',
+          r.symbol === activeSymbol && 'bg-accent/10',
+        )}
         // 日k / 分时列表头：标签 + 显示/隐藏的眼睛按钮（与自选页一致）
         renderHeaderContent={(col) => {
         if (col.source.type !== 'builtin') return undefined
@@ -487,9 +493,9 @@ export function ScreenerTable({
       <DimensionMembersDialog
         target={dimensionTarget}
         onClose={() => setDimensionTarget(null)}
-        onStockClick={(symbol, name) => {
+        onStockClick={(symbol, name, navList) => {
           setDimensionTarget(null)
-          onPreview(symbol, name ?? '')
+          onPreview(symbol, name ?? '', navList)
         }}
       />
     </>
diff --git a/frontend/src/lib/kline.ts b/frontend/src/lib/kline.ts
new file mode 100644
index 0000000..37e2327
--- /dev/null
+++ b/frontend/src/lib/kline.ts
@@ -0,0 +1,57 @@
+/**
+ * 日K查询配置 — klineDaily 的唯一权威 options。
+ *
+ * StockDailyKChart(图表) 与 StockPanel(信息条) 各自 useQuery 共享同一 cache key,
+ * React Query 按 key 去重只发一次请求; 邻近预取 prefetchQuery 也复用本配置, 三处不会漂移。
+ *
+ * placeholderData 内置"仅同 symbol 占位"守卫: 改日期范围/扩展字段时旧数据可暂显(不闪),
+ * 切股时不透传上一只股票的数据(不误显示)。
+ */
+import { api } from '@/lib/api'
+import { QK } from '@/lib/queryKeys'
+
+/** 分时 tab 多日分时默认周期 (StockPanel 预取与弹窗存储回退共用, 避免魔数两处漂移) */
+export const DEFAULT_INTRADAY_DAYS = 10
+
+export function klineDailyQueryOptions(
+  symbol: string,
+  dateRange: { start: string; end: string },
+  extColumns?: string,
+) {
+  return {
+    queryKey: QK.kline(symbol, dateRange.start, dateRange.end, extColumns),
+    queryFn: () => api.klineDaily(symbol, undefined, dateRange, extColumns),
+    // 工厂无 TData 泛型, 参数用 any 以便 useQuery/prefetchQuery 共用
+    placeholderData: (prev: any, prevQuery: any) => {
+      const prevKey = prevQuery?.queryKey as readonly unknown[] | undefined
+      return prevKey?.[1] === symbol ? prev : undefined
+    },
+  }
+}
+
+/**
+ * 单日分时查询配置 — 与 klineDailyQueryOptions 同风格的单源 options (date 为空 = 最新日内)。
+ *
+ * live 仅当日盘中生效: 传 true 时后端实时拉取最新K, 不被分钟增量落盘(≥60s 一轮)拖慢;
+ * 历史日期后端自行忽略 live, 故多日图与预取恒传 true 亦不影响历史读取。
+ */
+export function klineMinuteQueryOptions(symbol: string, date?: string, live?: boolean) {
+  return {
+    queryKey: QK.klineMinute(symbol, date ?? ''),
+    queryFn: () => api.klineMinute(symbol, date ?? undefined, live),
+  }
+}
+
+/** 多日分时查询配置 — 分时 tab 的 StockMultiDayIntradayChart 与 邻近预取 共用。
+ * 内嵌「仅同 symbol 占位」守卫 (key 结构 ['kline-minute-range', symbol, days], index 1 为 symbol),
+ * 与 klineDailyQueryOptions 同源, 调用点不再各自手写。 */
+export function klineMinuteRangeQueryOptions(symbol: string, days: number) {
+  return {
+    queryKey: QK.klineMinuteRange(symbol, days),
+    queryFn: () => api.klineMinuteRange(symbol, days),
+    placeholderData: (prev: any, prevQuery: any) => {
+      const prevKey = prevQuery?.queryKey as readonly unknown[] | undefined
+      return prevKey?.[1] === symbol ? prev : undefined
+    },
+  }
+}
diff --git a/frontend/src/lib/stock-external-link.ts b/frontend/src/lib/stock-external-link.ts
new file mode 100644
index 0000000..c593334
--- /dev/null
+++ b/frontend/src/lib/stock-external-link.ts
@@ -0,0 +1,36 @@
+/**
+ * 个股详情外链 — 可配置 URL 模板 + 证券代码。
+ *
+ * 占位符保持独立, 用户自行排列 (市场前缀/后缀因站而异):
+ *   {code}   纯 6 位代码, 如 000001
+ *   {market} 市场前缀小写, 如 sz / sh / bj
+ *   {symbol} 完整 symbol (含交易所后缀), 如 000001.SZ
+ * 模板留空 = 关闭外链。
+ */
+import { storage } from '@/lib/storage'
+
+/** 形状守卫: 只放行 6位数字 + 沪深北后缀 的 symbol (信息条场景下即股票) */
+const STOCK_SYMBOL_RE = /^(\d{6})\.(SH|SZ|BJ)$/
+
+/** 未设置或留空 → 返回 '' 即关闭外链 */
+export function loadStockExternalTemplate(): string {
+  return storage.stockExternalTemplate.get('')
+}
+
+export function saveStockExternalTemplate(tpl: string): void {
+  storage.stockExternalTemplate.set(tpl.trim())
+}
+
+export function buildStockExternalUrl(template: string, symbol: string): string | null {
+  if (!template) return null
+  // scheme 白名单: 只放行 http/https, 挡掉 javascript:/data: 等危险 scheme
+  if (!/^https?:\/\//i.test(template.trim())) return null
+  const m = symbol.match(STOCK_SYMBOL_RE)
+  if (!m) return null
+  const code = m[1]
+  const market = m[2].toLowerCase()
+  return template
+    .replaceAll('{code}', code)
+    .replaceAll('{market}', market)
+    .replaceAll('{symbol}', symbol)
+}
diff --git a/frontend/src/lib/storage.ts b/frontend/src/lib/storage.ts
index 4b5a76b..da5e707 100644
--- a/frontend/src/lib/storage.ts
+++ b/frontend/src/lib/storage.ts
@@ -44,6 +44,9 @@ export const storage = {
   /** 个股详情多日分时周期 */
   stockPreviewIntradayDays: kv<number>('stock_preview_intraday_days'),
 
+  /** 个股详情外链 URL 模板 (支持 {code}/{market}/{symbol}; 留空关闭) */
+  stockExternalTemplate: kv<string>('stock_external_template'),
+
   /** 策略结果列表列配置 */
   screenerResultColumns: kv<unknown[]>('screener_result_columns'),
 
diff --git a/frontend/src/lib/useFinancials.ts b/frontend/src/lib/useFinancials.ts
index 5c11e20..154416d 100644
--- a/frontend/src/lib/useFinancials.ts
+++ b/frontend/src/lib/useFinancials.ts
@@ -20,13 +20,16 @@ export function useFinancialStatus() {
   })
 }
 
-export function useFinancialMetrics(symbol?: string) {
-  return useQuery({
+export function financialMetricsQueryOptions(symbol?: string) {
+  return {
     queryKey: FINANCIAL_QK.metrics(symbol),
     queryFn: () => api.financialMetrics(symbol),
-    enabled: !!symbol,
     staleTime: 300_000,
-  })
+  }
+}
+
+export function useFinancialMetrics(symbol?: string) {
+  return useQuery({ ...financialMetricsQueryOptions(symbol), enabled: !!symbol })
 }
 
 export function useFinancialIncome(symbol?: string) {
diff --git a/frontend/src/pages/ConceptAnalysis.tsx b/frontend/src/pages/ConceptAnalysis.tsx
index 419d6b3..99c855a 100644
--- a/frontend/src/pages/ConceptAnalysis.tsx
+++ b/frontend/src/pages/ConceptAnalysis.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from 'react'
+import { useCallback, useMemo, useState, type ReactNode } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { AnimatePresence } from 'framer-motion'
 import {
@@ -15,7 +15,7 @@ import {
 import { PageHeader } from '@/components/PageHeader'
 import { EmptyState } from '@/components/EmptyState'
 import { AnalysisConfigDialog, PresetFetchState, type AnalysisFieldConfig } from '@/components/analysis-shared'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import { RpsRotationDialog } from '@/components/RpsRotationDialog'
 import { api, type MarketSnapshotRow } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
@@ -241,6 +241,12 @@ export function ConceptAnalysis() {
   const [sortMode, setSortMode] = useState<SortMode>('heat')
   const [previewSymbol, setPreviewSymbol] = useState<string | null>(null)
   const [previewName, setPreviewName] = useState<string>('')
+  const [previewNavList, setPreviewNavList] = useState<NavItem[]>([])
+  const handleStockClick = useCallback((symbol: string, name?: string, navList?: NavItem[]) => {
+    setPreviewSymbol(symbol)
+    setPreviewName(name ?? '')
+    setPreviewNavList(navList ?? [])
+  }, [])
   const [showRps, setShowRps] = useState(false)
 
   const configsQuery = useQuery({ queryKey: QK.extData, queryFn: api.extDataList })
@@ -393,7 +399,8 @@ export function ConceptAnalysis() {
             falling={falling}
             selectedKey={selected?.key ?? null}
             onSelect={setSelectedKey}
-            onStockClick={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name ?? '') }}
+            activeSymbol={previewSymbol}
+            onStockClick={handleStockClick}
           />
 
           {stats.length > 0 ? (
@@ -407,7 +414,7 @@ export function ConceptAnalysis() {
                 onSort={setSortMode}
                 onSelect={setSelectedKey}
               />
-              <ConceptFocus stat={selected} onStockClick={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name ?? '') }} />
+              <ConceptFocus stat={selected} activeSymbol={previewSymbol} onStockClick={handleStockClick} />
             </div>
           ) : rowsQuery.isLoading ? (
             <div className="rounded-2xl border border-border bg-surface px-6 py-16 text-center text-sm text-muted">正在计算概念强度...</div>
@@ -433,7 +440,9 @@ export function ConceptAnalysis() {
         <StockPreviewDialog
           symbol={previewSymbol}
           name={previewName}
-          onClose={() => { setPreviewSymbol(null); setPreviewName('') }}
+          onClose={() => { setPreviewSymbol(null); setPreviewName(''); setPreviewNavList([]) }}
+          navList={previewNavList}
+          onNavigate={(sym, n) => { setPreviewSymbol(sym); setPreviewName(n ?? '') }}
         />
       )}
 
@@ -509,17 +518,19 @@ function MarketPulse({
   selectedKey,
   onSelect,
   onStockClick,
+  activeSymbol,
 }: {
   leading: ConceptStat[]
   falling: ConceptStat[]
   selectedKey: string | null
   onSelect: (key: string) => void
-  onStockClick: (symbol: string, name?: string) => void
+  onStockClick: (symbol: string, name?: string, navList?: NavItem[]) => void
+  activeSymbol: string | null
 }) {
   return (
     <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
-      <PulseList title="领涨主线" items={leading} mode="up" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} />
-      <PulseList title="领跌方向" items={falling} mode="down" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} />
+      <PulseList title="领涨主线" items={leading} mode="up" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} activeSymbol={activeSymbol} />
+      <PulseList title="领跌方向" items={falling} mode="down" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} activeSymbol={activeSymbol} />
     </div>
   )
 }
@@ -531,13 +542,15 @@ function PulseList({
   selectedKey,
   onSelect,
   onStockClick,
+  activeSymbol,
 }: {
   title: string
   items: ConceptStat[]
   mode: 'up' | 'down'
   selectedKey: string | null
   onSelect: (key: string) => void
-  onStockClick: (symbol: string, name?: string) => void
+  onStockClick: (symbol: string, name?: string, navList?: NavItem[]) => void
+  activeSymbol: string | null
 }) {
   const toneText = mode === 'up' ? 'text-bull' : 'text-bear'
   const toneBorder = mode === 'up' ? 'border-bull/20' : 'border-bear/20'
@@ -556,7 +569,8 @@ function PulseList({
       <div className="space-y-1">
         {items.map((item, idx) => {
           const active = selectedKey === item.key
-          const leaders = [...item.stocks].sort((a, b) => b.leaderScore - a.leaderScore).slice(0, 3)
+          const sortedStocks = [...item.stocks].sort((a, b) => b.leaderScore - a.leaderScore)
+          const leaders = sortedStocks.slice(0, 3)
           const upPct = item.count > 0 ? (item.upCount / item.count) * 100 : 0
           const downPct = item.count > 0 ? (item.downCount / item.count) * 100 : 0
           const flatPct = Math.max(0, 100 - upPct - downPct)
@@ -597,7 +611,7 @@ function PulseList({
                   {Array.from({ length: 3 }).map((_, i) => {
                     const stock = leaders[i]
                     return stock ? (
-                      <span key={stock.symbol} title={stock.name || stock.symbol} onClick={e => { e.stopPropagation(); onStockClick(stock.symbol, stock.name || undefined) }} className={cn('flex min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] cursor-pointer hover:brightness-125', i === 0 ? 'bg-amber-300/10 text-foreground' : 'bg-elevated/60 text-secondary')}>
+                      <span key={stock.symbol} title={stock.name || stock.symbol} onClick={e => { e.stopPropagation(); onStockClick(stock.symbol, stock.name || undefined, toNavItems(sortedStocks.slice(0, MAX_RENDERED_STOCKS))) }} className={cn('flex min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] cursor-pointer hover:brightness-125', i === 0 ? 'bg-amber-300/10 text-foreground' : 'bg-elevated/60 text-secondary', stock.symbol === activeSymbol && 'ring-1 ring-accent/60')}>
                         <span className="flex min-w-0 items-center gap-1">
                           <span className="min-w-0 truncate font-medium">{stock.name || stock.symbol}</span>
                         </span>
@@ -674,10 +688,11 @@ function ConceptRail({
   )
 }
 
-function ConceptFocus({ stat, onStockClick }: { stat: ConceptStat | null; onStockClick: (symbol: string, name?: string) => void }) {
+function ConceptFocus({ stat, onStockClick, activeSymbol }: { stat: ConceptStat | null; onStockClick: (symbol: string, name?: string, navList?: NavItem[]) => void; activeSymbol: string | null }) {
   if (!stat) return null
   const stocks = [...stat.stocks].sort((a, b) => b.leaderScore - a.leaderScore).slice(0, MAX_RENDERED_STOCKS)
   const topLeaders = stocks.slice(0, 3)
+  const focusNav: NavItem[] = toNavItems(stocks)
   return (
     <section className="flex max-h-[720px] flex-col overflow-hidden rounded-2xl border border-border bg-surface">
       <div className="shrink-0 border-b border-border px-5 py-4">
@@ -706,7 +721,7 @@ function ConceptFocus({ stat, onStockClick }: { stat: ConceptStat | null; onStoc
       </div>
 
       <div className="grid shrink-0 gap-3 border-b border-border bg-base/25 p-4 lg:grid-cols-[1fr_1.15fr]">
-        <LeaderStage stocks={topLeaders} onStockClick={onStockClick} />
+        <LeaderStage stocks={topLeaders} activeSymbol={activeSymbol} onStockClick={(sym, name) => onStockClick(sym, name, focusNav)} />
         <ScoreExplain stock={topLeaders[0]} />
       </div>
 
@@ -726,7 +741,7 @@ function ConceptFocus({ stat, onStockClick }: { stat: ConceptStat | null; onStoc
           </thead>
           <tbody className="divide-y divide-border/70">
             {stocks.map((s, idx) => (
-              <tr key={`${s.symbol}-${idx}`} className="hover:bg-elevated/30 cursor-pointer" onClick={() => onStockClick(s.symbol, s.name || undefined)}>
+              <tr key={`${s.symbol}-${idx}`} className={cn('cursor-pointer', s.symbol === activeSymbol ? 'bg-accent/10 hover:bg-accent/15' : 'hover:bg-elevated/30')} onClick={() => onStockClick(s.symbol, s.name || undefined, focusNav)}>
                 <td className="px-4 py-2 font-mono text-muted">{idx + 1}</td>
                 <td className="px-4 py-2">
                   <div className="font-medium text-foreground">{s.name || '—'}</div>
@@ -757,7 +772,7 @@ function MiniStat({ label, value, cls }: { label: string; value: string; cls: st
   return <div className="rounded-lg border border-border/60 bg-base/35 px-2 py-1.5"><div className="text-[10px] text-muted">{label}</div><div className={cn('mt-0.5 truncate text-sm font-semibold', cls)}>{value}</div></div>
 }
 
-function LeaderStage({ stocks, onStockClick }: { stocks: EnrichedStock[]; onStockClick: (symbol: string, name?: string) => void }) {
+function LeaderStage({ stocks, onStockClick, activeSymbol }: { stocks: EnrichedStock[]; onStockClick: (symbol: string, name?: string) => void; activeSymbol: string | null }) {
   if (!stocks.length) return <div className="rounded-xl border border-border/60 bg-surface p-4 text-sm text-muted">暂无龙头候选</div>
   return (
     <div className="rounded-xl border border-border/60 bg-surface p-3">
@@ -767,7 +782,7 @@ function LeaderStage({ stocks, onStockClick }: { stocks: EnrichedStock[]; onStoc
       </div>
       <div className="grid gap-2 md:grid-cols-3">
         {stocks.map((stock, idx) => (
-          <div key={stock.symbol} onClick={() => onStockClick(stock.symbol, stock.name || undefined)} className={cn('rounded-lg border p-3 cursor-pointer hover:brightness-110 transition-all', idx === 0 ? 'border-amber-400/25 bg-amber-400/[0.06]' : 'border-border/60 bg-base/35')}>
+          <div key={stock.symbol} onClick={() => onStockClick(stock.symbol, stock.name || undefined)} className={cn('rounded-lg border p-3 cursor-pointer hover:brightness-110 transition-all', idx === 0 ? 'border-amber-400/25 bg-amber-400/[0.06]' : 'border-border/60 bg-base/35', stock.symbol === activeSymbol && 'ring-1 ring-accent/60')}>
             <div className="flex items-center justify-between gap-2">
               <span className={cn('text-[10px] font-medium', idx === 0 ? 'text-amber-300' : 'text-muted')}>{idx === 0 ? '主龙头' : `辅龙 ${idx}`}</span>
               <span className="font-mono text-[11px] text-amber-300">{stock.leaderScore.toFixed(0)}</span>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 702968a..e418927 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -10,7 +10,7 @@ import { fmtBigNum, fmtPct } from '@/lib/format'
 import { DimensionMembersDialog, dimensionKindForSourceField, type DimensionMembersTarget } from '@/components/DimensionMembersDialog'
 import { useDataStatus, useCapabilities, useSettings, usePreferences } from '@/lib/useSharedQueries'
 import { SealedBadge } from '@/components/SealedBadge'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import { SettingsModal } from '@/components/data/SettingsModal'
 import { useAdjFactorSyncGate } from '@/components/AdjFactorSyncGate'
 import { STAGE_LABELS } from '@/components/data/ActiveJobCard'
@@ -98,7 +98,10 @@ const _SEVERITY_BAR: Record<string, string> = {
   info: 'bg-accent/40', warn: 'bg-warning', critical: 'bg-danger',
 }
 
-function MonitorWidget({ onStockClick }: { onStockClick: (event: AlertEvent) => void }) {
+function MonitorWidget({ onStockClick, activeSymbol }: {
+  onStockClick: (event: AlertEvent, navList?: NavItem[]) => void
+  activeSymbol?: string
+}) {
   const navigate = useNavigate()
   const alerts = useQuery({
     queryKey: ['alerts', ''],
@@ -106,6 +109,8 @@ function MonitorWidget({ onStockClick }: { onStockClick: (event: AlertEvent) =>
     refetchInterval: 10000,
   })
   const events: AlertEvent[] = alerts.data?.alerts ?? []
+  // 切股导航列表: 有 symbol 的触发记录
+  const alertNav = toNavItems(events.filter((ev): ev is AlertEvent & { symbol: string } => !!ev.symbol))
 
   if (events.length === 0) {
     return (
@@ -129,13 +134,13 @@ function MonitorWidget({ onStockClick }: { onStockClick: (event: AlertEvent) =>
               initial={{ opacity: 0, y: -8, scale: 0.98 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
               transition={{ duration: 0.3, delay: Math.min(i * 0.03, 0.3) }}
-              className="relative overflow-hidden rounded-md border border-border/40 bg-surface/60 pl-2.5 pr-2 py-1.5 hover:border-border hover:bg-surface transition-colors"
+              className={`relative overflow-hidden rounded-md border pl-2.5 pr-2 py-1.5 transition-colors ${ev.symbol && ev.symbol === activeSymbol ? 'border-accent/40 bg-accent/5' : 'border-border/40 bg-surface/60 hover:border-border hover:bg-surface'}`}
             >
               <div className={cn('absolute left-0 top-0 h-full w-0.5', sev)} />
               {/* 第一行: 代码 + 名称 + 价格 + 涨跌幅 (点击代码/名称弹日K) */}
               <div className="flex items-center gap-1.5">
                 <button
-                  onClick={() => isSector ? navigate('/monitor') : ev.symbol && onStockClick(ev)}
+                  onClick={() => isSector ? navigate('/monitor') : ev.symbol && onStockClick(ev, alertNav)}
                   title={isSector ? '在监控中心查看板块告警' : ev.symbol ? `查看 ${ev.symbol} 日K` : undefined}
                   className={`inline-flex items-center gap-1 min-w-0 shrink-0 rounded hover:bg-elevated/60 transition-colors -mx-0.5 px-0.5 ${isSector || ev.symbol ? 'cursor-pointer' : 'cursor-default'}`}
                 >
@@ -409,9 +414,10 @@ function MiniMetric({ label, value, cls = 'text-foreground' }: { label: string;
   )
 }
 
-function StockList({ title, rows, mode, onStockClick }: {
+function StockList({ title, rows, mode, onStockClick, activeSymbol }: {
   title: string; rows: MarketSnapshotRow[]; mode: 'gain' | 'loss' | 'amount' | 'active';
   onStockClick?: (symbol: string, name?: string) => void;
+  activeSymbol?: string;
 }) {
   return (
     <div className="rounded-card border border-border bg-surface/80 p-1.5 shadow-[0_1px_2px_hsl(var(--border)/0.4)] backdrop-blur-sm transition-shadow hover:shadow-[0_2px_8px_hsl(var(--border)/0.5)]">
@@ -423,7 +429,7 @@ function StockList({ title, rows, mode, onStockClick }: {
         {rows.slice(0, 8).map((r, idx) => (
           <div
             key={`${r.symbol}-${idx}`}
-            className="grid grid-cols-[18px_1fr_auto] items-center gap-1.5 rounded-md bg-elevated/40 px-1.5 py-1 cursor-pointer hover:bg-elevated hover:brightness-110 transition-colors border border-transparent hover:border-border/60"
+            className={`grid grid-cols-[18px_1fr_auto] items-center gap-1.5 rounded-md px-1.5 py-1 cursor-pointer transition-colors border ${r.symbol === activeSymbol ? 'bg-accent/10 border-accent/30' : 'bg-elevated/40 border-transparent hover:bg-elevated hover:brightness-110 hover:border-border/60'}`}
             onClick={() => onStockClick?.(r.symbol, r.name ?? undefined)}
           >
             <span className="text-center font-mono text-[10px] text-muted">{idx + 1}</span>
@@ -467,10 +473,11 @@ function StockList({ title, rows, mode, onStockClick }: {
   )
 }
 
-function RankColumn({ title, rows, tone, onStockClick, onDimensionClick }: {
+function RankColumn({ title, rows, tone, onStockClick, onDimensionClick, activeSymbol }: {
   title: string; rows: OverviewDimensionRankItem[]; tone: 'bull' | 'bear';
-  onStockClick?: (symbol: string, name?: string) => void
-  onDimensionClick?: (target: DimensionMembersTarget) => void
+  onStockClick?: (symbol: string, name?: string) => void;
+  onDimensionClick?: (target: DimensionMembersTarget) => void;
+  activeSymbol?: string;
 }) {
   return (
     <div className="min-w-0 space-y-1">
@@ -478,6 +485,7 @@ function RankColumn({ title, rows, tone, onStockClick, onDimensionClick }: {
       {rows.slice(0, 5).map((r, idx) => {
         const kind = r.source_field ? dimensionKindForSourceField(r.source_field) : null
         const clickable = !!(r.source_field && kind && onDimensionClick)
+        const isActive = r.leader?.symbol != null && r.leader.symbol === activeSymbol
         return (
         <div
           key={`${title}-${r.name}-${idx}`}
@@ -487,9 +495,9 @@ function RankColumn({ title, rows, tone, onStockClick, onDimensionClick }: {
             sourceField: r.source_field!,
           })}
           title={clickable ? `查看「${r.name}」成分股` : undefined}
-          className={`grid grid-cols-[14px_1fr_auto] items-center gap-1 rounded-md bg-elevated/40 px-1.5 py-1 border border-transparent transition-colors ${
-            clickable ? 'cursor-pointer hover:border-accent/40 hover:bg-elevated/70' : 'hover:border-border/60'
-          }`}
+          className={`grid grid-cols-[14px_1fr_auto] items-center gap-1 rounded-md px-1.5 py-1 border transition-colors ${
+            isActive ? 'border-accent/30 bg-accent/10' : 'border-transparent bg-elevated/40'
+          } ${clickable ? 'cursor-pointer hover:border-accent/40 hover:bg-elevated/70' : 'hover:border-border/60'}`}
         >
           <span className="text-center font-mono text-[9px] text-muted">{idx + 1}</span>
           <div className="min-w-0">
@@ -533,10 +541,11 @@ function RankColumn({ title, rows, tone, onStockClick, onDimensionClick }: {
   )
 }
 
-function HotRankCard({ title, rank, configUrl, onStockClick, onDimensionClick }: {
+function HotRankCard({ title, rank, configUrl, onStockClick, onDimensionClick, activeSymbol }: {
   title: string; rank?: OverviewMarket['concept_rank']; configUrl: string;
-  onStockClick?: (symbol: string, name?: string) => void
-  onDimensionClick?: (target: DimensionMembersTarget) => void
+  onStockClick?: (symbol: string, name?: string) => void;
+  onDimensionClick?: (target: DimensionMembersTarget) => void;
+  activeSymbol?: string;
 }) {
   const hasData = (rank?.leading?.length ?? 0) > 0 || (rank?.lagging?.length ?? 0) > 0
   return (
@@ -544,8 +553,8 @@ function HotRankCard({ title, rank, configUrl, onStockClick, onDimensionClick }:
       <SectionTitle icon={Flame} title={title} hint="领涨/领跌 · 点击板块看成分股" />
       {hasData ? (
         <div className="grid grid-cols-2 gap-2">
-          <RankColumn title="领涨" rows={rank?.leading ?? []} tone="bull" onStockClick={onStockClick} onDimensionClick={onDimensionClick} />
-          <RankColumn title="领跌" rows={rank?.lagging ?? []} tone="bear" onStockClick={onStockClick} onDimensionClick={onDimensionClick} />
+          <RankColumn title="领涨" rows={rank?.leading ?? []} tone="bull" onStockClick={onStockClick} onDimensionClick={onDimensionClick} activeSymbol={activeSymbol} />
+          <RankColumn title="领跌" rows={rank?.lagging ?? []} tone="bear" onStockClick={onStockClick} onDimensionClick={onDimensionClick} activeSymbol={activeSymbol} />
         </div>
       ) : (
         <div className="py-4 text-center">
@@ -562,11 +571,30 @@ function HotRankCard({ title, rank, configUrl, onStockClick, onDimensionClick }:
   )
 }
 
+// 切股导航列表构建 (与列表展示行一致: StockList 只显示前 8)
+function stockListNav(rows: MarketSnapshotRow[]): NavItem[] {
+  return toNavItems(rows.slice(0, 8))
+}
+function rankNav(rank?: OverviewMarket['concept_rank']): NavItem[] {
+  const leaders = [...(rank?.leading ?? []), ...(rank?.lagging ?? [])]
+    .map(r => r.leader)
+    .filter((l): l is NonNullable<typeof l> & { symbol: string } => !!l?.symbol)
+  return toNavItems(leaders)
+}
+
 export function Dashboard() {
   const qc = useQueryClient()
   const [selectedDate, setSelectedDate] = useState<string | undefined>()
   const [manualFetching, setManualFetching] = useState(false)
-  const [previewStock, setPreviewStock] = useState<{symbol: string; name?: string; alert?: AlertEvent} | null>(null)
+  const [previewStock, setPreviewStock] = useState<{
+    symbol: string
+    name?: string
+    alert?: AlertEvent
+    /** 打开来源榜: 仅高亮来源榜的行 */
+    source?: 'gain' | 'loss' | 'amount' | 'active' | 'concept' | 'industry' | 'alert'
+    /** 切股导航列表 (来自来源榜) */
+    navList?: NavItem[]
+  } | null>(null)
   // 板块成分股弹窗 (概念/行业热度卡片行点击)
   const [dimensionTarget, setDimensionTarget] = useState<DimensionMembersTarget | null>(null)
   // 首次使用(无数据 + 未完成引导)自动弹窗: 同一会话只弹一次
@@ -855,19 +883,19 @@ export function Dashboard() {
           </div>
 
           <div className="grid grid-cols-1 gap-1.5 md:grid-cols-2">
-            <HotRankCard title="概念热度" rank={data.concept_rank} configUrl="/concept-analysis"
-              onStockClick={(symbol, name) => setPreviewStock({symbol, name})}
+            <HotRankCard title="概念热度" rank={data.concept_rank} configUrl="/concept-analysis" activeSymbol={previewStock?.source === 'concept' ? previewStock.symbol : undefined}
+              onStockClick={(symbol, name) => setPreviewStock({ symbol, name, source: 'concept', navList: rankNav(data.concept_rank) })}
               onDimensionClick={setDimensionTarget} />
-            <HotRankCard title="行业热度" rank={data.industry_rank} configUrl="/industry-analysis"
-              onStockClick={(symbol, name) => setPreviewStock({symbol, name})}
+            <HotRankCard title="行业热度" rank={data.industry_rank} configUrl="/industry-analysis" activeSymbol={previewStock?.source === 'industry' ? previewStock.symbol : undefined}
+              onStockClick={(symbol, name) => setPreviewStock({ symbol, name, source: 'industry', navList: rankNav(data.industry_rank) })}
               onDimensionClick={setDimensionTarget} />
           </div>
 
           <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 xl:grid-cols-4">
-            <StockList title="涨幅榜" rows={data.top_gainers} mode="gain" onStockClick={(symbol, name) => setPreviewStock({symbol, name})} />
-            <StockList title="跌幅榜" rows={data.top_losers} mode="loss" onStockClick={(symbol, name) => setPreviewStock({symbol, name})} />
-            <StockList title="成交额榜" rows={data.turnover_leaders} mode="amount" onStockClick={(symbol, name) => setPreviewStock({symbol, name})} />
-            <StockList title="活跃换手" rows={data.active_leaders} mode="active" onStockClick={(symbol, name) => setPreviewStock({symbol, name})} />
+            <StockList title="涨幅榜" rows={data.top_gainers} mode="gain" activeSymbol={previewStock?.source === 'gain' ? previewStock.symbol : undefined} onStockClick={(symbol, name) => setPreviewStock({ symbol, name, source: 'gain', navList: stockListNav(data.top_gainers) })} />
+            <StockList title="跌幅榜" rows={data.top_losers} mode="loss" activeSymbol={previewStock?.source === 'loss' ? previewStock.symbol : undefined} onStockClick={(symbol, name) => setPreviewStock({ symbol, name, source: 'loss', navList: stockListNav(data.top_losers) })} />
+            <StockList title="成交额榜" rows={data.turnover_leaders} mode="amount" activeSymbol={previewStock?.source === 'amount' ? previewStock.symbol : undefined} onStockClick={(symbol, name) => setPreviewStock({ symbol, name, source: 'amount', navList: stockListNav(data.turnover_leaders) })} />
+            <StockList title="活跃换手" rows={data.active_leaders} mode="active" activeSymbol={previewStock?.source === 'active' ? previewStock.symbol : undefined} onStockClick={(symbol, name) => setPreviewStock({ symbol, name, source: 'active', navList: stockListNav(data.active_leaders) })} />
           </div>
         </main>
 
@@ -887,9 +915,12 @@ export function Dashboard() {
                 <ArrowUpRight className="h-3.5 w-3.5" />
               </Link>
             </div>
-            <MonitorWidget onStockClick={(event) => {
-              if (event.symbol) setPreviewStock({ symbol: event.symbol, name: event.name ?? undefined, alert: event })
-            }} />
+            <MonitorWidget
+              activeSymbol={previewStock?.source === 'alert' ? previewStock.symbol : undefined}
+              onStockClick={(event, navList) => {
+                if (event.symbol) setPreviewStock({ symbol: event.symbol, name: event.name ?? undefined, alert: event, source: 'alert', navList })
+              }}
+            />
           </section>
         </aside>
       </div>
@@ -904,6 +935,8 @@ export function Dashboard() {
           signals: previewStock.alert.signals,
           message: previewStock.alert.message,
         } : null}
+        navList={previewStock?.navList}
+        onNavigate={(sym, n) => setPreviewStock(prev => prev ? { ...prev, symbol: sym, name: n, alert: undefined } : prev)}
         onClose={() => setPreviewStock(null)}
       />
       <DimensionMembersDialog
diff --git a/frontend/src/pages/IndustryAnalysis.tsx b/frontend/src/pages/IndustryAnalysis.tsx
index fd4c8e6..84b4025 100644
--- a/frontend/src/pages/IndustryAnalysis.tsx
+++ b/frontend/src/pages/IndustryAnalysis.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from 'react'
+import { useCallback, useMemo, useState, type ReactNode } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { AnimatePresence } from 'framer-motion'
 import {
@@ -15,7 +15,7 @@ import {
 import { PageHeader } from '@/components/PageHeader'
 import { EmptyState } from '@/components/EmptyState'
 import { AnalysisConfigDialog, DimensionHeatmap, PresetFetchState, type AnalysisFieldConfig } from '@/components/analysis-shared'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import { RpsRotationDialog } from '@/components/RpsRotationDialog'
 import { api, type MarketSnapshotRow } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
@@ -276,6 +276,12 @@ export function IndustryAnalysis() {
   const [sortMode, setSortMode] = useState<SortMode>('heat')
   const [previewSymbol, setPreviewSymbol] = useState<string | null>(null)
   const [previewName, setPreviewName] = useState<string>('')
+  const [previewNavList, setPreviewNavList] = useState<NavItem[]>([])
+  const handleStockClick = useCallback((symbol: string, name?: string, navList?: NavItem[]) => {
+    setPreviewSymbol(symbol)
+    setPreviewName(name ?? '')
+    setPreviewNavList(navList ?? [])
+  }, [])
   const [showRps, setShowRps] = useState(false)
 
   const configsQuery = useQuery({ queryKey: QK.extData, queryFn: api.extDataList })
@@ -446,7 +452,8 @@ export function IndustryAnalysis() {
             falling={falling}
             selectedKey={selected?.key ?? null}
             onSelect={setSelectedKey}
-            onStockClick={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name ?? '') }}
+            activeSymbol={previewSymbol}
+            onStockClick={handleStockClick}
           />
 
           {/* 热力图 */}
@@ -471,7 +478,7 @@ export function IndustryAnalysis() {
                 onSort={setSortMode}
                 onSelect={setSelectedKey}
               />
-              <IndustryFocus stat={selected} onStockClick={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name ?? '') }} />
+              <IndustryFocus stat={selected} activeSymbol={previewSymbol} onStockClick={handleStockClick} />
             </div>
           ) : rowsQuery.isLoading ? (
             <div className="rounded-2xl border border-border bg-surface px-6 py-16 text-center text-sm text-muted">正在计算行业强度...</div>
@@ -497,7 +504,9 @@ export function IndustryAnalysis() {
         <StockPreviewDialog
           symbol={previewSymbol}
           name={previewName}
-          onClose={() => { setPreviewSymbol(null); setPreviewName('') }}
+          onClose={() => { setPreviewSymbol(null); setPreviewName(''); setPreviewNavList([]) }}
+          navList={previewNavList}
+          onNavigate={(sym, n) => { setPreviewSymbol(sym); setPreviewName(n ?? '') }}
         />
       )}
       {showRps && <RpsRotationDialog onClose={() => setShowRps(false)} kind="industry" />}
@@ -574,17 +583,19 @@ function MarketPulse({
   selectedKey,
   onSelect,
   onStockClick,
+  activeSymbol,
 }: {
   leading: IndustryStat[]
   falling: IndustryStat[]
   selectedKey: string | null
   onSelect: (key: string) => void
-  onStockClick: (symbol: string, name?: string) => void
+  onStockClick: (symbol: string, name?: string, navList?: NavItem[]) => void
+  activeSymbol: string | null
 }) {
   return (
     <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
-      <PulseList title="领涨主线" items={leading} mode="up" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} />
-      <PulseList title="领跌方向" items={falling} mode="down" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} />
+      <PulseList title="领涨主线" items={leading} mode="up" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} activeSymbol={activeSymbol} />
+      <PulseList title="领跌方向" items={falling} mode="down" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} activeSymbol={activeSymbol} />
     </div>
   )
 }
@@ -596,13 +607,15 @@ function PulseList({
   selectedKey,
   onSelect,
   onStockClick,
+  activeSymbol,
 }: {
   title: string
   items: IndustryStat[]
   mode: 'up' | 'down'
   selectedKey: string | null
   onSelect: (key: string) => void
-  onStockClick: (symbol: string, name?: string) => void
+  onStockClick: (symbol: string, name?: string, navList?: NavItem[]) => void
+  activeSymbol: string | null
 }) {
   const toneText = mode === 'up' ? 'text-bull' : 'text-bear'
   const toneBorder = mode === 'up' ? 'border-bull/20' : 'border-bear/20'
@@ -621,7 +634,8 @@ function PulseList({
       <div className="space-y-1">
         {items.map((item, idx) => {
           const active = selectedKey === item.key
-          const leaders = [...item.stocks].sort((a, b) => b.leaderScore - a.leaderScore).slice(0, 3)
+          const sortedStocks = [...item.stocks].sort((a, b) => b.leaderScore - a.leaderScore)
+          const leaders = sortedStocks.slice(0, 3)
           const upPct = item.count > 0 ? (item.upCount / item.count) * 100 : 0
           const downPct = item.count > 0 ? (item.downCount / item.count) * 100 : 0
           const flatPct = Math.max(0, 100 - upPct - downPct)
@@ -662,7 +676,7 @@ function PulseList({
                   {Array.from({ length: 3 }).map((_, i) => {
                     const stock = leaders[i]
                     return stock ? (
-                      <span key={stock.symbol} title={stock.name || stock.symbol} onClick={e => { e.stopPropagation(); onStockClick(stock.symbol, stock.name || undefined) }} className={cn('flex min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] cursor-pointer hover:brightness-125', i === 0 ? 'bg-amber-300/10 text-foreground' : 'bg-elevated/60 text-secondary')}>
+                      <span key={stock.symbol} title={stock.name || stock.symbol} onClick={e => { e.stopPropagation(); onStockClick(stock.symbol, stock.name || undefined, toNavItems(sortedStocks.slice(0, MAX_RENDERED_STOCKS))) }} className={cn('flex min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] cursor-pointer hover:brightness-125', i === 0 ? 'bg-amber-300/10 text-foreground' : 'bg-elevated/60 text-secondary', stock.symbol === activeSymbol && 'ring-1 ring-accent/60')}>
                         <span className="flex min-w-0 items-center gap-1">
                           <span className="min-w-0 truncate font-medium">{stock.name || stock.symbol}</span>
                         </span>
@@ -743,10 +757,11 @@ function IndustryRail({
 
 // ===== IndustryFocus（右侧聚焦面板） =====
 
-function IndustryFocus({ stat, onStockClick }: { stat: IndustryStat | null; onStockClick: (symbol: string, name?: string) => void }) {
+function IndustryFocus({ stat, onStockClick, activeSymbol }: { stat: IndustryStat | null; onStockClick: (symbol: string, name?: string, navList?: NavItem[]) => void; activeSymbol: string | null }) {
   if (!stat) return null
   const stocks = [...stat.stocks].sort((a, b) => b.leaderScore - a.leaderScore).slice(0, MAX_RENDERED_STOCKS)
   const topLeaders = stocks.slice(0, 3)
+  const focusNav: NavItem[] = toNavItems(stocks)
   return (
     <section className="flex max-h-[720px] flex-col overflow-hidden rounded-2xl border border-border bg-surface">
       <div className="shrink-0 border-b border-border px-5 py-4">
@@ -775,7 +790,7 @@ function IndustryFocus({ stat, onStockClick }: { stat: IndustryStat | null; onSt
       </div>
 
       <div className="grid shrink-0 gap-3 border-b border-border bg-base/25 p-4 lg:grid-cols-[1fr_1.15fr]">
-        <LeaderStage stocks={topLeaders} onStockClick={onStockClick} />
+        <LeaderStage stocks={topLeaders} activeSymbol={activeSymbol} onStockClick={(sym, name) => onStockClick(sym, name, focusNav)} />
         <ScoreExplain stock={topLeaders[0]} />
       </div>
 
@@ -795,7 +810,7 @@ function IndustryFocus({ stat, onStockClick }: { stat: IndustryStat | null; onSt
           </thead>
           <tbody className="divide-y divide-border/70">
             {stocks.map((s, idx) => (
-              <tr key={`${s.symbol}-${idx}`} className="hover:bg-elevated/30 cursor-pointer" onClick={() => onStockClick(s.symbol, s.name || undefined)}>
+              <tr key={`${s.symbol}-${idx}`} className={cn('cursor-pointer', s.symbol === activeSymbol ? 'bg-accent/10 hover:bg-accent/15' : 'hover:bg-elevated/30')} onClick={() => onStockClick(s.symbol, s.name || undefined, focusNav)}>
                 <td className="px-4 py-2 font-mono text-muted">{idx + 1}</td>
                 <td className="px-4 py-2">
                   <div className="font-medium text-foreground">{s.name || '—'}</div>
@@ -826,7 +841,7 @@ function MiniStat({ label, value, cls }: { label: string; value: string; cls: st
   return <div className="rounded-lg border border-border/60 bg-base/35 px-2 py-1.5"><div className="text-[10px] text-muted">{label}</div><div className={cn('mt-0.5 truncate text-sm font-semibold', cls)}>{value}</div></div>
 }
 
-function LeaderStage({ stocks, onStockClick }: { stocks: EnrichedStock[]; onStockClick: (symbol: string, name?: string) => void }) {
+function LeaderStage({ stocks, onStockClick, activeSymbol }: { stocks: EnrichedStock[]; onStockClick: (symbol: string, name?: string) => void; activeSymbol: string | null }) {
   if (!stocks.length) return <div className="rounded-xl border border-border/60 bg-surface p-4 text-sm text-muted">暂无龙头候选</div>
   return (
     <div className="rounded-xl border border-border/60 bg-surface p-3">
@@ -836,7 +851,7 @@ function LeaderStage({ stocks, onStockClick }: { stocks: EnrichedStock[]; onStoc
       </div>
       <div className="grid gap-2 md:grid-cols-3">
         {stocks.map((stock, idx) => (
-          <div key={stock.symbol} onClick={() => onStockClick(stock.symbol, stock.name || undefined)} className={cn('rounded-lg border p-3 cursor-pointer hover:brightness-110 transition-all', idx === 0 ? 'border-amber-400/25 bg-amber-400/[0.06]' : 'border-border/60 bg-base/35')}>
+          <div key={stock.symbol} onClick={() => onStockClick(stock.symbol, stock.name || undefined)} className={cn('rounded-lg border p-3 cursor-pointer hover:brightness-110 transition-all', idx === 0 ? 'border-amber-400/25 bg-amber-400/[0.06]' : 'border-border/60 bg-base/35', stock.symbol === activeSymbol && 'ring-1 ring-accent/60')}>
             <div className="flex items-center justify-between gap-2">
               <span className={cn('text-[10px] font-medium', idx === 0 ? 'text-amber-300' : 'text-muted')}>{idx === 0 ? '主龙头' : `辅龙 ${idx}`}</span>
               <span className="font-mono text-[11px] text-amber-300">{stock.leaderScore.toFixed(0)}</span>
diff --git a/frontend/src/pages/LimitUpLadder.tsx b/frontend/src/pages/LimitUpLadder.tsx
index 41de236..6e12ad2 100644
--- a/frontend/src/pages/LimitUpLadder.tsx
+++ b/frontend/src/pages/LimitUpLadder.tsx
@@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { RefreshCw, ChevronDown, Flame, Settings2, X, Bell, BellOff, AlertCircle } from 'lucide-react'
 import { DatePicker } from '@/components/DatePicker'
 import { api, type LimitLadderTier, type LimitLadderStock, type MonitorRule } from '@/lib/api'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import { DimensionMembersDialog, type DimensionKind, type DimensionMembersTarget } from '@/components/DimensionMembersDialog'
 import { QK } from '@/lib/queryKeys'
 import { storage } from '@/lib/storage'
@@ -220,7 +220,7 @@ function useSealedDegrade(asOf: string, latestDate: string | undefined, sealedRe
 
 // ===== 单只股票卡片 =====
 
-const StockCard = React.memo(function StockCard({ stock, extFields, direction, sealMode, monitored, monitorRule, onMonitorChange, hasDepth, onClick, onDimensionClick }: {
+const StockCard = React.memo(function StockCard({ stock, extFields, direction, sealMode, monitored, monitorRule, onMonitorChange, hasDepth, onClick, onDimensionClick, active }: {
   stock: LimitLadderStock
   extFields: ExtFieldConfig
   direction: Direction
@@ -231,6 +231,8 @@ const StockCard = React.memo(function StockCard({ stock, extFields, direction, s
   hasDepth: boolean
   onClick: (symbol: string, name?: string) => void
   onDimensionClick: (kind: DimensionKind, value: string, sourceField?: string) => void
+  /** 正在 K 线弹窗预览中 → 高亮卡片 */
+  active?: boolean
 }) {
   const [showMonitorMenu, setShowMonitorMenu] = useState(false)
   const [menuAnchor, setMenuAnchor] = useState<DOMRect | null>(null)
@@ -298,7 +300,7 @@ const StockCard = React.memo(function StockCard({ stock, extFields, direction, s
         event.preventDefault()
         onClick(stock.symbol, stock.name ?? undefined)
       }}
-      className={`w-full flex flex-col items-start gap-1 px-2.5 py-2 rounded-md transition-all duration-200 cursor-pointer hover:opacity-100 ${style.bg} ${style.bar} ${monitored ? 'ring-1 ring-amber-400/50 ring-inset' : ''}`}
+      className={`w-full flex flex-col items-start gap-1 px-2.5 py-2 rounded-md transition-all duration-200 cursor-pointer hover:opacity-100 ${style.bg} ${style.bar} ${monitored ? 'ring-1 ring-amber-400/50 ring-inset' : ''} ${active ? 'ring-1 ring-accent/60 ring-inset' : ''}`}
       style={style.cardStyle ? { ...style.cardStyle } : undefined}
       onMouseEnter={e => {
         if (!style.cardStyle || !style.hoverShadow) return
@@ -926,7 +928,53 @@ function TagStats({ title, tiers, extFields, fieldKey, color, selectedTag, onSel
 
 // ===== 梯队分组 =====
 
-function TierGroup({ tier, defaultOpen, extFields, filterKeys, bf, onStockClick, selectedTag, onSelectTag, onDimensionClick, direction, sealMode, monitoredSymbols, ladderRules, onMonitorChange, hasDepth }: {
+/** 与 TierGroup 卡片展示一致的过滤+排序 (监控优先 → 状态 → 封单量), 供切股导航列表复用 */
+function sortLadderStocks(
+  stocks: LimitLadderStock[],
+  opts: {
+    monitoredSymbols: Set<string>
+    sealMode: 'vol' | 'amount'
+    selectedTag: { fieldKey: 'concept' | 'industry'; tag: string } | null
+    extFields: ExtFieldConfig
+  },
+): LimitLadderStock[] {
+  return [...stocks]
+    .filter(s => {
+      if (!opts.selectedTag) return true
+      const item = opts.extFields[opts.selectedTag.fieldKey]
+      if (!item) return true
+      const tags = getExtTags(s, item)
+      return tags.includes(opts.selectedTag.tag)
+    })
+    .sort((a, b) => {
+      // 开启监控的卡片排到分组最前
+      const ma = opts.monitoredSymbols.has(a.symbol) ? 0 : 1
+      const mb = opts.monitoredSymbols.has(b.symbol) ? 0 : 1
+      if (ma !== mb) return ma - mb
+      const ord = (s: string) => {
+        if (s === 'limit_up' || s === 'limit_down' || !s) return 0
+        if (s === 'broken' || s === 'recovery') return 1
+        return 2
+      }
+      const oa = ord(a.status ?? '')
+      const ob = ord(b.status ?? '')
+      if (oa !== ob) return oa - ob
+      // 同状态(主状态=涨停/跌停)内: 按封单从高到低排, 无封单排末尾。
+      // 封单额 = sealed_vol(手) × 100 × close, 与展示口径一致。
+      if (oa === 0) {
+        const sealVal = (s: LimitLadderStock) => {
+          if (s.sealed_vol == null) return -1
+          return opts.sealMode === 'amount' && s.close
+            ? s.sealed_vol * 100 * s.close
+            : s.sealed_vol
+        }
+        return sealVal(b) - sealVal(a)
+      }
+      return 0
+    })
+}
+
+function TierGroup({ tier, defaultOpen, extFields, filterKeys, bf, onStockClick, selectedTag, onSelectTag, onDimensionClick, direction, sealMode, monitoredSymbols, ladderRules, onMonitorChange, hasDepth, activeSymbol }: {
   tier: LimitLadderTier
   defaultOpen: boolean
   extFields: ExtFieldConfig
@@ -942,6 +990,8 @@ function TierGroup({ tier, defaultOpen, extFields, filterKeys, bf, onStockClick,
   ladderRules: Map<string, MonitorRule>
   onMonitorChange: () => void
   hasDepth: boolean
+  /** 正在 K 线弹窗预览中 → 高亮对应卡片 */
+  activeSymbol?: string | null
 }) {
   const isDarkTheme = useTheme() === 'dark'
   const [open, setOpen] = useState(defaultOpen)
@@ -1085,40 +1135,7 @@ function TierGroup({ tier, defaultOpen, extFields, filterKeys, bf, onStockClick,
               </div>
             )}
             <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 px-3 pb-3">
-              {[...tier.stocks]
-                .filter(s => {
-                  if (!selectedTag) return true
-                  const item = extFields[selectedTag.fieldKey]
-                  if (!item) return true
-                  const tags = getExtTags(s, item)
-                  return tags.includes(selectedTag.tag)
-                })
-                .sort((a, b) => {
-                  // 开启监控的卡片排到分组最前
-                  const ma = monitoredSymbols.has(a.symbol) ? 0 : 1
-                  const mb = monitoredSymbols.has(b.symbol) ? 0 : 1
-                  if (ma !== mb) return ma - mb
-                  const ord = (s: string) => {
-                    if (s === 'limit_up' || s === 'limit_down' || !s) return 0
-                    if (s === 'broken' || s === 'recovery') return 1
-                    return 2
-                  }
-                  const oa = ord(a.status ?? '')
-                  const ob = ord(b.status ?? '')
-                  if (oa !== ob) return oa - ob
-                  // 同状态(主状态=涨停/跌停)内: 按封单从高到低排, 无封单排末尾。
-                  // 封单额 = sealed_vol(手) × 100 × close, 与展示口径一致。
-                  if (oa === 0) {
-                    const sealVal = (s: typeof a) => {
-                      if (s.sealed_vol == null) return -1
-                      return sealMode === 'amount' && s.close
-                        ? s.sealed_vol * 100 * s.close
-                        : s.sealed_vol
-                    }
-                    return sealVal(b) - sealVal(a)
-                  }
-                  return 0
-                }).map(s => (
+              {tier.stocks.map(s => (
                 <StockCard
                   key={`${s.symbol}-${s.status}`}
                   stock={s}
@@ -1131,6 +1148,7 @@ function TierGroup({ tier, defaultOpen, extFields, filterKeys, bf, onStockClick,
                   hasDepth={hasDepth}
                   onClick={onStockClick}
                   onDimensionClick={onDimensionClick}
+                  active={activeSymbol === s.symbol}
                 />
               ))}
             </div>
@@ -1490,6 +1508,7 @@ export function LimitUpLadder() {
   }, [showConcept])
   const [previewSymbol, setPreviewSymbol] = useState<string | null>(null)
   const [previewName, setPreviewName] = useState('')
+  const [previewNavList, setPreviewNavList] = useState<NavItem[]>([])
   const [selectedTag, setSelectedTag] = useState<{ fieldKey: 'concept' | 'industry'; tag: string } | null>(null)
   const [dimensionTarget, setDimensionTarget] = useState<DimensionMembersTarget | null>(null)
   const handleSelectTag = useCallback((sel: { fieldKey: 'concept' | 'industry'; tag: string } | null) => {
@@ -1511,11 +1530,6 @@ export function LimitUpLadder() {
     storage.limitLadderExtFields.set(f)
   }, [])
 
-  const handleStockClick = useCallback((symbol: string, name?: string) => {
-    setPreviewSymbol(symbol)
-    setPreviewName(name ?? '')
-  }, [])
-
   const extColumnsParam = useMemo(() => buildExtColumnsParam(extFields), [extFields])
 
   const { data, isLoading, refetch, isFetching } = useQuery({
@@ -1532,9 +1546,33 @@ export function LimitUpLadder() {
   }, [asOf, data?.as_of])
 
   const rawTiers = data?.tiers ?? []
-  const tiers = filterTiers(rawTiers, filterKeys, extFields.bf)
+  // filterTiers 每次返回新数组, 不 memo 会破坏 React.memo(StockCard) 且全梯队二次排序
+  const tiers = useMemo(() => filterTiers(rawTiers, filterKeys, extFields.bf), [rawTiers, filterKeys, extFields.bf])
   const displayDate = data?.as_of ?? asOf
 
+  // 单源: 梯队按展示同款过滤+排序一次 (监控优先 → 状态 → 封单量),
+  // 卡片渲染(TierGroup)与切股导航(ladderNavItems)共用, 避免每 tick 二次排序。
+  const resolvedExtFields = useMemo(
+    () => resolveExtFields(extFields, showConcept, showIndustry),
+    [extFields, showConcept, showIndustry],
+  )
+  const sortedTiers = useMemo(
+    () => tiers.map(t => ({ ...t, stocks: sortLadderStocks(t.stocks, { monitoredSymbols, sealMode, selectedTag, extFields: resolvedExtFields }) })),
+    [tiers, monitoredSymbols, sealMode, selectedTag, resolvedExtFields],
+  )
+
+  // 切股导航列表: 由 sortedTiers 展平 (顺序 = 卡片展示顺序)
+  const ladderNavItems = useMemo(
+    () => toNavItems(sortedTiers.flatMap(t => t.stocks)),
+    [sortedTiers],
+  )
+
+  const handleStockClick = useCallback((symbol: string, name?: string, navList?: NavItem[]) => {
+    setPreviewSymbol(symbol)
+    setPreviewName(name ?? '')
+    setPreviewNavList(navList ?? ladderNavItems)
+  }, [ladderNavItems])
+
   // sealed 降级判定
   const sealedDegrade = useSealedDegrade(asOf, data?.as_of, data?.sealed_ready, data?.sealed_counts)
 
@@ -1710,7 +1748,7 @@ export function LimitUpLadder() {
         <TagStats
           title="概念分布"
           tiers={tiers}
-          extFields={resolveExtFields(extFields, showConcept, showIndustry)}
+          extFields={resolvedExtFields}
           fieldKey="concept"
           color={{ text: [250, 204, 21], textLight: [161, 98, 7], bg: [234, 179, 8] }}
           selectedTag={selectedTag}
@@ -1724,7 +1762,7 @@ export function LimitUpLadder() {
         <TagStats
           title="行业分布"
           tiers={tiers}
-          extFields={resolveExtFields(extFields, showConcept, showIndustry)}
+          extFields={resolvedExtFields}
           fieldKey="industry"
           color={{ text: [96, 165, 250], textLight: [29, 78, 216], bg: [59, 130, 246] }}
           selectedTag={selectedTag}
@@ -1736,12 +1774,12 @@ export function LimitUpLadder() {
 
       {/* 梯队列表 */}
       <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
-        {tiers.map(t => (
+        {sortedTiers.map(t => (
           <TierGroup
             key={t.boards}
             tier={t}
             defaultOpen={t.boards >= 1 || t.count <= 8}
-            extFields={resolveExtFields(extFields, showConcept, showIndustry)}
+            extFields={resolvedExtFields}
             filterKeys={filterKeys}
             bf={extFields.bf}
             onStockClick={handleStockClick}
@@ -1754,6 +1792,7 @@ export function LimitUpLadder() {
             ladderRules={ladderRules}
             onMonitorChange={refetchMonitorRules}
             hasDepth={sealedDegrade.hasDepth}
+            activeSymbol={previewSymbol}
           />
         ))}
       </div>
@@ -1761,9 +1800,9 @@ export function LimitUpLadder() {
       <DimensionMembersDialog
         target={dimensionTarget}
         onClose={() => setDimensionTarget(null)}
-        onStockClick={(symbol, name) => {
+        onStockClick={(symbol, name, navList) => {
           setDimensionTarget(null)
-          handleStockClick(symbol, name)
+          handleStockClick(symbol, name, navList)
         }}
       />
 
@@ -1771,7 +1810,9 @@ export function LimitUpLadder() {
       <StockPreviewDialog
         symbol={previewSymbol}
         name={previewName}
-        onClose={() => setPreviewSymbol(null)}
+        onClose={() => { setPreviewSymbol(null); setPreviewNavList([]) }}
+        navList={previewNavList}
+        onNavigate={(sym, n) => { setPreviewSymbol(sym); setPreviewName(n ?? '') }}
       />
 
       {/* 字段配置弹窗 */}
diff --git a/frontend/src/pages/Monitor.tsx b/frontend/src/pages/Monitor.tsx
index a7e1a19..d6f8905 100644
--- a/frontend/src/pages/Monitor.tsx
+++ b/frontend/src/pages/Monitor.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useMemo } from 'react'
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { useNavigate, useSearchParams, Link } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { motion, AnimatePresence } from 'framer-motion'
@@ -17,7 +17,7 @@ import { boardTag } from '@/components/stock-table/primitives'
 import { resolveWatchlistGroupColor } from '@/lib/watchlist-group-colors'
 import { markSeen, resetBadge, leaveMonitorPage } from '@/lib/monitorBadge'
 import { RuleEditor } from '@/components/monitor/RuleEditor'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import { DimensionMembersDialog, type DimensionKind, type DimensionMembersTarget } from '@/components/DimensionMembersDialog'
 import { usePreferences, useQuoteStatus } from '@/lib/useSharedQueries'
 
@@ -339,6 +339,7 @@ function AlertsList({ alertsQuery, confirmClear, setConfirmClear, total, enterTs
   const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [previewEv, setPreviewEv] = useState<AlertEvent | null>(null)
   const [memberPreview, setMemberPreview] = useState<{ symbol: string; name?: string } | null>(null)
+  const [previewNavList, setPreviewNavList] = useState<NavItem[]>([])
   const [dimensionTarget, setDimensionTarget] = useState<DimensionMembersTarget | null>(null)
 
   const clearMut = useMutation({
@@ -367,6 +368,22 @@ function AlertsList({ alertsQuery, confirmClear, setConfirmClear, total, enterTs
 
   const events = (alertsQuery.data as any)?.alerts ?? []
 
+  // 切股导航列表: 有 symbol 的触发记录 (按展示顺序)
+  const alertsNavItems = useMemo(
+    () => toNavItems(events.filter((ev: AlertEvent) => ev.symbol)),
+    [events],
+  )
+  const handlePreviewEvent = useCallback((ev: AlertEvent) => {
+    setPreviewEv(ev)
+    setPreviewNavList(alertsNavItems)
+  }, [alertsNavItems])
+  // 弹窗内切股: 来自成分弹窗则更新 memberPreview, 否则按 symbol 找到对应事件 (保住 triggerInfo)
+  const handleNavigate = useCallback((sym: string, name?: string) => {
+    if (memberPreview) { setMemberPreview({ symbol: sym, name }); return }
+    const ev = events.find((e: AlertEvent) => e.symbol === sym)
+    if (ev) setPreviewEv(ev)
+  }, [memberPreview, events])
+
   return (
     <div className="space-y-3">
       {alertsQuery.isLoading ? (
@@ -418,7 +435,7 @@ function AlertsList({ alertsQuery, confirmClear, setConfirmClear, total, enterTs
                             const board = boardTag(ev.symbol)
                             return (
                               <button
-                                onClick={() => setPreviewEv(ev)}
+                                onClick={() => handlePreviewEvent(ev)}
                                 className="inline-flex items-center gap-1.5 rounded hover:bg-elevated/50 px-1 -mx-1 transition-colors cursor-pointer"
                                 title="点击查看日K"
                               >
@@ -497,7 +514,7 @@ function AlertsList({ alertsQuery, confirmClear, setConfirmClear, total, enterTs
                           const board = boardTag(ev.symbol)
                           return (
                             <button
-                              onClick={() => setPreviewEv(ev)}
+                              onClick={() => handlePreviewEvent(ev)}
                               className="inline-flex items-center gap-1.5 rounded hover:bg-elevated/50 px-1 -mx-1 transition-colors cursor-pointer"
                               title="点击查看日K"
                             >
@@ -627,15 +644,18 @@ function AlertsList({ alertsQuery, confirmClear, setConfirmClear, total, enterTs
           signals: previewEv.signals,
           message: previewEv.message,
         } : null}
-        onClose={() => { setPreviewEv(null); setMemberPreview(null) }}
+        navList={previewNavList}
+        onNavigate={handleNavigate}
+        onClose={() => { setPreviewEv(null); setMemberPreview(null); setPreviewNavList([]) }}
       />
 
       <DimensionMembersDialog
         target={dimensionTarget}
         onClose={() => setDimensionTarget(null)}
-        onStockClick={(symbol, name) => {
+        onStockClick={(symbol, name, navList) => {
           setDimensionTarget(null)
           setMemberPreview({ symbol, name })
+          setPreviewNavList(navList ?? alertsNavItems)
         }}
       />
     </div>
@@ -695,6 +715,14 @@ function RulesList({ rulesQuery, onEdit }: {
   })
   const symbolNames = namesQuery.data?.names ?? {}
 
+  // 切股导航列表: 个股规则 (取第一个 symbol, 按展示顺序)
+  const rulesNavItems = useMemo(
+    () => rules
+      .filter(r => r.scope === 'symbols' && r.symbols.length > 0)
+      .map(r => ({ symbol: r.symbols[0], name: symbolNames[r.symbols[0]] ?? undefined })),
+    [rules, symbolNames],
+  )
+
   const del = useMutation({
     mutationFn: api.monitorRuleDelete,
     onSuccess: () => qc.invalidateQueries({ queryKey: QK.monitorRules }),
@@ -930,6 +958,8 @@ function RulesList({ rulesQuery, onEdit }: {
       <StockPreviewDialog
         symbol={previewSymbol}
         name={previewSymbol ? symbolNames[previewSymbol] : undefined}
+        navList={rulesNavItems}
+        onNavigate={(sym) => setPreviewSymbol(sym)}
         onClose={() => setPreviewSymbol(null)}
       />
     </div>
diff --git a/frontend/src/pages/Screener.tsx b/frontend/src/pages/Screener.tsx
index c7f09ee..af6f19e 100644
--- a/frontend/src/pages/Screener.tsx
+++ b/frontend/src/pages/Screener.tsx
@@ -13,7 +13,7 @@ import { storage } from '@/lib/storage'
 import { PageHeader } from '@/components/PageHeader'
 import { EmptyState } from '@/components/EmptyState'
 import { DatePicker } from '@/components/DatePicker'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, type NavItem } from '@/components/StockPreviewDialog'
 import { WatchlistAddMenu } from '@/components/WatchlistAddMenu'
 import { useStrategyPool } from '@/lib/useStrategyPool'
 import { StrategyCard, CardSize, loadCardSize, cardWrapCls } from '@/components/screener/StrategyCard'
@@ -50,7 +50,12 @@ export function Screener() {
   const [batchMsg, setBatchMsg] = useState<string>('')
   const [previewSymbol, setPreviewSymbol] = useState<string | null>(null)
   const [previewName, setPreviewName] = useState<string>('')
-  const closePreview = useCallback(() => { setPreviewSymbol(null); setPreviewName('') }, [])
+  const [previewNavList, setPreviewNavList] = useState<NavItem[]>([])
+  const closePreview = useCallback(() => {
+    setPreviewSymbol(null)
+    setPreviewName('')
+    setPreviewNavList([])
+  }, [])
   const [settingsStrategyId, setSettingsStrategyId] = useState<string | null>(null)
   const [showPoolDialog, setShowPoolDialog] = useState(false)
   const [showBuilder, setShowBuilder] = useState(false)
@@ -982,8 +987,9 @@ export function Screener() {
                     strategyIdToName={strategyIdToName}
                     symbolStrategyMap={symbolStrategyMap}
                     activeStrategy={activeStrategy}
+                    activeSymbol={previewSymbol}
                     watchlistSet={watchlistSet}
-                    onPreview={(symbol, name) => { setPreviewSymbol(symbol); setPreviewName(name) }}
+                    onPreview={(symbol, name, navList) => { setPreviewSymbol(symbol); setPreviewName(name ?? ''); setPreviewNavList(navList ?? []) }}
                     onAddToWatchlist={(symbol, groupId) => toggleWatchlist.mutate({ symbol, action: 'add', groupId })}
                     onRemoveFromWatchlist={symbol => toggleWatchlist.mutate({ symbol, action: 'remove' })}
                     watchlistPending={toggleWatchlist.isPending}
@@ -1035,6 +1041,8 @@ export function Screener() {
         symbol={previewSymbol}
         name={previewName}
         onClose={closePreview}
+        navList={previewNavList}
+        onNavigate={(sym, n) => { setPreviewSymbol(sym); setPreviewName(n ?? '') }}
       />
 
       <StrategySettingsDialog
diff --git a/frontend/src/pages/Watchlist.tsx b/frontend/src/pages/Watchlist.tsx
index 92ab058..b4e93d1 100644
--- a/frontend/src/pages/Watchlist.tsx
+++ b/frontend/src/pages/Watchlist.tsx
@@ -9,10 +9,11 @@ import { fetchMinuteBatchIncremental } from '@/lib/minuteBatchIncremental'
 import { QK } from '@/lib/queryKeys'
 import { storage } from '@/lib/storage'
 import { fmtPrice, fmtPct, fmtBigNum, priceColorClass, formatExtNumber } from '@/lib/format'
+import { cn } from '@/lib/cn'
 import { computeGroupPcts, loadGroupStatsConfig, type GroupStatsConfigPatch } from '@/lib/watchlistGroupStats'
 import { PageHeader } from '@/components/PageHeader'
 import { EmptyState } from '@/components/EmptyState'
-import { StockPreviewDialog } from '@/components/StockPreviewDialog'
+import { StockPreviewDialog, toNavItems, type NavItem } from '@/components/StockPreviewDialog'
 import {
   DimensionMembersDialog,
   dimensionKindForSourceField,
@@ -468,6 +469,7 @@ const StockCard = React.memo(function StockCard({
   onToggleExpand,
   onDimensionClick,
   isMonitored,
+  active,
   groups,
   onToggleMember,
   groupChangePending,
@@ -485,6 +487,8 @@ const StockCard = React.memo(function StockCard({
   onToggleExpand: (key: string) => void
   onDimensionClick: (target: DimensionMembersTarget) => void
   isMonitored?: boolean
+  /** 正在 K 线弹窗预览中 → 高亮卡片 */
+  active?: boolean
   groups: WatchlistGroup[]
   onToggleMember: (symbol: string, groupId: string, member: boolean) => void
   groupChangePending: boolean
@@ -510,7 +514,7 @@ const StockCard = React.memo(function StockCard({
 
   return (
     <div
-      className={`relative rounded-lg border border-border bg-surface hover:border-border/80 transition-all duration-200 group cursor-pointer overflow-hidden ${bgGlow}`}
+      className={`relative rounded-lg border border-border bg-surface hover:border-border/80 transition-all duration-200 group cursor-pointer overflow-hidden ${bgGlow} ${active ? 'ring-2 ring-accent/60' : ''}`}
       onClick={() => onPreview(r.symbol, name ?? '')}
     >
       {/* 左侧彩色指示条 */}
@@ -776,11 +780,14 @@ export function Watchlist() {
   }, [])
   const [previewSymbol, setPreviewSymbol] = useState<string | null>(null)
   const [previewName, setPreviewName] = useState<string>('')
+  // 切股导航: 默认用 previewNavItems(自选列表); 从成分弹窗打开时用成分列表覆盖
+  const [previewNavList, setPreviewNavList] = useState<NavItem[]>([])
   const [dimensionTarget, setDimensionTarget] = useState<DimensionMembersTarget | null>(null)
   const [expandedCells, setExpandedCells] = useState<Set<string>>(new Set())
   const closePreview = useCallback(() => {
     setPreviewSymbol(null)
     setPreviewName('')
+    setPreviewNavList([])
   }, [])
 
   const handleToggleExpand = useCallback((cellKey: string) => {
@@ -1255,6 +1262,13 @@ export function Watchlist() {
     [filteredRows, sortRows, columns],
   )
 
+  // 切股导航列表: 按列表当前展示顺序 (与 sortedRows 一致, 排序/筛选后行序随之变化)。
+  // 弹窗未打开时跳过构建 — sortedRows 随行情 tick 重建, 避免无谓分配。
+  const previewNavItems = useMemo(
+    () => previewSymbol ? toNavItems(sortedRows) : [],
+    [previewSymbol, sortedRows],
+  )
+
   const cardColumns = useCardColumnCount()
   const cardGridRef = useRef<HTMLDivElement>(null)
   const virtualizeCards = viewMode === 'card' && !groupCardsOpen && sortedRows.length > VIRTUAL_LIST_THRESHOLD
@@ -1341,6 +1355,7 @@ export function Watchlist() {
       onToggleExpand={handleToggleExpand}
       onDimensionClick={setDimensionTarget}
       isMonitored={monitoredSymbols.has(r.symbol)}
+      active={previewSymbol === r.symbol}
       groups={groups}
       onToggleMember={handleToggleMember}
       groupChangePending={addGroupMember.isPending || removeGroupMember.isPending}
@@ -1668,7 +1683,7 @@ export function Watchlist() {
               onSortToggle={handleSortToggle}
               extraSortableKeys={INTRADAY_SORTABLE_KEYS}
               rowKey={(r: any) => r.symbol}
-              rowClassName={() => 'border-t border-border hover:bg-elevated/50 transition-colors duration-150 ease-smooth'}
+              rowClassName={(r: any) => cn('border-t border-border transition-colors duration-150 ease-smooth hover:bg-elevated/50', r.symbol === previewSymbol && 'bg-accent/10 hover:bg-accent/15')}
               // 日k列表头：标签 + 显示/隐藏眼睛按钮
               renderHeaderContent={(col) => {
                 if (col.source.type === 'builtin' && col.source.key === 'candle') {
@@ -1990,15 +2005,19 @@ export function Watchlist() {
         symbol={previewSymbol}
         name={previewName}
         onClose={closePreview}
+        navList={previewNavList.length > 0 ? previewNavList : previewNavItems}
+        onNavigate={(sym, n) => { setPreviewSymbol(sym); setPreviewName(n ?? '') }}
       />
 
       <DimensionMembersDialog
         target={dimensionTarget}
         onClose={() => setDimensionTarget(null)}
-        onStockClick={(symbol, name) => {
+        onStockClick={(symbol, name, navList) => {
           setDimensionTarget(null)
           setPreviewSymbol(symbol)
           setPreviewName(name ?? '')
+          // 成分列表作为切股导航 (成员可能不在自选列表, 不能退回 previewNavItems)
+          setPreviewNavList(navList ?? previewNavItems)
         }}
       />
 
diff --git a/frontend/src/pages/settings/System.tsx b/frontend/src/pages/settings/System.tsx
index 54b5e75..7b0f657 100644
--- a/frontend/src/pages/settings/System.tsx
+++ b/frontend/src/pages/settings/System.tsx
@@ -5,7 +5,7 @@
  */
 import { useState, useCallback, useEffect } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Settings2, Trash2, RefreshCw, Bell, Volume2, Info } from 'lucide-react'
+import { Settings2, Trash2, RefreshCw, Bell, Volume2, Info, ExternalLink } from 'lucide-react'
 import { usePreferences, useVersion } from '@/lib/useSharedQueries'
 import { api } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
@@ -15,6 +15,7 @@ import { SOUND_OPTIONS, previewSound } from '@/lib/notificationSound'
 import {
   listZhVoices, previewVoice, activateVoice, getCurrentVoiceURI,
 } from '@/lib/voiceBroadcast'
+import { loadStockExternalTemplate, saveStockExternalTemplate } from '@/lib/stock-external-link'
 
 export function SettingsSystemPanel() {
   const qc = useQueryClient()
@@ -23,6 +24,7 @@ export function SettingsSystemPanel() {
   const [saving, setSaving] = useState(false)
 
   const screenerAutoRun = prefs?.screener_auto_run ?? true
+  const [extTpl, setExtTpl] = useState(() => loadStockExternalTemplate())
   const [clearing, setClearing] = useState(false)
   const [toastEnabled, setToastEnabled] = useState(() => {
     try { return localStorage.getItem('alert_toast_enabled') !== '0' } catch { return true }
@@ -288,6 +290,30 @@ export function SettingsSystemPanel() {
         </div>
       </section>
 
+      <section className="rounded-card border border-border bg-surface p-5 mt-6">
+        <div className="flex items-center gap-2 mb-4">
+          <ExternalLink className="h-4 w-4 text-accent" />
+          <h3 className="text-sm font-medium text-foreground">个股详情外链</h3>
+        </div>
+
+        <div className="flex items-center justify-between gap-4 py-2">
+          <div className="min-w-0">
+            <div className="text-sm text-foreground">详情页 URL 模板</div>
+            <div className="text-[11px] text-muted truncate">{"支持 {code} {market} {symbol} · 留空关闭外链"}</div>
+          </div>
+          <input
+            value={extTpl}
+            onChange={(e) => {
+              setExtTpl(e.target.value)
+              saveStockExternalTemplate(e.target.value)
+            }}
+            placeholder="https://..."
+            spellCheck={false}
+            className="w-[26rem] max-w-[60%] h-8 px-2.5 rounded-btn border border-border bg-base text-xs font-mono text-foreground focus:border-accent/50 focus:outline-none"
+          />
+        </div>
+      </section>
+
       <section className="rounded-card border border-border bg-surface p-5 mt-6">
         <div className="flex items-center gap-2 mb-4">
           <Trash2 className="h-4 w-4 text-accent" />