feat: 时间筛选重置调整
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
// src/views/Community/components/TradingTimeFilter.js
|
||||
// 交易时段智能筛选组件
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { Space, Button, Tag, Tooltip, DatePicker, Popover } from 'antd';
|
||||
import { ClockCircleOutlined, CalendarOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -11,13 +11,27 @@ const { RangePicker } = DatePicker;
|
||||
|
||||
/**
|
||||
* 交易时段筛选组件
|
||||
* @param {string} value - 当前选中的 key(受控)
|
||||
* @param {Function} onChange - 时间范围变化回调 (timeConfig) => void
|
||||
*/
|
||||
const TradingTimeFilter = ({ onChange }) => {
|
||||
const TradingTimeFilter = ({ value, onChange }) => {
|
||||
const [selectedKey, setSelectedKey] = useState(null);
|
||||
const [customRangeVisible, setCustomRangeVisible] = useState(false);
|
||||
const [customRange, setCustomRange] = useState(null);
|
||||
|
||||
// 监听外部 value 变化,同步内部状态
|
||||
useEffect(() => {
|
||||
if (value === null || value === undefined) {
|
||||
// 外部重置,清空内部状态
|
||||
setSelectedKey(null);
|
||||
setCustomRange(null);
|
||||
logger.debug('TradingTimeFilter', '外部重置,清空选中状态');
|
||||
} else if (value !== selectedKey) {
|
||||
// 外部选中值变化,同步内部状态
|
||||
setSelectedKey(value);
|
||||
}
|
||||
}, [value, selectedKey]);
|
||||
|
||||
// 获取当前交易时段
|
||||
const getCurrentTradingSession = () => {
|
||||
const now = dayjs();
|
||||
@@ -322,7 +336,7 @@ const TradingTimeFilter = ({ onChange }) => {
|
||||
>
|
||||
<Tag color="gold" style={{ margin: 0, fontSize: 13, padding: '2px 8px', cursor: 'pointer' }}>
|
||||
<CalendarOutlined style={{ marginRight: 4 }} />
|
||||
自定义
|
||||
{customRange ? `${customRange[0].format('MM-DD HH:mm')} - ${customRange[1].format('MM-DD HH:mm')}` : '自定义'}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user