diff --git a/src/app/live/page.tsx b/src/app/live/page.tsx index 693e97f..4670d89 100644 --- a/src/app/live/page.tsx +++ b/src/app/live/page.tsx @@ -104,6 +104,9 @@ function LivePageClient() { // 过滤后的频道列表 const [filteredChannels, setFilteredChannels] = useState([]); + // 搜索关键词 + const [searchKeyword, setSearchKeyword] = useState(''); + // 节目单信息 const [epgData, setEpgData] = useState<{ tvgId: string; @@ -463,6 +466,9 @@ function LivePageClient() { // 清空节目单信息 setEpgData(null); + // 清空搜索关键词 + setSearchKeyword(''); + setCurrentSource(source); await fetchChannels(source); } catch (err) { @@ -656,13 +662,27 @@ function LivePageClient() { } }; + // 过滤频道(根据分组和搜索关键词) + const filterChannels = (group: string, keyword: string) => { + let filtered = currentChannels.filter(channel => channel.group === group); + + // 如果有搜索关键词,进一步过滤 + if (keyword.trim()) { + filtered = filtered.filter(channel => + channel.name.toLowerCase().includes(keyword.toLowerCase()) + ); + } + + return filtered; + }; + // 切换分组 const handleGroupChange = (group: string) => { // 如果正在切换直播源,则禁用分组切换 if (isSwitchingSource) return; setSelectedGroup(group); - const filtered = currentChannels.filter(channel => channel.group === group); + const filtered = filterChannels(group, searchKeyword); setFilteredChannels(filtered); // 如果当前选中的频道在新的分组中,自动滚动到该频道位置 @@ -681,6 +701,44 @@ function LivePageClient() { } }; + // 处理搜索 + const handleSearch = (keyword: string) => { + setSearchKeyword(keyword); + + if (!selectedGroup) return; + + // 先在当前分组搜索 + let filtered = filterChannels(selectedGroup, keyword); + + // 如果当前分组没有匹配的频道,且有搜索关键词,轮询所有分组 + if (filtered.length === 0 && keyword.trim()) { + const groups = Object.keys(groupedChannels); + + // 轮询所有分组,找到第一个有匹配频道的分组 + for (const group of groups) { + const groupFiltered = filterChannels(group, keyword); + if (groupFiltered.length > 0) { + // 找到有匹配频道的分组,自动切换 + setSelectedGroup(group); + setFilteredChannels(groupFiltered); + + // 滚动到频道列表顶端 + if (channelListRef.current) { + channelListRef.current.scrollTo({ + top: 0, + behavior: 'smooth' + }); + } + + return; + } + } + } + + // 如果当前分组有匹配的频道,或者所有分组都没有匹配的频道,使用当前分组的结果 + setFilteredChannels(filtered); + }; + // 切换收藏 const handleToggleFavorite = async () => { if (!currentSourceRef.current || !currentChannelRef.current) return; @@ -1503,6 +1561,55 @@ function LivePageClient() { {/* 频道 Tab 内容 */} {activeTab === 'channels' && ( <> + {/* 搜索框 */} +
+
+ handleSearch(e.target.value)} + placeholder='搜索频道...' + disabled={isSwitchingSource} + className={`w-full px-3 py-2 pl-9 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all ${ + isSwitchingSource ? 'opacity-50 cursor-not-allowed' : '' + }`} + /> + + + + {searchKeyword && ( + + )} +
+
+ {/* 分组标签 */}
{/* 切换状态提示 */} @@ -1617,13 +1724,29 @@ function LivePageClient() { ) : (
- + {searchKeyword ? ( + + + + ) : ( + + )}

- 暂无可用频道 + {searchKeyword ? '未找到匹配的频道' : '暂无可用频道'}

- 请选择其他直播源或稍后再试 + {searchKeyword ? '请尝试其他搜索关键词' : '请选择其他直播源或稍后再试'}

)}