diff --git a/src/views/Community/components/TradingTimeFilter.js b/src/views/Community/components/TradingTimeFilter.js index 88829eb2..b23780a8 100644 --- a/src/views/Community/components/TradingTimeFilter.js +++ b/src/views/Community/components/TradingTimeFilter.js @@ -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 }) => { > - 自定义 + {customRange ? `${customRange[0].format('MM-DD HH:mm')} - ${customRange[1].format('MM-DD HH:mm')}` : '自定义'} ) : (