feat(KLineModule): 添加日K时间范围选择器

This commit is contained in:
zdl
2025-12-16 15:20:06 +08:00
parent d27cf5b7d8
commit 3f3e13bddd
3 changed files with 45 additions and 2 deletions

View File

@@ -13,12 +13,13 @@ import {
Center,
Spinner,
Icon,
Select,
} from '@chakra-ui/react';
import { RepeatIcon, InfoIcon } from '@chakra-ui/icons';
import { BarChart2, Clock, TrendingUp } from 'lucide-react';
import { BarChart2, Clock, TrendingUp, Calendar } from 'lucide-react';
import ReactECharts from 'echarts-for-react';
import { darkGoldTheme } from '../../../constants';
import { darkGoldTheme, PERIOD_OPTIONS } from '../../../constants';
import { getKLineOption, getMinuteKLineOption } from '../../../utils/chartOptions';
import type { KLineModuleProps } from '../../../types';
@@ -48,6 +49,8 @@ const KLineModule: React.FC<KLineModuleProps> = ({
analysisMap,
onLoadMinuteData,
onChartClick,
selectedPeriod,
onPeriodChange,
}) => {
const [mode, setMode] = useState<ChartMode>('daily');
const hasMinuteData = minuteData && minuteData.data && minuteData.data.length > 0;
@@ -128,6 +131,36 @@ const KLineModule: React.FC<KLineModuleProps> = ({
</HStack>
<HStack spacing={3}>
{/* 日K模式下显示时间范围选择器 */}
{mode === 'daily' && onPeriodChange && (
<HStack spacing={2}>
<Icon as={Calendar} boxSize={4} color={darkGoldTheme.textMuted} />
<Select
size="sm"
value={selectedPeriod}
onChange={(e) => onPeriodChange(Number(e.target.value))}
bg="transparent"
borderColor={darkGoldTheme.border}
color={darkGoldTheme.textPrimary}
maxW="100px"
_hover={{ borderColor: darkGoldTheme.gold }}
_focus={{ borderColor: darkGoldTheme.gold, boxShadow: 'none' }}
sx={{
option: {
background: '#1a1a2e',
color: darkGoldTheme.textPrimary,
},
}}
>
{PERIOD_OPTIONS.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</Select>
</HStack>
)}
{/* 分钟模式下的刷新按钮 */}
{mode === 'minute' && (
<Button

View File

@@ -14,6 +14,8 @@ export interface TradeDataPanelProps {
analysisMap: Record<number, RiseAnalysis>;
onLoadMinuteData: () => void;
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
selectedPeriod?: number;
onPeriodChange?: (period: number) => void;
}
const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
@@ -24,6 +26,8 @@ const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
analysisMap,
onLoadMinuteData,
onChartClick,
selectedPeriod,
onPeriodChange,
}) => {
return (
<KLineModule
@@ -34,6 +38,8 @@ const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
analysisMap={analysisMap}
onLoadMinuteData={onLoadMinuteData}
onChartClick={onChartClick}
selectedPeriod={selectedPeriod}
onPeriodChange={onPeriodChange}
/>
);
};

View File

@@ -297,6 +297,8 @@ export interface KLineModuleProps {
analysisMap: Record<number, RiseAnalysis>;
onLoadMinuteData: () => void;
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
selectedPeriod?: number;
onPeriodChange?: (period: number) => void;
}
/**
@@ -354,6 +356,7 @@ export interface AnalysisModalContentProps {
*/
export interface UseMarketDataReturn {
loading: boolean;
tradeLoading: boolean;
summary: MarketSummary | null;
tradeData: TradeDayData[];
fundingData: FundingDayData[];
@@ -365,4 +368,5 @@ export interface UseMarketDataReturn {
analysisMap: Record<number, RiseAnalysis>;
refetch: () => Promise<void>;
loadMinuteData: () => Promise<void>;
refreshTradeData: () => Promise<void>;
}