-
-
-
- IEEE 配置提示
-
-
-
- - 需要在 .env 中设置 IEEE_API_KEY
- - 免费版限制：50 次 API 调用/天
- - IEEE PDF 暂不支持在线阅读
- - 建议在主题设置中配置独立配额
-
+
+ {isSelected && }
+
+
+ );
+ })}
+ )}
+
+ );
+ })}
+
+ {selectedChannels.includes('ieee') && (
+
+
+
+
+
+ IEEE 配置提示
+
+
+ - • 需在 .env 中设置 IEEE_API_KEY
+ - • 免费版限制：50 次/天
+ - • 建议在主题设置中配置独立配额
+
From 5b997747a1c94b3c066d98677fc55a8603843302 Mon Sep 17 00:00:00 2001
From: Color2333 <1552429809@qq.com>
Date: Mon, 23 Mar 2026 14:26:09 +0800
Subject: [PATCH 07/14] feat(search): add MultiSourceSearchBar with channel
suggestions
---
.../search/MultiSourceSearchBar.tsx | 166 ++++++++++++++++++
1 file changed, 166 insertions(+)
create mode 100644 frontend/src/components/search/MultiSourceSearchBar.tsx
diff --git a/frontend/src/components/search/MultiSourceSearchBar.tsx b/frontend/src/components/search/MultiSourceSearchBar.tsx
new file mode 100644
index 0000000..f6a9218
--- /dev/null
+++ b/frontend/src/components/search/MultiSourceSearchBar.tsx
@@ -0,0 +1,166 @@
+import React, { useState, useCallback } from 'react';
+import { Search, Loader2, Sparkles } from 'lucide-react';
+import { useChannels } from '@/contexts/ChannelContext';
+
+interface MultiSourceSearchBarProps {
+ onSearch: (query: string, channels: string[]) => void;
+ loading?: boolean;
+}
+
+interface ChannelSuggestion {
+ recommended: string[];
+ alternatives: string[];
+ reasoning: string;
+}
+
+export const MultiSourceSearchBar: React.FC
= ({
+ onSearch,
+ loading = false,
+}) => {
+ const [query, setQuery] = useState('');
+ const [selectedChannels, setSelectedChannels] = useState(['arxiv']);
+ const [suggestions, setSuggestions] = useState(null);
+ const { channels } = useChannels();
+
+ const fetchSuggestions = useCallback(async (q: string) => {
+ if (!q.trim()) {
+ setSuggestions(null);
+ return;
+ }
+ fetch(`/papers/suggest-channels?query=${encodeURIComponent(q)}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('auth_token') || ''}`,
+ },
+ })
+ .then((res) => res.ok && res.json())
+ .then((data) => data && setSuggestions(data))
+ .catch(() => {});
+ }, []);
+
+ const handleQueryChange = (e: React.ChangeEvent) => {
+ const val = e.target.value;
+ setQuery(val);
+ fetchSuggestions(val);
+ };
+
+ const handleChannelToggle = (channelId: string) => {
+ setSelectedChannels((prev) =>
+ prev.includes(channelId)
+ ? prev.filter((id) => id !== channelId)
+ : [...prev, channelId],
+ );
+ };
+
+ const handleSearch = () => {
+ if (!query.trim() || selectedChannels.length === 0) return;
+ onSearch(query, selectedChannels);
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ handleSearch();
+ }
+ };
+
+ const applyRecommendation = () => {
+ if (suggestions?.recommended) {
+ setSelectedChannels(suggestions.recommended);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {suggestions && suggestions.recommended.length > 0 && (
+
+
+
+ 推荐渠道：
+
+
+ {suggestions.recommended.map((id) => {
+ const ch = channels.find((c) => c.id === id);
+ return ch ? (
+
+ {ch.name}
+
+ ) : null;
+ })}
+
+ {JSON.stringify(suggestions.recommended.sort()) !== JSON.stringify(selectedChannels.sort()) && (
+
+ )}
+
+ )}
+
+
+ 渠道：
+ {channels.map((channel) => {
+ const isSelected = selectedChannels.includes(channel.id);
+ return (
+
+ );
+ })}
+
+
+
+
+
+ 共 {totalResults} 篇，来自
+
+ {Object.entries(channelStats).map(([ch, stat]) => (
+
+ {ch}: {stat.total}
+ {stat.error && ` (${stat.error})`}
+
+ ))}
+
+
+
+
+
+
+ {filtered.map((paper) => {
+ const isExpanded = expandedPaper === paper.id;
+ const primarySource = paper.sources[0];
+
+ return (
+
+
+
+ {isExpanded && paper.sources.length > 1 && (
+
+
+
+
+ | 渠道 |
+ 外部ID |
+ 引用 |
+ 影响因子 |
+ 特殊 |
+
+
+
+ {paper.sources.map((source) => (
+
+ | {source.channel} |
+
+ {source.externalId.slice(0, 20)}...
+ |
+ {source.citations ?? '-'} |
+
+ {source.impactFactor ?? '-'}
+ |
+
+ {source.tldr && (
+ TL;DR
+ )}
+ |
+
+ ))}
+
+
+
+ )}
+
+ {isExpanded && primarySource?.url && (
+
+ )}
+
+ );
+ })}
+
+