vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 搜索框布局调整

Browse Source
This commit is contained in:
zdl
2025-11-06 12:40:58 +08:00
parent 42f1b2f24e
commit c6b3b56cb8
1 changed files with 71 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/views/Community/components/UnifiedSearchBox.js
View File

@@ -2,14 +2,12 @@
// 搜索组件：三行布局（主搜索 + 热门概念 + 筛选区）
import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
import {
Card, Input, Cascader, Button, Space, Tag, AutoComplete, DatePicker, Select as AntSelect
Card, Input, Cascader, Button, Space, Tag, AutoComplete, Select as AntSelect
} from 'antd';
import {
SearchOutlined, CloseCircleOutlined, StockOutlined
} from '@ant-design/icons';
import moment from 'moment';
import dayjs from 'dayjs';
import locale from 'antd/es/date-picker/locale/zh_CN';
import debounce from 'lodash/debounce';
import { useSelector, useDispatch } from 'react-redux';
import { fetchIndustryData, selectIndustryData, selectIndustryLoading } from '../../../store/slices/industrySlice';
@@ -18,7 +16,6 @@ import { logger } from '../../../utils/logger';
import PopularKeywords from './PopularKeywords';
import TradingTimeFilter from './TradingTimeFilter';
const { RangePicker } = DatePicker;
const { Option } = AntSelect;
const UnifiedSearchBox = ({
@@ -36,7 +33,6 @@ const UnifiedSearchBox = ({
// 筛选条件状态
const [sort, setSort] = useState('new'); // 排序方式
const [importance, setImportance] = useState([]); // 重要性（数组，支持多选）
const [dateRange, setDateRange] = useState(null); // 日期范围
const [tradingTimeRange, setTradingTimeRange] = useState(null); // 交易时段筛选
// ✅ 本地输入状态 - 管理用户的实时输入
@@ -148,17 +144,6 @@ const UnifiedSearchBox = ({
setImportance([]);
}
// ✅ 初始化日期范围
if (filters.date_range) {
const parts = filters.date_range.split(' 至 ');
if (parts.length === 2) {
setDateRange([dayjs(parts[0]), dayjs(parts[1])]);
logger.debug('UnifiedSearchBox', '初始化日期范围', {
date_range: filters.date_range
});
}
}
// ✅ 初始化行业分类（需要 industryData 加载完成）
if (filters.industry_code && industryData && industryData.length > 0) {
const path = findIndustryPath(filters.industry_code, industryData);
@@ -178,7 +163,7 @@ const UnifiedSearchBox = ({
// 如果 filters 中没有搜索关键词,清空输入框
setInputValue('');
}
}, [filters.sort, filters.importance, filters.date_range, filters.industry_code, filters.q, industryData, findIndustryPath]);
}, [filters.sort, filters.importance, filters.industry_code, filters.q, industryData, findIndustryPath]);
// AutoComplete 搜索股票（模糊匹配 code 或 name）
const handleSearch = (value) => {
@@ -233,35 +218,6 @@ const UnifiedSearchBox = ({
}
};
// ✅ 日期范围变化（使用防抖）
const handleDateRangeChange = (dates) => {
logger.debug('UnifiedSearchBox', '【1/5】日期范围值改变', {
oldValue: dateRange,
newValue: dates
});
setDateRange(dates);
// ⚠️ 注意:setState是异步的,此时dateRange仍是旧值
logger.debug('UnifiedSearchBox', '【2/5】调用buildFilterParams前的状态', {
dateRange: dateRange, // 旧值
sort: sort,
importance: importance,
industryValue: industryValue
});
// 使用防抖搜索（需要从新值推导参数）
const params = {
...buildFilterParams(),
date_range: dates ? `${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}` : ''
};
logger.debug('UnifiedSearchBox', '【3/5】buildFilterParams返回的参数', params);
if (debouncedSearchRef.current) {
logger.debug('UnifiedSearchBox', '【4/5】调用防抖函数(300ms延迟)');
debouncedSearchRef.current(params);
}
};
// ✅ 重要性变化（立即执行）- 支持多选
const handleImportanceChange = (value) => {
logger.debug('UnifiedSearchBox', '重要性值改变', {
@@ -376,7 +332,7 @@ const UnifiedSearchBox = ({
return;
}
const { range, type, label } = timeConfig;
const { range, type, label, key } = timeConfig;
let params = {};
if (type === 'recent_days') {
@@ -391,7 +347,7 @@ const UnifiedSearchBox = ({
params.recent_days = '';
}
setTradingTimeRange({ ...params, label });
setTradingTimeRange({ ...params, label, key });
// 立即触发搜索
const searchParams = buildFilterParams(params);
@@ -435,7 +391,6 @@ const UnifiedSearchBox = ({
currentState: {
sort,
importance,
dateRange,
industryValue,
'filters.q': filters.q
}
@@ -466,7 +421,6 @@ const UnifiedSearchBox = ({
// 基础参数（overrides 优先级高于本地状态）
sort: actualSort,
importance: importanceValue,
date_range: dateRange ? `${dateRange[0].format('YYYY-MM-DD')} 至 ${dateRange[1].format('YYYY-MM-DD')}` : '',
page: 1,
// 搜索参数: 统一使用 q 参数进行搜索(话题/股票/关键词)
@@ -490,19 +444,7 @@ const UnifiedSearchBox = ({
logger.debug('UnifiedSearchBox', '🔧 buildFilterParams - 输出结果', result);
return result;
}, [sort, importance, dateRange, filters.q, industryValue, tradingTimeRange]);
// ✅ 应用筛选（立即搜索，取消防抖）
const handleApplyFilters = () => {
// 取消之前的防抖搜索
if (debouncedSearchRef.current) {
debouncedSearchRef.current.cancel();
}
const params = buildFilterParams();
logger.debug('UnifiedSearchBox', '应用筛选,立即触发搜索', params);
triggerSearch(params);
};
}, [sort, importance, filters.q, industryValue, tradingTimeRange]);
// ✅ 重置筛选 - 清空所有筛选器并触发搜索
const handleReset = () => {
@@ -512,7 +454,6 @@ const UnifiedSearchBox = ({
setIndustryValue([]);
setSort('new');
setImportance([]); // 改为空数组
setDateRange(null);
setTradingTimeRange(null); // 清空交易时段筛选
// 输出重置后的完整参数
@@ -521,7 +462,6 @@ const UnifiedSearchBox = ({
industry_code: '',
sort: 'new',
importance: 'all', // 传给后端时转为'all'
date_range: '',
start_date: '',
end_date: '',
recent_days: '',
@@ -567,12 +507,6 @@ const UnifiedSearchBox = ({
});
}
// 日期范围标签
if (dateRange && dateRange.length === 2) {
const dateLabel = `${dateRange[0].format('YYYY-MM-DD')} 至 ${dateRange[1].format('YYYY-MM-DD')}`;
tags.push({ key: 'date_range', label: `日期: ${dateLabel}` });
}
// 交易时段筛选标签
if (tradingTimeRange?.label) {
tags.push({
@@ -599,7 +533,7 @@ const UnifiedSearchBox = ({
}
return tags;
}, [filters.q, industryValue, dateRange, importance, sort, tradingTimeRange]);
}, [filters.q, industryValue, importance, sort, tradingTimeRange]);
// ✅ 移除单个标签 - 构建新参数并触发搜索
const handleRemoveTag = (key) => {
@@ -621,11 +555,6 @@ const UnifiedSearchBox = ({
setIndustryValue([]);
const params = buildFilterParams({ industry_code: '' });
triggerSearch(params);
} else if (key === 'date_range') {
// 清除日期范围
setDateRange(null);
const params = buildFilterParams({ date_range: '' });
triggerSearch(params);
} else if (key === 'trading_time') {
// 清除交易时段筛选
setTradingTimeRange(null);
@@ -650,61 +579,11 @@ const UnifiedSearchBox = ({
return (
<Card>
{/* 第一行：主搜索框 */}
<Space.Compact style={{ width: '100%', marginBottom: 12 }} size="large">
<SearchOutlined style={{
fontSize: 20,
padding: '8px 12px',
background: '#f5f5f5',
borderRadius: '6px 0 0 6px',
display: 'flex',
alignItems: 'center',
color: '#666'
}} />
<AutoComplete
value={inputValue}
onChange={handleInputChange}
onSearch={handleSearch}
onSelect={handleStockSelect}
onFocus={onSearchFocus}
options={stockOptions}
placeholder="请输入股票代码/股票名称/相关话题"
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleMainSearch();
}
}}
style={{ flex: 1 }}
size="large"
notFoundContent={inputValue && stockOptions.length === 0 ? "未找到匹配的股票" : null}
/>
<Button
type="primary"
onClick={handleMainSearch}
size="large"
style={{ minWidth: 80 }}
>
搜索
</Button>
</Space.Compact>
{/* 第二行：热门概念 */}
<div style={{ marginBottom: 12 }}>
<PopularKeywords
keywords={popularKeywords}
onKeywordClick={handleKeywordClick}
/>
</div>
{/* 第三行：筛选器 + 排序 */}
{/* 第三行：行业 + 重要性 + 排序 */}
<Space style={{ width: '100%', justifyContent: 'space-between' }} size="middle">
{/* 左侧：筛选器组 */}
<Space size="middle" wrap>
<span style={{ fontSize: 14, color: '#666', fontWeight: 'bold' }}>筛选:</span>
{/* 交易时段筛选 */}
<TradingTimeFilter onChange={handleTradingTimeChange} />
{/* 行业分类 */}
<Cascader
value={industryValue}
@@ -727,16 +606,6 @@ const UnifiedSearchBox = ({
size="middle"
/>
{/* 日期范围 */}
<RangePicker
value={dateRange}
onChange={handleDateRangeChange}
locale={locale}
placeholder={['开始日期', '结束日期']}
style={{ width: 240 }}
size="middle"
/>
{/* 重要性 */}
<Space size="small">
<span style={{ fontSize: 14, color: '#666' }}>重要性:</span>
@@ -756,6 +625,49 @@ const UnifiedSearchBox = ({
</AntSelect>
</Space>
{/* 搜索图标（可点击） + 搜索框 */}
<Space.Compact style={{ flex: 1, minWidth: 300 }}>
<SearchOutlined
onClick={handleMainSearch}
style={{
fontSize: 18,
padding: '8px 12px',
background: '#f5f5f5',
borderRadius: '6px 0 0 6px',
display: 'flex',
alignItems: 'center',
color: '#666',
cursor: 'pointer',
transition: 'all 0.3s'
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = '#1890ff';
e.currentTarget.style.background = '#e6f7ff';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '#666';
e.currentTarget.style.background = '#f5f5f5';
}}
/>
<AutoComplete
value={inputValue}
onChange={handleInputChange}
onSearch={handleSearch}
onSelect={handleStockSelect}
onFocus={onSearchFocus}
options={stockOptions}
placeholder="请输入股票代码/股票名称/相关话题"
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleMainSearch();
}
}}
style={{ flex: 1 }}
size="middle"
notFoundContent={inputValue && stockOptions.length === 0 ? "未找到匹配的股票" : null}
/>
</Space.Compact>
{/* 重置按钮 - 现代化设计 */}
<Button
icon={<CloseCircleOutlined />}
@@ -811,6 +723,25 @@ const UnifiedSearchBox = ({
</Space>
</Space>
{/* 第一行：筛选 + 时间按钮 + 搜索图标 + 搜索框 */}
<Space wrap style={{ width: '100%', marginBottom: 12, marginTop: 8 }} size="middle">
<span style={{ fontSize: 14, color: '#666', fontWeight: 'bold' }}>时间筛选:</span>
{/* 交易时段筛选 */}
<TradingTimeFilter
value={tradingTimeRange?.key || null}
onChange={handleTradingTimeChange}
/>
</Space>
{/* 第二行：热门概念 */}
<div style={{ marginTop: 8 }}>
<PopularKeywords
keywords={popularKeywords}
onKeywordClick={handleKeywordClick}
/>
</div>
{/* 已选条件标签 */}
{filterTags.length > 0 && (
<Space size={[8, 8]} wrap style={{ marginTop: 12 }}>