feat: 添加交易时间段筛选组件
This commit is contained in:
zdl
340
src/views/Community/components/TradingTimeFilter.js
Normal file
340
src/views/Community/components/TradingTimeFilter.js
Normal file
@@ -0,0 +1,340 @@
|
||||
// src/views/Community/components/TradingTimeFilter.js
|
||||
// 交易时段智能筛选组件
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Space, Button, Tag, Tooltip, DatePicker, Popover } from 'antd';
|
||||
import { ClockCircleOutlined, CalendarOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
/**
|
||||
* 交易时段筛选组件
|
||||
* @param {Function} onChange - 时间范围变化回调 (timeConfig) => void
|
||||
*/
|
||||
const TradingTimeFilter = ({ onChange }) => {
|
||||
const [selectedKey, setSelectedKey] = useState(null);
|
||||
const [customRangeVisible, setCustomRangeVisible] = useState(false);
|
||||
const [customRange, setCustomRange] = useState(null);
|
||||
|
||||
// 获取当前交易时段
|
||||
const getCurrentTradingSession = () => {
|
||||
const now = dayjs();
|
||||
const hour = now.hour();
|
||||
const minute = now.minute();
|
||||
const currentMinutes = hour * 60 + minute;
|
||||
|
||||
// 转换为分钟数便于比较
|
||||
const PRE_MARKET_END = 9 * 60 + 30; // 09:30
|
||||
const MORNING_END = 11 * 60 + 30; // 11:30
|
||||
const AFTERNOON_START = 13 * 60; // 13:00
|
||||
const MARKET_CLOSE = 15 * 60; // 15:00
|
||||
|
||||
if (currentMinutes < PRE_MARKET_END) {
|
||||
return 'pre-market'; // 盘前
|
||||
} else if (currentMinutes < MORNING_END) {
|
||||
return 'morning'; // 早盘
|
||||
} else if (currentMinutes < AFTERNOON_START) {
|
||||
return 'lunch'; // 午休
|
||||
} else if (currentMinutes < MARKET_CLOSE) {
|
||||
return 'afternoon'; // 午盘
|
||||
} else {
|
||||
return 'after-hours'; // 盘后
|
||||
}
|
||||
};
|
||||
|
||||
// 获取时间范围配置
|
||||
const timeRangeConfig = useMemo(() => {
|
||||
const session = getCurrentTradingSession();
|
||||
const now = dayjs();
|
||||
|
||||
// 今日关键时间点
|
||||
const today0930 = now.hour(9).minute(30).second(0);
|
||||
const today1130 = now.hour(11).minute(30).second(0);
|
||||
const today1300 = now.hour(13).minute(0).second(0);
|
||||
const today1500 = now.hour(15).minute(0).second(0);
|
||||
const todayStart = now.startOf('day');
|
||||
const todayEnd = now.endOf('day');
|
||||
|
||||
// 昨日关键时间点
|
||||
const yesterday1500 = now.subtract(1, 'day').hour(15).minute(0).second(0);
|
||||
const yesterdayStart = now.subtract(1, 'day').startOf('day');
|
||||
const yesterdayEnd = now.subtract(1, 'day').endOf('day');
|
||||
|
||||
// 动态按钮配置（根据时段返回不同按钮数组）
|
||||
const dynamicButtonsMap = {
|
||||
'pre-market': [
|
||||
{
|
||||
key: 'latest',
|
||||
label: '最新',
|
||||
range: [yesterday1500, today0930],
|
||||
tooltip: '盘前资讯',
|
||||
timeHint: `昨日 15:00 - 今日 09:30`,
|
||||
color: 'purple',
|
||||
type: 'precise'
|
||||
}
|
||||
],
|
||||
'morning': [
|
||||
{
|
||||
key: 'latest',
|
||||
label: '最新',
|
||||
range: [today0930, now],
|
||||
tooltip: '早盘最新',
|
||||
timeHint: `今日 09:30 - ${now.format('HH:mm')}`,
|
||||
color: 'green',
|
||||
type: 'precise'
|
||||
},
|
||||
{
|
||||
key: 'intraday',
|
||||
label: '盘中',
|
||||
range: [today0930, today1500],
|
||||
tooltip: '盘中交易时段',
|
||||
timeHint: '今日 09:30 - 15:00',
|
||||
color: 'blue',
|
||||
type: 'precise'
|
||||
}
|
||||
],
|
||||
'lunch': [
|
||||
{
|
||||
key: 'latest',
|
||||
label: '最新',
|
||||
range: [today1130, now],
|
||||
tooltip: '午休时段',
|
||||
timeHint: `今日 11:30 - ${now.format('HH:mm')}`,
|
||||
color: 'orange',
|
||||
type: 'precise'
|
||||
}
|
||||
],
|
||||
'afternoon': [
|
||||
{
|
||||
key: 'latest',
|
||||
label: '最新',
|
||||
range: [today1300, now],
|
||||
tooltip: '午盘最新',
|
||||
timeHint: `今日 13:00 - ${now.format('HH:mm')}`,
|
||||
color: 'green',
|
||||
type: 'precise'
|
||||
},
|
||||
{
|
||||
key: 'intraday',
|
||||
label: '盘中',
|
||||
range: [today0930, today1500],
|
||||
tooltip: '盘中交易时段',
|
||||
timeHint: '今日 09:30 - 15:00',
|
||||
color: 'blue',
|
||||
type: 'precise'
|
||||
},
|
||||
{
|
||||
key: 'afternoon',
|
||||
label: '午盘',
|
||||
range: [today1300, today1500],
|
||||
tooltip: '午盘交易时段',
|
||||
timeHint: '今日 13:00 - 15:00',
|
||||
color: 'cyan',
|
||||
type: 'precise'
|
||||
}
|
||||
],
|
||||
'after-hours': [
|
||||
{
|
||||
key: 'latest',
|
||||
label: '最新',
|
||||
range: [today1500, now],
|
||||
tooltip: '盘后最新',
|
||||
timeHint: `今日 15:00 - ${now.format('HH:mm')}`,
|
||||
color: 'red',
|
||||
type: 'precise'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 固定按钮配置（始终显示）
|
||||
const fixedButtons = [
|
||||
{
|
||||
key: 'morning-fixed',
|
||||
label: '早盘',
|
||||
range: [today0930, today1130],
|
||||
tooltip: '早盘交易时段',
|
||||
timeHint: '09:30 - 11:30',
|
||||
color: 'geekblue',
|
||||
type: 'precise'
|
||||
},
|
||||
{
|
||||
key: 'today',
|
||||
label: '今日全天',
|
||||
range: [todayStart, todayEnd],
|
||||
tooltip: '今日全天',
|
||||
timeHint: '今日 00:00 - 23:59',
|
||||
color: 'purple',
|
||||
type: 'precise'
|
||||
},
|
||||
{
|
||||
key: 'yesterday',
|
||||
label: '昨日',
|
||||
range: [yesterdayStart, yesterdayEnd],
|
||||
tooltip: '昨日全天',
|
||||
timeHint: '昨日 00:00 - 23:59',
|
||||
color: 'orange',
|
||||
type: 'precise'
|
||||
},
|
||||
{
|
||||
key: 'week',
|
||||
label: '近一周',
|
||||
range: 7, // 天数
|
||||
tooltip: '过去7个交易日',
|
||||
timeHint: '过去7天',
|
||||
color: 'magenta',
|
||||
type: 'recent_days'
|
||||
},
|
||||
{
|
||||
key: 'month',
|
||||
label: '近一月',
|
||||
range: 30, // 天数
|
||||
tooltip: '过去30个交易日',
|
||||
timeHint: '过去30天',
|
||||
color: 'volcano',
|
||||
type: 'recent_days'
|
||||
}
|
||||
];
|
||||
|
||||
return {
|
||||
dynamic: dynamicButtonsMap[session] || [],
|
||||
fixed: fixedButtons
|
||||
};
|
||||
}, []); // 空依赖，首次渲染时计算
|
||||
|
||||
// 按钮点击处理
|
||||
const handleButtonClick = (config) => {
|
||||
logger.debug('TradingTimeFilter', '按钮点击', { config });
|
||||
|
||||
if (selectedKey === config.key) {
|
||||
// 取消选中
|
||||
setSelectedKey(null);
|
||||
onChange(null);
|
||||
} else {
|
||||
// 选中
|
||||
setSelectedKey(config.key);
|
||||
onChange({
|
||||
range: config.range,
|
||||
type: config.type,
|
||||
label: config.label,
|
||||
key: config.key
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 自定义范围确认
|
||||
const handleCustomRangeOk = (dates) => {
|
||||
if (dates && dates.length === 2) {
|
||||
setCustomRange(dates);
|
||||
setSelectedKey('custom');
|
||||
setCustomRangeVisible(false);
|
||||
|
||||
onChange({
|
||||
range: dates,
|
||||
type: 'precise',
|
||||
label: `${dates[0].format('MM-DD HH:mm')} - ${dates[1].format('MM-DD HH:mm')}`,
|
||||
key: 'custom'
|
||||
});
|
||||
|
||||
logger.debug('TradingTimeFilter', '自定义范围', {
|
||||
start: dates[0].format('YYYY-MM-DD HH:mm:ss'),
|
||||
end: dates[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染按钮
|
||||
const renderButton = (config) => {
|
||||
const isSelected = selectedKey === config.key;
|
||||
|
||||
// 构建完整的 tooltip 提示（文字 + 时间）
|
||||
const fullTooltip = config.timeHint ? `${config.tooltip} · ${config.timeHint}` : config.tooltip;
|
||||
|
||||
if (isSelected) {
|
||||
// 选中状态：只显示 Tag，不显示下方时间
|
||||
return (
|
||||
<Tooltip title={fullTooltip} key={config.key}>
|
||||
<Tag
|
||||
color={config.color}
|
||||
style={{ margin: 0, fontSize: 13, padding: '2px 8px', cursor: 'pointer' }}
|
||||
onClick={() => handleButtonClick(config)}
|
||||
>
|
||||
<ClockCircleOutlined style={{ marginRight: 4 }} />
|
||||
{config.label}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
// 未选中状态：普通按钮
|
||||
return (
|
||||
<Tooltip title={fullTooltip} key={config.key}>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => handleButtonClick(config)}
|
||||
style={{ fontSize: 12 }}
|
||||
>
|
||||
{config.label}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// "更多时间" 按钮内容
|
||||
const customRangeContent = (
|
||||
<div style={{ padding: 8 }}>
|
||||
<RangePicker
|
||||
showTime={{ format: 'HH:mm' }}
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
locale={locale}
|
||||
placeholder={['开始时间', '结束时间']}
|
||||
onChange={handleCustomRangeOk}
|
||||
value={customRange}
|
||||
style={{ marginBottom: 8 }}
|
||||
/>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||
支持精确到分钟的时间范围选择
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Space wrap size={[8, 8]} style={{ display: 'flex', alignItems: 'flex-start' }}>
|
||||
{/* 动态按钮（根据时段显示多个） */}
|
||||
{timeRangeConfig.dynamic.map(config => renderButton(config))}
|
||||
|
||||
{/* 固定按钮（始终显示） */}
|
||||
{timeRangeConfig.fixed.map(config => renderButton(config))}
|
||||
|
||||
{/* 更多时间 - 自定义范围 */}
|
||||
<Popover
|
||||
content={customRangeContent}
|
||||
title="选择自定义时间范围"
|
||||
trigger="click"
|
||||
open={customRangeVisible}
|
||||
onOpenChange={setCustomRangeVisible}
|
||||
placement="bottomLeft"
|
||||
>
|
||||
{selectedKey === 'custom' ? (
|
||||
<Tooltip
|
||||
title={customRange ? `自定义时间范围 · ${customRange[0].format('MM-DD HH:mm')} - ${customRange[1].format('MM-DD HH:mm')}` : '自定义时间范围'}
|
||||
>
|
||||
<Tag color="gold" style={{ margin: 0, fontSize: 13, padding: '2px 8px', cursor: 'pointer' }}>
|
||||
<CalendarOutlined style={{ marginRight: 4 }} />
|
||||
自定义
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title="自定义时间范围">
|
||||
<Button size="small" icon={<CalendarOutlined />} style={{ fontSize: 12 }}>
|
||||
更多时间
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Popover>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default TradingTimeFilter;
|
||||
Reference in New Issue
Block a user