feat: 添加行业筛选器Box
This commit is contained in:
zdl
405
src/views/Community/components/UnifiedSearchBox.js
Normal file
405
src/views/Community/components/UnifiedSearchBox.js
Normal file
@@ -0,0 +1,405 @@
|
|||||||
|
// src/views/Community/components/UnifiedSearchBox.js
|
||||||
|
// 搜索组件：三行布局（主搜索 + 热门概念 + 筛选区）
|
||||||
|
import React, { useState, useMemo, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Card, Input, Cascader, Button, Space, Tag, AutoComplete, DatePicker, Select as AntSelect
|
||||||
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
SearchOutlined, CloseCircleOutlined, StockOutlined
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import moment from 'moment';
|
||||||
|
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||||
|
import { useIndustry } from '../../../contexts/IndustryContext';
|
||||||
|
import { stockService } from '../../../services/stockService';
|
||||||
|
import { logger } from '../../../utils/logger';
|
||||||
|
import PopularKeywords from './PopularKeywords';
|
||||||
|
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const { Option } = AntSelect;
|
||||||
|
|
||||||
|
const UnifiedSearchBox = ({
|
||||||
|
onSearch,
|
||||||
|
popularKeywords = [],
|
||||||
|
filters = {},
|
||||||
|
loading = false
|
||||||
|
}) => {
|
||||||
|
const [searchValue, setSearchValue] = useState(''); // 统一搜索值
|
||||||
|
const [isStockSearch, setIsStockSearch] = useState(false); // 是否股票搜索
|
||||||
|
const [stockOptions, setStockOptions] = useState([]); // 股票下拉选项列表
|
||||||
|
const [allStocks, setAllStocks] = useState([]); // 所有股票数据
|
||||||
|
const [industryValue, setIndustryValue] = useState([]);
|
||||||
|
|
||||||
|
// 使用全局行业数据
|
||||||
|
const { industryData, loadIndustryData, loading: industryLoading } = useIndustry();
|
||||||
|
|
||||||
|
// 加载所有股票数据
|
||||||
|
useEffect(() => {
|
||||||
|
const loadStocks = async () => {
|
||||||
|
const response = await stockService.getAllStocks();
|
||||||
|
if (response.success && response.data) {
|
||||||
|
setAllStocks(response.data);
|
||||||
|
logger.debug('UnifiedSearchBox', '股票数据加载成功', {
|
||||||
|
count: response.data.length
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadStocks();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Cascader 获得焦点时加载数据
|
||||||
|
const handleCascaderFocus = async () => {
|
||||||
|
if (!industryData || industryData.length === 0) {
|
||||||
|
logger.debug('UnifiedSearchBox', 'Cascader 获得焦点，开始加载行业数据');
|
||||||
|
await loadIndustryData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ⚡ 提取 filters 中的原始值，避免对象引用导致无限循环
|
||||||
|
const stockCode = filters.stock_code;
|
||||||
|
const q = filters.q;
|
||||||
|
const industryCode = filters.industry_code;
|
||||||
|
|
||||||
|
// 初始化：从 URL 恢复状态
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (stockCode) {
|
||||||
|
setSearchValue(stockCode);
|
||||||
|
setIsStockSearch(true);
|
||||||
|
} else if (q) {
|
||||||
|
setSearchValue(q);
|
||||||
|
setIsStockSearch(false);
|
||||||
|
}
|
||||||
|
if (industryCode) {
|
||||||
|
// TODO: 从 industry_code 恢复 industryValue 需要查找对应路径
|
||||||
|
}
|
||||||
|
}, [stockCode, q, industryCode]); // ⚡ 只依赖原始值，不依赖整个 filters 对象
|
||||||
|
|
||||||
|
// AutoComplete 搜索股票（模糊匹配 code 或 name）
|
||||||
|
const handleSearch = (value) => {
|
||||||
|
if (!value || !allStocks || allStocks.length === 0) {
|
||||||
|
setStockOptions([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用 stockService 进行模糊搜索
|
||||||
|
const results = stockService.fuzzySearch(value, allStocks, 10);
|
||||||
|
|
||||||
|
// 转换为 AutoComplete 选项格式
|
||||||
|
const options = results.map(stock => ({
|
||||||
|
value: stock.code,
|
||||||
|
label: (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<StockOutlined style={{ color: '#1890ff' }} />
|
||||||
|
<span style={{ fontWeight: 500, color: '#333' }}>{stock.code}</span>
|
||||||
|
<span style={{ color: '#666' }}>{stock.name}</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
// 保存完整的股票信息，用于选中后显示
|
||||||
|
stockInfo: stock
|
||||||
|
}));
|
||||||
|
|
||||||
|
setStockOptions(options);
|
||||||
|
logger.debug('UnifiedSearchBox', '股票模糊搜索', {
|
||||||
|
query: value,
|
||||||
|
resultCount: options.length
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选中股票（从下拉选择）
|
||||||
|
const handleStockSelect = (value, option) => {
|
||||||
|
const stockInfo = option.stockInfo;
|
||||||
|
if (stockInfo) {
|
||||||
|
// 显示格式：股票代码 + 股票名称
|
||||||
|
const displayValue = `${stockInfo.code} ${stockInfo.name}`;
|
||||||
|
setSearchValue(displayValue);
|
||||||
|
setIsStockSearch(true);
|
||||||
|
logger.debug('UnifiedSearchBox', '选中股票', {
|
||||||
|
code: stockInfo.code,
|
||||||
|
name: stockInfo.name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 日期范围变化
|
||||||
|
const handleDateRangeChange = (dates) => {
|
||||||
|
// 这里不直接调用 onSearch，等用户点击搜索按钮
|
||||||
|
logger.debug('UnifiedSearchBox', '日期范围变化', { dates });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重要性变化
|
||||||
|
const handleImportanceChange = (value) => {
|
||||||
|
logger.debug('UnifiedSearchBox', '重要性变化', { value });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 排序变化
|
||||||
|
const handleSortChange = (value) => {
|
||||||
|
// 排序直接生效
|
||||||
|
onSearch({ sort: value, page: 1 });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 主搜索（点击搜索按钮或回车）
|
||||||
|
const handleMainSearch = () => {
|
||||||
|
// 直接输入文本（未选择下拉股票）时，作为话题搜索
|
||||||
|
if (!isStockSearch && searchValue) {
|
||||||
|
logger.debug('UnifiedSearchBox', '话题搜索', { topic: searchValue });
|
||||||
|
}
|
||||||
|
handleApplyFilters();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理输入变化
|
||||||
|
const handleInputChange = (value) => {
|
||||||
|
setSearchValue(value);
|
||||||
|
// 输入变化时重置股票搜索标记（只有从下拉选择才是股票搜索）
|
||||||
|
if (isStockSearch) {
|
||||||
|
setIsStockSearch(false);
|
||||||
|
logger.debug('UnifiedSearchBox', '切换为话题搜索模式');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 应用筛选
|
||||||
|
const handleApplyFilters = () => {
|
||||||
|
const params = { page: 1 };
|
||||||
|
|
||||||
|
if (isStockSearch && searchValue) {
|
||||||
|
// 股票搜索模式：从下拉选择的股票
|
||||||
|
// 提取股票代码（searchValue 格式："000001 平安银行"）
|
||||||
|
const stockCode = searchValue.split(' ')[0];
|
||||||
|
params.stock_code = stockCode;
|
||||||
|
params.q = '';
|
||||||
|
params.industry_code = '';
|
||||||
|
params.industry_classification = '';
|
||||||
|
logger.debug('UnifiedSearchBox', '应用股票筛选', { stockCode });
|
||||||
|
} else {
|
||||||
|
// 话题搜索模式：直接输入的文本
|
||||||
|
params.q = searchValue || '';
|
||||||
|
params.stock_code = '';
|
||||||
|
|
||||||
|
if (industryValue && industryValue.length > 0) {
|
||||||
|
params.industry_code = industryValue[industryValue.length - 1];
|
||||||
|
params.industry_classification = industryValue[0];
|
||||||
|
} else {
|
||||||
|
params.industry_code = '';
|
||||||
|
params.industry_classification = '';
|
||||||
|
}
|
||||||
|
logger.debug('UnifiedSearchBox', '应用话题筛选', { topic: searchValue });
|
||||||
|
}
|
||||||
|
|
||||||
|
onSearch(params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置筛选
|
||||||
|
const handleReset = () => {
|
||||||
|
setSearchValue('');
|
||||||
|
setIsStockSearch(false);
|
||||||
|
setStockOptions([]);
|
||||||
|
setIndustryValue([]);
|
||||||
|
|
||||||
|
onSearch({
|
||||||
|
q: '',
|
||||||
|
stock_code: '',
|
||||||
|
industry_code: '',
|
||||||
|
industry_classification: '',
|
||||||
|
sort: 'new',
|
||||||
|
importance: 'all',
|
||||||
|
page: 1
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成已选条件标签
|
||||||
|
const filterTags = useMemo(() => {
|
||||||
|
const tags = [];
|
||||||
|
|
||||||
|
if (isStockSearch && searchValue) {
|
||||||
|
tags.push({ key: 'stock', label: `股票: ${searchValue}` });
|
||||||
|
} else if (!isStockSearch && searchValue) {
|
||||||
|
tags.push({ key: 'topic', label: `话题: ${searchValue}` });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (industryValue && industryValue.length > 0) {
|
||||||
|
const industryLabel = industryValue.slice(1).join(' > ');
|
||||||
|
tags.push({ key: 'industry', label: `行业: ${industryLabel}` });
|
||||||
|
}
|
||||||
|
|
||||||
|
return tags;
|
||||||
|
}, [searchValue, isStockSearch, industryValue]);
|
||||||
|
|
||||||
|
// 移除单个标签
|
||||||
|
const handleRemoveTag = (key) => {
|
||||||
|
if (key === 'topic' || key === 'stock') {
|
||||||
|
setSearchValue('');
|
||||||
|
setIsStockSearch(false);
|
||||||
|
} else if (key === 'industry') {
|
||||||
|
setIndustryValue([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(handleApplyFilters, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
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={searchValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onSearch={handleSearch}
|
||||||
|
onSelect={handleStockSelect}
|
||||||
|
options={stockOptions}
|
||||||
|
placeholder="请输入股票代码/股票名称/相关话题"
|
||||||
|
onPressEnter={handleMainSearch}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
size="large"
|
||||||
|
notFoundContent={searchValue && stockOptions.length === 0 ? "未找到匹配的股票" : null}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={handleMainSearch}
|
||||||
|
loading={loading}
|
||||||
|
size="large"
|
||||||
|
style={{ minWidth: 80 }}
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</Space.Compact>
|
||||||
|
|
||||||
|
{/* 第二行：热门概念 */}
|
||||||
|
<div style={{ marginBottom: 12 }}>
|
||||||
|
<PopularKeywords />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 第三行：筛选器 + 排序 */}
|
||||||
|
<Space style={{ width: '100%', justifyContent: 'space-between' }} size="middle">
|
||||||
|
{/* 左侧：筛选器组 */}
|
||||||
|
<Space size="middle" wrap>
|
||||||
|
<span style={{ fontSize: 14, color: '#666', fontWeight: 'bold' }}>筛选:</span>
|
||||||
|
{/* 行业分类 */}
|
||||||
|
<Cascader
|
||||||
|
value={industryValue}
|
||||||
|
onChange={setIndustryValue}
|
||||||
|
onFocus={handleCascaderFocus}
|
||||||
|
options={industryData || []}
|
||||||
|
placeholder="行业分类"
|
||||||
|
changeOnSelect
|
||||||
|
showSearch={{
|
||||||
|
filter: (inputValue, path) =>
|
||||||
|
path.some(option =>
|
||||||
|
option.label.toLowerCase().includes(inputValue.toLowerCase())
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
allowClear
|
||||||
|
expandTrigger="hover"
|
||||||
|
displayRender={(labels) => labels.join(' > ')}
|
||||||
|
disabled={industryLoading}
|
||||||
|
loading={industryLoading}
|
||||||
|
style={{ width: 200 }}
|
||||||
|
size="middle"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 日期范围 */}
|
||||||
|
<RangePicker
|
||||||
|
onChange={handleDateRangeChange}
|
||||||
|
locale={locale}
|
||||||
|
placeholder={['开始日期', '结束日期']}
|
||||||
|
style={{ width: 240 }}
|
||||||
|
size="middle"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 重要性 */}
|
||||||
|
<Space size="small">
|
||||||
|
<span style={{ fontSize: 14, color: '#666' }}>重要性:</span>
|
||||||
|
<AntSelect
|
||||||
|
defaultValue="all"
|
||||||
|
onChange={handleImportanceChange}
|
||||||
|
style={{ width: 100 }}
|
||||||
|
size="middle"
|
||||||
|
>
|
||||||
|
<Option value="all">全部</Option>
|
||||||
|
<Option value="S">S级</Option>
|
||||||
|
<Option value="A">A级</Option>
|
||||||
|
<Option value="B">B级</Option>
|
||||||
|
<Option value="C">C级</Option>
|
||||||
|
</AntSelect>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
{/* 重置按钮 - 现代化设计 */}
|
||||||
|
<Button
|
||||||
|
icon={<CloseCircleOutlined />}
|
||||||
|
onClick={handleReset}
|
||||||
|
size="middle"
|
||||||
|
style={{
|
||||||
|
borderRadius: 6,
|
||||||
|
border: '1px solid #d9d9d9',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
color: '#666',
|
||||||
|
fontWeight: 500,
|
||||||
|
padding: '4px 12px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4,
|
||||||
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#ff4d4f';
|
||||||
|
e.currentTarget.style.color = '#ff4d4f';
|
||||||
|
e.currentTarget.style.backgroundColor = '#fff1f0';
|
||||||
|
e.currentTarget.style.boxShadow = '0 2px 8px rgba(255, 77, 79, 0.15)';
|
||||||
|
e.currentTarget.style.transform = 'translateY(-1px)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#d9d9d9';
|
||||||
|
e.currentTarget.style.color = '#666';
|
||||||
|
e.currentTarget.style.backgroundColor = '#fff';
|
||||||
|
e.currentTarget.style.boxShadow = '0 1px 2px rgba(0, 0, 0, 0.05)';
|
||||||
|
e.currentTarget.style.transform = 'translateY(0)';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
{/* 右侧：排序 */}
|
||||||
|
<Space size="small">
|
||||||
|
<span style={{ fontSize: 14, color: '#666' }}>排序:</span>
|
||||||
|
<AntSelect
|
||||||
|
defaultValue="new"
|
||||||
|
onChange={handleSortChange}
|
||||||
|
style={{ width: 120 }}
|
||||||
|
size="middle"
|
||||||
|
>
|
||||||
|
<Option value="new">最新</Option>
|
||||||
|
<Option value="hot">最热</Option>
|
||||||
|
<Option value="importance">重要性</Option>
|
||||||
|
</AntSelect>
|
||||||
|
</Space>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
{/* 已选条件标签 */}
|
||||||
|
{filterTags.length > 0 && (
|
||||||
|
<Space size={[8, 8]} wrap style={{ marginTop: 12 }}>
|
||||||
|
{filterTags.map(tag => (
|
||||||
|
<Tag
|
||||||
|
key={tag.key}
|
||||||
|
closable
|
||||||
|
onClose={() => handleRemoveTag(tag.key)}
|
||||||
|
color="blue"
|
||||||
|
>
|
||||||
|
{tag.label}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UnifiedSearchBox;
|
||||||
Reference in New Issue
Block a user