diff --git a/frontend/src/components/StockMultiDayIntradayChart.tsx b/frontend/src/components/StockMultiDayIntradayChart.tsx index 1c16380..6f71c85 100644 --- a/frontend/src/components/StockMultiDayIntradayChart.tsx +++ b/frontend/src/components/StockMultiDayIntradayChart.tsx @@ -31,8 +31,6 @@ export function StockMultiDayIntradayChart({ const history = useQuery({ ...klineMinuteRangeQueryOptions(symbol, days), enabled: !!symbol, - placeholderData: (previous, previousQuery) => - previousQuery?.queryKey[1] === symbol ? previous : undefined, }) const latest = useQuery({ // live: 当日盘中直接实时拉取, 不被分钟增量落盘的本地分区(≥60s一轮)拖慢 diff --git a/frontend/src/components/StockPanel.tsx b/frontend/src/components/StockPanel.tsx index 270df47..4e2e586 100644 --- a/frontend/src/components/StockPanel.tsx +++ b/frontend/src/components/StockPanel.tsx @@ -2,7 +2,7 @@ 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 } from '@/lib/kline' +import { klineDailyQueryOptions, klineMinuteQueryOptions, klineMinuteRangeQueryOptions, DEFAULT_INTRADAY_DAYS } from '@/lib/kline' import { StockInfoBar } from '@/components/StockInfoBar' import { StockDailyKChart, getDefaultRange, toOHLC } from '@/components/StockDailyKChart' import { StockIntradayChart } from '@/components/StockIntradayChart' @@ -46,6 +46,8 @@ interface Props { prefetchSymbols?: string[] /** 多日分时周期 (分时 tab 使用): 预取邻股 klineMinuteRange 时用同一 days, 保证 queryKey 命中 */ intradayDays?: number + /** 日K/分时并排时日K图占宽 (默认 1:1; 弹窗内图表信息栏较宽需更多空间时传 flex-[1.4] 之类) */ + dailyKlineFlex?: string } export { getDefaultRange } @@ -71,7 +73,8 @@ export function StockPanel({ refetchIntervalMs, infoBarOnly = false, prefetchSymbols, - intradayDays = 10, + intradayDays = DEFAULT_INTRADAY_DAYS, + dailyKlineFlex = 'flex-1', }: Props) { const [linkedPrice, setLinkedPrice] = useState(null) const [selectedDate, setSelectedDate] = useState(null) @@ -196,11 +199,10 @@ export function StockPanel({ {infoBarOnly ? null : (
- {/* 日K为主视图占更宽 (与分时约 1.4:1): 图表自带信息栏(悬停含「至今/周期」)需要更宽才能单行容纳 */} (symbol) + const prevSymbolRef = useRef(null) useEffect(() => { if (prevSymbolRef.current == null && symbol != null) setView('daily') prevSymbolRef.current = symbol @@ -612,6 +615,7 @@ export function StockPreviewDialog({ symbol, name, onClose, triggerInfo, navList refetchIntervalMs={intradayRefetchMs} prefetchSymbols={prefetchSymbols} intradayDays={intradayDays} + dailyKlineFlex="flex-[1.4]" /> ) : ( <> diff --git a/frontend/src/lib/kline.ts b/frontend/src/lib/kline.ts index 8abdbc7..fdd4f40 100644 --- a/frontend/src/lib/kline.ts +++ b/frontend/src/lib/kline.ts @@ -10,6 +10,9 @@ 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 }, @@ -39,10 +42,16 @@ export function klineMinuteQueryOptions(symbol: string, date?: string, live?: bo } } -/** 多日分时查询配置 — 分时 tab 的 StockMultiDayIntradayChart 与 邻近预取 共用。 */ +/** 多日分时查询配置 — 分时 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 + }, } }