265 lines
9.2 KiB
JavaScript
265 lines
9.2 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect, useRef } from 'react';
|
||
import {
|
||
Box,
|
||
TextField,
|
||
InputAdornment,
|
||
List,
|
||
ListItem,
|
||
ListItemButton,
|
||
ListItemText,
|
||
Paper,
|
||
Typography,
|
||
ClickAwayListener,
|
||
Fade,
|
||
Avatar,
|
||
useTheme,
|
||
alpha
|
||
} from '@mui/material';
|
||
import SearchIcon from '@mui/icons-material/Search';
|
||
import LaunchIcon from '@mui/icons-material/Launch';
|
||
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
|
||
import sites from '@/constant/sites.json';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
export function DatasetSearchBar() {
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||
const [recentSearches, setRecentSearches] = useState([]);
|
||
const searchRef = useRef(null);
|
||
const suggestionsRef = useRef(null);
|
||
const theme = useTheme();
|
||
const { t } = useTranslation();
|
||
|
||
// 从 localStorage 加载最近搜索
|
||
useEffect(() => {
|
||
const savedSearches = localStorage.getItem('recentDatasetSearches');
|
||
if (savedSearches) {
|
||
try {
|
||
const searches = JSON.parse(savedSearches);
|
||
setRecentSearches(searches);
|
||
} catch (e) {
|
||
console.error('解析最近搜索失败', e);
|
||
}
|
||
}
|
||
}, []);
|
||
|
||
// 处理搜索输入变化
|
||
const handleSearchChange = event => {
|
||
setSearchQuery(event.target.value);
|
||
if (event.target.value) {
|
||
setShowSuggestions(true);
|
||
} else {
|
||
setShowSuggestions(false);
|
||
}
|
||
};
|
||
|
||
// 处理回车搜索
|
||
const handleSearchSubmit = event => {
|
||
if (event.key === 'Enter' && searchQuery.trim()) {
|
||
// 默认使用第一个搜索引擎
|
||
if (sites.length > 0) {
|
||
handleSuggestionClick(sites[0]);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 保存最近搜索
|
||
const saveRecentSearch = query => {
|
||
if (!query.trim()) return;
|
||
|
||
// 添加到最近搜索并去重
|
||
const updatedSearches = [query, ...recentSearches.filter(s => s !== query)].slice(0, 5);
|
||
setRecentSearches(updatedSearches);
|
||
|
||
// 保存到 localStorage
|
||
try {
|
||
localStorage.setItem('recentDatasetSearches', JSON.stringify(updatedSearches));
|
||
} catch (e) {
|
||
console.error('保存最近搜索失败', e);
|
||
}
|
||
};
|
||
|
||
// 处理点击搜索建议
|
||
const handleSuggestionClick = site => {
|
||
if (searchQuery.trim()) {
|
||
// 根据不同网站处理搜索参数
|
||
let searchUrl = site.link;
|
||
|
||
// 如果链接中不包含问号，则添加搜索参数
|
||
if (site.link.includes('huggingface.co')) {
|
||
searchUrl = `${site.link}?sort=trending&search=${encodeURIComponent(searchQuery)}`;
|
||
} else if (site.link.includes('kaggle.com')) {
|
||
searchUrl = `${site.link}?search=${encodeURIComponent(searchQuery)}`;
|
||
} else if (site.link.includes('datasetsearch.research.google.com')) {
|
||
searchUrl = `${site.link}/search?query=${encodeURIComponent(searchQuery)}&src=0`;
|
||
} else if (site.link.includes('paperswithcode.com')) {
|
||
searchUrl = `${site.link}?q=${encodeURIComponent(searchQuery)}`;
|
||
} else if (site.link.includes('modelscope.cn')) {
|
||
searchUrl = `${site.link}?query=${encodeURIComponent(searchQuery)}`;
|
||
} else if (site.link.includes('opendatalab.com')) {
|
||
searchUrl = `${site.link}?keywords=${encodeURIComponent(searchQuery)}`;
|
||
} else if (site.link.includes('tianchi.aliyun.com')) {
|
||
searchUrl = `${site.link}?q=${encodeURIComponent(searchQuery)}`;
|
||
} else {
|
||
// 默认处理方式，在URL后添加搜索参数
|
||
searchUrl = `${site.link}${site.link.includes('?') ? '&' : '?'}search=${encodeURIComponent(searchQuery)}`;
|
||
}
|
||
|
||
// 保存最近搜索
|
||
saveRecentSearch(searchQuery);
|
||
|
||
window.open(searchUrl, '_blank');
|
||
}
|
||
setShowSuggestions(false);
|
||
};
|
||
|
||
// 处理点击外部关闭建议
|
||
const handleClickAway = event => {
|
||
// 确保点击的不是建议框本身
|
||
if (suggestionsRef.current && !suggestionsRef.current.contains(event.target)) {
|
||
setShowSuggestions(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<ClickAwayListener onClickAway={handleClickAway}>
|
||
<Box sx={{ position: 'relative', width: '100%', zIndex: 1300 }} ref={searchRef}>
|
||
<TextField
|
||
fullWidth
|
||
placeholder={t('datasetSquare.searchPlaceholder')}
|
||
value={searchQuery}
|
||
onChange={handleSearchChange}
|
||
onKeyDown={handleSearchSubmit}
|
||
onClick={() => searchQuery && setShowSuggestions(true)}
|
||
InputProps={{
|
||
startAdornment: (
|
||
<InputAdornment position="start">
|
||
<SearchIcon color="primary" />
|
||
</InputAdornment>
|
||
),
|
||
sx: {
|
||
height: 56,
|
||
borderRadius: 3,
|
||
backgroundColor:
|
||
theme.palette.mode === 'dark'
|
||
? alpha(theme.palette.background.default, 0.6)
|
||
: alpha(theme.palette.background.default, 0.8),
|
||
backdropFilter: 'blur(8px)',
|
||
px: 2,
|
||
transition: 'all 0.3s ease',
|
||
boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main, 0.15)}`,
|
||
'&.MuiOutlinedInput-root': {
|
||
'& fieldset': {
|
||
borderColor: 'transparent'
|
||
},
|
||
'&:hover fieldset': {
|
||
borderColor: 'transparent'
|
||
},
|
||
'&.Mui-focused': {
|
||
boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.3)}`,
|
||
backgroundColor:
|
||
theme.palette.mode === 'dark'
|
||
? alpha(theme.palette.background.paper, 0.8)
|
||
: alpha(theme.palette.common.white, 0.95)
|
||
},
|
||
'&.Mui-focused fieldset': {
|
||
borderColor: 'transparent'
|
||
}
|
||
}
|
||
}
|
||
}}
|
||
sx={{
|
||
mb: 1,
|
||
'& .MuiInputBase-input': {
|
||
fontSize: '1rem',
|
||
fontWeight: 500,
|
||
color: theme.palette.text.primary
|
||
},
|
||
'& .MuiInputBase-input::placeholder': {
|
||
color: alpha(theme.palette.text.primary, 0.6),
|
||
opacity: 0.7
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/* 搜索建议下拉框 - 使用绝对定位确保不被裁剪 */}
|
||
{showSuggestions && searchQuery && (
|
||
<Box
|
||
ref={suggestionsRef}
|
||
sx={{
|
||
position: 'absolute',
|
||
width: '100%',
|
||
zIndex: 9999,
|
||
top: 'calc(100% + 8px)',
|
||
left: 0,
|
||
boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
|
||
pointerEvents: 'auto' // 确保可以点击
|
||
}}
|
||
>
|
||
<Fade in={showSuggestions}>
|
||
<Paper
|
||
elevation={6}
|
||
sx={{
|
||
width: '100%',
|
||
maxHeight: 350,
|
||
overflow: 'auto',
|
||
borderRadius: 2,
|
||
border: `1px solid ${alpha(theme.palette.primary.main, 0.1)}`,
|
||
position: 'relative'
|
||
}}
|
||
>
|
||
<List>
|
||
{sites.slice(0, 5).map((site, index) => (
|
||
<ListItem key={index} disablePadding>
|
||
<ListItemButton
|
||
onClick={() => handleSuggestionClick(site)}
|
||
sx={{
|
||
py: 1.5,
|
||
'&:hover': {
|
||
bgcolor: alpha(theme.palette.primary.main, 0.05)
|
||
}
|
||
}}
|
||
>
|
||
<ListItemText
|
||
primary={
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||
<Avatar
|
||
sx={{
|
||
width: 28,
|
||
height: 28,
|
||
mr: 1.5,
|
||
bgcolor: alpha(theme.palette.primary.main, 0.1),
|
||
color: theme.palette.primary.main
|
||
}}
|
||
>
|
||
<TravelExploreIcon fontSize="small" />
|
||
</Avatar>
|
||
<Typography>
|
||
{t('datasetSquare.searchVia')} <strong>{site.name}</strong> Search
|
||
</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mr: 1 }}>
|
||
"{searchQuery}"
|
||
</Typography>
|
||
<LaunchIcon fontSize="small" color="action" />
|
||
</Box>
|
||
</Box>
|
||
}
|
||
/>
|
||
</ListItemButton>
|
||
</ListItem>
|
||
))}
|
||
</List>
|
||
</Paper>
|
||
</Fade>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</ClickAwayListener>
|
||
);
|
||
}
|